@pk-design/react-tailwind 1.1.7 → 1.3.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/dist/react-tailwind.cjs.js +68 -62
- package/dist/react-tailwind.cjs.js.map +1 -1
- package/dist/react-tailwind.css +1 -1
- package/dist/react-tailwind.css.map +1 -1
- package/dist/react-tailwind.es.js +68 -62
- package/dist/react-tailwind.es.js.map +1 -1
- package/dist/types/components/Tabs/Tabs.types.d.ts +28 -22
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/react-tailwind.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.spinner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}.spinner .path{-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
|
|
1
|
+
:root{--ui-primary:#2563eb;--ui-primary-hover:#1d4ed8;--ui-primary-ring:#2563eb;--ui-primary-light:#eff6ff;--ui-primary-text:#1d4ed8;--ui-primary-disabled:#93c5fd;--ui-danger:#dc2626;--ui-danger-hover:#b91c1c;--ui-danger-ring:#dc2626;--ui-danger-light:#fef2f2;--ui-danger-text:#991b1b;--ui-danger-disabled:#fca5a5;--ui-success:#16a34a;--ui-success-ring:#16a34a;--ui-success-light:#f0fdf4;--ui-success-text:#15803d;--ui-warning:#d97706;--ui-warning-ring:#d97706;--ui-warning-light:#fffbeb;--ui-warning-text:#92400e;--ui-info:#2563eb;--ui-info-ring:#2563eb;--ui-info-light:#eff6ff;--ui-info-text:#1d4ed8;--ui-success-ring-subtle:rgba(22,163,74,.2);--ui-danger-ring-subtle:rgba(220,38,38,.2);--ui-warning-ring-subtle:rgba(217,119,6,.2);--ui-info-ring-subtle:rgba(37,99,235,.2);--ui-secondary-ring-subtle:hsla(220,9%,46%,.2);--ui-focus-ring:#2563eb;--ui-radius-sm:0.25rem;--ui-radius:0.375rem;--ui-radius-md:0.5rem;--ui-radius-lg:0.75rem;--ui-radius-xl:1rem;--ui-radius-full:9999px}.dark{--ui-primary:#3b82f6;--ui-primary-hover:#2563eb;--ui-primary-ring:#3b82f6;--ui-primary-light:#1e3a8a;--ui-primary-text:#93c5fd;--ui-primary-disabled:#1e40af;--ui-danger:#ef4444;--ui-danger-hover:#dc2626;--ui-danger-ring:#ef4444;--ui-danger-light:#7f1d1d;--ui-danger-text:#fca5a5;--ui-danger-disabled:#991b1b;--ui-success:#22c55e;--ui-success-ring:#22c55e;--ui-success-light:#14532d;--ui-success-text:#86efac;--ui-warning:#f59e0b;--ui-warning-ring:#f59e0b;--ui-warning-light:#78350f;--ui-warning-text:#fcd34d;--ui-info:#3b82f6;--ui-info-ring:#3b82f6;--ui-info-light:#1e3a8a;--ui-info-text:#93c5fd;--ui-success-ring-subtle:rgba(34,197,94,.2);--ui-danger-ring-subtle:rgba(239,68,68,.2);--ui-warning-ring-subtle:rgba(245,158,11,.2);--ui-info-ring-subtle:rgba(59,130,246,.2);--ui-secondary-ring-subtle:rgba(156,163,175,.2);--ui-focus-ring:#3b82f6}.spinner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}.spinner .path{-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}@-webkit-keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
|
|
2
2
|
/*# sourceMappingURL=react-tailwind.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["loader.css"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["tokens.css","loader.css"],"names":[],"mappings":"AAgBA,MAEE,oBAAqB,CACrB,0BAA2B,CAC3B,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAC1B,6BAA8B,CAG9B,mBAAoB,CACpB,yBAA0B,CAC1B,wBAAyB,CACzB,yBAA0B,CAC1B,wBAAyB,CACzB,4BAA6B,CAG7B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAG1B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAG1B,iBAAkB,CAClB,sBAAuB,CACvB,uBAAwB,CACxB,sBAAuB,CAGvB,2CAAgD,CAChD,0CAA+C,CAC/C,2CAAgD,CAChD,wCAA6C,CAC7C,8CAAoD,CAGpD,uBAAwB,CAGxB,sBAAuB,CACvB,oBAAqB,CACrB,qBAAsB,CACtB,sBAAuB,CACvB,mBAAoB,CACpB,uBACF,CAGA,MACE,oBAAqB,CACrB,0BAA2B,CAC3B,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAC1B,6BAA8B,CAE9B,mBAAoB,CACpB,yBAA0B,CAC1B,wBAAyB,CACzB,yBAA0B,CAC1B,wBAAyB,CACzB,4BAA6B,CAE7B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAE1B,oBAAqB,CACrB,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAE1B,iBAAkB,CAClB,sBAAuB,CACvB,uBAAwB,CACxB,sBAAuB,CAEvB,2CAAgD,CAChD,0CAA+C,CAC/C,4CAAiD,CACjD,yCAA8C,CAC9C,+CAAoD,CAEpD,uBACF,CC3GA,SACE,2CAA4C,CAC5C,mCACF,CACA,eACE,gDAAiD,CACjD,wCACF,CAEA,0BACE,GACE,+BAAiC,CACjC,uBACF,CACF,CAEA,kBACE,GACE,+BAAiC,CACjC,uBACF,CACF,CACA,wBACE,GACE,sBAAwB,CACxB,mBACF,CACA,IACE,uBAAyB,CACzB,qBACF,CACA,GACE,uBAAyB,CACzB,sBACF,CACF,CACA,gBACE,GACE,sBAAwB,CACxB,mBACF,CACA,IACE,uBAAyB,CACzB,qBACF,CACA,GACE,uBAAyB,CACzB,sBACF,CACF","file":"react-tailwind.css","sourcesContent":["/*\n * Design tokens for @pk-design/react-tailwind.\n *\n * Override any variable in your app's CSS to rebrand the entire library:\n *\n * :root {\n * --ui-primary: #7c3aed;\n * --ui-primary-hover: #6d28d9;\n * --ui-primary-ring: #7c3aed;\n * --ui-primary-light: #f5f3ff;\n * --ui-primary-text: #5b21b6;\n * --ui-primary-disabled:#c4b5fd;\n * }\n */\n\n/* ─── Light mode ────────────────────────────────────────────────────────────── */\n:root {\n /* Primary (blue-600 family) */\n --ui-primary: #2563eb;\n --ui-primary-hover: #1d4ed8;\n --ui-primary-ring: #2563eb;\n --ui-primary-light: #eff6ff;\n --ui-primary-text: #1d4ed8;\n --ui-primary-disabled: #93c5fd;\n\n /* Danger (red-600 family) */\n --ui-danger: #dc2626;\n --ui-danger-hover: #b91c1c;\n --ui-danger-ring: #dc2626;\n --ui-danger-light: #fef2f2;\n --ui-danger-text: #991b1b;\n --ui-danger-disabled: #fca5a5;\n\n /* Success (green-600 family) */\n --ui-success: #16a34a;\n --ui-success-ring: #16a34a;\n --ui-success-light: #f0fdf4;\n --ui-success-text: #15803d;\n\n /* Warning (amber-600 family) */\n --ui-warning: #d97706;\n --ui-warning-ring: #d97706;\n --ui-warning-light: #fffbeb;\n --ui-warning-text: #92400e;\n\n /* Info (same as primary by default) */\n --ui-info: #2563eb;\n --ui-info-ring: #2563eb;\n --ui-info-light: #eff6ff;\n --ui-info-text: #1d4ed8;\n\n /* Badge / Alert ring colors (with opacity pre-baked) */\n --ui-success-ring-subtle: rgba(22, 163, 74, 0.2);\n --ui-danger-ring-subtle: rgba(220, 38, 38, 0.2);\n --ui-warning-ring-subtle: rgba(217, 119, 6, 0.2);\n --ui-info-ring-subtle: rgba(37, 99, 235, 0.2);\n --ui-secondary-ring-subtle: rgba(107, 114, 128, 0.2);\n\n /* Global focus ring */\n --ui-focus-ring: #2563eb;\n\n /* Border radius scale */\n --ui-radius-sm: 0.25rem;\n --ui-radius: 0.375rem;\n --ui-radius-md: 0.5rem;\n --ui-radius-lg: 0.75rem;\n --ui-radius-xl: 1rem;\n --ui-radius-full: 9999px;\n}\n\n/* ─── Dark mode overrides ───────────────────────────────────────────────────── */\n.dark {\n --ui-primary: #3b82f6;\n --ui-primary-hover: #2563eb;\n --ui-primary-ring: #3b82f6;\n --ui-primary-light: #1e3a8a;\n --ui-primary-text: #93c5fd;\n --ui-primary-disabled: #1e40af;\n\n --ui-danger: #ef4444;\n --ui-danger-hover: #dc2626;\n --ui-danger-ring: #ef4444;\n --ui-danger-light: #7f1d1d;\n --ui-danger-text: #fca5a5;\n --ui-danger-disabled: #991b1b;\n\n --ui-success: #22c55e;\n --ui-success-ring: #22c55e;\n --ui-success-light: #14532d;\n --ui-success-text: #86efac;\n\n --ui-warning: #f59e0b;\n --ui-warning-ring: #f59e0b;\n --ui-warning-light: #78350f;\n --ui-warning-text: #fcd34d;\n\n --ui-info: #3b82f6;\n --ui-info-ring: #3b82f6;\n --ui-info-light: #1e3a8a;\n --ui-info-text: #93c5fd;\n\n --ui-success-ring-subtle: rgba(34, 197, 94, 0.2);\n --ui-danger-ring-subtle: rgba(239, 68, 68, 0.2);\n --ui-warning-ring-subtle: rgba(245, 158, 11, 0.2);\n --ui-info-ring-subtle: rgba(59, 130, 246, 0.2);\n --ui-secondary-ring-subtle: rgba(156, 163, 175, 0.2);\n\n --ui-focus-ring: #3b82f6;\n}\n","/* SVG spinner icon animation */\n.spinner {\n -webkit-animation: rotate 2s linear infinite;\n animation: rotate 2s linear infinite;\n}\n.spinner .path {\n -webkit-animation: dash 1.5s ease-in-out infinite;\n animation: dash 1.5s ease-in-out infinite;\n}\n\n@-webkit-keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n@keyframes rotate {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@-webkit-keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}\n@keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n}\n"]}
|
|
@@ -141,19 +141,19 @@ TextContent.displayName = 'TextContent';
|
|
|
141
141
|
*/
|
|
142
142
|
const THEMED_BTN_CLASS = {
|
|
143
143
|
primary: {
|
|
144
|
-
default: 'text-white bg-
|
|
145
|
-
outlined: 'text-
|
|
146
|
-
plain: 'text-
|
|
144
|
+
default: 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus:outline-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',
|
|
145
|
+
outlined: 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus:outline-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',
|
|
146
|
+
plain: 'text-[var(--ui-primary-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus:outline-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',
|
|
147
147
|
},
|
|
148
148
|
danger: {
|
|
149
|
-
default: 'text-white bg-
|
|
150
|
-
outlined: 'text-
|
|
151
|
-
plain: 'text-
|
|
149
|
+
default: 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus:outline-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',
|
|
150
|
+
outlined: 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus:outline-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',
|
|
151
|
+
plain: 'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus:outline-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
|
|
152
152
|
},
|
|
153
153
|
secondary: {
|
|
154
|
-
default: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus:outline-
|
|
155
|
-
outlined: 'text-gray-700 hover:text-white border border-gray-500 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus:outline-
|
|
156
|
-
plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus:outline-
|
|
154
|
+
default: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus:outline-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
|
|
155
|
+
outlined: 'text-gray-700 hover:text-white border border-gray-500 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus:outline-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-gray-400',
|
|
156
|
+
plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus:outline-[var(--ui-focus-ring)] disabled:text-gray-400',
|
|
157
157
|
},
|
|
158
158
|
};
|
|
159
159
|
/**
|
|
@@ -216,10 +216,10 @@ const AlertTypeIconMap = {
|
|
|
216
216
|
info: SvgInfo,
|
|
217
217
|
};
|
|
218
218
|
const TypeClassMap = {
|
|
219
|
-
success: 'bg-
|
|
220
|
-
danger: 'bg-
|
|
221
|
-
warning: 'bg-
|
|
222
|
-
info: 'bg-
|
|
219
|
+
success: 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',
|
|
220
|
+
danger: 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',
|
|
221
|
+
warning: 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',
|
|
222
|
+
info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',
|
|
223
223
|
};
|
|
224
224
|
const Alert = (props) => {
|
|
225
225
|
const { type = 'info', className = '', message, children, removable = false, onRemove = () => { }, ...restProps } = props;
|
|
@@ -229,11 +229,11 @@ const Alert = (props) => {
|
|
|
229
229
|
Alert.displayName = 'Alert';
|
|
230
230
|
|
|
231
231
|
const ThemeClassMap = {
|
|
232
|
-
success: 'bg-
|
|
233
|
-
danger: 'bg-
|
|
234
|
-
warning: 'bg-
|
|
235
|
-
info: 'bg-
|
|
236
|
-
secondary: 'bg-gray-50 dark:bg-gray-
|
|
232
|
+
success: 'bg-[var(--ui-success-light)] text-[var(--ui-success-text)] ring-[var(--ui-success-ring-subtle)]',
|
|
233
|
+
danger: 'bg-[var(--ui-danger-light)] text-[var(--ui-danger-text)] ring-[var(--ui-danger-ring-subtle)]',
|
|
234
|
+
warning: 'bg-[var(--ui-warning-light)] text-[var(--ui-warning-text)] ring-[var(--ui-warning-ring-subtle)]',
|
|
235
|
+
info: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
|
|
236
|
+
secondary: 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 ring-[var(--ui-secondary-ring-subtle)]',
|
|
237
237
|
};
|
|
238
238
|
const Badge = forwardRef((props, ref) => {
|
|
239
239
|
const { theme = 'info', className = '', children, removable = false, rounded = false, onRemove = () => { }, ...restProps } = props;
|
|
@@ -375,7 +375,7 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
375
375
|
...rest } = props;
|
|
376
376
|
const generatedId = useId();
|
|
377
377
|
const checkboxId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : generatedId;
|
|
378
|
-
return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center', containerClass), children: [jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex items-center relative select-none', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsx("input", { ref: ref, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer size-4.5 cursor-pointer transition-all appearance-none rounded', 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-
|
|
378
|
+
return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center', containerClass), children: [jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex items-center relative select-none', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsx("input", { ref: ref, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer size-4.5 cursor-pointer transition-all appearance-none rounded', 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-[var(--ui-primary)] checked:border-[var(--ui-primary)]', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900', disabled
|
|
379
379
|
? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
|
|
380
380
|
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-md', className) }), jsx("span", { className: "absolute text-white opacity-0 peer-checked:opacity-100 \n top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.25 w-3.25", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] }), label && (jsx(Label, { htmlFor: checkboxId, className: buildClassName(disabled
|
|
381
381
|
? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
|
|
@@ -847,8 +847,8 @@ function buildInputClass(className, { isFocusWithin = false, disabled = false }
|
|
|
847
847
|
return buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'invalid:group-[.has-error]:outline-red-500', disabled
|
|
848
848
|
? 'pointer-events-none bg-gray-100 dark:bg-gray-800 dark:text-gray-600 dark:placeholder-gray-600 placeholder-gray-400 outline-gray-200 dark:outline-gray-700'
|
|
849
849
|
: 'bg-white dark:bg-gray-700 dark:text-white outline-gray-300 dark:outline-gray-600 dark:placeholder-gray-400 placeholder-gray-400', isFocusWithin
|
|
850
|
-
? 'focus-within:outline-
|
|
851
|
-
: 'focus:outline-
|
|
850
|
+
? 'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2'
|
|
851
|
+
: 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', className);
|
|
852
852
|
}
|
|
853
853
|
const Input = forwardRef((props, ref) => {
|
|
854
854
|
const { name, id = name, type, label, labelHint, className, labelClass, labelWrapperClass, containerClass, error, showErrorMessage = true, rightGroup, leftGroup, ...inputProps } = props;
|
|
@@ -874,9 +874,9 @@ const Radio = forwardRef((props, ref) => {
|
|
|
874
874
|
...rest } = props;
|
|
875
875
|
const generatedId = useId();
|
|
876
876
|
const radioId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : generatedId;
|
|
877
|
-
return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center gap-2', containerClass), children: [jsx("div", { className: "grid place-items-center", children: jsx("input", { ref: ref, ...rest, id: radioId, name: name, type: "radio", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer transition-all col-start-1 row-start-1 appearance-none shrink-0 size-4.5 rounded-full', 'border focus:ring-2 focus:ring-offset-2', 'checked:border-5 checked:bg-white', 'focus:ring-
|
|
877
|
+
return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center gap-2', containerClass), children: [jsx("div", { className: "grid place-items-center", children: jsx("input", { ref: ref, ...rest, id: radioId, name: name, type: "radio", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer transition-all col-start-1 row-start-1 appearance-none shrink-0 size-4.5 rounded-full', 'border focus:ring-2 focus:ring-offset-2', 'checked:border-5 checked:bg-white', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-800', disabled
|
|
878
878
|
? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
|
|
879
|
-
: buildClassName('bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500', 'checked:border-
|
|
879
|
+
: buildClassName('bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500', 'checked:border-[var(--ui-primary)] checked:hover:border-[var(--ui-primary)]'), className) }) }), label && (jsx(Label, { htmlFor: radioId, className: buildClassName(disabled
|
|
880
880
|
? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
|
|
881
881
|
: 'cursor-pointer text-gray-600 dark:text-gray-300', labelClass), children: label }))] }), error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
|
|
882
882
|
});
|
|
@@ -1282,35 +1282,48 @@ const SelectBox = forwardRef((props, forwardedRef) => {
|
|
|
1282
1282
|
}, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsx(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsx("div", { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx("div", { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [filteredOptions.map((option) => (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 && query && !optionsLoading && (jsxs("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: ["No results found for ", jsx("span", { className: "font-semibold", children: query })] })), allowAdd && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] })) })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
|
|
1283
1283
|
});
|
|
1284
1284
|
|
|
1285
|
-
const Tabs = ({ tabs, defaultIndex = 0, variant = 'underline', className = '', listClass = '',
|
|
1286
|
-
|
|
1285
|
+
const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'underline', orientation = 'horizontal', stretch = false, className = '', listClass = '', panelsClass = '', }) => {
|
|
1286
|
+
const isVertical = orientation === 'vertical';
|
|
1287
|
+
return (jsxs(TabGroup, { defaultIndex: defaultIndex, selectedIndex: selectedIndex, onChange: onChange, vertical: isVertical, className: buildClassName(isVertical && 'flex gap-4', stretch && !isVertical && 'w-full', className), children: [jsx(TabList, { className: buildClassName(isVertical ? 'flex flex-col gap-1' : 'flex gap-2', stretch && !isVertical && 'w-full', listClass), children: tabs.map((tab, idx) => {
|
|
1288
|
+
var _a;
|
|
1289
|
+
return (jsx(Tab, { disabled: tab.disabled, as: Fragment$1, children: ({ selected }) => (jsxs("button", { disabled: tab.disabled, className: buildTabClass({
|
|
1290
|
+
selected,
|
|
1291
|
+
variant,
|
|
1292
|
+
stretch,
|
|
1293
|
+
isVertical,
|
|
1294
|
+
tabClass: tab.tabClass,
|
|
1295
|
+
}), children: [tab.icon && jsx("span", { className: "inline-flex shrink-0", children: tab.icon }), tab.label] })) }, (_a = tab.id) !== null && _a !== void 0 ? _a : idx));
|
|
1296
|
+
}) }), jsx(TabPanels, { className: buildClassName(isVertical ? 'flex-1' : 'mt-3', panelsClass), children: tabs.map((tab, idx) => {
|
|
1297
|
+
var _a;
|
|
1298
|
+
return (jsx(TabPanel, { className: tab.panelClass !== undefined
|
|
1299
|
+
? tab.panelClass
|
|
1300
|
+
: 'rounded-lg bg-white dark:bg-gray-800 p-4 shadow-sm', children: tab.content }, (_a = tab.id) !== null && _a !== void 0 ? _a : idx));
|
|
1301
|
+
}) })] }));
|
|
1287
1302
|
};
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
function buildTabClass({ selected, variant, }) {
|
|
1303
|
+
function buildTabClass({ selected, variant, stretch, isVertical, tabClass, }) {
|
|
1304
|
+
const base = buildClassName('inline-flex items-center gap-1.5 text-sm font-medium transition focus-visible:outline-none', 'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none', stretch && !isVertical && 'flex-1 justify-center');
|
|
1305
|
+
let variantClass;
|
|
1292
1306
|
switch (variant) {
|
|
1293
|
-
/**
|
|
1294
|
-
* UNDERLINE (Default)
|
|
1295
|
-
*/
|
|
1296
1307
|
case 'underline':
|
|
1297
|
-
|
|
1298
|
-
'
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1308
|
+
variantClass = isVertical
|
|
1309
|
+
? buildClassName('px-3 py-2 w-full text-left border-l-2', selected
|
|
1310
|
+
? 'border-[var(--ui-primary)] text-gray-900 dark:text-white'
|
|
1311
|
+
: 'border-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:border-gray-300 dark:hover:border-gray-600')
|
|
1312
|
+
: buildClassName('px-3 py-1.5 relative text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white', selected &&
|
|
1313
|
+
'text-gray-900 dark:text-white after:absolute after:z-10 after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-[var(--ui-primary)]');
|
|
1314
|
+
break;
|
|
1302
1315
|
case 'segmented':
|
|
1303
|
-
|
|
1304
|
-
? 'bg-
|
|
1316
|
+
variantClass = buildClassName('px-3 py-1.5 rounded-lg', selected
|
|
1317
|
+
? 'bg-[var(--ui-primary)] text-white'
|
|
1305
1318
|
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700');
|
|
1306
|
-
|
|
1307
|
-
* SOLID
|
|
1308
|
-
*/
|
|
1319
|
+
break;
|
|
1309
1320
|
case 'solid':
|
|
1310
|
-
|
|
1321
|
+
variantClass = buildClassName('px-3 py-1.5 rounded-md', selected
|
|
1311
1322
|
? 'bg-gray-900 dark:bg-gray-700 text-white'
|
|
1312
1323
|
: 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700');
|
|
1324
|
+
break;
|
|
1313
1325
|
}
|
|
1326
|
+
return buildClassName(base, variantClass, tabClass);
|
|
1314
1327
|
}
|
|
1315
1328
|
|
|
1316
1329
|
const Textarea = forwardRef((props, ref) => {
|
|
@@ -1325,29 +1338,22 @@ const Textarea = forwardRef((props, ref) => {
|
|
|
1325
1338
|
* Icons for each toast type
|
|
1326
1339
|
*/
|
|
1327
1340
|
const iconMap = {
|
|
1328
|
-
success: jsx(SvgCircleCheck, { className: "size-5 text-
|
|
1329
|
-
error: jsx(SvgCircleAlert, { className: "size-5 text-
|
|
1330
|
-
info: jsx(SvgInfo, { className: "size-5 text-
|
|
1331
|
-
warning: jsx(SvgTriangleAlert, { className: "size-5 text-
|
|
1341
|
+
success: jsx(SvgCircleCheck, { className: "size-5 text-[var(--ui-success)]" }),
|
|
1342
|
+
error: jsx(SvgCircleAlert, { className: "size-5 text-[var(--ui-danger)]" }),
|
|
1343
|
+
info: jsx(SvgInfo, { className: "size-5 text-[var(--ui-info)]" }),
|
|
1344
|
+
warning: jsx(SvgTriangleAlert, { className: "size-5 text-[var(--ui-warning)]" }),
|
|
1332
1345
|
};
|
|
1333
|
-
/**
|
|
1334
|
-
* Subtle icon + text color adjustments
|
|
1335
|
-
*/
|
|
1336
1346
|
const textColorMap = {
|
|
1337
|
-
success: 'text-
|
|
1338
|
-
error: 'text-
|
|
1339
|
-
info: 'text-
|
|
1340
|
-
warning: 'text-
|
|
1347
|
+
success: 'text-[var(--ui-success-text)]',
|
|
1348
|
+
error: 'text-[var(--ui-danger-text)]',
|
|
1349
|
+
info: 'text-[var(--ui-info-text)]',
|
|
1350
|
+
warning: 'text-[var(--ui-warning-text)]',
|
|
1341
1351
|
};
|
|
1342
|
-
/**
|
|
1343
|
-
* Pleasant colored *top border only*
|
|
1344
|
-
* No background color — soft neutral surface
|
|
1345
|
-
*/
|
|
1346
1352
|
const borderStyle = {
|
|
1347
|
-
success: 'border-t-4 border-
|
|
1348
|
-
error: 'border-t-4 border-
|
|
1349
|
-
info: 'border-t-4 border-
|
|
1350
|
-
warning: 'border-t-4 border-
|
|
1353
|
+
success: 'border-t-4 border-[var(--ui-success)]',
|
|
1354
|
+
error: 'border-t-4 border-[var(--ui-danger)]',
|
|
1355
|
+
info: 'border-t-4 border-[var(--ui-info)]',
|
|
1356
|
+
warning: 'border-t-4 border-[var(--ui-warning)]',
|
|
1351
1357
|
};
|
|
1352
1358
|
const Toast = ({ message, type, onClose, className, id, isTop = true, }) => {
|
|
1353
1359
|
const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95';
|