@tosui/react 0.1.1 → 0.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AA4B5E,MAAM,MAAM,cAAc,GAAG;IAC3B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,oCAAoC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,aAAqB,EACrB,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,2CAgChB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,2CAkDpB"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAuC,MAAM,OAAO,CAAC;AA4B5E,MAAM,MAAM,cAAc,GAAG;IAC3B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,oCAAoC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,aAAqB,EACrB,SAAS,EACT,QAAQ,GACT,EAAE,cAAc,2CAgChB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,QAAQ,GACT,EAAE,kBAAkB,2CAkDpB"}

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useState, useContext } from "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./accordion.module.css.js";
+const AccordionContext = createContext(null);
+function useAccordionContext() {
+  const context = useContext(AccordionContext);
+  if (!context)
+    throw new Error("AccordionItem must be used within Accordion");
+  return context;
+}
+function Accordion({
+  defaultIndex,
+  allowMultiple = false,
+  className,
+  children
+}) {
+  const [expandedIndex, setExpandedIndex] = useState(defaultIndex ?? (allowMultiple ? [] : null));
+  const toggleIndex = (index) => {
+    if (allowMultiple) {
+      const current = expandedIndex || [];
+      const newExpanded = current.includes(index) ? current.filter((i) => i !== index) : [...current, index];
+      setExpandedIndex(newExpanded);
+    } else {
+      setExpandedIndex(expandedIndex === index ? null : index);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    AccordionContext.Provider,
+    {
+      value: { expandedIndex, toggleIndex, allowMultiple },
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          border: "thin",
+          borderColor: "border",
+          rounded: "md",
+          overflow: "hidden",
+          className: clsx(styles.accordion, className),
+          children
+        }
+      )
+    }
+  );
+}
+function AccordionItem({
+  index,
+  title,
+  disabled = false,
+  className,
+  children
+}) {
+  const { expandedIndex, toggleIndex, allowMultiple } = useAccordionContext();
+  const isExpanded = allowMultiple ? (expandedIndex || []).includes(index) : expandedIndex === index;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: clsx(
+        styles.item,
+        isExpanded && styles.expanded,
+        disabled && styles.disabled,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            as: "button",
+            type: "button",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            w: "100%",
+            p: 4,
+            bg: "transparent",
+            border: "none",
+            borderBottom: isExpanded ? "thin" : "none",
+            borderColor: "border",
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? "faint" : void 0,
+            onClick: () => !disabled && toggleIndex(index),
+            "aria-expanded": isExpanded,
+            "aria-disabled": disabled,
+            className: styles.button,
+            children: [
+              /* @__PURE__ */ jsx(Box, { fontWeight: "medium", children: title }),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "span",
+                  className: clsx(styles.icon, isExpanded && styles.rotated),
+                  children: "▾"
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsx(Box, { p: 4, className: styles.content, children })
+      ]
+    }
+  );
+}
+export {
+  Accordion,
+  AccordionItem
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, createContext, useContext, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./accordion.module.css\";\n\n// ============================================================================\n// Context\n// ============================================================================\n\ntype AccordionContextValue = {\n  expandedIndex: number | number[] | null;\n  toggleIndex: (index: number) => void;\n  allowMultiple: boolean;\n};\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\n\nfunction useAccordionContext() {\n  const context = useContext(AccordionContext);\n  if (!context)\n    throw new Error(\"AccordionItem must be used within Accordion\");\n  return context;\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type AccordionProps = {\n  /** Default expanded index(es) */\n  defaultIndex?: number | number[];\n  /** Allow multiple items expanded */\n  allowMultiple?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Accordion items */\n  children?: ReactNode;\n};\n\nexport type AccordionItemProps = {\n  /** Item index (set manually) */\n  index: number;\n  /** Item title */\n  title: ReactNode;\n  /** Whether disabled */\n  disabled?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Item content */\n  children?: ReactNode;\n};\n\n// ============================================================================\n// Components\n// ============================================================================\n\n/**\n * Accordion - Collapsible sections container\n *\n * An accordion component that:\n * - Supports single or multiple expanded items\n * - Uses context for state management\n * - Animated expand/collapse\n */\nexport function Accordion({\n  defaultIndex,\n  allowMultiple = false,\n  className,\n  children,\n}: AccordionProps) {\n  const [expandedIndex, setExpandedIndex] = useState<\n    number | number[] | null\n  >(defaultIndex ?? (allowMultiple ? [] : null));\n\n  const toggleIndex = (index: number) => {\n    if (allowMultiple) {\n      const current = (expandedIndex as number[]) || [];\n      const newExpanded = current.includes(index)\n        ? current.filter((i) => i !== index)\n        : [...current, index];\n      setExpandedIndex(newExpanded);\n    } else {\n      setExpandedIndex(expandedIndex === index ? null : index);\n    }\n  };\n\n  return (\n    <AccordionContext.Provider\n      value={{ expandedIndex, toggleIndex, allowMultiple }}\n    >\n      <Box\n        border=\"thin\"\n        borderColor=\"border\"\n        rounded=\"md\"\n        overflow=\"hidden\"\n        className={clsx(styles.accordion, className)}\n      >\n        {children}\n      </Box>\n    </AccordionContext.Provider>\n  );\n}\n\n/**\n * AccordionItem - Individual collapsible section\n */\nexport function AccordionItem({\n  index,\n  title,\n  disabled = false,\n  className,\n  children,\n}: AccordionItemProps) {\n  const { expandedIndex, toggleIndex, allowMultiple } = useAccordionContext();\n\n  const isExpanded = allowMultiple\n    ? ((expandedIndex as number[]) || []).includes(index)\n    : expandedIndex === index;\n\n  return (\n    <Box\n      className={clsx(\n        styles.item,\n        isExpanded && styles.expanded,\n        disabled && styles.disabled,\n        className\n      )}\n    >\n      <Box\n        as=\"button\"\n        type=\"button\"\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        w=\"100%\"\n        p={4}\n        bg=\"transparent\"\n        border=\"none\"\n        borderBottom={isExpanded ? \"thin\" : \"none\"}\n        borderColor=\"border\"\n        cursor={disabled ? \"not-allowed\" : \"pointer\"}\n        opacity={disabled ? \"faint\" : undefined}\n        onClick={() => !disabled && toggleIndex(index)}\n        aria-expanded={isExpanded}\n        aria-disabled={disabled}\n        className={styles.button}\n      >\n        <Box fontWeight=\"medium\">{title}</Box>\n        <Box\n          as=\"span\"\n          className={clsx(styles.icon, isExpanded && styles.rotated)}\n        >\n          ▾\n        </Box>\n      </Box>\n      {isExpanded && (\n        <Box p={4} className={styles.content}>\n          {children}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAiBA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAS,sBAAsB;AAC7B,QAAM,UAAU,WAAW,gBAAgB;AAC3C,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,6CAA6C;AAC/D,SAAO;AACT;AA0CO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAExC,iBAAiB,gBAAgB,KAAK,KAAK;AAE7C,QAAM,cAAc,CAAC,UAAkB;AACrC,QAAI,eAAe;AACjB,YAAM,UAAW,iBAA8B,CAAA;AAC/C,YAAM,cAAc,QAAQ,SAAS,KAAK,IACtC,QAAQ,OAAO,CAAC,MAAM,MAAM,KAAK,IACjC,CAAC,GAAG,SAAS,KAAK;AACtB,uBAAiB,WAAW;AAAA,IAC9B,OAAO;AACL,uBAAiB,kBAAkB,QAAQ,OAAO,KAAK;AAAA,IACzD;AAAA,EACF;AAEA,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,OAAO,EAAE,eAAe,aAAa,cAAA;AAAA,MAErC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,QAAO;AAAA,UACP,aAAY;AAAA,UACZ,SAAQ;AAAA,UACR,UAAS;AAAA,UACT,WAAW,KAAK,OAAO,WAAW,SAAS;AAAA,UAE1C;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAKO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,EAAE,eAAe,aAAa,cAAA,IAAkB,oBAAA;AAEtD,QAAM,aAAa,iBACb,iBAA8B,CAAA,GAAI,SAAS,KAAK,IAClD,kBAAkB;AAEtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP,cAAc,OAAO;AAAA,QACrB,YAAY,OAAO;AAAA,QACnB;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,GAAE;AAAA,YACF,GAAG;AAAA,YACH,IAAG;AAAA,YACH,QAAO;AAAA,YACP,cAAc,aAAa,SAAS;AAAA,YACpC,aAAY;AAAA,YACZ,QAAQ,WAAW,gBAAgB;AAAA,YACnC,SAAS,WAAW,UAAU;AAAA,YAC9B,SAAS,MAAM,CAAC,YAAY,YAAY,KAAK;AAAA,YAC7C,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,WAAW,OAAO;AAAA,YAElB,UAAA;AAAA,cAAA,oBAAC,KAAA,EAAI,YAAW,UAAU,UAAA,OAAM;AAAA,cAChC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAG;AAAA,kBACH,WAAW,KAAK,OAAO,MAAM,cAAc,OAAO,OAAO;AAAA,kBAC1D,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAED;AAAA,UAAA;AAAA,QAAA;AAAA,QAED,kCACE,KAAA,EAAI,GAAG,GAAG,WAAW,OAAO,SAC1B,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/Accordion/accordion.module.css

@@ -0,0 +1,36 @@
+._accordion_173dk_1 {
+  /* Container */
+}
+
+._item_173dk_5 {
+  border-bottom: 1px solid var(--t-color-border);
+}
+
+._item_173dk_5:last-child {
+  border-bottom: none;
+}
+
+._button_173dk_13 {
+  transition: background-color 0.15s ease;
+  text-align: left;
+}
+
+._button_173dk_13:hover:not(:disabled) {
+  background-color: var(--t-color-surface-hover, rgba(0, 0, 0, 0.02));
+}
+
+._icon_173dk_22 {
+  transition: transform 0.2s ease;
+}
+
+._rotated_173dk_26 {
+  transform: rotate(180deg);
+}
+
+._content_173dk_30 {
+  /* Content panel */
+}
+
+._disabled_173dk_34 {
+  opacity: 0.5;
+}

package/dist/components/Accordion/accordion.module.css.js

@@ -0,0 +1,27 @@
+const accordion = "_accordion_173dk_1";
+const item = "_item_173dk_5";
+const button = "_button_173dk_13";
+const icon = "_icon_173dk_22";
+const rotated = "_rotated_173dk_26";
+const content = "_content_173dk_30";
+const disabled = "_disabled_173dk_34";
+const styles = {
+  accordion,
+  item,
+  button,
+  icon,
+  rotated,
+  content,
+  disabled
+};
+export {
+  accordion,
+  button,
+  content,
+  styles as default,
+  disabled,
+  icon,
+  item,
+  rotated
+};
+//# sourceMappingURL=accordion.module.css.js.map

package/dist/components/Accordion/accordion.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/Alert/Alert.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import { HStack } from "../HStack/HStack.js";
+import { VStack } from "../VStack/VStack.js";
+import styles from "./alert.module.css.js";
+const defaultIcons = {
+  success: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  warning: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  error: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+      clipRule: "evenodd"
+    }
+  ) }),
+  info: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",
+      clipRule: "evenodd"
+    }
+  ) })
+};
+const CloseIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    d: "M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z",
+    clipRule: "evenodd"
+  }
+) });
+function Alert({
+  status = "info",
+  title,
+  children,
+  icon,
+  onClose,
+  className
+}) {
+  const displayIcon = icon ?? defaultIcons[status];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "alert",
+      p: 4,
+      rounded: "md",
+      bg: `${status}-subtle`,
+      className: clsx(styles.alert, styles[status], className),
+      children: /* @__PURE__ */ jsxs(HStack, { gap: 3, align: "start", children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            display: "inline-flex",
+            alignItems: "center",
+            flexShrink: 0,
+            color: status,
+            "aria-hidden": "true",
+            children: displayIcon
+          }
+        ),
+        /* @__PURE__ */ jsxs(VStack, { gap: 1, flexGrow: 1, children: [
+          title && /* @__PURE__ */ jsx(Box, { as: "span", fontWeight: "semibold", color: "foreground", children: title }),
+          children && /* @__PURE__ */ jsx(Box, { as: "span", color: "foreground-muted", fontSize: "sm", children })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "button",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            p: 1,
+            rounded: "sm",
+            bg: "transparent",
+            color: "foreground-muted",
+            cursor: "pointer",
+            className: styles.closeButton,
+            onClick: onClose,
+            "aria-label": "Dismiss",
+            children: CloseIcon
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  Alert
+};
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { HStack } from \"@/components/HStack/HStack\";\nimport { VStack } from \"@/components/VStack/VStack\";\nimport styles from \"./alert.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type AlertStatus = \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport type AlertProps = {\n  /** Status determines colors and default icon */\n  status?: AlertStatus;\n  /** Optional title displayed above description */\n  title?: ReactNode;\n  /** Description content */\n  children?: ReactNode;\n  /** Custom icon (overrides default per-status icon) */\n  icon?: ReactNode;\n  /** Callback when close button is clicked (omit to hide close button) */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Default icons per status (simple SVG)\n// ============================================================================\n\nconst defaultIcons: Record<AlertStatus, ReactNode> = {\n  success: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  warning: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  error: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n  info: (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  ),\n};\n\n// ============================================================================\n// Close button icon\n// ============================================================================\n\nconst CloseIcon = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n    <path\n      fillRule=\"evenodd\"\n      d=\"M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Alert - Status notification banner\n *\n * A contextual feedback component that provides:\n * - Four status variants: success, warning, error, info\n * - Optional title and description\n * - Default icons per status (customizable)\n * - Optional close button\n * - Accessible with role=\"alert\"\n */\nexport function Alert({\n  status = \"info\",\n  title,\n  children,\n  icon,\n  onClose,\n  className,\n}: AlertProps) {\n  const displayIcon = icon ?? defaultIcons[status];\n\n  return (\n    <Box\n      role=\"alert\"\n      p={4}\n      rounded=\"md\"\n      bg={`${status}-subtle` as any}\n      className={clsx(styles.alert, styles[status], className)}\n    >\n      <HStack gap={3} align=\"start\">\n        {/* Icon */}\n        <Box\n          as=\"span\"\n          display=\"inline-flex\"\n          alignItems=\"center\"\n          flexShrink={0}\n          color={status as any}\n          aria-hidden=\"true\"\n        >\n          {displayIcon}\n        </Box>\n\n        {/* Content */}\n        <VStack gap={1} flexGrow={1}>\n          {title && (\n            <Box as=\"span\" fontWeight=\"semibold\" color=\"foreground\">\n              {title}\n            </Box>\n          )}\n          {children && (\n            <Box as=\"span\" color=\"foreground-muted\" fontSize=\"sm\">\n              {children}\n            </Box>\n          )}\n        </VStack>\n\n        {/* Close button */}\n        {onClose && (\n          <Box\n            as=\"button\"\n            display=\"inline-flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            p={1}\n            rounded=\"sm\"\n            bg=\"transparent\"\n            color=\"foreground-muted\"\n            cursor=\"pointer\"\n            className={styles.closeButton}\n            onClick={onClose}\n            aria-label=\"Dismiss\"\n          >\n            {CloseIcon}\n          </Box>\n        )}\n      </HStack>\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAgCA,MAAM,eAA+C;AAAA,EACnD,SACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,SACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,OACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,GAEb;AAAA,EAEF,MACE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,GAAE;AAAA,MACF,UAAS;AAAA,IAAA;AAAA,EAAA,EACX,CACF;AAEJ;AAMA,MAAM,YACJ,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBACnD,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,UAAS;AAAA,IACT,GAAE;AAAA,IACF,UAAS;AAAA,EAAA;AACX,GACF;AAiBK,SAAS,MAAM;AAAA,EACpB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,cAAc,QAAQ,aAAa,MAAM;AAE/C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,GAAG;AAAA,MACH,SAAQ;AAAA,MACR,IAAI,GAAG,MAAM;AAAA,MACb,WAAW,KAAK,OAAO,OAAO,OAAO,MAAM,GAAG,SAAS;AAAA,MAEvD,UAAA,qBAAC,QAAA,EAAO,KAAK,GAAG,OAAM,SAEpB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,eAAY;AAAA,YAEX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIH,qBAAC,QAAA,EAAO,KAAK,GAAG,UAAU,GACvB,UAAA;AAAA,UAAA,SACC,oBAAC,OAAI,IAAG,QAAO,YAAW,YAAW,OAAM,cACxC,UAAA,MAAA,CACH;AAAA,UAED,gCACE,KAAA,EAAI,IAAG,QAAO,OAAM,oBAAmB,UAAS,MAC9C,SAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAGC,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,GAAG;AAAA,YACH,SAAQ;AAAA,YACR,IAAG;AAAA,YACH,OAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,cAAW;AAAA,YAEV,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Alert/alert.module.css

@@ -0,0 +1,27 @@
+._alert_1ulex_1 {
+  border-left: 4px solid;
+}
+
+._success_1ulex_5 {
+  border-left-color: var(--t-color-success-default);
+}
+
+._warning_1ulex_9 {
+  border-left-color: var(--t-color-warning-default);
+}
+
+._error_1ulex_13 {
+  border-left-color: var(--t-color-error-default);
+}
+
+._info_1ulex_17 {
+  border-left-color: var(--t-color-info-default);
+}
+
+._closeButton_1ulex_21 {
+  transition: background-color 150ms ease-in-out;
+}
+
+._closeButton_1ulex_21:hover {
+  background-color: var(--t-color-border-muted);
+}

package/dist/components/Alert/alert.module.css.js

@@ -0,0 +1,24 @@
+const alert = "_alert_1ulex_1";
+const success = "_success_1ulex_5";
+const warning = "_warning_1ulex_9";
+const error = "_error_1ulex_13";
+const info = "_info_1ulex_17";
+const closeButton = "_closeButton_1ulex_21";
+const styles = {
+  alert,
+  success,
+  warning,
+  error,
+  info,
+  closeButton
+};
+export {
+  alert,
+  closeButton,
+  styles as default,
+  error,
+  info,
+  success,
+  warning
+};
+//# sourceMappingURL=alert.module.css.js.map

package/dist/components/Alert/alert.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA4BF;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,IAAI,EACJ,IAAW,EACX,OAAgB,EAChB,GAAG,EACH,SAAS,GACV,EAAE,WAAW,2CA4Cb"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG;IACxB,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA4BF;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,IAAI,EACJ,IAAW,EACX,OAAgB,EAChB,GAAG,EACH,SAAS,GACV,EAAE,WAAW,2CA4Cb"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./avatar.module.css.js";
+const sizeConfig = {
+  sm: { dimension: "32px", fontSize: "xs" },
+  md: { dimension: "40px", fontSize: "sm" },
+  lg: { dimension: "48px", fontSize: "md" },
+  xl: { dimension: "64px", fontSize: "lg" }
+};
+function getInitials(name) {
+  const words = name.trim().split(/\s+/);
+  if (words.length === 0) return "";
+  if (words.length === 1) return words[0].charAt(0).toUpperCase();
+  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
+}
+function Avatar({
+  src,
+  name,
+  size = "md",
+  rounded = "full",
+  alt,
+  className
+}) {
+  const [hasError, setHasError] = useState(false);
+  const sizeProps = sizeConfig[size];
+  const showImage = src && !hasError;
+  const initials = name ? getInitials(name) : "";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      overflow: "hidden",
+      rounded,
+      bg: "primary-subtle",
+      color: "primary",
+      fontWeight: "medium",
+      fontSize: sizeProps.fontSize,
+      className: clsx(styles.avatar, className),
+      style: {
+        width: sizeProps.dimension,
+        height: sizeProps.dimension
+      },
+      children: showImage ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || name || "Avatar",
+          className: styles.image,
+          onError: () => setHasError(true)
+        }
+      ) : initials ? /* @__PURE__ */ jsx("span", { children: initials }) : /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "currentColor",
+          className: styles.placeholder,
+          children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+        }
+      )
+    }
+  );
+}
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./avatar.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type AvatarSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport type AvatarProps = {\n  /** Image source URL */\n  src?: string;\n  /** Name for generating initials fallback */\n  name?: string;\n  /** Size variant */\n  size?: AvatarSize;\n  /** Border radius */\n  rounded?: \"full\" | \"md\";\n  /** Alt text for image */\n  alt?: string;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { dimension: \"32px\", fontSize: \"xs\" },\n  md: { dimension: \"40px\", fontSize: \"sm\" },\n  lg: { dimension: \"48px\", fontSize: \"md\" },\n  xl: { dimension: \"64px\", fontSize: \"lg\" },\n} as const;\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getInitials(name: string): string {\n  const words = name.trim().split(/\\s+/);\n  if (words.length === 0) return \"\";\n  if (words.length === 1) return words[0].charAt(0).toUpperCase();\n  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Avatar - User/entity display\n *\n * A circular or rounded avatar component:\n * - Shows image when src is provided\n * - Falls back to initials from name\n * - Falls back to generic placeholder if neither\n *\n * Features:\n * - 4 sizes: sm (32px), md (40px), lg (48px), xl (64px)\n * - 2 rounded variants: full (circle), md (rounded corners)\n * - Graceful image loading with error fallback\n */\nexport function Avatar({\n  src,\n  name,\n  size = \"md\",\n  rounded = \"full\",\n  alt,\n  className,\n}: AvatarProps) {\n  const [hasError, setHasError] = useState(false);\n  const sizeProps = sizeConfig[size];\n  const showImage = src && !hasError;\n  const initials = name ? getInitials(name) : \"\";\n\n  return (\n    <Box\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flexShrink={0}\n      overflow=\"hidden\"\n      rounded={rounded}\n      bg=\"primary-subtle\"\n      color=\"primary\"\n      fontWeight=\"medium\"\n      fontSize={sizeProps.fontSize}\n      className={clsx(styles.avatar, className)}\n      style={{\n        width: sizeProps.dimension,\n        height: sizeProps.dimension,\n      }}\n    >\n      {showImage ? (\n        <img\n          src={src}\n          alt={alt || name || \"Avatar\"}\n          className={styles.image}\n          onError={() => setHasError(true)}\n        />\n      ) : initials ? (\n        <span>{initials}</span>\n      ) : (\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"currentColor\"\n          className={styles.placeholder}\n        >\n          <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n        </svg>\n      )}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAgCA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,WAAW,QAAQ,UAAU,KAAA;AAAA,EACnC,IAAI,EAAE,WAAW,QAAQ,UAAU,KAAA;AAAA,EACnC,IAAI,EAAE,WAAW,QAAQ,UAAU,KAAA;AAAA,EACnC,IAAI,EAAE,WAAW,QAAQ,UAAU,KAAA;AACrC;AAMA,SAAS,YAAY,MAAsB;AACzC,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK;AACrC,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,MAAI,MAAM,WAAW,EAAG,QAAO,MAAM,CAAC,EAAE,OAAO,CAAC,EAAE,YAAA;AAClD,UAAQ,MAAM,CAAC,EAAE,OAAO,CAAC,IAAI,MAAM,MAAM,SAAS,CAAC,EAAE,OAAO,CAAC,GAAG,YAAA;AAClE;AAmBO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAAgB;AACd,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,YAAY,WAAW,IAAI;AACjC,QAAM,YAAY,OAAO,CAAC;AAC1B,QAAM,WAAW,OAAO,YAAY,IAAI,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,YAAY;AAAA,MACZ,UAAS;AAAA,MACT;AAAA,MACA,IAAG;AAAA,MACH,OAAM;AAAA,MACN,YAAW;AAAA,MACX,UAAU,UAAU;AAAA,MACpB,WAAW,KAAK,OAAO,QAAQ,SAAS;AAAA,MACxC,OAAO;AAAA,QACL,OAAO,UAAU;AAAA,QACjB,QAAQ,UAAU;AAAA,MAAA;AAAA,MAGnB,UAAA,YACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,KAAK,OAAO,QAAQ;AAAA,UACpB,WAAW,OAAO;AAAA,UAClB,SAAS,MAAM,YAAY,IAAI;AAAA,QAAA;AAAA,MAAA,IAE/B,WACF,oBAAC,QAAA,EAAM,oBAAS,IAEhB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAW,OAAO;AAAA,UAElB,UAAA,oBAAC,QAAA,EAAK,GAAE,gHAAA,CAAgH;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1H;AAAA,EAAA;AAIR;"}

package/dist/components/Avatar/avatar.module.css

@@ -0,0 +1,14 @@
+._avatar_1suzu_1 {
+  user-select: none;
+}
+
+._image_1suzu_5 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+._placeholder_1suzu_11 {
+  width: 60%;
+  height: 60%;
+}

package/dist/components/Avatar/avatar.module.css.js

@@ -0,0 +1,15 @@
+const avatar = "_avatar_1suzu_1";
+const image = "_image_1suzu_5";
+const placeholder = "_placeholder_1suzu_11";
+const styles = {
+  avatar,
+  image,
+  placeholder
+};
+export {
+  avatar,
+  styles as default,
+  image,
+  placeholder
+};
+//# sourceMappingURL=avatar.module.css.js.map

package/dist/components/Avatar/avatar.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Badge/Badge.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./badge.module.css.js";
+const sizeConfig = {
+  sm: { fontSize: "xs", px: 1.5, py: 0.5 },
+  md: { fontSize: "sm", px: 2, py: 0.5 }
+};
+function getColorConfig(variant, colorScheme) {
+  if (colorScheme === "gray") {
+    if (variant === "solid") {
+      return {
+        bg: "foreground",
+        color: "foreground-inverted"
+      };
+    }
+    return {
+      bg: "surface",
+      color: "foreground-muted"
+    };
+  }
+  if (variant === "solid") {
+    return {
+      bg: `${colorScheme}-default`,
+      color: "foreground-inverted"
+    };
+  }
+  return {
+    bg: `${colorScheme}-subtle`,
+    color: colorScheme
+  };
+}
+function Badge({
+  colorScheme = "gray",
+  variant = "subtle",
+  size = "md",
+  children,
+  className
+}) {
+  const colorConfig = getColorConfig(variant, colorScheme);
+  const sizeProps = sizeConfig[size];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "span",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      px: sizeProps.px,
+      py: sizeProps.py,
+      fontSize: sizeProps.fontSize,
+      fontWeight: "medium",
+      lineHeight: "tight",
+      rounded: "full",
+      bg: colorConfig.bg,
+      color: colorConfig.color,
+      className: clsx(styles.badge, className),
+      children
+    }
+  );
+}
+export {
+  Badge
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./badge.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type BadgeColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"gray\";\n\nexport type BadgeVariant = \"solid\" | \"subtle\";\nexport type BadgeSize = \"sm\" | \"md\";\n\nexport type BadgeProps = {\n  /** Color scheme */\n  colorScheme?: BadgeColorScheme;\n  /** Visual variant */\n  variant?: BadgeVariant;\n  /** Size */\n  size?: BadgeSize;\n  /** Badge content */\n  children?: ReactNode;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { fontSize: \"xs\", px: 1.5, py: 0.5 },\n  md: { fontSize: \"sm\", px: 2, py: 0.5 },\n} as const;\n\n// ============================================================================\n// Color configurations\n// ============================================================================\n\ntype ColorConfig = {\n  bg: string;\n  color: string;\n};\n\nfunction getColorConfig(\n  variant: BadgeVariant,\n  colorScheme: BadgeColorScheme\n): ColorConfig {\n  // Handle \"gray\" colorScheme specially since it uses different token names\n  if (colorScheme === \"gray\") {\n    if (variant === \"solid\") {\n      return {\n        bg: \"foreground\",\n        color: \"foreground-inverted\",\n      };\n    }\n    return {\n      bg: \"surface\",\n      color: \"foreground-muted\",\n    };\n  }\n\n  if (variant === \"solid\") {\n    return {\n      bg: `${colorScheme}-default`,\n      color: \"foreground-inverted\",\n    };\n  }\n\n  return {\n    bg: `${colorScheme}-subtle`,\n    color: colorScheme,\n  };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Badge - Small status indicator\n *\n * A compact label component for displaying:\n * - Counts and numbers\n * - Status indicators\n * - Categories and tags\n *\n * Features:\n * - 7 color schemes: primary, accent, success, warning, error, info, gray\n * - 2 variants: solid (bold) and subtle (muted)\n * - 2 sizes: sm and md\n * - Pill shape (fully rounded)\n */\nexport function Badge({\n  colorScheme = \"gray\",\n  variant = \"subtle\",\n  size = \"md\",\n  children,\n  className,\n}: BadgeProps) {\n  const colorConfig = getColorConfig(variant, colorScheme);\n  const sizeProps = sizeConfig[size];\n\n  return (\n    <Box\n      as=\"span\"\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      px={sizeProps.px}\n      py={sizeProps.py}\n      fontSize={sizeProps.fontSize}\n      fontWeight=\"medium\"\n      lineHeight=\"tight\"\n      rounded=\"full\"\n      bg={colorConfig.bg as any}\n      color={colorConfig.color as any}\n      className={clsx(styles.badge, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAsCA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,UAAU,MAAM,IAAI,KAAK,IAAI,IAAA;AAAA,EACnC,IAAI,EAAE,UAAU,MAAM,IAAI,GAAG,IAAI,IAAA;AACnC;AAWA,SAAS,eACP,SACA,aACa;AAEb,MAAI,gBAAgB,QAAQ;AAC1B,QAAI,YAAY,SAAS;AACvB,aAAO;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IAEX;AACA,WAAO;AAAA,MACL,IAAI;AAAA,MACJ,OAAO;AAAA,IAAA;AAAA,EAEX;AAEA,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,MACL,IAAI,GAAG,WAAW;AAAA,MAClB,OAAO;AAAA,IAAA;AAAA,EAEX;AAEA,SAAO;AAAA,IACL,IAAI,GAAG,WAAW;AAAA,IAClB,OAAO;AAAA,EAAA;AAEX;AAoBO,SAAS,MAAM;AAAA,EACpB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAe;AACb,QAAM,cAAc,eAAe,SAAS,WAAW;AACvD,QAAM,YAAY,WAAW,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,IAAI,UAAU;AAAA,MACd,IAAI,UAAU;AAAA,MACd,UAAU,UAAU;AAAA,MACpB,YAAW;AAAA,MACX,YAAW;AAAA,MACX,SAAQ;AAAA,MACR,IAAI,YAAY;AAAA,MAChB,OAAO,YAAY;AAAA,MACnB,WAAW,KAAK,OAAO,OAAO,SAAS;AAAA,MAEtC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Badge/badge.module.css

@@ -0,0 +1,3 @@
+._badge_ezs42_1 {
+  white-space: nowrap;
+}

package/dist/components/Badge/badge.module.css.js

@@ -0,0 +1,9 @@
+const badge = "_badge_ezs42_1";
+const styles = {
+  badge
+};
+export {
+  badge,
+  styles as default
+};
+//# sourceMappingURL=badge.module.css.js.map

package/dist/components/Badge/badge.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}