@lazar-ui/kit 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/dist/button.css +1 -1
- package/dist/button.js +20 -20
- package/dist/input.css +1 -1
- package/dist/input.js +40 -40
- package/dist/radio.css +1 -0
- package/dist/radio.d.ts +51 -0
- package/dist/radio.js +113 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,43 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.4.0] - 2026-06-05
|
|
4
|
+
|
|
5
|
+
### ⚠ BREAKING CHANGES
|
|
6
|
+
|
|
7
|
+
- **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>`.
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
- **Radio**: add compound component pattern (`Radio` + `Radio.Item`) with context-driven state management
|
|
12
|
+
- **Radio**: restructure Context — extract `Provider.tsx`, add `useRadioContext` hook with guard (aligned with Tabs pattern)
|
|
13
|
+
- **Radio**: add `useId()` fallback for `name` prop to prevent cross-story conflicts in Storybook autodocs
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
- **Radio**: fix checked state — handle `undefined` vs `false` for uncontrolled mode
|
|
18
|
+
- **Radio**: fix double opacity on disabled state
|
|
19
|
+
- **Radio**: add CSS custom properties (`--radio-content-gap`, `--radio-content-padding-top`) replacing hardcoded px values
|
|
20
|
+
|
|
21
|
+
### Documentation
|
|
22
|
+
|
|
23
|
+
- **Radio**: add ADR for fieldset/legend/aria composability pattern (`docs/decisions/radio-fieldset-legend-aria.md`)
|
|
24
|
+
|
|
25
|
+
### Code Refactoring
|
|
26
|
+
|
|
27
|
+
- **Radio**: rename `error` prop to `invalid` for consistency with other form components
|
|
28
|
+
- **Radio**: rename `TStory` type alias to `Story` in stories
|
|
29
|
+
|
|
30
|
+
### Tests
|
|
31
|
+
|
|
32
|
+
- **Radio**: rewrite test suite for compound API (13 tests); remove `RadioGroup.test.tsx`
|
|
33
|
+
- **Radio**: fix test assertions — use `aria-invalid` attribute instead of raw CSS class name
|
|
34
|
+
|
|
35
|
+
### Chores
|
|
36
|
+
|
|
37
|
+
- **Radio**: add missing exports (`IItemProps`, `ERadioSize`) to public API
|
|
38
|
+
- **Radio**: update VISION.md, ROADMAP.md, test-coverage.json
|
|
39
|
+
- **CI**: add `NODE_OPTIONS="--max-old-space-size=8192"` to build step to prevent OOM with `vite-plugin-dts`
|
|
40
|
+
|
|
3
41
|
## [0.3.0] - 2026-06-04
|
|
4
42
|
|
|
5
43
|
### Features
|
package/dist/button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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)}.
|
|
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/button.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { I as
|
|
1
|
+
import { jsxs as z, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import v from "clsx";
|
|
3
|
+
import { I as y } from "./Icon-DsTlU3j3.mjs";
|
|
4
4
|
import { g as o } from "./getVariantClassName-D7Nhpuec.mjs";
|
|
5
|
-
import './button.css';const
|
|
5
|
+
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", F = "_sizeMd_1lm86_128", I = "_sizeLg_1lm86_135", O = "_icon_1lm86_143", e = {
|
|
6
6
|
root: h,
|
|
7
7
|
modeFilled: x,
|
|
8
8
|
variantPrimary: S,
|
|
@@ -21,32 +21,32 @@ import './button.css';const y = "Button", h = "_root_26zpg_21", x = "_modeFilled
|
|
|
21
21
|
const {
|
|
22
22
|
children: t,
|
|
23
23
|
disabled: i = !1,
|
|
24
|
-
fullWidth:
|
|
24
|
+
fullWidth: l = !1,
|
|
25
25
|
icon: n,
|
|
26
|
-
mode:
|
|
27
|
-
onClick:
|
|
28
|
-
size:
|
|
29
|
-
variant:
|
|
30
|
-
pressed:
|
|
26
|
+
mode: r = "filled",
|
|
27
|
+
onClick: d,
|
|
28
|
+
size: m = "md",
|
|
29
|
+
variant: _ = "primary",
|
|
30
|
+
pressed: c,
|
|
31
31
|
as: p = "button",
|
|
32
|
-
...
|
|
33
|
-
} = a,
|
|
32
|
+
...f
|
|
33
|
+
} = a, u = v(
|
|
34
34
|
e.root,
|
|
35
|
-
o("size",
|
|
36
|
-
o("variant",
|
|
37
|
-
o("mode",
|
|
35
|
+
o("size", m, e),
|
|
36
|
+
o("variant", _, e),
|
|
37
|
+
o("mode", r, e),
|
|
38
38
|
{
|
|
39
|
-
[e.fullWidth]:
|
|
40
|
-
[e.pressed]:
|
|
39
|
+
[e.fullWidth]: l,
|
|
40
|
+
[e.pressed]: c,
|
|
41
41
|
[e.disabled]: i
|
|
42
42
|
}
|
|
43
43
|
);
|
|
44
|
-
return /* @__PURE__ */
|
|
45
|
-
n && /* @__PURE__ */ s("span", { className: e.icon, children: /* @__PURE__ */ s(
|
|
44
|
+
return /* @__PURE__ */ z(p, { className: u, disabled: i, onClick: d, ...f, children: [
|
|
45
|
+
n && /* @__PURE__ */ s("span", { className: e.icon, children: /* @__PURE__ */ s(y, { name: n, size: 16 }) }),
|
|
46
46
|
t && /* @__PURE__ */ s("span", { children: t })
|
|
47
47
|
] });
|
|
48
48
|
};
|
|
49
|
-
T.displayName =
|
|
49
|
+
T.displayName = g;
|
|
50
50
|
export {
|
|
51
51
|
T as Button
|
|
52
52
|
};
|
package/dist/input.css
CHANGED
|
@@ -1 +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)}.
|
|
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_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.js
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsxs as v, jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import U from "clsx";
|
|
3
3
|
import { useState as g, useCallback as N } from "react";
|
|
4
|
-
import { g as
|
|
4
|
+
import { g as E } from "./getVariantClassName-D7Nhpuec.mjs";
|
|
5
5
|
import { I as f } from "./Icon-DsTlU3j3.mjs";
|
|
6
|
-
import { u as
|
|
6
|
+
import { u as S } from "./useLocale-DdHNhmvT.mjs";
|
|
7
7
|
import './input.css';const m = {
|
|
8
8
|
INPUT: "Input",
|
|
9
9
|
INPUT_EMAIL: "InputEmail",
|
|
10
10
|
INPUT_NUMBER: "InputNumber",
|
|
11
11
|
INPUT_PASSWORD: "InputPassword",
|
|
12
12
|
INPUT_PHONE: "InputPhone"
|
|
13
|
-
},
|
|
14
|
-
root:
|
|
15
|
-
invalid:
|
|
16
|
-
disabled:
|
|
17
|
-
sizeSm:
|
|
18
|
-
sizeMd:
|
|
19
|
-
sizeLg:
|
|
20
|
-
control:
|
|
21
|
-
before:
|
|
22
|
-
after:
|
|
23
|
-
togglePassword:
|
|
24
|
-
}, d = (
|
|
25
|
-
const { ref: e, invalid: s = !1, size: a = "md", before: r, after:
|
|
13
|
+
}, C = "_root_8a405_17", M = "_invalid_8a405_36", T = "_disabled_8a405_42", B = "_sizeSm_8a405_56", L = "_sizeMd_8a405_60", x = "_sizeLg_8a405_64", A = "_control_8a405_68", O = "_before_8a405_100", $ = "_after_8a405_101", k = "_togglePassword_8a405_109", l = {
|
|
14
|
+
root: C,
|
|
15
|
+
invalid: M,
|
|
16
|
+
disabled: T,
|
|
17
|
+
sizeSm: B,
|
|
18
|
+
sizeMd: L,
|
|
19
|
+
sizeLg: x,
|
|
20
|
+
control: A,
|
|
21
|
+
before: O,
|
|
22
|
+
after: $,
|
|
23
|
+
togglePassword: k
|
|
24
|
+
}, d = (t) => {
|
|
25
|
+
const { ref: e, invalid: s = !1, size: a = "md", before: r, after: n, className: i, onChange: c, onBlur: u, onFocus: _, ...p } = t, w = U(
|
|
26
26
|
l.root,
|
|
27
|
-
|
|
27
|
+
E("size", a, l),
|
|
28
28
|
{
|
|
29
29
|
[l.disabled]: p.disabled === !0,
|
|
30
30
|
[l.invalid]: s
|
|
31
31
|
},
|
|
32
32
|
i
|
|
33
|
-
), z = (
|
|
34
|
-
c?.(
|
|
33
|
+
), z = (y) => {
|
|
34
|
+
c?.(y.target.value);
|
|
35
35
|
};
|
|
36
|
-
return /* @__PURE__ */
|
|
36
|
+
return /* @__PURE__ */ v("div", { className: w, children: [
|
|
37
37
|
r && /* @__PURE__ */ o("span", { className: l.before, children: r }),
|
|
38
38
|
/* @__PURE__ */ o("input", { ref: e, className: l.control, onChange: z, onBlur: u, onFocus: _, ...p }),
|
|
39
|
-
|
|
39
|
+
n && /* @__PURE__ */ o("span", { className: l.after, children: n })
|
|
40
40
|
] });
|
|
41
41
|
};
|
|
42
42
|
d.displayName = m.INPUT;
|
|
43
|
-
function D(
|
|
44
|
-
const e =
|
|
43
|
+
function D(t) {
|
|
44
|
+
const e = t.replace(/\D/g, "").slice(0, 11);
|
|
45
45
|
if (!e)
|
|
46
46
|
return "";
|
|
47
47
|
let s = "+7";
|
|
48
48
|
return e.length > 1 && (s += ` (${e.slice(1, 4)}`), e.length >= 4 && (s += `) ${e.slice(4, 7)}`), e.length >= 7 && (s += `-${e.slice(7, 9)}`), e.length >= 9 && (s += `-${e.slice(9, 11)}`), s;
|
|
49
49
|
}
|
|
50
|
-
function R(
|
|
51
|
-
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(
|
|
50
|
+
function R(t) {
|
|
51
|
+
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t);
|
|
52
52
|
}
|
|
53
|
-
const I = (
|
|
54
|
-
const { ref: e, before: s, onBlur: a, invalid: r, ...
|
|
53
|
+
const I = (t) => {
|
|
54
|
+
const { ref: e, before: s, onBlur: a, invalid: r, ...n } = t, [i, c] = g(!1), u = N(
|
|
55
55
|
(p) => {
|
|
56
56
|
c(!0), a?.(p);
|
|
57
57
|
},
|
|
58
58
|
[a]
|
|
59
|
-
), _ = r || i &&
|
|
59
|
+
), _ = r || i && n.value != null && !R(n.value);
|
|
60
60
|
return /* @__PURE__ */ o(
|
|
61
61
|
d,
|
|
62
62
|
{
|
|
@@ -65,23 +65,23 @@ const I = (n) => {
|
|
|
65
65
|
before: s ?? /* @__PURE__ */ o(f, { name: "mail", size: 16 }),
|
|
66
66
|
invalid: _,
|
|
67
67
|
onBlur: u,
|
|
68
|
-
...
|
|
68
|
+
...n
|
|
69
69
|
}
|
|
70
70
|
);
|
|
71
71
|
};
|
|
72
72
|
I.displayName = m.INPUT_EMAIL;
|
|
73
|
-
const P = (
|
|
74
|
-
const { ref: e, ...s } =
|
|
73
|
+
const P = (t) => {
|
|
74
|
+
const { ref: e, ...s } = t;
|
|
75
75
|
return /* @__PURE__ */ o(d, { ref: e, type: "number", inputMode: "numeric", ...s });
|
|
76
76
|
};
|
|
77
77
|
P.displayName = m.INPUT_NUMBER;
|
|
78
|
-
const b = (
|
|
79
|
-
const { ref: e, after: s, ...a } =
|
|
78
|
+
const b = (t) => {
|
|
79
|
+
const { ref: e, after: s, ...a } = t, r = S(), [n, i] = g(!1), c = N(() => i((u) => !u), []);
|
|
80
80
|
return /* @__PURE__ */ o(
|
|
81
81
|
d,
|
|
82
82
|
{
|
|
83
83
|
ref: e,
|
|
84
|
-
type:
|
|
84
|
+
type: n ? "text" : "password",
|
|
85
85
|
after: s ?? /* @__PURE__ */ o(
|
|
86
86
|
"button",
|
|
87
87
|
{
|
|
@@ -89,8 +89,8 @@ const b = (n) => {
|
|
|
89
89
|
className: l.togglePassword,
|
|
90
90
|
onClick: c,
|
|
91
91
|
tabIndex: -1,
|
|
92
|
-
"aria-label":
|
|
93
|
-
children:
|
|
92
|
+
"aria-label": n ? r.input.passwordHide : r.input.passwordShow,
|
|
93
|
+
children: n ? /* @__PURE__ */ o(f, { name: "eye-off", size: 16 }) : /* @__PURE__ */ o(f, { name: "eye", size: 16 })
|
|
94
94
|
}
|
|
95
95
|
),
|
|
96
96
|
...a
|
|
@@ -98,15 +98,15 @@ const b = (n) => {
|
|
|
98
98
|
);
|
|
99
99
|
};
|
|
100
100
|
b.displayName = m.INPUT_PASSWORD;
|
|
101
|
-
const h = (
|
|
102
|
-
const { ref: e, before: s, onChange: a, ...r } =
|
|
101
|
+
const h = (t) => {
|
|
102
|
+
const { ref: e, before: s, onChange: a, ...r } = t, n = N(
|
|
103
103
|
(i) => {
|
|
104
104
|
const c = D(i);
|
|
105
105
|
a?.(c);
|
|
106
106
|
},
|
|
107
107
|
[a]
|
|
108
108
|
);
|
|
109
|
-
return /* @__PURE__ */ o(d, { ref: e, type: "tel", before: s ?? /* @__PURE__ */ o(f, { name: "phone", size: 16 }), onChange:
|
|
109
|
+
return /* @__PURE__ */ o(d, { ref: e, type: "tel", before: s ?? /* @__PURE__ */ o(f, { name: "phone", size: 16 }), onChange: n, ...r });
|
|
110
110
|
};
|
|
111
111
|
h.displayName = m.INPUT_PHONE;
|
|
112
112
|
const q = Object.assign(d, {
|
package/dist/radio.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@charset "UTF-8";._item_1mf7l_3{align-items:flex-start;cursor:pointer;display:inline-flex;gap:var(--radio-gap);position:relative;-webkit-user-select:none;user-select:none;vertical-align:middle}._item_1mf7l_3._disabled_1mf7l_12{cursor:not-allowed;opacity:.5}._item_1mf7l_3._invalid_1mf7l_17 ._radio_1mf7l_17{border-color:var(--radio-error-border)}._item_1mf7l_3._invalid_1mf7l_17 ._input_1mf7l_20:checked+._radio_1mf7l_17{background-color:var(--radio-error-checked-bg);border-color:var(--radio-error-checked-border)}._input_1mf7l_20{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}._radio_1mf7l_17{align-items:center;background:var(--radio-bg);border:1px solid var(--radio-border);border-radius:var(--radio-radius);display:flex;flex-shrink:0;justify-content:center;position:relative;transition:background var(--radio-transition-duration) var(--radio-transition-timing),border-color var(--radio-transition-duration) var(--radio-transition-timing)}._radio_1mf7l_17:after{background:var(--radio-dot-color);border-radius:50%;content:"";opacity:0;position:absolute;transition:opacity var(--radio-transition-duration) var(--radio-transition-timing),transform var(--radio-transition-duration) var(--radio-transition-timing)}._content_1mf7l_63{display:flex;flex-direction:column;gap:var(--radio-content-gap);padding-top:var(--radio-content-padding-top)}._label_1mf7l_70{color:var(--radio-label-color);font-weight:var(--radio-label-font-weight)}._description_1mf7l_75{color:var(--radio-description-color);font-weight:var(--lui-font-weight-normal)}._item_1mf7l_3:not(._disabled_1mf7l_12) ._input_1mf7l_20:not(:checked):hover+._radio_1mf7l_17{border-color:var(--radio-hover-border)}._input_1mf7l_20:focus-visible+._radio_1mf7l_17{box-shadow:var(--radio-focus-shadow)}._input_1mf7l_20:checked+._radio_1mf7l_17{background:var(--radio-checked-bg);border-color:var(--radio-checked-border)}._input_1mf7l_20:checked+._radio_1mf7l_17:after{opacity:1}._disabled_1mf7l_12 ._input_1mf7l_20:checked+._radio_1mf7l_17{background:var(--radio-disabled-bg);border-color:var(--radio-disabled-border)}._disabled_1mf7l_12 ._input_1mf7l_20:checked+._radio_1mf7l_17:after{background:var(--radio-disabled-dot)}._disabled_1mf7l_12 ._input_1mf7l_20:not(:checked)+._radio_1mf7l_17{background:var(--radio-disabled-bg);border-color:var(--radio-disabled-border)}._sizeSm_1mf7l_113 ._radio_1mf7l_17{height:16px;width:16px}._sizeSm_1mf7l_113 ._radio_1mf7l_17:after{height:6px;width:6px}._sizeSm_1mf7l_113 ._label_1mf7l_70{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm)}._sizeSm_1mf7l_113 ._description_1mf7l_75{font-size:var(--lui-font-size-xs);line-height:var(--line-height-xs)}._sizeMd_1mf7l_130 ._radio_1mf7l_17{height:20px;width:20px}._sizeMd_1mf7l_130 ._radio_1mf7l_17:after{height:8px;width:8px}._sizeMd_1mf7l_130 ._label_1mf7l_70{font-size:var(--lui-font-size-md);line-height:var(--line-height-md)}._sizeMd_1mf7l_130 ._description_1mf7l_75{font-size:var(--lui-font-size-sm);line-height:var(--line-height-sm)}._sizeLg_1mf7l_147 ._radio_1mf7l_17{height:24px;width:24px}._sizeLg_1mf7l_147 ._radio_1mf7l_17:after{height:10px;width:10px}._sizeLg_1mf7l_147 ._label_1mf7l_70{font-size:var(--lui-font-size-lg);line-height:var(--line-height-lg)}._sizeLg_1mf7l_147 ._description_1mf7l_75{font-size:var(--lui-font-size-md);line-height:var(--line-height-md)}:root{--radio-bg: var(--lui-color-background-primary);--radio-border: var(--lui-color-border-primary);--radio-checked-bg: var(--lui-color-background-brand);--radio-checked-border: var(--lui-color-background-brand);--radio-dot-color: var(--lui-color-text-on-brand);--radio-disabled-bg: var(--lui-color-background-disabled);--radio-disabled-border: var(--lui-color-border-disabled);--radio-disabled-dot: var(--lui-color-text-disabled);--radio-error-border: var(--lui-color-border-focus-error);--radio-error-checked-bg: var(--lui-color-background-error);--radio-error-checked-border: var(--lui-color-background-error);--radio-radius: var(--lui-radius-full);--radio-hover-border: var(--lui-palette-gray-400);--radio-focus-shadow: 0 0 0 2px var(--lui-palette-brand-secondary);--radio-label-color: var(--lui-color-text-primary);--radio-description-color: var(--lui-color-text-tertiary);--radio-label-font-weight: var(--lui-font-weight-medium);--radio-gap: var(--lui-space-2);--radio-content-gap: 2px;--radio-content-padding-top: 1px;--radio-group-gap: var(--lui-space-2);--radio-transition-duration: .15s;--radio-transition-timing: cubic-bezier(.4, 0, .2, 1)}._root_pott0_33{border:none;display:flex;flex-direction:column;margin:0;padding:0}._root_pott0_33._vertical_pott0_40 ._group_pott0_40{flex-direction:column}._root_pott0_33._horizontal_pott0_43 ._group_pott0_40{flex-direction:row}._group_pott0_40{display:flex;gap:var(--radio-group-gap)}
|
package/dist/radio.d.ts
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { default as default_2 } from 'react';
|
|
2
|
+
|
|
3
|
+
export declare enum ERadioSize {
|
|
4
|
+
SM = "sm",
|
|
5
|
+
MD = "md",
|
|
6
|
+
LG = "lg"
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export declare interface IItemProps extends TNativeInputProps, default_2.PropsWithChildren {
|
|
10
|
+
/** The value of the radio button. Required for group integration. */
|
|
11
|
+
value: string;
|
|
12
|
+
/** Description text displayed below the option label. */
|
|
13
|
+
description?: default_2.ReactNode;
|
|
14
|
+
/** Ref to the native input element. */
|
|
15
|
+
ref?: default_2.Ref<HTMLInputElement>;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export declare interface IRadioProps extends default_2.PropsWithChildren {
|
|
19
|
+
/** Name attribute passed to all radio inputs in the group. */
|
|
20
|
+
name?: string;
|
|
21
|
+
/** Controlled selected value. */
|
|
22
|
+
value?: string;
|
|
23
|
+
/** Default selected value for uncontrolled mode. */
|
|
24
|
+
defaultValue?: string;
|
|
25
|
+
/** Callback when the selected value changes. */
|
|
26
|
+
onChange?: (value: string) => void;
|
|
27
|
+
/** Vertical layout. Set false for horizontal. Default: true. */
|
|
28
|
+
vertical?: boolean;
|
|
29
|
+
/** Radio size: sm, md, lg. Default: 'md'. Applied to all items in the group. */
|
|
30
|
+
size?: TRadioSize;
|
|
31
|
+
/** When true, all radios in the group are disabled. */
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/** When true, all radio items show error styling. */
|
|
34
|
+
invalid?: boolean;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
declare const Item: default_2.FC<IItemProps>;
|
|
38
|
+
|
|
39
|
+
export declare const Radio: TRadioCompoundComponent;
|
|
40
|
+
|
|
41
|
+
declare const Radio_2: default_2.FC<IRadioProps>;
|
|
42
|
+
|
|
43
|
+
declare type TNativeInputProps = Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'type' | 'name' | 'checked' | 'size' | 'className'>;
|
|
44
|
+
|
|
45
|
+
declare type TRadioCompoundComponent = typeof Radio_2 & {
|
|
46
|
+
Item: typeof Item;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
declare type TRadioSize = `${ERadioSize.SM | ERadioSize.MD | ERadioSize.LG}`;
|
|
50
|
+
|
|
51
|
+
export { }
|
package/dist/radio.js
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { jsx as s, jsxs as z } from "react/jsx-runtime";
|
|
2
|
+
import L, { createContext as S, useContext as E, useId as P, useState as T, useCallback as x, useRef as $ } from "react";
|
|
3
|
+
import I from "clsx";
|
|
4
|
+
import { g as k } from "./getVariantClassName-D7Nhpuec.mjs";
|
|
5
|
+
import { i as A } from "./isValidReactNode-CmYwTWCE.mjs";
|
|
6
|
+
import "./camelCase-PtIYufW8.mjs";
|
|
7
|
+
import './radio.css';const M = S(null), D = () => {
|
|
8
|
+
const e = E(M);
|
|
9
|
+
if (!e)
|
|
10
|
+
throw new Error("useRadioContext should be used inside Radio component");
|
|
11
|
+
return e;
|
|
12
|
+
}, j = (e) => {
|
|
13
|
+
const { children: n, name: a, value: i, defaultValue: l, onChange: r, size: m, disabled: _, invalid: t } = e, p = P(), v = a ?? p, c = i !== void 0, [d, f] = T(l), g = c ? i : d, N = x(
|
|
14
|
+
(h) => {
|
|
15
|
+
c || f(h), r?.(h);
|
|
16
|
+
},
|
|
17
|
+
[c, r]
|
|
18
|
+
);
|
|
19
|
+
return /* @__PURE__ */ s(M.Provider, { value: { disabled: _, invalid: t, name: v, onChange: N, size: m, value: g }, children: n });
|
|
20
|
+
}, b = "Radio", w = "_item_1mf7l_3", B = "_disabled_1mf7l_12", O = "_invalid_1mf7l_17", U = "_radio_1mf7l_17", G = "_input_1mf7l_20", Y = "_content_1mf7l_63", q = "_label_1mf7l_70", F = "_description_1mf7l_75", H = "_sizeSm_1mf7l_113", J = "_sizeMd_1mf7l_130", K = "_sizeLg_1mf7l_147", o = {
|
|
21
|
+
item: w,
|
|
22
|
+
disabled: B,
|
|
23
|
+
invalid: O,
|
|
24
|
+
radio: U,
|
|
25
|
+
input: G,
|
|
26
|
+
content: Y,
|
|
27
|
+
label: q,
|
|
28
|
+
description: F,
|
|
29
|
+
sizeSm: H,
|
|
30
|
+
sizeMd: J,
|
|
31
|
+
sizeLg: K
|
|
32
|
+
}, R = (e) => {
|
|
33
|
+
const { ref: n, children: a, value: i, description: l, disabled: r, onChange: m, ..._ } = e, t = D(), p = $(null), v = t.size ?? "md", c = t.value !== void 0 ? i === t.value : void 0, d = r !== void 0 ? r : t.disabled, f = t.invalid === !0, g = x(
|
|
34
|
+
(u) => {
|
|
35
|
+
p.current = u, typeof n == "function" ? n(u) : n && (n.current = u);
|
|
36
|
+
},
|
|
37
|
+
[n]
|
|
38
|
+
), N = (u) => {
|
|
39
|
+
t.onChange?.(u.target.value), m?.(u);
|
|
40
|
+
}, h = I(
|
|
41
|
+
o.item,
|
|
42
|
+
k("size", v, o),
|
|
43
|
+
{
|
|
44
|
+
[o.disabled]: d,
|
|
45
|
+
[o.invalid]: f
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
return /* @__PURE__ */ z("label", { className: h, children: [
|
|
49
|
+
/* @__PURE__ */ s(
|
|
50
|
+
"input",
|
|
51
|
+
{
|
|
52
|
+
ref: g,
|
|
53
|
+
className: o.input,
|
|
54
|
+
type: "radio",
|
|
55
|
+
checked: c,
|
|
56
|
+
disabled: d,
|
|
57
|
+
"aria-invalid": f || void 0,
|
|
58
|
+
name: t.name,
|
|
59
|
+
value: i,
|
|
60
|
+
onChange: N,
|
|
61
|
+
..._
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ s("span", { className: o.radio, "aria-hidden": "true" }),
|
|
65
|
+
(a || l) && /* @__PURE__ */ z("span", { className: o.content, children: [
|
|
66
|
+
a && /* @__PURE__ */ s("span", { className: o.label, children: a }),
|
|
67
|
+
l && /* @__PURE__ */ s("span", { className: o.description, children: l })
|
|
68
|
+
] })
|
|
69
|
+
] });
|
|
70
|
+
};
|
|
71
|
+
R.displayName = `${b}.Item`;
|
|
72
|
+
var V = ((e) => (e.ITEM = `${b}.Item`, e))(V || {}), Q = /* @__PURE__ */ ((e) => (e.SM = "sm", e.MD = "md", e.LG = "lg", e))(Q || {});
|
|
73
|
+
const W = "_root_pott0_33", X = "_vertical_pott0_40", Z = "_group_pott0_40", ee = "_horizontal_pott0_43", C = {
|
|
74
|
+
root: W,
|
|
75
|
+
vertical: X,
|
|
76
|
+
group: Z,
|
|
77
|
+
horizontal: ee
|
|
78
|
+
}, te = [V.ITEM], y = (e) => {
|
|
79
|
+
const {
|
|
80
|
+
children: n,
|
|
81
|
+
name: a,
|
|
82
|
+
value: i,
|
|
83
|
+
defaultValue: l,
|
|
84
|
+
onChange: r,
|
|
85
|
+
vertical: m = !0,
|
|
86
|
+
size: _ = "md",
|
|
87
|
+
disabled: t = !1,
|
|
88
|
+
invalid: p = !1
|
|
89
|
+
} = e, v = (d) => A(te, d) ? d : null, c = I(C.root, {
|
|
90
|
+
[C.horizontal]: !m,
|
|
91
|
+
[C.vertical]: m
|
|
92
|
+
});
|
|
93
|
+
return /* @__PURE__ */ s(
|
|
94
|
+
j,
|
|
95
|
+
{
|
|
96
|
+
name: a,
|
|
97
|
+
value: i,
|
|
98
|
+
defaultValue: l,
|
|
99
|
+
onChange: r,
|
|
100
|
+
size: _,
|
|
101
|
+
disabled: t,
|
|
102
|
+
invalid: p,
|
|
103
|
+
children: /* @__PURE__ */ s("fieldset", { className: c, children: /* @__PURE__ */ s("div", { className: C.group, children: L.Children.map(n, v) }) })
|
|
104
|
+
}
|
|
105
|
+
);
|
|
106
|
+
};
|
|
107
|
+
y.displayName = b;
|
|
108
|
+
const ne = y;
|
|
109
|
+
ne.Item = R;
|
|
110
|
+
export {
|
|
111
|
+
Q as ERadioSize,
|
|
112
|
+
ne as Radio
|
|
113
|
+
};
|
package/package.json
CHANGED