@spark-ui/components 17.15.4 → 17.15.5

package/dist/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\n/**\n * An action button positioned on the avatar, typically for editing. Renders a <button> element.\n */\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\n/**\n * The avatar's image content. Renders an <img> element.\n */\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\n/**\n * A badge indicator showing the user's online status. Renders a <div> element.\n */\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\n/**\n * A placeholder shown when no image is available, typically displaying the user's initial. Renders a <div> element.\n */\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2-highlight': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\n/**\n * The user container that wraps avatar content. Renders a <div> element.\n */\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar as Root } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\n\n/**\n * A graphical representation of a user, typically displaying an image, initials, or icon.\n */\nexport const Avatar: typeof Root & {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n} = Object.assign(Root, {\n  Image: AvatarImage,\n  Action: AvatarAction,\n  OnlineBadge: AvatarOnlineBadge,\n  User: AvatarUser,\n  Placeholder: AvatarPlaceholder,\n})\n\nAvatar.displayName = 'Avatar'\nAvatarImage.displayName = 'Avatar.Image'\nAvatarAction.displayName = 'Avatar.Action'\nAvatarOnlineBadge.displayName = 'Avatar.OnlineBadge'\nAvatarUser.displayName = 'Avatar.User'\nAvatarPlaceholder.displayName = 'Avatar.Placeholder'\n\nexport type { AvatarProps } from './types'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\n/**\n * An action button positioned on the avatar, typically for editing. Renders a <button> element.\n */\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\n/**\n * The avatar's image content. Renders an <img> element.\n */\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\n/**\n * A badge indicator showing the user's online status. Renders a <div> element.\n */\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\n/**\n * A placeholder shown when no image is available, typically displaying the user's initial. Renders a <div> element.\n */\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2-highlight': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\n/**\n * The user container that wraps avatar content. Renders a <div> element.\n */\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar as Root } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\n\n/**\n * A graphical representation of a user, typically displaying an image, initials, or icon.\n */\nexport const Avatar: typeof Root & {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n} = Object.assign(Root, {\n  Image: AvatarImage,\n  Action: AvatarAction,\n  OnlineBadge: AvatarOnlineBadge,\n  User: AvatarUser,\n  Placeholder: AvatarPlaceholder,\n})\n\nAvatar.displayName = 'Avatar'\nAvatarImage.displayName = 'Avatar.Image'\nAvatarAction.displayName = 'Avatar.Action'\nAvatarOnlineBadge.displayName = 'Avatar.OnlineBadge'\nAvatarUser.displayName = 'Avatar.User'\nAvatarPlaceholder.displayName = 'Avatar.Placeholder'\n\nexport type { AvatarProps } from './types'\n"],"mappings":"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"}

package/dist/avatar/index.mjs

@@ -1,6 +1,6 @@
 import { Slot as e } from "../slot/index.mjs";
-import { t } from "../icon-D05Uqh8_.mjs";
-import { t as n } from "../icon-button-BLG7VjR7.mjs";
+import { t } from "../icon-Bs-39J-H.mjs";
+import { t as n } from "../icon-button-DQAzrC_Q.mjs";
 import { cx as r } from "class-variance-authority";
 import * as i from "react";
 import { useEffect as a, useState as o } from "react";

package/dist/avatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\n/**\n * An action button positioned on the avatar, typically for editing. Renders a <button> element.\n */\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\n/**\n * The avatar's image content. Renders an <img> element.\n */\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\n/**\n * A badge indicator showing the user's online status. Renders a <div> element.\n */\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\n/**\n * A placeholder shown when no image is available, typically displaying the user's initial. Renders a <div> element.\n */\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2-highlight': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\n/**\n * The user container that wraps avatar content. Renders a <div> element.\n */\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar as Root } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\n\n/**\n * A graphical representation of a user, typically displaying an image, initials, or icon.\n */\nexport const Avatar: typeof Root & {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n} = Object.assign(Root, {\n  Image: AvatarImage,\n  Action: AvatarAction,\n  OnlineBadge: AvatarOnlineBadge,\n  User: AvatarUser,\n  Placeholder: AvatarPlaceholder,\n})\n\nAvatar.displayName = 'Avatar'\nAvatarImage.displayName = 'Avatar.Image'\nAvatarAction.displayName = 'Avatar.Action'\nAvatarOnlineBadge.displayName = 'Avatar.OnlineBadge'\nAvatarUser.displayName = 'Avatar.User'\nAvatarPlaceholder.displayName = 'Avatar.Placeholder'\n\nexport type { AvatarProps } from './types'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\n/**\n * An action button positioned on the avatar, typically for editing. Renders a <button> element.\n */\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\n/**\n * The avatar's image content. Renders an <img> element.\n */\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\n/**\n * A badge indicator showing the user's online status. Renders a <div> element.\n */\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\n/**\n * A placeholder shown when no image is available, typically displaying the user's initial. Renders a <div> element.\n */\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2-highlight': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\n/**\n * The user container that wraps avatar content. Renders a <div> element.\n */\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar as Root } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\n\n/**\n * A graphical representation of a user, typically displaying an image, initials, or icon.\n */\nexport const Avatar: typeof Root & {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n} = Object.assign(Root, {\n  Image: AvatarImage,\n  Action: AvatarAction,\n  OnlineBadge: AvatarOnlineBadge,\n  User: AvatarUser,\n  Placeholder: AvatarPlaceholder,\n})\n\nAvatar.displayName = 'Avatar'\nAvatarImage.displayName = 'Avatar.Image'\nAvatarAction.displayName = 'Avatar.Action'\nAvatarOnlineBadge.displayName = 'Avatar.OnlineBadge'\nAvatarUser.displayName = 'Avatar.User'\nAvatarPlaceholder.displayName = 'Avatar.Placeholder'\n\nexport type { AvatarProps } from './types'\n"],"mappings":"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"}

package/dist/badge/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);let e=require(`class-variance-authority`),t=require(`react/jsx-runtime`),n=require(`@spark-ui/internal-utils`);var r=(0,e.cva)([`inline-flex h-fit`,`empty:p-0`,`text-center`,`rounded-full box-content`],{variants:{intent:(0,n.makeVariants)({main:[`bg-main`,`text-on-main`,`border-surface`],support:[`bg-support`,`text-on-support`,`border-surface`],accent:[`bg-accent`,`text-on-accent`,`border-surface`],success:[`bg-success`,`text-on-success`,`border-surface`],alert:[`bg-alert`,`text-on-alert`,`border-surface`],danger:[`bg-error`,`text-on-error`,`border-surface`],info:[`bg-info`,`text-on-info`,`border-surface`],neutral:[`bg-neutral`,`text-on-neutral`,`border-surface`],surface:[`bg-surface`,`text-on-surface`,`border-surface`]}),size:(0,n.makeVariants)({sm:[`text-small-highlight`,`px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]`,`empty:size-sz-8`],md:[`text-caption-highlight`,`px-md py-sm`,`empty:size-sz-16`]}),type:{relative:[`absolute right-0 border-md`,`translate-x-1/2 -translate-y-1/2`],standalone:[]}},defaultVariants:{intent:`danger`,size:`md`,type:`relative`}}),i=({intent:e=`danger`,size:n=`md`,type:i=`relative`,count:a,overflowCount:o=99,"aria-label":s,className:c,...l})=>{let u=a&&a>o,d=typeof s==`function`?s({count:a,overflowCount:o}):s,f={...l,"aria-label":d};return(0,t.jsx)(`span`,{"data-spark-component":`badge`,role:`status`,className:r({intent:e,size:n,type:i,className:c}),...f,children:u?`${o}+`:a})};i.displayName=`BadgeItem`;var a=({children:e,...n})=>e?(0,t.jsxs)(`div`,{className:`relative inline-flex`,children:[e,(0,t.jsx)(i,{...n})]}):(0,t.jsx)(i,{type:`standalone`,...n});a.displayName=`Badge`,exports.Badge=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("class-variance-authority"),t=require("react/jsx-runtime"),n=require("@spark-ui/internal-utils");var r=(0,e.cva)([`inline-flex h-fit`,`empty:p-0`,`text-center`,`rounded-full box-content`],{variants:{intent:(0,n.makeVariants)({main:[`bg-main`,`text-on-main`,`border-surface`],support:[`bg-support`,`text-on-support`,`border-surface`],accent:[`bg-accent`,`text-on-accent`,`border-surface`],success:[`bg-success`,`text-on-success`,`border-surface`],alert:[`bg-alert`,`text-on-alert`,`border-surface`],danger:[`bg-error`,`text-on-error`,`border-surface`],info:[`bg-info`,`text-on-info`,`border-surface`],neutral:[`bg-neutral`,`text-on-neutral`,`border-surface`],surface:[`bg-surface`,`text-on-surface`,`border-surface`]}),size:(0,n.makeVariants)({sm:[`text-small-highlight`,`px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]`,`empty:size-sz-8`],md:[`text-caption-highlight`,`px-md py-sm`,`empty:size-sz-16`]}),type:{relative:[`absolute right-0 border-md`,`translate-x-1/2 -translate-y-1/2`],standalone:[]}},defaultVariants:{intent:`danger`,size:`md`,type:`relative`}}),i=({intent:e=`danger`,size:n=`md`,type:i=`relative`,count:a,overflowCount:o=99,"aria-label":s,className:c,...l})=>{let u=a&&a>o,d=typeof s==`function`?s({count:a,overflowCount:o}):s,f={...l,"aria-label":d};return(0,t.jsx)(`span`,{"data-spark-component":`badge`,role:`status`,className:r({intent:e,size:n,type:i,className:c}),...f,children:u?`${o}+`:a})};i.displayName=`BadgeItem`;var a=({children:e,...n})=>e?(0,t.jsxs)(`div`,{className:`relative inline-flex`,children:[e,(0,t.jsx)(i,{...n})]}):(0,t.jsx)(i,{type:`standalone`,...n});a.displayName=`Badge`,exports.Badge=a;
 //# sourceMappingURL=index.js.map

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: [\n          'text-small-highlight',\n          'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]',\n          'empty:size-sz-8',\n        ],\n        md: ['text-caption-highlight', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":"kNAGA,IAAa,GAAA,EAAA,EAAA,KACX,CAAC,oBAAqB,YAAa,cAAe,2BAA2B,CAC7E,CACE,SAAU,CAKR,QAAA,EAAA,EAAA,cAGE,CACA,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,OAAQ,CAAC,YAAa,iBAAkB,iBAAiB,CACzD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,MAAO,CAAC,WAAY,gBAAiB,iBAAiB,CACtD,OAAQ,CAAC,WAAY,gBAAiB,iBAAiB,CACvD,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC7D,CAAC,CAKF,MAAA,EAAA,EAAA,cAAyC,CACvC,GAAI,CACF,uBACA,oDACA,kBACD,CACD,GAAI,CAAC,yBAA0B,cAAe,mBAAmB,CAClE,CAAC,CAKF,KAAM,CACJ,SAAU,CAAC,6BAA8B,mCAAmC,CAC5E,WAAY,EAAE,CACf,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,WACP,CACF,CACF,CCtBY,GAAa,CACxB,SAAS,SACT,OAAO,KACP,OAAO,WACP,QACA,gBAAgB,GAChB,aAAc,EACd,YACA,GAAG,KACiB,CACpB,IAAM,EAAc,GAAS,EAAQ,EAC/B,EAAY,OAAO,GAAU,WAAa,EAAM,CAAE,QAAO,gBAAe,CAAC,CAAG,EAC5E,EAAQ,CAAE,GAAG,EAAQ,aAAc,EAAW,CAEpD,OACE,EAAA,EAAA,KAAC,OAAD,CACE,uBAAqB,QACrB,KAAK,SACL,UAAW,EAAO,CAChB,SACA,OACA,OACA,YACD,CAAC,CACF,GAAI,WAEH,EAAc,GAAG,EAAc,GAAK,EAChC,CAAA,EAIX,EAAU,YAAc,YClDxB,IAAa,GAAS,CAAE,WAAU,GAAG,KACb,GAKpB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gCAAf,CACG,GACD,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CACpB,IALN,EAAA,EAAA,KAAC,EAAD,CAAW,KAAK,aAAa,GAAI,EAAS,CAAA,CAS9C,EAAM,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: [\n          'text-small-highlight',\n          'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]',\n          'empty:size-sz-8',\n        ],\n        md: ['text-caption-highlight', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":"kLAGA,IAAa,GAAA,EAAA,EAAA,IAAA,CACX,CAAC,oBAAqB,YAAa,cAAe,0BAA0B,EAC5E,CACE,SAAU,CAKR,QAAA,EAAA,EAAA,aAAA,CAGE,CACA,KAAM,CAAC,UAAW,eAAgB,gBAAgB,EAClD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,OAAQ,CAAC,YAAa,iBAAkB,gBAAgB,EACxD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,MAAO,CAAC,WAAY,gBAAiB,gBAAgB,EACrD,OAAQ,CAAC,WAAY,gBAAiB,gBAAgB,EACtD,KAAM,CAAC,UAAW,eAAgB,gBAAgB,EAClD,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,EAC3D,QAAS,CAAC,aAAc,kBAAmB,gBAAgB,CAC7D,CAAC,EAKD,MAAA,EAAA,EAAA,aAAA,CAAyC,CACvC,GAAI,CACF,uBACA,oDACA,iBACF,EACA,GAAI,CAAC,yBAA0B,cAAe,kBAAkB,CAClE,CAAC,EAKD,KAAM,CACJ,SAAU,CAAC,6BAA8B,kCAAkC,EAC3E,WAAY,CAAC,CACf,CACF,EACA,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,UACR,CACF,CACF,ECtBa,GAAa,CACxB,SAAS,SACT,OAAO,KACP,OAAO,WACP,QACA,gBAAgB,GAChB,aAAc,EACd,YACA,GAAG,KACiB,CACpB,IAAM,EAAc,GAAS,EAAQ,EAC/B,EAAY,OAAO,GAAU,WAAa,EAAM,CAAE,QAAO,eAAc,CAAC,EAAI,EAC5E,EAAQ,CAAE,GAAG,EAAQ,aAAc,CAAU,EAEnD,OACE,EAAA,EAAA,IAAA,CAAC,OAAD,CACE,uBAAqB,QACrB,KAAK,SACL,UAAW,EAAO,CAChB,SACA,OACA,OACA,WACF,CAAC,EACD,GAAI,WAEH,EAAc,GAAG,EAAc,GAAK,CACjC,CAAA,CAEV,EAEA,EAAU,YAAc,YClDxB,IAAa,GAAS,CAAE,WAAU,GAAG,KACb,GAKpB,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gCAAf,CACG,GACD,EAAA,EAAA,IAAA,CAAC,EAAD,CAAW,GAAI,CAAQ,CAAA,CACpB,KALL,EAAA,EAAA,IAAA,CAAC,EAAD,CAAW,KAAK,aAAa,GAAI,CAAQ,CAAA,EAS7C,EAAM,YAAc"}

package/dist/badge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: [\n          'text-small-highlight',\n          'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]',\n          'empty:size-sz-8',\n        ],\n        md: ['text-caption-highlight', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":";;;;AAGA,IAAa,IAAS,EACpB;CAAC;CAAqB;CAAa;CAAe;CAA2B,EAC7E;CACE,UAAU;EAKR,QAAQ,EAGN;GACA,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,QAAQ;IAAC;IAAa;IAAkB;IAAiB;GACzD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,OAAO;IAAC;IAAY;IAAiB;IAAiB;GACtD,QAAQ;IAAC;IAAY;IAAiB;IAAiB;GACvD,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC7D,CAAC;EAKF,MAAM,EAAmC;GACvC,IAAI;IACF;IACA;IACA;IACD;GACD,IAAI;IAAC;IAA0B;IAAe;IAAmB;GAClE,CAAC;EAKF,MAAM;GACJ,UAAU,CAAC,8BAA8B,mCAAmC;GAC5E,YAAY,EAAE;GACf;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,MAAM;EACP;CACF,CACF,ECtBY,KAAa,EACxB,YAAS,UACT,UAAO,MACP,UAAO,YACP,UACA,mBAAgB,IAChB,cAAc,GACd,cACA,GAAG,QACiB;CACpB,IAAM,IAAc,KAAS,IAAQ,GAC/B,IAAY,OAAO,KAAU,aAAa,EAAM;EAAE;EAAO;EAAe,CAAC,GAAG,GAC5E,IAAQ;EAAE,GAAG;EAAQ,cAAc;EAAW;AAEpD,QACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,MAAK;EACL,WAAW,EAAO;GAChB;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;YAEH,IAAc,GAAG,EAAc,KAAK;EAChC,CAAA;;AAIX,EAAU,cAAc;;;AClDxB,IAAa,KAAS,EAAE,aAAU,GAAG,QACb,IAKpB,kBAAC,OAAD;CAAK,WAAU;WAAf,CACG,GACD,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,CACpB;KALN,kBAAC,GAAD;CAAW,MAAK;CAAa,GAAI;CAAS,CAAA;AAS9C,EAAM,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: [\n          'text-small-highlight',\n          'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]',\n          'empty:size-sz-8',\n        ],\n        md: ['text-caption-highlight', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":";;;;AAGA,IAAa,IAAS,EACpB;CAAC;CAAqB;CAAa;CAAe;AAA0B,GAC5E;CACE,UAAU;EAKR,QAAQ,EAGN;GACA,MAAM;IAAC;IAAW;IAAgB;GAAgB;GAClD,SAAS;IAAC;IAAc;IAAmB;GAAgB;GAC3D,QAAQ;IAAC;IAAa;IAAkB;GAAgB;GACxD,SAAS;IAAC;IAAc;IAAmB;GAAgB;GAC3D,OAAO;IAAC;IAAY;IAAiB;GAAgB;GACrD,QAAQ;IAAC;IAAY;IAAiB;GAAgB;GACtD,MAAM;IAAC;IAAW;IAAgB;GAAgB;GAClD,SAAS;IAAC;IAAc;IAAmB;GAAgB;GAC3D,SAAS;IAAC;IAAc;IAAmB;GAAgB;EAC7D,CAAC;EAKD,MAAM,EAAmC;GACvC,IAAI;IACF;IACA;IACA;GACF;GACA,IAAI;IAAC;IAA0B;IAAe;GAAkB;EAClE,CAAC;EAKD,MAAM;GACJ,UAAU,CAAC,8BAA8B,kCAAkC;GAC3E,YAAY,CAAC;EACf;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,MAAM;CACR;AACF,CACF,GCtBa,KAAa,EACxB,YAAS,UACT,UAAO,MACP,UAAO,YACP,UACA,mBAAgB,IAChB,cAAc,GACd,cACA,GAAG,QACiB;CACpB,IAAM,IAAc,KAAS,IAAQ,GAC/B,IAAY,OAAO,KAAU,aAAa,EAAM;EAAE;EAAO;CAAc,CAAC,IAAI,GAC5E,IAAQ;EAAE,GAAG;EAAQ,cAAc;CAAU;CAEnD,OACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,MAAK;EACL,WAAW,EAAO;GAChB;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;YAEH,IAAc,GAAG,EAAc,KAAK;CACjC,CAAA;AAEV;AAEA,EAAU,cAAc;;;AClDxB,IAAa,KAAS,EAAE,aAAU,GAAG,QACb,IAKpB,kBAAC,OAAD;CAAK,WAAU;WAAf,CACG,GACD,kBAAC,GAAD,EAAW,GAAI,EAAQ,CAAA,CACpB;KALL,kBAAC,GAAD;CAAW,MAAK;CAAa,GAAI;AAAQ,CAAA;AAS7C,EAAM,cAAc"}

package/dist/breadcrumb/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(`../text-link/index.js`);let r=require(`class-variance-authority`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/ArrowVerticalRight`);var o=({className:e,"aria-label":t,ref:n,...a})=>(0,i.jsx)(`nav`,{"data-spark-component":`breadcrumb`,ref:n,"aria-label":t,className:(0,r.cx)(`text-caption text-neutral`,e),children:(0,i.jsx)(`ol`,{className:(0,r.cx)(`gap-sm flex flex-wrap items-center break-words`),...a})});o.displayName=`Breadcrumb.Breadcrumb`;var s=({asChild:t=!1,className:n,children:a,...o})=>(0,i.jsx)(t?e.Slot:`span`,{"data-spark-component":`breadcrumb-current-page`,role:`link`,"aria-disabled":!0,"aria-current":`page`,className:(0,r.cx)(`inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current`,n),...o,children:a});s.displayName=`Breadcrumb.CurrentPage`;var c=({className:e,...t})=>(0,i.jsx)(`li`,{"data-spark-component":`breadcrumb-item`,className:(0,r.cx)(`min-w-none gap-sm inline-flex items-center`,e),...t});c.displayName=`Breadcrumb.Item`;var l=({asChild:t=!1,className:a,bold:o=!0,intent:s=`current`,underline:c=!0,href:l,ref:u,...d})=>(0,i.jsx)(t?e.Slot:n.TextLink,{"data-spark-component":`breadcrumb-link`,href:l,ref:u,className:(0,r.cx)(`inline! overflow-hidden text-ellipsis whitespace-nowrap`,a),bold:o,intent:s,underline:c,...d});l.displayName=`Breadcrumb.Link`;var u=({asChild:n=!1,className:o,children:s,ref:c,...l})=>(0,i.jsx)(n?e.Slot:`li`,{role:`presentation`,"aria-hidden":!0,"data-spark-component":`breadcrumb-separator`,ref:c,className:(0,r.cx)(`gap-sm inline-flex items-center`,o),...l,children:s??(0,i.jsx)(t.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});u.displayName=`Breadcrumb.Separator`;var d=Object.assign(o,{Item:c,Link:l,CurrentPage:s,Separator:u});d.displayName=`Breadcrumb`,c.displayName=`Breadcrumb.Item`,l.displayName=`Breadcrumb.Link`,s.displayName=`Breadcrumb.CurrentPage`,u.displayName=`Breadcrumb.Separator`,exports.Breadcrumb=d;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../icon-DY4l9nsc.js"),n=require("../text-link/index.js");let r=require("class-variance-authority"),i=require("react/jsx-runtime"),a=require("@spark-ui/icons/ArrowVerticalRight");var o=({className:e,"aria-label":t,ref:n,...a})=>(0,i.jsx)(`nav`,{"data-spark-component":`breadcrumb`,ref:n,"aria-label":t,className:(0,r.cx)(`text-caption text-neutral`,e),children:(0,i.jsx)(`ol`,{className:(0,r.cx)(`gap-sm flex flex-wrap items-center break-words`),...a})});o.displayName=`Breadcrumb.Breadcrumb`;var s=({asChild:t=!1,className:n,children:a,...o})=>(0,i.jsx)(t?e.Slot:`span`,{"data-spark-component":`breadcrumb-current-page`,role:`link`,"aria-disabled":!0,"aria-current":`page`,className:(0,r.cx)(`inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current`,n),...o,children:a});s.displayName=`Breadcrumb.CurrentPage`;var c=({className:e,...t})=>(0,i.jsx)(`li`,{"data-spark-component":`breadcrumb-item`,className:(0,r.cx)(`min-w-none gap-sm inline-flex items-center`,e),...t});c.displayName=`Breadcrumb.Item`;var l=({asChild:t=!1,className:a,bold:o=!0,intent:s=`current`,underline:c=!0,href:l,ref:u,...d})=>(0,i.jsx)(t?e.Slot:n.TextLink,{"data-spark-component":`breadcrumb-link`,href:l,ref:u,className:(0,r.cx)(`inline! overflow-hidden text-ellipsis whitespace-nowrap`,a),bold:o,intent:s,underline:c,...d});l.displayName=`Breadcrumb.Link`;var u=({asChild:n=!1,className:o,children:s,ref:c,...l})=>(0,i.jsx)(n?e.Slot:`li`,{role:`presentation`,"aria-hidden":!0,"data-spark-component":`breadcrumb-separator`,ref:c,className:(0,r.cx)(`gap-sm inline-flex items-center`,o),...l,children:s??(0,i.jsx)(t.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});u.displayName=`Breadcrumb.Separator`;var d=Object.assign(o,{Item:c,Link:l,CurrentPage:s,Separator:u});d.displayName=`Breadcrumb`,c.displayName=`Breadcrumb.Item`,l.displayName=`Breadcrumb.Link`,s.displayName=`Breadcrumb.CurrentPage`,u.displayName=`Breadcrumb.Separator`,exports.Breadcrumb=d;
 //# sourceMappingURL=index.js.map

package/dist/breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * Indicates the current page in the breadcrumb trail. Renders a <span> element.\n */\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A breadcrumb item container. Renders a <li> element.\n */\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * A navigable breadcrumb link. Renders an <a> element.\n */\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A visual separator between breadcrumb items. Renders a <li> element.\n */\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":"oUASA,IAAa,GAAc,CACzB,YACA,aAAc,EACd,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,aAChB,MACL,aAAY,EACZ,WAAA,EAAA,EAAA,IAAc,4BAA6B,EAAU,WAErD,EAAA,EAAA,KAAC,KAAD,CAAI,WAAA,EAAA,EAAA,IAAc,iDAAiD,CAAE,GAAI,EAAQ,CAAA,CAC7E,CAAA,CAIV,EAAW,YAAc,wBCZzB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,OAGjC,CACE,uBAAqB,0BACrB,KAAK,OACL,gBAAA,GACA,eAAa,OACb,WAAA,EAAA,EAAA,IACE,mFACA,EACD,CACD,GAAI,EAEH,WACS,CAAA,CAIhB,EAAY,YAAc,yBC7B1B,IAAa,GAAQ,CAAE,YAAW,GAAG,MAEjC,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,kBACrB,WAAA,EAAA,EAAA,IAAc,6CAA8C,EAAU,CACtE,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBCLnB,IAAa,GAAQ,CACnB,UAAU,GACV,YACA,OAAO,GACP,SAAS,UACT,YAAY,GACZ,OACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,EAAA,SAGjC,CACE,uBAAqB,kBACf,OACD,MACL,WAAA,EAAA,EAAA,IAAc,0DAA2D,EAAU,CAC7E,OACE,SACG,YACX,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBC1BnB,IAAa,GAAa,CACxB,UAAU,GACV,YACA,WACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACE,KAAK,eACL,cAAA,GACA,uBAAqB,uBAChB,MACL,WAAA,EAAA,EAAA,IAAc,kCAAmC,EAAU,CAC3D,GAAI,WAEH,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACjB,CAAA,CAEC,CAAA,CAIhB,EAAU,YAAc,uBClCxB,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,OACA,cACA,YACD,CAAC,CAEF,EAAW,YAAc,aACzB,EAAK,YAAc,kBACnB,EAAK,YAAc,kBACnB,EAAY,YAAc,yBAC1B,EAAU,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * Indicates the current page in the breadcrumb trail. Renders a <span> element.\n */\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A breadcrumb item container. Renders a <li> element.\n */\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * A navigable breadcrumb link. Renders an <a> element.\n */\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A visual separator between breadcrumb items. Renders a <li> element.\n */\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":"oSASA,IAAa,GAAc,CACzB,YACA,aAAc,EACd,MACA,GAAG,MAGD,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,uBAAqB,aAChB,MACL,aAAY,EACZ,WAAA,EAAA,EAAA,GAAA,CAAc,4BAA6B,CAAS,YAEpD,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,WAAA,EAAA,EAAA,GAAA,CAAc,gDAAgD,EAAG,GAAI,CAAO,CAAA,CAC7E,CAAA,EAIT,EAAW,YAAc,wBCZzB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,GAAG,MAKD,EAAA,EAAA,IAAA,CAHgB,EAAU,EAAA,KAAO,OAGjC,CACE,uBAAqB,0BACrB,KAAK,OACL,gBAAA,GACA,eAAa,OACb,WAAA,EAAA,EAAA,GAAA,CACE,mFACA,CACF,EACA,GAAI,EAEH,UACQ,CAAA,EAIf,EAAY,YAAc,yBC7B1B,IAAa,GAAQ,CAAE,YAAW,GAAG,MAEjC,EAAA,EAAA,IAAA,CAAC,KAAD,CACE,uBAAqB,kBACrB,WAAA,EAAA,EAAA,GAAA,CAAc,6CAA8C,CAAS,EACrE,GAAI,CACL,CAAA,EAIL,EAAK,YAAc,kBCLnB,IAAa,GAAQ,CACnB,UAAU,GACV,YACA,OAAO,GACP,SAAS,UACT,YAAY,GACZ,OACA,MACA,GAAG,MAKD,EAAA,EAAA,IAAA,CAHgB,EAAU,EAAA,KAAO,EAAA,SAGjC,CACE,uBAAqB,kBACf,OACD,MACL,WAAA,EAAA,EAAA,GAAA,CAAc,0DAA2D,CAAS,EAC5E,OACE,SACG,YACX,GAAI,CACL,CAAA,EAIL,EAAK,YAAc,kBC1BnB,IAAa,GAAa,CACxB,UAAU,GACV,YACA,WACA,MACA,GAAG,MAKD,EAAA,EAAA,IAAA,CAHgB,EAAU,EAAA,KAAO,KAGjC,CACE,KAAK,eACL,cAAA,GACA,uBAAqB,uBAChB,MACL,WAAA,EAAA,EAAA,GAAA,CAAc,kCAAmC,CAAS,EAC1D,GAAI,WAEH,IACC,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAAC,EAAA,mBAAD,CAAqB,CAAA,CACjB,CAAA,CAEC,CAAA,EAIf,EAAU,YAAc,uBClCxB,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,OACA,cACA,WACF,CAAC,EAED,EAAW,YAAc,aACzB,EAAK,YAAc,kBACnB,EAAK,YAAc,kBACnB,EAAY,YAAc,yBAC1B,EAAU,YAAc"}

package/dist/breadcrumb/index.mjs

@@ -1,5 +1,5 @@
 import { Slot as e } from "../slot/index.mjs";
-import { t } from "../icon-D05Uqh8_.mjs";
+import { t } from "../icon-Bs-39J-H.mjs";
 import { TextLink as n } from "../text-link/index.mjs";
 import { cx as r } from "class-variance-authority";
 import { jsx as i } from "react/jsx-runtime";

package/dist/breadcrumb/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * Indicates the current page in the breadcrumb trail. Renders a <span> element.\n */\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A breadcrumb item container. Renders a <li> element.\n */\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * A navigable breadcrumb link. Renders an <a> element.\n */\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A visual separator between breadcrumb items. Renders a <li> element.\n */\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":";;;;;;;AASA,IAAa,KAAc,EACzB,cACA,cAAc,GACd,QACA,GAAG,QAGD,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,cAAY;CACZ,WAAW,EAAG,6BAA6B,EAAU;WAErD,kBAAC,MAAD;EAAI,WAAW,EAAG,iDAAiD;EAAE,GAAI;EAAQ,CAAA;CAC7E,CAAA;AAIV,EAAW,cAAc;;;ACZzB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,QAGjC;CACE,wBAAqB;CACrB,MAAK;CACL,iBAAA;CACA,gBAAa;CACb,WAAW,EACT,oFACA,EACD;CACD,GAAI;CAEH;CACS,CAAA;AAIhB,EAAY,cAAc;;;AC7B1B,IAAa,KAAQ,EAAE,cAAW,GAAG,QAEjC,kBAAC,MAAD;CACE,wBAAqB;CACrB,WAAW,EAAG,8CAA8C,EAAU;CACtE,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;ACLnB,IAAa,KAAQ,EACnB,aAAU,IACV,cACA,UAAO,IACP,YAAS,WACT,eAAY,IACZ,SACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,GAGjC;CACE,wBAAqB;CACf;CACD;CACL,WAAW,EAAG,2DAA2D,EAAU;CAC7E;CACE;CACG;CACX,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;AC1BnB,IAAa,KAAa,EACxB,aAAU,IACV,cACA,aACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,MAGjC;CACE,MAAK;CACL,eAAA;CACA,wBAAqB;CAChB;CACL,WAAW,EAAG,mCAAmC,EAAU;CAC3D,GAAI;WAEH,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAsB,CAAA,EACjB,CAAA;CAEC,CAAA;AAIhB,EAAU,cAAc;;;AClCxB,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAW,cAAc,cACzB,EAAK,cAAc,mBACnB,EAAK,cAAc,mBACnB,EAAY,cAAc,0BAC1B,EAAU,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n  className?: string\n  ['aria-label']: string\n  ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n  className,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: BreadcrumbProps) => {\n  return (\n    <nav\n      data-spark-component=\"breadcrumb\"\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cx('text-caption text-neutral', className)}\n    >\n      <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n    </nav>\n  )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * Indicates the current page in the breadcrumb trail. Renders a <span> element.\n */\nexport const CurrentPage = ({\n  asChild = false,\n  className,\n  children,\n  ...rest\n}: CurrentPageProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-current-page\"\n      role=\"link\"\n      aria-disabled\n      aria-current=\"page\"\n      className={cx(\n        'inline! overflow-hidden font-medium text-ellipsis whitespace-nowrap text-current',\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A breadcrumb item container. Renders a <li> element.\n */\nexport const Item = ({ className, ...rest }: ItemProps) => {\n  return (\n    <li\n      data-spark-component=\"breadcrumb-item\"\n      className={cx('min-w-none gap-sm inline-flex items-center', className)}\n      {...rest}\n    />\n  )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n  asChild?: boolean\n  className?: string\n  href?: string\n  ref?: Ref<HTMLAnchorElement>\n}\n\n/**\n * A navigable breadcrumb link. Renders an <a> element.\n */\nexport const Link = ({\n  asChild = false,\n  className,\n  bold = true,\n  intent = 'current',\n  underline = true,\n  href,\n  ref,\n  ...rest\n}: LinkProps) => {\n  const Component = asChild ? Slot : TextLink\n\n  return (\n    <Component\n      data-spark-component=\"breadcrumb-link\"\n      href={href}\n      ref={ref}\n      className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n      bold={bold}\n      intent={intent}\n      underline={underline}\n      {...rest}\n    />\n  )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n  asChild?: boolean\n  className?: string\n  ref?: Ref<HTMLLIElement>\n}\n\n/**\n * A visual separator between breadcrumb items. Renders a <li> element.\n */\nexport const Separator = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...rest\n}: SeparatorProps) => {\n  const Component = asChild ? Slot : 'li'\n\n  return (\n    <Component\n      role=\"presentation\"\n      aria-hidden\n      data-spark-component=\"breadcrumb-separator\"\n      ref={ref}\n      className={cx('gap-sm inline-flex items-center', className)}\n      {...rest}\n    >\n      {children ?? (\n        <Icon>\n          <ArrowVerticalRight />\n        </Icon>\n      )}\n    </Component>\n  )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n  Item: typeof Item\n  Link: typeof Link\n  CurrentPage: typeof CurrentPage\n  Separator: typeof Separator\n} = Object.assign(Root, {\n  Item,\n  Link,\n  CurrentPage,\n  Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":";;;;;;;AASA,IAAa,KAAc,EACzB,cACA,cAAc,GACd,QACA,GAAG,QAGD,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,cAAY;CACZ,WAAW,EAAG,6BAA6B,CAAS;WAEpD,kBAAC,MAAD;EAAI,WAAW,EAAG,gDAAgD;EAAG,GAAI;CAAO,CAAA;AAC7E,CAAA;AAIT,EAAW,cAAc;;;ACZzB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,QAGjC;CACE,wBAAqB;CACrB,MAAK;CACL,iBAAA;CACA,gBAAa;CACb,WAAW,EACT,oFACA,CACF;CACA,GAAI;CAEH;AACQ,CAAA;AAIf,EAAY,cAAc;;;AC7B1B,IAAa,KAAQ,EAAE,cAAW,GAAG,QAEjC,kBAAC,MAAD;CACE,wBAAqB;CACrB,WAAW,EAAG,8CAA8C,CAAS;CACrE,GAAI;AACL,CAAA;AAIL,EAAK,cAAc;;;ACLnB,IAAa,KAAQ,EACnB,aAAU,IACV,cACA,UAAO,IACP,YAAS,WACT,eAAY,IACZ,SACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,GAGjC;CACE,wBAAqB;CACf;CACD;CACL,WAAW,EAAG,2DAA2D,CAAS;CAC5E;CACE;CACG;CACX,GAAI;AACL,CAAA;AAIL,EAAK,cAAc;;;AC1BnB,IAAa,KAAa,EACxB,aAAU,IACV,cACA,aACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,MAGjC;CACE,MAAK;CACL,eAAA;CACA,wBAAqB;CAChB;CACL,WAAW,EAAG,mCAAmC,CAAS;CAC1D,GAAI;WAEH,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,CAAqB,CAAA,EACjB,CAAA;AAEC,CAAA;AAIf,EAAU,cAAc;;;AClCxB,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;AACF,CAAC;AAED,EAAW,cAAc,cACzB,EAAK,cAAc,mBACnB,EAAK,cAAc,mBACnB,EAAY,cAAc,0BAC1B,EAAU,cAAc"}

package/dist/button/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../button-jlscsCw0.js`);exports.Button=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../button-pb2JbL37.js");exports.Button=e.t;

package/dist/button/index.mjs

@@ -1,2 +1,2 @@
-import { t as e } from "../button-CzHtbgj7.mjs";
+import { t as e } from "../button-BeLA-Evk.mjs";
 export { e as Button };

package/dist/{button-CzHtbgj7.mjs → button-BeLA-Evk.mjs}

@@ -1,5 +1,5 @@
 import { Slot as e, wrapPolymorphicSlot as t } from "./slot/index.mjs";
-import { t as n } from "./spinner-DULLiM6a.mjs";
+import { t as n } from "./spinner-TfGcjNm3.mjs";
 import { cva as r, cx as i } from "class-variance-authority";
 import { useMemo as a } from "react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -698,4 +698,4 @@ v.displayName = "Button";
 //#endregion
 export { g as n, v as t };
 
-//# sourceMappingURL=button-CzHtbgj7.mjs.map
+//# sourceMappingURL=button-BeLA-Evk.mjs.map

package/dist/{button-CzHtbgj7.mjs.map → button-BeLA-Evk.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"button-CzHtbgj7.mjs","names":[],"sources":["../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // AI\n  {\n    intent: 'ai',\n    design: 'filled',\n    class: tw([\n      'bg-ai',\n      'text-on-ai',\n      'hover:bg-ai-hovered',\n      'enabled:active:bg-ai-hovered',\n      'focus-visible:bg-ai-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'ghost',\n    class: tw([\n      'text-on-ai-container',\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n      'text-ai',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'tinted',\n    class: tw([\n      'bg-ai-container',\n      'text-on-ai-container',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'contrast',\n    class: tw([\n      'text-on-ai-container bg-surface',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the button.\n       *\n       * - `filled`: Button will be plain.\n       *\n       * - `outlined`: Button will be transparent with an outline.\n       *\n       * - `tinted`: Button will be filled but using a lighter color scheme.\n       *\n       * - `ghost`: Button will look like a link. No borders, plain text.\n       *\n       * - `contrast`: Button will be surface filled. No borders, plain text.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'ai',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        ai: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-button'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n   */\n  loadingText?: string\n  /**\n   * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n   * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n   * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n   */\n  ariaDisabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  ariaDisabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'rounded',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n  const useNativeDisabled = !!disabled && !ariaDisabled\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(key => {\n        result[key] = (e: React.SyntheticEvent) => {\n          // Allow Tab to move focus away from the button\n          if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n          /*\n            Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n            Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n          */\n          e.preventDefault()\n        }\n      })\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })}\n      disabled={useNativeDisabled}\n      aria-disabled={shouldNotInteract ? true : undefined}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n"],"mappings":";;;;;;;AAEA,IAAa,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,EChIY,IAAgB;CAC3B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,EC/GY,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,EC/GY,IAAiB;CAC5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,EC1HY,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,ECtGY,IAAe,EAC1B;CACE;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EAeR,QAAQ,EAA8E;GACpF,QAAQ,EAAE;GACV,UAAU;IAAC;IAAkB;IAAa;IAAiB;GAC3D,QAAQ,EAAE;GACV,OAAO,CAAC,2CAA2C;GACnD,UAAU,EAAE;GACb,CAAC;EACF,WAAW,EACT,MAAM,CAAC,YAAY,EACpB;EAID,QAAQ,EAeN;GACA,MAAM,EAAE;GACR,SAAS,EAAE;GACX,QAAQ,EAAE;GACV,IAAI,EAAE;GACN,SAAS,EAAE;GACX,OAAO,EAAE;GACT,QAAQ,EAAE;GACV,MAAM,EAAE;GACR,SAAS,EAAE;GACX,SAAS,EAAE;GACX,gBAAgB,EAAE;GACnB,CAAC;EAIF,MAAM,EAAyC;GAC7C,IAAI,CAAC,eAAe,UAAU;GAC9B,IAAI,CAAC,eAAe,UAAU;GAC9B,IAAI,CAAC,eAAe,UAAU;GAC/B,CAAC;EAIF,OAAO,EAAqD;GAC1D,SAAS,CAAC,iBAAiB;GAC3B,QAAQ,CAAC,YAAY;GACrB,MAAM,CAAC,eAAe;GACvB,CAAC;EAIF,UAAU;GACR,MAAM,CAAC,sBAAsB,gBAAgB;GAC7C,OAAO,CAAC,iBAAiB;GAC1B;EACF;CACD,kBAAkB;EAChB,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACJ;CACD,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,OAAO;EACR;CACF,CACF,EC1EK,IAAoD;CACxD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAKY,KAAU,EACrB,aACA,YAAS,UACT,cAAW,IACX,kBAAe,IACf,YAAS,QACT,eAAY,IACZ,iBACA,gBACA,WAAQ,WACR,UAAO,MACP,YACA,cACA,eAAY,IACZ,QACA,GAAG,QACc;CACjB,IAAM,IAAY,IAAU,IAAO,UAE7B,IAAoB,CAAC,CAAC,KAAY,CAAC,CAAC,KAAgB,GACpD,IAAoB,CAAC,CAAC,KAAY,CAAC,GAEnC,IAAwB,QAAc;EAC1C,IAAM,IAAwF,EAAE;AAgBhG,SAdI,KACF,EAAqB,SAAQ,MAAO;AAClC,KAAO,MAAQ,MAA4B;AAErC,MAAE,SAAS,aAAc,EAA0B,QAAQ,SAK/D,EAAE,gBAAgB;;IAEpB,EAGG;IACN,CAAC,EAAkB,CAAC,EAEjB,IAAe;EACnB,MAAM;EACN,WAAW,IAAc,iBAAiB;EAC1C,GAAI,KAAgB,EAAE,cAAc,GAAc;EACnD;AAED,QACE,kBAAC,GAAD;EACE,wBAAqB;EACrB,GAAK,MAAc,YAAY,EAAE,MAAM,UAAU;EAC5C;EACL,WAAW,EAAa;GACtB;GACA;GACA,UAAU;GACV;GACA;GACA;GACA;GACD,CAAC;EACF,UAAU;EACV,iBAAe,IAAoB,KAAO,KAAA;EAC1C,aAAW;EACX,aAAW,IAAY,cAAc;EACrC,GAAI;EACJ,GAAI;YAEH,EAAoB,GAAS,IAAU,MACtC,IACE,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD,EAAS,GAAI,GAAgB,CAAA;GAC5B;GAED,kBAAC,OAAD;IACE,eAAA;IACA,WAAW,EAAG,UAAU,IAAc,WAAW,wBAAwB;cAExE;IACG,CAAA;GACL,EAAA,CAAA,GAEH,EAEH;EACS,CAAA;;AAIhB,EAAO,cAAc"}
+{"version":3,"file":"button-BeLA-Evk.mjs","names":[],"sources":["../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // AI\n  {\n    intent: 'ai',\n    design: 'filled',\n    class: tw([\n      'bg-ai',\n      'text-on-ai',\n      'hover:bg-ai-hovered',\n      'enabled:active:bg-ai-hovered',\n      'focus-visible:bg-ai-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'ghost',\n    class: tw([\n      'text-on-ai-container',\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n      'text-ai',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'tinted',\n    class: tw([\n      'bg-ai-container',\n      'text-on-ai-container',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'contrast',\n    class: tw([\n      'text-on-ai-container bg-surface',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the button.\n       *\n       * - `filled`: Button will be plain.\n       *\n       * - `outlined`: Button will be transparent with an outline.\n       *\n       * - `tinted`: Button will be filled but using a lighter color scheme.\n       *\n       * - `ghost`: Button will look like a link. No borders, plain text.\n       *\n       * - `contrast`: Button will be surface filled. No borders, plain text.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'ai',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        ai: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-button'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n   */\n  loadingText?: string\n  /**\n   * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n   * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n   * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n   */\n  ariaDisabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  ariaDisabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'rounded',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n  const useNativeDisabled = !!disabled && !ariaDisabled\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(key => {\n        result[key] = (e: React.SyntheticEvent) => {\n          // Allow Tab to move focus away from the button\n          if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n          /*\n            Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n            Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n          */\n          e.preventDefault()\n        }\n      })\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })}\n      disabled={useNativeDisabled}\n      aria-disabled={shouldNotInteract ? true : undefined}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n"],"mappings":";;;;;;;AAEA,IAAa,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CAEA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GChIa,IAAgB;CAC3B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC/Ga,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC/Ga,IAAiB;CAC5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;EACF,CAAC;CACH;AACF,GC1Ha,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;EACF,CAAC;CACH;CACA;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG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"}

package/dist/button-pb2JbL37.js

@@ -0,0 +1,2 @@
+const e=require("./slot/index.js"),t=require("./spinner-CmPypfJR.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/internal-utils");var o=[{intent:`main`,design:`filled`,class:(0,a.tw)([`bg-main`,`text-on-main`,`hover:bg-main-hovered`,`enabled:active:bg-main-hovered`,`focus-visible:bg-main-hovered`])},{intent:`support`,design:`filled`,class:(0,a.tw)([`bg-support`,`text-on-support`,`hover:bg-support-hovered`,`enabled:active:bg-support-hovered`,`focus-visible:bg-support-hovered`])},{intent:`accent`,design:`filled`,class:(0,a.tw)([`bg-accent`,`text-on-accent`,`hover:bg-accent-hovered`,`enabled:active:bg-accent-hovered`,`focus-visible:bg-accent-hovered`])},{intent:`ai`,design:`filled`,class:(0,a.tw)([`bg-ai`,`text-on-ai`,`hover:bg-ai-hovered`,`enabled:active:bg-ai-hovered`,`focus-visible:bg-ai-hovered`])},{intent:`success`,design:`filled`,class:(0,a.tw)([`bg-success`,`text-on-success`,`hover:bg-success-hovered`,`enabled:active:bg-success-hovered`,`focus-visible:bg-success-hovered`])},{intent:`alert`,design:`filled`,class:(0,a.tw)([`bg-alert`,`text-on-alert`,`hover:bg-alert-hovered`,`enabled:active:bg-alert-hovered`,`focus-visible:bg-alert-hovered`])},{intent:`danger`,design:`filled`,class:(0,a.tw)([`text-on-error bg-error`,`hover:bg-error-hovered enabled:active:bg-error-hovered`,`focus-visible:bg-error-hovered`])},{intent:`info`,design:`filled`,class:(0,a.tw)([`text-on-error bg-info`,`hover:bg-info-hovered enabled:active:bg-info-hovered`,`focus-visible:bg-info-hovered`])},{intent:`neutral`,design:`filled`,class:(0,a.tw)([`bg-neutral`,`text-on-neutral`,`hover:bg-neutral-hovered`,`enabled:active:bg-neutral-hovered`,`focus-visible:bg-neutral-hovered`])},{intent:`surface`,design:`filled`,class:(0,a.tw)([`bg-surface`,`text-on-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`filled`,class:(0,a.tw)([`bg-surface-inverse`,`text-on-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],s=[{intent:`main`,design:`ghost`,class:(0,a.tw)([`text-on-main-container`,`hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`])},{intent:`support`,design:`ghost`,class:(0,a.tw)([`text-on-support-container`,`hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`])},{intent:`accent`,design:`ghost`,class:(0,a.tw)([`text-on-accent-container`,`hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`])},{intent:`ai`,design:`ghost`,class:(0,a.tw)([`text-on-ai-container`,`hover:bg-ai/dim-5`,`enabled:active:bg-ai/dim-5`,`focus-visible:bg-ai/dim-5`])},{intent:`success`,design:`ghost`,class:(0,a.tw)([`text-on-success-container`,`hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`])},{intent:`alert`,design:`ghost`,class:(0,a.tw)([`text-on-alert-container`,`hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`])},{intent:`danger`,design:`ghost`,class:(0,a.tw)([`text-on-error-container`,`hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`])},{intent:`info`,design:`ghost`,class:(0,a.tw)([`text-on-info-container`,`hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`])},{intent:`neutral`,design:`ghost`,class:(0,a.tw)([`text-on-neutral-container`,`hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`])},{intent:`surface`,design:`ghost`,class:(0,a.tw)([`text-surface`,`hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`])},{intent:`surfaceInverse`,design:`ghost`,class:(0,a.tw)([`text-surface-inverse`,`hover:bg-surface-inverse/dim-5`,`enabled:active:bg-surface-inverse/dim-5`,`focus-visible:bg-surface-inverse/dim-5`])}],c=[{intent:`main`,design:`outlined`,class:(0,a.tw)([`hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`text-main`])},{intent:`support`,design:`outlined`,class:(0,a.tw)([`hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`text-support`])},{intent:`accent`,design:`outlined`,class:(0,a.tw)([`hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`text-accent`])},{intent:`ai`,design:`outlined`,class:(0,a.tw)([`hover:bg-ai/dim-5`,`enabled:active:bg-ai/dim-5`,`focus-visible:bg-ai/dim-5`,`text-ai`])},{intent:`success`,design:`outlined`,class:(0,a.tw)([`hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`text-success`])},{intent:`alert`,design:`outlined`,class:(0,a.tw)([`hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`text-alert`])},{intent:`danger`,design:`outlined`,class:(0,a.tw)([`hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`text-error`])},{intent:`info`,design:`outlined`,class:(0,a.tw)([`hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`text-info`])},{intent:`neutral`,design:`outlined`,class:(0,a.tw)([`hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`text-neutral`])},{intent:`surface`,design:`outlined`,class:(0,a.tw)([`hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`text-surface`])},{intent:`surfaceInverse`,design:`outlined`,class:(0,a.tw)([`hover:bg-surface-inverse/dim-5`,`enabled:active:bg-surface-inverse/dim-5`,`focus-visible:bg-surface-inverse/dim-5`,`text-surface-inverse`])}],l=[{intent:`main`,design:`tinted`,class:(0,a.tw)([`bg-main-container`,`text-on-main-container`,`hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`])},{intent:`support`,design:`tinted`,class:(0,a.tw)([`bg-support-container`,`text-on-support-container`,`hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`])},{intent:`accent`,design:`tinted`,class:(0,a.tw)([`bg-accent-container`,`text-on-accent-container`,`hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`])},{intent:`ai`,design:`tinted`,class:(0,a.tw)([`bg-ai-container`,`text-on-ai-container`,`hover:bg-ai-container-hovered`,`enabled:active:bg-ai-container-hovered`,`focus-visible:bg-ai-container-hovered`])},{intent:`success`,design:`tinted`,class:(0,a.tw)([`bg-success-container`,`text-on-success-container`,`hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`])},{intent:`alert`,design:`tinted`,class:(0,a.tw)([`bg-alert-container`,`text-on-alert-container`,`hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`])},{intent:`danger`,design:`tinted`,class:(0,a.tw)([`bg-error-container`,`text-on-error-container`,`hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`])},{intent:`info`,design:`tinted`,class:(0,a.tw)([`bg-info-container`,`text-on-info-container`,`hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`])},{intent:`neutral`,design:`tinted`,class:(0,a.tw)([`bg-neutral-container`,`text-on-neutral-container`,`hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`])},{intent:`surface`,design:`tinted`,class:(0,a.tw)([`bg-surface`,`text-on-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`tinted`,class:(0,a.tw)([`bg-surface-inverse`,`text-on-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],u=[{intent:`main`,design:`contrast`,class:(0,a.tw)([`text-on-main-contaier bg-surface`,`hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`])},{intent:`support`,design:`contrast`,class:(0,a.tw)([`text-on-support-container bg-surface`,`hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`])},{intent:`accent`,design:`contrast`,class:(0,a.tw)([`text-on-accent-container bg-surface`,`hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`])},{intent:`ai`,design:`contrast`,class:(0,a.tw)([`text-on-ai-container bg-surface`,`hover:bg-ai-container-hovered`,`enabled:active:bg-ai-container-hovered`,`focus-visible:bg-ai-container-hovered`])},{intent:`success`,design:`contrast`,class:(0,a.tw)([`text-on-success-container bg-surface`,`hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`])},{intent:`alert`,design:`contrast`,class:(0,a.tw)([`text-on-alert-container bg-surface`,`hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`])},{intent:`danger`,design:`contrast`,class:(0,a.tw)([`text-on-error-container bg-surface`,`hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`])},{intent:`info`,design:`contrast`,class:(0,a.tw)([`text-on-info-container bg-surface`,`hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`])},{intent:`neutral`,design:`contrast`,class:(0,a.tw)([`text-on-neutral-container bg-surface`,`hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`])},{intent:`surface`,design:`contrast`,class:(0,a.tw)([`text-on-surface bg-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`contrast`,class:(0,a.tw)([`text-on-surface-inverse bg-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],d=(0,n.cva)([`u-shadow-border-transition`,`box-border inline-flex items-center justify-center gap-md whitespace-nowrap`,`default:px-lg`,`text-body-1-highlight`,`focus-visible:u-outline`],{variants:{design:(0,a.makeVariants)({filled:[],outlined:[`bg-transparent`,`border-sm`,`border-current`],tinted:[],ghost:[`default:-mx-md px-md hover:bg-main/dim-5`],contrast:[]}),underline:{true:[`underline`]},intent:(0,a.makeVariants)({main:[],support:[],accent:[],ai:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],surfaceInverse:[]}),size:(0,a.makeVariants)({sm:[`min-w-sz-32`,`h-sz-32`],md:[`min-w-sz-44`,`h-sz-44`],lg:[`min-w-sz-56`,`h-sz-56`]}),shape:(0,a.makeVariants)({rounded:[`rounded-button`],square:[`rounded-0`],pill:[`rounded-full`]}),disabled:{true:[`cursor-not-allowed`,`opacity-dim-3`],false:[`cursor-pointer`]}},compoundVariants:[...o,...c,...l,...s,...u],defaultVariants:{design:`filled`,intent:`main`,size:`md`,shape:`rounded`}}),f=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseOver`,`onMouseOut`,`onKeyDown`,`onKeyPress`,`onKeyUp`,`onSubmit`],p=({children:a,design:o=`filled`,disabled:s=!1,ariaDisabled:c=!1,intent:l=`main`,isLoading:u=!1,loadingLabel:p,loadingText:m,shape:h=`rounded`,size:g=`md`,asChild:_,className:v,underline:y=!1,ref:b,...x})=>{let S=_?e.Slot:`button`,C=!!s||!!c||u,w=!!s&&!c,T=(0,r.useMemo)(()=>{let e={};return C&&f.forEach(t=>{e[t]=e=>{e.type===`keydown`&&e.key===`Tab`||e.preventDefault()}}),e},[C]),E={size:`current`,className:m?`inline-block`:`absolute`,...p&&{"aria-label":p}};return(0,i.jsx)(S,{"data-spark-component":`button`,...S===`button`&&{type:`button`},ref:b,className:d({className:v,design:o,disabled:C,intent:l,shape:h,size:g,underline:y}),disabled:w,"aria-disabled":C?!0:void 0,"aria-busy":u,"aria-live":u?`assertive`:`off`,...x,...T,children:e.wrapPolymorphicSlot(_,a,e=>u?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.t,{...E}),m,(0,i.jsx)(`div`,{"aria-hidden":!0,className:(0,n.cx)(`gap-md`,m?`hidden`:`inline-flex opacity-0`),children:e})]}):e)})};p.displayName=`Button`,Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});
+//# sourceMappingURL=button-pb2JbL37.js.map