carconnect-gatherleads-ui-lib 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -37,17 +37,21 @@ npm run commit
|
|
|
37
37
|
|
|
38
38
|
## Scripts disponibles de desarrollo
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
- `npm run storybook`
|
|
40
|
+
Levanta Storybook para visualizar los componentes en desarrollo\_
|
|
42
41
|
|
|
43
|
-
|
|
44
|
-
- `npm run dev`
|
|
42
|
+
- `npm run storybook`
|
|
45
43
|
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
Inicia el entorno de desarrollo de la librería\_
|
|
45
|
+
|
|
46
|
+
- `npm run dev`
|
|
47
|
+
|
|
48
|
+
Construye la librería para producción\_
|
|
49
|
+
|
|
50
|
+
- `npm run build`
|
|
48
51
|
|
|
49
52
|
Utiliza Commitizen para generar commits estandarizados.
|
|
50
|
-
|
|
53
|
+
|
|
54
|
+
- `npm run commit`
|
|
51
55
|
|
|
52
56
|
---
|
|
53
57
|
|
|
@@ -58,4 +62,5 @@ Puedes instalar la librería desde npm:
|
|
|
58
62
|
```bash
|
|
59
63
|
npm install carconnect-gatherleads-ui-lib
|
|
60
64
|
# o con yarn
|
|
61
|
-
yarn add carconnect-gatherleads-ui-lib
|
|
65
|
+
yarn add carconnect-gatherleads-ui-lib
|
|
66
|
+
```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:JetBrains Mono,Monaco,monospace;font-feature-settings:normal;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:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.left-3{left:.75rem}.right-3{right:.75rem}.mb-4{margin-bottom:1rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-row{display:table-row}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-9{width:2.25rem;height:2.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[1\.15rem\]{height:1.15rem}.w-11{width:2.75rem}.w-4{width:1rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0px}.shrink-0{flex-shrink:0}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-bl-lg{border-bottom-left-radius:.5rem}.rounded-br-lg{border-bottom-right-radius:.5rem}.rounded-tl-lg{border-top-left-radius:.5rem}.rounded-tr-lg{border-top-right-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-danger-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-gather-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-primary-400{--tw-border-opacity: 1;border-color:rgb(74 222 128 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.border-warning-500{--tw-border-opacity: 1;border-color:rgb(245 158 11 / var(--tw-border-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-danger-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-gather-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gather-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gather-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gather-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-gather-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-primary-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.bg-secondary-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-warning-500{--tw-bg-opacity: 1;background-color:rgb(245 158 11 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-100{--tw-bg-opacity: 1;background-color:rgb(254 249 195 / var(--tw-bg-opacity, 1))}.p-2{padding:.5rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-10{padding-left:2.5rem}.pr-10{padding-right:2.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:JetBrains Mono,Monaco,monospace}.text-4xl{font-size:2.25rem}.text-base{font-size:1rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-none{line-height:1}.text-base-black{--tw-text-opacity: 1;color:rgb(22 22 22 / var(--tw-text-opacity, 1))}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-danger-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-gather-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gather-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gather-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gather-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.text-yellow-800{--tw-text-opacity: 1;color:rgb(133 77 14 / var(--tw-text-opacity, 1))}.underline-offset-4{text-underline-offset:4px}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.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)}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:1.75rem}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem}.file\:font-medium::file-selector-button{font-weight:500}.after\:ml-1:after{content:var(--tw-content);margin-left:.25rem}.after\:text-red-500:after{content:var(--tw-content);--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.after\:content-\[\'\*\'\]:after{--tw-content: "*";content:var(--tw-content)}.hover\:bg-blue-200:hover{--tw-bg-opacity: 1;background-color:rgb(191 219 254 / var(--tw-bg-opacity, 1))}.hover\:bg-danger-600:hover{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.hover\:bg-gather-blue-600:hover{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.hover\:bg-gather-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-gather-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-primary-600:hover{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.hover\:bg-red-200:hover{--tw-bg-opacity: 1;background-color:rgb(254 202 202 / var(--tw-bg-opacity, 1))}.hover\:bg-secondary-800:hover{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.hover\:bg-warning-600:hover{--tw-bg-opacity: 1;background-color:rgb(217 119 6 / var(--tw-bg-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-danger-600:focus{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}.focus\:border-gather-green-500:focus{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.focus\:border-primary-600:focus{--tw-border-opacity: 1;border-color:rgb(22 163 74 / var(--tw-border-opacity, 1))}.focus\:border-warning-600:focus{--tw-border-opacity: 1;border-color:rgb(217 119 6 / var(--tw-border-opacity, 1))}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-danger-600:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-gather-green-500:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-primary-600:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-warning-600:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(217 119 6 / var(--tw-ring-opacity, 1))}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:opacity-50{opacity:.5}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-left:.625rem;padding-right:.625rem}.has-\[\>svg\]\:px-3:has(>svg){padding-left:.75rem;padding-right:.75rem}.has-\[\>svg\]\:px-4:has(>svg){padding-left:1rem;padding-right:1rem}.data-\[state\=checked\]\:translate-x-3[data-state=checked]{--tw-translate-x: .75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-4[data-state=checked]{--tw-translate-x: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-5[data-state=checked]{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state=checked]{--tw-translate-x: calc(100% - 2px) ;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=unchecked\]\:translate-x-0\.5[data-state=unchecked]{--tw-translate-x: .125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:bg-base-black[data-state=checked]{--tw-bg-opacity: 1;background-color:rgb(22 22 22 / var(--tw-bg-opacity, 1))}.data-\[state\=unchecked\]\:bg-gather-gray-300[data-state=unchecked]{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.group[data-disabled=true] .group-data-\[disabled\=true\]\:pointer-events-none{pointer-events:none}.group[data-disabled=true] .group-data-\[disabled\=true\]\:opacity-50{opacity:.5}@media (min-width: 768px){.md\:text-sm{font-size:.875rem}}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{--tw-translate-y: 2px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\>tr\]\:last\:border-b-0:last-child>tr{border-bottom-width:0px}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:1rem;height:1rem}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-width:0px}.\[\&_tr\]\:border-b tr{border-bottom-width:1px}
|
|
1
|
+
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:JetBrains Mono,Monaco,monospace;font-feature-settings:normal;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:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width: 640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width: 768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width: 1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width: 1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width: 1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-3{left:.75rem}.right-3{right:.75rem}.top-0{top:0}.z-10{z-index:10}.mb-4{margin-bottom:1rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-row{display:table-row}.size-3{width:.75rem;height:.75rem}.size-4{width:1rem;height:1rem}.size-5{width:1.25rem;height:1.25rem}.size-9{width:2.25rem;height:2.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[1\.15rem\]{height:1.15rem}.w-1\.5{width:.375rem}.w-11{width:2.75rem}.w-4{width:1rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0px}.shrink-0{flex-shrink:0}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-bl-lg{border-bottom-left-radius:.5rem}.rounded-br-lg{border-bottom-right-radius:.5rem}.rounded-tl-lg{border-top-left-radius:.5rem}.rounded-tr-lg{border-top-right-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-danger-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-gather-gray-200,.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-green-200{--tw-border-opacity: 1;border-color:rgb(187 247 208 / var(--tw-border-opacity, 1))}.border-primary-400{--tw-border-opacity: 1;border-color:rgb(74 222 128 / var(--tw-border-opacity, 1))}.border-red-200{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.border-warning-500{--tw-border-opacity: 1;border-color:rgb(245 158 11 / var(--tw-border-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-danger-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-gather-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gather-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gather-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gather-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-gather-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-green-400,.bg-primary-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.bg-purple-100{--tw-bg-opacity: 1;background-color:rgb(243 232 255 / var(--tw-bg-opacity, 1))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.bg-red-400{--tw-bg-opacity: 1;background-color:rgb(248 113 113 / var(--tw-bg-opacity, 1))}.bg-secondary-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-warning-500{--tw-bg-opacity: 1;background-color:rgb(245 158 11 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-2{padding:.5rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-10{padding-left:2.5rem}.pr-10{padding-right:2.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:JetBrains Mono,Monaco,monospace}.text-2xl{font-size:1.5rem}.text-base{font-size:1rem}.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.font-medium{font-weight:500}.leading-none{line-height:1}.text-base-black{--tw-text-opacity: 1;color:rgb(22 22 22 / var(--tw-text-opacity, 1))}.text-base-regularBlack{--tw-text-opacity: 1;color:rgb(33 37 41 / var(--tw-text-opacity, 1))}.text-blue-700{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-danger-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-gather-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gather-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gather-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.text-purple-800{--tw-text-opacity: 1;color:rgb(107 33 168 / var(--tw-text-opacity, 1))}.text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline-offset-4{text-underline-offset:4px}.placeholder-gather-gray-400::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.placeholder-gather-gray-400::placeholder{--tw-placeholder-opacity: 1;color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))}.opacity-60{opacity:.6}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:h-7::file-selector-button{height:1.75rem}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem}.file\:font-medium::file-selector-button{font-weight:500}.after\:ml-1:after{content:var(--tw-content);margin-left:.25rem}.after\:text-red-500:after{content:var(--tw-content);--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.after\:content-\[\'\*\'\]:after{--tw-content: "*";content:var(--tw-content)}.last\:border-0:last-child{border-width:0px}.hover\:bg-danger-600:hover{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.hover\:bg-gather-blue-600:hover{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.hover\:bg-gather-gray-100:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.hover\:bg-gather-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.hover\:bg-primary-600:hover{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.hover\:bg-secondary-800:hover{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.hover\:bg-warning-600:hover{--tw-bg-opacity: 1;background-color:rgb(217 119 6 / var(--tw-bg-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-danger-600:focus{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity, 1))}.focus\:border-gather-green-500:focus{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.focus\:border-primary-600:focus{--tw-border-opacity: 1;border-color:rgb(22 163 74 / var(--tw-border-opacity, 1))}.focus\:border-warning-600:focus{--tw-border-opacity: 1;border-color:rgb(217 119 6 / var(--tw-border-opacity, 1))}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-danger-600:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-gather-green-500:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-primary-600:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity, 1))}.focus-visible\:ring-warning-600:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(217 119 6 / var(--tw-ring-opacity, 1))}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:opacity-50{opacity:.5}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-left:.625rem;padding-right:.625rem}.has-\[\>svg\]\:px-3:has(>svg){padding-left:.75rem;padding-right:.75rem}.has-\[\>svg\]\:px-4:has(>svg){padding-left:1rem;padding-right:1rem}.data-\[state\=checked\]\:translate-x-3[data-state=checked]{--tw-translate-x: .75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-4[data-state=checked]{--tw-translate-x: 1rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-5[data-state=checked]{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state=checked]{--tw-translate-x: calc(100% - 2px) ;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=unchecked\]\:translate-x-0\.5[data-state=unchecked]{--tw-translate-x: .125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.data-\[state\=checked\]\:bg-base-black[data-state=checked]{--tw-bg-opacity: 1;background-color:rgb(22 22 22 / var(--tw-bg-opacity, 1))}.data-\[state\=unchecked\]\:bg-gather-gray-300[data-state=unchecked]{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.group[data-disabled=true] .group-data-\[disabled\=true\]\:pointer-events-none{pointer-events:none}.group[data-disabled=true] .group-data-\[disabled\=true\]\:opacity-50{opacity:.5}@media (min-width: 768px){.md\:text-sm{font-size:.875rem}}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{--tw-translate-y: 2px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\[\&\>tr\]\:last\:border-b-0:last-child>tr{border-bottom-width:0px}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:1rem;height:1rem}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-width:0px}.\[\&_tr\]\:border-b tr{border-bottom-width:1px}
|
|
@@ -1,15 +1,73 @@
|
|
|
1
1
|
import { ClassProp } from 'class-variance-authority/types';
|
|
2
|
+
import { ClassValue } from 'clsx';
|
|
2
3
|
import { default as default_2 } from 'react';
|
|
4
|
+
import { Dispatch } from 'react';
|
|
3
5
|
import * as React_2 from 'react';
|
|
6
|
+
import { SetStateAction } from 'react';
|
|
4
7
|
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
5
8
|
import { VariantProps } from 'class-variance-authority';
|
|
6
9
|
|
|
7
|
-
declare
|
|
10
|
+
export declare function cn(...inputs: ClassValue[]): string;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Representa la definición de una columna dentro de la tabla.
|
|
14
|
+
*
|
|
15
|
+
* @template T - Tipo de los datos de las filas de la tabla.
|
|
16
|
+
*/
|
|
17
|
+
export declare interface Column<T = any> {
|
|
18
|
+
/**
|
|
19
|
+
* Texto que se mostrará como encabezado de la columna.
|
|
20
|
+
*/
|
|
8
21
|
label: string;
|
|
22
|
+
/**
|
|
23
|
+
* Clave del objeto `T` que se usará para obtener el valor de la celda.
|
|
24
|
+
* Puede ser también un string libre si no está directamente relacionado con `T`.
|
|
25
|
+
*/
|
|
26
|
+
key?: keyof T | string;
|
|
27
|
+
/**
|
|
28
|
+
* Alineación del contenido dentro de la columna.
|
|
29
|
+
* @default 'left'
|
|
30
|
+
*/
|
|
9
31
|
align?: 'left' | 'center' | 'right';
|
|
32
|
+
/**
|
|
33
|
+
* Clases CSS adicionales para personalizar la celda.
|
|
34
|
+
*/
|
|
10
35
|
className?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Indica si la columna es ordenable (por ejemplo, para mostrar íconos de sort).
|
|
38
|
+
*/
|
|
39
|
+
sortable?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Ancho de la columna (en `px`, `%` o `rem`).
|
|
42
|
+
* Puede ser string o número.
|
|
43
|
+
*/
|
|
44
|
+
width?: string | number;
|
|
11
45
|
}
|
|
12
46
|
|
|
47
|
+
/**
|
|
48
|
+
* Helper para crear columnas tipadas con TypeScript.
|
|
49
|
+
*
|
|
50
|
+
* @template T - Tipo de los datos de las filas de la tabla.
|
|
51
|
+
* @param columns - Arreglo de definiciones de columnas.
|
|
52
|
+
* @returns El mismo arreglo de columnas, pero con tipado fuerte.
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* interface User {
|
|
57
|
+
* id: number;
|
|
58
|
+
* name: string;
|
|
59
|
+
* email: string;
|
|
60
|
+
* }
|
|
61
|
+
*
|
|
62
|
+
* const userColumns = createTableColumns<User>([
|
|
63
|
+
* { key: 'id', label: 'ID', width: 80, align: 'center' },
|
|
64
|
+
* { key: 'name', label: 'Nombre' },
|
|
65
|
+
* { key: 'email', label: 'Correo', sortable: true },
|
|
66
|
+
* ]);
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
export declare const createTableColumns: <T>(columns: TableColumn<T>[]) => TableColumn<T>[];
|
|
70
|
+
|
|
13
71
|
export declare const GatherButton: default_2.ForwardRefExoticComponent<GatherButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
|
|
14
72
|
|
|
15
73
|
export declare interface GatherButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof gatherButtonVariants> {
|
|
@@ -60,28 +118,198 @@ declare const gatherSwitchVariants: (props?: ({
|
|
|
60
118
|
size?: "sm" | "lg" | "md" | null | undefined;
|
|
61
119
|
} & ClassProp) | undefined) => string;
|
|
62
120
|
|
|
121
|
+
/**
|
|
122
|
+
* `GatherTable` es un contenedor para tablas con soporte de:
|
|
123
|
+
* - Scroll automático (horizontal y vertical)
|
|
124
|
+
* - Detección de presencia de scroll para ajustar bordes redondeados
|
|
125
|
+
* - Integración con `GatherTableHeader` para manejar sticky headers
|
|
126
|
+
*
|
|
127
|
+
* @param props - Propiedades del componente.
|
|
128
|
+
* @param props.maxHeight - Altura máxima del contenedor de la tabla.
|
|
129
|
+
* Si se establece, puede activar scroll vertical.
|
|
130
|
+
* @param props.children - Hijos del componente (`GatherTableHeader`, `GatherTableBody`, etc).
|
|
131
|
+
* @param props.className - Clases adicionales para la tabla (`<table>`).
|
|
132
|
+
* @param ref - Referencia al elemento `<table>` interno.
|
|
133
|
+
*
|
|
134
|
+
* @returns Renderiza un contenedor `<div>` con bordes adaptativos
|
|
135
|
+
* y dentro una `<table>` con sus secciones.
|
|
136
|
+
*
|
|
137
|
+
* ---
|
|
138
|
+
* @example Uso básico:
|
|
139
|
+
* ```tsx
|
|
140
|
+
* <GatherTable maxHeight="300px">
|
|
141
|
+
* <GatherTableHeader
|
|
142
|
+
* columns={[
|
|
143
|
+
* { key: 'id', label: 'ID', sortable: true },
|
|
144
|
+
* { key: 'name', label: 'Nombre' },
|
|
145
|
+
* ]}
|
|
146
|
+
* sortConfig={{ key: 'id', direction: 'asc' }}
|
|
147
|
+
* onSort={(key) => console.log('Ordenar por:', key)}
|
|
148
|
+
* sticky
|
|
149
|
+
* />
|
|
150
|
+
*
|
|
151
|
+
* <GatherTableBody
|
|
152
|
+
* columns={[
|
|
153
|
+
* { key: 'id', label: 'ID' },
|
|
154
|
+
* { key: 'name', label: 'Nombre' },
|
|
155
|
+
* ]}
|
|
156
|
+
* data={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]}
|
|
157
|
+
* emptyMessage="No hay registros disponibles"
|
|
158
|
+
* />
|
|
159
|
+
* </GatherTable>
|
|
160
|
+
* ```
|
|
161
|
+
*/
|
|
63
162
|
export declare const GatherTable: default_2.ForwardRefExoticComponent<GatherTableProps & default_2.RefAttributes<HTMLTableElement>>;
|
|
64
163
|
|
|
65
|
-
|
|
164
|
+
/**
|
|
165
|
+
* `GatherTableBody` es un componente reutilizable para renderizar
|
|
166
|
+
* el body de una tabla con soporte para:
|
|
167
|
+
* - Estado de carga (skeleton rows)
|
|
168
|
+
* - Renderizado dinámico de filas/celdas
|
|
169
|
+
* - Mensajes vacíos
|
|
170
|
+
* - Callbacks en clic/doble clic de filas
|
|
171
|
+
* - Estilización condicional de filas y celdas
|
|
172
|
+
*
|
|
173
|
+
* @template T - Tipo de los elementos del arreglo de datos.
|
|
174
|
+
*
|
|
175
|
+
* @param props - Propiedades del componente.
|
|
176
|
+
* @param className - Clases CSS adicionales para el body.
|
|
177
|
+
*
|
|
178
|
+
* @param columns - Definición de columnas de la tabla.
|
|
179
|
+
* Cada columna se define con la interfaz {@link Column}:
|
|
180
|
+
* ```ts
|
|
181
|
+
* interface Column<T> {
|
|
182
|
+
* label: string; // Texto del encabezado
|
|
183
|
+
* key?: keyof T | string; // Clave para acceder al valor en la fila
|
|
184
|
+
* align?: 'left' | 'center' | 'right'; // Alineación del texto
|
|
185
|
+
* className?: string; // Clases adicionales
|
|
186
|
+
* sortable?: boolean; // Si permite ordenamiento
|
|
187
|
+
* width?: string | number; // Ancho de columna
|
|
188
|
+
* }
|
|
189
|
+
* ```
|
|
190
|
+
*
|
|
191
|
+
* @param data - Conjunto de datos a mostrar en la tabla.
|
|
192
|
+
* Cada elemento del array corresponde a una fila.
|
|
193
|
+
*
|
|
194
|
+
* @param renderCell - Función personalizada para renderizar
|
|
195
|
+
* el contenido de cada celda.
|
|
196
|
+
* Firma:
|
|
197
|
+
* ```ts
|
|
198
|
+
* (item: T, column: Column<T>, rowIndex: number, colIndex: number) => React.ReactNode
|
|
199
|
+
* ```
|
|
200
|
+
* Si no se provee, se usa un `defaultRenderCell` que obtiene el valor de `item[column.key]`.
|
|
201
|
+
*
|
|
202
|
+
* @param children - Contenido alternativo a renderizar si no hay `columns` o `data`.
|
|
203
|
+
*
|
|
204
|
+
* @param onRowClick - Callback ejecutado al hacer clic en una fila.
|
|
205
|
+
* Firma: `(row: T, rowIndex: number) => void`.
|
|
206
|
+
*
|
|
207
|
+
* @param onRowDoubleClick - Callback ejecutado al hacer doble clic en una fila.
|
|
208
|
+
* Firma: `(row: T, rowIndex: number) => void`.
|
|
209
|
+
*
|
|
210
|
+
* @param rowClassName - Función opcional que retorna clases CSS dinámicas por fila.
|
|
211
|
+
* Firma: `(row: T, rowIndex: number) => string | undefined`.
|
|
212
|
+
*
|
|
213
|
+
* @param emptyMessage - Mensaje mostrado cuando hay columnas pero `data` está vacío.
|
|
214
|
+
*
|
|
215
|
+
* @param loading - Si es `true`, muestra un estado de "skeleton loading".
|
|
216
|
+
*
|
|
217
|
+
* @param loadingRows - Número de filas "skeleton" a mostrar cuando `loading` es `true`.
|
|
218
|
+
* @default 5
|
|
219
|
+
*
|
|
220
|
+
* @param ref - Referencia al elemento nativo `<tbody>`.
|
|
221
|
+
*
|
|
222
|
+
* @returns Renderiza un `<TableBody>` con las filas correspondientes,
|
|
223
|
+
* dependiendo del estado:
|
|
224
|
+
* - **loading**: muestra skeleton rows
|
|
225
|
+
* - **data**: muestra filas reales
|
|
226
|
+
* - **sin data**: muestra `emptyMessage`
|
|
227
|
+
* - **sin columnas**: renderiza `children`
|
|
228
|
+
*
|
|
229
|
+
* ---
|
|
230
|
+
* @example Uso básico:
|
|
231
|
+
* ```tsx
|
|
232
|
+
* <GatherTableBody
|
|
233
|
+
* columns={[
|
|
234
|
+
* { key: 'id', label: 'ID', width: 80, align: 'center' },
|
|
235
|
+
* { key: 'name', label: 'Nombre' },
|
|
236
|
+
* ]}
|
|
237
|
+
* data={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]}
|
|
238
|
+
* onRowClick={(row) => console.log('Fila clickeada:', row)}
|
|
239
|
+
* emptyMessage="No hay registros disponibles"
|
|
240
|
+
* />
|
|
241
|
+
* ```
|
|
242
|
+
*/
|
|
243
|
+
export declare const GatherTableBody: <T>(props: GatherTableBodyProps<T> & {
|
|
244
|
+
ref?: default_2.Ref<HTMLTableSectionElement>;
|
|
245
|
+
}) => default_2.ReactElement;
|
|
66
246
|
|
|
67
|
-
declare interface GatherTableBodyProps<T> extends
|
|
68
|
-
|
|
247
|
+
export declare interface GatherTableBodyProps<T = any> extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
248
|
+
/**
|
|
249
|
+
* Definición de las columnas de la tabla.
|
|
250
|
+
* Cada columna se describe con un objeto `Column<T>`.
|
|
251
|
+
*/
|
|
252
|
+
columns?: Column<T>[];
|
|
253
|
+
/**
|
|
254
|
+
* Conjunto de datos a renderizar en las filas de la tabla.
|
|
255
|
+
*/
|
|
69
256
|
data?: T[];
|
|
70
|
-
|
|
257
|
+
/**
|
|
258
|
+
* Función personalizada para renderizar el contenido de una celda.
|
|
259
|
+
* Si no se proporciona, se usará un renderizador por defecto
|
|
260
|
+
* que muestra la propiedad `column.key` del objeto.
|
|
261
|
+
*/
|
|
262
|
+
renderCell?: (item: T, column: Column<T>, rowIndex: number, colIndex: number) => React.ReactNode;
|
|
263
|
+
/**
|
|
264
|
+
* Callback que se ejecuta cuando el usuario hace clic en una fila.
|
|
265
|
+
*/
|
|
266
|
+
onRowClick?: (row: T, rowIndex: number) => void;
|
|
267
|
+
/**
|
|
268
|
+
* Callback que se ejecuta cuando el usuario hace doble clic en una fila.
|
|
269
|
+
*/
|
|
270
|
+
onRowDoubleClick?: (row: T, rowIndex: number) => void;
|
|
271
|
+
/**
|
|
272
|
+
* Función para definir clases adicionales en cada fila,
|
|
273
|
+
* según el contenido de la fila o el índice.
|
|
274
|
+
*/
|
|
275
|
+
rowClassName?: (row: T, rowIndex: number) => string;
|
|
276
|
+
/**
|
|
277
|
+
* Texto que se muestra cuando no hay datos para renderizar.
|
|
278
|
+
*/
|
|
279
|
+
emptyMessage: string;
|
|
280
|
+
/**
|
|
281
|
+
* Indica si la tabla está en estado de carga.
|
|
282
|
+
* Si es `true`, se muestran filas "skeleton".
|
|
283
|
+
*/
|
|
284
|
+
loading?: boolean;
|
|
285
|
+
/**
|
|
286
|
+
* Número de filas "skeleton" a mostrar durante la carga.
|
|
287
|
+
* Por defecto es `5`.
|
|
288
|
+
*/
|
|
289
|
+
loadingRows?: number;
|
|
71
290
|
}
|
|
72
291
|
|
|
292
|
+
/**
|
|
293
|
+
* `GatherTableCaption` es un componente estilizado que envuelve a `TableCaption`
|
|
294
|
+
* (componente proveniente de la librería UI utilizada).
|
|
295
|
+
*
|
|
296
|
+
* ✅ Características:
|
|
297
|
+
* - Renderiza un elemento `<caption>` para tablas.
|
|
298
|
+
* - Aplica clases por defecto de espaciado, tipografía y color.
|
|
299
|
+
* - Permite sobrescribir o extender estilos mediante la prop `className`.
|
|
300
|
+
* - Soporta `ref` hacia el elemento HTML nativo `<caption>`.
|
|
301
|
+
*
|
|
302
|
+
*/
|
|
73
303
|
export declare const GatherTableCaption: default_2.ForwardRefExoticComponent<GatherTableCaptionProps & default_2.RefAttributes<HTMLTableCaptionElement>>;
|
|
74
304
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
isLastCol?: boolean;
|
|
84
|
-
isLastRow?: boolean;
|
|
305
|
+
/**
|
|
306
|
+
* Props para el componente `GatherTableCaption`.
|
|
307
|
+
*
|
|
308
|
+
* Extiende de las propiedades estándar de un elemento HTML `<caption>`,
|
|
309
|
+
* lo que permite pasar cualquier atributo válido para este tipo de etiqueta,
|
|
310
|
+
* como `style`, `id`, `onClick`, etc.
|
|
311
|
+
*/
|
|
312
|
+
export declare interface GatherTableCaptionProps extends default_2.HTMLAttributes<HTMLTableCaptionElement> {
|
|
85
313
|
}
|
|
86
314
|
|
|
87
315
|
export declare const GatherTableFooter: default_2.ForwardRefExoticComponent<GatherTableFooterProps & default_2.RefAttributes<HTMLTableSectionElement>>;
|
|
@@ -89,27 +317,164 @@ export declare const GatherTableFooter: default_2.ForwardRefExoticComponent<Gath
|
|
|
89
317
|
declare interface GatherTableFooterProps extends default_2.HTMLAttributes<HTMLTableSectionElement> {
|
|
90
318
|
}
|
|
91
319
|
|
|
92
|
-
|
|
93
|
-
|
|
320
|
+
/**
|
|
321
|
+
* `GatherTableHeader` es un componente reutilizable para renderizar
|
|
322
|
+
* el encabezado de una tabla.
|
|
323
|
+
* Soporta:
|
|
324
|
+
* - Columnas dinámicas
|
|
325
|
+
* - Ordenamiento (con íconos)
|
|
326
|
+
* - Posicionamiento sticky
|
|
327
|
+
* - Adaptación de esquinas según el scroll
|
|
328
|
+
*
|
|
329
|
+
* @param props - Propiedades del componente.
|
|
330
|
+
* @param columns - Definición de columnas a renderizar.
|
|
331
|
+
* @param sortConfig - Configuración de la columna y dirección de orden actual.
|
|
332
|
+
* @param onSort - Callback que se ejecuta al interactuar con una columna ordenable.
|
|
333
|
+
* @param sticky - Hace que el header se quede fijo en la parte superior.
|
|
334
|
+
* @param isScrollVertical - Ajusta bordes superiores derechos cuando hay scroll vertical.
|
|
335
|
+
* @param children - Contenido alternativo en caso de no usar `columns`.
|
|
336
|
+
* @param ref - Referencia al elemento `<thead>` renderizado.
|
|
337
|
+
*
|
|
338
|
+
* @returns Renderiza un `<TableHeader>` con una fila (`<TableRow>`) y sus columnas (`<TableHead>`).
|
|
339
|
+
* Si no se pasan `columns`, renderiza `children`.
|
|
340
|
+
*
|
|
341
|
+
* ---
|
|
342
|
+
* @example Uso básico:
|
|
343
|
+
* ```tsx
|
|
344
|
+
* <GatherTableHeader
|
|
345
|
+
* columns={[
|
|
346
|
+
* { key: 'id', label: 'ID', sortable: true },
|
|
347
|
+
* { key: 'name', label: 'Nombre' },
|
|
348
|
+
* ]}
|
|
349
|
+
* sortConfig={{ key: 'id', direction: 'asc' }}
|
|
350
|
+
* onSort={(key) => console.log('Ordenar por:', key)}
|
|
351
|
+
* sticky
|
|
352
|
+
* />
|
|
353
|
+
* ```
|
|
354
|
+
*/
|
|
94
355
|
export declare const GatherTableHeader: default_2.ForwardRefExoticComponent<GatherTableHeaderProps & default_2.RefAttributes<HTMLTableSectionElement>>;
|
|
95
356
|
|
|
96
|
-
|
|
357
|
+
/**
|
|
358
|
+
* Props para el componente `GatherTableHeader`.
|
|
359
|
+
*/
|
|
360
|
+
export declare interface GatherTableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
|
|
361
|
+
/**
|
|
362
|
+
* Definición de columnas a renderizar en el encabezado.
|
|
363
|
+
* Basadas en la interfaz {@link Column}.
|
|
364
|
+
*/
|
|
97
365
|
columns?: Column[];
|
|
366
|
+
/**
|
|
367
|
+
* Configuración de ordenamiento actual.
|
|
368
|
+
* Generalmente incluye la clave y la dirección (`asc` | `desc`).
|
|
369
|
+
*/
|
|
370
|
+
sortConfig?: SortConfig;
|
|
371
|
+
/**
|
|
372
|
+
* Callback que se dispara al hacer clic o presionar Enter/Espacio en
|
|
373
|
+
* una columna ordenable.
|
|
374
|
+
*
|
|
375
|
+
* @param key - Clave de la columna seleccionada para ordenar.
|
|
376
|
+
*/
|
|
377
|
+
onSort?: (key: string) => void;
|
|
378
|
+
/**
|
|
379
|
+
* Si es `true`, el header será sticky (se mantendrá fijo en la parte superior).
|
|
380
|
+
*/
|
|
381
|
+
sticky?: boolean;
|
|
382
|
+
/**
|
|
383
|
+
* Indica si el contenedor de la tabla tiene scroll vertical.
|
|
384
|
+
* Esto afecta las esquinas redondeadas del encabezado.
|
|
385
|
+
*/
|
|
386
|
+
isScrollVertical?: boolean;
|
|
98
387
|
}
|
|
99
388
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
389
|
+
/**
|
|
390
|
+
* Props para el componente `GatherTable`.
|
|
391
|
+
*/
|
|
392
|
+
export declare interface GatherTableProps extends React.HTMLAttributes<HTMLTableElement> {
|
|
393
|
+
/**
|
|
394
|
+
* Altura máxima de la tabla.
|
|
395
|
+
*
|
|
396
|
+
* - Si se define, se activa el scroll vertical automáticamente.
|
|
397
|
+
* - Si no se define, la tabla crece libremente en altura.
|
|
398
|
+
*
|
|
399
|
+
* Ejemplo: `"300px"`, `"50vh"`, `"20rem"`.
|
|
400
|
+
*/
|
|
401
|
+
maxHeight?: string;
|
|
104
402
|
}
|
|
105
403
|
|
|
106
|
-
|
|
404
|
+
/**
|
|
405
|
+
* Representa la configuración de ordenamiento.
|
|
406
|
+
*/
|
|
407
|
+
export declare interface SortConfig {
|
|
408
|
+
/**
|
|
409
|
+
* La clave del objeto a usar para ordenar los datos.
|
|
410
|
+
*/
|
|
411
|
+
key: string;
|
|
412
|
+
/**
|
|
413
|
+
* Dirección de la ordenación: ascendente ('asc') o descendente ('desc').
|
|
414
|
+
*/
|
|
415
|
+
direction: 'asc' | 'desc';
|
|
107
416
|
}
|
|
108
417
|
|
|
109
|
-
|
|
418
|
+
/**
|
|
419
|
+
* Alias de `Column<T>`. Se utiliza para mayor legibilidad
|
|
420
|
+
* al definir arreglos de columnas.
|
|
421
|
+
*
|
|
422
|
+
* @template T - Tipo de los datos de las filas de la tabla.
|
|
423
|
+
*/
|
|
424
|
+
export declare type TableColumn<T = any> = Column<T>;
|
|
110
425
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
426
|
+
/**
|
|
427
|
+
* Hook personalizado para manejar el ordenamiento de datos en una tabla.
|
|
428
|
+
*
|
|
429
|
+
* @template T - Tipo genérico que representa los objetos de la lista de datos.
|
|
430
|
+
*
|
|
431
|
+
* @param {T[]} data - Arreglo de datos a ordenar.
|
|
432
|
+
* @param {SortConfig} [initialSort] - Configuración inicial de ordenamiento.
|
|
433
|
+
*
|
|
434
|
+
* @returns {{
|
|
435
|
+
* sortedData: T[];
|
|
436
|
+
* sortConfig: SortConfig | undefined;
|
|
437
|
+
* handleSort: (key: string) => void;
|
|
438
|
+
* setSortConfig: React.Dispatch<React.SetStateAction<SortConfig | undefined>>;
|
|
439
|
+
* clearSort: () => void;
|
|
440
|
+
* isSorted: (key: string) => boolean;
|
|
441
|
+
* getSortDirection: (key: string) => 'asc' | 'desc' | undefined;
|
|
442
|
+
* }}
|
|
443
|
+
* Un objeto con utilidades para manejar el estado de ordenamiento:
|
|
444
|
+
*
|
|
445
|
+
* - `sortedData`: los datos ya ordenados según la configuración.
|
|
446
|
+
* - `sortConfig`: la configuración actual de ordenamiento.
|
|
447
|
+
* - `handleSort(key)`: alterna el ordenamiento por la clave dada
|
|
448
|
+
* (asc → desc → sin orden).
|
|
449
|
+
* - `setSortConfig`: establece manualmente la configuración de ordenamiento.
|
|
450
|
+
* - `clearSort`: limpia el ordenamiento y devuelve los datos en su estado original.
|
|
451
|
+
* - `isSorted(key)`: indica si la clave proporcionada es la usada para ordenar.
|
|
452
|
+
* - `getSortDirection(key)`: devuelve la dirección de ordenamiento de la clave.
|
|
453
|
+
*
|
|
454
|
+
* @example
|
|
455
|
+
* const { sortConfig, sortedData, handleSort } = useTableSort(users);
|
|
456
|
+
*
|
|
457
|
+
* <GatherTable>
|
|
458
|
+
* <GatherTableHeader
|
|
459
|
+
* columns={userColumns}
|
|
460
|
+
* onSort={handleSort}
|
|
461
|
+
* sortConfig={sortConfig}
|
|
462
|
+
* />
|
|
463
|
+
* <GatherTableBody
|
|
464
|
+
* columns={userColumns}
|
|
465
|
+
* data={sortedData}
|
|
466
|
+
* {...props}
|
|
467
|
+
* />
|
|
468
|
+
* </GatherTable>
|
|
469
|
+
*/
|
|
470
|
+
export declare const useTableSort: <T extends Record<string, any>>(data: T[], initialSort?: SortConfig) => {
|
|
471
|
+
sortedData: T[];
|
|
472
|
+
sortConfig: SortConfig | undefined;
|
|
473
|
+
handleSort: (key: string) => void;
|
|
474
|
+
setSortConfig: Dispatch<SetStateAction<SortConfig | undefined>>;
|
|
475
|
+
clearSort: () => void;
|
|
476
|
+
isSorted: (key: string) => boolean;
|
|
477
|
+
getSortDirection: (key: string) => "asc" | "desc" | undefined;
|
|
478
|
+
};
|
|
114
479
|
|
|
115
480
|
export { }
|