@entropix/react 0.3.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.css +994 -1015
- 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 -69
- package/dist/styles/button.css +1 -135
- package/dist/styles/checkbox.css +1 -121
- package/dist/styles/dialog.css +1 -104
- package/dist/styles/index.css +1 -16
- package/dist/styles/input.css +1 -178
- package/dist/styles/layout.css +1 -127
- package/dist/styles/menu.css +1 -64
- package/dist/styles/radio.css +1 -130
- package/dist/styles/select.css +1 -150
- package/dist/styles/switch.css +1 -52
- package/dist/styles/tabs.css +1 -86
- package/dist/styles/toggle.css +1 -47
- 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
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkEWY7MSXF_cjs = require('./chunk-EWY7MSXF.cjs');
|
|
4
|
+
require('./chunk-LDOP6DVX.cjs');
|
|
5
|
+
require('./chunk-LJK6KK2H.cjs');
|
|
6
|
+
require('./chunk-5DKE5YQD.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, "Accordion", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () { return chunkEWY7MSXF_cjs.Accordion; }
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "AccordionItem", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () { return chunkEWY7MSXF_cjs.AccordionItem; }
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "AccordionPanel", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () { return chunkEWY7MSXF_cjs.AccordionPanel; }
|
|
21
|
+
});
|
|
22
|
+
Object.defineProperty(exports, "AccordionTrigger", {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: function () { return chunkEWY7MSXF_cjs.AccordionTrigger; }
|
|
25
|
+
});
|
|
26
|
+
//# sourceMappingURL=accordion.cjs.map
|
|
27
|
+
//# sourceMappingURL=accordion.cjs.map
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/* src/styles/accordion.css */
|
|
2
|
+
.entropix-accordion {
|
|
3
|
+
border: 1px solid var(--entropix-color-border-default);
|
|
4
|
+
border-radius: var(--entropix-radius-lg);
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
7
|
+
.entropix-accordion-item {
|
|
8
|
+
border-bottom: 1px solid var(--entropix-color-border-default);
|
|
9
|
+
}
|
|
10
|
+
.entropix-accordion-item:last-child {
|
|
11
|
+
border-bottom: none;
|
|
12
|
+
}
|
|
13
|
+
.entropix-accordion-trigger {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: space-between;
|
|
17
|
+
width: 100%;
|
|
18
|
+
padding: var(--entropix-spacing-4);
|
|
19
|
+
border: none;
|
|
20
|
+
background: transparent;
|
|
21
|
+
font-family: var(--entropix-font-family-sans);
|
|
22
|
+
font-size: var(--entropix-font-size-sm);
|
|
23
|
+
font-weight: var(--entropix-font-weight-medium);
|
|
24
|
+
color: var(--entropix-color-text-primary);
|
|
25
|
+
text-align: left;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
28
|
+
}
|
|
29
|
+
.entropix-accordion-trigger:hover:not(:disabled) {
|
|
30
|
+
background: var(--entropix-color-bg-secondary);
|
|
31
|
+
}
|
|
32
|
+
.entropix-accordion-trigger:disabled {
|
|
33
|
+
opacity: 0.5;
|
|
34
|
+
cursor: not-allowed;
|
|
35
|
+
}
|
|
36
|
+
.entropix-accordion-trigger:focus-visible {
|
|
37
|
+
outline: 2px solid var(--entropix-color-border-focus);
|
|
38
|
+
outline-offset: -2px;
|
|
39
|
+
}
|
|
40
|
+
.entropix-accordion-panel {
|
|
41
|
+
padding: 0 var(--entropix-spacing-4) var(--entropix-spacing-4);
|
|
42
|
+
font-family: var(--entropix-font-family-sans);
|
|
43
|
+
font-size: var(--entropix-font-size-sm);
|
|
44
|
+
color: var(--entropix-color-text-secondary);
|
|
45
|
+
line-height: var(--entropix-line-height-normal);
|
|
46
|
+
}
|
|
47
|
+
@media (max-width: 767px) {
|
|
48
|
+
.entropix-accordion-trigger {
|
|
49
|
+
padding: var(--entropix-spacing-4) var(--entropix-spacing-3);
|
|
50
|
+
min-height: 48px;
|
|
51
|
+
font-size: var(--entropix-font-size-base);
|
|
52
|
+
}
|
|
53
|
+
.entropix-accordion-panel {
|
|
54
|
+
padding: 0 var(--entropix-spacing-3) var(--entropix-spacing-3);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
/*# sourceMappingURL=accordion.css.map */
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import react__default from 'react';
|
|
3
|
+
import { UseAccordionOptions } from '@entropix/core';
|
|
4
|
+
|
|
5
|
+
interface AccordionProps extends UseAccordionOptions {
|
|
6
|
+
children: react__default.ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
declare function Accordion({ children, className, ...options }: AccordionProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
interface AccordionItemProps {
|
|
12
|
+
value: string;
|
|
13
|
+
children: react__default.ReactNode;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
declare function AccordionItem({ value, children, className, }: AccordionItemProps): react_jsx_runtime.JSX.Element;
|
|
17
|
+
|
|
18
|
+
interface AccordionTriggerProps {
|
|
19
|
+
children: react__default.ReactNode;
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
declare function AccordionTrigger({ children, className, }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
interface AccordionPanelProps {
|
|
25
|
+
children: react__default.ReactNode;
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
declare function AccordionPanel({ children, className }: AccordionPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
29
|
+
|
|
30
|
+
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import react__default from 'react';
|
|
3
|
+
import { UseAccordionOptions } from '@entropix/core';
|
|
4
|
+
|
|
5
|
+
interface AccordionProps extends UseAccordionOptions {
|
|
6
|
+
children: react__default.ReactNode;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
declare function Accordion({ children, className, ...options }: AccordionProps): react_jsx_runtime.JSX.Element;
|
|
10
|
+
|
|
11
|
+
interface AccordionItemProps {
|
|
12
|
+
value: string;
|
|
13
|
+
children: react__default.ReactNode;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
declare function AccordionItem({ value, children, className, }: AccordionItemProps): react_jsx_runtime.JSX.Element;
|
|
17
|
+
|
|
18
|
+
interface AccordionTriggerProps {
|
|
19
|
+
children: react__default.ReactNode;
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
declare function AccordionTrigger({ children, className, }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
interface AccordionPanelProps {
|
|
25
|
+
children: react__default.ReactNode;
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
declare function AccordionPanel({ children, className }: AccordionPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
29
|
+
|
|
30
|
+
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from './chunk-FJGLK3I4.js';
|
|
2
|
+
import './chunk-BN57JPKV.js';
|
|
3
|
+
import './chunk-Y2M2LJGJ.js';
|
|
4
|
+
import './chunk-6UAQCHIW.js';
|
|
5
|
+
//# sourceMappingURL=accordion.js.map
|
|
6
|
+
//# sourceMappingURL=accordion.js.map
|
package/dist/button.cjs
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkIXH7OVN3_cjs = require('./chunk-IXH7OVN3.cjs');
|
|
4
|
+
require('./chunk-LDOP6DVX.cjs');
|
|
5
|
+
require('./chunk-LJK6KK2H.cjs');
|
|
6
|
+
require('./chunk-5DKE5YQD.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, "Button", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () { return chunkIXH7OVN3_cjs.Button; }
|
|
13
|
+
});
|
|
14
|
+
//# sourceMappingURL=button.cjs.map
|
|
15
|
+
//# sourceMappingURL=button.cjs.map
|
package/dist/button.css
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/* src/styles/button.css */
|
|
2
|
+
.entropix-button {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
gap: var(--entropix-button-gap);
|
|
7
|
+
border: 1px solid transparent;
|
|
8
|
+
font-family: var(--entropix-font-family-sans);
|
|
9
|
+
font-size: var(--entropix-button-font-size);
|
|
10
|
+
font-weight: var(--entropix-button-font-weight);
|
|
11
|
+
line-height: var(--entropix-button-line-height);
|
|
12
|
+
border-radius: var(--entropix-button-border-radius);
|
|
13
|
+
padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
text-decoration: none;
|
|
16
|
+
user-select: none;
|
|
17
|
+
transition:
|
|
18
|
+
background var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
19
|
+
color var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
20
|
+
border-color var(--entropix-duration-fast) var(--entropix-easing-default),
|
|
21
|
+
box-shadow var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
22
|
+
}
|
|
23
|
+
.entropix-button--primary {
|
|
24
|
+
background: var(--entropix-button-primary-bg);
|
|
25
|
+
color: var(--entropix-button-primary-text);
|
|
26
|
+
border-color: var(--entropix-button-primary-border);
|
|
27
|
+
}
|
|
28
|
+
.entropix-button--primary:hover:not(:disabled) {
|
|
29
|
+
background: var(--entropix-button-primary-bg-hover);
|
|
30
|
+
}
|
|
31
|
+
.entropix-button--primary:active:not(:disabled) {
|
|
32
|
+
background: var(--entropix-button-primary-bg-active);
|
|
33
|
+
}
|
|
34
|
+
.entropix-button--secondary {
|
|
35
|
+
background: var(--entropix-button-secondary-bg);
|
|
36
|
+
color: var(--entropix-button-secondary-text);
|
|
37
|
+
border-color: var(--entropix-button-secondary-border);
|
|
38
|
+
}
|
|
39
|
+
.entropix-button--secondary:hover:not(:disabled) {
|
|
40
|
+
background: var(--entropix-button-secondary-bg-hover);
|
|
41
|
+
}
|
|
42
|
+
.entropix-button--secondary:active:not(:disabled) {
|
|
43
|
+
background: var(--entropix-button-secondary-bg-active);
|
|
44
|
+
}
|
|
45
|
+
.entropix-button--outline {
|
|
46
|
+
background: transparent;
|
|
47
|
+
color: var(--entropix-color-text-primary);
|
|
48
|
+
border-color: var(--entropix-color-border-default);
|
|
49
|
+
}
|
|
50
|
+
.entropix-button--outline:hover:not(:disabled) {
|
|
51
|
+
background: var(--entropix-color-action-secondary-hover);
|
|
52
|
+
}
|
|
53
|
+
.entropix-button--outline:active:not(:disabled) {
|
|
54
|
+
background: var(--entropix-color-action-secondary-active);
|
|
55
|
+
}
|
|
56
|
+
.entropix-button--ghost {
|
|
57
|
+
background: transparent;
|
|
58
|
+
color: var(--entropix-color-text-primary);
|
|
59
|
+
border-color: transparent;
|
|
60
|
+
}
|
|
61
|
+
.entropix-button--ghost:hover:not(:disabled) {
|
|
62
|
+
background: var(--entropix-color-action-secondary-default);
|
|
63
|
+
}
|
|
64
|
+
.entropix-button--ghost:active:not(:disabled) {
|
|
65
|
+
background: var(--entropix-color-action-secondary-hover);
|
|
66
|
+
}
|
|
67
|
+
.entropix-button--danger {
|
|
68
|
+
background: var(--entropix-button-danger-bg);
|
|
69
|
+
color: var(--entropix-button-danger-text);
|
|
70
|
+
border-color: var(--entropix-button-danger-border);
|
|
71
|
+
}
|
|
72
|
+
.entropix-button--danger:hover:not(:disabled) {
|
|
73
|
+
background: var(--entropix-button-danger-bg-hover);
|
|
74
|
+
}
|
|
75
|
+
.entropix-button--danger:active:not(:disabled) {
|
|
76
|
+
background: var(--entropix-button-danger-bg-active);
|
|
77
|
+
}
|
|
78
|
+
.entropix-button--sm {
|
|
79
|
+
padding: var(--entropix-spacing-1) var(--entropix-spacing-3);
|
|
80
|
+
font-size: var(--entropix-font-size-xs);
|
|
81
|
+
border-radius: var(--entropix-radius-sm);
|
|
82
|
+
}
|
|
83
|
+
.entropix-button--md {
|
|
84
|
+
padding: var(--entropix-button-padding-y) var(--entropix-button-padding-x);
|
|
85
|
+
font-size: var(--entropix-button-font-size);
|
|
86
|
+
}
|
|
87
|
+
.entropix-button--lg {
|
|
88
|
+
padding: var(--entropix-spacing-3) var(--entropix-spacing-6);
|
|
89
|
+
font-size: var(--entropix-font-size-base);
|
|
90
|
+
border-radius: var(--entropix-radius-lg);
|
|
91
|
+
}
|
|
92
|
+
.entropix-button:disabled,
|
|
93
|
+
.entropix-button[data-state=disabled],
|
|
94
|
+
.entropix-button[data-state=loading] {
|
|
95
|
+
opacity: 0.5;
|
|
96
|
+
cursor: not-allowed;
|
|
97
|
+
pointer-events: none;
|
|
98
|
+
}
|
|
99
|
+
.entropix-button:focus-visible {
|
|
100
|
+
outline: 2px solid var(--entropix-color-border-focus);
|
|
101
|
+
outline-offset: 2px;
|
|
102
|
+
}
|
|
103
|
+
@media (max-width: 767px) {
|
|
104
|
+
.entropix-button {
|
|
105
|
+
min-height: 44px;
|
|
106
|
+
}
|
|
107
|
+
.entropix-button--sm {
|
|
108
|
+
min-height: 36px;
|
|
109
|
+
padding: var(--entropix-spacing-2) var(--entropix-spacing-3);
|
|
110
|
+
font-size: var(--entropix-font-size-sm);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
/*# sourceMappingURL=button.css.map */
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLElement>, "disabled"> {
|
|
4
|
+
/** Whether the button is disabled */
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
/** Whether the button is in a loading state */
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
/** Called when the button is activated */
|
|
9
|
+
onPress?: () => void;
|
|
10
|
+
/** Render as a different element type */
|
|
11
|
+
as?: React.ElementType;
|
|
12
|
+
/** Visual variant for CSS targeting via data-variant */
|
|
13
|
+
variant?: string;
|
|
14
|
+
/** Size for CSS targeting via data-size */
|
|
15
|
+
size?: string;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Button component — web adapter for @entropix/core's useButton.
|
|
19
|
+
*
|
|
20
|
+
* Renders a `<button>` by default. Use the `as` prop for other elements.
|
|
21
|
+
* Provides data-state, data-variant, data-size attributes for CSS targeting.
|
|
22
|
+
*/
|
|
23
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
|
|
24
|
+
|
|
25
|
+
export { Button, type ButtonProps };
|
package/dist/button.d.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLElement>, "disabled"> {
|
|
4
|
+
/** Whether the button is disabled */
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
/** Whether the button is in a loading state */
|
|
7
|
+
loading?: boolean;
|
|
8
|
+
/** Called when the button is activated */
|
|
9
|
+
onPress?: () => void;
|
|
10
|
+
/** Render as a different element type */
|
|
11
|
+
as?: React.ElementType;
|
|
12
|
+
/** Visual variant for CSS targeting via data-variant */
|
|
13
|
+
variant?: string;
|
|
14
|
+
/** Size for CSS targeting via data-size */
|
|
15
|
+
size?: string;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Button component — web adapter for @entropix/core's useButton.
|
|
19
|
+
*
|
|
20
|
+
* Renders a `<button>` by default. Use the `as` prop for other elements.
|
|
21
|
+
* Provides data-state, data-variant, data-size attributes for CSS targeting.
|
|
22
|
+
*/
|
|
23
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
|
|
24
|
+
|
|
25
|
+
export { Button, type ButtonProps };
|
package/dist/button.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkRPIYYBFJ_cjs = require('./chunk-RPIYYBFJ.cjs');
|
|
4
|
+
require('./chunk-LDOP6DVX.cjs');
|
|
5
|
+
require('./chunk-LJK6KK2H.cjs');
|
|
6
|
+
require('./chunk-5DKE5YQD.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
Object.defineProperty(exports, "Checkbox", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () { return chunkRPIYYBFJ_cjs.Checkbox; }
|
|
13
|
+
});
|
|
14
|
+
//# sourceMappingURL=checkbox.cjs.map
|
|
15
|
+
//# sourceMappingURL=checkbox.cjs.map
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/* src/styles/checkbox.css */
|
|
2
|
+
.entropix-checkbox {
|
|
3
|
+
--checkbox-size: 18px;
|
|
4
|
+
--checkbox-border-color: var(--entropix-color-border-default);
|
|
5
|
+
--checkbox-checked-bg: var(--entropix-color-action-primary-default);
|
|
6
|
+
--checkbox-checked-border: var(--entropix-color-action-primary-default);
|
|
7
|
+
--checkbox-border-radius: var(--entropix-radius-sm);
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: var(--entropix-spacing-2);
|
|
11
|
+
padding: var(--entropix-spacing-1) 0;
|
|
12
|
+
border: none;
|
|
13
|
+
background: transparent;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
user-select: none;
|
|
16
|
+
font-family: var(--entropix-font-family-sans);
|
|
17
|
+
font-size: var(--entropix-font-size-sm);
|
|
18
|
+
color: var(--entropix-color-text-primary);
|
|
19
|
+
line-height: var(--entropix-line-height-normal);
|
|
20
|
+
}
|
|
21
|
+
.entropix-checkbox__indicator {
|
|
22
|
+
display: inline-flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
width: var(--checkbox-size);
|
|
26
|
+
height: var(--checkbox-size);
|
|
27
|
+
border: 2px solid var(--checkbox-border-color);
|
|
28
|
+
border-radius: var(--checkbox-border-radius);
|
|
29
|
+
background: var(--entropix-color-bg-primary);
|
|
30
|
+
flex-shrink: 0;
|
|
31
|
+
transition: background var(--entropix-duration-fast) var(--entropix-easing-default), border-color var(--entropix-duration-fast) var(--entropix-easing-default);
|
|
32
|
+
}
|
|
33
|
+
.entropix-checkbox__indicator[data-state=checked],
|
|
34
|
+
.entropix-checkbox__indicator[data-state=indeterminate] {
|
|
35
|
+
background: var(--checkbox-checked-bg);
|
|
36
|
+
border-color: var(--checkbox-checked-border);
|
|
37
|
+
}
|
|
38
|
+
.entropix-checkbox__indicator[data-state=checked]::after {
|
|
39
|
+
content: "";
|
|
40
|
+
display: block;
|
|
41
|
+
width: 5px;
|
|
42
|
+
height: 9px;
|
|
43
|
+
border: solid var(--entropix-color-text-inverse);
|
|
44
|
+
border-width: 0 2px 2px 0;
|
|
45
|
+
transform: rotate(45deg);
|
|
46
|
+
margin-top: -1px;
|
|
47
|
+
}
|
|
48
|
+
.entropix-checkbox__indicator[data-state=indeterminate]::after {
|
|
49
|
+
content: "";
|
|
50
|
+
display: block;
|
|
51
|
+
width: 8px;
|
|
52
|
+
height: 2px;
|
|
53
|
+
background: var(--entropix-color-text-inverse);
|
|
54
|
+
border-radius: 1px;
|
|
55
|
+
}
|
|
56
|
+
.entropix-checkbox__label {
|
|
57
|
+
font-family: var(--entropix-font-family-sans);
|
|
58
|
+
font-size: var(--entropix-font-size-sm);
|
|
59
|
+
color: var(--entropix-color-text-primary);
|
|
60
|
+
line-height: var(--entropix-line-height-normal);
|
|
61
|
+
}
|
|
62
|
+
.entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator {
|
|
63
|
+
border-color: var(--entropix-color-border-hover);
|
|
64
|
+
}
|
|
65
|
+
.entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=checked],
|
|
66
|
+
.entropix-checkbox:hover:not(:disabled) .entropix-checkbox__indicator[data-state=indeterminate] {
|
|
67
|
+
background: var(--entropix-color-action-primary-hover);
|
|
68
|
+
border-color: var(--entropix-color-action-primary-hover);
|
|
69
|
+
}
|
|
70
|
+
.entropix-checkbox:focus-visible {
|
|
71
|
+
outline: 2px solid var(--entropix-color-border-focus);
|
|
72
|
+
outline-offset: 2px;
|
|
73
|
+
border-radius: var(--checkbox-border-radius);
|
|
74
|
+
}
|
|
75
|
+
.entropix-checkbox:disabled {
|
|
76
|
+
opacity: 0.5;
|
|
77
|
+
cursor: not-allowed;
|
|
78
|
+
pointer-events: none;
|
|
79
|
+
}
|
|
80
|
+
@media (max-width: 767px) {
|
|
81
|
+
.entropix-checkbox {
|
|
82
|
+
min-height: 44px;
|
|
83
|
+
}
|
|
84
|
+
.entropix-checkbox__indicator {
|
|
85
|
+
width: 22px;
|
|
86
|
+
height: 22px;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
/*# sourceMappingURL=checkbox.css.map */
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "disabled"> {
|
|
4
|
+
/** Controlled checked state */
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
/** Default checked state for uncontrolled mode */
|
|
7
|
+
defaultChecked?: boolean;
|
|
8
|
+
/** Called when checked state changes */
|
|
9
|
+
onChange?: (checked: boolean) => void;
|
|
10
|
+
/** Whether the checkbox is disabled */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/** Accessible label text */
|
|
13
|
+
label?: string;
|
|
14
|
+
/** Whether the checkbox is in an indeterminate state */
|
|
15
|
+
indeterminate?: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Checkbox component — web adapter for @entropix/core's useToggle.
|
|
19
|
+
*
|
|
20
|
+
* Renders a `<button type="button">` with role="checkbox" containing
|
|
21
|
+
* an indicator span and a label span.
|
|
22
|
+
* Sets data-state="checked"|"unchecked"|"indeterminate" for CSS targeting.
|
|
23
|
+
*/
|
|
24
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
|
|
25
|
+
|
|
26
|
+
export { Checkbox, type CheckboxProps };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "disabled"> {
|
|
4
|
+
/** Controlled checked state */
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
/** Default checked state for uncontrolled mode */
|
|
7
|
+
defaultChecked?: boolean;
|
|
8
|
+
/** Called when checked state changes */
|
|
9
|
+
onChange?: (checked: boolean) => void;
|
|
10
|
+
/** Whether the checkbox is disabled */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/** Accessible label text */
|
|
13
|
+
label?: string;
|
|
14
|
+
/** Whether the checkbox is in an indeterminate state */
|
|
15
|
+
indeterminate?: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Checkbox component — web adapter for @entropix/core's useToggle.
|
|
19
|
+
*
|
|
20
|
+
* Renders a `<button type="button">` with role="checkbox" containing
|
|
21
|
+
* an indicator span and a label span.
|
|
22
|
+
* Sets data-state="checked"|"unchecked"|"indeterminate" for CSS targeting.
|
|
23
|
+
*/
|
|
24
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
|
|
25
|
+
|
|
26
|
+
export { Checkbox, type CheckboxProps };
|
package/dist/checkbox.js
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkLDOP6DVX_cjs = require('./chunk-LDOP6DVX.cjs');
|
|
4
|
+
var chunkLJK6KK2H_cjs = require('./chunk-LJK6KK2H.cjs');
|
|
5
|
+
var chunk5DKE5YQD_cjs = require('./chunk-5DKE5YQD.cjs');
|
|
6
|
+
var core = require('@entropix/core');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
+
|
|
10
|
+
var SelectContext = react.createContext(null);
|
|
11
|
+
function useSelectContext() {
|
|
12
|
+
const context = react.useContext(SelectContext);
|
|
13
|
+
if (!context) {
|
|
14
|
+
throw new Error(
|
|
15
|
+
"Select compound components must be used within a <Select> provider."
|
|
16
|
+
);
|
|
17
|
+
}
|
|
18
|
+
return context;
|
|
19
|
+
}
|
|
20
|
+
function Select({ children, label, className, ...options }) {
|
|
21
|
+
const select = core.useSelect(options);
|
|
22
|
+
const labelProps = select.getLabelProps();
|
|
23
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: select, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk5DKE5YQD_cjs.cn("entropix-select", className), children: [
|
|
24
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
25
|
+
"label",
|
|
26
|
+
{
|
|
27
|
+
className: "entropix-select-label",
|
|
28
|
+
id: labelProps.id,
|
|
29
|
+
htmlFor: labelProps.htmlFor,
|
|
30
|
+
children: label
|
|
31
|
+
}
|
|
32
|
+
),
|
|
33
|
+
children
|
|
34
|
+
] }) });
|
|
35
|
+
}
|
|
36
|
+
function SelectTrigger({
|
|
37
|
+
placeholder = "Select...",
|
|
38
|
+
children,
|
|
39
|
+
className
|
|
40
|
+
}) {
|
|
41
|
+
const { getTriggerProps, toggle, open, selectedValue, isDisabled } = useSelectContext();
|
|
42
|
+
const propGetterReturn = getTriggerProps();
|
|
43
|
+
const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
|
|
44
|
+
const handleClick = react.useCallback(() => {
|
|
45
|
+
propGetterReturn.onAction?.();
|
|
46
|
+
}, [propGetterReturn.onAction]);
|
|
47
|
+
const onKeyDown = chunkLDOP6DVX_cjs.useKeyboardHandler(propGetterReturn.keyboardConfig, {
|
|
48
|
+
activate: toggle,
|
|
49
|
+
moveDown: open,
|
|
50
|
+
moveUp: open
|
|
51
|
+
});
|
|
52
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
53
|
+
"button",
|
|
54
|
+
{
|
|
55
|
+
type: "button",
|
|
56
|
+
...ariaProps,
|
|
57
|
+
className: chunk5DKE5YQD_cjs.cn("entropix-select-trigger", className),
|
|
58
|
+
onClick: handleClick,
|
|
59
|
+
onKeyDown,
|
|
60
|
+
disabled: isDisabled || void 0,
|
|
61
|
+
children: [
|
|
62
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-select-trigger__value", children: children ?? (selectedValue || placeholder) }),
|
|
63
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-select-trigger__chevron", "aria-hidden": "true", children: "\u25BE" })
|
|
64
|
+
]
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
function SelectContent({ children, className }) {
|
|
69
|
+
const { isOpen, getListboxProps, close } = useSelectContext();
|
|
70
|
+
const propGetterReturn = getListboxProps();
|
|
71
|
+
const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
|
|
72
|
+
const onKeyDown = chunkLDOP6DVX_cjs.useKeyboardHandler(propGetterReturn.keyboardConfig, {
|
|
73
|
+
dismiss: close
|
|
74
|
+
});
|
|
75
|
+
if (!isOpen) return null;
|
|
76
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
77
|
+
"div",
|
|
78
|
+
{
|
|
79
|
+
...ariaProps,
|
|
80
|
+
className: chunk5DKE5YQD_cjs.cn("entropix-select-content", className),
|
|
81
|
+
onKeyDown,
|
|
82
|
+
"data-state": "open",
|
|
83
|
+
children
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
function SelectOption({
|
|
88
|
+
value,
|
|
89
|
+
index,
|
|
90
|
+
disabled,
|
|
91
|
+
children,
|
|
92
|
+
className
|
|
93
|
+
}) {
|
|
94
|
+
const { getOptionProps, selectedValue } = useSelectContext();
|
|
95
|
+
const propGetterReturn = getOptionProps(value, index ?? 0, { disabled });
|
|
96
|
+
const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
|
|
97
|
+
const isSelected = value === selectedValue;
|
|
98
|
+
const handleClick = react.useCallback(() => {
|
|
99
|
+
propGetterReturn.onAction?.();
|
|
100
|
+
}, [propGetterReturn.onAction]);
|
|
101
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
...ariaProps,
|
|
105
|
+
className: chunk5DKE5YQD_cjs.cn("entropix-select-option", className),
|
|
106
|
+
onClick: handleClick,
|
|
107
|
+
"data-state": isSelected ? "selected" : "unselected",
|
|
108
|
+
"data-disabled": disabled || void 0,
|
|
109
|
+
children
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
exports.Select = Select;
|
|
115
|
+
exports.SelectContent = SelectContent;
|
|
116
|
+
exports.SelectOption = SelectOption;
|
|
117
|
+
exports.SelectTrigger = SelectTrigger;
|
|
118
|
+
//# sourceMappingURL=chunk-34IVVIO3.cjs.map
|
|
119
|
+
//# sourceMappingURL=chunk-34IVVIO3.cjs.map
|