@lazar-ui/kit 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## [0.5.0] - 2026-06-08
+
+### Features
+
+- **Chip**: add new Chip component with multiple variants, sizes, and deletable state
+- **Input.Date**: add Date variant for Input component with `inputMode="numeric"` and date validation
+- **Table.ActiveFilters**: add ActiveFilters sub-component for displaying and clearing active column filters
+- **Table.Toolbar**: add Toolbar sub-component for Table with action slots
+- **i18n**: restructure locale system for better extensibility and component-scoped translations
+
+### Bug Fixes
+
+- **CI**: fix vitest processes hang and excessive RAM consumption (4GB) by setting `NODE_OPTIONS="--max-old-space-size=8192"` in CI config
+
+### Chores
+
+- **CI**: run TSM once instead of per package to speed up type declaration generation
+- **styles**: apply prettier fixes across the codebase
+
+## [0.4.0] - 2026-06-05
+
+### ⚠ BREAKING CHANGES
+
+- **Radio**: refactored from standalone component + `RadioGroup` into single compound component `Radio` + `Radio.Item`. Old `RadioGroup` removed. Use `<Radio name="..." value/ defaultValue onChange><Radio.Item value="...">Label</Radio.Item></Radio>`.
+
+### Features
+
+- **Radio**: add compound component pattern (`Radio` + `Radio.Item`) with context-driven state management
+- **Radio**: restructure Context — extract `Provider.tsx`, add `useRadioContext` hook with guard (aligned with Tabs pattern)
+- **Radio**: add `useId()` fallback for `name` prop to prevent cross-story conflicts in Storybook autodocs
+
+### Bug Fixes
+
+- **Radio**: fix checked state — handle `undefined` vs `false` for uncontrolled mode
+- **Radio**: fix double opacity on disabled state
+- **Radio**: add CSS custom properties (`--radio-content-gap`, `--radio-content-padding-top`) replacing hardcoded px values
+
+### Documentation
+
+- **Radio**: add ADR for fieldset/legend/aria composability pattern (`docs/decisions/radio-fieldset-legend-aria.md`)
+
+### Code Refactoring
+
+- **Radio**: rename `error` prop to `invalid` for consistency with other form components
+- **Radio**: rename `TStory` type alias to `Story` in stories
+
+### Tests
+
+- **Radio**: rewrite test suite for compound API (13 tests); remove `RadioGroup.test.tsx`
+- **Radio**: fix test assertions — use `aria-invalid` attribute instead of raw CSS class name
+
+### Chores
+
+- **Radio**: add missing exports (`IItemProps`, `ERadioSize`) to public API
+- **Radio**: update VISION.md, ROADMAP.md, test-coverage.json
+- **CI**: add `NODE_OPTIONS="--max-old-space-size=8192"` to build step to prevent OOM with `vite-plugin-dts`
+
 ## [0.3.0] - 2026-06-04
 
 ### Features

package/dist/Button-BYnrV9av.mjs

@@ -0,0 +1,52 @@
+import { jsxs as z, jsx as s } from "react/jsx-runtime";
+import v from "clsx";
+import { I as y } from "./Icon-DsTlU3j3.mjs";
+import { g as o } from "./getVariantClassName-D7Nhpuec.mjs";
+import './Button.css';const g = "Button", h = "_root_1lm86_21", x = "_modeFilled_1lm86_32", S = "_variantPrimary_1lm86_32", b = "_pressed_1lm86_36", N = "_variantSecondary_1lm86_42", W = "_variantDanger_1lm86_52", C = "_disabled_1lm86_62", D = "_modeOutlined_1lm86_69", L = "_modeText_1lm86_94", M = "_fullWidth_1lm86_118", P = "_sizeSm_1lm86_121", B = "_sizeMd_1lm86_128", F = "_sizeLg_1lm86_135", I = "_icon_1lm86_143", e = {
+  root: h,
+  modeFilled: x,
+  variantPrimary: S,
+  pressed: b,
+  variantSecondary: N,
+  variantDanger: W,
+  disabled: C,
+  modeOutlined: D,
+  modeText: L,
+  fullWidth: M,
+  sizeSm: P,
+  sizeMd: B,
+  sizeLg: F,
+  icon: I
+}, O = (a) => {
+  const {
+    children: t,
+    disabled: i = !1,
+    fullWidth: l = !1,
+    icon: n,
+    mode: r = "filled",
+    onClick: d,
+    size: m = "md",
+    variant: _ = "primary",
+    pressed: c,
+    as: p = "button",
+    ...f
+  } = a, u = v(
+    e.root,
+    o("size", m, e),
+    o("variant", _, e),
+    o("mode", r, e),
+    {
+      [e.fullWidth]: l,
+      [e.pressed]: c,
+      [e.disabled]: i
+    }
+  );
+  return /* @__PURE__ */ z(p, { className: u, disabled: i, onClick: d, ...f, children: [
+    n && /* @__PURE__ */ s("span", { className: e.icon, children: /* @__PURE__ */ s(y, { name: n, size: 16 }) }),
+    t && /* @__PURE__ */ s("span", { children: t })
+  ] });
+};
+O.displayName = g;
+export {
+  O as B
+};

package/dist/Button.css

@@ -0,0 +1 @@
+:root{--button-bg: var(--lui-color-background-brand);--button-bg-hover: var(--lui-color-background-brand-hover);--button-text: var(--lui-color-text-on-brand);--button-bg-secondary: var(--lui-color-background-primary);--button-text-secondary: var(--lui-color-text-secondary);--button-bg-secondary-hover: var(--lui-color-background-secondary);--button-bg-danger: var(--lui-color-background-error);--button-text-danger: var(--lui-color-text-on-brand);--button-bg-danger-hover: var(--lui-color-background-error-hover);--button-bg-disabled: var(--lui-color-background-disabled);--button-text-disabled: var(--lui-color-text-disabled);--button-border-disabled: var(--lui-color-border-disabled);--button-focus-ring: var(--lui-color-border-focus);--button-focus-ring-error: var(--lui-color-border-focus-error);--button-radius: var(--lui-radius-2);--button-border: var(--lui-color-border-primary);--button-shadow: var(--lui-shadow-xs)}._root_1lm86_21{align-items:center;border:1px solid var(--button-border);border-radius:var(--button-radius);box-shadow:var(--button-shadow);display:inline-flex;flex-direction:row;justify-content:center;outline-offset:2px;transition:background-color .2s,color .2s}._root_1lm86_21._modeFilled_1lm86_32._variantPrimary_1lm86_32{background:var(--button-bg);color:var(--button-text)}._root_1lm86_21._modeFilled_1lm86_32._variantPrimary_1lm86_32._pressed_1lm86_36,._root_1lm86_21._modeFilled_1lm86_32._variantPrimary_1lm86_32:active,._root_1lm86_21._modeFilled_1lm86_32._variantPrimary_1lm86_32:hover{background:var(--button-bg-hover)}._root_1lm86_21._modeFilled_1lm86_32._variantPrimary_1lm86_32:focus-visible{outline:2px solid var(--button-focus-ring)}._root_1lm86_21._modeFilled_1lm86_32._variantSecondary_1lm86_42{background:var(--button-bg-secondary);color:var(--button-text-secondary)}._root_1lm86_21._modeFilled_1lm86_32._variantSecondary_1lm86_42:active,._root_1lm86_21._modeFilled_1lm86_32._variantSecondary_1lm86_42._pressed_1lm86_36,._root_1lm86_21._modeFilled_1lm86_32._variantSecondary_1lm86_42:hover{background:var(--button-bg-secondary-hover)}._root_1lm86_21._modeFilled_1lm86_32._variantSecondary_1lm86_42:focus-visible{outline:2px solid var(--button-focus-ring)}._root_1lm86_21._modeFilled_1lm86_32._variantDanger_1lm86_52{background:var(--button-bg-danger);color:var(--button-text-danger)}._root_1lm86_21._modeFilled_1lm86_32._variantDanger_1lm86_52:active,._root_1lm86_21._modeFilled_1lm86_32._variantDanger_1lm86_52._pressed_1lm86_36,._root_1lm86_21._modeFilled_1lm86_32._variantDanger_1lm86_52:hover{background:var(--button-bg-danger-hover)}._root_1lm86_21._modeFilled_1lm86_32._variantDanger_1lm86_52:focus-visible{outline:2px solid var(--button-focus-ring-error)}._root_1lm86_21._modeFilled_1lm86_32:disabled,._root_1lm86_21._modeFilled_1lm86_32._disabled_1lm86_62{background:var(--button-bg-disabled);border-color:var(--button-border-disabled);color:var(--button-text-disabled);cursor:not-allowed;pointer-events:none}._root_1lm86_21._modeOutlined_1lm86_69{background:transparent;box-shadow:none}._root_1lm86_21._modeOutlined_1lm86_69._variantPrimary_1lm86_32{border-color:var(--lui-color-background-brand);color:var(--lui-color-background-brand)}._root_1lm86_21._modeOutlined_1lm86_69._variantPrimary_1lm86_32:hover{background:var(--lui-color-background-brand-secondary)}._root_1lm86_21._modeOutlined_1lm86_69._variantSecondary_1lm86_42{color:var(--lui-color-text-secondary)}._root_1lm86_21._modeOutlined_1lm86_69._variantSecondary_1lm86_42:hover{background:var(--lui-color-background-secondary)}._root_1lm86_21._modeOutlined_1lm86_69._variantDanger_1lm86_52{border-color:var(--lui-color-background-error);color:var(--lui-color-background-error)}._root_1lm86_21._modeOutlined_1lm86_69._variantDanger_1lm86_52:hover{background:var(--lui-color-background-error);color:var(--lui-color-text-on-brand)}._root_1lm86_21._modeText_1lm86_94{background:transparent;border-color:transparent;box-shadow:none}._root_1lm86_21._modeText_1lm86_94._variantPrimary_1lm86_32{color:var(--lui-color-background-brand)}._root_1lm86_21._modeText_1lm86_94._variantPrimary_1lm86_32:hover{background:var(--lui-color-background-brand-secondary)}._root_1lm86_21._modeText_1lm86_94._variantSecondary_1lm86_42{color:var(--lui-color-text-secondary)}._root_1lm86_21._modeText_1lm86_94._variantSecondary_1lm86_42:hover{background:var(--lui-color-background-secondary)}._root_1lm86_21._modeText_1lm86_94._variantDanger_1lm86_52{color:var(--lui-color-background-error)}._root_1lm86_21._modeText_1lm86_94._variantDanger_1lm86_52:hover{background:var(--lui-color-background-error);color:var(--lui-color-text-on-brand)}._root_1lm86_21._fullWidth_1lm86_118{width:100%}._root_1lm86_21._sizeSm_1lm86_121{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-semibold);gap:var(--lui-space-1);line-height:var(--line-height-sm);padding:var(--lui-space-1) var(--lui-space-3)}._root_1lm86_21._sizeMd_1lm86_128{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-semibold);gap:var(--lui-space-1);line-height:var(--line-height-sm);padding:var(--lui-space-2) var(--lui-space-4)}._root_1lm86_21._sizeLg_1lm86_135{font-size:var(--lui-font-size-md);font-weight:var(--lui-font-weight-semibold);gap:var(--lui-space-2);line-height:var(--line-height-md);padding:var(--lui-space-3) var(--lui-space-4)}._icon_1lm86_143{align-items:center;display:flex;flex:0 0 20px;height:20px;justify-content:center;width:20px}

package/dist/Chip-DLfYGIQG.mjs

@@ -0,0 +1,51 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import _ from "clsx";
+import { I as p } from "./Icon-DsTlU3j3.mjs";
+import { u as g } from "./useLocale-CJh-krrY.mjs";
+import "react";
+import { g as u } from "./getVariantClassName-D7Nhpuec.mjs";
+import './Chip.css';const b = "Chip", h = "_root_1nzgz_6", f = "_disabled_1nzgz_20", C = "_content_1nzgz_25", N = "_deleteButton_1nzgz_30", x = "_sizeLg_1nzgz_56", y = "_sizeMd_1nzgz_62", L = "_sizeSm_1nzgz_68", e = {
+  root: h,
+  disabled: f,
+  content: C,
+  deleteButton: N,
+  sizeLg: x,
+  sizeMd: y,
+  sizeSm: L
+}, B = (n) => {
+  const { children: a, color: i, disabled: o = !1, onDelete: t, size: l = "md" } = n, c = g(), r = _(
+    e.root,
+    u("size", l, e),
+    {
+      [e.disabled]: o
+    }
+  ), d = (z) => {
+    z.stopPropagation(), !o && t && t();
+  };
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      className: r,
+      style: { "--chip-color": i ?? "var(--lui-color-text-secondary)" },
+      children: [
+        /* @__PURE__ */ s("span", { className: e.content, children: a }),
+        t && /* @__PURE__ */ s(
+          "button",
+          {
+            "aria-disabled": o || void 0,
+            "aria-label": c.Chip.remove,
+            className: e.deleteButton,
+            disabled: o,
+            onClick: d,
+            type: "button",
+            children: /* @__PURE__ */ s(p, { name: "x", size: 14 })
+          }
+        )
+      ]
+    }
+  );
+};
+B.displayName = b;
+export {
+  B as C
+};

package/dist/Chip.css

@@ -0,0 +1 @@
+:root{--chip-radius: var(--lui-radius-full);--chip-font-weight: var(--lui-font-weight-medium)}._root_1nzgz_6{align-items:center;background:color-mix(in sRGB,var(--chip-color) 12%,transparent);border:1px solid color-mix(in sRGB,var(--chip-color) 24%,transparent);border-radius:var(--chip-radius);color:var(--chip-color);display:inline-flex;font-weight:var(--chip-font-weight);gap:var(--lui-space-1);justify-content:center;line-height:1;white-space:nowrap;width:fit-content}._root_1nzgz_6._disabled_1nzgz_20{opacity:.5;pointer-events:none}._content_1nzgz_25{overflow:hidden;text-overflow:ellipsis}._deleteButton_1nzgz_30{align-items:center;appearance:none;background:none;border:none;border-radius:var(--lui-radius-full);color:inherit;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;margin-inline-end:calc(var(--lui-space-1) * -1);padding:var(--lui-space-1)}._deleteButton_1nzgz_30:hover{background:color-mix(in sRGB,var(--chip-color) 20%,transparent)}._deleteButton_1nzgz_30:focus-visible{outline:2px solid var(--chip-color);outline-offset:-2px}._deleteButton_1nzgz_30:disabled{cursor:default;pointer-events:none}._sizeLg_1nzgz_56{font-size:var(--lui-font-size-md);line-height:var(--line-height-md);padding:3px var(--lui-space-4)}._sizeMd_1nzgz_62{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm);padding:1px var(--lui-space-3)}._sizeSm_1nzgz_68{font-size:var(--lui-font-size-xs);line-height:var(--line-height-xs);padding:1px var(--lui-space-2)}

package/dist/button.js

@@ -1,52 +1,4 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import u from "clsx";
-import { I as v } from "./Icon-DsTlU3j3.mjs";
-import { g as o } from "./getVariantClassName-D7Nhpuec.mjs";
-import './button.css';const y = "Button", h = "_root_26zpg_21", x = "_modeFilled_26zpg_32", S = "_variantPrimary_26zpg_32", b = "_pressed_26zpg_36", N = "_variantSecondary_26zpg_42", W = "_variantDanger_26zpg_52", C = "_disabled_26zpg_62", D = "_modeOutlined_26zpg_69", L = "_modeText_26zpg_94", M = "_fullWidth_26zpg_118", P = "_sizeSm_26zpg_121", F = "_sizeMd_26zpg_128", I = "_sizeLg_26zpg_135", O = "_icon_26zpg_143", e = {
-  root: h,
-  modeFilled: x,
-  variantPrimary: S,
-  pressed: b,
-  variantSecondary: N,
-  variantDanger: W,
-  disabled: C,
-  modeOutlined: D,
-  modeText: L,
-  fullWidth: M,
-  sizeSm: P,
-  sizeMd: F,
-  sizeLg: I,
-  icon: O
-}, T = (a) => {
-  const {
-    children: t,
-    disabled: i = !1,
-    fullWidth: r = !1,
-    icon: n,
-    mode: d = "filled",
-    onClick: _,
-    size: l = "md",
-    variant: c = "primary",
-    pressed: m,
-    as: p = "button",
-    ...z
-  } = a, g = u(
-    e.root,
-    o("size", l, e),
-    o("variant", c, e),
-    o("mode", d, e),
-    {
-      [e.fullWidth]: r,
-      [e.pressed]: m,
-      [e.disabled]: i
-    }
-  );
-  return /* @__PURE__ */ f(p, { className: g, disabled: i, onClick: _, ...z, children: [
-    n && /* @__PURE__ */ s("span", { className: e.icon, children: /* @__PURE__ */ s(v, { name: n, size: 16 }) }),
-    t && /* @__PURE__ */ s("span", { children: t })
-  ] });
-};
-T.displayName = y;
+import { B as r } from "./Button-BYnrV9av.mjs";
 export {
-  T as Button
+  r as Button
 };

package/dist/chip.d.ts

@@ -0,0 +1,37 @@
+import { default as default_2 } from 'react';
+
+/**
+ * Chip component. A small interactive element that displays content and optionally can be removed.
+ *
+ * Background is computed via CSS `color-mix()` — pass any CSS color value as `color` and
+ * the component automatically generates a tinted background and subtle border.
+ *
+ * @example
+ * ```tsx
+ * <Chip>Readonly chip</Chip>
+ * <Chip onDelete={() => {}}>Status: Active</Chip>
+ * <Chip size="sm" color="var(--lui-palette-orange-500)" onDelete={fn}>Tag</Chip>
+ * ```
+ */
+export declare const Chip: default_2.FC<IProps>;
+
+declare enum EChipSize {
+    LG = "lg",
+    MD = "md",
+    SM = "sm"
+}
+
+declare interface IProps extends default_2.PropsWithChildren {
+    /** CSS color value. Background is derived via `color-mix()`. Default: `var(--lui-color-text-secondary)`. */
+    color?: string;
+    /** Disable the chip. */
+    disabled?: boolean;
+    /** When provided, renders a delete ("×") icon button. */
+    onDelete?: () => void;
+    /** Size. Default: `'md'`. */
+    size?: TChipSize;
+}
+
+declare type TChipSize = `${EChipSize.LG | EChipSize.MD | EChipSize.SM}`;
+
+export { }

package/dist/chip.js

@@ -0,0 +1,4 @@
+import { C as r } from "./Chip-DLfYGIQG.mjs";
+export {
+  r as Chip
+};

package/dist/dialog.js

@@ -5,7 +5,7 @@ import { $ as S, a as A } from "./useModalOverlay-C311Y5HK.mjs";
 import { s as E, i as M } from "./Overlay-OYo7gW8m.mjs";
 import { a as P } from "./useOverlayTriggerState-DK8Xy6Kr.mjs";
 import { I as R } from "./Icon-DsTlU3j3.mjs";
-import { u as X } from "./useLocale-DdHNhmvT.mjs";
+import { u as X } from "./useLocale-CJh-krrY.mjs";
 import { g as k } from "./getComponentSlots-DwAYUFNk.mjs";
 import { g as w } from "./getVariantClassName-D7Nhpuec.mjs";
 import './dialog.css';var e = /* @__PURE__ */ ((o) => (o.ACTIONS = "Dialog.Actions", o.CONTENT = "Dialog.Content", o.TITLE = "Dialog.Title", o))(e || {});
@@ -52,7 +52,7 @@ const B = "Dialog", F = [e.ACTIONS, e.CONTENT, e.TITLE], G = "_underlay_100vj_25
   return /* @__PURE__ */ s(E, { portalContainer: u, children: /* @__PURE__ */ s("div", { className: a.underlay, ...z, children: /* @__PURE__ */ s("div", { className: a.modal, ...y, ref: n, children: /* @__PURE__ */ s(M, { getContainer: () => n.current, children: /* @__PURE__ */ _("div", { className: I, ...b, ref: c, children: [
     /* @__PURE__ */ _("div", { className: a.header, children: [
       j,
-      /* @__PURE__ */ s("button", { "aria-label": h.dialog.close, className: a.close, onClick: D, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
+      /* @__PURE__ */ s("button", { "aria-label": h.Dialog.close, className: a.close, onClick: D, children: /* @__PURE__ */ s(R, { name: "x", size: 16 }) })
     ] }),
     m && /* @__PURE__ */ s("div", { children: m }),
     d && /* @__PURE__ */ s("div", { className: a.actions, children: d })

package/dist/drawer.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as T } from "react/jsx-runtime";
-import M, { cloneElement as H, createContext as P, useContext as B, useRef as p, useState as A, useEffect as j, useMemo as F } from "react";
+import M, { cloneElement as H, createContext as P, useContext as B, useRef as p, useState as h, useEffect as j, useMemo as F } from "react";
 import { i as V } from "./isValidReactNode-CmYwTWCE.mjs";
 import "./camelCase-PtIYufW8.mjs";
 import U from "clsx";
@@ -7,13 +7,13 @@ import { $ as K, a as Y } from "./useModalOverlay-C311Y5HK.mjs";
 import { s as G, i as J } from "./Overlay-OYo7gW8m.mjs";
 import { a as Q } from "./useOverlayTriggerState-DK8Xy6Kr.mjs";
 import { g as W } from "./getComponentSlots-DwAYUFNk.mjs";
-import { g as D } from "./getVariantClassName-D7Nhpuec.mjs";
+import { g as A } from "./getVariantClassName-D7Nhpuec.mjs";
 import { I as X } from "./Icon-DsTlU3j3.mjs";
-import { u as Z } from "./useLocale-DdHNhmvT.mjs";
+import { u as Z } from "./useLocale-CJh-krrY.mjs";
 import './drawer.css';var o = /* @__PURE__ */ ((e) => (e.ACTIONS = "Drawer.Actions", e.CONTENT = "Drawer.Content", e.HEADER = "Drawer.Header", e))(o || {});
 const ee = "_root_1m4yu_1", te = {
   root: ee
-}, g = ({ children: e }) => {
+}, w = ({ children: e }) => {
   const r = M.Children.toArray(e), l = r.map((s, c) => {
     if (!V("Button", s))
       return s;
@@ -25,14 +25,14 @@ const ee = "_root_1m4yu_1", te = {
   });
   return r.length === 0 ? null : /* @__PURE__ */ t("div", { className: te.root, children: l });
 };
-g.displayName = o.ACTIONS;
+w.displayName = o.ACTIONS;
 const oe = "_root_jagsa_1", re = {
   root: oe
-}, w = (e) => {
+}, g = (e) => {
   const { children: r } = e;
   return /* @__PURE__ */ t("div", { className: re.root, children: r });
 };
-w.displayName = o.CONTENT;
+g.displayName = o.CONTENT;
 const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = () => {
   const e = B(q);
   if (!e)
@@ -56,19 +56,19 @@ const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = ()
     { isDismissable: s, isKeyboardDismissDisabled: !1 },
     N,
     i
-  ), [C, b] = A(n || !1), [R, $] = A(!1), m = p(C);
+  ), [C, b] = h(n || !1), [R, D] = h(!1), m = p(C);
   j(() => {
     if (n) {
       m.current = !0, b(!0);
       const d = requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          $(!0);
+          D(!0);
         });
       });
       return () => cancelAnimationFrame(d);
     }
     if (m.current) {
-      $(!1);
+      D(!1);
       const d = setTimeout(() => {
         m.current = !1, b(!1);
       }, be);
@@ -77,12 +77,12 @@ const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = ()
   }, [n]);
   const {
     [o.ACTIONS]: z,
-    [o.CONTENT]: h,
+    [o.CONTENT]: $,
     [o.HEADER]: S
   } = F(() => W(r, se), [r]), L = U(
     a.drawer,
-    D("size", v, a),
-    D("placement", f, a),
+    A("size", v, a),
+    A("placement", f, a),
     { [a.entered]: R }
   );
   return C ? /* @__PURE__ */ t(G, { portalContainer: l, children: /* @__PURE__ */ t("div", { className: a.underlay, ...O, children: /* @__PURE__ */ t("div", { className: a.modal, ...I, ref: i, children: /* @__PURE__ */ t(J, { getContainer: () => i.current, children: /* @__PURE__ */ t(q.Provider, { value: { close: () => N.close() }, children: /* @__PURE__ */ T(
@@ -96,30 +96,30 @@ const ne = "Drawer", se = [o.ACTIONS, o.CONTENT, o.HEADER], q = P(null), ae = ()
       ref: y,
       children: [
         S,
-        h && /* @__PURE__ */ t("div", { className: a.content, children: h }),
+        $ && /* @__PURE__ */ t("div", { className: a.content, children: $ }),
         z
       ]
     }
   ) }) }) }) }) }) : null;
 };
 k.displayName = ne;
-const $e = "_root_1mypq_13", he = "_title_1mypq_21", Ae = "_close_1mypq_31", u = {
-  root: $e,
-  title: he,
-  close: Ae
+const De = "_root_1mypq_13", $e = "_title_1mypq_21", he = "_close_1mypq_31", u = {
+  root: De,
+  title: $e,
+  close: he
 }, E = (e) => {
   const { children: r } = e, { close: l } = ae(), s = Z(), c = (n) => {
     n.preventDefault(), l();
   };
   return /* @__PURE__ */ T("div", { className: u.root, children: [
     /* @__PURE__ */ t("div", { className: u.title, children: r }),
-    /* @__PURE__ */ t("button", { "aria-label": s.dialog.close, className: u.close, onClick: c, type: "button", children: /* @__PURE__ */ t(X, { name: "x", size: 16 }) })
+    /* @__PURE__ */ t("button", { "aria-label": s.Drawer.Header.close, className: u.close, onClick: c, type: "button", children: /* @__PURE__ */ t(X, { name: "x", size: 16 }) })
   ] });
 };
 E.displayName = o.HEADER;
 const _ = k;
-_.Actions = g;
-_.Content = w;
+_.Actions = w;
+_.Content = g;
 _.Header = E;
 export {
   _ as Drawer,

package/dist/input.css

@@ -1 +1 @@
-:root{--input-bg: var(--lui-color-background-secondary);--input-bg-hover: var(--lui-color-background-secondary);--input-border: var(--lui-color-border-primary);--input-border-hover: var(--lui-color-text-tertiary);--input-border-focus: var(--lui-color-border-focus);--input-border-error: var(--lui-color-border-focus-error);--input-text: var(--lui-color-text-primary);--input-text-disabled: var(--lui-color-text-disabled);--input-placeholder: var(--lui-color-text-tertiary);--input-icon: var(--lui-color-text-tertiary);--input-radius: var(--lui-radius-1);--input-shadow: var(--lui-shadow-xs);--input-gap: var(--lui-space-2)}._root_1k18n_17{align-items:center;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--input-shadow);display:inline-flex;gap:var(--input-gap);position:relative;transition:border-color .15s,box-shadow .15s;width:100%}._root_1k18n_17:hover{border-color:var(--input-border-hover)}._root_1k18n_17:focus-within{border-color:var(--input-border-focus);box-shadow:0 0 0 1px var(--input-border-focus)}._root_1k18n_17._invalid_1k18n_36{border-color:var(--input-border-error)}._root_1k18n_17._invalid_1k18n_36:focus-within{box-shadow:0 0 0 1px var(--input-border-error)}._root_1k18n_17._disabled_1k18n_42{background:var(--lui-color-background-disabled);border-color:var(--lui-color-border-disabled);box-shadow:none;cursor:not-allowed}._root_1k18n_17._disabled_1k18n_42:hover{border-color:var(--lui-color-border-disabled)}._root_1k18n_17._disabled_1k18n_42:focus-within{border-color:var(--lui-color-border-disabled);box-shadow:none}._sizeSm_1k18n_56{padding:var(--lui-space-1) var(--lui-space-2)}._sizeMd_1k18n_60{padding:var(--lui-space-2) var(--lui-space-3)}._sizeLg_1k18n_64{padding:var(--lui-space-3) var(--lui-space-4)}._control_1k18n_68{background:none;border:none;color:var(--input-text);flex:1;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0;outline:none;padding:0}._control_1k18n_68::placeholder{color:var(--input-placeholder)}._control_1k18n_68:disabled{color:var(--input-text-disabled);cursor:not-allowed}._control_1k18n_68:disabled::placeholder{color:var(--input-text-disabled)}._control_1k18n_68[type=number]::-webkit-outer-spin-button,._control_1k18n_68[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}._control_1k18n_68[type=number]{appearance:textfield}._before_1k18n_99,._after_1k18n_100{align-items:center;color:var(--input-icon);display:flex;flex-shrink:0;line-height:0}._togglePassword_1k18n_108{align-items:center;background:none;border:none;color:var(--input-icon);cursor:pointer;display:flex;flex-shrink:0;line-height:0;padding:0}._togglePassword_1k18n_108:hover{color:var(--lui-color-text-secondary)}._sizeSm_1k18n_56 ._control_1k18n_68{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm)}._sizeSm_1k18n_56 ._before_1k18n_99,._sizeSm_1k18n_56 ._after_1k18n_100,._sizeSm_1k18n_56 ._togglePassword_1k18n_108{height:14px;width:14px}._sizeMd_1k18n_60 ._control_1k18n_68{font-size:var(--lui-font-size-md);line-height:var(--line-height-md)}._sizeMd_1k18n_60 ._before_1k18n_99,._sizeMd_1k18n_60 ._after_1k18n_100,._sizeMd_1k18n_60 ._togglePassword_1k18n_108{height:16px;width:16px}._sizeLg_1k18n_64 ._control_1k18n_68{font-size:var(--lui-font-size-lg);line-height:var(--line-height-lg)}._sizeLg_1k18n_64 ._before_1k18n_99,._sizeLg_1k18n_64 ._after_1k18n_100,._sizeLg_1k18n_64 ._togglePassword_1k18n_108{height:18px;width:18px}
+:root{--input-bg: var(--lui-color-background-secondary);--input-bg-hover: var(--lui-color-background-secondary);--input-border: var(--lui-color-border-primary);--input-border-hover: var(--lui-color-text-tertiary);--input-border-focus: var(--lui-color-border-focus);--input-border-error: var(--lui-color-border-focus-error);--input-text: var(--lui-color-text-primary);--input-text-disabled: var(--lui-color-text-disabled);--input-placeholder: var(--lui-color-text-tertiary);--input-icon: var(--lui-color-text-tertiary);--input-radius: var(--lui-radius-1);--input-shadow: var(--lui-shadow-xs);--input-gap: var(--lui-space-2)}._root_8a405_17{align-items:center;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--input-shadow);display:inline-flex;gap:var(--input-gap);position:relative;transition:border-color .15s,box-shadow .15s;width:100%}._root_8a405_17:hover{border-color:var(--input-border-hover)}._root_8a405_17:focus-within{border-color:var(--input-border-focus);box-shadow:0 0 0 1px var(--input-border-focus)}._root_8a405_17._invalid_8a405_36{border-color:var(--input-border-error)}._root_8a405_17._invalid_8a405_36:focus-within{box-shadow:0 0 0 1px var(--input-border-error)}._root_8a405_17._disabled_8a405_42{background:var(--lui-color-background-disabled);border-color:var(--lui-color-border-disabled);box-shadow:none;cursor:not-allowed}._root_8a405_17._disabled_8a405_42:hover{border-color:var(--lui-color-border-disabled)}._root_8a405_17._disabled_8a405_42:focus-within{border-color:var(--lui-color-border-disabled);box-shadow:none}._sizeSm_8a405_56{padding:var(--lui-space-1) var(--lui-space-2)}._sizeMd_8a405_60{padding:var(--lui-space-2) var(--lui-space-3)}._sizeLg_8a405_64{padding:var(--lui-space-3) var(--lui-space-4)}._control_8a405_68{background:none;border:none;color:var(--input-text);flex:1;font-family:inherit;font-size:inherit;line-height:inherit;min-width:0;outline:none;padding:0;width:100%}._control_8a405_68::placeholder{color:var(--input-placeholder)}._control_8a405_68:disabled{color:var(--input-text-disabled);cursor:not-allowed}._control_8a405_68:disabled::placeholder{color:var(--input-text-disabled)}._control_8a405_68[type=number]::-webkit-outer-spin-button,._control_8a405_68[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}._control_8a405_68[type=number]{appearance:textfield}._before_8a405_100,._after_8a405_101{align-items:center;color:var(--input-icon);display:flex;flex-shrink:0;line-height:0}._togglePassword_8a405_109{align-items:center;background:none;border:none;color:var(--input-icon);cursor:pointer;display:flex;flex-shrink:0;line-height:0;padding:0}._togglePassword_8a405_109:hover{color:var(--lui-color-text-secondary)}._sizeSm_8a405_56 ._control_8a405_68{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm)}._sizeSm_8a405_56 ._before_8a405_100,._sizeSm_8a405_56 ._after_8a405_101,._sizeSm_8a405_56 ._togglePassword_8a405_109{height:14px;width:14px}._sizeMd_8a405_60 ._control_8a405_68{font-size:var(--lui-font-size-md);line-height:var(--line-height-md)}._sizeMd_8a405_60 ._before_8a405_100,._sizeMd_8a405_60 ._after_8a405_101,._sizeMd_8a405_60 ._togglePassword_8a405_109{height:16px;width:16px}._sizeLg_8a405_64 ._control_8a405_68{font-size:var(--lui-font-size-lg);line-height:var(--line-height-lg)}._sizeLg_8a405_64 ._before_8a405_100,._sizeLg_8a405_64 ._after_8a405_101,._sizeLg_8a405_64 ._togglePassword_8a405_109{height:18px;width:18px}

package/dist/input.d.ts

@@ -1,6 +1,19 @@
 import { default as default_2 } from 'react';
 import { FC } from 'react';
 
+declare enum EDateFormat {
+    DD_MM_YYYY = "DD/MM/YYYY",
+    DD_MM_YYYY_DOT = "DD.MM.YYYY",
+    MM_DD_YYYY = "MM/DD/YYYY",
+    MM_DD_YYYY_DOT = "MM.DD.YYYY",
+    YYYY_MM_DD = "YYYY-MM-DD"
+}
+
+export declare interface IInputDateProps extends Omit<IInputProps, 'type'> {
+    /** Date format pattern that determines separator and digit order. */
+    format: TDateFormat;
+}
+
 export declare interface IInputEmailProps extends Omit<IInputProps, 'type'> {
 }
 
@@ -28,12 +41,15 @@ export declare interface IInputProps extends Omit<default_2.InputHTMLAttributes<
 }
 
 export declare const Input: FC<IInputProps> & {
+    Date: FC<IInputDateProps>;
     Email: FC<IInputEmailProps>;
     Number: FC<IInputNumberProps>;
     Password: FC<IInputPasswordProps>;
     Phone: FC<IInputPhoneProps>;
 };
 
+declare type TDateFormat = `${EDateFormat.DD_MM_YYYY}` | `${EDateFormat.DD_MM_YYYY_DOT}` | `${EDateFormat.MM_DD_YYYY}` | `${EDateFormat.MM_DD_YYYY_DOT}` | `${EDateFormat.YYYY_MM_DD}`;
+
 declare type TInputSize = 'sm' | 'md' | 'lg';
 
 export { }