@spark-ui/components 17.9.0-beta.2 → 17.9.1

package/dist/meter/MeterLabel.d.ts

@@ -1,6 +1,9 @@
 import { Meter as BaseMeter } from '@base-ui/react/meter';
 import { ComponentProps } from 'react';
 export type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>;
+/**
+ * The label of the meter, announced to assistive technology. Renders a <span> element.
+ */
 export declare const MeterLabel: {
     ({ id: idProp, children, ref: forwardedRef, ...others }: MeterLabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/meter/MeterTrack.d.ts

@@ -1,6 +1,9 @@
 import { Meter as BaseMeter } from '@base-ui/react/meter';
 import { ComponentProps } from 'react';
 export type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>;
+/**
+ * The track of the meter showing progress. Renders a <div> element.
+ */
 export declare const MeterTrack: {
     ({ className, ...others }: MeterTrackProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/meter/MeterValue.d.ts

@@ -3,6 +3,9 @@ import { ComponentProps, ReactNode } from 'react';
 export type MeterValueProps = Omit<ComponentProps<typeof BaseMeter.Value>, 'render' | 'children'> & {
     children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined;
 };
+/**
+ * The value display of the meter. Renders a <span> element.
+ */
 export declare const MeterValue: {
     ({ className, children, ...others }: MeterValueProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/meter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1-highlight text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\n/**\n * A horizontal progress indicator that displays a scalar measurement within a known range.\n */\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\n/**\n * The label of the meter, announced to assistive technology. Renders a <span> element.\n */\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1-highlight text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\n/**\n * The track of the meter showing progress. Renders a <div> element.\n */\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\n/**\n * The value display of the meter. Renders a <span> element.\n */\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\n/**\n * A horizontal progress indicator that displays a scalar measurement within a known range.\n */\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}

package/dist/meter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1-highlight text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\n/**\n * A horizontal progress indicator that displays a scalar measurement within a known range.\n */\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/meter/MeterContext.tsx","../../src/meter/Meter.tsx","../../src/meter/MeterLabel.tsx","../../src/meter/MeterTrack.styles.ts","../../src/meter/useIntersectionAnimation.ts","../../src/meter/MeterTrack.tsx","../../src/meter/MeterValue.tsx","../../src/meter/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterContextValue {\n  value: number\n  max: number\n  min: number\n  intent: MeterIndicatorStylesProps['intent']\n  shape: 'square' | 'rounded'\n  onLabelId: (id?: string) => void\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null)\n\nexport const ID_PREFIX = ':meter'\n\nexport const useMeter = () => {\n  const context = useContext(MeterContext)\n\n  if (!context) {\n    throw new Error('useMeter must be used within a Meter provider')\n  }\n\n  return context\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { MeterContext } from './MeterContext'\nimport { MeterIndicatorStylesProps } from './MeterTrack.styles'\n\nexport interface MeterProps\n  extends\n    Omit<ComponentProps<typeof BaseMeter.Root>, 'render'>,\n    Pick<MeterIndicatorStylesProps, 'intent'> {\n  /**\n   * Shape of the meter track and indicator.\n   */\n  shape?: 'square' | 'rounded'\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Meter = ({\n  className,\n  value,\n  max = 100,\n  min = 0,\n  shape = 'rounded',\n  intent = 'support',\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<MeterProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const contextValue = useMemo(() => {\n    return {\n      value: value ?? 0,\n      max,\n      min,\n      intent,\n      shape,\n      onLabelId: setLabelId,\n    }\n  }, [max, min, value, intent, shape, setLabelId])\n\n  return (\n    <MeterContext.Provider value={contextValue}>\n      <BaseMeter.Root\n        data-spark-component=\"meter\"\n        ref={ref}\n        className={cx(\n          'gap-y-sm gap-x-md focus-visible:u-outline box-border grid grid-cols-[1fr_auto]',\n          className\n        )}\n        value={value}\n        max={max}\n        min={min}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        {children}\n      </BaseMeter.Root>\n    </MeterContext.Provider>\n  )\n}\n\nMeter.displayName = 'Meter'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useMeter } from './MeterContext'\n\nexport type MeterLabelProps = Omit<ComponentProps<typeof BaseMeter.Label>, 'render'>\n\n/**\n * The label of the meter, announced to assistive technology. Renders a <span> element.\n */\nexport const MeterLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: MeterLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useMeter()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <BaseMeter.Label\n      data-spark-component=\"meter-label\"\n      id={id}\n      className=\"default:text-body-1-highlight text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Label>\n  )\n}\n\nMeterLabel.displayName = 'Meter.Label'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const meterTrackStyles = cva([\n  'relative col-span-2',\n  'h-sz-8 w-full',\n  'transform-gpu overflow-hidden',\n  'bg-on-background/dim-4',\n])\n\nexport type MeterTrackStylesProps = VariantProps<typeof meterTrackStyles>\n\nexport const meterIndicatorStyles = cva(\n  ['size-full', 'ease-standard transition-[width] duration-700', 'motion-reduce:transition-none'],\n  {\n    variants: {\n      /**\n       * Color scheme of the meter component.\n       */\n      intent: {\n        main: ['bg-main'],\n        support: ['bg-support'],\n        success: ['bg-success'],\n        alert: ['bg-alert'],\n        danger: ['bg-error'],\n        info: ['bg-info'],\n      },\n      /**\n       * Shape of the meter component.\n       */\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type MeterIndicatorStylesProps = VariantProps<typeof meterIndicatorStyles>\n","import { RefObject, useEffect, useRef } from 'react'\n\nexport interface UseIntersectionAnimationOptions {\n  /**\n   * The threshold at which the callback should be triggered.\n   * A value of 0 means as soon as any part of the element is visible.\n   * A value of 1 means the entire element must be visible.\n   * @default 0.1\n   */\n  threshold?: number\n  /**\n   * The root margin for the Intersection Observer.\n   * This can be used to trigger the animation before the element enters the viewport.\n   * @default undefined\n   */\n  rootMargin?: string\n}\n\n/**\n * Hook to trigger an animation callback when an element enters the viewport.\n * The callback is only triggered once, when the element first becomes visible.\n *\n * @param elementRef - Reference to the element to observe\n * @param onIntersect - Callback to execute when the element enters the viewport\n * @param options - Configuration options for the Intersection Observer\n * @returns Whether the animation has been triggered\n */\nexport function useIntersectionAnimation(\n  elementRef: RefObject<Element | null>,\n  onIntersect: () => void,\n  options: UseIntersectionAnimationOptions = {}\n): boolean {\n  const { threshold = 0.1, rootMargin } = options\n  const hasTriggeredRef = useRef(false)\n  const callbackRef = useRef(onIntersect)\n\n  // Keep callback ref up to date\n  useEffect(() => {\n    callbackRef.current = onIntersect\n  }, [onIntersect])\n\n  useEffect(() => {\n    const element = elementRef.current\n    if (!element || hasTriggeredRef.current) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting && !hasTriggeredRef.current) {\n            // Use requestAnimationFrame to ensure the callback runs at the right time\n            requestAnimationFrame(() => {\n              if (!hasTriggeredRef.current) {\n                hasTriggeredRef.current = true\n                callbackRef.current()\n                // Disconnect observer after callback is triggered (only trigger once)\n                observer.disconnect()\n              }\n            })\n          }\n        })\n      },\n      {\n        threshold,\n        rootMargin,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [elementRef, threshold, rootMargin])\n\n  return hasTriggeredRef.current\n}\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, useRef, useState } from 'react'\n\nimport { useMeter } from './MeterContext'\nimport { meterIndicatorStyles, meterTrackStyles } from './MeterTrack.styles'\nimport { useIntersectionAnimation } from './useIntersectionAnimation'\n\nexport type MeterTrackProps = Omit<ComponentProps<typeof BaseMeter.Track>, 'render'>\n\n/**\n * The track of the meter showing progress. Renders a <div> element.\n */\nexport const MeterTrack = ({ className, ...others }: MeterTrackProps) => {\n  const { value, max, min, intent, shape } = useMeter()\n  const percentage = ((value - min) / (max - min)) * 100\n  const trackRef = useRef<HTMLDivElement>(null)\n  const [hasAnimated, setHasAnimated] = useState(false)\n\n  // Trigger animation when component enters viewport\n  useIntersectionAnimation(trackRef, () => {\n    setHasAnimated(true)\n  })\n\n  return (\n    <BaseMeter.Track\n      ref={trackRef}\n      data-spark-component=\"meter-track\"\n      className={cx(meterTrackStyles(), { 'rounded-sm': shape === 'rounded' }, className)}\n      {...others}\n    >\n      <BaseMeter.Indicator\n        data-spark-component=\"meter-indicator\"\n        className={meterIndicatorStyles({ intent, shape })}\n        style={{\n          width: hasAnimated ? `${percentage}%` : '0%',\n        }}\n      />\n    </BaseMeter.Track>\n  )\n}\n\nMeterTrack.displayName = 'Meter.Track'\n","import { Meter as BaseMeter } from '@base-ui/react/meter'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, ReactNode } from 'react'\n\nexport type MeterValueProps = Omit<\n  ComponentProps<typeof BaseMeter.Value>,\n  'render' | 'children'\n> & {\n  children?: ((formattedValue: string, value: number) => ReactNode) | null | undefined\n}\n\n/**\n * The value display of the meter. Renders a <span> element.\n */\nexport const MeterValue = ({ className, children, ...others }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      data-spark-component=\"meter-value\"\n      className={cx('default:text-body-1 text-on-surface', 'col-start-2 text-right', className)}\n      {...others}\n    >\n      {children}\n    </BaseMeter.Value>\n  )\n}\n\nMeterValue.displayName = 'Meter.Value'\n","import { Meter as Root } from './Meter'\nimport { MeterLabel } from './MeterLabel'\nimport { MeterTrack } from './MeterTrack'\nimport { MeterValue } from './MeterValue'\n\n/**\n * A horizontal progress indicator that displays a scalar measurement within a known range.\n */\nexport const Meter: typeof Root & {\n  Label: typeof MeterLabel\n  Track: typeof MeterTrack\n  Value: typeof MeterValue\n} = Object.assign(Root, {\n  Label: MeterLabel,\n  Track: MeterTrack,\n  Value: MeterValue,\n})\n\nMeter.displayName = 'Meter'\nMeterLabel.displayName = 'Meter.Label'\nMeterTrack.displayName = 'Meter.Track'\nMeterValue.displayName = 'Meter.Value'\n\nexport { type MeterProps } from './Meter'\nexport { type MeterLabelProps } from './MeterLabel'\nexport { type MeterTrackProps } from './MeterTrack'\nexport { type MeterValueProps } from './MeterValue'\n"],"mappings":"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"}

package/dist/pagination/PaginationEllipsis.d.ts

@@ -2,6 +2,9 @@ import { ComponentPropsWithRef } from 'react';
 interface EllipsisProps extends ComponentPropsWithRef<'span'> {
     index: number;
 }
+/**
+ * An ellipsis indicating skipped pages. Renders a <span> element.
+ */
 export declare const Ellipsis: {
     ({ children, index, className, ref, ...rest }: EllipsisProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/pagination/PaginationFirstPageTrigger.d.ts

@@ -15,6 +15,9 @@ export type FirstPageTriggerProps = (AnchorProps | ButtonProps) & {
     'aria-label': string;
     ref?: Ref<HTMLButtonElement>;
 };
+/**
+ * A button that navigates to the first page. Renders a <button> element.
+ */
 export declare const FirstPageTrigger: {
     ({ children, className, href, ref, ...props }: FirstPageTriggerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/pagination/PaginationLastPageTrigger.d.ts

@@ -15,6 +15,9 @@ export type LastPageTriggerProps = (AnchorProps | ButtonProps) & {
     'aria-label': string;
     ref?: Ref<HTMLButtonElement>;
 };
+/**
+ * A button that navigates to the last page. Renders a <button> element.
+ */
 export declare const LastPageTrigger: {
     ({ children, className, href, ref, ...props }: LastPageTriggerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/pagination/PaginationNextTrigger.d.ts

@@ -15,6 +15,9 @@ export type NextTriggerProps = (AnchorProps | ButtonProps) & {
     'aria-label': string;
     ref?: Ref<HTMLButtonElement>;
 };
+/**
+ * A button that navigates to the next page. Renders a <button> element.
+ */
 export declare const NextTrigger: {
     ({ children, className, href, ref, ...props }: NextTriggerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/pagination/PaginationPages.d.ts

@@ -9,6 +9,9 @@ type TweakedPaginationApi<T extends 'noEllipsis' | ''> = Omit<pagination.Api, 'p
 interface PagesProps<T extends 'noEllipsis' | ''> {
     children: (pagination: TweakedPaginationApi<T>) => ReactNode;
 }
+/**
+ * Container for page number buttons. Renders a <div> element.
+ */
 export declare const Pages: {
     <T extends "noEllipsis" | "" = "">({ children }: PagesProps<T>): ReactNode;
     displayName: string;

package/dist/pagination/PaginationPrevTrigger.d.ts

@@ -15,6 +15,9 @@ export type PrevTriggerProps = (AnchorProps | ButtonProps) & {
     'aria-label': string;
     ref?: Ref<HTMLButtonElement>;
 };
+/**
+ * A button that navigates to the previous page. Renders a <button> element.
+ */
 export declare const PrevTrigger: {
     ({ children, className, href, ref, ...props }: PrevTriggerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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\n/**\n * An ellipsis indicating skipped pages. Renders a <span> element.\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\n/**\n * A button that navigates to the first page. Renders a <button> element.\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\n/**\n * A button that navigates to the last page. Renders a <button> element.\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\n/**\n * A button that navigates to the next page. Renders a <button> element.\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\n/**\n * Container for page number buttons. Renders a <div> element.\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\n/**\n * A button that navigates to the previous page. Renders a <button> element.\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.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\n/**\n * An ellipsis indicating skipped pages. Renders a <span> element.\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\n/**\n * A button that navigates to the first page. Renders a <button> element.\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\n/**\n * A button that navigates to the last page. Renders a <button> element.\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\n/**\n * A button that navigates to the next page. Renders a <button> element.\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\n/**\n * Container for page number buttons. Renders a <div> element.\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\n/**\n * A button that navigates to the previous page. Renders a <button> element.\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/popover/PopoverAnchor.d.ts

@@ -3,6 +3,9 @@ import { Ref } from 'react';
 export type AnchorProps = RadixPopover.PopoverAnchorProps & {
     ref?: Ref<HTMLDivElement>;
 };
+/**
+ * The anchor element for positioning the popover. Renders a <div> element.
+ */
 export declare const Anchor: {
     ({ asChild, children, ref, ...rest }: AnchorProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/popover/PopoverArrow.d.ts

@@ -3,6 +3,9 @@ import { Ref } from 'react';
 export type ArrowProps = RadixPopover.PopoverArrowProps & {
     ref?: Ref<SVGSVGElement>;
 };
+/**
+ * An arrow pointing to the anchor element. Renders an <svg> element.
+ */
 export declare const Arrow: {
     ({ asChild, width, height, className, ref, ...rest }: ArrowProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/popover/PopoverCloseButton.d.ts

@@ -4,6 +4,9 @@ export type CloseButtonProps = RadixPopover.PopoverCloseProps & {
     'aria-label': string;
     ref?: Ref<HTMLButtonElement>;
 };
+/**
+ * A button that closes the popover. Renders a <button> element.
+ */
 export declare const CloseButton: {
     ({ "aria-label": ariaLabel, className, ref, ...rest }: CloseButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/popover/PopoverContent.d.ts

@@ -4,6 +4,9 @@ import { StylesProps } from './PopoverContent.styles';
 export type ContentProps = RadixPopover.PopoverContentProps & StylesProps & {
     ref?: Ref<HTMLDivElement>;
 };
+/**
+ * The popup element containing popover content. Renders a <div> element.
+ */
 export declare const Content: {
     ({ className, children, matchTriggerWidth, align, arrowPadding, asChild, avoidCollisions, "aria-labelledby": ariaLabelledBy, collisionBoundary, collisionPadding, hideWhenDetached, side, sideOffset, sticky, inset, elevation, ref, ...rest }: ContentProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/popover/PopoverHeader.d.ts

@@ -4,6 +4,9 @@ export interface HeaderProps {
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
+/**
+ * The header section of the popover. Renders a <header> element.
+ */
 export declare const Header: {
     ({ children, className, ref, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/popover/PopoverPortal.d.ts

@@ -1,6 +1,9 @@
 import { Popover as RadixPopover } from 'radix-ui';
 import { ReactElement } from 'react';
 export type PortalProps = RadixPopover.PopoverPortalProps;
+/**
+ * A portal that renders the popover in a different part of the DOM. Renders a <div> element.
+ */
 export declare const Portal: {
     ({ children, ...rest }: PortalProps): ReactElement;
     displayName: string;

package/dist/popover/PopoverTrigger.d.ts

@@ -3,6 +3,9 @@ import { Ref } from 'react';
 export type TriggerProps = RadixPopover.PopoverTriggerProps & {
     ref?: Ref<HTMLButtonElement>;
 };
+/**
+ * A button that opens the popover. Renders a <button> element.
+ */
 export declare const Trigger: {
     ({ asChild, children, ref, ...rest }: TriggerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;