@lazar-ui/kit 0.1.0

package/dist/input.d.ts

@@ -0,0 +1,39 @@
+import { default as default_2 } from 'react';
+import { FC } from 'react';
+
+export declare interface IInputEmailProps extends Omit<IInputProps, 'type'> {
+}
+
+export declare interface IInputNumberProps extends Omit<IInputProps, 'type' | 'inputMode'> {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
+export declare interface IInputPasswordProps extends Omit<IInputProps, 'type'> {
+}
+
+export declare interface IInputPhoneProps extends Omit<IInputProps, 'type'> {
+}
+
+export declare interface IInputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'suffix' | 'size' | 'onChange' | 'onBlur' | 'onFocus'> {
+    ref?: default_2.Ref<HTMLInputElement>;
+    invalid?: boolean;
+    size?: TInputSize;
+    before?: default_2.ReactNode;
+    after?: default_2.ReactNode;
+    onChange?: (value: string) => void;
+    onBlur?: (e: default_2.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: default_2.FocusEvent<HTMLInputElement>) => void;
+}
+
+export declare const Input: FC<IInputProps> & {
+    Email: FC<IInputEmailProps>;
+    Number: FC<IInputNumberProps>;
+    Password: FC<IInputPasswordProps>;
+    Phone: FC<IInputPhoneProps>;
+};
+
+declare type TInputSize = 'sm' | 'md' | 'lg';
+
+export { }

package/dist/input.js

@@ -0,0 +1,146 @@
+import { jsxs as C, jsx as e } from "react/jsx-runtime";
+import { c as z } from "./clsx-OuTLNxxd.mjs";
+import { useState as g, useCallback as f } from "react";
+import { g as M } from "./getVariantClassName-D7Nhpuec.mjs";
+import { u as x } from "./useLocale-D2Z0JH0l.mjs";
+import './input.css';const p = {
+  INPUT: "Input",
+  INPUT_EMAIL: "InputEmail",
+  INPUT_NUMBER: "InputNumber",
+  INPUT_PASSWORD: "InputPassword",
+  INPUT_PHONE: "InputPhone"
+}, y = "_root_p1h72_17", E = "_invalid_p1h72_36", B = "_disabled_p1h72_42", U = "_sizeSm_p1h72_56", L = "_sizeMd_p1h72_60", S = "_sizeLg_p1h72_64", T = "_control_p1h72_68", A = "_before_p1h72_99", k = "_after_p1h72_100", O = "_togglePassword_p1h72_108", l = {
+  root: y,
+  invalid: E,
+  disabled: B,
+  sizeSm: U,
+  sizeMd: L,
+  sizeLg: S,
+  control: T,
+  before: A,
+  after: k,
+  togglePassword: O
+}, d = (o) => {
+  const { ref: s, invalid: t = !1, size: r = "md", before: a, after: n, className: i, onChange: c, onBlur: h, onFocus: m, ...u } = o, P = z(
+    l.root,
+    M("size", r, l),
+    {
+      [l.disabled]: u.disabled === !0,
+      [l.invalid]: t
+    },
+    i
+  ), b = (v) => {
+    c?.(v.target.value);
+  };
+  return /* @__PURE__ */ C("div", { className: P, children: [
+    a && /* @__PURE__ */ e("span", { className: l.before, children: a }),
+    /* @__PURE__ */ e("input", { ref: s, className: l.control, onChange: b, onBlur: h, onFocus: m, ...u }),
+    n && /* @__PURE__ */ e("span", { className: l.after, children: n })
+  ] });
+};
+d.displayName = p.INPUT;
+const V = () => /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+  "path",
+  {
+    d: "M2 3c0-.6.4-1 1-1h1.5a1 1 0 01.9.6l.7 1.5a1 1 0 01-.1 1.1L5 6a8.6 8.6 0 004 4l1-1a1 1 0 011.1-.2l1.5.7a1 1 0 01.6.9V13a1 1 0 01-1 1C6.5 14 2 9.5 2 3z",
+    fill: "currentColor"
+  }
+) }), $ = () => /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+  "path",
+  {
+    d: "M2 4a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4zm2 0l4 3 4-3m0 8V6.5L8 9.5 4 6.5V12",
+    fill: "currentColor"
+  }
+) }), D = () => /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+  "path",
+  {
+    d: "M8 3C4.5 3 1.5 5.5 0 8c1.5 2.5 4.5 5 8 5s6.5-2.5 8-5c-1.5-2.5-4.5-5-8-5zm0 8a3 3 0 110-6 3 3 0 010 6zm0-1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z",
+    fill: "currentColor"
+  }
+) }), H = () => /* @__PURE__ */ e("svg", { width: "100%", height: "100%", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+  "path",
+  {
+    d: "M3.5 2L14 12.5M6.5 5.5A3 3 0 0010 9m4.5-1A9.5 9.5 0 0014 8c-1.5-2.5-4.5-5-8-5-.7 0-1.4.1-2 .3m-2.6 1.2C.8 5.2 0 8 0 8c1.5 2.5 4.5 5 8 5 1.5 0 2.9-.4 4.1-1",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    fill: "none"
+  }
+) });
+function R(o) {
+  const s = o.replace(/\D/g, "").slice(0, 11);
+  if (!s) return "";
+  let t = "+7";
+  return s.length > 1 && (t += ` (${s.slice(1, 4)}`), s.length >= 4 && (t += `) ${s.slice(4, 7)}`), s.length >= 7 && (t += `-${s.slice(7, 9)}`), s.length >= 9 && (t += `-${s.slice(9, 11)}`), t;
+}
+function j(o) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o);
+}
+const w = (o) => {
+  const { ref: s, before: t, onBlur: r, invalid: a, ...n } = o, [i, c] = g(!1), h = f(
+    (u) => {
+      c(!0), r?.(u);
+    },
+    [r]
+  ), m = a || i && n.value != null && !j(n.value);
+  return /* @__PURE__ */ e(
+    d,
+    {
+      ref: s,
+      type: "email",
+      before: t ?? /* @__PURE__ */ e($, {}),
+      invalid: m,
+      onBlur: h,
+      ...n
+    }
+  );
+};
+w.displayName = p.INPUT_EMAIL;
+const _ = (o) => {
+  const { ref: s, ...t } = o;
+  return /* @__PURE__ */ e(d, { ref: s, type: "number", inputMode: "numeric", ...t });
+};
+_.displayName = p.INPUT_NUMBER;
+const N = (o) => {
+  const { ref: s, after: t, ...r } = o, a = x(), [n, i] = g(!1), c = f(() => i((h) => !h), []);
+  return /* @__PURE__ */ e(
+    d,
+    {
+      ref: s,
+      type: n ? "text" : "password",
+      after: t ?? /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          className: l.togglePassword,
+          onClick: c,
+          tabIndex: -1,
+          "aria-label": n ? a.input.passwordHide : a.input.passwordShow,
+          children: n ? /* @__PURE__ */ e(H, {}) : /* @__PURE__ */ e(D, {})
+        }
+      ),
+      ...r
+    }
+  );
+};
+N.displayName = p.INPUT_PASSWORD;
+const I = (o) => {
+  const { ref: s, before: t, onChange: r, ...a } = o, n = f(
+    (i) => {
+      const c = R(i);
+      r?.(c);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ e(d, { ref: s, type: "tel", before: t ?? /* @__PURE__ */ e(V, {}), onChange: n, ...a });
+};
+I.displayName = p.INPUT_PHONE;
+const J = Object.assign(d, {
+  Email: w,
+  Number: _,
+  Password: N,
+  Phone: I
+});
+export {
+  J as Input
+};

package/dist/isValidReactNode-CmYwTWCE.mjs

@@ -0,0 +1,18 @@
+import { isValidElement as y } from "react";
+const c = (t) => t.type ? typeof t.type == "string" ? t.type : "displayName" in t.type ? t.type.displayName : t.type.name : "", r = (t, e) => t === e, n = (t, e, o = !0) => {
+  const s = Array.isArray(t);
+  let i = !1;
+  if (y(e)) {
+    const a = c(e);
+    s ? i = t.some((p) => r(p, a)) : i = r(t, a);
+  }
+  if (!i && o) {
+    let a = t;
+    s && (a = t.join(", ")), console.warn("Invalid React node. Node should be an instance of %s", a);
+  }
+  return i;
+};
+export {
+  c as g,
+  n as i
+};

package/dist/menu.css

@@ -0,0 +1 @@
+._root_rtz62_1{align-items:center;border-radius:var(--dropdown-item-radius);cursor:pointer;display:flex;font-size:var(--dropdown-item-font-size);gap:var(--dropdown-item-gap);outline:none;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);transition:background-color .1s ease;-webkit-user-select:none;user-select:none}._root_rtz62_1:hover{background:var(--color-background-secondary)}._root_rtz62_1:focus-visible{background:var(--color-background-secondary)}._root_rtz62_1._disabled_rtz62_19{color:var(--color-text-disabled);cursor:not-allowed}._root_rtz62_1._disabled_rtz62_19:hover{background:transparent}._checkbox_rtz62_27{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}._checkbox_rtz62_27._checked_rtz62_38{background:var(--color-background-brand);border-color:var(--color-background-brand);color:var(--color-text-on-brand)}._label_rtz62_44{flex:1;overflow:hidden;text-overflow:ellipsis}:root{--dropdown-min-width: 160px;--dropdown-item-padding-x: var(--space-3);--dropdown-item-padding-y: var(--space-2);--dropdown-item-gap: var(--space-2);--dropdown-item-radius: var(--radius-1);--dropdown-item-font-size: var(--font-size-sm);--dropdown-item-icon-size: 16px;--dropdown-separator-margin: var(--space-1) var(--space-2);--dropdown-group-label-padding: var(--space-2) var(--space-3);--dropdown-group-label-font-size: var(--font-size-xs)}._root_mkbkc_14{min-width:var(--dropdown-min-width);padding:var(--space-1)}._root_1rvg0_1{padding-bottom:var(--space-1);padding-top:var(--space-1)}._root_1rvg0_1+._root_1rvg0_1{border-top:1px solid var(--color-border-primary)}._label_1rvg0_9{color:var(--color-text-tertiary);font-size:var(--dropdown-group-label-font-size);font-weight:var(--font-weight-medium);padding:var(--dropdown-group-label-padding);text-transform:uppercase}._root_vdz2l_1{align-items:center;border-radius:var(--dropdown-item-radius);cursor:pointer;display:flex;font-size:var(--dropdown-item-font-size);gap:var(--dropdown-item-gap);outline:none;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);transition:background-color .1s ease;-webkit-user-select:none;user-select:none}._root_vdz2l_1:hover{background:var(--color-background-secondary)}._root_vdz2l_1:focus-visible{background:var(--color-background-secondary)}._root_vdz2l_1._disabled_vdz2l_19{color:var(--color-text-disabled);cursor:not-allowed}._root_vdz2l_1._disabled_vdz2l_19:hover{background:transparent}._root_vdz2l_1._danger_vdz2l_26{color:var(--color-background-error)}._root_vdz2l_1._danger_vdz2l_26:hover{background:color-mix(in sRGB,var(--color-background-error) 8%,transparent)}._icon_vdz2l_33{align-items:center;color:var(--color-text-tertiary);display:inline-flex;flex-shrink:0;height:var(--dropdown-item-icon-size);justify-content:center;width:var(--dropdown-item-icon-size)}._label_vdz2l_43{flex:1;overflow:hidden;text-overflow:ellipsis}._root_c60j4_1{background:var(--color-border-primary);border:none;height:1px;margin:var(--dropdown-separator-margin)}

package/dist/menu.d.ts

@@ -0,0 +1,94 @@
+import { default as default_2 } from 'react';
+import { Placement } from 'react-aria';
+
+declare interface IProps {
+    /** Children (item label). */
+    children: default_2.ReactNode;
+    /** Whether the item is checked. */
+    checked: boolean;
+    /** Callback when checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+}
+export { IProps as ICheckboxProps }
+export { IProps as IMenuCheckboxProps }
+
+declare interface IProps_2 extends default_2.PropsWithChildren {
+}
+export { IProps_2 as IContentProps }
+export { IProps_2 as IMenuContentProps }
+
+declare interface IProps_3 extends default_2.PropsWithChildren {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Placement relative to trigger. All useOverlayPosition placements are supported. Default: `'bottom-start'`. */
+    placement?: Placement;
+}
+export { IProps_3 as IMenuProps }
+export { IProps_3 as IMenuRootProps }
+
+declare interface IProps_4 {
+    /** Group label. */
+    label: string;
+    /** Group items. */
+    children: default_2.ReactNode;
+}
+export { IProps_4 as IGroupProps }
+export { IProps_4 as IMenuGroupProps }
+
+declare interface IProps_5 {
+    /** Children (item label). */
+    children: default_2.ReactNode;
+    /** Action callback when the item is selected. */
+    onAction?: () => void;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+    /** Whether the item is in danger state (e.g. delete action). */
+    danger?: boolean;
+    /** Optional icon before the label. */
+    icon?: default_2.ReactNode;
+}
+export { IProps_5 as IItemProps }
+export { IProps_5 as IMenuItemProps }
+
+declare interface IProps_6 extends default_2.PropsWithChildren {
+}
+export { IProps_6 as IMenuTriggerProps }
+export { IProps_6 as ITriggerProps }
+
+export declare const Menu: TMenuCompoundComponent;
+
+/**
+ * Menu container. Manages open/close state via Popover and validates children.
+ *
+ * Uses compound component pattern via `<Menu.Trigger>`, `<Menu.Content>`,
+ * `<Menu.Item>`, `<Menu.Checkbox>`, `<Menu.Separator>`, and `<Menu.Group>`.
+ *
+ * @example
+ * ```tsx
+ * <Menu>
+ *   <Menu.Trigger>
+ *     <Button>Actions</Button>
+ *   </Menu.Trigger>
+ *   <Menu.Content>
+ *     <Menu.Item icon={<Icon />}>Edit</Menu.Item>
+ *     <Menu.Item danger>Delete</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ */
+declare const Menu_2: default_2.FC<IProps_3>;
+
+declare type TMenuCompoundComponent = typeof Menu_2 & {
+    Checkbox: default_2.FC<IProps>;
+    Content: default_2.FC<IProps_2>;
+    Group: default_2.FC<IProps_4>;
+    Item: default_2.FC<IProps_5>;
+    Separator: default_2.FC;
+    Trigger: default_2.FC<IProps_6>;
+};
+
+export { }

package/dist/menu.js

@@ -0,0 +1,135 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { c as m } from "./clsx-OuTLNxxd.mjs";
+import { usePopoverContext as u, Popover as N } from "./popover.js";
+import R from "react";
+import { i as O } from "./isValidReactNode-CmYwTWCE.mjs";
+import './menu.css';const k = () => {
+  const { state: e } = u();
+  return {
+    close: () => {
+      e.close();
+    }
+  };
+}, a = "Menu", y = "bottom start";
+var s = ((e) => (e.CHECKBOX = `${a}.Checkbox`, e.CONTENT = `${a}.Content`, e.GROUP = `${a}.Group`, e.ITEM = `${a}.Item`, e.SEPARATOR = `${a}.Separator`, e.TRIGGER = `${a}.Trigger`, e))(s || {});
+const A = "_root_rtz62_1", G = "_disabled_rtz62_19", I = "_checkbox_rtz62_27", M = "_checked_rtz62_38", P = "_label_rtz62_44", _ = {
+  root: A,
+  disabled: G,
+  checkbox: I,
+  checked: M,
+  label: P
+}, g = (e) => {
+  const { checked: o, children: n, disabled: t = !1, onCheckedChange: c } = e, { close: l } = k(), d = m(
+    _.root,
+    t && _.disabled
+  );
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "aria-checked": o,
+      "aria-disabled": t,
+      className: d,
+      onClick: () => {
+        t || (c && c(!o), l());
+      },
+      role: "menuitemcheckbox",
+      tabIndex: t ? -1 : 0,
+      children: [
+        /* @__PURE__ */ r("span", { className: m(_.checkbox, o && _.checked), children: o && /* @__PURE__ */ r(
+          "svg",
+          {
+            "aria-hidden": "true",
+            height: "12",
+            viewBox: "0 0 12 12",
+            width: "12",
+            children: /* @__PURE__ */ r(
+              "path",
+              {
+                d: "M2 6 L5 9 L10 3",
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "2"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ r("span", { className: _.label, children: n })
+      ]
+    }
+  );
+};
+g.displayName = s.CHECKBOX;
+const z = "_root_mkbkc_14", L = {
+  root: z
+}, T = (e) => {
+  const { children: o } = e;
+  return /* @__PURE__ */ r(N.Content, { padding: !1, children: /* @__PURE__ */ r("div", { className: L.root, children: o }) });
+};
+T.displayName = s.CONTENT;
+const B = [s.TRIGGER, s.CONTENT], $ = (e) => {
+  const { children: o, open: n, onOpenChange: t, placement: c = y } = e, l = (d) => O(B, d) ? d : null;
+  return /* @__PURE__ */ r(N, { open: n, onOpenChange: t, placement: c, children: R.Children.map(o, l) });
+};
+$.displayName = a;
+const U = "_root_1rvg0_1", j = "_label_1rvg0_9", b = {
+  root: U,
+  label: j
+}, v = (e) => {
+  const { children: o, label: n } = e;
+  return /* @__PURE__ */ p("div", { className: b.root, role: "group", children: [
+    /* @__PURE__ */ r("div", { className: b.label, children: n }),
+    o
+  ] });
+};
+v.displayName = s.GROUP;
+const S = "_root_vdz2l_1", w = "_disabled_vdz2l_19", D = "_danger_vdz2l_26", H = "_icon_vdz2l_33", K = "_label_vdz2l_43", h = {
+  root: S,
+  disabled: w,
+  danger: D,
+  icon: H,
+  label: K
+}, x = (e) => {
+  const { children: o, danger: n = !1, disabled: t = !1, icon: c, onAction: l } = e, { close: d } = k(), C = m(
+    h.root,
+    n && h.danger,
+    t && h.disabled
+  );
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "aria-disabled": t,
+      className: C,
+      onClick: () => {
+        t || (l && l(), d());
+      },
+      role: "menuitem",
+      tabIndex: t ? -1 : 0,
+      children: [
+        c && /* @__PURE__ */ r("span", { className: h.icon, children: c }),
+        /* @__PURE__ */ r("span", { className: h.label, children: o })
+      ]
+    }
+  );
+};
+x.displayName = s.ITEM;
+const X = "_root_c60j4_1", F = {
+  root: X
+}, f = () => /* @__PURE__ */ r("hr", { className: F.root });
+f.displayName = s.SEPARATOR;
+const E = (e) => {
+  const { children: o } = e, { triggerRef: n, state: t } = u();
+  return /* @__PURE__ */ r("span", { "aria-expanded": t.isOpen, "aria-haspopup": "true", onClick: t.toggle, ref: n, children: o });
+};
+E.displayName = s.TRIGGER;
+const i = $;
+i.Checkbox = g;
+i.Content = T;
+i.Group = v;
+i.Item = x;
+i.Separator = f;
+i.Trigger = E;
+export {
+  i as Menu
+};

package/dist/pagination.css

@@ -0,0 +1 @@
+:root{--pagination-button-radius: var(--radius-2);--pagination-active-bg: var(--color-background-brand);--pagination-active-text: var(--color-text-on-brand);--pagination-button-bg: transparent;--pagination-button-text: var(--color-text-secondary);--pagination-button-bg-hover: var(--color-background-secondary);--pagination-button-text-hover: var(--color-text-primary);--pagination-button-disabled-bg: transparent;--pagination-button-disabled-text: var(--color-text-disabled);--pagination-focus-ring: var(--color-border-focus)}._button_r1eh7_14{align-items:center;background:var(--pagination-button-bg);border:none;border-radius:var(--pagination-button-radius);color:var(--pagination-button-text);cursor:pointer;display:flex;justify-content:center;line-height:1;outline-offset:2px;padding:0;transition:background-color .15s,color .15s;-webkit-user-select:none;user-select:none}._button_r1eh7_14:focus-visible{outline:2px solid var(--pagination-focus-ring)}._button_r1eh7_14:hover:not(:disabled){background:var(--pagination-button-bg-hover);color:var(--pagination-button-text-hover)}._button_r1eh7_14:disabled{cursor:not-allowed;pointer-events:none}._button_r1eh7_14._active_r1eh7_40{background:var(--pagination-active-bg);color:var(--pagination-active-text)}._button_r1eh7_14._prevNext_r1eh7_44{font-size:1.2em;line-height:1}._sizeSm_r1eh7_49._button_r1eh7_14{font-size:var(--font-size-sm);height:var(--space-7);min-width:var(--space-7)}._sizeMd_r1eh7_55._button_r1eh7_14{font-size:var(--font-size-sm);height:var(--space-8);min-width:var(--space-8)}._sizeLg_r1eh7_61._button_r1eh7_14{font-size:var(--font-size-md);height:var(--space-10);min-width:var(--space-10)}:root{--pagination-gap: var(--space-1);--pagination-ellipsis-color: var(--color-text-tertiary)}._root_1tb09_6{align-items:center;display:flex;flex-direction:row;gap:var(--pagination-gap)}._disabled_1tb09_13{opacity:.5;pointer-events:none}._ellipsis_1tb09_18{align-items:center;color:var(--pagination-ellipsis-color);display:flex;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none}._sizeSm_1tb09_27._ellipsis_1tb09_18{font-size:var(--font-size-sm);height:var(--space-7);min-width:var(--space-7)}._sizeMd_1tb09_33._ellipsis_1tb09_18{font-size:var(--font-size-sm);height:var(--space-8);min-width:var(--space-8)}._sizeLg_1tb09_39._ellipsis_1tb09_18{font-size:var(--font-size-md);height:var(--space-10);min-width:var(--space-10)}

package/dist/pagination.d.ts

@@ -0,0 +1,40 @@
+import { default as default_2 } from 'react';
+
+declare enum EPaginationSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+
+export declare interface IPaginationProps {
+    /** Current active page (1-indexed). */
+    page: number;
+    /** Total number of pages. */
+    totalPages: number;
+    /** Callback when page changes. */
+    onChange?: (page: number) => void;
+    /** Whether prev/next buttons are visible. Default: `true`. */
+    showPrevNext?: boolean;
+    /** Size variant. Default: `'md'`. */
+    size?: TPaginationSize;
+    /** Disables all interactions. */
+    disabled?: boolean;
+}
+
+/**
+ * Pagination component. Renders a set of page buttons for navigating
+ * paginated content. Supports prev/next controls, size variants, and
+ * disabled state. Uses ellipsis for large page ranges.
+ *
+ * @example
+ * ```tsx
+ * <Pagination page={1} totalPages={20} onChange={(p) => console.log(p)} />
+ * <Pagination page={5} totalPages={10} size="sm" showPrevNext={false} />
+ * <Pagination page={1} totalPages={5} disabled />
+ * ```
+ */
+export declare const Pagination: default_2.FC<IPaginationProps>;
+
+export declare type TPaginationSize = `${EPaginationSize.SM | EPaginationSize.MD | EPaginationSize.LG}`;
+
+export { }

package/dist/pagination.js

@@ -0,0 +1,74 @@
+import { jsx as d, jsxs as M } from "react/jsx-runtime";
+import { createContext as N, useContext as L, useMemo as S, useCallback as y } from "react";
+import { c as f } from "./clsx-OuTLNxxd.mjs";
+import { u as x } from "./useLocale-D2Z0JH0l.mjs";
+import { g as C } from "./getVariantClassName-D7Nhpuec.mjs";
+import './pagination.css';const v = N(null), R = v.Provider, w = () => {
+  const t = L(v);
+  if (!t)
+    throw new Error("Pagination sub-component must be used within a Pagination");
+  return t;
+}, $ = "_button_r1eh7_14", E = "_active_r1eh7_40", I = "_prevNext_r1eh7_44", A = "_sizeSm_r1eh7_49", j = "_sizeMd_r1eh7_55", k = "_sizeLg_r1eh7_61", b = {
+  button: $,
+  active: E,
+  prevNext: I,
+  sizeSm: A,
+  sizeMd: j,
+  sizeLg: k
+}, z = (t) => {
+  const { page: e, type: a = "page", children: n } = t, { currentPage: r, totalPages: l, disabled: s, onChange: g, size: u } = w(), i = x(), c = e === r, o = s || e < 1 || e > l || c;
+  let p, _;
+  a === "prev" ? (p = i.pagination.prev, _ = n ?? "‹") : a === "next" ? (p = i.pagination.next, _ = n ?? "›") : (p = i.pagination.page.replace("{page}", String(e)), _ = n ?? e);
+  const P = f(b.button, C("size", u, b), {
+    [b.active]: c,
+    [b.prevNext]: a !== "page"
+  });
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      "aria-current": c ? "page" : void 0,
+      "aria-label": p,
+      className: P,
+      disabled: o,
+      onClick: () => g(e),
+      type: "button",
+      children: _
+    }
+  );
+}, B = "Pagination", m = (t, e) => Array.from({ length: e - t + 1 }, (a, n) => t + n), D = (t, e) => {
+  if (e <= 7)
+    return m(1, e);
+  const r = Math.max(t - 1, 1), l = Math.min(t + 1, e), s = r > 2, g = l < e - 1;
+  if (!s && g) {
+    const i = Math.min(l + 1, e);
+    return [...m(1, i), "ellipsis", e];
+  }
+  if (s && !g) {
+    const i = Math.max(r - 1, 1);
+    return [1, "ellipsis", ...m(i, e)];
+  }
+  return [1, "ellipsis", ...m(r, l), "ellipsis", e];
+}, V = "_root_1tb09_6", Y = "_disabled_1tb09_13", q = "_ellipsis_1tb09_18", F = "_sizeSm_1tb09_27", G = "_sizeMd_1tb09_33", H = "_sizeLg_1tb09_39", h = {
+  root: V,
+  disabled: Y,
+  ellipsis: q,
+  sizeSm: F,
+  sizeMd: G,
+  sizeLg: H
+}, J = (t) => {
+  const { disabled: e = !1, onChange: a, page: n, showPrevNext: r = !0, size: l = "md", totalPages: s } = t, g = x(), u = S(() => D(n, s), [n, s]), i = y(
+    (o) => {
+      e || o < 1 || o > s || a?.(o);
+    },
+    [e, a, s]
+  ), c = f(h.root, C("size", l, h), { [h.disabled]: e });
+  return /* @__PURE__ */ d(R, { value: { currentPage: n, disabled: e, onChange: i, size: l, totalPages: s }, children: /* @__PURE__ */ M("nav", { "aria-label": g.pagination.pagination, className: c, children: [
+    r && /* @__PURE__ */ d(z, { page: n - 1, type: "prev" }),
+    u.map((o, p) => o === "ellipsis" ? /* @__PURE__ */ d("span", { "aria-hidden": "true", className: h.ellipsis, children: "…" }, `ellipsis-${p}`) : /* @__PURE__ */ d(z, { page: o, type: "page" }, o)),
+    r && /* @__PURE__ */ d(z, { page: n + 1, type: "next" })
+  ] }) });
+};
+J.displayName = B;
+export {
+  J as Pagination
+};

package/dist/popover.css

@@ -0,0 +1 @@
+:root{--popover-bg: var(--color-background-primary);--popover-radius: var(--radius-2);--popover-shadow: var(--shadow-md);--popover-padding: var(--space-4);--popover-border: var(--color-border-primary);--popover-z-index: 1000}._content_qcofp_10{background:var(--popover-bg);border:1px solid var(--popover-border);border-radius:var(--popover-radius);box-shadow:var(--popover-shadow);outline:none;padding:var(--popover-padding);z-index:var(--popover-z-index)}._content_qcofp_10[data-placement*=bottom]{animation:_popover-enter-bottom_qcofp_1 .15s ease-out}._content_qcofp_10[data-placement*=top]{animation:_popover-enter-top_qcofp_1 .15s ease-out}._content_qcofp_10[data-placement*=left]{animation:_popover-enter-left_qcofp_1 .15s ease-out}._content_qcofp_10[data-placement*=right]{animation:_popover-enter-right_qcofp_1 .15s ease-out}._noPadding_qcofp_32{padding:0}@keyframes _popover-enter-bottom_qcofp_1{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes _popover-enter-top_qcofp_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes _popover-enter-left_qcofp_1{0%{opacity:0;transform:translate(4px)}to{opacity:1;transform:translate(0)}}@keyframes _popover-enter-right_qcofp_1{0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)}}

package/dist/popover.d.ts

@@ -0,0 +1,54 @@
+import { default as default_2 } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+import { Placement } from 'react-aria';
+
+export declare interface IContentProps extends default_2.PropsWithChildren {
+    /** Whether content has padding. Default: `true`. */
+    padding?: boolean;
+}
+
+declare interface IPopoverContext {
+    triggerRef: default_2.RefObject<HTMLElement | null>;
+    state: OverlayTriggerState;
+    placement: Placement;
+}
+
+export declare interface IPopoverProps extends default_2.PropsWithChildren {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Placement relative to trigger. All useOverlayPosition placements are supported. Default: `'bottom'`. */
+    placement?: Placement;
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+}
+
+export declare const Popover: TPopoverCompoundComponent;
+
+/**
+ * Popover container. Manages open/close state and provides context to `Popover.Trigger` and `Popover.Content`.
+ *
+ * @example
+ * ```tsx
+ * <Popover placement="bottom-start">
+ *   <Popover.Trigger>
+ *     <Button>Open</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <div style={{ padding: 8 }}>Content</div>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ */
+declare const Popover_2: default_2.FC<IPopoverProps>;
+
+declare type TPopoverCompoundComponent = typeof Popover_2 & {
+    Trigger: default_2.FC<IProps>;
+    Content: default_2.FC<IContentProps>;
+};
+
+export declare const usePopoverContext: () => IPopoverContext;
+
+export { }