From f0c710f8c25e508e4d7a2eb61e9e83c3442f8d84 Mon Sep 17 00:00:00 2001 From: natxocc Date: Thu, 2 Apr 2026 19:31:39 +0200 Subject: [PATCH] Updateing Docs --- css/index.js | 2 +- css/sigpro.css | 7148 ++++++++++++++++- css/sigpro.min.css | 2 + dist/sigpro-ui.js | 542 +- dist/sigpro-ui.min.js | 8 +- docs/components/accordion.md | 385 +- docs/components/alert.md | 271 +- docs/components/autocomplete.md | 240 +- docs/components/badge.md | 272 +- docs/components/button.md | 154 +- docs/components/checkbox.md | 255 +- docs/components/colorpicker.md | 217 +- docs/components/datepicker.md | 187 +- docs/components/drawer.md | 476 +- docs/components/dropdown.md | 261 +- docs/components/indicator.md | 12 +- docs/components/input.md | 167 +- docs/components/rating.md | 3 +- docs/components/select.md | 47 +- docs/components_old/accordion.md | 730 ++ docs/components_old/alert.md | 521 ++ docs/components_old/autocomplete.md | 376 + docs/components_old/badge.md | 537 ++ .../button copy.md | 0 docs/components_old/button.md | 168 + docs/components_old/checkbox.md | 479 ++ docs/components_old/colorpicker.md | 382 + docs/components_old/datepicker.md | 339 + docs/components_old/drawer.md | 918 +++ docs/components_old/dropdown.md | 489 ++ docs/components_old/fab.md | 688 ++ docs/components_old/fieldset.md | 549 ++ docs/components_old/indicator.md | 556 ++ docs/components_old/input.md | 348 + docs/components_old/list.md | 601 ++ docs/components_old/loading.md | 597 ++ docs/components_old/menu.md | 760 ++ docs/components_old/modal.md | 667 ++ docs/components_old/navbar.md | 551 ++ docs/components_old/radio.md | 740 ++ docs/components_old/rating.md | 536 ++ docs/components_old/select.md | 366 + docs/components_old/stack.md | 519 ++ docs/components_old/stat.md | 644 ++ docs/components_old/swap.md | 500 ++ docs/components_old/table.md | 716 ++ docs/components_old/tabs.md | 677 ++ docs/components_old/timeline.md | 553 ++ docs/components_old/toast.md | 630 ++ docs/components_old/tooltip.md | 554 ++ docs/index.html | 9 +- docs/install.md | 80 +- docs/quick.md | 11 +- docs/sigpro-ui.min.js | 8 +- docs/sigpro.css | 2 + package.json | 7 +- src/components/Accordion.js | 45 +- src/components/Alert.js | 76 +- src/components/Autocomplete.js | 25 +- src/components/Badge.js | 23 +- src/components/Button.js | 57 +- src/components/Checkbox.js | 21 +- src/components/Colorpicker.js | 21 +- src/components/Datepicker.js | 40 +- src/components/Drawer.js | 50 +- src/components/Dropdown.js | 18 +- src/components/Fab.js | 23 +- src/components/Fieldset.js | 25 +- src/components/Fileinput.js | 31 +- src/components/Indicator.js | 20 +- src/components/Input.js | 141 +- src/components/Label.js | 28 + src/components/List.js | 28 +- src/components/Menu.js | 19 +- src/components/Modal.js | 26 +- src/components/Navbar.js | 18 +- src/components/Radio.js | 22 +- src/components/Range.js | 20 +- src/components/Rating.js | 17 +- src/components/Select.js | 21 +- src/components/Stack.js | 17 +- src/components/Stat.js | 26 +- src/components/Swap.js | 24 +- src/components/Table.js | 47 +- src/components/Tabs.js | 61 +- src/components/Timeline.js | 42 +- src/components/Toast.js | 25 +- src/components/Tooltip.js | 19 +- src/components/index.js | 3 + src/components_OLD/Accordion.js | 24 + src/components_OLD/Alert.js | 50 + src/{ui => components_OLD}/Autocomplete.js | 21 +- src/components_OLD/Badge.js | 6 + src/components_OLD/Button.js | 37 + src/{ui => components_OLD}/Checkbox.js | 15 +- src/{ui => components_OLD}/Colorpicker.js | 17 +- src/{ui => components_OLD}/Datepicker.js | 34 +- src/components_OLD/Drawer.js | 18 + src/{ui => components_OLD}/Dropdown.js | 14 +- src/{ui => components_OLD}/Fab.js | 19 +- src/components_OLD/Fieldset.js | 19 + src/{ui => components_OLD}/Fileinput.js | 21 +- src/components_OLD/Indicator.js | 8 + src/{ui => components_OLD}/Input.js | 53 +- src/{ui => components_OLD}/List.js | 16 +- src/{ui => components_OLD}/Loading.js | 0 src/{ui => components_OLD}/Menu.js | 17 +- src/{ui => components_OLD}/Modal.js | 24 +- src/components_OLD/Navbar.js | 6 + src/components_OLD/Radio.js | 25 + src/{ui => components_OLD}/Range.js | 17 +- src/{ui => components_OLD}/Rating.js | 14 +- src/{ui => components_OLD}/Select.js | 17 +- src/components_OLD/Stack.js | 6 + src/components_OLD/Stat.js | 11 + src/components_OLD/Swap.js | 13 + src/{ui => components_OLD}/Table.js | 15 +- src/components_OLD/Tabs.js | 46 + src/{ui => components_OLD}/Timeline.js | 40 +- src/{ui => components_OLD}/Toast.js | 14 +- src/components_OLD/Tooltip.js | 6 + src/{ui => components_OLD}/index.js | 0 src/core/icons.js | 17 - src/core/utils.js | 51 +- src/ui/Accordion.js | 27 - src/ui/Alert.js | 55 - src/ui/Badge.js | 16 - src/ui/Button.js | 28 - src/ui/Drawer.js | 28 - src/ui/Fieldset.js | 29 - src/ui/Indicator.js | 19 - src/ui/Navbar.js | 16 - src/ui/Radio.js | 34 - src/ui/Stack.js | 16 - src/ui/Stat.js | 21 - src/ui/Swap.js | 23 - src/ui/Tabs.js | 69 - src/ui/Tooltip.js | 19 - 138 files changed, 25729 insertions(+), 3918 deletions(-) create mode 100644 css/sigpro.min.css create mode 100644 docs/components_old/accordion.md create mode 100644 docs/components_old/alert.md create mode 100644 docs/components_old/autocomplete.md create mode 100644 docs/components_old/badge.md rename docs/{components => components_old}/button copy.md (100%) create mode 100644 docs/components_old/button.md create mode 100644 docs/components_old/checkbox.md create mode 100644 docs/components_old/colorpicker.md create mode 100644 docs/components_old/datepicker.md create mode 100644 docs/components_old/drawer.md create mode 100644 docs/components_old/dropdown.md create mode 100644 docs/components_old/fab.md create mode 100644 docs/components_old/fieldset.md create mode 100644 docs/components_old/indicator.md create mode 100644 docs/components_old/input.md create mode 100644 docs/components_old/list.md create mode 100644 docs/components_old/loading.md create mode 100644 docs/components_old/menu.md create mode 100644 docs/components_old/modal.md create mode 100644 docs/components_old/navbar.md create mode 100644 docs/components_old/radio.md create mode 100644 docs/components_old/rating.md create mode 100644 docs/components_old/select.md create mode 100644 docs/components_old/stack.md create mode 100644 docs/components_old/stat.md create mode 100644 docs/components_old/swap.md create mode 100644 docs/components_old/table.md create mode 100644 docs/components_old/tabs.md create mode 100644 docs/components_old/timeline.md create mode 100644 docs/components_old/toast.md create mode 100644 docs/components_old/tooltip.md create mode 100644 docs/sigpro.css create mode 100644 src/components/Label.js create mode 100644 src/components_OLD/Accordion.js create mode 100644 src/components_OLD/Alert.js rename src/{ui => components_OLD}/Autocomplete.js (83%) create mode 100644 src/components_OLD/Badge.js create mode 100644 src/components_OLD/Button.js rename src/{ui => components_OLD}/Checkbox.js (54%) rename src/{ui => components_OLD}/Colorpicker.js (87%) rename src/{ui => components_OLD}/Datepicker.js (92%) create mode 100644 src/components_OLD/Drawer.js rename src/{ui => components_OLD}/Dropdown.js (79%) rename src/{ui => components_OLD}/Fab.js (62%) create mode 100644 src/components_OLD/Fieldset.js rename src/{ui => components_OLD}/Fileinput.js (86%) create mode 100644 src/components_OLD/Indicator.js rename src/{ui => components_OLD}/Input.js (60%) rename src/{ui => components_OLD}/List.js (60%) rename src/{ui => components_OLD}/Loading.js (100%) rename src/{ui => components_OLD}/Menu.js (63%) rename src/{ui => components_OLD}/Modal.js (70%) create mode 100644 src/components_OLD/Navbar.js create mode 100644 src/components_OLD/Radio.js rename src/{ui => components_OLD}/Range.js (58%) rename src/{ui => components_OLD}/Rating.js (64%) rename src/{ui => components_OLD}/Select.js (61%) create mode 100644 src/components_OLD/Stack.js create mode 100644 src/components_OLD/Stat.js create mode 100644 src/components_OLD/Swap.js rename src/{ui => components_OLD}/Table.js (86%) create mode 100644 src/components_OLD/Tabs.js rename src/{ui => components_OLD}/Timeline.js (60%) rename src/{ui => components_OLD}/Toast.js (87%) create mode 100644 src/components_OLD/Tooltip.js rename src/{ui => components_OLD}/index.js (100%) delete mode 100644 src/core/icons.js delete mode 100644 src/ui/Accordion.js delete mode 100644 src/ui/Alert.js delete mode 100644 src/ui/Badge.js delete mode 100644 src/ui/Button.js delete mode 100644 src/ui/Drawer.js delete mode 100644 src/ui/Fieldset.js delete mode 100644 src/ui/Indicator.js delete mode 100644 src/ui/Navbar.js delete mode 100644 src/ui/Radio.js delete mode 100644 src/ui/Stack.js delete mode 100644 src/ui/Stat.js delete mode 100644 src/ui/Swap.js delete mode 100644 src/ui/Tabs.js delete mode 100644 src/ui/Tooltip.js diff --git a/css/index.js b/css/index.js index d929db7..a5b113a 100644 --- a/css/index.js +++ b/css/index.js @@ -1,3 +1,3 @@ // css/index.js -import './daisy.css'; +import './sigpro.min.css'; export default { version: '1.0.0' }; \ No newline at end of file diff --git a/css/sigpro.css b/css/sigpro.css index ccce702..4b37f3d 100644 --- a/css/sigpro.css +++ b/css/sigpro.css @@ -1,2 +1,7148 @@ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ -@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-500:oklch(55.1% .027 264.364);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-3xl:48rem;--container-5xl:64rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-widest:.1em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-3xl:1.5rem;--drop-shadow-2xl:0 25px 25px #00000026;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-sm:8px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}@media (prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}}:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root{--fx-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");scrollbar-color:currentColor #0000}@supports (color:color-mix(in lab, red, red)){:root{scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) #0000}}@property --radialprogress{syntax:"";inherits:true;initial-value:0%}:root:not(span){overflow:var(--page-overflow)}:root{background:var(--page-scroll-bg,var(--root-bg));--page-scroll-bg-on:linear-gradient(var(--root-bg,#0000), var(--root-bg,#0000)) var(--root-bg,#0000)}@supports (color:color-mix(in lab, red, red)){:root{--page-scroll-bg-on:linear-gradient(var(--root-bg,#0000), var(--root-bg,#0000)) color-mix(in srgb, var(--root-bg,#0000), oklch(0% 0 0) calc(var(--page-has-backdrop,0) * 40%))}}:root{--page-scroll-transition-on:background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter,unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter,unset) ; else: unset)}@keyframes set-page-has-scroll{0%,to{--page-has-scroll:1}}:root,[data-theme]{background:var(--page-scroll-bg,var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg:var(--color-base-100)}}@layer components;@layer utilities{@layer daisyui.l1.l2.l3{.modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.modal::backdrop{display:none}:where(.drawer-side){overflow:hidden}.drawer-side{pointer-events:none;visibility:hidden;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;inset-inline-start:0;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.drawer-side>*{grid-row-start:1;grid-column-start:1}.drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%}[dir=rtl] :is(.drawer-side>:not(.drawer-overlay)){translate:100%}.fab{pointer-events:none;z-index:999;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));white-space:nowrap;inset-inline-end:1rem;flex-direction:column-reverse;align-items:flex-end;gap:.5rem;display:flex;position:fixed;bottom:1rem}.fab>*{pointer-events:auto;align-items:center;gap:.5rem;display:flex}.fab>:hover,.fab>:has(:focus-visible){z-index:1}.fab>[tabindex]:first-child{transition-property:opacity,visibility,rotate;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:grid;position:relative}.fab .fab-close,.fab .fab-main-action{inset-inline-end:0;position:absolute;bottom:0}:is(.fab:focus-within:has(.fab-close),.fab:focus-within:has(.fab-main-action))>[tabindex]{opacity:0;rotate:90deg}.fab:focus-within>[tabindex]:first-child{pointer-events:none}.fab:focus-within>:nth-child(n+2){visibility:visible;--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:1}.fab>:nth-child(n+2){visibility:hidden;--tw-scale-x:80%;--tw-scale-y:80%;--tw-scale-z:80%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:0;transition-property:opacity,scale,visibility;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.fab>:nth-child(n+2).fab-main-action,.fab>:nth-child(n+2).fab-close{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.fab>:nth-child(3){transition-delay:30ms}.fab>:nth-child(4){transition-delay:60ms}.fab>:nth-child(5){transition-delay:90ms}.fab>:nth-child(6){transition-delay:.12s}.drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:currentColor oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4))}@supports (color:color-mix(in lab, red, red)){:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4))}}:where(:root:has(.drawer-toggle:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll;animation-timeline:scroll()}.tooltip{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);display:inline-block;position:relative}.tooltip>.tooltip-content,.tooltip[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}.tooltip:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;-webkit-mask-position:-1px 0;mask-position:-1px 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:var(--mask-tooltip);-webkit-mask-image:var(--mask-tooltip);mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.tooltip>.tooltip-content,.tooltip[data-tip]:before,.tooltip:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))>.tooltip-content,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible)):after{opacity:1;--tt-pos:0rem}@media (prefers-reduced-motion:no-preference){:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))>.tooltip-content,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible)):after{transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}.tab{cursor:pointer;appearance:none;text-align:center;webkit-user-select:none;-webkit-user-select:none;user-select:none;flex-wrap:wrap;justify-content:center;align-items:center;display:inline-flex;position:relative}@media (hover:hover){.tab:hover{color:var(--color-base-content)}}.tab{--tab-p:.75rem;--tab-bg:var(--color-base-100);--tab-border-color:var(--color-base-300);--tab-radius-ss:0;--tab-radius-se:0;--tab-radius-es:0;--tab-radius-ee:0;--tab-order:0;--tab-radius-min:calc(.75rem - var(--border));--tab-radius-limit:min(var(--radius-field), var(--tab-radius-min));--tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px);order:var(--tab-order);height:var(--tab-height);padding-inline:var(--tab-p);border-color:#0000;font-size:.875rem}.tab:is(input[type=radio]){min-width:fit-content}.tab:is(input[type=radio]):after{--tw-content:attr(aria-label);content:var(--tw-content)}.tab:is(label){position:relative}.tab:is(label) input{cursor:pointer;appearance:none;opacity:0;position:absolute;inset:0}:is(.tab:checked,.tab:is(label:has(:checked)),.tab:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]))+.tab-content{display:block}.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.tab:not(input):empty{cursor:default;flex-grow:1}.tab:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.tab:focus{outline-offset:2px;outline:2px solid #0000}}.tab:focus-visible,.tab:is(label:has(:checked:focus-visible)){outline-offset:-5px;outline:2px solid}.tab[disabled]{pointer-events:none;opacity:.4}.tab\!{cursor:pointer!important;appearance:none!important;text-align:center!important;webkit-user-select:none!important;-webkit-user-select:none!important;user-select:none!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;display:inline-flex!important;position:relative!important}@media (hover:hover){.tab\!:hover{color:var(--color-base-content)!important}}.tab\!{--tab-p:.75rem!important;--tab-bg:var(--color-base-100)!important;--tab-border-color:var(--color-base-300)!important;--tab-radius-ss:0!important;--tab-radius-se:0!important;--tab-radius-es:0!important;--tab-radius-ee:0!important;--tab-order:0!important;--tab-radius-min:calc(.75rem - var(--border))!important;--tab-radius-limit:min(var(--radius-field), var(--tab-radius-min))!important;--tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px)!important;order:var(--tab-order)!important;height:var(--tab-height)!important;padding-inline:var(--tab-p)!important;border-color:#0000!important;font-size:.875rem!important}.tab\!:is(input[type=radio]){min-width:fit-content!important}.tab\!:is(input[type=radio]):after{--tw-content:attr(aria-label)!important;content:var(--tw-content)!important}.tab\!:is(label){position:relative!important}.tab\!:is(label) input{cursor:pointer!important;appearance:none!important;opacity:0!important;position:absolute!important;inset:0!important}:is(.tab\!:checked,.tab\!:is(label:has(:checked)),.tab\!:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]))+.tab-content{display:block!important}.tab\!:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:var(--color-base-content)!important}@supports (color:color-mix(in lab, red, red)){.tab\!:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:color-mix(in oklab, var(--color-base-content) 50%, transparent)!important}}.tab\!:not(input):empty{cursor:default!important;flex-grow:1!important}.tab\!:focus{--tw-outline-style:none!important;outline-style:none!important}@media (forced-colors:active){.tab\!:focus{outline-offset:2px!important;outline:2px solid #0000!important}}.tab\!:focus-visible,.tab\!:is(label:has(:checked:focus-visible)){outline-offset:-5px!important;outline:2px solid!important}.tab\![disabled]{pointer-events:none!important;opacity:.4!important}.menu{--menu-active-fg:var(--color-neutral-content);--menu-active-bg:var(--color-neutral);flex-flow:column wrap;width:fit-content;padding:.5rem;font-size:.875rem;display:flex}.menu :where(li ul){white-space:nowrap;margin-inline-start:1rem;padding-inline-start:.5rem;position:relative}.menu :where(li ul):before{background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";inset-inline-start:0;position:absolute;top:.75rem;bottom:.75rem}.menu :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}.menu :where(li:not(.menu-title)>:not(ul,details,.menu-title,.btn)),.menu :where(li:not(.menu-title)>details>summary:not(.menu-title)){border-radius:var(--radius-field);text-align:start;text-wrap:balance;-webkit-user-select:none;user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:grid}.menu :where(li>details>summary){--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li>details>summary){outline-offset:2px;outline:2px solid #0000}}.menu :where(li>details>summary)::-webkit-details-marker{display:none}:is(.menu :where(li>details>summary),.menu :where(li>.menu-dropdown-toggle)):after{content:"";transform-origin:50%;pointer-events:none;justify-self:flex-end;width:.375rem;height:.375rem;transition-property:rotate,translate;transition-duration:.2s;display:block;translate:0 -1px;rotate:-135deg;box-shadow:inset 2px 2px}.menu details{interpolate-size:allow-keywords;overflow:hidden}.menu details::details-content{block-size:0}@media (prefers-reduced-motion:no-preference){.menu details::details-content{transition-behavior:allow-discrete;transition-property:block-size,content-visibility;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}}.menu details[open]::details-content{block-size:auto}.menu :where(li>details[open]>summary):after,.menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after{translate:0 1px;rotate:45deg}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{color:var(--color-base-content);--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{outline-offset:2px;outline:2px solid #0000}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){outline-offset:2px;outline:2px solid #0000}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){box-shadow:inset 0 1px oklch(0% 0 0/.01),inset 0 -1px oklch(100% 0 0/.01)}.menu :where(li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}.menu :where(li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative}.menu :where(li) .badge{justify-self:flex-end}.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{outline-offset:2px;outline:2px solid #0000}}.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise)}:is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active):not(:is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active):active){box-shadow:0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg)}.menu :where(li).menu-disabled{pointer-events:none;color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li).menu-disabled{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.menu .dropdown:focus-within .menu-dropdown-toggle:after{translate:0 1px;rotate:45deg}.menu .dropdown-content{margin-top:.5rem;padding:.5rem}.menu .dropdown-content:before{display:none}.floating-label{display:block;position:relative}.floating-label input{display:block}.floating-label input::placeholder,.floating-label textarea::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.floating-label>span{z-index:1;background-color:var(--color-base-100);opacity:0;inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * 10 / 2);pointer-events:none;border-radius:2px;padding-inline:.25rem;font-size:.875rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.floating-label:has(:disabled,[disabled])>span{opacity:0}.floating-label:has(.input-xs,.select-xs,.textarea-xs) span{top:calc(var(--size-field,.25rem) * 6 / 2);font-size:.6875rem}.floating-label:has(.input-sm,.select-sm,.textarea-sm) span{top:calc(var(--size-field,.25rem) * 8 / 2);font-size:.75rem}.floating-label:has(.input-md,.select-md,.textarea-md) span{top:calc(var(--size-field,.25rem) * 10 / 2);font-size:.875rem}.floating-label:has(.input-lg,.select-lg,.textarea-lg) span{top:calc(var(--size-field,.25rem) * 12 / 2);font-size:1.125rem}.floating-label:has(.input-xl,.select-xl,.textarea-xl) span{top:calc(var(--size-field,.25rem) * 14 / 2);font-size:1.375rem}.dropdown{position-area:var(--anchor-v,bottom) var(--anchor-h,span-right);display:inline-block;position:relative}.dropdown>:not(:has(~[class*=dropdown-content])):focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.dropdown>:not(:has(~[class*=dropdown-content])):focus{outline-offset:2px;outline:2px solid #0000}}.dropdown .dropdown-content{position:absolute}.dropdown.dropdown-close .dropdown-content,.dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content,.dropdown.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content{transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover],.dropdown .dropdown-content{z-index:999}@media (prefers-reduced-motion:no-preference){.dropdown[popover],.dropdown .dropdown-content{transition-behavior:allow-discrete;transition-property:opacity,scale,display;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation:.2s dropdown}}@starting-style{.dropdown[popover],.dropdown .dropdown-content{opacity:0;scale:.95}}:is(.dropdown:not(.dropdown-close).dropdown-open,.dropdown:not(.dropdown-close):not(.dropdown-hover):focus,.dropdown:not(.dropdown-close):focus-within)>[tabindex]:first-child{pointer-events:none}:is(.dropdown:not(.dropdown-close).dropdown-open,.dropdown:not(.dropdown-close):not(.dropdown-hover):focus,.dropdown:not(.dropdown-close):focus-within) .dropdown-content,.dropdown:not(.dropdown-close).dropdown-hover:hover .dropdown-content{opacity:1;scale:1}.dropdown:is(details) summary::-webkit-details-marker{display:none}.dropdown:where([popover]){background:0 0}.dropdown[popover]{color:inherit;position:fixed}@supports not (position-area:bottom){.dropdown[popover]{margin:auto}.dropdown[popover].dropdown-close{transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover].dropdown-open:not(:popover-open){transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover]::backdrop{background-color:oklab(0% none none/.3)}}:is(.dropdown[popover].dropdown-close,.dropdown[popover]:not(.dropdown-open,:popover-open)){transform-origin:top;opacity:0;display:none;scale:.95}:where(.btn){width:unset}.btn{cursor:pointer;text-align:center;vertical-align:middle;outline-offset:2px;webkit-user-select:none;-webkit-user-select:none;user-select:none;padding-inline:var(--btn-p);color:var(--btn-fg);--tw-prose-links:var(--btn-fg);height:var(--size);font-size:var(--fontsize,.875rem);outline-color:var(--btn-color,var(--color-base-content));background-color:var(--btn-bg);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--btn-noise);border-width:var(--border);border-style:solid;border-color:var(--btn-border);text-shadow:0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));touch-action:manipulation;box-shadow:0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);--size:calc(var(--size-field,.25rem) * 10);--btn-bg:var(--btn-color,var(--color-base-200));--btn-fg:var(--color-base-content);--btn-p:1rem;--btn-border:var(--btn-bg);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.375rem;font-weight:600;transition-property:color,background-color,border-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex}@supports (color:color-mix(in lab, red, red)){.btn{--btn-border:color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%))}}.btn{--btn-shadow:0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg)}@supports (color:color-mix(in lab, red, red)){.btn{--btn-shadow:0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000)}}.btn{--btn-noise:var(--fx-noise)}@media (hover:hover){.btn:hover{--btn-bg:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn:hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}}.btn:focus-visible,.btn:has(:focus-visible){isolation:isolate;outline-width:2px;outline-style:solid}.btn:active:not(.btn-active){--btn-bg:var(--btn-color,var(--color-base-200));translate:0 .5px}@supports (color:color-mix(in lab, red, red)){.btn:active:not(.btn-active){--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 5%)}}.btn:active:not(.btn-active){--btn-border:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn:active:not(.btn-active){--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}.btn:active:not(.btn-active){--btn-shadow:0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)}.btn:is(input[type=checkbox],input[type=radio]){appearance:none}.btn:is(input[type=checkbox],input[type=radio])[aria-label]:after{--tw-content:attr(aria-label);content:var(--tw-content)}.btn:where(input:checked:not(.filter .btn)){--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content);isolation:isolate}.loading{pointer-events:none;aspect-ratio:1;vertical-align:middle;width:calc(var(--size-selector,.25rem) * 6);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.collapse{border-radius:var(--radius-box,1rem);isolation:isolate;grid-template-rows:max-content 0fr;grid-template-columns:minmax(0,1fr);width:100%;display:grid;position:relative;overflow:hidden}@media (prefers-reduced-motion:no-preference){.collapse{transition:grid-template-rows .2s}}.collapse>input:is([type=checkbox],[type=radio]){appearance:none;opacity:0;z-index:1;grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)),.collapse:not(.collapse-close):has(>input:is([type=checkbox],[type=radio]):checked){grid-template-rows:max-content 1fr}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){content-visibility:visible;min-height:fit-content}@supports not (content-visibility:visible){.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){visibility:visible}}.collapse:focus-visible,.collapse:has(>input:is([type=checkbox],[type=radio]):focus-visible),.collapse:has(summary:focus-visible){outline-color:var(--color-base-content);outline-offset:2px;outline-width:2px;outline-style:solid}.collapse:not(.collapse-close)>input[type=checkbox],.collapse:not(.collapse-close)>input[type=radio]:not(:checked),.collapse:not(.collapse-close)>.collapse-title{cursor:pointer}:is(.collapse[tabindex]:focus:not(.collapse-close,.collapse[open]),.collapse[tabindex]:focus-within:not(.collapse-close,.collapse[open]))>.collapse-title{cursor:unset}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content),.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){padding-bottom:1rem}.collapse:is(details){width:100%}@media (prefers-reduced-motion:no-preference){.collapse:is(details)::details-content{transition:content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s;interpolate-size:allow-keywords;height:0}.collapse:is(details):where([open])::details-content{height:auto}}.collapse:is(details) summary{display:block;position:relative}.collapse:is(details) summary::-webkit-details-marker{display:none}.collapse:is(details)>.collapse-content{content-visibility:visible}.collapse:is(details) summary{outline:none}.collapse-content{content-visibility:hidden;min-height:0;cursor:unset;grid-row-start:2;grid-column-start:1;padding-left:1rem;padding-right:1rem}@supports not (content-visibility:hidden){.collapse-content{visibility:hidden}}@media (prefers-reduced-motion:no-preference){.collapse-content{transition:content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out}}.list{flex-direction:column;font-size:.875rem;display:flex}.list .list-row{--list-grid-cols:minmax(0, auto) 1fr;border-radius:var(--radius-box);word-break:break-word;grid-auto-flow:column;grid-template-columns:var(--list-grid-cols);gap:1rem;padding:1rem;display:grid;position:relative}:is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after{content:"";border-bottom:var(--border) solid;inset-inline:var(--radius-box);border-color:var(--color-base-content);position:absolute;bottom:0}@supports (color:color-mix(in lab, red, red)){:is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after{border-color:color-mix(in oklab, var(--color-base-content) 5%, transparent)}}.toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;display:inline-grid;position:relative;box-shadow:inset 0 1px}@supports (color:color-mix(in lab, red, red)){.toggle{box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset}}.toggle{--input-color:var(--color-base-content);transition:color .3s,grid-template-columns .2s}@supports (color:color-mix(in lab, red, red)){.toggle{--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000)}}.toggle{--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size)}.toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s}.toggle>:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.toggle>:focus{outline-offset:2px;outline:2px solid #0000}}.toggle>:nth-child(2){color:var(--color-base-100);rotate:0deg}.toggle>:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}.toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor;background-color:currentColor;grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@supports (color:color-mix(in lab, red, red)){.toggle:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000)}}.toggle:before{background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise)}@media (forced-colors:active){.toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.toggle:before{outline-offset:-1rem;outline:.25rem solid}}.toggle:focus-visible,.toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr}:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{background-color:currentColor}@starting-style{:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{opacity:0}}.toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.toggle:disabled{cursor:not-allowed;opacity:.3}.toggle:disabled:before{border:var(--border) solid currentColor;background-color:#0000}.input{cursor:text;border:var(--border) solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem), .875rem);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}@supports (color:color-mix(in lab, red, red)){.input{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.input{--size:calc(var(--size-field,.25rem) * 10);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.input:where(input){display:inline-flex}.input :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex}.input :where(input):focus,.input :where(input):focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.input :where(input):focus,.input :where(input):focus-within{outline-offset:2px;outline:2px solid #0000}}.input :where(input[type=url]),.input :where(input[type=email]){direction:ltr}.input :where(input[type=date]){display:inline-flex}.input:focus,.input:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.input:focus,.input:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.input:focus,.input:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.input:focus,.input:focus-within{--font-size:1rem}}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{box-shadow:none}.input:has(>input[disabled])>input[disabled]{cursor:not-allowed}.input::-webkit-date-and-time-value{text-align:inherit}.input[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}.input:has(>input[type=date]) :where(input[type=date]){webkit-appearance:none;appearance:none;display:inline-flex}.input:has(>input[type=date]) input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}.indicator{width:max-content;display:inline-flex;position:relative}.indicator :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%) var(--indicator-y,-50%);position:absolute}.table{border-collapse:separate;--tw-border-spacing-x:calc(.25rem * 0);--tw-border-spacing-y:calc(.25rem * 0);width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(.table tr.row-hover,.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.table :where(thead,tfoot){white-space:nowrap;color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(thead,tfoot){color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.table :where(thead,tfoot){font-size:.875rem;font-weight:600}.table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}.table :where(.table-pin-rows thead tr){z-index:1;background-color:var(--color-base-100);position:sticky;top:0}.table :where(.table-pin-rows tfoot tr){z-index:1;background-color:var(--color-base-100);position:sticky;bottom:0}.table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}.steps{counter-reset:step;grid-auto-columns:1fr;grid-auto-flow:column;display:inline-grid;overflow:auto hidden}.steps .step{text-align:center;--step-bg:var(--color-base-300);--step-fg:var(--color-base-content);grid-template-rows:40px 1fr;grid-template-columns:auto;place-items:center;min-width:4rem;display:grid}.steps .step:before{width:100%;height:.5rem;color:var(--step-bg);background-color:var(--step-bg);content:"";border:1px solid;grid-row-start:1;grid-column-start:1;margin-inline-start:-100%;top:0}.steps .step>.step-icon,.steps .step:not(:has(.step-icon)):after{--tw-content:counter(step);content:var(--tw-content);counter-increment:step;z-index:1;color:var(--step-fg);background-color:var(--step-bg);border:1px solid var(--step-bg);border-radius:3.40282e38px;grid-row-start:1;grid-column-start:1;place-self:center;place-items:center;width:2rem;height:2rem;display:grid;position:relative}.steps .step:first-child:before{--tw-content:none;content:var(--tw-content)}.steps .step[data-content]:after{--tw-content:attr(data-content);content:var(--tw-content)}.range{appearance:none;webkit-appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem) * 6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:currentColor}@supports (color:color-mix(in lab, red, red)){.range{--range-bg:color-mix(in oklab, currentColor 10%, #0000)}}.range{cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] .range{--range-dir:-1}.range:focus{outline:none}.range:focus-visible{outline-offset:2px;outline:2px solid}.range::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size) * .5)}@media (forced-colors:active){.range::-webkit-slider-runnable-track{border:1px solid}.range::-moz-range-track{border:1px solid}}.range::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p) solid;appearance:none;webkit-appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}@supports (color:color-mix(in lab, red, red)){.range::-webkit-slider-thumb{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill))}}.range::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size) * .5)}.range::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p) solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));background-color:currentColor;position:relative;top:50%}@supports (color:color-mix(in lab, red, red)){.range::-moz-range-thumb{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill))}}.range:disabled{cursor:not-allowed;opacity:.3}.select{border:var(--border) solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.select{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.select{border-color:var(--input-color);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.select{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.select{--size:calc(var(--size-field,.25rem) * 10)}[dir=rtl] .select{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}[dir=rtl] .select::picker(select){translate:.5rem}[dir=rtl] .select select::picker(select){translate:.5rem}.select[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}.select select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border) * 2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem}.select select:focus,.select select:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.select select:focus,.select select:focus-within{outline-offset:2px;outline:2px solid #0000}}.select select:not(:last-child){background-image:none;margin-inline-end:-1.375rem}.select:focus,.select:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.select:focus,.select:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.select:focus,.select:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select)::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select)::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.select:has(>select[disabled])>select[disabled]{cursor:not-allowed}@supports (appearance:base-select){.select,.select select{appearance:base-select}:is(.select,.select select)::picker(select){appearance:base-select}}:is(.select,.select select)::picker(select){color:inherit;border:var(--border) solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}:is(.select,.select select)::picker-icon{display:none}:is(.select,.select select) optgroup{padding-top:.5em}:is(.select,.select select) optgroup option:first-child{margin-top:.5em}:is(.select,.select select) option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{outline-offset:2px;outline:2px solid #0000}}:is(.select,.select select) option:not(:disabled):active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth) * 3px) -2px var(--color-neutral)}.timeline{display:flex;position:relative}.timeline>li{grid-template-rows:var(--timeline-row-start,minmax(0, 1fr)) auto var(--timeline-row-end,minmax(0, 1fr));grid-template-columns:var(--timeline-col-start,minmax(0, 1fr)) auto var(--timeline-col-end,minmax(0, 1fr));flex-shrink:0;align-items:center;display:grid;position:relative}.timeline>li>hr{border:none;width:100%}.timeline>li>hr:first-child{grid-row-start:2;grid-column-start:1}.timeline>li>hr:last-child{grid-area:2/3/auto/none}@media print{.timeline>li>hr{border:.1px solid var(--color-base-300)}}.timeline :where(hr){background-color:var(--color-base-300);height:.25rem}.timeline:has(.timeline-middle hr):first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline:has(.timeline-middle hr):last-child,.timeline:not(:has(.timeline-middle)) :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}.timeline:not(:has(.timeline-middle)) :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.swap{cursor:pointer;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;place-content:center;display:inline-grid;position:relative}.swap input{appearance:none;border:none}.swap>*{grid-row-start:1;grid-column-start:1}@media (prefers-reduced-motion:no-preference){.swap>*{transition-property:transform,rotate,opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}}.swap .swap-on,.swap .swap-indeterminate,.swap input:indeterminate~.swap-on,.swap input:is(:checked,:indeterminate)~.swap-off{opacity:0}.swap input:checked~.swap-on,.swap input:indeterminate~.swap-indeterminate{opacity:1;backface-visibility:visible}.collapse-title{grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out;position:relative}.avatar{vertical-align:middle;display:inline-flex;position:relative}.avatar>div{aspect-ratio:1;display:block;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.checkbox{border:var(--border) solid var(--input-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.checkbox{border:var(--border) solid var(--input-color,color-mix(in oklab, var(--color-base-content) 20%, #0000))}}.checkbox{cursor:pointer;appearance:none;border-radius:var(--radius-selector);vertical-align:middle;color:var(--color-base-content);box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);flex-shrink:0;padding:.25rem;transition:background-color .2s,box-shadow .2s;display:inline-block;position:relative}.checkbox:before{--tw-content:"";content:var(--tw-content);opacity:0;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);width:100%;height:100%;box-shadow:0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;background-color:currentColor;font-size:1rem;line-height:.75;transition:clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;display:block;rotate:45deg}.checkbox:focus-visible{outline:2px solid var(--input-color,currentColor);outline-offset:2px}.checkbox:checked,.checkbox[aria-checked=true]{background-color:var(--input-color,#0000);box-shadow:0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1))}:is(.checkbox:checked,.checkbox[aria-checked=true]):before{clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%);opacity:1}@media (forced-colors:active){:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:0deg}}@media print{:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:0deg}}.checkbox:indeterminate{background-color:var(--input-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.checkbox:indeterminate{background-color:var(--input-color,color-mix(in oklab, var(--color-base-content) 20%, #0000))}}.checkbox:indeterminate:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%);translate:0 -35%;rotate:0deg}.radio{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative}@supports (color:color-mix(in lab, red, red)){.radio{border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000))}}.radio{box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor)}.radio:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}.radio:focus-visible{outline:2px solid}.radio:checked,.radio[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor}@media (prefers-reduced-motion:no-preference){.radio:checked,.radio[aria-checked=true]{animation:.2s ease-out radio}}:is(.radio:checked,.radio[aria-checked=true]):before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){:is(.radio:checked,.radio[aria-checked=true]):before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{:is(.radio:checked,.radio[aria-checked=true]):before{outline-offset:-1rem;outline:.25rem solid}}.rating{vertical-align:middle;display:inline-flex;position:relative}.rating input{appearance:none;border:none}.rating :where(*){background-color:var(--color-base-content);opacity:.2;border-radius:0;width:1.5rem;height:1.5rem}@media (prefers-reduced-motion:no-preference){.rating :where(*){animation:.25s ease-out rating}}.rating :where(*):is(input){cursor:pointer}.rating .rating-hidden{background-color:#0000;width:.5rem}.rating input[type=radio]:checked{background-image:none}.rating :checked,.rating [aria-checked=true],.rating [aria-current=true],.rating :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}.rating :focus-visible{scale:1.1}@media (prefers-reduced-motion:no-preference){.rating :focus-visible{transition:scale .2s ease-out}}.rating :active:focus{animation:none;scale:1.1}.rating\!{vertical-align:middle!important;display:inline-flex!important;position:relative!important}.rating\! input{appearance:none!important;border:none!important}.rating\! :where(*){background-color:var(--color-base-content)!important;opacity:.2!important;border-radius:0!important;width:1.5rem!important;height:1.5rem!important}@media (prefers-reduced-motion:no-preference){.rating\! :where(*){animation:.25s ease-out rating!important}}.rating\! :where(*):is(input){cursor:pointer!important}.rating\! .rating-hidden{background-color:#0000!important;width:.5rem!important}.rating\! input[type=radio]:checked{background-image:none!important}.rating\! :checked,.rating\! [aria-checked=true],.rating\! [aria-current=true],.rating\! :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1!important}.rating\! :focus-visible{scale:1.1!important}@media (prefers-reduced-motion:no-preference){.rating\! :focus-visible{transition:scale .2s ease-out!important}}.rating\! :active:focus{animation:none!important;scale:1.1!important}.navbar{align-items:center;width:100%;min-height:4rem;padding:.5rem;display:flex}.drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.card{border-radius:var(--radius-box);outline-offset:2px;outline:0 solid #0000;flex-direction:column;transition:outline .2s ease-in-out;display:flex;position:relative}.card:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.card:focus{outline-offset:2px;outline:2px solid #0000}}.card:focus-visible{outline-color:currentColor}.card :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}.card :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}.card figure{justify-content:center;align-items:center;display:flex}.card:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;-webkit-user-select:none;user-select:none}.card:has(>:checked){outline:2px solid}.stats{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}.progress{appearance:none;border-radius:var(--radius-box);background-color:currentColor;width:100%;height:.5rem;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.progress{background-color:color-mix(in oklab, currentcolor 20%, transparent)}}.progress{color:var(--color-base-content)}.progress:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%}@media (prefers-reduced-motion:no-preference){.progress:indeterminate{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){.progress:indeterminate::-moz-progress-bar{background-color:#0000}@media (prefers-reduced-motion:no-preference){.progress:indeterminate::-moz-progress-bar{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}.progress::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){.progress::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}.progress::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}.textarea{border:var(--border) solid #0000;appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,.875rem), .875rem);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem}@supports (color:color-mix(in lab, red, red)){.textarea{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.textarea{--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.textarea{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.textarea textarea{appearance:none;background-color:#0000;border:none}.textarea textarea:focus,.textarea textarea:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.textarea textarea:focus,.textarea textarea:focus-within{outline-offset:2px;outline:2px solid #0000}}.textarea:focus,.textarea:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.textarea:focus,.textarea:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.textarea:focus,.textarea:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.textarea:focus,.textarea:focus-within{--font-size:1rem}}}.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]))::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]))::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){box-shadow:none}.textarea:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}.stack{grid-template-rows:3px 4px 1fr 4px 3px;grid-template-columns:3px 4px 1fr 4px 3px;display:inline-grid}.stack>*{width:100%;height:100%}.stack>:nth-child(n+2){opacity:.7;width:100%}.stack>:nth-child(2){z-index:2;opacity:.9}.stack>:first-child{z-index:3;width:100%}.modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.modal-backdrop button{cursor:pointer}.timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.25rem}.timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.25rem}.stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}.modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}.drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}.timeline-middle{grid-row-start:2;grid-column-start:2}.stat-value{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}.stat-desc{white-space:nowrap;color:var(--color-base-content);grid-column-start:1}@supports (color:color-mix(in lab, red, red)){.stat-desc{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.stat-desc{font-size:.75rem}.stat-title{white-space:nowrap;color:var(--color-base-content);grid-column-start:1}@supports (color:color-mix(in lab, red, red)){.stat-title{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.stat-title{font-size:.75rem}.divider{white-space:nowrap;height:1rem;margin:var(--divider-m,1rem 0);--divider-color:var(--color-base-content);flex-direction:row;align-self:stretch;align-items:center;display:flex}@supports (color:color-mix(in lab, red, red)){.divider{--divider-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.divider:before,.divider:after{content:"";background-color:var(--divider-color);flex-grow:1;width:100%;height:.125rem}@media print{.divider:before,.divider:after{border:.5px solid}}.divider:not(:empty){gap:1rem}.filter{flex-wrap:wrap;display:flex}.filter input[type=radio]{width:auto}.filter input{opacity:1;transition:margin .1s,opacity .3s,padding .3s,border-width .1s;overflow:hidden;scale:1}.filter input:not(:last-child){margin-inline-end:.25rem}.filter input.filter-reset{aspect-ratio:1}.filter input.filter-reset:after{--tw-content:"×";content:var(--tw-content)}.filter:not(:has(input:checked:not(.filter-reset))) .filter-reset,.filter:not(:has(input:checked:not(.filter-reset))) input[type=reset],.filter:has(input:checked:not(.filter-reset)) input:not(:checked,.filter-reset,input[type=reset]){opacity:0;border-width:0;width:0;margin-inline:0;padding-inline:0;scale:0}.label{white-space:nowrap;color:currentColor;align-items:center;gap:.375rem;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.label{color:color-mix(in oklab, currentcolor 60%, transparent)}}.label:has(input){cursor:pointer}.label:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex}.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid currentColor;margin-inline:-.75rem .75rem}@supports (color:color-mix(in lab, red, red)){.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000)}}.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid currentColor;margin-inline:.75rem -.75rem}@supports (color:color-mix(in lab, red, red)){.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000)}}.modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.fieldset-legend{color:var(--color-base-content);justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:-.25rem;padding-block:.5rem;font-weight:600;display:flex}.status{aspect-ratio:1;border-radius:var(--radius-selector);background-color:var(--color-base-content);width:.5rem;height:.5rem;display:inline-block}@supports (color:color-mix(in lab, red, red)){.status{background-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.status{vertical-align:middle;color:#0000004d;background-position:50%;background-repeat:no-repeat}@supports (color:color-mix(in lab, red, red)){.status{color:color-mix(in oklab, var(--color-black) 30%, transparent)}}.status{background-image:radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000);box-shadow:0 2px 3px -1px}@supports (color:color-mix(in lab, red, red)){.status{box-shadow:0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000)}}.badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}.tabs{--tabs-height:auto;--tabs-direction:row;--tab-height:calc(var(--size-field,.25rem) * 10);height:var(--tabs-height);flex-wrap:wrap;flex-direction:var(--tabs-direction);display:flex}.footer{grid-auto-flow:row;place-items:start;gap:2.5rem 1rem;width:100%;font-size:.875rem;line-height:1.25rem;display:grid}.footer>*{place-items:start;gap:.5rem;display:grid}.footer.footer-center{text-align:center;grid-auto-flow:column dense;place-items:center}.footer.footer-center>*{place-items:center}.stat{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid}.stat:not(:last-child){border-inline-end:var(--border) dashed currentColor}@supports (color:color-mix(in lab, red, red)){.stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}.stat:not(:last-child){border-block-end:none}.navbar-end{justify-content:flex-end;align-items:center;width:50%;display:inline-flex}.navbar-start{justify-content:flex-start;align-items:center;width:50%;display:inline-flex}.card-body{padding:var(--card-p,1.5rem);font-size:var(--card-fs,.875rem);flex-direction:column;flex:auto;gap:.5rem;display:flex}.card-body :where(p){flex-grow:1}.navbar-center{flex-shrink:0;align-items:center;display:inline-flex}.fab-flower{--position:0rem;display:grid}.fab-flower>:nth-child(-n+2){--position:0rem}.fab-flower>*{--degree:180deg;--flip-degree:calc(180deg - var(--degree));transform:translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position)));grid-area:1/1}[dir=rtl] :is(.fab-flower>*){transform:translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position)))}.fab-flower>:nth-child(n+7){display:none}.fab-flower:has(:nth-child(3)){--position:140%}.fab-flower:has(:nth-child(3))>:nth-child(3){--degree:135deg}.fab-flower:has(:nth-child(4)){--position:140%}.fab-flower:has(:nth-child(4))>:nth-child(3){--degree:165deg}.fab-flower:has(:nth-child(4))>:nth-child(4){--degree:105deg}.fab-flower:has(:nth-child(5)){--position:180%}.fab-flower:has(:nth-child(5))>:nth-child(3){--degree:180deg}.fab-flower:has(:nth-child(5))>:nth-child(4){--degree:135deg}.fab-flower:has(:nth-child(5))>:nth-child(5){--degree:90deg}.fab-flower:has(:nth-child(6)){--position:220%}.fab-flower:has(:nth-child(6))>:nth-child(3){--degree:180deg}.fab-flower:has(:nth-child(6))>:nth-child(4){--degree:150deg}.fab-flower:has(:nth-child(6))>:nth-child(5){--degree:120deg}.fab-flower:has(:nth-child(6))>:nth-child(6){--degree:90deg}.fieldset-label{color:var(--color-base-content);align-items:center;gap:.375rem;display:flex}@supports (color:color-mix(in lab, red, red)){.fieldset-label{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.fieldset-label:has(input){cursor:pointer}.alert{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid}@supports (color:color-mix(in lab, red, red)){.alert{box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08))}}.alert:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}.fieldset{grid-template-columns:1fr;grid-auto-rows:max-content;gap:.375rem;padding-block:.25rem;font-size:.75rem;display:grid}.card-title{font-size:var(--cardtitle-fs,1.125rem);align-items:center;gap:.5rem;font-weight:600;display:flex}.mask{vertical-align:middle;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.link{cursor:pointer;text-decoration-line:underline}.link:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.link:focus{outline-offset:2px;outline:2px solid #0000}}.link:focus-visible{outline-offset:2px;outline:2px solid}.timeline-box{border:var(--border) solid;border-radius:var(--radius-box);border-color:var(--color-base-300);background-color:var(--color-base-100);padding-block:.5rem;padding-inline:1rem;font-size:.75rem;box-shadow:0 1px 2px oklch(0% 0 0/.05)}.btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}}@layer daisyui.l1.l2{.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4)}:is(.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal) .modal-box{opacity:1;translate:0;scale:1}:root:has(:is(.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll;animation-timeline:scroll()}@starting-style{.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal{opacity:0}}:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto}:where(.drawer-toggle:checked~.drawer-side)>:not(.drawer-overlay){translate:0%}.drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.tooltip>.tooltip-content,.tooltip[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-off) 50%}.tooltip:after{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-tail) 50%}.collapse-arrow>.collapse-title:after{width:.5rem;height:.5rem;display:block;position:absolute;transform:translateY(-100%)rotate(45deg)}@media (prefers-reduced-motion:no-preference){.collapse-arrow>.collapse-title:after{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}}.collapse-arrow>.collapse-title:after{content:"";transform-origin:75% 75%;pointer-events:none;top:50%;inset-inline-end:1.4rem;box-shadow:2px 2px}.btn:disabled:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn:disabled:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn:disabled:not(.btn-link,.btn-ghost){box-shadow:none}.btn:disabled{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn:disabled{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.btn[disabled]:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn[disabled]:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn[disabled]:not(.btn-link,.btn-ghost){box-shadow:none}.btn[disabled]{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn[disabled]{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.btn-disabled:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn-disabled:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn-disabled:not(.btn-link,.btn-ghost){box-shadow:none}.btn-disabled{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn-disabled{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.tab-disabled{pointer-events:none;opacity:.4}@media (prefers-reduced-motion:no-preference){.collapse[open].collapse-arrow>.collapse-title:after,.collapse.collapse-open.collapse-arrow>.collapse-title:after{transform:translateY(-50%)rotate(225deg)}}.collapse.collapse-open.collapse-plus>.collapse-title:after{--tw-content:"−";content:var(--tw-content)}:is(.collapse[tabindex].collapse-arrow:focus:not(.collapse-close),.collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close))>.collapse-title:after,.collapse.collapse-arrow:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{transform:translateY(-50%)rotate(225deg)}.collapse[open].collapse-plus>.collapse-title:after,.collapse[tabindex].collapse-plus:focus:not(.collapse-close)>.collapse-title:after,.collapse.collapse-plus:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{--tw-content:"−";content:var(--tw-content)}.list .list-row:has(.list-col-grow:first-child){--list-grid-cols:1fr}.list .list-row:has(.list-col-grow:nth-child(2)){--list-grid-cols:minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(3)){--list-grid-cols:minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(4)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(5)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(6)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row>*{grid-row-start:1}.steps .step-neutral+.step-neutral:before,.steps .step-neutral:after,.steps .step-neutral>.step-icon{--step-bg:var(--color-neutral);--step-fg:var(--color-neutral-content)}.steps .step-primary+.step-primary:before,.steps .step-primary:after,.steps .step-primary>.step-icon{--step-bg:var(--color-primary);--step-fg:var(--color-primary-content)}.steps .step-secondary+.step-secondary:before,.steps .step-secondary:after,.steps .step-secondary>.step-icon{--step-bg:var(--color-secondary);--step-fg:var(--color-secondary-content)}.steps .step-accent+.step-accent:before,.steps .step-accent:after,.steps .step-accent>.step-icon{--step-bg:var(--color-accent);--step-fg:var(--color-accent-content)}.steps .step-info+.step-info:before,.steps .step-info:after,.steps .step-info>.step-icon{--step-bg:var(--color-info);--step-fg:var(--color-info-content)}.steps .step-success+.step-success:before,.steps .step-success:after,.steps .step-success>.step-icon{--step-bg:var(--color-success);--step-fg:var(--color-success-content)}.steps .step-warning+.step-warning:before,.steps .step-warning:after,.steps .step-warning>.step-icon{--step-bg:var(--color-warning);--step-fg:var(--color-warning-content)}.steps .step-error+.step-error:before,.steps .step-error:after,.steps .step-error>.step-icon{--step-bg:var(--color-error);--step-fg:var(--color-error-content)}.menu-horizontal{flex-direction:row;display:inline-flex}.menu-horizontal>li:not(.menu-title)>details>ul{transform-origin:top;border-radius:var(--radius-box);background-color:var(--color-base-100);opacity:0;margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute;scale:.95;box-shadow:0 1px 3px oklch(0% 0 0/.1),0 1px 2px -1px oklch(0% 0 0/.1)}@media (prefers-reduced-motion:no-preference){@starting-style{.menu-horizontal>li:not(.menu-title)>details>ul{opacity:0;scale:.95}}.menu-horizontal>li:not(.menu-title)>details>ul{transition-behavior:allow-discrete;transition-property:opacity,scale,display;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation:.2s menu}}.menu-horizontal>li:not(.menu-title)>details[open]>ul{opacity:1;scale:1}.menu-horizontal>li>details>ul:before{--tw-content:none;content:var(--tw-content)}.checkbox:disabled,.radio:disabled{cursor:not-allowed;opacity:.2}.rating.rating-xs :where(:not(.rating-hidden)){width:1rem;height:1rem}.rating.rating-sm :where(:not(.rating-hidden)){width:1.25rem;height:1.25rem}.rating.rating-md :where(:not(.rating-hidden)){width:1.5rem;height:1.5rem}.rating.rating-lg :where(:not(.rating-hidden)){width:1.75rem;height:1.75rem}.rating.rating-xl :where(:not(.rating-hidden)){width:2rem;height:2rem}.rating\!.rating-xs :where(:not(.rating-hidden)){width:1rem!important;height:1rem!important}.rating\!.rating-sm :where(:not(.rating-hidden)){width:1.25rem!important;height:1.25rem!important}.rating\!.rating-md :where(:not(.rating-hidden)){width:1.5rem!important;height:1.5rem!important}.rating\!.rating-lg :where(:not(.rating-hidden)){width:1.75rem!important;height:1.75rem!important}.rating\!.rating-xl :where(:not(.rating-hidden)){width:2rem!important;height:2rem!important}:where(.navbar){position:relative}.tooltip-bottom>.tooltip-content,.tooltip-bottom[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,-.25rem));inset:var(--tt-off) auto auto 50%}.tooltip-bottom:after{transform:translateX(-50%) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset:var(--tt-tail) auto auto 50%}.tooltip-left>.tooltip-content,.tooltip-left[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(-50%);inset:50% var(--tt-off) auto auto}.tooltip-left:after{transform:translateX(var(--tt-pos,.25rem)) translateY(-50%) rotate(-90deg);inset:50% calc(var(--tt-tail) + 1px) auto auto}.tooltip-right>.tooltip-content,.tooltip-right[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(-50%);inset:50% auto auto var(--tt-off)}.tooltip-right:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(-50%) rotate(90deg);inset:50% auto auto calc(var(--tt-tail) + 1px)}.tooltip-top>.tooltip-content,.tooltip-top[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-off) 50%}.tooltip-top:after{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-tail) 50%}.dropdown-end{--anchor-h:span-left}.dropdown-end :where(.dropdown-content){inset-inline-end:0;translate:0}[dir=rtl] :is(.dropdown-end :where(.dropdown-content)){translate:0}.dropdown-end.dropdown-left{--anchor-h:left;--anchor-v:span-top}.dropdown-end.dropdown-left .dropdown-content{top:auto;bottom:0}.dropdown-end.dropdown-right{--anchor-h:right;--anchor-v:span-top}.dropdown-end.dropdown-right .dropdown-content{top:auto;bottom:0}.btn-active{--btn-bg:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}.btn-active{--btn-shadow:0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);isolation:isolate}:is(.stack,.stack.stack-bottom)>*{grid-area:3/3/6/4}:is(.stack,.stack.stack-bottom)>:nth-child(2){grid-area:2/2/5/5}:is(.stack,.stack.stack-bottom)>:first-child{grid-area:1/1/4/6}.stack.stack-top>*{grid-area:1/3/4/4}.stack.stack-top>:nth-child(2){grid-area:2/2/5/5}.stack.stack-top>:first-child{grid-area:3/1/6/6}.stack.stack-start>*{grid-area:3/1/4/4}.stack.stack-start>:nth-child(2){grid-area:2/2/5/5}.stack.stack-start>:first-child{grid-area:1/3/6/6}.stack.stack-end>*{grid-area:3/3/4/6}.stack.stack-end>:nth-child(2){grid-area:2/2/5/5}.stack.stack-end>:first-child{grid-area:1/1/6/4}.tabs-box{background-color:var(--color-base-200);--tabs-box-radius:calc(3 * var(--radius-field));border-radius:calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)));box-shadow:0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset;padding:.25rem}.tabs-box>.tab{border-radius:var(--radius-field);border-style:none}.tabs-box>.tab:focus-visible,.tabs-box>.tab:is(label:has(:checked:focus-visible)){outline-offset:2px}.tabs-box>.tab:focus-visible{z-index:1}.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){background-color:var(--tab-bg,var(--color-base-100));box-shadow:0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px var(--color-neutral), 0 1px 6px -4px var(--color-neutral)}@supports (color:color-mix(in lab, red, red)){.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){box-shadow:0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000)}}@media (forced-colors:active){.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){border:1px solid}}.tabs-box>.tab-content{height:calc(100% - var(--tab-height) + var(--border) - .5rem);border-radius:calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border));margin-top:.25rem}.timeline-horizontal{flex-direction:row}.timeline-horizontal>li{align-items:center}.timeline-horizontal>li>hr{width:100%;height:.25rem}.timeline-horizontal>li>hr:first-child{grid-row-start:2;grid-column-start:1}.timeline-horizontal>li>hr:last-child{grid-area:2/3/auto/none}.timeline-horizontal .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}.timeline-horizontal .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}.timeline-horizontal:has(.timeline-middle)>li>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline-horizontal:has(.timeline-middle)>li>hr:last-child,.timeline-horizontal:not(:has(.timeline-middle)) :first-child>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}.timeline-horizontal:not(:has(.timeline-middle)) :last-child>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline-vertical{flex-direction:column}.timeline-vertical>li{--timeline-row-start:minmax(0, 1fr);--timeline-row-end:minmax(0, 1fr);justify-items:center}.timeline-vertical>li>hr{width:.25rem;height:100%}.timeline-vertical>li>hr:first-child{grid-row-start:1;grid-column-start:2}.timeline-vertical>li>hr:last-child{grid-area:3/2/none}.timeline-vertical .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}.timeline-vertical .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}.timeline-vertical:has(.timeline-middle)>li>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}.timeline-vertical:has(.timeline-middle)>li>hr:last-child,.timeline-vertical:not(:has(.timeline-middle)) :first-child>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}.timeline-vertical:not(:has(.timeline-middle)) :last-child>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}.timeline-vertical.timeline-snap-icon>li{--timeline-col-start:minmax(0, 1fr);--timeline-row-start:.5rem}.timeline-compact{--timeline-row-start:0}.timeline-compact .timeline-start{grid-area:3/1/4/4;place-self:flex-start center}.timeline-compact li:has(.timeline-start) .timeline-end{grid-row-start:auto;grid-column-start:none}.timeline-compact.timeline-vertical>li{--timeline-col-start:0}.timeline-compact.timeline-vertical .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}.timeline-compact.timeline-vertical li:has(.timeline-start) .timeline-end{grid-row-start:none;grid-column-start:auto}.input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:max(var(--font-size,.75rem), .75rem)}.input-sm[type=number]::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}.btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.btn-square{width:var(--size);height:var(--size);padding-inline:0}.btn-wide{width:100%;max-width:16rem}.btn-block{width:100%}.loading-lg{width:calc(var(--size-selector,.25rem) * 7)}.loading-md{width:calc(var(--size-selector,.25rem) * 6)}.loading-sm{width:calc(var(--size-selector,.25rem) * 5)}.loading-xs{width:calc(var(--size-selector,.25rem) * 4)}.badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.select-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.select-ghost:focus,.select-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.input-ghost:focus,.input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.table-zebra tbody tr:where(:nth-child(2n)),.table-zebra tbody tr:where(:nth-child(2n)) :where(.table-pin-cols tr th){background-color:var(--color-base-200)}@media (hover:hover){:is(.table-zebra tbody tr.row-hover,.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.loading-ball{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E")}.loading-bars{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E")}.loading-dots{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E")}.loading-infinity{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E")}.loading-ring{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}.loading-spinner{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}.mask-heart{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e")}.mask-star{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e")}.mask-star-2{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e")}.badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.alert-error{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}.alert-info{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}.alert-success{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}.alert-warning{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}.checkbox-accent{color:var(--color-accent-content);--input-color:var(--color-accent)}.checkbox-primary{color:var(--color-primary-content);--input-color:var(--color-primary)}.checkbox-secondary{color:var(--color-secondary-content);--input-color:var(--color-secondary)}.tooltip-accent{--tt-bg:var(--color-accent)}.tooltip-accent>.tooltip-content,.tooltip-accent[data-tip]:before{color:var(--color-accent-content)}.tooltip-error{--tt-bg:var(--color-error)}.tooltip-error>.tooltip-content,.tooltip-error[data-tip]:before{color:var(--color-error-content)}.tooltip-info{--tt-bg:var(--color-info)}.tooltip-info>.tooltip-content,.tooltip-info[data-tip]:before{color:var(--color-info-content)}.tooltip-primary{--tt-bg:var(--color-primary)}.tooltip-primary>.tooltip-content,.tooltip-primary[data-tip]:before{color:var(--color-primary-content)}.tooltip-secondary{--tt-bg:var(--color-secondary)}.tooltip-secondary>.tooltip-content,.tooltip-secondary[data-tip]:before{color:var(--color-secondary-content)}.tooltip-success{--tt-bg:var(--color-success)}.tooltip-success>.tooltip-content,.tooltip-success[data-tip]:before{color:var(--color-success-content)}.tooltip-warning{--tt-bg:var(--color-warning)}.tooltip-warning>.tooltip-content,.tooltip-warning[data-tip]:before{color:var(--color-warning-content)}.btn-lg{--fontsize:1.125rem;--btn-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}.btn-md{--fontsize:.875rem;--btn-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}.btn-sm{--fontsize:.75rem;--btn-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}.btn-xl{--fontsize:1.375rem;--btn-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}.btn-xs{--fontsize:.6875rem;--btn-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}.badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.input-error,.input-error:focus,.input-error:focus-within{--input-color:var(--color-error)}.input-primary,.input-primary:focus,.input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.input-secondary:focus,.input-secondary:focus-within{--input-color:var(--color-secondary)}.radio-accent{--input-color:var(--color-accent)}.radio-primary{--input-color:var(--color-primary)}.radio-secondary{--input-color:var(--color-secondary)}.range-xs{--range-thumb-size:calc(var(--size-selector,.25rem) * 4)}.select-primary,.select-primary:focus,.select-primary:focus-within{--input-color:var(--color-primary)}.select-secondary,.select-secondary:focus,.select-secondary:focus-within{--input-color:var(--color-secondary)}.toggle-primary:checked,.toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}}.prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose],[class~=not-prose] *)){text-decoration-line:none}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse:not(td,tr,colgroup){visibility:revert-layer}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.-top-1{top:calc(var(--spacing) * -1)}.top-0{top:calc(var(--spacing) * 0)}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.top-6{top:calc(var(--spacing) * 6)}.top-10{top:calc(var(--spacing) * 10)}.-right-2{right:calc(var(--spacing) * -2)}.right-0{right:calc(var(--spacing) * 0)}.right-1\/4{right:25%}.right-6{right:calc(var(--spacing) * 6)}.-bottom-5{bottom:calc(var(--spacing) * -5)}.bottom-6{bottom:calc(var(--spacing) * 6)}.bottom-10{bottom:calc(var(--spacing) * 10)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-1\/4{left:25%}.left-2{left:calc(var(--spacing) * 2)}.left-4{left:calc(var(--spacing) * 4)}.left-6{left:calc(var(--spacing) * 6)}.-z-0{z-index:calc(0 * -1)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[50\]{z-index:50}.z-\[90\]{z-index:90}.z-\[100\]{z-index:100}.z-\[110\]{z-index:110}.z-\[9999\]{z-index:9999}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-1{margin:calc(var(--spacing) * 1)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mx-auto{margin-inline:auto}.my-1{margin-block:calc(var(--spacing) * 1)}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.my-16{margin-block:calc(var(--spacing) * 16)}.-mt-10{margin-top:calc(var(--spacing) * -10)}.mt-0{margin-top:calc(var(--spacing) * 0)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-6{margin-left:calc(var(--spacing) * 6)}.alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200))}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.aspect-square{aspect-ratio:1}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-32{height:calc(var(--spacing) * 32)}.h-48{height:calc(var(--spacing) * 48)}.h-96{height:calc(var(--spacing) * 96)}.h-\[300px\]{height:300px}.h-\[400px\]{height:400px}.h-\[500px\]{height:500px}.h-auto{height:auto}.h-full{height:100%}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-96{max-height:calc(var(--spacing) * 96)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-\[100px\]{min-height:100px}.min-h-\[200px\]{min-height:200px}.min-h-\[300px\]{min-height:300px}.min-h-\[400px\]{min-height:400px}.min-h-\[500px\]{min-height:500px}.min-h-full{min-height:100%}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-40{width:calc(var(--spacing) * 40)}.w-48{width:calc(var(--spacing) * 48)}.w-52{width:calc(var(--spacing) * 52)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-80{width:calc(var(--spacing) * 80)}.w-96{width:calc(var(--spacing) * 96)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[200px\]{max-width:200px}.max-w-md{max-width:var(--container-md)}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-\[4rem\]{min-width:4rem}.min-w-\[48px\]{min-width:48px}.min-w-\[500px\]{min-width:500px}.min-w-\[600px\]{min-width:600px}.min-w-max{min-width:max-content}.flex-1{flex:1}.flex-none{flex:none}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-2{--tw-translate-x:calc(var(--spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-10{--tw-translate-x:calc(var(--spacing) * 10);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-2{--tw-translate-y:calc(var(--spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-4{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-box{border-radius:var(--radius-box);border-radius:var(--radius-box)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}@layer daisyui.l1{.btn-dash:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}@media (hover:none){.btn-dash:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}}.alert-soft{color:var(--alert-color,var(--color-base-content));background:var(--alert-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.alert-soft{background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100))}}.alert-soft{--alert-border-color:var(--alert-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.alert-soft{--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100))}}.alert-soft{box-shadow:none;background-image:none}.btn-link{--btn-border:#0000;--btn-bg:#0000;--btn-noise:none;--btn-shadow:"";outline-color:currentColor;text-decoration-line:underline}.btn-link:not(.btn-disabled,.btn:disabled,.btn[disabled]){--btn-fg:var(--btn-color,var(--color-primary))}.btn-link:is(.btn-active,:hover,:active:focus,:focus-visible){--btn-border:#0000;--btn-bg:#0000}.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn)){--btn-shadow:"";--btn-bg:#0000;--btn-border:#0000;--btn-noise:none}.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn)):not(:disabled,[disabled],.btn-disabled){--btn-fg:var(--btn-color,currentColor);outline-color:currentColor}@media (hover:none){.btn-ghost:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color,currentColor);--btn-border:#0000;--btn-noise:none;outline-color:currentColor}}.btn-outline:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}@media (hover:none){.btn-outline:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-fg:var(--btn-color,var(--color-base-content));--btn-bg:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 8%, var(--color-base-100))}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-border:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 10%, var(--color-base-100))}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-noise:none}@media (hover:none){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-fg:var(--btn-color,var(--color-base-content));--btn-bg:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 8%, var(--color-base-100))}}.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-border:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 10%, var(--color-base-100))}}.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-noise:none}}}.btn-dash{border-style:dashed}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-base-200\/30{border-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.border-base-200\/30{border-color:color-mix(in oklab, var(--color-base-200) 30%, transparent)}}.border-base-300{border-color:var(--color-base-300)}.border-base-content\/20{border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.border-base-content\/20{border-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.border-black\/5{border-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.border-black\/5{border-color:color-mix(in oklab, var(--color-black) 5%, transparent)}}.border-black\/10{border-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.border-black\/10{border-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.border-primary,.border-primary\/20{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/20{border-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--color-accent)}.bg-base-100,.bg-base-100\/30{background-color:var(--color-base-100)}@supports (color:color-mix(in lab, red, red)){.bg-base-100\/30{background-color:color-mix(in oklab, var(--color-base-100) 30%, transparent)}}.bg-base-200,.bg-base-200\/30{background-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.bg-base-200\/30{background-color:color-mix(in oklab, var(--color-base-200) 30%, transparent)}}.bg-base-200\/50{background-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.bg-base-200\/50{background-color:color-mix(in oklab, var(--color-base-200) 50%, transparent)}}.bg-base-300{background-color:var(--color-base-300)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.bg-error,.bg-error\/10{background-color:var(--color-error)}@supports (color:color-mix(in lab, red, red)){.bg-error\/10{background-color:color-mix(in oklab, var(--color-error) 10%, transparent)}}.bg-info{background-color:var(--color-info)}.bg-neutral{background-color:var(--color-neutral)}.bg-primary,.bg-primary\/5{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary) 5%, transparent)}}.bg-primary\/10{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary) 10%, transparent)}}.bg-primary\/20{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.bg-secondary{background-color:var(--color-secondary)}.bg-success,.bg-success\/10{background-color:var(--color-success)}@supports (color:color-mix(in lab, red, red)){.bg-success\/10{background-color:color-mix(in oklab, var(--color-success) 10%, transparent)}}.bg-warning,.bg-warning\/10{background-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.bg-warning\/10{background-color:color-mix(in oklab, var(--color-warning) 10%, transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-accent{--tw-gradient-from:var(--color-accent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-primary{--tw-gradient-from:var(--color-primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-secondary{--tw-gradient-from:var(--color-secondary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-accent{--tw-gradient-via:var(--color-accent);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-accent{--tw-gradient-to:var(--color-accent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-primary{--tw-gradient-to:var(--color-primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-secondary{--tw-gradient-to:var(--color-secondary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-10{padding:calc(var(--spacing) * 10)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pl-3{padding-left:calc(var(--spacing) * 3)}.\!text-center{text-align:center!important}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.leading-20{--tw-leading:calc(var(--spacing) * 20);line-height:calc(var(--spacing) * 20)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking:var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-balance{text-wrap:balance}.whitespace-nowrap{white-space:nowrap}.text-accent{color:var(--color-accent)}.text-accent-content{color:var(--color-accent-content)}.text-base-content,.text-base-content\/60{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.text-base-content\/60{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.text-base-content\/90{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.text-base-content\/90{color:color-mix(in oklab, var(--color-base-content) 90%, transparent)}}.text-error{color:var(--color-error)}.text-error-content{color:var(--color-error-content)}.text-gray-500{color:var(--color-gray-500)}.text-info{color:var(--color-info)}.text-info-content{color:var(--color-info-content)}.text-neutral-content{color:var(--color-neutral-content)}.text-primary{color:var(--color-primary)}.text-primary-content{color:var(--color-primary-content)}.text-secondary{color:var(--color-secondary)}.text-secondary-content{color:var(--color-secondary-content)}.text-success{color:var(--color-success)}.text-success-content{color:var(--color-success-content)}.text-transparent{color:#0000}.text-warning{color:var(--color-warning)}.text-warning-content{color:var(--color-warning-content)}.text-white{color:var(--color-white)}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-secondary\/20{--tw-shadow-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-secondary) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-primary{--tw-ring-color:var(--color-primary)}.ring-offset-1{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-2xl{--tw-drop-shadow-size:drop-shadow(0 25px 25px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-2xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.before\:z-50:before,.after\:z-50:after{content:var(--tw-content);z-index:50}@media (hover:hover){.hover\:z-10:hover{z-index:10}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-125:hover{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-accent\/40:hover{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:border-accent\/40:hover{border-color:color-mix(in oklab, var(--color-accent) 40%, transparent)}}.hover\:border-base-content\/20:hover{border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.hover\:border-base-content\/20:hover{border-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.hover\:border-primary\/40:hover{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/40:hover{border-color:color-mix(in oklab, var(--color-primary) 40%, transparent)}}.hover\:border-primary\/50:hover{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary) 50%, transparent)}}.hover\:border-secondary\/40:hover{border-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-secondary\/40:hover{border-color:color-mix(in oklab, var(--color-secondary) 40%, transparent)}}.hover\:bg-base-100:hover{background-color:var(--color-base-100)}.hover\:bg-base-200:hover{background-color:var(--color-base-200)}.hover\:bg-base-300:hover{background-color:var(--color-base-300)}.hover\:bg-white\/30:hover{background-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/30:hover{background-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.hover\:text-base-content:hover{color:var(--color-base-content)}.hover\:opacity-100:hover{opacity:1}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}@media (min-width:48rem){.md\:h-64{height:calc(var(--spacing) * 64)}.md\:w-64{width:calc(var(--spacing) * 64)}.md\:w-auto{width:auto}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}}@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}}@keyframes rating{0%,40%{filter:brightness(1.05)contrast(1.05);scale:1.1}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes rotator{89.9999%,to{--first-item-position:0 0%}90%,99.9999%{--first-item-position:0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes pulse{50%{opacity:.5}} \ No newline at end of file +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, :host { + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + --color-gray-500: oklch(55.1% 0.027 264.364); + --color-black: #000; + --color-white: #fff; + --spacing: 0.25rem; + --container-md: 28rem; + --container-3xl: 48rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --text-xs: 0.75rem; + --text-xs--line-height: calc(1 / 0.75); + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-base: 1rem; + --text-base--line-height: calc(1.5 / 1); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --text-4xl: 2.25rem; + --text-4xl--line-height: calc(2.5 / 2.25); + --text-6xl: 3.75rem; + --text-6xl--line-height: 1; + --text-7xl: 4.5rem; + --text-7xl--line-height: 1; + --text-9xl: 8rem; + --text-9xl--line-height: 1; + --font-weight-light: 300; + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-bold: 700; + --font-weight-black: 900; + --tracking-tighter: -0.05em; + --tracking-tight: -0.025em; + --tracking-widest: 0.1em; + --leading-relaxed: 1.625; + --radius-sm: 0.25rem; + --radius-md: 0.375rem; + --radius-lg: 0.5rem; + --radius-xl: 0.75rem; + --radius-3xl: 1.5rem; + --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); + --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --blur-sm: 8px; + --blur-3xl: 64px; + --default-transition-duration: 150ms; + --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + } +} +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, strong { + font-weight: bolder; + } + code, kbd, samp, pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring { + outline: auto; + } + progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, ul, menu { + list-style: none; + } + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + } + img, video { + max-width: 100%; + height: auto; + } + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + ::-webkit-calendar-picker-indicator { + line-height: 1; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden="until-found"])) { + display: none !important; + } +} +@layer utilities { + .modal { + @layer daisyui.l1.l2.l3 { + pointer-events: none; + visibility: hidden; + position: fixed; + inset: calc(0.25rem * 0); + margin: calc(0.25rem * 0); + display: grid; + height: 100%; + max-height: none; + width: 100%; + max-width: none; + align-items: center; + justify-items: center; + background-color: transparent; + padding: calc(0.25rem * 0); + color: inherit; + transition: visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out; + overflow: clip; + overscroll-behavior: contain; + z-index: 999; + scrollbar-gutter: auto; + &::backdrop { + display: none; + } + } + @layer daisyui.l1.l2 { + &.modal-open, &[open], &:target, .modal-toggle:checked + & { + pointer-events: auto; + visibility: visible; + opacity: 100%; + transition: visibility 0s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out; + background-color: oklch(0% 0 0/ 0.4); + .modal-box { + translate: 0 0; + scale: 1; + opacity: 1; + } + :root:has(&) { + --page-has-backdrop: 1; + --page-overflow: hidden; + --page-scroll-bg: var(--page-scroll-bg-on); + --page-scroll-gutter: stable; + --page-scroll-transition: var(--page-scroll-transition-on); + animation: set-page-has-scroll forwards; + animation-timeline: scroll(); + } + } + @starting-style { + &.modal-open, &[open], &:target, .modal-toggle:checked + & { + opacity: 0%; + } + } + } + } + .drawer-side { + :where(&) { + @layer daisyui.l1.l2.l3 { + overflow-x: hidden; + overflow-y: hidden; + } + } + @layer daisyui.l1.l2.l3 { + pointer-events: none; + visibility: hidden; + position: fixed; + inset-inline-start: calc(0.25rem * 0); + top: calc(0.25rem * 0); + z-index: 10; + grid-column-start: 1; + grid-row-start: 1; + display: grid; + width: 100%; + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-rows: repeat(1, minmax(0, 1fr)); + align-items: flex-start; + justify-items: start; + overscroll-behavior: contain; + background-color: transparent; + opacity: 0%; + transition: opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete; + height: 100vh; + height: 100dvh; + > .drawer-overlay { + position: sticky; + top: calc(0.25rem * 0); + cursor: pointer; + place-self: stretch; + background-color: oklch(0% 0 0 / 40%); + } + > * { + grid-column-start: 1; + grid-row-start: 1; + } + > :not(.drawer-overlay) { + will-change: transform; + transition: translate 0.3s ease-out, width 0.2s ease-out; + translate: -100%; + [dir="rtl"] & { + translate: 100%; + } + } + } + } + .fab { + @layer daisyui.l1.l2.l3 { + pointer-events: none; + position: fixed; + inset-inline-end: calc(0.25rem * 4); + bottom: calc(0.25rem * 4); + z-index: 999; + display: flex; + flex-direction: column-reverse; + align-items: flex-end; + gap: calc(0.25rem * 2); + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + white-space: nowrap; + > * { + pointer-events: auto; + display: flex; + align-items: center; + gap: calc(0.25rem * 2); + &:hover, &:has(:focus-visible) { + z-index: 1; + } + } + > [tabindex] { + &:first-child { + position: relative; + display: grid; + transition-property: opacity, visibility, rotate; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + } + .fab-close { + position: absolute; + inset-inline-end: calc(0.25rem * 0); + bottom: calc(0.25rem * 0); + } + .fab-main-action { + position: absolute; + inset-inline-end: calc(0.25rem * 0); + bottom: calc(0.25rem * 0); + } + &:focus-within { + &:has(.fab-close), &:has(.fab-main-action) { + > [tabindex] { + rotate: 90deg; + opacity: 0%; + } + } + > [tabindex]:first-child { + pointer-events: none; + } + > :nth-child(n + 2) { + visibility: visible; + --tw-scale-x: 100%; + --tw-scale-y: 100%; + --tw-scale-z: 100%; + scale: var(--tw-scale-x) var(--tw-scale-y); + opacity: 100%; + } + } + > :nth-child(n + 2) { + visibility: hidden; + --tw-scale-x: 80%; + --tw-scale-y: 80%; + --tw-scale-z: 80%; + scale: var(--tw-scale-x) var(--tw-scale-y); + opacity: 0%; + transition-property: opacity, scale, visibility; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + &.fab-main-action, &.fab-close { + --tw-scale-x: 100%; + --tw-scale-y: 100%; + --tw-scale-z: 100%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + > :nth-child(3) { + transition-delay: 30ms; + } + > :nth-child(4) { + transition-delay: 60ms; + } + > :nth-child(5) { + transition-delay: 90ms; + } + > :nth-child(6) { + transition-delay: 120ms; + } + } + } + .drawer-toggle { + @layer daisyui.l1.l2.l3 { + position: fixed; + height: calc(0.25rem * 0); + width: calc(0.25rem * 0); + appearance: none; + opacity: 0%; + :where(&:checked ~ .drawer-side) { + scrollbar-color: currentColor oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4)); + @supports (color: color-mix(in lab, red, red)) { + scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4)); + } + } + :where(:root:has(&:checked)) { + --page-has-backdrop: 1; + --page-overflow: hidden; + --page-scroll-bg: var(--page-scroll-bg-on); + --page-scroll-gutter: stable; + --page-scroll-transition: var(--page-scroll-transition-on); + animation: set-page-has-scroll forwards; + animation-timeline: scroll(); + } + } + @layer daisyui.l1.l2 { + :where(&:checked ~ .drawer-side) { + pointer-events: auto; + visibility: visible; + overflow-y: auto; + opacity: 100%; + > :not(.drawer-overlay) { + translate: 0%; + } + } + &:focus-visible ~ .drawer-content label.drawer-button { + outline: 2px solid; + outline-offset: 2px; + } + } + } + .tooltip { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-block; + --tt-bg: var(--color-neutral); + --tt-off: calc(100% + 0.5rem); + --tt-tail: calc(100% + 1px + 0.25rem); + & > .tooltip-content, &[data-tip]:before { + position: absolute; + max-width: 20rem; + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 2); + padding-block: calc(0.25rem * 1); + text-align: center; + white-space: normal; + color: var(--color-neutral-content); + opacity: 0%; + font-size: 0.875rem; + line-height: 1.25; + background-color: var(--tt-bg); + width: max-content; + pointer-events: none; + z-index: 2; + --tw-content: attr(data-tip); + content: var(--tw-content); + } + &:after { + opacity: 0%; + background-color: var(--tt-bg); + content: ""; + pointer-events: none; + width: 0.625rem; + height: 0.25rem; + display: block; + position: absolute; + mask-repeat: no-repeat; + mask-position: -1px 0; + --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A"); + mask-image: var(--mask-tooltip); + } + @media (prefers-reduced-motion: no-preference) { + & > .tooltip-content, &[data-tip]:before, &:after { + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms; + } + } + &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) { + &.tooltip-open, &:hover, &:has(:focus-visible) { + & > .tooltip-content, &[data-tip]:before, &:after { + opacity: 100%; + --tt-pos: 0rem; + @media (prefers-reduced-motion: no-preference) { + transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s; + } + } + } + } + } + @layer daisyui.l1.l2 { + > .tooltip-content, &[data-tip]:before { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-off) 50%; + } + &:after { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-tail) 50%; + } + } + } + .tab { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + cursor: pointer; + appearance: none; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + webkit-user-select: none; + user-select: none; + &:hover { + @media (hover: hover) { + color: var(--color-base-content); + } + } + --tab-p: 0.75rem; + --tab-bg: var(--color-base-100); + --tab-border-color: var(--color-base-300); + --tab-radius-ss: 0; + --tab-radius-se: 0; + --tab-radius-es: 0; + --tab-radius-ee: 0; + --tab-order: 0; + --tab-radius-min: calc(0.75rem - var(--border)); + --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min)); + --tab-radius-grad: #0000 calc(69% - var(--border)), + var(--tab-border-color) calc(69% - var(--border) + 0.25px), + var(--tab-border-color) 69%, + var(--tab-bg) calc(69% + 0.25px); + border-color: #0000; + order: var(--tab-order); + height: var(--tab-height); + font-size: 0.875rem; + padding-inline: var(--tab-p); + &:is(input[type="radio"]) { + min-width: fit-content; + &:after { + --tw-content: attr(aria-label); + content: var(--tw-content); + } + } + &:is(label) { + position: relative; + input { + position: absolute; + inset: calc(0.25rem * 0); + cursor: pointer; + appearance: none; + opacity: 0%; + } + } + &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { + & + .tab-content { + display: block; + } + } + &:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 50%, transparent); + } + } + &:not(input):empty { + flex-grow: 1; + cursor: default; + } + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible, &:is(label:has(:checked:focus-visible)) { + outline: 2px solid currentColor; + outline-offset: -5px; + } + &[disabled] { + pointer-events: none; + opacity: 40%; + } + } + } + .tab\! { + @layer daisyui.l1.l2.l3 { + position: relative !important; + display: inline-flex !important; + cursor: pointer !important; + appearance: none !important; + flex-wrap: wrap !important; + align-items: center !important; + justify-content: center !important; + text-align: center !important; + webkit-user-select: none !important; + user-select: none !important; + &:hover { + @media (hover: hover) { + color: var(--color-base-content) !important; + } + } + --tab-p: 0.75rem !important; + --tab-bg: var(--color-base-100) !important; + --tab-border-color: var(--color-base-300) !important; + --tab-radius-ss: 0 !important; + --tab-radius-se: 0 !important; + --tab-radius-es: 0 !important; + --tab-radius-ee: 0 !important; + --tab-order: 0 !important; + --tab-radius-min: calc(0.75rem - var(--border)) !important; + --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min)) !important; + --tab-radius-grad: #0000 calc(69% - var(--border)), + var(--tab-border-color) calc(69% - var(--border) + 0.25px), + var(--tab-border-color) 69%, + var(--tab-bg) calc(69% + 0.25px) !important; + border-color: #0000 !important; + order: var(--tab-order) !important; + height: var(--tab-height) !important; + font-size: 0.875rem !important; + padding-inline: var(--tab-p) !important; + &:is(input[type="radio"]) { + min-width: fit-content !important; + &:after { + --tw-content: attr(aria-label) !important; + content: var(--tw-content) !important; + } + } + &:is(label) { + position: relative !important; + input { + position: absolute !important; + inset: calc(0.25rem * 0) !important; + cursor: pointer !important; + appearance: none !important; + opacity: 0% !important; + } + } + &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { + & + .tab-content { + display: block !important; + } + } + &:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) { + color: var(--color-base-content) !important; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 50%, transparent) !important; + } + } + &:not(input):empty { + flex-grow: 1 !important; + cursor: default !important; + } + &:focus { + --tw-outline-style: none !important; + outline-style: none !important; + @media (forced-colors: active) { + outline: 2px solid transparent !important; + outline-offset: 2px !important; + } + } + &:focus-visible, &:is(label:has(:checked:focus-visible)) { + outline: 2px solid currentColor !important; + outline-offset: -5px !important; + } + &[disabled] { + pointer-events: none !important; + opacity: 40% !important; + } + } + } + .menu { + @layer daisyui.l1.l2.l3 { + display: flex; + width: fit-content; + flex-direction: column; + flex-wrap: wrap; + padding: calc(0.25rem * 2); + --menu-active-fg: var(--color-neutral-content); + --menu-active-bg: var(--color-neutral); + font-size: 0.875rem; + :where(li ul) { + position: relative; + margin-inline-start: calc(0.25rem * 4); + padding-inline-start: calc(0.25rem * 2); + white-space: nowrap; + &:before { + position: absolute; + inset-inline-start: calc(0.25rem * 0); + top: calc(0.25rem * 3); + bottom: calc(0.25rem * 3); + background-color: var(--color-base-content); + opacity: 10%; + width: var(--border); + content: ""; + } + } + :where(li > .menu-dropdown:not(.menu-dropdown-show)) { + display: none; + } + :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) { + display: grid; + grid-auto-flow: column; + align-content: flex-start; + align-items: center; + gap: calc(0.25rem * 2); + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 1.5); + text-align: start; + transition-property: color, background-color, box-shadow; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + grid-auto-columns: minmax(auto, max-content) auto max-content; + text-wrap: balance; + user-select: none; + } + :where(li > details > summary) { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + &::-webkit-details-marker { + display: none; + } + } + :where(li > details > summary), :where(li > .menu-dropdown-toggle) { + &:after { + justify-self: flex-end; + display: block; + height: 0.375rem; + width: 0.375rem; + rotate: -135deg; + translate: 0 -1px; + transition-property: rotate, translate; + transition-duration: 0.2s; + content: ""; + transform-origin: 50% 50%; + box-shadow: 2px 2px inset; + pointer-events: none; + } + } + details { + overflow: hidden; + interpolate-size: allow-keywords; + } + details::details-content { + block-size: 0; + @media (prefers-reduced-motion: no-preference) { + transition-behavior: allow-discrete; + transition-property: block-size, content-visibility; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + } + details[open]::details-content { + block-size: auto; + } + :where(li > details[open] > summary):after, :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { + rotate: 45deg; + translate: 0 1px; + } + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title) ):not(.menu-active, :active, .btn) { + &.menu-focus, &:focus-visible { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + color: var(--color-base-content); + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + :where( li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover ) { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + box-shadow: 0 1px oklch(0% 0 0 / 0.01) inset, 0 -1px oklch(100% 0 0 / 0.01) inset; + } + :where(li:empty) { + background-color: var(--color-base-content); + opacity: 10%; + margin: 0.5rem 1rem; + height: 1px; + } + :where(li) { + position: relative; + display: flex; + flex-shrink: 0; + flex-direction: column; + flex-wrap: wrap; + align-items: stretch; + .badge { + justify-self: flex-end; + } + & > *:not(ul, .menu-title, details, .btn):active, & > *:not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + color: var(--menu-active-fg); + background-color: var(--menu-active-bg); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + &:not(&:active) { + box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); + } + } + &.menu-disabled { + pointer-events: none; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + .dropdown:focus-within { + .menu-dropdown-toggle:after { + rotate: 45deg; + translate: 0 1px; + } + } + .dropdown-content { + margin-top: calc(0.25rem * 2); + padding: calc(0.25rem * 2); + &:before { + display: none; + } + } + } + } + .floating-label { + @layer daisyui.l1.l2.l3 { + position: relative; + display: block; + input { + display: block; + &::placeholder { + transition: top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out; + } + } + textarea { + &::placeholder { + transition: top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out; + } + } + > span { + position: absolute; + inset-inline-start: calc(0.25rem * 3); + z-index: 1; + background-color: var(--color-base-100); + padding-inline: calc(0.25rem * 1); + opacity: 0%; + font-size: 0.875rem; + top: calc(var(--size-field, 0.25rem) * 10 / 2); + line-height: 1; + border-radius: 2px; + pointer-events: none; + translate: 0 -50%; + transition: top 0.1s ease-out, translate 0.1s ease-out, scale 0.1s ease-out, opacity 0.1s ease-out; + } + &:focus-within, &:not(:has(input:placeholder-shown, textarea:placeholder-shown)) { + ::placeholder { + opacity: 0%; + top: 0; + translate: -12.5% calc(-50% - 0.125em); + scale: 0.75; + pointer-events: auto; + } + > span { + opacity: 100%; + top: 0; + translate: -12.5% calc(-50% - 0.125em); + scale: 0.75; + pointer-events: auto; + z-index: 2; + } + } + &:has(:disabled, [disabled]) { + > span { + opacity: 0%; + } + } + &:has(.input-xs, .select-xs, .textarea-xs) span { + font-size: 0.6875rem; + top: calc(var(--size-field, 0.25rem) * 6 / 2); + } + &:has(.input-sm, .select-sm, .textarea-sm) span { + font-size: 0.75rem; + top: calc(var(--size-field, 0.25rem) * 8 / 2); + } + &:has(.input-md, .select-md, .textarea-md) span { + font-size: 0.875rem; + top: calc(var(--size-field, 0.25rem) * 10 / 2); + } + &:has(.input-lg, .select-lg, .textarea-lg) span { + font-size: 1.125rem; + top: calc(var(--size-field, 0.25rem) * 12 / 2); + } + &:has(.input-xl, .select-xl, .textarea-xl) span { + font-size: 1.375rem; + top: calc(var(--size-field, 0.25rem) * 14 / 2); + } + } + } + .collapse-arrow { + @layer daisyui.l1.l2 { + > .collapse-title:after { + position: absolute; + display: block; + height: 0.5rem; + width: 0.5rem; + transform: translateY(-100%) rotate(45deg); + @media (prefers-reduced-motion: no-preference) { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 0.2s; + } + top: 50%; + inset-inline-end: 1.4rem; + content: ""; + transform-origin: 75% 75%; + box-shadow: 2px 2px; + pointer-events: none; + } + } + } + .collapse-plus { + @layer daisyui.l1.l2 { + > .collapse-title:after { + position: absolute; + display: block; + height: 0.5rem; + width: 0.5rem; + @media (prefers-reduced-motion: no-preference) { + transition-property: all; + transition-duration: 300ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + top: 0.9rem; + inset-inline-end: 1.4rem; + --tw-content: "+"; + content: var(--tw-content); + pointer-events: none; + } + } + } + .dropdown { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-block; + position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); + & > *:not(:has(~ [class*="dropdown-content"])):focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + .dropdown-content { + position: absolute; + } + &.dropdown-close .dropdown-content, &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + &[popover], .dropdown-content { + z-index: 999; + @media (prefers-reduced-motion: no-preference) { + animation: dropdown 0.2s; + transition-property: opacity, scale, display; + transition-behavior: allow-discrete; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + } + @starting-style { + &[popover], .dropdown-content { + scale: 95%; + opacity: 0; + } + } + &:not(.dropdown-close) { + &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { + > [tabindex]:first-child { + pointer-events: none; + } + .dropdown-content { + opacity: 100%; + scale: 100%; + } + } + &.dropdown-hover:hover { + .dropdown-content { + opacity: 100%; + scale: 100%; + } + } + } + &:is(details) { + summary { + &::-webkit-details-marker { + display: none; + } + } + } + &:where([popover]) { + background: #0000; + } + &[popover] { + position: fixed; + color: inherit; + @supports not (position-area: bottom) { + margin: auto; + &.dropdown-close, &.dropdown-open:not(:popover-open) { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + &::backdrop { + background-color: color-mix(in oklab, #000 30%, #0000); + } + } + &.dropdown-close, &:not(.dropdown-open, :popover-open) { + display: none; + transform-origin: top; + opacity: 0%; + scale: 95%; + } + } + } + } + .btn { + :where(&) { + @layer daisyui.l1.l2.l3 { + width: unset; + } + } + .prose :where(a&:not(.btn-link)):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + text-decoration-line: none; + } + @layer daisyui.l1.l2.l3 { + display: inline-flex; + flex-shrink: 0; + cursor: pointer; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 1.5); + text-align: center; + vertical-align: middle; + outline-offset: 2px; + webkit-user-select: none; + user-select: none; + padding-inline: var(--btn-p); + color: var(--btn-fg); + --tw-prose-links: var(--btn-fg); + height: var(--size); + font-size: var(--fontsize, 0.875rem); + font-weight: 600; + outline-color: var(--btn-color, var(--color-base-content)); + transition-property: color, background-color, border-color, box-shadow; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + transition-duration: 0.2s; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + background-color: var(--btn-bg); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--btn-noise); + border-width: var(--border); + border-style: solid; + border-color: var(--btn-border); + text-shadow: 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 0.15)); + touch-action: manipulation; + box-shadow: 0 0.5px 0 0.5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); + --size: calc(var(--size-field, 0.25rem) * 10); + --btn-bg: var(--btn-color, var(--color-base-200)); + --btn-fg: var(--color-base-content); + --btn-p: 1rem; + --btn-border: var(--btn-bg); + @supports (color: color-mix(in lab, red, red)) { + --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); + } + --btn-shadow: 0 3px 2px -2px var(--btn-bg), + 0 4px 3px -2px var(--btn-bg); + @supports (color: color-mix(in lab, red, red)) { + --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), + 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); + } + --btn-noise: var(--fx-noise); + @media (hover: hover) { + &:hover { + --btn-bg: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); + } + } + } + &:focus-visible, &:has(:focus-visible) { + outline-width: 2px; + outline-style: solid; + isolation: isolate; + } + &:active:not(.btn-active) { + translate: 0 0.5px; + --btn-bg: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); + } + --btn-border: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); + } + --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); + } + &:is(input[type="checkbox"], input[type="radio"]) { + appearance: none; + &[aria-label]::after { + --tw-content: attr(aria-label); + content: var(--tw-content); + } + } + &:where(input:checked:not(.filter .btn)) { + --btn-color: var(--color-primary); + --btn-fg: var(--color-primary-content); + isolation: isolate; + } + } + &:disabled { + @layer daisyui.l1.l2 { + &:not(.btn-link, .btn-ghost) { + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + box-shadow: none; + } + pointer-events: none; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } + } + } + &[disabled] { + @layer daisyui.l1.l2 { + &:not(.btn-link, .btn-ghost) { + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + box-shadow: none; + } + pointer-events: none; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } + } + } + } + .loading { + @layer daisyui.l1.l2.l3 { + pointer-events: none; + display: inline-block; + aspect-ratio: 1 / 1; + background-color: currentcolor; + vertical-align: middle; + width: calc(var(--size-selector, 0.25rem) * 6); + mask-size: 100%; + mask-repeat: no-repeat; + mask-position: center; + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + } + } + .btn-disabled { + @layer daisyui.l1.l2 { + &:not(.btn-link, .btn-ghost) { + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + box-shadow: none; + } + pointer-events: none; + --btn-border: #0000; + --btn-noise: none; + --btn-fg: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); + } + } + } + .tab-disabled { + @layer daisyui.l1.l2 { + pointer-events: none; + opacity: 40%; + } + } + .pointer-events-auto { + pointer-events: auto; + } + .pointer-events-none { + pointer-events: none; + } + .collapse { + &:not(td, tr, colgroup) { + visibility: revert-layer; + } + @layer daisyui.l1.l2.l3 { + display: grid; + position: relative; + overflow: hidden; + border-radius: var(--radius-box, 1rem); + width: 100%; + grid-template-rows: max-content 0fr; + grid-template-columns: minmax(0, 1fr); + isolation: isolate; + @media (prefers-reduced-motion: no-preference) { + transition: grid-template-rows 0.2s; + } + > input:is([type="checkbox"], [type="radio"]) { + grid-column-start: 1; + grid-row-start: 1; + appearance: none; + opacity: 0; + z-index: 1; + width: 100%; + padding: 1rem; + padding-inline-end: 3rem; + min-height: 1lh; + transition: background-color 0.2s ease-out; + } + &:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ), &:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) { + grid-template-rows: max-content 1fr; + } + &:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content, &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { + content-visibility: visible; + min-height: fit-content; + @supports not (content-visibility: visible) { + visibility: visible; + } + } + &:focus-visible, &:has(> input:is([type="checkbox"], [type="radio"]):focus-visible), &:has(summary:focus-visible) { + outline-color: var(--color-base-content); + outline-style: solid; + outline-width: 2px; + outline-offset: 2px; + } + &:not(.collapse-close) { + > input[type="checkbox"], > input[type="radio"]:not(:checked), > .collapse-title { + cursor: pointer; + } + } + &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { + > .collapse-title { + cursor: unset; + } + } + &:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > :where(.collapse-content), &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { + padding-bottom: 1rem; + } + } + @layer daisyui.l1.l2 { + &:is([open]) { + &.collapse-arrow { + > .collapse-title:after { + @media (prefers-reduced-motion: no-preference) { + transform: translateY(-50%) rotate(225deg); + } + } + } + } + &.collapse-open { + &.collapse-arrow { + > .collapse-title:after { + @media (prefers-reduced-motion: no-preference) { + transform: translateY(-50%) rotate(225deg); + } + } + } + &.collapse-plus { + > .collapse-title:after { + --tw-content: "−"; + content: var(--tw-content); + } + } + } + &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) { + > .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + &.collapse-arrow:not(.collapse-close) { + > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { + transform: translateY(-50%) rotate(225deg); + } + } + &[open] { + &.collapse-plus { + > .collapse-title:after { + --tw-content: "−"; + content: var(--tw-content); + } + } + } + &[tabindex].collapse-plus:focus:not(.collapse-close) { + > .collapse-title:after { + --tw-content: "−"; + content: var(--tw-content); + } + } + &.collapse-plus:not(.collapse-close) { + > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { + --tw-content: "−"; + content: var(--tw-content); + } + } + } + &:is(details) { + @layer daisyui.l1.l2.l3 { + width: 100%; + @media (prefers-reduced-motion: no-preference) { + &::details-content { + transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out, height 0.2s; + height: 0; + interpolate-size: allow-keywords; + } + &:where([open])::details-content { + height: auto; + } + } + & summary { + position: relative; + display: block; + &::-webkit-details-marker { + display: none; + } + } + & > .collapse-content { + content-visibility: visible; + } + } + } + &:is(details) summary { + @layer daisyui.l1.l2.l3 { + outline: none; + } + } + } + .collapse-content { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-row-start: 1; + } + @layer daisyui.l1.l2.l3 { + content-visibility: hidden; + grid-column-start: 1; + grid-row-start: 2; + min-height: 0; + padding-left: 1rem; + padding-right: 1rem; + cursor: unset; + @supports not (content-visibility: hidden) { + visibility: hidden; + } + @media (prefers-reduced-motion: no-preference) { + transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out; + } + } + } + .collapse { + visibility: collapse; + } + .visible { + visibility: visible; + } + .list { + @layer daisyui.l1.l2.l3 { + display: flex; + flex-direction: column; + font-size: 0.875rem; + .list-row { + --list-grid-cols: minmax(0, auto) 1fr; + position: relative; + display: grid; + grid-auto-flow: column; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding: calc(0.25rem * 4); + word-break: break-word; + grid-template-columns: var(--list-grid-cols); + } + & > :not(:last-child) { + &.list-row, .list-row { + &:after { + content: ""; + border-bottom: var(--border) solid; + inset-inline: var(--radius-box); + position: absolute; + bottom: calc(0.25rem * 0); + border-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); + } + } + } + } + } + @layer daisyui.l1.l2 { + .list-row { + &:has(.list-col-grow:nth-child(1)) { + --list-grid-cols: 1fr; + } + &:has(.list-col-grow:nth-child(2)) { + --list-grid-cols: minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(3)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(4)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(5)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; + } + &:has(.list-col-grow:nth-child(6)) { + --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) + minmax(0, auto) 1fr; + } + > * { + grid-row-start: 1; + } + } + } + } + .toggle { + @layer daisyui.l1.l2.l3 { + border: var(--border) solid currentColor; + color: var(--input-color); + position: relative; + display: inline-grid; + flex-shrink: 0; + cursor: pointer; + appearance: none; + place-content: center; + vertical-align: middle; + webkit-user-select: none; + user-select: none; + grid-template-columns: 0fr 1fr 1fr; + --radius-selector-max: calc( + var(--radius-selector) + var(--radius-selector) + var(--radius-selector) + ); + border-radius: calc( var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)) ); + padding: var(--toggle-p); + box-shadow: 0 1px currentColor inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset; + } + transition: color 0.3s, grid-template-columns 0.2s; + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000); + } + --toggle-p: calc(var(--size) * 0.125); + --size: calc(var(--size-selector, 0.25rem) * 6); + width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2); + height: var(--size); + > * { + z-index: 1; + grid-column: span 1 / span 1; + grid-column-start: 2; + grid-row-start: 1; + height: 100%; + cursor: pointer; + appearance: none; + background-color: transparent; + padding: calc(0.25rem * 0.5); + transition: opacity 0.2s, rotate 0.4s; + border: none; + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:nth-child(2) { + color: var(--color-base-100); + rotate: 0deg; + } + &:nth-child(3) { + color: var(--color-base-100); + opacity: 0%; + rotate: -15deg; + } + } + &:has(:checked) { + > :nth-child(2) { + opacity: 0%; + rotate: 15deg; + } + > :nth-child(3) { + opacity: 100%; + rotate: 0deg; + } + } + &:before { + position: relative; + inset-inline-start: calc(0.25rem * 0); + grid-column-start: 2; + grid-row-start: 1; + aspect-ratio: 1 / 1; + height: 100%; + width: 100%; + border-radius: var(--radius-selector); + background-color: currentcolor; + translate: 0; + --tw-content: ""; + content: var(--tw-content); + transition: background-color 0.1s, translate 0.2s, inset-inline-start 0.2s; + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000); + } + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + } + @media (forced-colors: active) { + &:before { + outline-style: var(--tw-outline-style); + outline-width: 1px; + outline-offset: calc(1px * -1); + } + } + @media print { + &:before { + outline: 0.25rem solid; + outline-offset: -1rem; + } + } + &:focus-visible, &:has(:focus-visible) { + outline: 2px solid currentColor; + outline-offset: 2px; + } + &:checked, &[aria-checked="true"], &:has(> input:checked) { + grid-template-columns: 1fr 1fr 0fr; + background-color: var(--color-base-100); + --input-color: var(--color-base-content); + &:before { + background-color: currentcolor; + } + @starting-style { + &:before { + opacity: 0; + } + } + } + &:indeterminate { + grid-template-columns: 0.5fr 1fr 0.5fr; + } + &:disabled { + cursor: not-allowed; + opacity: 30%; + &:before { + background-color: transparent; + border: var(--border) solid currentColor; + } + } + } + } + .input { + @layer daisyui.l1.l2.l3 { + cursor: text; + border: var(--border) solid #0000; + position: relative; + display: inline-flex; + flex-shrink: 1; + appearance: none; + align-items: center; + gap: calc(0.25rem * 2); + background-color: var(--color-base-100); + padding-inline: calc(0.25rem * 3); + vertical-align: middle; + white-space: nowrap; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + font-size: max(var(--font-size, 0.875rem), 0.875rem); + touch-action: manipulation; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + border-color: var(--input-color); + box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + } + --size: calc(var(--size-field, 0.25rem) * 10); + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + &:where(input) { + display: inline-flex; + } + :where(input) { + display: inline-flex; + height: 100%; + width: 100%; + appearance: none; + background-color: transparent; + border: none; + &:focus, &:focus-within { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + :where(input[type="url"]), :where(input[type="email"]) { + direction: ltr; + } + :where(input[type="date"]) { + display: inline-flex; + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px var(--input-color); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); + } + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + } + @media (pointer: coarse) { + @supports (-webkit-touch-callout: none) { + &:focus, &:focus-within { + --font-size: 1rem; + } + } + } + &:has(> input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + &::placeholder { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + box-shadow: none; + } + &:has(> input[disabled]) > input[disabled] { + cursor: not-allowed; + } + &::-webkit-date-and-time-value { + text-align: inherit; + } + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -3); + } + } + &::-webkit-calendar-picker-indicator { + position: absolute; + inset-inline-end: 0.75em; + } + &:has(> input[type="date"]) { + :where(input[type="date"]) { + display: inline-flex; + webkit-appearance: none; + appearance: none; + } + input[type="date"]::-webkit-calendar-picker-indicator { + position: absolute; + inset-inline-end: 0.75em; + width: 1em; + height: 1em; + cursor: pointer; + } + } + } + } + .indicator { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + width: max-content; + :where(.indicator-item) { + z-index: 1; + position: absolute; + white-space: nowrap; + top: var(--indicator-t, 0); + bottom: var(--indicator-b, auto); + left: var(--indicator-s, auto); + right: var(--indicator-e, 0); + translate: var(--indicator-x, 50%) var(--indicator-y, -50%); + } + } + } + .table { + @layer daisyui.l1.l2.l3 { + font-size: 0.875rem; + position: relative; + width: 100%; + border-collapse: separate; + --tw-border-spacing-x: calc(0.25rem * 0); + --tw-border-spacing-y: calc(0.25rem * 0); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + border-radius: var(--radius-box); + text-align: left; + &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { + text-align: right; + } + tr.row-hover { + &, &:nth-child(even) { + &:hover { + @media (hover: hover) { + background-color: var(--color-base-200); + } + } + } + } + :where(th, td) { + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + vertical-align: middle; + } + :where(thead, tfoot) { + white-space: nowrap; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + font-size: 0.875rem; + font-weight: 600; + } + :where(tfoot tr:first-child :is(td, th)) { + border-top: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); + } + } + :where(.table-pin-rows thead tr) { + position: sticky; + top: calc(0.25rem * 0); + z-index: 1; + background-color: var(--color-base-100); + } + :where(.table-pin-rows tfoot tr) { + position: sticky; + bottom: calc(0.25rem * 0); + z-index: 1; + background-color: var(--color-base-100); + } + :where(.table-pin-cols tr th) { + position: sticky; + right: calc(0.25rem * 0); + left: calc(0.25rem * 0); + background-color: var(--color-base-100); + } + :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) { + border-bottom: var(--border) solid var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); + } + } + } + } + .steps { + @layer daisyui.l1.l2.l3 { + display: inline-grid; + grid-auto-flow: column; + overflow: hidden; + overflow-x: auto; + counter-reset: step; + grid-auto-columns: 1fr; + .step { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: auto; + grid-template-rows: repeat(2, minmax(0, 1fr)); + grid-template-rows: 40px 1fr; + place-items: center; + text-align: center; + min-width: 4rem; + --step-bg: var(--color-base-300); + --step-fg: var(--color-base-content); + &:before { + top: calc(0.25rem * 0); + grid-column-start: 1; + grid-row-start: 1; + height: calc(0.25rem * 2); + width: 100%; + border: 1px solid; + color: var(--step-bg); + background-color: var(--step-bg); + content: ""; + margin-inline-start: -100%; + } + > .step-icon, &:not(:has(.step-icon)):after { + --tw-content: counter(step); + content: var(--tw-content); + counter-increment: step; + z-index: 1; + color: var(--step-fg); + background-color: var(--step-bg); + border: 1px solid var(--step-bg); + position: relative; + grid-column-start: 1; + grid-row-start: 1; + display: grid; + height: calc(0.25rem * 8); + width: calc(0.25rem * 8); + place-items: center; + place-self: center; + border-radius: calc(infinity * 1px); + } + &:first-child:before { + --tw-content: none; + content: var(--tw-content); + } + &[data-content]:after { + --tw-content: attr(data-content); + content: var(--tw-content); + } + } + } + @layer daisyui.l1.l2 { + .step-neutral { + + .step-neutral:before, &:after, > .step-icon { + --step-bg: var(--color-neutral); + --step-fg: var(--color-neutral-content); + } + } + .step-primary { + + .step-primary:before, &:after, > .step-icon { + --step-bg: var(--color-primary); + --step-fg: var(--color-primary-content); + } + } + .step-secondary { + + .step-secondary:before, &:after, > .step-icon { + --step-bg: var(--color-secondary); + --step-fg: var(--color-secondary-content); + } + } + .step-accent { + + .step-accent:before, &:after, > .step-icon { + --step-bg: var(--color-accent); + --step-fg: var(--color-accent-content); + } + } + .step-info { + + .step-info:before, &:after, > .step-icon { + --step-bg: var(--color-info); + --step-fg: var(--color-info-content); + } + } + .step-success { + + .step-success:before, &:after, > .step-icon { + --step-bg: var(--color-success); + --step-fg: var(--color-success-content); + } + } + .step-warning { + + .step-warning:before, &:after, > .step-icon { + --step-bg: var(--color-warning); + --step-fg: var(--color-warning-content); + } + } + .step-error { + + .step-error:before, &:after, > .step-icon { + --step-bg: var(--color-error); + --step-fg: var(--color-error-content); + } + } + } + } + .range { + @layer daisyui.l1.l2.l3 { + appearance: none; + webkit-appearance: none; + --range-thumb: var(--color-base-100); + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 6); + --range-progress: currentColor; + --range-fill: 1; + --range-p: 0.25rem; + --range-bg: currentColor; + @supports (color: color-mix(in lab, red, red)) { + --range-bg: color-mix(in oklab, currentColor 10%, #0000); + } + cursor: pointer; + overflow: hidden; + background-color: transparent; + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + --radius-selector-max: calc( + var(--radius-selector) + var(--radius-selector) + var(--radius-selector) + ); + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + border: none; + height: var(--range-thumb-size); + [dir="rtl"] & { + --range-dir: -1; + } + &:focus { + outline: none; + } + &:focus-visible { + outline: 2px solid; + outline-offset: 2px; + } + &::-webkit-slider-runnable-track { + width: 100%; + background-color: var(--range-bg); + border-radius: var(--radius-selector); + height: calc(var(--range-thumb-size) * 0.5); + } + @media (forced-colors: active) { + &::-webkit-slider-runnable-track { + border: 1px solid; + } + } + @media (forced-colors: active) { + &::-moz-range-track { + border: 1px solid; + } + } + &::-webkit-slider-thumb { + position: relative; + box-sizing: border-box; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + background-color: var(--range-thumb); + height: var(--range-thumb-size); + width: var(--range-thumb-size); + border: var(--range-p) solid; + appearance: none; + webkit-appearance: none; + top: 50%; + color: var(--range-progress); + transform: translateY(-50%); + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); + } + } + &::-moz-range-track { + width: 100%; + background-color: var(--range-bg); + border-radius: var(--radius-selector); + height: calc(var(--range-thumb-size) * 0.5); + } + &::-moz-range-thumb { + position: relative; + box-sizing: border-box; + border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); + background-color: currentColor; + height: var(--range-thumb-size); + width: var(--range-thumb-size); + border: var(--range-p) solid; + top: 50%; + color: var(--range-progress); + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill)); + } + } + &:disabled { + cursor: not-allowed; + opacity: 30%; + } + } + } + .select { + @layer daisyui.l1.l2.l3 { + border: var(--border) solid #0000; + position: relative; + display: inline-flex; + flex-shrink: 1; + appearance: none; + align-items: center; + gap: calc(0.25rem * 1.5); + background-color: var(--color-base-100); + padding-inline-start: calc(0.25rem * 3); + padding-inline-end: calc(0.25rem * 7); + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + height: var(--size); + font-size: 0.875rem; + touch-action: manipulation; + border-start-start-radius: var(--join-ss, var(--radius-field)); + border-start-end-radius: var(--join-se, var(--radius-field)); + border-end-start-radius: var(--join-es, var(--radius-field)); + border-end-end-radius: var(--join-ee, var(--radius-field)); + background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); + background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); + background-size: 4px 4px, 4px 4px; + background-repeat: no-repeat; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + } + border-color: var(--input-color); + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + --size: calc(var(--size-field, 0.25rem) * 10); + [dir="rtl"] & { + background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%); + &::picker(select), select::picker(select) { + translate: 0.5rem 0; + } + } + &[multiple] { + height: auto; + overflow: auto; + padding-block: calc(0.25rem * 3); + padding-inline-end: calc(0.25rem * 3); + background-image: none; + } + select { + margin-inline-start: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -7); + width: calc(100% + 2.75rem); + appearance: none; + padding-inline-start: calc(0.25rem * 3); + padding-inline-end: calc(0.25rem * 7); + height: calc(100% - calc(var(--border) * 2)); + align-items: center; + background: inherit; + border-radius: inherit; + border-style: none; + &:focus, &:focus-within { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:not(:last-child) { + margin-inline-end: calc(0.25rem * -5.5); + background-image: none; + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px var(--input-color); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); + } + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + } + &:has(> select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + &::placeholder { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + &:has(> select[disabled]) > select[disabled] { + cursor: not-allowed; + } + &, & select { + @supports (appearance: base-select) { + appearance: base-select; + } + @supports (appearance: base-select) { + &::picker(select) { + appearance: base-select; + } + } + &::picker(select) { + color: inherit; + max-height: min(24rem, 70dvh); + margin-inline: 0.5rem; + translate: -0.5rem 0; + border: var(--border) solid var(--color-base-200); + margin-block: calc(0.25rem * 2); + border-radius: var(--radius-box); + padding: calc(0.25rem * 2); + background-color: inherit; + box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2); + box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1)); + } + &::picker-icon { + display: none; + } + optgroup { + padding-top: 0.5em; + option { + &:nth-child(1) { + margin-top: 0.5em; + } + } + } + option { + border-radius: var(--radius-field); + padding-inline: calc(0.25rem * 3); + padding-block: calc(0.25rem * 1.5); + transition-property: color, background-color; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + white-space: normal; + &:not(:disabled) { + &:hover, &:focus-visible { + cursor: pointer; + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:active { + background-color: var(--color-neutral); + color: var(--color-neutral-content); + box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral); + } + } + } + } + } + } + .timeline { + @layer daisyui.l1.l2.l3 { + position: relative; + display: flex; + > li { + position: relative; + display: grid; + flex-shrink: 0; + align-items: center; + grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var( --timeline-row-end, minmax(0, 1fr) ); + grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var( --timeline-col-end, minmax(0, 1fr) ); + > hr { + border: none; + width: 100%; + &:first-child { + grid-column-start: 1; + grid-row-start: 2; + } + &:last-child { + grid-column-start: 3; + grid-column-end: none; + grid-row-start: 2; + grid-row-end: auto; + } + @media print { + border: 0.1px solid var(--color-base-300); + } + } + } + :where(hr) { + height: calc(0.25rem * 1); + background-color: var(--color-base-300); + } + &:has(.timeline-middle hr) { + &:first-child { + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: var(--radius-selector); + border-end-end-radius: var(--radius-selector); + } + &:last-child { + border-start-start-radius: var(--radius-selector); + border-end-start-radius: var(--radius-selector); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + &:not(:has(.timeline-middle)) { + :first-child hr:last-child { + border-start-start-radius: var(--radius-selector); + border-end-start-radius: var(--radius-selector); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + :last-child hr:first-child { + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: var(--radius-selector); + border-end-end-radius: var(--radius-selector); + } + } + } + } + .swap { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-grid; + cursor: pointer; + place-content: center; + vertical-align: middle; + webkit-user-select: none; + user-select: none; + input { + appearance: none; + border: none; + } + > * { + grid-column-start: 1; + grid-row-start: 1; + @media (prefers-reduced-motion: no-preference) { + transition-property: transform, rotate, opacity; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + } + .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on { + opacity: 0%; + } + input:is(:checked, :indeterminate) { + & ~ .swap-off { + opacity: 0%; + } + } + input:checked ~ .swap-on, input:indeterminate ~ .swap-indeterminate { + opacity: 100%; + backface-visibility: visible; + } + } + } + .collapse-title { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-row-start: 1; + } + @layer daisyui.l1.l2.l3 { + position: relative; + width: 100%; + padding: 1rem; + padding-inline-end: 3rem; + min-height: 1lh; + transition: background-color 0.2s ease-out; + } + } + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + white-space: nowrap; + border-width: 0; + } + .menu-horizontal { + @layer daisyui.l1.l2 { + display: inline-flex; + flex-direction: row; + & > li:not(.menu-title) > details { + & > ul { + position: absolute; + margin-inline-start: calc(0.25rem * 0); + margin-top: calc(0.25rem * 4); + transform-origin: top; + border-radius: var(--radius-box); + background-color: var(--color-base-100); + padding-block: calc(0.25rem * 2); + padding-inline-end: calc(0.25rem * 2); + opacity: 0%; + scale: 95%; + box-shadow: 0 1px 3px 0 oklch(0% 0 0/0.1), 0 1px 2px -1px oklch(0% 0 0/0.1); + @media (prefers-reduced-motion: no-preference) { + @starting-style { + scale: 95%; + opacity: 0; + } + animation: menu 0.2s; + transition-property: opacity, scale, display; + transition-behavior: allow-discrete; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + } + &[open] > ul { + opacity: 100%; + scale: 100%; + } + } + & > li > details > ul { + &:before { + --tw-content: none; + content: var(--tw-content); + } + } + } + } + .avatar { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + vertical-align: middle; + & > div { + display: block; + aspect-ratio: 1 / 1; + overflow: hidden; + } + img { + height: 100%; + width: 100%; + object-fit: cover; + } + } + } + .checkbox { + @layer daisyui.l1.l2.l3 { + border: var(--border) solid var(--input-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); + } + position: relative; + display: inline-block; + flex-shrink: 0; + cursor: pointer; + appearance: none; + border-radius: var(--radius-selector); + padding: calc(0.25rem * 1); + vertical-align: middle; + color: var(--color-base-content); + box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000; + transition: background-color 0.2s, box-shadow 0.2s; + --size: calc(var(--size-selector, 0.25rem) * 6); + width: var(--size); + height: var(--size); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + &:before { + --tw-content: ""; + content: var(--tw-content); + display: block; + width: 100%; + height: 100%; + rotate: 45deg; + background-color: currentcolor; + opacity: 0%; + transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s; + transition-delay: 0.1s; + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); + box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + font-size: 1rem; + line-height: 0.75; + } + &:focus-visible { + outline: 2px solid var(--input-color, currentColor); + outline-offset: 2px; + } + &:checked, &[aria-checked="true"] { + background-color: var(--input-color, #0000); + box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); + &:before { + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); + opacity: 100%; + } + @media (forced-colors: active) { + &:before { + rotate: 0deg; + background-color: transparent; + --tw-content: "✔︎"; + clip-path: none; + } + } + @media print { + &:before { + rotate: 0deg; + background-color: transparent; + --tw-content: "✔︎"; + clip-path: none; + } + } + } + &:indeterminate { + background-color: var( --input-color, var(--color-base-content) ); + @supports (color: color-mix(in lab, red, red)) { + background-color: var( --input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000) ); + } + &:before { + rotate: 0deg; + opacity: 100%; + translate: 0 -35%; + clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); + } + } + } + &:disabled { + @layer daisyui.l1.l2 { + cursor: not-allowed; + opacity: 20%; + } + } + } + .radio { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-block; + flex-shrink: 0; + cursor: pointer; + appearance: none; + border-radius: calc(infinity * 1px); + padding: calc(0.25rem * 1); + vertical-align: middle; + border: var(--border) solid var(--input-color, currentColor); + @supports (color: color-mix(in lab, red, red)) { + border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000)); + } + box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset; + --size: calc(var(--size-selector, 0.25rem) * 6); + width: var(--size); + height: var(--size); + color: var(--input-color, currentColor); + &:before { + display: block; + width: 100%; + height: 100%; + border-radius: calc(infinity * 1px); + --tw-content: ""; + content: var(--tw-content); + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + } + &:focus-visible { + outline: 2px solid currentColor; + } + &:checked, &[aria-checked="true"] { + border-color: currentcolor; + background-color: var(--color-base-100); + @media (prefers-reduced-motion: no-preference) { + animation: radio 0.2s ease-out; + } + &:before { + background-color: currentcolor; + box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)); + } + @media (forced-colors: active) { + &:before { + outline-style: var(--tw-outline-style); + outline-width: 1px; + outline-offset: calc(1px * -1); + } + } + @media print { + &:before { + outline: 0.25rem solid; + outline-offset: -1rem; + } + } + } + } + &:disabled { + @layer daisyui.l1.l2 { + cursor: not-allowed; + opacity: 20%; + } + } + } + .rating { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-flex; + vertical-align: middle; + & input { + border: none; + appearance: none; + } + :where(*) { + height: calc(0.25rem * 6); + width: calc(0.25rem * 6); + border-radius: 0; + background-color: var(--color-base-content); + opacity: 20%; + @media (prefers-reduced-motion: no-preference) { + animation: rating 0.25s ease-out; + } + &:is(input) { + cursor: pointer; + } + } + & .rating-hidden { + width: calc(0.25rem * 2); + background-color: transparent; + } + input[type="radio"]:checked { + background-image: none; + } + * { + &:checked, &[aria-checked="true"], &[aria-current="true"], &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) { + opacity: 100%; + } + &:focus-visible { + scale: 1.1; + @media (prefers-reduced-motion: no-preference) { + transition: scale 0.2s ease-out; + } + } + } + & *:active:focus { + animation: none; + scale: 1.1; + } + } + @layer daisyui.l1.l2 { + &.rating-xs :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 4); + height: calc(0.25rem * 4); + } + &.rating-sm :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 5); + height: calc(0.25rem * 5); + } + &.rating-md :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 6); + height: calc(0.25rem * 6); + } + &.rating-lg :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 7); + height: calc(0.25rem * 7); + } + &.rating-xl :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 8); + height: calc(0.25rem * 8); + } + } + } + .rating\! { + @layer daisyui.l1.l2.l3 { + position: relative !important; + display: inline-flex !important; + vertical-align: middle !important; + & input { + border: none !important; + appearance: none !important; + } + :where(*) { + height: calc(0.25rem * 6) !important; + width: calc(0.25rem * 6) !important; + border-radius: 0 !important; + background-color: var(--color-base-content) !important; + opacity: 20% !important; + @media (prefers-reduced-motion: no-preference) { + animation: rating 0.25s ease-out !important; + } + &:is(input) { + cursor: pointer !important; + } + } + & .rating-hidden { + width: calc(0.25rem * 2) !important; + background-color: transparent !important; + } + input[type="radio"]:checked { + background-image: none !important; + } + * { + &:checked, &[aria-checked="true"], &[aria-current="true"], &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) { + opacity: 100% !important; + } + &:focus-visible { + scale: 1.1 !important; + @media (prefers-reduced-motion: no-preference) { + transition: scale 0.2s ease-out !important; + } + } + } + & *:active:focus { + animation: none !important; + scale: 1.1 !important; + } + } + @layer daisyui.l1.l2 { + &.rating-xs :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 4) !important; + height: calc(0.25rem * 4) !important; + } + &.rating-sm :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 5) !important; + height: calc(0.25rem * 5) !important; + } + &.rating-md :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 6) !important; + height: calc(0.25rem * 6) !important; + } + &.rating-lg :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 7) !important; + height: calc(0.25rem * 7) !important; + } + &.rating-xl :where(*:not(.rating-hidden)) { + width: calc(0.25rem * 8) !important; + height: calc(0.25rem * 8) !important; + } + } + } + .navbar { + @layer daisyui.l1.l2.l3 { + display: flex; + width: 100%; + align-items: center; + padding: 0.5rem; + min-height: 4rem; + } + :where(&) { + @layer daisyui.l1.l2 { + position: relative; + } + } + } + .drawer { + @layer daisyui.l1.l2.l3 { + position: relative; + display: grid; + width: 100%; + grid-auto-columns: max-content auto; + } + } + .card { + @layer daisyui.l1.l2.l3 { + position: relative; + display: flex; + flex-direction: column; + border-radius: var(--radius-box); + outline-width: 2px; + transition: outline 0.2s ease-in-out; + outline: 0 solid #0000; + outline-offset: 2px; + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible { + outline-color: currentColor; + } + :where(figure:first-child) { + overflow: hidden; + border-start-start-radius: inherit; + border-start-end-radius: inherit; + border-end-start-radius: unset; + border-end-end-radius: unset; + } + :where(figure:last-child) { + overflow: hidden; + border-start-start-radius: unset; + border-start-end-radius: unset; + border-end-start-radius: inherit; + border-end-end-radius: inherit; + } + figure { + display: flex; + align-items: center; + justify-content: center; + } + &:has(> input:is(input[type="checkbox"], input[type="radio"])) { + cursor: pointer; + user-select: none; + } + &:has(> :checked) { + outline: 2px solid currentColor; + } + } + } + .stats { + @layer daisyui.l1.l2.l3 { + position: relative; + display: inline-grid; + grid-auto-flow: column; + overflow-x: auto; + border-radius: var(--radius-box); + } + } + .progress { + @layer daisyui.l1.l2.l3 { + position: relative; + height: calc(0.25rem * 2); + width: 100%; + appearance: none; + overflow: hidden; + border-radius: var(--radius-box); + background-color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, currentcolor 20%, transparent); + } + color: var(--color-base-content); + &:indeterminate { + background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); + background-size: 200%; + background-position-x: 15%; + @media (prefers-reduced-motion: no-preference) { + animation: progress 5s ease-in-out infinite; + } + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + background-color: transparent; + @media (prefers-reduced-motion: no-preference) { + animation: progress 5s ease-in-out infinite; + background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% ); + background-size: 200%; + background-position-x: 15%; + } + } + } + } + @supports (-moz-appearance: none) { + &::-moz-progress-bar { + border-radius: var(--radius-box); + background-color: currentcolor; + } + } + @supports (-webkit-appearance: none) { + &::-webkit-progress-bar { + border-radius: var(--radius-box); + background-color: transparent; + } + &::-webkit-progress-value { + border-radius: var(--radius-box); + background-color: currentColor; + } + } + } + } + .absolute { + position: absolute; + } + .fixed { + position: fixed; + } + .relative { + position: relative; + } + .tooltip-bottom { + @layer daisyui.l1.l2 { + > .tooltip-content, &[data-tip]:before { + transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)); + inset: var(--tt-off) auto auto 50%; + } + &:after { + transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg); + inset: var(--tt-tail) auto auto 50%; + } + } + } + .tooltip-left { + @layer daisyui.l1.l2 { + > .tooltip-content, &[data-tip]:before { + transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%); + inset: 50% var(--tt-off) auto auto; + } + &:after { + transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg); + inset: 50% calc(var(--tt-tail) + 1px) auto auto; + } + } + } + .tooltip-right { + @layer daisyui.l1.l2 { + > .tooltip-content, &[data-tip]:before { + transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%); + inset: 50% auto auto var(--tt-off); + } + &:after { + transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg); + inset: 50% auto auto calc(var(--tt-tail) + 1px); + } + } + } + .tooltip-top { + @layer daisyui.l1.l2 { + > .tooltip-content, &[data-tip]:before { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-off) 50%; + } + &:after { + transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)); + inset: auto auto var(--tt-tail) 50%; + } + } + } + .inset-0 { + inset: calc(var(--spacing) * 0); + } + .inset-y-0 { + inset-block: calc(var(--spacing) * 0); + } + .dropdown-right { + @layer daisyui.l1.l2 { + --anchor-h: right; + --anchor-v: span-bottom; + .dropdown-content { + inset-inline-start: 100%; + top: calc(0.25rem * 0); + bottom: auto; + transform-origin: 0; + } + } + } + .start { + inset-inline-start: var(--spacing); + } + .dropdown-left { + @layer daisyui.l1.l2 { + --anchor-h: left; + --anchor-v: span-bottom; + .dropdown-content { + inset-inline-end: 100%; + top: calc(0.25rem * 0); + bottom: auto; + transform-origin: 100%; + } + } + } + .dropdown-end { + @layer daisyui.l1.l2 { + --anchor-h: span-left; + :where(.dropdown-content) { + inset-inline-end: calc(0.25rem * 0); + translate: 0 0; + [dir="rtl"] & { + translate: 0 0; + } + } + &.dropdown-left { + --anchor-h: left; + --anchor-v: span-top; + .dropdown-content { + top: auto; + bottom: calc(0.25rem * 0); + } + } + &.dropdown-right { + --anchor-h: right; + --anchor-v: span-top; + .dropdown-content { + top: auto; + bottom: calc(0.25rem * 0); + } + } + } + } + .end { + inset-inline-end: var(--spacing); + } + .dropdown-bottom { + @layer daisyui.l1.l2 { + --anchor-v: bottom; + .dropdown-content { + top: 100%; + bottom: auto; + transform-origin: top; + } + } + } + .dropdown-top { + @layer daisyui.l1.l2 { + --anchor-v: top; + .dropdown-content { + top: auto; + bottom: 100%; + transform-origin: bottom; + } + } + } + .-top-1 { + top: calc(var(--spacing) * -1); + } + .top-0 { + top: calc(var(--spacing) * 0); + } + .top-2 { + top: calc(var(--spacing) * 2); + } + .top-4 { + top: calc(var(--spacing) * 4); + } + .top-6 { + top: calc(var(--spacing) * 6); + } + .top-10 { + top: calc(var(--spacing) * 10); + } + .-right-2 { + right: calc(var(--spacing) * -2); + } + .right-0 { + right: calc(var(--spacing) * 0); + } + .right-1\/4 { + right: calc(1 / 4 * 100%); + } + .right-3 { + right: calc(var(--spacing) * 3); + } + .right-6 { + right: calc(var(--spacing) * 6); + } + .-bottom-5 { + bottom: calc(var(--spacing) * -5); + } + .bottom-6 { + bottom: calc(var(--spacing) * 6); + } + .bottom-10 { + bottom: calc(var(--spacing) * 10); + } + .left-0 { + left: calc(var(--spacing) * 0); + } + .left-1\/2 { + left: calc(1 / 2 * 100%); + } + .left-1\/4 { + left: calc(1 / 4 * 100%); + } + .left-2 { + left: calc(var(--spacing) * 2); + } + .left-3 { + left: calc(var(--spacing) * 3); + } + .left-4 { + left: calc(var(--spacing) * 4); + } + .left-6 { + left: calc(var(--spacing) * 6); + } + .textarea { + @layer daisyui.l1.l2.l3 { + border: var(--border) solid #0000; + min-height: calc(0.25rem * 20); + flex-shrink: 1; + appearance: none; + border-radius: var(--radius-field); + background-color: var(--color-base-100); + padding-block: calc(0.25rem * 2); + vertical-align: middle; + width: clamp(3rem, 20rem, 100%); + padding-inline-start: 0.75rem; + padding-inline-end: 0.75rem; + font-size: max(var(--font-size, 0.875rem), 0.875rem); + touch-action: manipulation; + border-color: var(--input-color); + box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; + } + --input-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); + } + textarea { + appearance: none; + background-color: transparent; + border: none; + &:focus, &:focus-within { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + } + &:focus, &:focus-within { + --input-color: var(--color-base-content); + box-shadow: 0 1px var(--input-color); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); + } + outline: 2px solid var(--input-color); + outline-offset: 2px; + isolation: isolate; + } + @media (pointer: coarse) { + @supports (-webkit-touch-callout: none) { + &:focus, &:focus-within { + --font-size: 1rem; + } + } + } + &:has(> textarea[disabled]), &:is(:disabled, [disabled]) { + cursor: not-allowed; + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 40%, transparent); + } + &::placeholder { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + box-shadow: none; + } + &:has(> textarea[disabled]) > textarea[disabled] { + cursor: not-allowed; + } + } + } + .btn-active { + @layer daisyui.l1.l2 { + --btn-bg: var(--btn-color, var(--color-base-200)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); + } + --btn-shadow: 0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0); + isolation: isolate; + } + } + .stack { + @layer daisyui.l1.l2.l3 { + display: inline-grid; + grid-template-columns: 3px 4px 1fr 4px 3px; + grid-template-rows: 3px 4px 1fr 4px 3px; + & > * { + height: 100%; + width: 100%; + &:nth-child(n + 2) { + width: 100%; + opacity: 70%; + } + &:nth-child(2) { + z-index: 2; + opacity: 90%; + } + &:nth-child(1) { + z-index: 3; + width: 100%; + } + } + } + @layer daisyui.l1.l2 { + &, &.stack-bottom { + > * { + grid-column: 3 / 4; + grid-row: 3 / 6; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 6; + grid-row: 1 / 4; + } + } + } + &.stack-top { + > * { + grid-column: 3 / 4; + grid-row: 1 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 6; + grid-row: 3 / 6; + } + } + } + &.stack-start { + > * { + grid-column: 1 / 4; + grid-row: 3 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 3 / 6; + grid-row: 1 / 6; + } + } + } + &.stack-end { + > * { + grid-column: 3 / 6; + grid-row: 3 / 4; + &:nth-child(2) { + grid-column: 2 / 5; + grid-row: 2 / 5; + } + &:nth-child(1) { + grid-column: 1 / 4; + grid-row: 1 / 6; + } + } + } + } + } + .modal-backdrop { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-row-start: 1; + display: grid; + align-self: stretch; + justify-self: stretch; + color: transparent; + z-index: -1; + button { + cursor: pointer; + } + } + } + .tabs-box { + @layer daisyui.l1.l2 { + background-color: var(--color-base-200); + padding: calc(0.25rem * 1); + --tabs-box-radius: calc(3 * var(--radius-field)); + border-radius: calc( min(var(--tab-height) / 2, var(--radius-field)) + min(0.25rem, var(--tabs-box-radius)) ); + box-shadow: 0 -0.5px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0.5px oklch(0% 0 0 / calc(var(--depth) * 0.05)) inset; + > .tab { + border-radius: var(--radius-field); + border-style: none; + &:focus-visible, &:is(label:has(:checked:focus-visible)) { + outline-offset: 2px; + } + &:focus-visible { + z-index: 1; + } + } + > :is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]):not( .tab-disabled, [disabled] ), > :is(input:checked), > :is(label:has(:checked)) { + background-color: var(--tab-bg, var(--color-base-100)); + box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 1px -1px var(--color-neutral), 0 1px 6px -4px var(--color-neutral); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000); + } + @media (forced-colors: active) { + border: 1px solid; + } + } + > .tab-content { + margin-top: calc(0.25rem * 1); + height: calc(100% - var(--tab-height) + var(--border) - 0.5rem); + border-radius: calc( min(var(--tab-height) / 2, var(--radius-field)) + min(0.25rem, var(--tabs-box-radius)) - var(--border) ); + } + } + } + .-z-0 { + z-index: calc(0 * -1); + } + .z-10 { + z-index: 10; + } + .z-20 { + z-index: 20; + } + .z-50 { + z-index: 50; + } + .z-90 { + z-index: 90; + } + .z-\[1\] { + z-index: 1; + } + .z-\[50\] { + z-index: 50; + } + .z-\[90\] { + z-index: 90; + } + .z-\[100\] { + z-index: 100; + } + .z-\[110\] { + z-index: 110; + } + .z-\[9999\] { + z-index: 9999; + } + .order-0 { + order: 0; + } + .order-1 { + order: 1; + } + .order-2 { + order: 2; + } + .order-3 { + order: 3; + } + .order-4 { + order: 4; + } + .timeline-end { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; + margin: calc(0.25rem * 1); + align-self: flex-start; + justify-self: center; + } + } + .timeline-start { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; + margin: calc(0.25rem * 1); + align-self: flex-end; + justify-self: center; + } + } + .timeline-horizontal { + @layer daisyui.l1.l2 { + flex-direction: row; + > li { + align-items: center; + > hr { + height: calc(0.25rem * 1); + width: 100%; + &:first-child { + grid-column-start: 1; + grid-row-start: 2; + } + &:last-child { + grid-column-start: 3; + grid-column-end: none; + grid-row-start: 2; + grid-row-end: auto; + } + } + } + .timeline-start { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 2; + align-self: flex-end; + justify-self: center; + } + .timeline-end { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; + align-self: flex-start; + justify-self: center; + } + &:has(.timeline-middle) { + > li { + > hr { + &:first-child { + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: var(--radius-selector); + border-end-end-radius: var(--radius-selector); + } + &:last-child { + border-start-start-radius: var(--radius-selector); + border-end-start-radius: var(--radius-selector); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + } + } + &:not(:has(.timeline-middle)) { + :first-child { + > hr:last-child { + border-start-start-radius: var(--radius-selector); + border-end-start-radius: var(--radius-selector); + border-start-end-radius: 0; + border-end-end-radius: 0; + } + } + :last-child { + > hr:first-child { + border-start-start-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: var(--radius-selector); + border-end-end-radius: var(--radius-selector); + } + } + } + } + } + .timeline-vertical { + @layer daisyui.l1.l2 { + flex-direction: column; + > li { + justify-items: center; + --timeline-row-start: minmax(0, 1fr); + --timeline-row-end: minmax(0, 1fr); + > hr { + height: 100%; + width: calc(0.25rem * 1); + &:first-child { + grid-column-start: 2; + grid-row-start: 1; + } + &:last-child { + grid-column-start: 2; + grid-column-end: auto; + grid-row-start: 3; + grid-row-end: none; + } + } + } + .timeline-start { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 1; + grid-row-end: 4; + align-self: center; + justify-self: flex-end; + } + .timeline-end { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 4; + align-self: center; + justify-self: flex-start; + } + &:has(.timeline-middle) { + > li { + > hr { + &:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: var(--radius-selector); + border-bottom-left-radius: var(--radius-selector); + } + &:last-child { + border-top-left-radius: var(--radius-selector); + border-top-right-radius: var(--radius-selector); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + } + } + } + &:not(:has(.timeline-middle)) { + :first-child { + > hr:last-child { + border-top-left-radius: var(--radius-selector); + border-top-right-radius: var(--radius-selector); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + } + :last-child { + > hr:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-right-radius: var(--radius-selector); + border-bottom-left-radius: var(--radius-selector); + } + } + } + &.timeline-snap-icon { + > li { + --timeline-col-start: minmax(0, 1fr); + --timeline-row-start: 0.5rem; + } + } + } + } + .timeline-compact { + @layer daisyui.l1.l2 { + --timeline-row-start: 0; + .timeline-start { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 3; + grid-row-end: 4; + align-self: flex-start; + justify-self: center; + } + li:has(.timeline-start) { + .timeline-end { + grid-column-start: none; + grid-row-start: auto; + } + } + &.timeline-vertical { + > li { + --timeline-col-start: 0; + } + .timeline-start { + grid-column-start: 3; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 4; + align-self: center; + justify-self: flex-start; + } + li:has(.timeline-start) { + .timeline-end { + grid-column-start: auto; + grid-row-start: none; + } + } + } + } + } + .stat-figure { + @layer daisyui.l1.l2.l3 { + grid-column-start: 2; + grid-row: span 3 / span 3; + grid-row-start: 1; + place-self: center; + justify-self: flex-end; + } + } + .modal-box { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + grid-row-start: 1; + max-height: 100vh; + width: calc(11/12 * 100%); + max-width: 32rem; + background-color: var(--color-base-100); + padding: calc(0.25rem * 6); + transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out; + border-top-left-radius: var(--modal-tl, var(--radius-box)); + border-top-right-radius: var(--modal-tr, var(--radius-box)); + border-bottom-left-radius: var(--modal-bl, var(--radius-box)); + border-bottom-right-radius: var(--modal-br, var(--radius-box)); + scale: 95%; + opacity: 0; + box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px; + overflow-y: auto; + overscroll-behavior: contain; + } + } + .drawer-content { + @layer daisyui.l1.l2.l3 { + grid-column-start: 2; + grid-row-start: 1; + min-width: calc(0.25rem * 0); + } + } + .timeline-middle { + @layer daisyui.l1.l2.l3 { + grid-column-start: 2; + grid-row-start: 2; + } + } + .drawer-end { + @layer daisyui.l1.l2 { + grid-auto-columns: auto max-content; + > .drawer-toggle { + ~ .drawer-content { + grid-column-start: 1; + } + ~ .drawer-side { + grid-column-start: 2; + justify-items: end; + } + ~ .drawer-side > :not(.drawer-overlay) { + translate: 100%; + [dir="rtl"] & { + translate: -100%; + } + } + &:checked ~ .drawer-side > :not(.drawer-overlay) { + translate: 0%; + } + } + } + } + .stat-value { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + white-space: nowrap; + font-size: 2rem; + font-weight: 800; + } + } + .stat-desc { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + white-space: nowrap; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + font-size: 0.75rem; + } + } + .stat-title { + @layer daisyui.l1.l2.l3 { + grid-column-start: 1; + white-space: nowrap; + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + font-size: 0.75rem; + } + } + .col-start-1 { + grid-column-start: 1; + } + .col-start-2 { + grid-column-start: 2; + } + .col-start-3 { + grid-column-start: 3; + } + .row-start-2 { + grid-row-start: 2; + } + .row-start-3 { + grid-row-start: 3; + } + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } + .divider { + @layer daisyui.l1.l2.l3 { + display: flex; + height: calc(0.25rem * 4); + flex-direction: row; + align-items: center; + align-self: stretch; + white-space: nowrap; + margin: var(--divider-m, 1rem 0); + --divider-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + --divider-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); + } + &:before, &:after { + content: ""; + height: calc(0.25rem * 0.5); + width: 100%; + flex-grow: 1; + background-color: var(--divider-color); + } + @media print { + &:before, &:after { + border: 0.5px solid; + } + } + &:not(:empty) { + gap: calc(0.25rem * 4); + } + } + } + .m-1 { + margin: calc(var(--spacing) * 1); + } + .filter { + @layer daisyui.l1.l2.l3 { + display: flex; + flex-wrap: wrap; + input[type="radio"] { + width: auto; + } + input { + overflow: hidden; + opacity: 100%; + scale: 1; + transition: margin 0.1s, opacity 0.3s, padding 0.3s, border-width 0.1s; + &:not(:last-child) { + margin-inline-end: calc(0.25rem * 1); + } + &.filter-reset { + aspect-ratio: 1 / 1; + &::after { + --tw-content: "×"; + content: var(--tw-content); + } + } + } + &:not(:has(input:checked:not(.filter-reset))) { + .filter-reset, input[type="reset"] { + scale: 0; + border-width: 0; + margin-inline: calc(0.25rem * 0); + width: calc(0.25rem * 0); + padding-inline: calc(0.25rem * 0); + opacity: 0%; + } + } + &:has(input:checked:not(.filter-reset)) { + input:not(:checked, .filter-reset, input[type="reset"]) { + scale: 0; + border-width: 0; + margin-inline: calc(0.25rem * 0); + width: calc(0.25rem * 0); + padding-inline: calc(0.25rem * 0); + opacity: 0%; + } + } + } + } + .mx-1 { + margin-inline: calc(var(--spacing) * 1); + } + .mx-auto { + margin-inline: auto; + } + .input-lg { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 12); + font-size: max(var(--font-size, 1.125rem), 1.125rem); + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -3); + } + } + } + } + .input-md { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 10); + font-size: max(var(--font-size, 0.875rem), 0.875rem); + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * -3); + } + } + } + } + .input-sm { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 8); + font-size: max(var(--font-size, 0.75rem), 0.75rem); + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -2); + margin-inline-end: calc(0.25rem * -3); + } + } + } + } + .input-xs { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 6); + font-size: max(var(--font-size, 0.6875rem), 0.6875rem); + &[type="number"] { + &::-webkit-inner-spin-button { + margin-block: calc(0.25rem * -1); + margin-inline-end: calc(0.25rem * -3); + } + } + } + } + .my-1 { + margin-block: calc(var(--spacing) * 1); + } + .my-4 { + margin-block: calc(var(--spacing) * 4); + } + .my-6 { + margin-block: calc(var(--spacing) * 6); + } + .my-16 { + margin-block: calc(var(--spacing) * 16); + } + .label { + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + gap: calc(0.25rem * 1.5); + white-space: nowrap; + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 60%, transparent); + } + &:has(input) { + cursor: pointer; + } + &:is(.input > *, .select > *) { + display: flex; + height: calc(100% - 0.5rem); + align-items: center; + padding-inline: calc(0.25rem * 3); + white-space: nowrap; + font-size: inherit; + &:first-child { + margin-inline-start: calc(0.25rem * -3); + margin-inline-end: calc(0.25rem * 3); + border-inline-end: var(--border) solid currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); + } + } + &:last-child { + margin-inline-start: calc(0.25rem * 3); + margin-inline-end: calc(0.25rem * -3); + border-inline-start: var(--border) solid currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); + } + } + } + } + } + .modal-action { + @layer daisyui.l1.l2.l3 { + margin-top: calc(0.25rem * 6); + display: flex; + justify-content: flex-end; + gap: calc(0.25rem * 2); + } + } + .-mt-10 { + margin-top: calc(var(--spacing) * -10); + } + .mt-0 { + margin-top: calc(var(--spacing) * 0); + } + .mt-1 { + margin-top: calc(var(--spacing) * 1); + } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } + .mt-3 { + margin-top: calc(var(--spacing) * 3); + } + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } + .mt-8 { + margin-top: calc(var(--spacing) * 8); + } + .mr-1 { + margin-right: calc(var(--spacing) * 1); + } + .mr-2 { + margin-right: calc(var(--spacing) * 2); + } + .fieldset-legend { + @layer daisyui.l1.l2.l3 { + margin-bottom: calc(0.25rem * -1); + display: flex; + align-items: center; + justify-content: space-between; + gap: calc(0.25rem * 2); + padding-block: calc(0.25rem * 2); + color: var(--color-base-content); + font-weight: 600; + } + } + .mb-1 { + margin-bottom: calc(var(--spacing) * 1); + } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } + .mb-4 { + margin-bottom: calc(var(--spacing) * 4); + } + .mb-6 { + margin-bottom: calc(var(--spacing) * 6); + } + .mb-10 { + margin-bottom: calc(var(--spacing) * 10); + } + .ml-1 { + margin-left: calc(var(--spacing) * 1); + } + .ml-2 { + margin-left: calc(var(--spacing) * 2); + } + .ml-6 { + margin-left: calc(var(--spacing) * 6); + } + .status { + @layer daisyui.l1.l2.l3 { + display: inline-block; + aspect-ratio: 1 / 1; + width: calc(0.25rem * 2); + height: calc(0.25rem * 2); + border-radius: var(--radius-selector); + background-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + background-position: center; + background-repeat: no-repeat; + vertical-align: middle; + color: color-mix(in srgb, #000 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-black) 30%, transparent); + } + background-image: radial-gradient( circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * 0.5)), #0000 ); + box-shadow: 0 2px 3px -1px currentColor; + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); + } + } + } + .badge { + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + justify-content: center; + gap: calc(0.25rem * 2); + border-radius: var(--radius-selector); + vertical-align: middle; + color: var(--badge-fg); + border: var(--border) solid var(--badge-color, var(--color-base-200)); + font-size: 0.875rem; + width: fit-content; + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + background-color: var(--badge-bg); + --badge-bg: var(--badge-color, var(--color-base-100)); + --badge-fg: var(--color-base-content); + --size: calc(var(--size-selector, 0.25rem) * 6); + height: var(--size); + padding-inline: calc(var(--size) / 2 - var(--border)); + } + } + .icon-\[lucide--alert-circle\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--alert-triangle\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01'/%3E%3C/svg%3E"); + } + .icon-\[lucide--calendar\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 2v4m8-4v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--check-circle\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11l3 3L22 4'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--chevron-left\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18l-6-6l6-6'/%3E%3C/svg%3E"); + } + .icon-\[lucide--chevron-right\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E"); + } + .icon-\[lucide--chevrons-left\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m11 17l-5-5l5-5m7 10l-5-5l5-5'/%3E%3C/svg%3E"); + } + .icon-\[lucide--chevrons-right\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 17l5-5l-5-5m7 10l5-5l-5-5'/%3E%3C/svg%3E"); + } + .icon-\[lucide--eye-off\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575a1 1 0 0 1 0 .696a10.8 10.8 0 0 1-1.444 2.49m-6.41-.679a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 4.446-5.143M2 2l20 20'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--eye\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--hash\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 9h16M4 15h16M10 3L8 21m8-18l-2 18'/%3E%3C/svg%3E"); + } + .icon-\[lucide--info\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--link\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--lock\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--mail\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--phone\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233a14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); + } + .icon-\[lucide--search\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E"); + } + .icon-\[lucide--text\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 18H3M17 6H3m18 6H3'/%3E%3C/svg%3E"); + } + .icon-\[lucide--upload\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E"); + } + .icon-\[lucide--x\] { + display: inline-block; + width: 1em; + height: 1em; + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); + } + .tabs { + @layer daisyui.l1.l2.l3 { + display: flex; + flex-wrap: wrap; + --tabs-height: auto; + --tabs-direction: row; + --tab-height: calc(var(--size-field, 0.25rem) * 10); + height: var(--tabs-height); + flex-direction: var(--tabs-direction); + } + } + .footer { + @layer daisyui.l1.l2.l3 { + display: grid; + width: 100%; + grid-auto-flow: row; + place-items: start; + column-gap: calc(0.25rem * 4); + row-gap: calc(0.25rem * 10); + font-size: 0.875rem; + line-height: 1.25rem; + & > * { + display: grid; + place-items: start; + gap: calc(0.25rem * 2); + } + &.footer-center { + grid-auto-flow: column dense; + place-items: center; + text-align: center; + & > * { + place-items: center; + } + } + } + } + .stat { + @layer daisyui.l1.l2.l3 { + display: inline-grid; + width: 100%; + column-gap: calc(0.25rem * 4); + padding-inline: calc(0.25rem * 6); + padding-block: calc(0.25rem * 4); + grid-template-columns: repeat(1, 1fr); + &:not(:last-child) { + border-inline-end: var(--border) dashed currentColor; + @supports (color: color-mix(in lab, red, red)) { + border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000); + } + border-block-end: none; + } + } + } + .navbar-end { + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + width: 50%; + justify-content: flex-end; + } + } + .navbar-start { + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + width: 50%; + justify-content: flex-start; + } + } + .card-body { + @layer daisyui.l1.l2.l3 { + display: flex; + flex: auto; + flex-direction: column; + gap: calc(0.25rem * 2); + padding: var(--card-p, 1.5rem); + font-size: var(--card-fs, 0.875rem); + :where(p) { + flex-grow: 1; + } + } + } + .navbar-center { + @layer daisyui.l1.l2.l3 { + display: inline-flex; + align-items: center; + flex-shrink: 0; + } + } + .fab-flower { + @layer daisyui.l1.l2.l3 { + display: grid; + --position: 0rem; + > *:nth-child(-n + 2) { + --position: 0rem; + } + > * { + grid-area: 1/1; + --degree: 180deg; + --flip-degree: calc(180deg - var(--degree)); + transform: translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position))); + [dir="rtl"] & { + transform: translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position))); + } + } + > :nth-child(n + 7) { + display: none; + } + &:has(:nth-child(3)) { + --position: 140%; + > :nth-child(3) { + --degree: 135deg; + } + } + &:has(:nth-child(4)) { + --position: 140%; + > :nth-child(3) { + --degree: 165deg; + } + > :nth-child(4) { + --degree: 105deg; + } + } + &:has(:nth-child(5)) { + --position: 180%; + > :nth-child(3) { + --degree: 180deg; + } + > :nth-child(4) { + --degree: 135deg; + } + > :nth-child(5) { + --degree: 90deg; + } + } + &:has(:nth-child(6)) { + --position: 220%; + > :nth-child(3) { + --degree: 180deg; + } + > :nth-child(4) { + --degree: 150deg; + } + > :nth-child(5) { + --degree: 120deg; + } + > :nth-child(6) { + --degree: 90deg; + } + } + } + } + .fieldset-label { + @layer daisyui.l1.l2.l3 { + display: flex; + align-items: center; + gap: calc(0.25rem * 1.5); + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + &:has(input) { + cursor: pointer; + } + } + } + .alert { + border-width: var(--border); + border-color: var(--alert-border-color, var(--color-base-200)); + @layer daisyui.l1.l2.l3 { + border-style: solid; + --alert-border-color: var(--color-base-200); + display: grid; + align-items: center; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + color: var(--color-base-content); + background-color: var(--alert-color, var(--color-base-200)); + justify-content: start; + justify-items: start; + grid-auto-flow: column; + grid-template-columns: auto; + text-align: start; + font-size: 0.875rem; + line-height: 1.25rem; + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + } + &:has(:nth-child(2)) { + grid-template-columns: auto minmax(auto, 1fr); + } + } + } + .fieldset { + @layer daisyui.l1.l2.l3 { + display: grid; + gap: calc(0.25rem * 1.5); + padding-block: calc(0.25rem * 1); + font-size: 0.75rem; + grid-template-columns: 1fr; + grid-auto-rows: max-content; + } + } + .card-title { + @layer daisyui.l1.l2.l3 { + display: flex; + align-items: center; + gap: calc(0.25rem * 2); + font-size: var(--cardtitle-fs, 1.125rem); + font-weight: 600; + } + } + .mask { + @layer daisyui.l1.l2.l3 { + display: inline-block; + vertical-align: middle; + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + } + } + .block { + display: block; + } + .contents { + display: contents; + } + .flex { + display: flex; + } + .grid { + display: grid; + } + .hidden { + display: none; + } + .inline { + display: inline; + } + .inline-block { + display: inline-block; + } + .table { + display: table; + } + .aspect-square { + aspect-ratio: 1 / 1; + } + .modal-bottom { + @layer daisyui.l1.l2 { + place-items: end; + .modal-box { + height: auto; + width: 100%; + max-width: none; + max-height: calc(100vh - 5em); + translate: 0 100%; + scale: 1; + --modal-tl: var(--radius-box); + --modal-tr: var(--radius-box); + --modal-bl: 0; + --modal-br: 0; + } + } + } + .btn-circle { + @layer daisyui.l1.l2 { + border-radius: calc(infinity * 1px); + padding-inline: calc(0.25rem * 0); + width: var(--size); + height: var(--size); + } + } + .btn-square { + @layer daisyui.l1.l2 { + padding-inline: calc(0.25rem * 0); + width: var(--size); + height: var(--size); + } + } + .size-5 { + width: calc(var(--spacing) * 5); + height: calc(var(--spacing) * 5); + } + .size-6 { + width: calc(var(--spacing) * 6); + height: calc(var(--spacing) * 6); + } + .h-3 { + height: calc(var(--spacing) * 3); + } + .h-4 { + height: calc(var(--spacing) * 4); + } + .h-5 { + height: calc(var(--spacing) * 5); + } + .h-8 { + height: calc(var(--spacing) * 8); + } + .h-10 { + height: calc(var(--spacing) * 10); + } + .h-12 { + height: calc(var(--spacing) * 12); + } + .h-16 { + height: calc(var(--spacing) * 16); + } + .h-20 { + height: calc(var(--spacing) * 20); + } + .h-24 { + height: calc(var(--spacing) * 24); + } + .h-32 { + height: calc(var(--spacing) * 32); + } + .h-48 { + height: calc(var(--spacing) * 48); + } + .h-96 { + height: calc(var(--spacing) * 96); + } + .h-\[300px\] { + height: 300px; + } + .h-\[400px\] { + height: 400px; + } + .h-\[500px\] { + height: 500px; + } + .h-auto { + height: auto; + } + .h-full { + height: 100%; + } + .max-h-60 { + max-height: calc(var(--spacing) * 60); + } + .max-h-64 { + max-height: calc(var(--spacing) * 64); + } + .max-h-96 { + max-height: calc(var(--spacing) * 96); + } + .min-h-0 { + min-height: calc(var(--spacing) * 0); + } + .min-h-\[100px\] { + min-height: 100px; + } + .min-h-\[200px\] { + min-height: 200px; + } + .min-h-\[300px\] { + min-height: 300px; + } + .min-h-\[400px\] { + min-height: 400px; + } + .min-h-\[500px\] { + min-height: 500px; + } + .min-h-full { + min-height: 100%; + } + .btn-wide { + @layer daisyui.l1.l2 { + width: 100%; + max-width: calc(0.25rem * 64); + } + } + .btn-block { + @layer daisyui.l1.l2 { + width: 100%; + } + } + .loading-lg { + @layer daisyui.l1.l2 { + width: calc(var(--size-selector, 0.25rem) * 7); + } + } + .loading-md { + @layer daisyui.l1.l2 { + width: calc(var(--size-selector, 0.25rem) * 6); + } + } + .loading-sm { + @layer daisyui.l1.l2 { + width: calc(var(--size-selector, 0.25rem) * 5); + } + } + .loading-xs { + @layer daisyui.l1.l2 { + width: calc(var(--size-selector, 0.25rem) * 4); + } + } + .w-3 { + width: calc(var(--spacing) * 3); + } + .w-4 { + width: calc(var(--spacing) * 4); + } + .w-5 { + width: calc(var(--spacing) * 5); + } + .w-8 { + width: calc(var(--spacing) * 8); + } + .w-10 { + width: calc(var(--spacing) * 10); + } + .w-12 { + width: calc(var(--spacing) * 12); + } + .w-16 { + width: calc(var(--spacing) * 16); + } + .w-24 { + width: calc(var(--spacing) * 24); + } + .w-32 { + width: calc(var(--spacing) * 32); + } + .w-40 { + width: calc(var(--spacing) * 40); + } + .w-48 { + width: calc(var(--spacing) * 48); + } + .w-52 { + width: calc(var(--spacing) * 52); + } + .w-56 { + width: calc(var(--spacing) * 56); + } + .w-64 { + width: calc(var(--spacing) * 64); + } + .w-80 { + width: calc(var(--spacing) * 80); + } + .w-96 { + width: calc(var(--spacing) * 96); + } + .w-fit { + width: fit-content; + } + .w-full { + width: 100%; + } + .max-w-3xl { + max-width: var(--container-3xl); + } + .max-w-5xl { + max-width: var(--container-5xl); + } + .max-w-6xl { + max-width: var(--container-6xl); + } + .max-w-\[200px\] { + max-width: 200px; + } + .max-w-md { + max-width: var(--container-md); + } + .min-w-48 { + min-width: calc(var(--spacing) * 48); + } + .min-w-\[4rem\] { + min-width: 4rem; + } + .min-w-\[48px\] { + min-width: 48px; + } + .min-w-\[500px\] { + min-width: 500px; + } + .min-w-\[600px\] { + min-width: 600px; + } + .min-w-max { + min-width: max-content; + } + .flex-1 { + flex: 1; + } + .flex-none { + flex: none; + } + .shrink-0 { + flex-shrink: 0; + } + .grow { + flex-grow: 1; + } + .-translate-x-1\/2 { + --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-x-2 { + --tw-translate-x: calc(var(--spacing) * 2); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-x-4 { + --tw-translate-x: calc(var(--spacing) * 4); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-x-10 { + --tw-translate-x: calc(var(--spacing) * 10); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-x-full { + --tw-translate-x: 100%; + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-y-2 { + --tw-translate-y: calc(var(--spacing) * 2); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .translate-y-4 { + --tw-translate-y: calc(var(--spacing) * 4); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + .scale-105 { + --tw-scale-x: 105%; + --tw-scale-y: 105%; + --tw-scale-z: 105%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + .scale-110 { + --tw-scale-x: 110%; + --tw-scale-y: 110%; + --tw-scale-z: 110%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + .transform { + transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,); + } + .animate-pulse { + animation: var(--animate-pulse); + } + .link { + @layer daisyui.l1.l2.l3 { + cursor: pointer; + text-decoration-line: underline; + &:focus { + --tw-outline-style: none; + outline-style: none; + @media (forced-colors: active) { + outline: 2px solid transparent; + outline-offset: 2px; + } + } + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + } + } + .cursor-help { + cursor: help; + } + .cursor-pointer { + cursor: pointer; + } + .list-none { + list-style-type: none; + } + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + .grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + .flex-col { + flex-direction: column; + } + .flex-col-reverse { + flex-direction: column-reverse; + } + .flex-wrap { + flex-wrap: wrap; + } + .items-center { + align-items: center; + } + .items-end { + align-items: flex-end; + } + .items-stretch { + align-items: stretch; + } + .justify-between { + justify-content: space-between; + } + .justify-center { + justify-content: center; + } + .justify-end { + justify-content: flex-end; + } + .justify-start { + justify-content: flex-start; + } + .justify-items-center { + justify-items: center; + } + .gap-0\.5 { + gap: calc(var(--spacing) * 0.5); + } + .gap-1 { + gap: calc(var(--spacing) * 1); + } + .gap-2 { + gap: calc(var(--spacing) * 2); + } + .gap-3 { + gap: calc(var(--spacing) * 3); + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .gap-6 { + gap: calc(var(--spacing) * 6); + } + .gap-8 { + gap: calc(var(--spacing) * 8); + } + .space-y-1 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-2 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); + } + } + .space-y-4 { + :where(& > :not(:last-child)) { + --tw-space-y-reverse: 0; + margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse))); + } + } + .truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .overflow-hidden { + overflow: hidden; + } + .overflow-x-auto { + overflow-x: auto; + } + .overflow-y-auto { + overflow-y: auto; + } + .timeline-box { + @layer daisyui.l1.l2.l3 { + border: var(--border) solid; + border-radius: var(--radius-box); + border-color: var(--color-base-300); + background-color: var(--color-base-100); + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 2); + font-size: 0.75rem; + box-shadow: 0 1px 2px 0 oklch(0% 0 0/0.05); + } + } + .rounded { + border-radius: 0.25rem; + } + .rounded-3xl { + border-radius: var(--radius-3xl); + } + .rounded-box { + border-radius: var(--radius-box); + } + .rounded-box { + border-radius: var(--radius-box); + } + .rounded-full { + border-radius: calc(infinity * 1px); + } + .rounded-lg { + border-radius: var(--radius-lg); + } + .rounded-md { + border-radius: var(--radius-md); + } + .rounded-none { + border-radius: 0; + } + .rounded-sm { + border-radius: var(--radius-sm); + } + .rounded-xl { + border-radius: var(--radius-xl); + } + .border { + border-style: var(--tw-border-style); + border-width: 1px; + } + .border-2 { + border-style: var(--tw-border-style); + border-width: 2px; + } + .border-t { + border-top-style: var(--tw-border-style); + border-top-width: 1px; + } + .border-r { + border-right-style: var(--tw-border-style); + border-right-width: 1px; + } + .border-b { + border-bottom-style: var(--tw-border-style); + border-bottom-width: 1px; + } + .border-l-4 { + border-left-style: var(--tw-border-style); + border-left-width: 4px; + } + .badge-dash { + @layer daisyui.l1.l2 { + color: var(--badge-color); + --badge-bg: #0000; + background-image: none; + border-color: currentColor; + border-style: dashed; + } + } + .alert-dash { + @layer daisyui.l1 { + background-color: transparent; + color: var(--alert-color); + border-style: dashed; + box-shadow: none; + background-image: none; + } + } + .btn-dash { + @layer daisyui.l1 { + &:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-fg: var(--btn-color); + --btn-border: var(--btn-color); + --btn-noise: none; + } + @media (hover: none) { + &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-fg: var(--btn-color); + --btn-border: var(--btn-color); + --btn-noise: none; + } + } + } + border-style: dashed; + } + .border-dashed { + --tw-border-style: dashed; + border-style: dashed; + } + .border-none { + --tw-border-style: none; + border-style: none; + } + .badge-ghost { + @layer daisyui.l1.l2 { + border-color: var(--color-base-200); + background-color: var(--color-base-200); + color: var(--color-base-content); + background-image: none; + } + } + .select-ghost { + @layer daisyui.l1.l2 { + background-color: transparent; + transition: background-color 0.2s; + box-shadow: none; + border-color: #0000; + &:focus, &:focus-within { + background-color: var(--color-base-100); + color: var(--color-base-content); + border-color: #0000; + box-shadow: none; + } + } + } + .input-ghost { + @layer daisyui.l1.l2 { + background-color: transparent; + box-shadow: none; + border-color: #0000; + &:focus, &:focus-within { + background-color: var(--color-base-100); + color: var(--color-base-content); + border-color: #0000; + box-shadow: none; + } + } + } + .badge-outline { + @layer daisyui.l1.l2 { + color: var(--badge-color); + --badge-bg: #0000; + background-image: none; + border-color: currentColor; + } + } + .border-base-200\/30 { + border-color: var(--color-base-200); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-base-200) 30%, transparent); + } + } + .border-base-300 { + border-color: var(--color-base-300); + } + .border-base-content\/20 { + border-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + .border-black\/5 { + border-color: color-mix(in srgb, #000 5%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-black) 5%, transparent); + } + } + .border-black\/10 { + border-color: color-mix(in srgb, #000 10%, transparent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-black) 10%, transparent); + } + } + .border-primary { + border-color: var(--color-primary); + } + .border-primary\/20 { + border-color: var(--color-primary); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + .border-transparent { + border-color: transparent; + } + .table-zebra { + @layer daisyui.l1.l2 { + tbody { + tr { + &:where(:nth-child(even)) { + background-color: var(--color-base-200); + :where(.table-pin-cols tr th) { + background-color: var(--color-base-200); + } + } + &.row-hover { + &, &:where(:nth-child(even)) { + &:hover { + @media (hover: hover) { + background-color: var(--color-base-300); + } + } + } + } + } + } + } + } + .bg-accent { + background-color: var(--color-accent); + } + .bg-base-100 { + background-color: var(--color-base-100); + } + .bg-base-100\/30 { + background-color: var(--color-base-100); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-100) 30%, transparent); + } + } + .bg-base-200 { + background-color: var(--color-base-200); + } + .bg-base-200\/30 { + background-color: var(--color-base-200); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-200) 30%, transparent); + } + } + .bg-base-200\/50 { + background-color: var(--color-base-200); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-base-200) 50%, transparent); + } + } + .bg-base-300 { + background-color: var(--color-base-300); + } + .bg-black\/20 { + background-color: color-mix(in srgb, #000 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 20%, transparent); + } + } + .bg-error { + background-color: var(--color-error); + } + .bg-error\/10 { + background-color: var(--color-error); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-error) 10%, transparent); + } + } + .bg-info { + background-color: var(--color-info); + } + .bg-neutral { + background-color: var(--color-neutral); + } + .bg-primary { + background-color: var(--color-primary); + } + .bg-primary\/5 { + background-color: var(--color-primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 5%, transparent); + } + } + .bg-primary\/10 { + background-color: var(--color-primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 10%, transparent); + } + } + .bg-primary\/20 { + background-color: var(--color-primary); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-primary) 20%, transparent); + } + } + .bg-secondary { + background-color: var(--color-secondary); + } + .bg-success { + background-color: var(--color-success); + } + .bg-success\/10 { + background-color: var(--color-success); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-success) 10%, transparent); + } + } + .bg-warning { + background-color: var(--color-warning); + } + .bg-warning\/10 { + background-color: var(--color-warning); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-warning) 10%, transparent); + } + } + .bg-white\/20 { + background-color: color-mix(in srgb, #fff 20%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 20%, transparent); + } + } + .bg-linear-to-r { + --tw-gradient-position: to right; + @supports (background-image: linear-gradient(in lab, red, red)) { + --tw-gradient-position: to right in oklab; + } + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .bg-gradient-to-r { + --tw-gradient-position: to right in oklab; + background-image: linear-gradient(var(--tw-gradient-stops)); + } + .alert-soft { + @layer daisyui.l1 { + color: var(--alert-color, var(--color-base-content)); + background: var(--alert-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) ); + } + --alert-border-color: var(--alert-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + --alert-border-color: color-mix( + in oklab, + var(--alert-color, var(--color-base-content)) 10%, + var(--color-base-100) + ); + } + box-shadow: none; + background-image: none; + } + } + .from-accent { + --tw-gradient-from: var(--color-accent); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .from-primary { + --tw-gradient-from: var(--color-primary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .from-secondary { + --tw-gradient-from: var(--color-secondary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .via-accent { + --tw-gradient-via: var(--color-accent); + --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-via-stops); + } + .to-accent { + --tw-gradient-to: var(--color-accent); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-primary { + --tw-gradient-to: var(--color-primary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .to-secondary { + --tw-gradient-to: var(--color-secondary); + --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); + } + .loading-ball { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E"); + } + } + .loading-bars { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E"); + } + } + .loading-dots { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E"); + } + } + .loading-infinity { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E"); + } + } + .loading-ring { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + } + } + .loading-spinner { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); + } + } + .mask-circle { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e"); + } + } + .mask-heart { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e"); + } + } + .mask-star { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e"); + } + } + .mask-star-2 { + @layer daisyui.l1.l2 { + mask-image: url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e"); + } + } + .mask-circle { + --tw-mask-radial-shape: circle; + } + .bg-clip-text { + background-clip: text; + } + .object-contain { + object-fit: contain; + } + .checkbox-lg { + @layer daisyui.l1.l2 { + padding: 0.3125rem; + --size: calc(var(--size-selector, 0.25rem) * 7); + } + } + .checkbox-md { + @layer daisyui.l1.l2 { + padding: 0.25rem; + --size: calc(var(--size-selector, 0.25rem) * 6); + } + } + .checkbox-sm { + @layer daisyui.l1.l2 { + padding: 0.1875rem; + --size: calc(var(--size-selector, 0.25rem) * 5); + } + } + .checkbox-xs { + @layer daisyui.l1.l2 { + padding: 0.125rem; + --size: calc(var(--size-selector, 0.25rem) * 4); + } + } + .radio-lg { + @layer daisyui.l1.l2 { + padding: 0.3125rem; + &:is([type="radio"]) { + --size: calc(var(--size-selector, 0.25rem) * 7); + } + } + } + .p-0 { + padding: calc(var(--spacing) * 0); + } + .p-1 { + padding: calc(var(--spacing) * 1); + } + .p-1\.5 { + padding: calc(var(--spacing) * 1.5); + } + .p-2 { + padding: calc(var(--spacing) * 2); + } + .p-3 { + padding: calc(var(--spacing) * 3); + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .p-6 { + padding: calc(var(--spacing) * 6); + } + .p-8 { + padding: calc(var(--spacing) * 8); + } + .p-10 { + padding: calc(var(--spacing) * 10); + } + .select-lg { + @layer daisyui.l1.l2 { + --size: calc(var(--size-field, 0.25rem) * 12); + font-size: 1.125rem; + option { + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 1.5); + } + } + } + .table-lg { + @layer daisyui.l1.l2 { + :not(thead, tfoot) tr { + font-size: 1.125rem; + } + :where(th, td) { + padding-inline: calc(0.25rem * 5); + padding-block: calc(0.25rem * 4); + } + } + } + .px-1 { + padding-inline: calc(var(--spacing) * 1); + } + .px-2 { + padding-inline: calc(var(--spacing) * 2); + } + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } + .px-4 { + padding-inline: calc(var(--spacing) * 4); + } + .px-6 { + padding-inline: calc(var(--spacing) * 6); + } + .px-10 { + padding-inline: calc(var(--spacing) * 10); + } + .py-1 { + padding-block: calc(var(--spacing) * 1); + } + .py-2 { + padding-block: calc(var(--spacing) * 2); + } + .py-4 { + padding-block: calc(var(--spacing) * 4); + } + .py-8 { + padding-block: calc(var(--spacing) * 8); + } + .py-10 { + padding-block: calc(var(--spacing) * 10); + } + .py-16 { + padding-block: calc(var(--spacing) * 16); + } + .py-20 { + padding-block: calc(var(--spacing) * 20); + } + .pt-2 { + padding-top: calc(var(--spacing) * 2); + } + .pt-6 { + padding-top: calc(var(--spacing) * 6); + } + .pr-10 { + padding-right: calc(var(--spacing) * 10); + } + .pb-2 { + padding-bottom: calc(var(--spacing) * 2); + } + .pl-3 { + padding-left: calc(var(--spacing) * 3); + } + .pl-10 { + padding-left: calc(var(--spacing) * 10); + } + .\!text-center { + text-align: center !important; + } + .text-center { + text-align: center; + } + .text-left { + text-align: left; + } + .text-right { + text-align: right; + } + .font-mono { + font-family: var(--font-mono); + } + .text-2xl { + font-size: var(--text-2xl); + line-height: var(--tw-leading, var(--text-2xl--line-height)); + } + .text-4xl { + font-size: var(--text-4xl); + line-height: var(--tw-leading, var(--text-4xl--line-height)); + } + .text-6xl { + font-size: var(--text-6xl); + line-height: var(--tw-leading, var(--text-6xl--line-height)); + } + .text-7xl { + font-size: var(--text-7xl); + line-height: var(--tw-leading, var(--text-7xl--line-height)); + } + .text-base { + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .text-xs { + font-size: var(--text-xs); + line-height: var(--tw-leading, var(--text-xs--line-height)); + } + .badge-lg { + @layer daisyui.l1.l2 { + --size: calc(var(--size-selector, 0.25rem) * 7); + font-size: 1rem; + } + } + .badge-md { + @layer daisyui.l1.l2 { + --size: calc(var(--size-selector, 0.25rem) * 6); + font-size: 0.875rem; + } + } + .badge-sm { + @layer daisyui.l1.l2 { + --size: calc(var(--size-selector, 0.25rem) * 5); + font-size: 0.75rem; + } + } + .badge-xs { + @layer daisyui.l1.l2 { + --size: calc(var(--size-selector, 0.25rem) * 4); + font-size: 0.625rem; + } + } + .text-\[9px\] { + font-size: 9px; + } + .text-\[10px\] { + font-size: 10px; + } + .leading-20 { + --tw-leading: calc(var(--spacing) * 20); + line-height: calc(var(--spacing) * 20); + } + .leading-relaxed { + --tw-leading: var(--leading-relaxed); + line-height: var(--leading-relaxed); + } + .font-black { + --tw-font-weight: var(--font-weight-black); + font-weight: var(--font-weight-black); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .font-light { + --tw-font-weight: var(--font-weight-light); + font-weight: var(--font-weight-light); + } + .font-medium { + --tw-font-weight: var(--font-weight-medium); + font-weight: var(--font-weight-medium); + } + .font-normal { + --tw-font-weight: var(--font-weight-normal); + font-weight: var(--font-weight-normal); + } + .tracking-tight { + --tw-tracking: var(--tracking-tight); + letter-spacing: var(--tracking-tight); + } + .tracking-tighter { + --tw-tracking: var(--tracking-tighter); + letter-spacing: var(--tracking-tighter); + } + .tracking-widest { + --tw-tracking: var(--tracking-widest); + letter-spacing: var(--tracking-widest); + } + .text-balance { + text-wrap: balance; + } + .whitespace-nowrap { + white-space: nowrap; + } + .alert-error { + @layer daisyui.l1.l2 { + color: var(--color-error-content); + --alert-border-color: var(--color-error); + --alert-color: var(--color-error); + } + } + .alert-info { + @layer daisyui.l1.l2 { + color: var(--color-info-content); + --alert-border-color: var(--color-info); + --alert-color: var(--color-info); + } + } + .alert-success { + @layer daisyui.l1.l2 { + color: var(--color-success-content); + --alert-border-color: var(--color-success); + --alert-color: var(--color-success); + } + } + .alert-warning { + @layer daisyui.l1.l2 { + color: var(--color-warning-content); + --alert-border-color: var(--color-warning); + --alert-color: var(--color-warning); + } + } + .checkbox-accent { + @layer daisyui.l1.l2 { + color: var(--color-accent-content); + --input-color: var(--color-accent); + } + } + .checkbox-error { + @layer daisyui.l1.l2 { + color: var(--color-error-content); + --input-color: var(--color-error); + } + } + .checkbox-info { + @layer daisyui.l1.l2 { + color: var(--color-info-content); + --input-color: var(--color-info); + } + } + .checkbox-primary { + @layer daisyui.l1.l2 { + color: var(--color-primary-content); + --input-color: var(--color-primary); + } + } + .checkbox-secondary { + @layer daisyui.l1.l2 { + color: var(--color-secondary-content); + --input-color: var(--color-secondary); + } + } + .checkbox-success { + @layer daisyui.l1.l2 { + color: var(--color-success-content); + --input-color: var(--color-success); + } + } + .checkbox-warning { + @layer daisyui.l1.l2 { + color: var(--color-warning-content); + --input-color: var(--color-warning); + } + } + .range-accent { + @layer daisyui.l1.l2 { + color: var(--color-accent); + --range-thumb: var(--color-accent-content); + } + } + .range-error { + @layer daisyui.l1.l2 { + color: var(--color-error); + --range-thumb: var(--color-error-content); + } + } + .tooltip-accent { + @layer daisyui.l1.l2 { + --tt-bg: var(--color-accent); + > .tooltip-content, &[data-tip]:before { + color: var(--color-accent-content); + } + } + } + .tooltip-error { + @layer daisyui.l1.l2 { + --tt-bg: var(--color-error); + > .tooltip-content, &[data-tip]:before { + color: var(--color-error-content); + } + } + } + .tooltip-info { + @layer daisyui.l1.l2 { + --tt-bg: var(--color-info); + > .tooltip-content, &[data-tip]:before { + color: var(--color-info-content); + } + } + } + .tooltip-primary { + @layer daisyui.l1.l2 { + --tt-bg: var(--color-primary); + > .tooltip-content, &[data-tip]:before { + color: var(--color-primary-content); + } + } + } + .tooltip-secondary { + @layer daisyui.l1.l2 { + --tt-bg: var(--color-secondary); + > .tooltip-content, &[data-tip]:before { + color: var(--color-secondary-content); + } + } + } + .tooltip-success { + @layer daisyui.l1.l2 { + --tt-bg: var(--color-success); + > .tooltip-content, &[data-tip]:before { + color: var(--color-success-content); + } + } + } + .tooltip-warning { + @layer daisyui.l1.l2 { + --tt-bg: var(--color-warning); + > .tooltip-content, &[data-tip]:before { + color: var(--color-warning-content); + } + } + } + .text-accent { + color: var(--color-accent); + } + .text-accent-content { + color: var(--color-accent-content); + } + .text-base-content { + color: var(--color-base-content); + } + .text-base-content\/60 { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 60%, transparent); + } + } + .text-base-content\/90 { + color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, var(--color-base-content) 90%, transparent); + } + } + .text-error { + color: var(--color-error); + } + .text-error-content { + color: var(--color-error-content); + } + .text-gray-500 { + color: var(--color-gray-500); + } + .text-info { + color: var(--color-info); + } + .text-info-content { + color: var(--color-info-content); + } + .text-neutral-content { + color: var(--color-neutral-content); + } + .text-primary { + color: var(--color-primary); + } + .text-primary-content { + color: var(--color-primary-content); + } + .text-secondary { + color: var(--color-secondary); + } + .text-secondary-content { + color: var(--color-secondary-content); + } + .text-success { + color: var(--color-success); + } + .text-success-content { + color: var(--color-success-content); + } + .text-transparent { + color: transparent; + } + .text-warning { + color: var(--color-warning); + } + .text-warning-content { + color: var(--color-warning-content); + } + .text-white { + color: var(--color-white); + } + .normal-case { + text-transform: none; + } + .uppercase { + text-transform: uppercase; + } + .italic { + font-style: italic; + } + .btn-link { + @layer daisyui.l1 { + text-decoration-line: underline; + outline-color: currentcolor; + --btn-border: #0000; + --btn-bg: #0000; + --btn-noise: none; + --btn-shadow: ""; + &:not(.btn-disabled, .btn:disabled, .btn[disabled]) { + --btn-fg: var(--btn-color, var(--color-primary)); + } + &:is(.btn-active, :hover, :active:focus, :focus-visible) { + --btn-border: #0000; + --btn-bg: #0000; + } + } + } + .line-through { + text-decoration-line: line-through; + } + .swap-active { + @layer daisyui.l1.l2 { + .swap-off { + opacity: 0%; + } + .swap-on { + opacity: 100%; + } + } + } + .opacity-0 { + opacity: 0%; + } + .opacity-10 { + opacity: 10%; + } + .opacity-30 { + opacity: 30%; + } + .opacity-40 { + opacity: 40%; + } + .opacity-50 { + opacity: 50%; + } + .opacity-60 { + opacity: 60%; + } + .opacity-70 { + opacity: 70%; + } + .opacity-80 { + opacity: 80%; + } + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-2xl { + --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-inner { + --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-lg { + --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-md { + --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-sm { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-xl { + --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .ring-1 { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .ring-2 { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .shadow-secondary\/20 { + --tw-shadow-color: var(--color-secondary); + @supports (color: color-mix(in lab, red, red)) { + --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-secondary) 20%, transparent) var(--tw-shadow-alpha), transparent); + } + } + .ring-primary { + --tw-ring-color: var(--color-primary); + } + .ring-offset-1 { + --tw-ring-offset-width: 1px; + --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + } + .btn-ghost { + @layer daisyui.l1 { + &:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)) { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-border: #0000; + --btn-noise: none; + &:not(:disabled, [disabled], .btn-disabled) { + outline-color: currentcolor; + --btn-fg: var(--btn-color, currentColor); + } + } + @media (hover: none) { + &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { + outline-color: currentcolor; + --btn-shadow: ""; + --btn-bg: #0000; + --btn-fg: var(--btn-color, currentColor); + --btn-border: #0000; + --btn-noise: none; + } + } + } + } + .blur-3xl { + --tw-blur: blur(var(--blur-3xl)); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .drop-shadow-2xl { + --tw-drop-shadow-size: drop-shadow(0 25px 25px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.15))); + --tw-drop-shadow: drop-shadow(var(--drop-shadow-2xl)); + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .filter { + filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); + } + .backdrop-blur-sm { + --tw-backdrop-blur: blur(var(--blur-sm)); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } + .transition-all { + transition-property: all; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-colors { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .transition-transform { + transition-property: transform, translate, scale, rotate; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } + .duration-200 { + --tw-duration: 200ms; + transition-duration: 200ms; + } + .duration-300 { + --tw-duration: 300ms; + transition-duration: 300ms; + } + .btn-outline { + @layer daisyui.l1 { + &:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-fg: var(--btn-color); + --btn-border: var(--btn-color); + --btn-noise: none; + } + @media (hover: none) { + &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { + --btn-shadow: ""; + --btn-bg: #0000; + --btn-fg: var(--btn-color); + --btn-border: var(--btn-color); + --btn-noise: none; + } + } + } + } + .btn-soft { + @layer daisyui.l1 { + &:not( .btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled ) { + --btn-shadow: ""; + --btn-fg: var(--btn-color, var(--color-base-content)); + --btn-bg: var(--btn-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix( + in oklab, + var(--btn-color, var(--color-base-content)) 8%, + var(--color-base-100) + ); + } + --btn-border: var(--btn-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + --btn-border: color-mix( + in oklab, + var(--btn-color, var(--color-base-content)) 10%, + var(--color-base-100) + ); + } + --btn-noise: none; + } + @media (hover: none) { + &:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover { + --btn-shadow: ""; + --btn-fg: var(--btn-color, var(--color-base-content)); + --btn-bg: var(--btn-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + --btn-bg: color-mix( + in oklab, + var(--btn-color, var(--color-base-content)) 8%, + var(--color-base-100) + ); + } + --btn-border: var(--btn-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + --btn-border: color-mix( + in oklab, + var(--btn-color, var(--color-base-content)) 10%, + var(--color-base-100) + ); + } + --btn-noise: none; + } + } + } + } + .btn-lg { + @layer daisyui.l1.l2 { + --fontsize: 1.125rem; + --btn-p: 1.25rem; + --size: calc(var(--size-field, 0.25rem) * 12); + } + } + .btn-md { + @layer daisyui.l1.l2 { + --fontsize: 0.875rem; + --btn-p: 1rem; + --size: calc(var(--size-field, 0.25rem) * 10); + } + } + .btn-sm { + @layer daisyui.l1.l2 { + --fontsize: 0.75rem; + --btn-p: 0.75rem; + --size: calc(var(--size-field, 0.25rem) * 8); + } + } + .btn-xl { + @layer daisyui.l1.l2 { + --fontsize: 1.375rem; + --btn-p: 1.5rem; + --size: calc(var(--size-field, 0.25rem) * 14); + } + } + .btn-xs { + @layer daisyui.l1.l2 { + --fontsize: 0.6875rem; + --btn-p: 0.5rem; + --size: calc(var(--size-field, 0.25rem) * 6); + } + } + .badge-accent { + @layer daisyui.l1.l2 { + --badge-color: var(--color-accent); + --badge-fg: var(--color-accent-content); + } + } + .badge-error { + @layer daisyui.l1.l2 { + --badge-color: var(--color-error); + --badge-fg: var(--color-error-content); + } + } + .badge-info { + @layer daisyui.l1.l2 { + --badge-color: var(--color-info); + --badge-fg: var(--color-info-content); + } + } + .badge-primary { + @layer daisyui.l1.l2 { + --badge-color: var(--color-primary); + --badge-fg: var(--color-primary-content); + } + } + .badge-secondary { + @layer daisyui.l1.l2 { + --badge-color: var(--color-secondary); + --badge-fg: var(--color-secondary-content); + } + } + .badge-success { + @layer daisyui.l1.l2 { + --badge-color: var(--color-success); + --badge-fg: var(--color-success-content); + } + } + .badge-warning { + @layer daisyui.l1.l2 { + --badge-color: var(--color-warning); + --badge-fg: var(--color-warning-content); + } + } + .btn-accent { + @layer daisyui.l1.l2.l3 { + --btn-color: var(--color-accent); + --btn-fg: var(--color-accent-content); + } + } + .btn-error { + @layer daisyui.l1.l2.l3 { + --btn-color: var(--color-error); + --btn-fg: var(--color-error-content); + } + } + .btn-info { + @layer daisyui.l1.l2.l3 { + --btn-color: var(--color-info); + --btn-fg: var(--color-info-content); + } + } + .btn-neutral { + @layer daisyui.l1.l2.l3 { + --btn-color: var(--color-neutral); + --btn-fg: var(--color-neutral-content); + } + } + .btn-primary { + @layer daisyui.l1.l2.l3 { + --btn-color: var(--color-primary); + --btn-fg: var(--color-primary-content); + } + } + .btn-secondary { + @layer daisyui.l1.l2.l3 { + --btn-color: var(--color-secondary); + --btn-fg: var(--color-secondary-content); + } + } + .btn-success { + @layer daisyui.l1.l2.l3 { + --btn-color: var(--color-success); + --btn-fg: var(--color-success-content); + } + } + .btn-warning { + @layer daisyui.l1.l2.l3 { + --btn-color: var(--color-warning); + --btn-fg: var(--color-warning-content); + } + } + .outline-none { + --tw-outline-style: none; + outline-style: none; + } + .select-none { + -webkit-user-select: none; + user-select: none; + } + .input-accent { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-accent); + } + } + } + .input-error { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-error); + } + } + } + .input-info { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-info); + } + } + } + .input-primary { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-primary); + } + } + } + .input-secondary { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-secondary); + } + } + } + .input-success { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-success); + } + } + } + .input-warning { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-warning); + } + } + } + .radio-accent { + @layer daisyui.l1.l2 { + --input-color: var(--color-accent); + } + } + .radio-error { + @layer daisyui.l1.l2 { + --input-color: var(--color-error); + } + } + .radio-primary { + @layer daisyui.l1.l2 { + --input-color: var(--color-primary); + } + } + .radio-secondary { + @layer daisyui.l1.l2 { + --input-color: var(--color-secondary); + } + } + .range-lg { + @layer daisyui.l1.l2 { + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 7); + } + } + .range-xs { + @layer daisyui.l1.l2 { + --range-thumb-size: calc(var(--size-selector, 0.25rem) * 4); + } + } + .ring-inset { + --tw-ring-inset: inset; + } + .select-error { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-error); + } + } + } + .select-primary { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-primary); + } + } + } + .select-secondary { + @layer daisyui.l1.l2 { + &, &:focus, &:focus-within { + --input-color: var(--color-secondary); + } + } + } + .toggle-accent { + @layer daisyui.l1.l2 { + &:checked, &[aria-checked="true"] { + --input-color: var(--color-accent); + } + } + } + .toggle-error { + @layer daisyui.l1.l2 { + &:checked, &[aria-checked="true"] { + --input-color: var(--color-error); + } + } + } + .toggle-info { + @layer daisyui.l1.l2 { + &:checked, &[aria-checked="true"] { + --input-color: var(--color-info); + } + } + } + .toggle-lg { + @layer daisyui.l1.l2 { + &:is([type="checkbox"]), &:has([type="checkbox"]) { + --size: calc(var(--size-selector, 0.25rem) * 7); + } + } + } + .toggle-md { + @layer daisyui.l1.l2 { + &:is([type="checkbox"]), &:has([type="checkbox"]) { + --size: calc(var(--size-selector, 0.25rem) * 6); + } + } + } + .toggle-primary { + @layer daisyui.l1.l2 { + &:checked, &[aria-checked="true"] { + --input-color: var(--color-primary); + } + } + } + .toggle-secondary { + @layer daisyui.l1.l2 { + &:checked, &[aria-checked="true"] { + --input-color: var(--color-secondary); + } + } + } + .toggle-sm { + @layer daisyui.l1.l2 { + &:is([type="checkbox"]), &:has([type="checkbox"]) { + --size: calc(var(--size-selector, 0.25rem) * 5); + } + } + } + .toggle-success { + @layer daisyui.l1.l2 { + &:checked, &[aria-checked="true"] { + --input-color: var(--color-success); + } + } + } + .toggle-warning { + @layer daisyui.l1.l2 { + &:checked, &[aria-checked="true"] { + --input-color: var(--color-warning); + } + } + } + .toggle-xs { + @layer daisyui.l1.l2 { + &:is([type="checkbox"]), &:has([type="checkbox"]) { + --size: calc(var(--size-selector, 0.25rem) * 4); + } + } + } + .group-hover\:translate-x-1 { + &:is(:where(.group):hover *) { + @media (hover: hover) { + --tw-translate-x: calc(var(--spacing) * 1); + translate: var(--tw-translate-x) var(--tw-translate-y); + } + } + } + .before\:z-50 { + &::before { + content: var(--tw-content); + z-index: 50; + } + } + .after\:z-50 { + &::after { + content: var(--tw-content); + z-index: 50; + } + } + .hover\:z-10 { + &:hover { + @media (hover: hover) { + z-index: 10; + } + } + } + .hover\:scale-105 { + &:hover { + @media (hover: hover) { + --tw-scale-x: 105%; + --tw-scale-y: 105%; + --tw-scale-z: 105%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + } + .hover\:scale-110 { + &:hover { + @media (hover: hover) { + --tw-scale-x: 110%; + --tw-scale-y: 110%; + --tw-scale-z: 110%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + } + .hover\:scale-125 { + &:hover { + @media (hover: hover) { + --tw-scale-x: 125%; + --tw-scale-y: 125%; + --tw-scale-z: 125%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + } + .hover\:border-accent\/40 { + &:hover { + @media (hover: hover) { + border-color: var(--color-accent); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-accent) 40%, transparent); + } + } + } + } + .hover\:border-base-content\/20 { + &:hover { + @media (hover: hover) { + border-color: var(--color-base-content); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); + } + } + } + } + .hover\:border-primary\/40 { + &:hover { + @media (hover: hover) { + border-color: var(--color-primary); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); + } + } + } + } + .hover\:border-primary\/50 { + &:hover { + @media (hover: hover) { + border-color: var(--color-primary); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-primary) 50%, transparent); + } + } + } + } + .hover\:border-secondary\/40 { + &:hover { + @media (hover: hover) { + border-color: var(--color-secondary); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix(in oklab, var(--color-secondary) 40%, transparent); + } + } + } + } + .hover\:bg-base-100 { + &:hover { + @media (hover: hover) { + background-color: var(--color-base-100); + } + } + } + .hover\:bg-base-200 { + &:hover { + @media (hover: hover) { + background-color: var(--color-base-200); + } + } + } + .hover\:bg-base-300 { + &:hover { + @media (hover: hover) { + background-color: var(--color-base-300); + } + } + } + .hover\:bg-white\/30 { + &:hover { + @media (hover: hover) { + background-color: color-mix(in srgb, #fff 30%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-white) 30%, transparent); + } + } + } + } + .hover\:text-base-content { + &:hover { + @media (hover: hover) { + color: var(--color-base-content); + } + } + } + .hover\:opacity-100 { + &:hover { + @media (hover: hover) { + opacity: 100%; + } + } + } + .focus\:outline-none { + &:focus { + --tw-outline-style: none; + outline-style: none; + } + } + .active\:scale-95 { + &:active { + --tw-scale-x: 95%; + --tw-scale-y: 95%; + --tw-scale-z: 95%; + scale: var(--tw-scale-x) var(--tw-scale-y); + } + } + .md\:h-64 { + @media (width >= 48rem) { + height: calc(var(--spacing) * 64); + } + } + .md\:w-64 { + @media (width >= 48rem) { + width: calc(var(--spacing) * 64); + } + } + .md\:w-auto { + @media (width >= 48rem) { + width: auto; + } + } + .md\:grid-cols-2 { + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + .md\:grid-cols-3 { + @media (width >= 48rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .md\:grid-cols-4 { + @media (width >= 48rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } + .md\:text-3xl { + @media (width >= 48rem) { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + } + .md\:text-9xl { + @media (width >= 48rem) { + font-size: var(--text-9xl); + line-height: var(--tw-leading, var(--text-9xl--line-height)); + } + } + .lg\:col-span-2 { + @media (width >= 64rem) { + grid-column: span 2 / span 2; + } + } + .lg\:block { + @media (width >= 64rem) { + display: block; + } + } + .lg\:flex { + @media (width >= 64rem) { + display: flex; + } + } + .lg\:hidden { + @media (width >= 64rem) { + display: none; + } + } + .lg\:grid-cols-3 { + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + .lg\:grid-cols-4 { + @media (width >= 64rem) { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } +} +@layer base { + :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] { + color-scheme: light; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(95% 0 0); + --color-base-content: oklch(21% 0.006 285.885); + --color-primary: oklch(45% 0.24 277.023); + --color-primary-content: oklch(93% 0.034 272.788); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + @media (prefers-color-scheme: dark) { + :root:not([data-theme]) { + color-scheme: dark; + --color-base-100: oklch(25.33% 0.016 252.42); + --color-base-200: oklch(23.26% 0.014 253.1); + --color-base-300: oklch(21.15% 0.012 254.09); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(58% 0.233 277.117); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } + } +} +@layer base { + :root:has(input.theme-controller[value=light]:checked),[data-theme=light] { + color-scheme: light; + --color-base-100: oklch(100% 0 0); + --color-base-200: oklch(98% 0 0); + --color-base-300: oklch(95% 0 0); + --color-base-content: oklch(21% 0.006 285.885); + --color-primary: oklch(45% 0.24 277.023); + --color-primary-content: oklch(93% 0.034 272.788); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + :root:has(input.theme-controller[value=dark]:checked),[data-theme=dark] { + color-scheme: dark; + --color-base-100: oklch(25.33% 0.016 252.42); + --color-base-200: oklch(23.26% 0.014 253.1); + --color-base-300: oklch(21.15% 0.012 254.09); + --color-base-content: oklch(97.807% 0.029 256.847); + --color-primary: oklch(58% 0.233 277.117); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(65% 0.241 354.308); + --color-secondary-content: oklch(94% 0.028 342.258); + --color-accent: oklch(77% 0.152 181.912); + --color-accent-content: oklch(38% 0.063 188.416); + --color-neutral: oklch(14% 0.005 285.823); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(74% 0.16 232.661); + --color-info-content: oklch(29% 0.066 243.157); + --color-success: oklch(76% 0.177 163.223); + --color-success-content: oklch(37% 0.077 168.94); + --color-warning: oklch(82% 0.189 84.429); + --color-warning-content: oklch(41% 0.112 45.904); + --color-error: oklch(71% 0.194 13.428); + --color-error-content: oklch(27% 0.105 12.094); + --radius-selector: 0.5rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 0; + } +} +@layer base { + :root { + --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); + } +} +@layer base { + :root { + scrollbar-color: currentColor #0000; + @supports (color: color-mix(in lab, red, red)) { + scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000; + } + } +} +@layer base { + @property --radialprogress { + syntax: ""; + inherits: true; + initial-value: 0%; + } +} +@layer base { + :root:not(span) { + overflow: var(--page-overflow); + } +} +@layer base { + :root { + background: var(--page-scroll-bg, var(--root-bg)); + --page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) + var(--root-bg, #0000); + @supports (color: color-mix(in lab, red, red)) { + --page-scroll-bg-on: linear-gradient(var(--root-bg, #0000), var(--root-bg, #0000)) + color-mix(in srgb, var(--root-bg, #0000), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%)); + } + --page-scroll-transition-on: background-color 0.3s ease-out; + transition: var(--page-scroll-transition); + scrollbar-gutter: var(--page-scroll-gutter, unset); + scrollbar-gutter: if(style(--page-has-scroll: 1): var(--page-scroll-gutter, unset) ; else: unset); + } + @keyframes set-page-has-scroll { + 0%, to { + --page-has-scroll: 1; + } + } +} +@layer base { + :root, [data-theme] { + background: var(--page-scroll-bg, var(--root-bg)); + color: var(--color-base-content); + } + :where(:root, [data-theme]) { + --root-bg: var(--color-base-100); + } +} +@keyframes rating { + 0%, 40% { + scale: 1.1; + filter: brightness(1.05) contrast(1.05); + } +} +@keyframes dropdown { + 0% { + opacity: 0; + } +} +@keyframes radio { + 0% { + padding: 5px; + } + 50% { + padding: 3px; + } +} +@keyframes toast { + 0% { + scale: 0.9; + opacity: 0; + } + 100% { + scale: 1; + opacity: 1; + } +} +@keyframes rotator { + 89.9999%, 100% { + --first-item-position: 0 0%; + } + 90%, 99.9999% { + --first-item-position: 0 calc(var(--items) * 100%); + } + 100% { + translate: 0 -100%; + } +} +@keyframes skeleton { + 0% { + background-position: 150%; + } + 100% { + background-position: -50%; + } +} +@keyframes menu { + 0% { + opacity: 0; + } +} +@keyframes progress { + 50% { + background-position-x: -115%; + } +} +@property --tw-translate-x { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-y { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-translate-z { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-scale-x { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-y { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-scale-z { + syntax: "*"; + inherits: false; + initial-value: 1; +} +@property --tw-rotate-x { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-y { + syntax: "*"; + inherits: false; +} +@property --tw-rotate-z { + syntax: "*"; + inherits: false; +} +@property --tw-skew-x { + syntax: "*"; + inherits: false; +} +@property --tw-skew-y { + syntax: "*"; + inherits: false; +} +@property --tw-space-y-reverse { + syntax: "*"; + inherits: false; + initial-value: 0; +} +@property --tw-border-style { + syntax: "*"; + inherits: false; + initial-value: solid; +} +@property --tw-gradient-position { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-via-stops { + syntax: "*"; + inherits: false; +} +@property --tw-gradient-from-position { + syntax: ""; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-leading { + syntax: "*"; + inherits: false; +} +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} +@property --tw-tracking { + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: ""; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-blur { + syntax: "*"; + inherits: false; +} +@property --tw-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-invert { + syntax: "*"; + inherits: false; +} +@property --tw-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-drop-shadow-alpha { + syntax: ""; + inherits: false; + initial-value: 100%; +} +@property --tw-drop-shadow-size { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-blur { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-brightness { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-contrast { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-grayscale { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-hue-rotate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-invert { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-opacity { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-saturate { + syntax: "*"; + inherits: false; +} +@property --tw-backdrop-sepia { + syntax: "*"; + inherits: false; +} +@property --tw-duration { + syntax: "*"; + inherits: false; +} +@property --tw-content { + syntax: "*"; + initial-value: ""; + inherits: false; +} +@keyframes pulse { + 50% { + opacity: 0.5; + } +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-translate-z: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-scale-z: 1; + --tw-rotate-x: initial; + --tw-rotate-y: initial; + --tw-rotate-z: initial; + --tw-skew-x: initial; + --tw-skew-y: initial; + --tw-space-y-reverse: 0; + --tw-border-style: solid; + --tw-gradient-position: initial; + --tw-gradient-from: #0000; + --tw-gradient-via: #0000; + --tw-gradient-to: #0000; + --tw-gradient-stops: initial; + --tw-gradient-via-stops: initial; + --tw-gradient-from-position: 0%; + --tw-gradient-via-position: 50%; + --tw-gradient-to-position: 100%; + --tw-leading: initial; + --tw-font-weight: initial; + --tw-tracking: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-blur: initial; + --tw-brightness: initial; + --tw-contrast: initial; + --tw-grayscale: initial; + --tw-hue-rotate: initial; + --tw-invert: initial; + --tw-opacity: initial; + --tw-saturate: initial; + --tw-sepia: initial; + --tw-drop-shadow: initial; + --tw-drop-shadow-color: initial; + --tw-drop-shadow-alpha: 100%; + --tw-drop-shadow-size: initial; + --tw-backdrop-blur: initial; + --tw-backdrop-brightness: initial; + --tw-backdrop-contrast: initial; + --tw-backdrop-grayscale: initial; + --tw-backdrop-hue-rotate: initial; + --tw-backdrop-invert: initial; + --tw-backdrop-opacity: initial; + --tw-backdrop-saturate: initial; + --tw-backdrop-sepia: initial; + --tw-duration: initial; + --tw-content: ""; + } + } +} diff --git a/css/sigpro.min.css b/css/sigpro.min.css new file mode 100644 index 0000000..9dd3aa2 --- /dev/null +++ b/css/sigpro.min.css @@ -0,0 +1,2 @@ +/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ +@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-500:oklch(55.1% .027 264.364);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-3xl:48rem;--container-5xl:64rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-widest:.1em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-3xl:1.5rem;--drop-shadow-2xl:0 25px 25px #00000026;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-sm:8px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}@media (prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}}:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root{--fx-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");scrollbar-color:currentColor #0000}@supports (color:color-mix(in lab, red, red)){:root{scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) #0000}}@property --radialprogress{syntax:"";inherits:true;initial-value:0%}:root:not(span){overflow:var(--page-overflow)}:root{background:var(--page-scroll-bg,var(--root-bg));--page-scroll-bg-on:linear-gradient(var(--root-bg,#0000), var(--root-bg,#0000)) var(--root-bg,#0000)}@supports (color:color-mix(in lab, red, red)){:root{--page-scroll-bg-on:linear-gradient(var(--root-bg,#0000), var(--root-bg,#0000)) color-mix(in srgb, var(--root-bg,#0000), oklch(0% 0 0) calc(var(--page-has-backdrop,0) * 40%))}}:root{--page-scroll-transition-on:background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter,unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter,unset) ; else: unset)}@keyframes set-page-has-scroll{0%,to{--page-has-scroll:1}}:root,[data-theme]{background:var(--page-scroll-bg,var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg:var(--color-base-100)}}@layer components;@layer utilities{@layer daisyui.l1.l2.l3{.modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.modal::backdrop{display:none}:where(.drawer-side){overflow:hidden}.drawer-side{pointer-events:none;visibility:hidden;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;inset-inline-start:0;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.drawer-side>*{grid-row-start:1;grid-column-start:1}.drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%}[dir=rtl] :is(.drawer-side>:not(.drawer-overlay)){translate:100%}.fab{pointer-events:none;z-index:999;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));white-space:nowrap;inset-inline-end:1rem;flex-direction:column-reverse;align-items:flex-end;gap:.5rem;display:flex;position:fixed;bottom:1rem}.fab>*{pointer-events:auto;align-items:center;gap:.5rem;display:flex}.fab>:hover,.fab>:has(:focus-visible){z-index:1}.fab>[tabindex]:first-child{transition-property:opacity,visibility,rotate;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:grid;position:relative}.fab .fab-close,.fab .fab-main-action{inset-inline-end:0;position:absolute;bottom:0}:is(.fab:focus-within:has(.fab-close),.fab:focus-within:has(.fab-main-action))>[tabindex]{opacity:0;rotate:90deg}.fab:focus-within>[tabindex]:first-child{pointer-events:none}.fab:focus-within>:nth-child(n+2){visibility:visible;--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:1}.fab>:nth-child(n+2){visibility:hidden;--tw-scale-x:80%;--tw-scale-y:80%;--tw-scale-z:80%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:0;transition-property:opacity,scale,visibility;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.fab>:nth-child(n+2).fab-main-action,.fab>:nth-child(n+2).fab-close{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.fab>:nth-child(3){transition-delay:30ms}.fab>:nth-child(4){transition-delay:60ms}.fab>:nth-child(5){transition-delay:90ms}.fab>:nth-child(6){transition-delay:.12s}.drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:currentColor oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4))}@supports (color:color-mix(in lab, red, red)){:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4))}}:where(:root:has(.drawer-toggle:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll;animation-timeline:scroll()}.tooltip{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);display:inline-block;position:relative}.tooltip>.tooltip-content,.tooltip[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}.tooltip:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;-webkit-mask-position:-1px 0;mask-position:-1px 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:var(--mask-tooltip);-webkit-mask-image:var(--mask-tooltip);mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.tooltip>.tooltip-content,.tooltip[data-tip]:before,.tooltip:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))>.tooltip-content,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible)):after{opacity:1;--tt-pos:0rem}@media (prefers-reduced-motion:no-preference){:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))>.tooltip-content,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible)):after{transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}.tab{cursor:pointer;appearance:none;text-align:center;webkit-user-select:none;-webkit-user-select:none;user-select:none;flex-wrap:wrap;justify-content:center;align-items:center;display:inline-flex;position:relative}@media (hover:hover){.tab:hover{color:var(--color-base-content)}}.tab{--tab-p:.75rem;--tab-bg:var(--color-base-100);--tab-border-color:var(--color-base-300);--tab-radius-ss:0;--tab-radius-se:0;--tab-radius-es:0;--tab-radius-ee:0;--tab-order:0;--tab-radius-min:calc(.75rem - var(--border));--tab-radius-limit:min(var(--radius-field), var(--tab-radius-min));--tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px);order:var(--tab-order);height:var(--tab-height);padding-inline:var(--tab-p);border-color:#0000;font-size:.875rem}.tab:is(input[type=radio]){min-width:fit-content}.tab:is(input[type=radio]):after{--tw-content:attr(aria-label);content:var(--tw-content)}.tab:is(label){position:relative}.tab:is(label) input{cursor:pointer;appearance:none;opacity:0;position:absolute;inset:0}:is(.tab:checked,.tab:is(label:has(:checked)),.tab:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]))+.tab-content{display:block}.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.tab:not(input):empty{cursor:default;flex-grow:1}.tab:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.tab:focus{outline-offset:2px;outline:2px solid #0000}}.tab:focus-visible,.tab:is(label:has(:checked:focus-visible)){outline-offset:-5px;outline:2px solid}.tab[disabled]{pointer-events:none;opacity:.4}.tab\!{cursor:pointer!important;appearance:none!important;text-align:center!important;webkit-user-select:none!important;-webkit-user-select:none!important;user-select:none!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;display:inline-flex!important;position:relative!important}@media (hover:hover){.tab\!:hover{color:var(--color-base-content)!important}}.tab\!{--tab-p:.75rem!important;--tab-bg:var(--color-base-100)!important;--tab-border-color:var(--color-base-300)!important;--tab-radius-ss:0!important;--tab-radius-se:0!important;--tab-radius-es:0!important;--tab-radius-ee:0!important;--tab-order:0!important;--tab-radius-min:calc(.75rem - var(--border))!important;--tab-radius-limit:min(var(--radius-field), var(--tab-radius-min))!important;--tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px)!important;order:var(--tab-order)!important;height:var(--tab-height)!important;padding-inline:var(--tab-p)!important;border-color:#0000!important;font-size:.875rem!important}.tab\!:is(input[type=radio]){min-width:fit-content!important}.tab\!:is(input[type=radio]):after{--tw-content:attr(aria-label)!important;content:var(--tw-content)!important}.tab\!:is(label){position:relative!important}.tab\!:is(label) input{cursor:pointer!important;appearance:none!important;opacity:0!important;position:absolute!important;inset:0!important}:is(.tab\!:checked,.tab\!:is(label:has(:checked)),.tab\!:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]))+.tab-content{display:block!important}.tab\!:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:var(--color-base-content)!important}@supports (color:color-mix(in lab, red, red)){.tab\!:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:color-mix(in oklab, var(--color-base-content) 50%, transparent)!important}}.tab\!:not(input):empty{cursor:default!important;flex-grow:1!important}.tab\!:focus{--tw-outline-style:none!important;outline-style:none!important}@media (forced-colors:active){.tab\!:focus{outline-offset:2px!important;outline:2px solid #0000!important}}.tab\!:focus-visible,.tab\!:is(label:has(:checked:focus-visible)){outline-offset:-5px!important;outline:2px solid!important}.tab\![disabled]{pointer-events:none!important;opacity:.4!important}.menu{--menu-active-fg:var(--color-neutral-content);--menu-active-bg:var(--color-neutral);flex-flow:column wrap;width:fit-content;padding:.5rem;font-size:.875rem;display:flex}.menu :where(li ul){white-space:nowrap;margin-inline-start:1rem;padding-inline-start:.5rem;position:relative}.menu :where(li ul):before{background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";inset-inline-start:0;position:absolute;top:.75rem;bottom:.75rem}.menu :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}.menu :where(li:not(.menu-title)>:not(ul,details,.menu-title,.btn)),.menu :where(li:not(.menu-title)>details>summary:not(.menu-title)){border-radius:var(--radius-field);text-align:start;text-wrap:balance;-webkit-user-select:none;user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:grid}.menu :where(li>details>summary){--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li>details>summary){outline-offset:2px;outline:2px solid #0000}}.menu :where(li>details>summary)::-webkit-details-marker{display:none}:is(.menu :where(li>details>summary),.menu :where(li>.menu-dropdown-toggle)):after{content:"";transform-origin:50%;pointer-events:none;justify-self:flex-end;width:.375rem;height:.375rem;transition-property:rotate,translate;transition-duration:.2s;display:block;translate:0 -1px;rotate:-135deg;box-shadow:inset 2px 2px}.menu details{interpolate-size:allow-keywords;overflow:hidden}.menu details::details-content{block-size:0}@media (prefers-reduced-motion:no-preference){.menu details::details-content{transition-behavior:allow-discrete;transition-property:block-size,content-visibility;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}}.menu details[open]::details-content{block-size:auto}.menu :where(li>details[open]>summary):after,.menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after{translate:0 1px;rotate:45deg}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{color:var(--color-base-content);--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{outline-offset:2px;outline:2px solid #0000}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){outline-offset:2px;outline:2px solid #0000}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){box-shadow:inset 0 1px oklch(0% 0 0/.01),inset 0 -1px oklch(100% 0 0/.01)}.menu :where(li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}.menu :where(li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative}.menu :where(li) .badge{justify-self:flex-end}.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{outline-offset:2px;outline:2px solid #0000}}.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise)}:is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active):not(:is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active):active){box-shadow:0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg)}.menu :where(li).menu-disabled{pointer-events:none;color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li).menu-disabled{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.menu .dropdown:focus-within .menu-dropdown-toggle:after{translate:0 1px;rotate:45deg}.menu .dropdown-content{margin-top:.5rem;padding:.5rem}.menu .dropdown-content:before{display:none}.floating-label{display:block;position:relative}.floating-label input{display:block}.floating-label input::placeholder,.floating-label textarea::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.floating-label>span{z-index:1;background-color:var(--color-base-100);opacity:0;inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * 10 / 2);pointer-events:none;border-radius:2px;padding-inline:.25rem;font-size:.875rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.floating-label:has(:disabled,[disabled])>span{opacity:0}.floating-label:has(.input-xs,.select-xs,.textarea-xs) span{top:calc(var(--size-field,.25rem) * 6 / 2);font-size:.6875rem}.floating-label:has(.input-sm,.select-sm,.textarea-sm) span{top:calc(var(--size-field,.25rem) * 8 / 2);font-size:.75rem}.floating-label:has(.input-md,.select-md,.textarea-md) span{top:calc(var(--size-field,.25rem) * 10 / 2);font-size:.875rem}.floating-label:has(.input-lg,.select-lg,.textarea-lg) span{top:calc(var(--size-field,.25rem) * 12 / 2);font-size:1.125rem}.floating-label:has(.input-xl,.select-xl,.textarea-xl) span{top:calc(var(--size-field,.25rem) * 14 / 2);font-size:1.375rem}.dropdown{position-area:var(--anchor-v,bottom) var(--anchor-h,span-right);display:inline-block;position:relative}.dropdown>:not(:has(~[class*=dropdown-content])):focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.dropdown>:not(:has(~[class*=dropdown-content])):focus{outline-offset:2px;outline:2px solid #0000}}.dropdown .dropdown-content{position:absolute}.dropdown.dropdown-close .dropdown-content,.dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content,.dropdown.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content{transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover],.dropdown .dropdown-content{z-index:999}@media (prefers-reduced-motion:no-preference){.dropdown[popover],.dropdown .dropdown-content{transition-behavior:allow-discrete;transition-property:opacity,scale,display;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation:.2s dropdown}}@starting-style{.dropdown[popover],.dropdown .dropdown-content{opacity:0;scale:.95}}:is(.dropdown:not(.dropdown-close).dropdown-open,.dropdown:not(.dropdown-close):not(.dropdown-hover):focus,.dropdown:not(.dropdown-close):focus-within)>[tabindex]:first-child{pointer-events:none}:is(.dropdown:not(.dropdown-close).dropdown-open,.dropdown:not(.dropdown-close):not(.dropdown-hover):focus,.dropdown:not(.dropdown-close):focus-within) .dropdown-content,.dropdown:not(.dropdown-close).dropdown-hover:hover .dropdown-content{opacity:1;scale:1}.dropdown:is(details) summary::-webkit-details-marker{display:none}.dropdown:where([popover]){background:0 0}.dropdown[popover]{color:inherit;position:fixed}@supports not (position-area:bottom){.dropdown[popover]{margin:auto}.dropdown[popover].dropdown-close{transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover].dropdown-open:not(:popover-open){transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover]::backdrop{background-color:oklab(0% none none/.3)}}:is(.dropdown[popover].dropdown-close,.dropdown[popover]:not(.dropdown-open,:popover-open)){transform-origin:top;opacity:0;display:none;scale:.95}:where(.btn){width:unset}.btn{cursor:pointer;text-align:center;vertical-align:middle;outline-offset:2px;webkit-user-select:none;-webkit-user-select:none;user-select:none;padding-inline:var(--btn-p);color:var(--btn-fg);--tw-prose-links:var(--btn-fg);height:var(--size);font-size:var(--fontsize,.875rem);outline-color:var(--btn-color,var(--color-base-content));background-color:var(--btn-bg);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--btn-noise);border-width:var(--border);border-style:solid;border-color:var(--btn-border);text-shadow:0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));touch-action:manipulation;box-shadow:0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);--size:calc(var(--size-field,.25rem) * 10);--btn-bg:var(--btn-color,var(--color-base-200));--btn-fg:var(--color-base-content);--btn-p:1rem;--btn-border:var(--btn-bg);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.375rem;font-weight:600;transition-property:color,background-color,border-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex}@supports (color:color-mix(in lab, red, red)){.btn{--btn-border:color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%))}}.btn{--btn-shadow:0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg)}@supports (color:color-mix(in lab, red, red)){.btn{--btn-shadow:0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000)}}.btn{--btn-noise:var(--fx-noise)}@media (hover:hover){.btn:hover{--btn-bg:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn:hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}}.btn:focus-visible,.btn:has(:focus-visible){isolation:isolate;outline-width:2px;outline-style:solid}.btn:active:not(.btn-active){--btn-bg:var(--btn-color,var(--color-base-200));translate:0 .5px}@supports (color:color-mix(in lab, red, red)){.btn:active:not(.btn-active){--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 5%)}}.btn:active:not(.btn-active){--btn-border:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn:active:not(.btn-active){--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}.btn:active:not(.btn-active){--btn-shadow:0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)}.btn:is(input[type=checkbox],input[type=radio]){appearance:none}.btn:is(input[type=checkbox],input[type=radio])[aria-label]:after{--tw-content:attr(aria-label);content:var(--tw-content)}.btn:where(input:checked:not(.filter .btn)){--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content);isolation:isolate}.loading{pointer-events:none;aspect-ratio:1;vertical-align:middle;width:calc(var(--size-selector,.25rem) * 6);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.collapse{border-radius:var(--radius-box,1rem);isolation:isolate;grid-template-rows:max-content 0fr;grid-template-columns:minmax(0,1fr);width:100%;display:grid;position:relative;overflow:hidden}@media (prefers-reduced-motion:no-preference){.collapse{transition:grid-template-rows .2s}}.collapse>input:is([type=checkbox],[type=radio]){appearance:none;opacity:0;z-index:1;grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)),.collapse:not(.collapse-close):has(>input:is([type=checkbox],[type=radio]):checked){grid-template-rows:max-content 1fr}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){content-visibility:visible;min-height:fit-content}@supports not (content-visibility:visible){.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){visibility:visible}}.collapse:focus-visible,.collapse:has(>input:is([type=checkbox],[type=radio]):focus-visible),.collapse:has(summary:focus-visible){outline-color:var(--color-base-content);outline-offset:2px;outline-width:2px;outline-style:solid}.collapse:not(.collapse-close)>input[type=checkbox],.collapse:not(.collapse-close)>input[type=radio]:not(:checked),.collapse:not(.collapse-close)>.collapse-title{cursor:pointer}:is(.collapse[tabindex]:focus:not(.collapse-close,.collapse[open]),.collapse[tabindex]:focus-within:not(.collapse-close,.collapse[open]))>.collapse-title{cursor:unset}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content),.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){padding-bottom:1rem}.collapse:is(details){width:100%}@media (prefers-reduced-motion:no-preference){.collapse:is(details)::details-content{transition:content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s;interpolate-size:allow-keywords;height:0}.collapse:is(details):where([open])::details-content{height:auto}}.collapse:is(details) summary{display:block;position:relative}.collapse:is(details) summary::-webkit-details-marker{display:none}.collapse:is(details)>.collapse-content{content-visibility:visible}.collapse:is(details) summary{outline:none}.collapse-content{content-visibility:hidden;min-height:0;cursor:unset;grid-row-start:2;grid-column-start:1;padding-left:1rem;padding-right:1rem}@supports not (content-visibility:hidden){.collapse-content{visibility:hidden}}@media (prefers-reduced-motion:no-preference){.collapse-content{transition:content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out}}.list{flex-direction:column;font-size:.875rem;display:flex}.list .list-row{--list-grid-cols:minmax(0, auto) 1fr;border-radius:var(--radius-box);word-break:break-word;grid-auto-flow:column;grid-template-columns:var(--list-grid-cols);gap:1rem;padding:1rem;display:grid;position:relative}:is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after{content:"";border-bottom:var(--border) solid;inset-inline:var(--radius-box);border-color:var(--color-base-content);position:absolute;bottom:0}@supports (color:color-mix(in lab, red, red)){:is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after{border-color:color-mix(in oklab, var(--color-base-content) 5%, transparent)}}.toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;display:inline-grid;position:relative;box-shadow:inset 0 1px}@supports (color:color-mix(in lab, red, red)){.toggle{box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset}}.toggle{--input-color:var(--color-base-content);transition:color .3s,grid-template-columns .2s}@supports (color:color-mix(in lab, red, red)){.toggle{--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000)}}.toggle{--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size)}.toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s}.toggle>:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.toggle>:focus{outline-offset:2px;outline:2px solid #0000}}.toggle>:nth-child(2){color:var(--color-base-100);rotate:0deg}.toggle>:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}.toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor;background-color:currentColor;grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@supports (color:color-mix(in lab, red, red)){.toggle:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000)}}.toggle:before{background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise)}@media (forced-colors:active){.toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.toggle:before{outline-offset:-1rem;outline:.25rem solid}}.toggle:focus-visible,.toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr}:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{background-color:currentColor}@starting-style{:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{opacity:0}}.toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.toggle:disabled{cursor:not-allowed;opacity:.3}.toggle:disabled:before{border:var(--border) solid currentColor;background-color:#0000}.input{cursor:text;border:var(--border) solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem), .875rem);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}@supports (color:color-mix(in lab, red, red)){.input{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.input{--size:calc(var(--size-field,.25rem) * 10);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.input:where(input){display:inline-flex}.input :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex}.input :where(input):focus,.input :where(input):focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.input :where(input):focus,.input :where(input):focus-within{outline-offset:2px;outline:2px solid #0000}}.input :where(input[type=url]),.input :where(input[type=email]){direction:ltr}.input :where(input[type=date]){display:inline-flex}.input:focus,.input:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.input:focus,.input:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.input:focus,.input:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.input:focus,.input:focus-within{--font-size:1rem}}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{box-shadow:none}.input:has(>input[disabled])>input[disabled]{cursor:not-allowed}.input::-webkit-date-and-time-value{text-align:inherit}.input[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}.input:has(>input[type=date]) :where(input[type=date]){webkit-appearance:none;appearance:none;display:inline-flex}.input:has(>input[type=date]) input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}.indicator{width:max-content;display:inline-flex;position:relative}.indicator :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%) var(--indicator-y,-50%);position:absolute}.table{border-collapse:separate;--tw-border-spacing-x:calc(.25rem * 0);--tw-border-spacing-y:calc(.25rem * 0);width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(.table tr.row-hover,.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.table :where(thead,tfoot){white-space:nowrap;color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(thead,tfoot){color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.table :where(thead,tfoot){font-size:.875rem;font-weight:600}.table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}.table :where(.table-pin-rows thead tr){z-index:1;background-color:var(--color-base-100);position:sticky;top:0}.table :where(.table-pin-rows tfoot tr){z-index:1;background-color:var(--color-base-100);position:sticky;bottom:0}.table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}.steps{counter-reset:step;grid-auto-columns:1fr;grid-auto-flow:column;display:inline-grid;overflow:auto hidden}.steps .step{text-align:center;--step-bg:var(--color-base-300);--step-fg:var(--color-base-content);grid-template-rows:40px 1fr;grid-template-columns:auto;place-items:center;min-width:4rem;display:grid}.steps .step:before{width:100%;height:.5rem;color:var(--step-bg);background-color:var(--step-bg);content:"";border:1px solid;grid-row-start:1;grid-column-start:1;margin-inline-start:-100%;top:0}.steps .step>.step-icon,.steps .step:not(:has(.step-icon)):after{--tw-content:counter(step);content:var(--tw-content);counter-increment:step;z-index:1;color:var(--step-fg);background-color:var(--step-bg);border:1px solid var(--step-bg);border-radius:3.40282e38px;grid-row-start:1;grid-column-start:1;place-self:center;place-items:center;width:2rem;height:2rem;display:grid;position:relative}.steps .step:first-child:before{--tw-content:none;content:var(--tw-content)}.steps .step[data-content]:after{--tw-content:attr(data-content);content:var(--tw-content)}.range{appearance:none;webkit-appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem) * 6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:currentColor}@supports (color:color-mix(in lab, red, red)){.range{--range-bg:color-mix(in oklab, currentColor 10%, #0000)}}.range{cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] .range{--range-dir:-1}.range:focus{outline:none}.range:focus-visible{outline-offset:2px;outline:2px solid}.range::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size) * .5)}@media (forced-colors:active){.range::-webkit-slider-runnable-track{border:1px solid}.range::-moz-range-track{border:1px solid}}.range::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p) solid;appearance:none;webkit-appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}@supports (color:color-mix(in lab, red, red)){.range::-webkit-slider-thumb{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill))}}.range::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size) * .5)}.range::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p) solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));background-color:currentColor;position:relative;top:50%}@supports (color:color-mix(in lab, red, red)){.range::-moz-range-thumb{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill))}}.range:disabled{cursor:not-allowed;opacity:.3}.select{border:var(--border) solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.select{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.select{border-color:var(--input-color);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.select{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.select{--size:calc(var(--size-field,.25rem) * 10)}[dir=rtl] .select{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}[dir=rtl] .select::picker(select){translate:.5rem}[dir=rtl] .select select::picker(select){translate:.5rem}.select[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}.select select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border) * 2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem}.select select:focus,.select select:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.select select:focus,.select select:focus-within{outline-offset:2px;outline:2px solid #0000}}.select select:not(:last-child){background-image:none;margin-inline-end:-1.375rem}.select:focus,.select:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.select:focus,.select:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.select:focus,.select:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select)::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select)::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.select:has(>select[disabled])>select[disabled]{cursor:not-allowed}@supports (appearance:base-select){.select,.select select{appearance:base-select}:is(.select,.select select)::picker(select){appearance:base-select}}:is(.select,.select select)::picker(select){color:inherit;border:var(--border) solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}:is(.select,.select select)::picker-icon{display:none}:is(.select,.select select) optgroup{padding-top:.5em}:is(.select,.select select) optgroup option:first-child{margin-top:.5em}:is(.select,.select select) option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{outline-offset:2px;outline:2px solid #0000}}:is(.select,.select select) option:not(:disabled):active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth) * 3px) -2px var(--color-neutral)}.timeline{display:flex;position:relative}.timeline>li{grid-template-rows:var(--timeline-row-start,minmax(0, 1fr)) auto var(--timeline-row-end,minmax(0, 1fr));grid-template-columns:var(--timeline-col-start,minmax(0, 1fr)) auto var(--timeline-col-end,minmax(0, 1fr));flex-shrink:0;align-items:center;display:grid;position:relative}.timeline>li>hr{border:none;width:100%}.timeline>li>hr:first-child{grid-row-start:2;grid-column-start:1}.timeline>li>hr:last-child{grid-area:2/3/auto/none}@media print{.timeline>li>hr{border:.1px solid var(--color-base-300)}}.timeline :where(hr){background-color:var(--color-base-300);height:.25rem}.timeline:has(.timeline-middle hr):first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline:has(.timeline-middle hr):last-child,.timeline:not(:has(.timeline-middle)) :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}.timeline:not(:has(.timeline-middle)) :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.swap{cursor:pointer;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;place-content:center;display:inline-grid;position:relative}.swap input{appearance:none;border:none}.swap>*{grid-row-start:1;grid-column-start:1}@media (prefers-reduced-motion:no-preference){.swap>*{transition-property:transform,rotate,opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}}.swap .swap-on,.swap .swap-indeterminate,.swap input:indeterminate~.swap-on,.swap input:is(:checked,:indeterminate)~.swap-off{opacity:0}.swap input:checked~.swap-on,.swap input:indeterminate~.swap-indeterminate{opacity:1;backface-visibility:visible}.collapse-title{grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out;position:relative}.avatar{vertical-align:middle;display:inline-flex;position:relative}.avatar>div{aspect-ratio:1;display:block;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.checkbox{border:var(--border) solid var(--input-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.checkbox{border:var(--border) solid var(--input-color,color-mix(in oklab, var(--color-base-content) 20%, #0000))}}.checkbox{cursor:pointer;appearance:none;border-radius:var(--radius-selector);vertical-align:middle;color:var(--color-base-content);box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);flex-shrink:0;padding:.25rem;transition:background-color .2s,box-shadow .2s;display:inline-block;position:relative}.checkbox:before{--tw-content:"";content:var(--tw-content);opacity:0;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);width:100%;height:100%;box-shadow:0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;background-color:currentColor;font-size:1rem;line-height:.75;transition:clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;display:block;rotate:45deg}.checkbox:focus-visible{outline:2px solid var(--input-color,currentColor);outline-offset:2px}.checkbox:checked,.checkbox[aria-checked=true]{background-color:var(--input-color,#0000);box-shadow:0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1))}:is(.checkbox:checked,.checkbox[aria-checked=true]):before{clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%);opacity:1}@media (forced-colors:active){:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:0deg}}@media print{:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:0deg}}.checkbox:indeterminate{background-color:var(--input-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.checkbox:indeterminate{background-color:var(--input-color,color-mix(in oklab, var(--color-base-content) 20%, #0000))}}.checkbox:indeterminate:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%);translate:0 -35%;rotate:0deg}.radio{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative}@supports (color:color-mix(in lab, red, red)){.radio{border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000))}}.radio{box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor)}.radio:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}.radio:focus-visible{outline:2px solid}.radio:checked,.radio[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor}@media (prefers-reduced-motion:no-preference){.radio:checked,.radio[aria-checked=true]{animation:.2s ease-out radio}}:is(.radio:checked,.radio[aria-checked=true]):before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){:is(.radio:checked,.radio[aria-checked=true]):before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{:is(.radio:checked,.radio[aria-checked=true]):before{outline-offset:-1rem;outline:.25rem solid}}.rating{vertical-align:middle;display:inline-flex;position:relative}.rating input{appearance:none;border:none}.rating :where(*){background-color:var(--color-base-content);opacity:.2;border-radius:0;width:1.5rem;height:1.5rem}@media (prefers-reduced-motion:no-preference){.rating :where(*){animation:.25s ease-out rating}}.rating :where(*):is(input){cursor:pointer}.rating .rating-hidden{background-color:#0000;width:.5rem}.rating input[type=radio]:checked{background-image:none}.rating :checked,.rating [aria-checked=true],.rating [aria-current=true],.rating :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}.rating :focus-visible{scale:1.1}@media (prefers-reduced-motion:no-preference){.rating :focus-visible{transition:scale .2s ease-out}}.rating :active:focus{animation:none;scale:1.1}.rating\!{vertical-align:middle!important;display:inline-flex!important;position:relative!important}.rating\! input{appearance:none!important;border:none!important}.rating\! :where(*){background-color:var(--color-base-content)!important;opacity:.2!important;border-radius:0!important;width:1.5rem!important;height:1.5rem!important}@media (prefers-reduced-motion:no-preference){.rating\! :where(*){animation:.25s ease-out rating!important}}.rating\! :where(*):is(input){cursor:pointer!important}.rating\! .rating-hidden{background-color:#0000!important;width:.5rem!important}.rating\! input[type=radio]:checked{background-image:none!important}.rating\! :checked,.rating\! [aria-checked=true],.rating\! [aria-current=true],.rating\! :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1!important}.rating\! :focus-visible{scale:1.1!important}@media (prefers-reduced-motion:no-preference){.rating\! :focus-visible{transition:scale .2s ease-out!important}}.rating\! :active:focus{animation:none!important;scale:1.1!important}.navbar{align-items:center;width:100%;min-height:4rem;padding:.5rem;display:flex}.drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.card{border-radius:var(--radius-box);outline-offset:2px;outline:0 solid #0000;flex-direction:column;transition:outline .2s ease-in-out;display:flex;position:relative}.card:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.card:focus{outline-offset:2px;outline:2px solid #0000}}.card:focus-visible{outline-color:currentColor}.card :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}.card :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}.card figure{justify-content:center;align-items:center;display:flex}.card:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;-webkit-user-select:none;user-select:none}.card:has(>:checked){outline:2px solid}.stats{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}.progress{appearance:none;border-radius:var(--radius-box);background-color:currentColor;width:100%;height:.5rem;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.progress{background-color:color-mix(in oklab, currentcolor 20%, transparent)}}.progress{color:var(--color-base-content)}.progress:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%}@media (prefers-reduced-motion:no-preference){.progress:indeterminate{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){.progress:indeterminate::-moz-progress-bar{background-color:#0000}@media (prefers-reduced-motion:no-preference){.progress:indeterminate::-moz-progress-bar{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}.progress::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){.progress::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}.progress::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}.textarea{border:var(--border) solid #0000;appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,.875rem), .875rem);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem}@supports (color:color-mix(in lab, red, red)){.textarea{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.textarea{--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.textarea{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.textarea textarea{appearance:none;background-color:#0000;border:none}.textarea textarea:focus,.textarea textarea:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.textarea textarea:focus,.textarea textarea:focus-within{outline-offset:2px;outline:2px solid #0000}}.textarea:focus,.textarea:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.textarea:focus,.textarea:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.textarea:focus,.textarea:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.textarea:focus,.textarea:focus-within{--font-size:1rem}}}.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]))::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]))::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){box-shadow:none}.textarea:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}.stack{grid-template-rows:3px 4px 1fr 4px 3px;grid-template-columns:3px 4px 1fr 4px 3px;display:inline-grid}.stack>*{width:100%;height:100%}.stack>:nth-child(n+2){opacity:.7;width:100%}.stack>:nth-child(2){z-index:2;opacity:.9}.stack>:first-child{z-index:3;width:100%}.modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.modal-backdrop button{cursor:pointer}.timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.25rem}.timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.25rem}.stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}.modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}.drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}.timeline-middle{grid-row-start:2;grid-column-start:2}.stat-value{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}.stat-desc{white-space:nowrap;color:var(--color-base-content);grid-column-start:1}@supports (color:color-mix(in lab, red, red)){.stat-desc{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.stat-desc{font-size:.75rem}.stat-title{white-space:nowrap;color:var(--color-base-content);grid-column-start:1}@supports (color:color-mix(in lab, red, red)){.stat-title{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.stat-title{font-size:.75rem}.divider{white-space:nowrap;height:1rem;margin:var(--divider-m,1rem 0);--divider-color:var(--color-base-content);flex-direction:row;align-self:stretch;align-items:center;display:flex}@supports (color:color-mix(in lab, red, red)){.divider{--divider-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.divider:before,.divider:after{content:"";background-color:var(--divider-color);flex-grow:1;width:100%;height:.125rem}@media print{.divider:before,.divider:after{border:.5px solid}}.divider:not(:empty){gap:1rem}.filter{flex-wrap:wrap;display:flex}.filter input[type=radio]{width:auto}.filter input{opacity:1;transition:margin .1s,opacity .3s,padding .3s,border-width .1s;overflow:hidden;scale:1}.filter input:not(:last-child){margin-inline-end:.25rem}.filter input.filter-reset{aspect-ratio:1}.filter input.filter-reset:after{--tw-content:"×";content:var(--tw-content)}.filter:not(:has(input:checked:not(.filter-reset))) .filter-reset,.filter:not(:has(input:checked:not(.filter-reset))) input[type=reset],.filter:has(input:checked:not(.filter-reset)) input:not(:checked,.filter-reset,input[type=reset]){opacity:0;border-width:0;width:0;margin-inline:0;padding-inline:0;scale:0}.label{white-space:nowrap;color:currentColor;align-items:center;gap:.375rem;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.label{color:color-mix(in oklab, currentcolor 60%, transparent)}}.label:has(input){cursor:pointer}.label:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex}.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid currentColor;margin-inline:-.75rem .75rem}@supports (color:color-mix(in lab, red, red)){.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000)}}.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid currentColor;margin-inline:.75rem -.75rem}@supports (color:color-mix(in lab, red, red)){.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000)}}.modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.fieldset-legend{color:var(--color-base-content);justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:-.25rem;padding-block:.5rem;font-weight:600;display:flex}.status{aspect-ratio:1;border-radius:var(--radius-selector);background-color:var(--color-base-content);width:.5rem;height:.5rem;display:inline-block}@supports (color:color-mix(in lab, red, red)){.status{background-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.status{vertical-align:middle;color:#0000004d;background-position:50%;background-repeat:no-repeat}@supports (color:color-mix(in lab, red, red)){.status{color:color-mix(in oklab, var(--color-black) 30%, transparent)}}.status{background-image:radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000);box-shadow:0 2px 3px -1px}@supports (color:color-mix(in lab, red, red)){.status{box-shadow:0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000)}}.badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}.tabs{--tabs-height:auto;--tabs-direction:row;--tab-height:calc(var(--size-field,.25rem) * 10);height:var(--tabs-height);flex-wrap:wrap;flex-direction:var(--tabs-direction);display:flex}.footer{grid-auto-flow:row;place-items:start;gap:2.5rem 1rem;width:100%;font-size:.875rem;line-height:1.25rem;display:grid}.footer>*{place-items:start;gap:.5rem;display:grid}.footer.footer-center{text-align:center;grid-auto-flow:column dense;place-items:center}.footer.footer-center>*{place-items:center}.stat{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid}.stat:not(:last-child){border-inline-end:var(--border) dashed currentColor}@supports (color:color-mix(in lab, red, red)){.stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}.stat:not(:last-child){border-block-end:none}.navbar-end{justify-content:flex-end;align-items:center;width:50%;display:inline-flex}.navbar-start{justify-content:flex-start;align-items:center;width:50%;display:inline-flex}.card-body{padding:var(--card-p,1.5rem);font-size:var(--card-fs,.875rem);flex-direction:column;flex:auto;gap:.5rem;display:flex}.card-body :where(p){flex-grow:1}.navbar-center{flex-shrink:0;align-items:center;display:inline-flex}.fab-flower{--position:0rem;display:grid}.fab-flower>:nth-child(-n+2){--position:0rem}.fab-flower>*{--degree:180deg;--flip-degree:calc(180deg - var(--degree));transform:translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position)));grid-area:1/1}[dir=rtl] :is(.fab-flower>*){transform:translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position)))}.fab-flower>:nth-child(n+7){display:none}.fab-flower:has(:nth-child(3)){--position:140%}.fab-flower:has(:nth-child(3))>:nth-child(3){--degree:135deg}.fab-flower:has(:nth-child(4)){--position:140%}.fab-flower:has(:nth-child(4))>:nth-child(3){--degree:165deg}.fab-flower:has(:nth-child(4))>:nth-child(4){--degree:105deg}.fab-flower:has(:nth-child(5)){--position:180%}.fab-flower:has(:nth-child(5))>:nth-child(3){--degree:180deg}.fab-flower:has(:nth-child(5))>:nth-child(4){--degree:135deg}.fab-flower:has(:nth-child(5))>:nth-child(5){--degree:90deg}.fab-flower:has(:nth-child(6)){--position:220%}.fab-flower:has(:nth-child(6))>:nth-child(3){--degree:180deg}.fab-flower:has(:nth-child(6))>:nth-child(4){--degree:150deg}.fab-flower:has(:nth-child(6))>:nth-child(5){--degree:120deg}.fab-flower:has(:nth-child(6))>:nth-child(6){--degree:90deg}.fieldset-label{color:var(--color-base-content);align-items:center;gap:.375rem;display:flex}@supports (color:color-mix(in lab, red, red)){.fieldset-label{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.fieldset-label:has(input){cursor:pointer}.alert{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid}@supports (color:color-mix(in lab, red, red)){.alert{box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08))}}.alert:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}.fieldset{grid-template-columns:1fr;grid-auto-rows:max-content;gap:.375rem;padding-block:.25rem;font-size:.75rem;display:grid}.card-title{font-size:var(--cardtitle-fs,1.125rem);align-items:center;gap:.5rem;font-weight:600;display:flex}.mask{vertical-align:middle;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.link{cursor:pointer;text-decoration-line:underline}.link:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.link:focus{outline-offset:2px;outline:2px solid #0000}}.link:focus-visible{outline-offset:2px;outline:2px solid}.timeline-box{border:var(--border) solid;border-radius:var(--radius-box);border-color:var(--color-base-300);background-color:var(--color-base-100);padding-block:.5rem;padding-inline:1rem;font-size:.75rem;box-shadow:0 1px 2px oklch(0% 0 0/.05)}.btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}}@layer daisyui.l1.l2{.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4)}:is(.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal) .modal-box{opacity:1;translate:0;scale:1}:root:has(:is(.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll;animation-timeline:scroll()}@starting-style{.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal{opacity:0}}:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto}:where(.drawer-toggle:checked~.drawer-side)>:not(.drawer-overlay){translate:0%}.drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.tooltip>.tooltip-content,.tooltip[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-off) 50%}.tooltip:after{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-tail) 50%}.collapse-arrow>.collapse-title:after{width:.5rem;height:.5rem;display:block;position:absolute;transform:translateY(-100%)rotate(45deg)}@media (prefers-reduced-motion:no-preference){.collapse-arrow>.collapse-title:after{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}}.collapse-arrow>.collapse-title:after{content:"";transform-origin:75% 75%;pointer-events:none;top:50%;inset-inline-end:1.4rem;box-shadow:2px 2px}.collapse-plus>.collapse-title:after{width:.5rem;height:.5rem;display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.collapse-plus>.collapse-title:after{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}}.collapse-plus>.collapse-title:after{--tw-content:"+";content:var(--tw-content);pointer-events:none;top:.9rem;inset-inline-end:1.4rem}.btn:disabled:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn:disabled:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn:disabled:not(.btn-link,.btn-ghost){box-shadow:none}.btn:disabled{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn:disabled{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.btn[disabled]:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn[disabled]:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn[disabled]:not(.btn-link,.btn-ghost){box-shadow:none}.btn[disabled]{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn[disabled]{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.btn-disabled:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn-disabled:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn-disabled:not(.btn-link,.btn-ghost){box-shadow:none}.btn-disabled{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn-disabled{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.tab-disabled{pointer-events:none;opacity:.4}@media (prefers-reduced-motion:no-preference){.collapse[open].collapse-arrow>.collapse-title:after,.collapse.collapse-open.collapse-arrow>.collapse-title:after{transform:translateY(-50%)rotate(225deg)}}.collapse.collapse-open.collapse-plus>.collapse-title:after{--tw-content:"−";content:var(--tw-content)}:is(.collapse[tabindex].collapse-arrow:focus:not(.collapse-close),.collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close))>.collapse-title:after,.collapse.collapse-arrow:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{transform:translateY(-50%)rotate(225deg)}.collapse[open].collapse-plus>.collapse-title:after,.collapse[tabindex].collapse-plus:focus:not(.collapse-close)>.collapse-title:after,.collapse.collapse-plus:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{--tw-content:"−";content:var(--tw-content)}.list .list-row:has(.list-col-grow:first-child){--list-grid-cols:1fr}.list .list-row:has(.list-col-grow:nth-child(2)){--list-grid-cols:minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(3)){--list-grid-cols:minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(4)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(5)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(6)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row>*{grid-row-start:1}.steps .step-neutral+.step-neutral:before,.steps .step-neutral:after,.steps .step-neutral>.step-icon{--step-bg:var(--color-neutral);--step-fg:var(--color-neutral-content)}.steps .step-primary+.step-primary:before,.steps .step-primary:after,.steps .step-primary>.step-icon{--step-bg:var(--color-primary);--step-fg:var(--color-primary-content)}.steps .step-secondary+.step-secondary:before,.steps .step-secondary:after,.steps .step-secondary>.step-icon{--step-bg:var(--color-secondary);--step-fg:var(--color-secondary-content)}.steps .step-accent+.step-accent:before,.steps .step-accent:after,.steps .step-accent>.step-icon{--step-bg:var(--color-accent);--step-fg:var(--color-accent-content)}.steps .step-info+.step-info:before,.steps .step-info:after,.steps .step-info>.step-icon{--step-bg:var(--color-info);--step-fg:var(--color-info-content)}.steps .step-success+.step-success:before,.steps .step-success:after,.steps .step-success>.step-icon{--step-bg:var(--color-success);--step-fg:var(--color-success-content)}.steps .step-warning+.step-warning:before,.steps .step-warning:after,.steps .step-warning>.step-icon{--step-bg:var(--color-warning);--step-fg:var(--color-warning-content)}.steps .step-error+.step-error:before,.steps .step-error:after,.steps .step-error>.step-icon{--step-bg:var(--color-error);--step-fg:var(--color-error-content)}.menu-horizontal{flex-direction:row;display:inline-flex}.menu-horizontal>li:not(.menu-title)>details>ul{transform-origin:top;border-radius:var(--radius-box);background-color:var(--color-base-100);opacity:0;margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute;scale:.95;box-shadow:0 1px 3px oklch(0% 0 0/.1),0 1px 2px -1px oklch(0% 0 0/.1)}@media (prefers-reduced-motion:no-preference){@starting-style{.menu-horizontal>li:not(.menu-title)>details>ul{opacity:0;scale:.95}}.menu-horizontal>li:not(.menu-title)>details>ul{transition-behavior:allow-discrete;transition-property:opacity,scale,display;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation:.2s menu}}.menu-horizontal>li:not(.menu-title)>details[open]>ul{opacity:1;scale:1}.menu-horizontal>li>details>ul:before{--tw-content:none;content:var(--tw-content)}.checkbox:disabled,.radio:disabled{cursor:not-allowed;opacity:.2}.rating.rating-xs :where(:not(.rating-hidden)){width:1rem;height:1rem}.rating.rating-sm :where(:not(.rating-hidden)){width:1.25rem;height:1.25rem}.rating.rating-md :where(:not(.rating-hidden)){width:1.5rem;height:1.5rem}.rating.rating-lg :where(:not(.rating-hidden)){width:1.75rem;height:1.75rem}.rating.rating-xl :where(:not(.rating-hidden)){width:2rem;height:2rem}.rating\!.rating-xs :where(:not(.rating-hidden)){width:1rem!important;height:1rem!important}.rating\!.rating-sm :where(:not(.rating-hidden)){width:1.25rem!important;height:1.25rem!important}.rating\!.rating-md :where(:not(.rating-hidden)){width:1.5rem!important;height:1.5rem!important}.rating\!.rating-lg :where(:not(.rating-hidden)){width:1.75rem!important;height:1.75rem!important}.rating\!.rating-xl :where(:not(.rating-hidden)){width:2rem!important;height:2rem!important}:where(.navbar){position:relative}.tooltip-bottom>.tooltip-content,.tooltip-bottom[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,-.25rem));inset:var(--tt-off) auto auto 50%}.tooltip-bottom:after{transform:translateX(-50%) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset:var(--tt-tail) auto auto 50%}.tooltip-left>.tooltip-content,.tooltip-left[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(-50%);inset:50% var(--tt-off) auto auto}.tooltip-left:after{transform:translateX(var(--tt-pos,.25rem)) translateY(-50%) rotate(-90deg);inset:50% calc(var(--tt-tail) + 1px) auto auto}.tooltip-right>.tooltip-content,.tooltip-right[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(-50%);inset:50% auto auto var(--tt-off)}.tooltip-right:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(-50%) rotate(90deg);inset:50% auto auto calc(var(--tt-tail) + 1px)}.tooltip-top>.tooltip-content,.tooltip-top[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-off) 50%}.tooltip-top:after{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-tail) 50%}.dropdown-right{--anchor-h:right;--anchor-v:span-bottom}.dropdown-right .dropdown-content{transform-origin:0;inset-inline-start:100%;top:0;bottom:auto}.dropdown-left{--anchor-h:left;--anchor-v:span-bottom}.dropdown-left .dropdown-content{transform-origin:100%;inset-inline-end:100%;top:0;bottom:auto}.dropdown-end{--anchor-h:span-left}.dropdown-end :where(.dropdown-content){inset-inline-end:0;translate:0}[dir=rtl] :is(.dropdown-end :where(.dropdown-content)){translate:0}.dropdown-end.dropdown-left{--anchor-h:left;--anchor-v:span-top}.dropdown-end.dropdown-left .dropdown-content{top:auto;bottom:0}.dropdown-end.dropdown-right{--anchor-h:right;--anchor-v:span-top}.dropdown-end.dropdown-right .dropdown-content{top:auto;bottom:0}.dropdown-bottom{--anchor-v:bottom}.dropdown-bottom .dropdown-content{transform-origin:top;top:100%;bottom:auto}.dropdown-top{--anchor-v:top}.dropdown-top .dropdown-content{transform-origin:bottom;top:auto;bottom:100%}.btn-active{--btn-bg:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}.btn-active{--btn-shadow:0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);isolation:isolate}:is(.stack,.stack.stack-bottom)>*{grid-area:3/3/6/4}:is(.stack,.stack.stack-bottom)>:nth-child(2){grid-area:2/2/5/5}:is(.stack,.stack.stack-bottom)>:first-child{grid-area:1/1/4/6}.stack.stack-top>*{grid-area:1/3/4/4}.stack.stack-top>:nth-child(2){grid-area:2/2/5/5}.stack.stack-top>:first-child{grid-area:3/1/6/6}.stack.stack-start>*{grid-area:3/1/4/4}.stack.stack-start>:nth-child(2){grid-area:2/2/5/5}.stack.stack-start>:first-child{grid-area:1/3/6/6}.stack.stack-end>*{grid-area:3/3/4/6}.stack.stack-end>:nth-child(2){grid-area:2/2/5/5}.stack.stack-end>:first-child{grid-area:1/1/6/4}.tabs-box{background-color:var(--color-base-200);--tabs-box-radius:calc(3 * var(--radius-field));border-radius:calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)));box-shadow:0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset;padding:.25rem}.tabs-box>.tab{border-radius:var(--radius-field);border-style:none}.tabs-box>.tab:focus-visible,.tabs-box>.tab:is(label:has(:checked:focus-visible)){outline-offset:2px}.tabs-box>.tab:focus-visible{z-index:1}.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){background-color:var(--tab-bg,var(--color-base-100));box-shadow:0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px var(--color-neutral), 0 1px 6px -4px var(--color-neutral)}@supports (color:color-mix(in lab, red, red)){.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){box-shadow:0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000)}}@media (forced-colors:active){.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){border:1px solid}}.tabs-box>.tab-content{height:calc(100% - var(--tab-height) + var(--border) - .5rem);border-radius:calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border));margin-top:.25rem}.timeline-horizontal{flex-direction:row}.timeline-horizontal>li{align-items:center}.timeline-horizontal>li>hr{width:100%;height:.25rem}.timeline-horizontal>li>hr:first-child{grid-row-start:2;grid-column-start:1}.timeline-horizontal>li>hr:last-child{grid-area:2/3/auto/none}.timeline-horizontal .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}.timeline-horizontal .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}.timeline-horizontal:has(.timeline-middle)>li>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline-horizontal:has(.timeline-middle)>li>hr:last-child,.timeline-horizontal:not(:has(.timeline-middle)) :first-child>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}.timeline-horizontal:not(:has(.timeline-middle)) :last-child>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline-vertical{flex-direction:column}.timeline-vertical>li{--timeline-row-start:minmax(0, 1fr);--timeline-row-end:minmax(0, 1fr);justify-items:center}.timeline-vertical>li>hr{width:.25rem;height:100%}.timeline-vertical>li>hr:first-child{grid-row-start:1;grid-column-start:2}.timeline-vertical>li>hr:last-child{grid-area:3/2/none}.timeline-vertical .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}.timeline-vertical .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}.timeline-vertical:has(.timeline-middle)>li>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}.timeline-vertical:has(.timeline-middle)>li>hr:last-child,.timeline-vertical:not(:has(.timeline-middle)) :first-child>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}.timeline-vertical:not(:has(.timeline-middle)) :last-child>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}.timeline-vertical.timeline-snap-icon>li{--timeline-col-start:minmax(0, 1fr);--timeline-row-start:.5rem}.timeline-compact{--timeline-row-start:0}.timeline-compact .timeline-start{grid-area:3/1/4/4;place-self:flex-start center}.timeline-compact li:has(.timeline-start) .timeline-end{grid-row-start:auto;grid-column-start:none}.timeline-compact.timeline-vertical>li{--timeline-col-start:0}.timeline-compact.timeline-vertical .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}.timeline-compact.timeline-vertical li:has(.timeline-start) .timeline-end{grid-row-start:none;grid-column-start:auto}.drawer-end{grid-auto-columns:auto max-content}.drawer-end>.drawer-toggle~.drawer-content{grid-column-start:1}.drawer-end>.drawer-toggle~.drawer-side{grid-column-start:2;justify-items:end}.drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:100%}[dir=rtl] :is(.drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay)){translate:-100%}.drawer-end>.drawer-toggle:checked~.drawer-side>:not(.drawer-overlay){translate:0%}.input-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:max(var(--font-size,1.125rem), 1.125rem)}.input-lg[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input-md{--size:calc(var(--size-field,.25rem) * 10);font-size:max(var(--font-size,.875rem), .875rem)}.input-md[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:max(var(--font-size,.75rem), .75rem)}.input-sm[type=number]::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}.input-xs{--size:calc(var(--size-field,.25rem) * 6);font-size:max(var(--font-size,.6875rem), .6875rem)}.input-xs[type=number]::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}.modal-bottom{place-items:end}.modal-bottom .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}.btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.btn-square{width:var(--size);height:var(--size);padding-inline:0}.btn-wide{width:100%;max-width:16rem}.btn-block{width:100%}.loading-lg{width:calc(var(--size-selector,.25rem) * 7)}.loading-md{width:calc(var(--size-selector,.25rem) * 6)}.loading-sm{width:calc(var(--size-selector,.25rem) * 5)}.loading-xs{width:calc(var(--size-selector,.25rem) * 4)}.badge-dash{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-style:dashed;border-color:currentColor}.badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.select-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.select-ghost:focus,.select-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.input-ghost:focus,.input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.table-zebra tbody tr:where(:nth-child(2n)),.table-zebra tbody tr:where(:nth-child(2n)) :where(.table-pin-cols tr th){background-color:var(--color-base-200)}@media (hover:hover){:is(.table-zebra tbody tr.row-hover,.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.loading-ball{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E")}.loading-bars{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E")}.loading-dots{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E")}.loading-infinity{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E")}.loading-ring{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}.loading-spinner{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}.mask-circle{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e")}.mask-heart{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e")}.mask-star{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e")}.mask-star-2{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e")}.checkbox-lg{--size:calc(var(--size-selector,.25rem) * 7);padding:.3125rem}.checkbox-md{--size:calc(var(--size-selector,.25rem) * 6);padding:.25rem}.checkbox-sm{--size:calc(var(--size-selector,.25rem) * 5);padding:.1875rem}.checkbox-xs{--size:calc(var(--size-selector,.25rem) * 4);padding:.125rem}.radio-lg{padding:.3125rem}.radio-lg[type=radio]{--size:calc(var(--size-selector,.25rem) * 7)}.select-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:1.125rem}.select-lg option{padding-block:.375rem;padding-inline:1rem}.table-lg :not(thead,tfoot) tr{font-size:1.125rem}.table-lg :where(th,td){padding-block:1rem;padding-inline:1.25rem}.badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.alert-error{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}.alert-info{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}.alert-success{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}.alert-warning{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}.checkbox-accent{color:var(--color-accent-content);--input-color:var(--color-accent)}.checkbox-error{color:var(--color-error-content);--input-color:var(--color-error)}.checkbox-info{color:var(--color-info-content);--input-color:var(--color-info)}.checkbox-primary{color:var(--color-primary-content);--input-color:var(--color-primary)}.checkbox-secondary{color:var(--color-secondary-content);--input-color:var(--color-secondary)}.checkbox-success{color:var(--color-success-content);--input-color:var(--color-success)}.checkbox-warning{color:var(--color-warning-content);--input-color:var(--color-warning)}.range-accent{color:var(--color-accent);--range-thumb:var(--color-accent-content)}.range-error{color:var(--color-error);--range-thumb:var(--color-error-content)}.tooltip-accent{--tt-bg:var(--color-accent)}.tooltip-accent>.tooltip-content,.tooltip-accent[data-tip]:before{color:var(--color-accent-content)}.tooltip-error{--tt-bg:var(--color-error)}.tooltip-error>.tooltip-content,.tooltip-error[data-tip]:before{color:var(--color-error-content)}.tooltip-info{--tt-bg:var(--color-info)}.tooltip-info>.tooltip-content,.tooltip-info[data-tip]:before{color:var(--color-info-content)}.tooltip-primary{--tt-bg:var(--color-primary)}.tooltip-primary>.tooltip-content,.tooltip-primary[data-tip]:before{color:var(--color-primary-content)}.tooltip-secondary{--tt-bg:var(--color-secondary)}.tooltip-secondary>.tooltip-content,.tooltip-secondary[data-tip]:before{color:var(--color-secondary-content)}.tooltip-success{--tt-bg:var(--color-success)}.tooltip-success>.tooltip-content,.tooltip-success[data-tip]:before{color:var(--color-success-content)}.tooltip-warning{--tt-bg:var(--color-warning)}.tooltip-warning>.tooltip-content,.tooltip-warning[data-tip]:before{color:var(--color-warning-content)}.swap-active .swap-off{opacity:0}.swap-active .swap-on{opacity:1}.btn-lg{--fontsize:1.125rem;--btn-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}.btn-md{--fontsize:.875rem;--btn-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}.btn-sm{--fontsize:.75rem;--btn-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}.btn-xl{--fontsize:1.375rem;--btn-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}.btn-xs{--fontsize:.6875rem;--btn-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}.badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.input-accent,.input-accent:focus,.input-accent:focus-within{--input-color:var(--color-accent)}.input-error,.input-error:focus,.input-error:focus-within{--input-color:var(--color-error)}.input-info,.input-info:focus,.input-info:focus-within{--input-color:var(--color-info)}.input-primary,.input-primary:focus,.input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.input-secondary:focus,.input-secondary:focus-within{--input-color:var(--color-secondary)}.input-success,.input-success:focus,.input-success:focus-within{--input-color:var(--color-success)}.input-warning,.input-warning:focus,.input-warning:focus-within{--input-color:var(--color-warning)}.radio-accent{--input-color:var(--color-accent)}.radio-error{--input-color:var(--color-error)}.radio-primary{--input-color:var(--color-primary)}.radio-secondary{--input-color:var(--color-secondary)}.range-lg{--range-thumb-size:calc(var(--size-selector,.25rem) * 7)}.range-xs{--range-thumb-size:calc(var(--size-selector,.25rem) * 4)}.select-error,.select-error:focus,.select-error:focus-within{--input-color:var(--color-error)}.select-primary,.select-primary:focus,.select-primary:focus-within{--input-color:var(--color-primary)}.select-secondary,.select-secondary:focus,.select-secondary:focus-within{--input-color:var(--color-secondary)}.toggle-accent:checked,.toggle-accent[aria-checked=true]{--input-color:var(--color-accent)}.toggle-error:checked,.toggle-error[aria-checked=true]{--input-color:var(--color-error)}.toggle-info:checked,.toggle-info[aria-checked=true]{--input-color:var(--color-info)}.toggle-lg[type=checkbox],.toggle-lg:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}.toggle-md[type=checkbox],.toggle-md:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}.toggle-primary:checked,.toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}.toggle-secondary:checked,.toggle-secondary[aria-checked=true]{--input-color:var(--color-secondary)}.toggle-sm[type=checkbox],.toggle-sm:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}.toggle-success:checked,.toggle-success[aria-checked=true]{--input-color:var(--color-success)}.toggle-warning:checked,.toggle-warning[aria-checked=true]{--input-color:var(--color-warning)}.toggle-xs[type=checkbox],.toggle-xs:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}}.prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose],[class~=not-prose] *)){text-decoration-line:none}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse:not(td,tr,colgroup){visibility:revert-layer}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.-top-1{top:calc(var(--spacing) * -1)}.top-0{top:calc(var(--spacing) * 0)}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.top-6{top:calc(var(--spacing) * 6)}.top-10{top:calc(var(--spacing) * 10)}.-right-2{right:calc(var(--spacing) * -2)}.right-0{right:calc(var(--spacing) * 0)}.right-1\/4{right:25%}.right-3{right:calc(var(--spacing) * 3)}.right-6{right:calc(var(--spacing) * 6)}.-bottom-5{bottom:calc(var(--spacing) * -5)}.bottom-6{bottom:calc(var(--spacing) * 6)}.bottom-10{bottom:calc(var(--spacing) * 10)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-1\/4{left:25%}.left-2{left:calc(var(--spacing) * 2)}.left-3{left:calc(var(--spacing) * 3)}.left-4{left:calc(var(--spacing) * 4)}.left-6{left:calc(var(--spacing) * 6)}.-z-0{z-index:calc(0 * -1)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-90{z-index:90}.z-\[1\]{z-index:1}.z-\[50\]{z-index:50}.z-\[90\]{z-index:90}.z-\[100\]{z-index:100}.z-\[110\]{z-index:110}.z-\[9999\]{z-index:9999}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-1{margin:calc(var(--spacing) * 1)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mx-auto{margin-inline:auto}.my-1{margin-block:calc(var(--spacing) * 1)}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.my-16{margin-block:calc(var(--spacing) * 16)}.-mt-10{margin-top:calc(var(--spacing) * -10)}.mt-0{margin-top:calc(var(--spacing) * 0)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-6{margin-left:calc(var(--spacing) * 6)}.icon-\[lucide--alert-circle\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--alert-triangle\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--calendar\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 2v4m8-4v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--check-circle\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11l3 3L22 4'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--chevron-left\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18l-6-6l6-6'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--chevron-right\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--chevrons-left\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m11 17l-5-5l5-5m7 10l-5-5l5-5'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--chevrons-right\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 17l5-5l-5-5m7 10l5-5l-5-5'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--eye-off\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575a1 1 0 0 1 0 .696a10.8 10.8 0 0 1-1.444 2.49m-6.41-.679a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 4.446-5.143M2 2l20 20'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--eye\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--hash\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 9h16M4 15h16M10 3L8 21m8-18l-2 18'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--info\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--link\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--lock\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--mail\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--phone\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233a14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--search\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--text\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 18H3M17 6H3m18 6H3'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--upload\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--x\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200))}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.aspect-square{aspect-ratio:1}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-32{height:calc(var(--spacing) * 32)}.h-48{height:calc(var(--spacing) * 48)}.h-96{height:calc(var(--spacing) * 96)}.h-\[300px\]{height:300px}.h-\[400px\]{height:400px}.h-\[500px\]{height:500px}.h-auto{height:auto}.h-full{height:100%}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-96{max-height:calc(var(--spacing) * 96)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-\[100px\]{min-height:100px}.min-h-\[200px\]{min-height:200px}.min-h-\[300px\]{min-height:300px}.min-h-\[400px\]{min-height:400px}.min-h-\[500px\]{min-height:500px}.min-h-full{min-height:100%}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-40{width:calc(var(--spacing) * 40)}.w-48{width:calc(var(--spacing) * 48)}.w-52{width:calc(var(--spacing) * 52)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-80{width:calc(var(--spacing) * 80)}.w-96{width:calc(var(--spacing) * 96)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[200px\]{max-width:200px}.max-w-md{max-width:var(--container-md)}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-\[4rem\]{min-width:4rem}.min-w-\[48px\]{min-width:48px}.min-w-\[500px\]{min-width:500px}.min-w-\[600px\]{min-width:600px}.min-w-max{min-width:max-content}.flex-1{flex:1}.flex-none{flex:none}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-2{--tw-translate-x:calc(var(--spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-10{--tw-translate-x:calc(var(--spacing) * 10);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-2{--tw-translate-y:calc(var(--spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-4{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-box{border-radius:var(--radius-box);border-radius:var(--radius-box)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}@layer daisyui.l1{.alert-dash{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none;border-style:dashed}.btn-dash:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}@media (hover:none){.btn-dash:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}}.alert-soft{color:var(--alert-color,var(--color-base-content));background:var(--alert-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.alert-soft{background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100))}}.alert-soft{--alert-border-color:var(--alert-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.alert-soft{--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100))}}.alert-soft{box-shadow:none;background-image:none}.btn-link{--btn-border:#0000;--btn-bg:#0000;--btn-noise:none;--btn-shadow:"";outline-color:currentColor;text-decoration-line:underline}.btn-link:not(.btn-disabled,.btn:disabled,.btn[disabled]){--btn-fg:var(--btn-color,var(--color-primary))}.btn-link:is(.btn-active,:hover,:active:focus,:focus-visible){--btn-border:#0000;--btn-bg:#0000}.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn)){--btn-shadow:"";--btn-bg:#0000;--btn-border:#0000;--btn-noise:none}.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn)):not(:disabled,[disabled],.btn-disabled){--btn-fg:var(--btn-color,currentColor);outline-color:currentColor}@media (hover:none){.btn-ghost:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color,currentColor);--btn-border:#0000;--btn-noise:none;outline-color:currentColor}}.btn-outline:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}@media (hover:none){.btn-outline:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-fg:var(--btn-color,var(--color-base-content));--btn-bg:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 8%, var(--color-base-100))}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-border:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 10%, var(--color-base-100))}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-noise:none}@media (hover:none){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-fg:var(--btn-color,var(--color-base-content));--btn-bg:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 8%, var(--color-base-100))}}.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-border:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 10%, var(--color-base-100))}}.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-noise:none}}}.btn-dash{border-style:dashed}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-base-200\/30{border-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.border-base-200\/30{border-color:color-mix(in oklab, var(--color-base-200) 30%, transparent)}}.border-base-300{border-color:var(--color-base-300)}.border-base-content\/20{border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.border-base-content\/20{border-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.border-black\/5{border-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.border-black\/5{border-color:color-mix(in oklab, var(--color-black) 5%, transparent)}}.border-black\/10{border-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.border-black\/10{border-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.border-primary,.border-primary\/20{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/20{border-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--color-accent)}.bg-base-100,.bg-base-100\/30{background-color:var(--color-base-100)}@supports (color:color-mix(in lab, red, red)){.bg-base-100\/30{background-color:color-mix(in oklab, var(--color-base-100) 30%, transparent)}}.bg-base-200,.bg-base-200\/30{background-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.bg-base-200\/30{background-color:color-mix(in oklab, var(--color-base-200) 30%, transparent)}}.bg-base-200\/50{background-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.bg-base-200\/50{background-color:color-mix(in oklab, var(--color-base-200) 50%, transparent)}}.bg-base-300{background-color:var(--color-base-300)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.bg-error,.bg-error\/10{background-color:var(--color-error)}@supports (color:color-mix(in lab, red, red)){.bg-error\/10{background-color:color-mix(in oklab, var(--color-error) 10%, transparent)}}.bg-info{background-color:var(--color-info)}.bg-neutral{background-color:var(--color-neutral)}.bg-primary,.bg-primary\/5{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary) 5%, transparent)}}.bg-primary\/10{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary) 10%, transparent)}}.bg-primary\/20{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.bg-secondary{background-color:var(--color-secondary)}.bg-success,.bg-success\/10{background-color:var(--color-success)}@supports (color:color-mix(in lab, red, red)){.bg-success\/10{background-color:color-mix(in oklab, var(--color-success) 10%, transparent)}}.bg-warning,.bg-warning\/10{background-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.bg-warning\/10{background-color:color-mix(in oklab, var(--color-warning) 10%, transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-accent{--tw-gradient-from:var(--color-accent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-primary{--tw-gradient-from:var(--color-primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-secondary{--tw-gradient-from:var(--color-secondary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-accent{--tw-gradient-via:var(--color-accent);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-accent{--tw-gradient-to:var(--color-accent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-primary{--tw-gradient-to:var(--color-primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-secondary{--tw-gradient-to:var(--color-secondary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.mask-circle{--tw-mask-radial-shape:circle}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-10{padding:calc(var(--spacing) * 10)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pr-10{padding-right:calc(var(--spacing) * 10)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-10{padding-left:calc(var(--spacing) * 10)}.\!text-center{text-align:center!important}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.leading-20{--tw-leading:calc(var(--spacing) * 20);line-height:calc(var(--spacing) * 20)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking:var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-balance{text-wrap:balance}.whitespace-nowrap{white-space:nowrap}.text-accent{color:var(--color-accent)}.text-accent-content{color:var(--color-accent-content)}.text-base-content,.text-base-content\/60{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.text-base-content\/60{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.text-base-content\/90{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.text-base-content\/90{color:color-mix(in oklab, var(--color-base-content) 90%, transparent)}}.text-error{color:var(--color-error)}.text-error-content{color:var(--color-error-content)}.text-gray-500{color:var(--color-gray-500)}.text-info{color:var(--color-info)}.text-info-content{color:var(--color-info-content)}.text-neutral-content{color:var(--color-neutral-content)}.text-primary{color:var(--color-primary)}.text-primary-content{color:var(--color-primary-content)}.text-secondary{color:var(--color-secondary)}.text-secondary-content{color:var(--color-secondary-content)}.text-success{color:var(--color-success)}.text-success-content{color:var(--color-success-content)}.text-transparent{color:#0000}.text-warning{color:var(--color-warning)}.text-warning-content{color:var(--color-warning-content)}.text-white{color:var(--color-white)}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-secondary\/20{--tw-shadow-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-secondary) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-primary{--tw-ring-color:var(--color-primary)}.ring-offset-1{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-2xl{--tw-drop-shadow-size:drop-shadow(0 25px 25px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-2xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.before\:z-50:before,.after\:z-50:after{content:var(--tw-content);z-index:50}@media (hover:hover){.hover\:z-10:hover{z-index:10}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-125:hover{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-accent\/40:hover{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:border-accent\/40:hover{border-color:color-mix(in oklab, var(--color-accent) 40%, transparent)}}.hover\:border-base-content\/20:hover{border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.hover\:border-base-content\/20:hover{border-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.hover\:border-primary\/40:hover{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/40:hover{border-color:color-mix(in oklab, var(--color-primary) 40%, transparent)}}.hover\:border-primary\/50:hover{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary) 50%, transparent)}}.hover\:border-secondary\/40:hover{border-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-secondary\/40:hover{border-color:color-mix(in oklab, var(--color-secondary) 40%, transparent)}}.hover\:bg-base-100:hover{background-color:var(--color-base-100)}.hover\:bg-base-200:hover{background-color:var(--color-base-200)}.hover\:bg-base-300:hover{background-color:var(--color-base-300)}.hover\:bg-white\/30:hover{background-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/30:hover{background-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.hover\:text-base-content:hover{color:var(--color-base-content)}.hover\:opacity-100:hover{opacity:1}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}@media (min-width:48rem){.md\:h-64{height:calc(var(--spacing) * 64)}.md\:w-64{width:calc(var(--spacing) * 64)}.md\:w-auto{width:auto}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}}@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}}@keyframes rating{0%,40%{filter:brightness(1.05)contrast(1.05);scale:1.1}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes rotator{89.9999%,to{--first-item-position:0 0%}90%,99.9999%{--first-item-position:0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes pulse{50%{opacity:.5}} \ No newline at end of file diff --git a/dist/sigpro-ui.js b/dist/sigpro-ui.js index 5ea4848..ac097f4 100644 --- a/dist/sigpro-ui.js +++ b/dist/sigpro-ui.js @@ -33,7 +33,6 @@ val: () => val, ui: () => ui, tt: () => tt, - joinClass: () => joinClass, getIcon: () => getIcon, Tooltip: () => Tooltip, Toast: () => Toast, @@ -52,6 +51,7 @@ Menu: () => Menu, Loading: () => Loading, List: () => List, + Label: () => Label, Input: () => Input, Indicator: () => Indicator, Fileinput: () => Fileinput, @@ -472,6 +472,7 @@ Menu: () => Menu, Loading: () => Loading, List: () => List, + Label: () => Label, Input: () => Input, Indicator: () => Indicator, Fileinput: () => Fileinput, @@ -500,50 +501,43 @@ __export(exports_utils, { val: () => val, ui: () => ui, - joinClass: () => joinClass, getIcon: () => getIcon }); var val = (t) => typeof t === "function" ? t() : t; - var joinClass = (t, l) => typeof l === "function" ? () => `${t} ${l() || ""}`.trim() : `${t} ${l || ""}`.trim(); - var ui = (base, str) => { - if (!str) - return base; - const parts = typeof str === "string" ? str.split(" ") : str; - const classes = [base]; - parts.forEach((part) => { - if (part) - classes.push(`${base}-${part}`); - }); - return classes.join(" "); - }; + var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim(); var getIcon = (icon) => { if (!icon) return null; - let position = "left"; - let iconValue = icon; + if (typeof icon === "function") { + return $html("span", { class: "mr-1" }, icon()); + } + if (typeof icon === "object") { + return $html("span", { class: "mr-1" }, icon); + } if (typeof icon === "string") { const parts = icon.trim().split(/\s+/); - if (parts[parts.length - 1] === "right") { - position = "right"; - iconValue = parts.slice(0, -1).join(" "); + const hasRight = parts[parts.length - 1] === "right"; + const iconClass = hasRight ? parts.slice(0, -1).join(" ") : icon; + const spacing = hasRight ? "ml-1" : "mr-1"; + if (iconClass && !iconClass.startsWith("icon-[") && !iconClass.includes("--")) { + return $html("span", { class: spacing }, iconClass); } + return $html("span", { class: `${iconClass} ${spacing}`.trim() }); } - const spacing = position === "left" ? "mr-1" : "ml-1"; - const element = typeof iconValue === "string" && iconValue.includes("--") ? $html("span", { class: `icon-[${iconValue}]` }) : typeof iconValue === "function" ? iconValue() : $html("span", {}, iconValue); - return $html("span", { class: spacing }, element); + return null; }; // src/components/Accordion.js var Accordion = (props, children) => { - const { title, name, open, ...rest } = props; + const { class: className, title, name, open, ...rest } = props; return $html("div", { ...rest, - class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class) + class: ui("collapse collapse-arrow bg-base-200 mb-2", className) }, [ $html("input", { type: name ? "radio" : "checkbox", name, - checked: open + checked: val(open) }), $html("div", { class: "collapse-title text-xl font-medium" }, title), $html("div", { class: "collapse-content" }, children) @@ -555,63 +549,31 @@ __export(exports_Alert, { Alert: () => Alert }); - - // src/core/icons.js - var iconShow = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg=="; - var iconHide = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC"; - var iconClose = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg=="; - var iconCalendar = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC"; - var iconLock = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII="; - var iconAbc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg=="; - var icon123 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg=="; - var iconMail = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC"; - var iconInfo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC"; - var iconSuccess = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg=="; - var iconError = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC"; - var iconWarning = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII="; - var iconLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg=="; - var iconRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg=="; - var iconLLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg=="; - var iconRRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII="; - var iconUpload = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC"; - - // src/components/Alert.js var Alert = (props, children) => { - const { type = "info", soft = true, ...rest } = props; - const icons = { - info: iconInfo, - success: iconSuccess, - warning: iconWarning, - error: iconError - }; - const typeClass = () => { - const t = val(type); - const map = { - info: "alert-info", - success: "alert-success", - warning: "alert-warning", - error: "alert-error" - }; - return map[t] || t; + const { class: className, actions, type = "info", soft = true, ...rest } = props; + const iconMap = { + info: "icon-[lucide--info]", + success: "icon-[lucide--check-circle]", + warning: "icon-[lucide--alert-triangle]", + error: "icon-[lucide--alert-circle]" }; + const typeClass = `alert-${type}`; + const softClass = soft ? "alert-soft" : ""; + const allClasses = [typeClass, softClass, className].filter(Boolean).join(" "); const content = children || props.message; return $html("div", { ...rest, role: "alert", - class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}` - }, [ - $html("img", { - src: icons[val(type)] || icons.info, - class: "w-4 h-4 object-contain", - alt: val(type) - }), + class: ui("alert", allClasses) + }, () => [ + getIcon(iconMap[type]), $html("div", { class: "flex-1" }, [ $html("span", {}, [typeof content === "function" ? content() : content]) ]), - props.actions ? $html("div", { class: "flex-none" }, [ - typeof props.actions === "function" ? props.actions() : props.actions + actions ? $html("div", { class: "flex-none" }, [ + typeof actions === "function" ? actions() : actions ]) : null - ]); + ].filter(Boolean)); }; // src/components/Autocomplete.js @@ -648,57 +610,75 @@ Input: () => Input }); var Input = (props) => { - const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props; + const { + class: className, + value, + type = "text", + icon, + oninput, + placeholder, + disabled, + size, + ...rest + } = props; const isPassword = type === "password"; const visible = $(false); - const iconsByType = { - text: iconAbc, - password: iconLock, - date: iconCalendar, - number: icon123, - email: iconMail + const iconMap = { + text: "icon-[lucide--text]", + password: "icon-[lucide--lock]", + date: "icon-[lucide--calendar]", + number: "icon-[lucide--hash]", + email: "icon-[lucide--mail]", + search: "icon-[lucide--search]", + tel: "icon-[lucide--phone]", + url: "icon-[lucide--link]" }; - const inputEl = $html("input", { - ...rest, - type: () => isPassword ? visible() ? "text" : "password" : type, - placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "), - class: joinClass("grow order-2 focus:outline-none", props.class), - value, - oninput: (e) => props.oninput?.(e), - disabled: () => val(props.disabled) - }); - const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null; - return $html("label", { - class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : "") - }, [ - leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null, - label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null, - inputEl, + const leftIcon = icon ? getIcon(icon) : iconMap[type] ? getIcon(iconMap[type]) : null; + const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]"); + const paddingLeft = leftIcon ? "pl-10" : ""; + const paddingRight = isPassword ? "pr-10" : ""; + const buttonSize = () => { + if (className?.includes("input-xs")) + return "btn-xs"; + if (className?.includes("input-sm")) + return "btn-sm"; + if (className?.includes("input-lg")) + return "btn-lg"; + return "btn-md"; + }; + return $html("div", { class: "relative w-full" }, () => [ + $html("input", { + ...rest, + type: () => isPassword ? visible() ? "text" : "password" : type, + placeholder: placeholder || " ", + class: ui("input w-full", `${paddingLeft} ${paddingRight} ${className || ""}`.trim()), + value, + oninput: (e) => oninput?.(e), + disabled: () => val(disabled) + }), + leftIcon ? $html("div", { + class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60" + }, leftIcon) : null, isPassword ? $html("button", { type: "button", - class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100", + class: ui("absolute right-3 inset-y-0 flex items-center", "btn btn-ghost btn-circle opacity-50 hover:opacity-100", buttonSize()), onclick: (e) => { e.preventDefault(); visible(!visible()); } - }, () => $html("img", { - class: "w-5 h-5", - src: visible() ? iconShow : iconHide - })) : null, - tip ? $html("div", { class: "tooltip tooltip-left order-4", "data-tip": tip }, $html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?")) : null, - () => val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null + }, () => getPasswordIcon()) : null ]); }; // src/components/Autocomplete.js var Autocomplete = (props) => { - const { options = [], value, onSelect, label, placeholder, ...rest } = props; + const { class: className, items = [], value, onSelect, label, placeholder, ...rest } = props; const query = $(val(value) || ""); const isOpen = $(false); const cursor = $(-1); const list = $(() => { const q = query().toLowerCase(); - const data = val(options) || []; + const data = val(items) || []; return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data; }); const pick = (opt) => { @@ -712,17 +692,17 @@ cursor(-1); }; const nav = (e) => { - const items = list(); + const items2 = list(); if (e.key === "ArrowDown") { e.preventDefault(); isOpen(true); - cursor(Math.min(cursor() + 1, items.length - 1)); + cursor(Math.min(cursor() + 1, items2.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); cursor(Math.max(cursor() - 1, 0)); } else if (e.key === "Enter" && cursor() >= 0) { e.preventDefault(); - pick(items[cursor()]); + pick(items2[cursor()]); } else if (e.key === "Escape") { isOpen(false); } @@ -730,6 +710,7 @@ return $html("div", { class: "relative w-full" }, [ Input({ label, + class: className, placeholder: placeholder || tt("search")(), value: query, onfocus: () => isOpen(true), @@ -756,7 +737,7 @@ onmouseenter: () => cursor(i) }, typeof opt === "string" ? opt : opt.label) ]), (opt, i) => (typeof opt === "string" ? opt : opt.value) + i), - () => list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results") + () => list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")()) ]) ]); }; @@ -766,7 +747,13 @@ __export(exports_Badge, { Badge: () => Badge }); - var Badge = (props, children) => $html("span", { ...props, class: joinClass("badge", props.class) }, children); + var Badge = (props, children) => { + const { class: className, ...rest } = props; + return $html("span", { + ...rest, + class: ui("badge", className) + }, children); + }; // src/components/Button.js var exports_Button = {}; @@ -774,23 +761,17 @@ Button: () => Button }); var Button = (props, children) => { - const { badge, badgeClass, tooltip, icon, loading, ...rest } = props; - const btn = $html("button", { + const { class: className, loading, icon, ...rest } = props; + const iconEl = getIcon(icon); + return $html("button", { ...rest, - class: joinClass("btn", props.class) - }, [ - () => val(loading) ? $html("span", { class: "loading loading-spinner" }) : null, - icon ? $html("span", { class: "mr-1" }, icon) : null, + class: ui("btn", className), + disabled: () => val(loading) || val(props.disabled) + }, () => [ + val(loading) && $html("span", { class: "loading loading-spinner" }), + iconEl, children - ]); - let out = btn; - if (badge) { - out = $html("div", { class: "indicator" }, [ - $html("span", { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") }, badge), - out - ]); - } - return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, out) : out; + ].filter(Boolean)); }; // src/components/Checkbox.js @@ -799,11 +780,11 @@ Checkbox: () => Checkbox }); var Checkbox = (props) => { - const { value, tooltip, toggle, label, ...rest } = props; + const { class: className, value, tooltip, toggle, label, ...rest } = props; const checkEl = $html("input", { ...rest, type: "checkbox", - class: () => val(toggle) ? "toggle" : "checkbox", + class: () => ui(val(toggle) ? "toggle" : "checkbox", className), checked: value }); const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [ @@ -819,7 +800,7 @@ Colorpicker: () => Colorpicker }); var Colorpicker = (props) => { - const { value, label, ...rest } = props; + const { class: className, value, label, ...rest } = props; const isOpen = $(false); const palette = [ ...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"], @@ -832,7 +813,7 @@ ...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"] ]; const getColor = () => val(value) || "#000000"; - return $html("div", { class: "relative w-fit" }, [ + return $html("div", { class: ui("relative w-fit", className) }, [ $html("button", { type: "button", class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case", @@ -880,7 +861,7 @@ Datepicker: () => Datepicker }); var Datepicker = (props) => { - const { value, range, label, placeholder, hour = false, ...rest } = props; + const { class: className, value, range, label, placeholder, hour = false, ...rest } = props; const isOpen = $(false); const internalDate = $(new Date); const hoverDate = $(null); @@ -972,13 +953,13 @@ ]) ]); }; - return $html("div", { class: "relative w-full" }, [ + return $html("div", { class: ui("relative w-full", className) }, [ Input({ label, placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), value: displayValue, readonly: true, - icon: $html("img", { src: iconCalendar, class: "opacity-40" }), + icon: getIcon("icon-[lucide--calendar]"), onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()); @@ -991,15 +972,15 @@ }, [ $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ $html("div", { class: "flex gap-0.5" }, [ - $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, $html("img", { src: iconLLeft, class: "opacity-40" })), - $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, $html("img", { src: iconLeft, class: "opacity-40" })) + $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")), + $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]")) ]), $html("span", { class: "font-bold uppercase flex-1 text-center" }, [ () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }) ]), $html("div", { class: "flex gap-0.5" }, [ - $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, $html("img", { src: iconRight, class: "opacity-40" })), - $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, $html("img", { src: iconRRight, class: "opacity-40" })) + $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")), + $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]")) ]) ]), $html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [ @@ -1089,19 +1070,41 @@ __export(exports_Drawer, { Drawer: () => Drawer }); - var Drawer = (props) => $html("div", { class: joinClass("drawer", props.class) }, [ - $html("input", { - id: props.id, - type: "checkbox", - class: "drawer-toggle", - checked: props.open - }), - $html("div", { class: "drawer-content" }, props.content), - $html("div", { class: "drawer-side" }, [ - $html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }), - $html("div", { class: "min-h-full bg-base-200 w-80" }, props.side) - ]) - ]); + var Drawer = (props, children) => { + const { class: className, id, open, side, content, ...rest } = props; + const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`; + return $html("div", { + ...rest, + class: ui("drawer", className) + }, [ + $html("input", { + id: drawerId, + type: "checkbox", + class: "drawer-toggle", + checked: () => typeof open === "function" ? open() : open, + onchange: (e) => { + if (typeof open === "function") + open(e.target.checked); + } + }), + $html("div", { class: "drawer-content" }, [ + typeof content === "function" ? content() : content + ]), + $html("div", { class: "drawer-side" }, [ + $html("label", { + for: drawerId, + class: "drawer-overlay", + onclick: () => { + if (typeof open === "function") + open(false); + } + }), + $html("div", { class: "min-h-full bg-base-200 w-80" }, [ + typeof side === "function" ? side() : side + ]) + ]) + ]); + }; // src/components/Dropdown.js var exports_Dropdown = {}; @@ -1109,7 +1112,7 @@ Dropdown: () => Dropdown }); var Dropdown = (props, children) => { - const { label, icon, items, ...rest } = props; + const { class: className, label, icon, items, ...rest } = props; const renderContent = () => { if (items) { const source = typeof items === "function" ? items : () => items; @@ -1142,7 +1145,7 @@ }; return $html("div", { ...rest, - class: () => `dropdown ${val(props.class) || ""}` + class: ui("dropdown", className) }, [ $html("div", { tabindex: 0, @@ -1162,17 +1165,17 @@ Fab: () => Fab }); var Fab = (props) => { - const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props; + const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props; return $html("div", { ...rest, - class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}` + class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className) }, [ $html("div", { tabindex: 0, role: "button", class: "btn btn-lg btn-circle btn-primary shadow-2xl" }, [ - icon ? typeof icon === "function" ? icon() : icon : null, + icon ? getIcon(icon) : null, !icon && label ? label : null ]), ...val(actions).map((act) => $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [ @@ -1184,7 +1187,7 @@ e.stopPropagation(); act.onclick?.(e); } - }, [act.icon ? typeof act.icon === "function" ? act.icon() : act.icon : act.text || ""]) + }, [act.icon ? getIcon(act.icon) : act.text || ""]) ])) ]); }; @@ -1194,16 +1197,19 @@ __export(exports_Fieldset, { Fieldset: () => Fieldset }); - var Fieldset = (props, children) => $html("fieldset", { - ...props, - class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class) - }, [ - () => { - const legendText = val(props.legend); - return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null; - }, - children - ]); + var Fieldset = (props, children) => { + const { class: className, legend, ...rest } = props; + return $html("fieldset", { + ...rest, + class: ui("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", className) + }, [ + () => { + const legendText = val(legend); + return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null; + }, + children + ]); + }; // src/components/Fileinput.js var exports_Fileinput = {}; @@ -1211,7 +1217,7 @@ Fileinput: () => Fileinput }); var Fileinput = (props) => { - const { tooltip, max = 2, accept = "*", onSelect } = props; + const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props; const selectedFiles = $([]); const isDragging = $(false); const error = $(null); @@ -1232,7 +1238,7 @@ selectedFiles(updated); onSelect?.(updated); }; - return $html("fieldset", { class: "fieldset w-full p-0" }, [ + return $html("fieldset", { ...rest, class: ui("fieldset w-full p-0", className) }, [ $html("div", { class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`, "data-tip": tooltip @@ -1256,7 +1262,7 @@ } }, [ $html("div", { class: "flex items-center gap-3 w-full" }, [ - $html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }), + getIcon("icon-[lucide--upload]"), $html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."), $html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`) ]), @@ -1285,7 +1291,7 @@ e.stopPropagation(); removeFile(index); } - }, [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })]) + }, [getIcon("icon-[lucide--x]")]) ]), (file) => file.name + file.lastModified) ])) ]); @@ -1296,10 +1302,31 @@ __export(exports_Indicator, { Indicator: () => Indicator }); - var Indicator = (props, children) => $html("div", { class: joinClass("indicator", props.class) }, [ + var Indicator = (props, children) => $html("div", { class: "indicator" }, () => [ children, - $html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge) - ]); + props.value && $html("span", { class: ui("indicator-item badge", props.class) }, props.value) + ].filter(Boolean)); + + // src/components/Label.js + var exports_Label = {}; + __export(exports_Label, { + Label: () => Label + }); + var Label = (props) => { + const { children, value, floating = false, error, required, class: className, ...rest } = props; + if (floating) { + return $html("label", { class: ui("floating-label w-full", className), ...rest }, () => [ + value ? $html("span", {}, value) : null, + children, + error ? $html("span", { class: "text-error text-xs" }, val(error)) : null + ]); + } + return $html("label", { class: ui("input w-full", className), ...rest }, () => [ + value ? $html("span", { class: "label" }, value) : null, + children, + error ? $html("span", { class: "text-error text-xs" }, val(error)) : null + ]); + }; // src/components/List.js var exports_List = {}; @@ -1307,18 +1334,11 @@ List: () => List }); var List = (props) => { - const { - items, - header, - render, - keyFn = (item, index) => index, - class: className, - ...rest - } = props; + const { class: className, items, header, render, keyFn = (item, index) => index, ...rest } = props; const listItems = $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn); return $html("ul", { ...rest, - class: joinClass("list bg-base-100 rounded-box shadow-md", className) + class: ui("list bg-base-100 rounded-box shadow-md", className) }, header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems); }; @@ -1341,7 +1361,8 @@ Menu: () => Menu }); var Menu = (props) => { - const renderItems = (items) => $for(() => items || [], (it) => $html("li", {}, [ + const { class: className, items, ...rest } = props; + const renderItems = (items2) => $for(() => items2 || [], (it) => $html("li", {}, [ it.children ? $html("details", { open: it.open }, [ $html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]), $html("ul", {}, renderItems(it.children)) @@ -1350,7 +1371,7 @@ it.label ]) ]), (it, i) => it.label || i); - return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items)); + return $html("ul", { ...rest, class: ui("menu bg-base-200 rounded-box", className) }, renderItems(items)); }; // src/components/Modal.js @@ -1359,13 +1380,13 @@ Modal: () => Modal }); var Modal = (props, children) => { - const { title, buttons, open, ...rest } = props; + const { class: className, title, buttons, open, ...rest } = props; const dialogRef = { current: null }; $watch(() => { const dialog = dialogRef.current; if (!dialog) return; - if (open()) { + if (val(open)) { if (!dialog.open) dialog.showModal(); } else { @@ -1376,13 +1397,14 @@ const close = (e) => { if (e && e.preventDefault) e.preventDefault(); - open(false); + if (typeof open === "function") + open(false); }; return $html("dialog", { ...rest, ref: dialogRef, - class: "modal", - oncancel: () => open(false) + class: ui("modal", className), + oncancel: () => typeof open === "function" && open(false) }, [ $html("div", { class: "modal-box" }, [ title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null, @@ -1409,7 +1431,10 @@ __export(exports_Navbar, { Navbar: () => Navbar }); - var Navbar = (props, children) => $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class) }, children); + var Navbar = (props, children) => { + const { class: className, ...rest } = props; + return $html("div", { ...rest, class: ui("navbar bg-base-100 shadow-sm px-4", className) }, children); + }; // src/components/Radio.js var exports_Radio = {}; @@ -1417,12 +1442,12 @@ Radio: () => Radio }); var Radio = (props) => { - const { label, tooltip, value, inputValue, name, ...rest } = props; + const { class: className, label, tooltip, value, inputValue, name, ...rest } = props; const radioEl = $html("input", { ...rest, type: "radio", name, - class: joinClass("radio", props.class), + class: ui("radio", className), checked: () => val(value) === inputValue, onclick: () => { if (typeof value === "function") @@ -1431,10 +1456,11 @@ }); if (!label && !tooltip) return radioEl; - return $html("label", { class: "label cursor-pointer justify-start gap-3" }, [ + const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [ radioEl, label ? $html("span", { class: "label-text" }, label) : null ]); + return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout; }; // src/components/Range.js @@ -1443,11 +1469,11 @@ Range: () => Range }); var Range = (props) => { - const { label, tooltip, value, ...rest } = props; + const { class: className, label, tooltip, value, ...rest } = props; const rangeEl = $html("input", { ...rest, type: "range", - class: joinClass("range", props.class), + class: ui("range", className), value, disabled: () => val(props.disabled) }); @@ -1466,11 +1492,11 @@ Rating: () => Rating }); var Rating = (props) => { - const { value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props; + const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props; const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`; return $html("div", { ...rest, - class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}` + class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className) }, Array.from({ length: val(count) }, (_, i) => { const starValue = i + 1; return $html("input", { @@ -1497,12 +1523,12 @@ Select: () => Select }); var Select = (props) => { - const { label, options, value, ...rest } = props; + const { class: className, label, items, value, ...rest } = props; const selectEl = $html("select", { ...rest, - class: joinClass("select select-bordered w-full", props.class), + class: ui("select select-bordered w-full", className), value - }, $for(() => val(options) || [], (opt) => $html("option", { + }, $for(() => val(items) || [], (opt) => $html("option", { value: opt.value, $selected: () => String(val(value)) === String(opt.value) }, opt.label), (opt) => opt.value)); @@ -1519,33 +1545,42 @@ __export(exports_Stack, { Stack: () => Stack }); - var Stack = (props, children) => $html("div", { ...props, class: joinClass("stack", props.class) }, children); + var Stack = (props, children) => { + const { class: className, ...rest } = props; + return $html("div", { ...rest, class: ui("stack", className) }, children); + }; // src/components/Stat.js var exports_Stat = {}; __export(exports_Stat, { Stat: () => Stat }); - var Stat = (props) => $html("div", { ...props, class: joinClass("stat", props.class) }, [ - props.icon && $html("div", { class: "stat-figure text-secondary" }, props.icon), - props.label && $html("div", { class: "stat-title" }, props.label), - $html("div", { class: "stat-value" }, () => val(props.value) ?? props.value), - props.desc && $html("div", { class: "stat-desc" }, props.desc) - ]); + var Stat = (props) => { + const { class: className, icon, label, value, desc, ...rest } = props; + return $html("div", { ...rest, class: ui("stat", className) }, [ + icon && $html("div", { class: "stat-figure text-secondary" }, icon), + label && $html("div", { class: "stat-title" }, label), + $html("div", { class: "stat-value" }, () => val(value) ?? value), + desc && $html("div", { class: "stat-desc" }, desc) + ]); + }; // src/components/Swap.js var exports_Swap = {}; __export(exports_Swap, { Swap: () => Swap }); - var Swap = (props) => $html("label", { class: joinClass("swap", props.class) }, [ - $html("input", { - type: "checkbox", - checked: props.value - }), - $html("div", { class: "swap-on" }, props.on), - $html("div", { class: "swap-off" }, props.off) - ]); + var Swap = (props) => { + const { class: className, value, on, off, ...rest } = props; + return $html("label", { ...rest, class: ui("swap", className) }, [ + $html("input", { + type: "checkbox", + checked: val(value) + }), + $html("div", { class: "swap-on" }, on), + $html("div", { class: "swap-off" }, off) + ]); + }; // src/components/Table.js var exports_Table = {}; @@ -1553,16 +1588,12 @@ Table: () => Table }); var Table = (props) => { - const { - items = [], - columns = [], - keyFn, - zebra = false, - pinRows = false, - empty = tt("nodata")(), - ...rest - } = props; - const tableClass = () => joinClass("table", `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`); + const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props; + const tableClass = () => { + const zebraClass = val(zebra) ? "table-zebra" : ""; + const pinRowsClass = val(pinRows) ? "table-pin-rows" : ""; + return ui("table", className, zebraClass, pinRowsClass); + }; return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [ $html("table", { ...rest, class: tableClass }, [ $html("thead", {}, [ @@ -1599,23 +1630,33 @@ Tabs: () => Tabs }); var Tabs = (props) => { - const { items, ...rest } = props; + const { class: className, items, activeIndex = $(0), ...rest } = props; const itemsSignal = typeof items === "function" ? items : () => items || []; + const internalActive = $(0); + const currentActive = activeIndex !== undefined ? activeIndex : internalActive; + const handleTabClick = (idx, onClick) => (e) => { + if (typeof currentActive === "function") { + currentActive(idx); + } + onClick?.(e); + }; return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [ $html("div", { role: "tablist", - class: joinClass("tabs tabs-box", props.class) - }, $for(itemsSignal, (it) => $html("a", { - role: "tab", - class: () => joinClass("tab", val(it.active) && "tab-active", val(it.disabled) && "tab-disabled", it.tip && "tooltip"), - "data-tip": it.tip, - onclick: (e) => !val(it.disabled) && it.onclick?.(e) - }, it.label), (t) => t.label)), + class: ui("tabs tabs-box", className) + }, $for(itemsSignal, (it, idx) => { + const isActive = val(it.active) ?? currentActive() === idx; + return $html("a", { + role: "tab", + class: () => ui("tab", isActive ? "tab-active" : "", val(it.disabled) ? "tab-disabled" : ""), + onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined + }, it.label); + }, (t, idx) => t.label + idx)), () => { - const active = itemsSignal().find((it) => val(it.active)); - if (!active) + const activeItem = itemsSignal().find((it, idx) => val(it.active) ?? currentActive() === idx); + if (!activeItem) return null; - const content = val(active.content); + const content = val(activeItem.content); return $html("div", { class: "p-4" }, [ typeof content === "function" ? content() : content ]); @@ -1629,16 +1670,16 @@ Timeline: () => Timeline }); var Timeline = (props) => { - const { items = [], vertical = true, compact = false, ...rest } = props; - const icons = { - info: iconInfo, - success: iconSuccess, - warning: iconWarning, - error: iconError + const { class: className, items = [], vertical = true, compact = false, ...rest } = props; + const iconMap = { + info: "icon-[lucide--info]", + success: "icon-[lucide--check-circle]", + warning: "icon-[lucide--alert-triangle]", + error: "icon-[lucide--alert-circle]" }; return $html("ul", { ...rest, - class: () => `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""} ${props.class || ""}` + class: () => ui(`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, className) }, [ $for(items, (item, i) => { const isFirst = i === 0; @@ -1649,11 +1690,7 @@ !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, $html("div", { class: "timeline-start" }, [renderSlot(item.title)]), $html("div", { class: "timeline-middle" }, [ - $html("img", { - src: icons[itemType] || item.icon || icons.success, - class: "w-4 h-4 object-contain mx-1", - alt: itemType - }) + item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success) ]), $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]), !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null @@ -1696,11 +1733,15 @@ } }; const ToastComponent = () => { + const closeIcon = getIcon("icon-[lucide--x]"); const el = $html("div", { class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto` }, [ $html("span", {}, [typeof message === "function" ? message() : message]), - Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕") + Button({ + class: "btn-xs btn-circle btn-ghost", + onclick: close + }, closeIcon) ]); requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0")); return el; @@ -1717,7 +1758,11 @@ __export(exports_Tooltip, { Tooltip: () => Tooltip }); - var Tooltip = (props, children) => $html("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children); + var Tooltip = (props, children) => $html("div", { + ...props, + class: () => ui("tooltip", props.ui, props.class), + "data-tip": props.tip + }, children); // src/components/index.js var Components = { @@ -1736,6 +1781,7 @@ ...exports_Fileinput, ...exports_Indicator, ...exports_Input, + ...exports_Label, ...exports_List, ...exports_Loading, ...exports_Menu, diff --git a/dist/sigpro-ui.min.js b/dist/sigpro-ui.min.js index c1c5c1d..45177bd 100644 --- a/dist/sigpro-ui.min.js +++ b/dist/sigpro-ui.min.js @@ -1,7 +1,7 @@ -(()=>{var{defineProperty:_,getOwnPropertyNames:GA,getOwnPropertyDescriptor:LA}=Object,JA=Object.prototype.hasOwnProperty;var xA=new WeakMap,NA=(A)=>{var t=xA.get(A),r;if(t)return t;if(t=_({},"__esModule",{value:!0}),A&&typeof A==="object"||typeof A==="function")GA(A).map((a)=>!JA.call(t,a)&&_(t,a,{get:()=>A[a],enumerable:!(r=LA(A,a))||r.enumerable}));return xA.set(A,t),t};var p=(A,t)=>{for(var r in t)_(A,r,{get:t[r],enumerable:!0,configurable:!0,set:(a)=>t[r]=()=>a})};var ZA={};p(ZA,{val:()=>d,ui:()=>uA,tt:()=>R,joinClass:()=>x,getIcon:()=>BA,Tooltip:()=>dA,Toast:()=>iA,Timeline:()=>eA,Tabs:()=>lA,Table:()=>sA,Swap:()=>AA,Stat:()=>_o,Stack:()=>qo,Select:()=>Wo,Rating:()=>Zo,Range:()=>Ko,Radio:()=>zo,Navbar:()=>No,Modal:()=>Lo,Menu:()=>Eo,Loading:()=>Fo,List:()=>Qo,Input:()=>F,Indicator:()=>yo,Fileinput:()=>Vo,Fieldset:()=>Yo,Fab:()=>wo,Dropdown:()=>Uo,Drawer:()=>So,Datepicker:()=>Bo,Colorpicker:()=>po,Checkbox:()=>bo,Button:()=>j,Badge:()=>mo,Autocomplete:()=>io,Alert:()=>ro,Accordion:()=>ao});var w=null,H=null,G=new Set,L=!1,oo=new WeakMap,TA=()=>{if(L)return;L=!0;while(G.size>0){let A=Array.from(G).sort((t,r)=>(t.depth||0)-(r.depth||0));G.clear();for(let t of A)if(!t._deleted)t()}L=!1},pA=(A)=>{if(w&&!w._deleted)A.add(w),w._deps.add(A)},Ao=(A)=>{for(let t of A){if(t===w||t._deleted)continue;if(t._isComputed){if(t.markDirty(),t._subs)Ao(t._subs)}else G.add(t)}if(!L)queueMicrotask(TA)},to=(A)=>{if(A._cleanups)A._cleanups.forEach((t)=>t()),A._cleanups.clear();A.childNodes?.forEach(to)},J=(A)=>{let t=new Set,r=H,a=document.createElement("div");a.style.display="contents",H={cleanups:t};try{let e=A({onCleanup:(s)=>t.add(s)}),n=(s)=>{if(!s)return;if(s._isRuntime)t.add(s.destroy),a.appendChild(s.container);else if(Array.isArray(s))s.forEach(n);else a.appendChild(s instanceof Node?s:document.createTextNode(String(s)))};n(e)}finally{H=r}return{_isRuntime:!0,container:a,destroy:()=>{t.forEach((e)=>e()),to(a),a.remove()}}},S=(A,t=null)=>{if(typeof A==="function"){let e=new Set,n,s=!0,l=()=>{if(l._deleted)return;l._deps.forEach((c)=>c.delete(l)),l._deps.clear();let i=w;w=l;try{let c=A();if(!Object.is(n,c)||s)n=c,s=!1,Ao(e)}finally{w=i}};if(l._deps=new Set,l._isComputed=!0,l._subs=e,l._deleted=!1,l.markDirty=()=>s=!0,l.stop=()=>{l._deleted=!0,l._deps.forEach((i)=>i.delete(l)),e.clear()},H)H.cleanups.add(l.stop);return()=>{if(s)l();return pA(e),n}}let r=A;if(t)try{let e=localStorage.getItem(t);if(e!==null)r=JSON.parse(e)}catch(e){console.warn("SigPro: LocalStorage locked",e)}let a=new Set;return(...e)=>{if(e.length){let n=typeof e[0]==="function"?e[0](r):e[0];if(!Object.is(r,n)){if(r=n,t)localStorage.setItem(t,JSON.stringify(r));Ao(a)}}return pA(a),r}},y=(A,t)=>{let r=Array.isArray(A),a=r?t:A,e=r?A:null;if(typeof a!=="function")return()=>{};let n=H,s=()=>{if(s._deleted)return;s._deps.forEach((c)=>c.delete(s)),s._deps.clear(),s._cleanups.forEach((c)=>c()),s._cleanups.clear();let l=w,i=H;w=s,H={cleanups:s._cleanups},s.depth=l?l.depth+1:0;try{if(r)w=null,a(),w=s,e.forEach((c)=>typeof c==="function"&&c());else a()}finally{w=l,H=i}};if(s._deps=new Set,s._cleanups=new Set,s._deleted=!1,s.stop=()=>{if(s._deleted)return;if(s._deleted=!0,G.delete(s),s._deps.forEach((l)=>l.delete(s)),s._cleanups.forEach((l)=>l()),n)n.cleanups.delete(s.stop)},n)n.cleanups.add(s.stop);return s(),s.stop},o=(A,t={},r=[])=>{if(t instanceof Node||Array.isArray(t)||typeof t!=="object")r=t,t={};let a=document.createElement(A),e=(s,l)=>(s==="src"||s==="href")&&String(l).toLowerCase().includes("javascript:")?"#":l;a._cleanups=new Set;for(let[s,l]of Object.entries(t)){if(s==="ref"){typeof l==="function"?l(a):l.current=a;continue}let i=typeof l==="function";if(["INPUT","TEXTAREA","SELECT"].includes(a.tagName)&&(s==="value"||s==="checked")&&i){a._cleanups.add(y(()=>{let f=l();if(a[s]!==f)a[s]=f}));let m=s==="checked"?"change":"input",u=(f)=>l(f.target[s]);a.addEventListener(m,u),a._cleanups.add(()=>a.removeEventListener(m,u))}else if(s.startsWith("on")){let m=s.slice(2).toLowerCase().split(".")[0],u=(f)=>l(f);a.addEventListener(m,u),a._cleanups.add(()=>a.removeEventListener(m,u))}else if(i)a._cleanups.add(y(()=>{let m=e(s,l());if(s==="class")a.className=m||"";else m==null?a.removeAttribute(s):a.setAttribute(s,m)}));else a.setAttribute(s,e(s,l))}let n=(s)=>{if(Array.isArray(s))return s.forEach(n);if(typeof s==="function"){let l=document.createTextNode("");a.appendChild(l);let i=[];a._cleanups.add(y(()=>{let c=s(),b=(Array.isArray(c)?c:[c]).map((m)=>m?._isRuntime?m.container:m instanceof Node?m:document.createTextNode(m??""));i.forEach((m)=>{to(m),m.remove()}),b.forEach((m)=>l.parentNode?.insertBefore(m,l)),i=b}))}else a.appendChild(s instanceof Node?s:document.createTextNode(s??""))};return n(r),a},U=(A,t,r=null)=>{let a=document.createTextNode(""),e=o("div",{style:"display:contents"},[a]),n=null,s=null;return y(()=>{let l=!!(typeof A==="function"?A():A);if(l!==s){if(s=l,n)n.destroy();let i=l?t:r;if(i)n=J(()=>typeof i==="function"?i():i),e.insertBefore(n.container,a)}}),e};U.not=(A,t,r)=>U(()=>!(typeof A==="function"?A():A),t,r);var h=(A,t,r)=>{let a=document.createTextNode(""),e=o("div",{style:"display:contents"},[a]),n=new Map;return y(()=>{let s=(typeof A==="function"?A():A)||[],l=new Map,i=[];for(let b=0;bt(m,b));else n.delete(u);l.set(u,f),i.push(u)}n.forEach((b)=>{b.destroy(),b.container.remove()});let c=a;for(let b=i.length-1;b>=0;b--){let m=l.get(i[b]);if(m.container.nextSibling!==c)e.insertBefore(m.container,c);c=m.container}n=l}),e},M=(A)=>{let t=S(window.location.hash.replace(/^#/,"")||"/");window.addEventListener("hashchange",()=>t(window.location.hash.replace(/^#/,"")||"/"));let r=o("div",{class:"router-outlet"}),a=null;return y([t],async()=>{let e=t(),n=A.find((s)=>{let l=s.path.split("/").filter(Boolean),i=e.split("/").filter(Boolean);return l.length===i.length&&l.every((c,b)=>c.startsWith(":")||c===i[b])})||A.find((s)=>s.path==="*");if(n){let s=n.component;if(typeof s==="function"&&s.toString().includes("import"))s=(await s()).default||await s();let l={};if(n.path.split("/").filter(Boolean).forEach((i,c)=>{if(i.startsWith(":"))l[i.slice(1)]=e.split("/").filter(Boolean)[c]}),a)a.destroy();if(M.params)M.params(l);a=J(()=>{try{return typeof s==="function"?s(l):s}catch(i){return o("div",{class:"p-4 text-error"},"Error loading view")}}),r.appendChild(a.container)}}),r};M.params=S({});M.to=(A)=>window.location.hash=A.replace(/^#?\/?/,"#/");M.back=()=>window.history.back();M.path=()=>window.location.hash.replace(/^#/,"")||"/";var so=(A,t)=>{let r=typeof t==="string"?document.querySelector(t):t;if(!r)return;if(oo.has(r))oo.get(r).destroy();let a=J(typeof A==="function"?A:()=>A);return r.replaceChildren(a.container),oo.set(r,a),a},zA={$:S,$watch:y,$html:o,$if:U,$for:h,$router:M,$mount:so};if(typeof window<"u")((t)=>{Object.keys(t).forEach((a)=>{window[a]=t[a]}),"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter".split(/\s+/).forEach((a)=>{let e=a.charAt(0).toUpperCase()+a.slice(1);if(!(e in window))window[e]=(n,s)=>o(a,n,s)}),window.SigPro=Object.freeze(t)})(zA);var Z={};p(Z,{default:()=>XA,Tooltip:()=>dA,Toast:()=>iA,Timeline:()=>eA,Tabs:()=>lA,Table:()=>sA,Swap:()=>AA,Stat:()=>_o,Stack:()=>qo,Select:()=>Wo,Rating:()=>Zo,Range:()=>Ko,Radio:()=>zo,Navbar:()=>No,Modal:()=>Lo,Menu:()=>Eo,Loading:()=>Fo,List:()=>Qo,Input:()=>F,Indicator:()=>yo,Fileinput:()=>Vo,Fieldset:()=>Yo,Fab:()=>wo,Dropdown:()=>Uo,Drawer:()=>So,Datepicker:()=>Bo,Colorpicker:()=>po,Checkbox:()=>bo,Button:()=>j,Badge:()=>mo,Autocomplete:()=>io,Alert:()=>ro,Accordion:()=>ao});var lo={};p(lo,{Accordion:()=>ao});var N={};p(N,{val:()=>d,ui:()=>uA,joinClass:()=>x,getIcon:()=>BA});var d=(A)=>typeof A==="function"?A():A,x=(A,t)=>typeof t==="function"?()=>`${A} ${t()||""}`.trim():`${A} ${t||""}`.trim(),uA=(A,t)=>{if(!t)return A;let r=typeof t==="string"?t.split(" "):t,a=[A];return r.forEach((e)=>{if(e)a.push(`${A}-${e}`)}),a.join(" ")},BA=(A)=>{if(!A)return null;let t="left",r=A;if(typeof A==="string"){let n=A.trim().split(/\s+/);if(n[n.length-1]==="right")t="right",r=n.slice(0,-1).join(" ")}let a=t==="left"?"mr-1":"ml-1",e=typeof r==="string"&&r.includes("--")?o("span",{class:`icon-[${r}]`}):typeof r==="function"?r():o("span",{},r);return o("span",{class:a},e)};var ao=(A,t)=>{let{title:r,name:a,open:e,...n}=A;return o("div",{...n,class:x("collapse collapse-arrow bg-base-200 mb-2",A.class)},[o("input",{type:a?"radio":"checkbox",name:a,checked:e}),o("div",{class:"collapse-title text-xl font-medium"},r),o("div",{class:"collapse-content"},t)])};var eo={};p(eo,{Alert:()=>ro});var CA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==",SA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC",hA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg==",T="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC",UA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=",vA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg==",wA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==",RA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC",z="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC",k="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg==",K="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC",X="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII=",YA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg==",DA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg==",VA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg==",HA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=",yA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC";var ro=(A,t)=>{let{type:r="info",soft:a=!0,...e}=A,n={info:z,success:k,warning:X,error:K},s=()=>{let i=d(r);return{info:"alert-info",success:"alert-success",warning:"alert-warning",error:"alert-error"}[i]||i},l=t||A.message;return o("div",{...e,role:"alert",class:()=>`alert ${s()} ${d(a)?"alert-soft":""} ${A.class||""}`},[o("img",{src:n[d(r)]||n.info,class:"w-4 h-4 object-contain",alt:d(r)}),o("div",{class:"flex-1"},[o("span",{},[typeof l==="function"?l():l])]),A.actions?o("div",{class:"flex-none"},[typeof A.actions==="function"?A.actions():A.actions]):null])};var co={};p(co,{Autocomplete:()=>io});var kA={es:{close:"Cerrar",confirm:"Confirmar",cancel:"Cancelar",search:"Buscar...",loading:"Cargando...",nodata:"Sin datos"},en:{close:"Close",confirm:"Confirm",cancel:"Cancel",search:"Search...",loading:"Loading...",nodata:"No data"}},KA=S("es");var R=(A)=>()=>kA[KA()][A]||A;var no={};p(no,{Input:()=>F});var F=(A)=>{let{label:t,tip:r,value:a,error:e,isSearch:n,icon:s,type:l="text",...i}=A,c=l==="password",b=S(!1),m={text:vA,password:UA,date:T,number:wA,email:RA},u=o("input",{...i,type:()=>c?b()?"text":"password":l,placeholder:A.placeholder||t||(n?R("search")():" "),class:x("grow order-2 focus:outline-none",A.class),value:a,oninput:(C)=>A.oninput?.(C),disabled:()=>d(A.disabled)}),f=s?s:m[l]?o("img",{src:m[l],class:"opacity-50",alt:l}):null;return o("label",{class:()=>x("input input-bordered floating-label flex items-center gap-2 w-full relative",d(e)?"input-error":"")},[f?o("div",{class:"order-1 shrink-0"},f):null,t?o("span",{class:"text-base-content/60 order-0"},t):null,u,c?o("button",{type:"button",class:"order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",onclick:(C)=>{C.preventDefault(),b(!b())}},()=>o("img",{class:"w-5 h-5",src:b()?CA:SA})):null,r?o("div",{class:"tooltip tooltip-left order-4","data-tip":r},o("span",{class:"badge badge-ghost badge-xs cursor-help"},"?")):null,()=>d(e)?o("span",{class:"text-error text-[10px] absolute -bottom-5 left-2"},d(e)):null])};var io=(A)=>{let{options:t=[],value:r,onSelect:a,label:e,placeholder:n,...s}=A,l=S(d(r)||""),i=S(!1),c=S(-1),b=S(()=>{let f=l().toLowerCase(),C=d(t)||[];return f?C.filter((I)=>(typeof I==="string"?I:I.label).toLowerCase().includes(f)):C}),m=(f)=>{let C=typeof f==="string"?f:f.value,I=typeof f==="string"?f:f.label;if(l(I),typeof r==="function")r(C);a?.(f),i(!1),c(-1)},u=(f)=>{let C=b();if(f.key==="ArrowDown")f.preventDefault(),i(!0),c(Math.min(c()+1,C.length-1));else if(f.key==="ArrowUp")f.preventDefault(),c(Math.max(c()-1,0));else if(f.key==="Enter"&&c()>=0)f.preventDefault(),m(C[c()]);else if(f.key==="Escape")i(!1)};return o("div",{class:"relative w-full"},[F({label:e,placeholder:n||R("search")(),value:l,onfocus:()=>i(!0),onblur:()=>setTimeout(()=>i(!1),150),onkeydown:u,oninput:(f)=>{let C=f.target.value;if(l(C),typeof r==="function")r(C);i(!0),c(-1)},...s}),o("ul",{class:"absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",style:()=>i()&&b().length?"display:block":"display:none"},[h(b,(f,C)=>o("li",{},[o("a",{class:()=>`block w-full ${c()===C?"active bg-primary text-primary-content":""}`,onclick:()=>m(f),onmouseenter:()=>c(C)},typeof f==="string"?f:f.label)]),(f,C)=>(typeof f==="string"?f:f.value)+C),()=>b().length?null:o("li",{class:"p-2 text-center opacity-50"},"No results")])])};var fo={};p(fo,{Badge:()=>mo});var mo=(A,t)=>o("span",{...A,class:x("badge",A.class)},t);var go={};p(go,{Button:()=>j});var j=(A,t)=>{let{badge:r,badgeClass:a,tooltip:e,icon:n,loading:s,...l}=A,c=o("button",{...l,class:x("btn",A.class)},[()=>d(s)?o("span",{class:"loading loading-spinner"}):null,n?o("span",{class:"mr-1"},n):null,t]);if(r)c=o("div",{class:"indicator"},[o("span",{class:x("indicator-item badge",a||"badge-secondary")},r),c]);return e?o("div",{class:"tooltip","data-tip":e},c):c};var xo={};p(xo,{Checkbox:()=>bo});var bo=(A)=>{let{value:t,tooltip:r,toggle:a,label:e,...n}=A,s=o("input",{...n,type:"checkbox",class:()=>d(a)?"toggle":"checkbox",checked:t}),l=o("label",{class:"label cursor-pointer justify-start gap-3"},[s,e?o("span",{class:"label-text"},e):null]);return r?o("div",{class:"tooltip","data-tip":r},l):l};var uo={};p(uo,{Colorpicker:()=>po});var po=(A)=>{let{value:t,label:r,...a}=A,e=S(!1),n=["#000","#1A1A1A","#333","#4D4D4D","#666","#808080","#B3B3B3","#FFF","#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626","#ef4444","#f87171","#fca5a5","#431407","#7c2d12","#9a3412","#c2410c","#ea580c","#f97316","#fb923c","#ffedd5","#713f12","#a16207","#ca8a04","#eab308","#facc15","#fde047","#fef08a","#fff9c4","#064e3b","#065f46","#059669","#10b981","#34d399","#4ade80","#84cc16","#d9f99d","#082f49","#075985","#0284c7","#0ea5e9","#38bdf8","#7dd3fc","#22d3ee","#cffafe","#1e1b4b","#312e81","#4338ca","#4f46e5","#6366f1","#818cf8","#a5b4fc","#e0e7ff","#2e1065","#4c1d95","#6d28d9","#7c3aed","#8b5cf6","#a855f7","#d946ef","#fae8ff"],s=()=>d(t)||"#000000";return o("div",{class:"relative w-fit"},[o("button",{type:"button",class:"btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",onclick:(l)=>{l.stopPropagation(),e(!e())},...a},[o("div",{class:"size-5 rounded-sm shadow-inner border border-black/10 shrink-0",style:()=>`background-color: ${s()}`}),r?o("span",{class:"opacity-80"},r):null]),U(e,()=>o("div",{class:"absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",onclick:(l)=>l.stopPropagation()},[o("div",{class:"grid grid-cols-8 gap-1"},n.map((l)=>o("button",{type:"button",style:`background-color: ${l}`,class:()=>{return`size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 - ${s().toLowerCase()===l.toLowerCase()?"ring-2 ring-offset-1 ring-primary z-10 scale-110":""}`},onclick:()=>{if(typeof t==="function")t(l);e(!1)}})))])),U(e,()=>o("div",{class:"fixed inset-0 z-[100]",onclick:()=>e(!1)}))])};var Co={};p(Co,{Datepicker:()=>Bo});var Bo=(A)=>{let{value:t,range:r,label:a,placeholder:e,hour:n=!1,...s}=A,l=S(!1),i=S(new Date),c=S(null),b=S(0),m=S(0),u=()=>d(r)===!0,f=new Date,C=`${f.getFullYear()}-${String(f.getMonth()+1).padStart(2,"0")}-${String(f.getDate()).padStart(2,"0")}`,I=(g)=>{let B=g.getFullYear(),v=String(g.getMonth()+1).padStart(2,"0"),D=String(g.getDate()).padStart(2,"0");return`${B}-${v}-${D}`},QA=(g)=>{let B=I(g),v=d(t);if(u())if(!v?.start||v.start&&v.end){if(typeof t==="function")t({start:B,end:null,...n&&{startHour:b()}})}else{let D=v.start;if(typeof t==="function"){let E=B{let g=d(t);if(!g)return"";if(typeof g==="string"){if(n&&g.includes("T"))return g.replace("T"," ");return g}if(g.start&&g.end){let B=n&&g.startHour?`${g.start} ${String(g.startHour).padStart(2,"0")}:00`:g.start,v=n&&g.endHour?`${g.end} ${String(g.endHour).padStart(2,"0")}:00`:g.end;return`${B} - ${v}`}if(g.start)return`${n&&g.startHour?`${g.start} ${String(g.startHour).padStart(2,"0")}:00`:g.start}...`;return""}),fA=(g)=>{let B=i();i(new Date(B.getFullYear(),B.getMonth()+g,1))},gA=(g)=>{let B=i();i(new Date(B.getFullYear()+g,B.getMonth(),1))},P=({value:g,onChange:B})=>{return o("div",{class:"flex-1"},[o("div",{class:"flex gap-2 items-center"},[o("input",{type:"range",min:0,max:23,value:g,class:"range range-xs flex-1",oninput:(v)=>{let D=parseInt(v.target.value);B(D)}}),o("span",{class:"text-sm font-mono min-w-[48px] text-center"},()=>String(d(g)).padStart(2,"0")+":00")])])};return o("div",{class:"relative w-full"},[F({label:a,placeholder:e||(u()?"Seleccionar rango...":"Seleccionar fecha..."),value:MA,readonly:!0,icon:o("img",{src:T,class:"opacity-40"}),onclick:(g)=>{g.stopPropagation(),l(!l())},...s}),U(l,()=>o("div",{class:"absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",onclick:(g)=>g.stopPropagation()},[o("div",{class:"flex justify-between items-center mb-4 gap-1"},[o("div",{class:"flex gap-0.5"},[o("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>gA(-1)},o("img",{src:VA,class:"opacity-40"})),o("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>fA(-1)},o("img",{src:YA,class:"opacity-40"}))]),o("span",{class:"font-bold uppercase flex-1 text-center"},[()=>i().toLocaleString("es-ES",{month:"short",year:"numeric"})]),o("div",{class:"flex gap-0.5"},[o("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>fA(1)},o("img",{src:DA,class:"opacity-40"})),o("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>gA(1)},o("img",{src:HA,class:"opacity-40"}))])]),o("div",{class:"grid grid-cols-7 gap-1",onmouseleave:()=>c(null)},[...["L","M","X","J","V","S","D"].map((g)=>o("div",{class:"text-[10px] opacity-40 font-bold text-center"},g)),()=>{let g=i(),B=g.getFullYear(),v=g.getMonth(),D=new Date(B,v,1).getDay(),E=D===0?6:D-1,FA=new Date(B,v+1,0).getDate(),W=[];for(let Q=0;Q{let V=d(t),O=c(),jA=typeof V==="string"?V.split("T")[0]===Y:V?.start===Y,EA=V?.end===Y,q=!1;if(u()&&V?.start){let $=V.start;if(!V.end&&O)q=Y>$&&Y<=O||Y<$&&Y>=O;else if(V.end)q=Y>$&&Y{if(u())c(Y)},onclick:()=>QA(bA)},[Q.toString()]))}return W}]),n?o("div",{class:"mt-3 pt-2 border-t border-base-300"},[u()?o("div",{class:"flex gap-4"},[P({value:b,onChange:(g)=>{b(g);let B=d(t);if(B?.start)t({...B,startHour:g})}}),P({value:m,onChange:(g)=>{m(g);let B=d(t);if(B?.end)t({...B,endHour:g})}})]):P({value:b,onChange:(g)=>{b(g);let B=d(t);if(B&&typeof B==="string"&&B.includes("-"))t(B.split("T")[0]+"T"+String(g).padStart(2,"0")+":00:00")}})]):null])),U(l,()=>o("div",{class:"fixed inset-0 z-[90]",onclick:()=>l(!1)}))])};var ho={};p(ho,{Drawer:()=>So});var So=(A)=>o("div",{class:x("drawer",A.class)},[o("input",{id:A.id,type:"checkbox",class:"drawer-toggle",checked:A.open}),o("div",{class:"drawer-content"},A.content),o("div",{class:"drawer-side"},[o("label",{for:A.id,class:"drawer-overlay",onclick:()=>A.open?.(!1)}),o("div",{class:"min-h-full bg-base-200 w-80"},A.side)])]);var vo={};p(vo,{Dropdown:()=>Uo});var Uo=(A,t)=>{let{label:r,icon:a,items:e,...n}=A,s=()=>{if(e)return o("ul",{tabindex:0,class:"dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"},[h(typeof e==="function"?e:()=>e,(i)=>o("li",{},[o("a",{class:i.class||"",onclick:(c)=>{if(i.onclick)i.onclick(c);if(document.activeElement)document.activeElement.blur()}},[i.icon?o("span",{},i.icon):null,o("span",{},i.label)])]))]);return o("div",{tabindex:0,class:"dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"},[typeof t==="function"?t():t])};return o("div",{...n,class:()=>`dropdown ${d(A.class)||""}`},[o("div",{tabindex:0,role:"button",class:"btn m-1 flex items-center gap-2"},[a?typeof a==="function"?a():a:null,r?typeof r==="function"?r():r:null]),s()])};var Ro={};p(Ro,{Fab:()=>wo});var wo=(A)=>{let{icon:t,label:r,actions:a=[],position:e="bottom-6 right-6",class:n="",...s}=A;return o("div",{...s,class:`fab absolute ${e} flex flex-col-reverse items-end gap-3 z-[100] ${n}`},[o("div",{tabindex:0,role:"button",class:"btn btn-lg btn-circle btn-primary shadow-2xl"},[t?typeof t==="function"?t():t:null,!t&&r?r:null]),...d(a).map((l)=>o("div",{class:"flex items-center gap-3 transition-all duration-300"},[l.label?o("span",{class:"badge badge-ghost shadow-sm whitespace-nowrap"},l.label):null,o("button",{type:"button",class:`btn btn-circle shadow-lg ${l.class||""}`,onclick:(i)=>{i.stopPropagation(),l.onclick?.(i)}},[l.icon?typeof l.icon==="function"?l.icon():l.icon:l.text||""])]))])};var Do={};p(Do,{Fieldset:()=>Yo});var Yo=(A,t)=>o("fieldset",{...A,class:x("fieldset bg-base-200 border border-base-300 p-4 rounded-lg",A.class)},[()=>{let r=d(A.legend);return r?o("legend",{class:"fieldset-legend font-bold"},[r]):null},t]);var Ho={};p(Ho,{Fileinput:()=>Vo});var Vo=(A)=>{let{tooltip:t,max:r=2,accept:a="*",onSelect:e}=A,n=S([]),s=S(!1),l=S(null),i=r*1024*1024,c=(m)=>{let u=Array.from(m);if(l(null),u.find((C)=>C.size>i)){l(`Máx ${r}MB`);return}n([...n(),...u]),e?.(n())},b=(m)=>{let u=n().filter((f,C)=>C!==m);n(u),e?.(u)};return o("fieldset",{class:"fieldset w-full p-0"},[o("div",{class:()=>`w-full ${t?"tooltip tooltip-top before:z-50 after:z-50":""}`,"data-tip":t},[o("label",{class:()=>` +(()=>{var{defineProperty:t,getOwnPropertyNames:VJ,getOwnPropertyDescriptor:HJ}=Object,EJ=Object.prototype.hasOwnProperty;var CJ=new WeakMap,jJ=(W)=>{var Z=CJ.get(W),X;if(Z)return Z;if(Z=t({},"__esModule",{value:!0}),W&&typeof W==="object"||typeof W==="function")VJ(W).map((J)=>!EJ.call(Z,J)&&t(Z,J,{get:()=>W[J],enumerable:!(X=HJ(W,J))||X.enumerable}));return CJ.set(W,Z),Z};var z=(W,Z)=>{for(var X in Z)t(W,X,{get:Z[X],enumerable:!0,configurable:!0,set:(J)=>Z[X]=()=>J})};var kJ={};z(kJ,{val:()=>P,ui:()=>A,tt:()=>x,getIcon:()=>V,Tooltip:()=>BJ,Toast:()=>QJ,Timeline:()=>YJ,Tabs:()=>XJ,Table:()=>WJ,Swap:()=>JJ,Stat:()=>eM,Stack:()=>nM,Select:()=>lM,Rating:()=>rM,Range:()=>iM,Radio:()=>pM,Navbar:()=>mM,Modal:()=>hM,Menu:()=>bM,Loading:()=>vM,List:()=>fM,Label:()=>kM,Input:()=>b,Indicator:()=>IM,Fileinput:()=>OM,Fieldset:()=>jM,Fab:()=>HM,Dropdown:()=>UM,Drawer:()=>FM,Datepicker:()=>RM,Colorpicker:()=>TM,Checkbox:()=>_M,Button:()=>g,Badge:()=>qM,Autocomplete:()=>LM,Alert:()=>XM,Accordion:()=>WM});var N=null,f=null,m=new Set,d=!1,e=new WeakMap,SJ=()=>{if(d)return;d=!0;while(m.size>0){let W=Array.from(m).sort((Z,X)=>(Z.depth||0)-(X.depth||0));m.clear();for(let Z of W)if(!Z._deleted)Z()}d=!1},RJ=(W)=>{if(N&&!N._deleted)W.add(N),N._deps.add(W)},MM=(W)=>{for(let Z of W){if(Z===N||Z._deleted)continue;if(Z._isComputed){if(Z.markDirty(),Z._subs)MM(Z._subs)}else m.add(Z)}if(!d)queueMicrotask(SJ)},JM=(W)=>{if(W._cleanups)W._cleanups.forEach((Z)=>Z()),W._cleanups.clear();W.childNodes?.forEach(JM)},p=(W)=>{let Z=new Set,X=f,J=document.createElement("div");J.style.display="contents",f={cleanups:Z};try{let Y=W({onCleanup:(K)=>Z.add(K)}),L=(K)=>{if(!K)return;if(K._isRuntime)Z.add(K.destroy),J.appendChild(K.container);else if(Array.isArray(K))K.forEach(L);else J.appendChild(K instanceof Node?K:document.createTextNode(String(K)))};L(Y)}finally{f=X}return{_isRuntime:!0,container:J,destroy:()=>{Z.forEach((Y)=>Y()),JM(J),J.remove()}}},U=(W,Z=null)=>{if(typeof W==="function"){let Y=new Set,L,K=!0,G=()=>{if(G._deleted)return;G._deps.forEach((Q)=>Q.delete(G)),G._deps.clear();let q=N;N=G;try{let Q=W();if(!Object.is(L,Q)||K)L=Q,K=!1,MM(Y)}finally{N=q}};if(G._deps=new Set,G._isComputed=!0,G._subs=Y,G._deleted=!1,G.markDirty=()=>K=!0,G.stop=()=>{G._deleted=!0,G._deps.forEach((q)=>q.delete(G)),Y.clear()},f)f.cleanups.add(G.stop);return()=>{if(K)G();return RJ(Y),L}}let X=W;if(Z)try{let Y=localStorage.getItem(Z);if(Y!==null)X=JSON.parse(Y)}catch(Y){console.warn("SigPro: LocalStorage locked",Y)}let J=new Set;return(...Y)=>{if(Y.length){let L=typeof Y[0]==="function"?Y[0](X):Y[0];if(!Object.is(X,L)){if(X=L,Z)localStorage.setItem(Z,JSON.stringify(X));MM(J)}}return RJ(J),X}},y=(W,Z)=>{let X=Array.isArray(W),J=X?Z:W,Y=X?W:null;if(typeof J!=="function")return()=>{};let L=f,K=()=>{if(K._deleted)return;K._deps.forEach((Q)=>Q.delete(K)),K._deps.clear(),K._cleanups.forEach((Q)=>Q()),K._cleanups.clear();let G=N,q=f;N=K,f={cleanups:K._cleanups},K.depth=G?G.depth+1:0;try{if(X)N=null,J(),N=K,Y.forEach((Q)=>typeof Q==="function"&&Q());else J()}finally{N=G,f=q}};if(K._deps=new Set,K._cleanups=new Set,K._deleted=!1,K.stop=()=>{if(K._deleted)return;if(K._deleted=!0,m.delete(K),K._deps.forEach((G)=>G.delete(K)),K._cleanups.forEach((G)=>G()),L)L.cleanups.delete(K.stop)},L)L.cleanups.add(K.stop);return K(),K.stop},M=(W,Z={},X=[])=>{if(Z instanceof Node||Array.isArray(Z)||typeof Z!=="object")X=Z,Z={};let J=document.createElement(W),Y=(K,G)=>(K==="src"||K==="href")&&String(G).toLowerCase().includes("javascript:")?"#":G;J._cleanups=new Set;for(let[K,G]of Object.entries(Z)){if(K==="ref"){typeof G==="function"?G(J):G.current=J;continue}let q=typeof G==="function";if(["INPUT","TEXTAREA","SELECT"].includes(J.tagName)&&(K==="value"||K==="checked")&&q){J._cleanups.add(y(()=>{let C=G();if(J[K]!==C)J[K]=C}));let _=K==="checked"?"change":"input",D=(C)=>G(C.target[K]);J.addEventListener(_,D),J._cleanups.add(()=>J.removeEventListener(_,D))}else if(K.startsWith("on")){let _=K.slice(2).toLowerCase().split(".")[0],D=(C)=>G(C);J.addEventListener(_,D),J._cleanups.add(()=>J.removeEventListener(_,D))}else if(q)J._cleanups.add(y(()=>{let _=Y(K,G());if(K==="class")J.className=_||"";else _==null?J.removeAttribute(K):J.setAttribute(K,_)}));else J.setAttribute(K,Y(K,G))}let L=(K)=>{if(Array.isArray(K))return K.forEach(L);if(typeof K==="function"){let G=document.createTextNode("");J.appendChild(G);let q=[];J._cleanups.add(y(()=>{let Q=K(),B=(Array.isArray(Q)?Q:[Q]).map((_)=>_?._isRuntime?_.container:_ instanceof Node?_:document.createTextNode(_??""));q.forEach((_)=>{JM(_),_.remove()}),B.forEach((_)=>G.parentNode?.insertBefore(_,G)),q=B}))}else J.appendChild(K instanceof Node?K:document.createTextNode(K??""))};return L(X),J},j=(W,Z,X=null)=>{let J=document.createTextNode(""),Y=M("div",{style:"display:contents"},[J]),L=null,K=null;return y(()=>{let G=!!(typeof W==="function"?W():W);if(G!==K){if(K=G,L)L.destroy();let q=G?Z:X;if(q)L=p(()=>typeof q==="function"?q():q),Y.insertBefore(L.container,J)}}),Y};j.not=(W,Z,X)=>j(()=>!(typeof W==="function"?W():W),Z,X);var E=(W,Z,X)=>{let J=document.createTextNode(""),Y=M("div",{style:"display:contents"},[J]),L=new Map;return y(()=>{let K=(typeof W==="function"?W():W)||[],G=new Map,q=[];for(let B=0;BZ(_,B));else L.delete(D);G.set(D,C),q.push(D)}L.forEach((B)=>{B.destroy(),B.container.remove()});let Q=J;for(let B=q.length-1;B>=0;B--){let _=G.get(q[B]);if(_.container.nextSibling!==Q)Y.insertBefore(_.container,Q);Q=_.container}L=G}),Y},$=(W)=>{let Z=U(window.location.hash.replace(/^#/,"")||"/");window.addEventListener("hashchange",()=>Z(window.location.hash.replace(/^#/,"")||"/"));let X=M("div",{class:"router-outlet"}),J=null;return y([Z],async()=>{let Y=Z(),L=W.find((K)=>{let G=K.path.split("/").filter(Boolean),q=Y.split("/").filter(Boolean);return G.length===q.length&&G.every((Q,B)=>Q.startsWith(":")||Q===q[B])})||W.find((K)=>K.path==="*");if(L){let K=L.component;if(typeof K==="function"&&K.toString().includes("import"))K=(await K()).default||await K();let G={};if(L.path.split("/").filter(Boolean).forEach((q,Q)=>{if(q.startsWith(":"))G[q.slice(1)]=Y.split("/").filter(Boolean)[Q]}),J)J.destroy();if($.params)$.params(G);J=p(()=>{try{return typeof K==="function"?K(G):K}catch(q){return M("div",{class:"p-4 text-error"},"Error loading view")}}),X.appendChild(J.container)}}),X};$.params=U({});$.to=(W)=>window.location.hash=W.replace(/^#?\/?/,"#/");$.back=()=>window.history.back();$.path=()=>window.location.hash.replace(/^#/,"")||"/";var KM=(W,Z)=>{let X=typeof Z==="string"?document.querySelector(Z):Z;if(!X)return;if(e.has(X))e.get(X).destroy();let J=p(typeof W==="function"?W:()=>W);return X.replaceChildren(J.container),e.set(X,J),J},OJ={$:U,$watch:y,$html:M,$if:j,$for:E,$router:$,$mount:KM};if(typeof window<"u")((Z)=>{Object.keys(Z).forEach((J)=>{window[J]=Z[J]}),"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter".split(/\s+/).forEach((J)=>{let Y=J.charAt(0).toUpperCase()+J.slice(1);if(!(Y in window))window[Y]=(L,K)=>M(J,L,K)}),window.SigPro=Object.freeze(Z)})(OJ);var i={};z(i,{default:()=>xJ,Tooltip:()=>BJ,Toast:()=>QJ,Timeline:()=>YJ,Tabs:()=>XJ,Table:()=>WJ,Swap:()=>JJ,Stat:()=>eM,Stack:()=>nM,Select:()=>lM,Rating:()=>rM,Range:()=>iM,Radio:()=>pM,Navbar:()=>mM,Modal:()=>hM,Menu:()=>bM,Loading:()=>vM,List:()=>fM,Label:()=>kM,Input:()=>b,Indicator:()=>IM,Fileinput:()=>OM,Fieldset:()=>jM,Fab:()=>HM,Dropdown:()=>UM,Drawer:()=>FM,Datepicker:()=>RM,Colorpicker:()=>TM,Checkbox:()=>_M,Button:()=>g,Badge:()=>qM,Autocomplete:()=>LM,Alert:()=>XM,Accordion:()=>WM});var ZM={};z(ZM,{Accordion:()=>WM});var c={};z(c,{val:()=>P,ui:()=>A,getIcon:()=>V});var P=(W)=>typeof W==="function"?W():W,A=(W,Z)=>typeof Z==="function"?()=>`${W} ${Z()||""}`.trim():`${W} ${Z||""}`.trim(),V=(W)=>{if(!W)return null;if(typeof W==="function")return M("span",{class:"mr-1"},W());if(typeof W==="object")return M("span",{class:"mr-1"},W);if(typeof W==="string"){let Z=W.trim().split(/\s+/),X=Z[Z.length-1]==="right",J=X?Z.slice(0,-1).join(" "):W,Y=X?"ml-1":"mr-1";if(J&&!J.startsWith("icon-[")&&!J.includes("--"))return M("span",{class:Y},J);return M("span",{class:`${J} ${Y}`.trim()})}return null};var WM=(W,Z)=>{let{class:X,title:J,name:Y,open:L,...K}=W;return M("div",{...K,class:A("collapse collapse-arrow bg-base-200 mb-2",X)},[M("input",{type:Y?"radio":"checkbox",name:Y,checked:P(L)}),M("div",{class:"collapse-title text-xl font-medium"},J),M("div",{class:"collapse-content"},Z)])};var GM={};z(GM,{Alert:()=>XM});var XM=(W,Z)=>{let{class:X,actions:J,type:Y="info",soft:L=!0,...K}=W,G={info:"icon-[lucide--info]",success:"icon-[lucide--check-circle]",warning:"icon-[lucide--alert-triangle]",error:"icon-[lucide--alert-circle]"},B=[`alert-${Y}`,L?"alert-soft":"",X].filter(Boolean).join(" "),_=Z||W.message;return M("div",{...K,role:"alert",class:A("alert",B)},()=>[V(G[Y]),M("div",{class:"flex-1"},[M("span",{},[typeof _==="function"?_():_])]),J?M("div",{class:"flex-none"},[typeof J==="function"?J():J]):null].filter(Boolean))};var QM={};z(QM,{Autocomplete:()=>LM});var NJ={es:{close:"Cerrar",confirm:"Confirmar",cancel:"Cancelar",search:"Buscar...",loading:"Cargando...",nodata:"Sin datos"},en:{close:"Close",confirm:"Confirm",cancel:"Cancel",search:"Search...",loading:"Loading...",nodata:"No data"}},IJ=U("es");var x=(W)=>()=>NJ[IJ()][W]||W;var YM={};z(YM,{Input:()=>b});var b=(W)=>{let{class:Z,value:X,type:J="text",icon:Y,oninput:L,placeholder:K,disabled:G,size:q,...Q}=W,B=J==="password",_=U(!1),D={text:"icon-[lucide--text]",password:"icon-[lucide--lock]",date:"icon-[lucide--calendar]",number:"icon-[lucide--hash]",email:"icon-[lucide--mail]",search:"icon-[lucide--search]",tel:"icon-[lucide--phone]",url:"icon-[lucide--link]"},C=Y?V(Y):D[J]?V(D[J]):null,R=()=>V(_()?"icon-[lucide--eye-off]":"icon-[lucide--eye]"),H=C?"pl-10":"",O=B?"pr-10":"",o=()=>{if(Z?.includes("input-xs"))return"btn-xs";if(Z?.includes("input-sm"))return"btn-sm";if(Z?.includes("input-lg"))return"btn-lg";return"btn-md"};return M("div",{class:"relative w-full"},()=>[M("input",{...Q,type:()=>B?_()?"text":"password":J,placeholder:K||" ",class:A("input w-full",`${H} ${O} ${Z||""}`.trim()),value:X,oninput:(h)=>L?.(h),disabled:()=>P(G)}),C?M("div",{class:"absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60"},C):null,B?M("button",{type:"button",class:A("absolute right-3 inset-y-0 flex items-center","btn btn-ghost btn-circle opacity-50 hover:opacity-100",o()),onclick:(h)=>{h.preventDefault(),_(!_())}},()=>R()):null])};var LM=(W)=>{let{class:Z,items:X=[],value:J,onSelect:Y,label:L,placeholder:K,...G}=W,q=U(P(J)||""),Q=U(!1),B=U(-1),_=U(()=>{let R=q().toLowerCase(),H=P(X)||[];return R?H.filter((O)=>(typeof O==="string"?O:O.label).toLowerCase().includes(R)):H}),D=(R)=>{let H=typeof R==="string"?R:R.value,O=typeof R==="string"?R:R.label;if(q(O),typeof J==="function")J(H);Y?.(R),Q(!1),B(-1)},C=(R)=>{let H=_();if(R.key==="ArrowDown")R.preventDefault(),Q(!0),B(Math.min(B()+1,H.length-1));else if(R.key==="ArrowUp")R.preventDefault(),B(Math.max(B()-1,0));else if(R.key==="Enter"&&B()>=0)R.preventDefault(),D(H[B()]);else if(R.key==="Escape")Q(!1)};return M("div",{class:"relative w-full"},[b({label:L,class:Z,placeholder:K||x("search")(),value:q,onfocus:()=>Q(!0),onblur:()=>setTimeout(()=>Q(!1),150),onkeydown:C,oninput:(R)=>{let H=R.target.value;if(q(H),typeof J==="function")J(H);Q(!0),B(-1)},...G}),M("ul",{class:"absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",style:()=>Q()&&_().length?"display:block":"display:none"},[E(_,(R,H)=>M("li",{},[M("a",{class:()=>`block w-full ${B()===H?"active bg-primary text-primary-content":""}`,onclick:()=>D(R),onmouseenter:()=>B(H)},typeof R==="string"?R:R.label)]),(R,H)=>(typeof R==="string"?R:R.value)+H),()=>_().length?null:M("li",{class:"p-2 text-center opacity-50"},x("nodata")())])])};var BM={};z(BM,{Badge:()=>qM});var qM=(W,Z)=>{let{class:X,...J}=W;return M("span",{...J,class:A("badge",X)},Z)};var PM={};z(PM,{Button:()=>g});var g=(W,Z)=>{let{class:X,loading:J,icon:Y,...L}=W,K=V(Y);return M("button",{...L,class:A("btn",X),disabled:()=>P(J)||P(W.disabled)},()=>[P(J)&&M("span",{class:"loading loading-spinner"}),K,Z].filter(Boolean))};var AM={};z(AM,{Checkbox:()=>_M});var _M=(W)=>{let{class:Z,value:X,tooltip:J,toggle:Y,label:L,...K}=W,G=M("input",{...K,type:"checkbox",class:()=>A(P(Y)?"toggle":"checkbox",Z),checked:X}),q=M("label",{class:"label cursor-pointer justify-start gap-3"},[G,L?M("span",{class:"label-text"},L):null]);return J?M("div",{class:"tooltip","data-tip":J},q):q};var CM={};z(CM,{Colorpicker:()=>TM});var TM=(W)=>{let{class:Z,value:X,label:J,...Y}=W,L=U(!1),K=["#000","#1A1A1A","#333","#4D4D4D","#666","#808080","#B3B3B3","#FFF","#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626","#ef4444","#f87171","#fca5a5","#431407","#7c2d12","#9a3412","#c2410c","#ea580c","#f97316","#fb923c","#ffedd5","#713f12","#a16207","#ca8a04","#eab308","#facc15","#fde047","#fef08a","#fff9c4","#064e3b","#065f46","#059669","#10b981","#34d399","#4ade80","#84cc16","#d9f99d","#082f49","#075985","#0284c7","#0ea5e9","#38bdf8","#7dd3fc","#22d3ee","#cffafe","#1e1b4b","#312e81","#4338ca","#4f46e5","#6366f1","#818cf8","#a5b4fc","#e0e7ff","#2e1065","#4c1d95","#6d28d9","#7c3aed","#8b5cf6","#a855f7","#d946ef","#fae8ff"],G=()=>P(X)||"#000000";return M("div",{class:A("relative w-fit",Z)},[M("button",{type:"button",class:"btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",onclick:(q)=>{q.stopPropagation(),L(!L())},...Y},[M("div",{class:"size-5 rounded-sm shadow-inner border border-black/10 shrink-0",style:()=>`background-color: ${G()}`}),J?M("span",{class:"opacity-80"},J):null]),j(L,()=>M("div",{class:"absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",onclick:(q)=>q.stopPropagation()},[M("div",{class:"grid grid-cols-8 gap-1"},K.map((q)=>M("button",{type:"button",style:`background-color: ${q}`,class:()=>{return`size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 + ${G().toLowerCase()===q.toLowerCase()?"ring-2 ring-offset-1 ring-primary z-10 scale-110":""}`},onclick:()=>{if(typeof X==="function")X(q);L(!1)}})))])),j(L,()=>M("div",{class:"fixed inset-0 z-[100]",onclick:()=>L(!1)}))])};var zM={};z(zM,{Datepicker:()=>RM});var RM=(W)=>{let{class:Z,value:X,range:J,label:Y,placeholder:L,hour:K=!1,...G}=W,q=U(!1),Q=U(new Date),B=U(null),_=U(0),D=U(0),C=()=>P(J)===!0,R=new Date,H=`${R.getFullYear()}-${String(R.getMonth()+1).padStart(2,"0")}-${String(R.getDate()).padStart(2,"0")}`,O=(T)=>{let F=T.getFullYear(),S=String(T.getMonth()+1).padStart(2,"0"),k=String(T.getDate()).padStart(2,"0");return`${F}-${S}-${k}`},o=(T)=>{let F=O(T),S=P(X);if(C())if(!S?.start||S.start&&S.end){if(typeof X==="function")X({start:F,end:null,...K&&{startHour:_()}})}else{let k=S.start;if(typeof X==="function"){let u=F{let T=P(X);if(!T)return"";if(typeof T==="string"){if(K&&T.includes("T"))return T.replace("T"," ");return T}if(T.start&&T.end){let F=K&&T.startHour?`${T.start} ${String(T.startHour).padStart(2,"0")}:00`:T.start,S=K&&T.endHour?`${T.end} ${String(T.endHour).padStart(2,"0")}:00`:T.end;return`${F} - ${S}`}if(T.start)return`${K&&T.startHour?`${T.start} ${String(T.startHour).padStart(2,"0")}:00`:T.start}...`;return""}),_J=(T)=>{let F=Q();Q(new Date(F.getFullYear(),F.getMonth()+T,1))},AJ=(T)=>{let F=Q();Q(new Date(F.getFullYear()+T,F.getMonth(),1))},r=({value:T,onChange:F})=>{return M("div",{class:"flex-1"},[M("div",{class:"flex gap-2 items-center"},[M("input",{type:"range",min:0,max:23,value:T,class:"range range-xs flex-1",oninput:(S)=>{let k=parseInt(S.target.value);F(k)}}),M("span",{class:"text-sm font-mono min-w-[48px] text-center"},()=>String(P(T)).padStart(2,"0")+":00")])])};return M("div",{class:A("relative w-full",Z)},[b({label:Y,placeholder:L||(C()?"Seleccionar rango...":"Seleccionar fecha..."),value:h,readonly:!0,icon:V("icon-[lucide--calendar]"),onclick:(T)=>{T.stopPropagation(),q(!q())},...G}),j(q,()=>M("div",{class:"absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",onclick:(T)=>T.stopPropagation()},[M("div",{class:"flex justify-between items-center mb-4 gap-1"},[M("div",{class:"flex gap-0.5"},[M("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>AJ(-1)},V("icon-[lucide--chevrons-left]")),M("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>_J(-1)},V("icon-[lucide--chevron-left]"))]),M("span",{class:"font-bold uppercase flex-1 text-center"},[()=>Q().toLocaleString("es-ES",{month:"short",year:"numeric"})]),M("div",{class:"flex gap-0.5"},[M("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>_J(1)},V("icon-[lucide--chevron-right]")),M("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>AJ(1)},V("icon-[lucide--chevrons-right]"))])]),M("div",{class:"grid grid-cols-7 gap-1",onmouseleave:()=>B(null)},[...["L","M","X","J","V","S","D"].map((T)=>M("div",{class:"text-[10px] opacity-40 font-bold text-center"},T)),()=>{let T=Q(),F=T.getFullYear(),S=T.getMonth(),k=new Date(F,S,1).getDay(),u=k===0?6:k-1,FJ=new Date(F,S+1,0).getDate(),a=[];for(let v=0;v{let w=P(X),l=B(),DJ=typeof w==="string"?w.split("T")[0]===I:w?.start===I,UJ=w?.end===I,s=!1;if(C()&&w?.start){let n=w.start;if(!w.end&&l)s=I>n&&I<=l||I=l;else if(w.end)s=I>n&&I{if(C())B(I)},onclick:()=>o(TJ)},[v.toString()]))}return a}]),K?M("div",{class:"mt-3 pt-2 border-t border-base-300"},[C()?M("div",{class:"flex gap-4"},[r({value:_,onChange:(T)=>{_(T);let F=P(X);if(F?.start)X({...F,startHour:T})}}),r({value:D,onChange:(T)=>{D(T);let F=P(X);if(F?.end)X({...F,endHour:T})}})]):r({value:_,onChange:(T)=>{_(T);let F=P(X);if(F&&typeof F==="string"&&F.includes("-"))X(F.split("T")[0]+"T"+String(T).padStart(2,"0")+":00:00")}})]):null])),j(q,()=>M("div",{class:"fixed inset-0 z-[90]",onclick:()=>q(!1)}))])};var DM={};z(DM,{Drawer:()=>FM});var FM=(W,Z)=>{let{class:X,id:J,open:Y,side:L,content:K,...G}=W,q=J||`drawer-${Math.random().toString(36).slice(2,9)}`;return M("div",{...G,class:A("drawer",X)},[M("input",{id:q,type:"checkbox",class:"drawer-toggle",checked:()=>typeof Y==="function"?Y():Y,onchange:(Q)=>{if(typeof Y==="function")Y(Q.target.checked)}}),M("div",{class:"drawer-content"},[typeof K==="function"?K():K]),M("div",{class:"drawer-side"},[M("label",{for:q,class:"drawer-overlay",onclick:()=>{if(typeof Y==="function")Y(!1)}}),M("div",{class:"min-h-full bg-base-200 w-80"},[typeof L==="function"?L():L])])])};var VM={};z(VM,{Dropdown:()=>UM});var UM=(W,Z)=>{let{class:X,label:J,icon:Y,items:L,...K}=W,G=()=>{if(L)return M("ul",{tabindex:0,class:"dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"},[E(typeof L==="function"?L:()=>L,(Q)=>M("li",{},[M("a",{class:Q.class||"",onclick:(B)=>{if(Q.onclick)Q.onclick(B);if(document.activeElement)document.activeElement.blur()}},[Q.icon?M("span",{},Q.icon):null,M("span",{},Q.label)])]))]);return M("div",{tabindex:0,class:"dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"},[typeof Z==="function"?Z():Z])};return M("div",{...K,class:A("dropdown",X)},[M("div",{tabindex:0,role:"button",class:"btn m-1 flex items-center gap-2"},[Y?typeof Y==="function"?Y():Y:null,J?typeof J==="function"?J():J:null]),G()])};var EM={};z(EM,{Fab:()=>HM});var HM=(W)=>{let{class:Z,icon:X,label:J,actions:Y=[],position:L="bottom-6 right-6",...K}=W;return M("div",{...K,class:A(`fab absolute ${L} flex flex-col-reverse items-end gap-3 z-[100]`,Z)},[M("div",{tabindex:0,role:"button",class:"btn btn-lg btn-circle btn-primary shadow-2xl"},[X?V(X):null,!X&&J?J:null]),...P(Y).map((G)=>M("div",{class:"flex items-center gap-3 transition-all duration-300"},[G.label?M("span",{class:"badge badge-ghost shadow-sm whitespace-nowrap"},G.label):null,M("button",{type:"button",class:`btn btn-circle shadow-lg ${G.class||""}`,onclick:(q)=>{q.stopPropagation(),G.onclick?.(q)}},[G.icon?V(G.icon):G.text||""])]))])};var SM={};z(SM,{Fieldset:()=>jM});var jM=(W,Z)=>{let{class:X,legend:J,...Y}=W;return M("fieldset",{...Y,class:A("fieldset bg-base-200 border border-base-300 p-4 rounded-lg",X)},[()=>{let L=P(J);return L?M("legend",{class:"fieldset-legend font-bold"},[L]):null},Z])};var NM={};z(NM,{Fileinput:()=>OM});var OM=(W)=>{let{class:Z,tooltip:X,max:J=2,accept:Y="*",onSelect:L,...K}=W,G=U([]),q=U(!1),Q=U(null),B=J*1024*1024,_=(C)=>{let R=Array.from(C);if(Q(null),R.find((O)=>O.size>B)){Q(`Máx ${J}MB`);return}G([...G(),...R]),L?.(G())},D=(C)=>{let R=G().filter((H,O)=>O!==C);G(R),L?.(R)};return M("fieldset",{...K,class:A("fieldset w-full p-0",Z)},[M("div",{class:()=>`w-full ${X?"tooltip tooltip-top before:z-50 after:z-50":""}`,"data-tip":X},[M("label",{class:()=>` relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 - ${s()?"border-primary bg-primary/10":"border-base-content/20 bg-base-100 hover:bg-base-200"} - `,ondragover:(m)=>{m.preventDefault(),s(!0)},ondragleave:()=>s(!1),ondrop:(m)=>{m.preventDefault(),s(!1),c(m.dataTransfer.files)}},[o("div",{class:"flex items-center gap-3 w-full"},[o("img",{src:yA,class:"w-5 h-5 opacity-50 shrink-0"}),o("span",{class:"text-sm opacity-70 truncate grow text-left"},"Arrastra o selecciona archivos..."),o("span",{class:"text-[10px] opacity-40 shrink-0"},`Máx ${r}MB`)]),o("input",{type:"file",multiple:!0,accept:a,class:"hidden",onchange:(m)=>c(m.target.files)})])]),()=>l()?o("span",{class:"text-[10px] text-error mt-1 px-1 font-medium"},l()):null,U(()=>n().length>0,()=>o("ul",{class:"mt-2 space-y-1"},[h(n,(m,u)=>o("li",{class:"flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300"},[o("div",{class:"flex items-center gap-2 truncate"},[o("span",{class:"opacity-50"},"\uD83D\uDCC4"),o("span",{class:"truncate font-medium max-w-[200px]"},m.name),o("span",{class:"text-[9px] opacity-40"},`(${(m.size/1024).toFixed(0)} KB)`)]),o("button",{type:"button",class:"btn btn-ghost btn-xs btn-circle",onclick:(f)=>{f.preventDefault(),f.stopPropagation(),b(u)}},[o("img",{src:hA,class:"w-3 h-3 opacity-70"})])]),(m)=>m.name+m.lastModified)]))])};var Io={};p(Io,{Indicator:()=>yo});var yo=(A,t)=>o("div",{class:x("indicator",A.class)},[t,o("span",{class:x("indicator-item badge",A.badgeClass)},A.badge)]);var Mo={};p(Mo,{List:()=>Qo});var Qo=(A)=>{let{items:t,header:r,render:a,keyFn:e=(i,c)=>c,class:n,...s}=A,l=h(t,(i,c)=>o("li",{class:"list-row"},[a(i,c)]),e);return o("ul",{...s,class:x("list bg-base-100 rounded-box shadow-md",n)},r?[U(r,()=>o("li",{class:"p-4 pb-2 text-xs opacity-60"},[d(r)])),l]:l)};var jo={};p(jo,{Loading:()=>Fo});var Fo=(A)=>{return U(A.$show,()=>o("div",{class:"fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"},[o("span",{class:"loading loading-spinner loading-lg text-primary"})]))};var Go={};p(Go,{Menu:()=>Eo});var Eo=(A)=>{let t=(r)=>h(()=>r||[],(a)=>o("li",{},[a.children?o("details",{open:a.open},[o("summary",{},[a.icon&&o("span",{class:"mr-2"},a.icon),a.label]),o("ul",{},t(a.children))]):o("a",{class:()=>d(a.active)?"active":"",onclick:a.onclick},[a.icon&&o("span",{class:"mr-2"},a.icon),a.label])]),(a,e)=>a.label||e);return o("ul",{...A,class:x("menu bg-base-200 rounded-box",A.class)},t(A.items))};var Jo={};p(Jo,{Modal:()=>Lo});var Lo=(A,t)=>{let{title:r,buttons:a,open:e,...n}=A,s={current:null};y(()=>{let i=s.current;if(!i)return;if(e()){if(!i.open)i.showModal()}else if(i.open)i.close()});let l=(i)=>{if(i&&i.preventDefault)i.preventDefault();e(!1)};return o("dialog",{...n,ref:s,class:"modal",oncancel:()=>e(!1)},[o("div",{class:"modal-box"},[r?o("h3",{class:"text-lg font-bold mb-4"},r):null,o("div",{class:"py-2"},[typeof t==="function"?t():t]),o("div",{class:"modal-action flex gap-2"},[...(Array.isArray(a)?a:[a]).filter(Boolean),j({type:"button",onclick:l},R("close")())])]),o("form",{method:"dialog",class:"modal-backdrop",onsubmit:l},[o("button",{},"close")])])};var To={};p(To,{Navbar:()=>No});var No=(A,t)=>o("div",{...A,class:x("navbar bg-base-100 shadow-sm px-4",A.class)},t);var ko={};p(ko,{Radio:()=>zo});var zo=(A)=>{let{label:t,tooltip:r,value:a,inputValue:e,name:n,...s}=A,l=o("input",{...s,type:"radio",name:n,class:x("radio",A.class),checked:()=>d(a)===e,onclick:()=>{if(typeof a==="function")a(e)}});if(!t&&!r)return l;return o("label",{class:"label cursor-pointer justify-start gap-3"},[l,t?o("span",{class:"label-text"},t):null])};var Xo={};p(Xo,{Range:()=>Ko});var Ko=(A)=>{let{label:t,tooltip:r,value:a,...e}=A,n=o("input",{...e,type:"range",class:x("range",A.class),value:a,disabled:()=>d(A.disabled)});if(!t&&!r)return n;let s=o("div",{class:"flex flex-col gap-2"},[t?o("span",{class:"label-text"},t):null,n]);return r?o("div",{class:"tooltip","data-tip":r},s):s};var Po={};p(Po,{Rating:()=>Zo});var Zo=(A)=>{let{value:t,count:r=5,mask:a="mask-star",readonly:e=!1,onchange:n,...s}=A,l=`rating-${Math.random().toString(36).slice(2,7)}`;return o("div",{...s,class:()=>`rating ${d(e)?"pointer-events-none":""} ${A.class||""}`},Array.from({length:d(r)},(i,c)=>{let b=c+1;return o("input",{type:"radio",name:l,class:`mask ${a}`,checked:()=>Math.round(d(t))===b,onchange:()=>{if(!d(e)){if(typeof n==="function")n(b);else if(typeof t==="function")t(b)}}})}))};var Oo={};p(Oo,{Select:()=>Wo});var Wo=(A)=>{let{label:t,options:r,value:a,...e}=A,n=o("select",{...e,class:x("select select-bordered w-full",A.class),value:a},h(()=>d(r)||[],(s)=>o("option",{value:s.value,$selected:()=>String(d(a))===String(s.value)},s.label),(s)=>s.value));if(!t)return n;return o("label",{class:"fieldset-label flex flex-col gap-1"},[o("span",{},t),n])};var $o={};p($o,{Stack:()=>qo});var qo=(A,t)=>o("div",{...A,class:x("stack",A.class)},t);var oA={};p(oA,{Stat:()=>_o});var _o=(A)=>o("div",{...A,class:x("stat",A.class)},[A.icon&&o("div",{class:"stat-figure text-secondary"},A.icon),A.label&&o("div",{class:"stat-title"},A.label),o("div",{class:"stat-value"},()=>d(A.value)??A.value),A.desc&&o("div",{class:"stat-desc"},A.desc)]);var tA={};p(tA,{Swap:()=>AA});var AA=(A)=>o("label",{class:x("swap",A.class)},[o("input",{type:"checkbox",checked:A.value}),o("div",{class:"swap-on"},A.on),o("div",{class:"swap-off"},A.off)]);var aA={};p(aA,{Table:()=>sA});var sA=(A)=>{let{items:t=[],columns:r=[],keyFn:a,zebra:e=!1,pinRows:n=!1,empty:s=R("nodata")(),...l}=A;return o("div",{class:"overflow-x-auto w-full bg-base-100 rounded-box border border-base-300"},[o("table",{...l,class:()=>x("table",`${d(e)?"table-zebra":""} ${d(n)?"table-pin-rows":""} ${A.class||""}`)},[o("thead",{},[o("tr",{},r.map((c)=>o("th",{class:c.class||""},c.label)))]),o("tbody",{},[h(t,(c,b)=>{return o("tr",{class:"hover"},r.map((m)=>{let u=()=>{if(m.render)return m.render(c,b);let f=c[m.key];return d(f)};return o("td",{class:m.class||""},[u])}))},a||((c,b)=>c.id||b)),U(()=>d(t).length===0,()=>o("tr",{},[o("td",{colspan:r.length,class:"text-center p-10 opacity-50"},[d(s)])]))]),U(()=>r.some((c)=>c.footer),()=>o("tfoot",{},[o("tr",{},r.map((c)=>o("th",{},c.footer||"")))]))])])};var rA={};p(rA,{Tabs:()=>lA});var lA=(A)=>{let{items:t,...r}=A,a=typeof t==="function"?t:()=>t||[];return o("div",{...r,class:"flex flex-col gap-4 w-full"},[o("div",{role:"tablist",class:x("tabs tabs-box",A.class)},h(a,(e)=>o("a",{role:"tab",class:()=>x("tab",d(e.active)&&"tab-active",d(e.disabled)&&"tab-disabled",e.tip&&"tooltip"),"data-tip":e.tip,onclick:(n)=>!d(e.disabled)&&e.onclick?.(n)},e.label),(e)=>e.label)),()=>{let e=a().find((s)=>d(s.active));if(!e)return null;let n=d(e.content);return o("div",{class:"p-4"},[typeof n==="function"?n():n])}])};var nA={};p(nA,{Timeline:()=>eA});var eA=(A)=>{let{items:t=[],vertical:r=!0,compact:a=!1,...e}=A,n={info:z,success:k,warning:X,error:K};return o("ul",{...e,class:()=>`timeline ${d(r)?"timeline-vertical":"timeline-horizontal"} ${d(a)?"timeline-compact":""} ${A.class||""}`},[h(t,(s,l)=>{let i=l===0,c=l===d(t).length-1,b=s.type||"success",m=(u)=>typeof u==="function"?u():u;return o("li",{class:"flex-1"},[!i?o("hr",{class:s.completed?"bg-primary":""}):null,o("div",{class:"timeline-start"},[m(s.title)]),o("div",{class:"timeline-middle"},[o("img",{src:n[b]||s.icon||n.success,class:"w-4 h-4 object-contain mx-1",alt:b})]),o("div",{class:"timeline-end timeline-box shadow-sm"},[m(s.detail)]),!c?o("hr",{class:s.completed?"bg-primary":""}):null])},(s,l)=>s.id||l)])};var cA={};p(cA,{Toast:()=>iA});var iA=(A,t="alert-success",r=3500)=>{let a=document.getElementById("sigpro-toast-container");if(!a)a=o("div",{id:"sigpro-toast-container",class:"fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"}),document.body.appendChild(a);let e=o("div",{style:"display: contents"});a.appendChild(e);let n,s=()=>{clearTimeout(n);let c=e.firstElementChild;if(c&&!c.classList.contains("opacity-0"))c.classList.add("translate-x-full","opacity-0"),setTimeout(()=>{if(i.destroy(),e.remove(),!a.hasChildNodes())a.remove()},300);else i.destroy(),e.remove()},i=so(()=>{let c=o("div",{class:`alert alert-soft ${t} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`},[o("span",{},[typeof A==="function"?A():A]),j({class:"btn-xs btn-circle btn-ghost",onclick:s},"✕")]);return requestAnimationFrame(()=>c.classList.remove("translate-x-10","opacity-0")),c},e);if(r>0)n=setTimeout(s,r);return s};var mA={};p(mA,{Tooltip:()=>dA});var dA=(A,t)=>o("div",{...A,class:x("tooltip",A.class),"data-tip":A.tip},t);var IA={...lo,...eo,...co,...fo,...go,...xo,...uo,...Co,...ho,...vo,...Ro,...Do,...Ho,...Io,...no,...Mo,...jo,...Go,...Jo,...To,...ko,...Xo,...Po,...Oo,...$o,...oA,...tA,...aA,...rA,...nA,...cA,...mA},XA={...IA,install:(A=window)=>{Object.entries(IA).forEach(([t,r])=>{A[t]=r}),console.log("\uD83D\uDE80 SigproUI")}};if(typeof window<"u")Object.entries(Z).forEach(([A,t])=>{window[A]=t}),window.Utils=N,window.tt=R,window.SigProUI={...Z,Utils:N,tt:R},console.log("\uD83C\uDFA8 SigProUI ready");})(); + ${q()?"border-primary bg-primary/10":"border-base-content/20 bg-base-100 hover:bg-base-200"} + `,ondragover:(C)=>{C.preventDefault(),q(!0)},ondragleave:()=>q(!1),ondrop:(C)=>{C.preventDefault(),q(!1),_(C.dataTransfer.files)}},[M("div",{class:"flex items-center gap-3 w-full"},[V("icon-[lucide--upload]"),M("span",{class:"text-sm opacity-70 truncate grow text-left"},"Arrastra o selecciona archivos..."),M("span",{class:"text-[10px] opacity-40 shrink-0"},`Máx ${J}MB`)]),M("input",{type:"file",multiple:!0,accept:Y,class:"hidden",onchange:(C)=>_(C.target.files)})])]),()=>Q()?M("span",{class:"text-[10px] text-error mt-1 px-1 font-medium"},Q()):null,j(()=>G().length>0,()=>M("ul",{class:"mt-2 space-y-1"},[E(G,(C,R)=>M("li",{class:"flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300"},[M("div",{class:"flex items-center gap-2 truncate"},[M("span",{class:"opacity-50"},"\uD83D\uDCC4"),M("span",{class:"truncate font-medium max-w-[200px]"},C.name),M("span",{class:"text-[9px] opacity-40"},`(${(C.size/1024).toFixed(0)} KB)`)]),M("button",{type:"button",class:"btn btn-ghost btn-xs btn-circle",onclick:(H)=>{H.preventDefault(),H.stopPropagation(),D(R)}},[V("icon-[lucide--x]")])]),(C)=>C.name+C.lastModified)]))])};var xM={};z(xM,{Indicator:()=>IM});var IM=(W,Z)=>M("div",{class:"indicator"},()=>[Z,W.value&&M("span",{class:A("indicator-item badge",W.class)},W.value)].filter(Boolean));var wM={};z(wM,{Label:()=>kM});var kM=(W)=>{let{children:Z,value:X,floating:J=!1,error:Y,required:L,class:K,...G}=W;if(J)return M("label",{class:A("floating-label w-full",K),...G},()=>[X?M("span",{},X):null,Z,Y?M("span",{class:"text-error text-xs"},P(Y)):null]);return M("label",{class:A("input w-full",K),...G},()=>[X?M("span",{class:"label"},X):null,Z,Y?M("span",{class:"text-error text-xs"},P(Y)):null])};var yM={};z(yM,{List:()=>fM});var fM=(W)=>{let{class:Z,items:X,header:J,render:Y,keyFn:L=(q,Q)=>Q,...K}=W,G=E(X,(q,Q)=>M("li",{class:"list-row"},[Y(q,Q)]),L);return M("ul",{...K,class:A("list bg-base-100 rounded-box shadow-md",Z)},J?[j(J,()=>M("li",{class:"p-4 pb-2 text-xs opacity-60"},[P(J)])),G]:G)};var $M={};z($M,{Loading:()=>vM});var vM=(W)=>{return j(W.$show,()=>M("div",{class:"fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"},[M("span",{class:"loading loading-spinner loading-lg text-primary"})]))};var gM={};z(gM,{Menu:()=>bM});var bM=(W)=>{let{class:Z,items:X,...J}=W,Y=(L)=>E(()=>L||[],(K)=>M("li",{},[K.children?M("details",{open:K.open},[M("summary",{},[K.icon&&M("span",{class:"mr-2"},K.icon),K.label]),M("ul",{},Y(K.children))]):M("a",{class:()=>P(K.active)?"active":"",onclick:K.onclick},[K.icon&&M("span",{class:"mr-2"},K.icon),K.label])]),(K,G)=>K.label||G);return M("ul",{...J,class:A("menu bg-base-200 rounded-box",Z)},Y(X))};var uM={};z(uM,{Modal:()=>hM});var hM=(W,Z)=>{let{class:X,title:J,buttons:Y,open:L,...K}=W,G={current:null};y(()=>{let Q=G.current;if(!Q)return;if(P(L)){if(!Q.open)Q.showModal()}else if(Q.open)Q.close()});let q=(Q)=>{if(Q&&Q.preventDefault)Q.preventDefault();if(typeof L==="function")L(!1)};return M("dialog",{...K,ref:G,class:A("modal",X),oncancel:()=>typeof L==="function"&&L(!1)},[M("div",{class:"modal-box"},[J?M("h3",{class:"text-lg font-bold mb-4"},J):null,M("div",{class:"py-2"},[typeof Z==="function"?Z():Z]),M("div",{class:"modal-action flex gap-2"},[...(Array.isArray(Y)?Y:[Y]).filter(Boolean),g({type:"button",onclick:q},x("close")())])]),M("form",{method:"dialog",class:"modal-backdrop",onsubmit:q},[M("button",{},"close")])])};var dM={};z(dM,{Navbar:()=>mM});var mM=(W,Z)=>{let{class:X,...J}=W;return M("div",{...J,class:A("navbar bg-base-100 shadow-sm px-4",X)},Z)};var cM={};z(cM,{Radio:()=>pM});var pM=(W)=>{let{class:Z,label:X,tooltip:J,value:Y,inputValue:L,name:K,...G}=W,q=M("input",{...G,type:"radio",name:K,class:A("radio",Z),checked:()=>P(Y)===L,onclick:()=>{if(typeof Y==="function")Y(L)}});if(!X&&!J)return q;let Q=M("label",{class:"label cursor-pointer justify-start gap-3"},[q,X?M("span",{class:"label-text"},X):null]);return J?M("div",{class:"tooltip","data-tip":J},Q):Q};var oM={};z(oM,{Range:()=>iM});var iM=(W)=>{let{class:Z,label:X,tooltip:J,value:Y,...L}=W,K=M("input",{...L,type:"range",class:A("range",Z),value:Y,disabled:()=>P(W.disabled)});if(!X&&!J)return K;let G=M("div",{class:"flex flex-col gap-2"},[X?M("span",{class:"label-text"},X):null,K]);return J?M("div",{class:"tooltip","data-tip":J},G):G};var aM={};z(aM,{Rating:()=>rM});var rM=(W)=>{let{class:Z,value:X,count:J=5,mask:Y="mask-star",readonly:L=!1,onchange:K,...G}=W,q=`rating-${Math.random().toString(36).slice(2,7)}`;return M("div",{...G,class:()=>A(`rating ${P(L)?"pointer-events-none":""}`,Z)},Array.from({length:P(J)},(Q,B)=>{let _=B+1;return M("input",{type:"radio",name:q,class:`mask ${Y}`,checked:()=>Math.round(P(X))===_,onchange:()=>{if(!P(L)){if(typeof K==="function")K(_);else if(typeof X==="function")X(_)}}})}))};var sM={};z(sM,{Select:()=>lM});var lM=(W)=>{let{class:Z,label:X,items:J,value:Y,...L}=W,K=M("select",{...L,class:A("select select-bordered w-full",Z),value:Y},E(()=>P(J)||[],(G)=>M("option",{value:G.value,$selected:()=>String(P(Y))===String(G.value)},G.label),(G)=>G.value));if(!X)return K;return M("label",{class:"fieldset-label flex flex-col gap-1"},[M("span",{},X),K])};var tM={};z(tM,{Stack:()=>nM});var nM=(W,Z)=>{let{class:X,...J}=W;return M("div",{...J,class:A("stack",X)},Z)};var MJ={};z(MJ,{Stat:()=>eM});var eM=(W)=>{let{class:Z,icon:X,label:J,value:Y,desc:L,...K}=W;return M("div",{...K,class:A("stat",Z)},[X&&M("div",{class:"stat-figure text-secondary"},X),J&&M("div",{class:"stat-title"},J),M("div",{class:"stat-value"},()=>P(Y)??Y),L&&M("div",{class:"stat-desc"},L)])};var KJ={};z(KJ,{Swap:()=>JJ});var JJ=(W)=>{let{class:Z,value:X,on:J,off:Y,...L}=W;return M("label",{...L,class:A("swap",Z)},[M("input",{type:"checkbox",checked:P(X)}),M("div",{class:"swap-on"},J),M("div",{class:"swap-off"},Y)])};var ZJ={};z(ZJ,{Table:()=>WJ});var WJ=(W)=>{let{class:Z,items:X=[],columns:J=[],keyFn:Y,zebra:L=!1,pinRows:K=!1,empty:G=x("nodata")(),...q}=W;return M("div",{class:"overflow-x-auto w-full bg-base-100 rounded-box border border-base-300"},[M("table",{...q,class:()=>{let B=P(L)?"table-zebra":"",_=P(K)?"table-pin-rows":"";return A("table",Z,B,_)}},[M("thead",{},[M("tr",{},J.map((B)=>M("th",{class:B.class||""},B.label)))]),M("tbody",{},[E(X,(B,_)=>{return M("tr",{class:"hover"},J.map((D)=>{let C=()=>{if(D.render)return D.render(B,_);let R=B[D.key];return P(R)};return M("td",{class:D.class||""},[C])}))},Y||((B,_)=>B.id||_)),j(()=>P(X).length===0,()=>M("tr",{},[M("td",{colspan:J.length,class:"text-center p-10 opacity-50"},[P(G)])]))]),j(()=>J.some((B)=>B.footer),()=>M("tfoot",{},[M("tr",{},J.map((B)=>M("th",{},B.footer||"")))]))])])};var GJ={};z(GJ,{Tabs:()=>XJ});var XJ=(W)=>{let{class:Z,items:X,activeIndex:J=U(0),...Y}=W,L=typeof X==="function"?X:()=>X||[],K=U(0),G=J!==void 0?J:K,q=(Q,B)=>(_)=>{if(typeof G==="function")G(Q);B?.(_)};return M("div",{...Y,class:"flex flex-col gap-4 w-full"},[M("div",{role:"tablist",class:A("tabs tabs-box",Z)},E(L,(Q,B)=>{let _=P(Q.active)??G()===B;return M("a",{role:"tab",class:()=>A("tab",_?"tab-active":"",P(Q.disabled)?"tab-disabled":""),onclick:!P(Q.disabled)?q(B,Q.onclick):void 0},Q.label)},(Q,B)=>Q.label+B)),()=>{let Q=L().find((_,D)=>P(_.active)??G()===D);if(!Q)return null;let B=P(Q.content);return M("div",{class:"p-4"},[typeof B==="function"?B():B])}])};var LJ={};z(LJ,{Timeline:()=>YJ});var YJ=(W)=>{let{class:Z,items:X=[],vertical:J=!0,compact:Y=!1,...L}=W,K={info:"icon-[lucide--info]",success:"icon-[lucide--check-circle]",warning:"icon-[lucide--alert-triangle]",error:"icon-[lucide--alert-circle]"};return M("ul",{...L,class:()=>A(`timeline ${P(J)?"timeline-vertical":"timeline-horizontal"} ${P(Y)?"timeline-compact":""}`,Z)},[E(X,(G,q)=>{let Q=q===0,B=q===P(X).length-1,_=G.type||"success",D=(C)=>typeof C==="function"?C():C;return M("li",{class:"flex-1"},[!Q?M("hr",{class:G.completed?"bg-primary":""}):null,M("div",{class:"timeline-start"},[D(G.title)]),M("div",{class:"timeline-middle"},[G.icon?V(G.icon):V(K[_]||K.success)]),M("div",{class:"timeline-end timeline-box shadow-sm"},[D(G.detail)]),!B?M("hr",{class:G.completed?"bg-primary":""}):null])},(G,q)=>G.id||q)])};var qJ={};z(qJ,{Toast:()=>QJ});var QJ=(W,Z="alert-success",X=3500)=>{let J=document.getElementById("sigpro-toast-container");if(!J)J=M("div",{id:"sigpro-toast-container",class:"fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"}),document.body.appendChild(J);let Y=M("div",{style:"display: contents"});J.appendChild(Y);let L,K=()=>{clearTimeout(L);let Q=Y.firstElementChild;if(Q&&!Q.classList.contains("opacity-0"))Q.classList.add("translate-x-full","opacity-0"),setTimeout(()=>{if(q.destroy(),Y.remove(),!J.hasChildNodes())J.remove()},300);else q.destroy(),Y.remove()},q=KM(()=>{let Q=V("icon-[lucide--x]"),B=M("div",{class:`alert alert-soft ${Z} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`},[M("span",{},[typeof W==="function"?W():W]),g({class:"btn-xs btn-circle btn-ghost",onclick:K},Q)]);return requestAnimationFrame(()=>B.classList.remove("translate-x-10","opacity-0")),B},Y);if(X>0)L=setTimeout(K,X);return K};var PJ={};z(PJ,{Tooltip:()=>BJ});var BJ=(W,Z)=>M("div",{...W,class:()=>A("tooltip",W.ui,W.class),"data-tip":W.tip},Z);var zJ={...ZM,...GM,...QM,...BM,...PM,...AM,...CM,...zM,...DM,...VM,...EM,...SM,...NM,...xM,...YM,...wM,...yM,...$M,...gM,...uM,...dM,...cM,...oM,...aM,...sM,...tM,...MJ,...KJ,...ZJ,...GJ,...LJ,...qJ,...PJ},xJ={...zJ,install:(W=window)=>{Object.entries(zJ).forEach(([Z,X])=>{W[Z]=X}),console.log("\uD83D\uDE80 SigproUI")}};if(typeof window<"u")Object.entries(i).forEach(([W,Z])=>{window[W]=Z}),window.Utils=c,window.tt=x,window.SigProUI={...i,Utils:c,tt:x},console.log("\uD83C\uDFA8 SigProUI ready");})(); diff --git a/docs/components/accordion.md b/docs/components/accordion.md index 7ef4a85..1097e5f 100644 --- a/docs/components/accordion.md +++ b/docs/components/accordion.md @@ -1,6 +1,6 @@ # Accordion -Collapsible accordion component for organizing content into expandable sections with DaisyUI styling. +Collapsible accordion component for organizing content into expandable sections. ## Tag @@ -8,13 +8,38 @@ Collapsible accordion component for organizing content into expandable sections ## Props -| Prop | Type | Default | Description | -| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- | -| `title` | `string \| VNode \| Signal` | Required | Accordion section title | -| `open` | `boolean \| Signal` | `false` | Whether the accordion is expanded | -| `name` | `string` | `-` | Group name for radio-style accordions (only one open at a time) | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | -| `children` | `VNode \| Array` | Required | Content to display when expanded | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `title` | `string \| VNode \| Signal` | Required | Accordion section title | +| `open` | `boolean \| Signal` | `false` | Whether the accordion is expanded | +| `name` | `string` | `-` | Group name for radio-style accordions (only one open at a time) | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `VNode \| Array` | Required | Content to display when expanded | + +## Styling + +Accordion supports all **daisyUI Collapse classes**: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Type | `collapse-arrow`, `collapse-plus`, `collapse-minus` | Expand indicator style | +| Color | `collapse-primary`, `collapse-secondary`, `collapse-accent` | Color variants | +| Background | `bg-base-100`, `bg-base-200` | Background colors | + +> For further details, check the [daisyUI Collapse Documentation](https://daisyui.com/components/collapse) – Full reference for CSS classes. + +### Example + +```javascript +Accordion({ + title: "Click to expand", + class: "collapse-arrow bg-base-100", + open: isOpen, + onclick: () => isOpen(!isOpen()) +}, [ + Div({ class: "p-4" }, "Hidden content here") +]); +``` ## Live Examples @@ -385,346 +410,4 @@ const VariantsDemo = () => { ]); }; $mount(VariantsDemo, '#demo-variants'); -``` - - +``` \ No newline at end of file diff --git a/docs/components/alert.md b/docs/components/alert.md index ea2dded..8bae786 100644 --- a/docs/components/alert.md +++ b/docs/components/alert.md @@ -8,14 +8,37 @@ Alert component for displaying contextual messages, notifications, and feedback ## Props -| Prop | Type | Default | Description | -| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | -| `type` | `string` | `'info'` | Alert type: 'info', 'success', 'warning', 'error' | -| `soft` | `boolean \| Signal` | `true` | Use soft variant (subtle background) | -| `actions` | `VNode \| function` | `-` | Optional action buttons or content | -| `message` | `string \| VNode \| Signal` | `-` | Alert message content | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | -| `children` | `string \| VNode` | `-` | Alert content (alternative to `message`) | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `type` | `string` | `'info'` | Alert type: `'info'`, `'success'`, `'warning'`, `'error'` | +| `soft` | `boolean \| Signal` | `true` | Use soft variant (subtle background) | +| `actions` | `VNode \| function` | `-` | Optional action buttons or content | +| `message` | `string \| VNode \| Signal` | `-` | Alert message content | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `string \| VNode` | `-` | Alert content (alternative to `message`) | + +## Styling + +Alert supports all **daisyUI Alert classes**: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Color | `alert-info`, `alert-success`, `alert-warning`, `alert-error` | Alert type variants | +| Style | `alert-soft` (default), `alert-solid` | Visual style variants | + +> For further details, check the [daisyUI Alert Documentation](https://daisyui.com/components/alert) – Full reference for CSS classes. + +### Example + +```javascript +Alert({ + type: "success", + soft: false, + class: "shadow-lg", + message: "Operation completed!" +}); +// Applies: solid success alert with shadow +``` ## Live Examples @@ -288,234 +311,4 @@ const AllTypesDemo = () => { ]); }; $mount(AllTypesDemo, '#demo-all'); -``` - - +``` \ No newline at end of file diff --git a/docs/components/autocomplete.md b/docs/components/autocomplete.md index 8456bb6..ff166dc 100644 --- a/docs/components/autocomplete.md +++ b/docs/components/autocomplete.md @@ -1,6 +1,6 @@ # Autocomplete -Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive options. +Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive items. ## Tag @@ -8,14 +8,38 @@ Searchable dropdown with autocomplete functionality, keyboard navigation, and re ## Props -| Prop | Type | Default | Description | -| :----------- | :------------------------------------------------ | :------------------ | :----------------------------------------------- | -| `label` | `string` | `-` | Label text for the input | -| `options` | `Array` | `[]` | Options to search from | -| `value` | `string \| Signal` | `''` | Selected value | -| `placeholder`| `string` | `'Search...'` | Placeholder text | -| `onSelect` | `function` | `-` | Called when an option is selected | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `class` | `string` | `''` | Additional CSS classes for the container | +| `items` | `Array \| Signal` | `[]` | Items to search from | +| `value` | `string \| Signal` | `''` | Selected value (reactive) | +| `onSelect` | `function(item)` | `-` | Called when an option is selected | +| `label` | `string` | `-` | Label text for the input | +| `placeholder` | `string` | `'Search...'` | Placeholder text | + +## Styling + +Autocomplete wraps a **daisyUI Input component** internally. All Input styling classes work: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants | +| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale | +| Style | `input-bordered` (default), `input-ghost` | Visual style variants | + +> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes. + +### Example + +```javascript +Autocomplete({ + class: "input-primary input-lg", + items: fruits, + value: selected, + onSelect: (value) => selected(value) +}); +// Applies: primary color, large size +``` ## Live Examples @@ -34,8 +58,7 @@ const BasicDemo = () => { const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon']; return Autocomplete({ - label: 'Search fruit', - options: fruits, + items: fruits, value: selected, onSelect: (value) => selected(value) }); @@ -68,8 +91,7 @@ const ObjectsDemo = () => { return Div({ class: 'flex flex-col gap-4 w-full' }, [ Autocomplete({ - label: 'Search country', - options: countries, + items: countries, value: selectedLabel, onSelect: (item) => { const selectedItem = typeof item === 'string' @@ -80,7 +102,7 @@ const ObjectsDemo = () => { } }), Div({ class: 'alert alert-success' }, [ - `Selected: ${selected()} - ${selectedLabel()}` + () => `Selected: ${selected()} - ${selectedLabel()}` ]) ]); }; @@ -106,8 +128,7 @@ const ReactiveDemo = () => { return Div({ class: 'flex flex-col gap-4 w-full' }, [ Autocomplete({ - label: 'Programming language', - options: programmingLanguages, + items: programmingLanguages, value: selected, onSelect: (value) => selected(value) }), @@ -119,7 +140,7 @@ const ReactiveDemo = () => { $mount(ReactiveDemo, '#demo-reactive'); ``` -### Dynamic Options +### Dynamic Items
@@ -141,8 +162,7 @@ const DynamicDemo = () => { return Div({ class: 'flex flex-col gap-4 w-full' }, [ Select({ - label: 'Category', - options: [ + items: [ { value: 'all', label: 'All items' }, { value: 'fruits', label: 'Fruits' }, { value: 'vegetables', label: 'Vegetables' } @@ -151,8 +171,7 @@ const DynamicDemo = () => { onchange: (e) => filterType(e.target.value) }), Autocomplete({ - label: 'Search item', - options: () => allItems[filterType()], + items: () => allItems[filterType()], value: selected, onSelect: (value) => selected(value) }) @@ -177,27 +196,24 @@ const VariantsDemo = () => { return Div({ class: 'flex flex-col gap-4' }, [ Div({}, [ Autocomplete({ - label: 'Primary style', class: 'input-primary', - options: colors, + items: colors, value: $(''), placeholder: 'Search colors...' }) ]), Div({}, [ Autocomplete({ - label: 'Secondary style', class: 'input-secondary', - options: colors, + items: colors, value: $(''), placeholder: 'Search colors...' }) ]), Div({}, [ Autocomplete({ - label: 'Ghost style', class: 'input-ghost', - options: colors, + items: colors, value: $(''), placeholder: 'Search colors...' }) @@ -205,172 +221,4 @@ const VariantsDemo = () => { ]); }; $mount(VariantsDemo, '#demo-variants'); -``` - - \ No newline at end of file +``` \ No newline at end of file diff --git a/docs/components/badge.md b/docs/components/badge.md index b069bbb..aa9cb41 100644 --- a/docs/components/badge.md +++ b/docs/components/badge.md @@ -1,6 +1,6 @@ # Badge -Badge component for displaying counts, labels, and status indicators with DaisyUI styling. +Badge component for displaying counts, labels, and status indicators. ## Tag @@ -8,10 +8,29 @@ Badge component for displaying counts, labels, and status indicators with DaisyU ## Props -| Prop | Type | Default | Description | -| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) | -| `children` | `string \| VNode` | `-` | Badge content | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) | +| `children` | `string \| VNode` | `-` | Badge content | + +## Styling + +Badge supports all **daisyUI Badge classes**: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Color | `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` | Visual color variants | +| Size | `badge-xs`, `badge-sm`, `badge-md`, `badge-lg` | Badge scale | +| Style | `badge-outline`, `badge-ghost`, `badge-dash` | Visual style variants | + +> For further details, check the [daisyUI Badge Documentation](https://daisyui.com/components/badge) – Full reference for CSS classes. + +### Example + +```javascript +Badge({ class: "badge-primary badge-lg" }, "New"); +// Applies: primary color, large size +``` ## Live Examples @@ -125,19 +144,19 @@ $mount(GhostDemo, '#demo-ghost'); const IconsDemo = () => { return Div({ class: 'flex flex-wrap gap-2' }, [ Badge({ class: 'gap-1' }, [ - Icons.iconSuccess, + Span({}, '✓'), Span({}, 'Success') ]), Badge({ class: 'gap-1 badge-warning' }, [ - Icons.iconWarning, + Span({}, '⚠'), Span({}, 'Warning') ]), Badge({ class: 'gap-1 badge-error' }, [ - Icons.iconError, + Span({}, '✗'), Span({}, 'Error') ]), Badge({ class: 'gap-1 badge-info' }, [ - Icons.iconInfo, + Span({}, 'ℹ'), Span({}, 'Info') ]), Badge({ class: 'gap-1' }, [ @@ -301,237 +320,4 @@ const InlineDemo = () => { ]); }; $mount(InlineDemo, '#demo-inline'); -``` - - +``` \ No newline at end of file diff --git a/docs/components/button.md b/docs/components/button.md index 7202059..cbb0f87 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -1,53 +1,44 @@ -> # Button(props, children?: string | Signal | [...]): HTMLElement +# Button --- ## Props -| Prop | Type | Default | Description | -| :----------- | :--------------------------- | :------------------ | :------------------------------- | -| `class` | `string` | `''` | Additional CSS classes (daisyUI) | -| `disabled` | `boolean \| Signal` | `false` | Disabled state | -| `loading` | `boolean \| Signal` | `false` | Shows loading spinner | -| `badge` | `string \| Signal` | `-` | Badge text displayed on corner | -| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes | -| `tooltip` | `string \| Signal` | `-` | Tooltip text on hover | -| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text | -| `onclick` | `function` | `-` | Click event handler | -| `type` | `string` | `'button'` | Native button type | +| Prop | Type | Description | +| :--------- | :--------------------------- | :----------------------------------------------------- | +| `class` | `string` | Additional CSS classes | +| `loading` | `boolean \| Signal` | Shows a spinner and disables the button | +| `disabled` | `boolean \| Signal` | Disabled state | +| `icon` | `string \| VNode \| Signal` | Icon displayed before the text | +| `onclick` | `function` | Click event handler | +| `type` | `string` | Native button type (`'button'`, `'submit'`, `'reset'`) | -## Class Options +--- -For more detailed information about the underlying styling system, visit the daisyUI documentation: +## Classes (daisyUI) -- [daisyUI Button](https://daisyui.com/components/button) +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants | +| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale | +| Style | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link` | Visual style variants | +| Shape | `btn-circle`, `btn-square`, `btn-wide`, `btn-block` | Button shape | +| State | `btn-active`, `btn-disabled` | Forced visual states | -| Class Name | Category | Description | -| :-------------- | :------------ | :------------------------------------ | -| `btn-neutral` | `Color` 🎨 | Neutral brand color | -| `btn-primary` | `Color` 🎨 | Primary brand color | -| `btn-secondary` | `Color` 🎨 | Secondary brand color | -| `btn-accent` | `Color` 🎨 | Accent brand color | -| `btn-info` | `Color` 🎨 | Informational blue color | -| `btn-success` | `Color` 🎨 | Success green color | -| `btn-warning` | `Color` 🎨 | Warning yellow color | -| `btn-error` | `Color` 🎨 | Error red color | -| `btn-xl` | `Size` 📏 | Extra large scale | -| `btn-lg` | `Size` 📏 | Large scale | -| `btn-md` | `Size` 📏 | Medium scale (Default) | -| `btn-sm` | `Size` 📏 | Small scale | -| `btn-xs` | `Size` 📏 | Extra small scale | -| `btn-outline` | `Style` ✨ | Transparent with colored border | -| `btn-dash` | `Style` ✨ | Dashed border style | -| `btn-soft` | `Style` ✨ | Low opacity background color | -| `btn-ghost` | `Style` ✨ | No background, hover effect only | -| `btn-link` | `Style` ✨ | Looks like a text link | -| `btn-square` | `Shape` 📐 | 1:1 aspect ratio | -| `btn-circle` | `Shape` 📐 | 1:1 aspect ratio with rounded corners | -| `btn-wide` | `Shape` 📐 | Extra horizontal padding | -| `btn-block` | `Shape` 📐 | Full width of container | -| `btn-active` | `Behavior` ⚙️ | Forced active/pressed state | -| `btn-disabled` | `Behavior` ⚙️ | Visual and functional disabled state | +> SigProUI supports styling via daisyUI independently or combined with the `ui` prop. +> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – Full reference for CSS classes. + +### Example + +```javascript +Button({ class: "btn-primary btn-lg btn-circle gap-4"}, "Click Me"); +// Applies: primary color, large size, circular shape +// class is any css class from pure css or favorite framework +``` + +--- + +## Examples ### Basic Button @@ -84,19 +75,32 @@ const LoadingDemo = () => { $mount(LoadingDemo, "#demo-loading"); ``` -### With Badge +### With Icon + +
+ +```javascript +const IconDemo = () => { + return Button( + { + class: "btn-primary", + icon: "⭐", + }, + "Favorite", + ); +}; +$mount(IconDemo, "#demo-icon"); +``` + +### With Badge (using Indicator)
```javascript const BadgeDemo = () => { - return Button( - { - class: "btn-outline", - badge: "3", - badgeClass: "badge-accent", - }, - "Notifications", + return Indicator( + { value: "3", class: "badge-accent" }, + Button({ class: "btn-outline" }, "Notifications"), ); }; $mount(BadgeDemo, "#demo-badge"); @@ -108,36 +112,37 @@ $mount(BadgeDemo, "#demo-badge"); ```javascript const TooltipDemo = () => { - return Button( - { - class: "btn-ghost", - tooltip: "Delete item", - }, - "Delete", - ); + return Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete")); }; $mount(TooltipDemo, "#demo-tooltip"); ``` -### Disabled State +### Combined (Badge + Tooltip) -
+
```javascript -const DisabledDemo = () => { - const isDisabled = $(true); - - return Button( - { - class: "btn-primary btn-disabled", - }, - "Submit", +const CombinedDemo = () => { + const count = $(0); + return Tooltip( + { tip: () => `${count()} likes` }, + Indicator( + { value: count, class: "badge-accent" }, + Button( + { + class: "btn-primary btn-lg", + icon: "👍", + onclick: () => count(count() + 1), + }, + "Like", + ) + ), ); }; -$mount(DisabledDemo, "#demo-disabled"); +$mount(CombinedDemo, "#demo-combined"); ``` -### All Variants +### All Color Variants
@@ -153,16 +158,3 @@ const VariantsDemo = () => { }; $mount(VariantsDemo, "#demo-variants"); ``` - -
- -```javascript -const TestDemo = () => { - return Div({ class: "flex flex-wrap gap-2 justify-center" }, [ - $html("span", {class: "indicator"},[ - 5, - Button('Click')]) - ]); -}; -$mount(TestDemo, "#demo-test"); -``` diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index 57afef6..5e2f75c 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -8,15 +8,38 @@ Toggle checkbox component with label, tooltip support, and reactive state manage ## Props -| Prop | Type | Default | Description | -| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | -| `label` | `string` | `-` | Label text for the checkbox | -| `value` | `boolean \| Signal` | `false` | Checked state | -| `tooltip` | `string` | `-` | Tooltip text on hover | -| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox | -| `disabled` | `boolean \| Signal` | `false` | Disabled state | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | -| `onclick` | `function` | `-` | Click event handler | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `label` | `string` | `-` | Label text for the checkbox | +| `value` | `boolean \| Signal` | `false` | Checked state | +| `tooltip` | `string` | `-` | Tooltip text on hover | +| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox | +| `disabled` | `boolean \| Signal` | `false` | Disabled state | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `onclick` | `function` | `-` | Click event handler | + +## Styling + +Checkbox supports all **daisyUI Checkbox and Toggle classes**: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Color (Checkbox) | `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-info`, `checkbox-success`, `checkbox-warning`, `checkbox-error` | Checkbox color variants | +| Size (Checkbox) | `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg` | Checkbox scale | +| Color (Toggle) | `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-info`, `toggle-success`, `toggle-warning`, `toggle-error` | Toggle color variants | +| Size (Toggle) | `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg` | Toggle scale | + +> For further details, check the [daisyUI Checkbox Documentation](https://daisyui.com/components/checkbox) and [daisyUI Toggle Documentation](https://daisyui.com/components/toggle) – Full reference for CSS classes. + +### Example + +```javascript +// Checkbox +Checkbox({ class: "checkbox-primary checkbox-lg", label: "Accept terms" }); + +// Toggle switch +Checkbox({ toggle: true, class: "toggle-success", label: "Enable feature" }); +``` ## Live Examples @@ -264,216 +287,4 @@ const FormDemo = () => { ]); }; $mount(FormDemo, '#demo-form'); -``` - - +``` \ No newline at end of file diff --git a/docs/components/colorpicker.md b/docs/components/colorpicker.md index 1cddb83..73dcf3d 100644 --- a/docs/components/colorpicker.md +++ b/docs/components/colorpicker.md @@ -8,11 +8,32 @@ Color picker component with preset color palette, reactive value binding, and cu ## Props -| Prop | Type | Default | Description | -| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | -| `label` | `string` | `-` | Label text for the button | -| `value` | `string \| Signal` | `'#000000'` | Selected color value (hex format) | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `label` | `string` | `-` | Label text for the button | +| `value` | `string \| Signal` | `'#000000'` | Selected color value (hex format) | +| `class` | `string` | `''` | Additional CSS classes (Tailwind + custom styling) | + +## Styling + +Colorpicker is a custom component built with Tailwind CSS. The button supports standard **daisyUI Button classes** for consistent styling: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg` | Button scale | +| Style | `btn-outline`, `btn-soft`, `btn-ghost` | Visual style variants | + +> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – The color picker button accepts standard button styling classes. + +### Example + +```javascript +Colorpicker({ + class: "btn-outline btn-sm", + label: "Pick color", + value: selectedColor +}); +``` ## Live Examples @@ -56,10 +77,10 @@ const PreviewDemo = () => { value: color }), Div({ - class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200', + class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center', style: () => `background-color: ${color()}` }, [ - Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color()) + Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color()) ]) ]); }; @@ -196,187 +217,19 @@ const DynamicDemo = () => { ]), Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [ Div({ - class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold', - style: () => `background-color: ${primary()}; color: white` + class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white', + style: () => `background-color: ${primary()}` }, 'Primary'), Div({ - class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold', - style: () => `background-color: ${secondary()}; color: white` + class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white', + style: () => `background-color: ${secondary()}` }, 'Secondary'), Div({ - class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold', - style: () => `background-color: ${accent()}; color: white` + class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white', + style: () => `background-color: ${accent()}` }, 'Accent') ]) ]); }; $mount(DynamicDemo, '#demo-dynamic'); -``` - - +``` \ No newline at end of file diff --git a/docs/components/datepicker.md b/docs/components/datepicker.md index 272444a..d8f058d 100644 --- a/docs/components/datepicker.md +++ b/docs/components/datepicker.md @@ -8,14 +8,37 @@ Date and date range picker component with calendar interface, time selection, an ## Props -| Prop | Type | Default | Description | -| :----------- | :------------------------------------------------ | :----------------------- | :----------------------------------------------- | -| `label` | `string` | `-` | Label text for the input | -| `value` | `string \| {start: string, end: string} \| Signal` | `-` | Selected date or range | -| `range` | `boolean` | `false` | Enable date range selection mode | -| `hour` | `boolean` | `false` | Enable hour selection | -| `placeholder`| `string` | `'Select date...'` | Placeholder text | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `label` | `string` | `-` | Label text for the input | +| `value` | `string \| {start: string, end: string} \| Signal` | `-` | Selected date or range | +| `range` | `boolean` | `false` | Enable date range selection mode | +| `hour` | `boolean` | `false` | Enable hour selection | +| `placeholder` | `string` | `'Select date...'` | Placeholder text | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Styling + +Datepicker wraps a **daisyUI Input component** internally. All Input styling classes work: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants | +| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale | +| Style | `input-bordered` (default), `input-ghost` | Visual style variants | + +> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes. + +### Example + +```javascript +Datepicker({ + class: "input-primary input-lg", + label: "Select date", + value: selectedDate +}); +// Applies: primary color, large size +``` ## Live Examples @@ -190,150 +213,4 @@ const VariantsDemo = () => { ]); }; $mount(VariantsDemo, '#demo-variants'); -``` - - +``` \ No newline at end of file diff --git a/docs/components/drawer.md b/docs/components/drawer.md index 290d329..523c106 100644 --- a/docs/components/drawer.md +++ b/docs/components/drawer.md @@ -8,13 +8,37 @@ Drawer component for creating off-canvas side panels with overlay and toggle fun ## Props -| Prop | Type | Default | Description | -| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | -| `id` | `string` | Required | Unique identifier for the drawer | -| `open` | `boolean \| Signal` | `false` | Drawer open state | -| `side` | `VNode` | Required | Content to display in the drawer panel | -| `content` | `VNode` | Required | Main page content | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `id` | `string` | Required | Unique identifier for the drawer | +| `open` | `boolean \| Signal` | `false` | Drawer open state | +| `side` | `VNode` | Required | Content to display in the drawer panel | +| `content` | `VNode` | Required | Main page content | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Styling + +Drawer supports all **daisyUI Drawer classes**: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Position | `drawer-end` | Drawer opens from the right side | +| Width | `w-64`, `w-80`, `w-96` | Custom drawer width (Tailwind) | + +> For further details, check the [daisyUI Drawer Documentation](https://daisyui.com/components/drawer) – Full reference for CSS classes. + +### Example + +```javascript +Drawer({ + id: "my-drawer", + open: isOpen, + class: "drawer-end", + side: SidebarContent, + content: MainContent +}); +// Applies: drawer opens from right side +``` ## Live Examples @@ -479,440 +503,4 @@ const FormDrawer = () => { }); }; $mount(FormDrawer, '#demo-form'); -``` - - +``` \ No newline at end of file diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md index ea00098..437af68 100644 --- a/docs/components/dropdown.md +++ b/docs/components/dropdown.md @@ -8,22 +8,45 @@ Dropdown component for creating menus, selectors, and action panels that appear ## Props -| Prop | Type | Default | Description | -| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- | -| `label` | `string \| VNode \| Signal` | `-` | Button label or content | -| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed next to label | -| `items` | `Array \| Signal` | `-` | Array of menu items (alternative to children) | -| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | -| `children` | `VNode \| function` | `-` | Custom dropdown content (alternative to items) | +| Prop | Type | Default | Description | +| :--- | :--- | :--- | :--- | +| `label` | `string \| VNode \| Signal` | `-` | Button label or content | +| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed next to label | +| `items` | `Array \| Signal` | `-` | Array of menu items (alternative to children) | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `VNode \| function` | `-` | Custom dropdown content (alternative to items) | ### MenuItem Structure (when using `items`) -| Property | Type | Description | -| :---------- | :--------------------------- | :----------------------------------------------- | -| `label` | `string \| VNode` | Menu item text | -| `icon` | `string \| VNode` | Optional icon for the menu item | -| `onclick` | `function` | Click handler | -| `class` | `string` | Additional CSS classes for the menu item | +| Property | Type | Description | +| :--- | :--- | :--- | +| `label` | `string \| VNode` | Menu item text | +| `icon` | `string \| VNode` | Optional icon for the menu item | +| `onclick` | `function` | Click handler | +| `class` | `string` | Additional CSS classes for the menu item | + +## Styling + +Dropdown supports all **daisyUI Dropdown classes**: + +| Category | Keywords | Description | +| :--- | :--- | :--- | +| Position | `dropdown-end` | Align dropdown to the right | +| Direction | `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right` | Dropdown open direction | +| Hover | `dropdown-hover` | Open on hover instead of click | + +> For further details, check the [daisyUI Dropdown Documentation](https://daisyui.com/components/dropdown) – Full reference for CSS classes. + +### Example + +```javascript +Dropdown({ + label: "Menu", + class: "dropdown-end dropdown-hover", + items: menuItems +}); +// Applies: right-aligned, opens on hover +``` ## Live Examples @@ -276,214 +299,4 @@ const VariantsDemo = () => { ]); }; $mount(VariantsDemo, '#demo-variants'); -``` - - \ No newline at end of file +``` \ No newline at end of file diff --git a/docs/components/indicator.md b/docs/components/indicator.md index 6fc95fd..880b7d2 100644 --- a/docs/components/indicator.md +++ b/docs/components/indicator.md @@ -29,13 +29,13 @@ Indicator component for adding badges, status markers, or notifications to eleme ```javascript const BasicDemo = () => { return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ - Indicator({ badge: '3', badgeClass: 'badge-primary' }, [ + Indicator({ value: '3', ui: 'badge-primary' }, [ Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦') ]), - Indicator({ badge: '99+', badgeClass: 'badge-secondary' }, [ + Indicator({ value: '99+', ui: 'badge-secondary' }, [ Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔') ]), - Indicator({ badge: 'New', badgeClass: 'badge-accent' }, [ + Indicator({ value: 'New', ui: 'badge-accent' }, [ Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨') ]) ]); @@ -55,17 +55,17 @@ $mount(BasicDemo, '#demo-basic'); ```javascript const StatusDemo = () => { return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ - Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [ + Indicator({ value: '●', ui: 'badge-success badge-xs' }, [ Div({ class: 'avatar placeholder' }, [ Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JD') ]) ]), - Indicator({ badge: '●', badgeClass: 'badge-warning badge-xs' }, [ + Indicator({ value: '●', ui: 'badge-warning badge-xs' }, [ Div({ class: 'avatar placeholder' }, [ Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JS') ]) ]), - Indicator({ badge: '●', badgeClass: 'badge-error badge-xs' }, [ + Indicator({ value: '●', ui: 'badge-error badge-xs' }, [ Div({ class: 'avatar placeholder' }, [ Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC') ]) diff --git a/docs/components/input.md b/docs/components/input.md index 9962c6c..9ad6979 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -2,6 +2,7 @@ Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind. + ## Tag `Input` @@ -37,7 +38,6 @@ const BasicDemo = () => { const name = $(''); return Input({ - label: 'Full Name', placeholder: 'Enter your name', value: name, oninput: (e) => name(e.target.value) @@ -60,9 +60,8 @@ const IconDemo = () => { const email = $(''); return Input({ - label: 'Email', type: 'email', - icon: Icons.iconMail, + icon: "✉️", value: email, oninput: (e) => email(e.target.value) }); @@ -84,7 +83,6 @@ const PasswordDemo = () => { const password = $(''); return Input({ - label: 'Password', type: 'password', value: password, oninput: (e) => password(e.target.value) @@ -107,7 +105,6 @@ const TooltipDemo = () => { const username = $(''); return Input({ - label: 'Username', tip: 'Must be at least 3 characters', value: username, oninput: (e) => username(e.target.value) @@ -137,7 +134,6 @@ const ErrorDemo = () => { }; return Input({ - label: 'Email', type: 'email', value: email, error: () => !isValid() && email() ? 'Invalid email address' : '', @@ -159,7 +155,6 @@ $mount(ErrorDemo, '#demo-error'); ```javascript const DisabledDemo = () => { return Input({ - label: 'Username', value: 'john.doe', disabled: true }); @@ -183,166 +178,30 @@ const VariantsDemo = () => { return Div({ class: 'flex flex-col gap-4' }, [ Input({ - label: 'Text Input', placeholder: 'Type something...', value: text, oninput: (e) => text(e.target.value) }), Input({ - label: 'Number Input', type: 'number', value: number, oninput: (e) => number(parseInt(e.target.value) || 0) }), Input({ - label: 'Date Input', type: 'date', value: $('2024-01-01') - }) + }), + Input({class: 'input-primary',value:"Primary"}), + Input({class: 'input-secondary', value:"Secondary"}), + Input({class: 'input-accent', value:"Accent"}), + Input({class: 'input-ghost', value:"Ghost"}), + Input({class: 'input-link', value:"Link"}), + Input({class: 'input-info', value:"Info"}), + Input({class: 'input-success', value:"Success"}), + Input({class: 'input-warning', value:"Warning"}), + Input({class: 'input-error', value:"Error"}), + ]); }; $mount(VariantsDemo, '#demo-variants'); ``` - - diff --git a/docs/components/rating.md b/docs/components/rating.md index d816cae..93cb91b 100644 --- a/docs/components/rating.md +++ b/docs/components/rating.md @@ -140,8 +140,7 @@ const CustomDemo = () => { Input({ type: 'number', value: count, - class: 'input input-sm w-24', - oninput: (e) => count(parseInt(e.target.value) || 1) + class: 'input input-sm w-24' }) ]), Rating({ diff --git a/docs/components/select.md b/docs/components/select.md index 2d45a4a..21ed8c5 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -1,6 +1,6 @@ # Select -Dropdown select component with full DaisyUI styling, reactive options, and form integration. +Dropdown select component with full DaisyUI styling, reactive items, and form integration. ## Tag @@ -11,7 +11,7 @@ Dropdown select component with full DaisyUI styling, reactive options, and form | Prop | Type | Default | Description | | :----------- | :-------------------------------------- | :------------------ | :----------------------------------------------- | | `label` | `string` | `-` | Label text above select | -| `options` | `Array<{value: string, label: string}>` | `[]` | Array of options with value and label | +| `items` | `Array<{value: string, label: string}>` | `[]` | Array of items with value and label | | `value` | `string \| Signal` | `''` | Selected value | | `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | | `disabled` | `boolean \| Signal` | `false` | Disabled state | @@ -34,7 +34,7 @@ const BasicDemo = () => { return Select({ label: 'Choose a fruit', - options: [ + items: [ { value: 'apple', label: '🍎 Apple' }, { value: 'banana', label: '🍌 Banana' }, { value: 'orange', label: '🍊 Orange' }, @@ -59,11 +59,10 @@ $mount(BasicDemo, '#demo-basic'); ```javascript const ReactiveDemo = () => { const selected = $('small'); - return Div({ class: 'flex flex-col gap-4 w-full' }, [ Select({ label: 'Select size', - options: [ + items: [ { value: 'small', label: 'Small' }, { value: 'medium', label: 'Medium' }, { value: 'large', label: 'Large' } @@ -72,7 +71,7 @@ const ReactiveDemo = () => { onchange: (e) => selected(e.target.value) }), Div({ class: 'alert alert-info' }, [ - `You selected: ${selected()}` + () => `You selected: ${selected()}` ]) ]); }; @@ -92,7 +91,7 @@ $mount(ReactiveDemo, '#demo-reactive'); const DisabledDemo = () => { return Select({ label: 'Country (disabled)', - options: [ + items: [ { value: 'mx', label: 'Mexico' }, { value: 'us', label: 'United States' }, { value: 'ca', label: 'Canada' } @@ -104,7 +103,7 @@ const DisabledDemo = () => { $mount(DisabledDemo, '#demo-disabled'); ``` -### Dynamic Options +### Dynamic items
@@ -117,7 +116,7 @@ $mount(DisabledDemo, '#demo-disabled'); const DynamicDemo = () => { const category = $('fruits'); - const options = { + const items = { fruits: [ { value: 'apple', label: '🍎 Apple' }, { value: 'banana', label: '🍌 Banana' } @@ -131,7 +130,7 @@ const DynamicDemo = () => { return Div({ class: 'flex flex-col gap-4 w-full' }, [ Select({ label: 'Category', - options: [ + items: [ { value: 'fruits', label: 'Fruits' }, { value: 'vegetables', label: 'Vegetables' } ], @@ -140,7 +139,7 @@ const DynamicDemo = () => { }), Select({ label: 'Item', - options: () => options[category()] || [], + items: () => items[category()] || [], value: $(''), onchange: (e) => console.log('Selected:', e.target.value) }) @@ -168,7 +167,7 @@ const VariantsDemo = () => { Select({ label: 'Primary Select', class: 'select-primary', - options: [ + items: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } @@ -179,7 +178,7 @@ const VariantsDemo = () => { Select({ label: 'Secondary Select', class: 'select-secondary', - options: [ + items: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' } ], @@ -189,7 +188,7 @@ const VariantsDemo = () => { Select({ label: 'Ghost Select', class: 'select-ghost', - options: [ + items: [ { value: '', label: 'Select an option' }, { value: 'opt1', label: 'Option 1' }, { value: 'opt2', label: 'Option 2' } @@ -214,7 +213,7 @@ $mount(VariantsDemo, '#demo-variants'); return Select({ label: 'Choose a fruit', - options: [ + items: [ { value: 'apple', label: '🍎 Apple' }, { value: 'banana', label: '🍌 Banana' }, { value: 'orange', label: '🍊 Orange' }, @@ -236,7 +235,7 @@ $mount(VariantsDemo, '#demo-variants'); return Div({ class: 'flex flex-col gap-4 w-full' }, [ Select({ label: 'Select size', - options: [ + items: [ { value: 'small', label: 'Small' }, { value: 'medium', label: 'Medium' }, { value: 'large', label: 'Large' } @@ -258,7 +257,7 @@ $mount(VariantsDemo, '#demo-variants'); const DisabledDemo = () => { return Select({ label: 'Country (disabled)', - options: [ + items: [ { value: 'mx', label: 'Mexico' }, { value: 'us', label: 'United States' }, { value: 'ca', label: 'Canada' } @@ -270,13 +269,13 @@ $mount(VariantsDemo, '#demo-variants'); $mount(DisabledDemo, disabledTarget); } - // 4. Dynamic Options + // 4. Dynamic items const dynamicTarget = document.querySelector('#demo-dynamic'); if (dynamicTarget && !dynamicTarget.hasChildNodes()) { const DynamicDemo = () => { const category = $('fruits'); - const options = { + const items = { fruits: [ { value: 'apple', label: '🍎 Apple' }, { value: 'banana', label: '🍌 Banana' } @@ -290,7 +289,7 @@ $mount(VariantsDemo, '#demo-variants'); return Div({ class: 'flex flex-col gap-4 w-full' }, [ Select({ label: 'Category', - options: [ + items: [ { value: 'fruits', label: 'Fruits' }, { value: 'vegetables', label: 'Vegetables' } ], @@ -299,7 +298,7 @@ $mount(VariantsDemo, '#demo-variants'); }), Select({ label: 'Item', - options: () => options[category()] || [], + items: () => items[category()] || [], value: $(''), onchange: (e) => console.log('Selected:', e.target.value) }) @@ -320,7 +319,7 @@ $mount(VariantsDemo, '#demo-variants'); Select({ label: 'Primary Select', class: 'select-primary', - options: [ + items: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, { value: 'option3', label: 'Option 3' } @@ -331,7 +330,7 @@ $mount(VariantsDemo, '#demo-variants'); Select({ label: 'Secondary Select', class: 'select-secondary', - options: [ + items: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' } ], @@ -341,7 +340,7 @@ $mount(VariantsDemo, '#demo-variants'); Select({ label: 'Ghost Select', class: 'select-ghost', - options: [ + items: [ { value: '', label: 'Select an option' }, { value: 'opt1', label: 'Option 1' }, { value: 'opt2', label: 'Option 2' } diff --git a/docs/components_old/accordion.md b/docs/components_old/accordion.md new file mode 100644 index 0000000..7ef4a85 --- /dev/null +++ b/docs/components_old/accordion.md @@ -0,0 +1,730 @@ +# Accordion + +Collapsible accordion component for organizing content into expandable sections with DaisyUI styling. + +## Tag + +`Accordion` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- | +| `title` | `string \| VNode \| Signal` | Required | Accordion section title | +| `open` | `boolean \| Signal` | `false` | Whether the accordion is expanded | +| `name` | `string` | `-` | Group name for radio-style accordions (only one open at a time) | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `VNode \| Array` | Required | Content to display when expanded | + +## Live Examples + +### Basic Accordion + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const open1 = $(false); + const open2 = $(false); + const open3 = $(false); + + return Div({ class: 'flex flex-col gap-2' }, [ + Accordion({ + title: 'Section 1', + open: open1, + onclick: () => open1(!open1()) + }, [ + Div({ class: 'p-2' }, 'Content for section 1. This is a basic accordion section.') + ]), + Accordion({ + title: 'Section 2', + open: open2, + onclick: () => open2(!open2()) + }, [ + Div({ class: 'p-2' }, 'Content for section 2. You can put any content here.') + ]), + Accordion({ + title: 'Section 3', + open: open3, + onclick: () => open3(!open3()) + }, [ + Div({ class: 'p-2' }, 'Content for section 3. Accordions are great for FAQs.') + ]) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Group Accordion (Radio Style) + +
+
+

Live Demo

+
+
+
+ +```javascript +const GroupDemo = () => { + const openSection = $('section1'); + + return Div({ class: 'flex flex-col gap-2' }, [ + Accordion({ + title: 'Section 1', + name: 'group', + open: () => openSection() === 'section1', + onclick: () => openSection('section1') + }, [ + Div({ class: 'p-2' }, 'Content for section 1. Only one section can be open at a time.') + ]), + Accordion({ + title: 'Section 2', + name: 'group', + open: () => openSection() === 'section2', + onclick: () => openSection('section2') + }, [ + Div({ class: 'p-2' }, 'Content for section 2. Opening this will close section 1.') + ]), + Accordion({ + title: 'Section 3', + name: 'group', + open: () => openSection() === 'section3', + onclick: () => openSection('section3') + }, [ + Div({ class: 'p-2' }, 'Content for section 3. This is useful for FAQ sections.') + ]) + ]); +}; +$mount(GroupDemo, '#demo-group'); +``` + +### FAQ Accordion + +
+
+

Live Demo

+
+
+
+ +```javascript +const FaqDemo = () => { + const openFaq = $('faq1'); + + const faqs = [ + { id: 'faq1', question: 'What is this component?', answer: 'This is an accordion component built with DaisyUI and Tailwind CSS for creating collapsible content sections.' }, + { id: 'faq2', question: 'How do I use it?', answer: 'Simply import the Accordion component and pass title and children props. Use the open prop to control expansion.' }, + { id: 'faq3', question: 'Can I have multiple open?', answer: 'Yes! By default, accordions can be opened independently. Use the name prop to create groups where only one can be open.' }, + { id: 'faq4', question: 'Is it accessible?', answer: 'Yes, the accordion uses proper ARIA attributes and keyboard navigation support.' } + ]; + + return Div({ class: 'flex flex-col gap-2' }, faqs.map(faq => + Accordion({ + title: faq.question, + name: 'faq-group', + open: () => openFaq() === faq.id, + onclick: () => openFaq(openFaq() === faq.id ? '' : faq.id) + }, [ + Div({ class: 'p-2 text-sm' }, faq.answer) + ]) + )); +}; +$mount(FaqDemo, '#demo-faq'); +``` + +### With Rich Content + +
+
+

Live Demo

+
+
+
+ +```javascript +const RichDemo = () => { + const open1 = $(true); + const open2 = $(false); + + return Div({ class: 'flex flex-col gap-2' }, [ + Accordion({ + title: Span({ class: 'flex items-center gap-2' }, ['📊', 'Statistics']), + open: open1, + onclick: () => open1(!open1()) + }, [ + Div({ class: 'p-2' }, [ + Div({ class: 'grid grid-cols-2 gap-4' }, [ + Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [ + Div({ class: 'stat-title' }, 'Users'), + Div({ class: 'stat-value text-lg' }, '1,234') + ]), + Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [ + Div({ class: 'stat-title' }, 'Revenue'), + Div({ class: 'stat-value text-lg' }, '$45,678') + ]), + Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [ + Div({ class: 'stat-title' }, 'Growth'), + Div({ class: 'stat-value text-lg text-success' }, '+23%') + ]), + Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [ + Div({ class: 'stat-title' }, 'Active'), + Div({ class: 'stat-value text-lg' }, '89%') + ]) + ]) + ]) + ]), + Accordion({ + title: Span({ class: 'flex items-center gap-2' }, ['👥', 'Team Members']), + open: open2, + onclick: () => open2(!open2()) + }, [ + Div({ class: 'p-2 space-y-2' }, [ + Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [ + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-primary text-primary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JD') + ]), + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, 'John Doe'), + Div({ class: 'text-sm opacity-70' }, 'Developer') + ]) + ]), + Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [ + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-secondary text-secondary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JS') + ]), + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, 'Jane Smith'), + Div({ class: 'text-sm opacity-70' }, 'Designer') + ]) + ]) + ]) + ]) + ]); +}; +$mount(RichDemo, '#demo-rich'); +``` + +### Form Accordion + +
+
+

Live Demo

+
+
+
+ +```javascript +const FormAccordion = () => { + const openStep = $('step1'); + const formData = $({ + name: '', + email: '', + address: '', + payment: 'credit' + }); + + const updateField = (field, value) => { + formData({ ...formData(), [field]: value }); + }; + + const nextStep = () => { + if (openStep() === 'step1') openStep('step2'); + else if (openStep() === 'step2') openStep('step3'); + }; + + const prevStep = () => { + if (openStep() === 'step2') openStep('step1'); + else if (openStep() === 'step3') openStep('step2'); + }; + + const handleSubmit = () => { + Toast('Form submitted!', 'alert-success', 2000); + console.log(formData()); + }; + + return Div({ class: 'flex flex-col gap-2' }, [ + Accordion({ + title: Span({ class: 'flex items-center gap-2' }, ['1️⃣', 'Personal Information']), + name: 'form-steps', + open: () => openStep() === 'step1', + onclick: () => openStep('step1') + }, [ + Div({ class: 'p-4 space-y-4' }, [ + Input({ + label: 'Full Name', + value: () => formData().name, + placeholder: 'Enter your name', + oninput: (e) => updateField('name', e.target.value) + }), + Input({ + label: 'Email', + type: 'email', + value: () => formData().email, + placeholder: 'email@example.com', + oninput: (e) => updateField('email', e.target.value) + }), + Div({ class: 'flex justify-end mt-2' }, [ + Button({ + class: 'btn btn-primary btn-sm', + onclick: nextStep, + disabled: () => !formData().name || !formData().email + }, 'Next →') + ]) + ]) + ]), + Accordion({ + title: Span({ class: 'flex items-center gap-2' }, ['2️⃣', 'Address']), + name: 'form-steps', + open: () => openStep() === 'step2', + onclick: () => openStep('step2') + }, [ + Div({ class: 'p-4 space-y-4' }, [ + Input({ + label: 'Address', + value: () => formData().address, + placeholder: 'Street address', + oninput: (e) => updateField('address', e.target.value) + }), + Div({ class: 'flex justify-between mt-2' }, [ + Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'), + Button({ + class: 'btn btn-primary btn-sm', + onclick: nextStep + }, 'Next →') + ]) + ]) + ]), + Accordion({ + title: Span({ class: 'flex items-center gap-2' }, ['3️⃣', 'Payment']), + name: 'form-steps', + open: () => openStep() === 'step3', + onclick: () => openStep('step3') + }, [ + Div({ class: 'p-4 space-y-4' }, [ + Div({ class: 'flex flex-col gap-2' }, [ + Radio({ + label: 'Credit Card', + value: () => formData().payment, + radioValue: 'credit', + onclick: () => updateField('payment', 'credit') + }), + Radio({ + label: 'PayPal', + value: () => formData().payment, + radioValue: 'paypal', + onclick: () => updateField('payment', 'paypal') + }), + Radio({ + label: 'Bank Transfer', + value: () => formData().payment, + radioValue: 'bank', + onclick: () => updateField('payment', 'bank') + }) + ]), + Div({ class: 'flex justify-between mt-2' }, [ + Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'), + Button({ class: 'btn btn-success btn-sm', onclick: handleSubmit }, 'Submit') + ]) + ]) + ]) + ]); +}; +$mount(FormAccordion, '#demo-form'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const open1 = $(true); + const open2 = $(false); + const open3 = $(false); + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'text-sm font-bold' }, 'Default Accordion'), + Div({ class: 'flex flex-col gap-2' }, [ + Accordion({ title: 'Default style', open: open1, onclick: () => open1(!open1()) }, [ + Div({ class: 'p-2' }, 'Default accordion with standard styling.') + ]) + ]), + + Div({ class: 'text-sm font-bold mt-2' }, 'Custom Styling'), + Div({ class: 'flex flex-col gap-2' }, [ + Accordion({ + title: Span({ class: 'text-primary font-bold' }, 'Primary Title'), + open: open2, + onclick: () => open2(!open2()), + class: 'bg-primary/5 border-primary/20' + }, [ + Div({ class: 'p-2' }, 'Accordion with custom styling and primary color.') + ]) + ]), + + Div({ class: 'text-sm font-bold mt-2' }, 'With Icons'), + Div({ class: 'flex flex-col gap-2' }, [ + Accordion({ + title: Span({ class: 'flex items-center gap-2' }, ['✨', 'Featured Content']), + open: open3, + onclick: () => open3(!open3()) + }, [ + Div({ class: 'p-2' }, 'Accordion with emoji icons in the title.') + ]) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/alert.md b/docs/components_old/alert.md new file mode 100644 index 0000000..ea2dded --- /dev/null +++ b/docs/components_old/alert.md @@ -0,0 +1,521 @@ +# Alert + +Alert component for displaying contextual messages, notifications, and feedback with different severity levels. Supports soft and solid variants. + +## Tag + +`Alert` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `type` | `string` | `'info'` | Alert type: 'info', 'success', 'warning', 'error' | +| `soft` | `boolean \| Signal` | `true` | Use soft variant (subtle background) | +| `actions` | `VNode \| function` | `-` | Optional action buttons or content | +| `message` | `string \| VNode \| Signal` | `-` | Alert message content | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `string \| VNode` | `-` | Alert content (alternative to `message`) | + +## Live Examples + +### Basic Alerts + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'flex flex-col gap-3' }, [ + Alert({ type: 'info', message: 'This is an informational message.' }), + Alert({ type: 'success', message: 'Operation completed successfully!' }), + Alert({ type: 'warning', message: 'Please review your input before proceeding.' }), + Alert({ type: 'error', message: 'An error occurred while processing your request.' }) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Soft vs Solid Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-col gap-3' }, [ + Alert({ type: 'info', soft: true, message: 'Soft info alert (default)' }), + Alert({ type: 'info', soft: false, message: 'Solid info alert' }), + Alert({ type: 'success', soft: true, message: 'Soft success alert' }), + Alert({ type: 'success', soft: false, message: 'Solid success alert' }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### With Actions + +
+
+

Live Demo

+
+
+
+ +```javascript +const ActionsDemo = () => { + const showUndo = $(false); + const deletedItem = $(null); + + const deleteItem = (item) => { + deletedItem(item); + showUndo(true); + setTimeout(() => { + if (showUndo()) { + showUndo(false); + Toast('Item permanently deleted', 'alert-info', 2000); + } + }, 5000); + }; + + const undoDelete = () => { + showUndo(false); + Toast(`Restored: ${deletedItem()}`, 'alert-success', 2000); + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex gap-2' }, [ + Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document A') }, 'Delete Document A'), + Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document B') }, 'Delete Document B') + ]), + () => showUndo() ? Alert({ + type: 'warning', + soft: true, + message: `Deleted: ${deletedItem()}`, + actions: Button({ + class: 'btn btn-sm btn-primary', + onclick: undoDelete + }, 'Undo') + }) : null + ]); +}; +$mount(ActionsDemo, '#demo-actions'); +``` + +### Dismissible Alert + +
+
+

Live Demo

+
+
+
+ +```javascript +const DismissibleDemo = () => { + const visible = $(true); + + return Div({ class: 'flex flex-col gap-3' }, [ + () => visible() ? Alert({ + type: 'info', + message: 'This alert can be dismissed. Click the X button to close.', + actions: Button({ + class: 'btn btn-xs btn-circle btn-ghost', + onclick: () => visible(false) + }, '✕') + }) : null, + () => !visible() ? Button({ + class: 'btn btn-sm btn-ghost', + onclick: () => visible(true) + }, 'Show Alert') : null + ]); +}; +$mount(DismissibleDemo, '#demo-dismissible'); +``` + +### Reactive Alert + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const email = $(''); + const error = $(''); + + const validateEmail = (value) => { + email(value); + if (value && !value.includes('@')) { + error('Please enter a valid email address'); + } else { + error(''); + } + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Input({ + label: 'Email Address', + placeholder: 'Enter your email', + value: email, + oninput: (e) => validateEmail(e.target.value) + }), + () => error() ? Alert({ type: 'error', message: error() }) : null, + () => email() && !error() ? Alert({ + type: 'success', + message: `Valid email: ${email()}` + }) : null + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Form Validation + +
+
+

Live Demo

+
+
+
+ +```javascript +const FormDemo = () => { + const name = $(''); + const email = $(''); + const submitted = $(false); + const errors = $({ name: '', email: '' }); + + const validate = () => { + const newErrors = { + name: name().trim() ? '' : 'Name is required', + email: email().trim() ? (email().includes('@') ? '' : 'Invalid email') : 'Email is required' + }; + errors(newErrors); + return !newErrors.name && !newErrors.email; + }; + + const handleSubmit = () => { + if (validate()) { + submitted(true); + setTimeout(() => submitted(false), 3000); + Toast('Form submitted successfully!', 'alert-success', 2000); + } + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'text-lg font-bold' }, 'Contact Form'), + Input({ + label: 'Name', + value: name, + error: () => errors().name, + oninput: (e) => { + name(e.target.value); + validate(); + } + }), + Input({ + label: 'Email', + value: email, + error: () => errors().email, + oninput: (e) => { + email(e.target.value); + validate(); + } + }), + Button({ class: 'btn btn-primary', onclick: handleSubmit }, 'Submit'), + () => submitted() ? Alert({ + type: 'success', + message: 'Thank you! We will contact you soon.' + }) : null, + () => (errors().name || errors().email) ? Alert({ + type: 'error', + message: 'Please fix the errors above before submitting.' + }) : null + ]); +}; +$mount(FormDemo, '#demo-form'); +``` + +### Icon Alerts + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + return Div({ class: 'flex flex-col gap-3' }, [ + Alert({ type: 'info', message: 'Information alert with custom icon' }), + Alert({ type: 'success', message: 'Success alert with custom icon' }), + Alert({ type: 'warning', message: 'Warning alert with custom icon' }), + Alert({ type: 'error', message: 'Error alert with custom icon' }) + ]); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### All Types + +
+
+

Live Demo

+
+
+
+ +```javascript +const AllTypesDemo = () => { + return Div({ class: 'flex flex-col gap-3' }, [ + Alert({ type: 'info', message: 'ℹ️ This is an info alert' }), + Alert({ type: 'success', message: '✅ This is a success alert' }), + Alert({ type: 'warning', message: '⚠️ This is a warning alert' }), + Alert({ type: 'error', message: '❌ This is an error alert' }) + ]); +}; +$mount(AllTypesDemo, '#demo-all'); +``` + + diff --git a/docs/components_old/autocomplete.md b/docs/components_old/autocomplete.md new file mode 100644 index 0000000..8456bb6 --- /dev/null +++ b/docs/components_old/autocomplete.md @@ -0,0 +1,376 @@ +# Autocomplete + +Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive options. + +## Tag + +`Autocomplete` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :------------------------------------------------ | :------------------ | :----------------------------------------------- | +| `label` | `string` | `-` | Label text for the input | +| `options` | `Array` | `[]` | Options to search from | +| `value` | `string \| Signal` | `''` | Selected value | +| `placeholder`| `string` | `'Search...'` | Placeholder text | +| `onSelect` | `function` | `-` | Called when an option is selected | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Autocomplete + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const selected = $(''); + const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon']; + + return Autocomplete({ + label: 'Search fruit', + options: fruits, + value: selected, + onSelect: (value) => selected(value) + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Objects + +
+
+

Live Demo

+
+
+
+ +```javascript +const ObjectsDemo = () => { + const selected = $(''); + const selectedLabel = $(''); + + const countries = [ + { value: 'mx', label: 'Mexico' }, + { value: 'us', label: 'United States' }, + { value: 'ca', label: 'Canada' }, + { value: 'br', label: 'Brazil' }, + { value: 'ar', label: 'Argentina' }, + { value: 'es', label: 'Spain' } + ]; + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Autocomplete({ + label: 'Search country', + options: countries, + value: selectedLabel, + onSelect: (item) => { + const selectedItem = typeof item === 'string' + ? countries.find(c => c.label === item) + : item; + selected(selectedItem?.value || ''); + selectedLabel(selectedItem?.label || ''); + } + }), + Div({ class: 'alert alert-success' }, [ + `Selected: ${selected()} - ${selectedLabel()}` + ]) + ]); +}; +$mount(ObjectsDemo, '#demo-objects'); +``` + +### With Reactive Display + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const selected = $(''); + + const programmingLanguages = [ + 'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin' + ]; + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Autocomplete({ + label: 'Programming language', + options: programmingLanguages, + value: selected, + onSelect: (value) => selected(value) + }), + () => selected() ? Div({ class: 'alert alert-info' }, [ + `You selected: ${selected()}` + ]) : null + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Dynamic Options + +
+
+

Live Demo

+
+
+
+ +```javascript +const DynamicDemo = () => { + const selected = $(''); + const filterType = $('all'); + + const allItems = { + fruits: ['Apple', 'Banana', 'Orange', 'Mango'], + vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'], + all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato'] + }; + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Select({ + label: 'Category', + options: [ + { value: 'all', label: 'All items' }, + { value: 'fruits', label: 'Fruits' }, + { value: 'vegetables', label: 'Vegetables' } + ], + value: filterType, + onchange: (e) => filterType(e.target.value) + }), + Autocomplete({ + label: 'Search item', + options: () => allItems[filterType()], + value: selected, + onSelect: (value) => selected(value) + }) + ]); +}; +$mount(DynamicDemo, '#demo-dynamic'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White']; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({}, [ + Autocomplete({ + label: 'Primary style', + class: 'input-primary', + options: colors, + value: $(''), + placeholder: 'Search colors...' + }) + ]), + Div({}, [ + Autocomplete({ + label: 'Secondary style', + class: 'input-secondary', + options: colors, + value: $(''), + placeholder: 'Search colors...' + }) + ]), + Div({}, [ + Autocomplete({ + label: 'Ghost style', + class: 'input-ghost', + options: colors, + value: $(''), + placeholder: 'Search colors...' + }) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + \ No newline at end of file diff --git a/docs/components_old/badge.md b/docs/components_old/badge.md new file mode 100644 index 0000000..b069bbb --- /dev/null +++ b/docs/components_old/badge.md @@ -0,0 +1,537 @@ +# Badge + +Badge component for displaying counts, labels, and status indicators with DaisyUI styling. + +## Tag + +`Badge` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) | +| `children` | `string \| VNode` | `-` | Badge content | + +## Live Examples + +### Basic Badge + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({}, 'Default'), + Badge({ class: 'badge-primary' }, 'Primary'), + Badge({ class: 'badge-secondary' }, 'Secondary'), + Badge({ class: 'badge-accent' }, 'Accent'), + Badge({ class: 'badge-info' }, 'Info'), + Badge({ class: 'badge-success' }, 'Success'), + Badge({ class: 'badge-warning' }, 'Warning'), + Badge({ class: 'badge-error' }, 'Error') + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Badge Sizes + +
+
+

Live Demo

+
+
+
+ +```javascript +const SizesDemo = () => { + return Div({ class: 'flex flex-wrap gap-2 items-center' }, [ + Badge({ class: 'badge-xs' }, 'Extra Small'), + Badge({ class: 'badge-sm' }, 'Small'), + Badge({}, 'Default'), + Badge({ class: 'badge-md' }, 'Medium'), + Badge({ class: 'badge-lg' }, 'Large') + ]); +}; +$mount(SizesDemo, '#demo-sizes'); +``` + +### Outline Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const OutlineDemo = () => { + return Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-outline' }, 'Default'), + Badge({ class: 'badge-outline badge-primary' }, 'Primary'), + Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'), + Badge({ class: 'badge-outline badge-accent' }, 'Accent'), + Badge({ class: 'badge-outline badge-info' }, 'Info'), + Badge({ class: 'badge-outline badge-success' }, 'Success'), + Badge({ class: 'badge-outline badge-warning' }, 'Warning'), + Badge({ class: 'badge-outline badge-error' }, 'Error') + ]); +}; +$mount(OutlineDemo, '#demo-outline'); +``` + +### Ghost Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const GhostDemo = () => { + return Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-ghost' }, 'Default'), + Badge({ class: 'badge-ghost badge-primary' }, 'Primary'), + Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'), + Badge({ class: 'badge-ghost badge-accent' }, 'Accent'), + Badge({ class: 'badge-ghost badge-info' }, 'Info'), + Badge({ class: 'badge-ghost badge-success' }, 'Success'), + Badge({ class: 'badge-ghost badge-warning' }, 'Warning'), + Badge({ class: 'badge-ghost badge-error' }, 'Error') + ]); +}; +$mount(GhostDemo, '#demo-ghost'); +``` + +### With Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + return Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'gap-1' }, [ + Icons.iconSuccess, + Span({}, 'Success') + ]), + Badge({ class: 'gap-1 badge-warning' }, [ + Icons.iconWarning, + Span({}, 'Warning') + ]), + Badge({ class: 'gap-1 badge-error' }, [ + Icons.iconError, + Span({}, 'Error') + ]), + Badge({ class: 'gap-1 badge-info' }, [ + Icons.iconInfo, + Span({}, 'Info') + ]), + Badge({ class: 'gap-1' }, [ + Span({}, '★'), + Span({}, '4.5') + ]) + ]); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Status Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const StatusDemo = () => { + const statuses = [ + { label: 'Active', class: 'badge-success' }, + { label: 'Pending', class: 'badge-warning' }, + { label: 'Completed', class: 'badge-info' }, + { label: 'Failed', class: 'badge-error' }, + { label: 'Archived', class: 'badge-ghost' } + ]; + + return Div({ class: 'flex flex-col gap-2' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'), + Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status => + Badge({ class: status.class }, status.label) + )) + ]); +}; +$mount(StatusDemo, '#demo-status'); +``` + +### Count Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const CountDemo = () => { + const notifications = $(3); + const messages = $(5); + const updates = $(0); + + return Div({ class: 'flex flex-wrap gap-6' }, [ + Div({ class: 'flex items-center gap-2' }, [ + Span({}, 'Notifications'), + Badge({ class: 'badge-primary' }, () => notifications()) + ]), + Div({ class: 'flex items-center gap-2' }, [ + Span({}, 'Messages'), + Badge({ class: 'badge-secondary' }, () => messages()) + ]), + Div({ class: 'flex items-center gap-2' }, [ + Span({}, 'Updates'), + Badge({ class: 'badge-ghost' }, () => updates() || '0') + ]) + ]); +}; +$mount(CountDemo, '#demo-count'); +``` + +### Interactive Badge + +
+
+

Live Demo

+
+
+
+ +```javascript +const InteractiveDemo = () => { + const count = $(0); + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Div({ class: 'flex items-center gap-4' }, [ + Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'), + Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()), + Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+') + ]), + Button({ + class: 'btn btn-ghost btn-sm', + onclick: () => count(0) + }, 'Reset') + ]); +}; +$mount(InteractiveDemo, '#demo-interactive'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-xs' }, 'XS'), + Badge({ class: 'badge-sm' }, 'SM'), + Badge({}, 'MD'), + Badge({ class: 'badge-lg' }, 'LG') + ]), + Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-primary badge-sm' }, 'Primary'), + Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'), + Badge({ class: 'badge-accent badge-sm' }, 'Accent') + ]), + Div({ class: 'flex flex-wrap gap-2' }, [ + Badge({ class: 'badge-outline badge-primary' }, 'Outline'), + Badge({ class: 'badge-ghost badge-primary' }, 'Ghost') + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Inline with Text + +
+
+

Live Demo

+
+
+
+ +```javascript +const InlineDemo = () => { + return Div({ class: 'space-y-2' }, [ + Div({ class: 'text-sm' }, [ + 'Your order is ', + Badge({ class: 'badge-success badge-sm' }, 'Confirmed'), + ' and will be shipped soon.' + ]), + Div({ class: 'text-sm' }, [ + 'This feature is ', + Badge({ class: 'badge-warning badge-sm' }, 'Beta'), + ' and may change.' + ]), + Div({ class: 'text-sm' }, [ + 'Version ', + Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'), + ' released on March 2026' + ]) + ]); +}; +$mount(InlineDemo, '#demo-inline'); +``` + + diff --git a/docs/components/button copy.md b/docs/components_old/button copy.md similarity index 100% rename from docs/components/button copy.md rename to docs/components_old/button copy.md diff --git a/docs/components_old/button.md b/docs/components_old/button.md new file mode 100644 index 0000000..7202059 --- /dev/null +++ b/docs/components_old/button.md @@ -0,0 +1,168 @@ +> # Button(props, children?: string | Signal | [...]): HTMLElement + +--- + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :------------------ | :------------------------------- | +| `class` | `string` | `''` | Additional CSS classes (daisyUI) | +| `disabled` | `boolean \| Signal` | `false` | Disabled state | +| `loading` | `boolean \| Signal` | `false` | Shows loading spinner | +| `badge` | `string \| Signal` | `-` | Badge text displayed on corner | +| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes | +| `tooltip` | `string \| Signal` | `-` | Tooltip text on hover | +| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text | +| `onclick` | `function` | `-` | Click event handler | +| `type` | `string` | `'button'` | Native button type | + +## Class Options + +For more detailed information about the underlying styling system, visit the daisyUI documentation: + +- [daisyUI Button](https://daisyui.com/components/button) + +| Class Name | Category | Description | +| :-------------- | :------------ | :------------------------------------ | +| `btn-neutral` | `Color` 🎨 | Neutral brand color | +| `btn-primary` | `Color` 🎨 | Primary brand color | +| `btn-secondary` | `Color` 🎨 | Secondary brand color | +| `btn-accent` | `Color` 🎨 | Accent brand color | +| `btn-info` | `Color` 🎨 | Informational blue color | +| `btn-success` | `Color` 🎨 | Success green color | +| `btn-warning` | `Color` 🎨 | Warning yellow color | +| `btn-error` | `Color` 🎨 | Error red color | +| `btn-xl` | `Size` 📏 | Extra large scale | +| `btn-lg` | `Size` 📏 | Large scale | +| `btn-md` | `Size` 📏 | Medium scale (Default) | +| `btn-sm` | `Size` 📏 | Small scale | +| `btn-xs` | `Size` 📏 | Extra small scale | +| `btn-outline` | `Style` ✨ | Transparent with colored border | +| `btn-dash` | `Style` ✨ | Dashed border style | +| `btn-soft` | `Style` ✨ | Low opacity background color | +| `btn-ghost` | `Style` ✨ | No background, hover effect only | +| `btn-link` | `Style` ✨ | Looks like a text link | +| `btn-square` | `Shape` 📐 | 1:1 aspect ratio | +| `btn-circle` | `Shape` 📐 | 1:1 aspect ratio with rounded corners | +| `btn-wide` | `Shape` 📐 | Extra horizontal padding | +| `btn-block` | `Shape` 📐 | Full width of container | +| `btn-active` | `Behavior` ⚙️ | Forced active/pressed state | +| `btn-disabled` | `Behavior` ⚙️ | Visual and functional disabled state | + +### Basic Button + +
+ +```javascript +const BasicDemo = () => { + return Button({ class: "btn-primary" }, "Click Me"); +}; +$mount(BasicDemo, "#demo-basic"); +``` + +### With Loading State + +
+ +```javascript +const LoadingDemo = () => { + const isSaving = $(false); + + return Button( + { + class: "btn-success", + loading: isSaving, + onclick: async () => { + isSaving(true); + await new Promise((resolve) => setTimeout(resolve, 2000)); + isSaving(false); + }, + }, + "Save Changes", + ); +}; +$mount(LoadingDemo, "#demo-loading"); +``` + +### With Badge + +
+ +```javascript +const BadgeDemo = () => { + return Button( + { + class: "btn-outline", + badge: "3", + badgeClass: "badge-accent", + }, + "Notifications", + ); +}; +$mount(BadgeDemo, "#demo-badge"); +``` + +### With Tooltip + +
+ +```javascript +const TooltipDemo = () => { + return Button( + { + class: "btn-ghost", + tooltip: "Delete item", + }, + "Delete", + ); +}; +$mount(TooltipDemo, "#demo-tooltip"); +``` + +### Disabled State + +
+ +```javascript +const DisabledDemo = () => { + const isDisabled = $(true); + + return Button( + { + class: "btn-primary btn-disabled", + }, + "Submit", + ); +}; +$mount(DisabledDemo, "#demo-disabled"); +``` + +### All Variants + +
+ +```javascript +const VariantsDemo = () => { + return Div({ class: "flex flex-wrap gap-2 justify-center" }, [ + Button({ class: "btn-primary" }, "Primary"), + Button({ class: "btn-secondary" }, "Secondary"), + Button({ class: "btn-accent" }, "Accent"), + Button({ class: "btn-ghost" }, "Ghost"), + Button({ class: "btn-outline" }, "Outline"), + ]); +}; +$mount(VariantsDemo, "#demo-variants"); +``` + +
+ +```javascript +const TestDemo = () => { + return Div({ class: "flex flex-wrap gap-2 justify-center" }, [ + $html("span", {class: "indicator"},[ + 5, + Button('Click')]) + ]); +}; +$mount(TestDemo, "#demo-test"); +``` diff --git a/docs/components_old/checkbox.md b/docs/components_old/checkbox.md new file mode 100644 index 0000000..57afef6 --- /dev/null +++ b/docs/components_old/checkbox.md @@ -0,0 +1,479 @@ +# Checkbox + +Toggle checkbox component with label, tooltip support, and reactive state management. + +## Tag + +`Checkbox` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `label` | `string` | `-` | Label text for the checkbox | +| `value` | `boolean \| Signal` | `false` | Checked state | +| `tooltip` | `string` | `-` | Tooltip text on hover | +| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox | +| `disabled` | `boolean \| Signal` | `false` | Disabled state | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `onclick` | `function` | `-` | Click event handler | + +## Live Examples + +### Basic Checkbox + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const accepted = $(false); + + return Checkbox({ + label: 'I accept the terms and conditions', + value: accepted, + onclick: () => accepted(!accepted()) + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Toggle Switch + +
+
+

Live Demo

+
+
+
+ +```javascript +const ToggleDemo = () => { + const enabled = $(false); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Checkbox({ + label: 'Enable notifications', + value: enabled, + toggle: true, + onclick: () => enabled(!enabled()) + }), + () => enabled() + ? Div({ class: 'alert alert-success' }, 'Notifications are ON') + : Div({ class: 'alert alert-soft' }, 'Notifications are OFF') + ]); +}; +$mount(ToggleDemo, '#demo-toggle'); +``` + +### With Tooltip + +
+
+

Live Demo

+
+
+
+ +```javascript +const TooltipDemo = () => { + const darkMode = $(false); + + return Checkbox({ + label: 'Dark mode', + value: darkMode, + tooltip: 'Enable dark theme preference', + onclick: () => darkMode(!darkMode()) + }); +}; +$mount(TooltipDemo, '#demo-tooltip'); +``` + +### Disabled State + +
+
+

Live Demo

+
+
+
+ +```javascript +const DisabledDemo = () => { + return Div({ class: 'flex flex-col gap-3' }, [ + Checkbox({ + label: 'Checked and disabled', + value: true, + disabled: true + }), + Checkbox({ + label: 'Unchecked and disabled', + value: false, + disabled: true + }) + ]); +}; +$mount(DisabledDemo, '#demo-disabled'); +``` + +### Reactive Multiple Selection + +
+
+

Live Demo

+
+
+
+ +```javascript +const MultipleDemo = () => { + const options = [ + { id: 1, label: 'Option 1', selected: $(false) }, + { id: 2, label: 'Option 2', selected: $(false) }, + { id: 3, label: 'Option 3', selected: $(false) } + ]; + + const selectAll = $(false); + + const toggleAll = (value) => { + selectAll(value); + options.forEach(opt => opt.selected(value)); + }; + + const updateSelectAll = () => { + const allSelected = options.every(opt => opt.selected()); + selectAll(allSelected); + }; + + return Div({ class: 'flex flex-col gap-3' }, [ + Checkbox({ + label: 'Select all', + value: selectAll, + onclick: () => toggleAll(!selectAll()) + }), + Div({ class: 'divider my-1' }), + ...options.map(opt => Checkbox({ + label: opt.label, + value: opt.selected, + onclick: () => { + opt.selected(!opt.selected()); + updateSelectAll(); + } + })), + Div({ class: 'mt-2 text-sm opacity-70' }, () => { + const count = options.filter(opt => opt.selected()).length; + return `${count} of ${options.length} selected`; + }) + ]); +}; +$mount(MultipleDemo, '#demo-multiple'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const variant1 = $(true); + const variant2 = $(false); + const variant3 = $(true); + + return Div({ class: 'flex flex-col gap-3' }, [ + Div({ class: 'flex items-center gap-4' }, [ + Checkbox({ + label: 'Primary', + value: variant1, + class: 'checkbox-primary', + onclick: () => variant1(!variant1()) + }), + Checkbox({ + label: 'Secondary', + value: variant2, + class: 'checkbox-secondary', + onclick: () => variant2(!variant2()) + }) + ]), + Div({ class: 'flex items-center gap-4' }, [ + Checkbox({ + label: 'Accent', + value: variant3, + class: 'checkbox-accent', + onclick: () => variant3(!variant3()) + }), + Checkbox({ + label: 'Toggle switch', + value: $(false), + toggle: true, + class: 'toggle-primary' + }) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Form Example + +
+
+

Live Demo

+
+
+
+ +```javascript +const FormDemo = () => { + const subscribe = $(false); + const weekly = $(false); + const monthly = $(true); + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'), + Checkbox({ + label: 'Subscribe to newsletter', + value: subscribe, + onclick: () => subscribe(!subscribe()) + }), + () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [ + Checkbox({ + label: 'Weekly updates', + value: weekly, + onclick: () => weekly(!weekly()) + }), + Checkbox({ + label: 'Monthly digest', + value: monthly, + onclick: () => monthly(!monthly()) + }) + ]) : null, + () => subscribe() && (weekly() || monthly()) + ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!') + : subscribe() + ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency') + : null + ]); +}; +$mount(FormDemo, '#demo-form'); +``` + + diff --git a/docs/components_old/colorpicker.md b/docs/components_old/colorpicker.md new file mode 100644 index 0000000..1cddb83 --- /dev/null +++ b/docs/components_old/colorpicker.md @@ -0,0 +1,382 @@ +# Colorpicker + +Color picker component with preset color palette, reactive value binding, and customizable appearance. + +## Tag + +`Colorpicker` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `label` | `string` | `-` | Label text for the button | +| `value` | `string \| Signal` | `'#000000'` | Selected color value (hex format) | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Colorpicker + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const color = $('#3b82f6'); + + return Colorpicker({ + label: 'Pick a color', + value: color + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Reactive Preview + +
+
+

Live Demo

+
+
+
+ +```javascript +const PreviewDemo = () => { + const color = $('#10b981'); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Colorpicker({ + label: 'Choose color', + value: color + }), + Div({ + class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200', + style: () => `background-color: ${color()}` + }, [ + Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color()) + ]) + ]); +}; +$mount(PreviewDemo, '#demo-preview'); +``` + +### Color Palette Grid + +
+
+

Live Demo

+
+
+
+ +```javascript +const PaletteDemo = () => { + const selectedColor = $('#ef4444'); + const presets = [ + '#ef4444', '#f97316', '#f59e0b', '#eab308', + '#84cc16', '#10b981', '#14b8a6', '#06b6d4', + '#3b82f6', '#6366f1', '#8b5cf6', '#d946ef', + '#ec489a', '#f43f5e', '#6b7280', '#1f2937' + ]; + + return Div({ class: 'flex flex-col gap-4' }, [ + Colorpicker({ + label: 'Custom color', + value: selectedColor + }), + Div({ class: 'divider text-xs' }, 'Or choose from palette'), + Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color => + Button({ + class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`, + style: `background-color: ${color}`, + onclick: () => selectedColor(color) + }) + )), + Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor()) + ]); +}; +$mount(PaletteDemo, '#demo-palette'); +``` + +### With Text Color Preview + +
+
+

Live Demo

+
+
+
+ +```javascript +const TextDemo = () => { + const bgColor = $('#1e293b'); + const textColor = $('#f8fafc'); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Div({ class: 'flex gap-4' }, [ + Colorpicker({ + label: 'Background', + value: bgColor + }), + Colorpicker({ + label: 'Text', + value: textColor + }) + ]), + Div({ + class: 'p-6 rounded-lg text-center font-bold transition-all duration-200', + style: () => `background-color: ${bgColor()}; color: ${textColor()}` + }, [ + 'Preview text with your colors' + ]) + ]); +}; +$mount(TextDemo, '#demo-text'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-wrap gap-4 items-center' }, [ + Colorpicker({ + label: 'Primary', + value: $('#3b82f6') + }), + Colorpicker({ + label: 'Success', + value: $('#10b981') + }), + Colorpicker({ + label: 'Warning', + value: $('#f59e0b') + }), + Colorpicker({ + label: 'Error', + value: $('#ef4444') + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Dynamic Color Swatch + +
+
+

Live Demo

+
+
+
+ +```javascript +const DynamicDemo = () => { + const primary = $('#3b82f6'); + const secondary = $('#ef4444'); + const accent = $('#10b981'); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Div({ class: 'flex flex-wrap gap-4' }, [ + Colorpicker({ label: 'Primary', value: primary }), + Colorpicker({ label: 'Secondary', value: secondary }), + Colorpicker({ label: 'Accent', value: accent }) + ]), + Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [ + Div({ + class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold', + style: () => `background-color: ${primary()}; color: white` + }, 'Primary'), + Div({ + class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold', + style: () => `background-color: ${secondary()}; color: white` + }, 'Secondary'), + Div({ + class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold', + style: () => `background-color: ${accent()}; color: white` + }, 'Accent') + ]) + ]); +}; +$mount(DynamicDemo, '#demo-dynamic'); +``` + + diff --git a/docs/components_old/datepicker.md b/docs/components_old/datepicker.md new file mode 100644 index 0000000..272444a --- /dev/null +++ b/docs/components_old/datepicker.md @@ -0,0 +1,339 @@ +# Datepicker + +Date and date range picker component with calendar interface, time selection, and reactive state management. + +## Tag + +`Datepicker` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :------------------------------------------------ | :----------------------- | :----------------------------------------------- | +| `label` | `string` | `-` | Label text for the input | +| `value` | `string \| {start: string, end: string} \| Signal` | `-` | Selected date or range | +| `range` | `boolean` | `false` | Enable date range selection mode | +| `hour` | `boolean` | `false` | Enable hour selection | +| `placeholder`| `string` | `'Select date...'` | Placeholder text | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Datepicker + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const date = $(''); + + return Datepicker({ + label: 'Select date', + value: date, + placeholder: 'Choose a date...' + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Date Range Picker + +
+
+

Live Demo

+
+
+
+ +```javascript +const RangeDemo = () => { + const range = $({ start: '', end: '' }); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Datepicker({ + label: 'Date range', + value: range, + range: true, + placeholder: 'Select start and end date...' + }), + () => range().start && range().end ? Div({ class: 'alert alert-success' }, [ + `Selected: ${range().start} → ${range().end}` + ]) : null + ]); +}; +$mount(RangeDemo, '#demo-range'); +``` + +### With Time Selection + +
+
+

Live Demo

+
+
+
+ +```javascript +const TimeDemo = () => { + const datetime = $(''); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Datepicker({ + label: 'Select date and time', + value: datetime, + hour: true, + placeholder: 'Choose date and time...' + }), + () => datetime() ? Div({ class: 'alert alert-info' }, [ + `Selected: ${datetime()}` + ]) : null + ]); +}; +$mount(TimeDemo, '#demo-time'); +``` + +### Range with Time + +
+
+

Live Demo

+
+
+
+ +```javascript +const RangeTimeDemo = () => { + const range = $({ start: '', end: '', startHour: 9, endHour: 17 }); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Datepicker({ + label: 'Schedule range', + value: range, + range: true, + hour: true, + placeholder: 'Select date and time range...' + }), + () => range().start && range().end ? Div({ class: 'alert alert-primary' }, [ + `From ${range().start} ${range().startHour || 9}:00 to ${range().end} ${range().endHour || 17}:00` + ]) : null + ]); +}; +$mount(RangeTimeDemo, '#demo-range-time'); +``` + +### Reactive Display + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const date = $(''); + const today = new Date().toISOString().split('T')[0]; + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Datepicker({ + label: 'Select date', + value: date, + placeholder: 'Choose a date...' + }), + Div({ class: 'stats shadow' }, [ + Div({ class: 'stat' }, [ + Div({ class: 'stat-title' }, 'Selected date'), + Div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'), + Div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '') + ]) + ]) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-col gap-4' }, [ + Datepicker({ + label: 'Single date', + value: $('2024-12-25'), + placeholder: 'Select date...' + }), + Datepicker({ + label: 'Date range', + range: true, + value: $({ start: '2024-12-01', end: '2024-12-31' }), + placeholder: 'Select range...' + }), + Datepicker({ + label: 'With time', + hour: true, + value: $('2024-12-25T14:00:00'), + placeholder: 'Select date and time...' + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/drawer.md b/docs/components_old/drawer.md new file mode 100644 index 0000000..290d329 --- /dev/null +++ b/docs/components_old/drawer.md @@ -0,0 +1,918 @@ +# Drawer + +Drawer component for creating off-canvas side panels with overlay and toggle functionality. + +## Tag + +`Drawer` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `id` | `string` | Required | Unique identifier for the drawer | +| `open` | `boolean \| Signal` | `false` | Drawer open state | +| `side` | `VNode` | Required | Content to display in the drawer panel | +| `content` | `VNode` | Required | Main page content | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Drawer + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const isOpen = $(false); + + return Drawer({ + id: 'basic-drawer', + open: isOpen, + side: Div({ class: 'p-4' }, [ + Div({ class: 'text-lg font-bold mb-4' }, 'Menu'), + Div({ class: 'flex flex-col gap-2' }, [ + Button({ class: 'btn btn-ghost justify-start' }, 'Home'), + Button({ class: 'btn btn-ghost justify-start' }, 'About'), + Button({ class: 'btn btn-ghost justify-start' }, 'Contact') + ]) + ]), + content: Div({ class: 'p-4 text-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => isOpen(true) + }, 'Open Drawer') + ]) + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Navigation Drawer + +
+
+

Live Demo

+
+
+
+ +```javascript +const NavDrawer = () => { + const isOpen = $(false); + const activePage = $('home'); + + const pages = { + home: 'Welcome to the Home Page!', + about: 'About Us - Learn more about our company', + services: 'Our Services - What we offer', + contact: 'Contact Us - Get in touch' + }; + + return Drawer({ + id: 'nav-drawer', + open: isOpen, + side: Div({ class: 'p-4 w-64' }, [ + Div({ class: 'text-xl font-bold mb-6' }, 'MyApp'), + Div({ class: 'flex flex-col gap-1' }, [ + Button({ + class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`, + onclick: () => { + activePage('home'); + isOpen(false); + } + }, '🏠 Home'), + Button({ + class: `btn btn-ghost justify-start ${activePage() === 'about' ? 'btn-active' : ''}`, + onclick: () => { + activePage('about'); + isOpen(false); + } + }, 'ℹ️ About'), + Button({ + class: `btn btn-ghost justify-start ${activePage() === 'services' ? 'btn-active' : ''}`, + onclick: () => { + activePage('services'); + isOpen(false); + } + }, '⚙️ Services'), + Button({ + class: `btn btn-ghost justify-start ${activePage() === 'contact' ? 'btn-active' : ''}`, + onclick: () => { + activePage('contact'); + isOpen(false); + } + }, '📧 Contact') + ]) + ]), + content: Div({ class: 'p-4' }, [ + Div({ class: 'flex justify-between items-center mb-4' }, [ + Button({ + class: 'btn btn-ghost btn-circle', + onclick: () => isOpen(true) + }, '☰'), + Span({ class: 'text-lg font-bold' }, 'MyApp') + ]), + Div({ class: 'card bg-base-200 shadow-lg' }, [ + Div({ class: 'card-body' }, [ + Div({ class: 'text-2xl font-bold mb-2' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)), + Div({ class: 'text-lg' }, () => pages[activePage()]) + ]) + ]) + ]) + }); +}; +$mount(NavDrawer, '#demo-nav'); +``` + +### Settings Drawer + +
+
+

Live Demo

+
+
+
+ +```javascript +const SettingsDrawer = () => { + const isOpen = $(false); + const darkMode = $(false); + const notifications = $(true); + const autoSave = $(false); + + return Drawer({ + id: 'settings-drawer', + open: isOpen, + side: Div({ class: 'p-4 w-80' }, [ + Div({ class: 'flex justify-between items-center mb-6' }, [ + Span({ class: 'text-xl font-bold' }, 'Settings'), + Button({ + class: 'btn btn-ghost btn-circle btn-sm', + onclick: () => isOpen(false) + }, '✕') + ]), + Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({}, 'Dark Mode'), + Swap({ + value: darkMode, + on: "🌙", + off: "☀️", + onclick: () => darkMode(!darkMode()) + }) + ]), + Div({ class: 'flex justify-between items-center' }, [ + Span({}, 'Notifications'), + Swap({ + value: notifications, + on: "🔔", + off: "🔕", + onclick: () => notifications(!notifications()) + }) + ]), + Div({ class: 'flex justify-between items-center' }, [ + Span({}, 'Auto Save'), + Swap({ + value: autoSave, + on: "✅", + off: "⭕", + onclick: () => autoSave(!autoSave()) + }) + ]) + ]), + Div({ class: 'divider my-4' }), + Div({ class: 'flex gap-2' }, [ + Button({ + class: 'btn btn-primary flex-1', + onclick: () => { + isOpen(false); + Toast('Settings saved!', 'alert-success', 2000); + } + }, 'Save'), + Button({ + class: 'btn btn-ghost flex-1', + onclick: () => isOpen(false) + }, 'Cancel') + ]) + ]), + content: Div({ class: 'p-4' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'text-lg font-bold' }, 'Dashboard'), + Button({ + class: 'btn btn-ghost btn-circle', + onclick: () => isOpen(true) + }, '⚙️') + ]), + Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [ + Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [ + Div({ class: 'stat-title' }, 'Users'), + Div({ class: 'stat-value' }, '1,234') + ]), + Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [ + Div({ class: 'stat-title' }, 'Revenue'), + Div({ class: 'stat-value' }, '$45K') + ]) + ]) + ]) + }); +}; +$mount(SettingsDrawer, '#demo-settings'); +``` + +### Cart Drawer + +
+
+

Live Demo

+
+
+
+ +```javascript +const CartDrawer = () => { + const isOpen = $(false); + const cart = $([ + { id: 1, name: 'Product 1', price: 29, quantity: 2 }, + { id: 2, name: 'Product 2', price: 49, quantity: 1 } + ]); + + const updateQuantity = (id, delta) => { + cart(cart().map(item => { + if (item.id === id) { + const newQty = Math.max(0, item.quantity + delta); + return newQty === 0 ? null : { ...item, quantity: newQty }; + } + return item; + }).filter(Boolean)); + }; + + const total = () => cart().reduce((sum, item) => sum + (item.price * item.quantity), 0); + + return Drawer({ + id: 'cart-drawer', + open: isOpen, + side: Div({ class: 'flex flex-col h-full' }, [ + Div({ class: 'p-4 border-b border-base-300' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'text-xl font-bold' }, `Cart (${cart().length} items)`), + Button({ + class: 'btn btn-ghost btn-circle btn-sm', + onclick: () => isOpen(false) + }, '✕') + ]) + ]), + Div({ class: 'flex-1 overflow-y-auto p-4' }, cart().length === 0 + ? Div({ class: 'text-center text-gray-500 mt-8' }, 'Your cart is empty') + : Div({ class: 'flex flex-col gap-3' }, cart().map(item => + Div({ class: 'flex gap-3 items-center p-2 bg-base-200 rounded-lg' }, [ + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, item.name), + Div({ class: 'text-sm' }, `$${item.price} each`) + ]), + Div({ class: 'flex items-center gap-2' }, [ + Button({ + class: 'btn btn-xs btn-circle', + onclick: () => updateQuantity(item.id, -1) + }, '-'), + Span({ class: 'w-8 text-center' }, item.quantity), + Button({ + class: 'btn btn-xs btn-circle', + onclick: () => updateQuantity(item.id, 1) + }, '+') + ]), + Span({ class: 'font-bold w-16 text-right' }, `$${item.price * item.quantity}`) + ]) + )) + ), + Div({ class: 'p-4 border-t border-base-300' }, [ + Div({ class: 'flex justify-between items-center mb-4' }, [ + Span({ class: 'font-bold' }, 'Total'), + Span({ class: 'text-xl font-bold' }, () => `$${total()}`) + ]), + Button({ + class: 'btn btn-primary w-full', + onclick: () => { + isOpen(false); + Toast('Checkout initiated!', 'alert-success', 2000); + }, + disabled: () => cart().length === 0 + }, 'Checkout') + ]) + ]), + content: Div({ class: 'p-4' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'text-lg font-bold' }, 'Store'), + Button({ + class: 'btn btn-primary', + onclick: () => isOpen(true) + }, () => `🛒 Cart (${cart().length})`) + ]), + Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [ + Button({ + class: 'btn btn-outline h-32 flex flex-col', + onclick: () => { + cart([...cart(), { id: Date.now(), name: 'New Product', price: 39, quantity: 1 }]); + Toast('Added to cart!', 'alert-success', 1500); + } + }, ['📦', 'Add to Cart']) + ]) + ]) + }); +}; +$mount(CartDrawer, '#demo-cart'); +``` + +### Responsive Drawer + +
+
+

Live Demo

+
+
+
+ +```javascript +const ResponsiveDrawer = () => { + const isOpen = $(false); + const activePage = $('home'); + + const MenuItems = () => Div({ class: 'flex flex-col gap-1 p-4' }, [ + Button({ + class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`, + onclick: () => { + activePage('home'); + if (window.innerWidth < 1024) isOpen(false); + } + }, '🏠 Home'), + Button({ + class: `btn btn-ghost justify-start ${activePage() === 'analytics' ? 'btn-active' : ''}`, + onclick: () => { + activePage('analytics'); + if (window.innerWidth < 1024) isOpen(false); + } + }, '📊 Analytics'), + Button({ + class: `btn btn-ghost justify-start ${activePage() === 'settings' ? 'btn-active' : ''}`, + onclick: () => { + activePage('settings'); + if (window.innerWidth < 1024) isOpen(false); + } + }, '⚙️ Settings') + ]); + + return Drawer({ + id: 'responsive-drawer', + open: isOpen, + side: Div({ class: 'w-64' }, [ + Div({ class: 'text-xl font-bold p-4 border-b border-base-300' }, 'Menu'), + MenuItems() + ]), + content: Div({ class: 'flex' }, [ + Div({ class: 'hidden lg:block w-64 border-r border-base-300' }, [MenuItems()]), + Div({ class: 'flex-1 p-4' }, [ + Div({ class: 'flex justify-between items-center lg:hidden mb-4' }, [ + Button({ + class: 'btn btn-ghost btn-circle', + onclick: () => isOpen(true) + }, '☰'), + Span({ class: 'text-lg font-bold' }, 'MyApp') + ]), + Div({ class: 'card bg-base-200' }, [ + Div({ class: 'card-body' }, [ + Div({ class: 'text-2xl font-bold' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)), + Div({}, 'Content area. On desktop, the menu is always visible on the left.') + ]) + ]) + ]) + ]) + }); +}; +$mount(ResponsiveDrawer, '#demo-responsive'); +``` + +### Form Drawer + +
+
+

Live Demo

+
+
+
+ +```javascript +const FormDrawer = () => { + const isOpen = $(false); + const name = $(''); + const email = $(''); + const message = $(''); + + const handleSubmit = () => { + if (name() && email() && message()) { + Toast('Message sent!', 'alert-success', 2000); + isOpen(false); + name(''); + email(''); + message(''); + } else { + Toast('Please fill all fields', 'alert-warning', 2000); + } + }; + + return Drawer({ + id: 'form-drawer', + open: isOpen, + side: Div({ class: 'p-4 w-96' }, [ + Div({ class: 'flex justify-between items-center mb-4' }, [ + Span({ class: 'text-xl font-bold' }, 'Contact Us'), + Button({ + class: 'btn btn-ghost btn-circle btn-sm', + onclick: () => isOpen(false) + }, '✕') + ]), + Div({ class: 'flex flex-col gap-4' }, [ + Input({ + label: 'Name', + value: name, + placeholder: 'Your name', + oninput: (e) => name(e.target.value) + }), + Input({ + label: 'Email', + type: 'email', + value: email, + placeholder: 'your@email.com', + oninput: (e) => email(e.target.value) + }), + Div({ class: 'form-control' }, [ + Span({ class: 'label-text mb-1' }, 'Message'), + $html('textarea', { + class: 'textarea textarea-bordered h-24', + placeholder: 'Your message', + value: message, + oninput: (e) => message(e.target.value) + }) + ]), + Div({ class: 'flex gap-2 mt-2' }, [ + Button({ + class: 'btn btn-primary flex-1', + onclick: handleSubmit + }, 'Send'), + Button({ + class: 'btn btn-ghost flex-1', + onclick: () => isOpen(false) + }, 'Cancel') + ]) + ]) + ]), + content: Div({ class: 'p-4 text-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => isOpen(true) + }, 'Contact Us') + ]) + }); +}; +$mount(FormDrawer, '#demo-form'); +``` + + diff --git a/docs/components_old/dropdown.md b/docs/components_old/dropdown.md new file mode 100644 index 0000000..ea00098 --- /dev/null +++ b/docs/components_old/dropdown.md @@ -0,0 +1,489 @@ +# Dropdown + +Dropdown component for creating menus, selectors, and action panels that appear when triggered. Supports both array-based items and custom content. + +## Tag + +`Dropdown` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- | +| `label` | `string \| VNode \| Signal` | `-` | Button label or content | +| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed next to label | +| `items` | `Array \| Signal` | `-` | Array of menu items (alternative to children) | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `VNode \| function` | `-` | Custom dropdown content (alternative to items) | + +### MenuItem Structure (when using `items`) + +| Property | Type | Description | +| :---------- | :--------------------------- | :----------------------------------------------- | +| `label` | `string \| VNode` | Menu item text | +| `icon` | `string \| VNode` | Optional icon for the menu item | +| `onclick` | `function` | Click handler | +| `class` | `string` | Additional CSS classes for the menu item | + +## Live Examples + +### Basic Dropdown (Items Array) + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Dropdown({ + label: 'Options', + items: [ + { label: 'Profile', onclick: () => Toast('Profile clicked', 'alert-info', 2000) }, + { label: 'Settings', onclick: () => Toast('Settings clicked', 'alert-info', 2000) }, + { label: 'Logout', onclick: () => Toast('Logged out', 'alert-warning', 2000), class: 'text-error' } + ] + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Icons (Items Array) + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + return Dropdown({ + label: 'Menu', + icon: '☰', + items: [ + { icon: '👤', label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) }, + { icon: '⭐', label: 'Favorites', onclick: () => Toast('Favorites', 'alert-info', 2000) }, + { icon: '📁', label: 'Documents', onclick: () => Toast('Documents', 'alert-info', 2000) }, + { icon: '⚙️', label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) } + ] + }); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Action Dropdown (Items Array) + +
+
+

Live Demo

+
+
+
+ +```javascript +const ActionsDemo = () => { + const handleAction = (action) => { + Toast(`${action} action`, 'alert-info', 2000); + }; + + return Dropdown({ + label: 'Actions', + class: 'dropdown-end', + items: [ + { icon: '✏️', label: 'Edit', onclick: () => handleAction('Edit') }, + { icon: '📋', label: 'Copy', onclick: () => handleAction('Copy') }, + { icon: '🗑️', label: 'Delete', onclick: () => handleAction('Delete'), class: 'text-error' } + ] + }); +}; +$mount(ActionsDemo, '#demo-actions'); +``` + +### User Dropdown (Items Array) + +
+
+

Live Demo

+
+
+
+ +```javascript +const UserDropdown = () => { + return Dropdown({ + label: Span({ class: 'flex items-center gap-2' }, [ + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center text-sm' }, 'JD') + ]), + 'John Doe' + ]), + class: 'dropdown-end', + items: [ + { label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) }, + { label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) }, + { label: 'Sign Out', onclick: () => Toast('Signed out', 'alert-warning', 2000), class: 'text-error' } + ] + }); +}; +$mount(UserDropdown, '#demo-user'); +``` + +### Reactive Items + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDropdown = () => { + const count = $(0); + + const items = () => [ + { label: `Count: ${count()}`, onclick: () => {} }, + { label: 'Increment', onclick: () => count(count() + 1) }, + { label: 'Decrement', onclick: () => count(count() - 1) }, + { label: 'Reset', onclick: () => count(0) } + ]; + + return Dropdown({ + label: () => `Counter (${count()})`, + items: items + }); +}; +$mount(ReactiveDropdown, '#demo-reactive'); +``` + +### Notification Dropdown (Custom Children) + +
+
+

Live Demo

+
+
+
+ +```javascript +const NotificationsDropdown = () => { + const notifications = $([ + { id: 1, title: 'New message', time: '5 min ago', read: false }, + { id: 2, title: 'Update available', time: '1 hour ago', read: false }, + { id: 3, title: 'Task completed', time: '2 hours ago', read: true } + ]); + + const markAsRead = (id) => { + notifications(notifications().map(n => + n.id === id ? { ...n, read: true } : n + )); + }; + + const unreadCount = () => notifications().filter(n => !n.read).length; + + return Dropdown({ + label: Span({ class: 'relative' }, [ + '🔔', + () => unreadCount() > 0 ? Span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null + ]), + class: 'dropdown-end', + children: () => Div({ class: 'w-80' }, [ + Div({ class: 'p-3 border-b border-base-300 font-bold' }, `Notifications (${unreadCount()} unread)`), + Div({ class: 'max-h-64 overflow-y-auto' }, notifications().map(notif => + Div({ + class: `p-3 border-b border-base-300 cursor-pointer hover:bg-base-200 ${!notif.read ? 'bg-primary/5' : ''}`, + onclick: () => markAsRead(notif.id) + }, [ + Div({ class: 'font-medium' }, notif.title), + Div({ class: 'text-xs opacity-60' }, notif.time), + !notif.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New') + ]) + )), + Div({ class: 'p-2 text-center' }, [ + Button({ + class: 'btn btn-xs btn-ghost w-full', + onclick: () => notifications([]) + }, 'Clear all') + ]) + ]) + }); +}; +$mount(NotificationsDropdown, '#demo-notifications'); +``` + +### Custom Content Dropdown + +
+
+

Live Demo

+
+
+
+ +```javascript +const CustomDropdown = () => { + const selected = $('Option 1'); + + return Dropdown({ + label: () => selected(), + children: () => Div({ class: 'p-4 min-w-48' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Select an option'), + Div({ class: 'flex flex-col gap-1' }, [ + Button({ + class: 'btn btn-ghost btn-sm justify-start', + onclick: () => selected('Option 1') + }, 'Option 1'), + Button({ + class: 'btn btn-ghost btn-sm justify-start', + onclick: () => selected('Option 2') + }, 'Option 2'), + Button({ + class: 'btn btn-ghost btn-sm justify-start', + onclick: () => selected('Option 3') + }, 'Option 3') + ]) + ]) + }); +}; +$mount(CustomDropdown, '#demo-custom'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const commonItems = [ + { label: 'Item 1', onclick: () => Toast('Item 1', 'alert-info', 2000) }, + { label: 'Item 2', onclick: () => Toast('Item 2', 'alert-info', 2000) }, + { label: 'Item 3', onclick: () => Toast('Item 3', 'alert-info', 2000) } + ]; + + return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [ + Dropdown({ label: 'Default', items: commonItems }), + Dropdown({ label: 'With Icon', icon: '☰', items: commonItems }), + Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + \ No newline at end of file diff --git a/docs/components_old/fab.md b/docs/components_old/fab.md new file mode 100644 index 0000000..c34e631 --- /dev/null +++ b/docs/components_old/fab.md @@ -0,0 +1,688 @@ +# Fab + +Floating Action Button (FAB) component for primary actions with expandable menu options. Each example uses a container with `position: relative` and explicit height to position the FAB correctly. + +## Tag + +`Fab` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- | +| `icon` | `string \| VNode \| Signal` | `-` | Main FAB icon | +| `label` | `string \| VNode \| Signal` | `-` | Text label for main button | +| `actions` | `Array \| Signal` | `[]` | Array of action buttons that expand from FAB | +| `position` | `string` | `'bottom-6 right-6'` | CSS position classes (e.g., 'bottom-6 left-6') | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +### Action Structure + +| Property | Type | Description | +| :---------- | :--------------------------- | :----------------------------------------------- | +| `label` | `string \| VNode` | Label text shown next to action button | +| `icon` | `string \| VNode` | Icon for the action button | +| `onclick` | `function` | Click handler | +| `class` | `string` | Additional CSS classes for the action button | + +## Live Examples + +### Basic FAB + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Fab({ + icon: '➕', + actions: [ + { icon: '📝', label: 'New Note', onclick: () => Toast('Create note', 'alert-info', 2000) }, + { icon: '📷', label: 'Take Photo', onclick: () => Toast('Open camera', 'alert-info', 2000) }, + { icon: '📎', label: 'Attach File', onclick: () => Toast('Attach file', 'alert-info', 2000) } + ] + }) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Label + +
+
+

Live Demo

+
+
+
+ +```javascript +const LabelDemo = () => { + return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Fab({ + label: 'Create', + icon: '✨', + actions: [ + { icon: '📝', label: 'Document', onclick: () => Toast('New document', 'alert-success', 2000) }, + { icon: '🎨', label: 'Design', onclick: () => Toast('New design', 'alert-success', 2000) }, + { icon: '📊', label: 'Spreadsheet', onclick: () => Toast('New spreadsheet', 'alert-success', 2000) } + ] + }) + ]); +}; +$mount(LabelDemo, '#demo-label'); +``` + +### Different Positions + +
+
+

Live Demo

+
+
+
+ +```javascript +const PositionsDemo = () => { + const position = $('bottom-6 right-6'); + + return Div({ class: 'relative h-[500px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [ + Select({ + value: position, + options: [ + { value: 'bottom-6 right-6', label: 'Bottom Right' }, + { value: 'bottom-6 left-6', label: 'Bottom Left' }, + { value: 'top-6 right-6', label: 'Top Right' }, + { value: 'top-6 left-6', label: 'Top Left' } + ], + onchange: (e) => position(e.target.value) + }) + ]), + Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [ + 'FAB position changes relative to this container' + ]), + Fab({ + position: () => position(), + icon: '🧭', + actions: [ + { icon: '⬅️', label: 'Bottom Left', onclick: () => position('bottom-6 left-6') }, + { icon: '➡️', label: 'Bottom Right', onclick: () => position('bottom-6 right-6') }, + { icon: '⬆️', label: 'Top Right', onclick: () => position('top-6 right-6') }, + { icon: '⬇️', label: 'Top Left', onclick: () => position('top-6 left-6') } + ] + }) + ]); +}; +$mount(PositionsDemo, '#demo-positions'); +``` + +### Color Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const ColorsDemo = () => { + const variant = $('primary'); + + const variants = { + primary: { class: 'btn-primary', icon: '🔵' }, + secondary: { class: 'btn-secondary', icon: '🟣' }, + accent: { class: 'btn-accent', icon: '🔴' }, + info: { class: 'btn-info', icon: '🔷' }, + success: { class: 'btn-success', icon: '🟢' }, + warning: { class: 'btn-warning', icon: '🟡' }, + error: { class: 'btn-error', icon: '🔴' } + }; + + return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [ + Select({ + value: variant, + options: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })), + onchange: (e) => variant(e.target.value) + }) + ]), + Fab({ + class: variants[variant()].class, + icon: variants[variant()].icon, + actions: [ + { icon: '📝', label: 'Action 1', onclick: () => Toast('Action 1', 'alert-info', 2000) }, + { icon: '🎨', label: 'Action 2', onclick: () => Toast('Action 2', 'alert-info', 2000) }, + { icon: '⚙️', label: 'Action 3', onclick: () => Toast('Action 3', 'alert-info', 2000) } + ] + }) + ]); +}; +$mount(ColorsDemo, '#demo-colors'); +``` + +### Reactive Actions + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveActions = () => { + const count = $(0); + + const actions = () => [ + { + icon: '🔢', + label: `Count: ${count()}`, + onclick: () => {} + }, + { + icon: '➕', + label: 'Increment', + onclick: () => count(count() + 1) + }, + { + icon: '➖', + label: 'Decrement', + onclick: () => count(count() - 1) + }, + { + icon: '🔄', + label: 'Reset', + onclick: () => count(0) + } + ]; + + return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Fab({ + icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️', + actions: actions + }) + ]); +}; +$mount(ReactiveActions, '#demo-reactive'); +``` + +### Document Actions + +
+
+

Live Demo

+
+
+
+ +```javascript +const DocumentActions = () => { + const saved = $(false); + + const handleSave = () => { + saved(true); + Toast('Document saved!', 'alert-success', 2000); + setTimeout(() => saved(false), 3000); + }; + + return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [ + Div({ class: 'text-6xl mb-4' }, '📄'), + Div({ class: 'text-sm opacity-70' }, 'Untitled Document'), + () => saved() ? Div({ class: 'mt-4' }, Alert({ type: 'success', message: '✓ Saved successfully' })) : null + ]), + Fab({ + icon: '✏️', + actions: [ + { icon: '💾', label: 'Save', onclick: handleSave }, + { icon: '📋', label: 'Copy', onclick: () => Toast('Copied!', 'alert-info', 2000) }, + { icon: '✂️', label: 'Cut', onclick: () => Toast('Cut!', 'alert-info', 2000) }, + { icon: '📎', label: 'Share', onclick: () => Toast('Share dialog', 'alert-info', 2000) } + ] + }) + ]); +}; +$mount(DocumentActions, '#demo-document'); +``` + +### Messaging FAB + +
+
+

Live Demo

+
+
+
+ +```javascript +const MessagingFAB = () => { + const unread = $(3); + + return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [ + Div({ class: 'text-6xl mb-4' }, '💬'), + Div({ class: 'text-sm opacity-70' }, 'Messages'), + () => unread() > 0 ? Div({ class: 'badge badge-error mt-2' }, `${unread()} unread`) : null + ]), + Fab({ + icon: () => `💬${unread() > 0 ? ` ${unread()}` : ''}`, + class: 'btn-primary', + actions: [ + { + icon: '👤', + label: 'New Message', + onclick: () => Toast('Start new conversation', 'alert-info', 2000) + }, + { + icon: '👥', + label: 'Group Chat', + onclick: () => Toast('Create group', 'alert-info', 2000) + }, + { + icon: '📞', + label: 'Voice Call', + onclick: () => Toast('Start call', 'alert-info', 2000) + }, + { + icon: '📹', + label: 'Video Call', + onclick: () => Toast('Start video call', 'alert-info', 2000) + }, + { + icon: '🔔', + label: () => `Mark as read (${unread()})`, + onclick: () => { + unread(0); + Toast('All messages read', 'alert-success', 2000); + } + } + ] + }) + ]); +}; +$mount(MessagingFAB, '#demo-messaging'); +``` + +### Flower Style FAB + +
+
+

Live Demo

+
+
+
+ +```javascript +const FlowerDemo = () => { + return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50' }, [ + 'Flower style FAB (quarter circle arrangement)' + ]), + Fab({ + icon: '🌸', + class: 'fab-flower', + actions: [ + { icon: '📷', label: 'Camera', onclick: () => Toast('Camera', 'alert-info', 2000) }, + { icon: '🎨', label: 'Gallery', onclick: () => Toast('Gallery', 'alert-info', 2000) }, + { icon: '🎤', label: 'Voice', onclick: () => Toast('Voice', 'alert-info', 2000) }, + { icon: '📍', label: 'Location', onclick: () => Toast('Location', 'alert-info', 2000) } + ] + }) + ]); +}; +$mount(FlowerDemo, '#demo-flower'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const actions = [ + { icon: '⭐', label: 'Favorite', onclick: () => Toast('Favorited', 'alert-info', 2000) }, + { icon: '🔔', label: 'Remind', onclick: () => Toast('Reminder set', 'alert-info', 2000) }, + { icon: '📅', label: 'Schedule', onclick: () => Toast('Scheduled', 'alert-info', 2000) } + ]; + + return Div({ class: 'relative h-[400px] w-full bg-base-100 rounded-lg overflow-hidden' }, [ + Div({ class: 'grid grid-cols-2 gap-4 p-4 h-full' }, [ + Div({ class: 'relative border rounded-lg bg-base-200' }, [ + Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Primary'), + Fab({ icon: '🔵', class: 'btn-primary', actions, position: 'bottom-6 left-6' }) + ]), + Div({ class: 'relative border rounded-lg bg-base-200' }, [ + Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Secondary'), + Fab({ icon: '🟣', class: 'btn-secondary', actions, position: 'bottom-6 right-6' }) + ]), + Div({ class: 'relative border rounded-lg bg-base-200' }, [ + Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Accent'), + Fab({ icon: '🔴', class: 'btn-accent', actions, position: 'top-6 left-6' }) + ]), + Div({ class: 'relative border rounded-lg bg-base-200' }, [ + Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Success'), + Fab({ icon: '🟢', class: 'btn-success', actions, position: 'top-6 right-6' }) + ]) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/fieldset.md b/docs/components_old/fieldset.md new file mode 100644 index 0000000..0714f98 --- /dev/null +++ b/docs/components_old/fieldset.md @@ -0,0 +1,549 @@ +# Fieldset + +Fieldset component for grouping form fields with optional legend and consistent styling. + +## Tag + +`Fieldset` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `legend` | `string \| VNode \| Signal` | `-` | Fieldset legend/title | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `VNode \| Array` | Required | Form fields or content inside the fieldset | + +## Live Examples + +### Basic Fieldset + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Fieldset({ + legend: 'User Information', + class: 'w-full max-w-md mx-auto' + }, [ + Div({ class: 'space-y-4' }, [ + Input({ label: 'Full Name', placeholder: 'Enter your name' }), + Input({ label: 'Email', type: 'email', placeholder: 'user@example.com' }), + Input({ label: 'Phone', type: 'tel', placeholder: '+1 234 567 890' }) + ]) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Reactive Legend + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const name = $(''); + const email = $(''); + const isValid = () => name().length > 0 && email().includes('@'); + + return Fieldset({ + legend: () => isValid() ? '✓ Valid Form' : '✗ Incomplete Form', + class: 'w-full max-w-md mx-auto' + }, [ + Div({ class: 'space-y-4' }, [ + Input({ + label: 'Full Name', + value: name, + oninput: (e) => name(e.target.value), + placeholder: 'Enter your name' + }), + Input({ + label: 'Email', + type: 'email', + value: email, + oninput: (e) => email(e.target.value), + placeholder: 'user@example.com' + }), + () => isValid() + ? Alert({ type: 'success', message: 'Form is ready to submit' }) + : Alert({ type: 'warning', message: 'Please fill all required fields' }) + ]) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Address Form + +
+
+

Live Demo

+
+
+
+ +```javascript +const AddressDemo = () => { + const address = $(''); + const city = $(''); + const zip = $(''); + const country = $('us'); + + return Fieldset({ + legend: Span({ class: 'flex items-center gap-2' }, ['📍', 'Shipping Address']), + class: 'w-full max-w-md mx-auto' + }, [ + Div({ class: 'space-y-4' }, [ + Input({ label: 'Street Address', value: address, placeholder: '123 Main St', oninput: (e) => address(e.target.value) }), + Div({ class: 'grid grid-cols-2 gap-4' }, [ + Input({ label: 'City', value: city, placeholder: 'City', oninput: (e) => city(e.target.value) }), + Input({ label: 'ZIP Code', value: zip, placeholder: 'ZIP', oninput: (e) => zip(e.target.value) }) + ]), + Select({ + label: 'Country', + value: country, + options: [ + { value: 'us', label: 'United States' }, + { value: 'ca', label: 'Canada' }, + { value: 'mx', label: 'Mexico' } + ], + onchange: (e) => country(e.target.value) + }) + ]) + ]); +}; +$mount(AddressDemo, '#demo-address'); +``` + +### Payment Method + +
+
+

Live Demo

+
+
+
+ +```javascript +const PaymentDemo = () => { + const method = $('credit'); + const cardNumber = $(''); + const expiry = $(''); + const cvv = $(''); + + return Fieldset({ + legend: Span({ class: 'flex items-center gap-2' }, ['💳', 'Payment Details']), + class: 'w-full max-w-md mx-auto' + }, [ + Div({ class: 'space-y-4' }, [ + Div({ class: 'flex gap-4' }, [ + Radio({ label: 'Credit Card', value: method, radioValue: 'credit', onclick: () => method('credit') }), + Radio({ label: 'PayPal', value: method, radioValue: 'paypal', onclick: () => method('paypal') }), + Radio({ label: 'Bank Transfer', value: method, radioValue: 'bank', onclick: () => method('bank') }) + ]), + () => method() === 'credit' ? Div({ class: 'space-y-4' }, [ + Input({ label: 'Card Number', value: cardNumber, placeholder: '1234 5678 9012 3456', oninput: (e) => cardNumber(e.target.value) }), + Div({ class: 'grid grid-cols-2 gap-4' }, [ + Input({ label: 'Expiry Date', value: expiry, placeholder: 'MM/YY', oninput: (e) => expiry(e.target.value) }), + Input({ label: 'CVV', type: 'password', value: cvv, placeholder: '123', oninput: (e) => cvv(e.target.value) }) + ]) + ]) : null, + () => method() === 'paypal' ? Alert({ type: 'info', message: 'You will be redirected to PayPal after confirming.' }) : null, + () => method() === 'bank' ? Alert({ type: 'warning', message: 'Bank transfer details will be sent via email.' }) : null + ]) + ]); +}; +$mount(PaymentDemo, '#demo-payment'); +``` + +### Preferences Panel + +
+
+

Live Demo

+
+
+
+ +```javascript +const PreferencesDemo = () => { + const theme = $('light'); + const language = $('en'); + const notifications = $(true); + + return Fieldset({ + legend: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Preferences']), + class: 'w-full max-w-md mx-auto' + }, [ + Div({ class: 'space-y-4' }, [ + Div({ class: 'form-control' }, [ + Span({ class: 'label-text mb-2' }, 'Theme'), + Div({ class: 'flex gap-4' }, [ + Radio({ label: 'Light', value: theme, radioValue: 'light', onclick: () => theme('light') }), + Radio({ label: 'Dark', value: theme, radioValue: 'dark', onclick: () => theme('dark') }), + Radio({ label: 'System', value: theme, radioValue: 'system', onclick: () => theme('system') }) + ]) + ]), + Select({ + label: 'Language', + value: language, + options: [ + { value: 'en', label: 'English' }, + { value: 'es', label: 'Español' }, + { value: 'fr', label: 'Français' } + ], + onchange: (e) => language(e.target.value) + }), + Checkbox({ + label: 'Enable notifications', + value: notifications, + onclick: () => notifications(!notifications()) + }) + ]) + ]); +}; +$mount(PreferencesDemo, '#demo-preferences'); +``` + +### Registration Form + +
+
+

Live Demo

+
+
+
+ +```javascript +const RegistrationDemo = () => { + const username = $(''); + const email = $(''); + const password = $(''); + const confirmPassword = $(''); + const accepted = $(false); + + const passwordsMatch = () => password() === confirmPassword(); + const isFormValid = () => username() && email().includes('@') && password().length >= 6 && passwordsMatch() && accepted(); + + const handleSubmit = () => { + if (isFormValid()) { + Toast('Registration successful!', 'alert-success', 2000); + } + }; + + return Fieldset({ + legend: Span({ class: 'flex items-center gap-2' }, ['📝', 'Create Account']), + class: 'w-full max-w-md mx-auto' + }, [ + Div({ class: 'space-y-4' }, [ + Input({ label: 'Username', value: username, placeholder: 'Choose a username', oninput: (e) => username(e.target.value) }), + Input({ label: 'Email', type: 'email', value: email, placeholder: 'your@email.com', oninput: (e) => email(e.target.value) }), + Input({ label: 'Password', type: 'password', value: password, placeholder: 'Min. 6 characters', oninput: (e) => password(e.target.value) }), + Input({ + label: 'Confirm Password', + type: 'password', + value: confirmPassword, + error: () => confirmPassword() && !passwordsMatch() ? 'Passwords do not match' : '', + oninput: (e) => confirmPassword(e.target.value) + }), + Checkbox({ + label: 'I accept the Terms and Conditions', + value: accepted, + onclick: () => accepted(!accepted()) + }), + () => !isFormValid() && (username() || email() || password()) ? Alert({ type: 'warning', message: 'Please complete all fields correctly' }) : null, + Button({ + class: 'btn btn-primary w-full', + onclick: handleSubmit, + disabled: () => !isFormValid() + }, 'Register') + ]) + ]); +}; +$mount(RegistrationDemo, '#demo-registration'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const commonContent = Div({ class: 'space-y-4' }, [ + Input({ label: 'Field 1', placeholder: 'Enter value' }), + Input({ label: 'Field 2', placeholder: 'Enter value' }), + Button({ class: 'btn btn-primary' }, 'Submit') + ]); + + return Div({ class: 'flex flex-col gap-4' }, [ + Fieldset({ legend: 'Default Fieldset', class: 'w-full' }, [commonContent]), + Fieldset({ legend: 'With Shadow', class: 'w-full shadow-lg' }, [commonContent]), + Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/indicator.md b/docs/components_old/indicator.md new file mode 100644 index 0000000..6fc95fd --- /dev/null +++ b/docs/components_old/indicator.md @@ -0,0 +1,556 @@ +# Indicator + +Indicator component for adding badges, status markers, or notifications to elements. Perfect for showing counts, online status, or alerts. + +## Tag + +`Indicator` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `badge` | `string \| VNode \| Signal` | `-` | Content to display as indicator | +| `badgeClass` | `string` | `''` | Additional CSS classes for the badge | +| `class` | `string` | `''` | Additional CSS classes for the container | +| `children` | `VNode` | `-` | Element to attach the indicator to | + +## Live Examples + +### Basic Indicator + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ + Indicator({ badge: '3', badgeClass: 'badge-primary' }, [ + Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦') + ]), + Indicator({ badge: '99+', badgeClass: 'badge-secondary' }, [ + Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔') + ]), + Indicator({ badge: 'New', badgeClass: 'badge-accent' }, [ + Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨') + ]) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Online Status Indicator + +
+
+

Live Demo

+
+
+
+ +```javascript +const StatusDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ + Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [ + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JD') + ]) + ]), + Indicator({ badge: '●', badgeClass: 'badge-warning badge-xs' }, [ + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JS') + ]) + ]), + Indicator({ badge: '●', badgeClass: 'badge-error badge-xs' }, [ + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC') + ]) + ]) + ]); +}; +$mount(StatusDemo, '#demo-status'); +``` + +### Reactive Counter + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const count = $(0); + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Indicator({ + badge: () => count() > 0 ? count() : null, + badgeClass: 'badge-primary' + }, [ + Button({ + class: 'btn btn-lg btn-primary', + onclick: () => count(count() + 1) + }, 'Notifications') + ]), + Div({ class: 'flex gap-2' }, [ + Button({ + class: 'btn btn-sm', + onclick: () => count(Math.max(0, count() - 1)) + }, 'Decrease'), + Button({ + class: 'btn btn-sm btn-ghost', + onclick: () => count(0) + }, 'Clear') + ]) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Shopping Cart + +
+
+

Live Demo

+
+
+
+ +```javascript +const CartDemo = () => { + const cart = $([ + { id: 1, name: 'Product 1', price: 29 }, + { id: 2, name: 'Product 2', price: 49 } + ]); + + const addItem = () => { + const newId = Math.max(...cart().map(i => i.id), 0) + 1; + cart([...cart(), { id: newId, name: `Product ${newId}`, price: Math.floor(Math.random() * 100) + 10 }]); + Toast('Item added to cart', 'alert-success', 1500); + }; + + const removeItem = (id) => { + cart(cart().filter(item => item.id !== id)); + Toast('Item removed', 'alert-info', 1500); + }; + + const total = () => cart().reduce((sum, item) => sum + item.price, 0); + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Indicator({ + badge: () => cart().length, + badgeClass: 'badge-primary' + }, [ + Button({ class: 'btn', onclick: addItem }, '🛒 Add to Cart') + ]), + Span({ class: 'text-lg font-bold' }, () => `Total: $${total()}`) + ]), + cart().length === 0 + ? Div({ class: 'alert alert-soft text-center' }, 'Cart is empty') + : Div({ class: 'flex flex-col gap-2' }, cart().map(item => + Div({ class: 'flex justify-between items-center p-2 bg-base-200 rounded-lg' }, [ + Span({}, item.name), + Div({ class: 'flex gap-2 items-center' }, [ + Span({ class: 'text-sm font-bold' }, `$${item.price}`), + Button({ + class: 'btn btn-xs btn-ghost btn-circle', + onclick: () => removeItem(item.id) + }, '✕') + ]) + ]) + )) + ]); +}; +$mount(CartDemo, '#demo-cart'); +``` + +### Email Inbox + +
+
+

Live Demo

+
+
+
+ +```javascript +const InboxDemo = () => { + const unread = $(3); + const messages = $([ + { id: 1, from: 'john@example.com', subject: 'Meeting tomorrow', read: false }, + { id: 2, from: 'jane@example.com', subject: 'Project update', read: false }, + { id: 3, from: 'bob@example.com', subject: 'Question about design', read: false }, + { id: 4, from: 'alice@example.com', subject: 'Weekly report', read: true } + ]); + + const markAsRead = (id) => { + const msg = messages().find(m => m.id === id); + if (!msg.read) { + msg.read = true; + messages([...messages()]); + unread(unread() - 1); + } + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Indicator({ + badge: () => unread(), + badgeClass: 'badge-primary' + }, [ + Span({ class: 'text-lg font-bold' }, 'Inbox') + ]), + Button({ + class: 'btn btn-sm btn-ghost', + onclick: () => { + messages().forEach(m => m.read = true); + messages([...messages()]); + unread(0); + } + }, 'Mark all read') + ]), + Div({ class: 'flex flex-col gap-2' }, messages().map(msg => + Div({ + class: `p-3 rounded-lg cursor-pointer transition-all ${msg.read ? 'bg-base-200 opacity-60' : 'bg-primary/10 border-l-4 border-primary'}`, + onclick: () => markAsRead(msg.id) + }, [ + Div({ class: 'font-medium' }, msg.from), + Div({ class: 'text-sm' }, msg.subject), + !msg.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New') + ]) + )) + ]); +}; +$mount(InboxDemo, '#demo-inbox'); +``` + +### Custom Position + +
+
+

Live Demo

+
+
+
+ +```javascript +const PositionsDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ + Div({ class: 'text-center' }, [ + Div({ class: 'text-xs mb-2' }, 'Top-Left'), + Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [ + Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' }) + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-xs mb-2' }, 'Top-Right'), + Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [ + Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' }) + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-xs mb-2' }, 'Bottom-Left'), + Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [ + Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' }) + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-xs mb-2' }, 'Bottom-Right'), + Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [ + Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' }) + ]) + ]) + ]); +}; +$mount(PositionsDemo, '#demo-positions'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ + Indicator({ badge: '3', badgeClass: 'badge-primary badge-sm' }, [ + Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '📧') + ]), + Indicator({ badge: '99+', badgeClass: 'badge-secondary badge-md' }, [ + Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔') + ]), + Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [ + Div({ class: 'avatar' }, [ + Div({ class: 'w-10 h-10 rounded-full bg-primary' }) + ]) + ]), + Indicator({ badge: '!', badgeClass: 'badge-error badge-sm' }, [ + Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '⚠️') + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/input.md b/docs/components_old/input.md new file mode 100644 index 0000000..9962c6c --- /dev/null +++ b/docs/components_old/input.md @@ -0,0 +1,348 @@ +# Input + +Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind. + +## Tag + +`Input` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :--------- | :----------------------------------------------- | +| `label` | `string` | `-` | Label text (floating style) | +| `type` | `string` | `'text'` | Input type (text, password, email, number, date) | +| `value` | `string \| Signal` | `''` | Input value | +| `placeholder`| `string` | `' '` | Placeholder text | +| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed inside input | +| `tip` | `string` | `-` | Help tooltip text | +| `error` | `string \| Signal` | `-` | Error message to display | +| `disabled` | `boolean \| Signal` | `false` | Disabled state | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `oninput` | `function` | `-` | Input event handler | + +## Live Examples + +### Basic Input + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const name = $(''); + + return Input({ + label: 'Full Name', + placeholder: 'Enter your name', + value: name, + oninput: (e) => name(e.target.value) + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Icon + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconDemo = () => { + const email = $(''); + + return Input({ + label: 'Email', + type: 'email', + icon: Icons.iconMail, + value: email, + oninput: (e) => email(e.target.value) + }); +}; +$mount(IconDemo, '#demo-icon'); +``` + +### Password with Toggle + +
+
+

Live Demo

+
+
+
+ +```javascript +const PasswordDemo = () => { + const password = $(''); + + return Input({ + label: 'Password', + type: 'password', + value: password, + oninput: (e) => password(e.target.value) + }); +}; +$mount(PasswordDemo, '#demo-password'); +``` + +### With Tooltip + +
+
+

Live Demo

+
+
+
+ +```javascript +const TooltipDemo = () => { + const username = $(''); + + return Input({ + label: 'Username', + tip: 'Must be at least 3 characters', + value: username, + oninput: (e) => username(e.target.value) + }); +}; +$mount(TooltipDemo, '#demo-tooltip'); +``` + +### Error State + +
+
+

Live Demo

+
+
+
+ +```javascript +const ErrorDemo = () => { + const email = $(''); + const isValid = $(true); + + const validate = (value) => { + const valid = value.includes('@') && value.includes('.'); + isValid(valid); + email(value); + }; + + return Input({ + label: 'Email', + type: 'email', + value: email, + error: () => !isValid() && email() ? 'Invalid email address' : '', + oninput: (e) => validate(e.target.value) + }); +}; +$mount(ErrorDemo, '#demo-error'); +``` + +### Disabled State + +
+
+

Live Demo

+
+
+
+ +```javascript +const DisabledDemo = () => { + return Input({ + label: 'Username', + value: 'john.doe', + disabled: true + }); +}; +$mount(DisabledDemo, '#demo-disabled'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const text = $(''); + const number = $(0); + + return Div({ class: 'flex flex-col gap-4' }, [ + Input({ + label: 'Text Input', + placeholder: 'Type something...', + value: text, + oninput: (e) => text(e.target.value) + }), + Input({ + label: 'Number Input', + type: 'number', + value: number, + oninput: (e) => number(parseInt(e.target.value) || 0) + }), + Input({ + label: 'Date Input', + type: 'date', + value: $('2024-01-01') + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/list.md b/docs/components_old/list.md new file mode 100644 index 0000000..858f46b --- /dev/null +++ b/docs/components_old/list.md @@ -0,0 +1,601 @@ + +# List + +List component with custom item rendering, headers, and reactive data binding. + +## Tag + +`List` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- | +| `items` | `Array \| Signal` | `[]` | Data array to display | +| `header` | `string \| VNode \| Signal` | `-` | Optional header content | +| `render` | `function(item, index)` | `-` | Custom render function for each item | +| `keyFn` | `function(item, index)` | `(item, idx) => idx` | Unique key function for items | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic List + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const items = ['Apple', 'Banana', 'Orange', 'Grape', 'Mango']; + + return List({ + items: items, + render: (item) => Div({ class: 'p-3 hover:bg-base-200 transition-colors' }, [ + Span({ class: 'font-medium' }, item) + ]) + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Header + +
+
+

Live Demo

+
+
+
+ +```javascript +const HeaderDemo = () => { + const users = [ + { name: 'John Doe', email: 'john@example.com', status: 'active' }, + { name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' }, + { name: 'Bob Johnson', email: 'bob@example.com', status: 'active' } + ]; + + return List({ + items: users, + header: Div({ class: 'p-3 bg-primary/10 font-bold border-b border-base-300' }, 'Active Users'), + render: (user) => Div({ class: 'p-3 border-b border-base-300 hover:bg-base-200' }, [ + Div({ class: 'font-medium' }, user.name), + Div({ class: 'text-sm opacity-70' }, user.email), + Span({ class: `badge badge-sm ${user.status === 'active' ? 'badge-success' : 'badge-ghost'} mt-1` }, user.status) + ]) + }); +}; +$mount(HeaderDemo, '#demo-header'); +``` + +### With Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + const settings = [ + { icon: '🔊', label: 'Sound', description: 'Adjust volume and notifications' }, + { icon: '🌙', label: 'Display', description: 'Brightness and dark mode' }, + { icon: '🔒', label: 'Privacy', description: 'Security settings' }, + { icon: '🌐', label: 'Network', description: 'WiFi and connections' } + ]; + + return List({ + items: settings, + render: (item) => Div({ class: 'flex gap-3 p-3 hover:bg-base-200 transition-colors cursor-pointer' }, [ + Div({ class: 'text-2xl' }, item.icon), + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, item.label), + Div({ class: 'text-sm opacity-60' }, item.description) + ]), + Span({ class: 'opacity-40' }, '→') + ]) + }); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### With Badges + +
+
+

Live Demo

+
+
+
+ +```javascript +const BadgesDemo = () => { + const notifications = [ + { id: 1, message: 'New comment on your post', time: '5 min ago', unread: true }, + { id: 2, message: 'Your order has been shipped', time: '1 hour ago', unread: true }, + { id: 3, message: 'Welcome to the platform!', time: '2 days ago', unread: false }, + { id: 4, message: 'Weekly digest available', time: '3 days ago', unread: false } + ]; + + return List({ + items: notifications, + render: (item) => Div({ class: `flex justify-between items-center p-3 border-b border-base-300 hover:bg-base-200 ${item.unread ? 'bg-primary/5' : ''}` }, [ + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, item.message), + Div({ class: 'text-xs opacity-50' }, item.time) + ]), + item.unread ? Span({ class: 'badge badge-primary badge-sm' }, 'New') : null + ]) + }); +}; +$mount(BadgesDemo, '#demo-badges'); +``` + +### Interactive List + +
+
+

Live Demo

+
+
+
+ +```javascript +const InteractiveDemo = () => { + const selected = $(null); + const items = [ + { id: 1, name: 'Project Alpha', status: 'In Progress' }, + { id: 2, name: 'Project Beta', status: 'Planning' }, + { id: 3, name: 'Project Gamma', status: 'Completed' }, + { id: 4, name: 'Project Delta', status: 'Review' } + ]; + + const statusColors = { + 'In Progress': 'badge-warning', + 'Planning': 'badge-info', + 'Completed': 'badge-success', + 'Review': 'badge-accent' + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + List({ + items: items, + render: (item) => Div({ + class: `p-3 cursor-pointer transition-all hover:bg-base-200 ${selected() === item.id ? 'bg-primary/10 border-l-4 border-primary' : 'border-l-4 border-transparent'}`, + onclick: () => selected(item.id) + }, [ + Div({ class: 'flex justify-between items-center' }, [ + Div({ class: 'font-medium' }, item.name), + Span({ class: `badge ${statusColors[item.status]}` }, item.status) + ]) + ]) + }), + () => selected() + ? Div({ class: 'alert alert-info' }, `Selected: ${items.find(i => i.id === selected()).name}`) + : Div({ class: 'alert alert-soft' }, 'Select a project to see details') + ]); +}; +$mount(InteractiveDemo, '#demo-interactive'); +``` + +### Reactive List + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const todos = $([ + { id: 1, text: 'Complete documentation', done: false }, + { id: 2, text: 'Review pull requests', done: false }, + { id: 3, text: 'Deploy to production', done: false } + ]); + + const newTodo = $(''); + + const addTodo = () => { + if (newTodo().trim()) { + const newId = Math.max(...todos().map(t => t.id), 0) + 1; + todos([...todos(), { id: newId, text: newTodo(), done: false }]); + newTodo(''); + } + }; + + const toggleTodo = (id) => { + todos(todos().map(t => + t.id === id ? { ...t, done: !t.done } : t + )); + }; + + const deleteTodo = (id) => { + todos(todos().filter(t => t.id !== id)); + }; + + const pendingCount = () => todos().filter(t => !t.done).length; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex gap-2' }, [ + Input({ + placeholder: 'Add new task...', + value: newTodo, + class: 'flex-1', + oninput: (e) => newTodo(e.target.value), + onkeypress: (e) => e.key === 'Enter' && addTodo() + }), + Button({ class: 'btn btn-primary', onclick: addTodo }, 'Add') + ]), + List({ + items: todos, + render: (todo) => Div({ class: `flex items-center gap-3 p-2 border-b border-base-300 hover:bg-base-200 ${todo.done ? 'opacity-60' : ''}` }, [ + Checkbox({ + value: todo.done, + onclick: () => toggleTodo(todo.id) + }), + Span({ + class: `flex-1 ${todo.done ? 'line-through' : ''}`, + onclick: () => toggleTodo(todo.id) + }, todo.text), + Button({ + class: 'btn btn-ghost btn-xs btn-circle', + onclick: () => deleteTodo(todo.id) + }, '✕') + ]) + }), + Div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Avatar List + +
+
+

Live Demo

+
+
+
+ +```javascript +const AvatarDemo = () => { + const contacts = [ + { name: 'Alice Johnson', role: 'Developer', avatar: 'A', online: true }, + { name: 'Bob Smith', role: 'Designer', avatar: 'B', online: false }, + { name: 'Charlie Brown', role: 'Manager', avatar: 'C', online: true }, + { name: 'Diana Prince', role: 'QA Engineer', avatar: 'D', online: false } + ]; + + return List({ + items: contacts, + render: (contact) => Div({ class: 'flex gap-3 p-3 hover:bg-base-200 transition-colors' }, [ + Div({ class: `avatar ${contact.online ? 'online' : 'offline'}`, style: 'width: 48px' }, [ + Div({ class: 'rounded-full bg-primary text-primary-content flex items-center justify-center w-12 h-12 font-bold' }, contact.avatar) + ]), + Div({ class: 'flex-1' }, [ + Div({ class: 'font-medium' }, contact.name), + Div({ class: 'text-sm opacity-60' }, contact.role) + ]), + Div({ class: `badge badge-sm ${contact.online ? 'badge-success' : 'badge-ghost'}` }, contact.online ? 'Online' : 'Offline') + ]) + }); +}; +$mount(AvatarDemo, '#demo-avatar'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const items = ['Item 1', 'Item 2', 'Item 3']; + + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'text-sm font-bold' }, 'Default List'), + List({ + items: items, + render: (item) => Div({ class: 'p-2' }, item) + }), + + Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'), + List({ + items: items, + render: (item) => Div({ class: 'p-2' }, item), + class: 'shadow-lg' + }), + + Div({ class: 'text-sm font-bold mt-2' }, 'Rounded Corners'), + List({ + items: items, + render: (item) => Div({ class: 'p-2' }, item), + class: 'rounded-box overflow-hidden' + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/loading.md b/docs/components_old/loading.md new file mode 100644 index 0000000..9f5b0a4 --- /dev/null +++ b/docs/components_old/loading.md @@ -0,0 +1,597 @@ +# Loading + +Loading spinner component for indicating loading states with customizable size and colors. + +## Tag + +`Loading` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- | +| `$show` | `boolean \| Signal` | `true` | Show/hide the loading spinner | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI loading variants)| + +## Live Examples + +### Basic Loading + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [ + Loading({ $show: true, class: 'loading-spinner' }), + Loading({ $show: true, class: 'loading-dots' }), + Loading({ $show: true, class: 'loading-ring' }), + Loading({ $show: true, class: 'loading-ball' }), + Loading({ $show: true, class: 'loading-bars' }), + Loading({ $show: true, class: 'loading-infinity' }) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Loading Sizes + +
+
+

Live Demo

+
+
+
+ +```javascript +const SizesDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [ + Div({ class: 'text-center' }, [ + Loading({ $show: true, class: 'loading-spinner loading-xs' }), + Div({ class: 'text-xs mt-2' }, 'Extra Small') + ]), + Div({ class: 'text-center' }, [ + Loading({ $show: true, class: 'loading-spinner loading-sm' }), + Div({ class: 'text-xs mt-2' }, 'Small') + ]), + Div({ class: 'text-center' }, [ + Loading({ $show: true, class: 'loading-spinner loading-md' }), + Div({ class: 'text-xs mt-2' }, 'Medium') + ]), + Div({ class: 'text-center' }, [ + Loading({ $show: true, class: 'loading-spinner loading-lg' }), + Div({ class: 'text-xs mt-2' }, 'Large') + ]) + ]); +}; +$mount(SizesDemo, '#demo-sizes'); +``` + +### Loading Colors + +
+
+

Live Demo

+
+
+
+ +```javascript +const ColorsDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [ + Loading({ $show: true, class: 'loading-spinner text-primary' }), + Loading({ $show: true, class: 'loading-spinner text-secondary' }), + Loading({ $show: true, class: 'loading-spinner text-accent' }), + Loading({ $show: true, class: 'loading-spinner text-info' }), + Loading({ $show: true, class: 'loading-spinner text-success' }), + Loading({ $show: true, class: 'loading-spinner text-warning' }), + Loading({ $show: true, class: 'loading-spinner text-error' }) + ]); +}; +$mount(ColorsDemo, '#demo-colors'); +``` + +### Button Loading State + +
+
+

Live Demo

+
+
+
+ +```javascript +const ButtonDemo = () => { + const isLoading = $(false); + + const handleClick = async () => { + isLoading(true); + await new Promise(resolve => setTimeout(resolve, 2000)); + isLoading(false); + Toast('Operation completed!', 'alert-success', 2000); + }; + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Button({ + class: 'btn btn-primary', + loading: isLoading, + onclick: handleClick + }, 'Submit'), + Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state') + ]); +}; +$mount(ButtonDemo, '#demo-button'); +``` + +### Async Data Loading + +
+
+

Live Demo

+
+
+
+ +```javascript +const AsyncDemo = () => { + const loading = $(false); + const data = $(null); + const error = $(null); + + const loadData = async () => { + loading(true); + error(null); + data(null); + + try { + await new Promise(resolve => setTimeout(resolve, 2000)); + const result = { + users: 1234, + posts: 5678, + comments: 9012 + }; + data(result); + Toast('Data loaded successfully!', 'alert-success', 2000); + } catch (err) { + error('Failed to load data'); + Toast('Error loading data', 'alert-error', 2000); + } finally { + loading(false); + } + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: loadData, + disabled: () => loading() + }, loading() ? 'Loading...' : 'Load Data') + ]), + Div({ class: 'relative min-h-[200px] flex items-center justify-center' }, [ + () => loading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null, + () => data() ? Div({ class: 'grid grid-cols-3 gap-4 w-full' }, [ + Div({ class: 'stat' }, [ + Div({ class: 'stat-title' }, 'Users'), + Div({ class: 'stat-value' }, data().users) + ]), + Div({ class: 'stat' }, [ + Div({ class: 'stat-title' }, 'Posts'), + Div({ class: 'stat-value' }, data().posts) + ]), + Div({ class: 'stat' }, [ + Div({ class: 'stat-title' }, 'Comments'), + Div({ class: 'stat-value' }, data().comments) + ]) + ]) : null, + () => error() ? Alert({ type: 'error', message: error() }) : null + ]) + ]); +}; +$mount(AsyncDemo, '#demo-async'); +``` + +### Full Page Loading + +
+
+

Live Demo

+
+
+
+ +```javascript +const FullpageDemo = () => { + const isLoading = $(false); + + const simulatePageLoad = () => { + isLoading(true); + setTimeout(() => { + isLoading(false); + Toast('Page loaded!', 'alert-success', 2000); + }, 2000); + }; + + return Div({ class: 'relative' }, [ + Div({ class: 'flex justify-center p-8' }, [ + Button({ + class: 'btn btn-primary', + onclick: simulatePageLoad + }, 'Simulate Page Load') + ]), + () => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null + ]); +}; +$mount(FullpageDemo, '#demo-fullpage'); +``` + +### Conditional Loading + +
+
+

Live Demo

+
+
+
+ +```javascript +const ConditionalDemo = () => { + const loadingState = $('idle'); + const content = $(''); + + const simulateAction = (action) => { + loadingState('loading'); + setTimeout(() => { + content(`Action: ${action} completed at ${new Date().toLocaleTimeString()}`); + loadingState('success'); + setTimeout(() => loadingState('idle'), 1500); + }, 1500); + }; + + const loadingStates = { + idle: null, + loading: Loading({ $show: true, class: 'loading-spinner text-primary' }), + success: Alert({ type: 'success', message: '✓ Done!' }) + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex gap-2 justify-center' }, [ + Button({ + class: 'btn btn-sm', + onclick: () => simulateAction('Save') + }, 'Save'), + Button({ + class: 'btn btn-sm', + onclick: () => simulateAction('Update') + }, 'Update'), + Button({ + class: 'btn btn-sm', + onclick: () => simulateAction('Delete') + }, 'Delete') + ]), + Div({ class: 'flex justify-center min-h-[100px] items-center' }, [ + () => loadingStates[loadingState()], + () => content() && loadingState() === 'idle' ? Div({ class: 'text-center' }, content()) : null + ]) + ]); +}; +$mount(ConditionalDemo, '#demo-conditional'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Spinner'), + Div({ class: 'flex gap-4 justify-center' }, [ + Loading({ $show: true, class: 'loading-spinner loading-xs' }), + Loading({ $show: true, class: 'loading-spinner loading-sm' }), + Loading({ $show: true, class: 'loading-spinner loading-md' }), + Loading({ $show: true, class: 'loading-spinner loading-lg' }) + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Dots'), + Div({ class: 'flex gap-4 justify-center' }, [ + Loading({ $show: true, class: 'loading-dots loading-xs' }), + Loading({ $show: true, class: 'loading-dots loading-sm' }), + Loading({ $show: true, class: 'loading-dots loading-md' }), + Loading({ $show: true, class: 'loading-dots loading-lg' }) + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Ring'), + Div({ class: 'flex gap-4 justify-center' }, [ + Loading({ $show: true, class: 'loading-ring loading-xs' }), + Loading({ $show: true, class: 'loading-ring loading-sm' }), + Loading({ $show: true, class: 'loading-ring loading-md' }), + Loading({ $show: true, class: 'loading-ring loading-lg' }) + ]) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/menu.md b/docs/components_old/menu.md new file mode 100644 index 0000000..21c33c7 --- /dev/null +++ b/docs/components_old/menu.md @@ -0,0 +1,760 @@ +# Menu + +Menu component for creating navigation menus, sidebars, and dropdowns with support for nested items, icons, and active states. + +## Tag + +`Menu` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- | +| `items` | `Array` | `[]` | Menu items configuration | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +### MenuItem Structure + +| Property | Type | Description | +| :---------- | :--------------------------- | :----------------------------------------------- | +| `label` | `string \| VNode` | Menu item text or content | +| `icon` | `string \| VNode` | Optional icon to display | +| `active` | `boolean \| Signal` | Active state highlighting | +| `onclick` | `function` | Click handler | +| `children` | `Array` | Nested submenu items | +| `open` | `boolean` | Whether submenu is open (for nested items) | + +## Live Examples + +### Basic Menu + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const activeItem = $('home'); + + return Menu({ + items: [ + { + label: 'Home', + active: () => activeItem() === 'home', + onclick: () => activeItem('home') + }, + { + label: 'About', + active: () => activeItem() === 'about', + onclick: () => activeItem('about') + }, + { + label: 'Contact', + active: () => activeItem() === 'contact', + onclick: () => activeItem('contact') + } + ] + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + const activeItem = $('dashboard'); + + return Menu({ + items: [ + { + icon: '🏠', + label: 'Dashboard', + active: () => activeItem() === 'dashboard', + onclick: () => activeItem('dashboard') + }, + { + icon: '📊', + label: 'Analytics', + active: () => activeItem() === 'analytics', + onclick: () => activeItem('analytics') + }, + { + icon: '⚙️', + label: 'Settings', + active: () => activeItem() === 'settings', + onclick: () => activeItem('settings') + }, + { + icon: '👤', + label: 'Profile', + active: () => activeItem() === 'profile', + onclick: () => activeItem('profile') + } + ] + }); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Nested Menu + +
+
+

Live Demo

+
+
+
+ +```javascript +const NestedDemo = () => { + const activeItem = $('products'); + + return Menu({ + items: [ + { + label: 'Dashboard', + onclick: () => activeItem('dashboard'), + active: () => activeItem() === 'dashboard' + }, + { + label: 'Products', + icon: '📦', + open: true, + children: [ + { + label: 'All Products', + onclick: () => activeItem('all-products'), + active: () => activeItem() === 'all-products' + }, + { + label: 'Add New', + onclick: () => activeItem('add-product'), + active: () => activeItem() === 'add-product' + }, + { + label: 'Categories', + children: [ + { + label: 'Electronics', + onclick: () => activeItem('electronics'), + active: () => activeItem() === 'electronics' + }, + { + label: 'Clothing', + onclick: () => activeItem('clothing'), + active: () => activeItem() === 'clothing' + } + ] + } + ] + }, + { + label: 'Orders', + icon: '📋', + onclick: () => activeItem('orders'), + active: () => activeItem() === 'orders' + }, + { + label: 'Settings', + icon: '⚙️', + onclick: () => activeItem('settings'), + active: () => activeItem() === 'settings' + } + ] + }); +}; +$mount(NestedDemo, '#demo-nested'); +``` + +### Horizontal Menu + +
+
+

Live Demo

+
+
+
+ +```javascript +const HorizontalDemo = () => { + const activeItem = $('home'); + + return Menu({ + class: 'menu-horizontal rounded-box', + items: [ + { + label: 'Home', + active: () => activeItem() === 'home', + onclick: () => activeItem('home') + }, + { + label: 'Products', + children: [ + { label: 'Electronics', onclick: () => activeItem('electronics') }, + { label: 'Clothing', onclick: () => activeItem('clothing') }, + { label: 'Books', onclick: () => activeItem('books') } + ] + }, + { + label: 'About', + onclick: () => activeItem('about'), + active: () => activeItem() === 'about' + }, + { + label: 'Contact', + onclick: () => activeItem('contact'), + active: () => activeItem() === 'contact' + } + ] + }); +}; +$mount(HorizontalDemo, '#demo-horizontal'); +``` + +### Sidebar Menu + +
+
+

Live Demo

+
+
+
+ +```javascript +const SidebarDemo = () => { + const activeItem = $('dashboard'); + + return Div({ class: 'flex' }, [ + Div({ class: 'w-64' }, [ + Menu({ + class: 'rounded-box w-full', + items: [ + { + icon: '📊', + label: 'Dashboard', + active: () => activeItem() === 'dashboard', + onclick: () => activeItem('dashboard') + }, + { + icon: '👥', + label: 'Users', + children: [ + { + label: 'All Users', + onclick: () => activeItem('all-users'), + active: () => activeItem() === 'all-users' + }, + { + label: 'Add User', + onclick: () => activeItem('add-user'), + active: () => activeItem() === 'add-user' + } + ] + }, + { + icon: '📁', + label: 'Files', + onclick: () => activeItem('files'), + active: () => activeItem() === 'files' + }, + { + icon: '⚙️', + label: 'Settings', + onclick: () => activeItem('settings'), + active: () => activeItem() === 'settings' + } + ] + }) + ]), + Div({ class: 'flex-1 p-4' }, [ + Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`) + ]) + ]); +}; +$mount(SidebarDemo, '#demo-sidebar'); +``` + +### Account Menu + +
+
+

Live Demo

+
+
+
+ +```javascript +const AccountDemo = () => { + const [notifications, setNotifications] = $(3); + + return Menu({ + class: 'rounded-box w-56', + items: [ + { + icon: '👤', + label: 'My Profile', + onclick: () => Toast('Profile clicked', 'alert-info', 2000) + }, + { + icon: '📧', + label: 'Messages', + badge: '3', + onclick: () => Toast('Messages opened', 'alert-info', 2000) + }, + { + icon: '🔔', + label: 'Notifications', + badge: () => notifications(), + onclick: () => { + setNotifications(0); + Toast('Notifications cleared', 'alert-success', 2000); + } + }, + { + icon: '⚙️', + label: 'Settings', + onclick: () => Toast('Settings opened', 'alert-info', 2000) + }, + { + icon: '🚪', + label: 'Logout', + onclick: () => Toast('Logged out', 'alert-warning', 2000) + } + ] + }); +}; +$mount(AccountDemo, '#demo-account'); +``` + +### Collapsible Sidebar + +
+
+

Live Demo

+
+
+
+ +```javascript +const CollapsibleDemo = () => { + const collapsed = $(false); + const activeItem = $('dashboard'); + + return Div({ class: 'flex gap-4' }, [ + Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [ + Button({ + class: 'btn btn-ghost btn-sm mb-2 w-full', + onclick: () => collapsed(!collapsed()) + }, collapsed() ? '→' : '←'), + Menu({ + class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`, + items: [ + { icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') }, + { icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') }, + { icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') }, + { icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') } + ] + }) + ]), + Div({ class: 'flex-1' }, [ + Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`) + ]) + ]); +}; +$mount(CollapsibleDemo, '#demo-collapsible'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const items = [ + { label: 'Item 1' }, + { label: 'Item 2' }, + { label: 'Item 3', children: [ + { label: 'Subitem 1' }, + { label: 'Subitem 2' } + ]} + ]; + + return Div({ class: 'flex flex-wrap gap-8' }, [ + Div({ class: 'w-48' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Default'), + Menu({ items }) + ]), + Div({ class: 'w-48' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Compact'), + Menu({ items, class: 'menu-compact' }) + ]), + Div({ class: 'w-48' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'), + Menu({ items, class: 'shadow-lg' }) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/modal.md b/docs/components_old/modal.md new file mode 100644 index 0000000..33c9f19 --- /dev/null +++ b/docs/components_old/modal.md @@ -0,0 +1,667 @@ +# Modal + +Modal dialog component for displaying content in an overlay with customizable actions and backdrop. + +## Tag + +`Modal` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `open` | `boolean \| Signal` | `false` | Modal visibility state | +| `title` | `string \| VNode \| Signal` | `-` | Modal title text | +| `buttons` | `Array \| VNode` | `-` | Action buttons to display (auto-closes on click) | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `string \| VNode` | `-` | Modal content | + +## Live Examples + +### Basic Modal + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const isOpen = $(false); + + return Div({ class: 'flex justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => isOpen(true) + }, 'Open Modal'), + Modal({ + open: isOpen, + title: 'Basic Modal', + buttons: Button({ onclick: () => isOpen(false) }, 'Close') + }, [ + Div({ class: 'py-4' }, 'This is a basic modal dialog. You can put any content here.') + ]) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Modal with Actions + +
+
+

Live Demo

+
+
+
+ +```javascript +const ActionsDemo = () => { + const isOpen = $(false); + const confirmed = $(false); + + const handleConfirm = () => { + confirmed(true); + isOpen(false); + Toast('Action confirmed!', 'alert-success', 2000); + }; + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => isOpen(true) + }, 'Confirm Action'), + () => confirmed() ? Alert({ + type: 'success', + message: 'You confirmed the action!' + }) : null, + Modal({ + open: isOpen, + title: 'Confirm Action', + buttons: [ + Button({ + class: 'btn btn-ghost', + onclick: () => isOpen(false) + }, 'Cancel'), + Button({ + class: 'btn btn-primary', + onclick: handleConfirm + }, 'Confirm') + ] + }, [ + Div({ class: 'py-4' }, 'Are you sure you want to perform this action? This cannot be undone.') + ]) + ]); +}; +$mount(ActionsDemo, '#demo-actions'); +``` + +### Form Modal + +
+
+

Live Demo

+
+
+
+ +```javascript +const FormModal = () => { + const isOpen = $(false); + const name = $(''); + const email = $(''); + const submitted = $(false); + + const handleSubmit = () => { + if (name() && email()) { + submitted(true); + isOpen(false); + Toast(`Welcome ${name()}!`, 'alert-success', 2000); + setTimeout(() => submitted(false), 3000); + } + }; + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => isOpen(true) + }, 'Sign Up'), + () => submitted() ? Alert({ + type: 'success', + message: 'Account created successfully!' + }) : null, + Modal({ + open: isOpen, + title: 'Create Account', + buttons: [ + Button({ + class: 'btn btn-ghost', + onclick: () => isOpen(false) + }, 'Cancel'), + Button({ + class: 'btn btn-primary', + onclick: handleSubmit + }, 'Sign Up') + ] + }, [ + Div({ class: 'flex flex-col gap-4 py-2' }, [ + Input({ + label: 'Full Name', + value: name, + placeholder: 'Enter your name', + oninput: (e) => name(e.target.value) + }), + Input({ + label: 'Email', + type: 'email', + value: email, + placeholder: 'Enter your email', + oninput: (e) => email(e.target.value) + }) + ]) + ]) + ]); +}; +$mount(FormModal, '#demo-form'); +``` + +### Confirmation Modal + +
+
+

Live Demo

+
+
+
+ +```javascript +const ConfirmDemo = () => { + const isOpen = $(false); + const items = $([ + { id: 1, name: 'Document A' }, + { id: 2, name: 'Document B' }, + { id: 3, name: 'Document C' } + ]); + const pendingDelete = $(null); + + const confirmDelete = (item) => { + pendingDelete(item); + isOpen(true); + }; + + const handleDelete = () => { + items(items().filter(i => i.id !== pendingDelete().id)); + isOpen(false); + Toast(`Deleted: ${pendingDelete().name}`, 'alert-info', 2000); + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex flex-col gap-2' }, items().map(item => + Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [ + Span({}, item.name), + Button({ + class: 'btn btn-xs btn-error', + onclick: () => confirmDelete(item) + }, 'Delete') + ]) + )), + Modal({ + open: isOpen, + title: 'Delete Confirmation', + buttons: [ + Button({ + class: 'btn btn-ghost', + onclick: () => isOpen(false) + }, 'Cancel'), + Button({ + class: 'btn btn-error', + onclick: handleDelete + }, 'Delete') + ] + }, [ + Div({ class: 'py-4' }, () => `Are you sure you want to delete "${pendingDelete()?.name}"? This action cannot be undone.`) + ]) + ]); +}; +$mount(ConfirmDemo, '#demo-confirm'); +``` + +### Large Content Modal + +
+
+

Live Demo

+
+
+
+ +```javascript +const LargeDemo = () => { + const isOpen = $(false); + + return Div({ class: 'flex justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => isOpen(true) + }, 'Open Large Modal'), + Modal({ + open: isOpen, + title: 'Terms and Conditions', + buttons: Button({ + class: 'btn btn-primary', + onclick: () => isOpen(false) + }, 'I Agree') + }, [ + Div({ class: 'py-4 max-h-96 overflow-y-auto' }, [ + Div({ class: 'space-y-4' }, [ + Div({ class: 'text-sm' }, [ + Div({ class: 'font-bold mb-2' }, '1. Introduction'), + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' + ]), + Div({ class: 'text-sm' }, [ + Div({ class: 'font-bold mb-2' }, '2. User Obligations'), + 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.' + ]), + Div({ class: 'text-sm' }, [ + Div({ class: 'font-bold mb-2' }, '3. Privacy Policy'), + 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.' + ]), + Div({ class: 'text-sm' }, [ + Div({ class: 'font-bold mb-2' }, '4. Termination'), + 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.' + ]) + ]) + ]) + ]) + ]); +}; +$mount(LargeDemo, '#demo-large'); +``` + +### Multiple Modals + +
+
+

Live Demo

+
+
+
+ +```javascript +const MultipleDemo = () => { + const modal1 = $(false); + const modal2 = $(false); + const modal3 = $(false); + + return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [ + Button({ class: 'btn', onclick: () => modal1(true) }, 'Info Modal'), + Button({ class: 'btn', onclick: () => modal2(true) }, 'Success Modal'), + Button({ class: 'btn', onclick: () => modal3(true) }, 'Warning Modal'), + + Modal({ + open: modal1, + title: 'Information', + buttons: Button({ onclick: () => modal1(false) }, 'OK') + }, 'This is an informational message.'), + + Modal({ + open: modal2, + title: 'Success!', + buttons: Button({ onclick: () => modal2(false) }, 'Great!') + }, 'Your operation was completed successfully.'), + + Modal({ + open: modal3, + title: 'Warning', + buttons: Button({ onclick: () => modal3(false) }, 'Understood') + }, 'Please review your input before proceeding.') + ]); +}; +$mount(MultipleDemo, '#demo-multiple'); +``` + +### Custom Styled Modal + +
+
+

Live Demo

+
+
+
+ +```javascript +const CustomDemo = () => { + const isOpen = $(false); + + return Div({ class: 'flex justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => isOpen(true) + }, 'Open Custom Modal'), + Modal({ + open: isOpen, + class: 'bg-gradient-to-r from-primary to-secondary text-primary-content' + }, [ + Div({ class: 'text-center py-8' }, [ + Div({ class: 'text-6xl mb-4' }, '🎉'), + Div({ class: 'text-2xl font-bold mb-2' }, 'Congratulations!'), + Div({ class: 'mb-6' }, 'You\'ve successfully completed the tutorial.'), + Button({ + class: 'btn btn-ghost bg-white/20 hover:bg-white/30', + onclick: () => isOpen(false) + }, 'Get Started') + ]) + ]) + ]); +}; +$mount(CustomDemo, '#demo-custom'); +``` + + diff --git a/docs/components_old/navbar.md b/docs/components_old/navbar.md new file mode 100644 index 0000000..292c80d --- /dev/null +++ b/docs/components_old/navbar.md @@ -0,0 +1,551 @@ +# Navbar + +Navigation bar component for creating responsive headers with logo, navigation links, and actions. + +## Tag + +`Navbar` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `VNode \| Array` | `-` | Navbar content (should contain left, center, right sections) | + +## Live Examples + +### Basic Navbar + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Navbar({ class: 'rounded-box' }, [ + Div({ class: 'navbar-start' }, [ + Span({ class: 'text-xl font-bold' }, 'Logo') + ]), + Div({ class: 'navbar-center hidden lg:flex' }, [ + Span({ class: 'text-sm' }, 'Navigation Items') + ]), + Div({ class: 'navbar-end' }, [ + Button({ class: 'btn btn-ghost btn-sm' }, 'Login') + ]) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Navigation Links + +
+
+

Live Demo

+ +
+
+ +```javascript +const LinksDemo = () => { + const active = $('home'); + + return Navbar({ class: 'rounded-box' }, [ + Div({ class: 'navbar-start' }, [ + Span({ class: 'text-xl font-bold' }, 'MyApp') + ]), + Div({ class: 'navbar-center hidden lg:flex' }, [ + Div({ class: 'menu menu-horizontal px-1' }, [ + Button({ + class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`, + onclick: () => active('home') + }, 'Home'), + Button({ + class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`, + onclick: () => active('about') + }, 'About'), + Button({ + class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`, + onclick: () => active('contact') + }, 'Contact') + ]) + ]), + Div({ class: 'navbar-end' }, [ + Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up') + ]) + ]); +}; +$mount(LinksDemo, '#demo-links'); +``` + +### With Dropdown Menu + +
+
+

Live Demo

+
+
+
+ +```javascript +const DropdownDemo = () => { + return Navbar({ class: 'rounded-box' }, [ + Div({ class: 'navbar-start' }, [ + Div({ class: 'dropdown' }, [ + Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [ + Span({ class: 'sr-only' }, 'Open menu'), + Icons.iconInfo + ]), + Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [ + Div({ class: 'menu-item' }, 'Home'), + Div({ class: 'menu-item' }, 'About'), + Div({ class: 'menu-item' }, 'Contact') + ]) + ]), + Span({ class: 'text-xl font-bold' }, 'MyApp') + ]), + Div({ class: 'navbar-center hidden lg:flex' }, [ + Div({ class: 'menu menu-horizontal px-1' }, [ + Div({ class: 'menu-item' }, 'Home'), + Div({ class: 'menu-item' }, 'About'), + Div({ class: 'menu-item' }, 'Contact') + ]) + ]), + Div({ class: 'navbar-end' }, [ + Button({ class: 'btn btn-primary btn-sm' }, 'Login') + ]) + ]); +}; +$mount(DropdownDemo, '#demo-dropdown'); +``` + +### With Search + +
+
+

Live Demo

+ +
+
+ +```javascript +const SearchDemo = () => { + const searchQuery = $(''); + + return Navbar({ class: 'rounded-box' }, [ + Div({ class: 'navbar-start' }, [ + Span({ class: 'text-xl font-bold' }, 'MyApp') + ]), + Div({ class: 'navbar-center' }, [ + Div({ class: 'form-control' }, [ + Input({ + placeholder: 'Search...', + value: searchQuery, + class: 'input input-bordered w-48 md:w-auto', + oninput: (e) => searchQuery(e.target.value) + }) + ]) + ]), + Div({ class: 'navbar-end' }, [ + Button({ class: 'btn btn-ghost btn-circle' }, '🔔'), + Button({ class: 'btn btn-ghost btn-circle' }, '👤') + ]) + ]); +}; +$mount(SearchDemo, '#demo-search'); +``` + +### With Avatar and Dropdown + +
+
+

Live Demo

+
+
+
+ +```javascript +const AvatarDemo = () => { + return Navbar({ class: 'rounded-box' }, [ + Div({ class: 'navbar-start' }, [ + Span({ class: 'text-xl font-bold' }, 'MyApp') + ]), + Div({ class: 'navbar-center hidden lg:flex' }, [ + Div({ class: 'menu menu-horizontal px-1' }, [ + Div({ class: 'menu-item' }, 'Dashboard'), + Div({ class: 'menu-item' }, 'Projects'), + Div({ class: 'menu-item' }, 'Tasks') + ]) + ]), + Div({ class: 'navbar-end' }, [ + Div({ class: 'dropdown dropdown-end' }, [ + Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [ + Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD') + ]), + Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [ + Div({ class: 'menu-item' }, 'Profile'), + Div({ class: 'menu-item' }, 'Settings'), + Div({ class: 'menu-item' }, 'Logout') + ]) + ]) + ]) + ]); +}; +$mount(AvatarDemo, '#demo-avatar'); +``` + +### Responsive Navbar + +
+
+

Live Demo

+
+
+
+ +```javascript +const ResponsiveDemo = () => { + const isOpen = $(false); + + return Div({ class: 'flex flex-col' }, [ + Navbar({ class: 'rounded-box' }, [ + Div({ class: 'navbar-start' }, [ + Button({ + class: 'btn btn-ghost btn-circle lg:hidden', + onclick: () => isOpen(!isOpen()) + }, '☰') + ]), + Div({ class: 'navbar-center' }, [ + Span({ class: 'text-xl font-bold' }, 'MyApp') + ]), + Div({ class: 'navbar-end' }, [ + Button({ class: 'btn btn-ghost btn-circle' }, '🔔') + ]) + ]), + () => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [ + Button({ class: 'btn btn-ghost justify-start' }, 'Home'), + Button({ class: 'btn btn-ghost justify-start' }, 'About'), + Button({ class: 'btn btn-ghost justify-start' }, 'Services'), + Button({ class: 'btn btn-ghost justify-start' }, 'Contact') + ]) : null + ]); +}; +$mount(ResponsiveDemo, '#demo-responsive'); +``` + +### With Brand and Actions + +
+
+

Live Demo

+
+
+
+ +```javascript +const BrandDemo = () => { + return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [ + Div({ class: 'navbar-start' }, [ + Span({ class: 'text-xl font-bold' }, 'Brand') + ]), + Div({ class: 'navbar-center hidden lg:flex' }, [ + Div({ class: 'menu menu-horizontal px-1' }, [ + Span({ class: 'text-sm' }, 'Features'), + Span({ class: 'text-sm' }, 'Pricing'), + Span({ class: 'text-sm' }, 'About') + ]) + ]), + Div({ class: 'navbar-end' }, [ + Button({ class: 'btn btn-ghost btn-sm' }, 'Login'), + Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up') + ]) + ]); +}; +$mount(BrandDemo, '#demo-brand'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'text-sm font-bold' }, 'Default Navbar'), + Navbar({ class: 'rounded-box' }, [ + Div({ class: 'navbar-start' }, [Span({}, 'Start')]), + Div({ class: 'navbar-center' }, [Span({}, 'Center')]), + Div({ class: 'navbar-end' }, [Span({}, 'End')]) + ]), + + Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'), + Navbar({ class: 'rounded-box shadow-lg' }, [ + Div({ class: 'navbar-start' }, [Span({}, 'Logo')]), + Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')]) + ]), + + Div({ class: 'text-sm font-bold mt-2' }, 'With Background'), + Navbar({ class: 'rounded-box bg-base-300' }, [ + Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]), + Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')]) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/radio.md b/docs/components_old/radio.md new file mode 100644 index 0000000..b11dbd0 --- /dev/null +++ b/docs/components_old/radio.md @@ -0,0 +1,740 @@ +# Radio + +Radio button component with label, tooltip support, and reactive group selection. All radios in the same group share a common `name` attribute for proper HTML semantics. + +## Tag + +`Radio` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `label` | `string` | `-` | Label text for the radio button | +| `value` | `string \| Signal` | `-` | Selected value signal for the group | +| `radioValue` | `string` | `-` | Value of this radio button | +| `name` | `string` | `-` | Group name (all radios in group should share this) | +| `tooltip` | `string` | `-` | Tooltip text on hover | +| `disabled` | `boolean \| Signal` | `false` | Disabled state | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `onclick` | `function` | `-` | Click event handler | + +## Live Examples + +### Basic Radio Group + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const selected = $('option1'); + + return Div({ class: 'flex flex-col gap-3' }, [ + Radio({ + label: 'Option 1', + name: 'basic-group', + value: selected, + radioValue: 'option1', + onclick: () => selected('option1') + }), + Radio({ + label: 'Option 2', + name: 'basic-group', + value: selected, + radioValue: 'option2', + onclick: () => selected('option2') + }), + Radio({ + label: 'Option 3', + name: 'basic-group', + value: selected, + radioValue: 'option3', + onclick: () => selected('option3') + }), + Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Tooltip + +
+
+

Live Demo

+
+
+
+ +```javascript +const TooltipDemo = () => { + const selected = $('light'); + + return Div({ class: 'flex flex-col gap-3' }, [ + Radio({ + label: 'Light mode', + name: 'theme-group', + value: selected, + radioValue: 'light', + tooltip: 'Light theme with white background', + onclick: () => selected('light') + }), + Radio({ + label: 'Dark mode', + name: 'theme-group', + value: selected, + radioValue: 'dark', + tooltip: 'Dark theme with black background', + onclick: () => selected('dark') + }) + ]); +}; +$mount(TooltipDemo, '#demo-tooltip'); +``` + +### Disabled State + +
+
+

Live Demo

+
+
+
+ +```javascript +const DisabledDemo = () => { + const selected = $('enabled'); + + return Div({ class: 'flex flex-col gap-3' }, [ + Radio({ + label: 'Enabled option', + name: 'disabled-group', + value: selected, + radioValue: 'enabled', + onclick: () => selected('enabled') + }), + Radio({ + label: 'Disabled option (cannot select)', + name: 'disabled-group', + value: selected, + radioValue: 'disabled', + disabled: true, + onclick: () => selected('disabled') + }) + ]); +}; +$mount(DisabledDemo, '#demo-disabled'); +``` + +### Reactive Preview + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const size = $('medium'); + const color = $('blue'); + + const sizes = [ + { value: 'small', label: 'Small' }, + { value: 'medium', label: 'Medium' }, + { value: 'large', label: 'Large' } + ]; + + const colors = [ + { value: 'blue', label: 'Blue' }, + { value: 'green', label: 'Green' }, + { value: 'red', label: 'Red' } + ]; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'text-sm font-bold' }, 'Select size'), + Div({ class: 'flex gap-4' }, sizes.map(s => + Radio({ + label: s.label, + name: 'size-group', + value: size, + radioValue: s.value, + onclick: () => size(s.value) + }) + )), + Div({ class: 'text-sm font-bold mt-2' }, 'Select color'), + Div({ class: 'flex gap-4' }, colors.map(c => + Radio({ + label: c.label, + name: 'color-group', + value: color, + radioValue: c.value, + onclick: () => color(c.value) + }) + )), + Div({ + class: 'mt-4 p-4 rounded-lg text-center transition-all', + style: () => { + const sizeMap = { small: 'text-sm', medium: 'text-base', large: 'text-lg' }; + const colorMap = { blue: '#3b82f6', green: '#10b981', red: '#ef4444' }; + return `background-color: ${colorMap[color()]}; color: white; ${sizeMap[size()]}`; + } + }, () => `${size()} ${color()} preview`) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Payment Method Selection + +
+
+

Live Demo

+
+
+
+ +```javascript +const PaymentDemo = () => { + const method = $('credit'); + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'text-sm font-bold' }, 'Payment method'), + Div({ class: 'flex flex-col gap-3' }, [ + Radio({ + label: '💳 Credit Card', + name: 'payment-group', + value: method, + radioValue: 'credit', + onclick: () => method('credit') + }), + Radio({ + label: '🏦 Bank Transfer', + name: 'payment-group', + value: method, + radioValue: 'bank', + onclick: () => method('bank') + }), + Radio({ + label: '📱 Digital Wallet', + name: 'payment-group', + value: method, + radioValue: 'wallet', + onclick: () => method('wallet') + }) + ]), + Div({ class: 'alert alert-info mt-2' }, () => { + const messages = { + credit: 'You selected Credit Card. Enter your card details.', + bank: 'You selected Bank Transfer. Use the provided account number.', + wallet: 'You selected Digital Wallet. Scan the QR code to pay.' + }; + return messages[method()]; + }) + ]); +}; +$mount(PaymentDemo, '#demo-payment'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const primary = $('primary1'); + const secondary = $('secondary1'); + const accent = $('accent1'); + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'card bg-base-200 p-4' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Primary variant'), + Div({ class: 'flex gap-4' }, [ + Radio({ + label: 'Option A', + name: 'primary-group', + value: primary, + radioValue: 'primary1', + class: 'radio-primary', + onclick: () => primary('primary1') + }), + Radio({ + label: 'Option B', + name: 'primary-group', + value: primary, + radioValue: 'primary2', + class: 'radio-primary', + onclick: () => primary('primary2') + }) + ]) + ]), + Div({ class: 'card bg-base-200 p-4' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Secondary variant'), + Div({ class: 'flex gap-4' }, [ + Radio({ + label: 'Option A', + name: 'secondary-group', + value: secondary, + radioValue: 'secondary1', + class: 'radio-secondary', + onclick: () => secondary('secondary1') + }), + Radio({ + label: 'Option B', + name: 'secondary-group', + value: secondary, + radioValue: 'secondary2', + class: 'radio-secondary', + onclick: () => secondary('secondary2') + }) + ]) + ]), + Div({ class: 'card bg-base-200 p-4' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Accent variant'), + Div({ class: 'flex gap-4' }, [ + Radio({ + label: 'Option A', + name: 'accent-group', + value: accent, + radioValue: 'accent1', + class: 'radio-accent', + onclick: () => accent('accent1') + }), + Radio({ + label: 'Option B', + name: 'accent-group', + value: accent, + radioValue: 'accent2', + class: 'radio-accent', + onclick: () => accent('accent2') + }) + ]) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Dynamic Options + +
+
+

Live Demo

+
+
+
+ +```javascript +const DynamicDemo = () => { + const category = $('cars'); + const selected = $(''); + + const options = { + cars: [ + { value: 'sedan', label: 'Sedan' }, + { value: 'suv', label: 'SUV' }, + { value: 'sports', label: 'Sports' } + ], + colors: [ + { value: 'red', label: 'Red' }, + { value: 'blue', label: 'Blue' }, + { value: 'black', label: 'Black' } + ] + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex gap-4' }, [ + Radio({ + label: 'Cars', + name: 'category-group', + value: category, + radioValue: 'cars', + onclick: () => { + category('cars'); + selected(''); + } + }), + Radio({ + label: 'Colors', + name: 'category-group', + value: category, + radioValue: 'colors', + onclick: () => { + category('colors'); + selected(''); + } + }) + ]), + Div({ class: 'divider my-1' }), + Div({ class: 'text-sm font-bold' }, () => `Select ${category()}`), + Div({ class: 'flex flex-col gap-2' }, () => + options[category()].map(opt => + Radio({ + label: opt.label, + name: 'dynamic-option-group', + value: selected, + radioValue: opt.value, + onclick: () => selected(opt.value) + }) + ) + ), + () => selected() + ? Div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`) + : null + ]); +}; +$mount(DynamicDemo, '#demo-dynamic'); +``` + + diff --git a/docs/components_old/rating.md b/docs/components_old/rating.md new file mode 100644 index 0000000..d816cae --- /dev/null +++ b/docs/components_old/rating.md @@ -0,0 +1,536 @@ +# Rating + +Star rating component with customizable count, icons, and read-only mode. + +## Tag + +`Rating` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- | +| `value` | `number \| Signal` | `0` | Current rating value | +| `count` | `number \| Signal` | `5` | Number of stars/items | +| `mask` | `string` | `'mask-star'` | Mask shape (mask-star, mask-star-2, mask-heart) | +| `readonly` | `boolean \| Signal` | `false` | Disable interaction | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Rating + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const rating = $(3); + + return Div({ class: 'flex flex-col gap-2 items-center' }, [ + Rating({ + value: rating, + count: 5, + onchange: (value) => rating(value) + }), + Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Heart Rating + +
+
+

Live Demo

+
+
+
+ +```javascript +const HeartDemo = () => { + const rating = $(4); + + return Div({ class: 'flex flex-col gap-2 items-center' }, [ + Rating({ + value: rating, + count: 5, + mask: 'mask-heart', + onchange: (value) => rating(value) + }), + Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`) + ]); +}; +$mount(HeartDemo, '#demo-heart'); +``` + +### Star with Outline + +
+
+

Live Demo

+
+
+
+ +```javascript +const Star2Demo = () => { + const rating = $(2); + + return Div({ class: 'flex flex-col gap-2 items-center' }, [ + Rating({ + value: rating, + count: 5, + mask: 'mask-star-2', + onchange: (value) => rating(value) + }), + Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`) + ]); +}; +$mount(Star2Demo, '#demo-star2'); +``` + +### Read-only Rating + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReadonlyDemo = () => { + const rating = $(4.5); + + return Div({ class: 'flex flex-col gap-2 items-center' }, [ + Rating({ + value: rating, + count: 5, + readonly: true + }), + Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)') + ]); +}; +$mount(ReadonlyDemo, '#demo-readonly'); +``` + +### Custom Count + +
+
+

Live Demo

+
+
+
+ +```javascript +const CustomDemo = () => { + const rating = $(3); + const count = $(10); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Div({ class: 'flex items-center gap-4' }, [ + Span({ class: 'text-sm' }, 'Number of stars:'), + Input({ + type: 'number', + value: count, + class: 'input input-sm w-24', + oninput: (e) => count(parseInt(e.target.value) || 1) + }) + ]), + Rating({ + value: rating, + count: count, + onchange: (value) => rating(value) + }), + Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`) + ]); +}; +$mount(CustomDemo, '#demo-custom'); +``` + +### Product Review + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReviewDemo = () => { + const quality = $(4); + const price = $(3); + const support = $(5); + + const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'text-lg font-bold' }, 'Product Review'), + Div({ class: 'flex flex-col gap-2' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'text-sm w-24' }, 'Quality:'), + Rating({ + value: quality, + count: 5, + size: 'sm', + onchange: (v) => quality(v) + }) + ]), + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'text-sm w-24' }, 'Price:'), + Rating({ + value: price, + count: 5, + size: 'sm', + onchange: (v) => price(v) + }) + ]), + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'text-sm w-24' }, 'Support:'), + Rating({ + value: support, + count: 5, + size: 'sm', + onchange: (v) => support(v) + }) + ]) + ]), + Div({ class: 'divider my-1' }), + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'font-bold' }, 'Overall:'), + Div({ class: 'text-2xl font-bold text-primary' }, () => average()) + ]) + ]); +}; +$mount(ReviewDemo, '#demo-review'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Mask Star'), + Rating({ value: $(3), count: 5, mask: 'mask-star' }) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)' ), + Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' }) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Mask Heart'), + Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' }) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'), + Rating({ value: $(3.5), count: 5, readonly: true }) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Interactive Feedback + +
+
+

Live Demo

+
+
+
+ +```javascript +const FeedbackDemo = () => { + const rating = $(0); + const feedback = $(false); + + const messages = { + 1: 'Very disappointed 😞', + 2: 'Could be better 😕', + 3: 'Good 👍', + 4: 'Very good 😊', + 5: 'Excellent! 🎉' + }; + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'How was your experience?'), + Rating({ + value: rating, + count: 5, + onchange: (value) => { + rating(value); + feedback(true); + if (value >= 4) { + Toast('Thank you for your positive feedback!', 'alert-success', 2000); + } else if (value <= 2) { + Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000); + } else { + Toast('Thanks for your rating!', 'alert-info', 2000); + } + } + }) + ]), + () => rating() > 0 + ? Div({ class: 'alert alert-soft text-center' }, [ + messages[rating()] || `Rating: ${rating()} stars` + ]) + : null + ]); +}; +$mount(FeedbackDemo, '#demo-feedback'); +``` + + diff --git a/docs/components_old/select.md b/docs/components_old/select.md new file mode 100644 index 0000000..2d45a4a --- /dev/null +++ b/docs/components_old/select.md @@ -0,0 +1,366 @@ +# Select + +Dropdown select component with full DaisyUI styling, reactive options, and form integration. + +## Tag + +`Select` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :------------------ | :----------------------------------------------- | +| `label` | `string` | `-` | Label text above select | +| `options` | `Array<{value: string, label: string}>` | `[]` | Array of options with value and label | +| `value` | `string \| Signal` | `''` | Selected value | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `disabled` | `boolean \| Signal` | `false` | Disabled state | +| `onchange` | `function` | `-` | Change event handler | + +## Live Examples + +### Basic Select + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const selected = $('apple'); + + return Select({ + label: 'Choose a fruit', + options: [ + { value: 'apple', label: '🍎 Apple' }, + { value: 'banana', label: '🍌 Banana' }, + { value: 'orange', label: '🍊 Orange' }, + { value: 'grape', label: '🍇 Grape' } + ], + value: selected, + onchange: (e) => selected(e.target.value) + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Reactive Display + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const selected = $('small'); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Select({ + label: 'Select size', + options: [ + { value: 'small', label: 'Small' }, + { value: 'medium', label: 'Medium' }, + { value: 'large', label: 'Large' } + ], + value: selected, + onchange: (e) => selected(e.target.value) + }), + Div({ class: 'alert alert-info' }, [ + `You selected: ${selected()}` + ]) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Disabled State + +
+
+

Live Demo

+
+
+
+ +```javascript +const DisabledDemo = () => { + return Select({ + label: 'Country (disabled)', + options: [ + { value: 'mx', label: 'Mexico' }, + { value: 'us', label: 'United States' }, + { value: 'ca', label: 'Canada' } + ], + value: 'mx', + disabled: true + }); +}; +$mount(DisabledDemo, '#demo-disabled'); +``` + +### Dynamic Options + +
+
+

Live Demo

+
+
+
+ +```javascript +const DynamicDemo = () => { + const category = $('fruits'); + + const options = { + fruits: [ + { value: 'apple', label: '🍎 Apple' }, + { value: 'banana', label: '🍌 Banana' } + ], + vegetables: [ + { value: 'carrot', label: '🥕 Carrot' }, + { value: 'broccoli', label: '🥦 Broccoli' } + ] + }; + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Select({ + label: 'Category', + options: [ + { value: 'fruits', label: 'Fruits' }, + { value: 'vegetables', label: 'Vegetables' } + ], + value: category, + onchange: (e) => category(e.target.value) + }), + Select({ + label: 'Item', + options: () => options[category()] || [], + value: $(''), + onchange: (e) => console.log('Selected:', e.target.value) + }) + ]); +}; +$mount(DynamicDemo, '#demo-dynamic'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const primary = $('option1'); + const secondary = $('option2'); + const accent = $(''); + + return Div({ class: 'flex flex-col gap-4' }, [ + Select({ + label: 'Primary Select', + class: 'select-primary', + options: [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' }, + { value: 'option3', label: 'Option 3' } + ], + value: primary, + onchange: (e) => primary(e.target.value) + }), + Select({ + label: 'Secondary Select', + class: 'select-secondary', + options: [ + { value: 'option1', label: 'Option 1' }, + { value: 'option2', label: 'Option 2' } + ], + value: secondary, + onchange: (e) => secondary(e.target.value) + }), + Select({ + label: 'Ghost Select', + class: 'select-ghost', + options: [ + { value: '', label: 'Select an option' }, + { value: 'opt1', label: 'Option 1' }, + { value: 'opt2', label: 'Option 2' } + ], + value: accent, + onchange: (e) => accent(e.target.value) + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/stack.md b/docs/components_old/stack.md new file mode 100644 index 0000000..fd896c8 --- /dev/null +++ b/docs/components_old/stack.md @@ -0,0 +1,519 @@ +# Stack + +Stack component for layering multiple elements on top of each other, creating depth and visual hierarchy. + +## Tag + +`Stack` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `Array \| VNode` | `-` | Elements to stack (first is bottom, last is top) | + +## Live Examples + +### Basic Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Stack({ class: 'w-40' }, [ + Div({ class: 'bg-primary text-primary-content rounded-lg p-4 shadow-lg' }, 'Layer 1'), + Div({ class: 'bg-secondary text-secondary-content rounded-lg p-4 shadow-lg' }, 'Layer 2'), + Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3') + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Card Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const CardsDemo = () => { + return Stack({ class: 'w-64' }, [ + Div({ class: 'card bg-base-100 shadow-xl border border-base-300' }, [ + Div({ class: 'card-body p-4' }, [ + Span({ class: 'text-sm opacity-70' }, 'Back Card'), + Span({ class: 'font-bold' }, 'Additional info') + ]) + ]), + Div({ class: 'card bg-primary text-primary-content shadow-xl' }, [ + Div({ class: 'card-body p-4' }, [ + Span({ class: 'text-sm' }, 'Front Card'), + Span({ class: 'font-bold text-lg' }, 'Main Content') + ]) + ]) + ]); +}; +$mount(CardsDemo, '#demo-cards'); +``` + +### Avatar Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const AvatarsDemo = () => { + return Stack({ class: 'w-32' }, [ + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-neutral text-neutral-content rounded-full w-16' }, [ + Span({}, 'JD') + ]) + ]), + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-primary text-primary-content rounded-full w-16' }, [ + Span({}, 'JS') + ]) + ]), + Div({ class: 'avatar placeholder' }, [ + Div({ class: 'bg-secondary text-secondary-content rounded-full w-16' }, [ + Span({}, 'BC') + ]) + ]) + ]); +}; +$mount(AvatarsDemo, '#demo-avatars'); +``` + +### Image Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const ImagesDemo = () => { + return Stack({ class: 'w-48' }, [ + Div({ class: 'w-full h-32 bg-gradient-to-r from-primary to-secondary rounded-lg shadow-lg' }, [ + Div({ class: 'p-2 text-white text-sm' }, 'Background Image') + ]), + Div({ class: 'w-full h-32 bg-gradient-to-r from-secondary to-accent rounded-lg shadow-lg translate-x-2 translate-y-2' }, [ + Div({ class: 'p-2 text-white text-sm' }, 'Middle Layer') + ]), + Div({ class: 'w-full h-32 bg-gradient-to-r from-accent to-primary rounded-lg shadow-lg translate-x-4 translate-y-4 flex items-center justify-center' }, [ + Span({ class: 'text-white font-bold' }, 'Top Layer') + ]) + ]); +}; +$mount(ImagesDemo, '#demo-images'); +``` + +### Photo Gallery Stack + +
+
+

Live Demo

+ +
+
+ +```javascript +const GalleryDemo = () => { + const photos = [ + { color: 'bg-primary', label: 'Photo 1' }, + { color: 'bg-secondary', label: 'Photo 2' }, + { color: 'bg-accent', label: 'Photo 3' }, + { color: 'bg-info', label: 'Photo 4' } + ]; + + return Stack({ class: 'w-48 cursor-pointer hover:scale-105 transition-transform' }, [ + ...photos.map((photo, idx) => + Div({ + class: `${photo.color} rounded-lg shadow-lg transition-all`, + style: `transform: translate(${idx * 4}px, ${idx * 4}px); width: 100%; height: 100%;` + }, [ + Div({ class: 'p-4 text-white font-bold' }, photo.label) + ]) + ) + ]); +}; +$mount(GalleryDemo, '#demo-gallery'); +``` + +### Interactive Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const InteractiveDemo = () => { + const active = $(0); + const colors = ['primary', 'secondary', 'accent', 'info', 'success']; + const labels = ['Home', 'Profile', 'Settings', 'Messages', 'Notifications']; + + return Div({ class: 'flex flex-col gap-6 items-center' }, [ + Stack({ class: 'w-56' }, colors.map((color, idx) => + Div({ + class: `bg-${color} text-${color}-content rounded-lg p-4 shadow-lg transition-all cursor-pointer ${idx === active() ? 'scale-105 z-10' : ''}`, + style: `transform: translate(${idx * 8}px, ${idx * 8}px);`, + onclick: () => active(idx) + }, [ + Div({ class: 'font-bold' }, labels[idx]), + Div({ class: 'text-sm opacity-80' }, `Layer ${idx + 1}`) + ]) + )), + Div({ class: 'mt-4 text-center' }, [ + Span({ class: 'font-bold' }, () => `Active: ${labels[active()]}`), + Div({ class: 'flex gap-2 mt-2' }, colors.map((_, idx) => + Button({ + class: `btn btn-xs ${idx === active() ? 'btn-primary' : 'btn-ghost'}`, + onclick: () => active(idx) + }, `${idx + 1}`) + )) + ]) + ]); +}; +$mount(InteractiveDemo, '#demo-interactive'); +``` + +### Notification Stack + +
+
+

Live Demo

+
+
+
+ +```javascript +const NotificationsDemo = () => { + const notifications = $([ + { id: 1, message: 'New message from John', type: 'info' }, + { id: 2, message: 'Your order has shipped', type: 'success' }, + { id: 3, message: 'Meeting in 10 minutes', type: 'warning' } + ]); + + const removeNotification = (id) => { + notifications(notifications().filter(n => n.id !== id)); + }; + + const typeClasses = { + info: 'bg-info text-info-content', + success: 'bg-success text-success-content', + warning: 'bg-warning text-warning-content', + error: 'bg-error text-error-content' + }; + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Stack({ class: 'w-80' }, notifications().map((notif, idx) => + Div({ + class: `${typeClasses[notif.type]} rounded-lg p-3 shadow-lg transition-all cursor-pointer`, + style: `transform: translate(${idx * 4}px, ${idx * 4}px);`, + onclick: () => removeNotification(notif.id) + }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'text-sm' }, notif.message), + Span({ class: 'text-xs opacity-70 cursor-pointer hover:opacity-100' }, '✕') + ]) + ]) + )), + notifications().length === 0 + ? Div({ class: 'alert alert-soft' }, 'No notifications') + : Button({ + class: 'btn btn-sm btn-ghost mt-2', + onclick: () => notifications([]) + }, 'Clear All') + ]); +}; +$mount(NotificationsDemo, '#demo-notifications'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Small Stack'), + Stack({ class: 'w-24' }, [ + Div({ class: 'bg-primary rounded p-2 text-xs' }, '1'), + Div({ class: 'bg-secondary rounded p-2 text-xs' }, '2'), + Div({ class: 'bg-accent rounded p-2 text-xs' }, '3') + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Medium Stack'), + Stack({ class: 'w-32' }, [ + Div({ class: 'bg-primary rounded p-3' }, 'A'), + Div({ class: 'bg-secondary rounded p-3' }, 'B'), + Div({ class: 'bg-accent rounded p-3' }, 'C') + ]) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-sm mb-2' }, 'Large Stack'), + Stack({ class: 'w-40' }, [ + Div({ class: 'bg-primary rounded p-4' }, 'X'), + Div({ class: 'bg-secondary rounded p-4' }, 'Y'), + Div({ class: 'bg-accent rounded p-4' }, 'Z') + ]) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/stat.md b/docs/components_old/stat.md new file mode 100644 index 0000000..c683eda --- /dev/null +++ b/docs/components_old/stat.md @@ -0,0 +1,644 @@ +# Stat + +Statistic card component for displaying metrics, counts, and key performance indicators with optional icons and descriptions. + +## Tag + +`Stat` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `label` | `string \| VNode \| Signal` | `-` | Statistic label/title | +| `value` | `string \| number \| Signal` | `-` | Main statistic value | +| `desc` | `string \| VNode \| Signal` | `-` | Description or trend text | +| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed in the figure area | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Stat + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [ + Stat({ + label: 'Total Users', + value: '2,345', + desc: '↗︎ 120 new users this month' + }), + Stat({ + label: 'Revenue', + value: '$45,678', + desc: '↘︎ 5% decrease from last month' + }), + Stat({ + label: 'Conversion Rate', + value: '3.45%', + desc: '↗︎ 0.5% increase' + }) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [ + Stat({ + label: 'Active Users', + value: '1,234', + desc: 'Currently online', + icon: Icons.iconShow + }), + Stat({ + label: 'New Orders', + value: '89', + desc: 'Today', + icon: Icons.iconSuccess + }), + Stat({ + label: 'Pending Tasks', + value: '23', + desc: 'Need attention', + icon: Icons.iconWarning + }) + ]); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Reactive Values + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const count = $(0); + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [ + Stat({ + label: 'Counter', + value: () => count(), + desc: 'Click the button to increase', + icon: Icons.iconInfo + }), + Stat({ + label: 'Squared', + value: () => Math.pow(count(), 2), + desc: 'Square of counter', + icon: Icons.iconSuccess + }) + ]), + Div({ class: 'flex gap-2 justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: () => count(count() + 1) + }, 'Increment'), + Button({ + class: 'btn btn-ghost', + onclick: () => count(0) + }, 'Reset') + ]) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### With Trend Indicators + +
+
+

Live Demo

+ +
+
+ +```javascript +const TrendsDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [ + Stat({ + label: 'Weekly Sales', + value: '$12,345', + desc: Div({ class: 'text-success' }, '↗︎ 15% increase'), + icon: Icons.iconSuccess + }), + Stat({ + label: 'Bounce Rate', + value: '42%', + desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'), + icon: Icons.iconError + }), + Stat({ + label: 'Avg. Session', + value: '4m 32s', + desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'), + icon: Icons.iconWarning + }) + ]); +}; +$mount(TrendsDemo, '#demo-trends'); +``` + +### Multiple Stats in Row + +
+
+

Live Demo

+
+
+
+ +```javascript +const MultipleDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [ + Stat({ + label: 'Posts', + value: '1,234', + desc: 'Total content', + icon: Span({ class: 'text-2xl' }, '📝') + }), + Stat({ + label: 'Comments', + value: '8,901', + desc: 'Engagement', + icon: Span({ class: 'text-2xl' }, '💬') + }), + Stat({ + label: 'Likes', + value: '12,345', + desc: 'Reactions', + icon: Span({ class: 'text-2xl' }, '❤️') + }), + Stat({ + label: 'Shares', + value: '456', + desc: 'Viral reach', + icon: Span({ class: 'text-2xl' }, '🔄') + }) + ]); +}; +$mount(MultipleDemo, '#demo-multiple'); +``` + +### Dashboard Example + +
+
+

Live Demo

+
+
+
+ +```javascript +const DashboardDemo = () => { + const stats = $({ + users: 1245, + revenue: 89342, + orders: 342, + satisfaction: 94 + }); + + const updateStats = () => { + stats({ + users: stats().users + Math.floor(Math.random() * 50), + revenue: stats().revenue + Math.floor(Math.random() * 1000), + orders: stats().orders + Math.floor(Math.random() * 20), + satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2) + }); + }; + + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [ + Stat({ + label: 'Total Users', + value: () => stats().users.toLocaleString(), + desc: 'Registered users', + icon: Icons.iconShow + }), + Stat({ + label: 'Revenue', + value: () => `$${stats().revenue.toLocaleString()}`, + desc: 'This month', + icon: Icons.iconSuccess + }), + Stat({ + label: 'Orders', + value: () => stats().orders.toLocaleString(), + desc: 'Completed', + icon: Icons.iconInfo + }), + Stat({ + label: 'Satisfaction', + value: () => `${stats().satisfaction}%`, + desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good', + icon: Icons.iconWarning + }) + ]), + Div({ class: 'flex justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: updateStats + }, 'Refresh Data') + ]) + ]); +}; +$mount(DashboardDemo, '#demo-dashboard'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [ + Stat({ + label: 'Primary Stat', + value: '1,234', + desc: 'With description', + icon: Icons.iconInfo, + class: 'bg-primary/10 text-primary' + }), + Stat({ + label: 'Success Stat', + value: '89%', + desc: 'Success rate', + icon: Icons.iconSuccess, + class: 'bg-success/10 text-success' + }), + Stat({ + label: 'Warning Stat', + value: '23', + desc: 'Pending items', + icon: Icons.iconWarning, + class: 'bg-warning/10 text-warning' + }), + Stat({ + label: 'Error Stat', + value: '5', + desc: 'Failed attempts', + icon: Icons.iconError, + class: 'bg-error/10 text-error' + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Compact Stats + +
+
+

Live Demo

+
+
+
+ +```javascript +const CompactDemo = () => { + return Div({ class: 'flex flex-wrap gap-4' }, [ + Stat({ + label: 'Views', + value: '12.3K', + class: 'stat-compact' + }), + Stat({ + label: 'Likes', + value: '2,456', + class: 'stat-compact' + }), + Stat({ + label: 'Comments', + value: '345', + class: 'stat-compact' + }), + Stat({ + label: 'Shares', + value: '89', + class: 'stat-compact' + }) + ]); +}; +$mount(CompactDemo, '#demo-compact'); +``` + + diff --git a/docs/components_old/swap.md b/docs/components_old/swap.md new file mode 100644 index 0000000..afb8d45 --- /dev/null +++ b/docs/components_old/swap.md @@ -0,0 +1,500 @@ +# Swap + +Toggle component that swaps between two states (on/off) with customizable icons or content. + +## Tag + +`Swap` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `value` | `boolean \| Signal` | `false` | Swap state (true = on, false = off) | +| `on` | `string \| VNode` | `-` | Content to show when state is on | +| `off` | `string \| VNode` | `-` | Content to show when state is off | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `onclick` | `function` | `-` | Click event handler | + +## Live Examples + +### Basic Swap + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const isOn = $(false); + + return Swap({ + value: isOn, + on: "🌟 ON", + off: "💫 OFF", + onclick: () => isOn(!isOn()) + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Icon Swap + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + const isOn = $(false); + + return Swap({ + value: isOn, + on: Icons.iconShow, + off: Icons.iconHide, + onclick: () => isOn(!isOn()) + }); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Emoji Swap + +
+
+

Live Demo

+
+
+
+ +```javascript +const EmojiDemo = () => { + const isOn = $(false); + + return Swap({ + value: isOn, + on: "❤️", + off: "🖤", + onclick: () => isOn(!isOn()) + }); +}; +$mount(EmojiDemo, '#demo-emoji'); +``` + +### Custom Content Swap + +
+
+

Live Demo

+
+
+
+ +```javascript +const CustomDemo = () => { + const isOn = $(false); + + return Swap({ + value: isOn, + on: Div({ class: "badge badge-success gap-1" }, ["✅", " Active"]), + off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"]), + onclick: () => isOn(!isOn()) + }); +}; +$mount(CustomDemo, '#demo-custom'); +``` + +### With Reactive State + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const isOn = $(false); + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Swap({ + value: isOn, + on: Icons.iconShow, + off: Icons.iconHide, + onclick: () => isOn(!isOn()) + }), + Div({ class: 'text-center' }, () => + isOn() + ? Div({ class: 'alert alert-success' }, 'Content is visible') + : Div({ class: 'alert alert-soft' }, 'Content is hidden') + ) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Toggle Mode Swap + +
+
+

Live Demo

+
+
+
+ +```javascript +const ModeDemo = () => { + const darkMode = $(false); + const notifications = $(true); + const sound = $(false); + + return Div({ class: 'flex flex-col gap-4 w-full' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({}, 'Dark mode'), + Swap({ + value: darkMode, + on: "🌙", + off: "☀️", + onclick: () => darkMode(!darkMode()) + }) + ]), + Div({ class: 'flex justify-between items-center' }, [ + Span({}, 'Notifications'), + Swap({ + value: notifications, + on: "🔔", + off: "🔕", + onclick: () => notifications(!notifications()) + }) + ]), + Div({ class: 'flex justify-between items-center' }, [ + Span({}, 'Sound effects'), + Swap({ + value: sound, + on: "🔊", + off: "🔇", + onclick: () => sound(!sound()) + }) + ]), + Div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [ + Div({ class: 'text-sm' }, () => `Mode: ${darkMode() ? 'Dark' : 'Light'} | Notifications: ${notifications() ? 'On' : 'Off'} | Sound: ${sound() ? 'On' : 'Off'}`) + ]) + ]); +}; +$mount(ModeDemo, '#demo-mode'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [ + Div({ class: 'text-center' }, [ + Div({ class: 'text-xs mb-2' }, 'Volume'), + Swap({ + value: $(false), + on: "🔊", + off: "🔇" + }) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-xs mb-2' }, 'Like'), + Swap({ + value: $(true), + on: "❤️", + off: "🤍" + }) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-xs mb-2' }, 'Star'), + Swap({ + value: $(false), + on: "⭐", + off: "☆" + }) + ]), + Div({ class: 'text-center' }, [ + Div({ class: 'text-xs mb-2' }, 'Check'), + Swap({ + value: $(true), + on: Icons.iconSuccess, + off: Icons.iconError + }) + ]) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + +### Simple Todo Toggle + +
+
+

Live Demo

+
+
+
+ +```javascript +const TodoDemo = () => { + const todos = [ + { id: 1, text: 'Complete documentation', completed: $(true) }, + { id: 2, text: 'Review pull requests', completed: $(false) }, + { id: 3, text: 'Deploy to production', completed: $(false) } + ]; + + return Div({ class: 'flex flex-col gap-3' }, [ + Div({ class: 'text-sm font-bold mb-2' }, 'Todo list'), + ...todos.map(todo => + Div({ class: 'flex items-center justify-between p-2 bg-base-200 rounded-lg' }, [ + Span({ class: todo.completed() ? 'line-through opacity-50' : '' }, todo.text), + Swap({ + value: todo.completed, + on: Icons.iconSuccess, + off: Icons.iconClose, + onclick: () => todo.completed(!todo.completed()) + }) + ]) + ), + Div({ class: 'mt-2 text-sm opacity-70' }, () => { + const completed = todos.filter(t => t.completed()).length; + return `${completed} of ${todos.length} tasks completed`; + }) + ]); +}; +$mount(TodoDemo, '#demo-todo'); +``` + + diff --git a/docs/components_old/table.md b/docs/components_old/table.md new file mode 100644 index 0000000..8e27b4b --- /dev/null +++ b/docs/components_old/table.md @@ -0,0 +1,716 @@ +# Table + +Data table component with sorting, pagination, zebra stripes, pin rows, and custom cell rendering. + +## Tag + +`Table` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- | +| `items` | `Array \| Signal` | `[]` | Data array to display | +| `columns` | `Array<{label: string, key?: string, render?: function, class?: string, footer?: string}>` | `[]` | Column definitions | +| `keyFn` | `function` | `(item, idx) => idx` | Unique key function for rows | +| `zebra` | `boolean \| Signal` | `false` | Enable zebra striping | +| `pinRows` | `boolean \| Signal` | `false` | Pin header rows on scroll | +| `empty` | `string \| VNode` | `'No data'` | Content to show when no data | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +## Live Examples + +### Basic Table + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const users = [ + { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' }, + { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' }, + { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' } + ]; + + return Table({ + items: users, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Email', key: 'email' }, + { label: 'Role', key: 'role' } + ] + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Zebra Stripes + +
+
+

Live Demo

+
+
+
+ +```javascript +const ZebraDemo = () => { + const products = [ + { id: 1, name: 'Laptop', price: '$999', stock: 15 }, + { id: 2, name: 'Mouse', price: '$29', stock: 42 }, + { id: 3, name: 'Keyboard', price: '$79', stock: 28 }, + { id: 4, name: 'Monitor', price: '$299', stock: 12 } + ]; + + return Table({ + items: products, + columns: [ + { label: 'Product', key: 'name' }, + { label: 'Price', key: 'price' }, + { label: 'Stock', key: 'stock' } + ], + zebra: true + }); +}; +$mount(ZebraDemo, '#demo-zebra'); +``` + +### With Custom Cell Rendering + +
+
+

Live Demo

+
+
+
+ +```javascript +const CustomDemo = () => { + const orders = [ + { id: 101, customer: 'Alice', amount: 250, status: 'completed' }, + { id: 102, customer: 'Bob', amount: 89, status: 'pending' }, + { id: 103, customer: 'Charlie', amount: 450, status: 'shipped' } + ]; + + return Table({ + items: orders, + columns: [ + { label: 'Order ID', key: 'id' }, + { label: 'Customer', key: 'customer' }, + { + label: 'Amount', + key: 'amount', + render: (item) => `$${item.amount}` + }, + { + label: 'Status', + key: 'status', + render: (item) => { + const statusClass = { + completed: 'badge badge-success', + pending: 'badge badge-warning', + shipped: 'badge badge-info' + }; + return Span({ class: statusClass[item.status] }, item.status); + } + } + ], + zebra: true + }); +}; +$mount(CustomDemo, '#demo-custom'); +``` + +### With Footers + +
+
+

Live Demo

+ +
+
+ +```javascript +const FooterDemo = () => { + const sales = [ + { month: 'January', revenue: 12500, expenses: 8900 }, + { month: 'February', revenue: 14200, expenses: 9200 }, + { month: 'March', revenue: 16800, expenses: 10100 } + ]; + + const totalRevenue = sales.reduce((sum, item) => sum + item.revenue, 0); + const totalExpenses = sales.reduce((sum, item) => sum + item.expenses, 0); + + return Table({ + items: sales, + columns: [ + { label: 'Month', key: 'month' }, + { + label: 'Revenue', + key: 'revenue', + render: (item) => `$${item.revenue.toLocaleString()}`, + footer: `Total: $${totalRevenue.toLocaleString()}` + }, + { + label: 'Expenses', + key: 'expenses', + render: (item) => `$${item.expenses.toLocaleString()}`, + footer: `Total: $${totalExpenses.toLocaleString()}` + }, + { + label: 'Profit', + render: (item) => `$${(item.revenue - item.expenses).toLocaleString()}`, + footer: `$${(totalRevenue - totalExpenses).toLocaleString()}` + } + ], + zebra: true + }); +}; +$mount(FooterDemo, '#demo-footer'); +``` + +### Empty State + +
+
+

Live Demo

+
+
+
+ +```javascript +const EmptyDemo = () => { + const emptyList = []; + + return Table({ + items: emptyList, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' } + ], + empty: Div({ class: 'flex flex-col items-center gap-2' }, [ + Icons.iconInfo, + Span({}, 'No records found') + ]) + }); +}; +$mount(EmptyDemo, '#demo-empty'); +``` + +### Reactive Data + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const filter = $('all'); + const tasks = $([ + { id: 1, title: 'Complete documentation', completed: true }, + { id: 2, title: 'Review pull requests', completed: false }, + { id: 3, title: 'Deploy to production', completed: false }, + { id: 4, title: 'Update dependencies', completed: true } + ]); + + const filteredTasks = () => { + if (filter() === 'completed') { + return tasks().filter(t => t.completed); + } else if (filter() === 'pending') { + return tasks().filter(t => !t.completed); + } + return tasks(); + }; + + const addTask = () => { + const newId = Math.max(...tasks().map(t => t.id), 0) + 1; + tasks([...tasks(), { id: newId, title: `Task ${newId}`, completed: false }]); + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex gap-2' }, [ + Button({ + class: 'btn btn-sm', + onclick: () => filter('all') + }, 'All'), + Button({ + class: 'btn btn-sm', + onclick: () => filter('completed') + }, 'Completed'), + Button({ + class: 'btn btn-sm', + onclick: () => filter('pending') + }, 'Pending'), + Button({ + class: 'btn btn-sm btn-primary', + onclick: addTask + }, 'Add Task') + ]), + Table({ + items: filteredTasks, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Title', key: 'title' }, + { + label: 'Status', + render: (item) => item.completed + ? Span({ class: 'badge badge-success' }, '✓ Done') + : Span({ class: 'badge badge-warning' }, '○ Pending') + } + ], + zebra: true + }) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### With Actions + +
+
+

Live Demo

+
+
+
+ +```javascript +const ActionsDemo = () => { + const users = $([ + { id: 1, name: 'John Doe', email: 'john@example.com', active: true }, + { id: 2, name: 'Jane Smith', email: 'jane@example.com', active: false }, + { id: 3, name: 'Bob Johnson', email: 'bob@example.com', active: true } + ]); + + const deleteUser = (id) => { + users(users().filter(u => u.id !== id)); + Toast('User deleted', 'alert-info', 2000); + }; + + const toggleActive = (id) => { + users(users().map(u => + u.id === id ? { ...u, active: !u.active } : u + )); + }; + + return Table({ + items: users, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Email', key: 'email' }, + { + label: 'Status', + render: (item) => item.active + ? Span({ class: 'badge badge-success' }, 'Active') + : Span({ class: 'badge badge-ghost' }, 'Inactive') + }, + { + label: 'Actions', + render: (item) => Div({ class: 'flex gap-1' }, [ + Button({ + class: 'btn btn-xs btn-ghost', + onclick: () => toggleActive(item.id) + }, item.active ? 'Deactivate' : 'Activate'), + Button({ + class: 'btn btn-xs btn-error', + onclick: () => deleteUser(item.id) + }, 'Delete') + ]) + } + ], + zebra: true + }); +}; +$mount(ActionsDemo, '#demo-actions'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const data = [ + { id: 1, name: 'Item 1', value: 100 }, + { id: 2, name: 'Item 2', value: 200 }, + { id: 3, name: 'Item 3', value: 300 } + ]; + + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'text-sm font-bold' }, 'Default Table'), + Table({ + items: data, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Value', key: 'value' } + ] + }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Zebra Stripes'), + Table({ + items: data, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Value', key: 'value' } + ], + zebra: true + }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Compact Table'), + Table({ + items: data, + columns: [ + { label: 'ID', key: 'id' }, + { label: 'Name', key: 'name' }, + { label: 'Value', key: 'value' } + ], + class: 'table-compact' + }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/tabs.md b/docs/components_old/tabs.md new file mode 100644 index 0000000..2a58797 --- /dev/null +++ b/docs/components_old/tabs.md @@ -0,0 +1,677 @@ +# Tabs + +Tabs component for organizing content into separate panels with tab navigation. + +## Tag + +`Tabs` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- | +| `items` | `Array \| Signal` | `[]` | Array of tab items | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +### TabItem Structure + +| Property | Type | Description | +| :---------- | :--------------------------- | :----------------------------------------------- | +| `label` | `string \| VNode` | Tab button label | +| `content` | `VNode \| function` | Content to display when tab is active | +| `active` | `boolean \| Signal` | Whether this tab is active (only one per group) | +| `disabled` | `boolean` | Whether tab is disabled | +| `tip` | `string` | Tooltip text for the tab | +| `onclick` | `function` | Click handler (optional, overrides default) | + +## Live Examples + +### Basic Tabs + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const activeTab = $('tab1'); + + return Tabs({ + items: [ + { + label: 'Tab 1', + active: () => activeTab() === 'tab1', + onclick: () => activeTab('tab1'), + content: Div({ class: 'p-4' }, 'Content for Tab 1') + }, + { + label: 'Tab 2', + active: () => activeTab() === 'tab2', + onclick: () => activeTab('tab2'), + content: Div({ class: 'p-4' }, 'Content for Tab 2') + }, + { + label: 'Tab 3', + active: () => activeTab() === 'tab3', + onclick: () => activeTab('tab3'), + content: Div({ class: 'p-4' }, 'Content for Tab 3') + } + ] + }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### With Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + const activeTab = $('home'); + + return Tabs({ + items: [ + { + label: Span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']), + active: () => activeTab() === 'home', + onclick: () => activeTab('home'), + content: Div({ class: 'p-4' }, 'Welcome to the Home tab!') + }, + { + label: Span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']), + active: () => activeTab() === 'favorites', + onclick: () => activeTab('favorites'), + content: Div({ class: 'p-4' }, 'Your favorite items appear here.') + }, + { + label: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']), + active: () => activeTab() === 'settings', + onclick: () => activeTab('settings'), + content: Div({ class: 'p-4' }, 'Configure your preferences.') + } + ] + }); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### With Tooltips + +
+
+

Live Demo

+
+
+
+ +```javascript +const TooltipsDemo = () => { + const activeTab = $('profile'); + + return Tabs({ + items: [ + { + label: 'Profile', + tip: 'View your profile information', + active: () => activeTab() === 'profile', + onclick: () => activeTab('profile'), + content: Div({ class: 'p-4' }, 'Profile information here.') + }, + { + label: 'Settings', + tip: 'Adjust your preferences', + active: () => activeTab() === 'settings', + onclick: () => activeTab('settings'), + content: Div({ class: 'p-4' }, 'Settings configuration.') + }, + { + label: 'Notifications', + tip: 'Manage notifications', + active: () => activeTab() === 'notifications', + onclick: () => activeTab('notifications'), + content: Div({ class: 'p-4' }, 'Notification settings.') + } + ] + }); +}; +$mount(TooltipsDemo, '#demo-tooltips'); +``` + +### Disabled Tab + +
+
+

Live Demo

+
+
+
+ +```javascript +const DisabledDemo = () => { + const activeTab = $('basic'); + + return Tabs({ + items: [ + { + label: 'Basic', + active: () => activeTab() === 'basic', + onclick: () => activeTab('basic'), + content: Div({ class: 'p-4' }, 'Basic features available.') + }, + { + label: 'Premium', + disabled: true, + tip: 'Upgrade to access', + content: Div({ class: 'p-4' }, 'Premium content (locked)') + }, + { + label: 'Pro', + disabled: true, + tip: 'Coming soon', + content: Div({ class: 'p-4' }, 'Pro features (coming soon)') + } + ] + }); +}; +$mount(DisabledDemo, '#demo-disabled'); +``` + +### Reactive Content + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const activeTab = $('counter'); + const count = $(0); + + return Tabs({ + items: [ + { + label: 'Counter', + active: () => activeTab() === 'counter', + onclick: () => activeTab('counter'), + content: Div({ class: 'p-4 text-center' }, [ + Div({ class: 'text-4xl font-bold mb-4' }, () => count()), + Button({ + class: 'btn btn-primary', + onclick: () => count(count() + 1) + }, 'Increment') + ]) + }, + { + label: 'Timer', + active: () => activeTab() === 'timer', + onclick: () => activeTab('timer'), + content: Div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`) + }, + { + label: 'Status', + active: () => activeTab() === 'status', + onclick: () => activeTab('status'), + content: Div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`) + } + ] + }); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Form Tabs + +
+
+

Live Demo

+
+
+
+ +```javascript +const FormTabs = () => { + const activeTab = $('personal'); + const formData = $({ + name: '', + email: '', + address: '', + city: '', + notifications: true, + newsletter: false + }); + + const updateField = (field, value) => { + formData({ ...formData(), [field]: value }); + }; + + const handleSubmit = () => { + Toast('Form submitted!', 'alert-success', 2000); + console.log(formData()); + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Tabs({ + items: [ + { + label: 'Personal Info', + active: () => activeTab() === 'personal', + onclick: () => activeTab('personal'), + content: Div({ class: 'p-4 space-y-4' }, [ + Input({ + label: 'Name', + value: () => formData().name, + placeholder: 'Enter your name', + oninput: (e) => updateField('name', e.target.value) + }), + Input({ + label: 'Email', + type: 'email', + value: () => formData().email, + placeholder: 'email@example.com', + oninput: (e) => updateField('email', e.target.value) + }) + ]) + }, + { + label: 'Address', + active: () => activeTab() === 'address', + onclick: () => activeTab('address'), + content: Div({ class: 'p-4 space-y-4' }, [ + Input({ + label: 'Address', + value: () => formData().address, + placeholder: 'Street address', + oninput: (e) => updateField('address', e.target.value) + }), + Input({ + label: 'City', + value: () => formData().city, + placeholder: 'City', + oninput: (e) => updateField('city', e.target.value) + }) + ]) + }, + { + label: 'Preferences', + active: () => activeTab() === 'prefs', + onclick: () => activeTab('prefs'), + content: Div({ class: 'p-4 space-y-4' }, [ + Checkbox({ + label: 'Email notifications', + value: () => formData().notifications, + onclick: () => updateField('notifications', !formData().notifications) + }), + Checkbox({ + label: 'Newsletter subscription', + value: () => formData().newsletter, + onclick: () => updateField('newsletter', !formData().newsletter) + }) + ]) + } + ] + }), + Div({ class: 'flex justify-end mt-4' }, [ + Button({ + class: 'btn btn-primary', + onclick: handleSubmit + }, 'Submit') + ]) + ]); +}; +$mount(FormTabs, '#demo-form'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const items = [ + { label: 'Tab 1', content: 'Content 1' }, + { label: 'Tab 2', content: 'Content 2' }, + { label: 'Tab 3', content: 'Content 3' } + ].map((tab, idx) => ({ + ...tab, + active: () => idx === 0, + content: Div({ class: 'p-4' }, tab.content) + })); + + return Div({ class: 'flex flex-col gap-6' }, [ + Div({ class: 'text-sm font-bold' }, 'Default Tabs'), + Tabs({ items }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'), + Tabs({ items, class: 'tabs-box' }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'), + Tabs({ items, class: 'tabs-lifted' }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + diff --git a/docs/components_old/timeline.md b/docs/components_old/timeline.md new file mode 100644 index 0000000..372bf18 --- /dev/null +++ b/docs/components_old/timeline.md @@ -0,0 +1,553 @@ +# Timeline + +Timeline component for displaying chronological events, steps, or progress with customizable icons and content. + +## Tag + +`Timeline` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- | +| `items` | `Array \| Signal` | `[]` | Timeline items to display | +| `vertical` | `boolean \| Signal` | `true` | Vertical or horizontal orientation | +| `compact` | `boolean \| Signal` | `false` | Compact mode with less padding | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | + +### TimelineItem Structure + +| Property | Type | Description | +| :---------- | :--------------------------- | :----------------------------------------------- | +| `title` | `string \| VNode \| Signal` | Event title or main text | +| `detail` | `string \| VNode \| Signal` | Additional details or description | +| `icon` | `string \| VNode` | Custom icon (overrides type) | +| `type` | `string` | Type: 'success', 'warning', 'error', 'info' | +| `completed` | `boolean` | Whether event is completed (affects connector) | + +## Live Examples + +### Basic Timeline + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + const events = [ + { title: 'Project Started', detail: 'Initial planning and setup', type: 'info', completed: true }, + { title: 'Design Phase', detail: 'UI/UX design completed', type: 'success', completed: true }, + { title: 'Development', detail: 'Core features implemented', type: 'warning', completed: false }, + { title: 'Testing', detail: 'Quality assurance', type: 'info', completed: false }, + { title: 'Launch', detail: 'Production deployment', type: 'success', completed: false } + ]; + + return Timeline({ items: events }); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Horizontal Timeline + +
+
+

Live Demo

+
+
+
+ +```javascript +const HorizontalDemo = () => { + const steps = [ + { title: 'Step 1', detail: 'Requirements', type: 'success', completed: true }, + { title: 'Step 2', detail: 'Design', type: 'success', completed: true }, + { title: 'Step 3', detail: 'Development', type: 'warning', completed: false }, + { title: 'Step 4', detail: 'Testing', type: 'info', completed: false }, + { title: 'Step 5', detail: 'Deploy', type: 'info', completed: false } + ]; + + return Timeline({ + items: steps, + vertical: false, + class: 'min-w-[600px]' + }); +}; +$mount(HorizontalDemo, '#demo-horizontal'); +``` + +### Compact Timeline + +
+
+

Live Demo

+
+
+
+ +```javascript +const CompactDemo = () => { + const activities = [ + { title: 'User login', detail: '10:30 AM', type: 'success', completed: true }, + { title: 'Viewed dashboard', detail: '10:32 AM', type: 'info', completed: true }, + { title: 'Updated profile', detail: '10:45 AM', type: 'success', completed: true }, + { title: 'Made purchase', detail: '11:00 AM', type: 'warning', completed: false } + ]; + + return Timeline({ + items: activities, + compact: true + }); +}; +$mount(CompactDemo, '#demo-compact'); +``` + +### Custom Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + const milestones = [ + { title: 'Kickoff', detail: 'Project kickoff meeting', icon: Icons.iconInfo, completed: true }, + { title: 'MVP', detail: 'Minimum viable product', icon: Icons.iconSuccess, completed: true }, + { title: 'Beta', detail: 'Beta release', icon: Icons.iconWarning, completed: false }, + { title: 'Launch', detail: 'Public launch', icon: Icons.iconShow, completed: false } + ]; + + return Timeline({ items: milestones }); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Reactive Timeline + +
+
+

Live Demo

+
+
+
+ +```javascript +const ReactiveDemo = () => { + const currentStep = $(2); + const steps = [ + { title: 'Order Placed', detail: 'Your order has been confirmed', type: 'success', completed: true }, + { title: 'Processing', detail: 'Payment verified, preparing shipment', type: 'success', completed: currentStep() > 1 }, + { title: 'Shipped', detail: 'Package on the way', type: 'warning', completed: currentStep() > 2 }, + { title: 'Delivered', detail: 'Arriving soon', type: 'info', completed: currentStep() > 3 } + ]; + + const items = () => steps.map((step, idx) => ({ + ...step, + completed: idx < currentStep() + })); + + const nextStep = () => { + if (currentStep() < steps.length) { + currentStep(currentStep() + 1); + Toast(`Step ${currentStep()}: ${steps[currentStep() - 1].title}`, 'alert-info', 1500); + } + }; + + const reset = () => { + currentStep(0); + Toast('Order tracking reset', 'alert-warning', 1500); + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Timeline({ items: items }), + Div({ class: 'flex gap-2 justify-center mt-4' }, [ + Button({ + class: 'btn btn-primary btn-sm', + onclick: nextStep, + disabled: () => currentStep() >= steps.length + }, 'Next Step'), + Button({ + class: 'btn btn-ghost btn-sm', + onclick: reset + }, 'Reset') + ]) + ]); +}; +$mount(ReactiveDemo, '#demo-reactive'); +``` + +### Order Status Tracker + +
+
+

Live Demo

+
+
+
+ +```javascript +const OrderDemo = () => { + const status = $('shipped'); + + const statusMap = { + pending: { title: 'Order Pending', detail: 'Awaiting confirmation', completed: false, type: 'warning' }, + confirmed: { title: 'Order Confirmed', detail: 'Payment received', completed: false, type: 'info' }, + processing: { title: 'Processing', detail: 'Preparing your order', completed: false, type: 'info' }, + shipped: { title: 'Shipped', detail: 'Package in transit', completed: false, type: 'info' }, + delivered: { title: 'Delivered', detail: 'Order completed', completed: false, type: 'success' } + }; + + const statusOrder = ['pending', 'confirmed', 'processing', 'shipped', 'delivered']; + const currentIndex = statusOrder.indexOf(status()); + + const items = statusOrder.map((key, idx) => ({ + ...statusMap[key], + completed: idx < currentIndex + })); + + return Div({ class: 'flex flex-col gap-4' }, [ + Timeline({ items, compact: true }), + Div({ class: 'flex gap-2 justify-center flex-wrap mt-4' }, statusOrder.map(s => + Button({ + class: `btn btn-xs ${status() === s ? 'btn-primary' : 'btn-ghost'}`, + onclick: () => status(s) + }, statusMap[s].title) + )) + ]); +}; +$mount(OrderDemo, '#demo-order'); +``` + +### Company History + +
+
+

Live Demo

+
+
+
+ +```javascript +const HistoryDemo = () => { + const milestones = [ + { + title: '2015 - Founded', + detail: 'Company started with 3 employees in a small office', + type: 'success', + completed: true + }, + { + title: '2017 - First Product', + detail: 'Launched our first software product to market', + type: 'success', + completed: true + }, + { + title: '2019 - Series A', + detail: 'Raised $5M in funding, expanded team to 50', + type: 'success', + completed: true + }, + { + title: '2022 - Global Expansion', + detail: 'Opened offices in Europe and Asia', + type: 'info', + completed: true + }, + { + title: '2024 - AI Integration', + detail: 'Launched AI-powered features', + type: 'warning', + completed: false + }, + { + title: '2026 - Future Goals', + detail: 'Aiming for market leadership', + type: 'info', + completed: false + } + ]; + + return Timeline({ items: milestones }); +}; +$mount(HistoryDemo, '#demo-history'); +``` + +### All Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const VariantsDemo = () => { + const sampleItems = [ + { title: 'Event 1', detail: 'Description here', type: 'success', completed: true }, + { title: 'Event 2', detail: 'Description here', type: 'warning', completed: false }, + { title: 'Event 3', detail: 'Description here', type: 'info', completed: false } + ]; + + return Div({ class: 'flex flex-col gap-8' }, [ + Div({ class: 'text-sm font-bold' }, 'Vertical Timeline'), + Timeline({ items: sampleItems }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Horizontal Timeline'), + Timeline({ items: sampleItems, vertical: false, class: 'min-w-[500px]' }), + + Div({ class: 'text-sm font-bold mt-4' }, 'Compact Timeline'), + Timeline({ items: sampleItems, compact: true }) + ]); +}; +$mount(VariantsDemo, '#demo-variants'); +``` + + \ No newline at end of file diff --git a/docs/components_old/toast.md b/docs/components_old/toast.md new file mode 100644 index 0000000..e9f2c77 --- /dev/null +++ b/docs/components_old/toast.md @@ -0,0 +1,630 @@ +# Toast + +Toast notification utility for displaying temporary messages that automatically dismiss after a specified duration. Can be used programmatically. + +## Function + +`Toast(message, type = 'alert-info', duration = 3500)` + +| Param | Type | Default | Description | +| :--------- | :--------------------------- | :--------------- | :----------------------------------------------- | +| `message` | `string \| VNode` | `-` | Message content to display | +| `type` | `string` | `'alert-info'` | Alert type: 'alert-info', 'alert-success', 'alert-warning', 'alert-error' | +| `duration` | `number` | `3500` | Auto-dismiss duration in milliseconds | + +## Live Examples + +### Basic Toast + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [ + Button({ + class: 'btn btn-info', + onclick: () => Toast('This is an info message', 'alert-info', 3000) + }, 'Info Toast'), + Button({ + class: 'btn btn-success', + onclick: () => Toast('Operation successful!', 'alert-success', 3000) + }, 'Success Toast'), + Button({ + class: 'btn btn-warning', + onclick: () => Toast('Please check your input', 'alert-warning', 3000) + }, 'Warning Toast'), + Button({ + class: 'btn btn-error', + onclick: () => Toast('An error occurred', 'alert-error', 3000) + }, 'Error Toast') + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Different Durations + +
+
+

Live Demo

+
+
+
+ +```javascript +const DurationDemo = () => { + return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [ + Button({ + class: 'btn btn-sm', + onclick: () => Toast('Short (1s)', 'alert-info', 1000) + }, '1 Second'), + Button({ + class: 'btn btn-sm', + onclick: () => Toast('Normal (3s)', 'alert-success', 3000) + }, '3 Seconds'), + Button({ + class: 'btn btn-sm', + onclick: () => Toast('Long (5s)', 'alert-warning', 5000) + }, '5 Seconds'), + Button({ + class: 'btn btn-sm', + onclick: () => Toast('Very Long (8s)', 'alert-error', 8000) + }, '8 Seconds') + ]); +}; +$mount(DurationDemo, '#demo-duration'); +``` + +### Interactive Toast + +
+
+

Live Demo

+
+
+
+ +```javascript +const InteractiveDemo = () => { + const count = $(0); + + const showRandomToast = () => { + const types = ['alert-info', 'alert-success', 'alert-warning', 'alert-error']; + const messages = [ + 'You clicked the button!', + 'Action completed successfully', + 'Processing your request...', + 'Something interesting happened' + ]; + const randomType = types[Math.floor(Math.random() * types.length)]; + const randomMessage = messages[Math.floor(Math.random() * messages.length)]; + count(count() + 1); + Toast(`${randomMessage} (${count()})`, randomType, 2000); + }; + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: showRandomToast + }, 'Show Random Toast'), + Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`) + ]); +}; +$mount(InteractiveDemo, '#demo-interactive'); +``` + +### Form Validation Toast + +
+
+

Live Demo

+
+
+
+ +```javascript +const FormToastDemo = () => { + const email = $(''); + const password = $(''); + + const handleSubmit = () => { + if (!email()) { + Toast('Please enter your email', 'alert-warning', 3000); + return; + } + if (!email().includes('@')) { + Toast('Please enter a valid email address', 'alert-error', 3000); + return; + } + if (!password()) { + Toast('Please enter your password', 'alert-warning', 3000); + return; + } + if (password().length < 6) { + Toast('Password must be at least 6 characters', 'alert-error', 3000); + return; + } + Toast('Login successful! Redirecting...', 'alert-success', 2000); + }; + + return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [ + Div({ class: 'text-lg font-bold text-center' }, 'Login Form'), + Input({ + label: 'Email', + type: 'email', + value: email, + placeholder: 'user@example.com', + oninput: (e) => email(e.target.value) + }), + Input({ + label: 'Password', + type: 'password', + value: password, + placeholder: 'Enter password', + oninput: (e) => password(e.target.value) + }), + Button({ + class: 'btn btn-primary', + onclick: handleSubmit + }, 'Login') + ]); +}; +$mount(FormToastDemo, '#demo-form'); +``` + +### Success Feedback + +
+
+

Live Demo

+
+
+
+ +```javascript +const FeedbackDemo = () => { + const items = $([ + { id: 1, name: 'Item 1', saved: false }, + { id: 2, name: 'Item 2', saved: false }, + { id: 3, name: 'Item 3', saved: false } + ]); + + const saveItem = (id) => { + items(items().map(item => + item.id === id ? { ...item, saved: true } : item + )); + Toast(`Item ${id} saved successfully!`, 'alert-success', 2000); + }; + + const saveAll = () => { + items(items().map(item => ({ ...item, saved: true }))); + Toast('All items saved!', 'alert-success', 2000); + }; + + return Div({ class: 'flex flex-col gap-4' }, [ + Div({ class: 'flex justify-between items-center' }, [ + Span({ class: 'font-bold' }, 'Items to Save'), + Button({ + class: 'btn btn-sm btn-primary', + onclick: saveAll + }, 'Save All') + ]), + Div({ class: 'flex flex-col gap-2' }, items().map(item => + Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [ + Span({}, item.name), + item.saved + ? Span({ class: 'badge badge-success' }, '✓ Saved') + : Button({ + class: 'btn btn-xs btn-primary', + onclick: () => saveItem(item.id) + }, 'Save') + ]) + )) + ]); +}; +$mount(FeedbackDemo, '#demo-feedback'); +``` + +### Error Handling + +
+
+

Live Demo

+
+
+
+ +```javascript +const ErrorDemo = () => { + const simulateApiCall = () => { + const success = Math.random() > 0.3; + + if (success) { + Toast('Data loaded successfully!', 'alert-success', 2000); + } else { + Toast('Failed to load data. Please try again.', 'alert-error', 3000); + } + }; + + const simulateNetworkError = () => { + Toast('Network error: Unable to connect to server', 'alert-error', 4000); + }; + + const simulateTimeout = () => { + Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000); + }; + + return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: simulateApiCall + }, 'Simulate API Call'), + Button({ + class: 'btn btn-error', + onclick: simulateNetworkError + }, 'Network Error'), + Button({ + class: 'btn btn-warning', + onclick: simulateTimeout + }, 'Timeout') + ]); +}; +$mount(ErrorDemo, '#demo-error'); +``` + +### Custom Messages + +
+
+

Live Demo

+
+
+
+ +```javascript +const CustomDemo = () => { + const showCustomToast = (type, message) => { + Toast(message, type, 3000); + }; + + return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [ + Button({ + class: 'btn btn-info', + onclick: () => showCustomToast('alert-info', '📧 New email received from john@example.com') + }, 'Email'), + Button({ + class: 'btn btn-success', + onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed') + }, 'Payment'), + Button({ + class: 'btn btn-warning', + onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes') + }, 'Session Warning'), + Button({ + class: 'btn btn-error', + onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected') + }, 'Security Alert') + ]); +}; +$mount(CustomDemo, '#demo-custom'); +``` + +### Multiple Toasts + +
+
+

Live Demo

+
+
+
+ +```javascript +const MultipleDemo = () => { + const showMultipleToasts = () => { + Toast('First message', 'alert-info', 3000); + setTimeout(() => Toast('Second message', 'alert-success', 3000), 500); + setTimeout(() => Toast('Third message', 'alert-warning', 3000), 1000); + setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500); + }; + + return Div({ class: 'flex justify-center' }, [ + Button({ + class: 'btn btn-primary', + onclick: showMultipleToasts + }, 'Show Multiple Toasts') + ]); +}; +$mount(MultipleDemo, '#demo-multiple'); +``` + + diff --git a/docs/components_old/tooltip.md b/docs/components_old/tooltip.md new file mode 100644 index 0000000..053960b --- /dev/null +++ b/docs/components_old/tooltip.md @@ -0,0 +1,554 @@ +# Tooltip + +Tooltip component for displaying helpful hints and additional information on hover. + +## Tag + +`Tooltip` + +## Props + +| Prop | Type | Default | Description | +| :----------- | :--------------------------- | :---------- | :----------------------------------------------- | +| `tip` | `string \| VNode \| Signal` | `-` | Tooltip content to display on hover | +| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) | +| `children` | `VNode` | `-` | Element to attach the tooltip to | + +## Live Examples + +### Basic Tooltip + +
+
+

Live Demo

+
+
+
+ +```javascript +const BasicDemo = () => { + return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [ + Tooltip({ tip: 'This is a tooltip' }, [ + Button({ class: 'btn btn-primary' }, 'Hover me') + ]), + Tooltip({ tip: 'Tooltips can be placed on any element' }, [ + Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text') + ]), + Tooltip({ tip: 'Icons can also have tooltips' }, [ + Icons.iconInfo + ]) + ]); +}; +$mount(BasicDemo, '#demo-basic'); +``` + +### Tooltip Positions + +
+
+

Live Demo

+
+
+
+ +```javascript +const PositionsDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ + Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [ + Button({ class: 'btn btn-sm' }, 'Top') + ]), + Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [ + Button({ class: 'btn btn-sm' }, 'Bottom') + ]), + Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [ + Button({ class: 'btn btn-sm' }, 'Left') + ]), + Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [ + Button({ class: 'btn btn-sm' }, 'Right') + ]) + ]); +}; +$mount(PositionsDemo, '#demo-positions'); +``` + +### Tooltip with Icons + +
+
+

Live Demo

+
+
+
+ +```javascript +const IconsDemo = () => { + return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [ + Tooltip({ tip: 'Save document' }, [ + Button({ class: 'btn btn-ghost btn-circle' }, '💾') + ]), + Tooltip({ tip: 'Edit item' }, [ + Button({ class: 'btn btn-ghost btn-circle' }, '✏️') + ]), + Tooltip({ tip: 'Delete permanently' }, [ + Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️') + ]), + Tooltip({ tip: 'Settings' }, [ + Button({ class: 'btn btn-ghost btn-circle' }, '⚙️') + ]) + ]); +}; +$mount(IconsDemo, '#demo-icons'); +``` + +### Form Field Tooltips + +
+
+

Live Demo

+
+
+
+ +```javascript +const FormDemo = () => { + const username = $(''); + const email = $(''); + + return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [ + Div({ class: 'flex items-center gap-2' }, [ + Input({ + label: 'Username', + value: username, + placeholder: 'Choose a username', + oninput: (e) => username(e.target.value) + }), + Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [ + Span({ class: 'cursor-help text-info' }, '?') + ]) + ]), + Div({ class: 'flex items-center gap-2' }, [ + Input({ + label: 'Email', + type: 'email', + value: email, + placeholder: 'Enter your email', + oninput: (e) => email(e.target.value) + }), + Tooltip({ tip: 'We\'ll never share your email with anyone' }, [ + Span({ class: 'cursor-help text-info' }, '?') + ]) + ]) + ]); +}; +$mount(FormDemo, '#demo-form'); +``` + +### Interactive Tooltip + +
+
+

Live Demo

+
+
+
+ +```javascript +const InteractiveDemo = () => { + const showTip = $(false); + const tooltipText = $('Hover over the button!'); + + const updateTooltip = (text) => { + tooltipText(text); + setTimeout(() => { + tooltipText('Hover over the button!'); + }, 2000); + }; + + return Div({ class: 'flex flex-col gap-4 items-center' }, [ + Tooltip({ tip: () => tooltipText() }, [ + Button({ + class: 'btn btn-primary btn-lg', + onclick: () => Toast('Button clicked!', 'alert-info', 2000) + }, 'Interactive Button') + ]), + Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [ + Button({ + class: 'btn btn-xs', + onclick: () => updateTooltip('You clicked the button!') + }, 'Change Tooltip'), + Button({ + class: 'btn btn-xs', + onclick: () => updateTooltip('Try hovering now!') + }, 'Change Again') + ]) + ]); +}; +$mount(InteractiveDemo, '#demo-interactive'); +``` + +### Rich Tooltip Content + +
+
+

Live Demo

+
+
+
+ +```javascript +const RichDemo = () => { + return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [ + Tooltip({ + tip: Div({ class: 'text-left p-1' }, [ + Div({ class: 'font-bold' }, 'User Info'), + Div({ class: 'text-xs' }, 'John Doe'), + Div({ class: 'text-xs' }, 'john@example.com'), + Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin') + ]) + }, [ + Button({ class: 'btn btn-outline' }, 'User Profile') + ]), + Tooltip({ + tip: Div({ class: 'text-left p-1' }, [ + Div({ class: 'font-bold flex items-center gap-1' }, [ + Icons.iconWarning, + Span({}, 'System Status') + ]), + Div({ class: 'text-xs' }, 'All systems operational'), + Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime') + ]) + }, [ + Button({ class: 'btn btn-outline' }, 'System Status') + ]) + ]); +}; +$mount(RichDemo, '#demo-rich'); +``` + +### Color Variants + +
+
+

Live Demo

+
+
+
+ +```javascript +const ColorsDemo = () => { + return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [ + Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [ + Button({ class: 'btn btn-primary btn-sm' }, 'Primary') + ]), + Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [ + Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary') + ]), + Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [ + Button({ class: 'btn btn-accent btn-sm' }, 'Accent') + ]), + Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [ + Button({ class: 'btn btn-info btn-sm' }, 'Info') + ]), + Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [ + Button({ class: 'btn btn-success btn-sm' }, 'Success') + ]), + Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [ + Button({ class: 'btn btn-warning btn-sm' }, 'Warning') + ]), + Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [ + Button({ class: 'btn btn-error btn-sm' }, 'Error') + ]) + ]); +}; +$mount(ColorsDemo, '#demo-colors'); +``` + +### All Tooltip Positions + +
+
+

Live Demo

+
+
+
+ +```javascript +const AllPositionsDemo = () => { + return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [ + Div({ class: 'col-start-2' }, [ + Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [ + Button({ class: 'btn btn-sm w-24' }, 'Top') + ]) + ]), + Div({ class: 'col-start-1 row-start-2' }, [ + Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [ + Button({ class: 'btn btn-sm w-24' }, 'Left') + ]) + ]), + Div({ class: 'col-start-2 row-start-2' }, [ + Tooltip({ tip: 'Center tooltip', class: 'tooltip' }, [ + Button({ class: 'btn btn-sm w-24' }, 'Center') + ]) + ]), + Div({ class: 'col-start-3 row-start-2' }, [ + Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [ + Button({ class: 'btn btn-sm w-24' }, 'Right') + ]) + ]), + Div({ class: 'col-start-2 row-start-3' }, [ + Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [ + Button({ class: 'btn btn-sm w-24' }, 'Bottom') + ]) + ]) + ]); +}; +$mount(AllPositionsDemo, '#demo-all-positions'); +``` + + diff --git a/docs/index.html b/docs/index.html index 02e35b1..1a902c6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,10 +11,16 @@ /> + + @@ -66,7 +72,6 @@ - \ No newline at end of file diff --git a/docs/install.md b/docs/install.md index 3b861a3..61d34ed 100644 --- a/docs/install.md +++ b/docs/install.md @@ -2,11 +2,6 @@ Follow these steps to integrate **SigPro-UI** into your project. -## Prerequisites - -- [Tailwind CSS v4](https://tailwindcss.com/) configured. -- [daisyUI v5](https://daisyui.com/) installed. - --- @@ -21,35 +16,16 @@ Choose your preferred package manager: ```bash npm install sigpro-ui -# or -pnpm add sigpro-ui -# or -bun add sigpro-ui -# or -yarn add sigpro-ui ``` -## 2. Configure CSS - -Add the following to your main CSS file (e.g., `app.css`): - -```css -@import "tailwindcss"; -@plugin "daisyui"; -``` - -> This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components. - -## 3. Import and use in your app +## 2. Import and use in your app ### ESM / Module usage ```javascript // Import everything from sigpro-ui (includes sigpro core) import { $, $mount, Button, Alert, Input, tt } from "sigpro-ui"; - -// Import your CSS (adjust the path if needed) -import "./app.css"; +import "sigpro-ui/css"; // Create your app const App = () => { @@ -59,7 +35,6 @@ const App = () => { $html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'), Input({ - label: 'Your name', placeholder: 'Enter your name...' }), @@ -79,26 +54,7 @@ const App = () => { $mount(App, "#app"); ``` -### CommonJS usage - -```javascript -const { $, $mount, Button, Input, Alert } = require('sigpro-ui'); - -const App = () => { - const count = $(0); - - return $html('div', { class: 'p-8' }, [ - Button({ - class: 'btn-primary', - onclick: () => count(count() + 1) - }, () => `Clicks: ${count()}`) - ]); -}; - -$mount(App, "#app"); -``` - -## 4. CDN Usage (no build step) +### CDN Usage (no build step) Simply add the script tag and start using SigProUI: @@ -110,7 +66,7 @@ Simply add the script tag and start using SigProUI: SigProUI Demo - + @@ -132,7 +88,6 @@ Simply add the script tag and start using SigProUI: $html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'), Input({ - label: 'Your name', value: name, placeholder: 'Enter your name...' }), @@ -178,8 +133,7 @@ When you install SigProUI, you get: - And 30+ more components! ### Utilities -- `Icons` - SVG icon set -- `Utils` - Helper functions (joinClass, val) +- `Utils` - Helper functions (ui, val) - `tt()` - i18n translation function ## Language Support @@ -190,15 +144,13 @@ SigProUI includes built-in i18n with Spanish and English: import { tt } from 'sigpro-ui'; // Change locale (default is 'es') -tt.setLocale('en'); +Locale('en'); // Use translations const closeButton = Button({}, tt('close')()); const searchPlaceholder = Input({ placeholder: tt('search')() }); ``` -Available translations: `close`, `confirm`, `cancel`, `search`, `loading`, `nodata` - ## TypeScript Support SigProUI includes TypeScript definitions. Import types as needed: @@ -215,27 +167,11 @@ const MyButton: React.FC = (props) => { | Problem | Solution | | :--- | :--- | -| Components don't look styled | Check that you've included Tailwind + daisyUI CSS (either via import or CDN) | +| Components don't look styled | Make sure you're loading css 'sigpro.css' (either via import or CDN)| | `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' | | `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window | | Build errors | Ensure you're using a modern bundler that supports ESM | | CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly | -| Locale not working | Set locale with `tt.setLocale('en')` before using translations | - -## Migration from older versions - -If you were using SigProUI v1.0.x with separate SigPro installation: - -**Before:** -```javascript -import { $ } from 'sigpro'; -import { Button } from 'sigpro-ui'; -``` - -**Now:** -```javascript -import { $, Button } from 'sigpro-ui'; -// That's it! Everything comes from one package. -``` +| Locale not working | Set locale with `Locale('en')` before using translations | **Happy coding!** 🎉 diff --git a/docs/quick.md b/docs/quick.md index 57cccb3..d16ff03 100644 --- a/docs/quick.md +++ b/docs/quick.md @@ -3,15 +3,14 @@ **Version:** daisyUI v5 + Tailwind v4 Plugin **Status:** Active / WIP -> **Prerequisites:** Tailwind CSS v4+ and DaisyUI v5+ installed. ## Global Initialization ```javascript -import { UI } from 'sigpro-ui'; +import "sigpro-ui"; // Injects all components into window and sets default language -UI('en'); // 'es' or 'en' +Locale('en'); // 'es' or 'en' // All components (Button, Input, Table, Toast, etc.) are now globally available. ``` @@ -110,12 +109,11 @@ Built-in locale system with Spanish and English support. ```javascript // Set global UI language -Locale("en"); // or "es" +Locale("en"); // Get translated string (returns a reactive signal) const closeText = tt("close"); // "Close" or "Cerrar" -// Available keys: close, confirm, cancel, search, loading, nodata ``` --- @@ -124,7 +122,7 @@ const closeText = tt("close"); // "Close" or "Cerrar" 1. **Atomic Reactivity**: Components accepting `value` or `checked` bind directly to **SigPro Signals**. Updates happen instantly without full page re-renders. -2. **Tailwind v4 + DaisyUI v5**: Pass any Tailwind utility class via the `class` attribute to override default DaisyUI styling. +2. **DaisyUI v5**: Pass any daisyUI styling via the `class` attribute. ```javascript Button({ class: "btn-primary btn-sm rounded-full shadow-lg" }, "Click") @@ -145,7 +143,6 @@ const name = $(""); const error = $(null); Input({ - label: "Full Name", value: name, error: error, oninput: (e) => { diff --git a/docs/sigpro-ui.min.js b/docs/sigpro-ui.min.js index 092e5e6..45177bd 100644 --- a/docs/sigpro-ui.min.js +++ b/docs/sigpro-ui.min.js @@ -1,7 +1,7 @@ -(()=>{var{defineProperty:mA,getOwnPropertyNames:Eo,getOwnPropertyDescriptor:Go}=Object,Lo=Object.prototype.hasOwnProperty;var Io=new WeakMap,Jo=(o)=>{var t=Io.get(o),r;if(t)return t;if(t=mA({},"__esModule",{value:!0}),o&&typeof o==="object"||typeof o==="function")Eo(o).map((a)=>!Lo.call(t,a)&&mA(t,a,{get:()=>o[a],enumerable:!(r=Go(o,a))||r.enumerable}));return Io.set(o,t),t};var u=(o,t)=>{for(var r in t)mA(o,r,{get:t[r],enumerable:!0,configurable:!0,set:(a)=>t[r]=()=>a})};var Xo={};u(Xo,{val:()=>d,tt:()=>R,joinClass:()=>x,iconWarning:()=>N,iconUpload:()=>aA,iconSuccess:()=>L,iconShow:()=>Z,iconRight:()=>oA,iconRRight:()=>sA,iconMail:()=>_,iconLock:()=>O,iconLeft:()=>AA,iconLLeft:()=>tA,iconInfo:()=>G,iconHide:()=>P,iconError:()=>J,iconClose:()=>W,iconCalendar:()=>E,iconAbc:()=>q,icon123:()=>$,Tooltip:()=>vo,Toast:()=>Uo,Timeline:()=>Co,Tabs:()=>po,Table:()=>xo,Swap:()=>go,Stat:()=>mo,Stack:()=>io,Select:()=>eo,Rating:()=>lo,Range:()=>so,Radio:()=>oo,Navbar:()=>_A,Modal:()=>qA,Menu:()=>WA,Loading:()=>ZA,List:()=>KA,Input:()=>F,Indicator:()=>zA,Fileinput:()=>NA,Fieldset:()=>LA,Fab:()=>EA,Dropdown:()=>FA,Drawer:()=>yA,Datepicker:()=>HA,Colorpicker:()=>IA,Checkbox:()=>YA,Button:()=>j,Badge:()=>vA,Autocomplete:()=>UA,Alert:()=>BA,Accordion:()=>uA});var h=null,V=null,z=new Set,k=!1,fA=new WeakMap,No=()=>{if(k)return;k=!0;while(z.size>0){let o=Array.from(z).sort((t,r)=>(t.depth||0)-(r.depth||0));z.clear();for(let t of o)if(!t._deleted)t()}k=!1},Vo=(o)=>{if(h&&!h._deleted)o.add(h),h._deps.add(o)},gA=(o)=>{for(let t of o){if(t===h||t._deleted)continue;if(t._isComputed){if(t.markDirty(),t._subs)gA(t._subs)}else z.add(t)}if(!k)queueMicrotask(No)},bA=(o)=>{if(o._cleanups)o._cleanups.forEach((t)=>t()),o._cleanups.clear();o.childNodes?.forEach(bA)},K=(o)=>{let t=new Set,r=V,a=document.createElement("div");a.style.display="contents",V={cleanups:t};try{let e=o({onCleanup:(s)=>t.add(s)}),n=(s)=>{if(!s)return;if(s._isRuntime)t.add(s.destroy),a.appendChild(s.container);else if(Array.isArray(s))s.forEach(n);else a.appendChild(s instanceof Node?s:document.createTextNode(String(s)))};n(e)}finally{V=r}return{_isRuntime:!0,container:a,destroy:()=>{t.forEach((e)=>e()),bA(a),a.remove()}}},S=(o,t=null)=>{if(typeof o==="function"){let e=new Set,n,s=!0,l=()=>{if(l._deleted)return;l._deps.forEach((c)=>c.delete(l)),l._deps.clear();let i=h;h=l;try{let c=o();if(!Object.is(n,c)||s)n=c,s=!1,gA(e)}finally{h=i}};if(l._deps=new Set,l._isComputed=!0,l._subs=e,l._deleted=!1,l.markDirty=()=>s=!0,l.stop=()=>{l._deleted=!0,l._deps.forEach((i)=>i.delete(l)),e.clear()},V)V.cleanups.add(l.stop);return()=>{if(s)l();return Vo(e),n}}let r=o;if(t)try{let e=localStorage.getItem(t);if(e!==null)r=JSON.parse(e)}catch(e){console.warn("SigPro: LocalStorage locked",e)}let a=new Set;return(...e)=>{if(e.length){let n=typeof e[0]==="function"?e[0](r):e[0];if(!Object.is(r,n)){if(r=n,t)localStorage.setItem(t,JSON.stringify(r));gA(a)}}return Vo(a),r}},H=(o,t)=>{let r=Array.isArray(o),a=r?t:o,e=r?o:null;if(typeof a!=="function")return()=>{};let n=V,s=()=>{if(s._deleted)return;s._deps.forEach((c)=>c.delete(s)),s._deps.clear(),s._cleanups.forEach((c)=>c()),s._cleanups.clear();let l=h,i=V;h=s,V={cleanups:s._cleanups},s.depth=l?l.depth+1:0;try{if(r)h=null,a(),h=s,e.forEach((c)=>typeof c==="function"&&c());else a()}finally{h=l,V=i}};if(s._deps=new Set,s._cleanups=new Set,s._deleted=!1,s.stop=()=>{if(s._deleted)return;if(s._deleted=!0,z.delete(s),s._deps.forEach((l)=>l.delete(s)),s._cleanups.forEach((l)=>l()),n)n.cleanups.delete(s.stop)},n)n.cleanups.add(s.stop);return s(),s.stop},A=(o,t={},r=[])=>{if(t instanceof Node||Array.isArray(t)||typeof t!=="object")r=t,t={};let a=document.createElement(o),e=(s,l)=>(s==="src"||s==="href")&&String(l).toLowerCase().includes("javascript:")?"#":l;a._cleanups=new Set;for(let[s,l]of Object.entries(t)){if(s==="ref"){typeof l==="function"?l(a):l.current=a;continue}let i=typeof l==="function";if(["INPUT","TEXTAREA","SELECT"].includes(a.tagName)&&(s==="value"||s==="checked")&&i){a._cleanups.add(H(()=>{let f=l();if(a[s]!==f)a[s]=f}));let m=s==="checked"?"change":"input",p=(f)=>l(f.target[s]);a.addEventListener(m,p),a._cleanups.add(()=>a.removeEventListener(m,p))}else if(s.startsWith("on")){let m=s.slice(2).toLowerCase().split(".")[0],p=(f)=>l(f);a.addEventListener(m,p),a._cleanups.add(()=>a.removeEventListener(m,p))}else if(i)a._cleanups.add(H(()=>{let m=e(s,l());if(s==="class")a.className=m||"";else m==null?a.removeAttribute(s):a.setAttribute(s,m)}));else a.setAttribute(s,e(s,l))}let n=(s)=>{if(Array.isArray(s))return s.forEach(n);if(typeof s==="function"){let l=document.createTextNode("");a.appendChild(l);let i=[];a._cleanups.add(H(()=>{let c=s(),b=(Array.isArray(c)?c:[c]).map((m)=>m?._isRuntime?m.container:m instanceof Node?m:document.createTextNode(m??""));i.forEach((m)=>{bA(m),m.remove()}),b.forEach((m)=>l.parentNode?.insertBefore(m,l)),i=b}))}else a.appendChild(s instanceof Node?s:document.createTextNode(s??""))};return n(r),a},w=(o,t,r=null)=>{let a=document.createTextNode(""),e=A("div",{style:"display:contents"},[a]),n=null,s=null;return H(()=>{let l=!!(typeof o==="function"?o():o);if(l!==s){if(s=l,n)n.destroy();let i=l?t:r;if(i)n=K(()=>typeof i==="function"?i():i),e.insertBefore(n.container,a)}}),e};w.not=(o,t,r)=>w(()=>!(typeof o==="function"?o():o),t,r);var U=(o,t,r)=>{let a=document.createTextNode(""),e=A("div",{style:"display:contents"},[a]),n=new Map;return H(()=>{let s=(typeof o==="function"?o():o)||[],l=new Map,i=[];for(let b=0;bt(m,b));else n.delete(p);l.set(p,f),i.push(p)}n.forEach((b)=>{b.destroy(),b.container.remove()});let c=a;for(let b=i.length-1;b>=0;b--){let m=l.get(i[b]);if(m.container.nextSibling!==c)e.insertBefore(m.container,c);c=m.container}n=l}),e},M=(o)=>{let t=S(window.location.hash.replace(/^#/,"")||"/");window.addEventListener("hashchange",()=>t(window.location.hash.replace(/^#/,"")||"/"));let r=A("div",{class:"router-outlet"}),a=null;return H([t],async()=>{let e=t(),n=o.find((s)=>{let l=s.path.split("/").filter(Boolean),i=e.split("/").filter(Boolean);return l.length===i.length&&l.every((c,b)=>c.startsWith(":")||c===i[b])})||o.find((s)=>s.path==="*");if(n){let s=n.component;if(typeof s==="function"&&s.toString().includes("import"))s=(await s()).default||await s();let l={};if(n.path.split("/").filter(Boolean).forEach((i,c)=>{if(i.startsWith(":"))l[i.slice(1)]=e.split("/").filter(Boolean)[c]}),a)a.destroy();if(M.params)M.params(l);a=K(()=>{try{return typeof s==="function"?s(l):s}catch(i){return A("div",{class:"p-4 text-error"},"Error loading view")}}),r.appendChild(a.container)}}),r};M.params=S({});M.to=(o)=>window.location.hash=o.replace(/^#?\/?/,"#/");M.back=()=>window.history.back();M.path=()=>window.location.hash.replace(/^#/,"")||"/";var xA=(o,t)=>{let r=typeof t==="string"?document.querySelector(t):t;if(!r)return;if(fA.has(r))fA.get(r).destroy();let a=K(typeof o==="function"?o:()=>o);return r.replaceChildren(a.container),fA.set(r,a),a},To={$:S,$watch:H,$html:A,$if:w,$for:U,$router:M,$mount:xA};if(typeof window<"u")((t)=>{Object.keys(t).forEach((a)=>{window[a]=t[a]}),"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter".split(/\s+/).forEach((a)=>{let e=a.charAt(0).toUpperCase()+a.slice(1);if(!(e in window))window[e]=(n,s)=>A(a,n,s)}),window.SigPro=Object.freeze(t)})(To);var rA={};u(rA,{default:()=>Ko,Tooltip:()=>vo,Toast:()=>Uo,Timeline:()=>Co,Tabs:()=>po,Table:()=>xo,Swap:()=>go,Stat:()=>mo,Stack:()=>io,Select:()=>eo,Rating:()=>lo,Range:()=>so,Radio:()=>oo,Navbar:()=>_A,Modal:()=>qA,Menu:()=>WA,Loading:()=>ZA,List:()=>KA,Input:()=>F,Indicator:()=>zA,Fileinput:()=>NA,Fieldset:()=>LA,Fab:()=>EA,Dropdown:()=>FA,Drawer:()=>yA,Datepicker:()=>HA,Colorpicker:()=>IA,Checkbox:()=>YA,Button:()=>j,Badge:()=>vA,Autocomplete:()=>UA,Alert:()=>BA,Accordion:()=>uA});var pA={};u(pA,{Accordion:()=>uA});var X={};u(X,{val:()=>d,joinClass:()=>x});var d=(o)=>typeof o==="function"?o():o,x=(o,t)=>typeof t==="function"?()=>`${o} ${t()||""}`.trim():`${o} ${t||""}`.trim();var uA=(o,t)=>{let{title:r,name:a,open:e,...n}=o;return A("div",{...n,class:x("collapse collapse-arrow bg-base-200 mb-2",o.class)},[A("input",{type:a?"radio":"checkbox",name:a,checked:e}),A("div",{class:"collapse-title text-xl font-medium"},r),A("div",{class:"collapse-content"},t)])};var CA={};u(CA,{Alert:()=>BA});var lA={};u(lA,{iconWarning:()=>N,iconUpload:()=>aA,iconSuccess:()=>L,iconShow:()=>Z,iconRight:()=>oA,iconRRight:()=>sA,iconMail:()=>_,iconLock:()=>O,iconLeft:()=>AA,iconLLeft:()=>tA,iconInfo:()=>G,iconHide:()=>P,iconError:()=>J,iconClose:()=>W,iconCalendar:()=>E,iconAbc:()=>q,icon123:()=>$});var Z="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==",P="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC",W="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg==",E="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC",O="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=",q="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg==",$="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==",_="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC",G="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC",L="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg==",J="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC",N="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII=",AA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg==",oA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg==",tA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg==",sA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=",aA="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC";var BA=(o,t)=>{let{type:r="info",soft:a=!0,...e}=o,n={info:G,success:L,warning:N,error:J},s=()=>{let i=d(r);return{info:"alert-info",success:"alert-success",warning:"alert-warning",error:"alert-error"}[i]||i},l=t||o.message;return A("div",{...e,role:"alert",class:()=>`alert ${s()} ${d(a)?"alert-soft":""} ${o.class||""}`},[A("img",{src:n[d(r)]||n.info,class:"w-4 h-4 object-contain",alt:d(r)}),A("div",{class:"flex-1"},[A("span",{},[typeof l==="function"?l():l])]),o.actions?A("div",{class:"flex-none"},[typeof o.actions==="function"?o.actions():o.actions]):null])};var wA={};u(wA,{Autocomplete:()=>UA});var zo={es:{close:"Cerrar",confirm:"Confirmar",cancel:"Cancelar",search:"Buscar...",loading:"Cargando...",nodata:"Sin datos"},en:{close:"Close",confirm:"Confirm",cancel:"Cancel",search:"Search...",loading:"Loading...",nodata:"No data"}},ko=S("es");var R=(o)=>()=>zo[ko()][o]||o;var SA={};u(SA,{Input:()=>F});var F=(o)=>{let{label:t,tip:r,value:a,error:e,isSearch:n,icon:s,type:l="text",...i}=o,c=l==="password",b=S(!1),m={text:q,password:O,date:E,number:$,email:_},p=A("input",{...i,type:()=>c?b()?"text":"password":l,placeholder:o.placeholder||t||(n?R("search")():" "),class:x("grow order-2 focus:outline-none",o.class),value:a,oninput:(C)=>o.oninput?.(C),disabled:()=>d(o.disabled)}),f=s?s:m[l]?A("img",{src:m[l],class:"opacity-50",alt:l}):null;return A("label",{class:()=>x("input input-bordered floating-label flex items-center gap-2 w-full relative",d(e)?"input-error":"")},[f?A("div",{class:"order-1 shrink-0"},f):null,t?A("span",{class:"text-base-content/60 order-0"},t):null,p,c?A("button",{type:"button",class:"order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",onclick:(C)=>{C.preventDefault(),b(!b())}},()=>A("img",{class:"w-5 h-5",src:b()?Z:P})):null,r?A("div",{class:"tooltip tooltip-left order-4","data-tip":r},A("span",{class:"badge badge-ghost badge-xs cursor-help"},"?")):null,()=>d(e)?A("span",{class:"text-error text-[10px] absolute -bottom-5 left-2"},d(e)):null])};var UA=(o)=>{let{options:t=[],value:r,onSelect:a,label:e,placeholder:n,...s}=o,l=S(d(r)||""),i=S(!1),c=S(-1),b=S(()=>{let f=l().toLowerCase(),C=d(t)||[];return f?C.filter((Q)=>(typeof Q==="string"?Q:Q.label).toLowerCase().includes(f)):C}),m=(f)=>{let C=typeof f==="string"?f:f.value,Q=typeof f==="string"?f:f.label;if(l(Q),typeof r==="function")r(C);a?.(f),i(!1),c(-1)},p=(f)=>{let C=b();if(f.key==="ArrowDown")f.preventDefault(),i(!0),c(Math.min(c()+1,C.length-1));else if(f.key==="ArrowUp")f.preventDefault(),c(Math.max(c()-1,0));else if(f.key==="Enter"&&c()>=0)f.preventDefault(),m(C[c()]);else if(f.key==="Escape")i(!1)};return A("div",{class:"relative w-full"},[F({label:e,placeholder:n||R("search")(),value:l,onfocus:()=>i(!0),onblur:()=>setTimeout(()=>i(!1),150),onkeydown:p,oninput:(f)=>{let C=f.target.value;if(l(C),typeof r==="function")r(C);i(!0),c(-1)},...s}),A("ul",{class:"absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",style:()=>i()&&b().length?"display:block":"display:none"},[U(b,(f,C)=>A("li",{},[A("a",{class:()=>`block w-full ${c()===C?"active bg-primary text-primary-content":""}`,onclick:()=>m(f),onmouseenter:()=>c(C)},typeof f==="string"?f:f.label)]),(f,C)=>(typeof f==="string"?f:f.value)+C),()=>b().length?null:A("li",{class:"p-2 text-center opacity-50"},"No results")])])};var hA={};u(hA,{Badge:()=>vA});var vA=(o,t)=>A("span",{...o,class:x("badge",o.class)},t);var RA={};u(RA,{Button:()=>j});var j=(o,t)=>{let{badge:r,badgeClass:a,tooltip:e,icon:n,loading:s,...l}=o,c=A("button",{...l,class:x("btn",o.class),disabled:()=>d(s)||d(o.disabled)},[()=>d(s)?A("span",{class:"loading loading-spinner"}):null,n?A("span",{class:"mr-1"},n):null,t]);if(r)c=A("div",{class:"indicator"},[A("span",{class:x("indicator-item badge",a||"badge-secondary")},r),c]);return e?A("div",{class:"tooltip","data-tip":e},c):c};var DA={};u(DA,{Checkbox:()=>YA});var YA=(o)=>{let{value:t,tooltip:r,toggle:a,label:e,...n}=o,s=A("input",{...n,type:"checkbox",class:()=>d(a)?"toggle":"checkbox",checked:t}),l=A("label",{class:"label cursor-pointer justify-start gap-3"},[s,e?A("span",{class:"label-text"},e):null]);return r?A("div",{class:"tooltip","data-tip":r},l):l};var VA={};u(VA,{Colorpicker:()=>IA});var IA=(o)=>{let{value:t,label:r,...a}=o,e=S(!1),n=["#000","#1A1A1A","#333","#4D4D4D","#666","#808080","#B3B3B3","#FFF","#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626","#ef4444","#f87171","#fca5a5","#431407","#7c2d12","#9a3412","#c2410c","#ea580c","#f97316","#fb923c","#ffedd5","#713f12","#a16207","#ca8a04","#eab308","#facc15","#fde047","#fef08a","#fff9c4","#064e3b","#065f46","#059669","#10b981","#34d399","#4ade80","#84cc16","#d9f99d","#082f49","#075985","#0284c7","#0ea5e9","#38bdf8","#7dd3fc","#22d3ee","#cffafe","#1e1b4b","#312e81","#4338ca","#4f46e5","#6366f1","#818cf8","#a5b4fc","#e0e7ff","#2e1065","#4c1d95","#6d28d9","#7c3aed","#8b5cf6","#a855f7","#d946ef","#fae8ff"],s=()=>d(t)||"#000000";return A("div",{class:"relative w-fit"},[A("button",{type:"button",class:"btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",onclick:(l)=>{l.stopPropagation(),e(!e())},...a},[A("div",{class:"size-5 rounded-sm shadow-inner border border-black/10 shrink-0",style:()=>`background-color: ${s()}`}),r?A("span",{class:"opacity-80"},r):null]),w(e,()=>A("div",{class:"absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",onclick:(l)=>l.stopPropagation()},[A("div",{class:"grid grid-cols-8 gap-1"},n.map((l)=>A("button",{type:"button",style:`background-color: ${l}`,class:()=>{return`size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 - ${s().toLowerCase()===l.toLowerCase()?"ring-2 ring-offset-1 ring-primary z-10 scale-110":""}`},onclick:()=>{if(typeof t==="function")t(l);e(!1)}})))])),w(e,()=>A("div",{class:"fixed inset-0 z-[100]",onclick:()=>e(!1)}))])};var QA={};u(QA,{Datepicker:()=>HA});var HA=(o)=>{let{value:t,range:r,label:a,placeholder:e,hour:n=!1,...s}=o,l=S(!1),i=S(new Date),c=S(null),b=S(0),m=S(0),p=()=>d(r)===!0,f=new Date,C=`${f.getFullYear()}-${String(f.getMonth()+1).padStart(2,"0")}-${String(f.getDate()).padStart(2,"0")}`,Q=(g)=>{let B=g.getFullYear(),v=String(g.getMonth()+1).padStart(2,"0"),D=String(g.getDate()).padStart(2,"0");return`${B}-${v}-${D}`},Qo=(g)=>{let B=Q(g),v=d(t);if(p())if(!v?.start||v.start&&v.end){if(typeof t==="function")t({start:B,end:null,...n&&{startHour:b()}})}else{let D=v.start;if(typeof t==="function"){let T=B{let g=d(t);if(!g)return"";if(typeof g==="string"){if(n&&g.includes("T"))return g.replace("T"," ");return g}if(g.start&&g.end){let B=n&&g.startHour?`${g.start} ${String(g.startHour).padStart(2,"0")}:00`:g.start,v=n&&g.endHour?`${g.end} ${String(g.endHour).padStart(2,"0")}:00`:g.end;return`${B} - ${v}`}if(g.start)return`${n&&g.startHour?`${g.start} ${String(g.startHour).padStart(2,"0")}:00`:g.start}...`;return""}),Ro=(g)=>{let B=i();i(new Date(B.getFullYear(),B.getMonth()+g,1))},Yo=(g)=>{let B=i();i(new Date(B.getFullYear()+g,B.getMonth(),1))},eA=({value:g,onChange:B})=>{return A("div",{class:"flex-1"},[A("div",{class:"flex gap-2 items-center"},[A("input",{type:"range",min:0,max:23,value:g,class:"range range-xs flex-1",oninput:(v)=>{let D=parseInt(v.target.value);B(D)}}),A("span",{class:"text-sm font-mono min-w-[48px] text-center"},()=>String(d(g)).padStart(2,"0")+":00")])])};return A("div",{class:"relative w-full"},[F({label:a,placeholder:e||(p()?"Seleccionar rango...":"Seleccionar fecha..."),value:yo,readonly:!0,icon:A("img",{src:E,class:"opacity-40"}),onclick:(g)=>{g.stopPropagation(),l(!l())},...s}),w(l,()=>A("div",{class:"absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",onclick:(g)=>g.stopPropagation()},[A("div",{class:"flex justify-between items-center mb-4 gap-1"},[A("div",{class:"flex gap-0.5"},[A("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>Yo(-1)},A("img",{src:tA,class:"opacity-40"})),A("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>Ro(-1)},A("img",{src:AA,class:"opacity-40"}))]),A("span",{class:"font-bold uppercase flex-1 text-center"},[()=>i().toLocaleString("es-ES",{month:"short",year:"numeric"})]),A("div",{class:"flex gap-0.5"},[A("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>Ro(1)},A("img",{src:oA,class:"opacity-40"})),A("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>Yo(1)},A("img",{src:sA,class:"opacity-40"}))])]),A("div",{class:"grid grid-cols-7 gap-1",onmouseleave:()=>c(null)},[...["L","M","X","J","V","S","D"].map((g)=>A("div",{class:"text-[10px] opacity-40 font-bold text-center"},g)),()=>{let g=i(),B=g.getFullYear(),v=g.getMonth(),D=new Date(B,v,1).getDay(),T=D===0?6:D-1,Mo=new Date(B,v+1,0).getDate(),nA=[];for(let y=0;y{let I=d(t),iA=c(),Fo=typeof I==="string"?I.split("T")[0]===Y:I?.start===Y,jo=I?.end===Y,cA=!1;if(p()&&I?.start){let dA=I.start;if(!I.end&&iA)cA=Y>dA&&Y<=iA||Y=iA;else if(I.end)cA=Y>dA&&Y{if(p())c(Y)},onclick:()=>Qo(Do)},[y.toString()]))}return nA}]),n?A("div",{class:"mt-3 pt-2 border-t border-base-300"},[p()?A("div",{class:"flex gap-4"},[eA({value:b,onChange:(g)=>{b(g);let B=d(t);if(B?.start)t({...B,startHour:g})}}),eA({value:m,onChange:(g)=>{m(g);let B=d(t);if(B?.end)t({...B,endHour:g})}})]):eA({value:b,onChange:(g)=>{b(g);let B=d(t);if(B&&typeof B==="string"&&B.includes("-"))t(B.split("T")[0]+"T"+String(g).padStart(2,"0")+":00:00")}})]):null])),w(l,()=>A("div",{class:"fixed inset-0 z-[90]",onclick:()=>l(!1)}))])};var MA={};u(MA,{Drawer:()=>yA});var yA=(o)=>A("div",{class:x("drawer",o.class)},[A("input",{id:o.id,type:"checkbox",class:"drawer-toggle",checked:o.open}),A("div",{class:"drawer-content"},o.content),A("div",{class:"drawer-side"},[A("label",{for:o.id,class:"drawer-overlay",onclick:()=>o.open?.(!1)}),A("div",{class:"min-h-full bg-base-200 w-80"},o.side)])]);var jA={};u(jA,{Dropdown:()=>FA});var FA=(o,t)=>{let{label:r,icon:a,items:e,...n}=o,s=()=>{if(e)return A("ul",{tabindex:0,class:"dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"},[U(typeof e==="function"?e:()=>e,(i)=>A("li",{},[A("a",{class:i.class||"",onclick:(c)=>{if(i.onclick)i.onclick(c);if(document.activeElement)document.activeElement.blur()}},[i.icon?A("span",{},i.icon):null,A("span",{},i.label)])]))]);return A("div",{tabindex:0,class:"dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"},[typeof t==="function"?t():t])};return A("div",{...n,class:()=>`dropdown ${d(o.class)||""}`},[A("div",{tabindex:0,role:"button",class:"btn m-1 flex items-center gap-2"},[a?typeof a==="function"?a():a:null,r?typeof r==="function"?r():r:null]),s()])};var GA={};u(GA,{Fab:()=>EA});var EA=(o)=>{let{icon:t,label:r,actions:a=[],position:e="bottom-6 right-6",class:n="",...s}=o;return A("div",{...s,class:`fab absolute ${e} flex flex-col-reverse items-end gap-3 z-[100] ${n}`},[A("div",{tabindex:0,role:"button",class:"btn btn-lg btn-circle btn-primary shadow-2xl"},[t?typeof t==="function"?t():t:null,!t&&r?r:null]),...d(a).map((l)=>A("div",{class:"flex items-center gap-3 transition-all duration-300"},[l.label?A("span",{class:"badge badge-ghost shadow-sm whitespace-nowrap"},l.label):null,A("button",{type:"button",class:`btn btn-circle shadow-lg ${l.class||""}`,onclick:(i)=>{i.stopPropagation(),l.onclick?.(i)}},[l.icon?typeof l.icon==="function"?l.icon():l.icon:l.text||""])]))])};var JA={};u(JA,{Fieldset:()=>LA});var LA=(o,t)=>A("fieldset",{...o,class:x("fieldset bg-base-200 border border-base-300 p-4 rounded-lg",o.class)},[()=>{let r=d(o.legend);return r?A("legend",{class:"fieldset-legend font-bold"},[r]):null},t]);var TA={};u(TA,{Fileinput:()=>NA});var NA=(o)=>{let{tooltip:t,max:r=2,accept:a="*",onSelect:e}=o,n=S([]),s=S(!1),l=S(null),i=r*1024*1024,c=(m)=>{let p=Array.from(m);if(l(null),p.find((C)=>C.size>i)){l(`Máx ${r}MB`);return}n([...n(),...p]),e?.(n())},b=(m)=>{let p=n().filter((f,C)=>C!==m);n(p),e?.(p)};return A("fieldset",{class:"fieldset w-full p-0"},[A("div",{class:()=>`w-full ${t?"tooltip tooltip-top before:z-50 after:z-50":""}`,"data-tip":t},[A("label",{class:()=>` +(()=>{var{defineProperty:t,getOwnPropertyNames:VJ,getOwnPropertyDescriptor:HJ}=Object,EJ=Object.prototype.hasOwnProperty;var CJ=new WeakMap,jJ=(W)=>{var Z=CJ.get(W),X;if(Z)return Z;if(Z=t({},"__esModule",{value:!0}),W&&typeof W==="object"||typeof W==="function")VJ(W).map((J)=>!EJ.call(Z,J)&&t(Z,J,{get:()=>W[J],enumerable:!(X=HJ(W,J))||X.enumerable}));return CJ.set(W,Z),Z};var z=(W,Z)=>{for(var X in Z)t(W,X,{get:Z[X],enumerable:!0,configurable:!0,set:(J)=>Z[X]=()=>J})};var kJ={};z(kJ,{val:()=>P,ui:()=>A,tt:()=>x,getIcon:()=>V,Tooltip:()=>BJ,Toast:()=>QJ,Timeline:()=>YJ,Tabs:()=>XJ,Table:()=>WJ,Swap:()=>JJ,Stat:()=>eM,Stack:()=>nM,Select:()=>lM,Rating:()=>rM,Range:()=>iM,Radio:()=>pM,Navbar:()=>mM,Modal:()=>hM,Menu:()=>bM,Loading:()=>vM,List:()=>fM,Label:()=>kM,Input:()=>b,Indicator:()=>IM,Fileinput:()=>OM,Fieldset:()=>jM,Fab:()=>HM,Dropdown:()=>UM,Drawer:()=>FM,Datepicker:()=>RM,Colorpicker:()=>TM,Checkbox:()=>_M,Button:()=>g,Badge:()=>qM,Autocomplete:()=>LM,Alert:()=>XM,Accordion:()=>WM});var N=null,f=null,m=new Set,d=!1,e=new WeakMap,SJ=()=>{if(d)return;d=!0;while(m.size>0){let W=Array.from(m).sort((Z,X)=>(Z.depth||0)-(X.depth||0));m.clear();for(let Z of W)if(!Z._deleted)Z()}d=!1},RJ=(W)=>{if(N&&!N._deleted)W.add(N),N._deps.add(W)},MM=(W)=>{for(let Z of W){if(Z===N||Z._deleted)continue;if(Z._isComputed){if(Z.markDirty(),Z._subs)MM(Z._subs)}else m.add(Z)}if(!d)queueMicrotask(SJ)},JM=(W)=>{if(W._cleanups)W._cleanups.forEach((Z)=>Z()),W._cleanups.clear();W.childNodes?.forEach(JM)},p=(W)=>{let Z=new Set,X=f,J=document.createElement("div");J.style.display="contents",f={cleanups:Z};try{let Y=W({onCleanup:(K)=>Z.add(K)}),L=(K)=>{if(!K)return;if(K._isRuntime)Z.add(K.destroy),J.appendChild(K.container);else if(Array.isArray(K))K.forEach(L);else J.appendChild(K instanceof Node?K:document.createTextNode(String(K)))};L(Y)}finally{f=X}return{_isRuntime:!0,container:J,destroy:()=>{Z.forEach((Y)=>Y()),JM(J),J.remove()}}},U=(W,Z=null)=>{if(typeof W==="function"){let Y=new Set,L,K=!0,G=()=>{if(G._deleted)return;G._deps.forEach((Q)=>Q.delete(G)),G._deps.clear();let q=N;N=G;try{let Q=W();if(!Object.is(L,Q)||K)L=Q,K=!1,MM(Y)}finally{N=q}};if(G._deps=new Set,G._isComputed=!0,G._subs=Y,G._deleted=!1,G.markDirty=()=>K=!0,G.stop=()=>{G._deleted=!0,G._deps.forEach((q)=>q.delete(G)),Y.clear()},f)f.cleanups.add(G.stop);return()=>{if(K)G();return RJ(Y),L}}let X=W;if(Z)try{let Y=localStorage.getItem(Z);if(Y!==null)X=JSON.parse(Y)}catch(Y){console.warn("SigPro: LocalStorage locked",Y)}let J=new Set;return(...Y)=>{if(Y.length){let L=typeof Y[0]==="function"?Y[0](X):Y[0];if(!Object.is(X,L)){if(X=L,Z)localStorage.setItem(Z,JSON.stringify(X));MM(J)}}return RJ(J),X}},y=(W,Z)=>{let X=Array.isArray(W),J=X?Z:W,Y=X?W:null;if(typeof J!=="function")return()=>{};let L=f,K=()=>{if(K._deleted)return;K._deps.forEach((Q)=>Q.delete(K)),K._deps.clear(),K._cleanups.forEach((Q)=>Q()),K._cleanups.clear();let G=N,q=f;N=K,f={cleanups:K._cleanups},K.depth=G?G.depth+1:0;try{if(X)N=null,J(),N=K,Y.forEach((Q)=>typeof Q==="function"&&Q());else J()}finally{N=G,f=q}};if(K._deps=new Set,K._cleanups=new Set,K._deleted=!1,K.stop=()=>{if(K._deleted)return;if(K._deleted=!0,m.delete(K),K._deps.forEach((G)=>G.delete(K)),K._cleanups.forEach((G)=>G()),L)L.cleanups.delete(K.stop)},L)L.cleanups.add(K.stop);return K(),K.stop},M=(W,Z={},X=[])=>{if(Z instanceof Node||Array.isArray(Z)||typeof Z!=="object")X=Z,Z={};let J=document.createElement(W),Y=(K,G)=>(K==="src"||K==="href")&&String(G).toLowerCase().includes("javascript:")?"#":G;J._cleanups=new Set;for(let[K,G]of Object.entries(Z)){if(K==="ref"){typeof G==="function"?G(J):G.current=J;continue}let q=typeof G==="function";if(["INPUT","TEXTAREA","SELECT"].includes(J.tagName)&&(K==="value"||K==="checked")&&q){J._cleanups.add(y(()=>{let C=G();if(J[K]!==C)J[K]=C}));let _=K==="checked"?"change":"input",D=(C)=>G(C.target[K]);J.addEventListener(_,D),J._cleanups.add(()=>J.removeEventListener(_,D))}else if(K.startsWith("on")){let _=K.slice(2).toLowerCase().split(".")[0],D=(C)=>G(C);J.addEventListener(_,D),J._cleanups.add(()=>J.removeEventListener(_,D))}else if(q)J._cleanups.add(y(()=>{let _=Y(K,G());if(K==="class")J.className=_||"";else _==null?J.removeAttribute(K):J.setAttribute(K,_)}));else J.setAttribute(K,Y(K,G))}let L=(K)=>{if(Array.isArray(K))return K.forEach(L);if(typeof K==="function"){let G=document.createTextNode("");J.appendChild(G);let q=[];J._cleanups.add(y(()=>{let Q=K(),B=(Array.isArray(Q)?Q:[Q]).map((_)=>_?._isRuntime?_.container:_ instanceof Node?_:document.createTextNode(_??""));q.forEach((_)=>{JM(_),_.remove()}),B.forEach((_)=>G.parentNode?.insertBefore(_,G)),q=B}))}else J.appendChild(K instanceof Node?K:document.createTextNode(K??""))};return L(X),J},j=(W,Z,X=null)=>{let J=document.createTextNode(""),Y=M("div",{style:"display:contents"},[J]),L=null,K=null;return y(()=>{let G=!!(typeof W==="function"?W():W);if(G!==K){if(K=G,L)L.destroy();let q=G?Z:X;if(q)L=p(()=>typeof q==="function"?q():q),Y.insertBefore(L.container,J)}}),Y};j.not=(W,Z,X)=>j(()=>!(typeof W==="function"?W():W),Z,X);var E=(W,Z,X)=>{let J=document.createTextNode(""),Y=M("div",{style:"display:contents"},[J]),L=new Map;return y(()=>{let K=(typeof W==="function"?W():W)||[],G=new Map,q=[];for(let B=0;BZ(_,B));else L.delete(D);G.set(D,C),q.push(D)}L.forEach((B)=>{B.destroy(),B.container.remove()});let Q=J;for(let B=q.length-1;B>=0;B--){let _=G.get(q[B]);if(_.container.nextSibling!==Q)Y.insertBefore(_.container,Q);Q=_.container}L=G}),Y},$=(W)=>{let Z=U(window.location.hash.replace(/^#/,"")||"/");window.addEventListener("hashchange",()=>Z(window.location.hash.replace(/^#/,"")||"/"));let X=M("div",{class:"router-outlet"}),J=null;return y([Z],async()=>{let Y=Z(),L=W.find((K)=>{let G=K.path.split("/").filter(Boolean),q=Y.split("/").filter(Boolean);return G.length===q.length&&G.every((Q,B)=>Q.startsWith(":")||Q===q[B])})||W.find((K)=>K.path==="*");if(L){let K=L.component;if(typeof K==="function"&&K.toString().includes("import"))K=(await K()).default||await K();let G={};if(L.path.split("/").filter(Boolean).forEach((q,Q)=>{if(q.startsWith(":"))G[q.slice(1)]=Y.split("/").filter(Boolean)[Q]}),J)J.destroy();if($.params)$.params(G);J=p(()=>{try{return typeof K==="function"?K(G):K}catch(q){return M("div",{class:"p-4 text-error"},"Error loading view")}}),X.appendChild(J.container)}}),X};$.params=U({});$.to=(W)=>window.location.hash=W.replace(/^#?\/?/,"#/");$.back=()=>window.history.back();$.path=()=>window.location.hash.replace(/^#/,"")||"/";var KM=(W,Z)=>{let X=typeof Z==="string"?document.querySelector(Z):Z;if(!X)return;if(e.has(X))e.get(X).destroy();let J=p(typeof W==="function"?W:()=>W);return X.replaceChildren(J.container),e.set(X,J),J},OJ={$:U,$watch:y,$html:M,$if:j,$for:E,$router:$,$mount:KM};if(typeof window<"u")((Z)=>{Object.keys(Z).forEach((J)=>{window[J]=Z[J]}),"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer address ul ol li dl dt dd a em strong small i b u mark time sub sup pre code blockquote details summary dialog form label input textarea select button option fieldset legend table thead tbody tfoot tr th td caption img video audio canvas svg iframe picture source progress meter".split(/\s+/).forEach((J)=>{let Y=J.charAt(0).toUpperCase()+J.slice(1);if(!(Y in window))window[Y]=(L,K)=>M(J,L,K)}),window.SigPro=Object.freeze(Z)})(OJ);var i={};z(i,{default:()=>xJ,Tooltip:()=>BJ,Toast:()=>QJ,Timeline:()=>YJ,Tabs:()=>XJ,Table:()=>WJ,Swap:()=>JJ,Stat:()=>eM,Stack:()=>nM,Select:()=>lM,Rating:()=>rM,Range:()=>iM,Radio:()=>pM,Navbar:()=>mM,Modal:()=>hM,Menu:()=>bM,Loading:()=>vM,List:()=>fM,Label:()=>kM,Input:()=>b,Indicator:()=>IM,Fileinput:()=>OM,Fieldset:()=>jM,Fab:()=>HM,Dropdown:()=>UM,Drawer:()=>FM,Datepicker:()=>RM,Colorpicker:()=>TM,Checkbox:()=>_M,Button:()=>g,Badge:()=>qM,Autocomplete:()=>LM,Alert:()=>XM,Accordion:()=>WM});var ZM={};z(ZM,{Accordion:()=>WM});var c={};z(c,{val:()=>P,ui:()=>A,getIcon:()=>V});var P=(W)=>typeof W==="function"?W():W,A=(W,Z)=>typeof Z==="function"?()=>`${W} ${Z()||""}`.trim():`${W} ${Z||""}`.trim(),V=(W)=>{if(!W)return null;if(typeof W==="function")return M("span",{class:"mr-1"},W());if(typeof W==="object")return M("span",{class:"mr-1"},W);if(typeof W==="string"){let Z=W.trim().split(/\s+/),X=Z[Z.length-1]==="right",J=X?Z.slice(0,-1).join(" "):W,Y=X?"ml-1":"mr-1";if(J&&!J.startsWith("icon-[")&&!J.includes("--"))return M("span",{class:Y},J);return M("span",{class:`${J} ${Y}`.trim()})}return null};var WM=(W,Z)=>{let{class:X,title:J,name:Y,open:L,...K}=W;return M("div",{...K,class:A("collapse collapse-arrow bg-base-200 mb-2",X)},[M("input",{type:Y?"radio":"checkbox",name:Y,checked:P(L)}),M("div",{class:"collapse-title text-xl font-medium"},J),M("div",{class:"collapse-content"},Z)])};var GM={};z(GM,{Alert:()=>XM});var XM=(W,Z)=>{let{class:X,actions:J,type:Y="info",soft:L=!0,...K}=W,G={info:"icon-[lucide--info]",success:"icon-[lucide--check-circle]",warning:"icon-[lucide--alert-triangle]",error:"icon-[lucide--alert-circle]"},B=[`alert-${Y}`,L?"alert-soft":"",X].filter(Boolean).join(" "),_=Z||W.message;return M("div",{...K,role:"alert",class:A("alert",B)},()=>[V(G[Y]),M("div",{class:"flex-1"},[M("span",{},[typeof _==="function"?_():_])]),J?M("div",{class:"flex-none"},[typeof J==="function"?J():J]):null].filter(Boolean))};var QM={};z(QM,{Autocomplete:()=>LM});var NJ={es:{close:"Cerrar",confirm:"Confirmar",cancel:"Cancelar",search:"Buscar...",loading:"Cargando...",nodata:"Sin datos"},en:{close:"Close",confirm:"Confirm",cancel:"Cancel",search:"Search...",loading:"Loading...",nodata:"No data"}},IJ=U("es");var x=(W)=>()=>NJ[IJ()][W]||W;var YM={};z(YM,{Input:()=>b});var b=(W)=>{let{class:Z,value:X,type:J="text",icon:Y,oninput:L,placeholder:K,disabled:G,size:q,...Q}=W,B=J==="password",_=U(!1),D={text:"icon-[lucide--text]",password:"icon-[lucide--lock]",date:"icon-[lucide--calendar]",number:"icon-[lucide--hash]",email:"icon-[lucide--mail]",search:"icon-[lucide--search]",tel:"icon-[lucide--phone]",url:"icon-[lucide--link]"},C=Y?V(Y):D[J]?V(D[J]):null,R=()=>V(_()?"icon-[lucide--eye-off]":"icon-[lucide--eye]"),H=C?"pl-10":"",O=B?"pr-10":"",o=()=>{if(Z?.includes("input-xs"))return"btn-xs";if(Z?.includes("input-sm"))return"btn-sm";if(Z?.includes("input-lg"))return"btn-lg";return"btn-md"};return M("div",{class:"relative w-full"},()=>[M("input",{...Q,type:()=>B?_()?"text":"password":J,placeholder:K||" ",class:A("input w-full",`${H} ${O} ${Z||""}`.trim()),value:X,oninput:(h)=>L?.(h),disabled:()=>P(G)}),C?M("div",{class:"absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60"},C):null,B?M("button",{type:"button",class:A("absolute right-3 inset-y-0 flex items-center","btn btn-ghost btn-circle opacity-50 hover:opacity-100",o()),onclick:(h)=>{h.preventDefault(),_(!_())}},()=>R()):null])};var LM=(W)=>{let{class:Z,items:X=[],value:J,onSelect:Y,label:L,placeholder:K,...G}=W,q=U(P(J)||""),Q=U(!1),B=U(-1),_=U(()=>{let R=q().toLowerCase(),H=P(X)||[];return R?H.filter((O)=>(typeof O==="string"?O:O.label).toLowerCase().includes(R)):H}),D=(R)=>{let H=typeof R==="string"?R:R.value,O=typeof R==="string"?R:R.label;if(q(O),typeof J==="function")J(H);Y?.(R),Q(!1),B(-1)},C=(R)=>{let H=_();if(R.key==="ArrowDown")R.preventDefault(),Q(!0),B(Math.min(B()+1,H.length-1));else if(R.key==="ArrowUp")R.preventDefault(),B(Math.max(B()-1,0));else if(R.key==="Enter"&&B()>=0)R.preventDefault(),D(H[B()]);else if(R.key==="Escape")Q(!1)};return M("div",{class:"relative w-full"},[b({label:L,class:Z,placeholder:K||x("search")(),value:q,onfocus:()=>Q(!0),onblur:()=>setTimeout(()=>Q(!1),150),onkeydown:C,oninput:(R)=>{let H=R.target.value;if(q(H),typeof J==="function")J(H);Q(!0),B(-1)},...G}),M("ul",{class:"absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",style:()=>Q()&&_().length?"display:block":"display:none"},[E(_,(R,H)=>M("li",{},[M("a",{class:()=>`block w-full ${B()===H?"active bg-primary text-primary-content":""}`,onclick:()=>D(R),onmouseenter:()=>B(H)},typeof R==="string"?R:R.label)]),(R,H)=>(typeof R==="string"?R:R.value)+H),()=>_().length?null:M("li",{class:"p-2 text-center opacity-50"},x("nodata")())])])};var BM={};z(BM,{Badge:()=>qM});var qM=(W,Z)=>{let{class:X,...J}=W;return M("span",{...J,class:A("badge",X)},Z)};var PM={};z(PM,{Button:()=>g});var g=(W,Z)=>{let{class:X,loading:J,icon:Y,...L}=W,K=V(Y);return M("button",{...L,class:A("btn",X),disabled:()=>P(J)||P(W.disabled)},()=>[P(J)&&M("span",{class:"loading loading-spinner"}),K,Z].filter(Boolean))};var AM={};z(AM,{Checkbox:()=>_M});var _M=(W)=>{let{class:Z,value:X,tooltip:J,toggle:Y,label:L,...K}=W,G=M("input",{...K,type:"checkbox",class:()=>A(P(Y)?"toggle":"checkbox",Z),checked:X}),q=M("label",{class:"label cursor-pointer justify-start gap-3"},[G,L?M("span",{class:"label-text"},L):null]);return J?M("div",{class:"tooltip","data-tip":J},q):q};var CM={};z(CM,{Colorpicker:()=>TM});var TM=(W)=>{let{class:Z,value:X,label:J,...Y}=W,L=U(!1),K=["#000","#1A1A1A","#333","#4D4D4D","#666","#808080","#B3B3B3","#FFF","#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626","#ef4444","#f87171","#fca5a5","#431407","#7c2d12","#9a3412","#c2410c","#ea580c","#f97316","#fb923c","#ffedd5","#713f12","#a16207","#ca8a04","#eab308","#facc15","#fde047","#fef08a","#fff9c4","#064e3b","#065f46","#059669","#10b981","#34d399","#4ade80","#84cc16","#d9f99d","#082f49","#075985","#0284c7","#0ea5e9","#38bdf8","#7dd3fc","#22d3ee","#cffafe","#1e1b4b","#312e81","#4338ca","#4f46e5","#6366f1","#818cf8","#a5b4fc","#e0e7ff","#2e1065","#4c1d95","#6d28d9","#7c3aed","#8b5cf6","#a855f7","#d946ef","#fae8ff"],G=()=>P(X)||"#000000";return M("div",{class:A("relative w-fit",Z)},[M("button",{type:"button",class:"btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",onclick:(q)=>{q.stopPropagation(),L(!L())},...Y},[M("div",{class:"size-5 rounded-sm shadow-inner border border-black/10 shrink-0",style:()=>`background-color: ${G()}`}),J?M("span",{class:"opacity-80"},J):null]),j(L,()=>M("div",{class:"absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",onclick:(q)=>q.stopPropagation()},[M("div",{class:"grid grid-cols-8 gap-1"},K.map((q)=>M("button",{type:"button",style:`background-color: ${q}`,class:()=>{return`size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 + ${G().toLowerCase()===q.toLowerCase()?"ring-2 ring-offset-1 ring-primary z-10 scale-110":""}`},onclick:()=>{if(typeof X==="function")X(q);L(!1)}})))])),j(L,()=>M("div",{class:"fixed inset-0 z-[100]",onclick:()=>L(!1)}))])};var zM={};z(zM,{Datepicker:()=>RM});var RM=(W)=>{let{class:Z,value:X,range:J,label:Y,placeholder:L,hour:K=!1,...G}=W,q=U(!1),Q=U(new Date),B=U(null),_=U(0),D=U(0),C=()=>P(J)===!0,R=new Date,H=`${R.getFullYear()}-${String(R.getMonth()+1).padStart(2,"0")}-${String(R.getDate()).padStart(2,"0")}`,O=(T)=>{let F=T.getFullYear(),S=String(T.getMonth()+1).padStart(2,"0"),k=String(T.getDate()).padStart(2,"0");return`${F}-${S}-${k}`},o=(T)=>{let F=O(T),S=P(X);if(C())if(!S?.start||S.start&&S.end){if(typeof X==="function")X({start:F,end:null,...K&&{startHour:_()}})}else{let k=S.start;if(typeof X==="function"){let u=F{let T=P(X);if(!T)return"";if(typeof T==="string"){if(K&&T.includes("T"))return T.replace("T"," ");return T}if(T.start&&T.end){let F=K&&T.startHour?`${T.start} ${String(T.startHour).padStart(2,"0")}:00`:T.start,S=K&&T.endHour?`${T.end} ${String(T.endHour).padStart(2,"0")}:00`:T.end;return`${F} - ${S}`}if(T.start)return`${K&&T.startHour?`${T.start} ${String(T.startHour).padStart(2,"0")}:00`:T.start}...`;return""}),_J=(T)=>{let F=Q();Q(new Date(F.getFullYear(),F.getMonth()+T,1))},AJ=(T)=>{let F=Q();Q(new Date(F.getFullYear()+T,F.getMonth(),1))},r=({value:T,onChange:F})=>{return M("div",{class:"flex-1"},[M("div",{class:"flex gap-2 items-center"},[M("input",{type:"range",min:0,max:23,value:T,class:"range range-xs flex-1",oninput:(S)=>{let k=parseInt(S.target.value);F(k)}}),M("span",{class:"text-sm font-mono min-w-[48px] text-center"},()=>String(P(T)).padStart(2,"0")+":00")])])};return M("div",{class:A("relative w-full",Z)},[b({label:Y,placeholder:L||(C()?"Seleccionar rango...":"Seleccionar fecha..."),value:h,readonly:!0,icon:V("icon-[lucide--calendar]"),onclick:(T)=>{T.stopPropagation(),q(!q())},...G}),j(q,()=>M("div",{class:"absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",onclick:(T)=>T.stopPropagation()},[M("div",{class:"flex justify-between items-center mb-4 gap-1"},[M("div",{class:"flex gap-0.5"},[M("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>AJ(-1)},V("icon-[lucide--chevrons-left]")),M("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>_J(-1)},V("icon-[lucide--chevron-left]"))]),M("span",{class:"font-bold uppercase flex-1 text-center"},[()=>Q().toLocaleString("es-ES",{month:"short",year:"numeric"})]),M("div",{class:"flex gap-0.5"},[M("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>_J(1)},V("icon-[lucide--chevron-right]")),M("button",{type:"button",class:"btn btn-ghost btn-xs px-1",onclick:()=>AJ(1)},V("icon-[lucide--chevrons-right]"))])]),M("div",{class:"grid grid-cols-7 gap-1",onmouseleave:()=>B(null)},[...["L","M","X","J","V","S","D"].map((T)=>M("div",{class:"text-[10px] opacity-40 font-bold text-center"},T)),()=>{let T=Q(),F=T.getFullYear(),S=T.getMonth(),k=new Date(F,S,1).getDay(),u=k===0?6:k-1,FJ=new Date(F,S+1,0).getDate(),a=[];for(let v=0;v{let w=P(X),l=B(),DJ=typeof w==="string"?w.split("T")[0]===I:w?.start===I,UJ=w?.end===I,s=!1;if(C()&&w?.start){let n=w.start;if(!w.end&&l)s=I>n&&I<=l||I=l;else if(w.end)s=I>n&&I{if(C())B(I)},onclick:()=>o(TJ)},[v.toString()]))}return a}]),K?M("div",{class:"mt-3 pt-2 border-t border-base-300"},[C()?M("div",{class:"flex gap-4"},[r({value:_,onChange:(T)=>{_(T);let F=P(X);if(F?.start)X({...F,startHour:T})}}),r({value:D,onChange:(T)=>{D(T);let F=P(X);if(F?.end)X({...F,endHour:T})}})]):r({value:_,onChange:(T)=>{_(T);let F=P(X);if(F&&typeof F==="string"&&F.includes("-"))X(F.split("T")[0]+"T"+String(T).padStart(2,"0")+":00:00")}})]):null])),j(q,()=>M("div",{class:"fixed inset-0 z-[90]",onclick:()=>q(!1)}))])};var DM={};z(DM,{Drawer:()=>FM});var FM=(W,Z)=>{let{class:X,id:J,open:Y,side:L,content:K,...G}=W,q=J||`drawer-${Math.random().toString(36).slice(2,9)}`;return M("div",{...G,class:A("drawer",X)},[M("input",{id:q,type:"checkbox",class:"drawer-toggle",checked:()=>typeof Y==="function"?Y():Y,onchange:(Q)=>{if(typeof Y==="function")Y(Q.target.checked)}}),M("div",{class:"drawer-content"},[typeof K==="function"?K():K]),M("div",{class:"drawer-side"},[M("label",{for:q,class:"drawer-overlay",onclick:()=>{if(typeof Y==="function")Y(!1)}}),M("div",{class:"min-h-full bg-base-200 w-80"},[typeof L==="function"?L():L])])])};var VM={};z(VM,{Dropdown:()=>UM});var UM=(W,Z)=>{let{class:X,label:J,icon:Y,items:L,...K}=W,G=()=>{if(L)return M("ul",{tabindex:0,class:"dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"},[E(typeof L==="function"?L:()=>L,(Q)=>M("li",{},[M("a",{class:Q.class||"",onclick:(B)=>{if(Q.onclick)Q.onclick(B);if(document.activeElement)document.activeElement.blur()}},[Q.icon?M("span",{},Q.icon):null,M("span",{},Q.label)])]))]);return M("div",{tabindex:0,class:"dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"},[typeof Z==="function"?Z():Z])};return M("div",{...K,class:A("dropdown",X)},[M("div",{tabindex:0,role:"button",class:"btn m-1 flex items-center gap-2"},[Y?typeof Y==="function"?Y():Y:null,J?typeof J==="function"?J():J:null]),G()])};var EM={};z(EM,{Fab:()=>HM});var HM=(W)=>{let{class:Z,icon:X,label:J,actions:Y=[],position:L="bottom-6 right-6",...K}=W;return M("div",{...K,class:A(`fab absolute ${L} flex flex-col-reverse items-end gap-3 z-[100]`,Z)},[M("div",{tabindex:0,role:"button",class:"btn btn-lg btn-circle btn-primary shadow-2xl"},[X?V(X):null,!X&&J?J:null]),...P(Y).map((G)=>M("div",{class:"flex items-center gap-3 transition-all duration-300"},[G.label?M("span",{class:"badge badge-ghost shadow-sm whitespace-nowrap"},G.label):null,M("button",{type:"button",class:`btn btn-circle shadow-lg ${G.class||""}`,onclick:(q)=>{q.stopPropagation(),G.onclick?.(q)}},[G.icon?V(G.icon):G.text||""])]))])};var SM={};z(SM,{Fieldset:()=>jM});var jM=(W,Z)=>{let{class:X,legend:J,...Y}=W;return M("fieldset",{...Y,class:A("fieldset bg-base-200 border border-base-300 p-4 rounded-lg",X)},[()=>{let L=P(J);return L?M("legend",{class:"fieldset-legend font-bold"},[L]):null},Z])};var NM={};z(NM,{Fileinput:()=>OM});var OM=(W)=>{let{class:Z,tooltip:X,max:J=2,accept:Y="*",onSelect:L,...K}=W,G=U([]),q=U(!1),Q=U(null),B=J*1024*1024,_=(C)=>{let R=Array.from(C);if(Q(null),R.find((O)=>O.size>B)){Q(`Máx ${J}MB`);return}G([...G(),...R]),L?.(G())},D=(C)=>{let R=G().filter((H,O)=>O!==C);G(R),L?.(R)};return M("fieldset",{...K,class:A("fieldset w-full p-0",Z)},[M("div",{class:()=>`w-full ${X?"tooltip tooltip-top before:z-50 after:z-50":""}`,"data-tip":X},[M("label",{class:()=>` relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 - ${s()?"border-primary bg-primary/10":"border-base-content/20 bg-base-100 hover:bg-base-200"} - `,ondragover:(m)=>{m.preventDefault(),s(!0)},ondragleave:()=>s(!1),ondrop:(m)=>{m.preventDefault(),s(!1),c(m.dataTransfer.files)}},[A("div",{class:"flex items-center gap-3 w-full"},[A("img",{src:aA,class:"w-5 h-5 opacity-50 shrink-0"}),A("span",{class:"text-sm opacity-70 truncate grow text-left"},"Arrastra o selecciona archivos..."),A("span",{class:"text-[10px] opacity-40 shrink-0"},`Máx ${r}MB`)]),A("input",{type:"file",multiple:!0,accept:a,class:"hidden",onchange:(m)=>c(m.target.files)})])]),()=>l()?A("span",{class:"text-[10px] text-error mt-1 px-1 font-medium"},l()):null,w(()=>n().length>0,()=>A("ul",{class:"mt-2 space-y-1"},[U(n,(m,p)=>A("li",{class:"flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300"},[A("div",{class:"flex items-center gap-2 truncate"},[A("span",{class:"opacity-50"},"\uD83D\uDCC4"),A("span",{class:"truncate font-medium max-w-[200px]"},m.name),A("span",{class:"text-[9px] opacity-40"},`(${(m.size/1024).toFixed(0)} KB)`)]),A("button",{type:"button",class:"btn btn-ghost btn-xs btn-circle",onclick:(f)=>{f.preventDefault(),f.stopPropagation(),b(p)}},[A("img",{src:W,class:"w-3 h-3 opacity-70"})])]),(m)=>m.name+m.lastModified)]))])};var kA={};u(kA,{Indicator:()=>zA});var zA=(o,t)=>A("div",{class:x("indicator",o.class)},[t,A("span",{class:x("indicator-item badge",o.badgeClass)},o.badge)]);var XA={};u(XA,{List:()=>KA});var KA=(o)=>{let{items:t,header:r,render:a,keyFn:e=(i,c)=>c,class:n,...s}=o,l=U(t,(i,c)=>A("li",{class:"list-row"},[a(i,c)]),e);return A("ul",{...s,class:x("list bg-base-100 rounded-box shadow-md",n)},r?[w(r,()=>A("li",{class:"p-4 pb-2 text-xs opacity-60"},[d(r)])),l]:l)};var PA={};u(PA,{Loading:()=>ZA});var ZA=(o)=>{return w(o.$show,()=>A("div",{class:"fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"},[A("span",{class:"loading loading-spinner loading-lg text-primary"})]))};var OA={};u(OA,{Menu:()=>WA});var WA=(o)=>{let t=(r)=>U(()=>r||[],(a)=>A("li",{},[a.children?A("details",{open:a.open},[A("summary",{},[a.icon&&A("span",{class:"mr-2"},a.icon),a.label]),A("ul",{},t(a.children))]):A("a",{class:()=>d(a.active)?"active":"",onclick:a.onclick},[a.icon&&A("span",{class:"mr-2"},a.icon),a.label])]),(a,e)=>a.label||e);return A("ul",{...o,class:x("menu bg-base-200 rounded-box",o.class)},t(o.items))};var $A={};u($A,{Modal:()=>qA});var qA=(o,t)=>{let{title:r,buttons:a,open:e,...n}=o,s={current:null};H(()=>{let i=s.current;if(!i)return;if(e()){if(!i.open)i.showModal()}else if(i.open)i.close()});let l=(i)=>{if(i&&i.preventDefault)i.preventDefault();e(!1)};return A("dialog",{...n,ref:s,class:"modal",oncancel:()=>e(!1)},[A("div",{class:"modal-box"},[r?A("h3",{class:"text-lg font-bold mb-4"},r):null,A("div",{class:"py-2"},[typeof t==="function"?t():t]),A("div",{class:"modal-action flex gap-2"},[...(Array.isArray(a)?a:[a]).filter(Boolean),j({type:"button",onclick:l},R("close")())])]),A("form",{method:"dialog",class:"modal-backdrop",onsubmit:l},[A("button",{},"close")])])};var Ao={};u(Ao,{Navbar:()=>_A});var _A=(o,t)=>A("div",{...o,class:x("navbar bg-base-100 shadow-sm px-4",o.class)},t);var to={};u(to,{Radio:()=>oo});var oo=(o)=>{let{label:t,tooltip:r,value:a,inputValue:e,name:n,...s}=o,l=A("input",{...s,type:"radio",name:n,class:x("radio",o.class),checked:()=>d(a)===e,onclick:()=>{if(typeof a==="function")a(e)}});if(!t&&!r)return l;return A("label",{class:"label cursor-pointer justify-start gap-3"},[l,t?A("span",{class:"label-text"},t):null])};var ao={};u(ao,{Range:()=>so});var so=(o)=>{let{label:t,tooltip:r,value:a,...e}=o,n=A("input",{...e,type:"range",class:x("range",o.class),value:a,disabled:()=>d(o.disabled)});if(!t&&!r)return n;let s=A("div",{class:"flex flex-col gap-2"},[t?A("span",{class:"label-text"},t):null,n]);return r?A("div",{class:"tooltip","data-tip":r},s):s};var ro={};u(ro,{Rating:()=>lo});var lo=(o)=>{let{value:t,count:r=5,mask:a="mask-star",readonly:e=!1,onchange:n,...s}=o,l=`rating-${Math.random().toString(36).slice(2,7)}`;return A("div",{...s,class:()=>`rating ${d(e)?"pointer-events-none":""} ${o.class||""}`},Array.from({length:d(r)},(i,c)=>{let b=c+1;return A("input",{type:"radio",name:l,class:`mask ${a}`,checked:()=>Math.round(d(t))===b,onchange:()=>{if(!d(e)){if(typeof n==="function")n(b);else if(typeof t==="function")t(b)}}})}))};var no={};u(no,{Select:()=>eo});var eo=(o)=>{let{label:t,options:r,value:a,...e}=o,n=A("select",{...e,class:x("select select-bordered w-full",o.class),value:a},U(()=>d(r)||[],(s)=>A("option",{value:s.value,$selected:()=>String(d(a))===String(s.value)},s.label),(s)=>s.value));if(!t)return n;return A("label",{class:"fieldset-label flex flex-col gap-1"},[A("span",{},t),n])};var co={};u(co,{Stack:()=>io});var io=(o,t)=>A("div",{...o,class:x("stack",o.class)},t);var fo={};u(fo,{Stat:()=>mo});var mo=(o)=>A("div",{...o,class:x("stat",o.class)},[o.icon&&A("div",{class:"stat-figure text-secondary"},o.icon),o.label&&A("div",{class:"stat-title"},o.label),A("div",{class:"stat-value"},()=>d(o.value)??o.value),o.desc&&A("div",{class:"stat-desc"},o.desc)]);var bo={};u(bo,{Swap:()=>go});var go=(o)=>A("label",{class:x("swap",o.class)},[A("input",{type:"checkbox",checked:o.value}),A("div",{class:"swap-on"},o.on),A("div",{class:"swap-off"},o.off)]);var uo={};u(uo,{Table:()=>xo});var xo=(o)=>{let{items:t=[],columns:r=[],keyFn:a,zebra:e=!1,pinRows:n=!1,empty:s=R("nodata")(),...l}=o;return A("div",{class:"overflow-x-auto w-full bg-base-100 rounded-box border border-base-300"},[A("table",{...l,class:()=>x("table",`${d(e)?"table-zebra":""} ${d(n)?"table-pin-rows":""} ${o.class||""}`)},[A("thead",{},[A("tr",{},r.map((c)=>A("th",{class:c.class||""},c.label)))]),A("tbody",{},[U(t,(c,b)=>{return A("tr",{class:"hover"},r.map((m)=>{let p=()=>{if(m.render)return m.render(c,b);let f=c[m.key];return d(f)};return A("td",{class:m.class||""},[p])}))},a||((c,b)=>c.id||b)),w(()=>d(t).length===0,()=>A("tr",{},[A("td",{colspan:r.length,class:"text-center p-10 opacity-50"},[d(s)])]))]),w(()=>r.some((c)=>c.footer),()=>A("tfoot",{},[A("tr",{},r.map((c)=>A("th",{},c.footer||"")))]))])])};var Bo={};u(Bo,{Tabs:()=>po});var po=(o)=>{let{items:t,...r}=o,a=typeof t==="function"?t:()=>t||[];return A("div",{...r,class:"flex flex-col gap-4 w-full"},[A("div",{role:"tablist",class:x("tabs tabs-box",o.class)},U(a,(e)=>A("a",{role:"tab",class:()=>x("tab",d(e.active)&&"tab-active",d(e.disabled)&&"tab-disabled",e.tip&&"tooltip"),"data-tip":e.tip,onclick:(n)=>!d(e.disabled)&&e.onclick?.(n)},e.label),(e)=>e.label)),()=>{let e=a().find((s)=>d(s.active));if(!e)return null;let n=d(e.content);return A("div",{class:"p-4"},[typeof n==="function"?n():n])}])};var So={};u(So,{Timeline:()=>Co});var Co=(o)=>{let{items:t=[],vertical:r=!0,compact:a=!1,...e}=o,n={info:G,success:L,warning:N,error:J};return A("ul",{...e,class:()=>`timeline ${d(r)?"timeline-vertical":"timeline-horizontal"} ${d(a)?"timeline-compact":""} ${o.class||""}`},[U(t,(s,l)=>{let i=l===0,c=l===d(t).length-1,b=s.type||"success",m=(p)=>typeof p==="function"?p():p;return A("li",{class:"flex-1"},[!i?A("hr",{class:s.completed?"bg-primary":""}):null,A("div",{class:"timeline-start"},[m(s.title)]),A("div",{class:"timeline-middle"},[A("img",{src:n[b]||s.icon||n.success,class:"w-4 h-4 object-contain mx-1",alt:b})]),A("div",{class:"timeline-end timeline-box shadow-sm"},[m(s.detail)]),!c?A("hr",{class:s.completed?"bg-primary":""}):null])},(s,l)=>s.id||l)])};var wo={};u(wo,{Toast:()=>Uo});var Uo=(o,t="alert-success",r=3500)=>{let a=document.getElementById("sigpro-toast-container");if(!a)a=A("div",{id:"sigpro-toast-container",class:"fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"}),document.body.appendChild(a);let e=A("div",{style:"display: contents"});a.appendChild(e);let n,s=()=>{clearTimeout(n);let c=e.firstElementChild;if(c&&!c.classList.contains("opacity-0"))c.classList.add("translate-x-full","opacity-0"),setTimeout(()=>{if(i.destroy(),e.remove(),!a.hasChildNodes())a.remove()},300);else i.destroy(),e.remove()},i=xA(()=>{let c=A("div",{class:`alert alert-soft ${t} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`},[A("span",{},[typeof o==="function"?o():o]),j({class:"btn-xs btn-circle btn-ghost",onclick:s},"✕")]);return requestAnimationFrame(()=>c.classList.remove("translate-x-10","opacity-0")),c},e);if(r>0)n=setTimeout(s,r);return s};var ho={};u(ho,{Tooltip:()=>vo});var vo=(o,t)=>A("div",{...o,class:x("tooltip",o.class),"data-tip":o.tip},t);var Ho={...pA,...CA,...wA,...hA,...RA,...DA,...VA,...QA,...MA,...jA,...GA,...JA,...TA,...kA,...SA,...XA,...PA,...OA,...$A,...Ao,...to,...ao,...ro,...no,...co,...fo,...bo,...uo,...Bo,...So,...wo,...ho},Ko={...Ho,install:(o=window)=>{Object.entries(Ho).forEach(([t,r])=>{o[t]=r}),console.log("\uD83D\uDE80 SigproUI")}};if(typeof window<"u")Object.entries(rA).forEach(([o,t])=>{window[o]=t}),window.Icons=lA,window.Utils=X,window.tt=R,window.SigProUI={...rA,Icons:lA,Utils:X,tt:R},console.log("SigProUI ready");})(); + ${q()?"border-primary bg-primary/10":"border-base-content/20 bg-base-100 hover:bg-base-200"} + `,ondragover:(C)=>{C.preventDefault(),q(!0)},ondragleave:()=>q(!1),ondrop:(C)=>{C.preventDefault(),q(!1),_(C.dataTransfer.files)}},[M("div",{class:"flex items-center gap-3 w-full"},[V("icon-[lucide--upload]"),M("span",{class:"text-sm opacity-70 truncate grow text-left"},"Arrastra o selecciona archivos..."),M("span",{class:"text-[10px] opacity-40 shrink-0"},`Máx ${J}MB`)]),M("input",{type:"file",multiple:!0,accept:Y,class:"hidden",onchange:(C)=>_(C.target.files)})])]),()=>Q()?M("span",{class:"text-[10px] text-error mt-1 px-1 font-medium"},Q()):null,j(()=>G().length>0,()=>M("ul",{class:"mt-2 space-y-1"},[E(G,(C,R)=>M("li",{class:"flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300"},[M("div",{class:"flex items-center gap-2 truncate"},[M("span",{class:"opacity-50"},"\uD83D\uDCC4"),M("span",{class:"truncate font-medium max-w-[200px]"},C.name),M("span",{class:"text-[9px] opacity-40"},`(${(C.size/1024).toFixed(0)} KB)`)]),M("button",{type:"button",class:"btn btn-ghost btn-xs btn-circle",onclick:(H)=>{H.preventDefault(),H.stopPropagation(),D(R)}},[V("icon-[lucide--x]")])]),(C)=>C.name+C.lastModified)]))])};var xM={};z(xM,{Indicator:()=>IM});var IM=(W,Z)=>M("div",{class:"indicator"},()=>[Z,W.value&&M("span",{class:A("indicator-item badge",W.class)},W.value)].filter(Boolean));var wM={};z(wM,{Label:()=>kM});var kM=(W)=>{let{children:Z,value:X,floating:J=!1,error:Y,required:L,class:K,...G}=W;if(J)return M("label",{class:A("floating-label w-full",K),...G},()=>[X?M("span",{},X):null,Z,Y?M("span",{class:"text-error text-xs"},P(Y)):null]);return M("label",{class:A("input w-full",K),...G},()=>[X?M("span",{class:"label"},X):null,Z,Y?M("span",{class:"text-error text-xs"},P(Y)):null])};var yM={};z(yM,{List:()=>fM});var fM=(W)=>{let{class:Z,items:X,header:J,render:Y,keyFn:L=(q,Q)=>Q,...K}=W,G=E(X,(q,Q)=>M("li",{class:"list-row"},[Y(q,Q)]),L);return M("ul",{...K,class:A("list bg-base-100 rounded-box shadow-md",Z)},J?[j(J,()=>M("li",{class:"p-4 pb-2 text-xs opacity-60"},[P(J)])),G]:G)};var $M={};z($M,{Loading:()=>vM});var vM=(W)=>{return j(W.$show,()=>M("div",{class:"fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"},[M("span",{class:"loading loading-spinner loading-lg text-primary"})]))};var gM={};z(gM,{Menu:()=>bM});var bM=(W)=>{let{class:Z,items:X,...J}=W,Y=(L)=>E(()=>L||[],(K)=>M("li",{},[K.children?M("details",{open:K.open},[M("summary",{},[K.icon&&M("span",{class:"mr-2"},K.icon),K.label]),M("ul",{},Y(K.children))]):M("a",{class:()=>P(K.active)?"active":"",onclick:K.onclick},[K.icon&&M("span",{class:"mr-2"},K.icon),K.label])]),(K,G)=>K.label||G);return M("ul",{...J,class:A("menu bg-base-200 rounded-box",Z)},Y(X))};var uM={};z(uM,{Modal:()=>hM});var hM=(W,Z)=>{let{class:X,title:J,buttons:Y,open:L,...K}=W,G={current:null};y(()=>{let Q=G.current;if(!Q)return;if(P(L)){if(!Q.open)Q.showModal()}else if(Q.open)Q.close()});let q=(Q)=>{if(Q&&Q.preventDefault)Q.preventDefault();if(typeof L==="function")L(!1)};return M("dialog",{...K,ref:G,class:A("modal",X),oncancel:()=>typeof L==="function"&&L(!1)},[M("div",{class:"modal-box"},[J?M("h3",{class:"text-lg font-bold mb-4"},J):null,M("div",{class:"py-2"},[typeof Z==="function"?Z():Z]),M("div",{class:"modal-action flex gap-2"},[...(Array.isArray(Y)?Y:[Y]).filter(Boolean),g({type:"button",onclick:q},x("close")())])]),M("form",{method:"dialog",class:"modal-backdrop",onsubmit:q},[M("button",{},"close")])])};var dM={};z(dM,{Navbar:()=>mM});var mM=(W,Z)=>{let{class:X,...J}=W;return M("div",{...J,class:A("navbar bg-base-100 shadow-sm px-4",X)},Z)};var cM={};z(cM,{Radio:()=>pM});var pM=(W)=>{let{class:Z,label:X,tooltip:J,value:Y,inputValue:L,name:K,...G}=W,q=M("input",{...G,type:"radio",name:K,class:A("radio",Z),checked:()=>P(Y)===L,onclick:()=>{if(typeof Y==="function")Y(L)}});if(!X&&!J)return q;let Q=M("label",{class:"label cursor-pointer justify-start gap-3"},[q,X?M("span",{class:"label-text"},X):null]);return J?M("div",{class:"tooltip","data-tip":J},Q):Q};var oM={};z(oM,{Range:()=>iM});var iM=(W)=>{let{class:Z,label:X,tooltip:J,value:Y,...L}=W,K=M("input",{...L,type:"range",class:A("range",Z),value:Y,disabled:()=>P(W.disabled)});if(!X&&!J)return K;let G=M("div",{class:"flex flex-col gap-2"},[X?M("span",{class:"label-text"},X):null,K]);return J?M("div",{class:"tooltip","data-tip":J},G):G};var aM={};z(aM,{Rating:()=>rM});var rM=(W)=>{let{class:Z,value:X,count:J=5,mask:Y="mask-star",readonly:L=!1,onchange:K,...G}=W,q=`rating-${Math.random().toString(36).slice(2,7)}`;return M("div",{...G,class:()=>A(`rating ${P(L)?"pointer-events-none":""}`,Z)},Array.from({length:P(J)},(Q,B)=>{let _=B+1;return M("input",{type:"radio",name:q,class:`mask ${Y}`,checked:()=>Math.round(P(X))===_,onchange:()=>{if(!P(L)){if(typeof K==="function")K(_);else if(typeof X==="function")X(_)}}})}))};var sM={};z(sM,{Select:()=>lM});var lM=(W)=>{let{class:Z,label:X,items:J,value:Y,...L}=W,K=M("select",{...L,class:A("select select-bordered w-full",Z),value:Y},E(()=>P(J)||[],(G)=>M("option",{value:G.value,$selected:()=>String(P(Y))===String(G.value)},G.label),(G)=>G.value));if(!X)return K;return M("label",{class:"fieldset-label flex flex-col gap-1"},[M("span",{},X),K])};var tM={};z(tM,{Stack:()=>nM});var nM=(W,Z)=>{let{class:X,...J}=W;return M("div",{...J,class:A("stack",X)},Z)};var MJ={};z(MJ,{Stat:()=>eM});var eM=(W)=>{let{class:Z,icon:X,label:J,value:Y,desc:L,...K}=W;return M("div",{...K,class:A("stat",Z)},[X&&M("div",{class:"stat-figure text-secondary"},X),J&&M("div",{class:"stat-title"},J),M("div",{class:"stat-value"},()=>P(Y)??Y),L&&M("div",{class:"stat-desc"},L)])};var KJ={};z(KJ,{Swap:()=>JJ});var JJ=(W)=>{let{class:Z,value:X,on:J,off:Y,...L}=W;return M("label",{...L,class:A("swap",Z)},[M("input",{type:"checkbox",checked:P(X)}),M("div",{class:"swap-on"},J),M("div",{class:"swap-off"},Y)])};var ZJ={};z(ZJ,{Table:()=>WJ});var WJ=(W)=>{let{class:Z,items:X=[],columns:J=[],keyFn:Y,zebra:L=!1,pinRows:K=!1,empty:G=x("nodata")(),...q}=W;return M("div",{class:"overflow-x-auto w-full bg-base-100 rounded-box border border-base-300"},[M("table",{...q,class:()=>{let B=P(L)?"table-zebra":"",_=P(K)?"table-pin-rows":"";return A("table",Z,B,_)}},[M("thead",{},[M("tr",{},J.map((B)=>M("th",{class:B.class||""},B.label)))]),M("tbody",{},[E(X,(B,_)=>{return M("tr",{class:"hover"},J.map((D)=>{let C=()=>{if(D.render)return D.render(B,_);let R=B[D.key];return P(R)};return M("td",{class:D.class||""},[C])}))},Y||((B,_)=>B.id||_)),j(()=>P(X).length===0,()=>M("tr",{},[M("td",{colspan:J.length,class:"text-center p-10 opacity-50"},[P(G)])]))]),j(()=>J.some((B)=>B.footer),()=>M("tfoot",{},[M("tr",{},J.map((B)=>M("th",{},B.footer||"")))]))])])};var GJ={};z(GJ,{Tabs:()=>XJ});var XJ=(W)=>{let{class:Z,items:X,activeIndex:J=U(0),...Y}=W,L=typeof X==="function"?X:()=>X||[],K=U(0),G=J!==void 0?J:K,q=(Q,B)=>(_)=>{if(typeof G==="function")G(Q);B?.(_)};return M("div",{...Y,class:"flex flex-col gap-4 w-full"},[M("div",{role:"tablist",class:A("tabs tabs-box",Z)},E(L,(Q,B)=>{let _=P(Q.active)??G()===B;return M("a",{role:"tab",class:()=>A("tab",_?"tab-active":"",P(Q.disabled)?"tab-disabled":""),onclick:!P(Q.disabled)?q(B,Q.onclick):void 0},Q.label)},(Q,B)=>Q.label+B)),()=>{let Q=L().find((_,D)=>P(_.active)??G()===D);if(!Q)return null;let B=P(Q.content);return M("div",{class:"p-4"},[typeof B==="function"?B():B])}])};var LJ={};z(LJ,{Timeline:()=>YJ});var YJ=(W)=>{let{class:Z,items:X=[],vertical:J=!0,compact:Y=!1,...L}=W,K={info:"icon-[lucide--info]",success:"icon-[lucide--check-circle]",warning:"icon-[lucide--alert-triangle]",error:"icon-[lucide--alert-circle]"};return M("ul",{...L,class:()=>A(`timeline ${P(J)?"timeline-vertical":"timeline-horizontal"} ${P(Y)?"timeline-compact":""}`,Z)},[E(X,(G,q)=>{let Q=q===0,B=q===P(X).length-1,_=G.type||"success",D=(C)=>typeof C==="function"?C():C;return M("li",{class:"flex-1"},[!Q?M("hr",{class:G.completed?"bg-primary":""}):null,M("div",{class:"timeline-start"},[D(G.title)]),M("div",{class:"timeline-middle"},[G.icon?V(G.icon):V(K[_]||K.success)]),M("div",{class:"timeline-end timeline-box shadow-sm"},[D(G.detail)]),!B?M("hr",{class:G.completed?"bg-primary":""}):null])},(G,q)=>G.id||q)])};var qJ={};z(qJ,{Toast:()=>QJ});var QJ=(W,Z="alert-success",X=3500)=>{let J=document.getElementById("sigpro-toast-container");if(!J)J=M("div",{id:"sigpro-toast-container",class:"fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"}),document.body.appendChild(J);let Y=M("div",{style:"display: contents"});J.appendChild(Y);let L,K=()=>{clearTimeout(L);let Q=Y.firstElementChild;if(Q&&!Q.classList.contains("opacity-0"))Q.classList.add("translate-x-full","opacity-0"),setTimeout(()=>{if(q.destroy(),Y.remove(),!J.hasChildNodes())J.remove()},300);else q.destroy(),Y.remove()},q=KM(()=>{let Q=V("icon-[lucide--x]"),B=M("div",{class:`alert alert-soft ${Z} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`},[M("span",{},[typeof W==="function"?W():W]),g({class:"btn-xs btn-circle btn-ghost",onclick:K},Q)]);return requestAnimationFrame(()=>B.classList.remove("translate-x-10","opacity-0")),B},Y);if(X>0)L=setTimeout(K,X);return K};var PJ={};z(PJ,{Tooltip:()=>BJ});var BJ=(W,Z)=>M("div",{...W,class:()=>A("tooltip",W.ui,W.class),"data-tip":W.tip},Z);var zJ={...ZM,...GM,...QM,...BM,...PM,...AM,...CM,...zM,...DM,...VM,...EM,...SM,...NM,...xM,...YM,...wM,...yM,...$M,...gM,...uM,...dM,...cM,...oM,...aM,...sM,...tM,...MJ,...KJ,...ZJ,...GJ,...LJ,...qJ,...PJ},xJ={...zJ,install:(W=window)=>{Object.entries(zJ).forEach(([Z,X])=>{W[Z]=X}),console.log("\uD83D\uDE80 SigproUI")}};if(typeof window<"u")Object.entries(i).forEach(([W,Z])=>{window[W]=Z}),window.Utils=c,window.tt=x,window.SigProUI={...i,Utils:c,tt:x},console.log("\uD83C\uDFA8 SigProUI ready");})(); diff --git a/docs/sigpro.css b/docs/sigpro.css new file mode 100644 index 0000000..9dd3aa2 --- /dev/null +++ b/docs/sigpro.css @@ -0,0 +1,2 @@ +/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ +@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-gray-500:oklch(55.1% .027 264.364);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-3xl:48rem;--container-5xl:64rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-bold:700;--font-weight-black:900;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-widest:.1em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-3xl:1.5rem;--drop-shadow-2xl:0 25px 25px #00000026;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-sm:8px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}@media (prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}}:root:has(input.theme-controller[value=light]:checked),[data-theme=light]{color-scheme:light;--color-base-100:oklch(100% 0 0);--color-base-200:oklch(98% 0 0);--color-base-300:oklch(95% 0 0);--color-base-content:oklch(21% .006 285.885);--color-primary:oklch(45% .24 277.023);--color-primary-content:oklch(93% .034 272.788);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root:has(input.theme-controller[value=dark]:checked),[data-theme=dark]{color-scheme:dark;--color-base-100:oklch(25.33% .016 252.42);--color-base-200:oklch(23.26% .014 253.1);--color-base-300:oklch(21.15% .012 254.09);--color-base-content:oklch(97.807% .029 256.847);--color-primary:oklch(58% .233 277.117);--color-primary-content:oklch(96% .018 272.314);--color-secondary:oklch(65% .241 354.308);--color-secondary-content:oklch(94% .028 342.258);--color-accent:oklch(77% .152 181.912);--color-accent-content:oklch(38% .063 188.416);--color-neutral:oklch(14% .005 285.823);--color-neutral-content:oklch(92% .004 286.32);--color-info:oklch(74% .16 232.661);--color-info-content:oklch(29% .066 243.157);--color-success:oklch(76% .177 163.223);--color-success-content:oklch(37% .077 168.94);--color-warning:oklch(82% .189 84.429);--color-warning-content:oklch(41% .112 45.904);--color-error:oklch(71% .194 13.428);--color-error-content:oklch(27% .105 12.094);--radius-selector:.5rem;--radius-field:.25rem;--radius-box:.5rem;--size-selector:.25rem;--size-field:.25rem;--border:1px;--depth:1;--noise:0}:root{--fx-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");scrollbar-color:currentColor #0000}@supports (color:color-mix(in lab, red, red)){:root{scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) #0000}}@property --radialprogress{syntax:"";inherits:true;initial-value:0%}:root:not(span){overflow:var(--page-overflow)}:root{background:var(--page-scroll-bg,var(--root-bg));--page-scroll-bg-on:linear-gradient(var(--root-bg,#0000), var(--root-bg,#0000)) var(--root-bg,#0000)}@supports (color:color-mix(in lab, red, red)){:root{--page-scroll-bg-on:linear-gradient(var(--root-bg,#0000), var(--root-bg,#0000)) color-mix(in srgb, var(--root-bg,#0000), oklch(0% 0 0) calc(var(--page-has-backdrop,0) * 40%))}}:root{--page-scroll-transition-on:background-color .3s ease-out;transition:var(--page-scroll-transition);scrollbar-gutter:var(--page-scroll-gutter,unset);scrollbar-gutter:if(style(--page-has-scroll: 1): var(--page-scroll-gutter,unset) ; else: unset)}@keyframes set-page-has-scroll{0%,to{--page-has-scroll:1}}:root,[data-theme]{background:var(--page-scroll-bg,var(--root-bg));color:var(--color-base-content)}:where(:root,[data-theme]){--root-bg:var(--color-base-100)}}@layer components;@layer utilities{@layer daisyui.l1.l2.l3{.modal{pointer-events:none;visibility:hidden;width:100%;max-width:none;height:100%;max-height:none;color:inherit;transition:visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;overscroll-behavior:contain;z-index:999;scrollbar-gutter:auto;background-color:#0000;place-items:center;margin:0;padding:0;display:grid;position:fixed;inset:0;overflow:clip}.modal::backdrop{display:none}:where(.drawer-side){overflow:hidden}.drawer-side{pointer-events:none;visibility:hidden;z-index:10;overscroll-behavior:contain;opacity:0;width:100%;transition:opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete;inset-inline-start:0;background-color:#0000;grid-template-rows:repeat(1,minmax(0,1fr));grid-template-columns:repeat(1,minmax(0,1fr));grid-row-start:1;grid-column-start:1;place-items:flex-start start;height:100dvh;display:grid;position:fixed;top:0}.drawer-side>.drawer-overlay{cursor:pointer;background-color:oklch(0% 0 0/.4);place-self:stretch stretch;position:sticky;top:0}.drawer-side>*{grid-row-start:1;grid-column-start:1}.drawer-side>:not(.drawer-overlay){will-change:transform;transition:translate .3s ease-out,width .2s ease-out;translate:-100%}[dir=rtl] :is(.drawer-side>:not(.drawer-overlay)){translate:100%}.fab{pointer-events:none;z-index:999;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));white-space:nowrap;inset-inline-end:1rem;flex-direction:column-reverse;align-items:flex-end;gap:.5rem;display:flex;position:fixed;bottom:1rem}.fab>*{pointer-events:auto;align-items:center;gap:.5rem;display:flex}.fab>:hover,.fab>:has(:focus-visible){z-index:1}.fab>[tabindex]:first-child{transition-property:opacity,visibility,rotate;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:grid;position:relative}.fab .fab-close,.fab .fab-main-action{inset-inline-end:0;position:absolute;bottom:0}:is(.fab:focus-within:has(.fab-close),.fab:focus-within:has(.fab-main-action))>[tabindex]{opacity:0;rotate:90deg}.fab:focus-within>[tabindex]:first-child{pointer-events:none}.fab:focus-within>:nth-child(n+2){visibility:visible;--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:1}.fab>:nth-child(n+2){visibility:hidden;--tw-scale-x:80%;--tw-scale-y:80%;--tw-scale-z:80%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:0;transition-property:opacity,scale,visibility;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.fab>:nth-child(n+2).fab-main-action,.fab>:nth-child(n+2).fab-close{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.fab>:nth-child(3){transition-delay:30ms}.fab>:nth-child(4){transition-delay:60ms}.fab>:nth-child(5){transition-delay:90ms}.fab>:nth-child(6){transition-delay:.12s}.drawer-toggle{appearance:none;opacity:0;width:0;height:0;position:fixed}:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:currentColor oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4))}@supports (color:color-mix(in lab, red, red)){:where(.drawer-toggle:checked~.drawer-side){scrollbar-color:color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop,0) * .4))}}:where(:root:has(.drawer-toggle:checked)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll;animation-timeline:scroll()}.tooltip{--tt-bg:var(--color-neutral);--tt-off:calc(100% + .5rem);--tt-tail:calc(100% + 1px + .25rem);display:inline-block;position:relative}.tooltip>.tooltip-content,.tooltip[data-tip]:before{border-radius:var(--radius-field);text-align:center;white-space:normal;max-width:20rem;color:var(--color-neutral-content);opacity:0;background-color:var(--tt-bg);pointer-events:none;z-index:2;--tw-content:attr(data-tip);content:var(--tw-content);width:max-content;padding-block:.25rem;padding-inline:.5rem;font-size:.875rem;line-height:1.25;position:absolute}.tooltip:after{opacity:0;background-color:var(--tt-bg);content:"";pointer-events:none;--mask-tooltip:url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");width:.625rem;height:.25rem;-webkit-mask-position:-1px 0;mask-position:-1px 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:var(--mask-tooltip);-webkit-mask-image:var(--mask-tooltip);mask-image:var(--mask-tooltip);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.tooltip>.tooltip-content,.tooltip[data-tip]:before,.tooltip:after{transition:opacity .2s cubic-bezier(.4,0,.2,1) 75ms,transform .2s cubic-bezier(.4,0,.2,1) 75ms}}:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))>.tooltip-content,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible)):after{opacity:1;--tt-pos:0rem}@media (prefers-reduced-motion:no-preference){:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))>.tooltip-content,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible))[data-tip]:before,:is(.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))).tooltip-open,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):hover,.tooltip:is([data-tip]:not([data-tip=""]),:has(.tooltip-content:not(:empty))):has(:focus-visible)):after{transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}}.tab{cursor:pointer;appearance:none;text-align:center;webkit-user-select:none;-webkit-user-select:none;user-select:none;flex-wrap:wrap;justify-content:center;align-items:center;display:inline-flex;position:relative}@media (hover:hover){.tab:hover{color:var(--color-base-content)}}.tab{--tab-p:.75rem;--tab-bg:var(--color-base-100);--tab-border-color:var(--color-base-300);--tab-radius-ss:0;--tab-radius-se:0;--tab-radius-es:0;--tab-radius-ee:0;--tab-order:0;--tab-radius-min:calc(.75rem - var(--border));--tab-radius-limit:min(var(--radius-field), var(--tab-radius-min));--tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px);order:var(--tab-order);height:var(--tab-height);padding-inline:var(--tab-p);border-color:#0000;font-size:.875rem}.tab:is(input[type=radio]){min-width:fit-content}.tab:is(input[type=radio]):after{--tw-content:attr(aria-label);content:var(--tw-content)}.tab:is(label){position:relative}.tab:is(label) input{cursor:pointer;appearance:none;opacity:0;position:absolute;inset:0}:is(.tab:checked,.tab:is(label:has(:checked)),.tab:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]))+.tab-content{display:block}.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.tab:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:color-mix(in oklab, var(--color-base-content) 50%, transparent)}}.tab:not(input):empty{cursor:default;flex-grow:1}.tab:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.tab:focus{outline-offset:2px;outline:2px solid #0000}}.tab:focus-visible,.tab:is(label:has(:checked:focus-visible)){outline-offset:-5px;outline:2px solid}.tab[disabled]{pointer-events:none;opacity:.4}.tab\!{cursor:pointer!important;appearance:none!important;text-align:center!important;webkit-user-select:none!important;-webkit-user-select:none!important;user-select:none!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;display:inline-flex!important;position:relative!important}@media (hover:hover){.tab\!:hover{color:var(--color-base-content)!important}}.tab\!{--tab-p:.75rem!important;--tab-bg:var(--color-base-100)!important;--tab-border-color:var(--color-base-300)!important;--tab-radius-ss:0!important;--tab-radius-se:0!important;--tab-radius-es:0!important;--tab-radius-ee:0!important;--tab-order:0!important;--tab-radius-min:calc(.75rem - var(--border))!important;--tab-radius-limit:min(var(--radius-field), var(--tab-radius-min))!important;--tab-radius-grad:#0000 calc(69% - var(--border)), var(--tab-border-color) calc(69% - var(--border) + .25px), var(--tab-border-color) 69%, var(--tab-bg) calc(69% + .25px)!important;order:var(--tab-order)!important;height:var(--tab-height)!important;padding-inline:var(--tab-p)!important;border-color:#0000!important;font-size:.875rem!important}.tab\!:is(input[type=radio]){min-width:fit-content!important}.tab\!:is(input[type=radio]):after{--tw-content:attr(aria-label)!important;content:var(--tw-content)!important}.tab\!:is(label){position:relative!important}.tab\!:is(label) input{cursor:pointer!important;appearance:none!important;opacity:0!important;position:absolute!important;inset:0!important}:is(.tab\!:checked,.tab\!:is(label:has(:checked)),.tab\!:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]))+.tab-content{display:block!important}.tab\!:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:var(--color-base-content)!important}@supports (color:color-mix(in lab, red, red)){.tab\!:not(:checked,label:has(:checked),:hover,.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]){color:color-mix(in oklab, var(--color-base-content) 50%, transparent)!important}}.tab\!:not(input):empty{cursor:default!important;flex-grow:1!important}.tab\!:focus{--tw-outline-style:none!important;outline-style:none!important}@media (forced-colors:active){.tab\!:focus{outline-offset:2px!important;outline:2px solid #0000!important}}.tab\!:focus-visible,.tab\!:is(label:has(:checked:focus-visible)){outline-offset:-5px!important;outline:2px solid!important}.tab\![disabled]{pointer-events:none!important;opacity:.4!important}.menu{--menu-active-fg:var(--color-neutral-content);--menu-active-bg:var(--color-neutral);flex-flow:column wrap;width:fit-content;padding:.5rem;font-size:.875rem;display:flex}.menu :where(li ul){white-space:nowrap;margin-inline-start:1rem;padding-inline-start:.5rem;position:relative}.menu :where(li ul):before{background-color:var(--color-base-content);opacity:.1;width:var(--border);content:"";inset-inline-start:0;position:absolute;top:.75rem;bottom:.75rem}.menu :where(li>.menu-dropdown:not(.menu-dropdown-show)){display:none}.menu :where(li:not(.menu-title)>:not(ul,details,.menu-title,.btn)),.menu :where(li:not(.menu-title)>details>summary:not(.menu-title)){border-radius:var(--radius-field);text-align:start;text-wrap:balance;-webkit-user-select:none;user-select:none;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;gap:.5rem;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:grid}.menu :where(li>details>summary){--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li>details>summary){outline-offset:2px;outline:2px solid #0000}}.menu :where(li>details>summary)::-webkit-details-marker{display:none}:is(.menu :where(li>details>summary),.menu :where(li>.menu-dropdown-toggle)):after{content:"";transform-origin:50%;pointer-events:none;justify-self:flex-end;width:.375rem;height:.375rem;transition-property:rotate,translate;transition-duration:.2s;display:block;translate:0 -1px;rotate:-135deg;box-shadow:inset 2px 2px}.menu details{interpolate-size:allow-keywords;overflow:hidden}.menu details::details-content{block-size:0}@media (prefers-reduced-motion:no-preference){.menu details::details-content{transition-behavior:allow-discrete;transition-property:block-size,content-visibility;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}}.menu details[open]::details-content{block-size:auto}.menu :where(li>details[open]>summary):after,.menu :where(li>.menu-dropdown-toggle.menu-dropdown-show):after{translate:0 1px;rotate:45deg}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{color:var(--color-base-content);--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn).menu-focus,.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title),li:not(.menu-title,.disabled)>details>summary:not(.menu-title)):not(.menu-active,:active,.btn):focus-visible{outline-offset:2px;outline:2px solid #0000}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){outline-offset:2px;outline:2px solid #0000}}.menu :where(li:not(.menu-title,.disabled)>:not(ul,details,.menu-title):not(.menu-active,:active,.btn):hover,li:not(.menu-title,.disabled)>details>summary:not(.menu-title):not(.menu-active,:active,.btn):hover){box-shadow:inset 0 1px oklch(0% 0 0/.01),inset 0 -1px oklch(100% 0 0/.01)}.menu :where(li:empty){background-color:var(--color-base-content);opacity:.1;height:1px;margin:.5rem 1rem}.menu :where(li){flex-flow:column wrap;flex-shrink:0;align-items:stretch;display:flex;position:relative}.menu :where(li) .badge{justify-self:flex-end}.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{outline-offset:2px;outline:2px solid #0000}}.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active{color:var(--menu-active-fg);background-color:var(--menu-active-bg);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise)}:is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active):not(:is(.menu :where(li)>:not(ul,.menu-title,details,.btn):active,.menu :where(li)>:not(ul,.menu-title,details,.btn).menu-active,.menu :where(li)>details>summary:active):active){box-shadow:0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg)}.menu :where(li).menu-disabled{pointer-events:none;color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.menu :where(li).menu-disabled{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.menu .dropdown:focus-within .menu-dropdown-toggle:after{translate:0 1px;rotate:45deg}.menu .dropdown-content{margin-top:.5rem;padding:.5rem}.menu .dropdown-content:before{display:none}.floating-label{display:block;position:relative}.floating-label input{display:block}.floating-label input::placeholder,.floating-label textarea::placeholder{transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out}.floating-label>span{z-index:1;background-color:var(--color-base-100);opacity:0;inset-inline-start:.75rem;top:calc(var(--size-field,.25rem) * 10 / 2);pointer-events:none;border-radius:2px;padding-inline:.25rem;font-size:.875rem;line-height:1;transition:top .1s ease-out,translate .1s ease-out,scale .1s ease-out,opacity .1s ease-out;position:absolute;translate:0 -50%}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown))) ::placeholder{opacity:0;pointer-events:auto;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}:is(.floating-label:focus-within,.floating-label:not(:has(input:placeholder-shown,textarea:placeholder-shown)))>span{opacity:1;pointer-events:auto;z-index:2;top:0;translate:-12.5% calc(-50% - .125em);scale:.75}.floating-label:has(:disabled,[disabled])>span{opacity:0}.floating-label:has(.input-xs,.select-xs,.textarea-xs) span{top:calc(var(--size-field,.25rem) * 6 / 2);font-size:.6875rem}.floating-label:has(.input-sm,.select-sm,.textarea-sm) span{top:calc(var(--size-field,.25rem) * 8 / 2);font-size:.75rem}.floating-label:has(.input-md,.select-md,.textarea-md) span{top:calc(var(--size-field,.25rem) * 10 / 2);font-size:.875rem}.floating-label:has(.input-lg,.select-lg,.textarea-lg) span{top:calc(var(--size-field,.25rem) * 12 / 2);font-size:1.125rem}.floating-label:has(.input-xl,.select-xl,.textarea-xl) span{top:calc(var(--size-field,.25rem) * 14 / 2);font-size:1.375rem}.dropdown{position-area:var(--anchor-v,bottom) var(--anchor-h,span-right);display:inline-block;position:relative}.dropdown>:not(:has(~[class*=dropdown-content])):focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.dropdown>:not(:has(~[class*=dropdown-content])):focus{outline-offset:2px;outline:2px solid #0000}}.dropdown .dropdown-content{position:absolute}.dropdown.dropdown-close .dropdown-content,.dropdown:not(details,.dropdown-open,.dropdown-hover:hover,:focus-within) .dropdown-content,.dropdown.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible)~.dropdown-content{transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover],.dropdown .dropdown-content{z-index:999}@media (prefers-reduced-motion:no-preference){.dropdown[popover],.dropdown .dropdown-content{transition-behavior:allow-discrete;transition-property:opacity,scale,display;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation:.2s dropdown}}@starting-style{.dropdown[popover],.dropdown .dropdown-content{opacity:0;scale:.95}}:is(.dropdown:not(.dropdown-close).dropdown-open,.dropdown:not(.dropdown-close):not(.dropdown-hover):focus,.dropdown:not(.dropdown-close):focus-within)>[tabindex]:first-child{pointer-events:none}:is(.dropdown:not(.dropdown-close).dropdown-open,.dropdown:not(.dropdown-close):not(.dropdown-hover):focus,.dropdown:not(.dropdown-close):focus-within) .dropdown-content,.dropdown:not(.dropdown-close).dropdown-hover:hover .dropdown-content{opacity:1;scale:1}.dropdown:is(details) summary::-webkit-details-marker{display:none}.dropdown:where([popover]){background:0 0}.dropdown[popover]{color:inherit;position:fixed}@supports not (position-area:bottom){.dropdown[popover]{margin:auto}.dropdown[popover].dropdown-close{transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover].dropdown-open:not(:popover-open){transform-origin:top;opacity:0;display:none;scale:.95}.dropdown[popover]::backdrop{background-color:oklab(0% none none/.3)}}:is(.dropdown[popover].dropdown-close,.dropdown[popover]:not(.dropdown-open,:popover-open)){transform-origin:top;opacity:0;display:none;scale:.95}:where(.btn){width:unset}.btn{cursor:pointer;text-align:center;vertical-align:middle;outline-offset:2px;webkit-user-select:none;-webkit-user-select:none;user-select:none;padding-inline:var(--btn-p);color:var(--btn-fg);--tw-prose-links:var(--btn-fg);height:var(--size);font-size:var(--fontsize,.875rem);outline-color:var(--btn-color,var(--color-base-content));background-color:var(--btn-bg);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--btn-noise);border-width:var(--border);border-style:solid;border-color:var(--btn-border);text-shadow:0 .5px oklch(100% 0 0 / calc(var(--depth) * .15));touch-action:manipulation;box-shadow:0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow);--size:calc(var(--size-field,.25rem) * 10);--btn-bg:var(--btn-color,var(--color-base-200));--btn-fg:var(--color-base-content);--btn-p:1rem;--btn-border:var(--btn-bg);border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-wrap:nowrap;flex-shrink:0;justify-content:center;align-items:center;gap:.375rem;font-weight:600;transition-property:color,background-color,border-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);display:inline-flex}@supports (color:color-mix(in lab, red, red)){.btn{--btn-border:color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%))}}.btn{--btn-shadow:0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg)}@supports (color:color-mix(in lab, red, red)){.btn{--btn-shadow:0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000)}}.btn{--btn-noise:var(--fx-noise)}@media (hover:hover){.btn:hover{--btn-bg:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn:hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}}.btn:focus-visible,.btn:has(:focus-visible){isolation:isolate;outline-width:2px;outline-style:solid}.btn:active:not(.btn-active){--btn-bg:var(--btn-color,var(--color-base-200));translate:0 .5px}@supports (color:color-mix(in lab, red, red)){.btn:active:not(.btn-active){--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 5%)}}.btn:active:not(.btn-active){--btn-border:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn:active:not(.btn-active){--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}.btn:active:not(.btn-active){--btn-shadow:0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0)}.btn:is(input[type=checkbox],input[type=radio]){appearance:none}.btn:is(input[type=checkbox],input[type=radio])[aria-label]:after{--tw-content:attr(aria-label);content:var(--tw-content)}.btn:where(input:checked:not(.filter .btn)){--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content);isolation:isolate}.loading{pointer-events:none;aspect-ratio:1;vertical-align:middle;width:calc(var(--size-selector,.25rem) * 6);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100%;mask-size:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.collapse{border-radius:var(--radius-box,1rem);isolation:isolate;grid-template-rows:max-content 0fr;grid-template-columns:minmax(0,1fr);width:100%;display:grid;position:relative;overflow:hidden}@media (prefers-reduced-motion:no-preference){.collapse{transition:grid-template-rows .2s}}.collapse>input:is([type=checkbox],[type=radio]){appearance:none;opacity:0;z-index:1;grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)),.collapse:not(.collapse-close):has(>input:is([type=checkbox],[type=radio]):checked){grid-template-rows:max-content 1fr}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){content-visibility:visible;min-height:fit-content}@supports not (content-visibility:visible){.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>.collapse-content,.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){visibility:visible}}.collapse:focus-visible,.collapse:has(>input:is([type=checkbox],[type=radio]):focus-visible),.collapse:has(summary:focus-visible){outline-color:var(--color-base-content);outline-offset:2px;outline-width:2px;outline-style:solid}.collapse:not(.collapse-close)>input[type=checkbox],.collapse:not(.collapse-close)>input[type=radio]:not(:checked),.collapse:not(.collapse-close)>.collapse-title{cursor:pointer}:is(.collapse[tabindex]:focus:not(.collapse-close,.collapse[open]),.collapse[tabindex]:focus-within:not(.collapse-close,.collapse[open]))>.collapse-title{cursor:unset}.collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close))>:where(.collapse-content),.collapse:not(.collapse-close)>:where(input:is([type=checkbox],[type=radio]):checked~.collapse-content){padding-bottom:1rem}.collapse:is(details){width:100%}@media (prefers-reduced-motion:no-preference){.collapse:is(details)::details-content{transition:content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s;interpolate-size:allow-keywords;height:0}.collapse:is(details):where([open])::details-content{height:auto}}.collapse:is(details) summary{display:block;position:relative}.collapse:is(details) summary::-webkit-details-marker{display:none}.collapse:is(details)>.collapse-content{content-visibility:visible}.collapse:is(details) summary{outline:none}.collapse-content{content-visibility:hidden;min-height:0;cursor:unset;grid-row-start:2;grid-column-start:1;padding-left:1rem;padding-right:1rem}@supports not (content-visibility:hidden){.collapse-content{visibility:hidden}}@media (prefers-reduced-motion:no-preference){.collapse-content{transition:content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out}}.list{flex-direction:column;font-size:.875rem;display:flex}.list .list-row{--list-grid-cols:minmax(0, auto) 1fr;border-radius:var(--radius-box);word-break:break-word;grid-auto-flow:column;grid-template-columns:var(--list-grid-cols);gap:1rem;padding:1rem;display:grid;position:relative}:is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after{content:"";border-bottom:var(--border) solid;inset-inline:var(--radius-box);border-color:var(--color-base-content);position:absolute;bottom:0}@supports (color:color-mix(in lab, red, red)){:is(.list>:not(:last-child).list-row,.list>:not(:last-child) .list-row):after{border-color:color-mix(in oklab, var(--color-base-content) 5%, transparent)}}.toggle{border:var(--border) solid currentColor;color:var(--input-color);cursor:pointer;appearance:none;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max)));padding:var(--toggle-p);flex-shrink:0;grid-template-columns:0fr 1fr 1fr;place-content:center;display:inline-grid;position:relative;box-shadow:inset 0 1px}@supports (color:color-mix(in lab, red, red)){.toggle{box-shadow:0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset}}.toggle{--input-color:var(--color-base-content);transition:color .3s,grid-template-columns .2s}@supports (color:color-mix(in lab, red, red)){.toggle{--input-color:color-mix(in oklab, var(--color-base-content) 50%, #0000)}}.toggle{--toggle-p:calc(var(--size) * .125);--size:calc(var(--size-selector,.25rem) * 6);width:calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);height:var(--size)}.toggle>*{z-index:1;cursor:pointer;appearance:none;background-color:#0000;border:none;grid-column:2/span 1;grid-row-start:1;height:100%;padding:.125rem;transition:opacity .2s,rotate .4s}.toggle>:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.toggle>:focus{outline-offset:2px;outline:2px solid #0000}}.toggle>:nth-child(2){color:var(--color-base-100);rotate:0deg}.toggle>:nth-child(3){color:var(--color-base-100);opacity:0;rotate:-15deg}.toggle:has(:checked)>:nth-child(2){opacity:0;rotate:15deg}.toggle:has(:checked)>:nth-child(3){opacity:1;rotate:0deg}.toggle:before{aspect-ratio:1;border-radius:var(--radius-selector);--tw-content:"";content:var(--tw-content);width:100%;height:100%;box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor;background-color:currentColor;grid-row-start:1;grid-column-start:2;transition:background-color .1s,translate .2s,inset-inline-start .2s;position:relative;inset-inline-start:0;translate:0}@supports (color:color-mix(in lab, red, red)){.toggle:before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000)}}.toggle:before{background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise)}@media (forced-colors:active){.toggle:before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{.toggle:before{outline-offset:-1rem;outline:.25rem solid}}.toggle:focus-visible,.toggle:has(:focus-visible){outline-offset:2px;outline:2px solid}.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked){background-color:var(--color-base-100);--input-color:var(--color-base-content);grid-template-columns:1fr 1fr 0fr}:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{background-color:currentColor}@starting-style{:is(.toggle:checked,.toggle[aria-checked=true],.toggle:has(>input:checked)):before{opacity:0}}.toggle:indeterminate{grid-template-columns:.5fr 1fr .5fr}.toggle:disabled{cursor:not-allowed;opacity:.3}.toggle:disabled:before{border:var(--border) solid currentColor;background-color:#0000}.input{cursor:text;border:var(--border) solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;white-space:nowrap;width:clamp(3rem,20rem,100%);height:var(--size);font-size:max(var(--font-size,.875rem), .875rem);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.5rem;padding-inline:.75rem;display:inline-flex;position:relative}@supports (color:color-mix(in lab, red, red)){.input{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.input{--size:calc(var(--size-field,.25rem) * 10);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.input:where(input){display:inline-flex}.input :where(input){appearance:none;background-color:#0000;border:none;width:100%;height:100%;display:inline-flex}.input :where(input):focus,.input :where(input):focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.input :where(input):focus,.input :where(input):focus-within{outline-offset:2px;outline:2px solid #0000}}.input :where(input[type=url]),.input :where(input[type=email]){direction:ltr}.input :where(input[type=date]){display:inline-flex}.input:focus,.input:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.input:focus,.input:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.input:focus,.input:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.input:focus,.input:focus-within{--font-size:1rem}}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input)::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.input:has(>input[disabled]),.input:is(:disabled,[disabled]),fieldset:disabled .input{box-shadow:none}.input:has(>input[disabled])>input[disabled]{cursor:not-allowed}.input::-webkit-date-and-time-value{text-align:inherit}.input[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input::-webkit-calendar-picker-indicator{position:absolute;inset-inline-end:.75em}.input:has(>input[type=date]) :where(input[type=date]){webkit-appearance:none;appearance:none;display:inline-flex}.input:has(>input[type=date]) input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;width:1em;height:1em;position:absolute;inset-inline-end:.75em}.indicator{width:max-content;display:inline-flex;position:relative}.indicator :where(.indicator-item){z-index:1;white-space:nowrap;top:var(--indicator-t,0);bottom:var(--indicator-b,auto);left:var(--indicator-s,auto);right:var(--indicator-e,0);translate:var(--indicator-x,50%) var(--indicator-y,-50%);position:absolute}.table{border-collapse:separate;--tw-border-spacing-x:calc(.25rem * 0);--tw-border-spacing-y:calc(.25rem * 0);width:100%;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y);border-radius:var(--radius-box);text-align:left;font-size:.875rem;position:relative}.table:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (hover:hover){:is(.table tr.row-hover,.table tr.row-hover:nth-child(2n)):hover{background-color:var(--color-base-200)}}.table :where(th,td){vertical-align:middle;padding-block:.75rem;padding-inline:1rem}.table :where(thead,tfoot){white-space:nowrap;color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(thead,tfoot){color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.table :where(thead,tfoot){font-size:.875rem;font-weight:600}.table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(tfoot tr:first-child :is(td,th)){border-top:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}.table :where(.table-pin-rows thead tr){z-index:1;background-color:var(--color-base-100);position:sticky;top:0}.table :where(.table-pin-rows tfoot tr){z-index:1;background-color:var(--color-base-100);position:sticky;bottom:0}.table :where(.table-pin-cols tr th){background-color:var(--color-base-100);position:sticky;left:0;right:0}.table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.table :where(thead tr :is(td,th),tbody tr:not(:last-child) :is(td,th)){border-bottom:var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000)}}.steps{counter-reset:step;grid-auto-columns:1fr;grid-auto-flow:column;display:inline-grid;overflow:auto hidden}.steps .step{text-align:center;--step-bg:var(--color-base-300);--step-fg:var(--color-base-content);grid-template-rows:40px 1fr;grid-template-columns:auto;place-items:center;min-width:4rem;display:grid}.steps .step:before{width:100%;height:.5rem;color:var(--step-bg);background-color:var(--step-bg);content:"";border:1px solid;grid-row-start:1;grid-column-start:1;margin-inline-start:-100%;top:0}.steps .step>.step-icon,.steps .step:not(:has(.step-icon)):after{--tw-content:counter(step);content:var(--tw-content);counter-increment:step;z-index:1;color:var(--step-fg);background-color:var(--step-bg);border:1px solid var(--step-bg);border-radius:3.40282e38px;grid-row-start:1;grid-column-start:1;place-self:center;place-items:center;width:2rem;height:2rem;display:grid;position:relative}.steps .step:first-child:before{--tw-content:none;content:var(--tw-content)}.steps .step[data-content]:after{--tw-content:attr(data-content);content:var(--tw-content)}.range{appearance:none;webkit-appearance:none;--range-thumb:var(--color-base-100);--range-thumb-size:calc(var(--size-selector,.25rem) * 6);--range-progress:currentColor;--range-fill:1;--range-p:.25rem;--range-bg:currentColor}@supports (color:color-mix(in lab, red, red)){.range{--range-bg:color-mix(in oklab, currentColor 10%, #0000)}}.range{cursor:pointer;vertical-align:middle;--radius-selector-max:calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector));border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));width:clamp(3rem,20rem,100%);height:var(--range-thumb-size);background-color:#0000;border:none;overflow:hidden}[dir=rtl] .range{--range-dir:-1}.range:focus{outline:none}.range:focus-visible{outline-offset:2px;outline:2px solid}.range::-webkit-slider-runnable-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size) * .5)}@media (forced-colors:active){.range::-webkit-slider-runnable-track{border:1px solid}.range::-moz-range-track{border:1px solid}}.range::-webkit-slider-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));background-color:var(--range-thumb);height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p) solid;appearance:none;webkit-appearance:none;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));position:relative;top:50%;transform:translateY(-50%)}@supports (color:color-mix(in lab, red, red)){.range::-webkit-slider-thumb{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill))}}.range::-moz-range-track{background-color:var(--range-bg);border-radius:var(--radius-selector);width:100%;height:calc(var(--range-thumb-size) * .5)}.range::-moz-range-thumb{box-sizing:border-box;border-radius:calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max)));height:var(--range-thumb-size);width:var(--range-thumb-size);border:var(--range-p) solid;color:var(--range-progress);box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill));background-color:currentColor;position:relative;top:50%}@supports (color:color-mix(in lab, red, red)){.range::-moz-range-thumb{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir,1) * -100cqw) - (var(--range-dir,1) * var(--range-thumb-size) / 2)) 0 0 calc(100cqw * var(--range-fill))}}.range:disabled{cursor:not-allowed;opacity:.3}.select{border:var(--border) solid #0000;appearance:none;background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);height:var(--size);touch-action:manipulation;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16.1px) calc(1px + 50%);background-repeat:no-repeat;background-size:4px 4px,4px 4px;border-start-start-radius:var(--join-ss,var(--radius-field));border-start-end-radius:var(--join-se,var(--radius-field));border-end-end-radius:var(--join-ee,var(--radius-field));border-end-start-radius:var(--join-es,var(--radius-field));flex-shrink:1;align-items:center;gap:.375rem;padding-inline:.75rem 1.75rem;font-size:.875rem;display:inline-flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.select{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.select{border-color:var(--input-color);--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.select{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.select{--size:calc(var(--size-field,.25rem) * 10)}[dir=rtl] .select{background-position:12px calc(1px + 50%),16px calc(1px + 50%)}[dir=rtl] .select::picker(select){translate:.5rem}[dir=rtl] .select select::picker(select){translate:.5rem}.select[multiple]{background-image:none;height:auto;padding-block:.75rem;padding-inline-end:.75rem;overflow:auto}.select select{appearance:none;width:calc(100% + 2.75rem);height:calc(100% - calc(var(--border) * 2));background:inherit;border-radius:inherit;border-style:none;align-items:center;margin-inline:-.75rem -1.75rem;padding-inline:.75rem 1.75rem}.select select:focus,.select select:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.select select:focus,.select select:focus-within{outline-offset:2px;outline:2px solid #0000}}.select select:not(:last-child){background-image:none;margin-inline-end:-1.375rem}.select:focus,.select:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.select:focus,.select:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.select:focus,.select:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select{cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select{color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select)::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.select:has(>select[disabled]),.select:is(:disabled,[disabled]),fieldset:disabled .select)::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.select:has(>select[disabled])>select[disabled]{cursor:not-allowed}@supports (appearance:base-select){.select,.select select{appearance:base-select}:is(.select,.select select)::picker(select){appearance:base-select}}:is(.select,.select select)::picker(select){color:inherit;border:var(--border) solid var(--color-base-200);border-radius:var(--radius-box);background-color:inherit;max-height:min(24rem,70dvh);box-shadow:0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/.2);box-shadow:0 20px 25px -5px rgb(0 0 0/calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0/calc(var(--depth) * .1));margin-block:.5rem;margin-inline:.5rem;padding:.5rem;translate:-.5rem}:is(.select,.select select)::picker-icon{display:none}:is(.select,.select select) optgroup{padding-top:.5em}:is(.select,.select select) optgroup option:first-child{margin-top:.5em}:is(.select,.select select) option{border-radius:var(--radius-field);white-space:normal;padding-block:.375rem;padding-inline:.75rem;transition-property:color,background-color;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{cursor:pointer;background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){:is(.select,.select select) option:not(:disabled):hover,:is(.select,.select select) option:not(:disabled):focus-visible{outline-offset:2px;outline:2px solid #0000}}:is(.select,.select select) option:not(:disabled):active{background-color:var(--color-neutral);color:var(--color-neutral-content);box-shadow:0 2px calc(var(--depth) * 3px) -2px var(--color-neutral)}.timeline{display:flex;position:relative}.timeline>li{grid-template-rows:var(--timeline-row-start,minmax(0, 1fr)) auto var(--timeline-row-end,minmax(0, 1fr));grid-template-columns:var(--timeline-col-start,minmax(0, 1fr)) auto var(--timeline-col-end,minmax(0, 1fr));flex-shrink:0;align-items:center;display:grid;position:relative}.timeline>li>hr{border:none;width:100%}.timeline>li>hr:first-child{grid-row-start:2;grid-column-start:1}.timeline>li>hr:last-child{grid-area:2/3/auto/none}@media print{.timeline>li>hr{border:.1px solid var(--color-base-300)}}.timeline :where(hr){background-color:var(--color-base-300);height:.25rem}.timeline:has(.timeline-middle hr):first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline:has(.timeline-middle hr):last-child,.timeline:not(:has(.timeline-middle)) :first-child hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}.timeline:not(:has(.timeline-middle)) :last-child hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.swap{cursor:pointer;vertical-align:middle;webkit-user-select:none;-webkit-user-select:none;user-select:none;place-content:center;display:inline-grid;position:relative}.swap input{appearance:none;border:none}.swap>*{grid-row-start:1;grid-column-start:1}@media (prefers-reduced-motion:no-preference){.swap>*{transition-property:transform,rotate,opacity;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1)}}.swap .swap-on,.swap .swap-indeterminate,.swap input:indeterminate~.swap-on,.swap input:is(:checked,:indeterminate)~.swap-off{opacity:0}.swap input:checked~.swap-on,.swap input:indeterminate~.swap-indeterminate{opacity:1;backface-visibility:visible}.collapse-title{grid-row-start:1;grid-column-start:1;width:100%;min-height:1lh;padding:1rem;padding-inline-end:3rem;transition:background-color .2s ease-out;position:relative}.avatar{vertical-align:middle;display:inline-flex;position:relative}.avatar>div{aspect-ratio:1;display:block;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.checkbox{border:var(--border) solid var(--input-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.checkbox{border:var(--border) solid var(--input-color,color-mix(in oklab, var(--color-base-content) 20%, #0000))}}.checkbox{cursor:pointer;appearance:none;border-radius:var(--radius-selector);vertical-align:middle;color:var(--color-base-content);box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);flex-shrink:0;padding:.25rem;transition:background-color .2s,box-shadow .2s;display:inline-block;position:relative}.checkbox:before{--tw-content:"";content:var(--tw-content);opacity:0;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,70% 80%,70% 100%);width:100%;height:100%;box-shadow:0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;background-color:currentColor;font-size:1rem;line-height:.75;transition:clip-path .3s .1s,opacity .1s .1s,rotate .3s .1s,translate .3s .1s;display:block;rotate:45deg}.checkbox:focus-visible{outline:2px solid var(--input-color,currentColor);outline-offset:2px}.checkbox:checked,.checkbox[aria-checked=true]{background-color:var(--input-color,#0000);box-shadow:0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1))}:is(.checkbox:checked,.checkbox[aria-checked=true]):before{clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 0%,70% 0%,70% 100%);opacity:1}@media (forced-colors:active){:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:0deg}}@media print{:is(.checkbox:checked,.checkbox[aria-checked=true]):before{--tw-content:"✔︎";clip-path:none;background-color:#0000;rotate:0deg}}.checkbox:indeterminate{background-color:var(--input-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.checkbox:indeterminate{background-color:var(--input-color,color-mix(in oklab, var(--color-base-content) 20%, #0000))}}.checkbox:indeterminate:before{opacity:1;clip-path:polygon(20% 100%,20% 80%,50% 80%,50% 80%,80% 80%,80% 100%);translate:0 -35%;rotate:0deg}.radio{cursor:pointer;appearance:none;vertical-align:middle;border:var(--border) solid var(--input-color,currentColor);border-radius:3.40282e38px;flex-shrink:0;padding:.25rem;display:inline-block;position:relative}@supports (color:color-mix(in lab, red, red)){.radio{border:var(--border) solid var(--input-color,color-mix(in srgb, currentColor 20%, #0000))}}.radio{box-shadow:0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset;--size:calc(var(--size-selector,.25rem) * 6);width:var(--size);height:var(--size);color:var(--input-color,currentColor)}.radio:before{--tw-content:"";content:var(--tw-content);background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);border-radius:3.40282e38px;width:100%;height:100%;display:block}.radio:focus-visible{outline:2px solid}.radio:checked,.radio[aria-checked=true]{background-color:var(--color-base-100);border-color:currentColor}@media (prefers-reduced-motion:no-preference){.radio:checked,.radio[aria-checked=true]{animation:.2s ease-out radio}}:is(.radio:checked,.radio[aria-checked=true]):before{box-shadow:0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1));background-color:currentColor}@media (forced-colors:active){:is(.radio:checked,.radio[aria-checked=true]):before{outline-style:var(--tw-outline-style);outline-offset:calc(1px * -1);outline-width:1px}}@media print{:is(.radio:checked,.radio[aria-checked=true]):before{outline-offset:-1rem;outline:.25rem solid}}.rating{vertical-align:middle;display:inline-flex;position:relative}.rating input{appearance:none;border:none}.rating :where(*){background-color:var(--color-base-content);opacity:.2;border-radius:0;width:1.5rem;height:1.5rem}@media (prefers-reduced-motion:no-preference){.rating :where(*){animation:.25s ease-out rating}}.rating :where(*):is(input){cursor:pointer}.rating .rating-hidden{background-color:#0000;width:.5rem}.rating input[type=radio]:checked{background-image:none}.rating :checked,.rating [aria-checked=true],.rating [aria-current=true],.rating :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1}.rating :focus-visible{scale:1.1}@media (prefers-reduced-motion:no-preference){.rating :focus-visible{transition:scale .2s ease-out}}.rating :active:focus{animation:none;scale:1.1}.rating\!{vertical-align:middle!important;display:inline-flex!important;position:relative!important}.rating\! input{appearance:none!important;border:none!important}.rating\! :where(*){background-color:var(--color-base-content)!important;opacity:.2!important;border-radius:0!important;width:1.5rem!important;height:1.5rem!important}@media (prefers-reduced-motion:no-preference){.rating\! :where(*){animation:.25s ease-out rating!important}}.rating\! :where(*):is(input){cursor:pointer!important}.rating\! .rating-hidden{background-color:#0000!important;width:.5rem!important}.rating\! input[type=radio]:checked{background-image:none!important}.rating\! :checked,.rating\! [aria-checked=true],.rating\! [aria-current=true],.rating\! :has(~:checked,~[aria-checked=true],~[aria-current=true]){opacity:1!important}.rating\! :focus-visible{scale:1.1!important}@media (prefers-reduced-motion:no-preference){.rating\! :focus-visible{transition:scale .2s ease-out!important}}.rating\! :active:focus{animation:none!important;scale:1.1!important}.navbar{align-items:center;width:100%;min-height:4rem;padding:.5rem;display:flex}.drawer{grid-auto-columns:max-content auto;width:100%;display:grid;position:relative}.card{border-radius:var(--radius-box);outline-offset:2px;outline:0 solid #0000;flex-direction:column;transition:outline .2s ease-in-out;display:flex;position:relative}.card:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.card:focus{outline-offset:2px;outline:2px solid #0000}}.card:focus-visible{outline-color:currentColor}.card :where(figure:first-child){border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-end-radius:unset;border-end-start-radius:unset;overflow:hidden}.card :where(figure:last-child){border-start-start-radius:unset;border-start-end-radius:unset;border-end-end-radius:inherit;border-end-start-radius:inherit;overflow:hidden}.card figure{justify-content:center;align-items:center;display:flex}.card:has(>input:is(input[type=checkbox],input[type=radio])){cursor:pointer;-webkit-user-select:none;user-select:none}.card:has(>:checked){outline:2px solid}.stats{border-radius:var(--radius-box);grid-auto-flow:column;display:inline-grid;position:relative;overflow-x:auto}.progress{appearance:none;border-radius:var(--radius-box);background-color:currentColor;width:100%;height:.5rem;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.progress{background-color:color-mix(in oklab, currentcolor 20%, transparent)}}.progress{color:var(--color-base-content)}.progress:indeterminate{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%}@media (prefers-reduced-motion:no-preference){.progress:indeterminate{animation:5s ease-in-out infinite progress}}@supports ((-moz-appearance:none)){.progress:indeterminate::-moz-progress-bar{background-color:#0000}@media (prefers-reduced-motion:no-preference){.progress:indeterminate::-moz-progress-bar{background-image:repeating-linear-gradient(90deg,currentColor -1% 10%,#0000 10% 90%);background-position-x:15%;background-size:200%;animation:5s ease-in-out infinite progress}}.progress::-moz-progress-bar{border-radius:var(--radius-box);background-color:currentColor}}@supports ((-webkit-appearance:none)){.progress::-webkit-progress-bar{border-radius:var(--radius-box);background-color:#0000}.progress::-webkit-progress-value{border-radius:var(--radius-box);background-color:currentColor}}.textarea{border:var(--border) solid #0000;appearance:none;border-radius:var(--radius-field);background-color:var(--color-base-100);vertical-align:middle;width:clamp(3rem,20rem,100%);min-height:5rem;font-size:max(var(--font-size,.875rem), .875rem);touch-action:manipulation;border-color:var(--input-color);box-shadow:0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset;flex-shrink:1;padding-block:.5rem;padding-inline:.75rem}@supports (color:color-mix(in lab, red, red)){.textarea{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset}}.textarea{--input-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.textarea{--input-color:color-mix(in oklab, var(--color-base-content) 20%, #0000)}}.textarea textarea{appearance:none;background-color:#0000;border:none}.textarea textarea:focus,.textarea textarea:focus-within{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.textarea textarea:focus,.textarea textarea:focus-within{outline-offset:2px;outline:2px solid #0000}}.textarea:focus,.textarea:focus-within{--input-color:var(--color-base-content);box-shadow:0 1px var(--input-color)}@supports (color:color-mix(in lab, red, red)){.textarea:focus,.textarea:focus-within{box-shadow:0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000)}}.textarea:focus,.textarea:focus-within{outline:2px solid var(--input-color);outline-offset:2px;isolation:isolate}@media (pointer:coarse){@supports (-webkit-touch-callout:none){.textarea:focus,.textarea:focus-within{--font-size:1rem}}}.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){cursor:not-allowed;border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){color:color-mix(in oklab, var(--color-base-content) 40%, transparent)}}:is(.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]))::placeholder{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){:is(.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]))::placeholder{color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.textarea:has(>textarea[disabled]),.textarea:is(:disabled,[disabled]){box-shadow:none}.textarea:has(>textarea[disabled])>textarea[disabled]{cursor:not-allowed}.stack{grid-template-rows:3px 4px 1fr 4px 3px;grid-template-columns:3px 4px 1fr 4px 3px;display:inline-grid}.stack>*{width:100%;height:100%}.stack>:nth-child(n+2){opacity:.7;width:100%}.stack>:nth-child(2){z-index:2;opacity:.9}.stack>:first-child{z-index:3;width:100%}.modal-backdrop{color:#0000;z-index:-1;grid-row-start:1;grid-column-start:1;place-self:stretch stretch;display:grid}.modal-backdrop button{cursor:pointer}.timeline-end{grid-area:3/1/4/4;place-self:flex-start center;margin:.25rem}.timeline-start{grid-area:1/1/2/4;place-self:flex-end center;margin:.25rem}.stat-figure{grid-row:1/span 3;grid-column-start:2;place-self:center flex-end}.modal-box{background-color:var(--color-base-100);border-top-left-radius:var(--modal-tl,var(--radius-box));border-top-right-radius:var(--modal-tr,var(--radius-box));border-bottom-left-radius:var(--modal-bl,var(--radius-box));border-bottom-right-radius:var(--modal-br,var(--radius-box));opacity:0;overscroll-behavior:contain;grid-row-start:1;grid-column-start:1;width:91.6667%;max-width:32rem;max-height:100vh;padding:1.5rem;transition:translate .3s ease-out,scale .3s ease-out,opacity .2s ease-out 50ms,box-shadow .3s ease-out;overflow-y:auto;scale:.95;box-shadow:0 25px 50px -12px oklch(0% 0 0/.25)}.drawer-content{grid-row-start:1;grid-column-start:2;min-width:0}.timeline-middle{grid-row-start:2;grid-column-start:2}.stat-value{white-space:nowrap;grid-column-start:1;font-size:2rem;font-weight:800}.stat-desc{white-space:nowrap;color:var(--color-base-content);grid-column-start:1}@supports (color:color-mix(in lab, red, red)){.stat-desc{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.stat-desc{font-size:.75rem}.stat-title{white-space:nowrap;color:var(--color-base-content);grid-column-start:1}@supports (color:color-mix(in lab, red, red)){.stat-title{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.stat-title{font-size:.75rem}.divider{white-space:nowrap;height:1rem;margin:var(--divider-m,1rem 0);--divider-color:var(--color-base-content);flex-direction:row;align-self:stretch;align-items:center;display:flex}@supports (color:color-mix(in lab, red, red)){.divider{--divider-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.divider:before,.divider:after{content:"";background-color:var(--divider-color);flex-grow:1;width:100%;height:.125rem}@media print{.divider:before,.divider:after{border:.5px solid}}.divider:not(:empty){gap:1rem}.filter{flex-wrap:wrap;display:flex}.filter input[type=radio]{width:auto}.filter input{opacity:1;transition:margin .1s,opacity .3s,padding .3s,border-width .1s;overflow:hidden;scale:1}.filter input:not(:last-child){margin-inline-end:.25rem}.filter input.filter-reset{aspect-ratio:1}.filter input.filter-reset:after{--tw-content:"×";content:var(--tw-content)}.filter:not(:has(input:checked:not(.filter-reset))) .filter-reset,.filter:not(:has(input:checked:not(.filter-reset))) input[type=reset],.filter:has(input:checked:not(.filter-reset)) input:not(:checked,.filter-reset,input[type=reset]){opacity:0;border-width:0;width:0;margin-inline:0;padding-inline:0;scale:0}.label{white-space:nowrap;color:currentColor;align-items:center;gap:.375rem;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.label{color:color-mix(in oklab, currentcolor 60%, transparent)}}.label:has(input){cursor:pointer}.label:is(.input>*,.select>*){white-space:nowrap;height:calc(100% - .5rem);font-size:inherit;align-items:center;padding-inline:.75rem;display:flex}.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid currentColor;margin-inline:-.75rem .75rem}@supports (color:color-mix(in lab, red, red)){.label:is(.input>*,.select>*):first-child{border-inline-end:var(--border) solid color-mix(in oklab, currentColor 10%, #0000)}}.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid currentColor;margin-inline:.75rem -.75rem}@supports (color:color-mix(in lab, red, red)){.label:is(.input>*,.select>*):last-child{border-inline-start:var(--border) solid color-mix(in oklab, currentColor 10%, #0000)}}.modal-action{justify-content:flex-end;gap:.5rem;margin-top:1.5rem;display:flex}.fieldset-legend{color:var(--color-base-content);justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:-.25rem;padding-block:.5rem;font-weight:600;display:flex}.status{aspect-ratio:1;border-radius:var(--radius-selector);background-color:var(--color-base-content);width:.5rem;height:.5rem;display:inline-block}@supports (color:color-mix(in lab, red, red)){.status{background-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.status{vertical-align:middle;color:#0000004d;background-position:50%;background-repeat:no-repeat}@supports (color:color-mix(in lab, red, red)){.status{color:color-mix(in oklab, var(--color-black) 30%, transparent)}}.status{background-image:radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000);box-shadow:0 2px 3px -1px}@supports (color:color-mix(in lab, red, red)){.status{box-shadow:0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000)}}.badge{border-radius:var(--radius-selector);vertical-align:middle;color:var(--badge-fg);border:var(--border) solid var(--badge-color,var(--color-base-200));background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);background-color:var(--badge-bg);--badge-bg:var(--badge-color,var(--color-base-100));--badge-fg:var(--color-base-content);--size:calc(var(--size-selector,.25rem) * 6);width:fit-content;height:var(--size);padding-inline:calc(var(--size) / 2 - var(--border));justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;display:inline-flex}.tabs{--tabs-height:auto;--tabs-direction:row;--tab-height:calc(var(--size-field,.25rem) * 10);height:var(--tabs-height);flex-wrap:wrap;flex-direction:var(--tabs-direction);display:flex}.footer{grid-auto-flow:row;place-items:start;gap:2.5rem 1rem;width:100%;font-size:.875rem;line-height:1.25rem;display:grid}.footer>*{place-items:start;gap:.5rem;display:grid}.footer.footer-center{text-align:center;grid-auto-flow:column dense;place-items:center}.footer.footer-center>*{place-items:center}.stat{grid-template-columns:repeat(1,1fr);column-gap:1rem;width:100%;padding-block:1rem;padding-inline:1.5rem;display:inline-grid}.stat:not(:last-child){border-inline-end:var(--border) dashed currentColor}@supports (color:color-mix(in lab, red, red)){.stat:not(:last-child){border-inline-end:var(--border) dashed color-mix(in oklab, currentColor 10%, #0000)}}.stat:not(:last-child){border-block-end:none}.navbar-end{justify-content:flex-end;align-items:center;width:50%;display:inline-flex}.navbar-start{justify-content:flex-start;align-items:center;width:50%;display:inline-flex}.card-body{padding:var(--card-p,1.5rem);font-size:var(--card-fs,.875rem);flex-direction:column;flex:auto;gap:.5rem;display:flex}.card-body :where(p){flex-grow:1}.navbar-center{flex-shrink:0;align-items:center;display:inline-flex}.fab-flower{--position:0rem;display:grid}.fab-flower>:nth-child(-n+2){--position:0rem}.fab-flower>*{--degree:180deg;--flip-degree:calc(180deg - var(--degree));transform:translateX(calc(cos(var(--degree)) * var(--position))) translateY(calc(sin(var(--degree)) * -1 * var(--position)));grid-area:1/1}[dir=rtl] :is(.fab-flower>*){transform:translateX(calc(cos(var(--flip-degree)) * var(--position))) translateY(calc(sin(var(--flip-degree)) * -1 * var(--position)))}.fab-flower>:nth-child(n+7){display:none}.fab-flower:has(:nth-child(3)){--position:140%}.fab-flower:has(:nth-child(3))>:nth-child(3){--degree:135deg}.fab-flower:has(:nth-child(4)){--position:140%}.fab-flower:has(:nth-child(4))>:nth-child(3){--degree:165deg}.fab-flower:has(:nth-child(4))>:nth-child(4){--degree:105deg}.fab-flower:has(:nth-child(5)){--position:180%}.fab-flower:has(:nth-child(5))>:nth-child(3){--degree:180deg}.fab-flower:has(:nth-child(5))>:nth-child(4){--degree:135deg}.fab-flower:has(:nth-child(5))>:nth-child(5){--degree:90deg}.fab-flower:has(:nth-child(6)){--position:220%}.fab-flower:has(:nth-child(6))>:nth-child(3){--degree:180deg}.fab-flower:has(:nth-child(6))>:nth-child(4){--degree:150deg}.fab-flower:has(:nth-child(6))>:nth-child(5){--degree:120deg}.fab-flower:has(:nth-child(6))>:nth-child(6){--degree:90deg}.fieldset-label{color:var(--color-base-content);align-items:center;gap:.375rem;display:flex}@supports (color:color-mix(in lab, red, red)){.fieldset-label{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.fieldset-label:has(input){cursor:pointer}.alert{--alert-border-color:var(--color-base-200);border-radius:var(--radius-box);color:var(--color-base-content);background-color:var(--alert-color,var(--color-base-200));text-align:start;background-size:auto, calc(var(--noise) * 100%);background-image:none, var(--fx-noise);box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));border-style:solid;grid-template-columns:auto;grid-auto-flow:column;justify-content:start;place-items:center start;gap:1rem;padding-block:.75rem;padding-inline:1rem;font-size:.875rem;line-height:1.25rem;display:grid}@supports (color:color-mix(in lab, red, red)){.alert{box-shadow:0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color,var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08))}}.alert:has(:nth-child(2)){grid-template-columns:auto minmax(auto,1fr)}.fieldset{grid-template-columns:1fr;grid-auto-rows:max-content;gap:.375rem;padding-block:.25rem;font-size:.75rem;display:grid}.card-title{font-size:var(--cardtitle-fs,1.125rem);align-items:center;gap:.5rem;font-weight:600;display:flex}.mask{vertical-align:middle;display:inline-block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.link{cursor:pointer;text-decoration-line:underline}.link:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.link:focus{outline-offset:2px;outline:2px solid #0000}}.link:focus-visible{outline-offset:2px;outline:2px solid}.timeline-box{border:var(--border) solid;border-radius:var(--radius-box);border-color:var(--color-base-300);background-color:var(--color-base-100);padding-block:.5rem;padding-inline:1rem;font-size:.75rem;box-shadow:0 1px 2px oklch(0% 0 0/.05)}.btn-accent{--btn-color:var(--color-accent);--btn-fg:var(--color-accent-content)}.btn-error{--btn-color:var(--color-error);--btn-fg:var(--color-error-content)}.btn-info{--btn-color:var(--color-info);--btn-fg:var(--color-info-content)}.btn-neutral{--btn-color:var(--color-neutral);--btn-fg:var(--color-neutral-content)}.btn-primary{--btn-color:var(--color-primary);--btn-fg:var(--color-primary-content)}.btn-secondary{--btn-color:var(--color-secondary);--btn-fg:var(--color-secondary-content)}.btn-success{--btn-color:var(--color-success);--btn-fg:var(--color-success-content)}.btn-warning{--btn-color:var(--color-warning);--btn-fg:var(--color-warning-content)}}@layer daisyui.l1.l2{.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal{pointer-events:auto;visibility:visible;opacity:1;transition:visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;background-color:oklch(0% 0 0/.4)}:is(.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal) .modal-box{opacity:1;translate:0;scale:1}:root:has(:is(.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal)){--page-has-backdrop:1;--page-overflow:hidden;--page-scroll-bg:var(--page-scroll-bg-on);--page-scroll-gutter:stable;--page-scroll-transition:var(--page-scroll-transition-on);animation:forwards set-page-has-scroll;animation-timeline:scroll()}@starting-style{.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal{opacity:0}}:where(.drawer-toggle:checked~.drawer-side){pointer-events:auto;visibility:visible;opacity:1;overflow-y:auto}:where(.drawer-toggle:checked~.drawer-side)>:not(.drawer-overlay){translate:0%}.drawer-toggle:focus-visible~.drawer-content label.drawer-button{outline-offset:2px;outline:2px solid}.tooltip>.tooltip-content,.tooltip[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-off) 50%}.tooltip:after{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-tail) 50%}.collapse-arrow>.collapse-title:after{width:.5rem;height:.5rem;display:block;position:absolute;transform:translateY(-100%)rotate(45deg)}@media (prefers-reduced-motion:no-preference){.collapse-arrow>.collapse-title:after{transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}}.collapse-arrow>.collapse-title:after{content:"";transform-origin:75% 75%;pointer-events:none;top:50%;inset-inline-end:1.4rem;box-shadow:2px 2px}.collapse-plus>.collapse-title:after{width:.5rem;height:.5rem;display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.collapse-plus>.collapse-title:after{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}}.collapse-plus>.collapse-title:after{--tw-content:"+";content:var(--tw-content);pointer-events:none;top:.9rem;inset-inline-end:1.4rem}.btn:disabled:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn:disabled:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn:disabled:not(.btn-link,.btn-ghost){box-shadow:none}.btn:disabled{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn:disabled{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.btn[disabled]:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn[disabled]:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn[disabled]:not(.btn-link,.btn-ghost){box-shadow:none}.btn[disabled]{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn[disabled]{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.btn-disabled:not(.btn-link,.btn-ghost){background-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn-disabled:not(.btn-link,.btn-ghost){background-color:color-mix(in oklab, var(--color-base-content) 10%, transparent)}}.btn-disabled:not(.btn-link,.btn-ghost){box-shadow:none}.btn-disabled{pointer-events:none;--btn-border:#0000;--btn-noise:none;--btn-fg:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.btn-disabled{--btn-fg:color-mix(in oklch, var(--color-base-content) 20%, #0000)}}.tab-disabled{pointer-events:none;opacity:.4}@media (prefers-reduced-motion:no-preference){.collapse[open].collapse-arrow>.collapse-title:after,.collapse.collapse-open.collapse-arrow>.collapse-title:after{transform:translateY(-50%)rotate(225deg)}}.collapse.collapse-open.collapse-plus>.collapse-title:after{--tw-content:"−";content:var(--tw-content)}:is(.collapse[tabindex].collapse-arrow:focus:not(.collapse-close),.collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close))>.collapse-title:after,.collapse.collapse-arrow:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{transform:translateY(-50%)rotate(225deg)}.collapse[open].collapse-plus>.collapse-title:after,.collapse[tabindex].collapse-plus:focus:not(.collapse-close)>.collapse-title:after,.collapse.collapse-plus:not(.collapse-close)>input:is([type=checkbox],[type=radio]):checked~.collapse-title:after{--tw-content:"−";content:var(--tw-content)}.list .list-row:has(.list-col-grow:first-child){--list-grid-cols:1fr}.list .list-row:has(.list-col-grow:nth-child(2)){--list-grid-cols:minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(3)){--list-grid-cols:minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(4)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(5)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row:has(.list-col-grow:nth-child(6)){--list-grid-cols:minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr}.list .list-row>*{grid-row-start:1}.steps .step-neutral+.step-neutral:before,.steps .step-neutral:after,.steps .step-neutral>.step-icon{--step-bg:var(--color-neutral);--step-fg:var(--color-neutral-content)}.steps .step-primary+.step-primary:before,.steps .step-primary:after,.steps .step-primary>.step-icon{--step-bg:var(--color-primary);--step-fg:var(--color-primary-content)}.steps .step-secondary+.step-secondary:before,.steps .step-secondary:after,.steps .step-secondary>.step-icon{--step-bg:var(--color-secondary);--step-fg:var(--color-secondary-content)}.steps .step-accent+.step-accent:before,.steps .step-accent:after,.steps .step-accent>.step-icon{--step-bg:var(--color-accent);--step-fg:var(--color-accent-content)}.steps .step-info+.step-info:before,.steps .step-info:after,.steps .step-info>.step-icon{--step-bg:var(--color-info);--step-fg:var(--color-info-content)}.steps .step-success+.step-success:before,.steps .step-success:after,.steps .step-success>.step-icon{--step-bg:var(--color-success);--step-fg:var(--color-success-content)}.steps .step-warning+.step-warning:before,.steps .step-warning:after,.steps .step-warning>.step-icon{--step-bg:var(--color-warning);--step-fg:var(--color-warning-content)}.steps .step-error+.step-error:before,.steps .step-error:after,.steps .step-error>.step-icon{--step-bg:var(--color-error);--step-fg:var(--color-error-content)}.menu-horizontal{flex-direction:row;display:inline-flex}.menu-horizontal>li:not(.menu-title)>details>ul{transform-origin:top;border-radius:var(--radius-box);background-color:var(--color-base-100);opacity:0;margin-inline-start:0;margin-top:1rem;padding-block:.5rem;padding-inline-end:.5rem;position:absolute;scale:.95;box-shadow:0 1px 3px oklch(0% 0 0/.1),0 1px 2px -1px oklch(0% 0 0/.1)}@media (prefers-reduced-motion:no-preference){@starting-style{.menu-horizontal>li:not(.menu-title)>details>ul{opacity:0;scale:.95}}.menu-horizontal>li:not(.menu-title)>details>ul{transition-behavior:allow-discrete;transition-property:opacity,scale,display;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation:.2s menu}}.menu-horizontal>li:not(.menu-title)>details[open]>ul{opacity:1;scale:1}.menu-horizontal>li>details>ul:before{--tw-content:none;content:var(--tw-content)}.checkbox:disabled,.radio:disabled{cursor:not-allowed;opacity:.2}.rating.rating-xs :where(:not(.rating-hidden)){width:1rem;height:1rem}.rating.rating-sm :where(:not(.rating-hidden)){width:1.25rem;height:1.25rem}.rating.rating-md :where(:not(.rating-hidden)){width:1.5rem;height:1.5rem}.rating.rating-lg :where(:not(.rating-hidden)){width:1.75rem;height:1.75rem}.rating.rating-xl :where(:not(.rating-hidden)){width:2rem;height:2rem}.rating\!.rating-xs :where(:not(.rating-hidden)){width:1rem!important;height:1rem!important}.rating\!.rating-sm :where(:not(.rating-hidden)){width:1.25rem!important;height:1.25rem!important}.rating\!.rating-md :where(:not(.rating-hidden)){width:1.5rem!important;height:1.5rem!important}.rating\!.rating-lg :where(:not(.rating-hidden)){width:1.75rem!important;height:1.75rem!important}.rating\!.rating-xl :where(:not(.rating-hidden)){width:2rem!important;height:2rem!important}:where(.navbar){position:relative}.tooltip-bottom>.tooltip-content,.tooltip-bottom[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,-.25rem));inset:var(--tt-off) auto auto 50%}.tooltip-bottom:after{transform:translateX(-50%) translateY(var(--tt-pos,-.25rem)) rotate(180deg);inset:var(--tt-tail) auto auto 50%}.tooltip-left>.tooltip-content,.tooltip-left[data-tip]:before{transform:translateX(calc(var(--tt-pos,.25rem) - .25rem)) translateY(-50%);inset:50% var(--tt-off) auto auto}.tooltip-left:after{transform:translateX(var(--tt-pos,.25rem)) translateY(-50%) rotate(-90deg);inset:50% calc(var(--tt-tail) + 1px) auto auto}.tooltip-right>.tooltip-content,.tooltip-right[data-tip]:before{transform:translateX(calc(var(--tt-pos,-.25rem) + .25rem)) translateY(-50%);inset:50% auto auto var(--tt-off)}.tooltip-right:after{transform:translateX(var(--tt-pos,-.25rem)) translateY(-50%) rotate(90deg);inset:50% auto auto calc(var(--tt-tail) + 1px)}.tooltip-top>.tooltip-content,.tooltip-top[data-tip]:before{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-off) 50%}.tooltip-top:after{transform:translateX(-50%) translateY(var(--tt-pos,.25rem));inset:auto auto var(--tt-tail) 50%}.dropdown-right{--anchor-h:right;--anchor-v:span-bottom}.dropdown-right .dropdown-content{transform-origin:0;inset-inline-start:100%;top:0;bottom:auto}.dropdown-left{--anchor-h:left;--anchor-v:span-bottom}.dropdown-left .dropdown-content{transform-origin:100%;inset-inline-end:100%;top:0;bottom:auto}.dropdown-end{--anchor-h:span-left}.dropdown-end :where(.dropdown-content){inset-inline-end:0;translate:0}[dir=rtl] :is(.dropdown-end :where(.dropdown-content)){translate:0}.dropdown-end.dropdown-left{--anchor-h:left;--anchor-v:span-top}.dropdown-end.dropdown-left .dropdown-content{top:auto;bottom:0}.dropdown-end.dropdown-right{--anchor-h:right;--anchor-v:span-top}.dropdown-end.dropdown-right .dropdown-content{top:auto;bottom:0}.dropdown-bottom{--anchor-v:bottom}.dropdown-bottom .dropdown-content{transform-origin:top;top:100%;bottom:auto}.dropdown-top{--anchor-v:top}.dropdown-top .dropdown-content{transform-origin:bottom;top:auto;bottom:100%}.btn-active{--btn-bg:var(--btn-color,var(--color-base-200))}@supports (color:color-mix(in lab, red, red)){.btn-active{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-200)), #000 7%)}}.btn-active{--btn-shadow:0 0 0 0 oklch(0% 0 0/0), 0 0 0 0 oklch(0% 0 0/0);isolation:isolate}:is(.stack,.stack.stack-bottom)>*{grid-area:3/3/6/4}:is(.stack,.stack.stack-bottom)>:nth-child(2){grid-area:2/2/5/5}:is(.stack,.stack.stack-bottom)>:first-child{grid-area:1/1/4/6}.stack.stack-top>*{grid-area:1/3/4/4}.stack.stack-top>:nth-child(2){grid-area:2/2/5/5}.stack.stack-top>:first-child{grid-area:3/1/6/6}.stack.stack-start>*{grid-area:3/1/4/4}.stack.stack-start>:nth-child(2){grid-area:2/2/5/5}.stack.stack-start>:first-child{grid-area:1/3/6/6}.stack.stack-end>*{grid-area:3/3/4/6}.stack.stack-end>:nth-child(2){grid-area:2/2/5/5}.stack.stack-end>:first-child{grid-area:1/1/6/4}.tabs-box{background-color:var(--color-base-200);--tabs-box-radius:calc(3 * var(--radius-field));border-radius:calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)));box-shadow:0 -.5px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 .5px oklch(0% 0 0 / calc(var(--depth) * .05)) inset;padding:.25rem}.tabs-box>.tab{border-radius:var(--radius-field);border-style:none}.tabs-box>.tab:focus-visible,.tabs-box>.tab:is(label:has(:checked:focus-visible)){outline-offset:2px}.tabs-box>.tab:focus-visible{z-index:1}.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){background-color:var(--tab-bg,var(--color-base-100));box-shadow:0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px var(--color-neutral), 0 1px 6px -4px var(--color-neutral)}@supports (color:color-mix(in lab, red, red)){.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){box-shadow:0 1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000)}}@media (forced-colors:active){.tabs-box>:is(.tab-active,[aria-selected=true],[aria-current=true],[aria-current=page]):not(.tab-disabled,[disabled]),.tabs-box>:is(input:checked),.tabs-box>:is(label:has(:checked)){border:1px solid}}.tabs-box>.tab-content{height:calc(100% - var(--tab-height) + var(--border) - .5rem);border-radius:calc(min(var(--tab-height) / 2, var(--radius-field)) + min(.25rem, var(--tabs-box-radius)) - var(--border));margin-top:.25rem}.timeline-horizontal{flex-direction:row}.timeline-horizontal>li{align-items:center}.timeline-horizontal>li>hr{width:100%;height:.25rem}.timeline-horizontal>li>hr:first-child{grid-row-start:2;grid-column-start:1}.timeline-horizontal>li>hr:last-child{grid-area:2/3/auto/none}.timeline-horizontal .timeline-start{grid-area:1/1/2/4;place-self:flex-end center}.timeline-horizontal .timeline-end{grid-area:3/1/4/4;place-self:flex-start center}.timeline-horizontal:has(.timeline-middle)>li>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline-horizontal:has(.timeline-middle)>li>hr:last-child,.timeline-horizontal:not(:has(.timeline-middle)) :first-child>hr:last-child{border-start-start-radius:var(--radius-selector);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--radius-selector)}.timeline-horizontal:not(:has(.timeline-middle)) :last-child>hr:first-child{border-start-start-radius:0;border-start-end-radius:var(--radius-selector);border-end-end-radius:var(--radius-selector);border-end-start-radius:0}.timeline-vertical{flex-direction:column}.timeline-vertical>li{--timeline-row-start:minmax(0, 1fr);--timeline-row-end:minmax(0, 1fr);justify-items:center}.timeline-vertical>li>hr{width:.25rem;height:100%}.timeline-vertical>li>hr:first-child{grid-row-start:1;grid-column-start:2}.timeline-vertical>li>hr:last-child{grid-area:3/2/none}.timeline-vertical .timeline-start{grid-area:1/1/4/2;place-self:center flex-end}.timeline-vertical .timeline-end{grid-area:1/3/4/4;place-self:center flex-start}.timeline-vertical:has(.timeline-middle)>li>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}.timeline-vertical:has(.timeline-middle)>li>hr:last-child,.timeline-vertical:not(:has(.timeline-middle)) :first-child>hr:last-child{border-top-left-radius:var(--radius-selector);border-top-right-radius:var(--radius-selector);border-bottom-right-radius:0;border-bottom-left-radius:0}.timeline-vertical:not(:has(.timeline-middle)) :last-child>hr:first-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--radius-selector);border-bottom-left-radius:var(--radius-selector)}.timeline-vertical.timeline-snap-icon>li{--timeline-col-start:minmax(0, 1fr);--timeline-row-start:.5rem}.timeline-compact{--timeline-row-start:0}.timeline-compact .timeline-start{grid-area:3/1/4/4;place-self:flex-start center}.timeline-compact li:has(.timeline-start) .timeline-end{grid-row-start:auto;grid-column-start:none}.timeline-compact.timeline-vertical>li{--timeline-col-start:0}.timeline-compact.timeline-vertical .timeline-start{grid-area:1/3/4/4;place-self:center flex-start}.timeline-compact.timeline-vertical li:has(.timeline-start) .timeline-end{grid-row-start:none;grid-column-start:auto}.drawer-end{grid-auto-columns:auto max-content}.drawer-end>.drawer-toggle~.drawer-content{grid-column-start:1}.drawer-end>.drawer-toggle~.drawer-side{grid-column-start:2;justify-items:end}.drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay){translate:100%}[dir=rtl] :is(.drawer-end>.drawer-toggle~.drawer-side>:not(.drawer-overlay)){translate:-100%}.drawer-end>.drawer-toggle:checked~.drawer-side>:not(.drawer-overlay){translate:0%}.input-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:max(var(--font-size,1.125rem), 1.125rem)}.input-lg[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input-md{--size:calc(var(--size-field,.25rem) * 10);font-size:max(var(--font-size,.875rem), .875rem)}.input-md[type=number]::-webkit-inner-spin-button{margin-block:-.75rem;margin-inline-end:-.75rem}.input-sm{--size:calc(var(--size-field,.25rem) * 8);font-size:max(var(--font-size,.75rem), .75rem)}.input-sm[type=number]::-webkit-inner-spin-button{margin-block:-.5rem;margin-inline-end:-.75rem}.input-xs{--size:calc(var(--size-field,.25rem) * 6);font-size:max(var(--font-size,.6875rem), .6875rem)}.input-xs[type=number]::-webkit-inner-spin-button{margin-block:-.25rem;margin-inline-end:-.75rem}.modal-bottom{place-items:end}.modal-bottom .modal-box{--modal-tl:var(--radius-box);--modal-tr:var(--radius-box);--modal-bl:0;--modal-br:0;width:100%;max-width:none;height:auto;max-height:calc(100vh - 5em);translate:0 100%;scale:1}.btn-circle{width:var(--size);height:var(--size);border-radius:3.40282e38px;padding-inline:0}.btn-square{width:var(--size);height:var(--size);padding-inline:0}.btn-wide{width:100%;max-width:16rem}.btn-block{width:100%}.loading-lg{width:calc(var(--size-selector,.25rem) * 7)}.loading-md{width:calc(var(--size-selector,.25rem) * 6)}.loading-sm{width:calc(var(--size-selector,.25rem) * 5)}.loading-xs{width:calc(var(--size-selector,.25rem) * 4)}.badge-dash{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-style:dashed;border-color:currentColor}.badge-ghost{border-color:var(--color-base-200);background-color:var(--color-base-200);color:var(--color-base-content);background-image:none}.select-ghost{box-shadow:none;background-color:#0000;border-color:#0000;transition:background-color .2s}.select-ghost:focus,.select-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.input-ghost{box-shadow:none;background-color:#0000;border-color:#0000}.input-ghost:focus,.input-ghost:focus-within{background-color:var(--color-base-100);color:var(--color-base-content);box-shadow:none;border-color:#0000}.badge-outline{color:var(--badge-color);--badge-bg:#0000;background-image:none;border-color:currentColor}.table-zebra tbody tr:where(:nth-child(2n)),.table-zebra tbody tr:where(:nth-child(2n)) :where(.table-pin-cols tr th){background-color:var(--color-base-200)}@media (hover:hover){:is(.table-zebra tbody tr.row-hover,.table-zebra tbody tr.row-hover:where(:nth-child(2n))):hover{background-color:var(--color-base-300)}}.loading-ball{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E")}.loading-bars{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E")}.loading-dots{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E")}.loading-infinity{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E")}.loading-ring{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}.loading-spinner{-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}.mask-circle{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle fill='black' cx='100' cy='100' r='100' fill-rule='evenodd'/%3e%3c/svg%3e")}.mask-heart{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='200' height='185' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 184.606a15.384 15.384 0 0 1-8.653-2.678C53.565 156.28 37.205 138.695 28.182 127.7 8.952 104.264-.254 80.202.005 54.146.308 24.287 24.264 0 53.406 0c21.192 0 35.869 11.937 44.416 21.879a2.884 2.884 0 0 0 4.356 0C110.725 11.927 125.402 0 146.594 0c29.142 0 53.098 24.287 53.4 54.151.26 26.061-8.956 50.122-28.176 73.554-9.023 10.994-25.383 28.58-63.165 54.228a15.384 15.384 0 0 1-8.653 2.673Z' fill='black' fill-rule='nonzero'/%3e%3c/svg%3e")}.mask-star{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 137.263-58.779 42.024 22.163-68.389L.894 68.481l72.476-.243L96 0l22.63 68.238 72.476.243-58.49 42.417 22.163 68.389z' fill-rule='evenodd'/%3e%3c/svg%3e")}.mask-star-2{-webkit-mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg width='192' height='180' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m96 153.044-58.779 26.243 7.02-63.513L.894 68.481l63.117-13.01L96 0l31.989 55.472 63.117 13.01-43.347 47.292 7.02 63.513z' fill-rule='evenodd'/%3e%3c/svg%3e")}.checkbox-lg{--size:calc(var(--size-selector,.25rem) * 7);padding:.3125rem}.checkbox-md{--size:calc(var(--size-selector,.25rem) * 6);padding:.25rem}.checkbox-sm{--size:calc(var(--size-selector,.25rem) * 5);padding:.1875rem}.checkbox-xs{--size:calc(var(--size-selector,.25rem) * 4);padding:.125rem}.radio-lg{padding:.3125rem}.radio-lg[type=radio]{--size:calc(var(--size-selector,.25rem) * 7)}.select-lg{--size:calc(var(--size-field,.25rem) * 12);font-size:1.125rem}.select-lg option{padding-block:.375rem;padding-inline:1rem}.table-lg :not(thead,tfoot) tr{font-size:1.125rem}.table-lg :where(th,td){padding-block:1rem;padding-inline:1.25rem}.badge-lg{--size:calc(var(--size-selector,.25rem) * 7);font-size:1rem}.badge-md{--size:calc(var(--size-selector,.25rem) * 6);font-size:.875rem}.badge-sm{--size:calc(var(--size-selector,.25rem) * 5);font-size:.75rem}.badge-xs{--size:calc(var(--size-selector,.25rem) * 4);font-size:.625rem}.alert-error{color:var(--color-error-content);--alert-border-color:var(--color-error);--alert-color:var(--color-error)}.alert-info{color:var(--color-info-content);--alert-border-color:var(--color-info);--alert-color:var(--color-info)}.alert-success{color:var(--color-success-content);--alert-border-color:var(--color-success);--alert-color:var(--color-success)}.alert-warning{color:var(--color-warning-content);--alert-border-color:var(--color-warning);--alert-color:var(--color-warning)}.checkbox-accent{color:var(--color-accent-content);--input-color:var(--color-accent)}.checkbox-error{color:var(--color-error-content);--input-color:var(--color-error)}.checkbox-info{color:var(--color-info-content);--input-color:var(--color-info)}.checkbox-primary{color:var(--color-primary-content);--input-color:var(--color-primary)}.checkbox-secondary{color:var(--color-secondary-content);--input-color:var(--color-secondary)}.checkbox-success{color:var(--color-success-content);--input-color:var(--color-success)}.checkbox-warning{color:var(--color-warning-content);--input-color:var(--color-warning)}.range-accent{color:var(--color-accent);--range-thumb:var(--color-accent-content)}.range-error{color:var(--color-error);--range-thumb:var(--color-error-content)}.tooltip-accent{--tt-bg:var(--color-accent)}.tooltip-accent>.tooltip-content,.tooltip-accent[data-tip]:before{color:var(--color-accent-content)}.tooltip-error{--tt-bg:var(--color-error)}.tooltip-error>.tooltip-content,.tooltip-error[data-tip]:before{color:var(--color-error-content)}.tooltip-info{--tt-bg:var(--color-info)}.tooltip-info>.tooltip-content,.tooltip-info[data-tip]:before{color:var(--color-info-content)}.tooltip-primary{--tt-bg:var(--color-primary)}.tooltip-primary>.tooltip-content,.tooltip-primary[data-tip]:before{color:var(--color-primary-content)}.tooltip-secondary{--tt-bg:var(--color-secondary)}.tooltip-secondary>.tooltip-content,.tooltip-secondary[data-tip]:before{color:var(--color-secondary-content)}.tooltip-success{--tt-bg:var(--color-success)}.tooltip-success>.tooltip-content,.tooltip-success[data-tip]:before{color:var(--color-success-content)}.tooltip-warning{--tt-bg:var(--color-warning)}.tooltip-warning>.tooltip-content,.tooltip-warning[data-tip]:before{color:var(--color-warning-content)}.swap-active .swap-off{opacity:0}.swap-active .swap-on{opacity:1}.btn-lg{--fontsize:1.125rem;--btn-p:1.25rem;--size:calc(var(--size-field,.25rem) * 12)}.btn-md{--fontsize:.875rem;--btn-p:1rem;--size:calc(var(--size-field,.25rem) * 10)}.btn-sm{--fontsize:.75rem;--btn-p:.75rem;--size:calc(var(--size-field,.25rem) * 8)}.btn-xl{--fontsize:1.375rem;--btn-p:1.5rem;--size:calc(var(--size-field,.25rem) * 14)}.btn-xs{--fontsize:.6875rem;--btn-p:.5rem;--size:calc(var(--size-field,.25rem) * 6)}.badge-accent{--badge-color:var(--color-accent);--badge-fg:var(--color-accent-content)}.badge-error{--badge-color:var(--color-error);--badge-fg:var(--color-error-content)}.badge-info{--badge-color:var(--color-info);--badge-fg:var(--color-info-content)}.badge-primary{--badge-color:var(--color-primary);--badge-fg:var(--color-primary-content)}.badge-secondary{--badge-color:var(--color-secondary);--badge-fg:var(--color-secondary-content)}.badge-success{--badge-color:var(--color-success);--badge-fg:var(--color-success-content)}.badge-warning{--badge-color:var(--color-warning);--badge-fg:var(--color-warning-content)}.input-accent,.input-accent:focus,.input-accent:focus-within{--input-color:var(--color-accent)}.input-error,.input-error:focus,.input-error:focus-within{--input-color:var(--color-error)}.input-info,.input-info:focus,.input-info:focus-within{--input-color:var(--color-info)}.input-primary,.input-primary:focus,.input-primary:focus-within{--input-color:var(--color-primary)}.input-secondary,.input-secondary:focus,.input-secondary:focus-within{--input-color:var(--color-secondary)}.input-success,.input-success:focus,.input-success:focus-within{--input-color:var(--color-success)}.input-warning,.input-warning:focus,.input-warning:focus-within{--input-color:var(--color-warning)}.radio-accent{--input-color:var(--color-accent)}.radio-error{--input-color:var(--color-error)}.radio-primary{--input-color:var(--color-primary)}.radio-secondary{--input-color:var(--color-secondary)}.range-lg{--range-thumb-size:calc(var(--size-selector,.25rem) * 7)}.range-xs{--range-thumb-size:calc(var(--size-selector,.25rem) * 4)}.select-error,.select-error:focus,.select-error:focus-within{--input-color:var(--color-error)}.select-primary,.select-primary:focus,.select-primary:focus-within{--input-color:var(--color-primary)}.select-secondary,.select-secondary:focus,.select-secondary:focus-within{--input-color:var(--color-secondary)}.toggle-accent:checked,.toggle-accent[aria-checked=true]{--input-color:var(--color-accent)}.toggle-error:checked,.toggle-error[aria-checked=true]{--input-color:var(--color-error)}.toggle-info:checked,.toggle-info[aria-checked=true]{--input-color:var(--color-info)}.toggle-lg[type=checkbox],.toggle-lg:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 7)}.toggle-md[type=checkbox],.toggle-md:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 6)}.toggle-primary:checked,.toggle-primary[aria-checked=true]{--input-color:var(--color-primary)}.toggle-secondary:checked,.toggle-secondary[aria-checked=true]{--input-color:var(--color-secondary)}.toggle-sm[type=checkbox],.toggle-sm:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 5)}.toggle-success:checked,.toggle-success[aria-checked=true]{--input-color:var(--color-success)}.toggle-warning:checked,.toggle-warning[aria-checked=true]{--input-color:var(--color-warning)}.toggle-xs[type=checkbox],.toggle-xs:has([type=checkbox]){--size:calc(var(--size-selector,.25rem) * 4)}}.prose :where(a.btn:not(.btn-link)):not(:where([class~=not-prose],[class~=not-prose] *)){text-decoration-line:none}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse:not(td,tr,colgroup){visibility:revert-layer}.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.-top-1{top:calc(var(--spacing) * -1)}.top-0{top:calc(var(--spacing) * 0)}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.top-6{top:calc(var(--spacing) * 6)}.top-10{top:calc(var(--spacing) * 10)}.-right-2{right:calc(var(--spacing) * -2)}.right-0{right:calc(var(--spacing) * 0)}.right-1\/4{right:25%}.right-3{right:calc(var(--spacing) * 3)}.right-6{right:calc(var(--spacing) * 6)}.-bottom-5{bottom:calc(var(--spacing) * -5)}.bottom-6{bottom:calc(var(--spacing) * 6)}.bottom-10{bottom:calc(var(--spacing) * 10)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-1\/4{left:25%}.left-2{left:calc(var(--spacing) * 2)}.left-3{left:calc(var(--spacing) * 3)}.left-4{left:calc(var(--spacing) * 4)}.left-6{left:calc(var(--spacing) * 6)}.-z-0{z-index:calc(0 * -1)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-90{z-index:90}.z-\[1\]{z-index:1}.z-\[50\]{z-index:50}.z-\[90\]{z-index:90}.z-\[100\]{z-index:100}.z-\[110\]{z-index:110}.z-\[9999\]{z-index:9999}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.col-start-3{grid-column-start:3}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-1{margin:calc(var(--spacing) * 1)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mx-auto{margin-inline:auto}.my-1{margin-block:calc(var(--spacing) * 1)}.my-4{margin-block:calc(var(--spacing) * 4)}.my-6{margin-block:calc(var(--spacing) * 6)}.my-16{margin-block:calc(var(--spacing) * 16)}.-mt-10{margin-top:calc(var(--spacing) * -10)}.mt-0{margin-top:calc(var(--spacing) * 0)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-6{margin-left:calc(var(--spacing) * 6)}.icon-\[lucide--alert-circle\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--alert-triangle\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--calendar\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M8 2v4m8-4v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--check-circle\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11l3 3L22 4'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--chevron-left\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18l-6-6l6-6'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--chevron-right\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--chevrons-left\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m11 17l-5-5l5-5m7 10l-5-5l5-5'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--chevrons-right\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 17l5-5l-5-5m7 10l5-5l-5-5'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--eye-off\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575a1 1 0 0 1 0 .696a10.8 10.8 0 0 1-1.444 2.49m-6.41-.679a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 4.446-5.143M2 2l20 20'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--eye\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696a10.75 10.75 0 0 1 19.876 0a1 1 0 0 1 0 .696a10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--hash\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 9h16M4 15h16M10 3L8 21m8-18l-2 18'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--info\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--link\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--lock\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--mail\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--phone\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233a14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--search\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--text\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 18H3M17 6H3m18 6H3'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--upload\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[lucide--x\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.alert{border-width:var(--border);border-color:var(--alert-border-color,var(--color-base-200))}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.aspect-square{aspect-ratio:1}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-24{height:calc(var(--spacing) * 24)}.h-32{height:calc(var(--spacing) * 32)}.h-48{height:calc(var(--spacing) * 48)}.h-96{height:calc(var(--spacing) * 96)}.h-\[300px\]{height:300px}.h-\[400px\]{height:400px}.h-\[500px\]{height:500px}.h-auto{height:auto}.h-full{height:100%}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-96{max-height:calc(var(--spacing) * 96)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-\[100px\]{min-height:100px}.min-h-\[200px\]{min-height:200px}.min-h-\[300px\]{min-height:300px}.min-h-\[400px\]{min-height:400px}.min-h-\[500px\]{min-height:500px}.min-h-full{min-height:100%}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-40{width:calc(var(--spacing) * 40)}.w-48{width:calc(var(--spacing) * 48)}.w-52{width:calc(var(--spacing) * 52)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-80{width:calc(var(--spacing) * 80)}.w-96{width:calc(var(--spacing) * 96)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[200px\]{max-width:200px}.max-w-md{max-width:var(--container-md)}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-\[4rem\]{min-width:4rem}.min-w-\[48px\]{min-width:48px}.min-w-\[500px\]{min-width:500px}.min-w-\[600px\]{min-width:600px}.min-w-max{min-width:max-content}.flex-1{flex:1}.flex-none{flex:none}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-2{--tw-translate-x:calc(var(--spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-10{--tw-translate-x:calc(var(--spacing) * 10);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-2{--tw-translate-y:calc(var(--spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-4{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-110{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.justify-items-center{justify-items:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-box{border-radius:var(--radius-box);border-radius:var(--radius-box)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}@layer daisyui.l1{.alert-dash{color:var(--alert-color);box-shadow:none;background-color:#0000;background-image:none;border-style:dashed}.btn-dash:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}@media (hover:none){.btn-dash:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}}.alert-soft{color:var(--alert-color,var(--color-base-content));background:var(--alert-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.alert-soft{background:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 8%, var(--color-base-100))}}.alert-soft{--alert-border-color:var(--alert-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.alert-soft{--alert-border-color:color-mix(in oklab, var(--alert-color,var(--color-base-content)) 10%, var(--color-base-100))}}.alert-soft{box-shadow:none;background-image:none}.btn-link{--btn-border:#0000;--btn-bg:#0000;--btn-noise:none;--btn-shadow:"";outline-color:currentColor;text-decoration-line:underline}.btn-link:not(.btn-disabled,.btn:disabled,.btn[disabled]){--btn-fg:var(--btn-color,var(--color-primary))}.btn-link:is(.btn-active,:hover,:active:focus,:focus-visible){--btn-border:#0000;--btn-bg:#0000}.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn)){--btn-shadow:"";--btn-bg:#0000;--btn-border:#0000;--btn-noise:none}.btn-ghost:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn)):not(:disabled,[disabled],.btn-disabled){--btn-fg:var(--btn-color,currentColor);outline-color:currentColor}@media (hover:none){.btn-ghost:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color,currentColor);--btn-border:#0000;--btn-noise:none;outline-color:currentColor}}.btn-outline:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}@media (hover:none){.btn-outline:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-bg:#0000;--btn-fg:var(--btn-color);--btn-border:var(--btn-color);--btn-noise:none}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-shadow:"";--btn-fg:var(--btn-color,var(--color-base-content));--btn-bg:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 8%, var(--color-base-100))}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-border:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 10%, var(--color-base-100))}}.btn-soft:not(.btn-active,:hover,:active:focus,:focus-visible,input:checked:not(.filter .btn),:disabled,[disabled],.btn-disabled){--btn-noise:none}@media (hover:none){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-shadow:"";--btn-fg:var(--btn-color,var(--color-base-content));--btn-bg:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-bg:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 8%, var(--color-base-100))}}.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-border:var(--btn-color,var(--color-base-content))}@supports (color:color-mix(in lab, red, red)){.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-border:color-mix(in oklab, var(--btn-color,var(--color-base-content)) 10%, var(--color-base-100))}}.btn-soft:not(.btn-active,:active,:focus-visible,input:checked:not(.filter .btn)):hover{--btn-noise:none}}}.btn-dash{border-style:dashed}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-base-200\/30{border-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.border-base-200\/30{border-color:color-mix(in oklab, var(--color-base-200) 30%, transparent)}}.border-base-300{border-color:var(--color-base-300)}.border-base-content\/20{border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.border-base-content\/20{border-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.border-black\/5{border-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.border-black\/5{border-color:color-mix(in oklab, var(--color-black) 5%, transparent)}}.border-black\/10{border-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.border-black\/10{border-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.border-primary,.border-primary\/20{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/20{border-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--color-accent)}.bg-base-100,.bg-base-100\/30{background-color:var(--color-base-100)}@supports (color:color-mix(in lab, red, red)){.bg-base-100\/30{background-color:color-mix(in oklab, var(--color-base-100) 30%, transparent)}}.bg-base-200,.bg-base-200\/30{background-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.bg-base-200\/30{background-color:color-mix(in oklab, var(--color-base-200) 30%, transparent)}}.bg-base-200\/50{background-color:var(--color-base-200)}@supports (color:color-mix(in lab, red, red)){.bg-base-200\/50{background-color:color-mix(in oklab, var(--color-base-200) 50%, transparent)}}.bg-base-300{background-color:var(--color-base-300)}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.bg-error,.bg-error\/10{background-color:var(--color-error)}@supports (color:color-mix(in lab, red, red)){.bg-error\/10{background-color:color-mix(in oklab, var(--color-error) 10%, transparent)}}.bg-info{background-color:var(--color-info)}.bg-neutral{background-color:var(--color-neutral)}.bg-primary,.bg-primary\/5{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary) 5%, transparent)}}.bg-primary\/10{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary) 10%, transparent)}}.bg-primary\/20{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.bg-secondary{background-color:var(--color-secondary)}.bg-success,.bg-success\/10{background-color:var(--color-success)}@supports (color:color-mix(in lab, red, red)){.bg-success\/10{background-color:color-mix(in oklab, var(--color-success) 10%, transparent)}}.bg-warning,.bg-warning\/10{background-color:var(--color-warning)}@supports (color:color-mix(in lab, red, red)){.bg-warning\/10{background-color:color-mix(in oklab, var(--color-warning) 10%, transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-accent{--tw-gradient-from:var(--color-accent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-primary{--tw-gradient-from:var(--color-primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-secondary{--tw-gradient-from:var(--color-secondary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-accent{--tw-gradient-via:var(--color-accent);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-accent{--tw-gradient-to:var(--color-accent);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-primary{--tw-gradient-to:var(--color-primary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-secondary{--tw-gradient-to:var(--color-secondary);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.mask-circle{--tw-mask-radial-shape:circle}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-10{padding:calc(var(--spacing) * 10)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-10{padding-inline:calc(var(--spacing) * 10)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-20{padding-block:calc(var(--spacing) * 20)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pr-10{padding-right:calc(var(--spacing) * 10)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-10{padding-left:calc(var(--spacing) * 10)}.\!text-center{text-align:center!important}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.leading-20{--tw-leading:calc(var(--spacing) * 20);line-height:calc(var(--spacing) * 20)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking:var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-balance{text-wrap:balance}.whitespace-nowrap{white-space:nowrap}.text-accent{color:var(--color-accent)}.text-accent-content{color:var(--color-accent-content)}.text-base-content,.text-base-content\/60{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.text-base-content\/60{color:color-mix(in oklab, var(--color-base-content) 60%, transparent)}}.text-base-content\/90{color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.text-base-content\/90{color:color-mix(in oklab, var(--color-base-content) 90%, transparent)}}.text-error{color:var(--color-error)}.text-error-content{color:var(--color-error-content)}.text-gray-500{color:var(--color-gray-500)}.text-info{color:var(--color-info)}.text-info-content{color:var(--color-info-content)}.text-neutral-content{color:var(--color-neutral-content)}.text-primary{color:var(--color-primary)}.text-primary-content{color:var(--color-primary-content)}.text-secondary{color:var(--color-secondary)}.text-secondary-content{color:var(--color-secondary-content)}.text-success{color:var(--color-success)}.text-success-content{color:var(--color-success-content)}.text-transparent{color:#0000}.text-warning{color:var(--color-warning)}.text-warning-content{color:var(--color-warning-content)}.text-white{color:var(--color-white)}.normal-case{text-transform:none}.uppercase{text-transform:uppercase}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-secondary\/20{--tw-shadow-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-secondary) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-primary{--tw-ring-color:var(--color-primary)}.ring-offset-1{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-2xl{--tw-drop-shadow-size:drop-shadow(0 25px 25px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-2xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}}.before\:z-50:before,.after\:z-50:after{content:var(--tw-content);z-index:50}@media (hover:hover){.hover\:z-10:hover{z-index:10}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-125:hover{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-accent\/40:hover{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:border-accent\/40:hover{border-color:color-mix(in oklab, var(--color-accent) 40%, transparent)}}.hover\:border-base-content\/20:hover{border-color:var(--color-base-content)}@supports (color:color-mix(in lab, red, red)){.hover\:border-base-content\/20:hover{border-color:color-mix(in oklab, var(--color-base-content) 20%, transparent)}}.hover\:border-primary\/40:hover{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/40:hover{border-color:color-mix(in oklab, var(--color-primary) 40%, transparent)}}.hover\:border-primary\/50:hover{border-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary) 50%, transparent)}}.hover\:border-secondary\/40:hover{border-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-secondary\/40:hover{border-color:color-mix(in oklab, var(--color-secondary) 40%, transparent)}}.hover\:bg-base-100:hover{background-color:var(--color-base-100)}.hover\:bg-base-200:hover{background-color:var(--color-base-200)}.hover\:bg-base-300:hover{background-color:var(--color-base-300)}.hover\:bg-white\/30:hover{background-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/30:hover{background-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.hover\:text-base-content:hover{color:var(--color-base-content)}.hover\:opacity-100:hover{opacity:1}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}@media (min-width:48rem){.md\:h-64{height:calc(var(--spacing) * 64)}.md\:w-64{width:calc(var(--spacing) * 64)}.md\:w-auto{width:auto}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}}@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}}@keyframes rating{0%,40%{filter:brightness(1.05)contrast(1.05);scale:1.1}}@keyframes dropdown{0%{opacity:0}}@keyframes radio{0%{padding:5px}50%{padding:3px}}@keyframes toast{0%{opacity:0;scale:.9}to{opacity:1;scale:1}}@keyframes rotator{89.9999%,to{--first-item-position:0 0%}90%,99.9999%{--first-item-position:0 calc(var(--items) * 100%)}to{translate:0 -100%}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes menu{0%{opacity:0}}@keyframes progress{50%{background-position-x:-115%}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes pulse{50%{opacity:.5}} \ No newline at end of file diff --git a/package.json b/package.json index 6c2ef46..a848ea5 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,12 @@ "LICENSE" ], "scripts": { - "build:css": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js' --minify", + "build:cssmin": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.min.css --content './src/**/*.js' --minify", + "build:css": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js'", + "build:cssdocs": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./docs/sigpro.css --content './src/**/*.js' --minify", "build:js": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify", - "build": "bun run build:css && bun run build:js", + "build:jsdocs": "bun build ./index.js --bundle --outfile=./docs/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify", + "build": "bun run build:css && bun run build:js && bun run build:jsdocs && bun run build:cssdocs && bun run build:cssmin", "prepublishOnly": "bun run build", "docs": "bun x serve docs" }, diff --git a/src/components/Accordion.js b/src/components/Accordion.js index 5c7d0d3..b57ace2 100644 --- a/src/components/Accordion.js +++ b/src/components/Accordion.js @@ -1,24 +1,29 @@ +// components/Accordion.js import { $html } from "sigpro"; -import { joinClass } from "../core/utils.js"; +import { ui, val } from "../core/utils.js"; -/** ACCORDION */ +/** + * Accordion component + * + * daisyUI classes used: + * - collapse, collapse-arrow, collapse-plus, collapse-title, collapse-content + * - collapse-open, collapse-close + * - bg-base-200, bg-base-100, bg-primary, bg-secondary + * - mb-2, mt-2, rounded-box + */ export const Accordion = (props, children) => { - const { title, name, open, ...rest } = props; + const { class: className, title, name, open, ...rest } = props; - return $html( - "div", - { - ...rest, - class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class), - }, - [ - $html("input", { - type: name ? "radio" : "checkbox", - name: name, - checked: open - }), - $html("div", { class: "collapse-title text-xl font-medium" }, title), - $html("div", { class: "collapse-content" }, children), - ], - ); -}; + return $html("div", { + ...rest, + class: ui('collapse collapse-arrow bg-base-200 mb-2', className), + }, [ + $html("input", { + type: name ? "radio" : "checkbox", + name: name, + checked: val(open), + }), + $html("div", { class: "collapse-title text-xl font-medium" }, title), + $html("div", { class: "collapse-content" }, children), + ]); +}; \ No newline at end of file diff --git a/src/components/Alert.js b/src/components/Alert.js index 2e4d69a..f24833d 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -1,50 +1,42 @@ +// components/Alert.js import { $html } from "sigpro"; -import { val } from "../core/utils.js"; -import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js"; +import { ui, getIcon } from "../core/utils.js"; -/** ALERT */ +/** + * Alert component + * + * daisyUI classes used: + * - alert, alert-info, alert-success, alert-warning, alert-error + * - alert-soft, alert-outline, alert-dash + */ export const Alert = (props, children) => { - const { type = "info", soft = true, ...rest } = props; - - const icons = { - info: iconInfo, - success: iconSuccess, - warning: iconWarning, - error: iconError, + const { class: className, actions, type = 'info', soft = true, ...rest } = props; + + const iconMap = { + info: "icon-[lucide--info]", + success: "icon-[lucide--check-circle]", + warning: "icon-[lucide--alert-triangle]", + error: "icon-[lucide--alert-circle]", }; - const typeClass = () => { - const t = val(type); - const map = { - info: "alert-info", - success: "alert-success", - warning: "alert-warning", - error: "alert-error", - }; - return map[t] || t; - }; + // Build the complete class string + const typeClass = `alert-${type}`; + const softClass = soft ? 'alert-soft' : ''; + const allClasses = [typeClass, softClass, className].filter(Boolean).join(' '); const content = children || props.message; - return $html( - "div", - { - ...rest, - role: "alert", - class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`, - }, - [ - $html("img", { - src: icons[val(type)] || icons.info, - class: "w-4 h-4 object-contain", - alt: val(type), - }), - $html("div", { class: "flex-1" }, [ - $html("span", {}, [typeof content === "function" ? content() : content]) - ]), - props.actions ? $html("div", { class: "flex-none" }, [ - typeof props.actions === "function" ? props.actions() : props.actions - ]) : null, - ], - ); -}; + return $html("div", { + ...rest, + role: "alert", + class: ui('alert', allClasses), + }, () => [ + getIcon(iconMap[type]), + $html("div", { class: "flex-1" }, [ + $html("span", {}, [typeof content === "function" ? content() : content]) + ]), + actions ? $html("div", { class: "flex-none" }, [ + typeof actions === "function" ? actions() : actions + ]) : null, + ].filter(Boolean)); +}; \ No newline at end of file diff --git a/src/components/Autocomplete.js b/src/components/Autocomplete.js index cbe33ba..89f0313 100644 --- a/src/components/Autocomplete.js +++ b/src/components/Autocomplete.js @@ -1,11 +1,21 @@ +// components/Autocomplete.js import { $, $html, $for } from "sigpro"; import { val } from "../core/utils.js"; import { tt } from "../core/i18n.js"; -import { Input } from "./Input.js"; // Importamos el componente hermano +import { Input } from "./Input.js"; -/** AUTOCOMPLETE */ +/** + * Autocomplete component + * + * daisyUI classes used: + * - input, input-bordered, input-primary, input-secondary + * - menu, menu-dropdown, menu-dropdown-show + * - bg-base-100, rounded-box, shadow-xl, border, border-base-300 + * - absolute, left-0, w-full, mt-1, p-2, max-h-60, overflow-y-auto + * - z-50, active, bg-primary, text-primary-content + */ export const Autocomplete = (props) => { - const { options = [], value, onSelect, label, placeholder, ...rest } = props; + const { class: className, items = [], value, onSelect, label, placeholder, ...rest } = props; const query = $(val(value) || ""); const isOpen = $(false); @@ -13,7 +23,7 @@ export const Autocomplete = (props) => { const list = $(() => { const q = query().toLowerCase(); - const data = val(options) || []; + const data = val(items) || []; return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data; @@ -48,9 +58,10 @@ export const Autocomplete = (props) => { } }; - return $html("div", { class: "relative w-full" }, [ + return $html("div", { class: 'relative w-full' }, [ Input({ label, + class: className, placeholder: placeholder || tt("search")(), value: query, onfocus: () => isOpen(true), @@ -88,8 +99,8 @@ export const Autocomplete = (props) => { ]), (opt, i) => (typeof opt === "string" ? opt : opt.value) + i, ), - () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results")), + () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())), ], ), ]); -}; +}; \ No newline at end of file diff --git a/src/components/Badge.js b/src/components/Badge.js index 609e5ec..b61f910 100644 --- a/src/components/Badge.js +++ b/src/components/Badge.js @@ -1,6 +1,21 @@ +// components/Badge.js import { $html } from "sigpro"; -import { joinClass } from "../core/utils.js"; +import { ui } from "../core/utils.js"; -/** BADGE */ -export const Badge = (props, children) => - $html("span", { ...props, class: joinClass("badge", props.class) }, children); +/** + * Badge component + * + * daisyUI classes used: + * - badge, badge-primary, badge-secondary, badge-accent + * - badge-info, badge-success, badge-warning, badge-error + * - badge-outline, badge-soft, badge-dash + * - badge-xs, badge-sm, badge-md, badge-lg + */ +export const Badge = (props, children) => { + const { class: className, ...rest } = props; + + return $html("span", { + ...rest, + class: ui('badge', className), + }, children); +}; \ No newline at end of file diff --git a/src/components/Button.js b/src/components/Button.js index d26b134..926006d 100644 --- a/src/components/Button.js +++ b/src/components/Button.js @@ -1,37 +1,30 @@ +// components/Button.js import { $html } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +import { ui, val, getIcon } from "../core/utils.js"; -/** BUTTON */ +/** + * Button component + * + * daisyUI classes used: + * - btn, btn-primary, btn-secondary, btn-accent, btn-ghost + * - btn-info, btn-success, btn-warning, btn-error, btn-neutral + * - btn-xs, btn-sm, btn-md, btn-lg, btn-xl + * - btn-outline, btn-soft, btn-dash, btn-link + * - btn-circle, btn-square, btn-wide, btn-block + * - btn-active, btn-disabled + */ export const Button = (props, children) => { - const { badge, badgeClass, tooltip, icon, loading, ...rest } = props; + const { class: className, loading, icon, ...rest } = props; - const btn = $html( - "button", - { - ...rest, - class: joinClass("btn", props.class) - }, - [ - () => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null), - icon ? $html("span", { class: "mr-1" }, icon) : null, - children, - ] - ); + const iconEl = getIcon(icon); - let out = btn; - - if (badge) { - out = $html("div", { class: "indicator" }, [ - $html( - "span", - { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") }, - badge - ), - out, - ]); - } - - return tooltip - ? $html("div", { class: "tooltip", "data-tip": tooltip }, out) - : out; -}; + return $html("button", { + ...rest, + class: ui('btn', className), + disabled: () => val(loading) || val(props.disabled), + }, () => [ + val(loading) && $html("span", { class: "loading loading-spinner" }), + iconEl, + children + ].filter(Boolean)); +}; \ No newline at end of file diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 863cba4..d964c88 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -1,14 +1,25 @@ +// components/Checkbox.js import { $html } from "sigpro"; -import { val } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** CHECKBOX */ +/** + * Checkbox component + * + * daisyUI classes used: + * - checkbox, checkbox-primary, checkbox-secondary, checkbox-accent + * - checkbox-info, checkbox-success, checkbox-warning, checkbox-error + * - checkbox-xs, checkbox-sm, checkbox-md, checkbox-lg + * - toggle, toggle-primary, toggle-secondary, toggle-accent + * - toggle-xs, toggle-sm, toggle-md, toggle-lg + * - label, label-text, cursor-pointer + */ export const Checkbox = (props) => { - const { value, tooltip, toggle, label, ...rest } = props; + const { class: className, value, tooltip, toggle, label, ...rest } = props; const checkEl = $html("input", { ...rest, type: "checkbox", - class: () => (val(toggle) ? "toggle" : "checkbox"), + class: () => ui(val(toggle) ? "toggle" : "checkbox", className), checked: value }); @@ -18,4 +29,4 @@ export const Checkbox = (props) => { ]); return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout; -}; +}; \ No newline at end of file diff --git a/src/components/Colorpicker.js b/src/components/Colorpicker.js index 6e3f979..6f11552 100644 --- a/src/components/Colorpicker.js +++ b/src/components/Colorpicker.js @@ -1,9 +1,20 @@ +// components/Colorpicker.js import { $, $html, $if } from "sigpro"; -import { val } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** COLORPICKER */ +/** + * Colorpicker component + * + * daisyUI classes used: + * - btn, btn-primary, btn-secondary, btn-accent, btn-ghost + * - bg-base-100, border, border-base-300, shadow-sm, shadow-2xl + * - rounded-box, rounded-sm, fixed, inset-0 + * - z-50, z-110, absolute, left-0, mt-2, p-3, w-64 + * - grid, grid-cols-8, gap-1, ring, ring-offset-1, ring-primary + * - scale-110, transition-all, hover:scale-125, active:scale-95 + */ export const Colorpicker = (props) => { - const { value, label, ...rest } = props; + const { class: className, value, label, ...rest } = props; const isOpen = $(false); const palette = [ @@ -19,7 +30,7 @@ export const Colorpicker = (props) => { const getColor = () => val(value) || "#000000"; - return $html("div", { class: "relative w-fit" }, [ + return $html("div", { class: ui('relative w-fit', className) }, [ $html( "button", { @@ -78,4 +89,4 @@ export const Colorpicker = (props) => { }), ), ]); -}; +}; \ No newline at end of file diff --git a/src/components/Datepicker.js b/src/components/Datepicker.js index 91d7f11..02f7bd2 100644 --- a/src/components/Datepicker.js +++ b/src/components/Datepicker.js @@ -1,17 +1,23 @@ +// components/Datepicker.js import { $, $html, $if } from "sigpro"; -import { val } from "../core/utils.js"; -import { - iconCalendar, - iconLeft, - iconRight, - iconLLeft, - iconRRight -} from "../core/icons.js"; +import { val, ui, getIcon } from "../core/utils.js"; import { Input } from "./Input.js"; -/** DATEPICKER */ +/** + * Datepicker component + * + * daisyUI classes used: + * - input, input-bordered, input-primary + * - btn, btn-ghost, btn-xs, btn-circle + * - bg-base-100, border, border-base-300, shadow-2xl, rounded-box + * - absolute, left-0, mt-2, p-4, w-80, z-100, z-90 + * - grid, grid-cols-7, gap-1, text-center + * - ring, ring-primary, ring-inset, font-black + * - range, range-xs + * - tooltip, tooltip-top, tooltip-bottom + */ export const Datepicker = (props) => { - const { value, range, label, placeholder, hour = false, ...rest } = props; + const { class: className, value, range, label, placeholder, hour = false, ...rest } = props; const isOpen = $(false); const internalDate = $(new Date()); @@ -113,13 +119,13 @@ export const Datepicker = (props) => { ]); }; - return $html("div", { class: "relative w-full" }, [ + return $html("div", { class: ui('relative w-full', className) }, [ Input({ label, placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), value: displayValue, readonly: true, - icon: $html("img", { src: iconCalendar, class: "opacity-40" }), + icon: getIcon("icon-[lucide--calendar]"), onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()); @@ -138,10 +144,10 @@ export const Datepicker = (props) => { $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ $html("div", { class: "flex gap-0.5" }, [ $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, - $html("img", { src: iconLLeft, class: "opacity-40" }) + getIcon("icon-[lucide--chevrons-left]") ), $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, - $html("img", { src: iconLeft, class: "opacity-40" }) + getIcon("icon-[lucide--chevron-left]") ), ]), $html("span", { class: "font-bold uppercase flex-1 text-center" }, [ @@ -149,10 +155,10 @@ export const Datepicker = (props) => { ]), $html("div", { class: "flex gap-0.5" }, [ $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, - $html("img", { src: iconRight, class: "opacity-40" }) + getIcon("icon-[lucide--chevron-right]") ), $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, - $html("img", { src: iconRRight, class: "opacity-40" }) + getIcon("icon-[lucide--chevrons-right]") ), ]), ]), @@ -249,4 +255,4 @@ export const Datepicker = (props) => { $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })), ]); -}; +}; \ No newline at end of file diff --git a/src/components/Drawer.js b/src/components/Drawer.js index 7892741..b884a90 100644 --- a/src/components/Drawer.js +++ b/src/components/Drawer.js @@ -1,18 +1,48 @@ +// components/Drawer.js import { $html } from "sigpro"; -import { joinClass } from "../core/utils.js"; +import { ui } from "../core/utils.js"; -/** DRAWER */ -export const Drawer = (props) => - $html("div", { class: joinClass("drawer", props.class) }, [ +/** + * Drawer component + * + * daisyUI classes used: + * - drawer, drawer-toggle, drawer-content, drawer-side, drawer-overlay + * - bg-base-200, w-80, min-h-full + */ +export const Drawer = (props, children) => { + const { class: className, id, open, side, content, ...rest } = props; + + // Generar un id único si no se proporciona + const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`; + + return $html("div", { + ...rest, + class: ui('drawer', className), + }, [ $html("input", { - id: props.id, + id: drawerId, type: "checkbox", class: "drawer-toggle", - checked: props.open, + checked: () => typeof open === "function" ? open() : open, + onchange: (e) => { + if (typeof open === "function") open(e.target.checked); + } }), - $html("div", { class: "drawer-content" }, props.content), - $html("div", { class: "drawer-side" }, [ - $html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }), - $html("div", { class: "min-h-full bg-base-200 w-80" }, props.side), + $html("div", { class: "drawer-content" }, [ + typeof content === "function" ? content() : content ]), + $html("div", { class: "drawer-side" }, [ + // El overlay debe tener for apuntando al checkbox + $html("label", { + for: drawerId, + class: "drawer-overlay", + onclick: () => { + if (typeof open === "function") open(false); + } + }), + $html("div", { class: "min-h-full bg-base-200 w-80" }, [ + typeof side === "function" ? side() : side + ]) + ]) ]); +}; \ No newline at end of file diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js index fdbbf60..3c0c663 100644 --- a/src/components/Dropdown.js +++ b/src/components/Dropdown.js @@ -1,8 +1,20 @@ +// components/Dropdown.js import { $html, $for } from "sigpro"; -import { val } from "../core/utils.js"; +import { ui } from "../core/utils.js"; +/** + * Dropdown component + * + * daisyUI classes used: + * - dropdown, dropdown-content, dropdown-end, dropdown-top, dropdown-bottom + * - menu, menu-dropdown, menu-dropdown-show + * - btn, btn-ghost, btn-sm, btn-md, btn-lg + * - bg-base-100, shadow, rounded-box, border, border-base-300 + * - z-50, p-2, w-52, min-w-max + * - m-1, flex, items-center, gap-2 + */ export const Dropdown = (props, children) => { - const { label, icon, items, ...rest } = props; + const { class: className, label, icon, items, ...rest } = props; const renderContent = () => { if (items) { @@ -38,7 +50,7 @@ export const Dropdown = (props, children) => { return $html("div", { ...rest, - class: () => `dropdown ${val(props.class) || ""}`, + class: ui('dropdown', className), }, [ $html("div", { tabindex: 0, diff --git a/src/components/Fab.js b/src/components/Fab.js index da09437..3d97dc7 100644 --- a/src/components/Fab.js +++ b/src/components/Fab.js @@ -1,15 +1,26 @@ +// components/Fab.js import { $html } from "sigpro"; -import { val } from "../core/utils.js"; +import { val, ui, getIcon } from "../core/utils.js"; -/** FAB (Floating Action Button) */ +/** + * Fab (Floating Action Button) component + * + * daisyUI classes used: + * - btn, btn-lg, btn-circle, btn-primary + * - shadow-2xl, shadow-lg + * - badge, badge-ghost, shadow-sm, whitespace-nowrap + * - absolute, flex, flex-col-reverse, items-end, gap-3 + * - z-100, transition-all, duration-300 + * - bottom-6, right-6, top-6, left-6 + */ export const Fab = (props) => { - const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props; + const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props; return $html( "div", { ...rest, - class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`, + class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className), }, [ $html( @@ -20,7 +31,7 @@ export const Fab = (props) => { class: "btn btn-lg btn-circle btn-primary shadow-2xl", }, [ - icon ? (typeof icon === "function" ? icon() : icon) : null, + icon ? getIcon(icon) : null, !icon && label ? label : null ], ), @@ -38,7 +49,7 @@ export const Fab = (props) => { act.onclick?.(e); }, }, - [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""], + [act.icon ? getIcon(act.icon) : act.text || ""], ), ]), ), diff --git a/src/components/Fieldset.js b/src/components/Fieldset.js index b3efff2..f75ab10 100644 --- a/src/components/Fieldset.js +++ b/src/components/Fieldset.js @@ -1,19 +1,30 @@ +// components/Fieldset.js import { $html } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** FIELDSET */ -export const Fieldset = (props, children) => - $html( +/** + * Fieldset component + * + * daisyUI classes used: + * - fieldset, fieldset-legend + * - bg-base-200, border, border-base-300 + * - p-4, rounded-lg, font-bold + */ +export const Fieldset = (props, children) => { + const { class: className, legend, ...rest } = props; + + return $html( "fieldset", { - ...props, - class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class), + ...rest, + class: ui('fieldset bg-base-200 border border-base-300 p-4 rounded-lg', className), }, [ () => { - const legendText = val(props.legend); + const legendText = val(legend); return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null; }, children, ], ); +}; \ No newline at end of file diff --git a/src/components/Fileinput.js b/src/components/Fileinput.js index 4c3e751..70cb41e 100644 --- a/src/components/Fileinput.js +++ b/src/components/Fileinput.js @@ -1,9 +1,26 @@ +// components/Fileinput.js import { $, $html, $if, $for } from "sigpro"; -import { iconUpload, iconClose } from "../core/icons.js"; +import { ui, getIcon } from "../core/utils.js"; -/** FILEINPUT */ +/** + * Fileinput component + * + * daisyUI classes used: + * - fieldset, w-full, p-0 + * - tooltip, tooltip-top, before:z-50, after:z-50 + * - relative, flex, items-center, justify-between, w-full, h-12, px-4 + * - border-2, border-dashed, rounded-lg, cursor-pointer, transition-all, duration-200 + * - border-primary, bg-primary/10, border-base-content/20, bg-base-100, hover:bg-base-200 + * - text-sm, opacity-70, truncate, grow, text-left + * - text-[10px], opacity-40, shrink-0 + * - text-error, text-[10px], mt-1, px-1, font-medium + * - mt-2, space-y-1 + * - flex, items-center, justify-between, p-1.5, pl-3, text-xs, bg-base-200/50, rounded-md, border, border-base-300 + * - gap-2, truncate, opacity-50, font-medium, max-w-[200px] + * - btn, btn-ghost, btn-xs, btn-circle + */ export const Fileinput = (props) => { - const { tooltip, max = 2, accept = "*", onSelect } = props; + const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props; const selectedFiles = $([]); const isDragging = $(false); @@ -30,7 +47,7 @@ export const Fileinput = (props) => { onSelect?.(updated); }; - return $html("fieldset", { class: "fieldset w-full p-0" }, [ + return $html("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [ $html( "div", { @@ -60,7 +77,7 @@ export const Fileinput = (props) => { }, [ $html("div", { class: "flex items-center gap-3 w-full" }, [ - $html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }), + getIcon("icon-[lucide--upload]"), $html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."), $html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`), ]), @@ -102,7 +119,7 @@ export const Fileinput = (props) => { removeFile(index); }, }, - [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })], + [getIcon("icon-[lucide--x]")] ), ]), (file) => file.name + file.lastModified, @@ -110,4 +127,4 @@ export const Fileinput = (props) => { ]), ), ]); -}; +}; \ No newline at end of file diff --git a/src/components/Indicator.js b/src/components/Indicator.js index 14fa138..5e11cfa 100644 --- a/src/components/Indicator.js +++ b/src/components/Indicator.js @@ -1,9 +1,19 @@ +// components/Indicator.js import { $html } from "sigpro"; -import { joinClass } from "../core/utils.js"; +import { ui } from "../core/utils.js"; -/** INDICATOR */ +/** + * Indicator component + * + * daisyUI classes used: + * - indicator, indicator-item + * - badge, badge-primary, badge-secondary, badge-accent + * - badge-info, badge-success, badge-warning, badge-error + * - badge-outline, badge-soft, badge-dash + * - badge-xs, badge-sm, badge-md, badge-lg + */ export const Indicator = (props, children) => - $html("div", { class: joinClass("indicator", props.class) }, [ + $html("div", { class: "indicator" }, () => [ children, - $html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge), - ]); + props.value && $html("span", { class: ui('indicator-item badge', props.class) }, props.value), + ].filter(Boolean)); \ No newline at end of file diff --git a/src/components/Input.js b/src/components/Input.js index 1dc49ff..c30bf50 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -1,77 +1,88 @@ +// components/Input.js import { $, $html } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; -import { tt } from "../core/i18n.js"; -import { - iconAbc, - iconLock, - iconCalendar, - icon123, - iconMail, - iconShow, - iconHide -} from "../core/icons.js"; +import { val, ui, getIcon } from "../core/utils.js"; -/** INPUT */ +/** + * Input component - Solo el input con ícono integrado a la izquierda + * + * daisyUI classes used: + * - input, input-bordered, input-ghost, input-primary, input-secondary + * - input-accent, input-info, input-success, input-warning, input-error + * - input-xs, input-sm, input-md, input-lg + * - btn, btn-ghost, btn-xs, btn-sm, btn-md, btn-circle, opacity-50, hover:opacity-100 + */ export const Input = (props) => { - const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props; + const { + class: className, + value, + type = "text", + icon, + oninput, + placeholder, + disabled, + size, // para poder pasar el tamaño también al botón + ...rest + } = props; + const isPassword = type === "password"; const visible = $(false); - const iconsByType = { - text: iconAbc, - password: iconLock, - date: iconCalendar, - number: icon123, - email: iconMail, + const iconMap = { + text: "icon-[lucide--text]", + password: "icon-[lucide--lock]", + date: "icon-[lucide--calendar]", + number: "icon-[lucide--hash]", + email: "icon-[lucide--mail]", + search: "icon-[lucide--search]", + tel: "icon-[lucide--phone]", + url: "icon-[lucide--link]", }; - const inputEl = $html("input", { - ...rest, - type: () => (isPassword ? (visible() ? "text" : "password") : type), - placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "), - class: joinClass("grow order-2 focus:outline-none", props.class), - value: value, - oninput: (e) => props.oninput?.(e), - disabled: () => val(props.disabled), - }); + const leftIcon = icon ? getIcon(icon) : (iconMap[type] ? getIcon(iconMap[type]) : null); - const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null; + const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]"); + + const paddingLeft = leftIcon ? "pl-10" : ""; + const paddingRight = isPassword ? "pr-10" : ""; + + const buttonSize = () => { + if (className?.includes('input-xs')) return 'btn-xs'; + if (className?.includes('input-sm')) return 'btn-sm'; + if (className?.includes('input-lg')) return 'btn-lg'; + return 'btn-md'; + }; return $html( - "label", - { - class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""), - }, - [ - leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null, - label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null, - inputEl, - isPassword - ? $html( - "button", - { - type: "button", - class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100", - onclick: (e) => { - e.preventDefault(); - visible(!visible()); - }, - }, - () => - $html("img", { - class: "w-5 h-5", - src: visible() ? iconShow : iconHide, - }), - ) - : null, - tip - ? $html( - "div", - { class: "tooltip tooltip-left order-4", "data-tip": tip }, - $html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"), - ) - : null, - () => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null), - ], + "div", + { class: "relative w-full" }, + () => [ + // Input + $html("input", { + ...rest, + type: () => (isPassword ? (visible() ? "text" : "password") : type), + placeholder: placeholder || " ", + class: ui('input w-full', `${paddingLeft} ${paddingRight} ${className || ''}`.trim()), + value: value, + oninput: (e) => oninput?.(e), + disabled: () => val(disabled), + }), + + leftIcon ? $html("div", { + class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60", + }, leftIcon) : null, + + isPassword ? $html("button", { + type: "button", + class: ui( + "absolute right-3 inset-y-0 flex items-center", + "btn btn-ghost btn-circle opacity-50 hover:opacity-100", + buttonSize() + ), + onclick: (e) => { + e.preventDefault(); + visible(!visible()); + } + }, () => getPasswordIcon()) : null, + ] ); -}; +}; \ No newline at end of file diff --git a/src/components/Label.js b/src/components/Label.js new file mode 100644 index 0000000..ac65b85 --- /dev/null +++ b/src/components/Label.js @@ -0,0 +1,28 @@ +// components/Label.js +import { $, $html } from "sigpro"; +import { ui, val } from "../core/utils.js"; + +/** + * Label component + * + * daisyUI classes used: + * - label + * - floating-label + */ +export const Label = (props) => { + const { children, value, floating = false, error, required, class: className, ...rest } = props; + + if (floating) { + return $html("label", { class: ui("floating-label w-full", className), ...rest }, () => [ + value ? $html("span", {}, value) : null, + children, + error ? $html("span", { class: "text-error text-xs" }, val(error)) : null, + ]); + } + + return $html("label", { class: ui("input w-full", className), ...rest }, () => [ + value ? $html("span", { class: "label" }, value) : null, + children, + error ? $html("span", { class: "text-error text-xs" }, val(error)) : null, + ]); +}; \ No newline at end of file diff --git a/src/components/List.js b/src/components/List.js index f96a60d..6b77b2b 100644 --- a/src/components/List.js +++ b/src/components/List.js @@ -1,20 +1,22 @@ +// components/List.js import { $html, $if, $for } from "sigpro"; -import { joinClass, val } from "../core/utils.js"; +import { ui, val } from "../core/utils.js"; -/** LIST */ +/** + * List component + * + * daisyUI classes used: + * - list, list-row, list-bullet, list-image, list-none + * - bg-base-100, rounded-box, shadow-md + * - p-4, pb-2, text-xs, opacity-60 + * - flex, items-center, gap-2 + */ export const List = (props) => { - const { - items, - header, - render, - keyFn = (item, index) => index, - class: className, - ...rest - } = props; + const { class: className, items, header, render, keyFn = (item, index) => index, ...rest } = props; const listItems = $for( - items, - (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), + items, + (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn ); @@ -22,7 +24,7 @@ export const List = (props) => { "ul", { ...rest, - class: joinClass("list bg-base-100 rounded-box shadow-md", className), + class: ui('list bg-base-100 rounded-box shadow-md', className), }, header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems ); diff --git a/src/components/Menu.js b/src/components/Menu.js index ca93792..f9ca00d 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -1,8 +1,19 @@ +// components/Menu.js import { $html, $for } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** MENU */ +/** + * Menu component + * + * daisyUI classes used: + * - menu, menu-dropdown, menu-dropdown-show + * - bg-base-200, rounded-box + * - details, summary, ul, li, a + * - mr-2, active + */ export const Menu = (props) => { + const { class: className, items, ...rest } = props; + const renderItems = (items) => $for( () => items || [], @@ -21,5 +32,5 @@ export const Menu = (props) => { (it, i) => it.label || i, ); - return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items)); -}; + return $html("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items)); +}; \ No newline at end of file diff --git a/src/components/Modal.js b/src/components/Modal.js index 747971a..b9cfb63 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -1,19 +1,27 @@ +// components/Modal.js import { $html, $watch } from "sigpro"; +import { ui, val } from "../core/utils.js"; import { tt } from "../core/i18n.js"; import { Button } from "./Button.js"; -/** MODAL REACTIVO NATIVO */ +/** + * Modal component + * + * daisyUI classes used: + * - modal, modal-box, modal-action, modal-backdrop + * - modal-open, modal-middle, modal-top, modal-bottom + * - text-lg, font-bold, mb-4, py-2 + * - flex, gap-2 + */ export const Modal = (props, children) => { - const { title, buttons, open, ...rest } = props; + const { class: className, title, buttons, open, ...rest } = props; const dialogRef = { current: null }; - // Sincronizamos la señal con los métodos nativos del navegador $watch(() => { const dialog = dialogRef.current; if (!dialog) return; - if (open()) { - // Solo abrimos si no está ya abierto (evita bucles) + if (val(open)) { if (!dialog.open) dialog.showModal(); } else { if (dialog.open) dialog.close(); @@ -22,15 +30,14 @@ export const Modal = (props, children) => { const close = (e) => { if (e && e.preventDefault) e.preventDefault(); - open(false); + if (typeof open === "function") open(false); }; return $html("dialog", { ...rest, ref: dialogRef, - class: "modal", - // Importante: Si el usuario pulsa ESC, actualizamos la señal - oncancel: () => open(false) + class: ui('modal', className), + oncancel: () => typeof open === "function" && open(false) }, [ $html("div", { class: "modal-box" }, [ title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null, @@ -42,7 +49,6 @@ export const Modal = (props, children) => { Button({ type: "button", onclick: close }, tt("close")()), ]), ]), - // Backdrop nativo que sincroniza con la señal $html("form", { method: "dialog", class: "modal-backdrop", diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 3bb99fc..fdead7e 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,6 +1,16 @@ +// components/Navbar.js import { $html } from "sigpro"; -import { joinClass } from "../core/utils.js"; +import { ui } from "../core/utils.js"; -/** NAVBAR */ -export const Navbar = (props, children) => - $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class) }, children); +/** + * Navbar component + * + * daisyUI classes used: + * - navbar, navbar-start, navbar-center, navbar-end + * - bg-base-100, shadow-sm, px-4 + */ +export const Navbar = (props, children) => { + const { class: className, ...rest } = props; + + return $html("div", { ...rest, class: ui('navbar bg-base-100 shadow-sm px-4', className) }, children); +}; \ No newline at end of file diff --git a/src/components/Radio.js b/src/components/Radio.js index 8460376..4ecde0f 100644 --- a/src/components/Radio.js +++ b/src/components/Radio.js @@ -1,15 +1,25 @@ +// components/Radio.js import { $html } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** RADIO */ +/** + * Radio component + * + * daisyUI classes used: + * - radio, radio-primary, radio-secondary, radio-accent + * - radio-info, radio-success, radio-warning, radio-error + * - radio-xs, radio-sm, radio-md, radio-lg + * - label, label-text, cursor-pointer, justify-start, gap-3 + * - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right + */ export const Radio = (props) => { - const { label, tooltip, value, inputValue, name, ...rest } = props; + const { class: className, label, tooltip, value, inputValue, name, ...rest } = props; const radioEl = $html("input", { ...rest, type: "radio", name: name, - class: joinClass("radio", props.class), + class: ui('radio', className), checked: () => val(value) === inputValue, onclick: () => { if (typeof value === "function") value(inputValue); @@ -18,8 +28,10 @@ export const Radio = (props) => { if (!label && !tooltip) return radioEl; - return $html("label", { class: "label cursor-pointer justify-start gap-3" }, [ + const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [ radioEl, label ? $html("span", { class: "label-text" }, label) : null, ]); + + return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout; }; \ No newline at end of file diff --git a/src/components/Range.js b/src/components/Range.js index 35d4721..4d1c507 100644 --- a/src/components/Range.js +++ b/src/components/Range.js @@ -1,14 +1,24 @@ +// components/Range.js import { $html } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** RANGE */ +/** + * Range component + * + * daisyUI classes used: + * - range, range-primary, range-secondary, range-accent + * - range-info, range-success, range-warning, range-error + * - range-xs, range-sm, range-md, range-lg + * - label-text, flex, flex-col, gap-2 + * - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right + */ export const Range = (props) => { - const { label, tooltip, value, ...rest } = props; + const {class: className, label, tooltip, value, ...rest } = props; const rangeEl = $html("input", { ...rest, type: "range", - class: joinClass("range", props.class), + class: ui('range', className), value: value, disabled: () => val(props.disabled) }); @@ -21,4 +31,4 @@ export const Range = (props) => { ]); return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout; -}; +}; \ No newline at end of file diff --git a/src/components/Rating.js b/src/components/Rating.js index d5ce564..2ea8107 100644 --- a/src/components/Rating.js +++ b/src/components/Rating.js @@ -1,16 +1,25 @@ +// components/Rating.js import { $html } from "sigpro"; -import { val } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** RATING */ +/** + * Rating component + * + * daisyUI classes used: + * - rating, rating-half, rating-hidden + * - mask, mask-star, mask-star-2, mask-heart, mask-circle + * - pointer-events-none + */ export const Rating = (props) => { - const { value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props; + const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props; + const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`; return $html( "div", { ...rest, - class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`, + class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className), }, Array.from({ length: val(count) }, (_, i) => { const starValue = i + 1; diff --git a/src/components/Select.js b/src/components/Select.js index f215fb3..287094a 100644 --- a/src/components/Select.js +++ b/src/components/Select.js @@ -1,19 +1,28 @@ +// components/Select.js import { $html, $for } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** SELECT */ +/** + * Select component + * + * daisyUI classes used: + * - select, select-bordered, select-primary, select-secondary + * - select-accent, select-info, select-success, select-warning, select-error + * - select-xs, select-sm, select-md, select-lg + * - fieldset-label, flex, flex-col, gap-1, w-full + */ export const Select = (props) => { - const { label, options, value, ...rest } = props; + const { class: className, label, items, value, ...rest } = props; const selectEl = $html( "select", { ...rest, - class: joinClass("select select-bordered w-full", props.class), + class: ui('select select-bordered w-full', className), value: value }, $for( - () => val(options) || [], + () => val(items) || [], (opt) => $html( "option", @@ -33,4 +42,4 @@ export const Select = (props) => { $html("span", {}, label), selectEl ]); -}; +}; \ No newline at end of file diff --git a/src/components/Stack.js b/src/components/Stack.js index 6472402..85c485a 100644 --- a/src/components/Stack.js +++ b/src/components/Stack.js @@ -1,6 +1,15 @@ +// components/Stack.js import { $html } from "sigpro"; -import { joinClass } from "../core/utils.js"; +import { ui } from "../core/utils.js"; -/** STACK */ -export const Stack = (props, children) => - $html("div", { ...props, class: joinClass("stack", props.class) }, children); +/** + * Stack component + * + * daisyUI classes used: + * - stack, stack-top, stack-bottom, stack-start, stack-end + */ +export const Stack = (props, children) => { + const { class: className, ...rest } = props; + + return $html("div", { ...rest, class: ui('stack', className) }, children); +}; \ No newline at end of file diff --git a/src/components/Stat.js b/src/components/Stat.js index e1c5d1e..3614ec4 100644 --- a/src/components/Stat.js +++ b/src/components/Stat.js @@ -1,11 +1,21 @@ +// components/Stat.js import { $html } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; -/** STAT */ -export const Stat = (props) => - $html("div", { ...props, class: joinClass("stat", props.class) }, [ - props.icon && $html("div", { class: "stat-figure text-secondary" }, props.icon), - props.label && $html("div", { class: "stat-title" }, props.label), - $html("div", { class: "stat-value" }, () => val(props.value) ?? props.value), - props.desc && $html("div", { class: "stat-desc" }, props.desc), +/** + * Stat component + * + * daisyUI classes used: + * - stat, stat-figure, stat-title, stat-value, stat-desc + * - text-secondary + */ +export const Stat = (props) => { + const { class: className, icon, label, value, desc, ...rest } = props; + + return $html("div", { ...rest, class: ui('stat', className) }, [ + icon && $html("div", { class: "stat-figure text-secondary" }, icon), + label && $html("div", { class: "stat-title" }, label), + $html("div", { class: "stat-value" }, () => val(value) ?? value), + desc && $html("div", { class: "stat-desc" }, desc), ]); +}; \ No newline at end of file diff --git a/src/components/Swap.js b/src/components/Swap.js index e8cfe04..1a599c8 100644 --- a/src/components/Swap.js +++ b/src/components/Swap.js @@ -1,13 +1,23 @@ +// components/Swap.js import { $html } from "sigpro"; -import { joinClass } from "../core/utils.js"; +import { ui, val } from "../core/utils.js"; -/** SWAP */ -export const Swap = (props) => - $html("label", { class: joinClass("swap", props.class) }, [ +/** + * Swap component + * + * daisyUI classes used: + * - swap, swap-on, swap-off, swap-active + * - swap-rotate, swap-flip, swap-indeterminate + */ +export const Swap = (props) => { + const { class: className, value, on, off, ...rest } = props; + + return $html("label", { ...rest, class: ui('swap', className) }, [ $html("input", { type: "checkbox", - checked: props.value + checked: val(value) }), - $html("div", { class: "swap-on" }, props.on), - $html("div", { class: "swap-off" }, props.off), + $html("div", { class: "swap-on" }, on), + $html("div", { class: "swap-off" }, off), ]); +}; \ No newline at end of file diff --git a/src/components/Table.js b/src/components/Table.js index aad76fe..c1d2a4c 100644 --- a/src/components/Table.js +++ b/src/components/Table.js @@ -1,34 +1,37 @@ +// components/Table.js import { $html, $for, $if } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +import { val, ui } from "../core/utils.js"; import { tt } from "../core/i18n.js"; -/** TABLE */ +/** + * Table component + * + * daisyUI classes used: + * - table, table-zebra, table-pin-rows, table-pin-cols + * - table-xs, table-sm, table-md, table-lg + * - overflow-x-auto, w-full, bg-base-100, rounded-box, border, border-base-300 + * - thead, tbody, tfoot, tr, th, td + * - hover, text-center, p-10, opacity-50 + */ export const Table = (props) => { - const { - items = [], - columns = [], - keyFn, - zebra = false, - pinRows = false, - empty = tt("nodata")(), - ...rest - } = props; + const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props; - const tableClass = () => joinClass( - "table", - `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}` - ); + const tableClass = () => { + const zebraClass = val(zebra) ? "table-zebra" : ""; + const pinRowsClass = val(pinRows) ? "table-pin-rows" : ""; + return ui('table', className, zebraClass, pinRowsClass); + }; return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [ $html("table", { ...rest, class: tableClass }, [ $html("thead", {}, [ - $html("tr", {}, + $html("tr", {}, columns.map(col => $html("th", { class: col.class || "" }, col.label)) ) ]), $html("tbody", {}, [ $for(items, (item, index) => { - return $html("tr", { class: "hover" }, + return $html("tr", { class: "hover" }, columns.map(col => { const cellContent = () => { if (col.render) return col.render(item, index); @@ -39,8 +42,8 @@ export const Table = (props) => { }) ); }, keyFn || ((item, idx) => item.id || idx)), - - $if(() => val(items).length === 0, () => + + $if(() => val(items).length === 0, () => $html("tr", {}, [ $html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [ val(empty) @@ -48,13 +51,13 @@ export const Table = (props) => { ]) ) ]), - $if(() => columns.some(c => c.footer), () => + $if(() => columns.some(c => c.footer), () => $html("tfoot", {}, [ - $html("tr", {}, + $html("tr", {}, columns.map(col => $html("th", {}, col.footer || "")) ) ]) ) ]) ]); -}; +}; \ No newline at end of file diff --git a/src/components/Tabs.js b/src/components/Tabs.js index e8ab9aa..d6351fe 100644 --- a/src/components/Tabs.js +++ b/src/components/Tabs.js @@ -1,46 +1,65 @@ -import { $html, $for } from "sigpro"; -import { val, joinClass } from "../core/utils.js"; +// components/Tabs.js +import { $, $html, $for } from "sigpro"; +import { val, ui } from "../core/utils.js"; -/** TABS */ +/** + * Tabs component + * + * daisyUI classes used: + * - tabs, tabs-box, tabs-lifted, tabs-bordered + * - tab, tab-active, tab-disabled + * - flex, flex-col, gap-4, w-full, p-4 + */ export const Tabs = (props) => { - const { items, ...rest } = props; + const { class: className, items, activeIndex = $(0), ...rest } = props; + const itemsSignal = typeof items === "function" ? items : () => items || []; + // Si no se provee activeIndex, creamos uno interno + const internalActive = $(0); + const currentActive = activeIndex !== undefined ? activeIndex : internalActive; + + const handleTabClick = (idx, onClick) => (e) => { + if (typeof currentActive === "function") { + currentActive(idx); + } + onClick?.(e); + }; + return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [ $html( "div", { role: "tablist", - class: joinClass("tabs tabs-box", props.class), + class: ui('tabs tabs-box', className), }, $for( itemsSignal, - (it) => - $html( + (it, idx) => { + const isActive = val(it.active) ?? (currentActive() === idx); + + return $html( "a", { role: "tab", - class: () => joinClass( - "tab", - val(it.active) && "tab-active", - val(it.disabled) && "tab-disabled", - it.tip && "tooltip" - ), - "data-tip": it.tip, - onclick: (e) => !val(it.disabled) && it.onclick?.(e), + class: () => ui('tab', isActive ? 'tab-active' : '', val(it.disabled) ? 'tab-disabled' : ''), + onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined, }, it.label, - ), - (t) => t.label, + ); + }, + (t, idx) => t.label + idx, ), ), () => { - const active = itemsSignal().find((it) => val(it.active)); - if (!active) return null; - const content = val(active.content); + const activeItem = itemsSignal().find((it, idx) => + val(it.active) ?? (currentActive() === idx) + ); + if (!activeItem) return null; + const content = val(activeItem.content); return $html("div", { class: "p-4" }, [ typeof content === "function" ? content() : content ]); }, ]); -}; +}; \ No newline at end of file diff --git a/src/components/Timeline.js b/src/components/Timeline.js index 0d6bab5..b0c8d34 100644 --- a/src/components/Timeline.js +++ b/src/components/Timeline.js @@ -1,26 +1,32 @@ +// components/Timeline.js import { $html, $for } from "sigpro"; -import { val } from "../core/utils.js"; -import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js"; +import { val, ui, getIcon } from "../core/utils.js"; -/** TIMELINE */ +/** + * Timeline component + * + * daisyUI classes used: + * - timeline, timeline-vertical, timeline-horizontal, timeline-compact + * - timeline-start, timeline-middle, timeline-end, timeline-box + * - flex-1, shadow-sm + * - hr, bg-primary + */ export const Timeline = (props) => { - const { items = [], vertical = true, compact = false, ...rest } = props; + const { class: className, items = [], vertical = true, compact = false, ...rest } = props; - const icons = { - info: iconInfo, - success: iconSuccess, - warning: iconWarning, - error: iconError, + const iconMap = { + info: "icon-[lucide--info]", + success: "icon-[lucide--check-circle]", + warning: "icon-[lucide--alert-triangle]", + error: "icon-[lucide--alert-circle]", }; return $html( "ul", { ...rest, - class: () => - `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${ - val(compact) ? "timeline-compact" : "" - } ${props.class || ""}`, + class: () => ui( + `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, className), }, [ $for( @@ -35,11 +41,9 @@ export const Timeline = (props) => { !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, $html("div", { class: "timeline-start" }, [renderSlot(item.title)]), $html("div", { class: "timeline-middle" }, [ - $html("img", { - src: icons[itemType] || item.icon || icons.success, - class: "w-4 h-4 object-contain mx-1", - alt: itemType, - }), + item.icon + ? getIcon(item.icon) + : getIcon(iconMap[itemType] || iconMap.success) ]), $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]), !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, @@ -49,4 +53,4 @@ export const Timeline = (props) => { ), ], ); -}; +}; \ No newline at end of file diff --git a/src/components/Toast.js b/src/components/Toast.js index 3d82b35..729b006 100644 --- a/src/components/Toast.js +++ b/src/components/Toast.js @@ -1,11 +1,21 @@ +// components/Toast.js import { $html, $mount } from "sigpro"; +import { getIcon } from "../core/utils.js"; import { Button } from "./Button.js"; -/** TOAST (Imperative Function) */ +/** + * Toast (Imperative Function) + * + * daisyUI classes used: + * - alert, alert-soft, alert-info, alert-success, alert-warning, alert-error + * - shadow-lg, transition-all, duration-300 + * - translate-x-10, opacity-0, pointer-events-auto + * - fixed, top-0, right-0, z-[9999], p-4, flex, flex-col, gap-2 + * - btn, btn-xs, btn-circle, btn-ghost + */ export const Toast = (message, type = "alert-success", duration = 3500) => { let container = document.getElementById("sigpro-toast-container"); - // Crear el contenedor global si no existe if (!container) { container = $html("div", { id: "sigpro-toast-container", @@ -27,7 +37,6 @@ export const Toast = (message, type = "alert-success", duration = 3500) => { setTimeout(() => { instance.destroy(); toastHost.remove(); - // Limpiar el contenedor si ya no hay más toasts if (!container.hasChildNodes()) container.remove(); }, 300); } else { @@ -37,6 +46,8 @@ export const Toast = (message, type = "alert-success", duration = 3500) => { }; const ToastComponent = () => { + const closeIcon = getIcon("icon-[lucide--x]"); + const el = $html( "div", { @@ -44,11 +55,13 @@ export const Toast = (message, type = "alert-success", duration = 3500) => { }, [ $html("span", {}, [typeof message === "function" ? message() : message]), - Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕") + Button({ + class: "btn-xs btn-circle btn-ghost", + onclick: close + }, closeIcon) ], ); - // Animación de entrada requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0")); return el; }; @@ -60,4 +73,4 @@ export const Toast = (message, type = "alert-success", duration = 3500) => { } return close; -}; +}; \ No newline at end of file diff --git a/src/components/Tooltip.js b/src/components/Tooltip.js index 29a79db..2b6c5ff 100644 --- a/src/components/Tooltip.js +++ b/src/components/Tooltip.js @@ -1,6 +1,19 @@ +// components/Tooltip.js import { $html } from "sigpro"; -import { joinClass } from "../core/utils.js"; +import { ui } from "../core/utils.js"; -/** TOOLTIP */ +/** + * Tooltip component + * + * daisyUI classes used: + * - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right + * - tooltip-primary, tooltip-secondary, tooltip-accent + * - tooltip-info, tooltip-success, tooltip-warning, tooltip-error + * - tooltip-open + */ export const Tooltip = (props, children) => - $html("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children); + $html("div", { + ...props, + class: () => ui('tooltip', props.ui, props.class), + "data-tip": props.tip, + }, children); \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index c948fc7..6869364 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -13,6 +13,7 @@ import * as FieldsetModule from './Fieldset.js'; import * as FileinputModule from './Fileinput.js'; import * as IndicatorModule from './Indicator.js'; import * as InputModule from './Input.js'; +import * as LabelModule from './Label.js'; import * as ListModule from './List.js'; import * as LoadingModule from './Loading.js'; import * as MenuModule from './Menu.js'; @@ -46,6 +47,7 @@ export * from './Fieldset.js'; export * from './Fileinput.js'; export * from './Indicator.js'; export * from './Input.js'; +export * from './Label.js'; export * from './List.js'; export * from './Loading.js'; export * from './Menu.js'; @@ -80,6 +82,7 @@ const Components = { ...FileinputModule, ...IndicatorModule, ...InputModule, + ...LabelModule, ...ListModule, ...LoadingModule, ...MenuModule, diff --git a/src/components_OLD/Accordion.js b/src/components_OLD/Accordion.js new file mode 100644 index 0000000..5c7d0d3 --- /dev/null +++ b/src/components_OLD/Accordion.js @@ -0,0 +1,24 @@ +import { $html } from "sigpro"; +import { joinClass } from "../core/utils.js"; + +/** ACCORDION */ +export const Accordion = (props, children) => { + const { title, name, open, ...rest } = props; + + return $html( + "div", + { + ...rest, + class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class), + }, + [ + $html("input", { + type: name ? "radio" : "checkbox", + name: name, + checked: open + }), + $html("div", { class: "collapse-title text-xl font-medium" }, title), + $html("div", { class: "collapse-content" }, children), + ], + ); +}; diff --git a/src/components_OLD/Alert.js b/src/components_OLD/Alert.js new file mode 100644 index 0000000..2e4d69a --- /dev/null +++ b/src/components_OLD/Alert.js @@ -0,0 +1,50 @@ +import { $html } from "sigpro"; +import { val } from "../core/utils.js"; +import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js"; + +/** ALERT */ +export const Alert = (props, children) => { + const { type = "info", soft = true, ...rest } = props; + + const icons = { + info: iconInfo, + success: iconSuccess, + warning: iconWarning, + error: iconError, + }; + + const typeClass = () => { + const t = val(type); + const map = { + info: "alert-info", + success: "alert-success", + warning: "alert-warning", + error: "alert-error", + }; + return map[t] || t; + }; + + const content = children || props.message; + + return $html( + "div", + { + ...rest, + role: "alert", + class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`, + }, + [ + $html("img", { + src: icons[val(type)] || icons.info, + class: "w-4 h-4 object-contain", + alt: val(type), + }), + $html("div", { class: "flex-1" }, [ + $html("span", {}, [typeof content === "function" ? content() : content]) + ]), + props.actions ? $html("div", { class: "flex-none" }, [ + typeof props.actions === "function" ? props.actions() : props.actions + ]) : null, + ], + ); +}; diff --git a/src/ui/Autocomplete.js b/src/components_OLD/Autocomplete.js similarity index 83% rename from src/ui/Autocomplete.js rename to src/components_OLD/Autocomplete.js index 1943bde..cbe33ba 100644 --- a/src/ui/Autocomplete.js +++ b/src/components_OLD/Autocomplete.js @@ -1,11 +1,11 @@ -// components/Autocomplete.js import { $, $html, $for } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val } from "../core/utils.js"; import { tt } from "../core/i18n.js"; -import { Input } from "./Input.js"; +import { Input } from "./Input.js"; // Importamos el componente hermano +/** AUTOCOMPLETE */ export const Autocomplete = (props) => { - const { ui: uiProps, class: className, options = [], value, onSelect, label, placeholder, ...rest } = props; + const { options = [], value, onSelect, label, placeholder, ...rest } = props; const query = $(val(value) || ""); const isOpen = $(false); @@ -48,14 +48,7 @@ export const Autocomplete = (props) => { } }; - const dynamicClasses = [ - ui('autocomplete', uiProps), - className - ].filter(Boolean).join(' '); - - const containerClasses = joinClass("relative w-full", dynamicClasses); - - return $html("div", { class: containerClasses }, [ + return $html("div", { class: "relative w-full" }, [ Input({ label, placeholder: placeholder || tt("search")(), @@ -95,8 +88,8 @@ export const Autocomplete = (props) => { ]), (opt, i) => (typeof opt === "string" ? opt : opt.value) + i, ), - () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())), + () => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, "No results")), ], ), ]); -}; \ No newline at end of file +}; diff --git a/src/components_OLD/Badge.js b/src/components_OLD/Badge.js new file mode 100644 index 0000000..609e5ec --- /dev/null +++ b/src/components_OLD/Badge.js @@ -0,0 +1,6 @@ +import { $html } from "sigpro"; +import { joinClass } from "../core/utils.js"; + +/** BADGE */ +export const Badge = (props, children) => + $html("span", { ...props, class: joinClass("badge", props.class) }, children); diff --git a/src/components_OLD/Button.js b/src/components_OLD/Button.js new file mode 100644 index 0000000..d26b134 --- /dev/null +++ b/src/components_OLD/Button.js @@ -0,0 +1,37 @@ +import { $html } from "sigpro"; +import { val, joinClass } from "../core/utils.js"; + +/** BUTTON */ +export const Button = (props, children) => { + const { badge, badgeClass, tooltip, icon, loading, ...rest } = props; + + const btn = $html( + "button", + { + ...rest, + class: joinClass("btn", props.class) + }, + [ + () => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null), + icon ? $html("span", { class: "mr-1" }, icon) : null, + children, + ] + ); + + let out = btn; + + if (badge) { + out = $html("div", { class: "indicator" }, [ + $html( + "span", + { class: joinClass("indicator-item badge", badgeClass || "badge-secondary") }, + badge + ), + out, + ]); + } + + return tooltip + ? $html("div", { class: "tooltip", "data-tip": tooltip }, out) + : out; +}; diff --git a/src/ui/Checkbox.js b/src/components_OLD/Checkbox.js similarity index 54% rename from src/ui/Checkbox.js rename to src/components_OLD/Checkbox.js index 31f0eff..863cba4 100644 --- a/src/ui/Checkbox.js +++ b/src/components_OLD/Checkbox.js @@ -1,19 +1,14 @@ -// components/Checkbox.js import { $html } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val } from "../core/utils.js"; +/** CHECKBOX */ export const Checkbox = (props) => { - const { ui: uiProps, class: className, value, tooltip, toggle, label, ...rest } = props; - - const dynamicClasses = [ - ui('checkbox', uiProps), - className - ].filter(Boolean).join(' '); + const { value, tooltip, toggle, label, ...rest } = props; const checkEl = $html("input", { ...rest, type: "checkbox", - class: () => joinClass(val(toggle) ? "toggle" : "checkbox", dynamicClasses), + class: () => (val(toggle) ? "toggle" : "checkbox"), checked: value }); @@ -23,4 +18,4 @@ export const Checkbox = (props) => { ]); return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout; -}; \ No newline at end of file +}; diff --git a/src/ui/Colorpicker.js b/src/components_OLD/Colorpicker.js similarity index 87% rename from src/ui/Colorpicker.js rename to src/components_OLD/Colorpicker.js index 5a6a964..6e3f979 100644 --- a/src/ui/Colorpicker.js +++ b/src/components_OLD/Colorpicker.js @@ -1,9 +1,9 @@ -// components/Colorpicker.js import { $, $html, $if } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val } from "../core/utils.js"; +/** COLORPICKER */ export const Colorpicker = (props) => { - const { ui: uiProps, class: className, value, label, ...rest } = props; + const { value, label, ...rest } = props; const isOpen = $(false); const palette = [ @@ -19,14 +19,7 @@ export const Colorpicker = (props) => { const getColor = () => val(value) || "#000000"; - const dynamicClasses = [ - ui('colorpicker', uiProps), - className - ].filter(Boolean).join(' '); - - const containerClasses = joinClass("relative w-fit", dynamicClasses); - - return $html("div", { class: containerClasses }, [ + return $html("div", { class: "relative w-fit" }, [ $html( "button", { @@ -85,4 +78,4 @@ export const Colorpicker = (props) => { }), ), ]); -}; \ No newline at end of file +}; diff --git a/src/ui/Datepicker.js b/src/components_OLD/Datepicker.js similarity index 92% rename from src/ui/Datepicker.js rename to src/components_OLD/Datepicker.js index e999aed..91d7f11 100644 --- a/src/ui/Datepicker.js +++ b/src/components_OLD/Datepicker.js @@ -1,10 +1,17 @@ -// components/Datepicker.js import { $, $html, $if } from "sigpro"; -import { val, ui, joinClass, getIcon } from "../core/utils.js"; +import { val } from "../core/utils.js"; +import { + iconCalendar, + iconLeft, + iconRight, + iconLLeft, + iconRRight +} from "../core/icons.js"; import { Input } from "./Input.js"; +/** DATEPICKER */ export const Datepicker = (props) => { - const { ui: uiProps, class: className, value, range, label, placeholder, hour = false, ...rest } = props; + const { value, range, label, placeholder, hour = false, ...rest } = props; const isOpen = $(false); const internalDate = $(new Date()); @@ -106,20 +113,13 @@ export const Datepicker = (props) => { ]); }; - const dynamicClasses = [ - ui('datepicker', uiProps), - className - ].filter(Boolean).join(' '); - - const containerClasses = joinClass("relative w-full", dynamicClasses); - - return $html("div", { class: containerClasses }, [ + return $html("div", { class: "relative w-full" }, [ Input({ label, placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), value: displayValue, readonly: true, - icon: getIcon("lucide--calendar"), + icon: $html("img", { src: iconCalendar, class: "opacity-40" }), onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()); @@ -138,10 +138,10 @@ export const Datepicker = (props) => { $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ $html("div", { class: "flex gap-0.5" }, [ $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, - getIcon("lucide--chevrons-left") + $html("img", { src: iconLLeft, class: "opacity-40" }) ), $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, - getIcon("lucide--chevron-left") + $html("img", { src: iconLeft, class: "opacity-40" }) ), ]), $html("span", { class: "font-bold uppercase flex-1 text-center" }, [ @@ -149,10 +149,10 @@ export const Datepicker = (props) => { ]), $html("div", { class: "flex gap-0.5" }, [ $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, - getIcon("lucide--chevron-right") + $html("img", { src: iconRight, class: "opacity-40" }) ), $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, - getIcon("lucide--chevrons-right") + $html("img", { src: iconRRight, class: "opacity-40" }) ), ]), ]), @@ -249,4 +249,4 @@ export const Datepicker = (props) => { $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })), ]); -}; \ No newline at end of file +}; diff --git a/src/components_OLD/Drawer.js b/src/components_OLD/Drawer.js new file mode 100644 index 0000000..7892741 --- /dev/null +++ b/src/components_OLD/Drawer.js @@ -0,0 +1,18 @@ +import { $html } from "sigpro"; +import { joinClass } from "../core/utils.js"; + +/** DRAWER */ +export const Drawer = (props) => + $html("div", { class: joinClass("drawer", props.class) }, [ + $html("input", { + id: props.id, + type: "checkbox", + class: "drawer-toggle", + checked: props.open, + }), + $html("div", { class: "drawer-content" }, props.content), + $html("div", { class: "drawer-side" }, [ + $html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }), + $html("div", { class: "min-h-full bg-base-200 w-80" }, props.side), + ]), + ]); diff --git a/src/ui/Dropdown.js b/src/components_OLD/Dropdown.js similarity index 79% rename from src/ui/Dropdown.js rename to src/components_OLD/Dropdown.js index c6d5174..fdbbf60 100644 --- a/src/ui/Dropdown.js +++ b/src/components_OLD/Dropdown.js @@ -1,16 +1,8 @@ -// components/Dropdown.js import { $html, $for } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val } from "../core/utils.js"; export const Dropdown = (props, children) => { - const { ui: uiProps, class: className, label, icon, items, ...rest } = props; - - const dynamicClasses = [ - ui('dropdown', uiProps), - className - ].filter(Boolean).join(' '); - - const containerClasses = joinClass("dropdown", dynamicClasses); + const { label, icon, items, ...rest } = props; const renderContent = () => { if (items) { @@ -46,7 +38,7 @@ export const Dropdown = (props, children) => { return $html("div", { ...rest, - class: containerClasses, + class: () => `dropdown ${val(props.class) || ""}`, }, [ $html("div", { tabindex: 0, diff --git a/src/ui/Fab.js b/src/components_OLD/Fab.js similarity index 62% rename from src/ui/Fab.js rename to src/components_OLD/Fab.js index f9871f6..da09437 100644 --- a/src/ui/Fab.js +++ b/src/components_OLD/Fab.js @@ -1,22 +1,15 @@ -// components/Fab.js import { $html } from "sigpro"; -import { val, ui, joinClass, getIcon } from "../core/utils.js"; +import { val } from "../core/utils.js"; +/** FAB (Floating Action Button) */ export const Fab = (props) => { - const { ui: uiProps, class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props; - - const dynamicClasses = [ - ui('fab', uiProps), - className - ].filter(Boolean).join(' '); - - const containerClasses = joinClass(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, dynamicClasses); + const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props; return $html( "div", { ...rest, - class: containerClasses, + class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`, }, [ $html( @@ -27,7 +20,7 @@ export const Fab = (props) => { class: "btn btn-lg btn-circle btn-primary shadow-2xl", }, [ - icon ? getIcon(icon) : null, + icon ? (typeof icon === "function" ? icon() : icon) : null, !icon && label ? label : null ], ), @@ -45,7 +38,7 @@ export const Fab = (props) => { act.onclick?.(e); }, }, - [act.icon ? getIcon(act.icon) : act.text || ""], + [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""], ), ]), ), diff --git a/src/components_OLD/Fieldset.js b/src/components_OLD/Fieldset.js new file mode 100644 index 0000000..b3efff2 --- /dev/null +++ b/src/components_OLD/Fieldset.js @@ -0,0 +1,19 @@ +import { $html } from "sigpro"; +import { val, joinClass } from "../core/utils.js"; + +/** FIELDSET */ +export const Fieldset = (props, children) => + $html( + "fieldset", + { + ...props, + class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class), + }, + [ + () => { + const legendText = val(props.legend); + return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null; + }, + children, + ], + ); diff --git a/src/ui/Fileinput.js b/src/components_OLD/Fileinput.js similarity index 86% rename from src/ui/Fileinput.js rename to src/components_OLD/Fileinput.js index eb07d63..4c3e751 100644 --- a/src/ui/Fileinput.js +++ b/src/components_OLD/Fileinput.js @@ -1,22 +1,15 @@ -// components/Fileinput.js import { $, $html, $if, $for } from "sigpro"; -import { val, ui, joinClass, getIcon } from "../core/utils.js"; +import { iconUpload, iconClose } from "../core/icons.js"; +/** FILEINPUT */ export const Fileinput = (props) => { - const { ui: uiProps, class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props; + const { tooltip, max = 2, accept = "*", onSelect } = props; const selectedFiles = $([]); const isDragging = $(false); const error = $(null); const MAX_BYTES = max * 1024 * 1024; - const dynamicClasses = [ - ui('fileinput', uiProps), - className - ].filter(Boolean).join(' '); - - const fieldsetClasses = joinClass("fieldset w-full p-0", dynamicClasses); - const handleFiles = (files) => { const fileList = Array.from(files); error(null); @@ -37,7 +30,7 @@ export const Fileinput = (props) => { onSelect?.(updated); }; - return $html("fieldset", { ...rest, class: fieldsetClasses }, [ + return $html("fieldset", { class: "fieldset w-full p-0" }, [ $html( "div", { @@ -67,7 +60,7 @@ export const Fileinput = (props) => { }, [ $html("div", { class: "flex items-center gap-3 w-full" }, [ - getIcon("lucide--upload"), + $html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }), $html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."), $html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`), ]), @@ -109,7 +102,7 @@ export const Fileinput = (props) => { removeFile(index); }, }, - [getIcon("lucide--x")] + [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })], ), ]), (file) => file.name + file.lastModified, @@ -117,4 +110,4 @@ export const Fileinput = (props) => { ]), ), ]); -}; \ No newline at end of file +}; diff --git a/src/components_OLD/Indicator.js b/src/components_OLD/Indicator.js new file mode 100644 index 0000000..271c4b3 --- /dev/null +++ b/src/components_OLD/Indicator.js @@ -0,0 +1,8 @@ +import { $html } from "sigpro"; +import { ui } from "../core/utils.js"; + +export const Indicator = (props, children) => + $html("div", { class: "indicator" }, [ + children, + props.value && $html("span", { class: ui('badge', props.ui, props.class) }, props.value), + ]); diff --git a/src/ui/Input.js b/src/components_OLD/Input.js similarity index 60% rename from src/ui/Input.js rename to src/components_OLD/Input.js index 7b1e8bc..1dc49ff 100644 --- a/src/ui/Input.js +++ b/src/components_OLD/Input.js @@ -1,49 +1,46 @@ -// components/Input.js import { $, $html } from "sigpro"; -import { val, ui, joinClass, getIcon } from "../core/utils.js"; +import { val, joinClass } from "../core/utils.js"; import { tt } from "../core/i18n.js"; +import { + iconAbc, + iconLock, + iconCalendar, + icon123, + iconMail, + iconShow, + iconHide +} from "../core/icons.js"; +/** INPUT */ export const Input = (props) => { - const { ui: uiProps, class: className, label, tip, value, error, isSearch, icon, type = "text", ...rest } = props; + const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props; const isPassword = type === "password"; const visible = $(false); - const iconMap = { - text: "lucide--text", - password: "lucide--lock", - date: "lucide--calendar", - number: "lucide--hash", - email: "lucide--mail", - search: "lucide--search", + const iconsByType = { + text: iconAbc, + password: iconLock, + date: iconCalendar, + number: icon123, + email: iconMail, }; - const dynamicClasses = [ - ui('input', uiProps), - className - ].filter(Boolean).join(' '); - - const inputClasses = joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""); - const inputEl = $html("input", { ...rest, type: () => (isPassword ? (visible() ? "text" : "password") : type), placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "), - class: joinClass("grow order-2 focus:outline-none", dynamicClasses), + class: joinClass("grow order-2 focus:outline-none", props.class), value: value, oninput: (e) => props.oninput?.(e), disabled: () => val(props.disabled), }); - const leftIcon = icon - ? getIcon(icon) - : (iconMap[type] ? getIcon(iconMap[type]) : null); - - const passwordIcon = getIcon(visible() ? "lucide--eye-off" : "lucide--eye"); + const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null; return $html( "label", { - class: inputClasses, + class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""), }, [ leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null, @@ -60,7 +57,11 @@ export const Input = (props) => { visible(!visible()); }, }, - () => passwordIcon + () => + $html("img", { + class: "w-5 h-5", + src: visible() ? iconShow : iconHide, + }), ) : null, tip @@ -73,4 +74,4 @@ export const Input = (props) => { () => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null), ], ); -}; \ No newline at end of file +}; diff --git a/src/ui/List.js b/src/components_OLD/List.js similarity index 60% rename from src/ui/List.js rename to src/components_OLD/List.js index 91c338a..f96a60d 100644 --- a/src/ui/List.js +++ b/src/components_OLD/List.js @@ -1,25 +1,17 @@ -// components/List.js import { $html, $if, $for } from "sigpro"; -import { ui, joinClass, val } from "../core/utils.js"; +import { joinClass, val } from "../core/utils.js"; +/** LIST */ export const List = (props) => { const { - ui: uiProps, - class: className, items, header, render, keyFn = (item, index) => index, + class: className, ...rest } = props; - const dynamicClasses = [ - ui('list', uiProps), - className - ].filter(Boolean).join(' '); - - const listClasses = joinClass("list bg-base-100 rounded-box shadow-md", dynamicClasses); - const listItems = $for( items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), @@ -30,7 +22,7 @@ export const List = (props) => { "ul", { ...rest, - class: listClasses, + class: joinClass("list bg-base-100 rounded-box shadow-md", className), }, header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems ); diff --git a/src/ui/Loading.js b/src/components_OLD/Loading.js similarity index 100% rename from src/ui/Loading.js rename to src/components_OLD/Loading.js diff --git a/src/ui/Menu.js b/src/components_OLD/Menu.js similarity index 63% rename from src/ui/Menu.js rename to src/components_OLD/Menu.js index d92275a..ca93792 100644 --- a/src/ui/Menu.js +++ b/src/components_OLD/Menu.js @@ -1,17 +1,8 @@ -// components/Menu.js import { $html, $for } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val, joinClass } from "../core/utils.js"; +/** MENU */ export const Menu = (props) => { - const { ui: uiProps, class: className, items, ...rest } = props; - - const dynamicClasses = [ - ui('menu', uiProps), - className - ].filter(Boolean).join(' '); - - const menuClasses = joinClass("menu bg-base-200 rounded-box", dynamicClasses); - const renderItems = (items) => $for( () => items || [], @@ -30,5 +21,5 @@ export const Menu = (props) => { (it, i) => it.label || i, ); - return $html("ul", { ...rest, class: menuClasses }, renderItems(items)); -}; \ No newline at end of file + return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items)); +}; diff --git a/src/ui/Modal.js b/src/components_OLD/Modal.js similarity index 70% rename from src/ui/Modal.js rename to src/components_OLD/Modal.js index 1615a18..747971a 100644 --- a/src/ui/Modal.js +++ b/src/components_OLD/Modal.js @@ -1,25 +1,19 @@ -// components/Modal.js import { $html, $watch } from "sigpro"; -import { ui, val, joinClass } from "../core/utils.js"; import { tt } from "../core/i18n.js"; import { Button } from "./Button.js"; +/** MODAL REACTIVO NATIVO */ export const Modal = (props, children) => { - const { ui: uiProps, class: className, title, buttons, open, ...rest } = props; + const { title, buttons, open, ...rest } = props; const dialogRef = { current: null }; - const dynamicClasses = [ - ui('modal', uiProps), - className - ].filter(Boolean).join(' '); - - const modalClasses = joinClass("modal", dynamicClasses); - + // Sincronizamos la señal con los métodos nativos del navegador $watch(() => { const dialog = dialogRef.current; if (!dialog) return; - if (val(open)) { + if (open()) { + // Solo abrimos si no está ya abierto (evita bucles) if (!dialog.open) dialog.showModal(); } else { if (dialog.open) dialog.close(); @@ -28,14 +22,15 @@ export const Modal = (props, children) => { const close = (e) => { if (e && e.preventDefault) e.preventDefault(); - if (typeof open === "function") open(false); + open(false); }; return $html("dialog", { ...rest, ref: dialogRef, - class: modalClasses, - oncancel: () => typeof open === "function" && open(false) + class: "modal", + // Importante: Si el usuario pulsa ESC, actualizamos la señal + oncancel: () => open(false) }, [ $html("div", { class: "modal-box" }, [ title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null, @@ -47,6 +42,7 @@ export const Modal = (props, children) => { Button({ type: "button", onclick: close }, tt("close")()), ]), ]), + // Backdrop nativo que sincroniza con la señal $html("form", { method: "dialog", class: "modal-backdrop", diff --git a/src/components_OLD/Navbar.js b/src/components_OLD/Navbar.js new file mode 100644 index 0000000..3bb99fc --- /dev/null +++ b/src/components_OLD/Navbar.js @@ -0,0 +1,6 @@ +import { $html } from "sigpro"; +import { joinClass } from "../core/utils.js"; + +/** NAVBAR */ +export const Navbar = (props, children) => + $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class) }, children); diff --git a/src/components_OLD/Radio.js b/src/components_OLD/Radio.js new file mode 100644 index 0000000..8460376 --- /dev/null +++ b/src/components_OLD/Radio.js @@ -0,0 +1,25 @@ +import { $html } from "sigpro"; +import { val, joinClass } from "../core/utils.js"; + +/** RADIO */ +export const Radio = (props) => { + const { label, tooltip, value, inputValue, name, ...rest } = props; + + const radioEl = $html("input", { + ...rest, + type: "radio", + name: name, + class: joinClass("radio", props.class), + checked: () => val(value) === inputValue, + onclick: () => { + if (typeof value === "function") value(inputValue); + }, + }); + + if (!label && !tooltip) return radioEl; + + return $html("label", { class: "label cursor-pointer justify-start gap-3" }, [ + radioEl, + label ? $html("span", { class: "label-text" }, label) : null, + ]); +}; \ No newline at end of file diff --git a/src/ui/Range.js b/src/components_OLD/Range.js similarity index 58% rename from src/ui/Range.js rename to src/components_OLD/Range.js index f93457b..35d4721 100644 --- a/src/ui/Range.js +++ b/src/components_OLD/Range.js @@ -1,21 +1,14 @@ -// components/Range.js import { $html } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val, joinClass } from "../core/utils.js"; +/** RANGE */ export const Range = (props) => { - const { ui: uiProps, class: className, label, tooltip, value, ...rest } = props; - - const dynamicClasses = [ - ui('range', uiProps), - className - ].filter(Boolean).join(' '); - - const rangeClasses = joinClass("range", dynamicClasses); + const { label, tooltip, value, ...rest } = props; const rangeEl = $html("input", { ...rest, type: "range", - class: rangeClasses, + class: joinClass("range", props.class), value: value, disabled: () => val(props.disabled) }); @@ -28,4 +21,4 @@ export const Range = (props) => { ]); return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout; -}; \ No newline at end of file +}; diff --git a/src/ui/Rating.js b/src/components_OLD/Rating.js similarity index 64% rename from src/ui/Rating.js rename to src/components_OLD/Rating.js index 62c3879..d5ce564 100644 --- a/src/ui/Rating.js +++ b/src/components_OLD/Rating.js @@ -1,22 +1,16 @@ -// components/Rating.js import { $html } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val } from "../core/utils.js"; +/** RATING */ export const Rating = (props) => { - const { ui: uiProps, class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props; - - const dynamicClasses = [ - ui('rating', uiProps), - className - ].filter(Boolean).join(' '); - + const { value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props; const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`; return $html( "div", { ...rest, - class: () => joinClass(`rating ${val(readonly) ? "pointer-events-none" : ""}`, dynamicClasses), + class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`, }, Array.from({ length: val(count) }, (_, i) => { const starValue = i + 1; diff --git a/src/ui/Select.js b/src/components_OLD/Select.js similarity index 61% rename from src/ui/Select.js rename to src/components_OLD/Select.js index f16a187..f215fb3 100644 --- a/src/ui/Select.js +++ b/src/components_OLD/Select.js @@ -1,22 +1,15 @@ -// components/Select.js import { $html, $for } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val, joinClass } from "../core/utils.js"; +/** SELECT */ export const Select = (props) => { - const { ui: uiProps, class: className, label, options, value, ...rest } = props; - - const dynamicClasses = [ - ui('select', uiProps), - className - ].filter(Boolean).join(' '); - - const selectClasses = joinClass("select select-bordered w-full", dynamicClasses); + const { label, options, value, ...rest } = props; const selectEl = $html( "select", { ...rest, - class: selectClasses, + class: joinClass("select select-bordered w-full", props.class), value: value }, $for( @@ -40,4 +33,4 @@ export const Select = (props) => { $html("span", {}, label), selectEl ]); -}; \ No newline at end of file +}; diff --git a/src/components_OLD/Stack.js b/src/components_OLD/Stack.js new file mode 100644 index 0000000..6472402 --- /dev/null +++ b/src/components_OLD/Stack.js @@ -0,0 +1,6 @@ +import { $html } from "sigpro"; +import { joinClass } from "../core/utils.js"; + +/** STACK */ +export const Stack = (props, children) => + $html("div", { ...props, class: joinClass("stack", props.class) }, children); diff --git a/src/components_OLD/Stat.js b/src/components_OLD/Stat.js new file mode 100644 index 0000000..e1c5d1e --- /dev/null +++ b/src/components_OLD/Stat.js @@ -0,0 +1,11 @@ +import { $html } from "sigpro"; +import { val, joinClass } from "../core/utils.js"; + +/** STAT */ +export const Stat = (props) => + $html("div", { ...props, class: joinClass("stat", props.class) }, [ + props.icon && $html("div", { class: "stat-figure text-secondary" }, props.icon), + props.label && $html("div", { class: "stat-title" }, props.label), + $html("div", { class: "stat-value" }, () => val(props.value) ?? props.value), + props.desc && $html("div", { class: "stat-desc" }, props.desc), + ]); diff --git a/src/components_OLD/Swap.js b/src/components_OLD/Swap.js new file mode 100644 index 0000000..e8cfe04 --- /dev/null +++ b/src/components_OLD/Swap.js @@ -0,0 +1,13 @@ +import { $html } from "sigpro"; +import { joinClass } from "../core/utils.js"; + +/** SWAP */ +export const Swap = (props) => + $html("label", { class: joinClass("swap", props.class) }, [ + $html("input", { + type: "checkbox", + checked: props.value + }), + $html("div", { class: "swap-on" }, props.on), + $html("div", { class: "swap-off" }, props.off), + ]); diff --git a/src/ui/Table.js b/src/components_OLD/Table.js similarity index 86% rename from src/ui/Table.js rename to src/components_OLD/Table.js index 6943e69..aad76fe 100644 --- a/src/ui/Table.js +++ b/src/components_OLD/Table.js @@ -1,12 +1,10 @@ -// components/Table.js import { $html, $for, $if } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; +import { val, joinClass } from "../core/utils.js"; import { tt } from "../core/i18n.js"; +/** TABLE */ export const Table = (props) => { const { - ui: uiProps, - class: className, items = [], columns = [], keyFn, @@ -16,14 +14,9 @@ export const Table = (props) => { ...rest } = props; - const dynamicClasses = [ - ui('table', uiProps), - className - ].filter(Boolean).join(' '); - const tableClass = () => joinClass( "table", - `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${dynamicClasses}` + `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}` ); return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [ @@ -64,4 +57,4 @@ export const Table = (props) => { ) ]) ]); -}; \ No newline at end of file +}; diff --git a/src/components_OLD/Tabs.js b/src/components_OLD/Tabs.js new file mode 100644 index 0000000..e8ab9aa --- /dev/null +++ b/src/components_OLD/Tabs.js @@ -0,0 +1,46 @@ +import { $html, $for } from "sigpro"; +import { val, joinClass } from "../core/utils.js"; + +/** TABS */ +export const Tabs = (props) => { + const { items, ...rest } = props; + const itemsSignal = typeof items === "function" ? items : () => items || []; + + return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [ + $html( + "div", + { + role: "tablist", + class: joinClass("tabs tabs-box", props.class), + }, + $for( + itemsSignal, + (it) => + $html( + "a", + { + role: "tab", + class: () => joinClass( + "tab", + val(it.active) && "tab-active", + val(it.disabled) && "tab-disabled", + it.tip && "tooltip" + ), + "data-tip": it.tip, + onclick: (e) => !val(it.disabled) && it.onclick?.(e), + }, + it.label, + ), + (t) => t.label, + ), + ), + () => { + const active = itemsSignal().find((it) => val(it.active)); + if (!active) return null; + const content = val(active.content); + return $html("div", { class: "p-4" }, [ + typeof content === "function" ? content() : content + ]); + }, + ]); +}; diff --git a/src/ui/Timeline.js b/src/components_OLD/Timeline.js similarity index 60% rename from src/ui/Timeline.js rename to src/components_OLD/Timeline.js index 1a3e72f..0d6bab5 100644 --- a/src/ui/Timeline.js +++ b/src/components_OLD/Timeline.js @@ -1,30 +1,26 @@ -// components/Timeline.js import { $html, $for } from "sigpro"; -import { val, ui, joinClass, getIcon } from "../core/utils.js"; +import { val } from "../core/utils.js"; +import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js"; +/** TIMELINE */ export const Timeline = (props) => { - const { ui: uiProps, class: className, items = [], vertical = true, compact = false, ...rest } = props; + const { items = [], vertical = true, compact = false, ...rest } = props; - const dynamicClasses = [ - ui('timeline', uiProps), - className - ].filter(Boolean).join(' '); - - const iconMap = { - info: "lucide--info", - success: "lucide--check-circle", - warning: "lucide--alert-triangle", - error: "lucide--alert-circle", + const icons = { + info: iconInfo, + success: iconSuccess, + warning: iconWarning, + error: iconError, }; return $html( "ul", { ...rest, - class: () => joinClass( - `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, - dynamicClasses - ), + class: () => + `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${ + val(compact) ? "timeline-compact" : "" + } ${props.class || ""}`, }, [ $for( @@ -39,9 +35,11 @@ export const Timeline = (props) => { !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, $html("div", { class: "timeline-start" }, [renderSlot(item.title)]), $html("div", { class: "timeline-middle" }, [ - item.icon - ? getIcon(item.icon) - : getIcon(iconMap[itemType] || iconMap.success) + $html("img", { + src: icons[itemType] || item.icon || icons.success, + class: "w-4 h-4 object-contain mx-1", + alt: itemType, + }), ]), $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]), !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null, @@ -51,4 +49,4 @@ export const Timeline = (props) => { ), ], ); -}; \ No newline at end of file +}; diff --git a/src/ui/Toast.js b/src/components_OLD/Toast.js similarity index 87% rename from src/ui/Toast.js rename to src/components_OLD/Toast.js index 87d640a..3d82b35 100644 --- a/src/ui/Toast.js +++ b/src/components_OLD/Toast.js @@ -1,12 +1,11 @@ -// components/Toast.js import { $html, $mount } from "sigpro"; -import { getIcon } from "../core/utils.js"; import { Button } from "./Button.js"; /** TOAST (Imperative Function) */ export const Toast = (message, type = "alert-success", duration = 3500) => { let container = document.getElementById("sigpro-toast-container"); + // Crear el contenedor global si no existe if (!container) { container = $html("div", { id: "sigpro-toast-container", @@ -28,6 +27,7 @@ export const Toast = (message, type = "alert-success", duration = 3500) => { setTimeout(() => { instance.destroy(); toastHost.remove(); + // Limpiar el contenedor si ya no hay más toasts if (!container.hasChildNodes()) container.remove(); }, 300); } else { @@ -37,8 +37,6 @@ export const Toast = (message, type = "alert-success", duration = 3500) => { }; const ToastComponent = () => { - const closeIcon = getIcon("lucide--x"); - const el = $html( "div", { @@ -46,13 +44,11 @@ export const Toast = (message, type = "alert-success", duration = 3500) => { }, [ $html("span", {}, [typeof message === "function" ? message() : message]), - Button({ - class: "btn-xs btn-circle btn-ghost", - onclick: close - }, closeIcon) + Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕") ], ); + // Animación de entrada requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0")); return el; }; @@ -64,4 +60,4 @@ export const Toast = (message, type = "alert-success", duration = 3500) => { } return close; -}; \ No newline at end of file +}; diff --git a/src/components_OLD/Tooltip.js b/src/components_OLD/Tooltip.js new file mode 100644 index 0000000..29a79db --- /dev/null +++ b/src/components_OLD/Tooltip.js @@ -0,0 +1,6 @@ +import { $html } from "sigpro"; +import { joinClass } from "../core/utils.js"; + +/** TOOLTIP */ +export const Tooltip = (props, children) => + $html("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children); diff --git a/src/ui/index.js b/src/components_OLD/index.js similarity index 100% rename from src/ui/index.js rename to src/components_OLD/index.js diff --git a/src/core/icons.js b/src/core/icons.js deleted file mode 100644 index 180617b..0000000 --- a/src/core/icons.js +++ /dev/null @@ -1,17 +0,0 @@ -export const iconShow = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg=="; -export const iconHide = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC"; -export const iconClose = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg=="; -export const iconCalendar = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC"; -export const iconLock = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII="; -export const iconAbc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg=="; -export const icon123 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg=="; -export const iconMail = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC"; -export const iconInfo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC"; -export const iconSuccess = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg=="; -export const iconError = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC"; -export const iconWarning = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII="; -export const iconLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg=="; -export const iconRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg=="; -export const iconLLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg=="; -export const iconRRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII="; -export const iconUpload = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC"; diff --git a/src/core/utils.js b/src/core/utils.js index 6f94f83..1a70964 100644 --- a/src/core/utils.js +++ b/src/core/utils.js @@ -1,45 +1,36 @@ +// core/utils.js import { $html } from "sigpro"; export const val = t => typeof t === "function" ? t() : t; -export const joinClass = (t, l) => typeof l === "function" - ? () => `${t} ${l() || ""}`.trim() - : `${t} ${l || ""}`.trim(); - -export const ui = (base, str) => { - if (!str) return base; - - const parts = typeof str === 'string' ? str.split(' ') : str; - const classes = [base]; - - parts.forEach(part => { - if (part) classes.push(`${base}-${part}`); - }); - - return classes.join(' '); -}; +export const ui = (baseClass, additionalClassOrFn) => + typeof additionalClassOrFn === "function" + ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() + : `${baseClass} ${additionalClassOrFn || ""}`.trim(); export const getIcon = (icon) => { if (!icon) return null; - let position = 'left'; - let iconValue = icon; + if (typeof icon === 'function') { + return $html("span", { class: "mr-1" }, icon()); + } + + if (typeof icon === 'object') { + return $html("span", { class: "mr-1" }, icon); + } if (typeof icon === 'string') { const parts = icon.trim().split(/\s+/); - if (parts[parts.length - 1] === 'right') { - position = 'right'; - iconValue = parts.slice(0, -1).join(' '); + const hasRight = parts[parts.length - 1] === 'right'; + const iconClass = hasRight ? parts.slice(0, -1).join(' ') : icon; + const spacing = hasRight ? 'ml-1' : 'mr-1'; + + if (iconClass && !iconClass.startsWith('icon-[') && !iconClass.includes('--')) { + return $html("span", { class: spacing }, iconClass); } + + return $html("span", { class: `${iconClass} ${spacing}`.trim() }); } - const spacing = position === 'left' ? 'mr-1' : 'ml-1'; - - const element = typeof iconValue === 'string' && iconValue.includes('--') - ? $html("span", { class: `icon-[${iconValue}]` }) - : typeof iconValue === 'function' - ? iconValue() - : $html("span", {}, iconValue); - - return $html("span", { class: spacing }, element); + return null; }; \ No newline at end of file diff --git a/src/ui/Accordion.js b/src/ui/Accordion.js deleted file mode 100644 index 02304f2..0000000 --- a/src/ui/Accordion.js +++ /dev/null @@ -1,27 +0,0 @@ -// components/Accordion.js -import { $html } from "sigpro"; -import { ui, val, joinClass } from "../core/utils.js"; - -export const Accordion = (props, children) => { - const { ui: uiProps, class: className, title, name, open, ...rest } = props; - - const dynamicClasses = [ - ui('collapse', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("collapse collapse-arrow bg-base-200 mb-2", dynamicClasses); - - return $html("div", { - ...rest, - class: classes, - }, [ - $html("input", { - type: name ? "radio" : "checkbox", - name: name, - checked: val(open), - }), - $html("div", { class: "collapse-title text-xl font-medium" }, title), - $html("div", { class: "collapse-content" }, children), - ]); -}; \ No newline at end of file diff --git a/src/ui/Alert.js b/src/ui/Alert.js deleted file mode 100644 index ff98be5..0000000 --- a/src/ui/Alert.js +++ /dev/null @@ -1,55 +0,0 @@ -// components/Alert.js -import { $html } from "sigpro"; -import { ui, val, joinClass, getIcon } from "../core/utils.js"; - -export const Alert = (props, children) => { - const { ui: uiProps, class: className, type = "info", soft = true, actions, ...rest } = props; - - const dynamicClasses = [ - ui('alert', uiProps), - className - ].filter(Boolean).join(' '); - - const typeClass = () => { - const t = val(type); - const map = { - info: "alert-info", - success: "alert-success", - warning: "alert-warning", - error: "alert-error", - }; - return map[t] || t; - }; - - const softClass = () => val(soft) ? "alert-soft" : ""; - - const classes = joinClass( - ["alert", typeClass(), softClass()].filter(Boolean).join(' '), - dynamicClasses - ); - - const content = children || props.message; - - const iconMap = { - info: "lucide--info", - success: "lucide--check-circle", - warning: "lucide--alert-triangle", - error: "lucide--alert-circle", - }; - - const iconName = iconMap[val(type)] || iconMap.info; - - return $html("div", { - ...rest, - role: "alert", - class: classes, - }, [ - getIcon(iconName), - $html("div", { class: "flex-1" }, [ - $html("span", {}, [typeof content === "function" ? content() : content]) - ]), - actions ? $html("div", { class: "flex-none" }, [ - typeof actions === "function" ? actions() : actions - ]) : null, - ]); -}; \ No newline at end of file diff --git a/src/ui/Badge.js b/src/ui/Badge.js deleted file mode 100644 index d219293..0000000 --- a/src/ui/Badge.js +++ /dev/null @@ -1,16 +0,0 @@ -// components/Badge.js -import { $html } from "sigpro"; -import { ui, joinClass } from "../core/utils.js"; - -export const Badge = (props, children) => { - const { ui: uiProps, class: className, ...rest } = props; - - const dynamicClasses = [ - ui('badge', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("badge", dynamicClasses); - - return $html("span", { ...rest, class: classes }, children); -}; \ No newline at end of file diff --git a/src/ui/Button.js b/src/ui/Button.js deleted file mode 100644 index ff0e5eb..0000000 --- a/src/ui/Button.js +++ /dev/null @@ -1,28 +0,0 @@ -// components/Button.js -import { $html } from "sigpro"; -import { ui, val, getIcon, joinClass } from "../core/utils.js"; - -export const Button = (props, children) => { - const { ui: uiProps, class: className, loading, icon, ...rest } = props; - - const dynamicClasses = [ - ui('btn', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("btn", dynamicClasses); - - const iconEl = getIcon(icon); - - const content = [ - () => val(loading) && $html("span", { class: "loading loading-spinner" }), - iconEl, - children, - ].filter(Boolean); - - return $html("button", { - ...rest, - class: classes, - disabled: () => val(loading) || val(props.disabled), - }, content); -}; \ No newline at end of file diff --git a/src/ui/Drawer.js b/src/ui/Drawer.js deleted file mode 100644 index 26fa243..0000000 --- a/src/ui/Drawer.js +++ /dev/null @@ -1,28 +0,0 @@ -// components/Drawer.js -import { $html } from "sigpro"; -import { ui, val, joinClass } from "../core/utils.js"; - -export const Drawer = (props) => { - const { ui: uiProps, class: className, id, open, content, side, ...rest } = props; - - const dynamicClasses = [ - ui('drawer', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("drawer", dynamicClasses); - - return $html("div", { ...rest, class: classes }, [ - $html("input", { - id, - type: "checkbox", - class: "drawer-toggle", - checked: val(open), - }), - $html("div", { class: "drawer-content" }, content), - $html("div", { class: "drawer-side" }, [ - $html("label", { for: id, class: "drawer-overlay", onclick: () => open?.(false) }), - $html("div", { class: "min-h-full bg-base-200 w-80" }, side), - ]), - ]); -}; \ No newline at end of file diff --git a/src/ui/Fieldset.js b/src/ui/Fieldset.js deleted file mode 100644 index 97a00ac..0000000 --- a/src/ui/Fieldset.js +++ /dev/null @@ -1,29 +0,0 @@ -// components/Fieldset.js -import { $html } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; - -export const Fieldset = (props, children) => { - const { ui: uiProps, class: className, legend, ...rest } = props; - - const dynamicClasses = [ - ui('fieldset', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", dynamicClasses); - - return $html( - "fieldset", - { - ...rest, - class: classes, - }, - [ - () => { - const legendText = val(legend); - return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null; - }, - children, - ], - ); -}; \ No newline at end of file diff --git a/src/ui/Indicator.js b/src/ui/Indicator.js deleted file mode 100644 index 206f77d..0000000 --- a/src/ui/Indicator.js +++ /dev/null @@ -1,19 +0,0 @@ -// components/Indicator.js -import { $html } from "sigpro"; -import { ui, val, joinClass } from "../core/utils.js"; - -export const Indicator = (props, children) => { - const { ui: uiProps, class: className, badge, badgeClass = "badge-secondary", ...rest } = props; - - const dynamicClasses = [ - ui('indicator', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("indicator", dynamicClasses); - - return $html("div", { ...rest, class: classes }, [ - children, - badge ? $html("span", { class: joinClass("indicator-item badge", badgeClass) }, val(badge)) : null, - ]); -}; \ No newline at end of file diff --git a/src/ui/Navbar.js b/src/ui/Navbar.js deleted file mode 100644 index a75665f..0000000 --- a/src/ui/Navbar.js +++ /dev/null @@ -1,16 +0,0 @@ -// components/Navbar.js -import { $html } from "sigpro"; -import { ui, joinClass } from "../core/utils.js"; - -export const Navbar = (props, children) => { - const { ui: uiProps, class: className, ...rest } = props; - - const dynamicClasses = [ - ui('navbar', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("navbar bg-base-100 shadow-sm px-4", dynamicClasses); - - return $html("div", { ...rest, class: classes }, children); -}; \ No newline at end of file diff --git a/src/ui/Radio.js b/src/ui/Radio.js deleted file mode 100644 index b2593d5..0000000 --- a/src/ui/Radio.js +++ /dev/null @@ -1,34 +0,0 @@ -// components/Radio.js -import { $html } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; - -export const Radio = (props) => { - const { ui: uiProps, class: className, label, tooltip, value, inputValue, name, ...rest } = props; - - const dynamicClasses = [ - ui('radio', uiProps), - className - ].filter(Boolean).join(' '); - - const radioClasses = joinClass("radio", dynamicClasses); - - const radioEl = $html("input", { - ...rest, - type: "radio", - name: name, - class: radioClasses, - checked: () => val(value) === inputValue, - onclick: () => { - if (typeof value === "function") value(inputValue); - }, - }); - - if (!label && !tooltip) return radioEl; - - const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [ - radioEl, - label ? $html("span", { class: "label-text" }, label) : null, - ]); - - return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout; -}; \ No newline at end of file diff --git a/src/ui/Stack.js b/src/ui/Stack.js deleted file mode 100644 index a38ac9c..0000000 --- a/src/ui/Stack.js +++ /dev/null @@ -1,16 +0,0 @@ -// components/Stack.js -import { $html } from "sigpro"; -import { ui, joinClass } from "../core/utils.js"; - -export const Stack = (props, children) => { - const { ui: uiProps, class: className, ...rest } = props; - - const dynamicClasses = [ - ui('stack', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("stack", dynamicClasses); - - return $html("div", { ...rest, class: classes }, children); -}; \ No newline at end of file diff --git a/src/ui/Stat.js b/src/ui/Stat.js deleted file mode 100644 index e8234b6..0000000 --- a/src/ui/Stat.js +++ /dev/null @@ -1,21 +0,0 @@ -// components/Stat.js -import { $html } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; - -export const Stat = (props) => { - const { ui: uiProps, class: className, icon, label, value, desc, ...rest } = props; - - const dynamicClasses = [ - ui('stat', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("stat", dynamicClasses); - - return $html("div", { ...rest, class: classes }, [ - icon && $html("div", { class: "stat-figure text-secondary" }, icon), - label && $html("div", { class: "stat-title" }, label), - $html("div", { class: "stat-value" }, () => val(value) ?? value), - desc && $html("div", { class: "stat-desc" }, desc), - ]); -}; \ No newline at end of file diff --git a/src/ui/Swap.js b/src/ui/Swap.js deleted file mode 100644 index 369cb14..0000000 --- a/src/ui/Swap.js +++ /dev/null @@ -1,23 +0,0 @@ -// components/Swap.js -import { $html } from "sigpro"; -import { ui, val, joinClass } from "../core/utils.js"; - -export const Swap = (props) => { - const { ui: uiProps, class: className, value, on, off, ...rest } = props; - - const dynamicClasses = [ - ui('swap', uiProps), - className - ].filter(Boolean).join(' '); - - const classes = joinClass("swap", dynamicClasses); - - return $html("label", { ...rest, class: classes }, [ - $html("input", { - type: "checkbox", - checked: val(value) - }), - $html("div", { class: "swap-on" }, on), - $html("div", { class: "swap-off" }, off), - ]); -}; \ No newline at end of file diff --git a/src/ui/Tabs.js b/src/ui/Tabs.js deleted file mode 100644 index d9fa04d..0000000 --- a/src/ui/Tabs.js +++ /dev/null @@ -1,69 +0,0 @@ -// components/Tabs.js -import { $, $html, $for } from "sigpro"; -import { val, ui, joinClass } from "../core/utils.js"; - -export const Tabs = (props) => { - const { ui: uiProps, class: className, items, activeIndex = $(0), ...rest } = props; - - const dynamicClasses = [ - ui('tabs', uiProps), - className - ].filter(Boolean).join(' '); - - const tabsClasses = joinClass("tabs tabs-box", dynamicClasses); - const itemsSignal = typeof items === "function" ? items : () => items || []; - - // Si no se provee activeIndex, creamos uno interno - const internalActive = $(0); - const currentActive = activeIndex !== undefined ? activeIndex : internalActive; - - const handleTabClick = (idx, onClick) => (e) => { - if (typeof currentActive === "function") { - currentActive(idx); - } - onClick?.(e); - }; - - return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [ - $html( - "div", - { - role: "tablist", - class: tabsClasses, - }, - $for( - itemsSignal, - (it, idx) => { - const isActive = val(it.active) ?? (currentActive() === idx); - - return $html( - "a", - { - role: "tab", - class: () => joinClass( - "tab", - isActive && "tab-active", - val(it.disabled) && "tab-disabled", - it.tip && "tooltip" - ), - "data-tip": it.tip, - onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined, - }, - it.label, - ); - }, - (t, idx) => t.label + idx, - ), - ), - () => { - const activeItem = itemsSignal().find((it, idx) => - val(it.active) ?? (currentActive() === idx) - ); - if (!activeItem) return null; - const content = val(activeItem.content); - return $html("div", { class: "p-4" }, [ - typeof content === "function" ? content() : content - ]); - }, - ]); -}; \ No newline at end of file diff --git a/src/ui/Tooltip.js b/src/ui/Tooltip.js deleted file mode 100644 index e04ecac..0000000 --- a/src/ui/Tooltip.js +++ /dev/null @@ -1,19 +0,0 @@ -// components/Tooltip.js -import { $html } from "sigpro"; -import { ui, val, joinClass } from "../core/utils.js"; - -export const Tooltip = (props, children) => { - const { ui: uiProps, class: className, tip, position = "top", ...rest } = props; - - const dynamicClasses = [ - ui('tooltip', uiProps), - className - ].filter(Boolean).join(' '); - - const tipText = typeof tip === "function" ? tip() : tip; - const pos = typeof position === "function" ? position() : position; - - const classes = joinClass(`tooltip tooltip-${pos}`, dynamicClasses); - - return $html("div", { ...rest, class: classes, "data-tip": tipText }, children); -}; \ No newline at end of file