@lazar-ui/kit 0.4.0 → 0.5.0

package/dist/table.d.ts

@@ -1,12 +1,44 @@
 import { default as default_2 } from 'react';
 
+/**
+ * Table.ActiveFilters — displays active filter chips with individual remove buttons
+ * and an optional "Clear all" button.
+ *
+ * Returns `null` when there are no active filters.
+ *
+ * @example
+ * ```tsx
+ * <Table.ActiveFilters
+ *   filters={[
+ *     { key: 'status', label: 'Status', value: 'Active' },
+ *     { key: 'role', label: 'Role', value: 'Admin' },
+ *   ]}
+ *   onRemove={(key) => console.log('remove', key)}
+ *   onClearAll={() => console.log('clear all')}
+ * />
+ * ```
+ */
+declare const ActiveFilters: default_2.FC<IProps>;
+
 /**
  * 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 const Cell: default_2.FC<IProps_2>;
+
+export declare interface IFilterItem {
+    key: string;
+    label: string;
+    value: string;
+}
 
-declare interface IProps extends default_2.PropsWithChildren {
+declare interface IProps {
+    filters: IFilterItem[];
+    onRemove: (key: string) => void;
+    onClearAll?: () => void;
+}
+
+declare interface IProps_2 extends default_2.PropsWithChildren {
     /** Text alignment. */
     align?: 'left' | 'center' | 'right';
     /** HTML tag: `'td'` (default) or `'th'`. */
@@ -17,7 +49,10 @@ declare interface IProps extends default_2.PropsWithChildren {
     width?: string;
 }
 
-declare interface IProps_2 extends default_2.PropsWithChildren {
+declare interface IProps_3 extends default_2.PropsWithChildren {
+}
+
+declare interface IProps_4 extends default_2.PropsWithChildren {
 }
 
 export declare interface ITableProps extends default_2.PropsWithChildren {
@@ -27,34 +62,49 @@ 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>;
+declare const Row: default_2.FC<IProps_3>;
 
 export declare const Table: TTableCompoundComponent;
 
 /**
  * Table container. Renders an HTML `<table>` with striped rows and hover effects.
  *
+ * Supports an optional `<Table.Toolbar>` child rendered above the table.
  * Uses compound component pattern via `<Table.Row>` and `<Table.Cell>`.
  *
  * @example
  * ```tsx
  * <Table>
+ *   <Table.Toolbar>
+ *     <Input placeholder="Search..." />
+ *   </Table.Toolbar>
  *   <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>;
 
+/**
+ * Table.Toolbar — a simple flex-wrapper that sits above the Table
+ * and contains arbitrary controls (inputs, buttons, filters, etc.).
+ *
+ * @example
+ * ```tsx
+ * <Table.Toolbar>
+ *   <Input placeholder="Search..." />
+ *   <Button>Export</Button>
+ * </Table.Toolbar>
+ * ```
+ */
+declare const Toolbar: default_2.FC<IProps_4>;
+
 declare type TTableCompoundComponent = typeof Table_2 & {
+    ActiveFilters: typeof ActiveFilters;
     Cell: typeof Cell;
     Row: typeof Row;
+    Toolbar: typeof Toolbar;
 };
 
 export { }

package/dist/table.js

@@ -1,40 +1,79 @@
-import { jsx as l } from "react/jsx-runtime";
-import p from "clsx";
-import s from "react";
-import { g as f } from "./getVariantClassName-D7Nhpuec.mjs";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import T, { useCallback as p } from "react";
+import { B as u } from "./Button-BYnrV9av.mjs";
+import { C as L } from "./Chip-DLfYGIQG.mjs";
+import { u as y } from "./useLocale-CJh-krrY.mjs";
+import R from "clsx";
+import { g as w } from "./getVariantClassName-D7Nhpuec.mjs";
 import { i } from "./isValidReactNode-CmYwTWCE.mjs";
 import "./camelCase-PtIYufW8.mjs";
-import './table.css';var n = /* @__PURE__ */ ((t) => (t.CELL = "Table.Cell", t.ROW = "Table.Row", t))(n || {});
-const u = "_root_lmxwt_8", L = "_header_lmxwt_17", N = "_alignLeft_lmxwt_21", R = "_alignRight_lmxwt_24", w = "_alignCenter_lmxwt_27", a = {
-  root: u,
-  header: L,
-  alignLeft: N,
-  alignRight: R,
-  alignCenter: w
-}, c = (t) => {
-  const { align: r = "left", as: e = "td", children: o, title: g, width: h } = t, C = p(a.root, f("align", r, a), {
-    [a.header]: e === "th"
+import './table.css';const $ = "Table.ActiveFilters", v = "_root_4qb7d_5", x = {
+  root: v
+}, b = (t) => {
+  const { filters: e, onClearAll: o, onRemove: r } = t, c = y(), l = p(
+    (a) => () => {
+      r(a);
+    },
+    [r]
+  ), m = p(() => {
+    o?.();
+  }, [o]);
+  return e.length === 0 ? null : /* @__PURE__ */ h("div", { className: x.root, children: [
+    e.map((a) => /* @__PURE__ */ h(L, { onDelete: l(a.key), children: [
+      a.label,
+      ": ",
+      a.value
+    ] }, a.key)),
+    o && /* @__PURE__ */ n(u, { mode: "text", size: "sm", onClick: m, children: c.Table.ActiveFilters.clearAll })
+  ] });
+};
+b.displayName = $;
+var s = /* @__PURE__ */ ((t) => (t.CELL = "Table.Cell", t.ROW = "Table.Row", t.TOOLBAR = "Table.Toolbar", t))(s || {});
+const O = "_root_lmxwt_8", k = "_header_lmxwt_17", B = "_alignLeft_lmxwt_21", F = "_alignRight_lmxwt_24", D = "_alignCenter_lmxwt_27", _ = {
+  root: O,
+  header: k,
+  alignLeft: B,
+  alignRight: F,
+  alignCenter: D
+}, g = (t) => {
+  const { align: e = "left", as: o = "td", children: r, title: c, width: l } = t, m = R(_.root, w("align", e, _), {
+    [_.header]: o === "th"
   });
-  return /* @__PURE__ */ l(e, { className: C, title: g, width: h, children: o });
+  return /* @__PURE__ */ n(o, { className: m, title: c, width: l, children: r });
+};
+g.displayName = s.CELL;
+const E = "_root_t4731_5", I = {
+  root: E
+}, A = (t) => {
+  const { children: e } = t, o = (r) => i(s.CELL, r) ? r : null;
+  return /* @__PURE__ */ n("tr", { className: I.root, children: T.Children.map(e, o) });
 };
-c.displayName = n.CELL;
-const x = "_root_t4731_5", T = {
-  root: x
-}, m = (t) => {
-  const { children: r } = t, e = (o) => i(n.CELL, o) ? o : null;
-  return /* @__PURE__ */ l("tr", { className: T.root, children: s.Children.map(r, e) });
+A.displayName = s.ROW;
+const M = "Table.Toolbar", P = "_root_d4szt_6", W = {
+  root: P
+}, f = (t) => {
+  const { children: e } = t;
+  return /* @__PURE__ */ n("div", { className: W.root, children: e });
 };
-m.displayName = n.ROW;
-const b = "Table", y = "_root_k8vfx_5", $ = {
-  root: y
-}, d = (t) => {
-  const { children: r } = t, e = (o) => i(n.ROW, o) ? o : null;
-  return /* @__PURE__ */ l("table", { className: $.root, children: /* @__PURE__ */ l("tbody", { children: s.Children.map(r, e) }) });
+f.displayName = M;
+const Y = "Table", j = "_wrapper_17sd8_5", z = "_root_17sd8_11", C = {
+  wrapper: j,
+  root: z
+}, N = (t) => {
+  const { children: e } = t, o = T.Children.toArray(e), r = o.find(
+    (l) => i(s.TOOLBAR, l, !1)
+  ), c = o.filter((l) => !i(s.TOOLBAR, l, !1)).filter((l) => i(s.ROW, l, !0));
+  return /* @__PURE__ */ h("div", { className: C.wrapper, children: [
+    r,
+    /* @__PURE__ */ n("table", { className: C.root, children: /* @__PURE__ */ n("tbody", { children: c }) })
+  ] });
 };
-d.displayName = b;
-const _ = d;
-_.Cell = c;
-_.Row = m;
+N.displayName = Y;
+const d = N;
+d.ActiveFilters = b;
+d.Cell = g;
+d.Row = A;
+d.Toolbar = f;
 export {
-  _ as Table
+  d as Table
 };

package/dist/useLocale-CJh-krrY.mjs

@@ -0,0 +1,106 @@
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as u, useMemo as l, useEffect as g, useContext as f } from "react";
+const c = u(null), a = {
+  Chip: {
+    remove: "Remove"
+  },
+  Dialog: {
+    close: "Close"
+  },
+  Drawer: {
+    Header: {
+      close: "Close"
+    }
+  },
+  Input: {
+    Password: {
+      passwordHide: "Hide password",
+      passwordShow: "Show password"
+    }
+  },
+  Pagination: {
+    Item: {
+      page: "Page {page}"
+    },
+    items: "items",
+    label: "Pagination",
+    next: "Next page",
+    of: "of",
+    prev: "Previous page"
+  },
+  Select: {
+    clear: "Clear",
+    noOptions: "No options",
+    placeholder: "Select..."
+  },
+  Table: {
+    ActiveFilters: {
+      clearAll: "Clear all",
+      remove: "Remove filter:"
+    }
+  }
+}, v = {
+  Chip: {
+    remove: "Удалить"
+  },
+  Dialog: {
+    close: "Закрыть"
+  },
+  Drawer: {
+    Header: {
+      close: "Закрыть"
+    }
+  },
+  Input: {
+    Password: {
+      passwordHide: "Скрыть пароль",
+      passwordShow: "Показать пароль"
+    }
+  },
+  Pagination: {
+    Item: {
+      page: "Страница {page}"
+    },
+    items: "элементов",
+    label: "Пагинация",
+    next: "Следующая страница",
+    of: "из",
+    prev: "Предыдущая страница"
+  },
+  Select: {
+    clear: "Очистить",
+    noOptions: "Нет вариантов",
+    placeholder: "Выберите..."
+  },
+  Table: {
+    ActiveFilters: {
+      clearAll: "Очистить всё",
+      remove: "Удалить фильтр:"
+    }
+  }
+}, w = { en: a, ru: v }, i = (e, n) => {
+  const t = { ...e };
+  for (const s of Object.keys(n)) {
+    const o = n[s], r = e[s];
+    o && typeof o == "object" && !Array.isArray(o) && r && typeof r == "object" && !Array.isArray(r) ? t[s] = i(
+      r,
+      o
+    ) : o !== void 0 && (t[s] = o);
+  }
+  return t;
+}, h = (e) => l(() => e ? typeof e == "string" ? w[e] ?? a : i(a, e) : a, [e]), C = (e) => {
+  const { children: n, theme: t = "light", locale: s, themeTarget: o } = e, r = h(s);
+  g(() => {
+    const d = o ?? document.documentElement;
+    d.dataset.theme = t;
+  }, [t, o]);
+  const p = l(() => ({ locale: r, theme: t }), [t, r]);
+  return /* @__PURE__ */ m(c.Provider, { value: p, children: n });
+};
+C.displayName = "LazarUiProvider";
+const y = () => f(c)?.locale ?? a;
+export {
+  c as C,
+  C as L,
+  y as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazar-ui/kit",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "A component library for building admin panels, dashboards, and internal tools.",
   "homepage": "https://lazar-ui.github.io/docs",
@@ -38,7 +38,7 @@
     "build": "vite build",
     "check-types": "tsc --noEmit",
     "clean": "rm -rf node_modules",
-    "dev": "npm run watch:tsm",
+    "dev": "",
     "lint": "eslint src --max-warnings 100 || true",
     "lint:styles": "stylelint \"src/components/**/*.scss\"",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
@@ -48,9 +48,7 @@
     "gen:component:ai": "node scripts/generate-component.mjs",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "test:watch": "vitest",
-    "tsm": "typed-scss-modules src",
-    "watch:tsm": "typed-scss-modules src --watch"
+    "test:watch": "vitest"
   },
   "devDependencies": {
     "@repo/eslint-config": "*",

package/dist/useLocale-DdHNhmvT.mjs

@@ -1,70 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { createContext as g, useMemo as i, useEffect as u, useContext as m } from "react";
-const c = g(null), n = {
-  dialog: {
-    close: "Close"
-  },
-  input: {
-    passwordHide: "Hide password",
-    passwordShow: "Show password"
-  },
-  pagination: {
-    next: "Next page",
-    page: "Page {page}",
-    pagination: "Pagination",
-    prev: "Previous page"
-  },
-  select: {
-    clear: "Clear",
-    noOptions: "No options",
-    placeholder: "Select..."
-  }
-}, f = {
-  dialog: {
-    close: "Закрыть"
-  },
-  input: {
-    passwordHide: "Скрыть пароль",
-    passwordShow: "Показать пароль"
-  },
-  pagination: {
-    next: "Следующая страница",
-    page: "Страница {page}",
-    pagination: "Пагинация",
-    prev: "Предыдущая страница"
-  },
-  select: {
-    clear: "Очистить",
-    noOptions: "Нет вариантов",
-    placeholder: "Выберите..."
-  }
-}, h = { en: n, ru: f }, x = (e) => i(() => {
-  if (!e)
-    return n;
-  if (typeof e == "string")
-    return h[e] ?? n;
-  const r = { ...n };
-  for (const t of Object.keys(e)) {
-    const o = e[t];
-    o && typeof o == "object" && !Array.isArray(o) && (r[t] = {
-      ...r[t],
-      ...o
-    });
-  }
-  return r;
-}, [e]), w = (e) => {
-  const { children: r, theme: t = "light", locale: o, themeTarget: s } = e, a = x(o);
-  u(() => {
-    const d = s ?? document.documentElement;
-    d.dataset.theme = t;
-  }, [t, s]);
-  const p = i(() => ({ locale: a, theme: t }), [t, a]);
-  return /* @__PURE__ */ l(c.Provider, { value: p, children: r });
-};
-w.displayName = "LazarUiProvider";
-const y = () => m(c)?.locale ?? n;
-export {
-  c as C,
-  w as L,
-  y as u
-};