@entropix/react 1.0.0 → 1.0.1
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/dist/accordion.cjs +27 -0
- package/dist/accordion.css +57 -0
- package/dist/accordion.d.cts +30 -0
- package/dist/accordion.d.ts +30 -0
- package/dist/accordion.js +6 -0
- package/dist/button.cjs +15 -0
- package/dist/button.css +113 -0
- package/dist/button.d.cts +25 -0
- package/dist/button.d.ts +25 -0
- package/dist/button.js +6 -0
- package/dist/checkbox.cjs +15 -0
- package/dist/checkbox.css +89 -0
- package/dist/checkbox.d.cts +26 -0
- package/dist/checkbox.d.ts +26 -0
- package/dist/checkbox.js +6 -0
- package/dist/chunk-2MKJZEUK.cjs +4 -0
- package/dist/chunk-34IVVIO3.cjs +119 -0
- package/dist/chunk-36ZHHJYV.js +79 -0
- package/dist/chunk-5DKE5YQD.cjs +10 -0
- package/dist/chunk-664P2RGR.js +108 -0
- package/dist/chunk-6NKHMBF3.cjs +97 -0
- package/dist/chunk-6UAQCHIW.js +8 -0
- package/dist/chunk-7AUIZOEH.cjs +84 -0
- package/dist/chunk-AVCBDUKH.js +3 -0
- package/dist/chunk-B5JZHE4I.cjs +90 -0
- package/dist/chunk-BN57JPKV.js +26 -0
- package/dist/chunk-BY4E26CV.js +114 -0
- package/dist/chunk-CL6JXZIY.js +88 -0
- package/dist/chunk-CTT3LXMZ.js +76 -0
- package/dist/chunk-EASSPJBG.cjs +110 -0
- package/dist/chunk-EWY7MSXF.cjs +94 -0
- package/dist/chunk-FJGLK3I4.js +89 -0
- package/dist/chunk-GTVBKK3W.js +88 -0
- package/dist/chunk-GZXXUFCJ.cjs +15 -0
- package/dist/chunk-IXH7OVN3.cjs +86 -0
- package/dist/chunk-KGIUECLG.cjs +91 -0
- package/dist/chunk-LDOP6DVX.cjs +28 -0
- package/dist/chunk-LJK6KK2H.cjs +43 -0
- package/dist/chunk-OT2HJUCB.js +84 -0
- package/dist/chunk-PILZGMQG.js +87 -0
- package/dist/chunk-PN42JF6U.js +92 -0
- package/dist/chunk-RPIYYBFJ.cjs +90 -0
- package/dist/chunk-S6DVQAH4.cjs +240 -0
- package/dist/chunk-U5CZHO6D.js +13 -0
- package/dist/chunk-UGCCJI2F.js +111 -0
- package/dist/chunk-W6N4D4N4.js +230 -0
- package/dist/chunk-Y2M2LJGJ.js +41 -0
- package/dist/chunk-YJG5KX6O.cjs +81 -0
- package/dist/chunk-ZG4PZBSL.cjs +113 -0
- package/dist/dialog.cjs +39 -0
- package/dist/dialog.css +89 -0
- package/dist/dialog.d.cts +62 -0
- package/dist/dialog.d.ts +62 -0
- package/dist/dialog.js +6 -0
- package/dist/index.cjs +170 -1223
- package/dist/index.d.cts +17 -477
- package/dist/index.d.ts +17 -477
- package/dist/index.js +19 -1189
- package/dist/input.cjs +15 -0
- package/dist/input.css +135 -0
- package/dist/input.d.cts +37 -0
- package/dist/input.d.ts +37 -0
- package/dist/input.js +6 -0
- package/dist/layout.cjs +25 -0
- package/dist/layout.css +176 -0
- package/dist/layout.d.cts +108 -0
- package/dist/layout.d.ts +108 -0
- package/dist/layout.js +4 -0
- package/dist/menu.cjs +27 -0
- package/dist/menu.css +51 -0
- package/dist/menu.d.cts +31 -0
- package/dist/menu.d.ts +31 -0
- package/dist/menu.js +6 -0
- package/dist/radio.cjs +19 -0
- package/dist/radio.css +93 -0
- package/dist/radio.d.cts +37 -0
- package/dist/radio.d.ts +37 -0
- package/dist/radio.js +6 -0
- package/dist/select.cjs +27 -0
- package/dist/select.css +114 -0
- package/dist/select.d.cts +59 -0
- package/dist/select.d.ts +59 -0
- package/dist/select.js +6 -0
- package/dist/styles/accordion.css +1 -67
- package/dist/styles/button.css +1 -133
- package/dist/styles/checkbox.css +1 -119
- package/dist/styles/dialog.css +1 -102
- package/dist/styles/index.css +1 -14
- package/dist/styles/input.css +1 -176
- package/dist/styles/layout.css +1 -125
- package/dist/styles/menu.css +1 -62
- package/dist/styles/radio.css +1 -128
- package/dist/styles/select.css +1 -148
- package/dist/styles/switch.css +1 -53
- package/dist/styles/tabs.css +1 -84
- package/dist/styles/toggle.css +1 -45
- package/dist/switch.cjs +16 -0
- package/dist/switch.css +89 -0
- package/dist/switch.d.cts +14 -0
- package/dist/switch.d.ts +14 -0
- package/dist/switch.js +7 -0
- package/dist/tabs.cjs +27 -0
- package/dist/tabs.css +69 -0
- package/dist/tabs.d.cts +31 -0
- package/dist/tabs.d.ts +31 -0
- package/dist/tabs.js +6 -0
- package/dist/textarea.cjs +15 -0
- package/dist/textarea.css +135 -0
- package/dist/textarea.d.cts +41 -0
- package/dist/textarea.d.ts +41 -0
- package/dist/textarea.js +6 -0
- package/dist/toggle.cjs +19 -0
- package/dist/toggle.css +41 -0
- package/dist/toggle.d.cts +34 -0
- package/dist/toggle.d.ts +34 -0
- package/dist/toggle.js +6 -0
- package/package.json +135 -4
- package/dist/index.cjs.map +0 -1
- package/dist/index.css.map +0 -1
- package/dist/index.js.map +0 -1
package/dist/switch.cjs
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkGZXXUFCJ_cjs = require('./chunk-GZXXUFCJ.cjs');
|
|
4
|
+
require('./chunk-B5JZHE4I.cjs');
|
|
5
|
+
require('./chunk-LDOP6DVX.cjs');
|
|
6
|
+
require('./chunk-LJK6KK2H.cjs');
|
|
7
|
+
require('./chunk-5DKE5YQD.cjs');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "Switch", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () { return chunkGZXXUFCJ_cjs.Switch; }
|
|
14
|
+
});
|
|
15
|
+
//# sourceMappingURL=switch.cjs.map
|
|
16
|
+
//# sourceMappingURL=switch.cjs.map
|
package/dist/switch.css
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/* src/styles/toggle.css */
|
|
2
|
+
.entropix-toggle {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
|
|
7
|
+
border: 1px solid var(--entropix-color-border-default);
|
|
8
|
+
border-radius: var(--entropix-radius-md);
|
|
9
|
+
background: var(--entropix-color-bg-primary);
|
|
10
|
+
color: var(--entropix-color-text-primary);
|
|
11
|
+
font-family: var(--entropix-font-family-sans);
|
|
12
|
+
font-size: var(--entropix-font-size-sm);
|
|
13
|
+
font-weight: var(--entropix-font-weight-medium);
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
user-select: none;
|
|
16
|
+
transition:
|
|
17
|
+
background var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
18
|
+
border-color var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
19
|
+
color var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
20
|
+
}
|
|
21
|
+
.entropix-toggle:hover:not(:disabled) {
|
|
22
|
+
background: var(--entropix-color-action-secondary-hover);
|
|
23
|
+
}
|
|
24
|
+
.entropix-toggle[data-state=checked] {
|
|
25
|
+
background: var(--entropix-color-action-primary-default);
|
|
26
|
+
color: var(--entropix-color-text-inverse);
|
|
27
|
+
border-color: transparent;
|
|
28
|
+
}
|
|
29
|
+
.entropix-toggle[data-state=checked]:hover:not(:disabled) {
|
|
30
|
+
background: var(--entropix-color-action-primary-hover);
|
|
31
|
+
}
|
|
32
|
+
.entropix-toggle:disabled {
|
|
33
|
+
opacity: 0.5;
|
|
34
|
+
cursor: not-allowed;
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
}
|
|
37
|
+
.entropix-toggle:focus-visible {
|
|
38
|
+
outline: 2px solid var(--entropix-color-border-focus);
|
|
39
|
+
outline-offset: 2px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* src/styles/switch.css */
|
|
43
|
+
.entropix-switch {
|
|
44
|
+
position: relative;
|
|
45
|
+
display: inline-flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
width: 44px;
|
|
48
|
+
height: 24px;
|
|
49
|
+
padding: 2px;
|
|
50
|
+
border: none;
|
|
51
|
+
border-radius: var(--entropix-radius-full);
|
|
52
|
+
background: var(--entropix-color-gray-300);
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
55
|
+
font-size: 0;
|
|
56
|
+
color: transparent;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
}
|
|
59
|
+
.entropix-switch::after {
|
|
60
|
+
content: "";
|
|
61
|
+
display: block;
|
|
62
|
+
width: 20px;
|
|
63
|
+
height: 20px;
|
|
64
|
+
border-radius: var(--entropix-radius-full);
|
|
65
|
+
background: var(--entropix-color-white);
|
|
66
|
+
box-shadow: var(--entropix-shadow-sm);
|
|
67
|
+
transition: transform var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
68
|
+
}
|
|
69
|
+
.entropix-switch[data-state=checked] {
|
|
70
|
+
background: var(--entropix-color-action-primary-default);
|
|
71
|
+
}
|
|
72
|
+
.entropix-switch[data-state=checked]::after {
|
|
73
|
+
transform: translateX(20px);
|
|
74
|
+
}
|
|
75
|
+
.entropix-switch:hover:not(:disabled) {
|
|
76
|
+
background: var(--entropix-color-gray-400);
|
|
77
|
+
}
|
|
78
|
+
.entropix-switch[data-state=checked]:hover:not(:disabled) {
|
|
79
|
+
background: var(--entropix-color-action-primary-hover);
|
|
80
|
+
}
|
|
81
|
+
.entropix-switch:disabled {
|
|
82
|
+
opacity: 0.5;
|
|
83
|
+
cursor: not-allowed;
|
|
84
|
+
}
|
|
85
|
+
.entropix-switch:focus-visible {
|
|
86
|
+
outline: 2px solid var(--entropix-color-border-focus);
|
|
87
|
+
outline-offset: 2px;
|
|
88
|
+
}
|
|
89
|
+
/*# sourceMappingURL=switch.css.map */
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ToggleProps } from './toggle.cjs';
|
|
3
|
+
import '@entropix/core';
|
|
4
|
+
|
|
5
|
+
type SwitchProps = ToggleProps;
|
|
6
|
+
/**
|
|
7
|
+
* Switch component — Toggle with role="switch" semantics.
|
|
8
|
+
*
|
|
9
|
+
* API-identical to Toggle, but renders with `role="switch"`
|
|
10
|
+
* instead of `role="checkbox"`.
|
|
11
|
+
*/
|
|
12
|
+
declare const Switch: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
|
|
13
|
+
|
|
14
|
+
export { Switch, type SwitchProps };
|
package/dist/switch.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ToggleProps } from './toggle.js';
|
|
3
|
+
import '@entropix/core';
|
|
4
|
+
|
|
5
|
+
type SwitchProps = ToggleProps;
|
|
6
|
+
/**
|
|
7
|
+
* Switch component — Toggle with role="switch" semantics.
|
|
8
|
+
*
|
|
9
|
+
* API-identical to Toggle, but renders with `role="switch"`
|
|
10
|
+
* instead of `role="checkbox"`.
|
|
11
|
+
*/
|
|
12
|
+
declare const Switch: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
|
|
13
|
+
|
|
14
|
+
export { Switch, type SwitchProps };
|
package/dist/switch.js
ADDED
package/dist/tabs.cjs
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunk7AUIZOEH_cjs = require('./chunk-7AUIZOEH.cjs');
|
|
4
|
+
require('./chunk-LDOP6DVX.cjs');
|
|
5
|
+
require('./chunk-LJK6KK2H.cjs');
|
|
6
|
+
require('./chunk-5DKE5YQD.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, "Tab", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () { return chunk7AUIZOEH_cjs.Tab; }
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "TabList", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return chunk7AUIZOEH_cjs.TabList; }
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "TabPanel", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () { return chunk7AUIZOEH_cjs.TabPanel; }
|
|
21
|
+
});
|
|
22
|
+
Object.defineProperty(exports, "Tabs", {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function () { return chunk7AUIZOEH_cjs.Tabs; }
|
|
25
|
+
});
|
|
26
|
+
//# sourceMappingURL=tabs.cjs.map
|
|
27
|
+
//# sourceMappingURL=tabs.cjs.map
|
package/dist/tabs.css
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/* src/styles/tabs.css */
|
|
2
|
+
.entropix-tabs {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
}
|
|
6
|
+
.entropix-tablist {
|
|
7
|
+
display: flex;
|
|
8
|
+
gap: var(--entropix-spacing-1);
|
|
9
|
+
border-bottom: 1px solid var(--entropix-color-border-default);
|
|
10
|
+
}
|
|
11
|
+
.entropix-tablist[data-orientation=vertical] {
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
border-bottom: none;
|
|
14
|
+
border-right: 1px solid var(--entropix-color-border-default);
|
|
15
|
+
}
|
|
16
|
+
.entropix-tab {
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
padding: var(--entropix-spacing-2) var(--entropix-spacing-4);
|
|
21
|
+
border: none;
|
|
22
|
+
border-bottom: 2px solid transparent;
|
|
23
|
+
background: transparent;
|
|
24
|
+
font-family: var(--entropix-font-family-sans);
|
|
25
|
+
font-size: var(--entropix-font-size-sm);
|
|
26
|
+
font-weight: var(--entropix-font-weight-medium);
|
|
27
|
+
color: var(--entropix-color-text-secondary);
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
transition: color var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
30
|
+
}
|
|
31
|
+
.entropix-tab:hover:not(:disabled) {
|
|
32
|
+
color: var(--entropix-color-text-primary);
|
|
33
|
+
}
|
|
34
|
+
.entropix-tab[data-state=active] {
|
|
35
|
+
color: var(--entropix-color-action-primary-default);
|
|
36
|
+
border-bottom-color: var(--entropix-color-action-primary-default);
|
|
37
|
+
}
|
|
38
|
+
.entropix-tab:disabled,
|
|
39
|
+
.entropix-tab[aria-disabled=true] {
|
|
40
|
+
opacity: 0.5;
|
|
41
|
+
cursor: not-allowed;
|
|
42
|
+
}
|
|
43
|
+
.entropix-tab:focus-visible {
|
|
44
|
+
outline: 2px solid var(--entropix-color-border-focus);
|
|
45
|
+
outline-offset: -2px;
|
|
46
|
+
border-radius: var(--entropix-radius-sm);
|
|
47
|
+
}
|
|
48
|
+
.entropix-tabpanel {
|
|
49
|
+
padding: var(--entropix-spacing-4);
|
|
50
|
+
}
|
|
51
|
+
@media (max-width: 767px) {
|
|
52
|
+
.entropix-tablist {
|
|
53
|
+
overflow-x: auto;
|
|
54
|
+
-webkit-overflow-scrolling: touch;
|
|
55
|
+
scrollbar-width: none;
|
|
56
|
+
-ms-overflow-style: none;
|
|
57
|
+
}
|
|
58
|
+
.entropix-tablist::-webkit-scrollbar {
|
|
59
|
+
display: none;
|
|
60
|
+
}
|
|
61
|
+
.entropix-tab {
|
|
62
|
+
white-space: nowrap;
|
|
63
|
+
flex-shrink: 0;
|
|
64
|
+
}
|
|
65
|
+
.entropix-tabpanel {
|
|
66
|
+
padding: var(--entropix-spacing-3);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
/*# sourceMappingURL=tabs.css.map */
|
package/dist/tabs.d.cts
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import react__default from 'react';
|
|
3
|
+
import { UseTabsOptions } from '@entropix/core';
|
|
4
|
+
|
|
5
|
+
interface TabsProps extends UseTabsOptions {
|
|
6
|
+
children: react__default.ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
declare function Tabs({ children, className, orientation, activationMode, ...options }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
interface TabListProps {
|
|
12
|
+
children: react__default.ReactNode;
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
declare function TabList({ children, className }: TabListProps): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
interface TabProps {
|
|
18
|
+
value: string;
|
|
19
|
+
children: react__default.ReactNode;
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
declare function Tab({ value, children, className }: TabProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
interface TabPanelProps {
|
|
25
|
+
value: string;
|
|
26
|
+
children: react__default.ReactNode;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
declare function TabPanel({ value, children, className }: TabPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
30
|
+
|
|
31
|
+
export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };
|
package/dist/tabs.d.ts
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import react__default from 'react';
|
|
3
|
+
import { UseTabsOptions } from '@entropix/core';
|
|
4
|
+
|
|
5
|
+
interface TabsProps extends UseTabsOptions {
|
|
6
|
+
children: react__default.ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
declare function Tabs({ children, className, orientation, activationMode, ...options }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
interface TabListProps {
|
|
12
|
+
children: react__default.ReactNode;
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
declare function TabList({ children, className }: TabListProps): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
interface TabProps {
|
|
18
|
+
value: string;
|
|
19
|
+
children: react__default.ReactNode;
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
declare function Tab({ value, children, className }: TabProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
interface TabPanelProps {
|
|
25
|
+
value: string;
|
|
26
|
+
children: react__default.ReactNode;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
declare function TabPanel({ value, children, className }: TabPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
30
|
+
|
|
31
|
+
export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };
|
package/dist/tabs.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkZG4PZBSL_cjs = require('./chunk-ZG4PZBSL.cjs');
|
|
4
|
+
require('./chunk-2MKJZEUK.cjs');
|
|
5
|
+
require('./chunk-LJK6KK2H.cjs');
|
|
6
|
+
require('./chunk-5DKE5YQD.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, "Textarea", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () { return chunkZG4PZBSL_cjs.Textarea; }
|
|
13
|
+
});
|
|
14
|
+
//# sourceMappingURL=textarea.cjs.map
|
|
15
|
+
//# sourceMappingURL=textarea.cjs.map
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/* src/styles/input.css */
|
|
2
|
+
.entropix-input-wrapper {
|
|
3
|
+
--input-border-color: var(--entropix-color-border-default);
|
|
4
|
+
--input-border-radius: var(--entropix-radius-md);
|
|
5
|
+
--input-bg: var(--entropix-color-bg-primary);
|
|
6
|
+
--input-font-size: var(--entropix-font-size-sm);
|
|
7
|
+
--input-padding-y: var(--entropix-spacing-2);
|
|
8
|
+
--input-padding-x: var(--entropix-spacing-3);
|
|
9
|
+
--input-focus-color: var(--entropix-color-border-focus);
|
|
10
|
+
--input-error-color: var(--entropix-color-border-danger);
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
gap: var(--entropix-spacing-1);
|
|
14
|
+
width: 100%;
|
|
15
|
+
}
|
|
16
|
+
.entropix-input-label {
|
|
17
|
+
display: block;
|
|
18
|
+
font-family: var(--entropix-font-family-sans);
|
|
19
|
+
font-size: var(--entropix-font-size-sm);
|
|
20
|
+
font-weight: var(--entropix-font-weight-medium);
|
|
21
|
+
color: var(--entropix-color-text-primary);
|
|
22
|
+
line-height: var(--entropix-line-height-normal);
|
|
23
|
+
}
|
|
24
|
+
.entropix-input-required {
|
|
25
|
+
color: var(--entropix-color-text-danger);
|
|
26
|
+
margin-left: var(--entropix-spacing-1);
|
|
27
|
+
}
|
|
28
|
+
.entropix-input,
|
|
29
|
+
.entropix-textarea {
|
|
30
|
+
display: block;
|
|
31
|
+
width: 100%;
|
|
32
|
+
border: 1px solid var(--input-border-color);
|
|
33
|
+
border-radius: var(--input-border-radius);
|
|
34
|
+
background: var(--input-bg);
|
|
35
|
+
color: var(--entropix-color-text-primary);
|
|
36
|
+
font-family: var(--entropix-font-family-sans);
|
|
37
|
+
font-size: var(--input-font-size);
|
|
38
|
+
line-height: var(--entropix-line-height-normal);
|
|
39
|
+
padding: var(--input-padding-y) var(--input-padding-x);
|
|
40
|
+
transition:
|
|
41
|
+
border-color var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
42
|
+
box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
43
|
+
background var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
44
|
+
}
|
|
45
|
+
.entropix-input::placeholder,
|
|
46
|
+
.entropix-textarea::placeholder {
|
|
47
|
+
color: var(--entropix-color-text-tertiary);
|
|
48
|
+
}
|
|
49
|
+
.entropix-input:focus,
|
|
50
|
+
.entropix-textarea:focus {
|
|
51
|
+
outline: none;
|
|
52
|
+
border-color: var(--input-focus-color);
|
|
53
|
+
box-shadow: 0 0 0 1px var(--input-focus-color);
|
|
54
|
+
}
|
|
55
|
+
.entropix-input:focus-visible,
|
|
56
|
+
.entropix-textarea:focus-visible {
|
|
57
|
+
outline: 2px solid var(--input-focus-color);
|
|
58
|
+
outline-offset: 2px;
|
|
59
|
+
}
|
|
60
|
+
.entropix-input:hover:not(:disabled):not(:focus),
|
|
61
|
+
.entropix-textarea:hover:not(:disabled):not(:focus) {
|
|
62
|
+
border-color: var(--entropix-color-border-hover);
|
|
63
|
+
}
|
|
64
|
+
.entropix-input[data-variant=filled],
|
|
65
|
+
.entropix-textarea[data-variant=filled] {
|
|
66
|
+
background: var(--entropix-color-bg-secondary);
|
|
67
|
+
border-color: transparent;
|
|
68
|
+
}
|
|
69
|
+
.entropix-input[data-variant=filled]:focus,
|
|
70
|
+
.entropix-textarea[data-variant=filled]:focus {
|
|
71
|
+
background: var(--input-bg);
|
|
72
|
+
border-color: var(--input-focus-color);
|
|
73
|
+
}
|
|
74
|
+
.entropix-input[data-size=sm],
|
|
75
|
+
.entropix-textarea[data-size=sm] {
|
|
76
|
+
padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
|
|
77
|
+
font-size: var(--entropix-font-size-xs);
|
|
78
|
+
border-radius: var(--entropix-radius-sm);
|
|
79
|
+
}
|
|
80
|
+
.entropix-input[data-size=md],
|
|
81
|
+
.entropix-textarea[data-size=md] {
|
|
82
|
+
padding: var(--input-padding-y) var(--input-padding-x);
|
|
83
|
+
font-size: var(--input-font-size);
|
|
84
|
+
}
|
|
85
|
+
.entropix-input[data-size=lg],
|
|
86
|
+
.entropix-textarea[data-size=lg] {
|
|
87
|
+
padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
|
|
88
|
+
font-size: var(--entropix-font-size-base);
|
|
89
|
+
border-radius: var(--entropix-radius-lg);
|
|
90
|
+
}
|
|
91
|
+
.entropix-input[data-state=invalid],
|
|
92
|
+
.entropix-textarea[data-state=invalid] {
|
|
93
|
+
border-color: var(--input-error-color);
|
|
94
|
+
}
|
|
95
|
+
.entropix-input[data-state=invalid]:focus,
|
|
96
|
+
.entropix-textarea[data-state=invalid]:focus {
|
|
97
|
+
border-color: var(--input-error-color);
|
|
98
|
+
box-shadow: 0 0 0 1px var(--input-error-color);
|
|
99
|
+
}
|
|
100
|
+
.entropix-input:disabled,
|
|
101
|
+
.entropix-textarea:disabled,
|
|
102
|
+
.entropix-input[data-state=disabled],
|
|
103
|
+
.entropix-textarea[data-state=disabled] {
|
|
104
|
+
opacity: 0.5;
|
|
105
|
+
cursor: not-allowed;
|
|
106
|
+
pointer-events: none;
|
|
107
|
+
}
|
|
108
|
+
.entropix-input-helper {
|
|
109
|
+
font-family: var(--entropix-font-family-sans);
|
|
110
|
+
font-size: var(--entropix-font-size-xs);
|
|
111
|
+
color: var(--entropix-color-text-secondary);
|
|
112
|
+
line-height: var(--entropix-line-height-normal);
|
|
113
|
+
}
|
|
114
|
+
.entropix-input-error {
|
|
115
|
+
font-family: var(--entropix-font-family-sans);
|
|
116
|
+
font-size: var(--entropix-font-size-xs);
|
|
117
|
+
color: var(--entropix-color-text-danger);
|
|
118
|
+
line-height: var(--entropix-line-height-normal);
|
|
119
|
+
}
|
|
120
|
+
.entropix-textarea {
|
|
121
|
+
min-height: 80px;
|
|
122
|
+
}
|
|
123
|
+
@media (max-width: 767px) {
|
|
124
|
+
.entropix-input,
|
|
125
|
+
.entropix-textarea {
|
|
126
|
+
min-height: 44px;
|
|
127
|
+
font-size: var(--entropix-font-size-base);
|
|
128
|
+
}
|
|
129
|
+
.entropix-input[data-size=sm],
|
|
130
|
+
.entropix-textarea[data-size=sm] {
|
|
131
|
+
min-height: 36px;
|
|
132
|
+
font-size: var(--entropix-font-size-sm);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
/*# sourceMappingURL=textarea.css.map */
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "disabled" | "value"> {
|
|
4
|
+
/** Controlled value */
|
|
5
|
+
value?: string;
|
|
6
|
+
/** Default value for uncontrolled mode */
|
|
7
|
+
defaultValue?: string;
|
|
8
|
+
/** Called when the value changes */
|
|
9
|
+
onChange?: (value: string) => void;
|
|
10
|
+
/** Whether the textarea is disabled */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/** Whether the textarea is read-only */
|
|
13
|
+
readOnly?: boolean;
|
|
14
|
+
/** Whether the textarea is required */
|
|
15
|
+
required?: boolean;
|
|
16
|
+
/** Whether the textarea is in an invalid state */
|
|
17
|
+
invalid?: boolean;
|
|
18
|
+
/** Label text */
|
|
19
|
+
label?: string;
|
|
20
|
+
/** Helper text displayed below the textarea */
|
|
21
|
+
helperText?: string;
|
|
22
|
+
/** Error message displayed below the textarea (sets invalid=true when present) */
|
|
23
|
+
errorMessage?: string;
|
|
24
|
+
/** Visual variant */
|
|
25
|
+
variant?: "default" | "filled";
|
|
26
|
+
/** Size */
|
|
27
|
+
size?: "sm" | "md" | "lg";
|
|
28
|
+
/** Number of visible text rows */
|
|
29
|
+
rows?: number;
|
|
30
|
+
/** Resize behavior */
|
|
31
|
+
resize?: "none" | "vertical" | "both";
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Textarea component — web adapter for @entropix/core's useInput.
|
|
35
|
+
*
|
|
36
|
+
* Renders a wrapper div with label, textarea, helper text, and error message.
|
|
37
|
+
* Sets data-state, data-variant, and data-size attributes for CSS targeting.
|
|
38
|
+
*/
|
|
39
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
40
|
+
|
|
41
|
+
export { Textarea, type TextareaProps };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "disabled" | "value"> {
|
|
4
|
+
/** Controlled value */
|
|
5
|
+
value?: string;
|
|
6
|
+
/** Default value for uncontrolled mode */
|
|
7
|
+
defaultValue?: string;
|
|
8
|
+
/** Called when the value changes */
|
|
9
|
+
onChange?: (value: string) => void;
|
|
10
|
+
/** Whether the textarea is disabled */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/** Whether the textarea is read-only */
|
|
13
|
+
readOnly?: boolean;
|
|
14
|
+
/** Whether the textarea is required */
|
|
15
|
+
required?: boolean;
|
|
16
|
+
/** Whether the textarea is in an invalid state */
|
|
17
|
+
invalid?: boolean;
|
|
18
|
+
/** Label text */
|
|
19
|
+
label?: string;
|
|
20
|
+
/** Helper text displayed below the textarea */
|
|
21
|
+
helperText?: string;
|
|
22
|
+
/** Error message displayed below the textarea (sets invalid=true when present) */
|
|
23
|
+
errorMessage?: string;
|
|
24
|
+
/** Visual variant */
|
|
25
|
+
variant?: "default" | "filled";
|
|
26
|
+
/** Size */
|
|
27
|
+
size?: "sm" | "md" | "lg";
|
|
28
|
+
/** Number of visible text rows */
|
|
29
|
+
rows?: number;
|
|
30
|
+
/** Resize behavior */
|
|
31
|
+
resize?: "none" | "vertical" | "both";
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Textarea component — web adapter for @entropix/core's useInput.
|
|
35
|
+
*
|
|
36
|
+
* Renders a wrapper div with label, textarea, helper text, and error message.
|
|
37
|
+
* Sets data-state, data-variant, and data-size attributes for CSS targeting.
|
|
38
|
+
*/
|
|
39
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
40
|
+
|
|
41
|
+
export { Textarea, type TextareaProps };
|
package/dist/textarea.js
ADDED
package/dist/toggle.cjs
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkB5JZHE4I_cjs = require('./chunk-B5JZHE4I.cjs');
|
|
4
|
+
require('./chunk-LDOP6DVX.cjs');
|
|
5
|
+
require('./chunk-LJK6KK2H.cjs');
|
|
6
|
+
require('./chunk-5DKE5YQD.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, "Toggle", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () { return chunkB5JZHE4I_cjs.Toggle; }
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "ToggleInner", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return chunkB5JZHE4I_cjs.ToggleInner; }
|
|
17
|
+
});
|
|
18
|
+
//# sourceMappingURL=toggle.cjs.map
|
|
19
|
+
//# sourceMappingURL=toggle.cjs.map
|
package/dist/toggle.css
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* src/styles/toggle.css */
|
|
2
|
+
.entropix-toggle {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
|
|
7
|
+
border: 1px solid var(--entropix-color-border-default);
|
|
8
|
+
border-radius: var(--entropix-radius-md);
|
|
9
|
+
background: var(--entropix-color-bg-primary);
|
|
10
|
+
color: var(--entropix-color-text-primary);
|
|
11
|
+
font-family: var(--entropix-font-family-sans);
|
|
12
|
+
font-size: var(--entropix-font-size-sm);
|
|
13
|
+
font-weight: var(--entropix-font-weight-medium);
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
user-select: none;
|
|
16
|
+
transition:
|
|
17
|
+
background var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
18
|
+
border-color var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
19
|
+
color var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
20
|
+
}
|
|
21
|
+
.entropix-toggle:hover:not(:disabled) {
|
|
22
|
+
background: var(--entropix-color-action-secondary-hover);
|
|
23
|
+
}
|
|
24
|
+
.entropix-toggle[data-state=checked] {
|
|
25
|
+
background: var(--entropix-color-action-primary-default);
|
|
26
|
+
color: var(--entropix-color-text-inverse);
|
|
27
|
+
border-color: transparent;
|
|
28
|
+
}
|
|
29
|
+
.entropix-toggle[data-state=checked]:hover:not(:disabled) {
|
|
30
|
+
background: var(--entropix-color-action-primary-hover);
|
|
31
|
+
}
|
|
32
|
+
.entropix-toggle:disabled {
|
|
33
|
+
opacity: 0.5;
|
|
34
|
+
cursor: not-allowed;
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
}
|
|
37
|
+
.entropix-toggle:focus-visible {
|
|
38
|
+
outline: 2px solid var(--entropix-color-border-focus);
|
|
39
|
+
outline-offset: 2px;
|
|
40
|
+
}
|
|
41
|
+
/*# sourceMappingURL=toggle.css.map */
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { UseToggleOptions } from '@entropix/core';
|
|
3
|
+
|
|
4
|
+
interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "disabled"> {
|
|
5
|
+
/** Controlled checked state */
|
|
6
|
+
checked?: boolean;
|
|
7
|
+
/** Default checked state for uncontrolled mode */
|
|
8
|
+
defaultChecked?: boolean;
|
|
9
|
+
/** Called when checked state changes */
|
|
10
|
+
onChange?: (checked: boolean) => void;
|
|
11
|
+
/** Whether the toggle is disabled */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Accessible label (if no children) */
|
|
14
|
+
label?: string;
|
|
15
|
+
}
|
|
16
|
+
/** Internal props used by Switch to override the role */
|
|
17
|
+
interface ToggleInternalProps extends ToggleProps {
|
|
18
|
+
/** @internal Override the ARIA role */
|
|
19
|
+
role?: UseToggleOptions["role"];
|
|
20
|
+
/** @internal CSS class name for the component (toggle or switch) */
|
|
21
|
+
componentClass?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Toggle component — web adapter for @entropix/core's useToggle.
|
|
25
|
+
*
|
|
26
|
+
* Renders a `<button type="button">` with role="checkbox".
|
|
27
|
+
* Use the Switch component for role="switch" semantics.
|
|
28
|
+
* Sets data-state="checked"|"unchecked" for CSS targeting.
|
|
29
|
+
*/
|
|
30
|
+
declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
|
|
31
|
+
/** @internal Shared implementation for Toggle and Switch */
|
|
32
|
+
declare const ToggleInner: react.ForwardRefExoticComponent<ToggleInternalProps & react.RefAttributes<HTMLButtonElement>>;
|
|
33
|
+
|
|
34
|
+
export { Toggle, ToggleInner, type ToggleProps };
|