@lazar-ui/kit 0.1.0

package/dist/popover.js

@@ -0,0 +1,65 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as C, useContext as R, useRef as d } from "react";
+import { c as T } from "./clsx-OuTLNxxd.mjs";
+import { r as h } from "./Overlay-RmiBtqDR.mjs";
+import { $ as N, a as O } from "./useOverlayTriggerState-BIo1Jcba.mjs";
+import { $ as _ } from "./useOverlayPosition-DVu1Qziq.mjs";
+import './popover.css';const f = C(null), y = f.Provider, m = () => {
+  const e = R(f);
+  if (!e)
+    throw new Error("Sub-component must be used within a Popover");
+  return e;
+}, p = "Popover", E = 4;
+var i = ((e) => (e.TRIGGER = `${p}.Trigger`, e.CONTENT = `${p}.Content`, e))(i || {});
+const F = "_content_qcofp_10", G = "_noPadding_qcofp_32", l = {
+  content: F,
+  noPadding: G
+}, u = (e) => {
+  const { children: t, padding: n = !0 } = e, { triggerRef: o, state: r, placement: c } = m(), s = d(null), { overlayProps: $, placement: v } = _({
+    offset: E,
+    overlayRef: s,
+    placement: c,
+    shouldFlip: !0,
+    targetRef: o
+  }), { overlayProps: x } = N(
+    {
+      isDismissable: !0,
+      isOpen: r.isOpen,
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      onClose: r.close
+    },
+    s
+  );
+  return r.isOpen ? /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(
+    "div",
+    {
+      className: T(l.content, !n && l.noPadding),
+      "data-placement": v,
+      ref: s,
+      ...$,
+      ...x,
+      children: t
+    }
+  ) }) : null;
+};
+u.displayName = i.CONTENT;
+const g = (e) => {
+  const { children: t, open: n, onOpenChange: o, placement: r = "bottom" } = e, c = d(null), s = O({ isOpen: n, onOpenChange: o });
+  return /* @__PURE__ */ a(y, { value: { placement: r, state: s, triggerRef: c }, children: t });
+};
+g.displayName = p;
+const P = (e) => {
+  const { children: t } = e, { triggerRef: n, state: o } = m();
+  return (
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    /* @__PURE__ */ a("span", { "aria-expanded": o.isOpen, "aria-haspopup": "true", onClick: o.toggle, ref: n, children: t })
+  );
+};
+P.displayName = i.TRIGGER;
+const b = g;
+b.Trigger = P;
+b.Content = u;
+export {
+  b as Popover,
+  m as usePopoverContext
+};

package/dist/select.css

@@ -0,0 +1 @@
+@charset "UTF-8";:root{--select-radius: var(--radius-2);--select-min-height: 36px}._root_1howi_7{align-items:center;background:var(--color-background-primary);border:1px solid var(--color-border-primary);border-radius:var(--select-radius);cursor:pointer;display:inline-flex;gap:var(--space-2);justify-content:space-between;min-height:var(--select-min-height);outline:none;padding:0 var(--space-3);transition:border-color .15s ease;-webkit-user-select:none;user-select:none;white-space:nowrap}._root_1howi_7:focus-visible{border-color:var(--color-border-focus);box-shadow:0 0 0 2px color-mix(in sRGB,var(--color-border-focus) 20%,transparent)}._disabled_1howi_28{background:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);cursor:not-allowed}._invalid_1howi_35{border-color:var(--color-background-error)}._sizeSm_1howi_39{font-size:var(--font-size-sm);min-height:28px;padding:0 var(--space-2)}._sizeMd_1howi_45{font-size:var(--font-size-md);min-height:36px;padding:0 var(--space-3)}._sizeLg_1howi_51{font-size:var(--font-size-lg);min-height:44px;padding:0 var(--space-4)}._displayText_1howi_57{color:var(--color-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis}._displayTextPlaceholder_1howi_64{color:var(--color-text-tertiary)}._indicators_1howi_68{align-items:center;display:inline-flex;gap:var(--space-1)}._clearButton_1howi_74{align-items:center;background:none;border:none;color:var(--color-text-tertiary);cursor:pointer;display:inline-flex;font-size:var(--font-size-xs);height:16px;justify-content:center;line-height:1;padding:0;width:16px}._clearButton_1howi_74:hover{color:var(--color-text-secondary)}._chevron_1howi_92{color:var(--color-text-tertiary);flex-shrink:0;transition:transform .15s ease}._root_1howi_7[aria-expanded=true] ._chevron_1howi_92{transform:rotate(180deg)}._optionsList_1howi_103{list-style:none;margin:0;max-height:240px;min-width:100%;overflow-y:auto;padding:var(--space-1)}._noOptions_1howi_112{color:var(--color-text-tertiary);font-size:var(--font-size-sm);padding:var(--space-3) var(--space-2);text-align:center}._option_1howi_103{align-items:center;border-radius:var(--radius-1);cursor:pointer;display:flex;gap:var(--space-2);padding:var(--space-2);transition:background-color .1s ease}._option_1howi_103:hover{background:var(--color-background-secondary)}._optionSelected_1howi_132{background:var(--color-background-secondary);color:var(--color-text-primary);font-weight:var(--font-weight-medium)}._optionDisabled_1howi_138{color:var(--color-text-disabled);cursor:not-allowed}._optionDisabled_1howi_138:hover{background:transparent}._optionLabel_1howi_146{flex:1;overflow:hidden;text-overflow:ellipsis}._checkbox_1howi_153{align-items:center;border:1.5px solid var(--color-border-primary);border-radius:var(--radius-1);display:inline-flex;flex-shrink:0;height:16px;justify-content:center;transition:all .1s ease;width:16px}._checkboxChecked_1howi_165{background:var(--color-background-brand);border-color:var(--color-background-brand);color:var(--color-text-on-brand)}

package/dist/select.d.ts

@@ -0,0 +1,64 @@
+import { default as default_2 } from 'react';
+
+declare enum ESelectSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+
+export declare interface ISelectOption {
+    /** Option display label. */
+    label: string;
+    /** Option unique value. */
+    value: string;
+    /** Whether the option is disabled. */
+    disabled?: boolean;
+}
+
+export declare interface ISelectProps {
+    /** Array of options to display in the dropdown. */
+    options: ISelectOption[];
+    /** Currently selected value(s). For single select — string, for multiple — string[]. */
+    value?: string | string[];
+    /** Callback when selection changes. */
+    onChange?: (value: string | string[]) => void;
+    /** Placeholder text when no option is selected. */
+    placeholder?: string;
+    /** Whether multiple options can be selected. */
+    multiple?: boolean;
+    /** Select size. Default: `'md'`. */
+    size?: TSelectSize;
+    /** Whether the select is disabled. */
+    disabled?: boolean;
+    /** Whether the select value can be cleared. */
+    clearable?: boolean;
+    /** Whether the select is in an invalid state. */
+    invalid?: boolean;
+}
+
+/**
+ * Select component. A dropdown selector built on top of Popover.
+ *
+ * Supports single and multiple selection, clearable option, and
+ * three sizes (`sm`, `md`, `lg`).
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState('');
+ *
+ * <Select
+ *   options={[
+ *     { label: 'Users', value: 'users' },
+ *     { label: 'Orders', value: 'orders' },
+ *   ]}
+ *   value={value}
+ *   onChange={setValue}
+ *   placeholder="Select data source"
+ * />
+ * ```
+ */
+export declare const Select: default_2.FC<ISelectProps>;
+
+export declare type TSelectSize = `${ESelectSize.SM | ESelectSize.MD | ESelectSize.LG}`;
+
+export { }

package/dist/select.js

@@ -0,0 +1,170 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { useState as z, useCallback as _ } from "react";
+import { c as h } from "./clsx-OuTLNxxd.mjs";
+import { Popover as u } from "./popover.js";
+import { u as P } from "./useLocale-D2Z0JH0l.mjs";
+import { g as O } from "./getVariantClassName-D7Nhpuec.mjs";
+import './select.css';const M = "Select", B = "bottom start", D = "_root_1howi_7", j = "_disabled_1howi_28", A = "_invalid_1howi_35", E = "_sizeSm_1howi_39", I = "_sizeMd_1howi_45", W = "_sizeLg_1howi_51", F = "_displayText_1howi_57", U = "_displayTextPlaceholder_1howi_64", V = "_indicators_1howi_68", Y = "_clearButton_1howi_74", q = "_chevron_1howi_92", G = "_optionsList_1howi_103", H = "_noOptions_1howi_112", J = "_option_1howi_103", K = "_optionSelected_1howi_132", Q = "_optionDisabled_1howi_138", R = "_optionLabel_1howi_146", X = "_checkbox_1howi_153", Z = "_checkboxChecked_1howi_165", o = {
+  root: D,
+  disabled: j,
+  invalid: A,
+  sizeSm: E,
+  sizeMd: I,
+  sizeLg: W,
+  displayText: F,
+  displayTextPlaceholder: U,
+  indicators: V,
+  clearButton: Y,
+  chevron: q,
+  optionsList: G,
+  noOptions: H,
+  option: J,
+  optionSelected: K,
+  optionDisabled: Q,
+  optionLabel: R,
+  checkbox: X,
+  checkboxChecked: Z
+}, $ = (v) => {
+  const {
+    clearable: f = !1,
+    disabled: a = !1,
+    invalid: b = !1,
+    multiple: s = !1,
+    onChange: t,
+    options: r,
+    placeholder: k,
+    size: w = "md",
+    value: n
+  } = v, [L, m] = z(!1), p = P(), d = s ? r.filter((e) => n?.includes(e.value)) : r.filter((e) => e.value === n), x = d.length > 0 ? d.map((e) => e.label).join(", ") : k ?? p.select.placeholder, g = _(
+    (e) => {
+      if (!e.disabled && t)
+        if (s) {
+          const l = n ?? [], y = l.includes(e.value) ? l.filter((T) => T !== e.value) : [...l, e.value];
+          t(y);
+        } else
+          t(e.value), m(!1);
+    },
+    [s, t, n]
+  ), C = _(
+    (e) => {
+      e.stopPropagation(), t && t(s ? [] : "");
+    },
+    [s, t]
+  ), N = _(
+    (e) => s ? n?.includes(e) ?? !1 : n === e,
+    [s, n]
+  ), S = h(
+    o.root,
+    O("size", w, o),
+    a && o.disabled,
+    b && o.invalid
+  );
+  return /* @__PURE__ */ c(u, { onOpenChange: m, open: L, placement: B, children: [
+    /* @__PURE__ */ i(u.Trigger, { children: /* @__PURE__ */ c(
+      "div",
+      {
+        "aria-disabled": a,
+        "aria-invalid": b,
+        className: S,
+        role: "combobox",
+        tabIndex: a ? -1 : 0,
+        onClick: a ? (e) => e.stopPropagation() : void 0,
+        children: [
+          /* @__PURE__ */ i("span", { className: h(o.displayText, !d.length && o.displayTextPlaceholder), children: x }),
+          /* @__PURE__ */ c("span", { className: o.indicators, children: [
+            f && d.length > 0 && !a && /* @__PURE__ */ i(
+              "button",
+              {
+                "aria-label": p.select.clear,
+                className: o.clearButton,
+                onClick: C,
+                tabIndex: -1,
+                type: "button",
+                children: "✕"
+              }
+            ),
+            /* @__PURE__ */ i(
+              "svg",
+              {
+                "aria-hidden": "true",
+                className: o.chevron,
+                height: "16",
+                viewBox: "0 0 16 16",
+                width: "16",
+                children: /* @__PURE__ */ i(
+                  "path",
+                  {
+                    d: "M4 6 L8 10 L12 6",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "1.5"
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ i(u.Content, { padding: !1, children: /* @__PURE__ */ c(
+      "ul",
+      {
+        "aria-label": x,
+        className: o.optionsList,
+        role: "listbox",
+        children: [
+          r.length === 0 && /* @__PURE__ */ i("li", { className: o.noOptions, children: p.select.noOptions }),
+          r.map((e) => {
+            const l = N(e.value);
+            return /* @__PURE__ */ c(
+              "li",
+              {
+                "aria-disabled": e.disabled,
+                "aria-selected": l,
+                className: h(
+                  o.option,
+                  l && o.optionSelected,
+                  e.disabled && o.optionDisabled
+                ),
+                onClick: () => {
+                  g(e);
+                },
+                role: "option",
+                children: [
+                  s && /* @__PURE__ */ i("span", { className: h(o.checkbox, l && o.checkboxChecked), children: l && /* @__PURE__ */ i(
+                    "svg",
+                    {
+                      "aria-hidden": "true",
+                      height: "12",
+                      viewBox: "0 0 12 12",
+                      width: "12",
+                      children: /* @__PURE__ */ i(
+                        "path",
+                        {
+                          d: "M2 6 L5 9 L10 3",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: "2"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ i("span", { className: o.optionLabel, children: e.label })
+                ]
+              },
+              e.value
+            );
+          })
+        ]
+      }
+    ) })
+  ] });
+};
+$.displayName = M;
+export {
+  $ as Select
+};

package/dist/separator.css

@@ -0,0 +1 @@
+:root{--separator-color: var(--color-border-primary)}._root_1o06b_5{background:var(--separator-color);border:none;height:1px;margin:0;padding-inline:var(--space-4);width:100%}._vertical_1o06b_14{height:100%;padding-block:var(--space-4);padding-inline:0;width:1px}._bleed_1o06b_21{padding:0}

package/dist/separator.d.ts

@@ -0,0 +1,25 @@
+import { default as default_2 } from 'react';
+
+declare interface IProps {
+    /** Vertical orientation. Default: `false`. */
+    vertical?: boolean;
+    /** CSS colour of the line. Default: `var(--color-border-primary)`. */
+    color?: string;
+    /** Removes padding around the line. Default: `false`. */
+    bleed?: boolean;
+}
+
+/**
+ * Separator component. Renders a horizontal or vertical dividing line.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ * <Separator vertical />
+ * <Separator bleed />
+ * <Separator vertical bleed color="var(--color-text-success)" />
+ * ```
+ */
+export declare const Separator: default_2.FC<IProps>;
+
+export { }

package/dist/separator.js

@@ -0,0 +1,24 @@
+import { jsx as l } from "react/jsx-runtime";
+import { c } from "./clsx-OuTLNxxd.mjs";
+import './separator.css';const _ = "Separator", b = "_root_1o06b_5", i = "_vertical_1o06b_14", n = "_bleed_1o06b_21", o = {
+  root: b,
+  vertical: i,
+  bleed: n
+}, m = (r) => {
+  const { vertical: e = !1, color: t, bleed: a = !1 } = r, s = c(
+    o.root,
+    e && o.vertical,
+    a && o.bleed
+  );
+  return /* @__PURE__ */ l(
+    "hr",
+    {
+      className: s,
+      style: { "--separator-color": t ?? "var(--color-border-primary)" }
+    }
+  );
+};
+m.displayName = _;
+export {
+  m as Separator
+};

package/dist/skeleton.css

@@ -0,0 +1 @@
+:root{--skeleton-animation-duration: 1.8s}._root_dz5s8_5{animation:_skeleton-pulse_dz5s8_1 var(--skeleton-animation-duration) ease-in-out infinite;background:var(--color-background-tertiary);display:block;width:100%}._variantText_dz5s8_12{border-radius:var(--radius-1);height:1em}._variantCircular_dz5s8_17{border-radius:50%;height:40px;width:40px}._variantRectangular_dz5s8_23{border-radius:var(--radius-2);height:100px}@keyframes _skeleton-pulse_dz5s8_1{0%{opacity:1}50%{opacity:.4}to{opacity:1}}

package/dist/skeleton.d.ts

@@ -0,0 +1,38 @@
+import { default as default_2 } from 'react';
+
+declare enum ESkeletonVariant {
+    TEXT = "text",
+    CIRCULAR = "circular",
+    RECTANGULAR = "rectangular"
+}
+
+export declare interface ISkeletonProps {
+    /** Visual variant: text line, circle, or rectangle. Default: 'text'. */
+    variant?: TSkeletonVariant;
+    /** CSS width. Numbers are treated as pixels. */
+    width?: string | number;
+    /** CSS height. Numbers are treated as pixels. */
+    height?: string | number;
+    /** Override border-radius. */
+    borderRadius?: string;
+}
+
+/**
+ * Skeleton component. Renders a pulsing placeholder for loading content.
+ *
+ * Supports three variants: `text` (line of text), `circular` (avatar/circle), `rectangular` (card/image).
+ * Use `width` and `height` to control dimensions. Numbers are treated as pixels.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton />
+ * <Skeleton variant="circular" width={40} height={40} />
+ * <Skeleton variant="rectangular" width="100%" height={200} />
+ * <Skeleton width="60%" />
+ * ```
+ */
+export declare const Skeleton: default_2.FC<ISkeletonProps>;
+
+export declare type TSkeletonVariant = `${ESkeletonVariant.TEXT | ESkeletonVariant.CIRCULAR | ESkeletonVariant.RECTANGULAR}`;
+
+export { }

package/dist/skeleton.js

@@ -0,0 +1,27 @@
+import { jsx as c } from "react/jsx-runtime";
+import { c as l } from "./clsx-OuTLNxxd.mjs";
+import { g as d } from "./getVariantClassName-D7Nhpuec.mjs";
+import './skeleton.css';const _ = "Skeleton", v = "_root_dz5s8_5", u = "_variantText_dz5s8_12", m = "_variantCircular_dz5s8_17", p = "_variantRectangular_dz5s8_23", e = {
+  root: v,
+  "skeleton-pulse": "_skeleton-pulse_dz5s8_1",
+  variantText: u,
+  variantCircular: m,
+  variantRectangular: p
+}, x = (s) => {
+  const { borderRadius: o, height: t, variant: i = "text", width: a } = s, n = l(
+    e.root,
+    d("variant", i, e)
+  ), r = {};
+  return a !== void 0 && (r.width = typeof a == "number" ? `${a}px` : a), t !== void 0 && (r.height = typeof t == "number" ? `${t}px` : t), o !== void 0 && (r.borderRadius = o), /* @__PURE__ */ c(
+    "div",
+    {
+      className: n,
+      style: r,
+      "aria-hidden": "true"
+    }
+  );
+};
+x.displayName = _;
+export {
+  x as Skeleton
+};

package/dist/spinner.css

@@ -0,0 +1 @@
+:root{--spinner-speed: .8s;--spinner-color: var(--color-text-secondary)}._root_1n8x7_6{animation:_spinner-rotate_1n8x7_1 var(--spinner-speed) linear infinite;border-color:var(--spinner-color);border-radius:50%;border-style:solid;border-top-color:transparent;border-width:2px;display:inline-block;flex-shrink:0}._sizeSm_1n8x7_17{height:16px;width:16px}._sizeMd_1n8x7_22{height:24px;width:24px}._sizeLg_1n8x7_27{height:32px;width:32px}._sizeXl_1n8x7_32{height:40px;width:40px}@keyframes _spinner-rotate_1n8x7_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/dist/spinner.d.ts

@@ -0,0 +1,31 @@
+import { default as default_2 } from 'react';
+
+declare enum ESpinnerSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl"
+}
+
+export declare interface ISpinnerProps {
+    /** Size. Default: 'md'. */
+    size?: TSpinnerSize;
+    /** CSS color value for the spinner arc. Default: 'var(--color-text-secondary)'. */
+    color?: string;
+}
+
+/**
+ * Spinner component. Renders a rotating arc indicator for loading states.
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner size="lg" />
+ * <Spinner color="var(--palette-brand)" />
+ * ```
+ */
+export declare const Spinner: default_2.FC<ISpinnerProps>;
+
+export declare type TSpinnerSize = `${ESpinnerSize.SM | ESpinnerSize.MD | ESpinnerSize.LG | ESpinnerSize.XL}`;
+
+export { }

package/dist/spinner.js

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as i } from "./clsx-OuTLNxxd.mjs";
+import { g as a } from "./getVariantClassName-D7Nhpuec.mjs";
+import './spinner.css';const _ = "Spinner", c = "_root_1n8x7_6", l = "_sizeSm_1n8x7_17", m = "_sizeMd_1n8x7_22", z = "_sizeLg_1n8x7_27", p = "_sizeXl_1n8x7_32", s = {
+  root: c,
+  "spinner-rotate": "_spinner-rotate_1n8x7_1",
+  sizeSm: l,
+  sizeMd: m,
+  sizeLg: z,
+  sizeXl: p
+}, x = (o) => {
+  const { color: e, size: t = "md" } = o, n = i(
+    s.root,
+    a("size", t, s)
+  );
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: n,
+      role: "status",
+      "aria-label": "Loading",
+      style: { "--spinner-color": e ?? "var(--color-text-secondary)" }
+    }
+  );
+};
+x.displayName = _;
+export {
+  x as Spinner
+};

package/dist/switch.css

@@ -0,0 +1 @@
+:root{--switch-track-width: 36px;--switch-track-height: 20px;--switch-track-radius: var(--radius-full);--switch-track-background: var(--palette-gray-300);--switch-track-background-checked: var(--palette-brand);--switch-track-background-disabled: var(--palette-gray-200);--switch-thumb-size: 16px;--switch-thumb-background: var(--palette-white);--switch-thumb-shadow: var(--shadow-xs);--switch-thumb-offset: 2px;--switch-label-font-size: var(--font-size-md);--switch-label-line-height: var(--line-height-md);--switch-label-color: var(--color-text-primary);--switch-label-gap: var(--space-2);--switch-transition-duration: .2s;--switch-transition-timing: cubic-bezier(.4, 0, .2, 1)}._root_84xww_24{align-items:center;cursor:pointer;display:inline-flex;flex-shrink:0;gap:var(--switch-label-gap);vertical-align:middle}._root_84xww_24._disabled_84xww_33{cursor:not-allowed;opacity:.5}._input_84xww_39{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}._track_84xww_52{align-items:center;background:var(--switch-track-background);border-radius:var(--switch-track-radius);display:inline-flex;flex-shrink:0;height:var(--switch-track-height);position:relative;transition:background var(--switch-transition-duration) var(--switch-transition-timing);width:var(--switch-track-width)}._thumb_84xww_64{background:var(--switch-thumb-background);border-radius:50%;box-shadow:var(--switch-thumb-shadow);height:var(--switch-thumb-size);left:var(--switch-thumb-offset);position:absolute;transition:transform var(--switch-transition-duration) var(--switch-transition-timing),left var(--switch-transition-duration) var(--switch-transition-timing);width:var(--switch-thumb-size)}._label_84xww_75{color:var(--switch-label-color);font-size:var(--switch-label-font-size);line-height:var(--switch-label-line-height);-webkit-user-select:none;user-select:none}._input_84xww_39:checked+._track_84xww_52{background:var(--switch-track-background-checked)}._input_84xww_39:checked+._track_84xww_52 ._thumb_84xww_64{left:calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset))}._input_84xww_39:focus-visible+._track_84xww_52{box-shadow:0 0 0 2px var(--color-border-focus)}._input_84xww_39:disabled+._track_84xww_52{background:var(--switch-track-background-disabled)}._sizeSm_84xww_102{--switch-track-width: 28px;--switch-track-height: 16px;--switch-thumb-size: 12px;--switch-thumb-offset: 2px;--switch-label-font-size: var(--font-size-sm);--switch-label-line-height: var(--line-height-sm)}._sizeMd_84xww_112{--switch-track-width: 36px;--switch-track-height: 20px;--switch-thumb-size: 16px;--switch-thumb-offset: 2px;--switch-label-font-size: var(--font-size-md);--switch-label-line-height: var(--line-height-md)}._sizeLg_84xww_122{--switch-track-width: 44px;--switch-track-height: 24px;--switch-thumb-size: 20px;--switch-thumb-offset: 2px;--switch-label-font-size: var(--font-size-lg);--switch-label-line-height: var(--line-height-lg)}

package/dist/switch.d.ts

@@ -0,0 +1,44 @@
+import { default as default_2 } from 'react';
+
+declare enum ESwitchSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+
+export declare interface ISwitchProps extends TNativeInputProps, default_2.PropsWithChildren {
+    /** Size. Default: 'md'. */
+    size?: TSwitchSize;
+    /** When true, the switch is checked (on). Use for controlled mode. */
+    checked?: boolean;
+    /** Initial checked state for uncontrolled mode. */
+    defaultChecked?: boolean;
+    /** Disables the switch, preventing user interaction. */
+    disabled?: boolean;
+    /** Callback invoked when the switch value changes. */
+    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
+}
+
+/**
+ * Switch component. Renders a toggle switch for on/off settings.
+ *
+ * Supports controlled (`checked` + `onChange`) and uncontrolled (`defaultChecked`) modes.
+ * The underlying element is a native checkbox for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Switch />
+ * <Switch defaultChecked />
+ * <Switch size="lg" />
+ * <Switch checked={isEnabled} onChange={handleChange} />
+ * <Switch disabled />
+ * <Switch>Enable notifications</Switch>
+ * ```
+ */
+export declare const Switch: default_2.FC<ISwitchProps>;
+
+declare type TNativeInputProps = Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'type'>;
+
+export declare type TSwitchSize = `${ESwitchSize.SM | ESwitchSize.MD | ESwitchSize.LG}`;
+
+export { }

package/dist/switch.js

@@ -0,0 +1,37 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { c as m } from "./clsx-OuTLNxxd.mjs";
+import { g as w } from "./getVariantClassName-D7Nhpuec.mjs";
+import './switch.css';const b = "Switch", h = "_root_84xww_24", p = "_disabled_84xww_33", x = "_input_84xww_39", u = "_track_84xww_52", z = "_thumb_84xww_64", N = "_label_84xww_75", k = "_sizeSm_84xww_102", g = "_sizeMd_84xww_112", S = "_sizeLg_84xww_122", s = {
+  root: h,
+  disabled: p,
+  input: x,
+  track: u,
+  thumb: z,
+  label: N,
+  sizeSm: k,
+  sizeMd: g,
+  sizeLg: S
+}, f = (c) => {
+  const { children: t, checked: i, defaultChecked: o, disabled: a = !1, onChange: l, size: n = "md", ..._ } = c, r = m(s.root, w("size", n, s), a && s.disabled);
+  return /* @__PURE__ */ d("label", { className: r, children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        ..._,
+        checked: i,
+        className: s.input,
+        defaultChecked: o,
+        disabled: a,
+        onChange: l,
+        role: "switch",
+        type: "checkbox"
+      }
+    ),
+    /* @__PURE__ */ e("span", { className: s.track, "aria-hidden": "true", children: /* @__PURE__ */ e("span", { className: s.thumb }) }),
+    t && /* @__PURE__ */ e("span", { className: s.label, children: t })
+  ] });
+};
+f.displayName = b;
+export {
+  f as Switch
+};

package/dist/table.css

@@ -0,0 +1 @@
+:root{--cell-bg-header: var(--color-background-tertiary);--cell-border-header: var(--color-border-secondary);--cell-padding: var(--space-3) var(--space-4);--cell-max-width: 200px}._root_hpkeq_8{background-color:transparent;border-bottom:1px solid var(--color-border-primary);max-width:var(--cell-max-width);overflow:hidden;padding:var(--cell-padding);text-overflow:ellipsis;white-space:nowrap}._root_hpkeq_8._header_hpkeq_17{background-color:var(--cell-bg-header);border-bottom:2px solid var(--cell-border-header)}._root_hpkeq_8._alignLeft_hpkeq_21{text-align:left}._root_hpkeq_8._alignRight_hpkeq_24{text-align:right}._root_hpkeq_8._alignCenter_hpkeq_27{text-align:center}:root{--table-bg-stripe: var(--color-background-secondary)}._root_1xa2n_5{background-color:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary);transition:background-color .2s}._root_1xa2n_5:nth-child(odd){background-color:var(--table-bg-stripe)}._root_1xa2n_5:hover{background-color:var(--color-background-brand-secondary)}:root{--table-font-size: var(--font-size-md)}._root_op0kb_5{border-collapse:collapse;font-size:var(--table-font-size);table-layout:fixed;width:100%}

package/dist/table.d.ts

@@ -0,0 +1,60 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Table cell. Must be used as a child of `<Table.Row>`.
+ * Supports text alignment and header styling via `as="th"`.
+ */
+declare const Cell: default_2.FC<IProps>;
+
+declare interface IProps extends default_2.PropsWithChildren {
+    /** Text alignment. */
+    align?: 'left' | 'center' | 'right';
+    /** HTML tag: `'td'` (default) or `'th'`. */
+    as?: 'td' | 'th';
+    /** Tooltip text (native `title` attribute). */
+    title?: string;
+    /** Cell width. */
+    width?: string;
+}
+
+declare interface IProps_2 extends default_2.PropsWithChildren {
+}
+
+export declare interface ITableProps extends default_2.PropsWithChildren {
+}
+
+/**
+ * Table row. Must be used as a child of `<Table>`.
+ * Accepts `<Table.Cell>` children.
+ */
+declare const Row: default_2.FC<IProps_2>;
+
+export declare const Table: TTableCompoundComponent;
+
+/**
+ * Table container. Renders an HTML `<table>` with striped rows and hover effects.
+ *
+ * Uses compound component pattern via `<Table.Row>` and `<Table.Cell>`.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <Table.Row>
+ *     <Table.Cell as="th">Name</Table.Cell>
+ *     <Table.Cell as="th">Role</Table.Cell>
+ *   </Table.Row>
+ *   <Table.Row>
+ *     <Table.Cell>John</Table.Cell>
+ *     <Table.Cell>Developer</Table.Cell>
+ *   </Table.Row>
+ * </Table>
+ * ```
+ */
+declare const Table_2: default_2.FC<ITableProps>;
+
+declare type TTableCompoundComponent = typeof Table_2 & {
+    Cell: typeof Cell;
+    Row: typeof Row;
+};
+
+export { }