@spark-ui/components 17.9.2 → 17.10.0

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('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.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', {\n  variants: {\n    size: {\n      sm: 'text-caption-highlight',\n      md: 'text-body-2-highlight',\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

@@ -139,10 +139,10 @@ var C = ({ size: e, variant: t = "default", getFillMode: n }) => {
 C.displayName = "RatingDisplay.Stars";
 //#endregion
 //#region src/rating-display/RatingDisplayValue.tsx
-var w = n("text-on-surface font-bold", {
+var w = n("text-on-surface", {
 	variants: { size: {
-		sm: "text-caption",
-		md: "text-body-2",
+		sm: "text-caption-highlight",
+		md: "text-body-2-highlight",
 		lg: "text-display-3"
 	} },
 	defaultVariants: { size: "md" }

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('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', {\n  variants: {\n    size: {\n      sm: 'text-caption-highlight',\n      md: 'text-body-2-highlight',\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/tabs/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`),n=require(`../button-3F9Xrf4E.js`),r=require(`../icon-button-jcPwRD21.js`),i=require(`../popover-ayPbAw59.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/internal-utils`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/icons/ArrowVerticalRight`),d=require(`@spark-ui/icons/ArrowVerticalLeft`),f=require(`@base-ui/react/tabs`),p=require(`@spark-ui/icons/MoreMenuHorizontal`);var m=(0,o.createContext)({}),h=()=>{let e=(0,o.useContext)(m);if(!e)throw Error(`useTabsContext must be used within a TabsContext Provider`);return e},g=(0,a.cva)([`flex`,`data-[orientation=horizontal]:flex-col`,`data-[orientation=vertical]:flex-row`,`max-w-full`]);function _(t){return t?({...t})=>(0,s.jsx)(e.Slot,{...t}):void 0}var v=({intent:e=`support`,size:t=`md`,asChild:n=!1,forceMount:r=!1,orientation:i=`horizontal`,children:a,className:o,ref:c,...l})=>{let u=_(n);return(0,s.jsx)(m.Provider,{value:{intent:e,size:t,orientation:i,forceMount:r},children:(0,s.jsx)(f.Tabs.Root,{ref:c,orientation:i,className:g({className:o}),"data-spark-component":`tabs`,render:u,...l,children:a})})};v.displayName=`Tabs`;var y=(0,a.cva)([`w-full p-lg`,`focus-visible:u-outline-inset`],{variants:{forceMount:{true:`data-[hidden]:hidden`,false:``}}}),b=({children:e,asChild:t=!1,className:n,ref:r,forceMount:i,...a})=>{let{forceMount:o}=h(),c=_(t),l=o||i;return(0,s.jsx)(f.Tabs.Panel,{"data-spark-component":`tabs-content`,ref:r,keepMounted:l,className:y({className:n,forceMount:l}),render:c,...a,children:e})};b.displayName=`Tabs.Content`;var x=(0,a.cva)([`relative flex`]),S=(0,a.cva)([`flex w-full`,`data-[orientation=horizontal]:flex-row`,`data-[orientation=vertical]:flex-col`,`overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden`,`after:flex after:shrink after:grow after:border-outline`,`data-[orientation=horizontal]:after:border-b-sm`,`data-[orientation=vertical]:after:border-r-sm`]),C=(0,a.cva)([`h-auto! flex-none`,`border-b-sm border-outline`,`outline-hidden`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!`]),w=(e,t)=>{let[n,r]=(0,o.useState)({width:void 0,height:void 0}),i=(0,o.useRef)(null),a=(0,o.useRef)(t);return(0,o.useEffect)(()=>{a.current=t},[t]),(0,o.useEffect)(()=>{let t=e&&`current`in e?e.current:e;if(!(!t||i.current))return i.current=new ResizeObserver(([e])=>{let{inlineSize:t,blockSize:n}=e?.borderBoxSize?.[0]??{};a.current?.(e),r({width:t,height:n})}),i.current.observe(t),()=>{i.current&&i.current.unobserve(t)}},[e,i,a]),n},T=({asChild:e=!1,loop:r=!1,children:i,className:a,ref:c,...l})=>{let p=(0,o.useRef)(null),m=(0,o.useRef)(null),g=c||m,{orientation:v}=h(),y=_(e),{width:b}=w(p),[T,E]=(0,o.useState)({prev:`hidden`,next:`hidden`});(0,o.useEffect)(()=>{typeof g==`function`||!g.current||E(v===`horizontal`?{prev:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`,next:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`}:{prev:`hidden`,next:`hidden`})},[v,g,b]),(0,o.useEffect)(()=>{if(typeof g==`function`||!g.current||T.prev===`hidden`||r)return;let e=e=>{E({prev:e.scrollLeft>0?`visible`:`disabled`,next:e.scrollLeft+e.clientWidth<e.scrollWidth?`visible`:`disabled`})},t=g.current;return e(t),t.addEventListener(`scroll`,({target:t})=>e(t)),()=>t.removeEventListener(`scroll`,({target:t})=>e(t))},[g,T.prev,r]);let D=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft<=0;g.current.scrollTo({left:e?g.current.scrollLeft+g.current.scrollWidth-g.current.clientWidth:g.current.scrollLeft-g.current.clientWidth,behavior:`smooth`})},O=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft+g.current.clientWidth>=g.current.scrollWidth;g.current.scrollTo({left:e?0:g.current.scrollLeft+g.current.clientWidth,behavior:`smooth`})};return(0,s.jsxs)(`div`,{className:x({className:a}),ref:p,children:[T.prev!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:D,disabled:T.prev===`disabled`,"aria-label":`Scroll left`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(d.ArrowVerticalLeft,{})})}),(0,s.jsx)(f.Tabs.List,{"data-spark-component":`tabs-list`,ref:g,className:S(),render:y,loopFocus:r,activateOnFocus:!0,...l,children:i}),T.next!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:O,disabled:T.next===`disabled`,"aria-label":`Scroll right`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(u.ArrowVerticalRight,{})})})]})};T.displayName=`Tabs.List`;var E=(0,o.createContext)(void 0),D=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`TabsPopover components must be used within TabsPopover`);return e},O=(0,o.forwardRef)(({"aria-label":e,children:n,...a},o)=>{let{popoverTriggerRef:c}=D(),u=(0,l.useMergeRefs)(o,c);return(0,s.jsx)(i.t.Trigger,{asChild:!0,...a,children:(0,s.jsx)(r.t,{ref:u,size:`sm`,intent:`surfaceInverse`,design:`ghost`,"aria-label":e,tabIndex:-1,children:(0,s.jsx)(t.t,{children:n||(0,s.jsx)(p.MoreMenuHorizontal,{})})})})});O.displayName=`Popover.Trigger`;var k=(0,o.forwardRef)(({side:e,align:t=`start`,className:n,...r},o)=>{let{popoverSide:c}=D(),l=(0,a.cx)(`gap-sm flex flex-col`,n);return(0,s.jsx)(i.t.Content,{ref:o,...r,side:e??c,align:t,className:l})});k.displayName=`Popover.Content`;var A=({popoverSide:e,popoverTriggerRef:t,children:n})=>{let r=(0,o.useMemo)(()=>({popoverSide:e,popoverTriggerRef:t}),[e,t]),a=Object.assign((e=>(0,s.jsx)(E.Provider,{value:r,children:(0,s.jsx)(i.t,{...e,children:e.children})})),i.t,{Content:k,Trigger:O});return(0,s.jsx)(E.Provider,{value:r,children:n(a)})};A.displayName=`Popover`;var j=(0,a.cva)([`px-md`,`relative flex flex-none items-center`,`border-outline`,`hover:not-disabled:bg-surface-hovered`,`after:absolute`,`data-[active]:font-bold`,`not-data-[active]:not-disabled:cursor-pointer`,`data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2`,`data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset`,`disabled:cursor-not-allowed disabled:opacity-dim-3`,`gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md`,`[&>svg:last-child:first-child]:mx-auto`],{variants:{intent:(0,c.makeVariants)({main:[`data-[active]:text-main data-[active]:after:bg-main`],support:[`data-[active]:text-support data-[active]:after:bg-support`]}),size:{xs:[`h-sz-32 min-w-sz-32 text-caption`],sm:[`h-sz-36 min-w-sz-36 text-body-2`],md:[`h-sz-40 min-w-sz-40 text-body-1`]},hasMenu:{true:`pr-3xl`},orientation:{horizontal:``,vertical:``}},compoundVariants:[{hasMenu:!0,orientation:`vertical`,class:`w-full`}],defaultVariants:{intent:`support`,size:`md`,hasMenu:!1,orientation:`horizontal`}}),M=({asChild:e=!1,value:t,disabled:n=!1,children:r,className:i,ref:a,onKeyDown:c,renderMenu:u,...d})=>{let{intent:p,size:m,orientation:g}=h(),v=(0,o.useRef)(null),y=(0,o.useRef)(null),b=_(e),x=(0,l.useMergeRefs)(a,y),S=e=>{e.key===`F10`&&e.shiftKey&&u&&v.current&&(e.preventDefault(),v.current.click()),c?.(e)},C=!!u,w=g===`vertical`?`right`:`bottom`,T=(0,s.jsx)(f.Tabs.Tab,{"data-spark-component":`tabs-trigger`,ref:x,className:j({intent:p,size:m,hasMenu:C,orientation:g??`horizontal`,className:i}),render:b,disabled:n,value:t,onFocus:({target:e})=>e.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`}),onKeyDown:S,"aria-haspopup":C?`true`:void 0,...d,children:r});return C?(0,s.jsxs)(`div`,{className:g===`vertical`?`relative w-full`:`relative`,children:[T,(0,s.jsx)(`div`,{className:`right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2`,children:(0,s.jsx)(A,{popoverSide:w,popoverTriggerRef:v,children:e=>u?.({Popover:e})})})]}):T};M.displayName=`Tabs.Trigger`;var N=Object.assign(v,{List:T,Trigger:M,Content:b});N.displayName=`Tabs`,T.displayName=`Tabs.List`,M.displayName=`Tabs.Trigger`,b.displayName=`Tabs.Content`,exports.Tabs=N;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../button-3F9Xrf4E.js`),r=require(`../icon-button-jcPwRD21.js`),i=require(`../popover-ayPbAw59.js`);let a=require(`class-variance-authority`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@spark-ui/internal-utils`),l=require(`@spark-ui/hooks/use-merge-refs`),u=require(`@spark-ui/icons/ArrowVerticalRight`),d=require(`@spark-ui/icons/ArrowVerticalLeft`),f=require(`@base-ui/react/tabs`),p=require(`@spark-ui/icons/MoreMenuHorizontal`);var m=(0,o.createContext)({}),h=()=>{let e=(0,o.useContext)(m);if(!e)throw Error(`useTabsContext must be used within a TabsContext Provider`);return e},g=(0,a.cva)([`flex`,`data-[orientation=horizontal]:flex-col`,`data-[orientation=vertical]:flex-row`,`max-w-full`]);function _(t){return t?({...t})=>(0,s.jsx)(e.Slot,{...t}):void 0}var v=({intent:e=`support`,size:t=`md`,asChild:n=!1,forceMount:r=!1,orientation:i=`horizontal`,children:a,className:o,ref:c,...l})=>{let u=_(n);return(0,s.jsx)(m.Provider,{value:{intent:e,size:t,orientation:i,forceMount:r},children:(0,s.jsx)(f.Tabs.Root,{ref:c,orientation:i,className:g({className:o}),"data-spark-component":`tabs`,render:u,...l,children:a})})};v.displayName=`Tabs`;var y=(0,a.cva)([`w-full p-lg`,`focus-visible:u-outline-inset`],{variants:{forceMount:{true:`data-[hidden]:hidden`,false:``}}}),b=({children:e,asChild:t=!1,className:n,ref:r,forceMount:i,...a})=>{let{forceMount:o}=h(),c=_(t),l=o||i;return(0,s.jsx)(f.Tabs.Panel,{"data-spark-component":`tabs-content`,ref:r,keepMounted:l,className:y({className:n,forceMount:l}),render:c,...a,children:e})};b.displayName=`Tabs.Content`;var x=(0,a.cva)([`relative flex`]),S=(0,a.cva)([`flex w-full`,`data-[orientation=horizontal]:flex-row`,`data-[orientation=vertical]:flex-col`,`overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden`,`after:flex after:shrink after:grow after:border-outline`,`data-[orientation=horizontal]:after:border-b-sm`,`data-[orientation=vertical]:after:border-r-sm`]),C=(0,a.cva)([`h-auto! flex-none`,`border-b-sm border-outline`,`outline-hidden`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!`]),w=(e,t)=>{let[n,r]=(0,o.useState)({width:void 0,height:void 0}),i=(0,o.useRef)(null),a=(0,o.useRef)(t);return(0,o.useEffect)(()=>{a.current=t},[t]),(0,o.useEffect)(()=>{let t=e&&`current`in e?e.current:e;if(!(!t||i.current))return i.current=new ResizeObserver(([e])=>{let{inlineSize:t,blockSize:n}=e?.borderBoxSize?.[0]??{};a.current?.(e),r({width:t,height:n})}),i.current.observe(t),()=>{i.current&&i.current.unobserve(t)}},[e,i,a]),n},T=({asChild:e=!1,loop:r=!1,children:i,className:a,ref:c,...l})=>{let p=(0,o.useRef)(null),m=(0,o.useRef)(null),g=c||m,{orientation:v}=h(),y=_(e),{width:b}=w(p),[T,E]=(0,o.useState)({prev:`hidden`,next:`hidden`});(0,o.useEffect)(()=>{typeof g==`function`||!g.current||E(v===`horizontal`?{prev:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`,next:g.current.scrollWidth>g.current.clientWidth?`visible`:`hidden`}:{prev:`hidden`,next:`hidden`})},[v,g,b]),(0,o.useEffect)(()=>{if(typeof g==`function`||!g.current||T.prev===`hidden`||r)return;let e=e=>{E({prev:e.scrollLeft>0?`visible`:`disabled`,next:e.scrollLeft+e.clientWidth<e.scrollWidth?`visible`:`disabled`})},t=g.current;return e(t),t.addEventListener(`scroll`,({target:t})=>e(t)),()=>t.removeEventListener(`scroll`,({target:t})=>e(t))},[g,T.prev,r]);let D=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft<=0;g.current.scrollTo({left:e?g.current.scrollLeft+g.current.scrollWidth-g.current.clientWidth:g.current.scrollLeft-g.current.clientWidth,behavior:`smooth`})},O=()=>{if(typeof g==`function`||!g.current)return;let e=r&&g.current.scrollLeft+g.current.clientWidth>=g.current.scrollWidth;g.current.scrollTo({left:e?0:g.current.scrollLeft+g.current.clientWidth,behavior:`smooth`})};return(0,s.jsxs)(`div`,{className:x({className:a}),ref:p,children:[T.prev!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:D,disabled:T.prev===`disabled`,"aria-label":`Scroll left`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(d.ArrowVerticalLeft,{})})}),(0,s.jsx)(f.Tabs.List,{"data-spark-component":`tabs-list`,ref:g,className:S(),render:y,loopFocus:r,activateOnFocus:!0,...l,children:i}),T.next!==`hidden`&&(0,s.jsx)(n.t,{shape:`square`,intent:`surface`,size:`sm`,className:C(),onClick:O,disabled:T.next===`disabled`,"aria-label":`Scroll right`,children:(0,s.jsx)(t.t,{children:(0,s.jsx)(u.ArrowVerticalRight,{})})})]})};T.displayName=`Tabs.List`;var E=(0,o.createContext)(void 0),D=()=>{let e=(0,o.useContext)(E);if(!e)throw Error(`TabsPopover components must be used within TabsPopover`);return e},O=(0,o.forwardRef)(({"aria-label":e,children:n,...a},o)=>{let{popoverTriggerRef:c}=D(),u=(0,l.useMergeRefs)(o,c);return(0,s.jsx)(i.t.Trigger,{asChild:!0,...a,children:(0,s.jsx)(r.t,{ref:u,size:`sm`,intent:`surfaceInverse`,design:`ghost`,"aria-label":e,tabIndex:-1,children:(0,s.jsx)(t.t,{children:n||(0,s.jsx)(p.MoreMenuHorizontal,{})})})})});O.displayName=`Popover.Trigger`;var k=(0,o.forwardRef)(({side:e,align:t=`start`,className:n,...r},o)=>{let{popoverSide:c}=D(),l=(0,a.cx)(`gap-sm flex flex-col`,n);return(0,s.jsx)(i.t.Content,{ref:o,...r,side:e??c,align:t,className:l})});k.displayName=`Popover.Content`;var A=({popoverSide:e,popoverTriggerRef:t,children:n})=>{let r=(0,o.useMemo)(()=>({popoverSide:e,popoverTriggerRef:t}),[e,t]),a=Object.assign((e=>(0,s.jsx)(E.Provider,{value:r,children:(0,s.jsx)(i.t,{...e,children:e.children})})),i.t,{Content:k,Trigger:O});return(0,s.jsx)(E.Provider,{value:r,children:n(a)})};A.displayName=`Popover`;var j=(0,a.cva)([`px-md`,`relative flex flex-none items-center`,`border-outline`,`hover:not-disabled:bg-surface-hovered`,`after:absolute`,`data-[active]:font-medium`,`not-data-[active]:not-disabled:cursor-pointer`,`data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2`,`data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2`,`focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset`,`disabled:cursor-not-allowed disabled:opacity-dim-3`,`gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md`,`[&>svg:last-child:first-child]:mx-auto`],{variants:{intent:(0,c.makeVariants)({main:[`data-[active]:text-main data-[active]:after:bg-main`],support:[`data-[active]:text-support data-[active]:after:bg-support`]}),size:{xs:[`h-sz-32 min-w-sz-32 text-caption`],sm:[`h-sz-36 min-w-sz-36 text-body-2`],md:[`h-sz-40 min-w-sz-40 text-body-1`]},hasMenu:{true:`pr-3xl`},orientation:{horizontal:``,vertical:``}},compoundVariants:[{hasMenu:!0,orientation:`vertical`,class:`w-full`}],defaultVariants:{intent:`support`,size:`md`,hasMenu:!1,orientation:`horizontal`}}),M=({asChild:e=!1,value:t,disabled:n=!1,children:r,className:i,ref:a,onKeyDown:c,renderMenu:u,...d})=>{let{intent:p,size:m,orientation:g}=h(),v=(0,o.useRef)(null),y=(0,o.useRef)(null),b=_(e),x=(0,l.useMergeRefs)(a,y),S=e=>{e.key===`F10`&&e.shiftKey&&u&&v.current&&(e.preventDefault(),v.current.click()),c?.(e)},C=!!u,w=g===`vertical`?`right`:`bottom`,T=(0,s.jsx)(f.Tabs.Tab,{"data-spark-component":`tabs-trigger`,ref:x,className:j({intent:p,size:m,hasMenu:C,orientation:g??`horizontal`,className:i}),render:b,disabled:n,value:t,onFocus:({target:e})=>e.scrollIntoView({behavior:`smooth`,block:`nearest`,inline:`nearest`}),onKeyDown:S,"aria-haspopup":C?`true`:void 0,...d,children:r});return C?(0,s.jsxs)(`div`,{className:g===`vertical`?`relative w-full`:`relative`,children:[T,(0,s.jsx)(`div`,{className:`right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2`,children:(0,s.jsx)(A,{popoverSide:w,popoverTriggerRef:v,children:e=>u?.({Popover:e})})})]}):T};M.displayName=`Tabs.Trigger`;var N=Object.assign(v,{List:T,Trigger:M,Content:b});N.displayName=`Tabs`,T.displayName=`Tabs.List`,M.displayName=`Tabs.Trigger`,b.displayName=`Tabs.Content`,exports.Tabs=N;
 //# sourceMappingURL=index.js.map

package/dist/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/tabs/TabsContext.tsx","../../src/tabs/TabsRoot.styles.ts","../../src/tabs/useRenderSlot.tsx","../../src/tabs/Tabs.tsx","../../src/tabs/TabsContent.styles.ts","../../src/tabs/TabsContent.tsx","../../src/tabs/TabsList.styles.ts","../../src/tabs/useResizeObserver.ts","../../src/tabs/TabsList.tsx","../../src/tabs/TabsPopoverAbstraction.tsx","../../src/tabs/TabsTrigger.styles.ts","../../src/tabs/TabsTrigger.tsx","../../src/tabs/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps & {\n  orientation?: 'horizontal' | 'vertical'\n  forceMount?: boolean\n}\n\nexport const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)\n\nexport const useTabsContext = () => {\n  const context = useContext(TabsContext)\n\n  if (!context) {\n    throw Error('useTabsContext must be used within a TabsContext Provider')\n  }\n\n  return context\n}\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex',\n  'data-[orientation=horizontal]:flex-col',\n  'data-[orientation=vertical]:flex-row',\n  'max-w-full',\n])\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport { rootStyles } from './TabsRoot.styles'\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsProps\n  extends\n    Omit<ComponentProps<typeof BaseTabs.Root>, 'render'>,\n    PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether to keep inactive tabs content in the DOM.\n   * @default false\n   */\n  forceMount?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * @deprecated\n */\nexport type TabsRootProps = TabsProps\n\nexport const Tabs = ({\n  intent = 'support',\n  size = 'md',\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  forceMount = false,\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <TabsContext.Provider\n      value={{\n        intent,\n        size,\n        orientation,\n        forceMount,\n      }}\n    >\n      <BaseTabs.Root\n        ref={ref}\n        orientation={orientation}\n        className={rootStyles({ className })}\n        data-spark-component=\"tabs\"\n        render={renderSlot}\n        {...rest}\n      >\n        {children}\n      </BaseTabs.Root>\n    </TabsContext.Provider>\n  )\n}\n\nTabs.displayName = 'Tabs'\n","import { cva } from 'class-variance-authority'\n\nexport const contentStyles = cva(['w-full p-lg', 'focus-visible:u-outline-inset'], {\n  variants: {\n    forceMount: {\n      true: 'data-[hidden]:hidden',\n      false: '',\n    },\n  },\n})\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsContentProps extends PropsWithChildren<\n  Omit<ComponentProps<typeof BaseTabs.Panel>, 'keepMounted' | 'render'>\n> {\n  /**\n   * A unique value that associates the content with a trigger.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true\n  ref?: Ref<HTMLDivElement>\n}\n\n/** The panel that displays content associated with a tab. Renders a <div> element. */\nexport const TabsContent = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  children,\n  asChild = false,\n  className,\n  ref,\n  forceMount,\n  ...rest\n}: TabsContentProps) => {\n  const { forceMount: contextForceMount } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n  const keepMounted = contextForceMount || forceMount\n\n  return (\n    <BaseTabs.Panel\n      data-spark-component=\"tabs-content\"\n      ref={ref}\n      keepMounted={keepMounted}\n      className={contentStyles({ className, forceMount: keepMounted })}\n      render={renderSlot}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Panel>\n  )\n}\n\nTabsContent.displayName = 'Tabs.Content'\n","import { cva } from 'class-variance-authority'\n\nexport const wrapperStyles = cva(['relative flex'])\n\nexport const listStyles = cva([\n  'flex w-full',\n  'data-[orientation=horizontal]:flex-row',\n  'data-[orientation=vertical]:flex-col',\n  'overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden',\n  'after:flex after:shrink after:grow after:border-outline',\n  'data-[orientation=horizontal]:after:border-b-sm',\n  'data-[orientation=vertical]:after:border-r-sm',\n])\n\nexport const navigationArrowStyles = cva([\n  'h-auto! flex-none',\n  'border-b-sm border-outline',\n  'outline-hidden',\n  'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!',\n])\n","import { type RefObject, useEffect, useRef, useState } from 'react'\n\ninterface Size {\n  width?: number\n  height?: number\n}\n\ntype ResizeCallback = (entry?: ResizeObserverEntry) => void\n\nexport const useResizeObserver = <T extends HTMLElement>(\n  target: RefObject<T | null> | T | null,\n  onResize?: ResizeCallback\n): Size => {\n  const [size, setSize] = useState<Size>({ width: undefined, height: undefined })\n  const resizeObserverRef = useRef<ResizeObserver>(null)\n  const resizeCallbackRef = useRef<ResizeCallback | undefined>(onResize)\n\n  useEffect(() => {\n    resizeCallbackRef.current = onResize\n  }, [onResize])\n\n  useEffect(() => {\n    const targetElm = target && 'current' in target ? target.current : target\n    if (!targetElm || resizeObserverRef.current) {\n      return\n    }\n\n    resizeObserverRef.current = new ResizeObserver(([entry]) => {\n      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {}\n      resizeCallbackRef.current?.(entry)\n\n      setSize({ width, height })\n    })\n\n    resizeObserverRef.current.observe(targetElm as unknown as HTMLElement)\n\n    return () => {\n      resizeObserverRef.current &&\n        resizeObserverRef.current.unobserve(targetElm as unknown as HTMLElement)\n    }\n  }, [target, resizeObserverRef, resizeCallbackRef])\n\n  return size\n}\n","/* eslint-disable max-lines-per-function */\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { type ComponentProps, type ReactElement, Ref, useEffect, useRef, useState } from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useTabsContext } from './TabsContext'\nimport { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'\nimport { useRenderSlot } from './useRenderSlot'\nimport { useResizeObserver } from './useResizeObserver'\n\nexport interface TabsListProps extends Omit<\n  ComponentProps<typeof BaseTabs.List>,\n  'render' | 'loopFocus'\n> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, keyboard navigation will loop from last tab to first, and vice versa.\n   * @default false\n   */\n  loop?: boolean\n  children: ReactElement[] | ReactElement\n  ref?: Ref<HTMLDivElement>\n}\n\ntype ArrowState = 'visible' | 'hidden' | 'disabled'\n\n/** The container for the tab triggers. Renders a <div> element. */\nexport const TabsList = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  loop = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsListProps) => {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef(null)\n  const listRef = ref || innerRef\n  const { orientation } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n\n  const { width } = useResizeObserver(wrapperRef)\n\n  const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({\n    prev: 'hidden',\n    next: 'hidden',\n  })\n\n  useEffect(() => {\n    /**\n     * Show/hide arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    if (orientation !== 'horizontal') {\n      setArrows({ prev: 'hidden', next: 'hidden' })\n    } else {\n      setArrows({\n        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n        next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n      })\n    }\n  }, [orientation, listRef, width])\n\n  useEffect(() => {\n    /**\n     * Enable/disable arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {\n      return\n    }\n\n    const toggleArrowsVisibility = (target: HTMLDivElement) => {\n      setArrows({\n        prev: target.scrollLeft > 0 ? 'visible' : 'disabled',\n        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',\n      })\n    }\n\n    const currentList = listRef.current\n\n    toggleArrowsVisibility(currentList)\n\n    currentList.addEventListener('scroll', ({ target }) =>\n      toggleArrowsVisibility(target as HTMLDivElement)\n    )\n\n    return () =>\n      currentList.removeEventListener('scroll', ({ target }) =>\n        toggleArrowsVisibility(target as HTMLDivElement)\n      )\n  }, [listRef, arrows.prev, loop])\n\n  const handlePrevClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0\n\n    listRef.current.scrollTo({\n      left: shouldLoopForward\n        ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth\n        : listRef.current.scrollLeft - listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  const handleNextClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopBackward =\n      loop &&\n      listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth\n\n    listRef.current.scrollTo({\n      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  return (\n    <div className={wrapperStyles({ className })} ref={wrapperRef}>\n      {arrows.prev !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handlePrevClick}\n          disabled={arrows.prev === 'disabled'}\n          aria-label=\"Scroll left\"\n        >\n          <Icon>\n            <ArrowVerticalLeft />\n          </Icon>\n        </Button>\n      )}\n\n      <BaseTabs.List\n        data-spark-component=\"tabs-list\"\n        ref={listRef}\n        className={listStyles()}\n        render={renderSlot}\n        loopFocus={loop}\n        activateOnFocus\n        {...rest}\n      >\n        {children}\n      </BaseTabs.List>\n\n      {arrows.next !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handleNextClick}\n          disabled={arrows.next === 'disabled'}\n          aria-label=\"Scroll right\"\n        >\n          <Icon>\n            <ArrowVerticalRight />\n          </Icon>\n        </Button>\n      )}\n    </div>\n  )\n}\n\nTabsList.displayName = 'Tabs.List'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { MoreMenuHorizontal } from '@spark-ui/icons/MoreMenuHorizontal'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentType,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Popover as SparkPopover } from '../popover'\nimport type { PopoverProps } from '../popover/Popover'\nimport type { ContentProps as PopoverContentProps } from '../popover/PopoverContent'\nimport type { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger'\n\ninterface TabsPopoverContextValue {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n}\n\nconst TabsPopoverContext = createContext<TabsPopoverContextValue | undefined>(undefined)\n\nconst useTabsPopoverContext = () => {\n  const context = useContext(TabsPopoverContext)\n  if (!context) {\n    throw new Error('TabsPopover components must be used within TabsPopover')\n  }\n\n  return context\n}\n\n// Trigger component that uses context\ninterface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {\n  'aria-label': string\n  children?: ReactNode\n}\n\nconst TabsPopoverTrigger = forwardRef<HTMLButtonElement, TabsPopoverTriggerProps>(\n  ({ 'aria-label': ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {\n    const { popoverTriggerRef } = useTabsPopoverContext()\n    const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef)\n\n    return (\n      <SparkPopover.Trigger asChild {...triggerProps}>\n        <IconButton\n          ref={mergedRef}\n          size=\"sm\"\n          intent=\"surfaceInverse\"\n          design=\"ghost\"\n          aria-label={ariaLabel}\n          tabIndex={-1}\n        >\n          <Icon>{iconChildren || <MoreMenuHorizontal />}</Icon>\n        </IconButton>\n      </SparkPopover.Trigger>\n    )\n  }\n)\n\nTabsPopoverTrigger.displayName = 'Popover.Trigger'\n\n// Content component that uses context\nconst TabsPopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ side, align = 'start', className, ...contentProps }, ref) => {\n    const { popoverSide } = useTabsPopoverContext()\n    const mergedClassName = cx('gap-sm flex flex-col', className)\n\n    return (\n      <SparkPopover.Content\n        ref={ref}\n        {...contentProps}\n        side={side ?? popoverSide}\n        align={align}\n        className={mergedClassName}\n      />\n    )\n  }\n)\n\nTabsPopoverContent.displayName = 'Popover.Content'\n\n// Export types\nexport type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger\nexport type TabsPopoverContentComponent = typeof TabsPopoverContent\n\n// Create a type that extends SparkPopover but overrides Content and Trigger\n// Use ComponentType for JSX compatibility and Omit to exclude only Content and Trigger,\n// then add them back with the overridden types\nexport type ConfiguredPopoverComponent = ComponentType<PopoverProps> &\n  Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {\n    Content: TabsPopoverContentComponent\n    Trigger: TabsPopoverTriggerComponent\n  }\n\ninterface PopoverAbstractionProps {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n  children: (Popover: ConfiguredPopoverComponent) => ReactNode\n}\n\nexport const Popover = ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps) => {\n  const contextValue = useMemo(\n    () => ({ popoverSide, popoverTriggerRef }),\n    [popoverSide, popoverTriggerRef]\n  )\n\n  const PopoverWrapper: typeof SparkPopover = ((props: PopoverProps) => (\n    <TabsPopoverContext.Provider value={contextValue}>\n      <SparkPopover {...props}>{props.children}</SparkPopover>\n    </TabsPopoverContext.Provider>\n  )) as typeof SparkPopover\n\n  const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n    Content: TabsPopoverContent,\n    Trigger: TabsPopoverTrigger,\n  }) as ConfiguredPopoverComponent\n\n  return (\n    <TabsPopoverContext.Provider value={contextValue}>\n      {children(PopoverComponent)}\n    </TabsPopoverContext.Provider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const triggerVariants = cva(\n  [\n    'px-md',\n    'relative flex flex-none items-center',\n    'border-outline',\n    'hover:not-disabled:bg-surface-hovered',\n    'after:absolute',\n    'data-[active]:font-bold',\n    'not-data-[active]:not-disabled:cursor-pointer',\n    'data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2',\n    'data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2',\n    'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md',\n    '[&>svg:last-child:first-child]:mx-auto',\n  ],\n  {\n    variants: {\n      /**\n       * Change the color scheme of the tabs\n       * @default support\n       */\n      intent: makeVariants<'intent', ['main', 'support']>({\n        main: ['data-[active]:text-main data-[active]:after:bg-main'],\n        support: ['data-[active]:text-support data-[active]:after:bg-support'],\n      }),\n      /**\n       * Change the size of the tabs\n       * @default md\n       */\n      size: {\n        xs: ['h-sz-32 min-w-sz-32 text-caption'],\n        sm: ['h-sz-36 min-w-sz-36 text-body-2'],\n        md: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n      hasMenu: {\n        true: 'pr-3xl',\n      },\n      orientation: {\n        horizontal: '',\n        vertical: '',\n      },\n    },\n    compoundVariants: [\n      {\n        hasMenu: true,\n        orientation: 'vertical',\n        class: 'w-full',\n      },\n    ],\n    defaultVariants: {\n      intent: 'support',\n      size: 'md',\n      hasMenu: false,\n      orientation: 'horizontal',\n    },\n  }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { type ComponentProps, type FocusEvent, type ReactNode, Ref, useRef } from 'react'\n\ntype TabKeyDownEvent = Parameters<NonNullable<ComponentProps<typeof BaseTabs.Tab>['onKeyDown']>>[0]\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsTriggerProps extends Omit<ComponentProps<typeof BaseTabs.Tab>, 'render'> {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the tab.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Function that receives a pre-configured Popover component and returns the popover structure.\n   * @example\n   * renderMenu={({ Popover }) => (\n   *   <Popover>\n   *     <Popover.Trigger aria-label=\"Options\">\n   *       <CustomIcon />\n   *     </Popover.Trigger>\n   *     <Popover.Content>\n   *       <Button>Action</Button>\n   *     </Popover.Content>\n   *   </Popover>\n   * )}\n   */\n  renderMenu?: (props: { Popover: ConfiguredPopoverComponent }) => ReactNode\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button that activates a tab panel. Renders a <button> element. */\nexport const TabsTrigger = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  onKeyDown,\n  renderMenu,\n  ...rest\n}: TabsTriggerProps) => {\n  const { intent, size, orientation } = useTabsContext()\n  const popoverTriggerRef = useRef<HTMLButtonElement>(null)\n  const tabsTriggerRef = useRef<HTMLButtonElement>(null)\n  const renderSlot = useRenderSlot(asChild)\n\n  // Combine internal ref with forwarded ref\n  const mergedRef = useMergeRefs(ref, tabsTriggerRef)\n\n  const handleKeyDown = (e: TabKeyDownEvent) => {\n    // Handle Shift+F10 for popover\n    if (e.key === 'F10' && e.shiftKey && renderMenu && popoverTriggerRef.current) {\n      e.preventDefault()\n      popoverTriggerRef.current.click()\n    }\n\n    // Call original onKeyDown if provided\n    onKeyDown?.(e)\n  }\n\n  const hasMenu = !!renderMenu\n  const popoverSide = orientation === 'vertical' ? 'right' : 'bottom'\n\n  const trigger = (\n    <BaseTabs.Tab\n      data-spark-component=\"tabs-trigger\"\n      ref={mergedRef}\n      className={triggerVariants({\n        intent,\n        size,\n        hasMenu,\n        orientation: orientation ?? 'horizontal',\n        className,\n      })}\n      render={renderSlot}\n      disabled={disabled}\n      value={value}\n      onFocus={({ target }: FocusEvent<HTMLButtonElement>) =>\n        target.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        })\n      }\n      onKeyDown={handleKeyDown}\n      aria-haspopup={hasMenu ? 'true' : undefined}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Tab>\n  )\n\n  if (!hasMenu) {\n    return trigger\n  }\n\n  return (\n    <div className={orientation === 'vertical' ? 'relative w-full' : 'relative'}>\n      {trigger}\n      <div className=\"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2\">\n        <Popover popoverSide={popoverSide} popoverTriggerRef={popoverTriggerRef}>\n          {PopoverAbstraction => renderMenu?.({ Popover: PopoverAbstraction })}\n        </Popover>\n      </div>\n    </div>\n  )\n}\n\nTabsTrigger.displayName = 'Tabs.Trigger'\n","import { Tabs as Root } from './Tabs'\nimport { TabsContent as Content } from './TabsContent'\nimport { TabsList as List } from './TabsList'\nimport { TabsTrigger as Trigger } from './TabsTrigger'\n\n/**\n * A set of layered sections of content that users can navigate between using tab controls.\n */\nexport const Tabs: typeof Root & {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  List,\n  Trigger,\n  Content,\n})\n\nTabs.displayName = 'Tabs'\nList.displayName = 'Tabs.List'\nTrigger.displayName = 'Tabs.Trigger'\nContent.displayName = 'Tabs.Content'\n\nexport { type TabsContentProps } from './TabsContent'\nexport { type TabsListProps } from './TabsList'\nexport { type TabsProps, type TabsRootProps } from './Tabs'\nexport { type TabsTriggerProps } from './TabsTrigger'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tabs/TabsContext.tsx","../../src/tabs/TabsRoot.styles.ts","../../src/tabs/useRenderSlot.tsx","../../src/tabs/Tabs.tsx","../../src/tabs/TabsContent.styles.ts","../../src/tabs/TabsContent.tsx","../../src/tabs/TabsList.styles.ts","../../src/tabs/useResizeObserver.ts","../../src/tabs/TabsList.tsx","../../src/tabs/TabsPopoverAbstraction.tsx","../../src/tabs/TabsTrigger.styles.ts","../../src/tabs/TabsTrigger.tsx","../../src/tabs/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps & {\n  orientation?: 'horizontal' | 'vertical'\n  forceMount?: boolean\n}\n\nexport const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)\n\nexport const useTabsContext = () => {\n  const context = useContext(TabsContext)\n\n  if (!context) {\n    throw Error('useTabsContext must be used within a TabsContext Provider')\n  }\n\n  return context\n}\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex',\n  'data-[orientation=horizontal]:flex-col',\n  'data-[orientation=vertical]:flex-row',\n  'max-w-full',\n])\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport { rootStyles } from './TabsRoot.styles'\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsProps\n  extends\n    Omit<ComponentProps<typeof BaseTabs.Root>, 'render'>,\n    PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether to keep inactive tabs content in the DOM.\n   * @default false\n   */\n  forceMount?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * @deprecated\n */\nexport type TabsRootProps = TabsProps\n\nexport const Tabs = ({\n  intent = 'support',\n  size = 'md',\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  forceMount = false,\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <TabsContext.Provider\n      value={{\n        intent,\n        size,\n        orientation,\n        forceMount,\n      }}\n    >\n      <BaseTabs.Root\n        ref={ref}\n        orientation={orientation}\n        className={rootStyles({ className })}\n        data-spark-component=\"tabs\"\n        render={renderSlot}\n        {...rest}\n      >\n        {children}\n      </BaseTabs.Root>\n    </TabsContext.Provider>\n  )\n}\n\nTabs.displayName = 'Tabs'\n","import { cva } from 'class-variance-authority'\n\nexport const contentStyles = cva(['w-full p-lg', 'focus-visible:u-outline-inset'], {\n  variants: {\n    forceMount: {\n      true: 'data-[hidden]:hidden',\n      false: '',\n    },\n  },\n})\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsContentProps extends PropsWithChildren<\n  Omit<ComponentProps<typeof BaseTabs.Panel>, 'keepMounted' | 'render'>\n> {\n  /**\n   * A unique value that associates the content with a trigger.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true\n  ref?: Ref<HTMLDivElement>\n}\n\n/** The panel that displays content associated with a tab. Renders a <div> element. */\nexport const TabsContent = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  children,\n  asChild = false,\n  className,\n  ref,\n  forceMount,\n  ...rest\n}: TabsContentProps) => {\n  const { forceMount: contextForceMount } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n  const keepMounted = contextForceMount || forceMount\n\n  return (\n    <BaseTabs.Panel\n      data-spark-component=\"tabs-content\"\n      ref={ref}\n      keepMounted={keepMounted}\n      className={contentStyles({ className, forceMount: keepMounted })}\n      render={renderSlot}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Panel>\n  )\n}\n\nTabsContent.displayName = 'Tabs.Content'\n","import { cva } from 'class-variance-authority'\n\nexport const wrapperStyles = cva(['relative flex'])\n\nexport const listStyles = cva([\n  'flex w-full',\n  'data-[orientation=horizontal]:flex-row',\n  'data-[orientation=vertical]:flex-col',\n  'overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden',\n  'after:flex after:shrink after:grow after:border-outline',\n  'data-[orientation=horizontal]:after:border-b-sm',\n  'data-[orientation=vertical]:after:border-r-sm',\n])\n\nexport const navigationArrowStyles = cva([\n  'h-auto! flex-none',\n  'border-b-sm border-outline',\n  'outline-hidden',\n  'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!',\n])\n","import { type RefObject, useEffect, useRef, useState } from 'react'\n\ninterface Size {\n  width?: number\n  height?: number\n}\n\ntype ResizeCallback = (entry?: ResizeObserverEntry) => void\n\nexport const useResizeObserver = <T extends HTMLElement>(\n  target: RefObject<T | null> | T | null,\n  onResize?: ResizeCallback\n): Size => {\n  const [size, setSize] = useState<Size>({ width: undefined, height: undefined })\n  const resizeObserverRef = useRef<ResizeObserver>(null)\n  const resizeCallbackRef = useRef<ResizeCallback | undefined>(onResize)\n\n  useEffect(() => {\n    resizeCallbackRef.current = onResize\n  }, [onResize])\n\n  useEffect(() => {\n    const targetElm = target && 'current' in target ? target.current : target\n    if (!targetElm || resizeObserverRef.current) {\n      return\n    }\n\n    resizeObserverRef.current = new ResizeObserver(([entry]) => {\n      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {}\n      resizeCallbackRef.current?.(entry)\n\n      setSize({ width, height })\n    })\n\n    resizeObserverRef.current.observe(targetElm as unknown as HTMLElement)\n\n    return () => {\n      resizeObserverRef.current &&\n        resizeObserverRef.current.unobserve(targetElm as unknown as HTMLElement)\n    }\n  }, [target, resizeObserverRef, resizeCallbackRef])\n\n  return size\n}\n","/* eslint-disable max-lines-per-function */\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { type ComponentProps, type ReactElement, Ref, useEffect, useRef, useState } from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useTabsContext } from './TabsContext'\nimport { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'\nimport { useRenderSlot } from './useRenderSlot'\nimport { useResizeObserver } from './useResizeObserver'\n\nexport interface TabsListProps extends Omit<\n  ComponentProps<typeof BaseTabs.List>,\n  'render' | 'loopFocus'\n> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, keyboard navigation will loop from last tab to first, and vice versa.\n   * @default false\n   */\n  loop?: boolean\n  children: ReactElement[] | ReactElement\n  ref?: Ref<HTMLDivElement>\n}\n\ntype ArrowState = 'visible' | 'hidden' | 'disabled'\n\n/** The container for the tab triggers. Renders a <div> element. */\nexport const TabsList = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  loop = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsListProps) => {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef(null)\n  const listRef = ref || innerRef\n  const { orientation } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n\n  const { width } = useResizeObserver(wrapperRef)\n\n  const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({\n    prev: 'hidden',\n    next: 'hidden',\n  })\n\n  useEffect(() => {\n    /**\n     * Show/hide arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    if (orientation !== 'horizontal') {\n      setArrows({ prev: 'hidden', next: 'hidden' })\n    } else {\n      setArrows({\n        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n        next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n      })\n    }\n  }, [orientation, listRef, width])\n\n  useEffect(() => {\n    /**\n     * Enable/disable arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {\n      return\n    }\n\n    const toggleArrowsVisibility = (target: HTMLDivElement) => {\n      setArrows({\n        prev: target.scrollLeft > 0 ? 'visible' : 'disabled',\n        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',\n      })\n    }\n\n    const currentList = listRef.current\n\n    toggleArrowsVisibility(currentList)\n\n    currentList.addEventListener('scroll', ({ target }) =>\n      toggleArrowsVisibility(target as HTMLDivElement)\n    )\n\n    return () =>\n      currentList.removeEventListener('scroll', ({ target }) =>\n        toggleArrowsVisibility(target as HTMLDivElement)\n      )\n  }, [listRef, arrows.prev, loop])\n\n  const handlePrevClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0\n\n    listRef.current.scrollTo({\n      left: shouldLoopForward\n        ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth\n        : listRef.current.scrollLeft - listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  const handleNextClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopBackward =\n      loop &&\n      listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth\n\n    listRef.current.scrollTo({\n      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  return (\n    <div className={wrapperStyles({ className })} ref={wrapperRef}>\n      {arrows.prev !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handlePrevClick}\n          disabled={arrows.prev === 'disabled'}\n          aria-label=\"Scroll left\"\n        >\n          <Icon>\n            <ArrowVerticalLeft />\n          </Icon>\n        </Button>\n      )}\n\n      <BaseTabs.List\n        data-spark-component=\"tabs-list\"\n        ref={listRef}\n        className={listStyles()}\n        render={renderSlot}\n        loopFocus={loop}\n        activateOnFocus\n        {...rest}\n      >\n        {children}\n      </BaseTabs.List>\n\n      {arrows.next !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handleNextClick}\n          disabled={arrows.next === 'disabled'}\n          aria-label=\"Scroll right\"\n        >\n          <Icon>\n            <ArrowVerticalRight />\n          </Icon>\n        </Button>\n      )}\n    </div>\n  )\n}\n\nTabsList.displayName = 'Tabs.List'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { MoreMenuHorizontal } from '@spark-ui/icons/MoreMenuHorizontal'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentType,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Popover as SparkPopover } from '../popover'\nimport type { PopoverProps } from '../popover/Popover'\nimport type { ContentProps as PopoverContentProps } from '../popover/PopoverContent'\nimport type { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger'\n\ninterface TabsPopoverContextValue {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n}\n\nconst TabsPopoverContext = createContext<TabsPopoverContextValue | undefined>(undefined)\n\nconst useTabsPopoverContext = () => {\n  const context = useContext(TabsPopoverContext)\n  if (!context) {\n    throw new Error('TabsPopover components must be used within TabsPopover')\n  }\n\n  return context\n}\n\n// Trigger component that uses context\ninterface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {\n  'aria-label': string\n  children?: ReactNode\n}\n\nconst TabsPopoverTrigger = forwardRef<HTMLButtonElement, TabsPopoverTriggerProps>(\n  ({ 'aria-label': ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {\n    const { popoverTriggerRef } = useTabsPopoverContext()\n    const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef)\n\n    return (\n      <SparkPopover.Trigger asChild {...triggerProps}>\n        <IconButton\n          ref={mergedRef}\n          size=\"sm\"\n          intent=\"surfaceInverse\"\n          design=\"ghost\"\n          aria-label={ariaLabel}\n          tabIndex={-1}\n        >\n          <Icon>{iconChildren || <MoreMenuHorizontal />}</Icon>\n        </IconButton>\n      </SparkPopover.Trigger>\n    )\n  }\n)\n\nTabsPopoverTrigger.displayName = 'Popover.Trigger'\n\n// Content component that uses context\nconst TabsPopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ side, align = 'start', className, ...contentProps }, ref) => {\n    const { popoverSide } = useTabsPopoverContext()\n    const mergedClassName = cx('gap-sm flex flex-col', className)\n\n    return (\n      <SparkPopover.Content\n        ref={ref}\n        {...contentProps}\n        side={side ?? popoverSide}\n        align={align}\n        className={mergedClassName}\n      />\n    )\n  }\n)\n\nTabsPopoverContent.displayName = 'Popover.Content'\n\n// Export types\nexport type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger\nexport type TabsPopoverContentComponent = typeof TabsPopoverContent\n\n// Create a type that extends SparkPopover but overrides Content and Trigger\n// Use ComponentType for JSX compatibility and Omit to exclude only Content and Trigger,\n// then add them back with the overridden types\nexport type ConfiguredPopoverComponent = ComponentType<PopoverProps> &\n  Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {\n    Content: TabsPopoverContentComponent\n    Trigger: TabsPopoverTriggerComponent\n  }\n\ninterface PopoverAbstractionProps {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n  children: (Popover: ConfiguredPopoverComponent) => ReactNode\n}\n\nexport const Popover = ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps) => {\n  const contextValue = useMemo(\n    () => ({ popoverSide, popoverTriggerRef }),\n    [popoverSide, popoverTriggerRef]\n  )\n\n  const PopoverWrapper: typeof SparkPopover = ((props: PopoverProps) => (\n    <TabsPopoverContext.Provider value={contextValue}>\n      <SparkPopover {...props}>{props.children}</SparkPopover>\n    </TabsPopoverContext.Provider>\n  )) as typeof SparkPopover\n\n  const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n    Content: TabsPopoverContent,\n    Trigger: TabsPopoverTrigger,\n  }) as ConfiguredPopoverComponent\n\n  return (\n    <TabsPopoverContext.Provider value={contextValue}>\n      {children(PopoverComponent)}\n    </TabsPopoverContext.Provider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const triggerVariants = cva(\n  [\n    'px-md',\n    'relative flex flex-none items-center',\n    'border-outline',\n    'hover:not-disabled:bg-surface-hovered',\n    'after:absolute',\n    'data-[active]:font-medium',\n    'not-data-[active]:not-disabled:cursor-pointer',\n    'data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2',\n    'data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2',\n    'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md',\n    '[&>svg:last-child:first-child]:mx-auto',\n  ],\n  {\n    variants: {\n      /**\n       * Change the color scheme of the tabs\n       * @default support\n       */\n      intent: makeVariants<'intent', ['main', 'support']>({\n        main: ['data-[active]:text-main data-[active]:after:bg-main'],\n        support: ['data-[active]:text-support data-[active]:after:bg-support'],\n      }),\n      /**\n       * Change the size of the tabs\n       * @default md\n       */\n      size: {\n        xs: ['h-sz-32 min-w-sz-32 text-caption'],\n        sm: ['h-sz-36 min-w-sz-36 text-body-2'],\n        md: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n      hasMenu: {\n        true: 'pr-3xl',\n      },\n      orientation: {\n        horizontal: '',\n        vertical: '',\n      },\n    },\n    compoundVariants: [\n      {\n        hasMenu: true,\n        orientation: 'vertical',\n        class: 'w-full',\n      },\n    ],\n    defaultVariants: {\n      intent: 'support',\n      size: 'md',\n      hasMenu: false,\n      orientation: 'horizontal',\n    },\n  }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { type ComponentProps, type FocusEvent, type ReactNode, Ref, useRef } from 'react'\n\ntype TabKeyDownEvent = Parameters<NonNullable<ComponentProps<typeof BaseTabs.Tab>['onKeyDown']>>[0]\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsTriggerProps extends Omit<ComponentProps<typeof BaseTabs.Tab>, 'render'> {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the tab.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Function that receives a pre-configured Popover component and returns the popover structure.\n   * @example\n   * renderMenu={({ Popover }) => (\n   *   <Popover>\n   *     <Popover.Trigger aria-label=\"Options\">\n   *       <CustomIcon />\n   *     </Popover.Trigger>\n   *     <Popover.Content>\n   *       <Button>Action</Button>\n   *     </Popover.Content>\n   *   </Popover>\n   * )}\n   */\n  renderMenu?: (props: { Popover: ConfiguredPopoverComponent }) => ReactNode\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button that activates a tab panel. Renders a <button> element. */\nexport const TabsTrigger = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  onKeyDown,\n  renderMenu,\n  ...rest\n}: TabsTriggerProps) => {\n  const { intent, size, orientation } = useTabsContext()\n  const popoverTriggerRef = useRef<HTMLButtonElement>(null)\n  const tabsTriggerRef = useRef<HTMLButtonElement>(null)\n  const renderSlot = useRenderSlot(asChild)\n\n  // Combine internal ref with forwarded ref\n  const mergedRef = useMergeRefs(ref, tabsTriggerRef)\n\n  const handleKeyDown = (e: TabKeyDownEvent) => {\n    // Handle Shift+F10 for popover\n    if (e.key === 'F10' && e.shiftKey && renderMenu && popoverTriggerRef.current) {\n      e.preventDefault()\n      popoverTriggerRef.current.click()\n    }\n\n    // Call original onKeyDown if provided\n    onKeyDown?.(e)\n  }\n\n  const hasMenu = !!renderMenu\n  const popoverSide = orientation === 'vertical' ? 'right' : 'bottom'\n\n  const trigger = (\n    <BaseTabs.Tab\n      data-spark-component=\"tabs-trigger\"\n      ref={mergedRef}\n      className={triggerVariants({\n        intent,\n        size,\n        hasMenu,\n        orientation: orientation ?? 'horizontal',\n        className,\n      })}\n      render={renderSlot}\n      disabled={disabled}\n      value={value}\n      onFocus={({ target }: FocusEvent<HTMLButtonElement>) =>\n        target.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        })\n      }\n      onKeyDown={handleKeyDown}\n      aria-haspopup={hasMenu ? 'true' : undefined}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Tab>\n  )\n\n  if (!hasMenu) {\n    return trigger\n  }\n\n  return (\n    <div className={orientation === 'vertical' ? 'relative w-full' : 'relative'}>\n      {trigger}\n      <div className=\"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2\">\n        <Popover popoverSide={popoverSide} popoverTriggerRef={popoverTriggerRef}>\n          {PopoverAbstraction => renderMenu?.({ Popover: PopoverAbstraction })}\n        </Popover>\n      </div>\n    </div>\n  )\n}\n\nTabsTrigger.displayName = 'Tabs.Trigger'\n","import { Tabs as Root } from './Tabs'\nimport { TabsContent as Content } from './TabsContent'\nimport { TabsList as List } from './TabsList'\nimport { TabsTrigger as Trigger } from './TabsTrigger'\n\n/**\n * A set of layered sections of content that users can navigate between using tab controls.\n */\nexport const Tabs: typeof Root & {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  List,\n  Trigger,\n  Content,\n})\n\nTabs.displayName = 'Tabs'\nList.displayName = 'Tabs.List'\nTrigger.displayName = 'Tabs.Trigger'\nContent.displayName = 'Tabs.Content'\n\nexport { type TabsContentProps } from './TabsContent'\nexport { type TabsListProps } from './TabsList'\nexport { type TabsProps, type TabsRootProps } from './Tabs'\nexport { type TabsTriggerProps } from './TabsTrigger'\n"],"mappings":"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"}

package/dist/tabs/index.mjs

@@ -256,7 +256,7 @@ var z = a([
 	"border-outline",
 	"hover:not-disabled:bg-surface-hovered",
 	"after:absolute",
-	"data-[active]:font-bold",
+	"data-[active]:font-medium",
 	"not-data-[active]:not-disabled:cursor-pointer",
 	"data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2",
 	"data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2",

package/dist/tabs/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tabs/TabsContext.tsx","../../src/tabs/TabsRoot.styles.ts","../../src/tabs/useRenderSlot.tsx","../../src/tabs/Tabs.tsx","../../src/tabs/TabsContent.styles.ts","../../src/tabs/TabsContent.tsx","../../src/tabs/TabsList.styles.ts","../../src/tabs/useResizeObserver.ts","../../src/tabs/TabsList.tsx","../../src/tabs/TabsPopoverAbstraction.tsx","../../src/tabs/TabsTrigger.styles.ts","../../src/tabs/TabsTrigger.tsx","../../src/tabs/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps & {\n  orientation?: 'horizontal' | 'vertical'\n  forceMount?: boolean\n}\n\nexport const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)\n\nexport const useTabsContext = () => {\n  const context = useContext(TabsContext)\n\n  if (!context) {\n    throw Error('useTabsContext must be used within a TabsContext Provider')\n  }\n\n  return context\n}\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex',\n  'data-[orientation=horizontal]:flex-col',\n  'data-[orientation=vertical]:flex-row',\n  'max-w-full',\n])\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport { rootStyles } from './TabsRoot.styles'\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsProps\n  extends\n    Omit<ComponentProps<typeof BaseTabs.Root>, 'render'>,\n    PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether to keep inactive tabs content in the DOM.\n   * @default false\n   */\n  forceMount?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * @deprecated\n */\nexport type TabsRootProps = TabsProps\n\nexport const Tabs = ({\n  intent = 'support',\n  size = 'md',\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  forceMount = false,\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <TabsContext.Provider\n      value={{\n        intent,\n        size,\n        orientation,\n        forceMount,\n      }}\n    >\n      <BaseTabs.Root\n        ref={ref}\n        orientation={orientation}\n        className={rootStyles({ className })}\n        data-spark-component=\"tabs\"\n        render={renderSlot}\n        {...rest}\n      >\n        {children}\n      </BaseTabs.Root>\n    </TabsContext.Provider>\n  )\n}\n\nTabs.displayName = 'Tabs'\n","import { cva } from 'class-variance-authority'\n\nexport const contentStyles = cva(['w-full p-lg', 'focus-visible:u-outline-inset'], {\n  variants: {\n    forceMount: {\n      true: 'data-[hidden]:hidden',\n      false: '',\n    },\n  },\n})\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsContentProps extends PropsWithChildren<\n  Omit<ComponentProps<typeof BaseTabs.Panel>, 'keepMounted' | 'render'>\n> {\n  /**\n   * A unique value that associates the content with a trigger.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true\n  ref?: Ref<HTMLDivElement>\n}\n\n/** The panel that displays content associated with a tab. Renders a <div> element. */\nexport const TabsContent = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  children,\n  asChild = false,\n  className,\n  ref,\n  forceMount,\n  ...rest\n}: TabsContentProps) => {\n  const { forceMount: contextForceMount } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n  const keepMounted = contextForceMount || forceMount\n\n  return (\n    <BaseTabs.Panel\n      data-spark-component=\"tabs-content\"\n      ref={ref}\n      keepMounted={keepMounted}\n      className={contentStyles({ className, forceMount: keepMounted })}\n      render={renderSlot}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Panel>\n  )\n}\n\nTabsContent.displayName = 'Tabs.Content'\n","import { cva } from 'class-variance-authority'\n\nexport const wrapperStyles = cva(['relative flex'])\n\nexport const listStyles = cva([\n  'flex w-full',\n  'data-[orientation=horizontal]:flex-row',\n  'data-[orientation=vertical]:flex-col',\n  'overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden',\n  'after:flex after:shrink after:grow after:border-outline',\n  'data-[orientation=horizontal]:after:border-b-sm',\n  'data-[orientation=vertical]:after:border-r-sm',\n])\n\nexport const navigationArrowStyles = cva([\n  'h-auto! flex-none',\n  'border-b-sm border-outline',\n  'outline-hidden',\n  'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!',\n])\n","import { type RefObject, useEffect, useRef, useState } from 'react'\n\ninterface Size {\n  width?: number\n  height?: number\n}\n\ntype ResizeCallback = (entry?: ResizeObserverEntry) => void\n\nexport const useResizeObserver = <T extends HTMLElement>(\n  target: RefObject<T | null> | T | null,\n  onResize?: ResizeCallback\n): Size => {\n  const [size, setSize] = useState<Size>({ width: undefined, height: undefined })\n  const resizeObserverRef = useRef<ResizeObserver>(null)\n  const resizeCallbackRef = useRef<ResizeCallback | undefined>(onResize)\n\n  useEffect(() => {\n    resizeCallbackRef.current = onResize\n  }, [onResize])\n\n  useEffect(() => {\n    const targetElm = target && 'current' in target ? target.current : target\n    if (!targetElm || resizeObserverRef.current) {\n      return\n    }\n\n    resizeObserverRef.current = new ResizeObserver(([entry]) => {\n      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {}\n      resizeCallbackRef.current?.(entry)\n\n      setSize({ width, height })\n    })\n\n    resizeObserverRef.current.observe(targetElm as unknown as HTMLElement)\n\n    return () => {\n      resizeObserverRef.current &&\n        resizeObserverRef.current.unobserve(targetElm as unknown as HTMLElement)\n    }\n  }, [target, resizeObserverRef, resizeCallbackRef])\n\n  return size\n}\n","/* eslint-disable max-lines-per-function */\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { type ComponentProps, type ReactElement, Ref, useEffect, useRef, useState } from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useTabsContext } from './TabsContext'\nimport { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'\nimport { useRenderSlot } from './useRenderSlot'\nimport { useResizeObserver } from './useResizeObserver'\n\nexport interface TabsListProps extends Omit<\n  ComponentProps<typeof BaseTabs.List>,\n  'render' | 'loopFocus'\n> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, keyboard navigation will loop from last tab to first, and vice versa.\n   * @default false\n   */\n  loop?: boolean\n  children: ReactElement[] | ReactElement\n  ref?: Ref<HTMLDivElement>\n}\n\ntype ArrowState = 'visible' | 'hidden' | 'disabled'\n\n/** The container for the tab triggers. Renders a <div> element. */\nexport const TabsList = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  loop = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsListProps) => {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef(null)\n  const listRef = ref || innerRef\n  const { orientation } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n\n  const { width } = useResizeObserver(wrapperRef)\n\n  const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({\n    prev: 'hidden',\n    next: 'hidden',\n  })\n\n  useEffect(() => {\n    /**\n     * Show/hide arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    if (orientation !== 'horizontal') {\n      setArrows({ prev: 'hidden', next: 'hidden' })\n    } else {\n      setArrows({\n        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n        next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n      })\n    }\n  }, [orientation, listRef, width])\n\n  useEffect(() => {\n    /**\n     * Enable/disable arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {\n      return\n    }\n\n    const toggleArrowsVisibility = (target: HTMLDivElement) => {\n      setArrows({\n        prev: target.scrollLeft > 0 ? 'visible' : 'disabled',\n        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',\n      })\n    }\n\n    const currentList = listRef.current\n\n    toggleArrowsVisibility(currentList)\n\n    currentList.addEventListener('scroll', ({ target }) =>\n      toggleArrowsVisibility(target as HTMLDivElement)\n    )\n\n    return () =>\n      currentList.removeEventListener('scroll', ({ target }) =>\n        toggleArrowsVisibility(target as HTMLDivElement)\n      )\n  }, [listRef, arrows.prev, loop])\n\n  const handlePrevClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0\n\n    listRef.current.scrollTo({\n      left: shouldLoopForward\n        ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth\n        : listRef.current.scrollLeft - listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  const handleNextClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopBackward =\n      loop &&\n      listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth\n\n    listRef.current.scrollTo({\n      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  return (\n    <div className={wrapperStyles({ className })} ref={wrapperRef}>\n      {arrows.prev !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handlePrevClick}\n          disabled={arrows.prev === 'disabled'}\n          aria-label=\"Scroll left\"\n        >\n          <Icon>\n            <ArrowVerticalLeft />\n          </Icon>\n        </Button>\n      )}\n\n      <BaseTabs.List\n        data-spark-component=\"tabs-list\"\n        ref={listRef}\n        className={listStyles()}\n        render={renderSlot}\n        loopFocus={loop}\n        activateOnFocus\n        {...rest}\n      >\n        {children}\n      </BaseTabs.List>\n\n      {arrows.next !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handleNextClick}\n          disabled={arrows.next === 'disabled'}\n          aria-label=\"Scroll right\"\n        >\n          <Icon>\n            <ArrowVerticalRight />\n          </Icon>\n        </Button>\n      )}\n    </div>\n  )\n}\n\nTabsList.displayName = 'Tabs.List'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { MoreMenuHorizontal } from '@spark-ui/icons/MoreMenuHorizontal'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentType,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Popover as SparkPopover } from '../popover'\nimport type { PopoverProps } from '../popover/Popover'\nimport type { ContentProps as PopoverContentProps } from '../popover/PopoverContent'\nimport type { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger'\n\ninterface TabsPopoverContextValue {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n}\n\nconst TabsPopoverContext = createContext<TabsPopoverContextValue | undefined>(undefined)\n\nconst useTabsPopoverContext = () => {\n  const context = useContext(TabsPopoverContext)\n  if (!context) {\n    throw new Error('TabsPopover components must be used within TabsPopover')\n  }\n\n  return context\n}\n\n// Trigger component that uses context\ninterface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {\n  'aria-label': string\n  children?: ReactNode\n}\n\nconst TabsPopoverTrigger = forwardRef<HTMLButtonElement, TabsPopoverTriggerProps>(\n  ({ 'aria-label': ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {\n    const { popoverTriggerRef } = useTabsPopoverContext()\n    const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef)\n\n    return (\n      <SparkPopover.Trigger asChild {...triggerProps}>\n        <IconButton\n          ref={mergedRef}\n          size=\"sm\"\n          intent=\"surfaceInverse\"\n          design=\"ghost\"\n          aria-label={ariaLabel}\n          tabIndex={-1}\n        >\n          <Icon>{iconChildren || <MoreMenuHorizontal />}</Icon>\n        </IconButton>\n      </SparkPopover.Trigger>\n    )\n  }\n)\n\nTabsPopoverTrigger.displayName = 'Popover.Trigger'\n\n// Content component that uses context\nconst TabsPopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ side, align = 'start', className, ...contentProps }, ref) => {\n    const { popoverSide } = useTabsPopoverContext()\n    const mergedClassName = cx('gap-sm flex flex-col', className)\n\n    return (\n      <SparkPopover.Content\n        ref={ref}\n        {...contentProps}\n        side={side ?? popoverSide}\n        align={align}\n        className={mergedClassName}\n      />\n    )\n  }\n)\n\nTabsPopoverContent.displayName = 'Popover.Content'\n\n// Export types\nexport type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger\nexport type TabsPopoverContentComponent = typeof TabsPopoverContent\n\n// Create a type that extends SparkPopover but overrides Content and Trigger\n// Use ComponentType for JSX compatibility and Omit to exclude only Content and Trigger,\n// then add them back with the overridden types\nexport type ConfiguredPopoverComponent = ComponentType<PopoverProps> &\n  Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {\n    Content: TabsPopoverContentComponent\n    Trigger: TabsPopoverTriggerComponent\n  }\n\ninterface PopoverAbstractionProps {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n  children: (Popover: ConfiguredPopoverComponent) => ReactNode\n}\n\nexport const Popover = ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps) => {\n  const contextValue = useMemo(\n    () => ({ popoverSide, popoverTriggerRef }),\n    [popoverSide, popoverTriggerRef]\n  )\n\n  const PopoverWrapper: typeof SparkPopover = ((props: PopoverProps) => (\n    <TabsPopoverContext.Provider value={contextValue}>\n      <SparkPopover {...props}>{props.children}</SparkPopover>\n    </TabsPopoverContext.Provider>\n  )) as typeof SparkPopover\n\n  const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n    Content: TabsPopoverContent,\n    Trigger: TabsPopoverTrigger,\n  }) as ConfiguredPopoverComponent\n\n  return (\n    <TabsPopoverContext.Provider value={contextValue}>\n      {children(PopoverComponent)}\n    </TabsPopoverContext.Provider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const triggerVariants = cva(\n  [\n    'px-md',\n    'relative flex flex-none items-center',\n    'border-outline',\n    'hover:not-disabled:bg-surface-hovered',\n    'after:absolute',\n    'data-[active]:font-bold',\n    'not-data-[active]:not-disabled:cursor-pointer',\n    'data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2',\n    'data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2',\n    'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md',\n    '[&>svg:last-child:first-child]:mx-auto',\n  ],\n  {\n    variants: {\n      /**\n       * Change the color scheme of the tabs\n       * @default support\n       */\n      intent: makeVariants<'intent', ['main', 'support']>({\n        main: ['data-[active]:text-main data-[active]:after:bg-main'],\n        support: ['data-[active]:text-support data-[active]:after:bg-support'],\n      }),\n      /**\n       * Change the size of the tabs\n       * @default md\n       */\n      size: {\n        xs: ['h-sz-32 min-w-sz-32 text-caption'],\n        sm: ['h-sz-36 min-w-sz-36 text-body-2'],\n        md: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n      hasMenu: {\n        true: 'pr-3xl',\n      },\n      orientation: {\n        horizontal: '',\n        vertical: '',\n      },\n    },\n    compoundVariants: [\n      {\n        hasMenu: true,\n        orientation: 'vertical',\n        class: 'w-full',\n      },\n    ],\n    defaultVariants: {\n      intent: 'support',\n      size: 'md',\n      hasMenu: false,\n      orientation: 'horizontal',\n    },\n  }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { type ComponentProps, type FocusEvent, type ReactNode, Ref, useRef } from 'react'\n\ntype TabKeyDownEvent = Parameters<NonNullable<ComponentProps<typeof BaseTabs.Tab>['onKeyDown']>>[0]\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsTriggerProps extends Omit<ComponentProps<typeof BaseTabs.Tab>, 'render'> {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the tab.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Function that receives a pre-configured Popover component and returns the popover structure.\n   * @example\n   * renderMenu={({ Popover }) => (\n   *   <Popover>\n   *     <Popover.Trigger aria-label=\"Options\">\n   *       <CustomIcon />\n   *     </Popover.Trigger>\n   *     <Popover.Content>\n   *       <Button>Action</Button>\n   *     </Popover.Content>\n   *   </Popover>\n   * )}\n   */\n  renderMenu?: (props: { Popover: ConfiguredPopoverComponent }) => ReactNode\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button that activates a tab panel. Renders a <button> element. */\nexport const TabsTrigger = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  onKeyDown,\n  renderMenu,\n  ...rest\n}: TabsTriggerProps) => {\n  const { intent, size, orientation } = useTabsContext()\n  const popoverTriggerRef = useRef<HTMLButtonElement>(null)\n  const tabsTriggerRef = useRef<HTMLButtonElement>(null)\n  const renderSlot = useRenderSlot(asChild)\n\n  // Combine internal ref with forwarded ref\n  const mergedRef = useMergeRefs(ref, tabsTriggerRef)\n\n  const handleKeyDown = (e: TabKeyDownEvent) => {\n    // Handle Shift+F10 for popover\n    if (e.key === 'F10' && e.shiftKey && renderMenu && popoverTriggerRef.current) {\n      e.preventDefault()\n      popoverTriggerRef.current.click()\n    }\n\n    // Call original onKeyDown if provided\n    onKeyDown?.(e)\n  }\n\n  const hasMenu = !!renderMenu\n  const popoverSide = orientation === 'vertical' ? 'right' : 'bottom'\n\n  const trigger = (\n    <BaseTabs.Tab\n      data-spark-component=\"tabs-trigger\"\n      ref={mergedRef}\n      className={triggerVariants({\n        intent,\n        size,\n        hasMenu,\n        orientation: orientation ?? 'horizontal',\n        className,\n      })}\n      render={renderSlot}\n      disabled={disabled}\n      value={value}\n      onFocus={({ target }: FocusEvent<HTMLButtonElement>) =>\n        target.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        })\n      }\n      onKeyDown={handleKeyDown}\n      aria-haspopup={hasMenu ? 'true' : undefined}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Tab>\n  )\n\n  if (!hasMenu) {\n    return trigger\n  }\n\n  return (\n    <div className={orientation === 'vertical' ? 'relative w-full' : 'relative'}>\n      {trigger}\n      <div className=\"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2\">\n        <Popover popoverSide={popoverSide} popoverTriggerRef={popoverTriggerRef}>\n          {PopoverAbstraction => renderMenu?.({ Popover: PopoverAbstraction })}\n        </Popover>\n      </div>\n    </div>\n  )\n}\n\nTabsTrigger.displayName = 'Tabs.Trigger'\n","import { Tabs as Root } from './Tabs'\nimport { TabsContent as Content } from './TabsContent'\nimport { TabsList as List } from './TabsList'\nimport { TabsTrigger as Trigger } from './TabsTrigger'\n\n/**\n * A set of layered sections of content that users can navigate between using tab controls.\n */\nexport const Tabs: typeof Root & {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  List,\n  Trigger,\n  Content,\n})\n\nTabs.displayName = 'Tabs'\nList.displayName = 'Tabs.List'\nTrigger.displayName = 'Tabs.Trigger'\nContent.displayName = 'Tabs.Content'\n\nexport { type TabsContentProps } from './TabsContent'\nexport { type TabsListProps } from './TabsList'\nexport { type TabsProps, type TabsRootProps } from './Tabs'\nexport { type TabsTriggerProps } from './TabsTrigger'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tabs/TabsContext.tsx","../../src/tabs/TabsRoot.styles.ts","../../src/tabs/useRenderSlot.tsx","../../src/tabs/Tabs.tsx","../../src/tabs/TabsContent.styles.ts","../../src/tabs/TabsContent.tsx","../../src/tabs/TabsList.styles.ts","../../src/tabs/useResizeObserver.ts","../../src/tabs/TabsList.tsx","../../src/tabs/TabsPopoverAbstraction.tsx","../../src/tabs/TabsTrigger.styles.ts","../../src/tabs/TabsTrigger.tsx","../../src/tabs/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\n\nexport type TabsContextInterface = TabsTriggerVariantsProps & {\n  orientation?: 'horizontal' | 'vertical'\n  forceMount?: boolean\n}\n\nexport const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)\n\nexport const useTabsContext = () => {\n  const context = useContext(TabsContext)\n\n  if (!context) {\n    throw Error('useTabsContext must be used within a TabsContext Provider')\n  }\n\n  return context\n}\n","import { cva } from 'class-variance-authority'\n\nexport const rootStyles = cva([\n  'flex',\n  'data-[orientation=horizontal]:flex-col',\n  'data-[orientation=vertical]:flex-row',\n  'max-w-full',\n])\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean) {\n  return asChild ? ({ ...props }: object) => <Slot {...props} /> : undefined\n}\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { TabsContext } from './TabsContext'\nimport { rootStyles } from './TabsRoot.styles'\nimport type { TabsTriggerVariantsProps } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsProps\n  extends\n    Omit<ComponentProps<typeof BaseTabs.Root>, 'render'>,\n    PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Whether to keep inactive tabs content in the DOM.\n   * @default false\n   */\n  forceMount?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * @deprecated\n */\nexport type TabsRootProps = TabsProps\n\nexport const Tabs = ({\n  intent = 'support',\n  size = 'md',\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  forceMount = false,\n  orientation = 'horizontal',\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsProps) => {\n  const renderSlot = useRenderSlot(asChild)\n\n  return (\n    <TabsContext.Provider\n      value={{\n        intent,\n        size,\n        orientation,\n        forceMount,\n      }}\n    >\n      <BaseTabs.Root\n        ref={ref}\n        orientation={orientation}\n        className={rootStyles({ className })}\n        data-spark-component=\"tabs\"\n        render={renderSlot}\n        {...rest}\n      >\n        {children}\n      </BaseTabs.Root>\n    </TabsContext.Provider>\n  )\n}\n\nTabs.displayName = 'Tabs'\n","import { cva } from 'class-variance-authority'\n\nexport const contentStyles = cva(['w-full p-lg', 'focus-visible:u-outline-inset'], {\n  variants: {\n    forceMount: {\n      true: 'data-[hidden]:hidden',\n      false: '',\n    },\n  },\n})\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { type ComponentProps, type PropsWithChildren, Ref } from 'react'\n\nimport { contentStyles } from './TabsContent.styles'\nimport { useTabsContext } from './TabsContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsContentProps extends PropsWithChildren<\n  Omit<ComponentProps<typeof BaseTabs.Panel>, 'keepMounted' | 'render'>\n> {\n  /**\n   * A unique value that associates the content with a trigger.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.\n   */\n  forceMount?: true\n  ref?: Ref<HTMLDivElement>\n}\n\n/** The panel that displays content associated with a tab. Renders a <div> element. */\nexport const TabsContent = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  children,\n  asChild = false,\n  className,\n  ref,\n  forceMount,\n  ...rest\n}: TabsContentProps) => {\n  const { forceMount: contextForceMount } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n  const keepMounted = contextForceMount || forceMount\n\n  return (\n    <BaseTabs.Panel\n      data-spark-component=\"tabs-content\"\n      ref={ref}\n      keepMounted={keepMounted}\n      className={contentStyles({ className, forceMount: keepMounted })}\n      render={renderSlot}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Panel>\n  )\n}\n\nTabsContent.displayName = 'Tabs.Content'\n","import { cva } from 'class-variance-authority'\n\nexport const wrapperStyles = cva(['relative flex'])\n\nexport const listStyles = cva([\n  'flex w-full',\n  'data-[orientation=horizontal]:flex-row',\n  'data-[orientation=vertical]:flex-col',\n  'overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden',\n  'after:flex after:shrink after:grow after:border-outline',\n  'data-[orientation=horizontal]:after:border-b-sm',\n  'data-[orientation=vertical]:after:border-r-sm',\n])\n\nexport const navigationArrowStyles = cva([\n  'h-auto! flex-none',\n  'border-b-sm border-outline',\n  'outline-hidden',\n  'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!',\n])\n","import { type RefObject, useEffect, useRef, useState } from 'react'\n\ninterface Size {\n  width?: number\n  height?: number\n}\n\ntype ResizeCallback = (entry?: ResizeObserverEntry) => void\n\nexport const useResizeObserver = <T extends HTMLElement>(\n  target: RefObject<T | null> | T | null,\n  onResize?: ResizeCallback\n): Size => {\n  const [size, setSize] = useState<Size>({ width: undefined, height: undefined })\n  const resizeObserverRef = useRef<ResizeObserver>(null)\n  const resizeCallbackRef = useRef<ResizeCallback | undefined>(onResize)\n\n  useEffect(() => {\n    resizeCallbackRef.current = onResize\n  }, [onResize])\n\n  useEffect(() => {\n    const targetElm = target && 'current' in target ? target.current : target\n    if (!targetElm || resizeObserverRef.current) {\n      return\n    }\n\n    resizeObserverRef.current = new ResizeObserver(([entry]) => {\n      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {}\n      resizeCallbackRef.current?.(entry)\n\n      setSize({ width, height })\n    })\n\n    resizeObserverRef.current.observe(targetElm as unknown as HTMLElement)\n\n    return () => {\n      resizeObserverRef.current &&\n        resizeObserverRef.current.unobserve(targetElm as unknown as HTMLElement)\n    }\n  }, [target, resizeObserverRef, resizeCallbackRef])\n\n  return size\n}\n","/* eslint-disable max-lines-per-function */\nimport { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { ArrowVerticalLeft } from '@spark-ui/icons/ArrowVerticalLeft'\nimport { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { type ComponentProps, type ReactElement, Ref, useEffect, useRef, useState } from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { useTabsContext } from './TabsContext'\nimport { listStyles, navigationArrowStyles, wrapperStyles } from './TabsList.styles'\nimport { useRenderSlot } from './useRenderSlot'\nimport { useResizeObserver } from './useResizeObserver'\n\nexport interface TabsListProps extends Omit<\n  ComponentProps<typeof BaseTabs.List>,\n  'render' | 'loopFocus'\n> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, keyboard navigation will loop from last tab to first, and vice versa.\n   * @default false\n   */\n  loop?: boolean\n  children: ReactElement[] | ReactElement\n  ref?: Ref<HTMLDivElement>\n}\n\ntype ArrowState = 'visible' | 'hidden' | 'disabled'\n\n/** The container for the tab triggers. Renders a <div> element. */\nexport const TabsList = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  loop = false,\n  children,\n  className,\n  ref,\n  ...rest\n}: TabsListProps) => {\n  const wrapperRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef(null)\n  const listRef = ref || innerRef\n  const { orientation } = useTabsContext()\n  const renderSlot = useRenderSlot(asChild)\n\n  const { width } = useResizeObserver(wrapperRef)\n\n  const [arrows, setArrows] = useState<Record<'prev' | 'next', ArrowState>>({\n    prev: 'hidden',\n    next: 'hidden',\n  })\n\n  useEffect(() => {\n    /**\n     * Show/hide arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    if (orientation !== 'horizontal') {\n      setArrows({ prev: 'hidden', next: 'hidden' })\n    } else {\n      setArrows({\n        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n        next: listRef.current.scrollWidth > listRef.current.clientWidth ? 'visible' : 'hidden',\n      })\n    }\n  }, [orientation, listRef, width])\n\n  useEffect(() => {\n    /**\n     * Enable/disable arrows\n     */\n    if (typeof listRef === 'function' || !listRef.current || arrows.prev === 'hidden' || loop) {\n      return\n    }\n\n    const toggleArrowsVisibility = (target: HTMLDivElement) => {\n      setArrows({\n        prev: target.scrollLeft > 0 ? 'visible' : 'disabled',\n        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? 'visible' : 'disabled',\n      })\n    }\n\n    const currentList = listRef.current\n\n    toggleArrowsVisibility(currentList)\n\n    currentList.addEventListener('scroll', ({ target }) =>\n      toggleArrowsVisibility(target as HTMLDivElement)\n    )\n\n    return () =>\n      currentList.removeEventListener('scroll', ({ target }) =>\n        toggleArrowsVisibility(target as HTMLDivElement)\n      )\n  }, [listRef, arrows.prev, loop])\n\n  const handlePrevClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0\n\n    listRef.current.scrollTo({\n      left: shouldLoopForward\n        ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth\n        : listRef.current.scrollLeft - listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  const handleNextClick = () => {\n    if (typeof listRef === 'function' || !listRef.current) {\n      return\n    }\n\n    const shouldLoopBackward =\n      loop &&\n      listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth\n\n    listRef.current.scrollTo({\n      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,\n      behavior: 'smooth',\n    })\n  }\n\n  return (\n    <div className={wrapperStyles({ className })} ref={wrapperRef}>\n      {arrows.prev !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handlePrevClick}\n          disabled={arrows.prev === 'disabled'}\n          aria-label=\"Scroll left\"\n        >\n          <Icon>\n            <ArrowVerticalLeft />\n          </Icon>\n        </Button>\n      )}\n\n      <BaseTabs.List\n        data-spark-component=\"tabs-list\"\n        ref={listRef}\n        className={listStyles()}\n        render={renderSlot}\n        loopFocus={loop}\n        activateOnFocus\n        {...rest}\n      >\n        {children}\n      </BaseTabs.List>\n\n      {arrows.next !== 'hidden' && (\n        <Button\n          shape=\"square\"\n          intent=\"surface\"\n          size=\"sm\"\n          className={navigationArrowStyles()}\n          onClick={handleNextClick}\n          disabled={arrows.next === 'disabled'}\n          aria-label=\"Scroll right\"\n        >\n          <Icon>\n            <ArrowVerticalRight />\n          </Icon>\n        </Button>\n      )}\n    </div>\n  )\n}\n\nTabsList.displayName = 'Tabs.List'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { MoreMenuHorizontal } from '@spark-ui/icons/MoreMenuHorizontal'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentType,\n  createContext,\n  forwardRef,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Popover as SparkPopover } from '../popover'\nimport type { PopoverProps } from '../popover/Popover'\nimport type { ContentProps as PopoverContentProps } from '../popover/PopoverContent'\nimport type { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger'\n\ninterface TabsPopoverContextValue {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n}\n\nconst TabsPopoverContext = createContext<TabsPopoverContextValue | undefined>(undefined)\n\nconst useTabsPopoverContext = () => {\n  const context = useContext(TabsPopoverContext)\n  if (!context) {\n    throw new Error('TabsPopover components must be used within TabsPopover')\n  }\n\n  return context\n}\n\n// Trigger component that uses context\ninterface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {\n  'aria-label': string\n  children?: ReactNode\n}\n\nconst TabsPopoverTrigger = forwardRef<HTMLButtonElement, TabsPopoverTriggerProps>(\n  ({ 'aria-label': ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {\n    const { popoverTriggerRef } = useTabsPopoverContext()\n    const mergedRef = useMergeRefs(forwardedRef, popoverTriggerRef)\n\n    return (\n      <SparkPopover.Trigger asChild {...triggerProps}>\n        <IconButton\n          ref={mergedRef}\n          size=\"sm\"\n          intent=\"surfaceInverse\"\n          design=\"ghost\"\n          aria-label={ariaLabel}\n          tabIndex={-1}\n        >\n          <Icon>{iconChildren || <MoreMenuHorizontal />}</Icon>\n        </IconButton>\n      </SparkPopover.Trigger>\n    )\n  }\n)\n\nTabsPopoverTrigger.displayName = 'Popover.Trigger'\n\n// Content component that uses context\nconst TabsPopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(\n  ({ side, align = 'start', className, ...contentProps }, ref) => {\n    const { popoverSide } = useTabsPopoverContext()\n    const mergedClassName = cx('gap-sm flex flex-col', className)\n\n    return (\n      <SparkPopover.Content\n        ref={ref}\n        {...contentProps}\n        side={side ?? popoverSide}\n        align={align}\n        className={mergedClassName}\n      />\n    )\n  }\n)\n\nTabsPopoverContent.displayName = 'Popover.Content'\n\n// Export types\nexport type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger\nexport type TabsPopoverContentComponent = typeof TabsPopoverContent\n\n// Create a type that extends SparkPopover but overrides Content and Trigger\n// Use ComponentType for JSX compatibility and Omit to exclude only Content and Trigger,\n// then add them back with the overridden types\nexport type ConfiguredPopoverComponent = ComponentType<PopoverProps> &\n  Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {\n    Content: TabsPopoverContentComponent\n    Trigger: TabsPopoverTriggerComponent\n  }\n\ninterface PopoverAbstractionProps {\n  popoverSide: 'right' | 'bottom'\n  popoverTriggerRef: RefObject<HTMLButtonElement | null>\n  children: (Popover: ConfiguredPopoverComponent) => ReactNode\n}\n\nexport const Popover = ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps) => {\n  const contextValue = useMemo(\n    () => ({ popoverSide, popoverTriggerRef }),\n    [popoverSide, popoverTriggerRef]\n  )\n\n  const PopoverWrapper: typeof SparkPopover = ((props: PopoverProps) => (\n    <TabsPopoverContext.Provider value={contextValue}>\n      <SparkPopover {...props}>{props.children}</SparkPopover>\n    </TabsPopoverContext.Provider>\n  )) as typeof SparkPopover\n\n  const PopoverComponent = Object.assign(PopoverWrapper, SparkPopover, {\n    Content: TabsPopoverContent,\n    Trigger: TabsPopoverTrigger,\n  }) as ConfiguredPopoverComponent\n\n  return (\n    <TabsPopoverContext.Provider value={contextValue}>\n      {children(PopoverComponent)}\n    </TabsPopoverContext.Provider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const triggerVariants = cva(\n  [\n    'px-md',\n    'relative flex flex-none items-center',\n    'border-outline',\n    'hover:not-disabled:bg-surface-hovered',\n    'after:absolute',\n    'data-[active]:font-medium',\n    'not-data-[active]:not-disabled:cursor-pointer',\n    'data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2',\n    'data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2',\n    'focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md',\n    '[&>svg:last-child:first-child]:mx-auto',\n  ],\n  {\n    variants: {\n      /**\n       * Change the color scheme of the tabs\n       * @default support\n       */\n      intent: makeVariants<'intent', ['main', 'support']>({\n        main: ['data-[active]:text-main data-[active]:after:bg-main'],\n        support: ['data-[active]:text-support data-[active]:after:bg-support'],\n      }),\n      /**\n       * Change the size of the tabs\n       * @default md\n       */\n      size: {\n        xs: ['h-sz-32 min-w-sz-32 text-caption'],\n        sm: ['h-sz-36 min-w-sz-36 text-body-2'],\n        md: ['h-sz-40 min-w-sz-40 text-body-1'],\n      },\n      hasMenu: {\n        true: 'pr-3xl',\n      },\n      orientation: {\n        horizontal: '',\n        vertical: '',\n      },\n    },\n    compoundVariants: [\n      {\n        hasMenu: true,\n        orientation: 'vertical',\n        class: 'w-full',\n      },\n    ],\n    defaultVariants: {\n      intent: 'support',\n      size: 'md',\n      hasMenu: false,\n      orientation: 'horizontal',\n    },\n  }\n)\n\nexport type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>\n","import { Tabs as BaseTabs } from '@base-ui/react/tabs'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { type ComponentProps, type FocusEvent, type ReactNode, Ref, useRef } from 'react'\n\ntype TabKeyDownEvent = Parameters<NonNullable<ComponentProps<typeof BaseTabs.Tab>['onKeyDown']>>[0]\n\nimport { useTabsContext } from './TabsContext'\nimport { type ConfiguredPopoverComponent, Popover } from './TabsPopoverAbstraction'\nimport { triggerVariants } from './TabsTrigger.styles'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface TabsTriggerProps extends Omit<ComponentProps<typeof BaseTabs.Tab>, 'render'> {\n  /**\n   * A unique value that associates the trigger with a content.\n   */\n  value: string\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   * @default false\n   */\n  asChild?: boolean\n  /**\n   * When true, prevents the user from interacting with the tab.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Function that receives a pre-configured Popover component and returns the popover structure.\n   * @example\n   * renderMenu={({ Popover }) => (\n   *   <Popover>\n   *     <Popover.Trigger aria-label=\"Options\">\n   *       <CustomIcon />\n   *     </Popover.Trigger>\n   *     <Popover.Content>\n   *       <Button>Action</Button>\n   *     </Popover.Content>\n   *   </Popover>\n   * )}\n   */\n  renderMenu?: (props: { Popover: ConfiguredPopoverComponent }) => ReactNode\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button that activates a tab panel. Renders a <button> element. */\nexport const TabsTrigger = ({\n  /**\n   * Default Base UI Primitive values\n   * see https://base-ui.com/react/components/tabs\n   */\n  asChild = false,\n  value,\n  disabled = false,\n  children,\n  className,\n  ref,\n  onKeyDown,\n  renderMenu,\n  ...rest\n}: TabsTriggerProps) => {\n  const { intent, size, orientation } = useTabsContext()\n  const popoverTriggerRef = useRef<HTMLButtonElement>(null)\n  const tabsTriggerRef = useRef<HTMLButtonElement>(null)\n  const renderSlot = useRenderSlot(asChild)\n\n  // Combine internal ref with forwarded ref\n  const mergedRef = useMergeRefs(ref, tabsTriggerRef)\n\n  const handleKeyDown = (e: TabKeyDownEvent) => {\n    // Handle Shift+F10 for popover\n    if (e.key === 'F10' && e.shiftKey && renderMenu && popoverTriggerRef.current) {\n      e.preventDefault()\n      popoverTriggerRef.current.click()\n    }\n\n    // Call original onKeyDown if provided\n    onKeyDown?.(e)\n  }\n\n  const hasMenu = !!renderMenu\n  const popoverSide = orientation === 'vertical' ? 'right' : 'bottom'\n\n  const trigger = (\n    <BaseTabs.Tab\n      data-spark-component=\"tabs-trigger\"\n      ref={mergedRef}\n      className={triggerVariants({\n        intent,\n        size,\n        hasMenu,\n        orientation: orientation ?? 'horizontal',\n        className,\n      })}\n      render={renderSlot}\n      disabled={disabled}\n      value={value}\n      onFocus={({ target }: FocusEvent<HTMLButtonElement>) =>\n        target.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        })\n      }\n      onKeyDown={handleKeyDown}\n      aria-haspopup={hasMenu ? 'true' : undefined}\n      {...rest}\n    >\n      {children}\n    </BaseTabs.Tab>\n  )\n\n  if (!hasMenu) {\n    return trigger\n  }\n\n  return (\n    <div className={orientation === 'vertical' ? 'relative w-full' : 'relative'}>\n      {trigger}\n      <div className=\"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2\">\n        <Popover popoverSide={popoverSide} popoverTriggerRef={popoverTriggerRef}>\n          {PopoverAbstraction => renderMenu?.({ Popover: PopoverAbstraction })}\n        </Popover>\n      </div>\n    </div>\n  )\n}\n\nTabsTrigger.displayName = 'Tabs.Trigger'\n","import { Tabs as Root } from './Tabs'\nimport { TabsContent as Content } from './TabsContent'\nimport { TabsList as List } from './TabsList'\nimport { TabsTrigger as Trigger } from './TabsTrigger'\n\n/**\n * A set of layered sections of content that users can navigate between using tab controls.\n */\nexport const Tabs: typeof Root & {\n  List: typeof List\n  Trigger: typeof Trigger\n  Content: typeof Content\n} = Object.assign(Root, {\n  List,\n  Trigger,\n  Content,\n})\n\nTabs.displayName = 'Tabs'\nList.displayName = 'Tabs.List'\nTrigger.displayName = 'Tabs.Trigger'\nContent.displayName = 'Tabs.Content'\n\nexport { type TabsContentProps } from './TabsContent'\nexport { type TabsListProps } from './TabsList'\nexport { type TabsProps, type TabsRootProps } from './Tabs'\nexport { type TabsTriggerProps } from './TabsTrigger'\n"],"mappings":"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"}

package/dist/text-link/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=(0,t.cva)([`inline-flex items-center focus-visible:u-outline`],{variants:{intent:{current:`text-current hover:opacity-dim-1`,main:`text-main hover:text-main-hovered`,support:`text-support hover:text-support-hovered`,accent:`text-accent hover:text-accent-hovered`,success:`text-success hover:text-success-hovered`,alert:`text-alert hover:text-alert-hovered`,danger:`text-error hover:text-error-hovered`,info:`text-info hover:text-info-hovered`,neutral:`text-neutral hover:text-neutral-hovered`},bold:{true:`font-bold`},underline:{true:`underline`,false:`hover:underline focus:underline`}},defaultVariants:{intent:`current`,bold:!1,underline:!0}}),i=({asChild:t=!1,bold:i=!1,children:a,className:o,intent:s=`current`,underline:c=!0,ref:l,...u})=>(0,n.jsx)(t?e.Slot:`a`,{"data-spark-component":`text-link`,ref:l,className:r({className:o,bold:i,intent:s,underline:c}),...u,children:a});exports.TextLink=i;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=(0,t.cva)([`inline-flex items-center focus-visible:u-outline`],{variants:{intent:{current:`text-current hover:opacity-dim-1`,main:`text-main hover:text-main-hovered`,support:`text-support hover:text-support-hovered`,accent:`text-accent hover:text-accent-hovered`,success:`text-success hover:text-success-hovered`,alert:`text-alert hover:text-alert-hovered`,danger:`text-error hover:text-error-hovered`,info:`text-info hover:text-info-hovered`,neutral:`text-neutral hover:text-neutral-hovered`},bold:{true:`font-medium`},underline:{true:`underline`,false:`hover:underline focus:underline`}},defaultVariants:{intent:`current`,bold:!1,underline:!0}}),i=({asChild:t=!1,bold:i=!1,children:a,className:o,intent:s=`current`,underline:c=!0,ref:l,...u})=>(0,n.jsx)(t?e.Slot:`a`,{"data-spark-component":`text-link`,ref:l,className:r({className:o,bold:i,intent:s,underline:c}),...u,children:a});exports.TextLink=i;
 //# sourceMappingURL=index.js.map

package/dist/text-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/text-link/TextLink.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nconst textLinkStyles = cva(['inline-flex items-center focus-visible:u-outline'], {\n  variants: {\n    intent: {\n      current: 'text-current hover:opacity-dim-1',\n      main: 'text-main hover:text-main-hovered',\n      support: 'text-support hover:text-support-hovered',\n      accent: 'text-accent hover:text-accent-hovered',\n      success: 'text-success hover:text-success-hovered',\n      alert: 'text-alert hover:text-alert-hovered',\n      danger: 'text-error hover:text-error-hovered',\n      info: 'text-info hover:text-info-hovered',\n      neutral: 'text-neutral hover:text-neutral-hovered',\n    },\n    /** By default, TextLink inherits the current font weight. Use `bold` to highlight it. */\n    bold: {\n      true: 'font-bold',\n    },\n    /**\n     * Underline is enabled by default.\n     * You can remove it, but be careful about a11y, as you should make obvious to users what is a link or not.\n     */\n    underline: {\n      true: 'underline',\n      false: 'hover:underline focus:underline',\n    },\n  },\n  defaultVariants: {\n    intent: 'current',\n    bold: false,\n    underline: true,\n  },\n})\n\nexport type StylesProps = VariantProps<typeof textLinkStyles>\n\nexport type TextLinkProps = ComponentPropsWithRef<'a'> &\n  StylesProps & {\n    /**\n     * Change the component to the HTML tag or custom component of the only child.\n     */\n    asChild?: boolean\n  }\n\n/**\n * A clickable text element that navigates users to another page or section.\n */\nexport const TextLink = ({\n  asChild = false,\n  bold = false,\n  children,\n  className,\n  intent = 'current',\n  underline = true,\n  ref,\n  ...props\n}: TextLinkProps) => {\n  const Component = asChild ? Slot : 'a'\n\n  return (\n    <Component\n      data-spark-component=\"text-link\"\n      ref={ref}\n      className={textLinkStyles({ className, bold, intent, underline })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"mappings":"gNAKA,IAAM,GAAA,EAAA,EAAA,KAAqB,CAAC,mDAAmD,CAAE,CAC/E,SAAU,CACR,OAAQ,CACN,QAAS,mCACT,KAAM,oCACN,QAAS,0CACT,OAAQ,wCACR,QAAS,0CACT,MAAO,sCACP,OAAQ,sCACR,KAAM,oCACN,QAAS,0CACV,CAED,KAAM,CACJ,KAAM,YACP,CAKD,UAAW,CACT,KAAM,YACN,MAAO,kCACR,CACF,CACD,gBAAiB,CACf,OAAQ,UACR,KAAM,GACN,UAAW,GACZ,CACF,CAAC,CAeW,GAAY,CACvB,UAAU,GACV,OAAO,GACP,WACA,YACA,SAAS,UACT,YAAY,GACZ,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,IAGjC,CACE,uBAAqB,YAChB,MACL,UAAW,EAAe,CAAE,YAAW,OAAM,SAAQ,YAAW,CAAC,CACjE,GAAI,EAEH,WACS,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/text-link/TextLink.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nconst textLinkStyles = cva(['inline-flex items-center focus-visible:u-outline'], {\n  variants: {\n    intent: {\n      current: 'text-current hover:opacity-dim-1',\n      main: 'text-main hover:text-main-hovered',\n      support: 'text-support hover:text-support-hovered',\n      accent: 'text-accent hover:text-accent-hovered',\n      success: 'text-success hover:text-success-hovered',\n      alert: 'text-alert hover:text-alert-hovered',\n      danger: 'text-error hover:text-error-hovered',\n      info: 'text-info hover:text-info-hovered',\n      neutral: 'text-neutral hover:text-neutral-hovered',\n    },\n    /** By default, TextLink inherits the current font weight. Use `bold` to highlight it. */\n    bold: {\n      true: 'font-medium',\n    },\n    /**\n     * Underline is enabled by default.\n     * You can remove it, but be careful about a11y, as you should make obvious to users what is a link or not.\n     */\n    underline: {\n      true: 'underline',\n      false: 'hover:underline focus:underline',\n    },\n  },\n  defaultVariants: {\n    intent: 'current',\n    bold: false,\n    underline: true,\n  },\n})\n\nexport type StylesProps = VariantProps<typeof textLinkStyles>\n\nexport type TextLinkProps = ComponentPropsWithRef<'a'> &\n  StylesProps & {\n    /**\n     * Change the component to the HTML tag or custom component of the only child.\n     */\n    asChild?: boolean\n  }\n\n/**\n * A clickable text element that navigates users to another page or section.\n */\nexport const TextLink = ({\n  asChild = false,\n  bold = false,\n  children,\n  className,\n  intent = 'current',\n  underline = true,\n  ref,\n  ...props\n}: TextLinkProps) => {\n  const Component = asChild ? Slot : 'a'\n\n  return (\n    <Component\n      data-spark-component=\"text-link\"\n      ref={ref}\n      className={textLinkStyles({ className, bold, intent, underline })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"mappings":"gNAKA,IAAM,GAAA,EAAA,EAAA,KAAqB,CAAC,mDAAmD,CAAE,CAC/E,SAAU,CACR,OAAQ,CACN,QAAS,mCACT,KAAM,oCACN,QAAS,0CACT,OAAQ,wCACR,QAAS,0CACT,MAAO,sCACP,OAAQ,sCACR,KAAM,oCACN,QAAS,0CACV,CAED,KAAM,CACJ,KAAM,cACP,CAKD,UAAW,CACT,KAAM,YACN,MAAO,kCACR,CACF,CACD,gBAAiB,CACf,OAAQ,UACR,KAAM,GACN,UAAW,GACZ,CACF,CAAC,CAeW,GAAY,CACvB,UAAU,GACV,OAAO,GACP,WACA,YACA,SAAS,UACT,YAAY,GACZ,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,IAGjC,CACE,uBAAqB,YAChB,MACL,UAAW,EAAe,CAAE,YAAW,OAAM,SAAQ,YAAW,CAAC,CACjE,GAAI,EAEH,WACS,CAAA"}