@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.1

package/dist/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  isValidElement,\n  ReactElement,\n  ReactNode\n} from 'react';\nimport styles from './avatar.module.css';\nimport { AVATAR_COLORS } from './utils';\n\nconst avatar = cva(styles.avatar, {\n  variants: {\n    radius: {\n      small: styles['avatar-small'],\n      full: styles['avatar-full']\n    },\n    size: {\n      1: styles['avatar-size-1'],\n      2: styles['avatar-size-2'],\n      3: styles['avatar-size-3'],\n      4: styles['avatar-size-4'],\n      5: styles['avatar-size-5'],\n      6: styles['avatar-size-6'],\n      7: styles['avatar-size-7'],\n      8: styles['avatar-size-8'],\n      9: styles['avatar-size-9'],\n      10: styles['avatar-size-10'],\n      11: styles['avatar-size-11'],\n      12: styles['avatar-size-12'],\n      13: styles['avatar-size-13']\n    },\n    variant: {\n      solid: styles['avatar-solid'],\n      soft: styles['avatar-soft']\n    },\n    disabled: {\n      true: styles['avatar-disabled']\n    },\n    color: {\n      indigo: styles['avatar-color-indigo'],\n      orange: styles['avatar-color-orange'],\n      mint: styles['avatar-color-mint'],\n      neutral: styles['avatar-color-neutral'],\n      sky: styles['avatar-color-sky'],\n      lime: styles['avatar-color-lime'],\n      grass: styles['avatar-color-grass'],\n      cyan: styles['avatar-color-cyan'],\n      iris: styles['avatar-color-iris'],\n      purple: styles['avatar-color-purple'],\n      pink: styles['avatar-color-pink'],\n      crimson: styles['avatar-color-crimson'],\n      gold: styles['avatar-color-gold']\n    }\n  },\n  compoundVariants: [\n    {\n      variant: 'solid',\n      color: 'indigo',\n      className: styles['avatar-solid-indigo']\n    },\n    {\n      variant: 'solid',\n      color: 'orange',\n      className: styles['avatar-solid-orange']\n    },\n    { variant: 'solid', color: 'mint', className: styles['avatar-solid-mint'] },\n    { variant: 'solid', color: 'sky', className: styles['avatar-solid-sky'] },\n    { variant: 'solid', color: 'lime', className: styles['avatar-solid-lime'] },\n    {\n      variant: 'solid',\n      color: 'grass',\n      className: styles['avatar-solid-grass']\n    },\n    { variant: 'solid', color: 'cyan', className: styles['avatar-solid-cyan'] },\n    { variant: 'solid', color: 'iris', className: styles['avatar-solid-iris'] },\n    {\n      variant: 'solid',\n      color: 'purple',\n      className: styles['avatar-solid-purple']\n    },\n    { variant: 'solid', color: 'pink', className: styles['avatar-solid-pink'] },\n    {\n      variant: 'solid',\n      color: 'crimson',\n      className: styles['avatar-solid-crimson']\n    },\n    { variant: 'solid', color: 'gold', className: styles['avatar-solid-gold'] },\n    {\n      variant: 'soft',\n      color: 'indigo',\n      className: styles['avatar-soft-indigo']\n    },\n\n    {\n      variant: 'soft',\n      color: 'orange',\n      className: styles['avatar-soft-orange']\n    },\n    { variant: 'soft', color: 'mint', className: styles['avatar-soft-mint'] },\n    { variant: 'soft', color: 'sky', className: styles['avatar-soft-sky'] },\n    { variant: 'soft', color: 'lime', className: styles['avatar-soft-lime'] },\n    { variant: 'soft', color: 'grass', className: styles['avatar-soft-grass'] },\n    { variant: 'soft', color: 'cyan', className: styles['avatar-soft-cyan'] },\n    { variant: 'soft', color: 'iris', className: styles['avatar-soft-iris'] },\n    {\n      variant: 'soft',\n      color: 'purple',\n      className: styles['avatar-soft-purple']\n    },\n    { variant: 'soft', color: 'pink', className: styles['avatar-soft-pink'] },\n    {\n      variant: 'soft',\n      color: 'crimson',\n      className: styles['avatar-soft-crimson']\n    },\n    { variant: 'soft', color: 'gold', className: styles['avatar-soft-gold'] }\n  ],\n  defaultVariants: {\n    size: 3,\n    radius: 'small',\n    variant: 'soft',\n    color: 'indigo'\n  }\n});\n\nconst image = cva(styles.image);\n\n/*\n * @desc Recursively get the avatar props even if it's\n * wrapped in another component like Tooltip, Flex, etc.\n */\nexport const getAvatarProps = (\n  element: ReactElement<AvatarProps>\n): AvatarProps => {\n  const props = element.props as AvatarProps & { children?: ReactNode };\n\n  if (element.type === Avatar) {\n    return props;\n  }\n\n  if (props.children) {\n    if (isValidElement<AvatarProps>(props.children)) {\n      return getAvatarProps(props.children);\n    }\n  }\n  return {};\n};\n\nexport interface AvatarProps\n  extends AvatarPrimitive.Root.Props,\n    VariantProps<typeof avatar> {\n  size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;\n  src?: string;\n  alt?: string;\n  fallback?: ReactNode;\n  variant?: 'solid' | 'soft';\n  color?: AVATAR_COLORS;\n  className?: string;\n}\n\nconst AvatarRoot = forwardRef<HTMLSpanElement, AvatarProps>(\n  (\n    { className, alt, src, fallback, size, radius, variant, color, ...props },\n    ref\n  ) => (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cx(\n        styles.imageWrapper,\n        avatar({ size, radius, variant, color }),\n        className\n      )}\n      {...props}\n    >\n      <AvatarPrimitive.Image className={image()} src={src} alt={alt} />\n      <AvatarPrimitive.Fallback className={styles.fallback}>\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n);\n\nAvatarRoot.displayName = AvatarPrimitive.Root.displayName;\n\nexport const Avatar = AvatarRoot;\n\nexport interface AvatarGroupProps extends ComponentPropsWithoutRef<'div'> {\n  children: React.ReactElement<AvatarProps>[];\n  max?: number;\n}\n\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ children, max, className, ...props }, ref) => {\n    const avatars = max ? children.slice(0, max) : children;\n    const count = max && children.length > max ? children.length - max : 0;\n\n    // Overflow avatar matches the first avatar styling\n    const firstAvatarProps = getAvatarProps(avatars[0]);\n\n    return (\n      <div ref={ref} className={cx(styles.avatarGroup, className)} {...props}>\n        {avatars.map((avatar, index) => (\n          <div key={index} className={styles.avatarWrapper}>\n            {avatar}\n          </div>\n        ))}\n        {count > 0 && (\n          <div className={styles.avatarWrapper}>\n            <Avatar\n              size={firstAvatarProps.size}\n              radius={firstAvatarProps.radius}\n              variant={firstAvatarProps.variant}\n              color='neutral'\n              fallback={`+${count}`}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["_jsxs","AvatarPrimitive","_jsx"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, cx, VariantProps } from 'class-variance-authority';\nimport { ComponentProps, isValidElement, ReactElement, ReactNode } from 'react';\nimport styles from './avatar.module.css';\nimport { AVATAR_COLORS } from './utils';\n\nconst avatar = cva(styles.avatar, {\n  variants: {\n    radius: {\n      small: styles['avatar-small'],\n      full: styles['avatar-full']\n    },\n    size: {\n      1: styles['avatar-size-1'],\n      2: styles['avatar-size-2'],\n      3: styles['avatar-size-3'],\n      4: styles['avatar-size-4'],\n      5: styles['avatar-size-5'],\n      6: styles['avatar-size-6'],\n      7: styles['avatar-size-7'],\n      8: styles['avatar-size-8'],\n      9: styles['avatar-size-9'],\n      10: styles['avatar-size-10'],\n      11: styles['avatar-size-11'],\n      12: styles['avatar-size-12'],\n      13: styles['avatar-size-13']\n    },\n    variant: {\n      solid: styles['avatar-solid'],\n      soft: styles['avatar-soft']\n    },\n    disabled: {\n      true: styles['avatar-disabled']\n    },\n    color: {\n      indigo: styles['avatar-color-indigo'],\n      orange: styles['avatar-color-orange'],\n      mint: styles['avatar-color-mint'],\n      neutral: styles['avatar-color-neutral'],\n      sky: styles['avatar-color-sky'],\n      lime: styles['avatar-color-lime'],\n      grass: styles['avatar-color-grass'],\n      cyan: styles['avatar-color-cyan'],\n      iris: styles['avatar-color-iris'],\n      purple: styles['avatar-color-purple'],\n      pink: styles['avatar-color-pink'],\n      crimson: styles['avatar-color-crimson'],\n      gold: styles['avatar-color-gold']\n    }\n  },\n  compoundVariants: [\n    {\n      variant: 'solid',\n      color: 'indigo',\n      className: styles['avatar-solid-indigo']\n    },\n    {\n      variant: 'solid',\n      color: 'orange',\n      className: styles['avatar-solid-orange']\n    },\n    { variant: 'solid', color: 'mint', className: styles['avatar-solid-mint'] },\n    { variant: 'solid', color: 'sky', className: styles['avatar-solid-sky'] },\n    { variant: 'solid', color: 'lime', className: styles['avatar-solid-lime'] },\n    {\n      variant: 'solid',\n      color: 'grass',\n      className: styles['avatar-solid-grass']\n    },\n    { variant: 'solid', color: 'cyan', className: styles['avatar-solid-cyan'] },\n    { variant: 'solid', color: 'iris', className: styles['avatar-solid-iris'] },\n    {\n      variant: 'solid',\n      color: 'purple',\n      className: styles['avatar-solid-purple']\n    },\n    { variant: 'solid', color: 'pink', className: styles['avatar-solid-pink'] },\n    {\n      variant: 'solid',\n      color: 'crimson',\n      className: styles['avatar-solid-crimson']\n    },\n    { variant: 'solid', color: 'gold', className: styles['avatar-solid-gold'] },\n    {\n      variant: 'soft',\n      color: 'indigo',\n      className: styles['avatar-soft-indigo']\n    },\n\n    {\n      variant: 'soft',\n      color: 'orange',\n      className: styles['avatar-soft-orange']\n    },\n    { variant: 'soft', color: 'mint', className: styles['avatar-soft-mint'] },\n    { variant: 'soft', color: 'sky', className: styles['avatar-soft-sky'] },\n    { variant: 'soft', color: 'lime', className: styles['avatar-soft-lime'] },\n    { variant: 'soft', color: 'grass', className: styles['avatar-soft-grass'] },\n    { variant: 'soft', color: 'cyan', className: styles['avatar-soft-cyan'] },\n    { variant: 'soft', color: 'iris', className: styles['avatar-soft-iris'] },\n    {\n      variant: 'soft',\n      color: 'purple',\n      className: styles['avatar-soft-purple']\n    },\n    { variant: 'soft', color: 'pink', className: styles['avatar-soft-pink'] },\n    {\n      variant: 'soft',\n      color: 'crimson',\n      className: styles['avatar-soft-crimson']\n    },\n    { variant: 'soft', color: 'gold', className: styles['avatar-soft-gold'] }\n  ],\n  defaultVariants: {\n    size: 3,\n    radius: 'small',\n    variant: 'soft',\n    color: 'indigo'\n  }\n});\n\nconst image = cva(styles.image);\n\n/*\n * @desc Recursively get the avatar props even if it's\n * wrapped in another component like Tooltip, Flex, etc.\n */\nexport const getAvatarProps = (\n  element: ReactElement<AvatarProps>\n): AvatarProps => {\n  const props = element.props as AvatarProps & { children?: ReactNode };\n\n  if (element.type === Avatar) {\n    return props;\n  }\n\n  if (props.children) {\n    if (isValidElement<AvatarProps>(props.children)) {\n      return getAvatarProps(props.children);\n    }\n  }\n  return {};\n};\n\nexport interface AvatarProps\n  extends AvatarPrimitive.Root.Props,\n    VariantProps<typeof avatar> {\n  size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;\n  src?: string;\n  alt?: string;\n  fallback?: ReactNode;\n  variant?: 'solid' | 'soft';\n  color?: AVATAR_COLORS;\n  className?: string;\n}\n\nconst AvatarRoot = ({\n  className,\n  alt,\n  src,\n  fallback,\n  size,\n  radius,\n  variant,\n  color,\n  ...props\n}: AvatarProps) => (\n  <AvatarPrimitive.Root\n    className={cx(\n      styles.imageWrapper,\n      avatar({ size, radius, variant, color }),\n      className\n    )}\n    {...props}\n  >\n    <AvatarPrimitive.Image className={image()} src={src} alt={alt} />\n    <AvatarPrimitive.Fallback className={styles.fallback}>\n      {fallback}\n    </AvatarPrimitive.Fallback>\n  </AvatarPrimitive.Root>\n);\n\nAvatarRoot.displayName = 'Avatar';\n\nexport const Avatar = AvatarRoot;\n\nexport interface AvatarGroupProps extends ComponentProps<'div'> {\n  children: React.ReactElement<AvatarProps>[];\n  max?: number;\n}\n\nexport const AvatarGroup = ({\n  children,\n  max,\n  className,\n  ...props\n}: AvatarGroupProps) => {\n  const avatars = max ? children.slice(0, max) : children;\n  const count = max && children.length > max ? children.length - max : 0;\n\n  // Overflow avatar matches the first avatar styling\n  const firstAvatarProps = getAvatarProps(avatars[0]);\n\n  return (\n    <div className={cx(styles.avatarGroup, className)} {...props}>\n      {avatars.map((avatar, index) => (\n        <div key={index} className={styles.avatarWrapper}>\n          {avatar}\n        </div>\n      ))}\n      {count > 0 && (\n        <div className={styles.avatarWrapper}>\n          <Avatar\n            size={firstAvatarProps.size}\n            radius={firstAvatarProps.radius}\n            variant={firstAvatarProps.variant}\n            color='neutral'\n            fallback={`+${count}`}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nAvatarGroup.displayName = 'Avatar.Group';\n"],"names":["_jsxs","AvatarPrimitive","_jsx"],"mappings":"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"}

package/dist/components/badge/badge.cjs

@@ -7,28 +7,28 @@ var badge_module = require('./badge.module.css.cjs');
 const badge = classVarianceAuthority.cva(badge_module.default['badge'], {
     variants: {
         variant: {
-            accent: badge_module.default["badge-accent"],
-            warning: badge_module.default["badge-warning"],
-            danger: badge_module.default["badge-danger"],
-            success: badge_module.default["badge-success"],
-            neutral: badge_module.default["badge-neutral"],
-            gradient: badge_module.default["badge-gradient"]
+            accent: badge_module.default['badge-accent'],
+            warning: badge_module.default['badge-warning'],
+            danger: badge_module.default['badge-danger'],
+            success: badge_module.default['badge-success'],
+            neutral: badge_module.default['badge-neutral'],
+            gradient: badge_module.default['badge-gradient']
         },
         size: {
-            micro: badge_module.default["badge-micro"],
-            small: badge_module.default["badge-small"],
-            regular: badge_module.default["badge-regular"],
+            micro: badge_module.default['badge-micro'],
+            small: badge_module.default['badge-small'],
+            regular: badge_module.default['badge-regular']
         },
         defaultVariants: {
-            variant: "accent",
-            size: "small"
+            variant: 'accent',
+            size: 'small'
         }
-    },
+    }
 });
-const Badge = ({ variant = 'accent', size = 'small', icon, children, className, screenReaderText }) => {
-    return (jsxRuntime.jsxs("span", { className: badge({ variant, size, className }), children: [icon && jsxRuntime.jsx("span", { className: badge_module.default['icon'], children: icon }), screenReaderText && (jsxRuntime.jsx("span", { className: badge_module.default['sr-only'], children: screenReaderText })), children] }));
+const Badge = ({ variant = 'accent', size = 'small', icon, children, className, screenReaderText, ...props }) => {
+    return (jsxRuntime.jsxs("span", { className: badge({ variant, size, className }), ...props, children: [icon && jsxRuntime.jsx("span", { className: badge_module.default['icon'], children: icon }), screenReaderText && (jsxRuntime.jsx("span", { className: badge_module.default['sr-only'], children: screenReaderText })), children] }));
 };
-Badge.displayName = "Badge";
+Badge.displayName = 'Badge';
 
 exports.Badge = Badge;
 //# sourceMappingURL=badge.cjs.map

package/dist/components/badge/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","sources":["../../../components/badge/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { ReactNode } from \"react\";\n\nimport styles from \"./badge.module.css\";\n\nconst badge = cva(styles['badge'], {\n  variants: {\n    variant: {\n      accent: styles[\"badge-accent\"],\n      warning: styles[\"badge-warning\"],\n      danger: styles[\"badge-danger\"],\n      success: styles[\"badge-success\"],\n      neutral: styles[\"badge-neutral\"],\n      gradient: styles[\"badge-gradient\"]\n    },\n    size: {\n      micro: styles[\"badge-micro\"],\n      small: styles[\"badge-small\"],\n      regular: styles[\"badge-regular\"],\n    },\n    defaultVariants: {\n      variant: \"accent\",\n      size: \"small\"\n    }\n  },\n});\n\ntype BadgeProps = VariantProps<typeof badge> & {\n  icon?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  screenReaderText?: string;\n}\n\nexport const Badge = ({ \n  variant = 'accent',\n  size = 'small',\n  icon,\n  children,\n  className,\n  screenReaderText\n}: BadgeProps) => {\n  return (\n    <span className={badge({ variant, size, className })}>\n      {icon && <span className={styles['icon']}>{icon}</span>}\n      {screenReaderText && (\n        <span className={styles['sr-only']}>{screenReaderText}</span>\n      )}\n      {children}\n    </span>\n  );\n};\n\nBadge.displayName = \"Badge\";\n"],"names":["cva","styles","_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,KAAK,GAAGA,0BAAG,CAACC,oBAAM,CAAC,OAAO,CAAC,EAAE;AACjC,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,MAAM,EAAEA,oBAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,OAAO,EAAEA,oBAAM,CAAC,eAAe,CAAC;AAChC,YAAA,MAAM,EAAEA,oBAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,OAAO,EAAEA,oBAAM,CAAC,eAAe,CAAC;AAChC,YAAA,OAAO,EAAEA,oBAAM,CAAC,eAAe,CAAC;AAChC,YAAA,QAAQ,EAAEA,oBAAM,CAAC,gBAAgB,CAAC;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,oBAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,KAAK,EAAEA,oBAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,OAAO,EAAEA,oBAAM,CAAC,eAAe,CAAC;AACjC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAC,CAAC;MASU,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,OAAO,EACd,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,gBAAgB,EACL,KAAI;IACf,QACEC,0BAAM,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EACjD,QAAA,EAAA,CAAA,IAAI,IAAIC,cAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEF,oBAAM,CAAC,MAAM,CAAC,EAAG,QAAA,EAAA,IAAI,GAAQ,EACtD,gBAAgB,KACfE,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEF,oBAAM,CAAC,SAAS,CAAC,YAAG,gBAAgB,EAAA,CAAQ,CAC9D,EACA,QAAQ,CACJ,EAAA,CAAA,EACP;AACJ,EAAE;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"badge.cjs","sources":["../../../components/badge/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\n\nimport styles from './badge.module.css';\n\nconst badge = cva(styles['badge'], {\n  variants: {\n    variant: {\n      accent: styles['badge-accent'],\n      warning: styles['badge-warning'],\n      danger: styles['badge-danger'],\n      success: styles['badge-success'],\n      neutral: styles['badge-neutral'],\n      gradient: styles['badge-gradient']\n    },\n    size: {\n      micro: styles['badge-micro'],\n      small: styles['badge-small'],\n      regular: styles['badge-regular']\n    },\n    defaultVariants: {\n      variant: 'accent',\n      size: 'small'\n    }\n  }\n});\n\ntype BadgeProps = VariantProps<typeof badge> &\n  ComponentProps<'span'> & {\n    icon?: ReactNode;\n    children: ReactNode;\n    className?: string;\n    screenReaderText?: string;\n  };\n\nexport const Badge = ({\n  variant = 'accent',\n  size = 'small',\n  icon,\n  children,\n  className,\n  screenReaderText,\n  ...props\n}: BadgeProps) => {\n  return (\n    <span className={badge({ variant, size, className })} {...props}>\n      {icon && <span className={styles['icon']}>{icon}</span>}\n      {screenReaderText && (\n        <span className={styles['sr-only']}>{screenReaderText}</span>\n      )}\n      {children}\n    </span>\n  );\n};\n\nBadge.displayName = 'Badge';\n"],"names":["cva","styles","_jsxs","_jsx"],"mappings":";;;;;;AAKA,MAAM,KAAK,GAAGA,0BAAG,CAACC,oBAAM,CAAC,OAAO,CAAC,EAAE;AACjC,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,MAAM,EAAEA,oBAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,OAAO,EAAEA,oBAAM,CAAC,eAAe,CAAC;AAChC,YAAA,MAAM,EAAEA,oBAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,OAAO,EAAEA,oBAAM,CAAC,eAAe,CAAC;AAChC,YAAA,OAAO,EAAEA,oBAAM,CAAC,eAAe,CAAC;AAChC,YAAA,QAAQ,EAAEA,oBAAM,CAAC,gBAAgB,CAAC;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,oBAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,KAAK,EAAEA,oBAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,OAAO,EAAEA,oBAAM,CAAC,eAAe,CAAC;AACjC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAC,CAAC;AAUU,MAAA,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,OAAO,EACd,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACG,KAAI;IACf,QACEC,0BAAM,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,EAAA,QAAA,EAAA,CAC5D,IAAI,IAAIC,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEF,oBAAM,CAAC,MAAM,CAAC,EAAA,QAAA,EAAG,IAAI,EAAQ,CAAA,EACtD,gBAAgB,KACfE,cAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEF,oBAAM,CAAC,SAAS,CAAC,YAAG,gBAAgB,EAAA,CAAQ,CAC9D,EACA,QAAQ,CACJ,EAAA,CAAA,EACP;AACJ,EAAE;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/badge/badge.d.ts

@@ -1,18 +1,18 @@
-import { type VariantProps } from "class-variance-authority";
-import { ReactNode } from "react";
+import { type VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
 declare const badge: (props?: ({
     variant?: "accent" | "danger" | "success" | "gradient" | "neutral" | "warning" | null | undefined;
     size?: "small" | "micro" | "regular" | null | undefined;
-    defaultVariants?: "variant" | "size" | null | undefined;
+    defaultVariants?: "size" | "variant" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type BadgeProps = VariantProps<typeof badge> & {
+type BadgeProps = VariantProps<typeof badge> & ComponentProps<'span'> & {
     icon?: ReactNode;
     children: ReactNode;
     className?: string;
     screenReaderText?: string;
 };
 export declare const Badge: {
-    ({ variant, size, icon, children, className, screenReaderText }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, size, icon, children, className, screenReaderText, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,QAAA,MAAM,KAAK;;;;8EAoBT,CAAC;AAEH,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,GAAG;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAA;AAED,eAAO,MAAM,KAAK;qEAOf,UAAU;;CAUZ,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlD,QAAA,MAAM,KAAK;;;;8EAoBT,CAAC;AAEH,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,GAC1C,cAAc,CAAC,MAAM,CAAC,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEJ,eAAO,MAAM,KAAK;+EAQf,UAAU;;CAUZ,CAAC"}

package/dist/components/badge/badge.js

@@ -5,28 +5,28 @@ import styles from './badge.module.css.js';
 const badge = cva(styles['badge'], {
     variants: {
         variant: {
-            accent: styles["badge-accent"],
-            warning: styles["badge-warning"],
-            danger: styles["badge-danger"],
-            success: styles["badge-success"],
-            neutral: styles["badge-neutral"],
-            gradient: styles["badge-gradient"]
+            accent: styles['badge-accent'],
+            warning: styles['badge-warning'],
+            danger: styles['badge-danger'],
+            success: styles['badge-success'],
+            neutral: styles['badge-neutral'],
+            gradient: styles['badge-gradient']
         },
         size: {
-            micro: styles["badge-micro"],
-            small: styles["badge-small"],
-            regular: styles["badge-regular"],
+            micro: styles['badge-micro'],
+            small: styles['badge-small'],
+            regular: styles['badge-regular']
         },
         defaultVariants: {
-            variant: "accent",
-            size: "small"
+            variant: 'accent',
+            size: 'small'
         }
-    },
+    }
 });
-const Badge = ({ variant = 'accent', size = 'small', icon, children, className, screenReaderText }) => {
-    return (jsxs("span", { className: badge({ variant, size, className }), children: [icon && jsx("span", { className: styles['icon'], children: icon }), screenReaderText && (jsx("span", { className: styles['sr-only'], children: screenReaderText })), children] }));
+const Badge = ({ variant = 'accent', size = 'small', icon, children, className, screenReaderText, ...props }) => {
+    return (jsxs("span", { className: badge({ variant, size, className }), ...props, children: [icon && jsx("span", { className: styles['icon'], children: icon }), screenReaderText && (jsx("span", { className: styles['sr-only'], children: screenReaderText })), children] }));
 };
-Badge.displayName = "Badge";
+Badge.displayName = 'Badge';
 
 export { Badge };
 //# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../components/badge/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { ReactNode } from \"react\";\n\nimport styles from \"./badge.module.css\";\n\nconst badge = cva(styles['badge'], {\n  variants: {\n    variant: {\n      accent: styles[\"badge-accent\"],\n      warning: styles[\"badge-warning\"],\n      danger: styles[\"badge-danger\"],\n      success: styles[\"badge-success\"],\n      neutral: styles[\"badge-neutral\"],\n      gradient: styles[\"badge-gradient\"]\n    },\n    size: {\n      micro: styles[\"badge-micro\"],\n      small: styles[\"badge-small\"],\n      regular: styles[\"badge-regular\"],\n    },\n    defaultVariants: {\n      variant: \"accent\",\n      size: \"small\"\n    }\n  },\n});\n\ntype BadgeProps = VariantProps<typeof badge> & {\n  icon?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  screenReaderText?: string;\n}\n\nexport const Badge = ({ \n  variant = 'accent',\n  size = 'small',\n  icon,\n  children,\n  className,\n  screenReaderText\n}: BadgeProps) => {\n  return (\n    <span className={badge({ variant, size, className })}>\n      {icon && <span className={styles['icon']}>{icon}</span>}\n      {screenReaderText && (\n        <span className={styles['sr-only']}>{screenReaderText}</span>\n      )}\n      {children}\n    </span>\n  );\n};\n\nBadge.displayName = \"Badge\";\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAKA,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;AACjC,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AAChC,YAAA,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AAChC,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AAChC,YAAA,QAAQ,EAAE,MAAM,CAAC,gBAAgB,CAAC;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AACjC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAC,CAAC;MASU,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,OAAO,EACd,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,gBAAgB,EACL,KAAI;IACf,QACEA,eAAM,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EACjD,QAAA,EAAA,CAAA,IAAI,IAAIC,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAG,QAAA,EAAA,IAAI,GAAQ,EACtD,gBAAgB,KACfA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,YAAG,gBAAgB,EAAA,CAAQ,CAC9D,EACA,QAAQ,CACJ,EAAA,CAAA,EACP;AACJ,EAAE;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"badge.js","sources":["../../../components/badge/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\n\nimport styles from './badge.module.css';\n\nconst badge = cva(styles['badge'], {\n  variants: {\n    variant: {\n      accent: styles['badge-accent'],\n      warning: styles['badge-warning'],\n      danger: styles['badge-danger'],\n      success: styles['badge-success'],\n      neutral: styles['badge-neutral'],\n      gradient: styles['badge-gradient']\n    },\n    size: {\n      micro: styles['badge-micro'],\n      small: styles['badge-small'],\n      regular: styles['badge-regular']\n    },\n    defaultVariants: {\n      variant: 'accent',\n      size: 'small'\n    }\n  }\n});\n\ntype BadgeProps = VariantProps<typeof badge> &\n  ComponentProps<'span'> & {\n    icon?: ReactNode;\n    children: ReactNode;\n    className?: string;\n    screenReaderText?: string;\n  };\n\nexport const Badge = ({\n  variant = 'accent',\n  size = 'small',\n  icon,\n  children,\n  className,\n  screenReaderText,\n  ...props\n}: BadgeProps) => {\n  return (\n    <span className={badge({ variant, size, className })} {...props}>\n      {icon && <span className={styles['icon']}>{icon}</span>}\n      {screenReaderText && (\n        <span className={styles['sr-only']}>{screenReaderText}</span>\n      )}\n      {children}\n    </span>\n  );\n};\n\nBadge.displayName = 'Badge';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAKA,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;AACjC,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE;AACP,YAAA,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AAChC,YAAA,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AAChC,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AAChC,YAAA,QAAQ,EAAE,MAAM,CAAC,gBAAgB,CAAC;AACnC,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC;AACjC,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,OAAO;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAC,CAAC;AAUU,MAAA,KAAK,GAAG,CAAC,EACpB,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,OAAO,EACd,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACG,KAAI;IACf,QACEA,eAAM,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,EAAA,QAAA,EAAA,CAC5D,IAAI,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,EAAA,QAAA,EAAG,IAAI,EAAQ,CAAA,EACtD,gBAAgB,KACfA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,YAAG,gBAAgB,EAAA,CAAQ,CAC9D,EACA,QAAQ,CACJ,EAAA,CAAA,EACP;AACJ,EAAE;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/components/box/box.cjs

@@ -1,15 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var classVarianceAuthority = require('class-variance-authority');
-var box_module = require('./box.module.css.cjs');
 
-// Note: This is the old component just copied in v1 folder as it is used in v1. 
-const box = classVarianceAuthority.cva(box_module.default.box);
-function Box({ children, className, ref, ...props }) {
-    return (jsxRuntime.jsx("div", { ref: ref, className: box({ className }), ...props, children: children }));
+function Box(props) {
+    return jsxRuntime.jsx("div", { ...props });
 }
-Box.displayName = "Box";
+Box.displayName = 'Box';
 
 exports.Box = Box;
 //# sourceMappingURL=box.cjs.map

package/dist/components/box/box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"box.cjs","sources":["../../../components/box/box.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./box.module.css\";\n\n// Note: This is the old component just copied in v1 folder as it is used in v1. \n\nconst box = cva(styles.box);\n\ntype BoxProps = PropsWithChildren<VariantProps<typeof box>> &\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: React.RefObject<HTMLDivElement>;\n  };\n\nexport function Box({ children, className, ref, ...props }: BoxProps) {\n  return (\n    <div ref={ref} className={box({ className })} {...props}>\n      {children}\n    </div>\n  );\n}\n\nBox.displayName = \"Box\";\n"],"names":["cva","styles","_jsx"],"mappings":";;;;;;AAKA;AAEA,MAAM,GAAG,GAAGA,0BAAG,CAACC,kBAAM,CAAC,GAAG,CAAC,CAAC;AAOZ,SAAA,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAY,EAAA;IAClE,QACEC,wBAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,EAAM,GAAA,KAAK,YACpD,QAAQ,EAAA,CACL,EACN;AACJ,CAAC;AAED,GAAG,CAAC,WAAW,GAAG,KAAK;;;;"}
+{"version":3,"file":"box.cjs","sources":["../../../components/box/box.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\n\nexport function Box(props: ComponentProps<'div'>) {\n  return <div {...props} />;\n}\n\nBox.displayName = 'Box';\n"],"names":["_jsx"],"mappings":";;;;AAEM,SAAU,GAAG,CAAC,KAA4B,EAAA;IAC9C,OAAOA,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,CAAI,CAAC;AAC5B,CAAC;AAED,GAAG,CAAC,WAAW,GAAG,KAAK;;;;"}

package/dist/components/box/box.d.ts

@@ -1,12 +1,6 @@
-import { VariantProps } from "class-variance-authority";
-import { HTMLAttributes, PropsWithChildren } from "react";
-declare const box: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-type BoxProps = PropsWithChildren<VariantProps<typeof box>> & HTMLAttributes<HTMLDivElement> & {
-    ref?: React.RefObject<HTMLDivElement>;
-};
-export declare function Box({ children, className, ref, ...props }: BoxProps): import("react/jsx-runtime").JSX.Element;
+import { ComponentProps } from 'react';
+export declare function Box(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Box {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=box.d.ts.map

package/dist/components/box/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../components/box/box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1D,QAAA,MAAM,GAAG,oFAAkB,CAAC;AAE5B,KAAK,QAAQ,GAAG,iBAAiB,CAAC,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC,GACzD,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CACvC,CAAC;AAEJ,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAMnE;yBANe,GAAG"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../components/box/box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAE/C;yBAFe,GAAG"}

package/dist/components/box/box.js

@@ -1,13 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { cva } from 'class-variance-authority';
-import styles from './box.module.css.js';
 
-// Note: This is the old component just copied in v1 folder as it is used in v1. 
-const box = cva(styles.box);
-function Box({ children, className, ref, ...props }) {
-    return (jsx("div", { ref: ref, className: box({ className }), ...props, children: children }));
+function Box(props) {
+    return jsx("div", { ...props });
 }
-Box.displayName = "Box";
+Box.displayName = 'Box';
 
 export { Box };
 //# sourceMappingURL=box.js.map

package/dist/components/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../components/box/box.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./box.module.css\";\n\n// Note: This is the old component just copied in v1 folder as it is used in v1. \n\nconst box = cva(styles.box);\n\ntype BoxProps = PropsWithChildren<VariantProps<typeof box>> &\n  HTMLAttributes<HTMLDivElement> & {\n    ref?: React.RefObject<HTMLDivElement>;\n  };\n\nexport function Box({ children, className, ref, ...props }: BoxProps) {\n  return (\n    <div ref={ref} className={box({ className })} {...props}>\n      {children}\n    </div>\n  );\n}\n\nBox.displayName = \"Box\";\n"],"names":["_jsx"],"mappings":";;;;AAKA;AAEA,MAAM,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;AAOZ,SAAA,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAAY,EAAA;IAClE,QACEA,aAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC,EAAM,GAAA,KAAK,YACpD,QAAQ,EAAA,CACL,EACN;AACJ,CAAC;AAED,GAAG,CAAC,WAAW,GAAG,KAAK;;;;"}
+{"version":3,"file":"box.js","sources":["../../../components/box/box.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\n\nexport function Box(props: ComponentProps<'div'>) {\n  return <div {...props} />;\n}\n\nBox.displayName = 'Box';\n"],"names":["_jsx"],"mappings":";;AAEM,SAAU,GAAG,CAAC,KAA4B,EAAA;IAC9C,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,CAAI,CAAC;AAC5B,CAAC;AAED,GAAG,CAAC,WAAW,GAAG,KAAK;;;;"}

package/dist/components/breadcrumb/breadcrumb-item.cjs

@@ -2,26 +2,40 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var menu = require('../menu/menu.cjs');
 var breadcrumb_module = require('./breadcrumb.module.css.cjs');
 
-const BreadcrumbItem = React.forwardRef(({ as, children, className, leadingIcon, current, href, dropdownItems, ...props }, ref) => {
-    const renderedElement = as ?? jsxRuntime.jsx("a", { ref: ref });
-    const label = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leadingIcon && (jsxRuntime.jsx("span", { className: breadcrumb_module.default['breadcrumb-icon'], children: leadingIcon })), children && jsxRuntime.jsx("span", { children: children })] }));
-    if (dropdownItems) {
-        return (jsxRuntime.jsxs(menu.Menu, { children: [jsxRuntime.jsxs(menu.Menu.Trigger, { className: breadcrumb_module.default['breadcrumb-dropdown-trigger'], children: [label, jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: breadcrumb_module.default['breadcrumb-dropdown-icon'] })] }), jsxRuntime.jsx(menu.Menu.Content, { className: breadcrumb_module.default['breadcrumb-dropdown-content'], children: dropdownItems.map((dropdownItem, dropdownIndex) => (jsxRuntime.jsx(menu.Menu.Item, { className: breadcrumb_module.default['breadcrumb-dropdown-item'], onClick: dropdownItem?.onClick, children: dropdownItem.label }, dropdownIndex))) })] }));
-    }
-    return (jsxRuntime.jsx("li", { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-item'], className), children: React.cloneElement(renderedElement, {
-            className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-link'], current && breadcrumb_module.default['breadcrumb-link-active']),
+const BreadcrumbItem = ({ ref, render, children, className, leadingIcon, trailingIcon, current, disabled, href, dropdownItems, ...props }) => {
+    const label = leadingIcon || trailingIcon ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leadingIcon && (jsxRuntime.jsx("span", { className: breadcrumb_module.default['breadcrumb-icon'], children: leadingIcon })), children != null && jsxRuntime.jsx("span", { children: children }), trailingIcon && (jsxRuntime.jsx("span", { className: breadcrumb_module.default['breadcrumb-icon'], children: trailingIcon }))] })) : (children);
+    const { id, title, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby } = props;
+    const linkElement = react.useRender({
+        defaultTagName: 'a',
+        ref,
+        render,
+        props: react.mergeProps({
+            className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-link']),
             href,
-            ...props,
-            ...renderedElement.props
-        }, label) }));
-});
-BreadcrumbItem.displayName = 'BreadcrumbItem';
+            children: label
+        }, props)
+    });
+    if (dropdownItems && !disabled) {
+        return (jsxRuntime.jsx("li", { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-item'], className), children: jsxRuntime.jsxs(menu.Menu, { children: [jsxRuntime.jsxs(menu.Menu.Trigger, { ref: ref, className: breadcrumb_module.default['breadcrumb-dropdown-trigger'], id: id, title: title, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, children: [label, jsxRuntime.jsx(reactIcons.ChevronDownIcon, { className: breadcrumb_module.default['breadcrumb-dropdown-icon'] })] }), jsxRuntime.jsx(menu.Menu.Content, { className: breadcrumb_module.default['breadcrumb-dropdown-content'], children: dropdownItems.map((dropdownItem, dropdownIndex) => {
+                            const { key, className: itemClassName, ...menuItemProps } = dropdownItem;
+                            return (jsxRuntime.jsx(menu.Menu.Item, { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-dropdown-item'], itemClassName), ...menuItemProps }, key ?? dropdownIndex));
+                        }) })] }) }));
+    }
+    if (disabled || current) {
+        return (jsxRuntime.jsx("li", { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-item'], className), children: jsxRuntime.jsx("span", { ref: ref, className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-link'], disabled && breadcrumb_module.default['breadcrumb-link-disabled'], current && breadcrumb_module.default['breadcrumb-link-active']), ...(disabled && {
+                    'aria-disabled': 'true',
+                    'data-disabled': 'true'
+                }), ...(current && { 'aria-current': 'page', 'data-current': 'true' }), children: label }) }));
+    }
+    return (jsxRuntime.jsx("li", { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-item'], className), children: linkElement }));
+};
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
 
 exports.BreadcrumbItem = BreadcrumbItem;
 //# sourceMappingURL=breadcrumb-item.cjs.map

package/dist/components/breadcrumb/breadcrumb-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport React, {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode\n} from 'react';\nimport { Menu } from '../menu';\nimport styles from './breadcrumb.module.css';\n\nexport interface BreadcrumbDropdownItem {\n  label: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\nexport interface BreadcrumbItemProps extends HTMLAttributes<HTMLAnchorElement> {\n  leadingIcon?: ReactNode;\n  current?: boolean;\n  dropdownItems?: BreadcrumbDropdownItem[];\n  href?: string;\n  as?: ReactElement;\n}\n\nexport const BreadcrumbItem = forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbItemProps\n>(\n  (\n    {\n      as,\n      children,\n      className,\n      leadingIcon,\n      current,\n      href,\n      dropdownItems,\n      ...props\n    },\n    ref\n  ) => {\n    const renderedElement = as ?? <a ref={ref} />;\n    const label = (\n      <>\n        {leadingIcon && (\n          <span className={styles['breadcrumb-icon']}>{leadingIcon}</span>\n        )}\n        {children && <span>{children}</span>}\n      </>\n    );\n\n    if (dropdownItems) {\n      return (\n        <Menu>\n          <Menu.Trigger className={styles['breadcrumb-dropdown-trigger']}>\n            {label}\n            <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />\n          </Menu.Trigger>\n          <Menu.Content className={styles['breadcrumb-dropdown-content']}>\n            {dropdownItems.map((dropdownItem, dropdownIndex) => (\n              <Menu.Item\n                key={dropdownIndex}\n                className={styles['breadcrumb-dropdown-item']}\n                onClick={dropdownItem?.onClick}\n              >\n                {dropdownItem.label}\n              </Menu.Item>\n            ))}\n          </Menu.Content>\n        </Menu>\n      );\n    }\n    return (\n      <li className={cx(styles['breadcrumb-item'], className)}>\n        {cloneElement(\n          renderedElement,\n          {\n            className: cx(\n              styles['breadcrumb-link'],\n              current && styles['breadcrumb-link-active']\n            ),\n            href,\n            ...props,\n            ...renderedElement.props\n          },\n          label\n        )}\n      </li>\n    );\n  }\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n"],"names":[],"mappings":";;;;;;;;;;AA2BO;;;;AA4BD;;AAoBF;AAKQ;;AAKA;;AAED;AAKT;AAGF;;"}
+{"version":3,"file":"breadcrumb-item.cjs","sources":["../../../components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps, useRender } from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport React, { ComponentProps, ReactNode } from 'react';\nimport { Menu } from '../menu';\nimport styles from './breadcrumb.module.css';\n\n/**\n * Each entry maps to `<Menu.Item>`. Use `children`, `render`, `onClick`,\n * `disabled`, etc. - whatever `Menu.Item` supports.\n */\nexport type BreadcrumbDropdownItem = ComponentProps<typeof Menu.Item> & {\n  /** Optional stable key for React list reconciliation (not passed to `Menu.Item`). */\n  key?: string;\n};\n\nexport interface BreadcrumbItemProps extends useRender.ComponentProps<'a'> {\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  current?: boolean;\n  /** When true, the item is non-clickable and visually muted (e.g. loading or no access). */\n  disabled?: boolean;\n  dropdownItems?: BreadcrumbDropdownItem[];\n}\n\nexport const BreadcrumbItem = ({\n  ref,\n  render,\n  children,\n  className,\n  leadingIcon,\n  trailingIcon,\n  current,\n  disabled,\n  href,\n  dropdownItems,\n  ...props\n}: BreadcrumbItemProps) => {\n  const label =\n    leadingIcon || trailingIcon ? (\n      <>\n        {leadingIcon && (\n          <span className={styles['breadcrumb-icon']}>{leadingIcon}</span>\n        )}\n        {children != null && <span>{children}</span>}\n        {trailingIcon && (\n          <span className={styles['breadcrumb-icon']}>{trailingIcon}</span>\n        )}\n      </>\n    ) : (\n      children\n    );\n\n  const {\n    id,\n    title,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby\n  } = props;\n\n  const linkElement = useRender({\n    defaultTagName: 'a',\n    ref,\n    render,\n    props: mergeProps<'a'>(\n      {\n        className: cx(styles['breadcrumb-link']),\n        href,\n        children: label\n      },\n      props\n    )\n  });\n\n  if (dropdownItems && !disabled) {\n    return (\n      <li className={cx(styles['breadcrumb-item'], className)}>\n        <Menu>\n          <Menu.Trigger\n            ref={ref as React.Ref<HTMLButtonElement>}\n            className={styles['breadcrumb-dropdown-trigger']}\n            id={id}\n            title={title}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-describedby={ariaDescribedby}\n          >\n            {label}\n            <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />\n          </Menu.Trigger>\n          <Menu.Content className={styles['breadcrumb-dropdown-content']}>\n            {dropdownItems.map((dropdownItem, dropdownIndex) => {\n              const {\n                key,\n                className: itemClassName,\n                ...menuItemProps\n              } = dropdownItem;\n              return (\n                <Menu.Item\n                  key={key ?? dropdownIndex}\n                  className={cx(\n                    styles['breadcrumb-dropdown-item'],\n                    itemClassName\n                  )}\n                  {...menuItemProps}\n                />\n              );\n            })}\n          </Menu.Content>\n        </Menu>\n      </li>\n    );\n  }\n\n  if (disabled || current) {\n    return (\n      <li className={cx(styles['breadcrumb-item'], className)}>\n        <span\n          ref={ref as React.RefObject<HTMLSpanElement>}\n          className={cx(\n            styles['breadcrumb-link'],\n            disabled && styles['breadcrumb-link-disabled'],\n            current && styles['breadcrumb-link-active']\n          )}\n          {...(disabled && {\n            'aria-disabled': 'true',\n            'data-disabled': 'true'\n          })}\n          {...(current && { 'aria-current': 'page', 'data-current': 'true' })}\n        >\n          {label}\n        </span>\n      </li>\n    );\n  }\n\n  return (\n    <li className={cx(styles['breadcrumb-item'], className)}>{linkElement}</li>\n  );\n};\n\nBreadcrumbItem.displayName = 'Breadcrumb.Item';\n"],"names":[],"mappings":";;;;;;;;;;AA2BO;;AA4BL;;AASE;;;;AAKI;;AAEA;AACD;AAGJ;AAED;AACE;AAiBU;;AAeF;;AAOV;;AAWU;AACA;AACD;;AAST;AAGF;AAEA;;"}

package/dist/components/breadcrumb/breadcrumb-item.d.ts

@@ -1,14 +1,24 @@
-import React, { HTMLAttributes, ReactElement, ReactNode } from 'react';
-export interface BreadcrumbDropdownItem {
-    label: string;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-}
-export interface BreadcrumbItemProps extends HTMLAttributes<HTMLAnchorElement> {
+import { useRender } from '@base-ui/react';
+import { ComponentProps, ReactNode } from 'react';
+import { Menu } from '../menu';
+/**
+ * Each entry maps to `<Menu.Item>`. Use `children`, `render`, `onClick`,
+ * `disabled`, etc. - whatever `Menu.Item` supports.
+ */
+export type BreadcrumbDropdownItem = ComponentProps<typeof Menu.Item> & {
+    /** Optional stable key for React list reconciliation (not passed to `Menu.Item`). */
+    key?: string;
+};
+export interface BreadcrumbItemProps extends useRender.ComponentProps<'a'> {
     leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
     current?: boolean;
+    /** When true, the item is non-clickable and visually muted (e.g. loading or no access). */
+    disabled?: boolean;
     dropdownItems?: BreadcrumbDropdownItem[];
-    href?: string;
-    as?: ReactElement;
 }
-export declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const BreadcrumbItem: {
+    ({ ref, render, children, className, leadingIcon, trailingIcon, current, disabled, href, dropdownItems, ...props }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=breadcrumb-item.d.ts.map

package/dist/components/breadcrumb/breadcrumb-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAGZ,cAAc,EACd,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IAC5E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,YAAY,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,+FAkE1B,CAAC"}
+{"version":3,"file":"breadcrumb-item.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAc,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG;IACtE,qFAAqF;IACrF,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC;IACxE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,sBAAsB,EAAE,CAAC;CAC1C;AAED,eAAO,MAAM,cAAc;wHAYxB,mBAAmB;;CAuGrB,CAAC"}

package/dist/components/breadcrumb/breadcrumb-item.js

@@ -1,25 +1,39 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRender, mergeProps } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { forwardRef, cloneElement } from 'react';
 import { Menu } from '../menu/menu.js';
 import styles from './breadcrumb.module.css.js';
 
-const BreadcrumbItem = forwardRef(({ as, children, className, leadingIcon, current, href, dropdownItems, ...props }, ref) => {
-    const renderedElement = as ?? jsx("a", { ref: ref });
-    const label = (jsxs(Fragment, { children: [leadingIcon && (jsx("span", { className: styles['breadcrumb-icon'], children: leadingIcon })), children && jsx("span", { children: children })] }));
-    if (dropdownItems) {
-        return (jsxs(Menu, { children: [jsxs(Menu.Trigger, { className: styles['breadcrumb-dropdown-trigger'], children: [label, jsx(ChevronDownIcon, { className: styles['breadcrumb-dropdown-icon'] })] }), jsx(Menu.Content, { className: styles['breadcrumb-dropdown-content'], children: dropdownItems.map((dropdownItem, dropdownIndex) => (jsx(Menu.Item, { className: styles['breadcrumb-dropdown-item'], onClick: dropdownItem?.onClick, children: dropdownItem.label }, dropdownIndex))) })] }));
-    }
-    return (jsx("li", { className: cx(styles['breadcrumb-item'], className), children: cloneElement(renderedElement, {
-            className: cx(styles['breadcrumb-link'], current && styles['breadcrumb-link-active']),
+const BreadcrumbItem = ({ ref, render, children, className, leadingIcon, trailingIcon, current, disabled, href, dropdownItems, ...props }) => {
+    const label = leadingIcon || trailingIcon ? (jsxs(Fragment, { children: [leadingIcon && (jsx("span", { className: styles['breadcrumb-icon'], children: leadingIcon })), children != null && jsx("span", { children: children }), trailingIcon && (jsx("span", { className: styles['breadcrumb-icon'], children: trailingIcon }))] })) : (children);
+    const { id, title, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby } = props;
+    const linkElement = useRender({
+        defaultTagName: 'a',
+        ref,
+        render,
+        props: mergeProps({
+            className: cx(styles['breadcrumb-link']),
             href,
-            ...props,
-            ...renderedElement.props
-        }, label) }));
-});
-BreadcrumbItem.displayName = 'BreadcrumbItem';
+            children: label
+        }, props)
+    });
+    if (dropdownItems && !disabled) {
+        return (jsx("li", { className: cx(styles['breadcrumb-item'], className), children: jsxs(Menu, { children: [jsxs(Menu.Trigger, { ref: ref, className: styles['breadcrumb-dropdown-trigger'], id: id, title: title, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, children: [label, jsx(ChevronDownIcon, { className: styles['breadcrumb-dropdown-icon'] })] }), jsx(Menu.Content, { className: styles['breadcrumb-dropdown-content'], children: dropdownItems.map((dropdownItem, dropdownIndex) => {
+                            const { key, className: itemClassName, ...menuItemProps } = dropdownItem;
+                            return (jsx(Menu.Item, { className: cx(styles['breadcrumb-dropdown-item'], itemClassName), ...menuItemProps }, key ?? dropdownIndex));
+                        }) })] }) }));
+    }
+    if (disabled || current) {
+        return (jsx("li", { className: cx(styles['breadcrumb-item'], className), children: jsx("span", { ref: ref, className: cx(styles['breadcrumb-link'], disabled && styles['breadcrumb-link-disabled'], current && styles['breadcrumb-link-active']), ...(disabled && {
+                    'aria-disabled': 'true',
+                    'data-disabled': 'true'
+                }), ...(current && { 'aria-current': 'page', 'data-current': 'true' }), children: label }) }));
+    }
+    return (jsx("li", { className: cx(styles['breadcrumb-item'], className), children: linkElement }));
+};
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
 
 export { BreadcrumbItem };
 //# sourceMappingURL=breadcrumb-item.js.map

package/dist/components/breadcrumb/breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","sources":["../../../components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport React, {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode\n} from 'react';\nimport { Menu } from '../menu';\nimport styles from './breadcrumb.module.css';\n\nexport interface BreadcrumbDropdownItem {\n  label: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\nexport interface BreadcrumbItemProps extends HTMLAttributes<HTMLAnchorElement> {\n  leadingIcon?: ReactNode;\n  current?: boolean;\n  dropdownItems?: BreadcrumbDropdownItem[];\n  href?: string;\n  as?: ReactElement;\n}\n\nexport const BreadcrumbItem = forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbItemProps\n>(\n  (\n    {\n      as,\n      children,\n      className,\n      leadingIcon,\n      current,\n      href,\n      dropdownItems,\n      ...props\n    },\n    ref\n  ) => {\n    const renderedElement = as ?? <a ref={ref} />;\n    const label = (\n      <>\n        {leadingIcon && (\n          <span className={styles['breadcrumb-icon']}>{leadingIcon}</span>\n        )}\n        {children && <span>{children}</span>}\n      </>\n    );\n\n    if (dropdownItems) {\n      return (\n        <Menu>\n          <Menu.Trigger className={styles['breadcrumb-dropdown-trigger']}>\n            {label}\n            <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />\n          </Menu.Trigger>\n          <Menu.Content className={styles['breadcrumb-dropdown-content']}>\n            {dropdownItems.map((dropdownItem, dropdownIndex) => (\n              <Menu.Item\n                key={dropdownIndex}\n                className={styles['breadcrumb-dropdown-item']}\n                onClick={dropdownItem?.onClick}\n              >\n                {dropdownItem.label}\n              </Menu.Item>\n            ))}\n          </Menu.Content>\n        </Menu>\n      );\n    }\n    return (\n      <li className={cx(styles['breadcrumb-item'], className)}>\n        {cloneElement(\n          renderedElement,\n          {\n            className: cx(\n              styles['breadcrumb-link'],\n              current && styles['breadcrumb-link-active']\n            ),\n            href,\n            ...props,\n            ...renderedElement.props\n          },\n          label\n        )}\n      </li>\n    );\n  }\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n"],"names":[],"mappings":";;;;;;;;AA2BO;;;;AA4BD;;AAoBF;AAKQ;;AAKA;;AAED;AAKT;AAGF;;"}
+{"version":3,"file":"breadcrumb-item.js","sources":["../../../components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps, useRender } from '@base-ui/react';\nimport { ChevronDownIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport React, { ComponentProps, ReactNode } from 'react';\nimport { Menu } from '../menu';\nimport styles from './breadcrumb.module.css';\n\n/**\n * Each entry maps to `<Menu.Item>`. Use `children`, `render`, `onClick`,\n * `disabled`, etc. - whatever `Menu.Item` supports.\n */\nexport type BreadcrumbDropdownItem = ComponentProps<typeof Menu.Item> & {\n  /** Optional stable key for React list reconciliation (not passed to `Menu.Item`). */\n  key?: string;\n};\n\nexport interface BreadcrumbItemProps extends useRender.ComponentProps<'a'> {\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  current?: boolean;\n  /** When true, the item is non-clickable and visually muted (e.g. loading or no access). */\n  disabled?: boolean;\n  dropdownItems?: BreadcrumbDropdownItem[];\n}\n\nexport const BreadcrumbItem = ({\n  ref,\n  render,\n  children,\n  className,\n  leadingIcon,\n  trailingIcon,\n  current,\n  disabled,\n  href,\n  dropdownItems,\n  ...props\n}: BreadcrumbItemProps) => {\n  const label =\n    leadingIcon || trailingIcon ? (\n      <>\n        {leadingIcon && (\n          <span className={styles['breadcrumb-icon']}>{leadingIcon}</span>\n        )}\n        {children != null && <span>{children}</span>}\n        {trailingIcon && (\n          <span className={styles['breadcrumb-icon']}>{trailingIcon}</span>\n        )}\n      </>\n    ) : (\n      children\n    );\n\n  const {\n    id,\n    title,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby\n  } = props;\n\n  const linkElement = useRender({\n    defaultTagName: 'a',\n    ref,\n    render,\n    props: mergeProps<'a'>(\n      {\n        className: cx(styles['breadcrumb-link']),\n        href,\n        children: label\n      },\n      props\n    )\n  });\n\n  if (dropdownItems && !disabled) {\n    return (\n      <li className={cx(styles['breadcrumb-item'], className)}>\n        <Menu>\n          <Menu.Trigger\n            ref={ref as React.Ref<HTMLButtonElement>}\n            className={styles['breadcrumb-dropdown-trigger']}\n            id={id}\n            title={title}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-describedby={ariaDescribedby}\n          >\n            {label}\n            <ChevronDownIcon className={styles['breadcrumb-dropdown-icon']} />\n          </Menu.Trigger>\n          <Menu.Content className={styles['breadcrumb-dropdown-content']}>\n            {dropdownItems.map((dropdownItem, dropdownIndex) => {\n              const {\n                key,\n                className: itemClassName,\n                ...menuItemProps\n              } = dropdownItem;\n              return (\n                <Menu.Item\n                  key={key ?? dropdownIndex}\n                  className={cx(\n                    styles['breadcrumb-dropdown-item'],\n                    itemClassName\n                  )}\n                  {...menuItemProps}\n                />\n              );\n            })}\n          </Menu.Content>\n        </Menu>\n      </li>\n    );\n  }\n\n  if (disabled || current) {\n    return (\n      <li className={cx(styles['breadcrumb-item'], className)}>\n        <span\n          ref={ref as React.RefObject<HTMLSpanElement>}\n          className={cx(\n            styles['breadcrumb-link'],\n            disabled && styles['breadcrumb-link-disabled'],\n            current && styles['breadcrumb-link-active']\n          )}\n          {...(disabled && {\n            'aria-disabled': 'true',\n            'data-disabled': 'true'\n          })}\n          {...(current && { 'aria-current': 'page', 'data-current': 'true' })}\n        >\n          {label}\n        </span>\n      </li>\n    );\n  }\n\n  return (\n    <li className={cx(styles['breadcrumb-item'], className)}>{linkElement}</li>\n  );\n};\n\nBreadcrumbItem.displayName = 'Breadcrumb.Item';\n"],"names":[],"mappings":";;;;;;;;AA2BO;;AA4BL;;AASE;;;;AAKI;;AAEA;AACD;AAGJ;AAED;AACE;AAiBU;;AAeF;;AAOV;;AAWU;AACA;AACD;;AAST;AAGF;AAEA;;"}

package/dist/components/breadcrumb/breadcrumb-misc.cjs

@@ -4,17 +4,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactIcons = require('@radix-ui/react-icons');
 var classVarianceAuthority = require('class-variance-authority');
-var React = require('react');
 var breadcrumb_module = require('./breadcrumb.module.css.cjs');
 
-const BreadcrumbEllipsis = React.forwardRef(({ className, children = jsxRuntime.jsx(reactIcons.DotsHorizontalIcon, { width: 20, height: 20 }), ...props }, ref) => {
-    return (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-ellipsis'], className), ref: ref, ...props, children: children }));
-});
-BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
-const BreadcrumbSeparator = React.forwardRef(({ children = jsxRuntime.jsx(reactIcons.ChevronRightIcon, { width: 12, height: 12 }), className, ...props }, ref) => {
-    return (jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-separator'], className), ref: ref, ...props, children: children }));
-});
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+const BreadcrumbEllipsis = ({ ref, className, children = jsxRuntime.jsx(reactIcons.DotsHorizontalIcon, { width: 20, height: 20 }), ...props }) => {
+    return (jsxRuntime.jsx("li", { className: breadcrumb_module.default['breadcrumb-item'], role: 'presentation', "aria-hidden": 'true', children: jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-ellipsis'], className), ref: ref, ...props, children: children }) }));
+};
+BreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis';
+const BreadcrumbSeparator = ({ ref, children = jsxRuntime.jsx(reactIcons.ChevronRightIcon, { width: 12, height: 12 }), className, ...props }) => {
+    return (jsxRuntime.jsx("li", { className: breadcrumb_module.default['breadcrumb-item'], role: 'presentation', "aria-hidden": 'true', children: jsxRuntime.jsx("span", { className: classVarianceAuthority.cx(breadcrumb_module.default['breadcrumb-separator'], className), ref: ref, role: 'presentation', "aria-hidden": 'true', ...props, children: children }) }));
+};
+BreadcrumbSeparator.displayName = 'Breadcrumb.Separator';
 
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbSeparator = BreadcrumbSeparator;

package/dist/components/breadcrumb/breadcrumb-misc.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-misc.cjs","sources":["../../../components/breadcrumb/breadcrumb-misc.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport { HTMLAttributes, forwardRef } from 'react';\nimport styles from './breadcrumb.module.css';\n\nexport interface BreadcrumbEllipsisProps\n  extends HTMLAttributes<HTMLSpanElement> {}\n\nexport const BreadcrumbEllipsis = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbEllipsisProps\n>(\n  (\n    {\n      className,\n      children = <DotsHorizontalIcon width={20} height={20} />,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <span\n        className={cx(styles['breadcrumb-ellipsis'], className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n\nexport interface BreadcrumbSeparatorProps\n  extends HTMLAttributes<HTMLSpanElement> {}\n\nexport const BreadcrumbSeparator = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbSeparatorProps\n>(\n  (\n    {\n      children = <ChevronRightIcon width={12} height={12} />,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <span\n        className={cx(styles['breadcrumb-separator'], className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator';\n"],"names":[],"mappings":";;;;;;;;;AAUO;;AAqBL;AAGF;AAKO;;AAqBL;AAGF;;;"}
+{"version":3,"file":"breadcrumb-misc.cjs","sources":["../../../components/breadcrumb/breadcrumb-misc.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\nimport styles from './breadcrumb.module.css';\n\nexport interface BreadcrumbEllipsisProps extends ComponentProps<'span'> {}\n\nexport const BreadcrumbEllipsis = ({\n  ref,\n  className,\n  children = <DotsHorizontalIcon width={20} height={20} />,\n  ...props\n}: BreadcrumbEllipsisProps) => {\n  return (\n    <li\n      className={styles['breadcrumb-item']}\n      role='presentation'\n      aria-hidden='true'\n    >\n      <span\n        className={cx(styles['breadcrumb-ellipsis'], className)}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    </li>\n  );\n};\n\nBreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis';\n\nexport interface BreadcrumbSeparatorProps extends ComponentProps<'span'> {}\n\nexport const BreadcrumbSeparator = ({\n  ref,\n  children = <ChevronRightIcon width={12} height={12} />,\n  className,\n  ...props\n}: BreadcrumbSeparatorProps) => {\n  return (\n    <li\n      className={styles['breadcrumb-item']}\n      role='presentation'\n      aria-hidden='true'\n    >\n      <span\n        className={cx(styles['breadcrumb-separator'], className)}\n        ref={ref}\n        role='presentation'\n        aria-hidden='true'\n        {...props}\n      >\n        {children}\n      </span>\n    </li>\n  );\n};\n\nBreadcrumbSeparator.displayName = 'Breadcrumb.Separator';\n"],"names":[],"mappings":";;;;;;;;AASO;AAML;AAeF;AAEA;AAIO;;AAuBP;AAEA;;;"}

package/dist/components/breadcrumb/breadcrumb-misc.d.ts

@@ -1,8 +1,14 @@
-import { HTMLAttributes } from 'react';
-export interface BreadcrumbEllipsisProps extends HTMLAttributes<HTMLSpanElement> {
+import { ComponentProps } from 'react';
+export interface BreadcrumbEllipsisProps extends ComponentProps<'span'> {
 }
-export declare const BreadcrumbEllipsis: import("react").ForwardRefExoticComponent<BreadcrumbEllipsisProps & import("react").RefAttributes<HTMLSpanElement>>;
-export interface BreadcrumbSeparatorProps extends HTMLAttributes<HTMLSpanElement> {
+export declare const BreadcrumbEllipsis: {
+    ({ ref, className, children, ...props }: BreadcrumbEllipsisProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface BreadcrumbSeparatorProps extends ComponentProps<'span'> {
 }
-export declare const BreadcrumbSeparator: import("react").ForwardRefExoticComponent<BreadcrumbSeparatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const BreadcrumbSeparator: {
+    ({ ref, children, className, ...props }: BreadcrumbSeparatorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=breadcrumb-misc.d.ts.map

package/dist/components/breadcrumb/breadcrumb-misc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-misc.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb-misc.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,uBACf,SAAQ,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,kBAAkB,qHAsB9B,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAsB/B,CAAC"}
+{"version":3,"file":"breadcrumb-misc.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb-misc.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AAE1E,eAAO,MAAM,kBAAkB;6CAK5B,uBAAuB;;CAgBzB,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AAE3E,eAAO,MAAM,mBAAmB;6CAK7B,wBAAwB;;CAkB1B,CAAC"}