@vkzstudio/muza-ui 1.0.6 → 1.0.8

package/dist/components/Button/buttonVariants.d.ts

@@ -6,7 +6,7 @@ export declare const sharedButtonVariants: {
 };
 export declare const buttonVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
-    variant?: "invert" | "link" | "dashed" | "linkInvert" | "primary" | "secondary" | "tertiary" | null | undefined;
+    variant?: "link" | "invert" | "dashed" | "linkInvert" | "primary" | "secondary" | "tertiary" | null | undefined;
     iconOnly?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
     ghost?: boolean | null | undefined;

package/dist/components/Calendar/Calendar.d.ts

@@ -28,8 +28,8 @@ type Single = {
     selected?: Date | undefined;
     onSelect?: (date: Date) => void;
 };
-declare const Calendar: ({ leftPanelChildren, defaultMonth, numberOfMonths, mode, selected, onSelect, onReset, onConfirm, resetButtonText, confirmButtonText, renderResetButton, renderConfirmButton, bottomTextDefault, dateFormatter, dateRangeFormatter, disabledDates, weekStartsOn, excludeDisabled, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
-declare const CalendarBase: ({ className, classNames, showOutsideDays, captionLayout, formatters, components, ...props }: React.ComponentProps<typeof DayPicker>) => import("react/jsx-runtime").JSX.Element;
+declare const Calendar: ({ leftPanelChildren, defaultMonth, numberOfMonths, mode, selected, onSelect, onReset, onConfirm, resetButtonText: resetButtonTextProp, confirmButtonText: confirmButtonTextProp, renderResetButton, renderConfirmButton, bottomTextDefault: bottomTextDefaultProp, dateFormatter, dateRangeFormatter, disabledDates, weekStartsOn, excludeDisabled, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+declare const CalendarBase: ({ className, classNames, showOutsideDays, captionLayout, formatters, components, locale, ...props }: React.ComponentProps<typeof DayPicker>) => import("react/jsx-runtime").JSX.Element;
 declare const CalendarDayButton: ({ className, day, modifiers, children, disabled, ...props }: React.ComponentProps<typeof DayButton>) => import("react/jsx-runtime").JSX.Element;
 export { Calendar, CalendarBase, CalendarDayButton };
 //# sourceMappingURL=Calendar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,KAAK,SAAS,EACd,SAAS,EACT,SAAS,EACT,KAAK,OAAO,EAEb,MAAM,kBAAkB,CAAA;AAYzB,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,CAAC,GAAG,CAAC,CAAA;IACrB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,mBAAmB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IAC3C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IACtC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAA;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,GAAG,SAAS,CAAA;IAC/C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CAChC,CAAA;AAED,QAAA,MAAM,QAAQ,GAAI,oRAmBf,aAAa,4CAuEf,CAAA;AAED,QAAA,MAAM,YAAY,GAAI,6FAQnB,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,4CAiNxC,CAAA;AAED,QAAA,MAAM,iBAAiB,GAAI,6DAOxB,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,4CAqDxC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,KAAK,SAAS,EACd,SAAS,EACT,SAAS,EACT,KAAK,OAAO,EAEb,MAAM,kBAAkB,CAAA;AAazB,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,CAAC,GAAG,CAAC,CAAA;IACrB,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,mBAAmB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IAC3C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IACtC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAA;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,aAAa,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,GAAG,SAAS,CAAA;IAC/C,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;CACtC,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,QAAQ,CAAA;IACd,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;CAChC,CAAA;AAED,QAAA,MAAM,QAAQ,GAAI,uVAmBf,aAAa,4CAmFf,CAAA;AAED,QAAA,MAAM,YAAY,GAAI,qGASnB,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,4CAqNxC,CAAA;AAED,QAAA,MAAM,iBAAiB,GAAI,6DAOxB,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,4CAqDxC,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/Calendar/Calendar.js

@@ -1,113 +1,121 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import * as w from "react";
-import { formatDate as C } from "./utils/formatDate.js";
-import { formatDateRange as D } from "./utils/formatDateRange.js";
-import { Typography as b, typographyVariants as g } from "../Typography/Typography.js";
-import { Button as h } from "../Button/Button.js";
-import { getDefaultClassNames as _ } from "../../node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.js";
-import { DayPicker as A } from "../../node_modules/react-day-picker/dist/esm/DayPicker.js";
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import * as _ from "react";
+import { formatDate as L } from "./utils/formatDate.js";
+import { formatDateRange as R } from "./utils/formatDateRange.js";
+import { useMuzaTranslationContext as S } from "../../translations/TranslationContext.js";
+import { Typography as p, typographyVariants as y } from "../Typography/Typography.js";
+import { Button as k } from "../Button/Button.js";
+import { getDefaultClassNames as N } from "../../node_modules/react-day-picker/dist/esm/helpers/getDefaultClassNames.js";
+import { DayPicker as q } from "../../node_modules/react-day-picker/dist/esm/DayPicker.js";
 import { cn as e } from "../../utils/cn.js";
-import { AltArrowLeftOutline as L, AltArrowRightOutline as R, AltArrowDownOutline as S } from "@solar-icons/react-perf";
-const H = ({
-  leftPanelChildren: s,
-  defaultMonth: u,
+import { AltArrowLeftOutline as W, AltArrowRightOutline as Y, AltArrowDownOutline as E } from "@solar-icons/react-perf";
+const U = ({
+  leftPanelChildren: u,
+  defaultMonth: c,
   numberOfMonths: o,
-  mode: i,
-  selected: n,
-  onSelect: c,
-  onReset: f,
-  onConfirm: t,
-  resetButtonText: r,
-  confirmButtonText: d,
-  renderResetButton: l,
-  renderConfirmButton: p,
-  bottomTextDefault: k,
-  dateFormatter: z = C,
-  dateRangeFormatter: N = D,
-  disabledDates: x,
-  weekStartsOn: y = 1,
-  excludeDisabled: j
-}) => /* @__PURE__ */ m("div", { className: "flex", children: [
-  s && /* @__PURE__ */ a("div", { className: "flex flex-col border-r border-stroke-base-primary py-sm", children: s }),
-  /* @__PURE__ */ m("div", { className: "mt-2xl flex flex-col justify-between", children: [
-    i === "range" ? /* @__PURE__ */ a(
-      v,
-      {
-        numberOfMonths: o,
-        defaultMonth: u,
-        mode: "range",
-        selected: n,
-        onSelect: c,
-        required: !0,
-        weekStartsOn: y,
-        disabled: x,
-        excludeDisabled: j
-      }
-    ) : /* @__PURE__ */ a(
-      v,
-      {
-        numberOfMonths: o,
-        defaultMonth: u,
-        mode: "single",
-        selected: n,
-        onSelect: c,
-        required: !0,
-        weekStartsOn: y,
-        disabled: x
-      }
-    ),
-    /* @__PURE__ */ m(
-      "div",
-      {
-        className: e(
-          "mx-xl mt-lg mb-4 flex items-center justify-between",
-          "max-lg:flex-col max-lg:items-start max-lg:border-t max-lg:border-stroke-base-primary max-lg:pt-lg"
-        ),
-        children: [
-          /* @__PURE__ */ a(
-            b,
-            {
-              component: "span",
-              variant: "body",
-              weight: "medium",
-              size: "base",
-              children: i === "range" && (n != null && n.from) && (n != null && n.to) ? N(n) : i === "single" && n ? z(n) : k
-            }
+  mode: l,
+  selected: a,
+  onSelect: m,
+  onReset: s,
+  onConfirm: f,
+  resetButtonText: t,
+  confirmButtonText: b,
+  renderResetButton: n,
+  renderConfirmButton: d,
+  bottomTextDefault: i,
+  dateFormatter: D = L,
+  dateRangeFormatter: j = R,
+  disabledDates: w,
+  weekStartsOn: h = 1,
+  excludeDisabled: C
+}) => {
+  const { translations: x, dateFnsLocale: v } = S(), T = t ?? x.calendar.resetButton, B = b ?? x.calendar.confirmButton, A = i ?? x.calendar.bottomTextDefault;
+  return /* @__PURE__ */ g("div", { className: "flex", children: [
+    u && /* @__PURE__ */ r("div", { className: "flex flex-col border-r border-stroke-base-primary py-sm", children: u }),
+    /* @__PURE__ */ g("div", { className: "mt-2xl flex flex-col justify-between", children: [
+      l === "range" ? /* @__PURE__ */ r(
+        z,
+        {
+          numberOfMonths: o,
+          defaultMonth: c,
+          mode: "range",
+          selected: a,
+          onSelect: m,
+          required: !0,
+          weekStartsOn: h,
+          disabled: w,
+          excludeDisabled: C,
+          locale: v
+        }
+      ) : /* @__PURE__ */ r(
+        z,
+        {
+          numberOfMonths: o,
+          defaultMonth: c,
+          mode: "single",
+          selected: a,
+          onSelect: m,
+          required: !0,
+          weekStartsOn: h,
+          disabled: w,
+          locale: v
+        }
+      ),
+      /* @__PURE__ */ g(
+        "div",
+        {
+          className: e(
+            "mx-xl mt-lg mb-4 flex items-center justify-between",
+            "max-lg:flex-col max-lg:items-start max-lg:border-t max-lg:border-stroke-base-primary max-lg:pt-lg"
           ),
-          /* @__PURE__ */ m("div", { className: "flex gap-2xl max-lg:w-full max-lg:justify-between max-lg:gap-0 max-lg:pt-lg", children: [
-            l ? l() : /* @__PURE__ */ a(h, { variant: "link", onClick: f, children: r }),
-            p ? p() : /* @__PURE__ */ a(h, { variant: "primary", size: "sm", onClick: t, children: d })
-          ] })
-        ]
-      }
-    )
-  ] })
-] }), v = ({
-  className: s,
-  classNames: u,
+          children: [
+            /* @__PURE__ */ r(
+              p,
+              {
+                component: "span",
+                variant: "body",
+                weight: "medium",
+                size: "base",
+                children: l === "range" && (a != null && a.from) && (a != null && a.to) ? j(a) : l === "single" && a ? D(a) : A
+              }
+            ),
+            /* @__PURE__ */ g("div", { className: "flex gap-2xl max-lg:w-full max-lg:justify-between max-lg:gap-0 max-lg:pt-lg", children: [
+              n ? n() : /* @__PURE__ */ r(k, { variant: "link", onClick: s, children: T }),
+              d ? d() : /* @__PURE__ */ r(k, { variant: "primary", size: "sm", onClick: f, children: B })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}, z = ({
+  className: u,
+  classNames: c,
   showOutsideDays: o = !0,
-  captionLayout: i = "label",
-  formatters: n,
-  components: c,
+  captionLayout: l = "label",
+  formatters: a,
+  components: m,
+  locale: s,
   ...f
 }) => {
-  const t = _();
-  return /* @__PURE__ */ a(
-    A,
+  const t = N(), b = (s == null ? void 0 : s.code) ?? "default";
+  return /* @__PURE__ */ r(
+    q,
     {
       showOutsideDays: o,
+      locale: s,
       className: e(
         "[[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        s
+        u
       ),
-      captionLayout: i,
+      captionLayout: l,
       formatters: {
-        formatMonthDropdown: (r) => r.toLocaleString("default", { month: "short" }),
-        formatWeekdayName: (r) => r.toLocaleString("default", { weekday: "short" }),
-        formatCaption: (r) => r.toLocaleString("default", { month: "long", year: "numeric" }),
-        ...n
+        formatMonthDropdown: (n) => n.toLocaleString(b, { month: "short" }),
+        formatWeekdayName: (n) => n.toLocaleString(b, { weekday: "short" }),
+        formatCaption: (n) => n.toLocaleString(b, { month: "long", year: "numeric" }),
+        ...a
       },
       classNames: {
         root: e("w-fit", t.root),
@@ -145,7 +153,7 @@ const H = ({
           t.dropdown
         ),
         caption_label: e(
-          g({
+          y({
             variant: "title",
             weight: "medium",
             size: "md",
@@ -157,7 +165,7 @@ const H = ({
         table: "w-full border-collapse",
         weekdays: e("flex mb-sm", t.weekdays),
         weekday: e(
-          g({
+          y({
             variant: "body",
             weight: "medium",
             size: "caption"
@@ -178,7 +186,7 @@ const H = ({
           t.week_number
         ),
         day: e(
-          g({
+          y({
             variant: "body",
             weight: "regular",
             size: "base"
@@ -207,98 +215,98 @@ const H = ({
           t.disabled
         ),
         hidden: e("invisible", t.hidden),
-        ...u
+        ...c
       },
       components: {
         Root: ({
-          className: r,
+          className: n,
           rootRef: d,
-          ...l
-        }) => /* @__PURE__ */ a(
+          ...i
+        }) => /* @__PURE__ */ r(
           "div",
           {
             "data-slot": "calendar",
             ref: d,
-            className: r,
-            ...l
+            className: n,
+            ...i
           }
         ),
         Chevron: ({
-          className: r,
+          className: n,
           orientation: d,
-          ...l
-        }) => d === "left" ? /* @__PURE__ */ a(
-          b,
+          ...i
+        }) => d === "left" ? /* @__PURE__ */ r(
+          p,
           {
             component: "span",
             variant: "title",
             weight: "medium",
             size: "md",
-            children: /* @__PURE__ */ a(
-              L,
+            children: /* @__PURE__ */ r(
+              W,
               {
                 className: e(
                   "inline size-comp-calendar-ico-size text-comp-select-icon-brand-def",
-                  r
+                  n
                 ),
-                ...l
+                ...i
               }
             )
           }
-        ) : d === "right" ? /* @__PURE__ */ a(
-          b,
+        ) : d === "right" ? /* @__PURE__ */ r(
+          p,
           {
             component: "span",
             variant: "title",
             weight: "medium",
             size: "md",
-            children: /* @__PURE__ */ a(
-              R,
+            children: /* @__PURE__ */ r(
+              Y,
               {
                 className: e(
                   "inline size-comp-calendar-ico-size text-comp-select-icon-brand-def",
-                  r
+                  n
                 ),
-                ...l
+                ...i
               }
             )
           }
-        ) : /* @__PURE__ */ a(
-          S,
+        ) : /* @__PURE__ */ r(
+          E,
           {
-            className: e("size-comp-calendar-ico-size", r),
-            ...l
+            className: e("size-comp-calendar-ico-size", n),
+            ...i
           }
         ),
-        DayButton: q,
-        WeekNumber: ({ children: r, ...d }) => /* @__PURE__ */ a("td", { ...d, children: /* @__PURE__ */ a("div", { className: "flex items-center justify-center text-center", children: r }) }),
-        ...c
+        DayButton: F,
+        WeekNumber: ({ children: n, ...d }) => /* @__PURE__ */ r("td", { ...d, children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center text-center", children: n }) }),
+        ...m
       },
       ...f
     }
   );
-}, q = ({
-  className: s,
-  day: u,
+}, F = ({
+  className: u,
+  day: c,
   modifiers: o,
-  children: i,
-  disabled: n,
-  ...c
+  children: l,
+  disabled: a,
+  ...m
 }) => {
-  const f = _(), t = w.useRef(null);
-  return w.useEffect(() => {
-    var r;
-    o.focused && ((r = t.current) == null || r.focus());
-  }, [o.focused]), /* @__PURE__ */ a(
+  const s = N(), f = _.useRef(null);
+  return _.useEffect(() => {
+    var t;
+    o.focused && ((t = f.current) == null || t.focus());
+  }, [o.focused]), /* @__PURE__ */ r(
     "button",
     {
-      ref: t,
-      "data-day": u.date.toLocaleDateString(),
+      ref: f,
+      "data-day": c.date.toLocaleDateString(),
       "data-selected-single": o.selected && !o.range_start && !o.range_end && !o.range_middle,
       "data-range-start": o.range_start,
       "data-range-end": o.range_end,
       "data-range-middle": o.range_middle,
-      disabled: n,
+      disabled: a,
       className: e(
         "relative size-full",
         'before:absolute before:inset-0 before:rounded-full before:transition-colors before:content-[""]',
@@ -310,14 +318,14 @@ const H = ({
         "group-data-[focused=true]/day:z-10",
         "outline-0",
         {
-          "hover:text-text-brand-def hover:before:bg-surface-brand-brand-tertiary focus-visible:text-text-brand-def focus-visible:focus-default focus-visible:before:bg-surface-brand-brand-tertiary": !n
+          "hover:text-text-brand-def hover:before:bg-surface-brand-brand-tertiary focus-visible:text-text-brand-def focus-visible:focus-default focus-visible:before:bg-surface-brand-brand-tertiary": !a
         },
-        f.day,
-        s
+        s.day,
+        u
       ),
-      ...c,
-      children: /* @__PURE__ */ a(
-        b,
+      ...m,
+      children: /* @__PURE__ */ r(
+        p,
         {
           variant: "body",
           weight: "regular",
@@ -325,14 +333,14 @@ const H = ({
           component: "span",
           fixY: !0,
           className: "relative z-1 block transition-colors",
-          children: i
+          children: l
         }
       )
     }
   );
 };
 export {
-  H as Calendar,
-  v as CalendarBase,
-  q as CalendarDayButton
+  U as Calendar,
+  z as CalendarBase,
+  F as CalendarDayButton
 };

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+declare const chipVariants: (props?: ({
+    checked?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props for the Chip component.
+ * Extends standard button HTML attributes, excluding 'onChange' and 'disabled' to use custom implementations.
+ */
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled'> {
+    /**
+     * The checked state of the chip.
+     * When true, the chip displays a filled check icon and active styling.
+     */
+    checked: boolean;
+    /**
+     * Callback function triggered when the chip's checked state changes.
+     * @param checked - The new checked state
+     */
+    onCheckedChange: (checked: boolean) => void;
+    /**
+     * Whether the chip is disabled.
+     * When true, prevents interaction and applies disabled styling.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * A selectable chip component that acts as a toggleable filter or option.
+ * Displays as a pill-shaped button with an icon indicating its checked state.
+ *
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = React.useState(false)
+ *
+ * <Chip checked={checked} onCheckedChange={setChecked}>
+ *   Option Label
+ * </Chip>
+ * ```
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+export { Chip, chipVariants };
+//# sourceMappingURL=Chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,QAAA,MAAM,YAAY;;;8EA0CjB,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,UAAU,CACxB;IACD;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,qFA6CT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/Chip/Chip.js

@@ -0,0 +1,98 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import * as l from "react";
+import { cva as m } from "class-variance-authority";
+import { EmptyCircle as f } from "../Icons/CustomIcons.js";
+import { Typography as p } from "../Typography/Typography.js";
+import { cn as x } from "../../utils/cn.js";
+import { CheckCircleBold as b } from "@solar-icons/react-perf";
+const v = m(
+  [
+    "inline-flex items-center gap-xs rounded-full px-md py-sm",
+    "cursor-pointer transition-colors",
+    "focus-visible-default",
+    "[&>svg]:size-icon-small [&>svg]:shrink-0",
+    "border-1 border-stroke-base-primary"
+  ],
+  {
+    variants: {
+      checked: {
+        true: [
+          "bg-surface-brand-primary",
+          "border-surface-brand-primary",
+          "text-text-invert-def",
+          "[&>svg]:text-icon-invert-def"
+        ],
+        false: [
+          "text-text-dark-secondary",
+          "[&>svg]:text-icon-dark-secondary-def",
+          "hover:text-text-brand-hover",
+          "hover:bg-surface-brand-brand-tertiary",
+          "hover:[&>svg]:text-icon-brand-hover"
+        ]
+      },
+      disabled: {
+        true: [
+          "cursor-not-allowed",
+          "text-text-dark-disabled",
+          "[&>svg]:text-icon-dark-tertiary",
+          "hover:bg-transparent",
+          "hover:text-text-dark-disabled",
+          "hover:[&>svg]:text-icon-dark-tertiary"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: {
+      checked: !1,
+      disabled: !1
+    }
+  }
+), h = l.forwardRef(
+  ({
+    className: a,
+    checked: r,
+    onCheckedChange: o,
+    disabled: e = !1,
+    children: i,
+    ...s
+  }, n) => {
+    const d = () => {
+      e || o(!r);
+    };
+    return /* @__PURE__ */ c(
+      "button",
+      {
+        ref: n,
+        type: "button",
+        role: "checkbox",
+        "aria-checked": r,
+        "aria-disabled": e,
+        disabled: e,
+        "data-state": r ? "checked" : "unchecked",
+        className: x(v({ checked: r, disabled: e, className: a })),
+        onClick: d,
+        ...s,
+        children: [
+          r ? /* @__PURE__ */ t(b, {}) : /* @__PURE__ */ t(f, {}),
+          /* @__PURE__ */ t(
+            p,
+            {
+              component: "span",
+              variant: "body",
+              weight: "medium",
+              size: "base",
+              fixY: !0,
+              className: "text-inherit",
+              children: i
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Chip";
+export {
+  h as Chip,
+  v as chipVariants
+};

package/dist/components/Chip/Chip.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Chip } from './Chip';
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const Default: Story;
+export declare const AllStates: Story;
+export declare const ChipGroup: Story;
+//# sourceMappingURL=Chip.stories.d.ts.map

package/dist/components/Chip/Chip.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA0C3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAmDvB,CAAA"}

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

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

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

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

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const dataTableCellVariants: (props?: ({
+    variant?: "default" | "white" | null | undefined;
+    position?: "first" | "last" | "middle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DataTableColumn<T> {
+    dataKey: keyof T;
+    title: ReactNode;
+    className?: string;
+    lineClamp?: boolean | 1 | 2;
+    render?: (value: T[keyof T], rowData: T, rowIndex: number, disabled?: boolean) => ReactNode;
+}
+export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableElement>, 'children'>, VariantProps<typeof dataTableCellVariants> {
+    data: T[];
+    columns: DataTableColumn<T>[];
+    showHeader?: boolean;
+    className?: string;
+    disabled?: boolean;
+}
+declare const DataTable: <T>({ data, columns, showHeader, className, variant, disabled, ...props }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { DataTable, dataTableCellVariants };
+//# sourceMappingURL=DataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,qBAAqB;;;8EAmB1B,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B,MAAM,CAAC,EAAE,CACP,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EACjB,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE,OAAO,KACf,SAAS,CAAA;CACf;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,CAC/B,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,EAC9D,YAAY,CAAC,OAAO,qBAAqB,CAAC;IAC5C,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,GAAI,CAAC,EAAG,uEAQpB,cAAc,CAAC,CAAC,CAAC,4CAyFnB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAA"}