@spark-ui/components 17.9.1 → 17.9.3

package/dist/popover-DKa4WOQV.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover-DKa4WOQV.mjs","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n  | 'surface'\n  | 'main'\n  | 'support'\n  | 'accent'\n  | 'success'\n  | 'alert'\n  | 'danger'\n  | 'info'\n  | 'neutral'\nexport interface PopoverContextState {\n  headerId: HeaderId\n  setHeaderId: (id: HeaderId) => void\n  intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n  children,\n  intent,\n}: {\n  children: ReactNode\n  intent: PopoverIntent\n}) => {\n  const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        headerId,\n        setHeaderId,\n        intent,\n      }}\n    >\n      {children}\n    </PopoverContext.Provider>\n  )\n}\n\nexport const usePopover = () => {\n  const context = useContext(PopoverContext)\n\n  if (!context) {\n    throw Error('usePopover must be used within a Popover provider')\n  }\n\n  return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n  intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n  return (\n    <PopoverProvider intent={intent}>\n      <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n        {children}\n      </RadixPopover.Root>\n    </PopoverProvider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n  <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n    {children}\n  </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n  ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n  asChild = false,\n  width = 16,\n  height = 8,\n  className,\n  ref,\n  ...rest\n}: ArrowProps) => {\n  const { intent } = usePopover()\n\n  /**\n   * This is necessary to override a Radix UI behaviour.\n   * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n   */\n  const styles = cva('visible', {\n    variants: {\n      intent: {\n        surface: 'fill-surface',\n        main: 'fill-main-container',\n        support: 'fill-support-container',\n        accent: 'fill-accent-container',\n        success: 'fill-success-container',\n        alert: 'fill-alert-container',\n        danger: 'fill-error-container',\n        info: 'fill-info-container',\n        neutral: 'fill-neutral-container',\n      },\n    },\n    defaultVariants: {\n      intent: 'surface',\n    },\n  })\n\n  return (\n    <RadixPopover.Arrow\n      data-spark-component=\"popover-arrow\"\n      ref={ref}\n      className={styles({ intent, className })}\n      asChild={asChild}\n      width={width}\n      height={height}\n      {...rest}\n    />\n  )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <RadixPopover.Close\n      data-spark-component=\"popover-close-button\"\n      ref={ref}\n      className={cx('right-lg top-md absolute', className)}\n      asChild\n      {...rest}\n    >\n      <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n        <Icon>\n          <CloseSVG />\n        </Icon>\n      </IconButton>\n    </RadixPopover.Close>\n  )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'rounded-md',\n    'shadow-sm',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    'max-h-(--radix-popper-available-height) overflow-y-auto',\n  ],\n  {\n    variants: {\n      intent: {\n        surface: 'bg-surface text-on-surface',\n        main: 'bg-main-container text-on-main-container',\n        support: 'bg-support-container text-on-support-container',\n        accent: 'bg-accent-container text-on-accent-container',\n        success: 'bg-success-container text-on-success-container',\n        alert: 'bg-alert-container text-on-alert-container',\n        danger: 'bg-error-container text-on-error-container',\n        info: 'bg-info-container text-on-info-container',\n        neutral: 'bg-neutral-container text-on-neutral-container',\n      },\n      matchTriggerWidth: {\n        true: 'w-(--radix-popper-anchor-width)',\n      },\n      enforceBoundaries: {\n        true: ['max-w-(--radix-popper-available-width)'],\n      },\n\n      inset: {\n        true: 'overflow-hidden',\n        false: 'p-lg',\n      },\n      elevation: {\n        dropdown: 'z-dropdown',\n        popover: 'z-popover',\n      },\n    },\n    compoundVariants: [\n      {\n        inset: false,\n        /**\n         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n         */\n        class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n      },\n      {\n        enforceBoundaries: false,\n        matchTriggerWidth: false,\n        class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n      },\n    ],\n    defaultVariants: {\n      matchTriggerWidth: false,\n      enforceBoundaries: false,\n      inset: false,\n      intent: 'surface',\n      elevation: 'popover',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n  StylesProps & {\n    ref?: Ref<HTMLDivElement>\n  }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n  // Spark props\n  className,\n  children,\n  matchTriggerWidth = false,\n  // Radix props\n  align = 'center',\n  arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n  asChild = false,\n  avoidCollisions = true,\n  'aria-labelledby': ariaLabelledBy,\n  collisionBoundary,\n  collisionPadding = 0,\n  hideWhenDetached = false,\n  side = 'bottom',\n  sideOffset = 8,\n  sticky = 'partial',\n  inset = false,\n  elevation = 'popover',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { headerId, intent } = usePopover()\n\n  return (\n    <RadixPopover.Content\n      aria-labelledby={headerId || ariaLabelledBy}\n      className={styles({\n        enforceBoundaries: !!collisionBoundary,\n        matchTriggerWidth,\n        inset,\n        elevation,\n        intent,\n        className,\n      })}\n      data-spark-component=\"popover-content\"\n      ref={ref}\n      {...{\n        align,\n        arrowPadding,\n        asChild,\n        avoidCollisions,\n        collisionBoundary,\n        collisionPadding,\n        hideWhenDetached,\n        side,\n        sideOffset,\n        sticky,\n      }}\n      {...rest}\n    >\n      {children}\n    </RadixPopover.Content>\n  )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n  const id = `${ID_PREFIX}-header-${useId()}`\n  const { setHeaderId } = usePopover()\n\n  useLayoutEffect(() => {\n    setHeaderId(id)\n\n    return () => setHeaderId(null)\n  }, [id, setHeaderId])\n\n  return (\n    <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n      {children}\n    </header>\n  )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n  <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n  <RadixPopover.Trigger\n    data-spark-component=\"popover-trigger\"\n    ref={ref}\n    asChild={asChild}\n    {...rest}\n  >\n    {children}\n  </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n  Anchor: typeof Anchor\n  Arrow: typeof Arrow\n  CloseButton: typeof CloseButton\n  Content: typeof Content\n  Header: typeof Header\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n} = Object.assign(Root, {\n  Anchor,\n  Arrow,\n  CloseButton,\n  Content,\n  Header,\n  Portal,\n  Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}
+{"version":3,"file":"popover-DKa4WOQV.mjs","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n  | 'surface'\n  | 'main'\n  | 'support'\n  | 'accent'\n  | 'success'\n  | 'alert'\n  | 'danger'\n  | 'info'\n  | 'neutral'\nexport interface PopoverContextState {\n  headerId: HeaderId\n  setHeaderId: (id: HeaderId) => void\n  intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n  children,\n  intent,\n}: {\n  children: ReactNode\n  intent: PopoverIntent\n}) => {\n  const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        headerId,\n        setHeaderId,\n        intent,\n      }}\n    >\n      {children}\n    </PopoverContext.Provider>\n  )\n}\n\nexport const usePopover = () => {\n  const context = useContext(PopoverContext)\n\n  if (!context) {\n    throw Error('usePopover must be used within a Popover provider')\n  }\n\n  return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n  intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n  return (\n    <PopoverProvider intent={intent}>\n      <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n        {children}\n      </RadixPopover.Root>\n    </PopoverProvider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n  <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n    {children}\n  </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n  ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n  asChild = false,\n  width = 16,\n  height = 8,\n  className,\n  ref,\n  ...rest\n}: ArrowProps) => {\n  const { intent } = usePopover()\n\n  /**\n   * This is necessary to override a Radix UI behaviour.\n   * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n   */\n  const styles = cva('visible', {\n    variants: {\n      intent: {\n        surface: 'fill-surface',\n        main: 'fill-main-container',\n        support: 'fill-support-container',\n        accent: 'fill-accent-container',\n        success: 'fill-success-container',\n        alert: 'fill-alert-container',\n        danger: 'fill-error-container',\n        info: 'fill-info-container',\n        neutral: 'fill-neutral-container',\n      },\n    },\n    defaultVariants: {\n      intent: 'surface',\n    },\n  })\n\n  return (\n    <RadixPopover.Arrow\n      data-spark-component=\"popover-arrow\"\n      ref={ref}\n      className={styles({ intent, className })}\n      asChild={asChild}\n      width={width}\n      height={height}\n      {...rest}\n    />\n  )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <RadixPopover.Close\n      data-spark-component=\"popover-close-button\"\n      ref={ref}\n      className={cx('right-lg top-md absolute', className)}\n      asChild\n      {...rest}\n    >\n      <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n        <Icon>\n          <CloseSVG />\n        </Icon>\n      </IconButton>\n    </RadixPopover.Close>\n  )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'rounded-md',\n    'shadow-sm',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    'max-h-(--radix-popper-available-height) overflow-y-auto',\n  ],\n  {\n    variants: {\n      intent: {\n        surface: 'bg-surface text-on-surface',\n        main: 'bg-main-container text-on-main-container',\n        support: 'bg-support-container text-on-support-container',\n        accent: 'bg-accent-container text-on-accent-container',\n        success: 'bg-success-container text-on-success-container',\n        alert: 'bg-alert-container text-on-alert-container',\n        danger: 'bg-error-container text-on-error-container',\n        info: 'bg-info-container text-on-info-container',\n        neutral: 'bg-neutral-container text-on-neutral-container',\n      },\n      matchTriggerWidth: {\n        true: 'w-(--radix-popper-anchor-width)',\n      },\n      enforceBoundaries: {\n        true: ['max-w-(--radix-popper-available-width)'],\n      },\n\n      inset: {\n        true: 'overflow-hidden',\n        false: 'p-lg',\n      },\n      elevation: {\n        dropdown: 'z-dropdown',\n        popover: 'z-popover',\n      },\n    },\n    compoundVariants: [\n      {\n        inset: false,\n        /**\n         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n         */\n        class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n      },\n      {\n        enforceBoundaries: false,\n        matchTriggerWidth: false,\n        class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n      },\n    ],\n    defaultVariants: {\n      matchTriggerWidth: false,\n      enforceBoundaries: false,\n      inset: false,\n      intent: 'surface',\n      elevation: 'popover',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n  StylesProps & {\n    ref?: Ref<HTMLDivElement>\n  }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n  // Spark props\n  className,\n  children,\n  matchTriggerWidth = false,\n  // Radix props\n  align = 'center',\n  arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n  asChild = false,\n  avoidCollisions = true,\n  'aria-labelledby': ariaLabelledBy,\n  collisionBoundary,\n  collisionPadding = 0,\n  hideWhenDetached = false,\n  side = 'bottom',\n  sideOffset = 8,\n  sticky = 'partial',\n  inset = false,\n  elevation = 'popover',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { headerId, intent } = usePopover()\n\n  return (\n    <RadixPopover.Content\n      aria-labelledby={headerId || ariaLabelledBy}\n      className={styles({\n        enforceBoundaries: !!collisionBoundary,\n        matchTriggerWidth,\n        inset,\n        elevation,\n        intent,\n        className,\n      })}\n      data-spark-component=\"popover-content\"\n      ref={ref}\n      {...{\n        align,\n        arrowPadding,\n        asChild,\n        avoidCollisions,\n        collisionBoundary,\n        collisionPadding,\n        hideWhenDetached,\n        side,\n        sideOffset,\n        sticky,\n      }}\n      {...rest}\n    >\n      {children}\n    </RadixPopover.Content>\n  )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n  const id = `${ID_PREFIX}-header-${useId()}`\n  const { setHeaderId } = usePopover()\n\n  useLayoutEffect(() => {\n    setHeaderId(id)\n\n    return () => setHeaderId(null)\n  }, [id, setHeaderId])\n\n  return (\n    <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n      {children}\n    </header>\n  )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n  <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n  <RadixPopover.Trigger\n    data-spark-component=\"popover-trigger\"\n    ref={ref}\n    asChild={asChild}\n    {...rest}\n  >\n    {children}\n  </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n  Anchor: typeof Anchor\n  Arrow: typeof Arrow\n  CloseButton: typeof CloseButton\n  Content: typeof Content\n  Header: typeof Header\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n} = Object.assign(Root, {\n  Anchor,\n  Arrow,\n  CloseButton,\n  Content,\n  Header,\n  Portal,\n  Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":";;;;;;;;AAoBA,IAAM,IAAiB,EAA0C,KAAK,EAEzD,IAAY,YAEZ,KAAmB,EAC9B,aACA,gBAII;CACJ,IAAM,CAAC,GAAU,KAAe,EAAmB,KAAK;AAExD,QACE,kBAAC,EAAe,UAAhB;EACE,OAAO;GACL;GACA;GACA;GACD;EAEA;EACuB,CAAA;GAIjB,UAAmB;CAC9B,IAAM,IAAU,EAAW,EAAe;AAE1C,KAAI,CAAC,EACH,OAAM,MAAM,oDAAoD;AAGlE,QAAO;GC7CI,KAAW,EAAE,aAAU,YAAS,WAAW,WAAQ,IAAO,GAAG,QAEtE,kBAAC,GAAD;CAAyB;WACvB,kBAAC,EAAa,MAAd;EAAmB,wBAAqB;EAAiB;EAAO,GAAI;EACjE;EACiB,CAAA;CACJ,CAAA;AAItB,EAAQ,cAAc;;;ACPtB,IAAa,KAAU,EAAE,aAAU,IAAO,aAAU,QAAK,GAAG,QAC1D,kBAAC,EAAa,QAAd;CAAqB,wBAAqB;CAAsB;CAAc;CAAS,GAAI;CACxF;CACmB,CAAA;AAGxB,EAAO,cAAc;;;ACHrB,IAAa,KAAS,EACpB,aAAU,IACV,WAAQ,IACR,YAAS,GACT,cACA,QACA,GAAG,QACa;CAChB,IAAM,EAAE,cAAW,GAAY,EAMzB,IAAS,EAAI,WAAW;EAC5B,UAAU,EACR,QAAQ;GACN,SAAS;GACT,MAAM;GACN,SAAS;GACT,QAAQ;GACR,SAAS;GACT,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;GACV,EACF;EACD,iBAAiB,EACf,QAAQ,WACT;EACF,CAAC;AAEF,QACE,kBAAC,EAAa,OAAd;EACE,wBAAqB;EAChB;EACL,WAAW,EAAO;GAAE;GAAQ;GAAW,CAAC;EAC/B;EACF;EACC;EACR,GAAI;EACJ,CAAA;;AAIN,EAAM,cAAc;;;AC3CpB,IAAa,KAAe,EAC1B,cAAc,GACd,cACA,QACA,GAAG,QAGD,kBAAC,EAAa,OAAd;CACE,wBAAqB;CAChB;CACL,WAAW,EAAG,4BAA4B,EAAU;CACpD,SAAA;CACA,GAAI;WAEJ,kBAAC,GAAD;EAAY,MAAK;EAAK,QAAO;EAAU,QAAO;EAAQ,cAAY;YAChE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAY,CAAA,EACP,CAAA;EACI,CAAA;CACM,CAAA;AAIzB,EAAY,cAAc;;;ACtC1B,IAAa,IAAS,EACpB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,QAAQ;GACN,SAAS;GACT,MAAM;GACN,SAAS;GACT,QAAQ;GACR,SAAS;GACT,OAAO;GACP,QAAQ;GACR,MAAM;GACN,SAAS;GACV;EACD,mBAAmB,EACjB,MAAM,mCACP;EACD,mBAAmB,EACjB,MAAM,CAAC,yCAAyC,EACjD;EAED,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,WAAW;GACT,UAAU;GACV,SAAS;GACV;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EAIP,OAAO;EACR,EACD;EACE,mBAAmB;EACnB,mBAAmB;EACnB,OAAO;EACR,CACF;CACD,iBAAiB;EACf,mBAAmB;EACnB,mBAAmB;EACnB,OAAO;EACP,QAAQ;EACR,WAAW;EACZ;CACF,CACF,EC7CY,KAAW,EAEtB,cACA,aACA,uBAAoB,IAEpB,WAAQ,UACR,kBAAe,IACf,aAAU,IACV,qBAAkB,IAClB,mBAAmB,GACnB,sBACA,sBAAmB,GACnB,sBAAmB,IACnB,UAAO,UACP,gBAAa,GACb,YAAS,WACT,WAAQ,IACR,eAAY,WACZ,QACA,GAAG,QACe;CAClB,IAAM,EAAE,aAAU,cAAW,GAAY;AAEzC,QACE,kBAAC,EAAa,SAAd;EACE,mBAAiB,KAAY;EAC7B,WAAW,EAAO;GAChB,mBAAmB,CAAC,CAAC;GACrB;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,wBAAqB;EAChB;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEF,GAAI;EAEH;EACoB,CAAA;;AAI3B,EAAQ,cAAc;;;ACxDtB,IAAa,KAAU,EAAE,aAAU,cAAW,QAAK,GAAG,QAAwB;CAC5E,IAAM,IAAK,GAAG,EAAU,UAAU,GAAO,IACnC,EAAE,mBAAgB,GAAY;AAQpC,QANA,SACE,EAAY,EAAG,QAEF,EAAY,KAAK,GAC7B,CAAC,GAAI,EAAY,CAAC,EAGnB,kBAAC,UAAD;EAAY;EAAS;EAAK,WAAW,EAAG,yBAAyB,EAAU;EAAE,GAAI;EAC9E;EACM,CAAA;;AAIb,EAAO,cAAc;;;ACvBrB,IAAa,KAAU,EAAE,aAAU,GAAG,QACpC,kBAAC,EAAa,QAAd;CAAqB,GAAI;CAAO;CAA+B,CAAA;AAGjE,EAAO,cAAc;;;ACFrB,IAAa,KAAW,EAAE,aAAU,IAAO,aAAU,QAAK,GAAG,QAC3D,kBAAC,EAAa,SAAd;CACE,wBAAqB;CAChB;CACI;CACT,GAAI;CAEH;CACoB,CAAA;AAGzB,EAAQ,cAAc;;;ACVtB,IAAa,IAQT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAQ,cAAc,WACtB,EAAO,cAAc,kBACrB,EAAM,cAAc,iBACpB,EAAY,cAAc,uBAC1B,EAAQ,cAAc,mBACtB,EAAO,cAAc,kBACrB,EAAO,cAAc,kBACrB,EAAQ,cAAc"}

package/dist/portal/Portal.d.ts

@@ -9,5 +9,5 @@ interface PortalProps {
 /**
  * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.
  */
-export declare const Portal: (props: PropsWithChildren<PortalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Portal: ({ children, container }: PropsWithChildren<PortalProps>) => import('react').ReactPortal | null;
 export {};

package/dist/portal/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`radix-ui`),t=require(`react/jsx-runtime`);var n=n=>(0,t.jsx)(e.Portal.Portal,{...n});exports.Portal=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`react`),t=require(`react-dom`);var n=({children:n,container:r})=>{let[i,a]=(0,e.useState)(!1);if((0,e.useEffect)(()=>(a(!0),()=>a(!1)),[]),!i)return null;let o=r??(typeof document<`u`?document.body:null);return o?(0,t.createPortal)(n,o):null};exports.Portal=n;
 //# sourceMappingURL=index.js.map

package/dist/portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { Portal as RadixPortal } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\ninterface PortalProps {\n  /**\n   * An optional different container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = (props: PropsWithChildren<PortalProps>) => {\n  return <RadixPortal.Portal {...props} />\n}\n"],"mappings":"4JAcA,IAAa,EAAU,IACd,EAAA,EAAA,KAAC,EAAA,OAAY,OAAb,CAAoB,GAAI,EAAS,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { type PropsWithChildren, Ref, useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface PortalProps {\n  /**\n   * An optional different container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = ({ children, container }: PropsWithChildren<PortalProps>) => {\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  if (!mounted) return null\n\n  const targetContainer = container ?? (typeof document !== 'undefined' ? document.body : null)\n\n  if (!targetContainer) return null\n\n  return createPortal(children, targetContainer)\n}\n"],"mappings":"iJAcA,IAAa,GAAU,CAAE,WAAU,eAAgD,CACjF,GAAM,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CAO7C,IALA,EAAA,EAAA,gBACE,EAAW,GAAK,KACH,EAAW,GAAM,EAC7B,EAAE,CAAC,CAEF,CAAC,EAAS,OAAO,KAErB,IAAM,EAAkB,IAAc,OAAO,SAAa,IAAc,SAAS,KAAO,MAIxF,OAFK,GAEL,EAAA,EAAA,cAAoB,EAAU,EAAgB,CAFjB"}

package/dist/portal/index.mjs

@@ -1,8 +1,13 @@
-import { Portal as e } from "radix-ui";
-import { jsx as t } from "react/jsx-runtime";
+import { useEffect as e, useState as t } from "react";
+import { createPortal as n } from "react-dom";
 //#region src/portal/Portal.tsx
-var n = (n) => /* @__PURE__ */ t(e.Portal, { ...n });
+var r = ({ children: r, container: i }) => {
+	let [a, o] = t(!1);
+	if (e(() => (o(!0), () => o(!1)), []), !a) return null;
+	let s = i ?? (typeof document < "u" ? document.body : null);
+	return s ? n(r, s) : null;
+};
 //#endregion
-export { n as Portal };
+export { r as Portal };
 
 //# sourceMappingURL=index.mjs.map

package/dist/portal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { Portal as RadixPortal } from 'radix-ui'\nimport { type PropsWithChildren, Ref } from 'react'\n\ninterface PortalProps {\n  /**\n   * An optional different container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = (props: PropsWithChildren<PortalProps>) => {\n  return <RadixPortal.Portal {...props} />\n}\n"],"mappings":";;;AAcA,IAAa,KAAU,MACd,kBAAC,EAAY,QAAb,EAAoB,GAAI,GAAS,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/portal/Portal.tsx"],"sourcesContent":["import { type PropsWithChildren, Ref, useEffect, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface PortalProps {\n  /**\n   * An optional different container where the portaled content should be appended.\n   */\n  container?: HTMLElement | null\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A utility component that renders content into a different part of the DOM tree, typically outside the main hierarchy.\n */\nexport const Portal = ({ children, container }: PropsWithChildren<PortalProps>) => {\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  if (!mounted) return null\n\n  const targetContainer = container ?? (typeof document !== 'undefined' ? document.body : null)\n\n  if (!targetContainer) return null\n\n  return createPortal(children, targetContainer)\n}\n"],"mappings":";;;AAcA,IAAa,KAAU,EAAE,aAAU,mBAAgD;CACjF,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM;AAO7C,KALA,SACE,EAAW,GAAK,QACH,EAAW,GAAM,GAC7B,EAAE,CAAC,EAEF,CAAC,EAAS,QAAO;CAErB,IAAM,IAAkB,MAAc,OAAO,WAAa,MAAc,SAAS,OAAO;AAIxF,QAFK,IAEE,EAAa,GAAU,EAAgB,GAFjB"}

package/dist/rating-display/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/StarFill`),o=require(`@spark-ui/icons/StarOutline`);var s=(0,r.createContext)(null),c=({value:e,size:t,count:n,children:r})=>(0,i.jsx)(s.Provider,{value:{value:e,size:t,count:n},children:r}),l=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`RatingDisplay compound components must be used within RatingDisplay.`);return e},u=({value:t=0,size:n=`md`,count:r,asChild:a=!1,ref:o,children:s,...l})=>(0,i.jsx)(c,{value:t??0,size:n,count:r,children:(0,i.jsx)(a?e.Slot:`div`,{ref:o,className:`gap-x-sm relative inline-flex items-center`,"data-spark-component":`rating-display`,...l,children:s})});u.displayName=`RatingDisplay`;var d=(0,n.cva)(`text-on-surface/dim-1`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),f=({className:e,children:t,...n})=>{let{count:r,size:a}=l();if(r===void 0)return null;let o=typeof t==`function`?t(r):t??r;return(0,i.jsxs)(`span`,{className:d({size:a??`md`,className:e}),...n,children:[`(`,o,`)`]})};f.displayName=`RatingDisplay.Count`;var p=(0,n.cva)([`relative block after:absolute after:block after:inset-0`],{variants:{gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},defaultVariants:{gap:`sm`}}),m=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-3`},design:{filled:[`text-main-variant`],outlined:[`text-on-surface/dim-3`]}}}),h=({value:e,size:r})=>(0,i.jsxs)(`div`,{"data-spark-component":`rating-display-star`,"data-part":`star`,className:p({gap:r===`lg`?`md`:`sm`}),children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`z-raised absolute overflow-hidden`),style:{width:e*100+`%`},children:(0,i.jsx)(t.t,{className:m({size:r,design:`filled`}),children:(0,i.jsx)(a.StarFill,{})})}),(0,i.jsx)(t.t,{className:m({size:r,design:`outlined`}),children:(0,i.jsx)(o.StarOutline,{})})]});function g(e){return Math.round(e/.5)*.5}function _(e){let t=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(t,{minimumFractionDigits:0,maximumFractionDigits:1}).format(e)}function v({value:e,index:t}){if(e===void 0)return 0;let n=t+1,r=g(e);return Math.ceil(r)<n?0:r>=n?1:.5}function y(e){return e===void 0||e<1?0:e<4?.5:1}var b=({size:e,variant:t=`default`,getFillMode:r})=>{let{value:a,size:o}=l(),s=e??o,c=e=>r?r({index:e,value:a}):t===`single-star`?y(a):v({index:e,value:a}),u=t===`single-star`?[c(0)]:Array.from({length:5},(e,t)=>c(t));return(0,i.jsx)(`div`,{"data-spark-component":`rating-display-stars`,className:(0,n.cx)(s===`lg`?`gap-x-md`:`gap-x-sm`,`flex`),children:u.map((e,t)=>(0,i.jsx)(h,{size:s,value:e},t))})};b.displayName=`RatingDisplay.Stars`;var x=(0,n.cva)(`text-on-surface font-bold`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),S=({className:e,children:t,...n})=>{let{value:r,size:a}=l(),o=_(r),s=typeof t==`function`?t(o,r):t??o;return(0,i.jsx)(`span`,{"data-spark-component":`rating-display-value`,className:x({size:a??`md`,className:e}),...n,children:s})};S.displayName=`RatingDisplay.Value`;var C=Object.assign(u,{Stars:b,Value:S,Count:f});C.displayName=`RatingDisplay`,b.displayName=`RatingDisplay.Stars`,S.displayName=`RatingDisplay.Value`,f.displayName=`RatingDisplay.Count`,exports.RatingDisplay=C;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/StarFill`),o=require(`@spark-ui/icons/StarOutline`);var s=(0,r.createContext)(null),c=({value:e,size:t,count:n,children:r})=>(0,i.jsx)(s.Provider,{value:{value:e,size:t,count:n},children:r}),l=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`RatingDisplay compound components must be used within RatingDisplay.`);return e},u=({value:t=0,size:n=`md`,count:r,asChild:a=!1,ref:o,children:s,...l})=>(0,i.jsx)(c,{value:t??0,size:n,count:r,children:(0,i.jsx)(a?e.Slot:`div`,{ref:o,className:`gap-x-sm relative inline-flex items-center`,"data-spark-component":`rating-display`,...l,children:s})});u.displayName=`RatingDisplay`;var d=(0,n.cva)(`text-on-surface/dim-1`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),f=({className:e,children:t,...n})=>{let{count:r,size:a}=l();if(r===void 0)return null;let o=typeof t==`function`?t(r):t??r;return(0,i.jsxs)(`span`,{className:d({size:a??`md`,className:e}),...n,children:[`(`,o,`)`]})};f.displayName=`RatingDisplay.Count`;var p=(0,n.cva)([`relative block after:absolute after:block after:inset-0`],{variants:{gap:{sm:[`after:w-[calc(100%+(var(--spacing-sm)))]`,`last-of-type:after:content-none`],md:[`after:w-[calc(100%+(var(--spacing-md)))]`,`last-of-type:after:content-none`]}},defaultVariants:{gap:`sm`}}),m=(0,n.cva)(``,{variants:{size:{sm:`text-caption`,md:`text-body-1`,lg:`text-display-3`},design:{filled:[`text-main-variant`],outlined:[`text-on-surface/dim-3`]}}}),h=({value:e,size:r})=>(0,i.jsxs)(`div`,{"data-spark-component":`rating-display-star`,"data-part":`star`,className:p({gap:r===`lg`?`md`:`sm`}),children:[(0,i.jsx)(`div`,{className:(0,n.cx)(`absolute overflow-hidden`),style:{width:e*100+`%`},children:(0,i.jsx)(t.t,{className:m({size:r,design:`filled`}),children:(0,i.jsx)(a.StarFill,{})})}),(0,i.jsx)(t.t,{className:m({size:r,design:`outlined`}),children:(0,i.jsx)(o.StarOutline,{})})]});function g(e){return Math.round(e/.5)*.5}function _(e){let t=Intl.DateTimeFormat().resolvedOptions().locale;return new Intl.NumberFormat(t,{minimumFractionDigits:0,maximumFractionDigits:1}).format(e)}function v({value:e,index:t}){if(e===void 0)return 0;let n=t+1,r=g(e);return Math.ceil(r)<n?0:r>=n?1:.5}function y(e){return e===void 0||e<1?0:e<4?.5:1}var b=({size:e,variant:t=`default`,getFillMode:r})=>{let{value:a,size:o}=l(),s=e??o,c=e=>r?r({index:e,value:a}):t===`single-star`?y(a):v({index:e,value:a}),u=t===`single-star`?[c(0)]:Array.from({length:5},(e,t)=>c(t));return(0,i.jsx)(`div`,{"data-spark-component":`rating-display-stars`,className:(0,n.cx)(s===`lg`?`gap-x-md`:`gap-x-sm`,`flex`),children:u.map((e,t)=>(0,i.jsx)(h,{size:s,value:e},t))})};b.displayName=`RatingDisplay.Stars`;var x=(0,n.cva)(`text-on-surface font-bold`,{variants:{size:{sm:`text-caption`,md:`text-body-2`,lg:`text-display-3`}},defaultVariants:{size:`md`}}),S=({className:e,children:t,...n})=>{let{value:r,size:a}=l(),o=_(r),s=typeof t==`function`?t(o,r):t??o;return(0,i.jsx)(`span`,{"data-spark-component":`rating-display-value`,className:x({size:a??`md`,className:e}),...n,children:s})};S.displayName=`RatingDisplay.Value`;var C=Object.assign(u,{Stars:b,Value:S,Count:f});C.displayName=`RatingDisplay`,b.displayName=`RatingDisplay.Stars`,S.displayName=`RatingDisplay.Value`,f.displayName=`RatingDisplay.Count`,exports.RatingDisplay=C;
 //# sourceMappingURL=index.js.map

package/dist/rating-display/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return (\n    <RatingDisplayContext.Provider value={{ value, size, count }}>\n      {children}\n    </RatingDisplayContext.Provider>\n  )\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The number of ratings or reviews. Renders a <span> element. */\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('z-raised absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/** The visual star rating display. Renders a <div> element. */\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface font-bold', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The numeric rating value. Renders a <span> element. */\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/**\n * A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"mVAUA,IAAM,GAAA,EAAA,EAAA,eAAuE,KAAK,CAIrE,GAAyB,CACpC,QACA,OACA,QACA,eAGE,EAAA,EAAA,KAAC,EAAqB,SAAtB,CAA+B,MAAO,CAAE,QAAO,OAAM,QAAO,CACzD,WAC6B,CAAA,CAIvB,MAAyB,CACpC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAqB,CAChD,GAAI,CAAC,EACH,MAAU,MAAM,uEAAuE,CAGzF,OAAO,GCAI,GAAiB,CAC5B,QAAQ,EACR,OAAO,KACP,QACA,UAAU,GACV,MACA,WACA,GAAG,MAMD,EAAA,EAAA,KAAC,EAAD,CAAuB,MAJL,GAAS,EAIsB,OAAa,kBAC5D,EAAA,EAAA,KAJc,EAAU,EAAA,KAAO,MAI/B,CACO,MACL,UAAU,6CACV,uBAAqB,iBACrB,GAAI,EAEH,WACS,CAAA,CACU,CAAA,CAI5B,EAAc,YAAc,gBC9C5B,IAAM,GAAA,EAAA,EAAA,KAA+B,wBAAyB,CAC5D,SAAU,CACR,KAAM,CACJ,GAAI,eACJ,GAAI,cACJ,GAAI,iBACL,CACF,CACD,gBAAiB,CACf,KAAM,KACP,CACF,CAAC,CAGW,GAAsB,CAAE,YAAW,WAAU,GAAG,KAAoC,CAC/F,GAAM,CAAE,QAAO,QAAS,GAAkB,CAC1C,GAAI,IAAU,IAAA,GAAW,OAAO,KAChC,IAAM,EAAgB,OAAO,GAAa,WAAa,EAAS,EAAM,CAAI,GAAY,EAEtF,OACE,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAyB,CAAE,KAAM,GAAQ,KAAM,YAAW,CAAC,CAAE,GAAI,WAAlF,CAAwF,IACpF,EAAc,IACX,IAIX,EAAmB,YAAc,sBChCjC,IAAM,GAAA,EAAA,EAAA,KAA8B,CAAC,0DAA0D,CAAE,CAC/F,SAAU,CACR,IAAK,CACH,GAAI,CAAC,2CAA4C,kCAAkC,CACnF,GAAI,CAAC,2CAA4C,kCAAkC,CACpF,CACF,CACD,gBAAiB,CACf,IAAK,KACN,CACF,CAAC,CAEI,GAAA,EAAA,EAAA,KAAkC,GAAI,CAC1C,SAAU,CACR,KAAM,CACJ,GAAI,eACJ,GAAI,cACJ,GAAI,iBACL,CACD,OAAQ,CACN,OAAQ,CAAC,oBAAoB,CAC7B,SAAU,CAAC,wBAAwB,CACpC,CACF,CACF,CAAC,CAaW,GAAqB,CAAE,QAAO,WAEvC,EAAA,EAAA,MAAC,MAAD,CACE,uBAAqB,sBACrB,YAAU,OACV,UAAW,EAAwB,CACjC,IAAK,IAAS,KAAO,KAAO,KAC7B,CAAC,UALJ,EAOE,EAAA,EAAA,KAAC,MAAD,CAAK,WAAA,EAAA,EAAA,IAAc,oCAAoC,CAAE,MAAO,CAAE,MAAO,EAAQ,IAAM,IAAK,WAC1F,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,UAAW,EAA4B,CACrC,OACA,OAAQ,SACT,CAAC,WAEF,EAAA,EAAA,KAAC,EAAA,SAAD,EAAY,CAAA,CACP,CAAA,CACH,CAAA,EAEN,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,UAAW,EAA4B,CAAE,OAAM,OAAQ,WAAY,CAAC,WACxE,EAAA,EAAA,KAAC,EAAA,YAAD,EAAe,CAAA,CACV,CAAA,CACH,GCjEV,SAAS,EAAsB,EAAqB,CAClD,OAAO,KAAK,MAAM,EAAM,GAAI,CAAG,GAGjC,SAAS,EAAkB,EAAuB,CAChD,IAAM,EAAS,KAAK,gBAAgB,CAAC,iBAAiB,CAAC,OAEvD,OAAO,IAAI,KAAK,aAAa,EAAQ,CACnC,sBAAuB,EACvB,sBAAuB,EACxB,CAAC,CAAC,OAAO,EAAM,CAGlB,SAAS,EAAa,CAAE,QAAO,SAAuD,CACpF,GAAI,IAAU,IAAA,GAAW,MAAO,GAEhC,IAAM,EAAe,EAAQ,EACvB,EAAiB,EAAsB,EAAM,CAInD,OAFI,KAAK,KAAK,EAAe,CAAG,EAAqB,EAE9C,GAAkB,EAAe,EAAI,GAG9C,SAAS,EAAmB,EAA2B,CAIrD,OAHI,IAAU,IAAA,IACV,EAAQ,EAAU,EAClB,EAAQ,EAAU,GACf,ECRT,IAAa,GAAsB,CACjC,OACA,UAAU,UACV,iBAC6B,CAC7B,GAAM,CAAE,QAAO,KAAM,GAAgB,GAAkB,CACjD,EAAe,GAAQ,EACvB,EAAmB,GACnB,EACK,EAAY,CAAE,QAAO,QAAO,CAAC,CAG/B,IAAY,cAAgB,EAAmB,EAAM,CAAG,EAAa,CAAE,QAAO,QAAO,CAAC,CAGzF,EACJ,IAAY,cACR,CAAC,EAAgB,EAAE,CAAC,CACpB,MAAM,KAAK,CAAE,OAAQ,EAAG,EAAG,EAAG,IAAU,EAAgB,EAAM,CAAC,CAErE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,uBACrB,WAAA,EAAA,EAAA,IAAc,IAAiB,KAAO,WAAa,WAAY,OAAO,UAErE,EAAM,KAAK,EAAW,KACrB,EAAA,EAAA,KAAC,EAAD,CAA+B,KAAM,EAAc,MAAO,EAAa,CAA/C,EAA+C,CACvE,CACE,CAAA,EAIV,EAAmB,YAAc,sBCvCjC,IAAM,GAAA,EAAA,EAAA,KAA+B,4BAA6B,CAChE,SAAU,CACR,KAAM,CACJ,GAAI,eACJ,GAAI,cACJ,GAAI,iBACL,CACF,CACD,gBAAiB,CACf,KAAM,KACP,CACF,CAAC,CAGW,GAAsB,CAAE,YAAW,WAAU,GAAG,KAAoC,CAC/F,GAAM,CAAE,QAAO,QAAS,GAAkB,CACpC,EAAiB,EAAkB,EAAM,CACzC,EACJ,OAAO,GAAa,WAAa,EAAS,EAAgB,EAAM,CAAI,GAAY,EAElF,OACE,EAAA,EAAA,KAAC,OAAD,CACE,uBAAqB,uBACrB,UAAW,EAAyB,CAAE,KAAM,GAAQ,KAAM,YAAW,CAAC,CACtE,GAAI,WAEH,EACI,CAAA,EAIX,EAAmB,YAAc,sBCtCjC,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,MAAA,EACA,MAAA,EACA,MAAA,EACD,CAAC,CAEF,EAAc,YAAc,gBAC5B,EAAM,YAAc,sBACpB,EAAM,YAAc,sBACpB,EAAM,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return (\n    <RatingDisplayContext.Provider value={{ value, size, count }}>\n      {children}\n    </RatingDisplayContext.Provider>\n  )\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The number of ratings or reviews. Renders a <span> element. */\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/** The visual star rating display. Renders a <div> element. */\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface font-bold', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The numeric rating value. Renders a <span> element. */\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/**\n * A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}

package/dist/rating-display/index.mjs

@@ -80,7 +80,7 @@ var g = n(["relative block after:absolute after:block after:inset-0"], {
 	"data-part": "star",
 	className: g({ gap: n === "lg" ? "md" : "sm" }),
 	children: [/* @__PURE__ */ o("div", {
-		className: r("z-raised absolute overflow-hidden"),
+		className: r("absolute overflow-hidden"),
 		style: { width: e * 100 + "%" },
 		children: /* @__PURE__ */ o(t, {
 			className: _({

package/dist/rating-display/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return (\n    <RatingDisplayContext.Provider value={{ value, size, count }}>\n      {children}\n    </RatingDisplayContext.Provider>\n  )\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The number of ratings or reviews. Renders a <span> element. */\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('z-raised absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/** The visual star rating display. Renders a <div> element. */\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface font-bold', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The numeric rating value. Renders a <span> element. */\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/**\n * A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/rating-display/RatingDisplayContext.tsx","../../src/rating-display/RatingDisplay.tsx","../../src/rating-display/RatingDisplayCount.tsx","../../src/rating-display/RatingDisplayStar.tsx","../../src/rating-display/utils.ts","../../src/rating-display/RatingDisplayStars.tsx","../../src/rating-display/RatingDisplayValue.tsx","../../src/rating-display/index.ts"],"sourcesContent":["import { createContext, type PropsWithChildren, useContext } from 'react'\n\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\ninterface RatingDisplayContextValue {\n  value: number\n  size: RatingDisplayStarProps['size']\n  count?: number\n}\n\nconst RatingDisplayContext = createContext<RatingDisplayContextValue | null>(null)\n\ninterface RatingDisplayProviderProps extends PropsWithChildren<RatingDisplayContextValue> {}\n\nexport const RatingDisplayProvider = ({\n  value,\n  size,\n  count,\n  children,\n}: RatingDisplayProviderProps) => {\n  return (\n    <RatingDisplayContext.Provider value={{ value, size, count }}>\n      {children}\n    </RatingDisplayContext.Provider>\n  )\n}\n\nexport const useRatingDisplay = () => {\n  const context = useContext(RatingDisplayContext)\n  if (!context) {\n    throw new Error('RatingDisplay compound components must be used within RatingDisplay.')\n  }\n\n  return context\n}\n","import { type ComponentPropsWithRef, type PropsWithChildren } from 'react'\n\nimport { Slot } from '../slot'\nimport { RatingDisplayProvider } from './RatingDisplayContext'\nimport type { RatingDisplayStarProps } from './RatingDisplayStar'\n\nexport interface RatingDisplayProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * When true, merges props onto the single child element instead of rendering a div.\n   * Use to render the root as a link or another custom element.\n   */\n  asChild?: boolean\n  /**\n   * The rating value to display, on a scale from 0 to 5.\n   */\n  value?: number\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Optional count value available to `RatingDisplay.Count`.\n   */\n  count?: number\n  /**\n   * Accessible description of the rating content.\n   */\n  'aria-label': string\n}\n\nexport type RatingDisplayRootProps = RatingDisplayProps\n\nexport const RatingDisplay = ({\n  value = 0,\n  size = 'md',\n  count,\n  asChild = false,\n  ref,\n  children,\n  ...rest\n}: RatingDisplayProps) => {\n  const ratingValue = value ?? 0\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <RatingDisplayProvider value={ratingValue} size={size} count={count}>\n      <Component\n        ref={ref}\n        className=\"gap-x-sm relative inline-flex items-center\"\n        data-spark-component=\"rating-display\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    </RatingDisplayProvider>\n  )\n}\n\nRatingDisplay.displayName = 'RatingDisplay'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\n\nexport interface RatingDisplayCountProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom count content.\n   * Pass a render function to receive the count value and return the content to render.\n   */\n  children?: ReactNode | ((count: number) => ReactNode)\n}\n\nconst ratingDisplayCountStyles = cva('text-on-surface/dim-1', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The number of ratings or reviews. Renders a <span> element. */\nexport const RatingDisplayCount = ({ className, children, ...rest }: RatingDisplayCountProps) => {\n  const { count, size } = useRatingDisplay()\n  if (count === undefined) return null\n  const renderedCount = typeof children === 'function' ? children(count) : (children ?? count)\n\n  return (\n    <span className={ratingDisplayCountStyles({ size: size ?? 'md', className })} {...rest}>\n      ({renderedCount})\n    </span>\n  )\n}\n\nRatingDisplayCount.displayName = 'RatingDisplay.Count'\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cva, cx, type VariantProps } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport type { StarValue } from './types'\n\nconst ratingDisplayStarStyles = cva(['relative block after:absolute after:block after:inset-0'], {\n  variants: {\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  defaultVariants: {\n    gap: 'sm',\n  },\n})\n\nconst ratingDisplayStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-1',\n      lg: 'text-display-3',\n    },\n    design: {\n      filled: ['text-main-variant'],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingDisplayStarstylesProps = Omit<VariantProps<typeof ratingDisplayStarStyles>, never>\ntype RatingDisplayStarIconStylesProps = Omit<\n  VariantProps<typeof ratingDisplayStarIconStyles>,\n  'design'\n>\n\nexport interface RatingDisplayStarProps\n  extends RatingDisplayStarstylesProps, RatingDisplayStarIconStylesProps {\n  value: StarValue\n}\n\nexport const RatingDisplayStar = ({ value, size }: RatingDisplayStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-display-star\"\n      data-part=\"star\"\n      className={ratingDisplayStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n      })}\n    >\n      <div className={cx('absolute overflow-hidden')} style={{ width: value * 100 + '%' }}>\n        <Icon\n          className={ratingDisplayStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingDisplayStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction formatRatingValue(value: number): string {\n  const locale = Intl.DateTimeFormat().resolvedOptions().locale\n\n  return new Intl.NumberFormat(locale, {\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 1,\n  }).format(value)\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction getSingleStarValue(value?: number): StarValue {\n  if (value === undefined) return 0\n  if (value < 1) return 0\n  if (value < 4) return 0.5\n  return 1\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { formatRatingValue, getNearestHalfDecimal, getSingleStarValue, getStarValue, splitAt }\n","import { cx } from 'class-variance-authority'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { RatingDisplayStar, type RatingDisplayStarProps } from './RatingDisplayStar'\nimport type { StarValue } from './types'\nimport { getSingleStarValue, getStarValue } from './utils'\n\nexport interface RatingDisplayStarsProps {\n  size?: RatingDisplayStarProps['size']\n  /**\n   * Sets the rendering mode for stars.\n   * @default 'default'\n   */\n  variant?: 'default' | 'single-star'\n  /**\n   * Custom fill algorithm for each star.\n   * By default, stars are rounded to the nearest 0.5.\n   */\n  getFillMode?: ({ value, index }: { value?: number; index: number }) => StarValue\n}\n\n/** The visual star rating display. Renders a <div> element. */\nexport const RatingDisplayStars = ({\n  size,\n  variant = 'default',\n  getFillMode,\n}: RatingDisplayStarsProps) => {\n  const { value, size: contextSize } = useRatingDisplay()\n  const resolvedSize = size ?? contextSize\n  const getDisplayValue = (index: number) => {\n    if (getFillMode) {\n      return getFillMode({ index, value })\n    }\n\n    return variant === 'single-star' ? getSingleStarValue(value) : getStarValue({ index, value })\n  }\n\n  const stars =\n    variant === 'single-star'\n      ? [getDisplayValue(0)]\n      : Array.from({ length: 5 }, (_, index) => getDisplayValue(index))\n\n  return (\n    <div\n      data-spark-component=\"rating-display-stars\"\n      className={cx(resolvedSize === 'lg' ? 'gap-x-md' : 'gap-x-sm', 'flex')}\n    >\n      {stars.map((starValue, index) => (\n        <RatingDisplayStar key={index} size={resolvedSize} value={starValue} />\n      ))}\n    </div>\n  )\n}\n\nRatingDisplayStars.displayName = 'RatingDisplay.Stars'\n","import { cva } from 'class-variance-authority'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRatingDisplay } from './RatingDisplayContext'\nimport { formatRatingValue } from './utils'\n\nexport interface RatingDisplayValueProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /**\n   * Custom value content.\n   * Pass a render function to receive the formatted value (first arg) and raw value (second arg),\n   * then return the content to render.\n   */\n  children?: ReactNode | ((formattedValue: string, value: number) => ReactNode)\n}\n\nconst ratingDisplayValueStyles = cva('text-on-surface font-bold', {\n  variants: {\n    size: {\n      sm: 'text-caption',\n      md: 'text-body-2',\n      lg: 'text-display-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/** The numeric rating value. Renders a <span> element. */\nexport const RatingDisplayValue = ({ className, children, ...rest }: RatingDisplayValueProps) => {\n  const { value, size } = useRatingDisplay()\n  const formattedValue = formatRatingValue(value)\n  const renderedValue =\n    typeof children === 'function' ? children(formattedValue, value) : (children ?? formattedValue)\n\n  return (\n    <span\n      data-spark-component=\"rating-display-value\"\n      className={ratingDisplayValueStyles({ size: size ?? 'md', className })}\n      {...rest}\n    >\n      {renderedValue}\n    </span>\n  )\n}\n\nRatingDisplayValue.displayName = 'RatingDisplay.Value'\n","import { RatingDisplay as Root } from './RatingDisplay'\nimport { RatingDisplayCount as Count } from './RatingDisplayCount'\nimport { RatingDisplayStars as Stars } from './RatingDisplayStars'\nimport { RatingDisplayValue as Value } from './RatingDisplayValue'\n\n/**\n * A read-only component that displays a rating value using stars.\n */\nexport const RatingDisplay: typeof Root & {\n  Stars: typeof Stars\n  Value: typeof Value\n  Count: typeof Count\n} = Object.assign(Root, {\n  Stars,\n  Value,\n  Count,\n})\n\nRatingDisplay.displayName = 'RatingDisplay'\nStars.displayName = 'RatingDisplay.Stars'\nValue.displayName = 'RatingDisplay.Value'\nCount.displayName = 'RatingDisplay.Count'\n\nexport { type RatingDisplayProps, type RatingDisplayRootProps } from './RatingDisplay'\nexport { type RatingDisplayStarsProps } from './RatingDisplayStars'\nexport { type RatingDisplayValueProps } from './RatingDisplayValue'\nexport { type RatingDisplayCountProps } from './RatingDisplayCount'\nexport type { StarValue } from './types'\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAuB,EAAgD,KAAK,EAIrE,KAAyB,EACpC,UACA,SACA,UACA,kBAGE,kBAAC,EAAqB,UAAtB;CAA+B,OAAO;EAAE;EAAO;EAAM;EAAO;CACzD;CAC6B,CAAA,EAIvB,UAAyB;CACpC,IAAM,IAAU,EAAW,EAAqB;AAChD,KAAI,CAAC,EACH,OAAU,MAAM,uEAAuE;AAGzF,QAAO;GCAI,KAAiB,EAC5B,WAAQ,GACR,UAAO,MACP,UACA,aAAU,IACV,QACA,aACA,GAAG,QAMD,kBAAC,GAAD;CAAuB,OAJL,KAAS;CAIsB;CAAa;WAC5D,kBAJc,IAAU,IAAO,OAI/B;EACO;EACL,WAAU;EACV,wBAAqB;EACrB,GAAI;EAEH;EACS,CAAA;CACU,CAAA;AAI5B,EAAc,cAAc;;;AC9C5B,IAAM,IAA2B,EAAI,yBAAyB;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC,EAGW,KAAsB,EAAE,cAAW,aAAU,GAAG,QAAoC;CAC/F,IAAM,EAAE,UAAO,YAAS,GAAkB;AAC1C,KAAI,MAAU,KAAA,EAAW,QAAO;CAChC,IAAM,IAAgB,OAAO,KAAa,aAAa,EAAS,EAAM,GAAI,KAAY;AAEtF,QACE,kBAAC,QAAD;EAAM,WAAW,EAAyB;GAAE,MAAM,KAAQ;GAAM;GAAW,CAAC;EAAE,GAAI;YAAlF;GAAwF;GACpF;GAAc;GACX;;;AAIX,EAAmB,cAAc;;;AChCjC,IAAM,IAA0B,EAAI,CAAC,0DAA0D,EAAE;CAC/F,UAAU,EACR,KAAK;EACH,IAAI,CAAC,4CAA4C,kCAAkC;EACnF,IAAI,CAAC,4CAA4C,kCAAkC;EACpF,EACF;CACD,iBAAiB,EACf,KAAK,MACN;CACF,CAAC,EAEI,IAA8B,EAAI,IAAI,EAC1C,UAAU;CACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,QAAQ;EACN,QAAQ,CAAC,oBAAoB;EAC7B,UAAU,CAAC,wBAAwB;EACpC;CACF,EACF,CAAC,EAaW,KAAqB,EAAE,UAAO,cAEvC,kBAAC,OAAD;CACE,wBAAqB;CACrB,aAAU;CACV,WAAW,EAAwB,EACjC,KAAK,MAAS,OAAO,OAAO,MAC7B,CAAC;WALJ,CAOE,kBAAC,OAAD;EAAK,WAAW,EAAG,2BAA2B;EAAE,OAAO,EAAE,OAAO,IAAQ,MAAM,KAAK;YACjF,kBAAC,GAAD;GACE,WAAW,EAA4B;IACrC;IACA,QAAQ;IACT,CAAC;aAEF,kBAAC,GAAD,EAAY,CAAA;GACP,CAAA;EACH,CAAA,EAEN,kBAAC,GAAD;EAAM,WAAW,EAA4B;GAAE;GAAM,QAAQ;GAAY,CAAC;YACxE,kBAAC,GAAD,EAAe,CAAA;EACV,CAAA,CACH;;;;ACjEV,SAAS,EAAsB,GAAqB;AAClD,QAAO,KAAK,MAAM,IAAM,GAAI,GAAG;;AAGjC,SAAS,EAAkB,GAAuB;CAChD,IAAM,IAAS,KAAK,gBAAgB,CAAC,iBAAiB,CAAC;AAEvD,QAAO,IAAI,KAAK,aAAa,GAAQ;EACnC,uBAAuB;EACvB,uBAAuB;EACxB,CAAC,CAAC,OAAO,EAAM;;AAGlB,SAAS,EAAa,EAAE,UAAO,YAAuD;AACpF,KAAI,MAAU,KAAA,EAAW,QAAO;CAEhC,IAAM,IAAe,IAAQ,GACvB,IAAiB,EAAsB,EAAM;AAInD,QAFI,KAAK,KAAK,EAAe,GAAG,IAAqB,IAE9C,KAAkB,IAAe,IAAI;;AAG9C,SAAS,EAAmB,GAA2B;AAIrD,QAHI,MAAU,KAAA,KACV,IAAQ,IAAU,IAClB,IAAQ,IAAU,KACf;;;;ACRT,IAAa,KAAsB,EACjC,SACA,aAAU,WACV,qBAC6B;CAC7B,IAAM,EAAE,UAAO,MAAM,MAAgB,GAAkB,EACjD,IAAe,KAAQ,GACvB,KAAmB,MACnB,IACK,EAAY;EAAE;EAAO;EAAO,CAAC,GAG/B,MAAY,gBAAgB,EAAmB,EAAM,GAAG,EAAa;EAAE;EAAO;EAAO,CAAC,EAGzF,IACJ,MAAY,gBACR,CAAC,EAAgB,EAAE,CAAC,GACpB,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAAU,EAAgB,EAAM,CAAC;AAErE,QACE,kBAAC,OAAD;EACE,wBAAqB;EACrB,WAAW,EAAG,MAAiB,OAAO,aAAa,YAAY,OAAO;YAErE,EAAM,KAAK,GAAW,MACrB,kBAAC,GAAD;GAA+B,MAAM;GAAc,OAAO;GAAa,EAA/C,EAA+C,CACvE;EACE,CAAA;;AAIV,EAAmB,cAAc;;;ACvCjC,IAAM,IAA2B,EAAI,6BAA6B;CAChE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC,EAGW,KAAsB,EAAE,cAAW,aAAU,GAAG,QAAoC;CAC/F,IAAM,EAAE,UAAO,YAAS,GAAkB,EACpC,IAAiB,EAAkB,EAAM,EACzC,IACJ,OAAO,KAAa,aAAa,EAAS,GAAgB,EAAM,GAAI,KAAY;AAElF,QACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,WAAW,EAAyB;GAAE,MAAM,KAAQ;GAAM;GAAW,CAAC;EACtE,GAAI;YAEH;EACI,CAAA;;AAIX,EAAmB,cAAc;;;ACtCjC,IAAa,IAIT,OAAO,OAAO,GAAM;CACtB,OAAA;CACA,OAAA;CACA,OAAA;CACD,CAAC;AAEF,EAAc,cAAc,iBAC5B,EAAM,cAAc,uBACpB,EAAM,cAAc,uBACpB,EAAM,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.9.1",
+  "version": "17.9.3",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "1.0.0",
-    "@spark-ui/hooks": "17.9.1",
-    "@spark-ui/icons": "17.9.1",
-    "@spark-ui/internal-utils": "17.9.1",
+    "@spark-ui/hooks": "17.9.3",
+    "@spark-ui/icons": "17.9.3",
+    "@spark-ui/internal-utils": "17.9.3",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -62,7 +62,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.9.1",
+    "@spark-ui/theme-utils": "17.9.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"