@shipfox/react-ui 0.3.0 → 0.4.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/badge.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport React from 'react';\nimport {Badge, IconBadge, StatusBadge, UserBadge} from '.';\n\nconst meta = {\n  title: 'Components/Badge',\n  component: Badge,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Badge>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const AllVariants: Story = {\n  render: () => (\n    <div className=\"flex flex-col gap-32\">\n      {/* STATUS BADGE */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Status Badge\n        </Code>\n        <div className=\"flex gap-16\">\n          <StatusBadge variant=\"neutral\">Badge</StatusBadge>\n          <StatusBadge variant=\"info\">Badge</StatusBadge>\n          <StatusBadge variant=\"feature\">Badge</StatusBadge>\n          <StatusBadge variant=\"success\" dotClassName=\"size-5 rounded-full\">\n            Badge\n          </StatusBadge>\n          <StatusBadge variant=\"warning\">Badge</StatusBadge>\n          <StatusBadge variant=\"error\">Badge</StatusBadge>\n        </div>\n      </div>\n\n      {/* USER BADGE */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          User Badge\n        </Code>\n        <div className=\"flex gap-16\">\n          <UserBadge\n            name=\"Thierry Abalea\"\n            avatarSrc=\"https://avatars.githubusercontent.com/u/1290899?v=4\"\n          />\n          <UserBadge\n            name=\"Kyle Nguyen\"\n            avatarSrc=\"https://avatars.githubusercontent.com/u/89263955?v=4\"\n          />\n          <UserBadge\n            name=\"Noe Charmet\"\n            avatarSrc=\"https://avatars.githubusercontent.com/u/59678972?v=4\"\n          />\n        </div>\n      </div>\n\n      {/* ICON BADGE */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Icon Badge\n        </Code>\n        <div className=\"flex gap-16\">\n          <IconBadge variant=\"neutral\" name=\"homeSmile\" />\n          <IconBadge variant=\"info\" name=\"homeSmile\" />\n          <IconBadge variant=\"feature\" name=\"homeSmile\" />\n          <IconBadge variant=\"success\" name=\"homeSmile\" />\n          <IconBadge variant=\"primary\" name=\"homeSmile\" />\n          <IconBadge variant=\"error\" name=\"homeSmile\" />\n        </div>\n      </div>\n\n      {/* BADGE - 2XS SIZE */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Badge - 2XS Size\n        </Code>\n        <div className=\"flex flex-col gap-16\">\n          {/* Base */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"2xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"2xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"2xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"2xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"2xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"2xs\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* With Right Icon */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"2xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"2xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"2xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"2xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"2xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"2xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* With Left Icon */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"2xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"2xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"2xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"2xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"2xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"2xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n          </div>\n        </div>\n      </div>\n\n      {/* BADGE - XS SIZE */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Badge - XS Size\n        </Code>\n        <div className=\"flex flex-col gap-16\">\n          {/* Base */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"xs\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"xs\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* With Right Icon */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"xs\" iconRight=\"close\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* With Left Icon */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"xs\" iconLeft=\"close\">\n              Badge\n            </Badge>\n          </div>\n        </div>\n      </div>\n\n      {/* BADGE - ROUNDED */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Badge - Rounded\n        </Code>\n        <div className=\"flex flex-col gap-16\">\n          {/* Base - 2XS */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"2xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"2xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"2xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"2xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"2xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"2xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* Base - XS */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"xs\" radius=\"rounded\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* With Right Icon - 2XS */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"2xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"2xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"2xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"2xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"2xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"2xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* With Right Icon - XS */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"xs\" radius=\"rounded\" iconRight=\"close\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* With Left Icon - 2XS */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"2xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"2xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"2xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"2xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"2xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"2xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n          </div>\n\n          {/* With Left Icon - XS */}\n          <div className=\"flex gap-16\">\n            <Badge variant=\"neutral\" size=\"xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"info\" size=\"xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"feature\" size=\"xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"success\" size=\"xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"warning\" size=\"xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n            <Badge variant=\"error\" size=\"xs\" radius=\"rounded\" iconLeft=\"close\">\n              Badge\n            </Badge>\n          </div>\n        </div>\n      </div>\n\n      {/* BETA BADGE */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Beta Badge\n        </Code>\n        <div className=\"flex gap-16\">\n          <Badge variant=\"info\" size=\"2xs\" radius=\"rounded\">\n            Beta\n          </Badge>\n        </div>\n      </div>\n    </div>\n  ),\n};\n\n// Interactive badges with click handlers\nfunction InteractiveBadgesComponent() {\n  const [tags, setTags] = React.useState(['React', 'TypeScript', 'Next.js', 'Tailwind']);\n\n  const removeTag = (tagToRemove: string) => {\n    setTags(tags.filter((tag) => tag !== tagToRemove));\n  };\n\n  return (\n    <div className=\"flex flex-col gap-32\">\n      {/* Removable tags */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Interactive Badges - Removable Tags\n        </Code>\n        <div className=\"flex flex-wrap gap-8\">\n          {tags.map((tag) => (\n            <Badge\n              key={tag}\n              variant=\"neutral\"\n              size=\"xs\"\n              radius=\"rounded\"\n              iconRight=\"close\"\n              onIconRightClick={() => removeTag(tag)}\n              iconRightAriaLabel={`Remove ${tag} tag`}\n            >\n              {tag}\n            </Badge>\n          ))}\n        </div>\n      </div>\n\n      {/* Different variants with interactive icons */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Interactive Badges - Different Variants\n        </Code>\n        <div className=\"flex flex-wrap gap-8\">\n          <Badge\n            variant=\"success\"\n            size=\"xs\"\n            iconRight=\"close\"\n            onIconRightClick={() => alert('Success badge clicked!')}\n            iconRightAriaLabel=\"Remove success badge\"\n          >\n            Completed\n          </Badge>\n          <Badge\n            variant=\"warning\"\n            size=\"xs\"\n            iconRight=\"close\"\n            onIconRightClick={() => alert('Warning badge clicked!')}\n            iconRightAriaLabel=\"Remove warning badge\"\n          >\n            Pending\n          </Badge>\n          <Badge\n            variant=\"error\"\n            size=\"xs\"\n            iconRight=\"close\"\n            onIconRightClick={() => alert('Error badge clicked!')}\n            iconRightAriaLabel=\"Remove error badge\"\n          >\n            Failed\n          </Badge>\n        </div>\n      </div>\n\n      {/* Non-interactive icons (static) */}\n      <div>\n        <Code variant=\"label\" className=\"mb-16\">\n          Static Icons (Non-interactive)\n        </Code>\n        <div className=\"flex flex-wrap gap-8\">\n          <Badge variant=\"info\" size=\"xs\" iconLeft=\"info\">\n            Information\n          </Badge>\n          <Badge variant=\"success\" size=\"xs\" iconLeft=\"check\">\n            Verified\n          </Badge>\n          <Badge variant=\"feature\" size=\"xs\" iconLeft=\"money\">\n            Premium\n          </Badge>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const InteractiveBadges: Story = {\n  render: () => <InteractiveBadgesComponent />,\n};\n"],"names":["Code","React","Badge","IconBadge","StatusBadge","UserBadge","meta","title","component","parameters","layout","tags","AllVariants","render","div","className","variant","dotClassName","name","avatarSrc","size","iconRight","iconLeft","radius","InteractiveBadgesComponent","setTags","useState","removeTag","tagToRemove","filter","tag","map","onIconRightClick","iconRightAriaLabel","alert","InteractiveBadges"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import { type IconName } from '../../components/icon';
+import type { ComponentProps } from 'react';
+export type IconBadgeVariant = 'neutral' | 'info' | 'feature' | 'success' | 'primary' | 'error';
+export type IconBadgeProps = ComponentProps<'span'> & {
+    variant?: IconBadgeVariant;
+    name?: IconName;
+};
+export declare function IconBadge({ className, variant, name, ...props }: IconBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/icon-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhG,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IACpD,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAoBF,wBAAgB,SAAS,CAAC,EAAC,SAAS,EAAE,OAAmB,EAAE,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,2CAazF"}

package/dist/components/badge/icon-badge.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+const variantStyles = {
+    neutral: 'bg-tag-neutral-bg border-tag-neutral-border',
+    info: 'bg-tag-blue-bg border-tag-blue-border',
+    feature: 'bg-tag-purple-bg border-tag-purple-border',
+    success: 'bg-tag-success-bg border-tag-success-border',
+    primary: 'bg-tag-warning-bg border-tag-warning-border',
+    error: 'bg-tag-error-bg border-tag-error-border'
+};
+const iconColorStyles = {
+    neutral: 'text-tag-neutral-icon',
+    info: 'text-tag-blue-icon',
+    feature: 'text-tag-purple-icon',
+    success: 'text-tag-success-icon',
+    primary: 'text-tag-warning-icon',
+    error: 'text-tag-error-icon'
+};
+export function IconBadge({ className, variant = 'neutral', name, ...props }) {
+    return /*#__PURE__*/ _jsx("span", {
+        className: cn('inline-flex size-20 items-center justify-center rounded-6 border', variantStyles[variant], className),
+        ...props,
+        children: name && /*#__PURE__*/ _jsx(Icon, {
+            name: name,
+            className: cn('shrink-0', iconColorStyles[variant]),
+            size: 12
+        })
+    });
+}
+
+//# sourceMappingURL=icon-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/icon-badge.tsx"],"sourcesContent":["import {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport type IconBadgeVariant = 'neutral' | 'info' | 'feature' | 'success' | 'primary' | 'error';\n\nexport type IconBadgeProps = ComponentProps<'span'> & {\n  variant?: IconBadgeVariant;\n  name?: IconName;\n};\n\nconst variantStyles: Record<IconBadgeVariant, string> = {\n  neutral: 'bg-tag-neutral-bg border-tag-neutral-border',\n  info: 'bg-tag-blue-bg border-tag-blue-border',\n  feature: 'bg-tag-purple-bg border-tag-purple-border',\n  success: 'bg-tag-success-bg border-tag-success-border',\n  primary: 'bg-tag-warning-bg border-tag-warning-border',\n  error: 'bg-tag-error-bg border-tag-error-border',\n};\n\nconst iconColorStyles: Record<IconBadgeVariant, string> = {\n  neutral: 'text-tag-neutral-icon',\n  info: 'text-tag-blue-icon',\n  feature: 'text-tag-purple-icon',\n  success: 'text-tag-success-icon',\n  primary: 'text-tag-warning-icon',\n  error: 'text-tag-error-icon',\n};\n\nexport function IconBadge({className, variant = 'neutral', name, ...props}: IconBadgeProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex size-20 items-center justify-center rounded-6 border',\n        variantStyles[variant],\n        className,\n      )}\n      {...props}\n    >\n      {name && <Icon name={name} className={cn('shrink-0', iconColorStyles[variant])} size={12} />}\n    </span>\n  );\n}\n"],"names":["Icon","cn","variantStyles","neutral","info","feature","success","primary","error","iconColorStyles","IconBadge","className","variant","name","props","span","size"],"mappings":";AAAA,SAAQA,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAS5B,MAAMC,gBAAkD;IACtDC,SAAS;IACTC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,OAAO;AACT;AAEA,MAAMC,kBAAoD;IACxDN,SAAS;IACTC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,OAAO;AACT;AAEA,OAAO,SAASE,UAAU,EAACC,SAAS,EAAEC,UAAU,SAAS,EAAEC,IAAI,EAAE,GAAGC,OAAsB;IACxF,qBACE,KAACC;QACCJ,WAAWV,GACT,oEACAC,aAAa,CAACU,QAAQ,EACtBD;QAED,GAAGG,KAAK;kBAERD,sBAAQ,KAACb;YAAKa,MAAMA;YAAMF,WAAWV,GAAG,YAAYQ,eAAe,CAACG,QAAQ;YAAGI,MAAM;;;AAG5F"}

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

@@ -0,0 +1,5 @@
+export { Badge, type BadgeProps, type BadgeVariant, badgeVariants } from './badge';
+export { IconBadge, type IconBadgeProps, type IconBadgeVariant } from './icon-badge';
+export { StatusBadge, type StatusBadgeProps } from './status-badge';
+export { UserBadge, type UserBadgeProps } from './user-badge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjF,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAC,MAAM,cAAc,CAAC;AACnF,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,cAAc,CAAC"}

package/dist/components/badge/index.js

@@ -0,0 +1,6 @@
+export { Badge, badgeVariants } from './badge.js';
+export { IconBadge } from './icon-badge.js';
+export { StatusBadge } from './status-badge.js';
+export { UserBadge } from './user-badge.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/index.ts"],"sourcesContent":["export {Badge, type BadgeProps, type BadgeVariant, badgeVariants} from './badge';\nexport {IconBadge, type IconBadgeProps, type IconBadgeVariant} from './icon-badge';\nexport {StatusBadge, type StatusBadgeProps} from './status-badge';\nexport {UserBadge, type UserBadgeProps} from './user-badge';\n"],"names":["Badge","badgeVariants","IconBadge","StatusBadge","UserBadge"],"mappings":"AAAA,SAAQA,KAAK,EAAsCC,aAAa,QAAO,UAAU;AACjF,SAAQC,SAAS,QAAmD,eAAe;AACnF,SAAQC,WAAW,QAA8B,iBAAiB;AAClE,SAAQC,SAAS,QAA4B,eAAe"}

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

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+export type StatusBadgeProps = ComponentProps<'span'> & {
+    variant?: StatusVariant;
+    dotClassName?: string;
+};
+type StatusVariant = 'neutral' | 'info' | 'feature' | 'success' | 'warning' | 'error';
+export declare function StatusBadge({ className, variant, children, dotClassName, ...props }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=status-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status-badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/status-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAI1C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAWtF,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAgBlB"}

package/dist/components/badge/status-badge.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+import { badgeVariants } from './badge.js';
+const dotVariantStyles = {
+    neutral: 'bg-tag-neutral-icon',
+    info: 'bg-tag-blue-icon',
+    feature: 'bg-tag-purple-icon',
+    success: 'bg-tag-success-icon',
+    warning: 'bg-tag-warning-icon',
+    error: 'bg-tag-error-icon'
+};
+export function StatusBadge({ className, variant = 'neutral', children, dotClassName, ...props }) {
+    return /*#__PURE__*/ _jsxs("span", {
+        className: cn(badgeVariants({
+            variant,
+            size: '2xs',
+            radius: 'default'
+        }), 'gap-6', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: cn('size-8.5 rounded-2 shrink-0', dotVariantStyles[variant], dotClassName)
+            }),
+            children
+        ]
+    });
+}
+
+//# sourceMappingURL=status-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/status-badge.tsx"],"sourcesContent":["import type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\nimport {badgeVariants} from './badge';\n\nexport type StatusBadgeProps = ComponentProps<'span'> & {\n  variant?: StatusVariant;\n  dotClassName?: string;\n};\n\ntype StatusVariant = 'neutral' | 'info' | 'feature' | 'success' | 'warning' | 'error';\n\nconst dotVariantStyles: Record<StatusVariant, string> = {\n  neutral: 'bg-tag-neutral-icon',\n  info: 'bg-tag-blue-icon',\n  feature: 'bg-tag-purple-icon',\n  success: 'bg-tag-success-icon',\n  warning: 'bg-tag-warning-icon',\n  error: 'bg-tag-error-icon',\n};\n\nexport function StatusBadge({\n  className,\n  variant = 'neutral',\n  children,\n  dotClassName,\n  ...props\n}: StatusBadgeProps) {\n  return (\n    <span\n      className={cn(badgeVariants({variant, size: '2xs', radius: 'default'}), 'gap-6', className)}\n      {...props}\n    >\n      <span\n        className={cn(\n          'size-8.5 rounded-2 shrink-0',\n          dotVariantStyles[variant as StatusVariant],\n          dotClassName,\n        )}\n      />\n      {children}\n    </span>\n  );\n}\n"],"names":["cn","badgeVariants","dotVariantStyles","neutral","info","feature","success","warning","error","StatusBadge","className","variant","children","dotClassName","props","span","size","radius"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAC5B,SAAQC,aAAa,QAAO,UAAU;AAStC,MAAMC,mBAAkD;IACtDC,SAAS;IACTC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,OAAO;AACT;AAEA,OAAO,SAASC,YAAY,EAC1BC,SAAS,EACTC,UAAU,SAAS,EACnBC,QAAQ,EACRC,YAAY,EACZ,GAAGC,OACc;IACjB,qBACE,MAACC;QACCL,WAAWV,GAAGC,cAAc;YAACU;YAASK,MAAM;YAAOC,QAAQ;QAAS,IAAI,SAASP;QAChF,GAAGI,KAAK;;0BAET,KAACC;gBACCL,WAAWV,GACT,+BACAE,gBAAgB,CAACS,QAAyB,EAC1CE;;YAGHD;;;AAGP"}

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

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+export type UserBadgeProps = ComponentProps<'button'> & {
+    name: string;
+    avatarSrc?: string;
+    avatarFallback?: string;
+};
+export declare function UserBadge({ className, name, avatarSrc, avatarFallback, ...props }: UserBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=user-badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"user-badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/user-badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,QAAQ,CAAC,GAAG;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,2CAuB/F"}

package/dist/components/badge/user-badge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '../../components/avatar/index.js';
+import { cn } from '../../utils/cn.js';
+export function UserBadge({ className, name, avatarSrc, avatarFallback, ...props }) {
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        className: cn('inline-flex items-center gap-6 rounded-full px-6 py-2 text-xs font-medium leading-20', 'bg-background-components-base hover:bg-background-components-hover active:bg-background-components-pressed', 'text-foreground-neutral-base transition-colors', 'border border-border-neutral-base-component', 'h-28', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Avatar, {
+                className: "size-16 shrink-0",
+                content: "image",
+                src: avatarSrc,
+                fallback: avatarFallback
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "whitespace-nowrap",
+                children: name
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=user-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/user-badge.tsx"],"sourcesContent":["import {Avatar} from 'components/avatar';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport type UserBadgeProps = ComponentProps<'button'> & {\n  name: string;\n  avatarSrc?: string;\n  avatarFallback?: string;\n};\n\nexport function UserBadge({className, name, avatarSrc, avatarFallback, ...props}: UserBadgeProps) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        'inline-flex items-center gap-6 rounded-full px-6 py-2 text-xs font-medium leading-20',\n        'bg-background-components-base hover:bg-background-components-hover active:bg-background-components-pressed',\n        'text-foreground-neutral-base transition-colors',\n        'border border-border-neutral-base-component',\n        'h-28',\n        className,\n      )}\n      {...props}\n    >\n      <Avatar\n        className=\"size-16 shrink-0\"\n        content=\"image\"\n        src={avatarSrc}\n        fallback={avatarFallback}\n      />\n      <span className=\"whitespace-nowrap\">{name}</span>\n    </button>\n  );\n}\n"],"names":["Avatar","cn","UserBadge","className","name","avatarSrc","avatarFallback","props","button","type","content","src","fallback","span"],"mappings":";AAAA,SAAQA,MAAM,QAAO,oBAAoB;AAEzC,SAAQC,EAAE,QAAO,WAAW;AAQ5B,OAAO,SAASC,UAAU,EAACC,SAAS,EAAEC,IAAI,EAAEC,SAAS,EAAEC,cAAc,EAAE,GAAGC,OAAsB;IAC9F,qBACE,MAACC;QACCC,MAAK;QACLN,WAAWF,GACT,wFACA,8GACA,kDACA,+CACA,QACAE;QAED,GAAGI,KAAK;;0BAET,KAACP;gBACCG,WAAU;gBACVO,SAAQ;gBACRC,KAAKN;gBACLO,UAAUN;;0BAEZ,KAACO;gBAAKV,WAAU;0BAAqBC;;;;AAG3C"}

package/dist/components/{button.d.ts → button/button.d.ts}

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../components/icon';
 import type { ComponentProps } from 'react';
-import { type IconName } from './icon/icon';
 export declare const buttonVariants: (props?: ({
     variant?: "transparent" | "primary" | "secondary" | "danger" | "transparentMuted" | null | undefined;
     size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,cAAc;;;8EA8B1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GACzB,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;CACtB,2CAUF"}

package/dist/components/{button.js → button/button.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { cn } from '../utils/cn.js';
-import { Icon } from './icon/icon.js';
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
 export const buttonVariants = cva('rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none', {
     variants: {
         variant: {

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const buttonVariants = cva(\n  'rounded-6 inline-flex items-center justify-center whitespace-nowrap transition-colors disabled:pointer-events-none shrink-0 outline-none',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-background-button-inverted-default text-foreground-contrast-primary shadow-button-inverted hover:bg-background-button-inverted-hover active:bg-background-button-inverted-pressed focus-visible:shadow-button-inverted-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        secondary:\n          'bg-background-button-neutral-default text-foreground-neutral-base shadow-button-neutral hover:bg-background-button-neutral-hover active:bg-background-button-neutral-pressed disabled:bg-background-neutral-disabled focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        danger:\n          'bg-background-button-danger-default text-foreground-neutral-on-color shadow-button-danger hover:bg-background-button-danger-hover active:bg-background-button-danger-pressed focus-visible:shadow-button-danger-focus disabled:bg-background-neutral-disabled disabled:text-foreground-neutral-disabled disabled:shadow-none',\n        transparent:\n          'bg-background-button-transparent-default text-foreground-neutral-base hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n        transparentMuted:\n          'bg-background-button-transparent-default text-foreground-neutral-muted hover:bg-background-button-transparent-hover active:bg-background-button-transparent-pressed focus-visible:shadow-button-neutral-focus disabled:text-foreground-neutral-disabled',\n      },\n      size: {\n        '2xs': 'px-6 text-xs gap-4',\n        xs: 'px-6 py-2 text-xs gap-4',\n        sm: 'px-8 py-4 text-sm gap-6',\n        md: 'px-10 py-6 text-md gap-8',\n        lg: 'px-12 py-8 text-lg gap-8',\n        xl: 'px-12 py-10 text-xl gap-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\nexport function Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  ...props\n}: ComponentProps<'button'> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n    iconLeft?: IconName;\n    iconRight?: IconName;\n  }) {\n  const Comp = asChild ? Slot : 'button';\n\n  return (\n    <Comp data-slot=\"button\" className={cn(buttonVariants({variant, size, className}))} {...props}>\n      {iconLeft && <Icon name={iconLeft} />}\n      {children}\n      {iconRight && <Icon name={iconRight} />}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","buttonVariants","variants","variant","primary","secondary","danger","transparent","transparentMuted","size","xs","sm","md","lg","xl","defaultVariants","Button","className","asChild","children","iconLeft","iconRight","props","Comp","data-slot","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,iBAAiBH,IAC5B,4IACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,WACE;YACFC,QACE;YACFC,aACE;YACFC,kBACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;YACJC,IAAI;QACN;IACF;IACAC,iBAAiB;QACfZ,SAAS;QACTM,MAAM;IACR;AACF,GACA;AAEF,OAAO,SAASO,OAAO,EACrBC,SAAS,EACTd,OAAO,EACPM,IAAI,EACJS,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACT,GAAGC,OAMF;IACD,MAAMC,OAAOL,UAAUrB,OAAO;IAE9B,qBACE,MAAC0B;QAAKC,aAAU;QAASP,WAAWjB,GAAGC,eAAe;YAACE;YAASM;YAAMQ;QAAS;QAAM,GAAGK,KAAK;;YAC1FF,0BAAY,KAACrB;gBAAK0B,MAAML;;YACxBD;YACAE,2BAAa,KAACtB;gBAAK0B,MAAMJ;;;;AAGhC"}

package/dist/components/{button.stories.js → button/button.stories.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Code } from '../components/typography/index.js';
+import { Code } from '../../components/typography/index.js';
 import { Button } from './button.js';
 const variantOptions = [
     'primary',

package/dist/components/button/button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/button.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code} from 'components/typography';\nimport {Button} from './button';\n\nconst variantOptions = [\n  'primary',\n  'secondary',\n  'danger',\n  'transparent',\n  'transparentMuted',\n] as const;\nconst sizeOptions = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const;\n\nconst meta = {\n  title: 'Components/Button',\n  component: Button,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: variantOptions,\n    },\n    size: {\n      control: 'select',\n      options: sizeOptions,\n    },\n    asChild: {control: 'boolean'},\n  },\n  args: {\n    children: 'Click me',\n    variant: 'primary',\n    size: 'md',\n  },\n} satisfies Meta<typeof Button>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {};\n\nexport const Variants: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-32\">\n      {sizeOptions.map((size) => (\n        <table key={size} className=\"w-fit border-separate border-spacing-x-32 border-spacing-y-16\">\n          <thead>\n            <tr>\n              <th>{size}</th>\n              <th>Default</th>\n              <th>Hover</th>\n              <th>Active</th>\n              <th>Focus</th>\n              <th>Disabled</th>\n            </tr>\n          </thead>\n          <tbody>\n            {variantOptions.map((variant) => (\n              <tr key={variant}>\n                <td>\n                  <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n                    {variant}\n                  </Code>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"hover\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"active\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} className=\"focus\" size={size}>\n                    Click me\n                  </Button>\n                </td>\n                <td>\n                  <Button {...args} variant={variant} disabled size={size}>\n                    Click me\n                  </Button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      ))}\n    </div>\n  ),\n};\n\nVariants.parameters = {\n  pseudo: {\n    hover: '.hover',\n    active: '.active',\n    focusVisible: '.focus',\n  },\n};\n\nexport const Icons: Story = {\n  render: (args) => (\n    <div className=\"flex flex-col gap-16\">\n      <div>\n        <Button {...args} iconLeft=\"google\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n      <div>\n        <Button {...args} iconLeft=\"google\" iconRight=\"microsoft\">\n          Click me\n        </Button>\n      </div>\n    </div>\n  ),\n};\n"],"names":["Code","Button","variantOptions","sizeOptions","meta","title","component","tags","argTypes","variant","control","options","size","asChild","args","children","Default","Variants","render","div","className","map","table","thead","tr","th","tbody","td","disabled","parameters","pseudo","hover","active","focusVisible","Icons","iconLeft","iconRight"],"mappings":";AACA,SAAQA,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,MAAM,QAAO,WAAW;AAEhC,MAAMC,iBAAiB;IACrB;IACA;IACA;IACA;IACA;CACD;AACD,MAAMC,cAAc;IAAC;IAAO;IAAM;IAAM;IAAM;IAAM;CAAK;AAEzD,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWL;IACXM,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAST;QACX;QACAU,MAAM;YACJF,SAAS;YACTC,SAASR;QACX;QACAU,SAAS;YAACH,SAAS;QAAS;IAC9B;IACAI,MAAM;QACJC,UAAU;QACVN,SAAS;QACTG,MAAM;IACR;AACF;AAEA,eAAeR,KAAK;AAGpB,OAAO,MAAMY,UAAiB,CAAC,EAAE;AAEjC,OAAO,MAAMC,WAAkB;IAC7BC,QAAQ,CAACJ,qBACP,KAACK;YAAIC,WAAU;sBACZjB,YAAYkB,GAAG,CAAC,CAACT,qBAChB,MAACU;oBAAiBF,WAAU;;sCAC1B,KAACG;sCACC,cAAA,MAACC;;kDACC,KAACC;kDAAIb;;kDACL,KAACa;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;kDACJ,KAACA;kDAAG;;;;;sCAGR,KAACC;sCACExB,eAAemB,GAAG,CAAC,CAACZ,wBACnB,MAACe;;sDACC,KAACG;sDACC,cAAA,KAAC3B;gDAAKS,SAAQ;gDAAQW,WAAU;0DAC7BX;;;sDAGL,KAACkB;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASG,MAAMA;0DAAM;;;sDAIlD,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAASR,MAAMA;0DAAM;;;sDAIrE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASW,WAAU;gDAAQR,MAAMA;0DAAM;;;sDAIpE,KAACe;sDACC,cAAA,KAAC1B;gDAAQ,GAAGa,IAAI;gDAAEL,SAASA;gDAASmB,QAAQ;gDAAChB,MAAMA;0DAAM;;;;mCA3BpDH;;;mBAbHG;;AAmDpB,EAAE;AAEFK,SAASY,UAAU,GAAG;IACpBC,QAAQ;QACNC,OAAO;QACPC,QAAQ;QACRC,cAAc;IAChB;AACF;AAEA,OAAO,MAAMC,QAAe;IAC1BhB,QAAQ,CAACJ,qBACP,MAACK;YAAIC,WAAU;;8BACb,KAACD;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEqB,UAAS;kCAAS;;;8BAItC,KAAChB;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEsB,WAAU;kCAAY;;;8BAI1C,KAACjB;8BACC,cAAA,KAAClB;wBAAQ,GAAGa,IAAI;wBAAEqB,UAAS;wBAASC,WAAU;kCAAY;;;;;AAMlE,EAAE"}

package/dist/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/components/button/index.js

@@ -0,0 +1,3 @@
+export * from './button.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/index.ts"],"sourcesContent":["export * from './button';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW"}

package/dist/components/checkbox/checkbox-label.d.ts

@@ -0,0 +1,14 @@
+import { type CheckboxProps } from './checkbox';
+export type CheckboxLabelProps = Omit<CheckboxProps, 'id'> & {
+    id?: string;
+    label: string;
+    optional?: boolean;
+    description?: string;
+    showInfoIcon?: boolean;
+    border?: boolean;
+    className?: string;
+    labelClassName?: string;
+    descriptionClassName?: string;
+};
+export declare function CheckboxLabel({ id, label, optional, description, showInfoIcon, border, className, labelClassName, descriptionClassName, ...checkboxProps }: CheckboxLabelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox-label.d.ts.map

package/dist/components/checkbox/checkbox-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-label.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-label.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,QAAgB,EAChB,WAAW,EACX,YAAoB,EACpB,MAAc,EACd,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,GAAG,aAAa,EACjB,EAAE,kBAAkB,2CA+FpB"}

package/dist/components/checkbox/checkbox-label.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Icon } from '../icon/icon.js';
+import { Label } from '../label/label.js';
+import { Checkbox } from './checkbox.js';
+export function CheckboxLabel({ id, label, optional = false, description, showInfoIcon = false, border = false, className, labelClassName, descriptionClassName, ...checkboxProps }) {
+    const generateId = useId();
+    const checkboxId = id || generateId;
+    const isDisabled = checkboxProps.disabled ?? false;
+    const renderContent = (checkboxId)=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-4 flex-1 min-w-0",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-4 items-center",
+                    children: [
+                        /*#__PURE__*/ _jsx(Label, {
+                            className: cn('text-sm leading-20 overflow-hidden text-ellipsis whitespace-nowrap', isDisabled ? 'font-normal text-foreground-neutral-subtle' : 'font-medium text-foreground-neutral-base', labelClassName),
+                            htmlFor: checkboxId,
+                            children: label
+                        }),
+                        optional && /*#__PURE__*/ _jsx("span", {
+                            className: "text-sm leading-20 font-regular text-foreground-neutral-muted whitespace-nowrap",
+                            children: "(Optional)"
+                        }),
+                        showInfoIcon && /*#__PURE__*/ _jsx(Icon, {
+                            name: "info",
+                            className: "size-16 text-foreground-neutral-muted shrink-0",
+                            "aria-hidden": "true"
+                        })
+                    ]
+                }),
+                description && /*#__PURE__*/ _jsx("p", {
+                    className: cn('text-sm leading-20', isDisabled ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-subtle', descriptionClassName),
+                    children: description
+                })
+            ]
+        });
+    if (border) {
+        return /*#__PURE__*/ _jsxs(Label, {
+            htmlFor: checkboxId,
+            className: cn(// Base container styles with border
+            'flex items-start gap-10 rounded-8 p-8 transition-all duration-100', // Unchecked state - default
+            'bg-checkbox-unchecked-bg shadow-checkbox-unchecked', // Unchecked state - hover
+            'hover:bg-checkbox-unchecked-bg-hover', // Unchecked state - focus
+            'has-data-[state=unchecked]:focus-visible:shadow-border-interactive-with-active', // Checked state - default
+            'has-data-[state=checked]:bg-background-neutral-base has-data-[state=checked]:shadow-checkbox-checked', // Checked state - hover
+            'has-data-[state=checked]:hover:bg-background-neutral-hover', // Checked state - focus
+            'has-data-[state=checked]:focus-visible:shadow-checkbox-checked-focus', // Indeterminate state - default
+            'has-data-[state=indeterminate]:bg-background-neutral-base has-data-[state=indeterminate]:shadow-checkbox-indeterminate', // Indeterminate state - hover
+            'has-data-[state=indeterminate]:hover:bg-background-neutral-hover', // Indeterminate state - focus
+            'has-data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus', // Disabled state
+            isDisabled && 'opacity-50 cursor-not-allowed', !isDisabled && 'cursor-pointer', className),
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: "p-4",
+                    children: /*#__PURE__*/ _jsx(Checkbox, {
+                        id: checkboxId,
+                        ...checkboxProps
+                    })
+                }),
+                renderContent(checkboxId)
+            ]
+        });
+    }
+    // Without border variant
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex items-start gap-10', className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "p-2",
+                children: /*#__PURE__*/ _jsx(Checkbox, {
+                    id: checkboxId,
+                    ...checkboxProps
+                })
+            }),
+            renderContent(checkboxId)
+        ]
+    });
+}
+
+//# sourceMappingURL=checkbox-label.js.map

package/dist/components/checkbox/checkbox-label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox-label.tsx"],"sourcesContent":["import {useId} from 'react';\nimport {cn} from 'utils/cn';\nimport {Icon} from '../icon/icon';\nimport {Label} from '../label/label';\nimport {Checkbox, type CheckboxProps} from './checkbox';\n\nexport type CheckboxLabelProps = Omit<CheckboxProps, 'id'> & {\n  id?: string;\n  label: string;\n  optional?: boolean;\n  description?: string;\n  showInfoIcon?: boolean;\n  border?: boolean;\n  className?: string;\n  labelClassName?: string;\n  descriptionClassName?: string;\n};\n\nexport function CheckboxLabel({\n  id,\n  label,\n  optional = false,\n  description,\n  showInfoIcon = false,\n  border = false,\n  className,\n  labelClassName,\n  descriptionClassName,\n  ...checkboxProps\n}: CheckboxLabelProps) {\n  const generateId = useId();\n  const checkboxId = id || generateId;\n  const isDisabled = checkboxProps.disabled ?? false;\n\n  const renderContent = (checkboxId: string) => (\n    <div className=\"flex flex-col gap-4 flex-1 min-w-0\">\n      <div className=\"flex gap-4 items-center\">\n        <Label\n          className={cn(\n            'text-sm leading-20 overflow-hidden text-ellipsis whitespace-nowrap',\n            isDisabled\n              ? 'font-normal text-foreground-neutral-subtle'\n              : 'font-medium text-foreground-neutral-base',\n            labelClassName,\n          )}\n          htmlFor={checkboxId}\n        >\n          {label}\n        </Label>\n        {optional && (\n          <span className=\"text-sm leading-20 font-regular text-foreground-neutral-muted whitespace-nowrap\">\n            (Optional)\n          </span>\n        )}\n        {showInfoIcon && (\n          <Icon\n            name=\"info\"\n            className=\"size-16 text-foreground-neutral-muted shrink-0\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </div>\n      {description && (\n        <p\n          className={cn(\n            'text-sm leading-20',\n            isDisabled ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-subtle',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </div>\n  );\n\n  if (border) {\n    return (\n      <Label\n        htmlFor={checkboxId}\n        className={cn(\n          // Base container styles with border\n          'flex items-start gap-10 rounded-8 p-8 transition-all duration-100',\n          // Unchecked state - default\n          'bg-checkbox-unchecked-bg shadow-checkbox-unchecked',\n          // Unchecked state - hover\n          'hover:bg-checkbox-unchecked-bg-hover',\n          // Unchecked state - focus\n          'has-data-[state=unchecked]:focus-visible:shadow-border-interactive-with-active',\n          // Checked state - default\n          'has-data-[state=checked]:bg-background-neutral-base has-data-[state=checked]:shadow-checkbox-checked',\n          // Checked state - hover\n          'has-data-[state=checked]:hover:bg-background-neutral-hover',\n          // Checked state - focus\n          'has-data-[state=checked]:focus-visible:shadow-checkbox-checked-focus',\n          // Indeterminate state - default\n          'has-data-[state=indeterminate]:bg-background-neutral-base has-data-[state=indeterminate]:shadow-checkbox-indeterminate',\n          // Indeterminate state - hover\n          'has-data-[state=indeterminate]:hover:bg-background-neutral-hover',\n          // Indeterminate state - focus\n          'has-data-[state=indeterminate]:focus-visible:shadow-checkbox-indeterminate-focus',\n          // Disabled state\n          isDisabled && 'opacity-50 cursor-not-allowed',\n          !isDisabled && 'cursor-pointer',\n          className,\n        )}\n      >\n        <span className=\"p-4\">\n          <Checkbox id={checkboxId} {...checkboxProps} />\n        </span>\n        {renderContent(checkboxId)}\n      </Label>\n    );\n  }\n\n  // Without border variant\n  return (\n    <div className={cn('flex items-start gap-10', className)}>\n      <span className=\"p-2\">\n        <Checkbox id={checkboxId} {...checkboxProps} />\n      </span>\n      {renderContent(checkboxId)}\n    </div>\n  );\n}\n"],"names":["useId","cn","Icon","Label","Checkbox","CheckboxLabel","id","label","optional","description","showInfoIcon","border","className","labelClassName","descriptionClassName","checkboxProps","generateId","checkboxId","isDisabled","disabled","renderContent","div","htmlFor","span","name","aria-hidden","p"],"mappings":";AAAA,SAAQA,KAAK,QAAO,QAAQ;AAC5B,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,IAAI,QAAO,eAAe;AAClC,SAAQC,KAAK,QAAO,iBAAiB;AACrC,SAAQC,QAAQ,QAA2B,aAAa;AAcxD,OAAO,SAASC,cAAc,EAC5BC,EAAE,EACFC,KAAK,EACLC,WAAW,KAAK,EAChBC,WAAW,EACXC,eAAe,KAAK,EACpBC,SAAS,KAAK,EACdC,SAAS,EACTC,cAAc,EACdC,oBAAoB,EACpB,GAAGC,eACgB;IACnB,MAAMC,aAAahB;IACnB,MAAMiB,aAAaX,MAAMU;IACzB,MAAME,aAAaH,cAAcI,QAAQ,IAAI;IAE7C,MAAMC,gBAAgB,CAACH,2BACrB,MAACI;YAAIT,WAAU;;8BACb,MAACS;oBAAIT,WAAU;;sCACb,KAACT;4BACCS,WAAWX,GACT,sEACAiB,aACI,+CACA,4CACJL;4BAEFS,SAASL;sCAERV;;wBAEFC,0BACC,KAACe;4BAAKX,WAAU;sCAAkF;;wBAInGF,8BACC,KAACR;4BACCsB,MAAK;4BACLZ,WAAU;4BACVa,eAAY;;;;gBAIjBhB,6BACC,KAACiB;oBACCd,WAAWX,GACT,sBACAiB,aAAa,qCAAqC,kCAClDJ;8BAGDL;;;;IAMT,IAAIE,QAAQ;QACV,qBACE,MAACR;YACCmB,SAASL;YACTL,WAAWX,GACT,oCAAoC;YACpC,qEACA,4BAA4B;YAC5B,sDACA,0BAA0B;YAC1B,wCACA,0BAA0B;YAC1B,kFACA,0BAA0B;YAC1B,wGACA,wBAAwB;YACxB,8DACA,wBAAwB;YACxB,wEACA,gCAAgC;YAChC,0HACA,8BAA8B;YAC9B,oEACA,8BAA8B;YAC9B,oFACA,iBAAiB;YACjBiB,cAAc,iCACd,CAACA,cAAc,kBACfN;;8BAGF,KAACW;oBAAKX,WAAU;8BACd,cAAA,KAACR;wBAASE,IAAIW;wBAAa,GAAGF,aAAa;;;gBAE5CK,cAAcH;;;IAGrB;IAEA,yBAAyB;IACzB,qBACE,MAACI;QAAIT,WAAWX,GAAG,2BAA2BW;;0BAC5C,KAACW;gBAAKX,WAAU;0BACd,cAAA,KAACR;oBAASE,IAAIW;oBAAa,GAAGF,aAAa;;;YAE5CK,cAAcH;;;AAGrB"}

package/dist/components/checkbox/checkbox-links.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type CheckboxProps } from './checkbox';
+export type CheckboxLink = {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+export type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {
+    id?: string;
+    label: string;
+    links: CheckboxLink[];
+    separator?: ReactNode;
+    className?: string;
+    labelClassName?: string;
+    linkClassName?: string;
+};
+export declare function CheckboxLinks({ id, label, links, separator, className, labelClassName, linkClassName, ...checkboxProps }: CheckboxLinksProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox-links.d.ts.map

package/dist/components/checkbox/checkbox-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-links.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAQ,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAW,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,GAAG;IAC3D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,cAAc,EACd,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,kBAAkB,2CA2DpB"}

package/dist/components/checkbox/checkbox-links.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../../components/label/index.js';
+import { useId } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Checkbox } from './checkbox.js';
+export function CheckboxLinks({ id, label, links, separator, className, labelClassName, linkClassName, ...checkboxProps }) {
+    const generateId = useId();
+    const checkboxId = id || generateId;
+    const isDisabled = checkboxProps.disabled ?? false;
+    const defaultSeparator = /*#__PURE__*/ _jsx("span", {
+        className: "size-3 rounded-full bg-foreground-neutral-muted",
+        "aria-hidden": "true"
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex gap-10 items-start', className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "p-2",
+                children: /*#__PURE__*/ _jsx(Checkbox, {
+                    id: checkboxId,
+                    ...checkboxProps
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-4 items-start flex-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: checkboxId,
+                        className: cn('text-sm leading-20 font-medium text-foreground-neutral-base', isDisabled && 'cursor-not-allowed opacity-50', labelClassName),
+                        children: label
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex gap-6 items-center",
+                        children: links.map((link, index)=>/*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-6 items-center",
+                                children: [
+                                    link.href ? /*#__PURE__*/ _jsx("a", {
+                                        href: link.href,
+                                        onClick: link.onClick,
+                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover', linkClassName),
+                                        children: link.label
+                                    }) : /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        onClick: link.onClick,
+                                        className: cn('text-sm leading-20 font-medium text-foreground-highlight-interactive', 'hover:text-foreground-highlight-interactive-hover', linkClassName),
+                                        children: link.label
+                                    }),
+                                    index < links.length - 1 && (separator ?? defaultSeparator)
+                                ]
+                            }, link.label))
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=checkbox-links.js.map

package/dist/components/checkbox/checkbox-links.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/checkbox-links.tsx"],"sourcesContent":["import {Label} from 'components/label';\nimport {type ReactNode, useId} from 'react';\nimport {cn} from 'utils/cn';\nimport {Checkbox, type CheckboxProps} from './checkbox';\n\nexport type CheckboxLink = {\n  label: string;\n  href?: string;\n  onClick?: () => void;\n};\n\nexport type CheckboxLinksProps = Omit<CheckboxProps, 'id'> & {\n  id?: string;\n  label: string;\n  links: CheckboxLink[];\n  separator?: ReactNode;\n  className?: string;\n  labelClassName?: string;\n  linkClassName?: string;\n};\n\nexport function CheckboxLinks({\n  id,\n  label,\n  links,\n  separator,\n  className,\n  labelClassName,\n  linkClassName,\n  ...checkboxProps\n}: CheckboxLinksProps) {\n  const generateId = useId();\n  const checkboxId = id || generateId;\n  const isDisabled = checkboxProps.disabled ?? false;\n  const defaultSeparator = (\n    <span className=\"size-3 rounded-full bg-foreground-neutral-muted\" aria-hidden=\"true\" />\n  );\n\n  return (\n    <div className={cn('flex gap-10 items-start', className)}>\n      <span className=\"p-2\">\n        <Checkbox id={checkboxId} {...checkboxProps} />\n      </span>\n      <div className=\"flex flex-col gap-4 items-start flex-1\">\n        <Label\n          htmlFor={checkboxId}\n          className={cn(\n            'text-sm leading-20 font-medium text-foreground-neutral-base',\n            isDisabled && 'cursor-not-allowed opacity-50',\n            labelClassName,\n          )}\n        >\n          {label}\n        </Label>\n        <div className=\"flex gap-6 items-center\">\n          {links.map((link, index) => (\n            <div key={link.label} className=\"flex gap-6 items-center\">\n              {link.href ? (\n                <a\n                  href={link.href}\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </a>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={link.onClick}\n                  className={cn(\n                    'text-sm leading-20 font-medium text-foreground-highlight-interactive',\n                    'hover:text-foreground-highlight-interactive-hover',\n                    linkClassName,\n                  )}\n                >\n                  {link.label}\n                </button>\n              )}\n              {index < links.length - 1 && (separator ?? defaultSeparator)}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["Label","useId","cn","Checkbox","CheckboxLinks","id","label","links","separator","className","labelClassName","linkClassName","checkboxProps","generateId","checkboxId","isDisabled","disabled","defaultSeparator","span","aria-hidden","div","htmlFor","map","link","index","href","a","onClick","button","type","length"],"mappings":";AAAA,SAAQA,KAAK,QAAO,mBAAmB;AACvC,SAAwBC,KAAK,QAAO,QAAQ;AAC5C,SAAQC,EAAE,QAAO,WAAW;AAC5B,SAAQC,QAAQ,QAA2B,aAAa;AAkBxD,OAAO,SAASC,cAAc,EAC5BC,EAAE,EACFC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,aAAa,EACb,GAAGC,eACgB;IACnB,MAAMC,aAAaZ;IACnB,MAAMa,aAAaT,MAAMQ;IACzB,MAAME,aAAaH,cAAcI,QAAQ,IAAI;IAC7C,MAAMC,iCACJ,KAACC;QAAKT,WAAU;QAAkDU,eAAY;;IAGhF,qBACE,MAACC;QAAIX,WAAWP,GAAG,2BAA2BO;;0BAC5C,KAACS;gBAAKT,WAAU;0BACd,cAAA,KAACN;oBAASE,IAAIS;oBAAa,GAAGF,aAAa;;;0BAE7C,MAACQ;gBAAIX,WAAU;;kCACb,KAACT;wBACCqB,SAASP;wBACTL,WAAWP,GACT,+DACAa,cAAc,iCACdL;kCAGDJ;;kCAEH,KAACc;wBAAIX,WAAU;kCACZF,MAAMe,GAAG,CAAC,CAACC,MAAMC,sBAChB,MAACJ;gCAAqBX,WAAU;;oCAC7Bc,KAAKE,IAAI,iBACR,KAACC;wCACCD,MAAMF,KAAKE,IAAI;wCACfE,SAASJ,KAAKI,OAAO;wCACrBlB,WAAWP,GACT,wEACA,qDACAS;kDAGDY,KAAKjB,KAAK;uDAGb,KAACsB;wCACCC,MAAK;wCACLF,SAASJ,KAAKI,OAAO;wCACrBlB,WAAWP,GACT,wEACA,qDACAS;kDAGDY,KAAKjB,KAAK;;oCAGdkB,QAAQjB,MAAMuB,MAAM,GAAG,KAAMtB,CAAAA,aAAaS,gBAAe;;+BA1BlDM,KAAKjB,KAAK;;;;;;AAiChC"}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,9 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const checkboxVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkboxVariants>;
+export declare function Checkbox({ className, size, checked, defaultChecked, onCheckedChange, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAEhE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,gBAAgB;;8EAc5B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,GACvE,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAExC,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,cAAc,EACd,eAAe,EACf,GAAG,KAAK,EACT,EAAE,aAAa,2CAsCf"}