@cfasim-ui/components 0.3.16 → 0.3.18

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 +11 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +286 -293
  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;
@@ -12,13 +13,23 @@ type __VLS_Props = {
12
13
  numberType?: "integer" | "float";
13
14
  required?: boolean;
14
15
  decimals?: number;
16
+ sliderDisplay?: (value: number) => string;
15
17
  };
16
18
  type __VLS_PublicProps = {
17
19
  modelValue?: number;
20
+ "range"?: NumberRange;
21
+ "lower"?: number;
22
+ "upper"?: number;
18
23
  } & __VLS_Props;
19
24
  declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
20
25
  "update:modelValue": (value: number) => any;
26
+ "update:range": (value: NumberRange) => any;
27
+ "update:lower": (value: number) => any;
28
+ "update:upper": (value: number) => any;
21
29
  }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
22
30
  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
31
+ "onUpdate:range"?: ((value: NumberRange) => any) | undefined;
32
+ "onUpdate:lower"?: ((value: number) => any) | undefined;
33
+ "onUpdate:upper"?: ((value: number) => any) | undefined;
23
34
  }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
24
35
  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-db116f99]{flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-db116f99]{justify-content:space-between;align-items:center;display:flex}.input-wrapper[data-v-db116f99]{align-items:center;gap:.25em;display:flex}.input-wrapper input[data-v-db116f99]{flex:1;min-width:0}input[data-v-db116f99]{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-db116f99]:hover{border-color:var(--color-border-hover)}input[data-v-db116f99]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[aria-invalid=true][data-v-db116f99]{border-color:var(--color-error)}input[aria-invalid=true][data-v-db116f99]:focus{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent)}input[data-v-db116f99]::placeholder{color:var(--color-text-tertiary)}.input-suffix[data-v-db116f99]{color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}.input-error[data-v-db116f99]{color:var(--color-error);font-size:var(--font-size-xs)}.slider-container[data-v-db116f99]{flex-direction:column;gap:.25em;padding-top:1.5em;display:flex}.slider-current[data-v-db116f99]{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-db116f99]{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-db116f99]{background-color:var(--color-bg-3);border-radius:var(--radius-full);flex-grow:1;height:3px;position:relative}.slider-range[data-v-db116f99]{background-color:var(--color-primary);border-radius:var(--radius-full);height:100%;position:absolute}.slider-thumb[data-v-db116f99]{background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;width:1em;height:1em;display:block;position:relative}.slider-thumb[data-v-db116f99]:hover{background-color:var(--color-primary-hover)}.slider-thumb[data-v-db116f99]:active,.slider-thumb[data-v-db116f99]:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);outline:none}.slider-labels[data-v-db116f99]{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: {},
@@ -326,75 +304,113 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
326
304
  live: { type: Boolean },
327
305
  numberType: {},
328
306
  required: { type: Boolean },
329
- decimals: {}
307
+ decimals: {},
308
+ sliderDisplay: { type: Function }
330
309
  }, {
331
310
  modelValue: {},
332
- modelModifiers: {}
311
+ modelModifiers: {},
312
+ range: {},
313
+ rangeModifiers: {},
314
+ lower: {},
315
+ lowerModifiers: {},
316
+ upper: {},
317
+ upperModifiers: {}
333
318
  }),
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) {
319
+ emits: [
320
+ "update:modelValue",
321
+ "update:range",
322
+ "update:lower",
323
+ "update:upper"
324
+ ],
325
+ setup(c) {
326
+ let u = x(c, "modelValue"), f = x(c, "range"), m = x(c, "lower"), _ = x(c, "upper"), D = c;
327
+ function O(e) {
328
+ return Array.isArray(e) && e.length === 2;
329
+ }
330
+ 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);
331
+ p(() => {
332
+ 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.");
333
+ });
334
+ let M = t(() => D.min ?? (D.percent, 0)), N = t(() => D.max ?? (D.percent ? 1 : 100)), te = t(() => D.step ?? (D.percent ? .01 : 1));
335
+ function ne(e) {
338
336
  if (!Number.isFinite(e) || Number.isInteger(e)) return 0;
339
337
  let t = parseFloat(Math.abs(e).toPrecision(12)).toString(), n = t.indexOf(".");
340
338
  if (n !== -1) return t.length - n - 1;
341
339
  let r = t.indexOf("e-");
342
340
  return r === -1 ? 0 : Number(t.slice(r + 2));
343
341
  }
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) {
342
+ 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));
343
+ function ie(e, t) {
346
344
  let n = 10 ** t;
347
345
  return Math.round(e * n) / n;
348
346
  }
349
- function A(e) {
347
+ function L(e) {
350
348
  if (e == null) return "";
351
- let t = O.value;
352
- return l.percent ? (e * 100).toFixed(t) + "%" : e.toLocaleString("en-US", {
349
+ if (D.sliderDisplay) return D.sliderDisplay(e);
350
+ let t = I.value;
351
+ return D.percent ? (e * 100).toFixed(t) + "%" : e.toLocaleString("en-US", {
353
352
  minimumFractionDigits: t,
354
353
  maximumFractionDigits: t
355
354
  });
356
355
  }
357
- function j(e) {
358
- return e == null || !l.percent ? e : k(e * 100, O.value);
356
+ function R(e) {
357
+ return e == null || !D.percent ? e : ie(e * 100, I.value);
359
358
  }
360
- function M(e) {
361
- return l.percent ? e / 100 : e;
359
+ function z(e) {
360
+ return D.percent ? e / 100 : e;
362
361
  }
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));
362
+ function le(e) {
363
+ if (D.numberType !== "integer") return e;
364
+ let t = R(e);
365
+ return t == null ? e : z(Math.trunc(t));
367
366
  }
368
- function ee(e) {
367
+ function ue(e) {
369
368
  return e == null ? "" : e.toLocaleString("en-US");
370
369
  }
371
- function P(e) {
370
+ function B(e) {
372
371
  if (e == null) return "";
373
- let t = O.value;
372
+ let t = I.value;
374
373
  if (t > 0) return e.toLocaleString("en-US", {
375
374
  minimumFractionDigits: t,
376
375
  maximumFractionDigits: t
377
376
  });
378
- let n = ee(e);
379
- return l.numberType === "float" && Number.isInteger(e) ? n + ".0" : n;
377
+ let n = ue(e);
378
+ return D.numberType === "float" && Number.isInteger(e) ? n + ".0" : n;
380
379
  }
381
- function F(e) {
380
+ function V(e) {
382
381
  return e.replace(/,/g, "");
383
382
  }
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);
383
+ function de() {
384
+ if (A) {
385
+ let e = f.value, t = m.value ?? e?.[0], n = _.value ?? e?.[1];
386
+ return t !== void 0 || n !== void 0 ? [t ?? M.value, n ?? N.value] : void 0;
387
+ }
388
+ return u.value;
389
+ }
390
+ let H = de(), U = g(B(R(typeof H == "number" ? H : void 0)));
391
+ function W(e) {
392
+ return A ? O(e) ? [e[0], e[1]] : [M.value, N.value] : typeof e == "number" ? [e] : [M.value];
393
+ }
394
+ let G = g(W(H)), K = g();
395
+ C([
396
+ u,
397
+ f,
398
+ m,
399
+ _
400
+ ], () => {
401
+ let e = de();
402
+ !A && !O(e) && (U.value = B(R(e))), G.value = W(e), K.value = X(e);
387
403
  });
388
- let te = /[^0-9,.\-+eE]/g;
389
- function z(e) {
390
- let t = e.target, n = F(t.value);
404
+ let fe = /[^0-9,.\-+eE]/g;
405
+ function pe(e) {
406
+ let t = e.target, n = V(t.value);
391
407
  if (n === "" || n === "-" || n.endsWith(".") || n.includes(".") && n.endsWith("0")) return;
392
408
  let r = Number(n);
393
409
  if (Number.isNaN(r)) return;
394
- let i = ee(r);
410
+ let i = ue(r);
395
411
  if (i === t.value) return;
396
412
  let a = t.selectionStart ?? 0, o = (t.value.slice(0, a).match(/,/g) || []).length;
397
- I.value = i, requestAnimationFrame(() => {
413
+ U.value = i, requestAnimationFrame(() => {
398
414
  let e = a - o, n = 0, r = 0;
399
415
  for (let t = 0; t < i.length; t++) if (i[t] !== "," && r++, r >= e) {
400
416
  n = t + 1;
@@ -403,155 +419,132 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
403
419
  r < e && (n = i.length), t.setSelectionRange(n, n);
404
420
  });
405
421
  }
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));
422
+ function q() {
423
+ if (Z(), U.value.trim() === "") return;
424
+ let e = Number(V(U.value));
425
+ Number.isNaN(e) || (U.value = B(e));
410
426
  }
411
- let V = null;
412
- function H() {
413
- !l.live || l.slider || (V && clearTimeout(V), V = setTimeout(G, 300));
427
+ let J = null;
428
+ function me() {
429
+ !D.live || j.value || (J && clearTimeout(J), J = setTimeout(Z, 300));
414
430
  }
415
- function U() {
416
- !l.live || l.slider || (V && clearTimeout(V), G());
431
+ function he() {
432
+ !D.live || j.value || (J && clearTimeout(J), Z());
417
433
  }
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 ? "%" : ""}`;
434
+ function Y(e) {
435
+ let t = R(e);
436
+ if (P.value != null && t < P.value) return `Min ${P.value}${D.percent ? "%" : ""}`;
437
+ if (F.value != null && t > F.value) return `Max ${F.value}${D.percent ? "%" : ""}`;
438
+ }
439
+ function X(e) {
440
+ if (e == null) return D.required ? "Required" : void 0;
441
+ if (O(e)) {
442
+ let t = Y(e[0]);
443
+ if (t) return `${t} (lower)`;
444
+ let n = Y(e[1]);
445
+ return n ? `${n} (upper)` : void 0;
446
+ }
447
+ return Y(e);
423
448
  }
424
- function G() {
425
- if (I.value.trim() === "") {
426
- c.value = void 0, L.value = void 0, R.value = W(void 0);
449
+ function Z() {
450
+ let e = u.value;
451
+ if (U.value.trim() === "") {
452
+ u.value = void 0, G.value = W(void 0), K.value = X(void 0);
427
453
  return;
428
454
  }
429
- let e = I.value.replace(te, "");
430
- if (!/\d/.test(e)) {
431
- I.value = P(j(c.value)), R.value = W(c.value);
455
+ let t = U.value.replace(fe, "");
456
+ if (!/\d/.test(t)) {
457
+ U.value = B(R(e)), K.value = X(e);
432
458
  return;
433
459
  }
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);
460
+ t !== U.value && (U.value = t);
461
+ let n = Number(V(t));
462
+ if (Number.isNaN(n)) return;
463
+ D.numberType === "integer" && (n = Math.trunc(n), U.value = B(n));
464
+ let r = z(n), i = X(r);
465
+ K.value = i, !i && (u.value = r, G.value = [r]);
466
+ }
467
+ function ge(e, t) {
468
+ let n = e.map(le);
469
+ 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
470
  }
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);
471
+ function _e(e) {
472
+ if (D.label) return A ? e === 0 ? `${D.label} (lower)` : `${D.label} (upper)` : D.label;
445
473
  }
446
- function q(e) {
447
- e && (c.value = N(e[0]));
474
+ function ve(e) {
475
+ e && ge(e, !!D.live);
448
476
  }
449
- function J(e, t) {
477
+ function ye(e) {
478
+ e && ge(e, !0);
479
+ }
480
+ function Q(e, t) {
450
481
  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;
482
+ let n = Number(V(U.value)), r = (Number.isNaN(n) ? 0 : n) + re.value * (e.shiftKey ? 10 : 1) * t;
483
+ 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);
484
+ let i = z(r);
485
+ u.value = i, G.value = [i];
453
486
  }
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
487
+ return (t, c) => (h(), n(v(D.label ? "label" : "div"), { class: d(D.label ? "input-label" : void 0) }, {
488
+ default: w(() => [
489
+ D.label ? (h(), i("span", {
490
+ key: 0,
491
+ class: d(["input-label-row", { "visually-hidden": D.hideLabel }])
492
+ }, [o(y(D.label) + " ", 1), D.hint && !D.hideLabel ? (h(), n(we, {
493
+ key: 0,
494
+ text: D.hint
495
+ }, null, 8, ["text"])) : r("", !0)], 2)) : r("", !0),
496
+ j.value ? r("", !0) : (h(), i("span", De, [T(a("input", {
497
+ type: "text",
498
+ inputmode: D.numberType === "integer" ? "numeric" : "decimal",
499
+ "onUpdate:modelValue": c[0] ||= (e) => U.value = e,
500
+ placeholder: D.placeholder,
501
+ "aria-invalid": !!K.value,
502
+ "aria-required": D.required || void 0,
503
+ required: D.required,
504
+ onBlur: q,
505
+ onKeydown: [
506
+ E(Z, ["enter"]),
507
+ c[1] ||= E((e) => Q(e, 1), ["up"]),
508
+ c[2] ||= E((e) => Q(e, -1), ["down"])
509
+ ],
510
+ onInput: c[3] ||= (e) => {
511
+ pe(e), me();
512
+ },
513
+ onChange: he
514
+ }, null, 40, Oe), [[S, U.value]]), D.percent ? (h(), i("span", ke, "%")) : r("", !0)])),
515
+ K.value ? (h(), i("span", Ae, y(K.value), 1)) : r("", !0),
516
+ j.value ? (h(), i("div", je, [s(b(oe), {
517
+ class: "slider-root",
518
+ "model-value": G.value,
519
+ min: M.value,
520
+ max: N.value,
521
+ step: te.value,
522
+ "onUpdate:modelValue": ve,
523
+ onValueCommit: ye
541
524
  }, {
542
- default: w(() => [a("span", Be, y(A(L.value)), 1)]),
525
+ default: w(() => [s(b(ce), { class: "slider-track" }, {
526
+ default: w(() => [s(b(ae), { class: "slider-range" })]),
527
+ _: 1
528
+ }), (h(!0), i(e, null, ee(G.value, (e, t) => (h(), n(b(se), {
529
+ key: t,
530
+ class: "slider-thumb",
531
+ "aria-label": _e(t)
532
+ }, {
533
+ default: w(() => [a("span", Me, y(L(e)), 1)]),
534
+ _: 2
535
+ }, 1032, ["aria-label"]))), 128))]),
543
536
  _: 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
- ]));
537
+ }, 8, [
538
+ "model-value",
539
+ "min",
540
+ "max",
541
+ "step"
542
+ ]), a("div", Ne, [a("span", null, y(L(M.value)), 1), a("span", null, y(L(N.value)), 1)])])) : r("", !0)
543
+ ]),
544
+ _: 1
545
+ }, 8, ["class"]));
553
546
  }
554
- }), [["__scopeId", "data-v-10b86a5d"]]), Ue = { class: "select-box" }, We = ["id"], Ge = /* @__PURE__ */ Y(/* @__PURE__ */ c({
547
+ }), [["__scopeId", "data-v-db116f99"]]), Fe = { class: "select-box" }, Ie = ["id"], Le = /* @__PURE__ */ q(/* @__PURE__ */ c({
555
548
  __name: "SelectBox",
556
549
  props: /* @__PURE__ */ u({
557
550
  label: {},
@@ -565,21 +558,21 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
565
558
  }),
566
559
  emits: ["update:modelValue"],
567
560
  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", {
561
+ let c = x(t, "modelValue"), l = t, u = K();
562
+ return (f, p) => (h(), i("div", Fe, [t.label ? (h(), i("label", {
570
563
  key: 0,
571
564
  id: `${b(u)}-label`,
572
565
  class: d(["select-label", { "visually-hidden": t.hideLabel }])
573
- }, y(t.label), 11, We)) : r("", !0), s(b(I), {
566
+ }, y(t.label), 11, Ie)) : r("", !0), s(b(P), {
574
567
  modelValue: c.value,
575
568
  "onUpdate:modelValue": p[0] ||= (e) => c.value = e
576
569
  }, {
577
- default: w(() => [s(b(L), {
570
+ default: w(() => [s(b(F), {
578
571
  class: "select-trigger",
579
572
  "aria-labelledby": l.label ? `${b(u)}-label` : void 0,
580
573
  "aria-label": l.label ? void 0 : l.ariaLabel
581
574
  }, {
582
- default: w(() => [s(b(R), { placeholder: t.placeholder }, null, 8, ["placeholder"]), p[1] ||= a("span", {
575
+ default: w(() => [s(b(I), { placeholder: t.placeholder }, null, 8, ["placeholder"]), p[1] ||= a("span", {
583
576
  class: "select-icon",
584
577
  "aria-hidden": "true"
585
578
  }, [a("svg", {
@@ -593,23 +586,23 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
593
586
  "stroke-linejoin": "round"
594
587
  }, [a("path", { d: "M3 4.5L6 7.5L9 4.5" })])], -1)]),
595
588
  _: 1
596
- }, 8, ["aria-labelledby", "aria-label"]), s(b(F), null, {
589
+ }, 8, ["aria-labelledby", "aria-label"]), s(b(re), null, {
597
590
  default: w(() => [s(b(M), {
598
591
  class: "select-content",
599
592
  position: "popper",
600
593
  "side-offset": 4,
601
594
  "body-lock": !1
602
595
  }, {
603
- default: w(() => [s(b(te), { class: "select-viewport" }, {
604
- default: w(() => [(h(!0), i(e, null, _(t.options, (e) => (h(), n(b(N), {
596
+ default: w(() => [s(b(ie), { class: "select-viewport" }, {
597
+ default: w(() => [(h(!0), i(e, null, ee(t.options, (e) => (h(), n(b(N), {
605
598
  key: e.value,
606
599
  value: e.value,
607
600
  class: "select-item"
608
601
  }, {
609
- default: w(() => [s(b(P), null, {
602
+ default: w(() => [s(b(ne), null, {
610
603
  default: w(() => [o(y(e.label), 1)]),
611
604
  _: 2
612
- }, 1024), s(b(ee), { class: "select-indicator" }, {
605
+ }, 1024), s(b(te), { class: "select-indicator" }, {
613
606
  default: w(() => [...p[2] ||= [a("svg", {
614
607
  width: "12",
615
608
  height: "12",
@@ -633,7 +626,7 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
633
626
  _: 1
634
627
  }, 8, ["modelValue"])]));
635
628
  }
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({
629
+ }), [["__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
630
  __name: "SidebarLayout",
638
631
  props: /* @__PURE__ */ u({
639
632
  hideTopbar: { type: Boolean },
@@ -644,85 +637,85 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
644
637
  }),
645
638
  emits: ["update:tab"],
646
639
  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;
640
+ 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);
641
+ function O(e) {
642
+ E.value = e.matches, D.value = e.matches;
650
643
  }
651
644
  p(() => {
652
- E.addEventListener("change", k);
645
+ T.addEventListener("change", O);
653
646
  }), m(() => {
654
- E.removeEventListener("change", k);
647
+ T.removeEventListener("change", O);
655
648
  });
656
- function A() {
657
- O.value = !O.value;
649
+ function k() {
650
+ D.value = !D.value;
658
651
  }
659
- let j = t(() => !!d && S.tabs?.some((e) => e.to)), M = t({
652
+ let A = t(() => !!d && v.tabs?.some((e) => e.to)), j = t({
660
653
  get() {
661
- return T.value ?? S.tabs?.[0]?.value;
654
+ return S.value ?? v.tabs?.[0]?.value;
662
655
  },
663
656
  set(e) {
664
- if (e && (T.value = e, j.value && d)) {
665
- let t = S.tabs?.find((t) => t.value === e);
657
+ if (e && (S.value = e, A.value && d)) {
658
+ let t = v.tabs?.find((t) => t.value === e);
666
659
  t?.to && d.push(t.to);
667
660
  }
668
661
  }
669
662
  });
670
663
  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);
664
+ if (A.value) {
665
+ let e = v.tabs?.find((e) => e.to === f.path);
666
+ e && (S.value = e.value);
674
667
  }
675
668
  }, { immediate: !0 }), (t, l) => (h(), i("div", {
676
669
  class: "SidebarLayout",
677
- "data-collapsed": O.value
678
- }, [a("div", qe, [a("aside", Je, [a("div", Ye, [a("div", Xe, [a("button", {
670
+ "data-collapsed": D.value
671
+ }, [a("div", ze, [a("aside", Be, [a("div", Ve, [a("div", He, [a("button", {
679
672
  type: "button",
680
673
  class: "Toggle",
681
674
  "aria-label": "Collapse sidebar",
682
675
  title: "Collapse sidebar",
683
- onClick: A
684
- }, [s(Q, {
676
+ onClick: k
677
+ }, [s($, {
685
678
  icon: "keyboard_double_arrow_left",
686
679
  size: "sm"
687
- })])]), v(t.$slots, "sidebar", {}, void 0, !0)])]), a("button", {
680
+ })])]), _(t.$slots, "sidebar", {}, void 0, !0)])]), a("button", {
688
681
  type: "button",
689
682
  class: "Toggle Toggle--expand",
690
683
  "aria-label": "Expand sidebar",
691
684
  title: "Expand sidebar",
692
- onClick: A
693
- }, [s(Q, {
685
+ onClick: k
686
+ }, [s($, {
694
687
  icon: "keyboard_double_arrow_right",
695
688
  size: "sm"
696
- })])]), a("main", Ze, [c.tabs?.length ? (h(), n(b(U), {
689
+ })])]), a("main", Ue, [c.tabs?.length ? (h(), n(b(ue), {
697
690
  key: 0,
698
- "model-value": M.value,
691
+ "model-value": j.value,
699
692
  class: "TabsLayout",
700
- "onUpdate:modelValue": l[0] ||= (e) => M.value = e
693
+ "onUpdate:modelValue": l[0] ||= (e) => j.value = e
701
694
  }, {
702
- default: w(() => [a("div", Qe, [
703
- D.value && O.value ? (h(), i("button", {
695
+ default: w(() => [a("div", We, [
696
+ E.value && D.value ? (h(), i("button", {
704
697
  key: 0,
705
698
  type: "button",
706
699
  class: "Toggle",
707
700
  "aria-label": "Expand sidebar",
708
701
  title: "Expand sidebar",
709
- onClick: A
710
- }, [s(Q, {
702
+ onClick: k
703
+ }, [s($, {
711
704
  icon: "keyboard_double_arrow_right",
712
705
  size: "sm"
713
706
  })])) : r("", !0),
714
- s(b(H), {
707
+ s(b(le), {
715
708
  class: "TabsList",
716
709
  "aria-label": "Tabs"
717
710
  }, {
718
- default: w(() => [(h(!0), i(e, null, _(c.tabs, (e) => (h(), n(b(W), {
711
+ default: w(() => [(h(!0), i(e, null, ee(c.tabs, (e) => (h(), n(b(B), {
719
712
  key: e.value,
720
713
  value: e.value,
721
714
  class: "TabsTrigger"
722
715
  }, {
723
716
  default: w(() => [o(y(e.label), 1)]),
724
717
  _: 2
725
- }, 1032, ["value"]))), 128)), s(b(V), {
718
+ }, 1032, ["value"]))), 128)), s(b(z), {
726
719
  class: "TabsIndicator",
727
720
  style: {
728
721
  width: "var(--reka-tabs-indicator-size)",
@@ -731,22 +724,22 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
731
724
  })]),
732
725
  _: 1
733
726
  }),
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)])])]),
727
+ a("div", Ge, [_(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n(Ee, { key: 0 }))])
728
+ ]), a("div", Ke, [a("div", qe, [_(t.$slots, "default", {}, void 0, !0)])])]),
736
729
  _: 3
737
- }, 8, ["model-value"])) : (h(), i(e, { key: 1 }, [a("div", nt, [D.value && O.value ? (h(), i("button", {
730
+ }, 8, ["model-value"])) : (h(), i(e, { key: 1 }, [a("div", Je, [E.value && D.value ? (h(), i("button", {
738
731
  key: 0,
739
732
  type: "button",
740
733
  class: "Toggle",
741
734
  "aria-label": "Expand sidebar",
742
735
  title: "Expand sidebar",
743
- onClick: A
744
- }, [s(Q, {
736
+ onClick: k
737
+ }, [s($, {
745
738
  icon: "keyboard_double_arrow_right",
746
739
  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));
740
+ })])) : 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
741
  }
749
- }), [["__scopeId", "data-v-e0ed7a62"]]), st = ["data-size", "aria-label"], ct = /* @__PURE__ */ c({
742
+ }), [["__scopeId", "data-v-e0ed7a62"]]), $e = ["data-size", "aria-label"], et = /* @__PURE__ */ c({
750
743
  __name: "Spinner",
751
744
  props: {
752
745
  size: { default: "sm" },
@@ -758,12 +751,12 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
758
751
  "data-size": e.size,
759
752
  role: "status",
760
753
  "aria-label": e.label ?? "Loading"
761
- }, null, 8, st));
754
+ }, null, 8, $e));
762
755
  }
763
- }), lt = {
756
+ }), tt = {
764
757
  key: 0,
765
758
  class: "input-label"
766
- }, ut = ["placeholder"], dt = { key: 1 }, ft = ["placeholder"], pt = /* @__PURE__ */ Y(/* @__PURE__ */ c({
759
+ }, nt = ["placeholder"], rt = { key: 1 }, it = ["placeholder"], at = /* @__PURE__ */ q(/* @__PURE__ */ c({
767
760
  __name: "TextInput",
768
761
  props: /* @__PURE__ */ u({
769
762
  label: {},
@@ -784,7 +777,7 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
784
777
  t.value = s.value;
785
778
  }
786
779
  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($, {
780
+ 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
781
  key: 0,
789
782
  text: l.hint
790
783
  }, null, 8, ["text"])) : r("", !0)], 2), T(a("input", {
@@ -793,15 +786,15 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
793
786
  placeholder: l.placeholder,
794
787
  onBlur: c,
795
788
  onKeydown: E(c, ["enter"])
796
- }, null, 40, ut), [[S, s.value]])])) : (h(), i("div", dt, [T(a("input", {
789
+ }, null, 40, nt), [[S, s.value]])])) : (h(), i("div", rt, [T(a("input", {
797
790
  type: "text",
798
791
  "onUpdate:modelValue": t[1] ||= (e) => s.value = e,
799
792
  placeholder: l.placeholder,
800
793
  onBlur: c,
801
794
  onKeydown: E(c, ["enter"])
802
- }, null, 40, ft), [[S, s.value]])]));
795
+ }, null, 40, it), [[S, s.value]])]));
803
796
  }
804
- }), [["__scopeId", "data-v-3f3d20cc"]]), mt = { class: "toggle" }, ht = ["for"], gt = /* @__PURE__ */ Y(/* @__PURE__ */ c({
797
+ }), [["__scopeId", "data-v-3f3d20cc"]]), ot = { class: "toggle" }, st = ["for"], ct = /* @__PURE__ */ q(/* @__PURE__ */ c({
805
798
  __name: "Toggle",
806
799
  props: /* @__PURE__ */ u({
807
800
  label: {},
@@ -813,21 +806,21 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
813
806
  }),
814
807
  emits: ["update:modelValue"],
815
808
  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($, {
809
+ let t = x(e, "modelValue"), o = e, c = K();
810
+ return (l, u) => (h(), i("div", ot, [
811
+ a("label", { for: b(c) }, y(e.label), 9, st),
812
+ o.hint ? (h(), n(we, {
820
813
  key: 0,
821
814
  text: o.hint
822
815
  }, null, 8, ["text"])) : r("", !0),
823
- s(b(z), {
816
+ s(b(L), {
824
817
  id: b(c),
825
818
  modelValue: t.value,
826
819
  "onUpdate:modelValue": u[0] ||= (e) => t.value = e,
827
820
  disabled: e.disabled,
828
821
  class: "switch"
829
822
  }, {
830
- default: w(() => [s(b(B), { class: "thumb" })]),
823
+ default: w(() => [s(b(R), { class: "thumb" })]),
831
824
  _: 1
832
825
  }, 8, [
833
826
  "id",
@@ -838,4 +831,4 @@ var Se = /* @__PURE__ */ Y(/* @__PURE__ */ c({
838
831
  }
839
832
  }), [["__scopeId", "data-v-9916c71e"]]);
840
833
  //#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 };
834
+ 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.18",
4
4
  "type": "module",
5
5
  "description": "Vue 3 UI components for cfasim-ui",
6
6
  "license": "Apache-2.0",