@seekalfred/primitives 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +950 -13
- package/dist/accordion/accordion.d.ts +107 -0
- package/dist/accordion/accordion.js +84 -0
- package/dist/accordion/accordion.js.map +1 -0
- package/dist/accordion/index.d.ts +2 -0
- package/dist/accordion/index.js +2 -0
- package/dist/alert/alert.d.ts +68 -0
- package/dist/alert/alert.js +67 -0
- package/dist/alert/alert.js.map +1 -0
- package/dist/alert/index.d.ts +2 -0
- package/dist/alert/index.js +2 -0
- package/dist/alert-dialog/alert-dialog.d.ts +53 -0
- package/dist/alert-dialog/alert-dialog.js +16 -0
- package/dist/alert-dialog/alert-dialog.js.map +1 -0
- package/dist/alert-dialog/index.d.ts +2 -0
- package/dist/alert-dialog/index.js +2 -0
- package/dist/avatar/avatar.d.ts +50 -0
- package/dist/avatar/avatar.js +91 -0
- package/dist/avatar/avatar.js.map +1 -0
- package/dist/avatar/index.d.ts +2 -0
- package/dist/avatar/index.js +2 -0
- package/dist/badge/badge.d.ts +47 -0
- package/dist/badge/badge.js +189 -0
- package/dist/badge/badge.js.map +1 -0
- package/dist/badge/index.d.ts +2 -0
- package/dist/badge/index.js +2 -0
- package/dist/breadcrumb/breadcrumb.d.ts +98 -0
- package/dist/breadcrumb/breadcrumb.js +93 -0
- package/dist/breadcrumb/breadcrumb.js.map +1 -0
- package/dist/breadcrumb/index.d.ts +2 -0
- package/dist/breadcrumb/index.js +2 -0
- package/dist/button/button.d.ts +1 -1
- package/dist/button/button.js +7 -0
- package/dist/button/button.js.map +1 -1
- package/dist/calendar/calendar.d.ts +154 -0
- package/dist/calendar/calendar.js +282 -0
- package/dist/calendar/calendar.js.map +1 -0
- package/dist/calendar/index.d.ts +2 -0
- package/dist/calendar/index.js +2 -0
- package/dist/card/card.d.ts +93 -0
- package/dist/card/card.js +105 -0
- package/dist/card/card.js.map +1 -0
- package/dist/card/index.d.ts +2 -0
- package/dist/card/index.js +2 -0
- package/dist/checkbox/checkbox.d.ts +63 -0
- package/dist/checkbox/checkbox.js +94 -0
- package/dist/checkbox/checkbox.js.map +1 -0
- package/dist/checkbox/index.d.ts +2 -0
- package/dist/checkbox/index.js +2 -0
- package/dist/dialog/dialog.d.ts +140 -0
- package/dist/dialog/dialog.js +127 -0
- package/dist/dialog/dialog.js.map +1 -0
- package/dist/dialog/index.d.ts +2 -0
- package/dist/dialog/index.js +2 -0
- package/dist/index.d.ts +30 -1
- package/dist/index.js +30 -1
- package/dist/input/index.d.ts +2 -0
- package/dist/input/index.js +2 -0
- package/dist/input/input.d.ts +64 -0
- package/dist/input/input.js +94 -0
- package/dist/input/input.js.map +1 -0
- package/dist/label/index.d.ts +2 -0
- package/dist/label/index.js +2 -0
- package/dist/label/label.d.ts +41 -0
- package/dist/label/label.js +44 -0
- package/dist/label/label.js.map +1 -0
- package/dist/lib/field-surface.js +40 -0
- package/dist/lib/field-surface.js.map +1 -0
- package/dist/lib/selection-control.js +57 -0
- package/dist/lib/selection-control.js.map +1 -0
- package/dist/menu/index.d.ts +2 -0
- package/dist/menu/index.js +2 -0
- package/dist/menu/menu.d.ts +98 -0
- package/dist/menu/menu.js +99 -0
- package/dist/menu/menu.js.map +1 -0
- package/dist/popover/index.d.ts +2 -0
- package/dist/popover/index.js +2 -0
- package/dist/popover/popover.d.ts +50 -0
- package/dist/popover/popover.js +46 -0
- package/dist/popover/popover.js.map +1 -0
- package/dist/progress/index.d.ts +2 -0
- package/dist/progress/index.js +2 -0
- package/dist/progress/progress.d.ts +82 -0
- package/dist/progress/progress.js +82 -0
- package/dist/progress/progress.js.map +1 -0
- package/dist/radio-group/index.d.ts +2 -0
- package/dist/radio-group/index.js +2 -0
- package/dist/radio-group/radio-group.d.ts +53 -0
- package/dist/radio-group/radio-group.js +65 -0
- package/dist/radio-group/radio-group.js.map +1 -0
- package/dist/scroll-area/index.d.ts +2 -0
- package/dist/scroll-area/index.js +2 -0
- package/dist/scroll-area/scroll-area.d.ts +74 -0
- package/dist/scroll-area/scroll-area.js +63 -0
- package/dist/scroll-area/scroll-area.js.map +1 -0
- package/dist/select/index.d.ts +2 -0
- package/dist/select/index.js +2 -0
- package/dist/select/select.d.ts +93 -0
- package/dist/select/select.js +132 -0
- package/dist/select/select.js.map +1 -0
- package/dist/separator/index.d.ts +2 -0
- package/dist/separator/index.js +2 -0
- package/dist/separator/separator.d.ts +42 -0
- package/dist/separator/separator.js +49 -0
- package/dist/separator/separator.js.map +1 -0
- package/dist/sheet/index.d.ts +2 -0
- package/dist/sheet/index.js +2 -0
- package/dist/sheet/sheet.d.ts +96 -0
- package/dist/sheet/sheet.js +98 -0
- package/dist/sheet/sheet.js.map +1 -0
- package/dist/skeleton/index.d.ts +2 -0
- package/dist/skeleton/index.js +2 -0
- package/dist/skeleton/skeleton.d.ts +33 -0
- package/dist/skeleton/skeleton.js +42 -0
- package/dist/skeleton/skeleton.js.map +1 -0
- package/dist/slider/index.d.ts +2 -0
- package/dist/slider/index.js +2 -0
- package/dist/slider/slider.d.ts +70 -0
- package/dist/slider/slider.js +92 -0
- package/dist/slider/slider.js.map +1 -0
- package/dist/spinner/index.d.ts +2 -0
- package/dist/spinner/index.js +2 -0
- package/dist/spinner/spinner.d.ts +75 -0
- package/dist/spinner/spinner.js +68 -0
- package/dist/spinner/spinner.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/switch/index.d.ts +2 -0
- package/dist/switch/index.js +2 -0
- package/dist/switch/switch.d.ts +50 -0
- package/dist/switch/switch.js +66 -0
- package/dist/switch/switch.js.map +1 -0
- package/dist/table/index.d.ts +2 -0
- package/dist/table/index.js +2 -0
- package/dist/table/table.d.ts +288 -0
- package/dist/table/table.js +513 -0
- package/dist/table/table.js.map +1 -0
- package/dist/tabs/index.d.ts +2 -0
- package/dist/tabs/index.js +2 -0
- package/dist/tabs/tabs.d.ts +79 -0
- package/dist/tabs/tabs.js +103 -0
- package/dist/tabs/tabs.js.map +1 -0
- package/dist/textarea/index.d.ts +2 -0
- package/dist/textarea/index.js +2 -0
- package/dist/textarea/textarea.d.ts +27 -0
- package/dist/textarea/textarea.js +37 -0
- package/dist/textarea/textarea.js.map +1 -0
- package/dist/toast/index.d.ts +2 -0
- package/dist/toast/index.js +2 -0
- package/dist/toast/toast.d.ts +93 -0
- package/dist/toast/toast.js +145 -0
- package/dist/toast/toast.js.map +1 -0
- package/dist/tooltip/index.d.ts +2 -0
- package/dist/tooltip/index.js +2 -0
- package/dist/tooltip/tooltip.d.ts +70 -0
- package/dist/tooltip/tooltip.js +65 -0
- package/dist/tooltip/tooltip.js.map +1 -0
- package/package.json +125 -7
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@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-border-style:solid;--tw-font-weight: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-outline-style:solid;--tw-duration:initial;--tw-ease:initial}}}@layer alfred.reset,alfred.tokens,alfred.components.primitives,alfred.components.patterns,alfred.components.charts,alfred.components.ai;@layer alfred.utilities.primitives{.invisible{visibility:hidden}.visible{visibility:visible}.fixed{position:fixed}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-\(--density-control-h-md\){width:var(--density-control-h-md);height:var(--density-control-h-md)}.h-\(--density-control-h-lg\){height:var(--density-control-h-lg)}.h-\(--density-control-h-md\){height:var(--density-control-h-md)}.h-\(--density-control-h-sm\){height:var(--density-control-h-sm)}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\(--density-control-gap\){gap:var(--density-control-gap)}.rounded-md{border-radius:var(--radius-md,.75rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\(length\:--border-width\){border-style:var(--tw-border-style);border-width:var(--border-width)}.border-primary-strong{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-transparent{border-color:#0000}.bg-background{background-color:var(--color-background,var(--alfred-white))}.bg-destructive{background-color:var(--color-destructive,var(--alfred-danger-600))}.bg-primary,.bg-primary\/90{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/90{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 90%, transparent)}}.bg-secondary{background-color:var(--color-secondary,var(--alfred-periwinkle-400))}.bg-transparent{background-color:#0000}.px-\(--density-control-pad-lg\){padding-inline:var(--density-control-pad-lg)}.px-\(--density-control-pad-md\){padding-inline:var(--density-control-pad-md)}.px-\(--density-control-pad-sm\){padding-inline:var(--density-control-pad-sm)}.px-0{padding-inline:0}.font-sans{font-family:var(--font-sans,"Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif)}.text-base{font-size:var(--text-base,1rem)}.text-lg{font-size:var(--text-lg,1.125rem)}.text-sm{font-size:var(--text-sm,.875rem)}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.whitespace-nowrap{white-space:nowrap}.text-destructive-foreground{color:var(--color-destructive-foreground,var(--alfred-white))}.text-primary-foreground{color:var(--color-primary-foreground,var(--alfred-ink-900))}.text-primary-strong{color:var(--color-primary-strong,var(--alfred-orange-750))}.text-secondary-foreground{color:var(--color-secondary-foreground,var(--alfred-ink-900))}.underline-offset-\(--underline-offset\){text-underline-offset:var(--underline-offset)}.shadow-surface{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[3px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + 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)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.data-\[disabled\]\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\[disabled\]\:opacity-\(--opacity-disabled\)[data-disabled]{opacity:var(--opacity-disabled)}.data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\)[data-focus-visible]{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\)[data-focus-visible]{outline-offset:var(--focus-ring-offset)}.data-\[focus-visible\]\:outline-\(--color-ring\)[data-focus-visible]{outline-color:var(--color-ring)}.data-\[hovered\]\:bg-destructive-hover[data-hovered]{background-color:var(--color-destructive-hover,var(--alfred-danger-700))}.data-\[hovered\]\:bg-muted[data-hovered]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[hovered\]\:bg-primary-hover[data-hovered]{background-color:var(--color-primary-hover,var(--alfred-orange-600))}.data-\[hovered\]\:bg-secondary-hover[data-hovered]{background-color:var(--color-secondary-hover,var(--alfred-periwinkle-500))}.data-\[hovered\]\:underline[data-hovered]{text-decoration-line:underline}.data-\[pending\]\:cursor-progress[data-pending]{cursor:progress}.data-\[pressed\]\:border-foreground[data-pressed]{border-color:var(--color-foreground,var(--alfred-ink-900))}.data-\[pressed\]\:border-primary-strong[data-pressed]{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.data-\[pressed\]\:bg-destructive-pressed[data-pressed]{background-color:var(--color-destructive-pressed,var(--alfred-danger-800))}.data-\[pressed\]\:bg-muted[data-pressed]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[pressed\]\:bg-primary-pressed[data-pressed]{background-color:var(--color-primary-pressed,var(--alfred-orange-700))}.data-\[pressed\]\:bg-secondary-pressed[data-pressed]{background-color:var(--color-secondary-pressed,var(--alfred-periwinkle-600))}.data-\[pressed\]\:underline[data-pressed]{text-decoration-line:underline}@media (prefers-reduced-motion:no-preference){.motion-safe\: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,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:duration-\(--duration-fast\){--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.motion-safe\:ease-standard{--tw-ease:var(--ease-standard,cubic-bezier(.22, .61, .36, 1));transition-timing-function:var(--ease-standard,cubic-bezier(.22, .61, .36, 1))}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\) svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}}@layer alfred.utilities.patterns,alfred.utilities.charts,alfred.utilities.ai;@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{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:"<percentage>";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:"<percentage>";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:"<length>";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-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
|
|
2
|
+
@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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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-outline-style:solid;--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-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer alfred.reset,alfred.tokens,alfred.components.primitives,alfred.components.patterns,alfred.components.charts,alfred.components.ai;@layer alfred.utilities.primitives{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.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}.static{position:static}.inset-0{inset:0}.inset-y-0{inset-block:0}.start-\(--density-control-pad-md\){inset-inline-start:var(--density-control-pad-md)}.start-2{inset-inline-start:calc(var(--spacing,.25rem) * 2)}.end-\(--density-bar-pad-x\){inset-inline-end:var(--density-bar-pad-x)}.end-\(--density-control-pad-md\){inset-inline-end:var(--density-control-pad-md)}.end-4{inset-inline-end:calc(var(--spacing,.25rem) * 4)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing,.25rem) * 4)}.bottom-\(--density-bar-pad-y\){bottom:var(--density-bar-pad-y)}.left-1\/2{left:50%}.z-50{z-index:50}.container{width:100%}@media (min-width:30rem){.container{max-width:30rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}.m-0{margin:0}.-mx-1{margin-inline:calc(var(--spacing,.25rem) * -1)}.my-1{margin-block:var(--spacing,.25rem)}.-ms-2{margin-inline-start:calc(var(--spacing,.25rem) * -2)}.ms-1{margin-inline-start:var(--spacing,.25rem)}.ms-auto{margin-inline-start:auto}.mb-1{margin-bottom:var(--spacing,.25rem)}.ml-2{margin-left:calc(var(--spacing,.25rem) * 2)}.box-border{box-sizing:border-box}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.table-column{display:table-column}.table-row{display:table-row}.size-\(--density-control-h-md\){width:var(--density-control-h-md);height:var(--density-control-h-md)}.size-\(--density-control-h-sm\){width:var(--density-control-h-sm);height:var(--density-control-h-sm)}.size-\(--icon-lg\){width:var(--icon-lg);height:var(--icon-lg)}.size-\(--icon-md\){width:var(--icon-md);height:var(--icon-md)}.size-\(--icon-sm\){width:var(--icon-sm);height:var(--icon-sm)}.size-1\.5{width:calc(var(--spacing,.25rem) * 1.5);height:calc(var(--spacing,.25rem) * 1.5)}.size-3{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.size-3\.5{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.size-4{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.size-5{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.size-6{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.size-7{width:calc(var(--spacing,.25rem) * 7);height:calc(var(--spacing,.25rem) * 7)}.size-8{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8)}.size-10{width:calc(var(--spacing,.25rem) * 10);height:calc(var(--spacing,.25rem) * 10)}.size-16{width:calc(var(--spacing,.25rem) * 16);height:calc(var(--spacing,.25rem) * 16)}.size-full{width:100%;height:100%}.h-\(--density-control-h-lg\){height:var(--density-control-h-lg)}.h-\(--density-control-h-md\){height:var(--density-control-h-md)}.h-\(--density-control-h-sm\){height:var(--density-control-h-sm)}.h-2{height:calc(var(--spacing,.25rem) * 2)}.h-4{height:calc(var(--spacing,.25rem) * 4)}.h-5{height:calc(var(--spacing,.25rem) * 5)}.h-6{height:calc(var(--spacing,.25rem) * 6)}.h-8{height:calc(var(--spacing,.25rem) * 8)}.h-9{height:calc(var(--spacing,.25rem) * 9)}.h-10{height:calc(var(--spacing,.25rem) * 10)}.h-12{height:calc(var(--spacing,.25rem) * 12)}.h-16{height:calc(var(--spacing,.25rem) * 16)}.h-64{height:calc(var(--spacing,.25rem) * 64)}.h-\[1\.15rem\]{height:1.15rem}.h-\[1px\]{height:1px}.h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.h-full{height:100%}.h-px{height:1px}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:calc(var(--spacing,.25rem) * 6)}.min-h-20{min-height:calc(var(--spacing,.25rem) * 20)}.min-h-\[80px\]{min-height:80px}.w-\(--density-control-h-sm\){width:var(--density-control-h-sm)}.w-\(--trigger-width\){width:var(--trigger-width)}.w-3\/4{width:75%}.w-8{width:calc(var(--spacing,.25rem) * 8)}.w-9{width:calc(var(--spacing,.25rem) * 9)}.w-10{width:calc(var(--spacing,.25rem) * 10)}.w-32{width:calc(var(--spacing,.25rem) * 32)}.w-72{width:calc(var(--spacing,.25rem) * 72)}.w-\[350px\]{width:350px}.w-\[min\(24rem\,calc\(100vw-2rem\)\)\]{width:min(24rem,100vw - 2rem)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-96{max-width:calc(var(--spacing,.25rem) * 96)}.max-w-128{max-width:calc(var(--spacing,.25rem) * 128)}.max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.min-w-\(--density-control-h-sm\){min-width:var(--density-control-h-sm)}.min-w-0{min-width:0}.min-w-6{min-width:calc(var(--spacing,.25rem) * 6)}.min-w-32{min-width:calc(var(--spacing,.25rem) * 32)}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[calc\(100\%-2px\)\]{--tw-translate-x:calc(100% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-3px\]{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[calc\(-50\%_-_2px\)\]{--tw-translate-y:calc(-50% - 2px);translate:var(--tw-translate-x) var(--tw-translate-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,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.animate-spin{animation:var(--animate-spin,spin .8s linear infinite)}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-y{resize:vertical}.scrollbar-thin{scrollbar-width:thin}.scrollbar-thumb-border{--tw-scrollbar-thumb:var(--color-border,var(--alfred-ink-500));scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.scrollbar-track-transparent{--tw-scrollbar-track:transparent;scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.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}.gap-\(--density-control-gap\){gap:var(--density-control-gap)}.gap-\(--density-gap\){gap:var(--density-gap)}.gap-1{gap:var(--spacing,.25rem)}.gap-1\.5{gap:calc(var(--spacing,.25rem) * 1.5)}.gap-2{gap:calc(var(--spacing,.25rem) * 2)}.gap-3{gap:calc(var(--spacing,.25rem) * 3)}.gap-4{gap:calc(var(--spacing,.25rem) * 4)}.gap-6{gap:calc(var(--spacing,.25rem) * 6)}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded-2xs{border-radius:var(--radius-2xs,.25rem)}.rounded-\[2px\]{border-radius:2px}.rounded-circle{border-radius:var(--radius-circle,50%)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg,1rem)}.rounded-md{border-radius:var(--radius-md,.75rem)}.rounded-none{border-radius:0}.rounded-pill{border-radius:var(--radius-pill,999px)}.rounded-sm{border-radius:var(--radius-sm,.5rem)}.rounded-xl{border-radius:var(--radius-xl,1.25rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\(length\:--border-width\){border-style:var(--tw-border-style);border-width:var(--border-width)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y-0{border-block-style:var(--tw-border-style);border-block-width:0}.border-s-0{border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.border-e-0{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-\(length\:--border-width\){border-top-style:var(--tw-border-style);border-top-width:var(--border-width)}.border-b-\(length\:--border-width\){border-bottom-style:var(--tw-border-style);border-bottom-width:var(--border-width)}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,var(--alfred-ink-500))}.border-destructive-strong{border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.border-destructive\/50{border-color:var(--color-destructive,var(--alfred-danger-600))}@supports (color:color-mix(in lab, red, red)){.border-destructive\/50{border-color:color-mix(in oklab, var(--color-destructive,var(--alfred-danger-600)) 50%, transparent)}}.border-info-strong{border-color:var(--color-info-strong,var(--alfred-info-700))}.border-primary{border-color:var(--color-primary,var(--alfred-orange-500))}.border-primary-strong{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-primary\/50{border-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.border-primary\/50{border-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 50%, transparent)}}.border-separator{border-color:var(--color-separator,var(--alfred-gray-150))}.border-success-strong{border-color:var(--color-success-strong,var(--alfred-success-700))}.border-transparent{border-color:#0000}.border-warning-strong{border-color:var(--color-warning-strong,var(--alfred-warning-700))}.border-s-border{border-inline-start-color:var(--color-border,var(--alfred-ink-500))}.border-e-border{border-inline-end-color:var(--color-border,var(--alfred-ink-500))}.border-t-border{border-top-color:var(--color-border,var(--alfred-ink-500))}.border-t-primary-strong{border-top-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-t-separator{border-top-color:var(--color-separator,var(--alfred-gray-150))}.border-b-border{border-bottom-color:var(--color-border,var(--alfred-ink-500))}.bg-background{background-color:var(--color-background,var(--alfred-white))}.bg-border{background-color:var(--color-border,var(--alfred-ink-500))}.bg-card{background-color:var(--color-card,var(--alfred-white))}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--color-destructive,var(--alfred-danger-600))}.bg-destructive-strong{background-color:var(--color-destructive-strong,var(--alfred-danger-600))}.bg-destructive-subtle{background-color:var(--color-destructive-subtle,var(--alfred-danger-100))}.bg-header-fill{background-color:var(--color-header-fill,var(--alfred-white-warm))}.bg-info-strong{background-color:var(--color-info-strong,var(--alfred-info-700))}.bg-info-subtle{background-color:var(--color-info-subtle,var(--alfred-info-100))}.bg-muted{background-color:var(--color-muted,var(--alfred-gray-100))}.bg-muted-foreground{background-color:var(--color-muted-foreground,var(--alfred-ink-500))}.bg-muted\/50{background-color:var(--color-muted,var(--alfred-gray-100))}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-muted,var(--alfred-gray-100)) 50%, transparent)}}.bg-primary{background-color:var(--color-primary,var(--alfred-orange-500))}.bg-primary-strong{background-color:var(--color-primary-strong,var(--alfred-orange-750))}.bg-primary-subtle{background-color:var(--color-primary-subtle,var(--alfred-orange-50))}.bg-primary\/20{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 20%, transparent)}}.bg-primary\/90{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/90{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 90%, transparent)}}.bg-scrim{background-color:var(--color-scrim,#02021e80)}.bg-secondary{background-color:var(--color-secondary,var(--alfred-periwinkle-400))}.bg-success-strong{background-color:var(--color-success-strong,var(--alfred-success-700))}.bg-success-subtle{background-color:var(--color-success-subtle,var(--alfred-success-100))}.bg-transparent{background-color:#0000}.bg-warning-strong{background-color:var(--color-warning-strong,var(--alfred-warning-700))}.bg-warning-subtle{background-color:var(--color-warning-subtle,var(--alfred-warning-100))}.fill-primary{fill:var(--color-primary,var(--alfred-orange-500))}.object-cover{object-fit:cover}.p-\(--density-bar-pad-x\){padding:var(--density-bar-pad-x)}.p-\(--density-control-pad-md\){padding:var(--density-control-pad-md)}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing,.25rem) * .5)}.p-1{padding:var(--spacing,.25rem)}.p-4{padding:calc(var(--spacing,.25rem) * 4)}.p-6{padding:calc(var(--spacing,.25rem) * 6)}.p-\[3px\]{padding:3px}.px-\(--density-control-pad-lg\){padding-inline:var(--density-control-pad-lg)}.px-\(--density-control-pad-md\){padding-inline:var(--density-control-pad-md)}.px-\(--density-control-pad-sm\){padding-inline:var(--density-control-pad-sm)}.px-\(--density-row-pad-x\){padding-inline:var(--density-row-pad-x)}.px-0{padding-inline:0}.px-2{padding-inline:calc(var(--spacing,.25rem) * 2)}.px-2\.5{padding-inline:calc(var(--spacing,.25rem) * 2.5)}.px-3{padding-inline:calc(var(--spacing,.25rem) * 3)}.px-4{padding-inline:calc(var(--spacing,.25rem) * 4)}.px-6{padding-inline:calc(var(--spacing,.25rem) * 6)}.py-\(--density-control-pad-md\){padding-block:var(--density-control-pad-md)}.py-\(--density-control-pad-sm\){padding-block:var(--density-control-pad-sm)}.py-\(--density-row-pad-y\){padding-block:var(--density-row-pad-y)}.py-0\.5{padding-block:calc(var(--spacing,.25rem) * .5)}.py-1{padding-block:var(--spacing,.25rem)}.py-1\.5{padding-block:calc(var(--spacing,.25rem) * 1.5)}.py-4{padding-block:calc(var(--spacing,.25rem) * 4)}.py-6{padding-block:calc(var(--spacing,.25rem) * 6)}.ps-8{padding-inline-start:calc(var(--spacing,.25rem) * 8)}.ps-\[calc\(var\(--density-control-pad-md\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-start:calc(var(--density-control-pad-md) + var(--icon-sm) + var(--density-control-gap))}.pe-2{padding-inline-end:calc(var(--spacing,.25rem) * 2)}.pe-\[calc\(var\(--density-control-pad-md\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-end:calc(var(--density-control-pad-md) + var(--icon-sm) + var(--density-control-gap))}.pb-\(--density-control-pad-md\){padding-bottom:var(--density-control-pad-md)}.pb-1{padding-bottom:var(--spacing,.25rem)}.pl-9{padding-left:calc(var(--spacing,.25rem) * 9)}.text-center{text-align:center}.text-end{text-align:end}.text-left{text-align:left}.text-start{text-align:start}.align-middle{vertical-align:middle}.font-sans{font-family:var(--font-sans,"Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif)}.text-2xs{font-size:var(--text-2xs,.6875rem)}.text-base{font-size:var(--text-base,1rem)}.text-lg{font-size:var(--text-lg,1.125rem)}.text-sm{font-size:var(--text-sm,.875rem)}.text-xs{font-size:var(--text-xs,.75rem)}.leading-\(--leading-none\){--tw-leading:var(--leading-none);line-height:var(--leading-none)}.leading-\(--leading-normal\){--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-\(--leading-snug\){--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-\(--leading-tight\){--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.leading-none{--tw-leading:var(--leading-none,1);line-height:var(--leading-none,1)}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.font-semibold{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.tracking-wide{--tw-tracking:var(--tracking-wide,.02em);letter-spacing:var(--tracking-wide,.02em)}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.text-background{color:var(--color-background,var(--alfred-white))}.text-card-foreground{color:var(--color-card-foreground,var(--alfred-ink-900))}.text-current{color:currentColor}.text-destructive-foreground{color:var(--color-destructive-foreground,var(--alfred-white))}.text-destructive-strong{color:var(--color-destructive-strong,var(--alfred-danger-600))}.text-destructive-subtle-foreground{color:var(--color-destructive-subtle-foreground,var(--alfred-danger-700))}.text-foreground{color:var(--color-foreground,var(--alfred-ink-900))}.text-info-foreground{color:var(--color-info-foreground,var(--alfred-info-700))}.text-info-strong{color:var(--color-info-strong,var(--alfred-info-700))}.text-info-strong-foreground{color:var(--color-info-strong-foreground,var(--alfred-white))}.text-muted-foreground{color:var(--color-muted-foreground,var(--alfred-ink-500))}.text-primary-foreground{color:var(--color-primary-foreground,var(--alfred-ink-900))}.text-primary-strong{color:var(--color-primary-strong,var(--alfred-orange-750))}.text-secondary-foreground{color:var(--color-secondary-foreground,var(--alfred-ink-900))}.text-success-foreground{color:var(--color-success-foreground,var(--alfred-success-800))}.text-success-strong{color:var(--color-success-strong,var(--alfred-success-700))}.text-success-strong-foreground{color:var(--color-success-strong-foreground,var(--alfred-white))}.text-warning-foreground{color:var(--color-warning-foreground,var(--alfred-warning-800))}.text-warning-strong{color:var(--color-warning-strong,var(--alfred-warning-700))}.text-warning-strong-foreground{color:var(--color-warning-strong-foreground,var(--alfred-white))}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.underline-offset-\(--underline-offset\){text-underline-offset:var(--underline-offset)}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.shadow-floating,.shadow-md{--tw-shadow:0 8px 24px var(--tw-shadow-color,#02021e14);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-modal{--tw-shadow:0 32px 80px var(--tw-shadow-color,#02021e1f);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 2px 8px var(--tw-shadow-color,#02021e0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-surface,.shadow-xs{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring,.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-\[3px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + 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)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.outline-none{--tw-outline-style:none;outline-style:none}.outline-solid{--tw-outline-style:solid;outline-style:solid}.select-none{-webkit-user-select:none;user-select:none}.group-data-\[current\]\:hidden:is(:where(.group)[data-current] *){display:none}.group-data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\):is(:where(.group)[data-focus-visible] *){outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.group-data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\):is(:where(.group)[data-focus-visible] *){outline-offset:var(--focus-ring-offset)}.group-data-\[focus-visible\]\:outline-\(--color-ring\):is(:where(.group)[data-focus-visible] *){outline-color:var(--color-ring)}.group-data-\[focus-visible\]\:outline-solid:is(:where(.group)[data-focus-visible] *){--tw-outline-style:solid;outline-style:solid}.group-data-\[indeterminate\]\:border-primary-strong:is(:where(.group)[data-indeterminate] *){border-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[indeterminate\]\:bg-primary:is(:where(.group)[data-indeterminate] *){background-color:var(--color-primary,var(--alfred-orange-500))}.group-data-\[indeterminate\]\:text-primary-foreground:is(:where(.group)[data-indeterminate] *){color:var(--color-primary-foreground,var(--alfred-ink-900))}.group-data-\[invalid\]\:border-destructive-strong:is(:where(.group)[data-invalid] *){border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.group-data-\[selected\]\:translate-x-4:is(:where(.group)[data-selected] *){--tw-translate-x:calc(var(--spacing,.25rem) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[selected\]\:border-primary-strong:is(:where(.group)[data-selected] *){border-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[selected\]\:bg-primary:is(:where(.group)[data-selected] *){background-color:var(--color-primary,var(--alfred-orange-500))}.group-data-\[selected\]\:bg-primary-strong:is(:where(.group)[data-selected] *){background-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[selected\]\:text-primary-foreground:is(:where(.group)[data-selected] *){color:var(--color-primary-foreground,var(--alfred-ink-900))}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary,var(--alfred-orange-500))}.selection\:bg-primary::selection{background-color:var(--color-primary,var(--alfred-orange-500))}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground,var(--alfred-ink-900))}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground,var(--alfred-ink-900))}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm,.875rem)}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.file\:text-foreground::file-selector-button{color:var(--color-foreground,var(--alfred-ink-900))}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground,var(--alfred-ink-500))}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.checked\:bg-primary:checked{background-color:var(--color-primary,var(--alfred-orange-500))}@media (hover:hover){.hover\:bg-muted:hover{background-color:var(--color-muted,var(--alfred-gray-100))}}.focus-visible\:border-ring:focus-visible{border-color:var(--color-ring,var(--alfred-orange-700))}.focus-visible\:ring-2:focus-visible{--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)}.focus-visible\:outline-\(length\:--focus-ring-width\):focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-offset-\(--focus-ring-offset\):focus-visible{outline-offset:var(--focus-ring-offset)}.focus-visible\:outline-\(--color-ring\):focus-visible{outline-color:var(--color-ring)}.focus-visible\:outline-solid:focus-visible{--tw-outline-style:solid;outline-style:solid}.disabled\:pointer-events-none:disabled{pointer-events:none}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.data-\[allows-sorting\]\:cursor-pointer[data-allows-sorting]{cursor:pointer}.data-\[animation\=exiting\]\:opacity-0[data-animation=exiting]{opacity:0}.data-\[current\]\:cursor-default[data-current]{cursor:default}.data-\[current\]\:font-normal[data-current]{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}.data-\[current\]\:text-foreground[data-current]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[disabled\]\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\[disabled\]\:opacity-\(--opacity-disabled\)[data-disabled]{opacity:var(--opacity-disabled)}.data-\[dragging\]\:cursor-grabbing[data-dragging]{cursor:grabbing}.data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\)[data-focus-visible]{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\)[data-focus-visible]{outline-offset:var(--focus-ring-offset)}.data-\[focus-visible\]\:outline-\(--color-ring\)[data-focus-visible]{outline-color:var(--color-ring)}.data-\[focus-visible\]\:outline-solid[data-focus-visible]{--tw-outline-style:solid;outline-style:solid}.data-\[focused\]\:bg-muted[data-focused]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[highlighted\]\:bg-primary-subtle[data-highlighted]{background-color:var(--color-primary-subtle,var(--alfred-orange-50))}.data-\[hovered\]\:bg-destructive-hover[data-hovered]{background-color:var(--color-destructive-hover,var(--alfred-danger-700))}.data-\[hovered\]\:bg-muted[data-hovered]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[hovered\]\:bg-primary-hover[data-hovered]{background-color:var(--color-primary-hover,var(--alfred-orange-600))}.data-\[hovered\]\:bg-secondary-hover[data-hovered]{background-color:var(--color-secondary-hover,var(--alfred-periwinkle-500))}.data-\[hovered\]\:text-foreground[data-hovered]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[hovered\]\:underline[data-hovered]{text-decoration-line:underline}.data-\[hovered\]\:opacity-100[data-hovered]{opacity:1}.data-\[invalid\]\:border-destructive-strong[data-invalid]{border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.data-\[outside-month\]\:text-muted-foreground[data-outside-month]{color:var(--color-muted-foreground,var(--alfred-ink-500))}.data-\[outside-month\]\:opacity-\(--opacity-disabled\)[data-outside-month]{opacity:var(--opacity-disabled)}.data-\[pending\]\:cursor-progress[data-pending]{cursor:progress}.data-\[pressed\]\:border-foreground[data-pressed]{border-color:var(--color-foreground,var(--alfred-ink-900))}.data-\[pressed\]\:border-primary-strong[data-pressed]{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.data-\[pressed\]\:bg-destructive-pressed[data-pressed]{background-color:var(--color-destructive-pressed,var(--alfred-danger-800))}.data-\[pressed\]\:bg-muted[data-pressed]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[pressed\]\:bg-primary-pressed[data-pressed]{background-color:var(--color-primary-pressed,var(--alfred-orange-700))}.data-\[pressed\]\:bg-secondary-pressed[data-pressed]{background-color:var(--color-secondary-pressed,var(--alfred-periwinkle-600))}.data-\[pressed\]\:underline[data-pressed]{text-decoration-line:underline}.data-\[selected\]\:rounded-none[data-selected]{border-radius:0}.data-\[selected\]\:border-border[data-selected]{border-color:var(--color-border,var(--alfred-ink-500))}.data-\[selected\]\:bg-background[data-selected]{background-color:var(--color-background,var(--alfred-white))}.data-\[selected\]\:bg-muted[data-selected]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[selected\]\:bg-primary[data-selected]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selected\]\:font-semibold[data-selected]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selected\]\:text-foreground[data-selected]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[selected\]\:text-primary-foreground[data-selected]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[selected\]\:shadow-surface[data-selected]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[selection-end\]\:rounded-e-md[data-selection-end]{border-start-end-radius:var(--radius-md,.75rem);border-end-end-radius:var(--radius-md,.75rem)}.data-\[selection-end\]\:bg-primary[data-selection-end]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selection-end\]\:font-semibold[data-selection-end]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selection-end\]\:text-primary-foreground[data-selection-end]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[selection-start\]\:rounded-s-md[data-selection-start]{border-start-start-radius:var(--radius-md,.75rem);border-end-start-radius:var(--radius-md,.75rem)}.data-\[selection-start\]\:bg-primary[data-selection-start]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selection-start\]\:font-semibold[data-selection-start]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selection-start\]\:text-primary-foreground[data-selection-start]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[today\]\:font-semibold[data-today]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[today\]\:underline[data-today]{text-decoration-line:underline}.data-\[today\]\:underline-offset-4[data-today]{text-underline-offset:4px}.data-\[unavailable\]\:cursor-not-allowed[data-unavailable]{cursor:not-allowed}.data-\[unavailable\]\:text-muted-foreground[data-unavailable]{color:var(--color-muted-foreground,var(--alfred-ink-500))}.data-\[unavailable\]\:line-through[data-unavailable]{text-decoration-line:line-through}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.motion-safe\:animate-spin{animation:var(--animate-spin,spin .8s linear infinite)}.motion-safe\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\: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,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:duration-\(--duration-base\){--tw-duration:var(--duration-base);transition-duration:var(--duration-base)}.motion-safe\:duration-\(--duration-fast\){--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.motion-safe\:ease-standard{--tw-ease:var(--ease-standard,cubic-bezier(.22, .61, .36, 1));transition-timing-function:var(--ease-standard,cubic-bezier(.22, .61, .36, 1))}}@media (min-width:30rem){.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}}@media (min-width:48rem){.md\:text-sm{font-size:var(--text-sm,.875rem)}}.rtl\:-scale-x-100:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.rtl\:group-data-\[selected\]\:-translate-x-4:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.group)[data-selected] *){--tw-translate-x:calc(var(--spacing,.25rem) * -4);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[expanded\]\:\[\&_\[data-slot\=accordion-trigger\]_svg\]\:rotate-180[data-expanded] [data-slot=accordion-trigger] svg{rotate:180deg}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\]\:text-muted-foreground svg{color:var(--color-muted-foreground,var(--alfred-ink-500))}@media (prefers-reduced-motion:no-preference){.\[\&_svg\]\:motion-safe\:transition-transform svg{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.\[\&_svg\]\:motion-safe\:duration-\(--duration-fast\) svg{--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}}.\[\&_svg\]\:rtl\:-scale-x-100 svg:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\) svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing,.25rem) * 6)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing,.25rem) * 6)}.\[\&\:nth-child\(even\)\]\:bg-row-stripe:nth-child(2n){background-color:var(--color-row-stripe,var(--alfred-gray-50))}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\)>svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}.\[\&\>svg\~\*\]\:pl-7>svg~*{padding-left:calc(var(--spacing,.25rem) * 7)}}@layer alfred.utilities.patterns,alfred.utilities.charts,alfred.utilities.ai;@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-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-scrollbar-thumb{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-scrollbar-track{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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:"<percentage>";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:"<percentage>";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:"<length>";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-outline-style{syntax:"*";inherits:false;initial-value:solid}@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:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@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}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { SwitchProps } from "react-aria-components";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
//#region src/switch/switch.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Switch, ported from the legacy shadcn/Radix component onto React Aria.
|
|
6
|
+
*
|
|
7
|
+
* Census: 7 files, 16 uses. `checked` 16, `onCheckedChange` 16, `id` 9,
|
|
8
|
+
* `disabled` 7, `className` 4, `aria-label` 3.
|
|
9
|
+
*
|
|
10
|
+
* WORTH RAISING: only 3 of the 16 pass `aria-label` and 9 pass `id`. A
|
|
11
|
+
* Radix Switch renders a bare `<button role="switch">` with no text, so any
|
|
12
|
+
* use with neither has no accessible name at all. Here the label is
|
|
13
|
+
* `children`, so the common case names itself.
|
|
14
|
+
*
|
|
15
|
+
* THE COLOURS ARE NOT THE LEGACY'S, AND COULD NOT BE. The naive design --
|
|
16
|
+
* a white thumb on a `--color-primary` track -- is 2.44:1, and a white
|
|
17
|
+
* thumb on `--color-muted` is 1.13:1. Both fail WCAG 1.4.11, which is the
|
|
18
|
+
* criterion that applies to the parts of a graphic you need to see to read
|
|
19
|
+
* its state. So the track is `border` unchecked and `primary-strong`
|
|
20
|
+
* checked, which puts every pair over 3:1 in both themes (5.25 / 5.20
|
|
21
|
+
* light, 3.73 / 9.65 dark) and needs no border on the thumb.
|
|
22
|
+
*
|
|
23
|
+
* Position still carries the state as well as colour: the thumb moves.
|
|
24
|
+
* That is the non-colour cue WCAG 1.4.1 asks for.
|
|
25
|
+
*/
|
|
26
|
+
export declare const switchTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
27
|
+
export declare const switchThumbVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
28
|
+
/**
|
|
29
|
+
* A switch.
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* <Switch isSelected={on} onChange={setOn}>Email notifications</Switch>
|
|
33
|
+
* <Switch aria-label="Mute" isSelected={muted} onChange={setMuted} />
|
|
34
|
+
*/
|
|
35
|
+
interface SwitchProps$1 extends Omit<SwitchProps, "className" | "style" | "children"> {
|
|
36
|
+
/**
|
|
37
|
+
* The label, and the control's accessible name.
|
|
38
|
+
*
|
|
39
|
+
* Omit it only for a genuinely label-less switch, and pass `aria-label`
|
|
40
|
+
* instead. A Radix Switch with neither -- which the census suggests
|
|
41
|
+
* exists -- has no accessible name at all.
|
|
42
|
+
*/
|
|
43
|
+
children?: ReactNode;
|
|
44
|
+
/** Extra classes for the label. Merged last, so they win conflicts. */
|
|
45
|
+
className?: string;
|
|
46
|
+
}
|
|
47
|
+
declare function Switch$1({ className, children, ...props }: SwitchProps$1): import("react").JSX.Element;
|
|
48
|
+
//#endregion
|
|
49
|
+
export { Switch$1 as Switch, SwitchProps$1 as SwitchProps };
|
|
50
|
+
//# sourceMappingURL=switch.d.ts.map
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.js";
|
|
3
|
+
import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { Switch } from "react-aria-components";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
//#region src/switch/switch.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Switch, ported from the legacy shadcn/Radix component onto React Aria.
|
|
10
|
+
*
|
|
11
|
+
* Census: 7 files, 16 uses. `checked` 16, `onCheckedChange` 16, `id` 9,
|
|
12
|
+
* `disabled` 7, `className` 4, `aria-label` 3.
|
|
13
|
+
*
|
|
14
|
+
* WORTH RAISING: only 3 of the 16 pass `aria-label` and 9 pass `id`. A
|
|
15
|
+
* Radix Switch renders a bare `<button role="switch">` with no text, so any
|
|
16
|
+
* use with neither has no accessible name at all. Here the label is
|
|
17
|
+
* `children`, so the common case names itself.
|
|
18
|
+
*
|
|
19
|
+
* THE COLOURS ARE NOT THE LEGACY'S, AND COULD NOT BE. The naive design --
|
|
20
|
+
* a white thumb on a `--color-primary` track -- is 2.44:1, and a white
|
|
21
|
+
* thumb on `--color-muted` is 1.13:1. Both fail WCAG 1.4.11, which is the
|
|
22
|
+
* criterion that applies to the parts of a graphic you need to see to read
|
|
23
|
+
* its state. So the track is `border` unchecked and `primary-strong`
|
|
24
|
+
* checked, which puts every pair over 3:1 in both themes (5.25 / 5.20
|
|
25
|
+
* light, 3.73 / 9.65 dark) and needs no border on the thumb.
|
|
26
|
+
*
|
|
27
|
+
* Position still carries the state as well as colour: the thumb moves.
|
|
28
|
+
* That is the non-colour cue WCAG 1.4.1 asks for.
|
|
29
|
+
*/
|
|
30
|
+
const switchTrackVariants = cva([
|
|
31
|
+
"relative inline-flex h-5 w-9 shrink-0 items-center",
|
|
32
|
+
"rounded-full box-border p-0.5",
|
|
33
|
+
"bg-border",
|
|
34
|
+
"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
|
|
35
|
+
"group-data-[selected]:bg-primary-strong",
|
|
36
|
+
selectionRingVariants()
|
|
37
|
+
]);
|
|
38
|
+
const switchThumbVariants = cva([
|
|
39
|
+
"block size-4 rounded-full bg-background shadow-surface",
|
|
40
|
+
"motion-safe:transition-transform motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
|
|
41
|
+
"group-data-[selected]:translate-x-4",
|
|
42
|
+
"rtl:group-data-[selected]:-translate-x-4"
|
|
43
|
+
]);
|
|
44
|
+
function Switch$1({ className, children, ...props }) {
|
|
45
|
+
return /* @__PURE__ */ jsxs(Switch, {
|
|
46
|
+
...props,
|
|
47
|
+
"data-slot": "switch",
|
|
48
|
+
className: cn(selectionLabelVariants(), className),
|
|
49
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
50
|
+
"aria-hidden": "true",
|
|
51
|
+
"data-slot": "switch-track",
|
|
52
|
+
className: switchTrackVariants(),
|
|
53
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
54
|
+
"data-slot": "switch-thumb",
|
|
55
|
+
className: switchThumbVariants()
|
|
56
|
+
})
|
|
57
|
+
}), children == null ? null : /* @__PURE__ */ jsx("span", {
|
|
58
|
+
"data-slot": "switch-label",
|
|
59
|
+
children
|
|
60
|
+
})]
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
//#endregion
|
|
64
|
+
export { Switch$1 as Switch, switchThumbVariants, switchTrackVariants };
|
|
65
|
+
|
|
66
|
+
//# sourceMappingURL=switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"switch.js","names":["Switch","AriaSwitch"],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Switch, ported from the legacy shadcn/Radix component onto React Aria.\n *\n * Census: 7 files, 16 uses. `checked` 16, `onCheckedChange` 16, `id` 9,\n * `disabled` 7, `className` 4, `aria-label` 3.\n *\n * WORTH RAISING: only 3 of the 16 pass `aria-label` and 9 pass `id`. A\n * Radix Switch renders a bare `<button role=\"switch\">` with no text, so any\n * use with neither has no accessible name at all. Here the label is\n * `children`, so the common case names itself.\n *\n * THE COLOURS ARE NOT THE LEGACY'S, AND COULD NOT BE. The naive design --\n * a white thumb on a `--color-primary` track -- is 2.44:1, and a white\n * thumb on `--color-muted` is 1.13:1. Both fail WCAG 1.4.11, which is the\n * criterion that applies to the parts of a graphic you need to see to read\n * its state. So the track is `border` unchecked and `primary-strong`\n * checked, which puts every pair over 3:1 in both themes (5.25 / 5.20\n * light, 3.73 / 9.65 dark) and needs no border on the thumb.\n *\n * Position still carries the state as well as colour: the thumb moves.\n * That is the non-colour cue WCAG 1.4.1 asks for.\n */\nexport const switchTrackVariants = cva([\n \"relative inline-flex h-5 w-9 shrink-0 items-center\",\n \"rounded-full box-border p-0.5\",\n \"bg-border\",\n \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n \"group-data-[selected]:bg-primary-strong\",\n selectionRingVariants(),\n]);\n\nexport const switchThumbVariants = cva([\n \"block size-4 rounded-full bg-background shadow-surface\",\n // translate-x-4, not the legacy translate-x-[calc(100%-2px)]: a bracket\n // value that check:hardcoding rejects. The track is w-9 (36px) with p-0.5\n // (2px) each side and a size-4 (16px) thumb, so the travel is exactly\n // 36 - 4 - 16 = 16px.\n \"motion-safe:transition-transform motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n \"group-data-[selected]:translate-x-4\",\n // RTL: the thumb must travel the other way, or the switch reads\n // backwards. `rtl:` is a first-class Tailwind variant.\n \"rtl:group-data-[selected]:-translate-x-4\",\n]);\n\n/**\n * A switch.\n *\n * @example\n * <Switch isSelected={on} onChange={setOn}>Email notifications</Switch>\n * <Switch aria-label=\"Mute\" isSelected={muted} onChange={setMuted} />\n */\nexport interface SwitchProps extends Omit<AriaSwitchProps, \"className\" | \"style\" | \"children\"> {\n /**\n * The label, and the control's accessible name.\n *\n * Omit it only for a genuinely label-less switch, and pass `aria-label`\n * instead. A Radix Switch with neither -- which the census suggests\n * exists -- has no accessible name at all.\n */\n children?: ReactNode;\n /** Extra classes for the label. Merged last, so they win conflicts. */\n className?: string;\n}\n\nexport function Switch({ className, children, ...props }: SwitchProps) {\n return (\n <AriaSwitch\n {...props}\n data-slot=\"switch\"\n className={cn(selectionLabelVariants(), className)}\n >\n {/*\n aria-hidden: the real input already carries the state. A decorative\n track announced as well would say everything twice.\n */}\n <span aria-hidden=\"true\" data-slot=\"switch-track\" className={switchTrackVariants()}>\n <span data-slot=\"switch-thumb\" className={switchThumbVariants()} />\n </span>\n {children == null ? null : <span data-slot=\"switch-label\">{children}</span>}\n </AriaSwitch>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,sBAAsB,IAAI;CACrC;CACA;CACA;CACA;CACA;CACA,sBAAsB;AACxB,CAAC;AAED,MAAa,sBAAsB,IAAI;CACrC;CAKA;CACA;CAGA;AACF,CAAC;AAsBD,SAAgBA,SAAO,EAAE,WAAW,UAAU,GAAG,SAAsB;CACrE,OACE,qBAACC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;EAHnD,UAAA,CASE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAC/E,UAAA,oBAAC,QAAD;IAAM,aAAU;IAAe,WAAW,oBAAoB;GAAI,CAAA;EAC9D,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAgB;EAAe,CAAA,CAChE;;AAEhB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table.js";
|
|
2
|
+
export { type Column, type RowKey, Table, type TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table.js";
|
|
2
|
+
export { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants };
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import { SortDescriptor } from "react-aria-components";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
//#region src/table/table.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* Table, ported from the legacy shadcn table onto React Aria's Table.
|
|
7
|
+
*
|
|
8
|
+
* The legacy component in the product app rendered NOTHING -- its body was
|
|
9
|
+
* `return <>{children(renderProps)}</>` -- so all six of its consumers
|
|
10
|
+
* hand-built `<table>`, `tableLayout: fixed`, a `<colgroup>` and a min-width,
|
|
11
|
+
* and its config object was opt-OUT, so they wrote paragraphs of
|
|
12
|
+
* `enabled: false`. Six consumers produced six different tables. This one
|
|
13
|
+
* renders from `data` + `columns` + `getRowId`; everything else is opt-in.
|
|
14
|
+
*
|
|
15
|
+
* WIDTHS ARE CSS, and that is not a stylistic choice. React Aria's own `width`
|
|
16
|
+
* on a `<Column>` is ignored outside a `ResizableTableContainer`, and its
|
|
17
|
+
* dev-warning is dead code in 1.21.1 -- `for (let prop in ['width', ...])`
|
|
18
|
+
* iterates the INDICES, so the guard tests `'0' in props` and never fires. A
|
|
19
|
+
* width handed to React Aria disappears with no error and no console output:
|
|
20
|
+
* `width={120}` measured 42.675px in a browser. So `Column.width` is emitted
|
|
21
|
+
* as a style on the header cell, and any width puts the table into
|
|
22
|
+
* `table-layout: fixed` -- without which a declared width is only a hint.
|
|
23
|
+
*
|
|
24
|
+
* THE ROW HIGHLIGHT IS PAINTED FROM `:hover` AS WELL AS `data-[hovered]`, and
|
|
25
|
+
* that is a departure from the rule that state comes from React Aria data
|
|
26
|
+
* attributes rather than bare pseudo-classes. React Aria stamps `data-hovered`
|
|
27
|
+
* on a row ONLY when the row is interactive -- `onRowAction` or a selection
|
|
28
|
+
* mode -- exactly as it gates `Column` hover on `allowsSorting`. Four of the
|
|
29
|
+
* six legacy consumers are read-only tables that painted a hover fill, so
|
|
30
|
+
* `data-[hovered]` alone would drop their pointer affordance in silence. The
|
|
31
|
+
* rule exists because `:focus` fires on click where `data-[focus-visible]`
|
|
32
|
+
* does not; `:hover` has no such twin, and on an interactive row the two
|
|
33
|
+
* selectors match the same element with the same colour. The keyboard needs no
|
|
34
|
+
* workaround: `data-focused` IS emitted on read-only rows.
|
|
35
|
+
*
|
|
36
|
+
* `leading-*` sits on the table rather than on the cell. tailwind-merge treats
|
|
37
|
+
* a later `text-*` as owning line-height and silently strips a `leading-*`
|
|
38
|
+
* that precedes it, and the cells carry `text-start`/`text-center`/`text-end`.
|
|
39
|
+
* Line-height inherits, so putting it one level up removes the hazard instead
|
|
40
|
+
* of policing it.
|
|
41
|
+
*/
|
|
42
|
+
/**
|
|
43
|
+
* The card. Every table in the product sits in one.
|
|
44
|
+
*
|
|
45
|
+
* The edge uses `separator`, NOT `border`, and that reverses what an earlier
|
|
46
|
+
* revision of this file claimed. Measured against the running product, its card
|
|
47
|
+
* is `border border-border` resolving to #e6e6e6 -- the same hairline as the row
|
|
48
|
+
* dividers. The earlier argument was that the card edge is where WCAG 1.4.11
|
|
49
|
+
* lands; on reflection it does not. 1.4.11 covers what is needed to identify
|
|
50
|
+
* user interface COMPONENTS and their states, and a static table is not one:
|
|
51
|
+
* the interactive parts inside it -- sortable headers, pagination buttons --
|
|
52
|
+
* carry their own focus indicators and borders, which are still held to 3:1.
|
|
53
|
+
*
|
|
54
|
+
* overflow-hidden is load-bearing: the header fill runs to the table's edge and
|
|
55
|
+
* would square off the rounded corners without it.
|
|
56
|
+
*/
|
|
57
|
+
export declare const tableCardVariants: (props?: ({
|
|
58
|
+
frame?: "card" | "none" | null | undefined;
|
|
59
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
60
|
+
/** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */
|
|
61
|
+
export declare const tableScrollVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
62
|
+
export declare const tableVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
63
|
+
/**
|
|
64
|
+
* The header is near-white, not a grey band.
|
|
65
|
+
*
|
|
66
|
+
* The product fills it with its `--neutral-200`, #fffcfc: white carrying three
|
|
67
|
+
* counts of warmth in green and blue. An earlier revision of this file called
|
|
68
|
+
* that "not worth a token of its own" and used `background`, which made the
|
|
69
|
+
* header exactly the colour of the rows -- so the band vanished and the only
|
|
70
|
+
* thing separating the header was the divider under it. The difference is
|
|
71
|
+
* small on purpose; absent is not the same as small. It is `--color-header-fill`
|
|
72
|
+
* now, and it inverts properly in dark rather than being pinned to white.
|
|
73
|
+
*/
|
|
74
|
+
export declare const tableHeaderVariants: (props?: ({
|
|
75
|
+
headerFill?: "none" | "subtle" | null | undefined;
|
|
76
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
77
|
+
/** The pagination bar. A sibling of the table, never a row inside it. */
|
|
78
|
+
export declare const tablePaginationVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
79
|
+
/** The footer band. Heavier than a row rule, because it closes the table. */
|
|
80
|
+
export declare const tableFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
81
|
+
export declare const tableColumnVariants: (props?: ({
|
|
82
|
+
align?: "start" | "center" | "end" | null | undefined;
|
|
83
|
+
headerType?: "sentence" | "caps" | null | undefined;
|
|
84
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
85
|
+
export declare const tableRowVariants: (props?: ({
|
|
86
|
+
variant?: "lined" | "plain" | null | undefined;
|
|
87
|
+
striped?: boolean | null | undefined;
|
|
88
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
89
|
+
export declare const tableCellVariants: (props?: ({
|
|
90
|
+
align?: "start" | "center" | "end" | null | undefined;
|
|
91
|
+
numeric?: boolean | null | undefined;
|
|
92
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
93
|
+
/**
|
|
94
|
+
* Identity for a row.
|
|
95
|
+
*
|
|
96
|
+
* Declared here rather than imported: React's own `Key` includes `bigint`,
|
|
97
|
+
* which React Aria's collections do not accept, and importing React Aria's
|
|
98
|
+
* would leak its types through the public API for no gain. This IS the set
|
|
99
|
+
* React Aria takes.
|
|
100
|
+
*/
|
|
101
|
+
export type RowKey = string | number;
|
|
102
|
+
/** One column of a `Table`. */
|
|
103
|
+
type Column$1<T, V = unknown> = {
|
|
104
|
+
/** Stable key. Becomes the column's id and the sort descriptor's `column`. */
|
|
105
|
+
id: string;
|
|
106
|
+
/** Header content. */
|
|
107
|
+
header: ReactNode;
|
|
108
|
+
/** Pulls this column's value out of a row. */
|
|
109
|
+
accessor: (row: T) => V;
|
|
110
|
+
/**
|
|
111
|
+
* Renders the cell. Defaults to `format?.(value, row) ?? String(value)`.
|
|
112
|
+
*
|
|
113
|
+
* Method syntax, not an arrow property, and that is load-bearing. A table
|
|
114
|
+
* holds columns of DIFFERENT value types in one array, so the array element
|
|
115
|
+
* has to be `Column<T, unknown>` -- and under `strictFunctionTypes` an arrow
|
|
116
|
+
* property is contravariant in its parameters, which would make
|
|
117
|
+
* `Column<T, string>` unassignable to it. Method members are checked
|
|
118
|
+
* bivariantly, which is precisely the semantics a heterogeneous collection
|
|
119
|
+
* needs. The alternative is `Column<T, any>`, and this package has no
|
|
120
|
+
* eslint-disable in it anywhere.
|
|
121
|
+
*/
|
|
122
|
+
cell?(ctx: {
|
|
123
|
+
value: V;
|
|
124
|
+
row: T;
|
|
125
|
+
index: number;
|
|
126
|
+
}): ReactNode;
|
|
127
|
+
/**
|
|
128
|
+
* Value to string. Deliberately separate from `cell`: this is what CSV
|
|
129
|
+
* export and sort comparators consume, and a ReactNode is no use to either.
|
|
130
|
+
*/
|
|
131
|
+
format?(value: V, row: T): string;
|
|
132
|
+
/**
|
|
133
|
+
* Logical alignment, applied to BOTH the column header and its cells --
|
|
134
|
+
* React Aria keeps no link between the two, so the component owns it.
|
|
135
|
+
*/
|
|
136
|
+
align?: "start" | "center" | "end";
|
|
137
|
+
/**
|
|
138
|
+
* Column width. Any width on any column puts the table into
|
|
139
|
+
* `table-layout: fixed`.
|
|
140
|
+
*
|
|
141
|
+
* Emitted as CSS, NEVER forwarded to React Aria's own `width` prop. React
|
|
142
|
+
* Aria ignores that one outside a `ResizableTableContainer`, and its
|
|
143
|
+
* dev-warning is dead code in 1.21.1 (`for...in` over an array literal, so
|
|
144
|
+
* the guard tests `'0' in props`). A width handed to it disappears with no
|
|
145
|
+
* error and no console output.
|
|
146
|
+
*/
|
|
147
|
+
width?: number | `${number}%`;
|
|
148
|
+
/**
|
|
149
|
+
* A column of figures: tabular numerals, end-aligned unless `align` says
|
|
150
|
+
* otherwise. Ten of the product's tables set tabular figures -- the most
|
|
151
|
+
* consistently applied convention in the app. Without it, proportional
|
|
152
|
+
* digits leave a column of numbers ragged.
|
|
153
|
+
*/
|
|
154
|
+
numeric?: boolean;
|
|
155
|
+
/** Opts this column into sorting. Off by default. */
|
|
156
|
+
sortable?: boolean;
|
|
157
|
+
};
|
|
158
|
+
export interface TableProps<T> extends VariantProps<typeof tableRowVariants> {
|
|
159
|
+
/** The rows to render. */
|
|
160
|
+
data: readonly T[];
|
|
161
|
+
/** The columns, in display order. */
|
|
162
|
+
columns: readonly Column$1<T, unknown>[];
|
|
163
|
+
/** Stable identity for a row. Used as its key and to resolve `onRowAction`. */
|
|
164
|
+
getRowId: (row: T) => RowKey;
|
|
165
|
+
/**
|
|
166
|
+
* Required. React Aria's Table renders no `<caption>`, so this is the
|
|
167
|
+
* accessible name and there is no other source for it.
|
|
168
|
+
*/
|
|
169
|
+
"aria-label": string;
|
|
170
|
+
/**
|
|
171
|
+
* The sorted column and direction, CONTROLLED.
|
|
172
|
+
*
|
|
173
|
+
* Pass this and the table stops sorting: you own the row order, which is
|
|
174
|
+
* what server-side sorting needs. Leave it off and the table sorts `data`
|
|
175
|
+
* itself from `defaultSortDescriptor` and header clicks.
|
|
176
|
+
*/
|
|
177
|
+
sortDescriptor?: SortDescriptor;
|
|
178
|
+
/** The initial sort when uncontrolled. */
|
|
179
|
+
defaultSortDescriptor?: SortDescriptor;
|
|
180
|
+
/** Fires when a sortable column header is activated, controlled or not. */
|
|
181
|
+
onSortChange?: (descriptor: SortDescriptor) => void;
|
|
182
|
+
/**
|
|
183
|
+
* Fires on click or Enter. Receives the ROW, where React Aria's own handler
|
|
184
|
+
* receives a key -- every legacy consumer looked the row up again anyway.
|
|
185
|
+
*
|
|
186
|
+
* Setting it also makes rows interactive, which is what switches React
|
|
187
|
+
* Aria's `data-hovered` on.
|
|
188
|
+
*/
|
|
189
|
+
onRowAction?: (row: T) => void;
|
|
190
|
+
/**
|
|
191
|
+
* Marks a row as the viewer's own -- the product tints "Alfred AI (You)".
|
|
192
|
+
*
|
|
193
|
+
* The tint is not the message. A fill alone is WCAG 1.4.1 use-of-colour, so
|
|
194
|
+
* the highlighted row is expected to say so in its own content, the way the
|
|
195
|
+
* product's does. This tints and sets `data-highlighted`; it does not invent
|
|
196
|
+
* meaning the row does not already carry.
|
|
197
|
+
*/
|
|
198
|
+
isRowHighlighted?: (row: T) => boolean;
|
|
199
|
+
/** Extra classes per row, for styling that depends on row DATA. */
|
|
200
|
+
rowClassName?: (row: T) => string;
|
|
201
|
+
/**
|
|
202
|
+
* Rendered in place of the rows when `data` is empty.
|
|
203
|
+
*
|
|
204
|
+
* There is no default string on purpose: user-visible copy belongs in
|
|
205
|
+
* `useMessages()`, a mechanism this package does not have yet, and it is the
|
|
206
|
+
* one rule ARCHITECTURE says cannot be retrofitted.
|
|
207
|
+
*/
|
|
208
|
+
empty?: ReactNode;
|
|
209
|
+
/** Minimum table width in px. Below it the wrapper scrolls horizontally. */
|
|
210
|
+
minWidth?: number;
|
|
211
|
+
/**
|
|
212
|
+
* Rows per page. Omit it and every row renders with no pagination UI.
|
|
213
|
+
*
|
|
214
|
+
* The table holds the page itself and slices AFTER sorting, so a sort
|
|
215
|
+
* reorders the whole set rather than shuffling the current page, and lands
|
|
216
|
+
* you back on page 1.
|
|
217
|
+
*
|
|
218
|
+
* With `pageSizeOptions` this is the STARTING size and the table owns it
|
|
219
|
+
* from then on; a later change to the prop does not move a reader who has
|
|
220
|
+
* chosen their own. Without them it is simply the size.
|
|
221
|
+
*/
|
|
222
|
+
pageSize?: number;
|
|
223
|
+
/**
|
|
224
|
+
* Rows-per-page choices. Given them, the bar grows a select on its trailing
|
|
225
|
+
* side, which is the arrangement every paged table in the product uses:
|
|
226
|
+
* page numbers leading, rows-per-page trailing.
|
|
227
|
+
*/
|
|
228
|
+
pageSizeOptions?: readonly number[];
|
|
229
|
+
/** Notified after the reader picks a new size. The table has already applied it. */
|
|
230
|
+
onPageSizeChange?: (pageSize: number) => void;
|
|
231
|
+
/**
|
|
232
|
+
* Copy for the pagination controls.
|
|
233
|
+
*
|
|
234
|
+
* These carry English defaults, which is a known debt: ARCHITECTURE section
|
|
235
|
+
* 7 rule 9 routes user-visible copy through a `useMessages()` hook that does
|
|
236
|
+
* not exist in this package yet. They are props so a consumer is not stuck
|
|
237
|
+
* waiting for it, and so the eventual mechanism has somewhere to land. The
|
|
238
|
+
* navigation landmark takes its name from `aria-label` instead, which avoids
|
|
239
|
+
* inventing a fourth string.
|
|
240
|
+
*/
|
|
241
|
+
pageLabels?: {
|
|
242
|
+
previous?: string;
|
|
243
|
+
next?: string;
|
|
244
|
+
/**
|
|
245
|
+
* Accessible name for a page button.
|
|
246
|
+
*
|
|
247
|
+
* `isCurrent` exists because `aria-current` cannot reach the button.
|
|
248
|
+
* React Aria's Button runs its props through `filterDOMProps`, whose
|
|
249
|
+
* allowlist covers `id` and the labelling attributes and nothing else, so
|
|
250
|
+
* an `aria-current` handed to it is dropped with no error -- the same
|
|
251
|
+
* class of silent loss as `Column.width`. The current page therefore says
|
|
252
|
+
* so in its name, which every screen reader announces.
|
|
253
|
+
*/
|
|
254
|
+
page?: (page: number, isCurrent: boolean) => string;
|
|
255
|
+
/** Option text in the rows-per-page select. */
|
|
256
|
+
perPage?: (pageSize: number) => string;
|
|
257
|
+
/** Accessible name for the rows-per-page select itself. */
|
|
258
|
+
rowsPerPage?: string;
|
|
259
|
+
};
|
|
260
|
+
/**
|
|
261
|
+
* Whether the table draws its own card. `none` for one that already sits
|
|
262
|
+
* inside a card, or is meant to be bare on the page.
|
|
263
|
+
*/
|
|
264
|
+
frame?: "card" | "none";
|
|
265
|
+
/** Column label treatment: sentence case, or uppercase with tracking. */
|
|
266
|
+
headerType?: "sentence" | "caps";
|
|
267
|
+
/** Header background. `none` for report tables that carry no band. */
|
|
268
|
+
headerFill?: "subtle" | "none";
|
|
269
|
+
/** Zebra-stripe alternate rows. */
|
|
270
|
+
striped?: boolean;
|
|
271
|
+
/**
|
|
272
|
+
* A footer row, in a real `<tfoot>`.
|
|
273
|
+
*
|
|
274
|
+
* Called once per column; return the cell content, or null for a blank. A
|
|
275
|
+
* real footer rather than one more row of data, so it is announced as one.
|
|
276
|
+
*/
|
|
277
|
+
totalRow?: (column: Column$1<T, unknown>) => ReactNode;
|
|
278
|
+
/** Extra classes for the table. Merged last, so they win conflicts with ours. */
|
|
279
|
+
className?: string;
|
|
280
|
+
}
|
|
281
|
+
/** Builds columns that keep each column's own value type. */
|
|
282
|
+
export declare function createColumns<T>(): {
|
|
283
|
+
column: <V>(definition: Column$1<T, V>) => Column$1<T, V>;
|
|
284
|
+
};
|
|
285
|
+
declare function Table$1<T>({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, frame, headerType, headerFill, striped, totalRow, empty, minWidth, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, className, ...props }: TableProps<T>): import("react").JSX.Element;
|
|
286
|
+
//#endregion
|
|
287
|
+
export { Column$1 as Column, Table$1 as Table };
|
|
288
|
+
//# sourceMappingURL=table.d.ts.map
|