@spark-ui/components 13.1.3 → 13.1.4

package/dist/avatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\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.Provider 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.Provider>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\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\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 { 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\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 { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\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 { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\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 { 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\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 font-bold': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { Avatar } from './Avatar'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarUser } from './AvatarUser'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport type { AvatarProps } from './types'\n\nexport interface AvatarComponent\n  extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n}\n\nconst AvatarComponent = Avatar as AvatarComponent\n\nAvatarComponent.Image = AvatarImage\nAvatarComponent.Action = AvatarAction\nAvatarComponent.OnlineBadge = AvatarOnlineBadge\nAvatarComponent.User = AvatarUser\nAvatarComponent.Placeholder = AvatarPlaceholder\nexport { AvatarComponent as Avatar }\n"],"names":["AvatarContext","React","useAvatarContext","context","sizeMap","Avatar","className","size","isOnline","onlineText","username","asChild","children","shape","props","ref","Comp","Slot","contextValue","jsx","cx","AvatarImage","src","onLoad","onError","isVisible","setIsVisible","useState","accessibleName","useEffect","handleLoad","event","handleError","AvatarAction","angle","ariaLabel","IconButton","pixelSize","getBadgePosition","circleSize","angleRad","circleRadius","position","isCustomElement","Icon","PenOutline","AvatarOnlineBadge","badgePosition","AvatarUser","AvatarPlaceholder","firstLetter","AvatarComponent"],"mappings":"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"}
+{"version":3,"sources":["../../src/avatar/Avatar.tsx","../../src/avatar/context.ts","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/index.ts"],"sourcesContent":["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.Provider 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.Provider>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import * as React from 'react'\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 { 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\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 { 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\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 { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\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 { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\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 { 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\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 font-bold': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { Avatar } from './Avatar'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarUser } from './AvatarUser'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport type { AvatarProps } from './types'\n\nexport interface AvatarComponent\n  extends React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>> {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n}\n\nconst AvatarComponent = Avatar as AvatarComponent\n\nAvatarComponent.Image = AvatarImage\nAvatarComponent.Action = AvatarAction\nAvatarComponent.OnlineBadge = AvatarOnlineBadge\nAvatarComponent.User = AvatarUser\nAvatarComponent.Placeholder = AvatarPlaceholder\nexport { AvatarComponent as Avatar }\n"],"mappings":"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","names":["React","cx","jsx","cx","cx","jsx","cx","cx","jsx","cx","cx","jsx","cx","cx","jsx","cx"]}

package/dist/badge/index.d.mts

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, Ref, PropsWithChildren } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const styles: (props?: ({
+    intent?: "main" | "support" | "accent" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "basic" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+    type?: "relative" | "standalone" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StylesProps = VariantProps<typeof styles>;
+
+interface BadgeItemProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {
+    /**
+     * Numeric value used as indicator inside the component.
+     */
+    count?: number;
+    /**
+     * Maximum numeric value to be dispayed as a count value.
+     * @default 99
+     */
+    overflowCount?: number;
+    /**
+     * A custom label for accessibility purposes. It can also be defined as a builder function
+     * to handle dynamic inner data to create a custom label.
+     */
+    'aria-label'?: string | (({ count, overflowCount }: {
+        count?: number;
+        overflowCount?: number;
+    }) => string);
+    /**
+     * Describes the way the component is displayed: relative to another element or just standalone.
+     * @default 'relative'
+     */
+    type?: 'relative' | 'standalone';
+    ref?: Ref<HTMLSpanElement>;
+}
+
+type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {
+    ref?: Ref<HTMLElement>;
+};
+declare const Badge: {
+    ({ children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Badge, type BadgeProps };

package/dist/badge/index.d.ts

@@ -1 +1,47 @@
-export * from './Badge';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes, Ref, PropsWithChildren } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const styles: (props?: ({
+    intent?: "main" | "support" | "accent" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | "basic" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+    type?: "relative" | "standalone" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StylesProps = VariantProps<typeof styles>;
+
+interface BadgeItemProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {
+    /**
+     * Numeric value used as indicator inside the component.
+     */
+    count?: number;
+    /**
+     * Maximum numeric value to be dispayed as a count value.
+     * @default 99
+     */
+    overflowCount?: number;
+    /**
+     * A custom label for accessibility purposes. It can also be defined as a builder function
+     * to handle dynamic inner data to create a custom label.
+     */
+    'aria-label'?: string | (({ count, overflowCount }: {
+        count?: number;
+        overflowCount?: number;
+    }) => string);
+    /**
+     * Describes the way the component is displayed: relative to another element or just standalone.
+     * @default 'relative'
+     */
+    type?: 'relative' | 'standalone';
+    ref?: Ref<HTMLSpanElement>;
+}
+
+type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {
+    ref?: Ref<HTMLElement>;
+};
+declare const Badge: {
+    ({ children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Badge, type BadgeProps };

package/dist/badge/index.js

@@ -1,2 +1,122 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("@spark-ui/internal-utils"),x=require("../index-DnaHaH_0.js"),f=x.cva(["inline-flex h-fit","empty:p-0","text-center font-bold","rounded-full box-content"],{variants:{intent:c.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"],basic:["bg-basic","text-on-basic","border-surface"]}),size:c.makeVariants({sm:["text-small","px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]","empty:size-sz-8"],md:["text-caption","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:t="md",type:o="relative",count:a,overflowCount:s=99,"aria-label":n,className:l,...u})=>{const b=a&&a>s,p=typeof n=="function"?n({count:a,overflowCount:s}):n,m={...u,"aria-label":p};return r.jsx("span",{"data-spark-component":"badge",role:"status",className:f({intent:e,size:t,type:o,className:l}),...m,children:b?`${s}+`:a})};i.displayName="BadgeItem";const d=({children:e,...t})=>!e?r.jsx(i,{type:"standalone",...t}):r.jsxs("div",{className:"relative inline-flex",children:[e,r.jsx(i,{...t})]});d.displayName="Badge";exports.Badge=d;
-//# sourceMappingURL=index.js.map
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/badge/index.ts
+var badge_exports = {};
+__export(badge_exports, {
+  Badge: () => Badge
+});
+module.exports = __toCommonJS(badge_exports);
+
+// src/badge/BadgeItem.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority = require("class-variance-authority");
+var styles = (0, import_class_variance_authority.cva)(
+  ["inline-flex h-fit", "empty:p-0", "text-center font-bold", "rounded-full box-content"],
+  {
+    variants: {
+      /**
+       * Visual color appearance of the component.
+       * @default 'danger'
+       */
+      intent: (0, import_internal_utils.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"],
+        basic: ["bg-basic", "text-on-basic", "border-surface"]
+      }),
+      /**
+       * Size of the component.
+       * @default 'md'
+       */
+      size: (0, import_internal_utils.makeVariants)({
+        sm: ["text-small", "px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]", "empty:size-sz-8"],
+        md: ["text-caption", "px-md py-sm", "empty:size-sz-16"]
+      }),
+      /**
+       * Type of the component.
+       * @default 'relative'
+       */
+      type: {
+        relative: ["absolute right-0 border-md", "translate-x-1/2 -translate-y-1/2"],
+        standalone: []
+      }
+    },
+    defaultVariants: {
+      intent: "danger",
+      size: "md",
+      type: "relative"
+    }
+  }
+);
+
+// src/badge/BadgeItem.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var BadgeItem = ({
+  intent = "danger",
+  size = "md",
+  type = "relative",
+  count,
+  overflowCount = 99,
+  "aria-label": label,
+  className,
+  ...others
+}) => {
+  const hasOverflow = count && count > overflowCount;
+  const ariaLabel = typeof label === "function" ? label({ count, overflowCount }) : label;
+  const props = { ...others, "aria-label": ariaLabel };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "data-spark-component": "badge",
+      role: "status",
+      className: styles({
+        intent,
+        size,
+        type,
+        className
+      }),
+      ...props,
+      children: hasOverflow ? `${overflowCount}+` : count
+    }
+  );
+};
+BadgeItem.displayName = "BadgeItem";
+
+// src/badge/Badge.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Badge = ({ children, ...props }) => {
+  const isStandalone = !children;
+  return isStandalone ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BadgeItem, { type: "standalone", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BadgeItem, { ...props })
+  ] });
+};
+Badge.displayName = "Badge";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge
+});
+//# sourceMappingURL=index.js.map

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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 font-bold', '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        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'basic',\n        ]\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        basic: ['bg-basic', 'text-on-basic', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', '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'>,\n    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\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"],"names":["styles","cva","makeVariants","BadgeItem","intent","size","type","count","overflowCount","label","className","others","hasOverflow","ariaLabel","props","jsx","Badge","children","jsxs"],"mappings":"6LAGaA,EAASC,EAAAA,IACpB,CAAC,oBAAqB,YAAa,wBAAyB,0BAA0B,EACtF,CACE,SAAU,CAKR,OAAQC,EAAAA,aAcN,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,EAC3D,MAAO,CAAC,WAAY,gBAAiB,gBAAgB,CAAA,CACtD,EAKD,KAAMA,EAAAA,aAAmC,CACvC,GAAI,CAAC,aAAc,oDAAqD,iBAAiB,EACzF,GAAI,CAAC,eAAgB,cAAe,kBAAkB,CAAA,CACvD,EAKD,KAAM,CACJ,SAAU,CAAC,6BAA8B,kCAAkC,EAC3E,WAAY,CAAA,CAAC,CACf,EAEF,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,UAAA,CACR,CAEJ,EC7BaC,EAAY,CAAC,CACxB,OAAAC,EAAS,SACT,KAAAC,EAAO,KACP,KAAAC,EAAO,WACP,MAAAC,EACA,cAAAC,EAAgB,GAChB,aAAcC,EACd,UAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAcL,GAASA,EAAQC,EAC/BK,EAAY,OAAOJ,GAAU,WAAaA,EAAM,CAAE,MAAAF,EAAO,cAAAC,CAAA,CAAe,EAAIC,EAC5EK,EAAQ,CAAE,GAAGH,EAAQ,aAAcE,CAAA,EAEzC,OACEE,EAAAA,IAAC,OAAA,CACC,uBAAqB,QACrB,KAAK,SACL,UAAWf,EAAO,CAChB,OAAAI,EACA,KAAAC,EACA,KAAAC,EACA,UAAAI,CAAA,CACD,EACA,GAAGI,EAEH,SAAAF,EAAc,GAAGJ,CAAa,IAAMD,CAAA,CAAA,CAG3C,EAEAJ,EAAU,YAAc,YCtDjB,MAAMa,EAAQ,CAAC,CAAE,SAAAC,EAAU,GAAGH,KACd,CAACG,EAGpBF,EAAAA,IAACZ,EAAA,CAAU,KAAK,aAAc,GAAGW,CAAA,CAAO,EAExCI,EAAAA,KAAC,MAAA,CAAI,UAAU,uBACZ,SAAA,CAAAD,EACDF,MAACZ,EAAA,CAAW,GAAGW,CAAA,CAAO,CAAA,EACxB,EAIJE,EAAM,YAAc"}
+{"version":3,"sources":["../../src/badge/index.ts","../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["export * from './Badge'\n","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 font-bold', '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        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'basic',\n        ]\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        basic: ['bg-basic', 'text-on-basic', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', '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'>,\n    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\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,4BAA6B;AAC7B,sCAAkC;AAE3B,IAAM,aAAS;AAAA,EACpB,CAAC,qBAAqB,aAAa,yBAAyB,0BAA0B;AAAA,EACtF;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKR,YAAQ,oCAcN;AAAA,QACA,MAAM,CAAC,WAAW,gBAAgB,gBAAgB;AAAA,QAClD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,QAAQ,CAAC,aAAa,kBAAkB,gBAAgB;AAAA,QACxD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,OAAO,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,QACrD,QAAQ,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,QACtD,MAAM,CAAC,WAAW,gBAAgB,gBAAgB;AAAA,QAClD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,OAAO,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,MACvD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKD,UAAM,oCAAmC;AAAA,QACvC,IAAI,CAAC,cAAc,qDAAqD,iBAAiB;AAAA,QACzF,IAAI,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,MACxD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKD,MAAM;AAAA,QACJ,UAAU,CAAC,8BAA8B,kCAAkC;AAAA,QAC3E,YAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AACF;;;ACdI;AAfG,IAAM,YAAY,CAAC;AAAA,EACxB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,cAAc,SAAS,QAAQ;AACrC,QAAM,YAAY,OAAO,UAAU,aAAa,MAAM,EAAE,OAAO,cAAc,CAAC,IAAI;AAClF,QAAM,QAAQ,EAAE,GAAG,QAAQ,cAAc,UAAU;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACL,WAAW,OAAO;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACA,GAAG;AAAA,MAEH,wBAAc,GAAG,aAAa,MAAM;AAAA;AAAA,EACvC;AAEJ;AAEA,UAAU,cAAc;;;AClDpB,IAAAA,sBAAA;AAJG,IAAM,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAAkB;AAC3D,QAAM,eAAe,CAAC;AAEtB,SAAO,eACL,6CAAC,aAAU,MAAK,cAAc,GAAG,OAAO,IAExC,8CAAC,SAAI,WAAU,wBACZ;AAAA;AAAA,IACD,6CAAC,aAAW,GAAG,OAAO;AAAA,KACxB;AAEJ;AAEA,MAAM,cAAc;","names":["import_jsx_runtime"]}

package/dist/badge/index.mjs

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { makeVariants as i } from "@spark-ui/internal-utils";
-import { c as u } from "../index-BmAFn37q.mjs";
-const x = u(
+// src/badge/BadgeItem.styles.tsx
+import { makeVariants } from "@spark-ui/internal-utils";
+import { cva } from "class-variance-authority";
+var styles = cva(
   ["inline-flex h-fit", "empty:p-0", "text-center font-bold", "rounded-full box-content"],
   {
     variants: {
@@ -9,7 +9,7 @@ const x = u(
        * Visual color appearance of the component.
        * @default 'danger'
        */
-      intent: i({
+      intent: 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"],
@@ -25,7 +25,7 @@ const x = u(
        * Size of the component.
        * @default 'md'
        */
-      size: i({
+      size: makeVariants({
         sm: ["text-small", "px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]", "empty:size-sz-8"],
         md: ["text-caption", "px-md py-sm", "empty:size-sz-16"]
       }),
@@ -44,40 +44,52 @@ const x = u(
       type: "relative"
     }
   }
-), o = ({
-  intent: e = "danger",
-  size: a = "md",
-  type: c = "relative",
-  count: t,
-  overflowCount: r = 99,
-  "aria-label": s,
-  className: d,
-  ...l
+);
+
+// src/badge/BadgeItem.tsx
+import { jsx } from "react/jsx-runtime";
+var BadgeItem = ({
+  intent = "danger",
+  size = "md",
+  type = "relative",
+  count,
+  overflowCount = 99,
+  "aria-label": label,
+  className,
+  ...others
 }) => {
-  const p = t && t > r, b = typeof s == "function" ? s({ count: t, overflowCount: r }) : s, m = { ...l, "aria-label": b };
-  return /* @__PURE__ */ n(
+  const hasOverflow = count && count > overflowCount;
+  const ariaLabel = typeof label === "function" ? label({ count, overflowCount }) : label;
+  const props = { ...others, "aria-label": ariaLabel };
+  return /* @__PURE__ */ jsx(
     "span",
     {
       "data-spark-component": "badge",
       role: "status",
-      className: x({
-        intent: e,
-        size: a,
-        type: c,
-        className: d
+      className: styles({
+        intent,
+        size,
+        type,
+        className
       }),
-      ...m,
-      children: p ? `${r}+` : t
+      ...props,
+      children: hasOverflow ? `${overflowCount}+` : count
     }
   );
 };
-o.displayName = "BadgeItem";
-const g = ({ children: e, ...a }) => !e ? /* @__PURE__ */ n(o, { type: "standalone", ...a }) : /* @__PURE__ */ f("div", { className: "relative inline-flex", children: [
-  e,
-  /* @__PURE__ */ n(o, { ...a })
-] });
-g.displayName = "Badge";
+BadgeItem.displayName = "BadgeItem";
+
+// src/badge/Badge.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Badge = ({ children, ...props }) => {
+  const isStandalone = !children;
+  return isStandalone ? /* @__PURE__ */ jsx2(BadgeItem, { type: "standalone", ...props }) : /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
+    children,
+    /* @__PURE__ */ jsx2(BadgeItem, { ...props })
+  ] });
+};
+Badge.displayName = "Badge";
 export {
-  g as Badge
+  Badge
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/badge/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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 font-bold', '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        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'basic',\n        ]\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        basic: ['bg-basic', 'text-on-basic', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', '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'>,\n    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\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"],"names":["styles","cva","makeVariants","BadgeItem","intent","size","type","count","overflowCount","label","className","others","hasOverflow","ariaLabel","props","jsx","Badge","children","jsxs"],"mappings":";;;AAGO,MAAMA,IAASC;AAAA,EACpB,CAAC,qBAAqB,aAAa,yBAAyB,0BAA0B;AAAA,EACtF;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKR,QAAQC,EAcN;AAAA,QACA,MAAM,CAAC,WAAW,gBAAgB,gBAAgB;AAAA,QAClD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,QAAQ,CAAC,aAAa,kBAAkB,gBAAgB;AAAA,QACxD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,OAAO,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,QACrD,QAAQ,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,QACtD,MAAM,CAAC,WAAW,gBAAgB,gBAAgB;AAAA,QAClD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,OAAO,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,MAAA,CACtD;AAAA;AAAA;AAAA;AAAA;AAAA,MAKD,MAAMA,EAAmC;AAAA,QACvC,IAAI,CAAC,cAAc,qDAAqD,iBAAiB;AAAA,QACzF,IAAI,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,MAAA,CACvD;AAAA;AAAA;AAAA;AAAA;AAAA,MAKD,MAAM;AAAA,QACJ,UAAU,CAAC,8BAA8B,kCAAkC;AAAA,QAC3E,YAAY,CAAA;AAAA,MAAC;AAAA,IACf;AAAA,IAEF,iBAAiB;AAAA,MACf,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GC7BaC,IAAY,CAAC;AAAA,EACxB,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,GAAGC;AACL,MAAsB;AACpB,QAAMC,IAAcL,KAASA,IAAQC,GAC/BK,IAAY,OAAOJ,KAAU,aAAaA,EAAM,EAAE,OAAAF,GAAO,eAAAC,EAAA,CAAe,IAAIC,GAC5EK,IAAQ,EAAE,GAAGH,GAAQ,cAAcE,EAAA;AAEzC,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACL,WAAWf,EAAO;AAAA,QAChB,QAAAI;AAAA,QACA,MAAAC;AAAA,QACA,MAAAC;AAAA,QACA,WAAAI;AAAA,MAAA,CACD;AAAA,MACA,GAAGI;AAAA,MAEH,UAAAF,IAAc,GAAGJ,CAAa,MAAMD;AAAA,IAAA;AAAA,EAAA;AAG3C;AAEAJ,EAAU,cAAc;ACtDjB,MAAMa,IAAQ,CAAC,EAAE,UAAAC,GAAU,GAAGH,QACd,CAACG,IAGpB,gBAAAF,EAACZ,GAAA,EAAU,MAAK,cAAc,GAAGW,EAAA,CAAO,IAExC,gBAAAI,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAA;AAAA,EAAAD;AAAA,EACD,gBAAAF,EAACZ,GAAA,EAAW,GAAGW,EAAA,CAAO;AAAA,GACxB;AAIJE,EAAM,cAAc;"}
+{"version":3,"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 font-bold', '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        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'basic',\n        ]\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        basic: ['bg-basic', 'text-on-basic', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', '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'>,\n    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\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":";AAAA,SAAS,oBAAoB;AAC7B,SAAS,WAAyB;AAE3B,IAAM,SAAS;AAAA,EACpB,CAAC,qBAAqB,aAAa,yBAAyB,0BAA0B;AAAA,EACtF;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKR,QAAQ,aAcN;AAAA,QACA,MAAM,CAAC,WAAW,gBAAgB,gBAAgB;AAAA,QAClD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,QAAQ,CAAC,aAAa,kBAAkB,gBAAgB;AAAA,QACxD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,OAAO,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,QACrD,QAAQ,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,QACtD,MAAM,CAAC,WAAW,gBAAgB,gBAAgB;AAAA,QAClD,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,SAAS,CAAC,cAAc,mBAAmB,gBAAgB;AAAA,QAC3D,OAAO,CAAC,YAAY,iBAAiB,gBAAgB;AAAA,MACvD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKD,MAAM,aAAmC;AAAA,QACvC,IAAI,CAAC,cAAc,qDAAqD,iBAAiB;AAAA,QACzF,IAAI,CAAC,gBAAgB,eAAe,kBAAkB;AAAA,MACxD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,MAKD,MAAM;AAAA,QACJ,UAAU,CAAC,8BAA8B,kCAAkC;AAAA,QAC3E,YAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AACF;;;ACdI;AAfG,IAAM,YAAY,CAAC;AAAA,EACxB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,cAAc,SAAS,QAAQ;AACrC,QAAM,YAAY,OAAO,UAAU,aAAa,MAAM,EAAE,OAAO,cAAc,CAAC,IAAI;AAClF,QAAM,QAAQ,EAAE,GAAG,QAAQ,cAAc,UAAU;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACL,WAAW,OAAO;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,MACA,GAAG;AAAA,MAEH,wBAAc,GAAG,aAAa,MAAM;AAAA;AAAA,EACvC;AAEJ;AAEA,UAAU,cAAc;;;AClDpB,gBAAAA,MAEA,YAFA;AAJG,IAAM,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAAkB;AAC3D,QAAM,eAAe,CAAC;AAEtB,SAAO,eACL,gBAAAA,KAAC,aAAU,MAAK,cAAc,GAAG,OAAO,IAExC,qBAAC,SAAI,WAAU,wBACZ;AAAA;AAAA,IACD,gBAAAA,KAAC,aAAW,GAAG,OAAO;AAAA,KACxB;AAEJ;AAEA,MAAM,cAAc;","names":["jsx"]}

package/dist/breadcrumb/index.d.mts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import { TextLink } from '../text-link/index.mjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
+    className?: string;
+    ['aria-label']: string;
+    ref?: Ref<HTMLElement>;
+}
+declare const Breadcrumb$1: {
+    ({ className, "aria-label": ariaLabel, ref, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {
+    asChild?: boolean;
+    className?: string;
+    ref?: Ref<HTMLAnchorElement>;
+}
+declare const CurrentPage: {
+    ({ asChild, className, children, ...rest }: CurrentPageProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemProps extends ComponentPropsWithoutRef<'li'> {
+    className?: string;
+    ref?: Ref<HTMLLIElement>;
+}
+declare const Item: {
+    ({ className, ...rest }: ItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {
+    asChild?: boolean;
+    className?: string;
+    href?: string;
+    ref?: Ref<HTMLAnchorElement>;
+}
+declare const Link: {
+    ({ asChild, className, bold, intent, underline, href, ref, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {
+    asChild?: boolean;
+    className?: string;
+    ref?: Ref<HTMLLIElement>;
+}
+declare const Separator: {
+    ({ asChild, className, children, ref, ...rest }: SeparatorProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Breadcrumb: typeof Breadcrumb$1 & {
+    Item: typeof Item;
+    Link: typeof Link;
+    CurrentPage: typeof CurrentPage;
+    Separator: typeof Separator;
+};
+
+export { Breadcrumb, type BreadcrumbProps };

package/dist/breadcrumb/index.d.ts

@@ -1,12 +1,64 @@
-import { Breadcrumb as Root } from './Breadcrumb';
-import { CurrentPage } from './BreadcrumbCurrentPage';
-import { Item } from './BreadcrumbItem';
-import { Link } from './BreadcrumbLink';
-import { Separator } from './BreadcrumbSeparator';
-export declare const Breadcrumb: typeof Root & {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import { TextLink } from '../text-link/index.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {
+    className?: string;
+    ['aria-label']: string;
+    ref?: Ref<HTMLElement>;
+}
+declare const Breadcrumb$1: {
+    ({ className, "aria-label": ariaLabel, ref, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {
+    asChild?: boolean;
+    className?: string;
+    ref?: Ref<HTMLAnchorElement>;
+}
+declare const CurrentPage: {
+    ({ asChild, className, children, ...rest }: CurrentPageProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ItemProps extends ComponentPropsWithoutRef<'li'> {
+    className?: string;
+    ref?: Ref<HTMLLIElement>;
+}
+declare const Item: {
+    ({ className, ...rest }: ItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {
+    asChild?: boolean;
+    className?: string;
+    href?: string;
+    ref?: Ref<HTMLAnchorElement>;
+}
+declare const Link: {
+    ({ asChild, className, bold, intent, underline, href, ref, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {
+    asChild?: boolean;
+    className?: string;
+    ref?: Ref<HTMLLIElement>;
+}
+declare const Separator: {
+    ({ asChild, className, children, ref, ...rest }: SeparatorProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Breadcrumb: typeof Breadcrumb$1 & {
     Item: typeof Item;
     Link: typeof Link;
     CurrentPage: typeof CurrentPage;
     Separator: typeof Separator;
 };
-export type { BreadcrumbProps } from './Breadcrumb';
+
+export { Breadcrumb, type BreadcrumbProps };