{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Pagination",
  "dependencies": [
    "cn",
    "lucide-react",
    "rescript-base-ui"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Button",
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/Pagination.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule Size = {\n  @unboxed\n  type t =\n    | @as(\"icon\") Icon\n    | @as(\"default\") Default\n}\n\n@react.componentWithProps(BaseUi.Types.DomProps.t)\nlet make = (props: BaseUi.Types.DomProps.t) => {\n  let role = props.role->Option.getOr(\"navigation\")\n  <nav\n    {...props}\n    dataSlot={props.dataSlot->Option.getOr(\"pagination\")}\n    role\n    ariaLabel={props.ariaLabel->Option.getOr(\"pagination\")}\n    className={cn(\" mx-auto flex w-full justify-center\", props.className)}\n  />\n}\n\nmodule Content = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <ul\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"pagination-content\")}\n      className={cn(\"gap-0.5 flex items-center\", props.className)}\n    />\n}\n\nmodule Item = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <li {...props} dataSlot={props.dataSlot->Option.getOr(\"pagination-item\")} />\n}\n\nmodule Link = {\n  type props = {\n    ...BaseUi.Types.BaseDomProps.t,\n    ...BaseUi.Types.ExtraDomProps.t,\n    children?: React.element,\n    isActive?: bool,\n    size?: Size.t,\n  }\n\n  let toBaseUiProps: props => BaseUi.Types.DomProps.t = %raw(`({className, children, isActive, size, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let isActive = props.isActive->Option.getOr(false)\n    let size = props.size->Option.getOr(Size.Icon)\n    let children = props.children\n    <Button\n      variant={isActive ? Outline : Ghost}\n      size={(size :> Button.Size.t)}\n      className={cn(\"\", props.className)}\n      nativeButton={false}\n      render={<a\n        {...props->toBaseUiProps}\n        ariaCurrent=?{props.ariaCurrent->Option.orElse(isActive ? Some(#page) : None)}\n        dataSlot={props.dataSlot->Option.getOr(\"pagination-link\")}\n        dataActive=?{props.dataActive->Option.orElse(isActive ? Some(true) : None)}\n      />}\n      ?children\n    />\n  }\n}\n\nmodule Previous = {\n  type props = {\n    ...Link.props,\n    text?: string,\n  }\n\n  let toBaseUiProps: props => Link.props = %raw(`({text, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let text = props.text->Option.getOr(\"Previous\")\n    <Link\n      {...props->toBaseUiProps}\n      ariaLabel={props.ariaLabel->Option.getOr(\"Go to previous page\")}\n      size={props.size->Option.getOr(Size.Default)}\n      className={cn(\"pl-1.5!\", props.className)}\n    >\n      <Icons.ChevronLeft dataIcon=\"inline-start\" className=\"\" />\n      <span className=\"hidden sm:block\"> {text->React.string} </span>\n    </Link>\n  }\n}\n\nmodule Next = {\n  type props = {\n    ...Link.props,\n    text?: string,\n  }\n\n  let toBaseUiProps: props => Link.props = %raw(`({text, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let text = props.text->Option.getOr(\"Next\")\n    <Link\n      {...props->toBaseUiProps}\n      ariaLabel={props.ariaLabel->Option.getOr(\"Go to next page\")}\n      size={props.size->Option.getOr(Size.Default)}\n      className={cn(\"pr-1.5!\", props.className)}\n    >\n      <span className=\"hidden sm:block\"> {text->React.string} </span>\n      <Icons.ChevronRight dataIcon=\"inline-end\" className=\"\" />\n    </Link>\n  }\n}\n\nmodule Ellipsis = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) => {\n    let ariaHidden = props.ariaHidden->Option.getOr(true)\n    <span\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"pagination-ellipsis\")}\n      ariaHidden\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        props.className,\n      )}\n    >\n      <Icons.MoreHorizontal />\n      <span className=\"sr-only\"> {\"More pages\"->React.string} </span>\n    </span>\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/Pagination.res"
    }
  ],
  "type": "registry:ui"
}