@spark-ui/components 17.5.3 → 17.5.4-beta.1

package/dist/pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/pagination/utils.ts","../../src/pagination/PaginationContext.tsx","../../src/pagination/Pagination.tsx","../../src/pagination/PaginationEllipsis.tsx","../../src/pagination/PaginationFirstPageTrigger.tsx","../../src/pagination/PaginationItem.tsx","../../src/pagination/PaginationLastPageTrigger.tsx","../../src/pagination/PaginationNextTrigger.tsx","../../src/pagination/PaginationPages.tsx","../../src/pagination/PaginationPrevTrigger.tsx","../../src/pagination/index.ts"],"sourcesContent":["export function sliceArrayWithIndex(arr: any[], index: number, length: number) {\n  const relativeElements = (length - 1) / 2\n\n  let start = Math.max(0, index - relativeElements)\n  let end = Math.min(arr.length, index + relativeElements + 1)\n\n  if (end - start < length) {\n    start = Math.max(0, Math.min(start, arr.length - length))\n    end = Math.min(arr.length, start + length)\n  }\n\n  return arr.slice(start, end)\n}\n","import * as pagination from '@zag-js/pagination'\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { createContext, type ReactNode, useContext, useId } from 'react'\n\nimport { sliceArrayWithIndex } from './utils'\n\nexport interface PaginationContextState<T extends PropTypes = PropTypes> {\n  type: pagination.Props['type']\n  pagination: pagination.Api<T> & {\n    getFirstPageTriggerProps: () => ReturnType<pagination.Api<T>['getPrevTriggerProps']> & {\n      'data-part': string\n      onClick: () => void\n    }\n    getLastPageTriggerProps: () => ReturnType<pagination.Api<T>['getNextTriggerProps']> & {\n      'data-part': string\n      onClick: () => void\n    }\n  }\n}\n\nconst PaginationContext = createContext<PaginationContextState | null>(null)\n\nexport interface PaginationProviderProps {\n  children: ReactNode\n  /**\n   * Total number of data items available across all pages.\n   */\n  count: number\n  /**\n   * Maximum amount of items displayed on a single page.\n   */\n  pageSize: number\n  /**\n   * Number of visible pages (or ellipsis) between previous and next page triggers.\n   */\n  visiblePageItems?: number\n  /**\n   * The current page (active page)\n   */\n  page?: pagination.Props['page']\n  /**\n   * If your pagination contains buttons instead of links, set `type` to `button`, extra attributes will be applied on page items for a11y.\n   */\n  type?: pagination.Props['type']\n  onPageChange?: pagination.Props['onPageChange']\n  noEllipsis?: boolean\n}\n\nexport const PaginationProvider = ({\n  children,\n  count,\n  visiblePageItems = 7,\n  pageSize,\n  page,\n  onPageChange,\n  noEllipsis,\n  type = 'link',\n}: PaginationProviderProps) => {\n  /**\n   * Here `Infinity` is used because we apply a custom slice ourselves to manage the \"no ellipsis\" version.\n   * It means Zag won't filter out any page item, allowing us to apply our own slicing logic.\n   */\n  const siblingCount = noEllipsis ? Infinity : Math.max(0, Math.floor((visiblePageItems - 5) / 2))\n\n  const id = useId()\n\n  const service = useMachine(pagination.machine, {\n    id,\n    count,\n    siblingCount,\n    pageSize,\n    page,\n    onPageChange,\n    type,\n  })\n\n  const api = pagination.connect(service, normalizeProps)\n  const pages = noEllipsis\n    ? sliceArrayWithIndex(api.pages, api.page - 1, visiblePageItems)\n    : api.pages\n\n  return (\n    <PaginationContext.Provider\n      value={{\n        type,\n        pagination: {\n          ...api,\n          pages,\n          // Extending ZagJS anatomy\n          getFirstPageTriggerProps: () => {\n            return {\n              ...api.getPrevTriggerProps(),\n              id: `${api.getRootProps().id}:first`,\n              'data-part': 'first-page-trigger',\n              onClick: api.goToFirstPage,\n            }\n          },\n          getLastPageTriggerProps: () => {\n            return {\n              ...api.getNextTriggerProps(),\n              id: `${api.getRootProps().id}:last`,\n              'data-part': 'last-page-trigger',\n              onClick: api.goToLastPage,\n            }\n          },\n        },\n      }}\n    >\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n\nexport const usePagination = () => {\n  const context = useContext(PaginationContext)\n\n  if (!context) {\n    throw Error('usePagination must be used within a Pagination provider')\n  }\n\n  return context\n}\n","import { ReactNode } from 'react'\n\nimport {\n  PaginationProvider,\n  type PaginationProviderProps,\n  usePagination,\n} from './PaginationContext'\n\nexport type PaginationProps = PaginationProviderProps & { className?: string }\n\nexport const Pagination = ({\n  children,\n  visiblePageItems = 5,\n  type = 'link',\n  noEllipsis = false,\n  className,\n  ...rest\n}: PaginationProps) => {\n  return (\n    <PaginationProvider\n      visiblePageItems={visiblePageItems}\n      noEllipsis={noEllipsis}\n      type={type}\n      {...rest}\n    >\n      <PaginationWrapper className={className}>{children}</PaginationWrapper>\n    </PaginationProvider>\n  )\n}\n\nconst PaginationWrapper = ({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) => {\n  const { pagination } = usePagination()\n\n  const props = pagination.getRootProps()\n\n  return (\n    <nav data-spark-component=\"pagination\" {...props} className={className}>\n      <ul className=\"gap-md flex flex-wrap\">{children}</ul>\n    </nav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\ninterface EllipsisProps extends ComponentPropsWithRef<'span'> {\n  index: number\n}\n\nexport const Ellipsis = ({ children, index, className, ref, ...rest }: EllipsisProps) => {\n  const { pagination } = usePagination()\n  const apiProps = pagination.getEllipsisProps({ index })\n  const localProps = {\n    className: cx('flex size-sz-44 items-center justify-center', className),\n    ...rest,\n  }\n\n  const mergedProps = mergeProps(apiProps, localProps)\n\n  return (\n    <li>\n      <span data-spark-component=\"pagination-ellipsis\" ref={ref} {...mergedProps}>\n        {children || '\\u2026'}\n      </span>\n    </li>\n  )\n}\n\nEllipsis.displayName = 'Pagination.Ellipsis'\n","import { ArrowDoubleLeft } from '@spark-ui/icons/ArrowDoubleLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type FirstPageTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const FirstPageTrigger = ({\n  children,\n  className,\n  href,\n  ref,\n  ...props\n}: FirstPageTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getFirstPageTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-first-page-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowDoubleLeft />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactElement, Ref } from 'react'\n\nimport { Button } from '../button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type ItemProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  value: number\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A numbered page item.\n * Should be used within `Pagination.Pages` to ensure proper functionality and accessibility.\n *\n * Can be rendered as an anchor or a button :\n * - Set a `href` prop to render the item as an anchor element.\n * - When using `href`, the `asChild` prop isn’t available since the component will already be rendered as an anchor element.\n */\nexport function Item({ children, value, className, href, ref, ...props }: ItemProps): ReactElement {\n  const { pagination } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getItemProps({ type: 'page', value })\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-item',\n    intent: 'support',\n    design: apiProps['aria-current'] === 'page' ? 'filled' : 'contrast',\n    className: cx('size-sz-44', className),\n    ...props,\n  }\n\n  const mergedProps = mergeProps(apiProps, localProps)\n\n  return (\n    <li>\n      {href ? (\n        <Button ref={ref} {...mergedProps} asChild>\n          <a href={href}>{children || value}</a>\n        </Button>\n      ) : (\n        <Button ref={ref} {...mergedProps}>\n          {children || value}\n        </Button>\n      )}\n    </li>\n  )\n}\n\nItem.displayName = 'Pagination.Item'\n","import { ArrowDoubleRight } from '@spark-ui/icons/ArrowDoubleRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type LastPageTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const LastPageTrigger = ({\n  children,\n  className,\n  href,\n  ref,\n  ...props\n}: LastPageTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getLastPageTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-last-page-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowDoubleRight />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type NextTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const NextTrigger = ({ children, className, href, ref, ...props }: NextTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getNextTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-next-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowVerticalRight />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nNextTrigger.displayName = 'Pagination.NextTrigger'\n","import * as pagination from '@zag-js/pagination'\nimport { ReactNode } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\n// Extract the 'page' type element from the pagination API's 'pages' array.\ntype PageItem = Extract<pagination.Api['pages'][number], { type: 'page' }>\n\n// Define a type that conditionally tweaks the pagination API\n// based on the generic T parameter.\ntype TweakedPaginationApi<T extends 'noEllipsis' | ''> = Omit<pagination.Api, 'pages'> & {\n  pages: T extends 'noEllipsis' ? PageItem[] : pagination.Api['pages']\n}\n\ninterface PagesProps<T extends 'noEllipsis' | ''> {\n  children: (pagination: TweakedPaginationApi<T>) => ReactNode\n}\n\nexport const Pages = <T extends 'noEllipsis' | '' = ''>({ children }: PagesProps<T>) => {\n  const { pagination } = usePagination()\n\n  return children(pagination as TweakedPaginationApi<T>)\n}\n\nPages.displayName = 'Pagination.Pages'\n","import { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type PrevTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const PrevTrigger = ({ children, className, href, ref, ...props }: PrevTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getPrevTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-prev-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowVerticalLeft />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\n","import type { FC } from 'react'\n\nimport { Pagination as Root, type PaginationProps } from './Pagination'\nimport { Ellipsis } from './PaginationEllipsis'\nimport { FirstPageTrigger } from './PaginationFirstPageTrigger'\nimport { Item } from './PaginationItem'\nimport { LastPageTrigger } from './PaginationLastPageTrigger'\nimport { NextTrigger } from './PaginationNextTrigger'\nimport { Pages } from './PaginationPages'\nimport { PrevTrigger } from './PaginationPrevTrigger'\n\n/**\n * A navigation component that allows users to navigate through multiple pages of content.\n */\nexport const Pagination: FC<PaginationProps> & {\n  PrevTrigger: typeof PrevTrigger\n  NextTrigger: typeof NextTrigger\n  Pages: typeof Pages\n  Item: typeof Item\n  Ellipsis: typeof Ellipsis\n  FirstPageTrigger: typeof FirstPageTrigger\n  LastPageTrigger: typeof LastPageTrigger\n} = Object.assign(Root, {\n  PrevTrigger,\n  NextTrigger,\n  Pages,\n  Item,\n  Ellipsis,\n  FirstPageTrigger,\n  LastPageTrigger,\n})\n\nPagination.displayName = 'Pagination'\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\nNextTrigger.displayName = 'Pagination.NextTrigger'\nPages.displayName = 'Pagination.Pages'\nItem.displayName = 'Pagination.Item'\nEllipsis.displayName = 'Pagination.Ellipsis'\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/pagination/utils.ts","../../src/pagination/PaginationContext.tsx","../../src/pagination/Pagination.tsx","../../src/pagination/PaginationEllipsis.tsx","../../src/pagination/PaginationFirstPageTrigger.tsx","../../src/pagination/PaginationItem.tsx","../../src/pagination/PaginationLastPageTrigger.tsx","../../src/pagination/PaginationNextTrigger.tsx","../../src/pagination/PaginationPages.tsx","../../src/pagination/PaginationPrevTrigger.tsx","../../src/pagination/index.ts"],"sourcesContent":["export function sliceArrayWithIndex(arr: any[], index: number, length: number) {\n  const relativeElements = (length - 1) / 2\n\n  let start = Math.max(0, index - relativeElements)\n  let end = Math.min(arr.length, index + relativeElements + 1)\n\n  if (end - start < length) {\n    start = Math.max(0, Math.min(start, arr.length - length))\n    end = Math.min(arr.length, start + length)\n  }\n\n  return arr.slice(start, end)\n}\n","import * as pagination from '@zag-js/pagination'\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { createContext, type ReactNode, useContext, useId } from 'react'\n\nimport { sliceArrayWithIndex } from './utils'\n\nexport interface PaginationContextState<T extends PropTypes = PropTypes> {\n  type: pagination.Props['type']\n  pagination: pagination.Api<T> & {\n    getFirstPageTriggerProps: () => ReturnType<pagination.Api<T>['getPrevTriggerProps']> & {\n      'data-part': string\n      onClick: () => void\n    }\n    getLastPageTriggerProps: () => ReturnType<pagination.Api<T>['getNextTriggerProps']> & {\n      'data-part': string\n      onClick: () => void\n    }\n  }\n}\n\nconst PaginationContext = createContext<PaginationContextState | null>(null)\n\nexport interface PaginationProviderProps {\n  children: ReactNode\n  /**\n   * Total number of data items available across all pages.\n   */\n  count: number\n  /**\n   * Maximum amount of items displayed on a single page.\n   */\n  pageSize: number\n  /**\n   * Number of visible pages (or ellipsis) between previous and next page triggers.\n   */\n  visiblePageItems?: number\n  /**\n   * The current page (active page)\n   */\n  page?: pagination.Props['page']\n  /**\n   * If your pagination contains buttons instead of links, set `type` to `button`, extra attributes will be applied on page items for a11y.\n   */\n  type?: pagination.Props['type']\n  onPageChange?: pagination.Props['onPageChange']\n  noEllipsis?: boolean\n}\n\nexport const PaginationProvider = ({\n  children,\n  count,\n  visiblePageItems = 7,\n  pageSize,\n  page,\n  onPageChange,\n  noEllipsis,\n  type = 'link',\n}: PaginationProviderProps) => {\n  /**\n   * Here `Infinity` is used because we apply a custom slice ourselves to manage the \"no ellipsis\" version.\n   * It means Zag won't filter out any page item, allowing us to apply our own slicing logic.\n   */\n  const siblingCount = noEllipsis ? Infinity : Math.max(0, Math.floor((visiblePageItems - 5) / 2))\n\n  const id = useId()\n\n  const service = useMachine(pagination.machine, {\n    id,\n    count,\n    siblingCount,\n    pageSize,\n    page,\n    onPageChange,\n    type,\n  })\n\n  const api = pagination.connect(service, normalizeProps)\n  const pages = noEllipsis\n    ? sliceArrayWithIndex(api.pages, api.page - 1, visiblePageItems)\n    : api.pages\n\n  return (\n    <PaginationContext.Provider\n      value={{\n        type,\n        pagination: {\n          ...api,\n          pages,\n          // Extending ZagJS anatomy\n          getFirstPageTriggerProps: () => {\n            return {\n              ...api.getPrevTriggerProps(),\n              id: `${api.getRootProps().id}:first`,\n              'data-part': 'first-page-trigger',\n              onClick: api.goToFirstPage,\n            }\n          },\n          getLastPageTriggerProps: () => {\n            return {\n              ...api.getNextTriggerProps(),\n              id: `${api.getRootProps().id}:last`,\n              'data-part': 'last-page-trigger',\n              onClick: api.goToLastPage,\n            }\n          },\n        },\n      }}\n    >\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n\nexport const usePagination = () => {\n  const context = useContext(PaginationContext)\n\n  if (!context) {\n    throw Error('usePagination must be used within a Pagination provider')\n  }\n\n  return context\n}\n","import { ReactNode } from 'react'\n\nimport {\n  PaginationProvider,\n  type PaginationProviderProps,\n  usePagination,\n} from './PaginationContext'\n\nexport type PaginationProps = PaginationProviderProps & { className?: string }\n\nexport const Pagination = ({\n  children,\n  visiblePageItems = 5,\n  type = 'link',\n  noEllipsis = false,\n  className,\n  ...rest\n}: PaginationProps) => {\n  return (\n    <PaginationProvider\n      visiblePageItems={visiblePageItems}\n      noEllipsis={noEllipsis}\n      type={type}\n      {...rest}\n    >\n      <PaginationWrapper className={className}>{children}</PaginationWrapper>\n    </PaginationProvider>\n  )\n}\n\nconst PaginationWrapper = ({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) => {\n  const { pagination } = usePagination()\n\n  const props = pagination.getRootProps()\n\n  return (\n    <nav data-spark-component=\"pagination\" {...props} className={className}>\n      <ul className=\"gap-md flex flex-wrap\">{children}</ul>\n    </nav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\ninterface EllipsisProps extends ComponentPropsWithRef<'span'> {\n  index: number\n}\n\nexport const Ellipsis = ({ children, index, className, ref, ...rest }: EllipsisProps) => {\n  const { pagination } = usePagination()\n  const apiProps = pagination.getEllipsisProps({ index })\n  const localProps = {\n    className: cx('flex size-sz-44 items-center justify-center', className),\n    ...rest,\n  }\n\n  const mergedProps = mergeProps(apiProps, localProps)\n\n  return (\n    <li>\n      <span data-spark-component=\"pagination-ellipsis\" ref={ref} {...mergedProps}>\n        {children || '\\u2026'}\n      </span>\n    </li>\n  )\n}\n\nEllipsis.displayName = 'Pagination.Ellipsis'\n","import { ArrowDoubleLeft } from '@spark-ui/icons/ArrowDoubleLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type FirstPageTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const FirstPageTrigger = ({\n  children,\n  className,\n  href,\n  ref,\n  ...props\n}: FirstPageTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getFirstPageTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-first-page-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowDoubleLeft />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactElement, Ref } from 'react'\n\nimport { Button } from '../button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type ItemProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  value: number\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A numbered page item.\n * Should be used within `Pagination.Pages` to ensure proper functionality and accessibility.\n *\n * Can be rendered as an anchor or a button :\n * - Set a `href` prop to render the item as an anchor element.\n * - When using `href`, the `asChild` prop isn’t available since the component will already be rendered as an anchor element.\n */\nexport function Item({ children, value, className, href, ref, ...props }: ItemProps): ReactElement {\n  const { pagination } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getItemProps({ type: 'page', value })\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-item',\n    intent: 'support',\n    design: apiProps['aria-current'] === 'page' ? 'filled' : 'contrast',\n    className: cx('size-sz-44', className),\n    ...props,\n  }\n\n  const mergedProps = mergeProps(apiProps, localProps)\n\n  return (\n    <li>\n      {href ? (\n        <Button ref={ref} {...mergedProps} asChild>\n          <a href={href}>{children || value}</a>\n        </Button>\n      ) : (\n        <Button ref={ref} {...mergedProps}>\n          {children || value}\n        </Button>\n      )}\n    </li>\n  )\n}\n\nItem.displayName = 'Pagination.Item'\n","import { ArrowDoubleRight } from '@spark-ui/icons/ArrowDoubleRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type LastPageTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const LastPageTrigger = ({\n  children,\n  className,\n  href,\n  ref,\n  ...props\n}: LastPageTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getLastPageTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-last-page-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowDoubleRight />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type NextTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const NextTrigger = ({ children, className, href, ref, ...props }: NextTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getNextTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-next-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowVerticalRight />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nNextTrigger.displayName = 'Pagination.NextTrigger'\n","import * as pagination from '@zag-js/pagination'\nimport { ReactNode } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\n// Extract the 'page' type element from the pagination API's 'pages' array.\ntype PageItem = Extract<pagination.Api['pages'][number], { type: 'page' }>\n\n// Define a type that conditionally tweaks the pagination API\n// based on the generic T parameter.\ntype TweakedPaginationApi<T extends 'noEllipsis' | ''> = Omit<pagination.Api, 'pages'> & {\n  pages: T extends 'noEllipsis' ? PageItem[] : pagination.Api['pages']\n}\n\ninterface PagesProps<T extends 'noEllipsis' | ''> {\n  children: (pagination: TweakedPaginationApi<T>) => ReactNode\n}\n\nexport const Pages = <T extends 'noEllipsis' | '' = ''>({ children }: PagesProps<T>) => {\n  const { pagination } = usePagination()\n\n  return children(pagination as TweakedPaginationApi<T>)\n}\n\nPages.displayName = 'Pagination.Pages'\n","import { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type PrevTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const PrevTrigger = ({ children, className, href, ref, ...props }: PrevTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getPrevTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-prev-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowVerticalLeft />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\n","import type { FC } from 'react'\n\nimport { Pagination as Root, type PaginationProps } from './Pagination'\nimport { Ellipsis } from './PaginationEllipsis'\nimport { FirstPageTrigger } from './PaginationFirstPageTrigger'\nimport { Item } from './PaginationItem'\nimport { LastPageTrigger } from './PaginationLastPageTrigger'\nimport { NextTrigger } from './PaginationNextTrigger'\nimport { Pages } from './PaginationPages'\nimport { PrevTrigger } from './PaginationPrevTrigger'\n\n/**\n * A navigation component that allows users to navigate through multiple pages of content.\n */\nexport const Pagination: FC<PaginationProps> & {\n  PrevTrigger: typeof PrevTrigger\n  NextTrigger: typeof NextTrigger\n  Pages: typeof Pages\n  Item: typeof Item\n  Ellipsis: typeof Ellipsis\n  FirstPageTrigger: typeof FirstPageTrigger\n  LastPageTrigger: typeof LastPageTrigger\n} = Object.assign(Root, {\n  PrevTrigger,\n  NextTrigger,\n  Pages,\n  Item,\n  Ellipsis,\n  FirstPageTrigger,\n  LastPageTrigger,\n})\n\nPagination.displayName = 'Pagination'\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\nNextTrigger.displayName = 'Pagination.NextTrigger'\nPages.displayName = 'Pagination.Pages'\nItem.displayName = 'Pagination.Item'\nEllipsis.displayName = 'Pagination.Ellipsis'\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n"],"mappings":"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"}

package/dist/pagination/index.mjs

@@ -63,10 +63,10 @@ var _ = i(null), v = ({ children: e, count: t, visiblePageItems: n = 7, pageSize
 		children: e
 	})
 }), x = ({ children: e, className: t }) => {
-	let { pagination: n } = y(), r = n.getRootProps();
+	let { pagination: n } = y();
 	return /* @__PURE__ */ s("nav", {
 		"data-spark-component": "pagination",
-		...r,
+		...n.getRootProps(),
 		className: t,
 		children: /* @__PURE__ */ s("ul", {
 			className: "gap-md flex flex-wrap",
@@ -78,14 +78,14 @@ b.displayName = "Pagination";
 //#endregion
 //#region src/pagination/PaginationEllipsis.tsx
 var S = ({ children: e, index: t, className: n, ref: i, ...a }) => {
-	let { pagination: o } = y(), c = d(o.getEllipsisProps({ index: t }), {
-		className: r("flex size-sz-44 items-center justify-center", n),
-		...a
-	});
+	let { pagination: o } = y();
 	return /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s("span", {
 		"data-spark-component": "pagination-ellipsis",
 		ref: i,
-		...c,
+		...d(o.getEllipsisProps({ index: t }), {
+			className: r("flex size-sz-44 items-center justify-center", n),
+			...a
+		}),
 		children: e || "…"
 	}) });
 };

package/dist/pagination/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/pagination/utils.ts","../../src/pagination/PaginationContext.tsx","../../src/pagination/Pagination.tsx","../../src/pagination/PaginationEllipsis.tsx","../../src/pagination/PaginationFirstPageTrigger.tsx","../../src/pagination/PaginationItem.tsx","../../src/pagination/PaginationLastPageTrigger.tsx","../../src/pagination/PaginationNextTrigger.tsx","../../src/pagination/PaginationPages.tsx","../../src/pagination/PaginationPrevTrigger.tsx","../../src/pagination/index.ts"],"sourcesContent":["export function sliceArrayWithIndex(arr: any[], index: number, length: number) {\n  const relativeElements = (length - 1) / 2\n\n  let start = Math.max(0, index - relativeElements)\n  let end = Math.min(arr.length, index + relativeElements + 1)\n\n  if (end - start < length) {\n    start = Math.max(0, Math.min(start, arr.length - length))\n    end = Math.min(arr.length, start + length)\n  }\n\n  return arr.slice(start, end)\n}\n","import * as pagination from '@zag-js/pagination'\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { createContext, type ReactNode, useContext, useId } from 'react'\n\nimport { sliceArrayWithIndex } from './utils'\n\nexport interface PaginationContextState<T extends PropTypes = PropTypes> {\n  type: pagination.Props['type']\n  pagination: pagination.Api<T> & {\n    getFirstPageTriggerProps: () => ReturnType<pagination.Api<T>['getPrevTriggerProps']> & {\n      'data-part': string\n      onClick: () => void\n    }\n    getLastPageTriggerProps: () => ReturnType<pagination.Api<T>['getNextTriggerProps']> & {\n      'data-part': string\n      onClick: () => void\n    }\n  }\n}\n\nconst PaginationContext = createContext<PaginationContextState | null>(null)\n\nexport interface PaginationProviderProps {\n  children: ReactNode\n  /**\n   * Total number of data items available across all pages.\n   */\n  count: number\n  /**\n   * Maximum amount of items displayed on a single page.\n   */\n  pageSize: number\n  /**\n   * Number of visible pages (or ellipsis) between previous and next page triggers.\n   */\n  visiblePageItems?: number\n  /**\n   * The current page (active page)\n   */\n  page?: pagination.Props['page']\n  /**\n   * If your pagination contains buttons instead of links, set `type` to `button`, extra attributes will be applied on page items for a11y.\n   */\n  type?: pagination.Props['type']\n  onPageChange?: pagination.Props['onPageChange']\n  noEllipsis?: boolean\n}\n\nexport const PaginationProvider = ({\n  children,\n  count,\n  visiblePageItems = 7,\n  pageSize,\n  page,\n  onPageChange,\n  noEllipsis,\n  type = 'link',\n}: PaginationProviderProps) => {\n  /**\n   * Here `Infinity` is used because we apply a custom slice ourselves to manage the \"no ellipsis\" version.\n   * It means Zag won't filter out any page item, allowing us to apply our own slicing logic.\n   */\n  const siblingCount = noEllipsis ? Infinity : Math.max(0, Math.floor((visiblePageItems - 5) / 2))\n\n  const id = useId()\n\n  const service = useMachine(pagination.machine, {\n    id,\n    count,\n    siblingCount,\n    pageSize,\n    page,\n    onPageChange,\n    type,\n  })\n\n  const api = pagination.connect(service, normalizeProps)\n  const pages = noEllipsis\n    ? sliceArrayWithIndex(api.pages, api.page - 1, visiblePageItems)\n    : api.pages\n\n  return (\n    <PaginationContext.Provider\n      value={{\n        type,\n        pagination: {\n          ...api,\n          pages,\n          // Extending ZagJS anatomy\n          getFirstPageTriggerProps: () => {\n            return {\n              ...api.getPrevTriggerProps(),\n              id: `${api.getRootProps().id}:first`,\n              'data-part': 'first-page-trigger',\n              onClick: api.goToFirstPage,\n            }\n          },\n          getLastPageTriggerProps: () => {\n            return {\n              ...api.getNextTriggerProps(),\n              id: `${api.getRootProps().id}:last`,\n              'data-part': 'last-page-trigger',\n              onClick: api.goToLastPage,\n            }\n          },\n        },\n      }}\n    >\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n\nexport const usePagination = () => {\n  const context = useContext(PaginationContext)\n\n  if (!context) {\n    throw Error('usePagination must be used within a Pagination provider')\n  }\n\n  return context\n}\n","import { ReactNode } from 'react'\n\nimport {\n  PaginationProvider,\n  type PaginationProviderProps,\n  usePagination,\n} from './PaginationContext'\n\nexport type PaginationProps = PaginationProviderProps & { className?: string }\n\nexport const Pagination = ({\n  children,\n  visiblePageItems = 5,\n  type = 'link',\n  noEllipsis = false,\n  className,\n  ...rest\n}: PaginationProps) => {\n  return (\n    <PaginationProvider\n      visiblePageItems={visiblePageItems}\n      noEllipsis={noEllipsis}\n      type={type}\n      {...rest}\n    >\n      <PaginationWrapper className={className}>{children}</PaginationWrapper>\n    </PaginationProvider>\n  )\n}\n\nconst PaginationWrapper = ({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) => {\n  const { pagination } = usePagination()\n\n  const props = pagination.getRootProps()\n\n  return (\n    <nav data-spark-component=\"pagination\" {...props} className={className}>\n      <ul className=\"gap-md flex flex-wrap\">{children}</ul>\n    </nav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\ninterface EllipsisProps extends ComponentPropsWithRef<'span'> {\n  index: number\n}\n\nexport const Ellipsis = ({ children, index, className, ref, ...rest }: EllipsisProps) => {\n  const { pagination } = usePagination()\n  const apiProps = pagination.getEllipsisProps({ index })\n  const localProps = {\n    className: cx('flex size-sz-44 items-center justify-center', className),\n    ...rest,\n  }\n\n  const mergedProps = mergeProps(apiProps, localProps)\n\n  return (\n    <li>\n      <span data-spark-component=\"pagination-ellipsis\" ref={ref} {...mergedProps}>\n        {children || '\\u2026'}\n      </span>\n    </li>\n  )\n}\n\nEllipsis.displayName = 'Pagination.Ellipsis'\n","import { ArrowDoubleLeft } from '@spark-ui/icons/ArrowDoubleLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type FirstPageTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const FirstPageTrigger = ({\n  children,\n  className,\n  href,\n  ref,\n  ...props\n}: FirstPageTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getFirstPageTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-first-page-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowDoubleLeft />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactElement, Ref } from 'react'\n\nimport { Button } from '../button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type ItemProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  value: number\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A numbered page item.\n * Should be used within `Pagination.Pages` to ensure proper functionality and accessibility.\n *\n * Can be rendered as an anchor or a button :\n * - Set a `href` prop to render the item as an anchor element.\n * - When using `href`, the `asChild` prop isn’t available since the component will already be rendered as an anchor element.\n */\nexport function Item({ children, value, className, href, ref, ...props }: ItemProps): ReactElement {\n  const { pagination } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getItemProps({ type: 'page', value })\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-item',\n    intent: 'support',\n    design: apiProps['aria-current'] === 'page' ? 'filled' : 'contrast',\n    className: cx('size-sz-44', className),\n    ...props,\n  }\n\n  const mergedProps = mergeProps(apiProps, localProps)\n\n  return (\n    <li>\n      {href ? (\n        <Button ref={ref} {...mergedProps} asChild>\n          <a href={href}>{children || value}</a>\n        </Button>\n      ) : (\n        <Button ref={ref} {...mergedProps}>\n          {children || value}\n        </Button>\n      )}\n    </li>\n  )\n}\n\nItem.displayName = 'Pagination.Item'\n","import { ArrowDoubleRight } from '@spark-ui/icons/ArrowDoubleRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type LastPageTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const LastPageTrigger = ({\n  children,\n  className,\n  href,\n  ref,\n  ...props\n}: LastPageTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getLastPageTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-last-page-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowDoubleRight />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type NextTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const NextTrigger = ({ children, className, href, ref, ...props }: NextTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getNextTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-next-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowVerticalRight />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nNextTrigger.displayName = 'Pagination.NextTrigger'\n","import * as pagination from '@zag-js/pagination'\nimport { ReactNode } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\n// Extract the 'page' type element from the pagination API's 'pages' array.\ntype PageItem = Extract<pagination.Api['pages'][number], { type: 'page' }>\n\n// Define a type that conditionally tweaks the pagination API\n// based on the generic T parameter.\ntype TweakedPaginationApi<T extends 'noEllipsis' | ''> = Omit<pagination.Api, 'pages'> & {\n  pages: T extends 'noEllipsis' ? PageItem[] : pagination.Api['pages']\n}\n\ninterface PagesProps<T extends 'noEllipsis' | ''> {\n  children: (pagination: TweakedPaginationApi<T>) => ReactNode\n}\n\nexport const Pages = <T extends 'noEllipsis' | '' = ''>({ children }: PagesProps<T>) => {\n  const { pagination } = usePagination()\n\n  return children(pagination as TweakedPaginationApi<T>)\n}\n\nPages.displayName = 'Pagination.Pages'\n","import { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type PrevTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const PrevTrigger = ({ children, className, href, ref, ...props }: PrevTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getPrevTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-prev-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowVerticalLeft />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\n","import type { FC } from 'react'\n\nimport { Pagination as Root, type PaginationProps } from './Pagination'\nimport { Ellipsis } from './PaginationEllipsis'\nimport { FirstPageTrigger } from './PaginationFirstPageTrigger'\nimport { Item } from './PaginationItem'\nimport { LastPageTrigger } from './PaginationLastPageTrigger'\nimport { NextTrigger } from './PaginationNextTrigger'\nimport { Pages } from './PaginationPages'\nimport { PrevTrigger } from './PaginationPrevTrigger'\n\n/**\n * A navigation component that allows users to navigate through multiple pages of content.\n */\nexport const Pagination: FC<PaginationProps> & {\n  PrevTrigger: typeof PrevTrigger\n  NextTrigger: typeof NextTrigger\n  Pages: typeof Pages\n  Item: typeof Item\n  Ellipsis: typeof Ellipsis\n  FirstPageTrigger: typeof FirstPageTrigger\n  LastPageTrigger: typeof LastPageTrigger\n} = Object.assign(Root, {\n  PrevTrigger,\n  NextTrigger,\n  Pages,\n  Item,\n  Ellipsis,\n  FirstPageTrigger,\n  LastPageTrigger,\n})\n\nPagination.displayName = 'Pagination'\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\nNextTrigger.displayName = 'Pagination.NextTrigger'\nPages.displayName = 'Pagination.Pages'\nItem.displayName = 'Pagination.Item'\nEllipsis.displayName = 'Pagination.Ellipsis'\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/pagination/utils.ts","../../src/pagination/PaginationContext.tsx","../../src/pagination/Pagination.tsx","../../src/pagination/PaginationEllipsis.tsx","../../src/pagination/PaginationFirstPageTrigger.tsx","../../src/pagination/PaginationItem.tsx","../../src/pagination/PaginationLastPageTrigger.tsx","../../src/pagination/PaginationNextTrigger.tsx","../../src/pagination/PaginationPages.tsx","../../src/pagination/PaginationPrevTrigger.tsx","../../src/pagination/index.ts"],"sourcesContent":["export function sliceArrayWithIndex(arr: any[], index: number, length: number) {\n  const relativeElements = (length - 1) / 2\n\n  let start = Math.max(0, index - relativeElements)\n  let end = Math.min(arr.length, index + relativeElements + 1)\n\n  if (end - start < length) {\n    start = Math.max(0, Math.min(start, arr.length - length))\n    end = Math.min(arr.length, start + length)\n  }\n\n  return arr.slice(start, end)\n}\n","import * as pagination from '@zag-js/pagination'\nimport { normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { createContext, type ReactNode, useContext, useId } from 'react'\n\nimport { sliceArrayWithIndex } from './utils'\n\nexport interface PaginationContextState<T extends PropTypes = PropTypes> {\n  type: pagination.Props['type']\n  pagination: pagination.Api<T> & {\n    getFirstPageTriggerProps: () => ReturnType<pagination.Api<T>['getPrevTriggerProps']> & {\n      'data-part': string\n      onClick: () => void\n    }\n    getLastPageTriggerProps: () => ReturnType<pagination.Api<T>['getNextTriggerProps']> & {\n      'data-part': string\n      onClick: () => void\n    }\n  }\n}\n\nconst PaginationContext = createContext<PaginationContextState | null>(null)\n\nexport interface PaginationProviderProps {\n  children: ReactNode\n  /**\n   * Total number of data items available across all pages.\n   */\n  count: number\n  /**\n   * Maximum amount of items displayed on a single page.\n   */\n  pageSize: number\n  /**\n   * Number of visible pages (or ellipsis) between previous and next page triggers.\n   */\n  visiblePageItems?: number\n  /**\n   * The current page (active page)\n   */\n  page?: pagination.Props['page']\n  /**\n   * If your pagination contains buttons instead of links, set `type` to `button`, extra attributes will be applied on page items for a11y.\n   */\n  type?: pagination.Props['type']\n  onPageChange?: pagination.Props['onPageChange']\n  noEllipsis?: boolean\n}\n\nexport const PaginationProvider = ({\n  children,\n  count,\n  visiblePageItems = 7,\n  pageSize,\n  page,\n  onPageChange,\n  noEllipsis,\n  type = 'link',\n}: PaginationProviderProps) => {\n  /**\n   * Here `Infinity` is used because we apply a custom slice ourselves to manage the \"no ellipsis\" version.\n   * It means Zag won't filter out any page item, allowing us to apply our own slicing logic.\n   */\n  const siblingCount = noEllipsis ? Infinity : Math.max(0, Math.floor((visiblePageItems - 5) / 2))\n\n  const id = useId()\n\n  const service = useMachine(pagination.machine, {\n    id,\n    count,\n    siblingCount,\n    pageSize,\n    page,\n    onPageChange,\n    type,\n  })\n\n  const api = pagination.connect(service, normalizeProps)\n  const pages = noEllipsis\n    ? sliceArrayWithIndex(api.pages, api.page - 1, visiblePageItems)\n    : api.pages\n\n  return (\n    <PaginationContext.Provider\n      value={{\n        type,\n        pagination: {\n          ...api,\n          pages,\n          // Extending ZagJS anatomy\n          getFirstPageTriggerProps: () => {\n            return {\n              ...api.getPrevTriggerProps(),\n              id: `${api.getRootProps().id}:first`,\n              'data-part': 'first-page-trigger',\n              onClick: api.goToFirstPage,\n            }\n          },\n          getLastPageTriggerProps: () => {\n            return {\n              ...api.getNextTriggerProps(),\n              id: `${api.getRootProps().id}:last`,\n              'data-part': 'last-page-trigger',\n              onClick: api.goToLastPage,\n            }\n          },\n        },\n      }}\n    >\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n\nexport const usePagination = () => {\n  const context = useContext(PaginationContext)\n\n  if (!context) {\n    throw Error('usePagination must be used within a Pagination provider')\n  }\n\n  return context\n}\n","import { ReactNode } from 'react'\n\nimport {\n  PaginationProvider,\n  type PaginationProviderProps,\n  usePagination,\n} from './PaginationContext'\n\nexport type PaginationProps = PaginationProviderProps & { className?: string }\n\nexport const Pagination = ({\n  children,\n  visiblePageItems = 5,\n  type = 'link',\n  noEllipsis = false,\n  className,\n  ...rest\n}: PaginationProps) => {\n  return (\n    <PaginationProvider\n      visiblePageItems={visiblePageItems}\n      noEllipsis={noEllipsis}\n      type={type}\n      {...rest}\n    >\n      <PaginationWrapper className={className}>{children}</PaginationWrapper>\n    </PaginationProvider>\n  )\n}\n\nconst PaginationWrapper = ({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) => {\n  const { pagination } = usePagination()\n\n  const props = pagination.getRootProps()\n\n  return (\n    <nav data-spark-component=\"pagination\" {...props} className={className}>\n      <ul className=\"gap-md flex flex-wrap\">{children}</ul>\n    </nav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\ninterface EllipsisProps extends ComponentPropsWithRef<'span'> {\n  index: number\n}\n\nexport const Ellipsis = ({ children, index, className, ref, ...rest }: EllipsisProps) => {\n  const { pagination } = usePagination()\n  const apiProps = pagination.getEllipsisProps({ index })\n  const localProps = {\n    className: cx('flex size-sz-44 items-center justify-center', className),\n    ...rest,\n  }\n\n  const mergedProps = mergeProps(apiProps, localProps)\n\n  return (\n    <li>\n      <span data-spark-component=\"pagination-ellipsis\" ref={ref} {...mergedProps}>\n        {children || '\\u2026'}\n      </span>\n    </li>\n  )\n}\n\nEllipsis.displayName = 'Pagination.Ellipsis'\n","import { ArrowDoubleLeft } from '@spark-ui/icons/ArrowDoubleLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type FirstPageTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const FirstPageTrigger = ({\n  children,\n  className,\n  href,\n  ref,\n  ...props\n}: FirstPageTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getFirstPageTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-first-page-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowDoubleLeft />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, ReactElement, Ref } from 'react'\n\nimport { Button } from '../button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type ItemProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  value: number\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A numbered page item.\n * Should be used within `Pagination.Pages` to ensure proper functionality and accessibility.\n *\n * Can be rendered as an anchor or a button :\n * - Set a `href` prop to render the item as an anchor element.\n * - When using `href`, the `asChild` prop isn’t available since the component will already be rendered as an anchor element.\n */\nexport function Item({ children, value, className, href, ref, ...props }: ItemProps): ReactElement {\n  const { pagination } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getItemProps({ type: 'page', value })\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-item',\n    intent: 'support',\n    design: apiProps['aria-current'] === 'page' ? 'filled' : 'contrast',\n    className: cx('size-sz-44', className),\n    ...props,\n  }\n\n  const mergedProps = mergeProps(apiProps, localProps)\n\n  return (\n    <li>\n      {href ? (\n        <Button ref={ref} {...mergedProps} asChild>\n          <a href={href}>{children || value}</a>\n        </Button>\n      ) : (\n        <Button ref={ref} {...mergedProps}>\n          {children || value}\n        </Button>\n      )}\n    </li>\n  )\n}\n\nItem.displayName = 'Pagination.Item'\n","import { ArrowDoubleRight } from '@spark-ui/icons/ArrowDoubleRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type LastPageTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const LastPageTrigger = ({\n  children,\n  className,\n  href,\n  ref,\n  ...props\n}: LastPageTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getLastPageTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-last-page-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowDoubleRight />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type NextTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const NextTrigger = ({ children, className, href, ref, ...props }: NextTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getNextTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-next-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowVerticalRight />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nNextTrigger.displayName = 'Pagination.NextTrigger'\n","import * as pagination from '@zag-js/pagination'\nimport { ReactNode } from 'react'\n\nimport { usePagination } from './PaginationContext'\n\n// Extract the 'page' type element from the pagination API's 'pages' array.\ntype PageItem = Extract<pagination.Api['pages'][number], { type: 'page' }>\n\n// Define a type that conditionally tweaks the pagination API\n// based on the generic T parameter.\ntype TweakedPaginationApi<T extends 'noEllipsis' | ''> = Omit<pagination.Api, 'pages'> & {\n  pages: T extends 'noEllipsis' ? PageItem[] : pagination.Api['pages']\n}\n\ninterface PagesProps<T extends 'noEllipsis' | ''> {\n  children: (pagination: TweakedPaginationApi<T>) => ReactNode\n}\n\nexport const Pages = <T extends 'noEllipsis' | '' = ''>({ children }: PagesProps<T>) => {\n  const { pagination } = usePagination()\n\n  return children(pagination as TweakedPaginationApi<T>)\n}\n\nPages.displayName = 'Pagination.Pages'\n","import { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { mergeProps } from '@zag-js/react'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { usePagination } from './PaginationContext'\n\ntype AnchorProps = ComponentPropsWithoutRef<'a'> & {\n  href: string\n  asChild?: never\n}\n\ntype ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   * Unavailable for anchor items (with `href` prop) since the component will already be rendered as an anchor element.\n   */\n  asChild?: boolean\n  href?: never\n}\n\nexport type PrevTriggerProps = (AnchorProps | ButtonProps) & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const PrevTrigger = ({ children, className, href, ref, ...props }: PrevTriggerProps) => {\n  const { pagination, type } = usePagination()\n\n  // ZagJS props\n  const apiProps = pagination.getPrevTriggerProps()\n\n  const shouldDisableLink =\n    type === 'link' &&\n    (apiProps as typeof apiProps & { 'data-disabled'?: string })['data-disabled'] === ''\n\n  // Locally managed props\n  const localProps = {\n    'data-spark-component': 'pagination-prev-trigger',\n    intent: 'support',\n    design: 'contrast',\n    ...props,\n    className,\n    ...(shouldDisableLink && {\n      disabled: true,\n      role: 'link',\n      'aria-disabled': true,\n    }),\n  }\n\n  // We know 'aria-label' is included in props\n  type WithAriaLabel = Omit<typeof apiProps, 'aria-label'> & { 'aria-label': string }\n\n  const mergedProps = mergeProps(\n    apiProps,\n    localProps as unknown as typeof apiProps\n  ) as WithAriaLabel\n\n  const content = children || (\n    <Icon>\n      <ArrowVerticalLeft />\n    </Icon>\n  )\n\n  return (\n    <li>\n      {href ? (\n        <IconButton ref={ref} {...mergedProps} asChild>\n          <a href={shouldDisableLink ? undefined : href}>{content}</a>\n        </IconButton>\n      ) : (\n        <IconButton ref={ref} {...mergedProps}>\n          {content}\n        </IconButton>\n      )}\n    </li>\n  )\n}\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\n","import type { FC } from 'react'\n\nimport { Pagination as Root, type PaginationProps } from './Pagination'\nimport { Ellipsis } from './PaginationEllipsis'\nimport { FirstPageTrigger } from './PaginationFirstPageTrigger'\nimport { Item } from './PaginationItem'\nimport { LastPageTrigger } from './PaginationLastPageTrigger'\nimport { NextTrigger } from './PaginationNextTrigger'\nimport { Pages } from './PaginationPages'\nimport { PrevTrigger } from './PaginationPrevTrigger'\n\n/**\n * A navigation component that allows users to navigate through multiple pages of content.\n */\nexport const Pagination: FC<PaginationProps> & {\n  PrevTrigger: typeof PrevTrigger\n  NextTrigger: typeof NextTrigger\n  Pages: typeof Pages\n  Item: typeof Item\n  Ellipsis: typeof Ellipsis\n  FirstPageTrigger: typeof FirstPageTrigger\n  LastPageTrigger: typeof LastPageTrigger\n} = Object.assign(Root, {\n  PrevTrigger,\n  NextTrigger,\n  Pages,\n  Item,\n  Ellipsis,\n  FirstPageTrigger,\n  LastPageTrigger,\n})\n\nPagination.displayName = 'Pagination'\n\nPrevTrigger.displayName = 'Pagination.PrevTrigger'\nNextTrigger.displayName = 'Pagination.NextTrigger'\nPages.displayName = 'Pagination.Pages'\nItem.displayName = 'Pagination.Item'\nEllipsis.displayName = 'Pagination.Ellipsis'\nFirstPageTrigger.displayName = 'Pagination.FirstPageTrigger'\nLastPageTrigger.displayName = 'Pagination.LastPageTrigger'\n"],"mappings":"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"}

package/dist/rating/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../form-field-81wzFxM0.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-combined-state`),o=require(`@spark-ui/icons/StarFill`),s=require(`@spark-ui/icons/StarOutline`);var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption-link`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:e>=t+1?1:0}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){V&&(F(e+1),A.current[e]?.focus())}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../form-field-Du1Ebx6v.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-combined-state`),o=require(`@spark-ui/icons/StarFill`),s=require(`@spark-ui/icons/StarOutline`);var c=(0,n.cva)([`peer after:inset-0 group relative after:block after:absolute`],{variants:{disabled:{true:`opacity-dim-3`,false:``},readOnly:{true:``,false:``},gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},compoundVariants:[{readOnly:!1,disabled:!1,className:(0,n.cx)((0,n.cx)(`[&_>_div]:peer-hover:w-0!`),`cursor-pointer transition-all duration-200 scale-100`,`hover:scale-150 focus-visible:scale-150`,`[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100`)}],defaultVariants:{disabled:!1,readOnly:!1,gap:`sm`}}),l=(0,n.cva)(``,{variants:{size:{sm:`text-caption-link`,md:`text-body-1`,lg:`text-display-1`},design:{filled:[`text-main-variant`,`group-[[data-part=star][data-hovered]]:text-main-variant-hovered`],outlined:[`text-on-surface/dim-3`]}}}),u=({value:t,size:a,disabled:u,readOnly:d,checked:f=!1,ariaLabel:p,ariaLabelledBy:m,tabIndex:h,onClick:g,onKeyDown:_,onMouseEnter:v,children:y,ref:b})=>{let x=!u&&!d,[S,C]=(0,r.useState)(!1),w=e=>{g?.(e),x&&C(!0)},T=()=>C(!1);return(0,i.jsxs)(`div`,{ref:b,role:`radio`,"aria-checked":f,"aria-label":p,"aria-labelledby":m,tabIndex:h,"data-spark-component":`rating-star`,"data-part":`star`,...x&&S&&{"data-suppress-scale":``},className:c({gap:a===`lg`?`md`:`sm`,disabled:u,readOnly:d}),onClick:w,onKeyDown:_,onMouseEnter:v,onMouseLeave:T,onMouseMove:T,children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`,`group-[[data-part=star][data-hovered]]:overflow-visible`),style:{width:t*100+`%`},children:(0,i.jsx)(e.t,{className:l({size:a,design:`filled`}),children:(0,i.jsx)(o.StarFill,{})})}),(0,i.jsx)(e.t,{className:l({size:a,design:`outlined`}),children:(0,i.jsx)(s.StarOutline,{})}),y]})};function d({value:e,index:t}){return e===void 0?0:+(e>=t+1)}function f(e,t){return[e.slice(0,t),e.slice(t)]}var p=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function m(e,t,n,r){return i=>{if(r)switch(i.key){case`ArrowRight`:case`ArrowDown`:i.preventDefault();let r=Math.min(4,e+1);n(r+1),t.current[r]?.focus();break;case`ArrowLeft`:case`ArrowUp`:i.preventDefault();let a=Math.max(0,e-1);n(a+1),t.current[a]?.focus();break;case` `:i.preventDefault(),n(e+1);break;default:break}}}function h(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}var g=({defaultValue:e,value:o,onValueChange:s,disabled:c,readOnly:l,required:g,name:_,id:v,"aria-label":y,getStarLabel:b,ref:x,...S})=>{let{labelId:C,isInvalid:w,isRequired:T,description:E,name:D,disabled:O,readOnly:k}=t.n(),A=(0,r.useRef)([]),j=(0,r.useId)(),[M,N]=(0,r.useState)(null),[P,F]=(0,a.useCombinedState)(o,e,s),I=p(P??0),L=c??O,R=l??k,z=g===void 0?T:g,B=_??D,V=!(L||R),H=b!==void 0||y!==void 0,U=M===null?I:M+1;function W(e){V&&(F(e+1),A.current[e]?.focus())}let G=(0,r.useCallback)(e=>m(e,A,F,V),[V,F]);function K({currentTarget:e}){let t=A.current.findIndex(t=>t===e);N(t>=0?t:null);let[n,r]=f(A.current,t+1);n.forEach(e=>e?.setAttribute(`data-hovered`,``)),r.forEach(e=>e?.removeAttribute(`data-hovered`))}let q=(0,r.useCallback)(e=>t=>{A.current[e]=t},[]);function J(){N(null),A.current.forEach(e=>e?.removeAttribute(`data-hovered`))}return(0,i.jsxs)(`div`,{ref:x,id:v,role:`radiogroup`,"aria-label":y,"aria-labelledby":C,"aria-invalid":w,"aria-required":z,"aria-describedby":E,className:`relative inline-flex`,"data-spark-component":`rating`,...S,onMouseLeave:J,children:[B!==void 0&&(0,i.jsx)(`input`,{type:`hidden`,name:B,value:I,"aria-hidden":!0,"data-part":`input`}),(0,i.jsx)(`div`,{className:(0,n.cx)(`gap-x-md`,`flex`),children:Array.from({length:5}).map((e,t)=>(0,i.jsx)(u,{ref:q(t),disabled:L,readOnly:R,size:`lg`,value:d({index:t,value:U}),checked:I===t+1,ariaLabel:H?b?.(t)??`${y} ${t+1}`:void 0,ariaLabelledBy:!H&&C?`${C} ${j}-star-${t+1}`:void 0,tabIndex:V?h(t,I):-1,onClick:()=>W(t),onKeyDown:G(t),onMouseEnter:e=>V&&K(e),children:!H&&(0,i.jsx)(`span`,{id:`${j}-star-${t+1}`,className:`sr-only`,children:t+1})},t))})]})};exports.Rating=g;
 //# sourceMappingURL=index.js.map

package/dist/rating/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\n/**\n * An interactive component that allows users to provide a rating using a star-based scale.\n */\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\n/**\n * An interactive component that allows users to provide a rating using a star-based scale.\n */\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/rating/index.mjs

@@ -1,5 +1,5 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
-import { n as t } from "../form-field-GTAuK_nO.mjs";
+import { n as t } from "../form-field-BnzHTgp6.mjs";
 import { cva as n, cx as r } from "class-variance-authority";
 import { useCallback as i, useId as a, useRef as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -92,7 +92,7 @@ var p = n(["peer after:inset-0 group relative after:block after:absolute"], {
 //#endregion
 //#region src/rating/utils.ts
 function g({ value: e, index: t }) {
-	return e === void 0 ? 0 : e >= t + 1 ? 1 : 0;
+	return e === void 0 ? 0 : +(e >= t + 1);
 }
 function _(e, t) {
 	return [e.slice(0, t), e.slice(t)];

package/dist/rating/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\n/**\n * An interactive component that allows users to provide a rating using a star-based scale.\n */\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\n/**\n * An interactive component that allows users to provide a rating using a star-based scale.\n */\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/stepper/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.js`),n=require(`../input-BUSYZ_VO.js`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-merge-refs`),o=require(`@spark-ui/components/form-field`),s=require(`@spark-ui/icons/Minus`),c=require(`@react-aria/numberfield`),l=require(`@react-stately/numberfield`),u=require(`@react-aria/button`),d=require(`@spark-ui/icons/Plus`);var f=({inputRef:e,locale:t=`fr`,...n})=>{let r=(0,l.useNumberFieldState)({...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required,locale:t}),{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}=(0,c.useNumberField)({isWheelDisabled:!1,...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required},r,e);return{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}},p=(0,r.createContext)(null),m=({children:e,formatOptions:t,minValue:a,maxValue:s,ref:c,...l})=>{let u=(0,r.useRef)(null),{groupProps:d,inputProps:m,incrementButtonProps:h,decrementButtonProps:g}=f({...l,...`value`in l&&{value:l.value??NaN},onChange:l.onValueChange,formatOptions:t,minValue:a,maxValue:s,inputRef:u}),_=(0,o.useFormFieldControl)(),v=!!_.id,y={...h,...v&&{"aria-controls":_.id}},b={...g,...v&&{"aria-controls":_.id}},x={...m,...v&&{id:_.id,required:_.isRequired,"aria-invalid":_.isInvalid?!0:void 0}},{onValueChange:S,...C}=l;return(0,i.jsx)(p.Provider,{value:{incrementButtonProps:y,decrementButtonProps:b,inputProps:x,inputRef:u},children:(0,i.jsx)(n.t,{...C,...d,"data-spark-component":`stepper`,ref:c,children:e})})};m.displayName=`Stepper`;var h=()=>{let e=(0,r.useContext)(p);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},g=({children:a,design:o=`ghost`,intent:s=`neutral`,className:c,ref:l,...f})=>{let p=(0,r.useRef)(null),m=l&&typeof l!=`function`?l:p,{incrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.TrailingAddon,{asChild:!0,"data-spark-component":`stepper-increment-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:s,className:c,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(d.Plus,{})})})})},_=({children:a,design:o=`ghost`,intent:c=`neutral`,className:l,ref:d,...f})=>{let p=(0,r.useRef)(null),m=d&&typeof d!=`function`?d:p,{decrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.LeadingAddon,{asChild:!0,"data-spark-component":`stepper-decrement-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:c,className:l,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(s.Minus,{})})})})},v=Object.assign(g,{id:`TrailingAddon`}),y=Object.assign(_,{id:`LeadingAddon`});g.displayName=`Stepper.DecrementButton`,_.displayName=`Stepper.DecrementButton`;var b=({ref:e,...t})=>{let{inputRef:r,inputProps:o}=h(),s=(0,a.useMergeRefs)(e,r),{className:c=``,...l}=t;return(0,i.jsx)(n.n,{ref:s,...l,...o,className:`min-w-sz-56 text-center ${c}`})},x=Object.assign(b,{id:`Input`});b.displayName=`Stepper.Input`;var S=Object.assign(m,{IncrementButton:v,DecrementButton:y,Input:x});S.displayName=`Stepper`,v.displayName=`Stepper.IncrementButton`,y.displayName=`Stepper.DecrementButton`,x.displayName=`Stepper.Input`,exports.Stepper=S;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.js`),n=require(`../input-DaShg4eE.js`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-merge-refs`),o=require(`@spark-ui/components/form-field`),s=require(`@spark-ui/icons/Minus`),c=require(`@react-aria/numberfield`),l=require(`@react-stately/numberfield`),u=require(`@react-aria/button`),d=require(`@spark-ui/icons/Plus`);var f=({inputRef:e,locale:t=`fr`,...n})=>{let r=(0,l.useNumberFieldState)({...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required,locale:t}),{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}=(0,c.useNumberField)({isWheelDisabled:!1,...n,isDisabled:n.disabled,isReadOnly:n.readOnly,isRequired:n.required},r,e);return{groupProps:i,inputProps:a,incrementButtonProps:o,decrementButtonProps:s}},p=(0,r.createContext)(null),m=({children:e,formatOptions:t,minValue:a,maxValue:s,ref:c,...l})=>{let u=(0,r.useRef)(null),{groupProps:d,inputProps:m,incrementButtonProps:h,decrementButtonProps:g}=f({...l,...`value`in l&&{value:l.value??NaN},onChange:l.onValueChange,formatOptions:t,minValue:a,maxValue:s,inputRef:u}),_=(0,o.useFormFieldControl)(),v=!!_.id,y={...h,...v&&{"aria-controls":_.id}},b={...g,...v&&{"aria-controls":_.id}},x={...m,...v&&{id:_.id,required:_.isRequired,"aria-invalid":_.isInvalid?!0:void 0}},{onValueChange:S,...C}=l;return(0,i.jsx)(p.Provider,{value:{incrementButtonProps:y,decrementButtonProps:b,inputProps:x,inputRef:u},children:(0,i.jsx)(n.t,{...C,...d,"data-spark-component":`stepper`,ref:c,children:e})})};m.displayName=`Stepper`;var h=()=>{let e=(0,r.useContext)(p);if(!e)throw Error(`useStepperContext must be used within a Stepper provider`);return e},g=({children:a,design:o=`ghost`,intent:s=`neutral`,className:c,ref:l,...f})=>{let p=(0,r.useRef)(null),m=l&&typeof l!=`function`?l:p,{incrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.TrailingAddon,{asChild:!0,"data-spark-component":`stepper-increment-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:s,className:c,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(d.Plus,{})})})})},_=({children:a,design:o=`ghost`,intent:c=`neutral`,className:l,ref:d,...f})=>{let p=(0,r.useRef)(null),m=d&&typeof d!=`function`?d:p,{decrementButtonProps:g}=h(),{buttonProps:_}=(0,u.useButton)({...g,...f},m);return(0,i.jsx)(n.t.LeadingAddon,{asChild:!0,"data-spark-component":`stepper-decrement-button`,children:(0,i.jsx)(t.t,{ref:m,design:o,intent:c,className:l,"aria-label":_[`aria-label`],..._,disabled:f.disabled||_.disabled,children:a||(0,i.jsx)(e.t,{children:(0,i.jsx)(s.Minus,{})})})})},v=Object.assign(g,{id:`TrailingAddon`}),y=Object.assign(_,{id:`LeadingAddon`});g.displayName=`Stepper.DecrementButton`,_.displayName=`Stepper.DecrementButton`;var b=({ref:e,...t})=>{let{inputRef:r,inputProps:o}=h(),s=(0,a.useMergeRefs)(e,r),{className:c=``,...l}=t;return(0,i.jsx)(n.n,{ref:s,...l,...o,className:`min-w-sz-56 text-center ${c}`})},x=Object.assign(b,{id:`Input`});b.displayName=`Stepper.Input`;var S=Object.assign(m,{IncrementButton:v,DecrementButton:y,Input:x});S.displayName=`Stepper`,v.displayName=`Stepper.IncrementButton`,y.displayName=`Stepper.DecrementButton`,x.displayName=`Stepper.Input`,exports.Stepper=S;
 //# sourceMappingURL=index.js.map

package/dist/stepper/index.mjs

@@ -1,6 +1,6 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
 import { t } from "../icon-button-DpucUC_L.mjs";
-import { n, t as r } from "../input-CiWFuTs_.mjs";
+import { n, t as r } from "../input-Dtabf6Mp.mjs";
 import { createContext as i, useContext as a, useRef as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 import { useMergeRefs as c } from "@spark-ui/hooks/use-merge-refs";