@pk-design/react-tailwind 1.1.7 → 1.2.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 +37 -44
- 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 +37 -44
- package/dist/react-tailwind.es.js.map +1 -1
- 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
|
});
|
|
@@ -1295,13 +1295,13 @@ function buildTabClass({ selected, variant, }) {
|
|
|
1295
1295
|
*/
|
|
1296
1296
|
case 'underline':
|
|
1297
1297
|
return buildClassName('px-3 py-1.5 text-sm font-medium transition relative', 'text-gray-600 dark:text-gray-300', 'hover:text-gray-900 dark:hover:text-white', selected &&
|
|
1298
|
-
'text-gray-900 dark:text-white after:absolute after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-
|
|
1298
|
+
'text-gray-900 dark:text-white after:absolute after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-[var(--ui-primary)]');
|
|
1299
1299
|
/**
|
|
1300
1300
|
* SEGMENTED
|
|
1301
1301
|
*/
|
|
1302
1302
|
case 'segmented':
|
|
1303
1303
|
return buildClassName('px-3 py-1.5 text-sm font-medium rounded-lg transition', selected
|
|
1304
|
-
? 'bg-
|
|
1304
|
+
? 'bg-[var(--ui-primary)] text-white'
|
|
1305
1305
|
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700');
|
|
1306
1306
|
/**
|
|
1307
1307
|
* SOLID
|
|
@@ -1325,29 +1325,22 @@ const Textarea = forwardRef((props, ref) => {
|
|
|
1325
1325
|
* Icons for each toast type
|
|
1326
1326
|
*/
|
|
1327
1327
|
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-
|
|
1328
|
+
success: jsx(SvgCircleCheck, { className: "size-5 text-[var(--ui-success)]" }),
|
|
1329
|
+
error: jsx(SvgCircleAlert, { className: "size-5 text-[var(--ui-danger)]" }),
|
|
1330
|
+
info: jsx(SvgInfo, { className: "size-5 text-[var(--ui-info)]" }),
|
|
1331
|
+
warning: jsx(SvgTriangleAlert, { className: "size-5 text-[var(--ui-warning)]" }),
|
|
1332
1332
|
};
|
|
1333
|
-
/**
|
|
1334
|
-
* Subtle icon + text color adjustments
|
|
1335
|
-
*/
|
|
1336
1333
|
const textColorMap = {
|
|
1337
|
-
success: 'text-
|
|
1338
|
-
error: 'text-
|
|
1339
|
-
info: 'text-
|
|
1340
|
-
warning: 'text-
|
|
1334
|
+
success: 'text-[var(--ui-success-text)]',
|
|
1335
|
+
error: 'text-[var(--ui-danger-text)]',
|
|
1336
|
+
info: 'text-[var(--ui-info-text)]',
|
|
1337
|
+
warning: 'text-[var(--ui-warning-text)]',
|
|
1341
1338
|
};
|
|
1342
|
-
/**
|
|
1343
|
-
* Pleasant colored *top border only*
|
|
1344
|
-
* No background color — soft neutral surface
|
|
1345
|
-
*/
|
|
1346
1339
|
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-
|
|
1340
|
+
success: 'border-t-4 border-[var(--ui-success)]',
|
|
1341
|
+
error: 'border-t-4 border-[var(--ui-danger)]',
|
|
1342
|
+
info: 'border-t-4 border-[var(--ui-info)]',
|
|
1343
|
+
warning: 'border-t-4 border-[var(--ui-warning)]',
|
|
1351
1344
|
};
|
|
1352
1345
|
const Toast = ({ message, type, onClose, className, id, isTop = true, }) => {
|
|
1353
1346
|
const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95';
|