@cfasim-ui/components 0.3.16 → 0.3.17

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.
Files changed (5) hide show
  1. package/dist/NumberInput/NumberInput.d.ts +10 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +283 -292
  5. package/package.json +1 -1
package/dist/NumberInput/NumberInput.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export type NumberRange = [number, number];
1
2
  type __VLS_Props = {
2
3
  label?: string;
3
4
  hideLabel?: boolean;
@@ -15,10 +16,19 @@ type __VLS_Props = {
15
16
  };
16
17
  type __VLS_PublicProps = {
17
18
  modelValue?: number;
19
+ "range"?: NumberRange;
20
+ "lower"?: number;
21
+ "upper"?: number;
18
22
  } & __VLS_Props;
19
23
  declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
20
24
  "update:modelValue": (value: number) => any;
25
+ "update:range": (value: NumberRange) => any;
26
+ "update:lower": (value: number) => any;
27
+ "update:upper": (value: number) => any;
21
28
  }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
22
29
  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
30
+ "onUpdate:range"?: ((value: NumberRange) => any) | undefined;
31
+ "onUpdate:lower"?: ((value: number) => any) | undefined;
32
+ "onUpdate:upper"?: ((value: number) => any) | undefined;
23
33
  }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
24
34
  export default _default;
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
- .box[data-v-d7342c02]{font-size:var(--font-size-sm);border-radius:.375em;padding:.75em 1.25em}.box-info[data-v-d7342c02]{background-color:var(--color-box-info-bg);color:var(--color-box-info-text)}.box-success[data-v-d7342c02]{background-color:var(--color-box-success-bg);color:var(--color-box-success-text)}.box-warning[data-v-d7342c02]{background-color:var(--color-box-warning-bg);color:var(--color-box-warning-text)}.box-error[data-v-d7342c02]{background-color:var(--color-box-error-bg);color:var(--color-box-error-text)}.button[data-v-250eab18]{min-height:2.5em;font-size:var(--font-size-sm);background-color:var(--color-primary);color:var(--color-text-on-primary);border:none;border-radius:.375em;flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;padding:0 1em;font-weight:500;display:inline-flex}.button[data-v-250eab18]:hover{cursor:pointer;background-color:var(--color-primary-hover)}.button[data-v-250eab18]:active{background-color:var(--color-primary-active)}.button[data-v-250eab18]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.button[data-v-250eab18]:disabled{opacity:.5;cursor:not-allowed}.button[data-variant=secondary][data-v-250eab18]{color:var(--color-primary);border:1px solid var(--color-primary);background-color:#0000}.button[data-variant=secondary][data-v-250eab18]:hover{background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.button[data-variant=secondary][data-v-250eab18]:active{background-color:color-mix(in srgb, var(--color-primary) 15%, transparent)}.container[data-v-bff01edb]{flex-direction:column;min-width:0;display:flex}.container-horizontal[data-v-bff01edb]{flex-flow:wrap;align-items:center}.container-border[data-v-bff01edb]{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md)}.container-scrollable[data-v-bff01edb]{overflow:auto}.expander-trigger[data-v-39e4acd0]{cursor:pointer;width:100%;font:inherit;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);background:0 0;border:none;align-items:center;gap:.5em;padding:.5em 0;font-weight:600;display:flex}.expander-trigger[data-v-39e4acd0]:hover{color:var(--color-text)}.expander-caret[data-v-39e4acd0]{border-top:.3em solid #0000;border-bottom:.3em solid #0000;border-left:.35em solid;width:0;height:0;transition:transform .15s;display:inline-block}.expander-caret.open[data-v-39e4acd0]{transform:rotate(90deg)}.expander-content[data-v-39e4acd0]{flex-direction:column;gap:.75em;display:flex;overflow:hidden}.expander-content[data-state=open][data-v-39e4acd0]{animation:.2s ease-out slideDown-39e4acd0}.expander-content[data-state=closed][data-v-39e4acd0]{animation:.2s ease-out slideUp-39e4acd0}@keyframes slideDown-39e4acd0{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes slideUp-39e4acd0{0%{height:var(--reka-collapsible-content-height)}to{height:0}}.grid-wrapper[data-v-7ae87f0f]{width:100%;min-width:0;container-type:inline-size}.grid[data-v-7ae87f0f]{min-width:0;display:grid}.grid[data-v-7ae87f0f]>*{min-width:0}.Icon{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" var(--icon-fill,0), "wght" var(--icon-weight,400), "GRAD" var(--icon-grade,0), "opsz" var(--icon-opsz,24);color:inherit;direction:ltr;font-family:Material Symbols Outlined,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}.Icon[data-size=sm]{--icon-opsz:20;font-size:20px}.Icon[data-size=md]{--icon-opsz:24;font-size:24px}.Icon[data-size=lg]{--icon-opsz:28;font-size:28px}.Icon[data-size=xl]{--icon-opsz:32;font-size:32px}.Icon[data-fill=true]{--icon-fill:1}.Icon[data-inline=true]{font-size:inherit;vertical-align:middle;transform-origin:50%;transform:scale(1.2)translateY(-.05em)}.HintTrigger[data-v-9dbf1c25]{width:1.25em;height:1.25em;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.HintTrigger[data-v-9dbf1c25]:hover{color:var(--color-text)}.HintTrigger[data-v-9dbf1c25]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.HintContent{max-width:15rem;font-size:var(--font-size-xs);color:var(--color-bg-0);background-color:var(--color-text);box-shadow:var(--shadow-md);z-index:100;border-radius:.25em;padding:.5em .75em;line-height:1.4}.HintArrow{fill:var(--color-text)}.light-dark-toggle[data-v-4c423498]{border:1px solid var(--color-border);background:var(--color-bg-0);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:.25em;justify-content:center;align-items:center;display:flex}.light-dark-toggle[data-v-4c423498]:hover{color:var(--color-text);background:var(--color-bg-1)}.input-label[data-v-10b86a5d]{flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-10b86a5d]{justify-content:space-between;align-items:center;display:flex}.input-wrapper[data-v-10b86a5d]{align-items:center;gap:.25em;display:flex}.input-wrapper input[data-v-10b86a5d]{flex:1;min-width:0}input[data-v-10b86a5d]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-10b86a5d]:hover{border-color:var(--color-border-hover)}input[data-v-10b86a5d]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[aria-invalid=true][data-v-10b86a5d]{border-color:var(--color-error)}input[aria-invalid=true][data-v-10b86a5d]:focus{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent)}input[data-v-10b86a5d]::placeholder{color:var(--color-text-tertiary)}.input-suffix[data-v-10b86a5d]{color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}.input-error[data-v-10b86a5d]{color:var(--color-error);font-size:var(--font-size-xs)}.slider-container[data-v-10b86a5d]{flex-direction:column;gap:.25em;padding-top:1.5em;display:flex}.slider-current[data-v-10b86a5d]{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;pointer-events:none;margin-bottom:1px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.slider-root[data-v-10b86a5d]{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;height:1.5em;display:flex;position:relative}.slider-track[data-v-10b86a5d]{background-color:var(--color-bg-3);border-radius:var(--radius-full);flex-grow:1;height:3px;position:relative}.slider-range[data-v-10b86a5d]{background-color:var(--color-primary);border-radius:var(--radius-full);height:100%;position:absolute}.slider-thumb[data-v-10b86a5d]{background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;width:1em;height:1em;display:block;position:relative}.slider-thumb[data-v-10b86a5d]:hover{background-color:var(--color-primary-hover)}.slider-thumb[data-v-10b86a5d]:active,.slider-thumb[data-v-10b86a5d]:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);outline:none}.slider-labels[data-v-10b86a5d]{font-size:var(--font-size-xs);color:var(--color-text-secondary);justify-content:space-between;margin-top:-.5em;display:flex}.select-box[data-v-63876437]{flex-direction:column;gap:.25em;display:flex}.select-label[data-v-63876437]{font-size:var(--font-size-sm)}.select-trigger[data-v-63876437]{font-size:var(--font-size-sm);border:1px solid var(--color-border);background:var(--color-bg-0);cursor:pointer;width:auto;height:2.5em;color:inherit;border-radius:.375em;justify-content:space-between;align-items:center;gap:.5em;padding:0 .75em;font-family:inherit;line-height:1.4;display:inline-flex}.select-trigger[data-v-63876437]:hover{border-color:var(--color-border-hover)}.select-trigger[data-v-63876437]:focus-visible{outline:2px solid var(--color-primary);outline-offset:-1px}.select-trigger[data-placeholder][data-v-63876437]{color:var(--color-text-secondary)}.select-icon[data-v-63876437]{flex-shrink:0;align-items:center;display:flex}.select-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);min-width:var(--reka-select-trigger-width);max-height:var(--reka-select-content-available-height);border-radius:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.select-viewport{padding:.25em}.select-item{font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25em;outline:none;justify-content:space-between;align-items:center;gap:.5em;padding:.25em .5em;display:flex}.select-item[data-highlighted]{background:var(--color-primary);color:#fff}.select-item[data-state=checked]{font-weight:600}.select-indicator{flex-shrink:0;align-items:center;display:flex}.SidebarLayout[data-v-e0ed7a62]{--bar-height:3rem;background-color:var(--color-bg-0);height:100dvh;color:var(--color-text);font-family:var(--font-family);display:flex;position:relative}.SidebarRail[data-v-e0ed7a62]{width:var(--sidebar-width);height:100%;transition:width var(--transition-normal);flex-shrink:0;position:relative;overflow:hidden}@media (width>=768px){.SidebarLayout[data-collapsed=true] .SidebarRail[data-v-e0ed7a62]{width:var(--toggle-size);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm)}}.Sidebar[data-v-e0ed7a62]{font-size:var(--font-size-sm);width:var(--sidebar-width);height:100%;transition:transform var(--transition-normal);display:flex;transform:translate(0)}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-e0ed7a62]{transform:translate(-100%)}.SidebarScroll[data-v-e0ed7a62]{min-width:0;padding:var(--space-4);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm);scrollbar-width:thin;scrollbar-color:transparent transparent;gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.SidebarScroll[data-v-e0ed7a62]:hover{scrollbar-color:var(--color-border) transparent}.SidebarScroll[data-v-e0ed7a62] h2{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin:var(--space-4) 0 var(--space-2);font-weight:600}.SidebarScroll[data-v-e0ed7a62]>h2:first-child{margin-top:0}.Toggle[data-v-e0ed7a62]{width:var(--toggle-size);height:var(--toggle-size);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Toggle[data-v-e0ed7a62]:hover{color:var(--color-text);background-color:var(--color-bg-2)}.Toggle[data-v-e0ed7a62]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.SidebarHeader[data-v-e0ed7a62]{margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));justify-content:flex-end;display:flex}.Toggle--expand[data-v-e0ed7a62]{opacity:0;pointer-events:none;transition:opacity var(--transition-fast);position:absolute;top:0;left:50%;transform:translate(-50%)}.SidebarLayout[data-collapsed=true] .Toggle--expand[data-v-e0ed7a62]{opacity:1;pointer-events:auto}.Main[data-v-e0ed7a62]{background-color:var(--color-bg-0);min-width:0;font-size:var(--font-size-md);flex-direction:column;flex:1;display:flex;overflow:hidden;container-type:inline-size}.Topbar[data-v-e0ed7a62]{min-height:var(--bar-height);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TopbarEnd[data-v-e0ed7a62]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}@container (width>=768px){.Topbar[data-v-e0ed7a62]{padding:0 var(--space-4) 0 var(--space-20)}}.MainScroll[data-v-e0ed7a62]{min-height:0;padding:var(--space-6) 0;scrollbar-width:thin;scrollbar-color:transparent transparent;flex:1;overflow:hidden auto}.MainScroll[data-v-e0ed7a62]:hover{scrollbar-color:var(--color-border) transparent}.MainContent[data-v-e0ed7a62]{max-width:1024px;padding:0 var(--space-4)}@container (width>=768px){.MainContent[data-v-e0ed7a62]{padding:0 var(--space-4) 0 var(--space-20)}}@media (width<=767px){.SidebarLayout[data-v-e0ed7a62]{transition:transform var(--transition-normal)}.SidebarLayout[data-collapsed=true][data-v-e0ed7a62]{transform:translateX(calc(-1 * var(--sidebar-width)))}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-e0ed7a62]{transform:translate(0)}.SidebarRail[data-v-e0ed7a62]{min-width:var(--sidebar-width)}.Main[data-v-e0ed7a62]{min-width:100vw}.Toggle--expand[data-v-e0ed7a62]{display:none}}.TabsLayout[data-v-e0ed7a62]{flex-direction:column;flex:1;min-height:0;display:flex}.TabsBar[data-v-e0ed7a62]{min-height:var(--bar-height);border-bottom:1px solid var(--color-border);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TabsBarEnd[data-v-e0ed7a62]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}.TabsList[data-v-e0ed7a62]{gap:var(--space-1);align-self:stretch;display:flex;position:relative}.TabsTrigger[data-v-e0ed7a62]{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:var(--radius-md) var(--radius-md) 0 0;background:0 0;border:none;font-family:inherit;font-weight:500;position:relative}.TabsTrigger[data-v-e0ed7a62]:hover{color:var(--color-text);background-color:var(--color-bg-1)}.TabsTrigger[data-state=active][data-v-e0ed7a62]{color:var(--color-text)}.TabsTrigger[data-v-e0ed7a62]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.TabsIndicator[data-v-e0ed7a62]{background-color:var(--color-text);height:2px;transition:width var(--transition-fast), left var(--transition-fast);position:absolute;bottom:0}.Spinner{vertical-align:middle;border:2px solid;border-top-color:#0000;border-radius:50%;animation:.6s linear infinite cfa-spin;display:inline-block}.Spinner[data-size=sm]{width:14px;height:14px}.Spinner[data-size=md]{width:20px;height:20px}.Spinner[data-size=lg]{border-width:3px;width:28px;height:28px}@keyframes cfa-spin{to{transform:rotate(360deg)}}.input-label[data-v-3f3d20cc]{font-size:var(--font-size-sm);flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-3f3d20cc]{justify-content:space-between;align-items:center;display:flex}input[data-v-3f3d20cc]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-3f3d20cc]:hover{border-color:var(--color-border-hover)}input[data-v-3f3d20cc]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[data-v-3f3d20cc]::placeholder{color:var(--color-text-tertiary)}.toggle[data-v-9916c71e]{align-items:center;gap:.5em;display:flex}.toggle label[data-v-9916c71e]{-webkit-user-select:none;user-select:none}.switch[data-v-9916c71e]{--switch-w:2.25em;--switch-h:1.25em;--thumb-size:1em;--thumb-offset:.125em;width:var(--switch-w);height:var(--switch-h);background:var(--color-border-hover);border-radius:var(--switch-h);cursor:pointer;border:none;flex-shrink:0;padding:0;transition:background .15s;position:relative}.switch[data-state=checked][data-v-9916c71e]{background:var(--color-primary)}.switch[data-disabled][data-v-9916c71e]{opacity:.5;cursor:not-allowed}.thumb[data-v-9916c71e]{width:var(--thumb-size);height:var(--thumb-size);top:var(--thumb-offset);left:var(--thumb-offset);background:#fff;border-radius:50%;transition:transform .15s;display:block;position:absolute}.switch[data-state=checked] .thumb[data-v-9916c71e]{transform:translateX(calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2))}
1
+ .box[data-v-d7342c02]{font-size:var(--font-size-sm);border-radius:.375em;padding:.75em 1.25em}.box-info[data-v-d7342c02]{background-color:var(--color-box-info-bg);color:var(--color-box-info-text)}.box-success[data-v-d7342c02]{background-color:var(--color-box-success-bg);color:var(--color-box-success-text)}.box-warning[data-v-d7342c02]{background-color:var(--color-box-warning-bg);color:var(--color-box-warning-text)}.box-error[data-v-d7342c02]{background-color:var(--color-box-error-bg);color:var(--color-box-error-text)}.button[data-v-250eab18]{min-height:2.5em;font-size:var(--font-size-sm);background-color:var(--color-primary);color:var(--color-text-on-primary);border:none;border-radius:.375em;flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;padding:0 1em;font-weight:500;display:inline-flex}.button[data-v-250eab18]:hover{cursor:pointer;background-color:var(--color-primary-hover)}.button[data-v-250eab18]:active{background-color:var(--color-primary-active)}.button[data-v-250eab18]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.button[data-v-250eab18]:disabled{opacity:.5;cursor:not-allowed}.button[data-variant=secondary][data-v-250eab18]{color:var(--color-primary);border:1px solid var(--color-primary);background-color:#0000}.button[data-variant=secondary][data-v-250eab18]:hover{background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.button[data-variant=secondary][data-v-250eab18]:active{background-color:color-mix(in srgb, var(--color-primary) 15%, transparent)}.container[data-v-bff01edb]{flex-direction:column;min-width:0;display:flex}.container-horizontal[data-v-bff01edb]{flex-flow:wrap;align-items:center}.container-border[data-v-bff01edb]{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md)}.container-scrollable[data-v-bff01edb]{overflow:auto}.expander-trigger[data-v-39e4acd0]{cursor:pointer;width:100%;font:inherit;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);background:0 0;border:none;align-items:center;gap:.5em;padding:.5em 0;font-weight:600;display:flex}.expander-trigger[data-v-39e4acd0]:hover{color:var(--color-text)}.expander-caret[data-v-39e4acd0]{border-top:.3em solid #0000;border-bottom:.3em solid #0000;border-left:.35em solid;width:0;height:0;transition:transform .15s;display:inline-block}.expander-caret.open[data-v-39e4acd0]{transform:rotate(90deg)}.expander-content[data-v-39e4acd0]{flex-direction:column;gap:.75em;display:flex;overflow:hidden}.expander-content[data-state=open][data-v-39e4acd0]{animation:.2s ease-out slideDown-39e4acd0}.expander-content[data-state=closed][data-v-39e4acd0]{animation:.2s ease-out slideUp-39e4acd0}@keyframes slideDown-39e4acd0{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes slideUp-39e4acd0{0%{height:var(--reka-collapsible-content-height)}to{height:0}}.grid-wrapper[data-v-7ae87f0f]{width:100%;min-width:0;container-type:inline-size}.grid[data-v-7ae87f0f]{min-width:0;display:grid}.grid[data-v-7ae87f0f]>*{min-width:0}.Icon{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" var(--icon-fill,0), "wght" var(--icon-weight,400), "GRAD" var(--icon-grade,0), "opsz" var(--icon-opsz,24);color:inherit;direction:ltr;font-family:Material Symbols Outlined,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}.Icon[data-size=sm]{--icon-opsz:20;font-size:20px}.Icon[data-size=md]{--icon-opsz:24;font-size:24px}.Icon[data-size=lg]{--icon-opsz:28;font-size:28px}.Icon[data-size=xl]{--icon-opsz:32;font-size:32px}.Icon[data-fill=true]{--icon-fill:1}.Icon[data-inline=true]{font-size:inherit;vertical-align:middle;transform-origin:50%;transform:scale(1.2)translateY(-.05em)}.HintTrigger[data-v-9dbf1c25]{width:1.25em;height:1.25em;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.HintTrigger[data-v-9dbf1c25]:hover{color:var(--color-text)}.HintTrigger[data-v-9dbf1c25]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.HintContent{max-width:15rem;font-size:var(--font-size-xs);color:var(--color-bg-0);background-color:var(--color-text);box-shadow:var(--shadow-md);z-index:100;border-radius:.25em;padding:.5em .75em;line-height:1.4}.HintArrow{fill:var(--color-text)}.light-dark-toggle[data-v-4c423498]{border:1px solid var(--color-border);background:var(--color-bg-0);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:.25em;justify-content:center;align-items:center;display:flex}.light-dark-toggle[data-v-4c423498]:hover{color:var(--color-text);background:var(--color-bg-1)}.input-label[data-v-7056d705]{flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-7056d705]{justify-content:space-between;align-items:center;display:flex}.input-wrapper[data-v-7056d705]{align-items:center;gap:.25em;display:flex}.input-wrapper input[data-v-7056d705]{flex:1;min-width:0}input[data-v-7056d705]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-7056d705]:hover{border-color:var(--color-border-hover)}input[data-v-7056d705]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[aria-invalid=true][data-v-7056d705]{border-color:var(--color-error)}input[aria-invalid=true][data-v-7056d705]:focus{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent)}input[data-v-7056d705]::placeholder{color:var(--color-text-tertiary)}.input-suffix[data-v-7056d705]{color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}.input-error[data-v-7056d705]{color:var(--color-error);font-size:var(--font-size-xs)}.slider-container[data-v-7056d705]{flex-direction:column;gap:.25em;padding-top:1.5em;display:flex}.slider-current[data-v-7056d705]{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;pointer-events:none;margin-bottom:1px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.slider-root[data-v-7056d705]{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;height:1.5em;display:flex;position:relative}.slider-track[data-v-7056d705]{background-color:var(--color-bg-3);border-radius:var(--radius-full);flex-grow:1;height:3px;position:relative}.slider-range[data-v-7056d705]{background-color:var(--color-primary);border-radius:var(--radius-full);height:100%;position:absolute}.slider-thumb[data-v-7056d705]{background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;width:1em;height:1em;display:block;position:relative}.slider-thumb[data-v-7056d705]:hover{background-color:var(--color-primary-hover)}.slider-thumb[data-v-7056d705]:active,.slider-thumb[data-v-7056d705]:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);outline:none}.slider-labels[data-v-7056d705]{font-size:var(--font-size-xs);color:var(--color-text-secondary);justify-content:space-between;margin-top:-.5em;display:flex}.select-box[data-v-63876437]{flex-direction:column;gap:.25em;display:flex}.select-label[data-v-63876437]{font-size:var(--font-size-sm)}.select-trigger[data-v-63876437]{font-size:var(--font-size-sm);border:1px solid var(--color-border);background:var(--color-bg-0);cursor:pointer;width:auto;height:2.5em;color:inherit;border-radius:.375em;justify-content:space-between;align-items:center;gap:.5em;padding:0 .75em;font-family:inherit;line-height:1.4;display:inline-flex}.select-trigger[data-v-63876437]:hover{border-color:var(--color-border-hover)}.select-trigger[data-v-63876437]:focus-visible{outline:2px solid var(--color-primary);outline-offset:-1px}.select-trigger[data-placeholder][data-v-63876437]{color:var(--color-text-secondary)}.select-icon[data-v-63876437]{flex-shrink:0;align-items:center;display:flex}.select-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);min-width:var(--reka-select-trigger-width);max-height:var(--reka-select-content-available-height);border-radius:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.select-viewport{padding:.25em}.select-item{font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25em;outline:none;justify-content:space-between;align-items:center;gap:.5em;padding:.25em .5em;display:flex}.select-item[data-highlighted]{background:var(--color-primary);color:#fff}.select-item[data-state=checked]{font-weight:600}.select-indicator{flex-shrink:0;align-items:center;display:flex}.SidebarLayout[data-v-e0ed7a62]{--bar-height:3rem;background-color:var(--color-bg-0);height:100dvh;color:var(--color-text);font-family:var(--font-family);display:flex;position:relative}.SidebarRail[data-v-e0ed7a62]{width:var(--sidebar-width);height:100%;transition:width var(--transition-normal);flex-shrink:0;position:relative;overflow:hidden}@media (width>=768px){.SidebarLayout[data-collapsed=true] .SidebarRail[data-v-e0ed7a62]{width:var(--toggle-size);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm)}}.Sidebar[data-v-e0ed7a62]{font-size:var(--font-size-sm);width:var(--sidebar-width);height:100%;transition:transform var(--transition-normal);display:flex;transform:translate(0)}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-e0ed7a62]{transform:translate(-100%)}.SidebarScroll[data-v-e0ed7a62]{min-width:0;padding:var(--space-4);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm);scrollbar-width:thin;scrollbar-color:transparent transparent;gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.SidebarScroll[data-v-e0ed7a62]:hover{scrollbar-color:var(--color-border) transparent}.SidebarScroll[data-v-e0ed7a62] h2{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin:var(--space-4) 0 var(--space-2);font-weight:600}.SidebarScroll[data-v-e0ed7a62]>h2:first-child{margin-top:0}.Toggle[data-v-e0ed7a62]{width:var(--toggle-size);height:var(--toggle-size);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Toggle[data-v-e0ed7a62]:hover{color:var(--color-text);background-color:var(--color-bg-2)}.Toggle[data-v-e0ed7a62]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.SidebarHeader[data-v-e0ed7a62]{margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));justify-content:flex-end;display:flex}.Toggle--expand[data-v-e0ed7a62]{opacity:0;pointer-events:none;transition:opacity var(--transition-fast);position:absolute;top:0;left:50%;transform:translate(-50%)}.SidebarLayout[data-collapsed=true] .Toggle--expand[data-v-e0ed7a62]{opacity:1;pointer-events:auto}.Main[data-v-e0ed7a62]{background-color:var(--color-bg-0);min-width:0;font-size:var(--font-size-md);flex-direction:column;flex:1;display:flex;overflow:hidden;container-type:inline-size}.Topbar[data-v-e0ed7a62]{min-height:var(--bar-height);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TopbarEnd[data-v-e0ed7a62]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}@container (width>=768px){.Topbar[data-v-e0ed7a62]{padding:0 var(--space-4) 0 var(--space-20)}}.MainScroll[data-v-e0ed7a62]{min-height:0;padding:var(--space-6) 0;scrollbar-width:thin;scrollbar-color:transparent transparent;flex:1;overflow:hidden auto}.MainScroll[data-v-e0ed7a62]:hover{scrollbar-color:var(--color-border) transparent}.MainContent[data-v-e0ed7a62]{max-width:1024px;padding:0 var(--space-4)}@container (width>=768px){.MainContent[data-v-e0ed7a62]{padding:0 var(--space-4) 0 var(--space-20)}}@media (width<=767px){.SidebarLayout[data-v-e0ed7a62]{transition:transform var(--transition-normal)}.SidebarLayout[data-collapsed=true][data-v-e0ed7a62]{transform:translateX(calc(-1 * var(--sidebar-width)))}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-e0ed7a62]{transform:translate(0)}.SidebarRail[data-v-e0ed7a62]{min-width:var(--sidebar-width)}.Main[data-v-e0ed7a62]{min-width:100vw}.Toggle--expand[data-v-e0ed7a62]{display:none}}.TabsLayout[data-v-e0ed7a62]{flex-direction:column;flex:1;min-height:0;display:flex}.TabsBar[data-v-e0ed7a62]{min-height:var(--bar-height);border-bottom:1px solid var(--color-border);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TabsBarEnd[data-v-e0ed7a62]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}.TabsList[data-v-e0ed7a62]{gap:var(--space-1);align-self:stretch;display:flex;position:relative}.TabsTrigger[data-v-e0ed7a62]{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:var(--radius-md) var(--radius-md) 0 0;background:0 0;border:none;font-family:inherit;font-weight:500;position:relative}.TabsTrigger[data-v-e0ed7a62]:hover{color:var(--color-text);background-color:var(--color-bg-1)}.TabsTrigger[data-state=active][data-v-e0ed7a62]{color:var(--color-text)}.TabsTrigger[data-v-e0ed7a62]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.TabsIndicator[data-v-e0ed7a62]{background-color:var(--color-text);height:2px;transition:width var(--transition-fast), left var(--transition-fast);position:absolute;bottom:0}.Spinner{vertical-align:middle;border:2px solid;border-top-color:#0000;border-radius:50%;animation:.6s linear infinite cfa-spin;display:inline-block}.Spinner[data-size=sm]{width:14px;height:14px}.Spinner[data-size=md]{width:20px;height:20px}.Spinner[data-size=lg]{border-width:3px;width:28px;height:28px}@keyframes cfa-spin{to{transform:rotate(360deg)}}.input-label[data-v-3f3d20cc]{font-size:var(--font-size-sm);flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-3f3d20cc]{justify-content:space-between;align-items:center;display:flex}input[data-v-3f3d20cc]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-3f3d20cc]:hover{border-color:var(--color-border-hover)}input[data-v-3f3d20cc]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[data-v-3f3d20cc]::placeholder{color:var(--color-text-tertiary)}.toggle[data-v-9916c71e]{align-items:center;gap:.5em;display:flex}.toggle label[data-v-9916c71e]{-webkit-user-select:none;user-select:none}.switch[data-v-9916c71e]{--switch-w:2.25em;--switch-h:1.25em;--thumb-size:1em;--thumb-offset:.125em;width:var(--switch-w);height:var(--switch-h);background:var(--color-border-hover);border-radius:var(--switch-h);cursor:pointer;border:none;flex-shrink:0;padding:0;transition:background .15s;position:relative}.switch[data-state=checked][data-v-9916c71e]{background:var(--color-primary)}.switch[data-disabled][data-v-9916c71e]{opacity:.5;cursor:not-allowed}.thumb[data-v-9916c71e]{width:var(--thumb-size);height:var(--thumb-size);top:var(--thumb-offset);left:var(--thumb-offset);background:#fff;border-radius:50%;transition:transform .15s;display:block;position:absolute}.switch[data-state=checked] .thumb[data-v-9916c71e]{transform:translateX(calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2))}
2
2
  /*$vite$:1*/
package/dist/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export { default as Hint } from './Hint/Hint';
10
10
  export { default as Icon } from './Icon/Icon';
11
11
  export { default as LightDarkToggle } from './LightDarkToggle/LightDarkToggle';
12
12
  export { default as NumberInput } from './NumberInput/NumberInput';
13
+ export type { NumberRange } from './NumberInput/NumberInput';
13
14
  export { default as SelectBox } from './SelectBox/SelectBox';
14
15
  export type { SelectOption } from './SelectBox/SelectBox';
15
16
  export { default as SidebarLayout } from './SidebarLayout/SidebarLayout';
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, getCurrentInstance as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useModel as x, vModelText as S, watch as C, withCtx as w, withDirectives as T, withKeys as E, withModifiers as D } from "vue";
2
- import { CollapsibleContent as O, CollapsibleRoot as k, CollapsibleTrigger as A, Primitive as j, SelectContent as M, SelectItem as N, SelectItemIndicator as ee, SelectItemText as P, SelectPortal as F, SelectRoot as I, SelectTrigger as L, SelectValue as R, SelectViewport as te, SliderRange as ne, SliderRoot as re, SliderThumb as ie, SliderTrack as ae, SwitchRoot as z, SwitchThumb as B, TabsIndicator as V, TabsList as H, TabsRoot as U, TabsTrigger as W, TooltipArrow as G, TooltipContent as K, TooltipPortal as q, TooltipProvider as J, TooltipRoot as oe, TooltipTrigger as se, useId as ce } from "reka-ui";
1
+ import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, getCurrentInstance as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, ref as g, renderList as ee, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useModel as x, vModelText as S, watch as C, withCtx as w, withDirectives as T, withKeys as E, withModifiers as D } from "vue";
2
+ import { CollapsibleContent as O, CollapsibleRoot as k, CollapsibleTrigger as A, Primitive as j, SelectContent as M, SelectItem as N, SelectItemIndicator as te, SelectItemText as ne, SelectPortal as re, SelectRoot as P, SelectTrigger as F, SelectValue as I, SelectViewport as ie, SliderRange as ae, SliderRoot as oe, SliderThumb as se, SliderTrack as ce, SwitchRoot as L, SwitchThumb as R, TabsIndicator as z, TabsList as le, TabsRoot as ue, TabsTrigger as B, TooltipArrow as V, TooltipContent as de, TooltipPortal as H, TooltipProvider as U, TooltipRoot as W, TooltipTrigger as G, useId as K } from "reka-ui";
3
3
  //#region src/Box/Box.vue?vue&type=script&setup=true&lang.ts
4
- var le = ["role"], ue = /* @__PURE__ */ c({
4
+ var fe = ["role"], pe = /* @__PURE__ */ c({
5
5
  __name: "Box",
6
6
  props: {
7
7
  variant: {},
@@ -17,13 +17,13 @@ var le = ["role"], ue = /* @__PURE__ */ c({
17
17
  color: e.textColor
18
18
  }),
19
19
  role: e.role
20
- }, [v(t.$slots, "default", {}, void 0, !0)], 14, le));
20
+ }, [_(t.$slots, "default", {}, void 0, !0)], 14, fe));
21
21
  }
22
- }), Y = (e, t) => {
22
+ }), q = (e, t) => {
23
23
  let n = e.__vccOpts || e;
24
24
  for (let [e, r] of t) n[e] = r;
25
25
  return n;
26
- }, de = /* @__PURE__ */ Y(ue, [["__scopeId", "data-v-d7342c02"]]), fe = /* @__PURE__ */ Y(/* @__PURE__ */ c({
26
+ }, J = /* @__PURE__ */ q(pe, [["__scopeId", "data-v-d7342c02"]]), me = /* @__PURE__ */ q(/* @__PURE__ */ c({
27
27
  __name: "Button",
28
28
  props: {
29
29
  label: {},
@@ -40,7 +40,7 @@ var le = ["role"], ue = /* @__PURE__ */ c({
40
40
  "as-child": e.asChild,
41
41
  onClick: r[0] ||= (e) => t.$emit("click", e)
42
42
  }, {
43
- default: w(() => [v(t.$slots, "default", {}, () => [o(y(e.label), 1)], !0)]),
43
+ default: w(() => [_(t.$slots, "default", {}, () => [o(y(e.label), 1)], !0)]),
44
44
  _: 3
45
45
  }, 8, [
46
46
  "data-variant",
@@ -48,18 +48,18 @@ var le = ["role"], ue = /* @__PURE__ */ c({
48
48
  "as-child"
49
49
  ]));
50
50
  }
51
- }), [["__scopeId", "data-v-250eab18"]]), X = {
51
+ }), [["__scopeId", "data-v-250eab18"]]), he = {
52
52
  none: "0",
53
53
  small: "var(--space-2)",
54
54
  medium: "var(--space-4)",
55
55
  large: "var(--space-6)"
56
56
  };
57
- function pe(e, t = "medium") {
58
- return e == null ? X[t] : e in X ? X[e] : e;
57
+ function Y(e, t = "medium") {
58
+ return e == null ? he[t] : e in he ? he[e] : e;
59
59
  }
60
60
  //#endregion
61
61
  //#region src/Container/Container.vue
62
- var me = /* @__PURE__ */ Y(/* @__PURE__ */ c({
62
+ var X = /* @__PURE__ */ q(/* @__PURE__ */ c({
63
63
  __name: "Container",
64
64
  props: {
65
65
  border: { type: Boolean },
@@ -68,7 +68,7 @@ var me = /* @__PURE__ */ Y(/* @__PURE__ */ c({
68
68
  gap: {}
69
69
  },
70
70
  setup(e) {
71
- let n = e, r = t(() => pe(n.gap)), a = t(() => {
71
+ let n = e, r = t(() => Y(n.gap)), a = t(() => {
72
72
  let e = n.height;
73
73
  if (e != null) return typeof e == "number" ? `${e}px` : e;
74
74
  });
@@ -82,9 +82,9 @@ var me = /* @__PURE__ */ Y(/* @__PURE__ */ c({
82
82
  gap: r.value,
83
83
  height: a.value
84
84
  })
85
- }, [v(t.$slots, "default", {}, void 0, !0)], 6));
85
+ }, [_(t.$slots, "default", {}, void 0, !0)], 6));
86
86
  }
87
- }), [["__scopeId", "data-v-bff01edb"]]), he = /* @__PURE__ */ Y(/* @__PURE__ */ c({
87
+ }), [["__scopeId", "data-v-bff01edb"]]), Z = /* @__PURE__ */ q(/* @__PURE__ */ c({
88
88
  __name: "Expander",
89
89
  props: /* @__PURE__ */ u({ label: {} }, {
90
90
  open: {
@@ -102,10 +102,10 @@ var me = /* @__PURE__ */ Y(/* @__PURE__ */ c({
102
102
  class: "expander"
103
103
  }, {
104
104
  default: w(() => [s(b(A), { class: "expander-trigger" }, {
105
- default: w(() => [a("span", { class: d(["expander-caret", { open: t.value }]) }, null, 2), v(r.$slots, "label", {}, () => [o(y(e.label), 1)], !0)]),
105
+ default: w(() => [a("span", { class: d(["expander-caret", { open: t.value }]) }, null, 2), _(r.$slots, "label", {}, () => [o(y(e.label), 1)], !0)]),
106
106
  _: 3
107
107
  }), s(b(O), { class: "expander-content" }, {
108
- default: w(() => [v(r.$slots, "default", {}, void 0, !0)]),
108
+ default: w(() => [_(r.$slots, "default", {}, void 0, !0)]),
109
109
  _: 3
110
110
  })]),
111
111
  _: 3
@@ -118,31 +118,31 @@ function ve(e) {
118
118
  function ye(e) {
119
119
  return /^\d+(\.\d+)?[a-zA-Z%]+$/.test(e) ? e : _e;
120
120
  }
121
- var Z = /* @__PURE__ */ new Map();
121
+ var Q = /* @__PURE__ */ new Map();
122
122
  function be(e) {
123
123
  if (typeof document > "u") return;
124
- let t = Z.get(e);
124
+ let t = Q.get(e);
125
125
  if (t) {
126
126
  t.count++;
127
127
  return;
128
128
  }
129
129
  let n = document.createElement("style");
130
- n.setAttribute("data-cfasim-grid-bp", e), n.textContent = `@container (max-width: ${e}) {[data-cfasim-grid-bp="${e}"] > .grid {grid-template-columns: var(--grid-cols-small) !important;}}`, document.head.appendChild(n), Z.set(e, {
130
+ n.setAttribute("data-cfasim-grid-bp", e), n.textContent = `@container (max-width: ${e}) {[data-cfasim-grid-bp="${e}"] > .grid {grid-template-columns: var(--grid-cols-small) !important;}}`, document.head.appendChild(n), Q.set(e, {
131
131
  count: 1,
132
132
  el: n
133
133
  });
134
134
  }
135
135
  function xe(e) {
136
136
  if (typeof document > "u") return;
137
- let t = Z.get(e);
138
- t && (t.count--, t.count === 0 && (t.el.remove(), Z.delete(e)));
137
+ let t = Q.get(e);
138
+ t && (t.count--, t.count === 0 && (t.el.remove(), Q.delete(e)));
139
139
  }
140
140
  (void 0)?.dispose(() => {
141
- Z.forEach(({ el: e }) => e.remove()), Z.clear();
141
+ Q.forEach(({ el: e }) => e.remove()), Q.clear();
142
142
  });
143
143
  //#endregion
144
144
  //#region src/Grid/Grid.vue
145
- var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
145
+ var Se = /* @__PURE__ */ q(/* @__PURE__ */ c({
146
146
  __name: "Grid",
147
147
  props: {
148
148
  cols: {},
@@ -152,7 +152,7 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
152
152
  minColWidth: {}
153
153
  },
154
154
  setup(e) {
155
- let n = e, r = t(() => pe(n.gap)), o = t(() => n.minColWidth ? `repeat(auto-fit, minmax(${n.minColWidth}, 1fr))` : ve(n.cols ?? 2)), s = t(() => n.minColWidth || n.colsSmall == null ? o.value : ve(n.colsSmall)), c = t(() => ye(n.breakpoint ?? _e)), l = null, u = C(c, (e) => {
155
+ let n = e, r = t(() => Y(n.gap)), o = t(() => n.minColWidth ? `repeat(auto-fit, minmax(${n.minColWidth}, 1fr))` : ve(n.cols ?? 2)), s = t(() => n.minColWidth || n.colsSmall == null ? o.value : ve(n.colsSmall)), c = t(() => ye(n.breakpoint ?? _e)), l = null, u = C(c, (e) => {
156
156
  l !== e && (be(e), l && xe(l), l = e);
157
157
  }, { immediate: !0 });
158
158
  return m(() => {
@@ -167,7 +167,7 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
167
167
  gridTemplateColumns: o.value,
168
168
  "--grid-cols-small": s.value
169
169
  })
170
- }, [v(e.$slots, "default", {}, void 0, !0)], 4)], 8, ge));
170
+ }, [_(e.$slots, "default", {}, void 0, !0)], 4)], 8, ge));
171
171
  }
172
172
  }), [["__scopeId", "data-v-7ae87f0f"]]), Ce = [
173
173
  "data-size",
@@ -176,7 +176,7 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
176
176
  "aria-hidden",
177
177
  "aria-label",
178
178
  "role"
179
- ], Q = /* @__PURE__ */ c({
179
+ ], $ = /* @__PURE__ */ c({
180
180
  __name: "Icon",
181
181
  props: {
182
182
  icon: {},
@@ -213,33 +213,33 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
213
213
  role: e.decorative ? void 0 : "img"
214
214
  }, y(e.icon), 13, Ce));
215
215
  }
216
- }), $ = /* @__PURE__ */ Y(/* @__PURE__ */ c({
216
+ }), we = /* @__PURE__ */ q(/* @__PURE__ */ c({
217
217
  __name: "Hint",
218
218
  props: { text: {} },
219
219
  setup(e) {
220
- return (t, r) => (h(), n(b(J), null, {
221
- default: w(() => [s(b(oe), {
220
+ return (t, r) => (h(), n(b(U), null, {
221
+ default: w(() => [s(b(W), {
222
222
  "delay-duration": 0,
223
223
  "disable-closing-trigger": ""
224
224
  }, {
225
- default: w(() => [s(b(se), { "as-child": "" }, {
225
+ default: w(() => [s(b(G), { "as-child": "" }, {
226
226
  default: w(() => [a("button", {
227
227
  type: "button",
228
228
  class: "HintTrigger",
229
229
  "aria-label": "More info",
230
230
  onPointerdown: r[0] ||= D(() => {}, ["prevent"])
231
- }, [s(Q, {
231
+ }, [s($, {
232
232
  icon: "help",
233
233
  size: 16
234
234
  })], 32)]),
235
235
  _: 1
236
- }), s(b(q), null, {
237
- default: w(() => [s(b(K), {
236
+ }), s(b(H), null, {
237
+ default: w(() => [s(b(de), {
238
238
  class: "HintContent",
239
239
  side: "top",
240
240
  "side-offset": 4
241
241
  }, {
242
- default: w(() => [o(y(e.text) + " ", 1), s(b(G), {
242
+ default: w(() => [o(y(e.text) + " ", 1), s(b(V), {
243
243
  class: "HintArrow",
244
244
  width: 10,
245
245
  height: 5
@@ -253,7 +253,7 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
253
253
  _: 1
254
254
  }));
255
255
  }
256
- }), [["__scopeId", "data-v-9dbf1c25"]]), we = ["aria-label"], Te = /* @__PURE__ */ Y(/* @__PURE__ */ c({
256
+ }), [["__scopeId", "data-v-9dbf1c25"]]), Te = ["aria-label"], Ee = /* @__PURE__ */ q(/* @__PURE__ */ c({
257
257
  __name: "LightDarkToggle",
258
258
  setup(e) {
259
259
  let t = g(window.matchMedia("(prefers-color-scheme: dark)").matches);
@@ -265,16 +265,13 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
265
265
  type: "button",
266
266
  "aria-label": t.value ? "Switch to light mode" : "Switch to dark mode",
267
267
  onClick: n[0] ||= (e) => t.value = !t.value
268
- }, [s(Q, {
268
+ }, [s($, {
269
269
  icon: t.value ? "dark_mode" : "light_mode",
270
270
  size: "sm"
271
- }, null, 8, ["icon"])], 8, we));
271
+ }, null, 8, ["icon"])], 8, Te));
272
272
  }
273
- }), [["__scopeId", "data-v-4c423498"]]), Ee = {
274
- key: 0,
275
- class: "input-label"
276
- }, De = {
277
- key: 0,
273
+ }), [["__scopeId", "data-v-4c423498"]]), De = {
274
+ key: 1,
278
275
  class: "input-wrapper"
279
276
  }, Oe = [
280
277
  "inputmode",
@@ -286,32 +283,13 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
286
283
  key: 0,
287
284
  class: "input-suffix"
288
285
  }, Ae = {
289
- key: 1,
290
- class: "input-error",
291
- role: "alert"
292
- }, je = {
293
286
  key: 2,
294
- class: "slider-container"
295
- }, Me = { class: "slider-current" }, Ne = { class: "slider-labels" }, Pe = { key: 1 }, Fe = {
296
- key: 0,
297
- class: "input-wrapper"
298
- }, Ie = [
299
- "inputmode",
300
- "placeholder",
301
- "aria-invalid",
302
- "aria-required",
303
- "required"
304
- ], Le = {
305
- key: 0,
306
- class: "input-suffix"
307
- }, Re = {
308
- key: 1,
309
287
  class: "input-error",
310
288
  role: "alert"
311
- }, ze = {
312
- key: 2,
289
+ }, je = {
290
+ key: 3,
313
291
  class: "slider-container"
314
- }, Be = { class: "slider-current" }, Ve = { class: "slider-labels" }, He = /* @__PURE__ */ Y(/* @__PURE__ */ c({
292
+ }, Me = { class: "slider-current" }, Ne = { class: "slider-labels" }, Pe = /* @__PURE__ */ q(/* @__PURE__ */ c({
315
293
  __name: "NumberInput",
316
294
  props: /* @__PURE__ */ u({
317
295
  label: {},
@@ -329,72 +307,108 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
329
307
  decimals: {}
330
308
  }, {
331
309
  modelValue: {},
332
- modelModifiers: {}
310
+ modelModifiers: {},
311
+ range: {},
312
+ rangeModifiers: {},
313
+ lower: {},
314
+ lowerModifiers: {},
315
+ upper: {},
316
+ upperModifiers: {}
333
317
  }),
334
- emits: ["update:modelValue"],
335
- setup(e) {
336
- let c = x(e, "modelValue"), l = e, u = t(() => l.min ?? (l.percent, 0)), f = t(() => l.max ?? (l.percent ? 1 : 100)), p = t(() => l.step ?? (l.percent ? .01 : 1));
337
- function m(e) {
318
+ emits: [
319
+ "update:modelValue",
320
+ "update:range",
321
+ "update:lower",
322
+ "update:upper"
323
+ ],
324
+ setup(c) {
325
+ let u = x(c, "modelValue"), f = x(c, "range"), m = x(c, "lower"), _ = x(c, "upper"), D = c;
326
+ function O(e) {
327
+ return Array.isArray(e) && e.length === 2;
328
+ }
329
+ let k = l()?.vnode.props, A = !!k?.["onUpdate:range"] || !!k?.["onUpdate:lower"] || !!k?.["onUpdate:upper"] || f.value !== void 0 || m.value !== void 0 || _.value !== void 0, j = t(() => !!D.slider || A);
330
+ p(() => {
331
+ A && k?.["onUpdate:modelValue"] && console.warn("[NumberInput] In range mode, the default `v-model` is unused. Bind `v-model:range` or `v-model:lower`/`v-model:upper` instead.");
332
+ });
333
+ let M = t(() => D.min ?? (D.percent, 0)), N = t(() => D.max ?? (D.percent ? 1 : 100)), te = t(() => D.step ?? (D.percent ? .01 : 1));
334
+ function ne(e) {
338
335
  if (!Number.isFinite(e) || Number.isInteger(e)) return 0;
339
336
  let t = parseFloat(Math.abs(e).toPrecision(12)).toString(), n = t.indexOf(".");
340
337
  if (n !== -1) return t.length - n - 1;
341
338
  let r = t.indexOf("e-");
342
339
  return r === -1 ? 0 : Number(t.slice(r + 2));
343
340
  }
344
- let _ = t(() => l.step == null ? 1 : l.percent ? l.step * 100 : l.step), v = t(() => l.min == null ? l.percent ? 0 : void 0 : l.percent ? l.min * 100 : l.min), D = t(() => l.max == null ? l.percent ? 100 : void 0 : l.percent ? l.max * 100 : l.max), O = t(() => l.numberType === "integer" ? 0 : l.decimals == null ? m(_.value) : Math.max(0, l.decimals));
345
- function k(e, t) {
341
+ let re = t(() => D.step == null ? 1 : D.percent ? D.step * 100 : D.step), P = t(() => D.min == null ? D.percent ? 0 : void 0 : D.percent ? D.min * 100 : D.min), F = t(() => D.max == null ? D.percent ? 100 : void 0 : D.percent ? D.max * 100 : D.max), I = t(() => D.numberType === "integer" ? 0 : D.decimals == null ? ne(re.value) : Math.max(0, D.decimals));
342
+ function ie(e, t) {
346
343
  let n = 10 ** t;
347
344
  return Math.round(e * n) / n;
348
345
  }
349
- function A(e) {
346
+ function L(e) {
350
347
  if (e == null) return "";
351
- let t = O.value;
352
- return l.percent ? (e * 100).toFixed(t) + "%" : e.toLocaleString("en-US", {
348
+ let t = I.value;
349
+ return D.percent ? (e * 100).toFixed(t) + "%" : e.toLocaleString("en-US", {
353
350
  minimumFractionDigits: t,
354
351
  maximumFractionDigits: t
355
352
  });
356
353
  }
357
- function j(e) {
358
- return e == null || !l.percent ? e : k(e * 100, O.value);
354
+ function R(e) {
355
+ return e == null || !D.percent ? e : ie(e * 100, I.value);
359
356
  }
360
- function M(e) {
361
- return l.percent ? e / 100 : e;
357
+ function z(e) {
358
+ return D.percent ? e / 100 : e;
362
359
  }
363
- function N(e) {
364
- if (l.numberType !== "integer") return e;
365
- let t = j(e);
366
- return t == null ? e : M(Math.trunc(t));
360
+ function le(e) {
361
+ if (D.numberType !== "integer") return e;
362
+ let t = R(e);
363
+ return t == null ? e : z(Math.trunc(t));
367
364
  }
368
- function ee(e) {
365
+ function ue(e) {
369
366
  return e == null ? "" : e.toLocaleString("en-US");
370
367
  }
371
- function P(e) {
368
+ function B(e) {
372
369
  if (e == null) return "";
373
- let t = O.value;
370
+ let t = I.value;
374
371
  if (t > 0) return e.toLocaleString("en-US", {
375
372
  minimumFractionDigits: t,
376
373
  maximumFractionDigits: t
377
374
  });
378
- let n = ee(e);
379
- return l.numberType === "float" && Number.isInteger(e) ? n + ".0" : n;
375
+ let n = ue(e);
376
+ return D.numberType === "float" && Number.isInteger(e) ? n + ".0" : n;
380
377
  }
381
- function F(e) {
378
+ function V(e) {
382
379
  return e.replace(/,/g, "");
383
380
  }
384
- let I = g(P(j(c.value))), L = g(c.value), R = g();
385
- C(c, (e) => {
386
- I.value = P(j(e)), L.value = e, R.value = W(e);
381
+ function de() {
382
+ if (A) {
383
+ let e = f.value, t = m.value ?? e?.[0], n = _.value ?? e?.[1];
384
+ return t !== void 0 || n !== void 0 ? [t ?? M.value, n ?? N.value] : void 0;
385
+ }
386
+ return u.value;
387
+ }
388
+ let H = de(), U = g(B(R(typeof H == "number" ? H : void 0)));
389
+ function W(e) {
390
+ return A ? O(e) ? [e[0], e[1]] : [M.value, N.value] : typeof e == "number" ? [e] : [M.value];
391
+ }
392
+ let G = g(W(H)), K = g();
393
+ C([
394
+ u,
395
+ f,
396
+ m,
397
+ _
398
+ ], () => {
399
+ let e = de();
400
+ !A && !O(e) && (U.value = B(R(e))), G.value = W(e), K.value = X(e);
387
401
  });
388
- let te = /[^0-9,.\-+eE]/g;
389
- function z(e) {
390
- let t = e.target, n = F(t.value);
402
+ let fe = /[^0-9,.\-+eE]/g;
403
+ function pe(e) {
404
+ let t = e.target, n = V(t.value);
391
405
  if (n === "" || n === "-" || n.endsWith(".") || n.includes(".") && n.endsWith("0")) return;
392
406
  let r = Number(n);
393
407
  if (Number.isNaN(r)) return;
394
- let i = ee(r);
408
+ let i = ue(r);
395
409
  if (i === t.value) return;
396
410
  let a = t.selectionStart ?? 0, o = (t.value.slice(0, a).match(/,/g) || []).length;
397
- I.value = i, requestAnimationFrame(() => {
411
+ U.value = i, requestAnimationFrame(() => {
398
412
  let e = a - o, n = 0, r = 0;
399
413
  for (let t = 0; t < i.length; t++) if (i[t] !== "," && r++, r >= e) {
400
414
  n = t + 1;
@@ -403,155 +417,132 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
403
417
  r < e && (n = i.length), t.setSelectionRange(n, n);
404
418
  });
405
419
  }
406
- function B() {
407
- if (G(), I.value.trim() === "") return;
408
- let e = Number(F(I.value));
409
- Number.isNaN(e) || (I.value = P(e));
420
+ function q() {
421
+ if (Z(), U.value.trim() === "") return;
422
+ let e = Number(V(U.value));
423
+ Number.isNaN(e) || (U.value = B(e));
410
424
  }
411
- let V = null;
412
- function H() {
413
- !l.live || l.slider || (V && clearTimeout(V), V = setTimeout(G, 300));
425
+ let J = null;
426
+ function me() {
427
+ !D.live || j.value || (J && clearTimeout(J), J = setTimeout(Z, 300));
414
428
  }
415
- function U() {
416
- !l.live || l.slider || (V && clearTimeout(V), G());
429
+ function he() {
430
+ !D.live || j.value || (J && clearTimeout(J), Z());
417
431
  }
418
- function W(e) {
419
- if (e == null) return l.required ? "Required" : void 0;
420
- let t = j(e);
421
- if (v.value != null && t < v.value) return `Min ${v.value}${l.percent ? "%" : ""}`;
422
- if (D.value != null && t > D.value) return `Max ${D.value}${l.percent ? "%" : ""}`;
432
+ function Y(e) {
433
+ let t = R(e);
434
+ if (P.value != null && t < P.value) return `Min ${P.value}${D.percent ? "%" : ""}`;
435
+ if (F.value != null && t > F.value) return `Max ${F.value}${D.percent ? "%" : ""}`;
436
+ }
437
+ function X(e) {
438
+ if (e == null) return D.required ? "Required" : void 0;
439
+ if (O(e)) {
440
+ let t = Y(e[0]);
441
+ if (t) return `${t} (lower)`;
442
+ let n = Y(e[1]);
443
+ return n ? `${n} (upper)` : void 0;
444
+ }
445
+ return Y(e);
423
446
  }
424
- function G() {
425
- if (I.value.trim() === "") {
426
- c.value = void 0, L.value = void 0, R.value = W(void 0);
447
+ function Z() {
448
+ let e = u.value;
449
+ if (U.value.trim() === "") {
450
+ u.value = void 0, G.value = W(void 0), K.value = X(void 0);
427
451
  return;
428
452
  }
429
- let e = I.value.replace(te, "");
430
- if (!/\d/.test(e)) {
431
- I.value = P(j(c.value)), R.value = W(c.value);
453
+ let t = U.value.replace(fe, "");
454
+ if (!/\d/.test(t)) {
455
+ U.value = B(R(e)), K.value = X(e);
432
456
  return;
433
457
  }
434
- e !== I.value && (I.value = e);
435
- let t = Number(F(e));
436
- if (Number.isNaN(t)) return;
437
- l.numberType === "integer" && (t = Math.trunc(t), I.value = P(t));
438
- let n = M(t), r = W(n);
439
- R.value = r, !r && (c.value = n, L.value = c.value);
458
+ t !== U.value && (U.value = t);
459
+ let n = Number(V(t));
460
+ if (Number.isNaN(n)) return;
461
+ D.numberType === "integer" && (n = Math.trunc(n), U.value = B(n));
462
+ let r = z(n), i = X(r);
463
+ K.value = i, !i && (u.value = r, G.value = [r]);
464
+ }
465
+ function ge(e, t) {
466
+ let n = e.map(le);
467
+ G.value = n, A || (U.value = B(R(n[0]))), t && (A ? (f.value = [n[0], n[1]], m.value = n[0], _.value = n[1]) : u.value = n[0]);
440
468
  }
441
- function K(e) {
442
- if (!e) return;
443
- let t = N(e[0]);
444
- L.value = t, I.value = P(j(t)), l.live && (c.value = t);
469
+ function _e(e) {
470
+ if (D.label) return A ? e === 0 ? `${D.label} (lower)` : `${D.label} (upper)` : D.label;
445
471
  }
446
- function q(e) {
447
- e && (c.value = N(e[0]));
472
+ function ve(e) {
473
+ e && ge(e, !!D.live);
448
474
  }
449
- function J(e, t) {
475
+ function ye(e) {
476
+ e && ge(e, !0);
477
+ }
478
+ function Q(e, t) {
450
479
  e.preventDefault();
451
- let n = Number(F(I.value)), r = (Number.isNaN(n) ? 0 : n) + _.value * (e.shiftKey ? 10 : 1) * t;
452
- l.numberType === "integer" && (r = Math.trunc(r)), v.value != null && (r = Math.max(r, v.value)), D.value != null && (r = Math.min(r, D.value)), I.value = P(r), c.value = M(r), L.value = c.value;
480
+ let n = Number(V(U.value)), r = (Number.isNaN(n) ? 0 : n) + re.value * (e.shiftKey ? 10 : 1) * t;
481
+ D.numberType === "integer" && (r = Math.trunc(r)), P.value != null && (r = Math.max(r, P.value)), F.value != null && (r = Math.min(r, F.value)), U.value = B(r);
482
+ let i = z(r);
483
+ u.value = i, G.value = [i];
453
484
  }
454
- return (e, t) => l.label ? (h(), i("label", Ee, [
455
- a("span", { class: d(["input-label-row", { "visually-hidden": l.hideLabel }]) }, [o(y(l.label) + " ", 1), l.hint && !l.hideLabel ? (h(), n($, {
456
- key: 0,
457
- text: l.hint
458
- }, null, 8, ["text"])) : r("", !0)], 2),
459
- l.slider ? r("", !0) : (h(), i("span", De, [T(a("input", {
460
- type: "text",
461
- inputmode: l.numberType === "integer" ? "numeric" : "decimal",
462
- "onUpdate:modelValue": t[0] ||= (e) => I.value = e,
463
- placeholder: l.placeholder,
464
- "aria-invalid": !!R.value,
465
- "aria-required": l.required || void 0,
466
- required: l.required,
467
- onBlur: B,
468
- onKeydown: [
469
- E(G, ["enter"]),
470
- t[1] ||= E((e) => J(e, 1), ["up"]),
471
- t[2] ||= E((e) => J(e, -1), ["down"])
472
- ],
473
- onInput: t[3] ||= (e) => {
474
- z(e), H();
475
- },
476
- onChange: U
477
- }, null, 40, Oe), [[S, I.value]]), l.percent ? (h(), i("span", ke, "%")) : r("", !0)])),
478
- R.value ? (h(), i("span", Ae, y(R.value), 1)) : r("", !0),
479
- l.slider ? (h(), i("div", je, [s(b(re), {
480
- class: "slider-root",
481
- "model-value": L.value == null ? [u.value] : [L.value],
482
- min: u.value,
483
- max: f.value,
484
- step: p.value,
485
- "onUpdate:modelValue": K,
486
- onValueCommit: q
487
- }, {
488
- default: w(() => [s(b(ae), { class: "slider-track" }, {
489
- default: w(() => [s(b(ne), { class: "slider-range" })]),
490
- _: 1
491
- }), s(b(ie), {
492
- class: "slider-thumb",
493
- "aria-label": l.label
494
- }, {
495
- default: w(() => [a("span", Me, y(A(L.value)), 1)]),
496
- _: 1
497
- }, 8, ["aria-label"])]),
498
- _: 1
499
- }, 8, [
500
- "model-value",
501
- "min",
502
- "max",
503
- "step"
504
- ]), a("div", Ne, [a("span", null, y(A(u.value)), 1), a("span", null, y(A(f.value)), 1)])])) : r("", !0)
505
- ])) : (h(), i("div", Pe, [
506
- l.slider ? r("", !0) : (h(), i("span", Fe, [T(a("input", {
507
- type: "text",
508
- inputmode: l.numberType === "integer" ? "numeric" : "decimal",
509
- "onUpdate:modelValue": t[4] ||= (e) => I.value = e,
510
- placeholder: l.placeholder,
511
- "aria-invalid": !!R.value,
512
- "aria-required": l.required || void 0,
513
- required: l.required,
514
- onBlur: B,
515
- onKeydown: [
516
- E(G, ["enter"]),
517
- t[5] ||= E((e) => J(e, 1), ["up"]),
518
- t[6] ||= E((e) => J(e, -1), ["down"])
519
- ],
520
- onInput: t[7] ||= (e) => {
521
- z(e), H();
522
- },
523
- onChange: U
524
- }, null, 40, Ie), [[S, I.value]]), l.percent ? (h(), i("span", Le, "%")) : r("", !0)])),
525
- R.value ? (h(), i("span", Re, y(R.value), 1)) : r("", !0),
526
- l.slider ? (h(), i("div", ze, [s(b(re), {
527
- class: "slider-root",
528
- "model-value": L.value == null ? [u.value] : [L.value],
529
- min: u.value,
530
- max: f.value,
531
- step: p.value,
532
- "onUpdate:modelValue": K,
533
- onValueCommit: q
534
- }, {
535
- default: w(() => [s(b(ae), { class: "slider-track" }, {
536
- default: w(() => [s(b(ne), { class: "slider-range" })]),
537
- _: 1
538
- }), s(b(ie), {
539
- class: "slider-thumb",
540
- "aria-label": l.label
485
+ return (t, c) => (h(), n(v(D.label ? "label" : "div"), { class: d(D.label ? "input-label" : void 0) }, {
486
+ default: w(() => [
487
+ D.label ? (h(), i("span", {
488
+ key: 0,
489
+ class: d(["input-label-row", { "visually-hidden": D.hideLabel }])
490
+ }, [o(y(D.label) + " ", 1), D.hint && !D.hideLabel ? (h(), n(we, {
491
+ key: 0,
492
+ text: D.hint
493
+ }, null, 8, ["text"])) : r("", !0)], 2)) : r("", !0),
494
+ j.value ? r("", !0) : (h(), i("span", De, [T(a("input", {
495
+ type: "text",
496
+ inputmode: D.numberType === "integer" ? "numeric" : "decimal",
497
+ "onUpdate:modelValue": c[0] ||= (e) => U.value = e,
498
+ placeholder: D.placeholder,
499
+ "aria-invalid": !!K.value,
500
+ "aria-required": D.required || void 0,
501
+ required: D.required,
502
+ onBlur: q,
503
+ onKeydown: [
504
+ E(Z, ["enter"]),
505
+ c[1] ||= E((e) => Q(e, 1), ["up"]),
506
+ c[2] ||= E((e) => Q(e, -1), ["down"])
507
+ ],
508
+ onInput: c[3] ||= (e) => {
509
+ pe(e), me();
510
+ },
511
+ onChange: he
512
+ }, null, 40, Oe), [[S, U.value]]), D.percent ? (h(), i("span", ke, "%")) : r("", !0)])),
513
+ K.value ? (h(), i("span", Ae, y(K.value), 1)) : r("", !0),
514
+ j.value ? (h(), i("div", je, [s(b(oe), {
515
+ class: "slider-root",
516
+ "model-value": G.value,
517
+ min: M.value,
518
+ max: N.value,
519
+ step: te.value,
520
+ "onUpdate:modelValue": ve,
521
+ onValueCommit: ye
541
522
  }, {
542
- default: w(() => [a("span", Be, y(A(L.value)), 1)]),
523
+ default: w(() => [s(b(ce), { class: "slider-track" }, {
524
+ default: w(() => [s(b(ae), { class: "slider-range" })]),
525
+ _: 1
526
+ }), (h(!0), i(e, null, ee(G.value, (e, t) => (h(), n(b(se), {
527
+ key: t,
528
+ class: "slider-thumb",
529
+ "aria-label": _e(t)
530
+ }, {
531
+ default: w(() => [a("span", Me, y(L(e)), 1)]),
532
+ _: 2
533
+ }, 1032, ["aria-label"]))), 128))]),
543
534
  _: 1
544
- }, 8, ["aria-label"])]),
545
- _: 1
546
- }, 8, [
547
- "model-value",
548
- "min",
549
- "max",
550
- "step"
551
- ]), a("div", Ve, [a("span", null, y(A(u.value)), 1), a("span", null, y(A(f.value)), 1)])])) : r("", !0)
552
- ]));
535
+ }, 8, [
536
+ "model-value",
537
+ "min",
538
+ "max",
539
+ "step"
540
+ ]), a("div", Ne, [a("span", null, y(L(M.value)), 1), a("span", null, y(L(N.value)), 1)])])) : r("", !0)
541
+ ]),
542
+ _: 1
543
+ }, 8, ["class"]));
553
544
  }
554
- }), [["__scopeId", "data-v-10b86a5d"]]), Ue = { class: "select-box" }, We = ["id"], Ge = /* @__PURE__ */ Y(/* @__PURE__ */ c({
545
+ }), [["__scopeId", "data-v-7056d705"]]), Fe = { class: "select-box" }, Ie = ["id"], Le = /* @__PURE__ */ q(/* @__PURE__ */ c({
555
546
  __name: "SelectBox",
556
547
  props: /* @__PURE__ */ u({
557
548
  label: {},
@@ -565,21 +556,21 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
565
556
  }),
566
557
  emits: ["update:modelValue"],
567
558
  setup(t) {
568
- let c = x(t, "modelValue"), l = t, u = ce();
569
- return (f, p) => (h(), i("div", Ue, [t.label ? (h(), i("label", {
559
+ let c = x(t, "modelValue"), l = t, u = K();
560
+ return (f, p) => (h(), i("div", Fe, [t.label ? (h(), i("label", {
570
561
  key: 0,
571
562
  id: `${b(u)}-label`,
572
563
  class: d(["select-label", { "visually-hidden": t.hideLabel }])
573
- }, y(t.label), 11, We)) : r("", !0), s(b(I), {
564
+ }, y(t.label), 11, Ie)) : r("", !0), s(b(P), {
574
565
  modelValue: c.value,
575
566
  "onUpdate:modelValue": p[0] ||= (e) => c.value = e
576
567
  }, {
577
- default: w(() => [s(b(L), {
568
+ default: w(() => [s(b(F), {
578
569
  class: "select-trigger",
579
570
  "aria-labelledby": l.label ? `${b(u)}-label` : void 0,
580
571
  "aria-label": l.label ? void 0 : l.ariaLabel
581
572
  }, {
582
- default: w(() => [s(b(R), { placeholder: t.placeholder }, null, 8, ["placeholder"]), p[1] ||= a("span", {
573
+ default: w(() => [s(b(I), { placeholder: t.placeholder }, null, 8, ["placeholder"]), p[1] ||= a("span", {
583
574
  class: "select-icon",
584
575
  "aria-hidden": "true"
585
576
  }, [a("svg", {
@@ -593,23 +584,23 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
593
584
  "stroke-linejoin": "round"
594
585
  }, [a("path", { d: "M3 4.5L6 7.5L9 4.5" })])], -1)]),
595
586
  _: 1
596
- }, 8, ["aria-labelledby", "aria-label"]), s(b(F), null, {
587
+ }, 8, ["aria-labelledby", "aria-label"]), s(b(re), null, {
597
588
  default: w(() => [s(b(M), {
598
589
  class: "select-content",
599
590
  position: "popper",
600
591
  "side-offset": 4,
601
592
  "body-lock": !1
602
593
  }, {
603
- default: w(() => [s(b(te), { class: "select-viewport" }, {
604
- default: w(() => [(h(!0), i(e, null, _(t.options, (e) => (h(), n(b(N), {
594
+ default: w(() => [s(b(ie), { class: "select-viewport" }, {
595
+ default: w(() => [(h(!0), i(e, null, ee(t.options, (e) => (h(), n(b(N), {
605
596
  key: e.value,
606
597
  value: e.value,
607
598
  class: "select-item"
608
599
  }, {
609
- default: w(() => [s(b(P), null, {
600
+ default: w(() => [s(b(ne), null, {
610
601
  default: w(() => [o(y(e.label), 1)]),
611
602
  _: 2
612
- }, 1024), s(b(ee), { class: "select-indicator" }, {
603
+ }, 1024), s(b(te), { class: "select-indicator" }, {
613
604
  default: w(() => [...p[2] ||= [a("svg", {
614
605
  width: "12",
615
606
  height: "12",
@@ -633,7 +624,7 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
633
624
  _: 1
634
625
  }, 8, ["modelValue"])]));
635
626
  }
636
- }), [["__scopeId", "data-v-63876437"]]), Ke = ["data-collapsed"], qe = { class: "SidebarRail" }, Je = { class: "Sidebar" }, Ye = { class: "SidebarScroll" }, Xe = { class: "SidebarHeader" }, Ze = { class: "Main" }, Qe = { class: "TabsBar" }, $e = { class: "TabsBarEnd" }, et = { class: "MainScroll" }, tt = { class: "MainContent" }, nt = { class: "Topbar" }, rt = { class: "TopbarEnd" }, it = { class: "MainScroll" }, at = { class: "MainContent" }, ot = /* @__PURE__ */ Y(/* @__PURE__ */ c({
627
+ }), [["__scopeId", "data-v-63876437"]]), Re = ["data-collapsed"], ze = { class: "SidebarRail" }, Be = { class: "Sidebar" }, Ve = { class: "SidebarScroll" }, He = { class: "SidebarHeader" }, Ue = { class: "Main" }, We = { class: "TabsBar" }, Ge = { class: "TabsBarEnd" }, Ke = { class: "MainScroll" }, qe = { class: "MainContent" }, Je = { class: "Topbar" }, Ye = { class: "TopbarEnd" }, Xe = { class: "MainScroll" }, Ze = { class: "MainContent" }, Qe = /* @__PURE__ */ q(/* @__PURE__ */ c({
637
628
  __name: "SidebarLayout",
638
629
  props: /* @__PURE__ */ u({
639
630
  hideTopbar: { type: Boolean },
@@ -644,85 +635,85 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
644
635
  }),
645
636
  emits: ["update:tab"],
646
637
  setup(c) {
647
- let u = l(), d = u?.appContext.config.globalProperties.$router, f = u?.appContext.config.globalProperties.$route, S = c, T = x(c, "tab"), E = window.matchMedia("(max-width: 767px)"), D = g(E.matches), O = g(E.matches);
648
- function k(e) {
649
- D.value = e.matches, O.value = e.matches;
638
+ let u = l(), d = u?.appContext.config.globalProperties.$router, f = u?.appContext.config.globalProperties.$route, v = c, S = x(c, "tab"), T = window.matchMedia("(max-width: 767px)"), E = g(T.matches), D = g(T.matches);
639
+ function O(e) {
640
+ E.value = e.matches, D.value = e.matches;
650
641
  }
651
642
  p(() => {
652
- E.addEventListener("change", k);
643
+ T.addEventListener("change", O);
653
644
  }), m(() => {
654
- E.removeEventListener("change", k);
645
+ T.removeEventListener("change", O);
655
646
  });
656
- function A() {
657
- O.value = !O.value;
647
+ function k() {
648
+ D.value = !D.value;
658
649
  }
659
- let j = t(() => !!d && S.tabs?.some((e) => e.to)), M = t({
650
+ let A = t(() => !!d && v.tabs?.some((e) => e.to)), j = t({
660
651
  get() {
661
- return T.value ?? S.tabs?.[0]?.value;
652
+ return S.value ?? v.tabs?.[0]?.value;
662
653
  },
663
654
  set(e) {
664
- if (e && (T.value = e, j.value && d)) {
665
- let t = S.tabs?.find((t) => t.value === e);
655
+ if (e && (S.value = e, A.value && d)) {
656
+ let t = v.tabs?.find((t) => t.value === e);
666
657
  t?.to && d.push(t.to);
667
658
  }
668
659
  }
669
660
  });
670
661
  return f && C(() => f.path, () => {
671
- if (j.value) {
672
- let e = S.tabs?.find((e) => e.to === f.path);
673
- e && (T.value = e.value);
662
+ if (A.value) {
663
+ let e = v.tabs?.find((e) => e.to === f.path);
664
+ e && (S.value = e.value);
674
665
  }
675
666
  }, { immediate: !0 }), (t, l) => (h(), i("div", {
676
667
  class: "SidebarLayout",
677
- "data-collapsed": O.value
678
- }, [a("div", qe, [a("aside", Je, [a("div", Ye, [a("div", Xe, [a("button", {
668
+ "data-collapsed": D.value
669
+ }, [a("div", ze, [a("aside", Be, [a("div", Ve, [a("div", He, [a("button", {
679
670
  type: "button",
680
671
  class: "Toggle",
681
672
  "aria-label": "Collapse sidebar",
682
673
  title: "Collapse sidebar",
683
- onClick: A
684
- }, [s(Q, {
674
+ onClick: k
675
+ }, [s($, {
685
676
  icon: "keyboard_double_arrow_left",
686
677
  size: "sm"
687
- })])]), v(t.$slots, "sidebar", {}, void 0, !0)])]), a("button", {
678
+ })])]), _(t.$slots, "sidebar", {}, void 0, !0)])]), a("button", {
688
679
  type: "button",
689
680
  class: "Toggle Toggle--expand",
690
681
  "aria-label": "Expand sidebar",
691
682
  title: "Expand sidebar",
692
- onClick: A
693
- }, [s(Q, {
683
+ onClick: k
684
+ }, [s($, {
694
685
  icon: "keyboard_double_arrow_right",
695
686
  size: "sm"
696
- })])]), a("main", Ze, [c.tabs?.length ? (h(), n(b(U), {
687
+ })])]), a("main", Ue, [c.tabs?.length ? (h(), n(b(ue), {
697
688
  key: 0,
698
- "model-value": M.value,
689
+ "model-value": j.value,
699
690
  class: "TabsLayout",
700
- "onUpdate:modelValue": l[0] ||= (e) => M.value = e
691
+ "onUpdate:modelValue": l[0] ||= (e) => j.value = e
701
692
  }, {
702
- default: w(() => [a("div", Qe, [
703
- D.value && O.value ? (h(), i("button", {
693
+ default: w(() => [a("div", We, [
694
+ E.value && D.value ? (h(), i("button", {
704
695
  key: 0,
705
696
  type: "button",
706
697
  class: "Toggle",
707
698
  "aria-label": "Expand sidebar",
708
699
  title: "Expand sidebar",
709
- onClick: A
710
- }, [s(Q, {
700
+ onClick: k
701
+ }, [s($, {
711
702
  icon: "keyboard_double_arrow_right",
712
703
  size: "sm"
713
704
  })])) : r("", !0),
714
- s(b(H), {
705
+ s(b(le), {
715
706
  class: "TabsList",
716
707
  "aria-label": "Tabs"
717
708
  }, {
718
- default: w(() => [(h(!0), i(e, null, _(c.tabs, (e) => (h(), n(b(W), {
709
+ default: w(() => [(h(!0), i(e, null, ee(c.tabs, (e) => (h(), n(b(B), {
719
710
  key: e.value,
720
711
  value: e.value,
721
712
  class: "TabsTrigger"
722
713
  }, {
723
714
  default: w(() => [o(y(e.label), 1)]),
724
715
  _: 2
725
- }, 1032, ["value"]))), 128)), s(b(V), {
716
+ }, 1032, ["value"]))), 128)), s(b(z), {
726
717
  class: "TabsIndicator",
727
718
  style: {
728
719
  width: "var(--reka-tabs-indicator-size)",
@@ -731,22 +722,22 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
731
722
  })]),
732
723
  _: 1
733
724
  }),
734
- a("div", $e, [v(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n(Te, { key: 0 }))])
735
- ]), a("div", et, [a("div", tt, [v(t.$slots, "default", {}, void 0, !0)])])]),
725
+ a("div", Ge, [_(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n(Ee, { key: 0 }))])
726
+ ]), a("div", Ke, [a("div", qe, [_(t.$slots, "default", {}, void 0, !0)])])]),
736
727
  _: 3
737
- }, 8, ["model-value"])) : (h(), i(e, { key: 1 }, [a("div", nt, [D.value && O.value ? (h(), i("button", {
728
+ }, 8, ["model-value"])) : (h(), i(e, { key: 1 }, [a("div", Je, [E.value && D.value ? (h(), i("button", {
738
729
  key: 0,
739
730
  type: "button",
740
731
  class: "Toggle",
741
732
  "aria-label": "Expand sidebar",
742
733
  title: "Expand sidebar",
743
- onClick: A
744
- }, [s(Q, {
734
+ onClick: k
735
+ }, [s($, {
745
736
  icon: "keyboard_double_arrow_right",
746
737
  size: "sm"
747
- })])) : r("", !0), a("div", rt, [v(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n(Te, { key: 0 }))])]), a("div", it, [a("div", at, [v(t.$slots, "default", {}, void 0, !0)])])], 64))])], 8, Ke));
738
+ })])) : r("", !0), a("div", Ye, [_(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n(Ee, { key: 0 }))])]), a("div", Xe, [a("div", Ze, [_(t.$slots, "default", {}, void 0, !0)])])], 64))])], 8, Re));
748
739
  }
749
- }), [["__scopeId", "data-v-e0ed7a62"]]), st = ["data-size", "aria-label"], ct = /* @__PURE__ */ c({
740
+ }), [["__scopeId", "data-v-e0ed7a62"]]), $e = ["data-size", "aria-label"], et = /* @__PURE__ */ c({
750
741
  __name: "Spinner",
751
742
  props: {
752
743
  size: { default: "sm" },
@@ -758,12 +749,12 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
758
749
  "data-size": e.size,
759
750
  role: "status",
760
751
  "aria-label": e.label ?? "Loading"
761
- }, null, 8, st));
752
+ }, null, 8, $e));
762
753
  }
763
- }), lt = {
754
+ }), tt = {
764
755
  key: 0,
765
756
  class: "input-label"
766
- }, ut = ["placeholder"], dt = { key: 1 }, ft = ["placeholder"], pt = /* @__PURE__ */ Y(/* @__PURE__ */ c({
757
+ }, nt = ["placeholder"], rt = { key: 1 }, it = ["placeholder"], at = /* @__PURE__ */ q(/* @__PURE__ */ c({
767
758
  __name: "TextInput",
768
759
  props: /* @__PURE__ */ u({
769
760
  label: {},
@@ -784,7 +775,7 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
784
775
  t.value = s.value;
785
776
  }
786
777
  let l = e;
787
- return (e, t) => l.label ? (h(), i("label", lt, [a("span", { class: d(["input-label-row", { "visually-hidden": l.hideLabel }]) }, [o(y(l.label) + " ", 1), l.hint && !l.hideLabel ? (h(), n($, {
778
+ return (e, t) => l.label ? (h(), i("label", tt, [a("span", { class: d(["input-label-row", { "visually-hidden": l.hideLabel }]) }, [o(y(l.label) + " ", 1), l.hint && !l.hideLabel ? (h(), n(we, {
788
779
  key: 0,
789
780
  text: l.hint
790
781
  }, null, 8, ["text"])) : r("", !0)], 2), T(a("input", {
@@ -793,15 +784,15 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
793
784
  placeholder: l.placeholder,
794
785
  onBlur: c,
795
786
  onKeydown: E(c, ["enter"])
796
- }, null, 40, ut), [[S, s.value]])])) : (h(), i("div", dt, [T(a("input", {
787
+ }, null, 40, nt), [[S, s.value]])])) : (h(), i("div", rt, [T(a("input", {
797
788
  type: "text",
798
789
  "onUpdate:modelValue": t[1] ||= (e) => s.value = e,
799
790
  placeholder: l.placeholder,
800
791
  onBlur: c,
801
792
  onKeydown: E(c, ["enter"])
802
- }, null, 40, ft), [[S, s.value]])]));
793
+ }, null, 40, it), [[S, s.value]])]));
803
794
  }
804
- }), [["__scopeId", "data-v-3f3d20cc"]]), mt = { class: "toggle" }, ht = ["for"], gt = /* @__PURE__ */ Y(/* @__PURE__ */ c({
795
+ }), [["__scopeId", "data-v-3f3d20cc"]]), ot = { class: "toggle" }, st = ["for"], ct = /* @__PURE__ */ q(/* @__PURE__ */ c({
805
796
  __name: "Toggle",
806
797
  props: /* @__PURE__ */ u({
807
798
  label: {},
@@ -813,21 +804,21 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
813
804
  }),
814
805
  emits: ["update:modelValue"],
815
806
  setup(e) {
816
- let t = x(e, "modelValue"), o = e, c = ce();
817
- return (l, u) => (h(), i("div", mt, [
818
- a("label", { for: b(c) }, y(e.label), 9, ht),
819
- o.hint ? (h(), n($, {
807
+ let t = x(e, "modelValue"), o = e, c = K();
808
+ return (l, u) => (h(), i("div", ot, [
809
+ a("label", { for: b(c) }, y(e.label), 9, st),
810
+ o.hint ? (h(), n(we, {
820
811
  key: 0,
821
812
  text: o.hint
822
813
  }, null, 8, ["text"])) : r("", !0),
823
- s(b(z), {
814
+ s(b(L), {
824
815
  id: b(c),
825
816
  modelValue: t.value,
826
817
  "onUpdate:modelValue": u[0] ||= (e) => t.value = e,
827
818
  disabled: e.disabled,
828
819
  class: "switch"
829
820
  }, {
830
- default: w(() => [s(b(B), { class: "thumb" })]),
821
+ default: w(() => [s(b(R), { class: "thumb" })]),
831
822
  _: 1
832
823
  }, 8, [
833
824
  "id",
@@ -838,4 +829,4 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
838
829
  }
839
830
  }), [["__scopeId", "data-v-9916c71e"]]);
840
831
  //#endregion
841
- export { de as Box, fe as Button, me as Container, he as Expander, Se as Grid, $ as Hint, Q as Icon, Te as LightDarkToggle, He as NumberInput, Ge as SelectBox, ot as SidebarLayout, ct as Spinner, pt as TextInput, gt as Toggle };
832
+ export { J as Box, me as Button, X as Container, Z as Expander, Se as Grid, we as Hint, $ as Icon, Ee as LightDarkToggle, Pe as NumberInput, Le as SelectBox, Qe as SidebarLayout, et as Spinner, at as TextInput, ct as Toggle };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cfasim-ui/components",
3
- "version": "0.3.16",
3
+ "version": "0.3.17",
4
4
  "type": "module",
5
5
  "description": "Vue 3 UI components for cfasim-ui",
6
6
  "license": "Apache-2.0",