@cfasim-ui/components 0.3.15 → 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 (12) hide show
  1. package/dist/Container/Container.d.ts +25 -0
  2. package/dist/Container/Container.spec.d.ts +1 -0
  3. package/dist/Container/Container.test.d.ts +1 -0
  4. package/dist/Grid/Grid.d.ts +24 -0
  5. package/dist/Grid/Grid.spec.d.ts +1 -0
  6. package/dist/Grid/Grid.test.d.ts +1 -0
  7. package/dist/NumberInput/NumberInput.d.ts +10 -0
  8. package/dist/_internal/gap.d.ts +2 -0
  9. package/dist/index.css +1 -1
  10. package/dist/index.d.ts +5 -0
  11. package/dist/index.js +367 -282
  12. package/package.json +1 -1
package/dist/Container/Container.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { GapToken } from '../_internal/gap';
2
+ export type ContainerGap = GapToken;
3
+ type __VLS_Props = {
4
+ border?: boolean;
5
+ height?: number | string;
6
+ horizontal?: boolean;
7
+ gap?: ContainerGap | string;
8
+ };
9
+ declare function __VLS_template(): {
10
+ attrs: Partial<{}>;
11
+ slots: {
12
+ default?(_: {}): any;
13
+ };
14
+ refs: {};
15
+ rootEl: HTMLDivElement;
16
+ };
17
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
18
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
19
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
20
+ export default _default;
21
+ type __VLS_WithTemplateSlots<T, S> = T & {
22
+ new (): {
23
+ $slots: S;
24
+ };
25
+ };
package/dist/Container/Container.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/Container/Container.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/Grid/Grid.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { GapToken } from '../_internal/gap';
2
+ export type GridGap = GapToken;
3
+ export type GridCols = number | (number | string)[];
4
+ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
5
+ cols?: GridCols;
6
+ colsSmall?: GridCols;
7
+ breakpoint?: string;
8
+ gap?: GridGap | string;
9
+ minColWidth?: string;
10
+ }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
11
+ cols?: GridCols;
12
+ colsSmall?: GridCols;
13
+ breakpoint?: string;
14
+ gap?: GridGap | string;
15
+ minColWidth?: string;
16
+ }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
17
+ default?(_: {}): any;
18
+ }>;
19
+ export default _default;
20
+ type __VLS_WithTemplateSlots<T, S> = T & {
21
+ new (): {
22
+ $slots: S;
23
+ };
24
+ };
package/dist/Grid/Grid.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/Grid/Grid.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
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/_internal/gap.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type GapToken = "none" | "small" | "medium" | "large";
2
+ export declare function resolveGap(gap: GapToken | string | undefined, fallback?: GapToken): string;
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)}.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}}.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
@@ -1,11 +1,16 @@
1
1
  export { default as Box } from './Box/Box';
2
2
  export type { BoxVariant } from './Box/Box';
3
3
  export { default as Button } from './Button/Button';
4
+ export { default as Container } from './Container/Container';
5
+ export type { ContainerGap } from './Container/Container';
4
6
  export { default as Expander } from './Expander/Expander';
7
+ export { default as Grid } from './Grid/Grid';
8
+ export type { GridCols, GridGap } from './Grid/Grid';
5
9
  export { default as Hint } from './Hint/Hint';
6
10
  export { default as Icon } from './Icon/Icon';
7
11
  export { default as LightDarkToggle } from './LightDarkToggle/LightDarkToggle';
8
12
  export { default as NumberInput } from './NumberInput/NumberInput';
13
+ export type { NumberRange } from './NumberInput/NumberInput';
9
14
  export { default as SelectBox } from './SelectBox/SelectBox';
10
15
  export type { SelectOption } from './SelectBox/SelectBox';
11
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 P, SelectItemText as F, SelectPortal as I, SelectRoot as L, SelectTrigger as R, SelectValue as z, SelectViewport as ee, SliderRange as te, SliderRoot as ne, SliderThumb as re, SliderTrack as ie, SwitchRoot as B, SwitchThumb as V, TabsIndicator as H, TabsList as U, TabsRoot as W, TabsTrigger as G, TooltipArrow as K, TooltipContent as q, TooltipPortal as J, TooltipProvider as Y, TooltipRoot as ae, TooltipTrigger as oe, useId as se } 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 ce = ["role"], le = /* @__PURE__ */ c({
4
+ var fe = ["role"], pe = /* @__PURE__ */ c({
5
5
  __name: "Box",
6
6
  props: {
7
7
  variant: {},
@@ -17,13 +17,13 @@ var ce = ["role"], le = /* @__PURE__ */ c({
17
17
  color: e.textColor
18
18
  }),
19
19
  role: e.role
20
- }, [v(t.$slots, "default", {}, void 0, !0)], 14, ce));
20
+ }, [_(t.$slots, "default", {}, void 0, !0)], 14, fe));
21
21
  }
22
- }), X = (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
- }, ue = /* @__PURE__ */ X(le, [["__scopeId", "data-v-d7342c02"]]), de = /* @__PURE__ */ X(/* @__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 ce = ["role"], le = /* @__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,7 +48,43 @@ var ce = ["role"], le = /* @__PURE__ */ c({
48
48
  "as-child"
49
49
  ]));
50
50
  }
51
- }), [["__scopeId", "data-v-250eab18"]]), fe = /* @__PURE__ */ X(/* @__PURE__ */ c({
51
+ }), [["__scopeId", "data-v-250eab18"]]), he = {
52
+ none: "0",
53
+ small: "var(--space-2)",
54
+ medium: "var(--space-4)",
55
+ large: "var(--space-6)"
56
+ };
57
+ function Y(e, t = "medium") {
58
+ return e == null ? he[t] : e in he ? he[e] : e;
59
+ }
60
+ //#endregion
61
+ //#region src/Container/Container.vue
62
+ var X = /* @__PURE__ */ q(/* @__PURE__ */ c({
63
+ __name: "Container",
64
+ props: {
65
+ border: { type: Boolean },
66
+ height: {},
67
+ horizontal: { type: Boolean },
68
+ gap: {}
69
+ },
70
+ setup(e) {
71
+ let n = e, r = t(() => Y(n.gap)), a = t(() => {
72
+ let e = n.height;
73
+ if (e != null) return typeof e == "number" ? `${e}px` : e;
74
+ });
75
+ return (t, n) => (h(), i("div", {
76
+ class: d(["container", {
77
+ "container-border": e.border,
78
+ "container-horizontal": e.horizontal,
79
+ "container-scrollable": e.height != null
80
+ }]),
81
+ style: f({
82
+ gap: r.value,
83
+ height: a.value
84
+ })
85
+ }, [_(t.$slots, "default", {}, void 0, !0)], 6));
86
+ }
87
+ }), [["__scopeId", "data-v-bff01edb"]]), Z = /* @__PURE__ */ q(/* @__PURE__ */ c({
52
88
  __name: "Expander",
53
89
  props: /* @__PURE__ */ u({ label: {} }, {
54
90
  open: {
@@ -66,23 +102,81 @@ var ce = ["role"], le = /* @__PURE__ */ c({
66
102
  class: "expander"
67
103
  }, {
68
104
  default: w(() => [s(b(A), { class: "expander-trigger" }, {
69
- 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)]),
70
106
  _: 3
71
107
  }), s(b(O), { class: "expander-content" }, {
72
- default: w(() => [v(r.$slots, "default", {}, void 0, !0)]),
108
+ default: w(() => [_(r.$slots, "default", {}, void 0, !0)]),
73
109
  _: 3
74
110
  })]),
75
111
  _: 3
76
112
  }, 8, ["open"]));
77
113
  }
78
- }), [["__scopeId", "data-v-39e4acd0"]]), pe = [
114
+ }), [["__scopeId", "data-v-39e4acd0"]]), ge = ["data-cfasim-grid-bp"], _e = "640px";
115
+ function ve(e) {
116
+ return typeof e == "number" ? `repeat(${e}, 1fr)` : e.map((e) => typeof e == "number" ? `${e}fr` : e).join(" ");
117
+ }
118
+ function ye(e) {
119
+ return /^\d+(\.\d+)?[a-zA-Z%]+$/.test(e) ? e : _e;
120
+ }
121
+ var Q = /* @__PURE__ */ new Map();
122
+ function be(e) {
123
+ if (typeof document > "u") return;
124
+ let t = Q.get(e);
125
+ if (t) {
126
+ t.count++;
127
+ return;
128
+ }
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), Q.set(e, {
131
+ count: 1,
132
+ el: n
133
+ });
134
+ }
135
+ function xe(e) {
136
+ if (typeof document > "u") return;
137
+ let t = Q.get(e);
138
+ t && (t.count--, t.count === 0 && (t.el.remove(), Q.delete(e)));
139
+ }
140
+ (void 0)?.dispose(() => {
141
+ Q.forEach(({ el: e }) => e.remove()), Q.clear();
142
+ });
143
+ //#endregion
144
+ //#region src/Grid/Grid.vue
145
+ var Se = /* @__PURE__ */ q(/* @__PURE__ */ c({
146
+ __name: "Grid",
147
+ props: {
148
+ cols: {},
149
+ colsSmall: {},
150
+ breakpoint: {},
151
+ gap: {},
152
+ minColWidth: {}
153
+ },
154
+ setup(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
+ l !== e && (be(e), l && xe(l), l = e);
157
+ }, { immediate: !0 });
158
+ return m(() => {
159
+ u(), l &&= (xe(l), null);
160
+ }), (e, t) => (h(), i("div", {
161
+ "data-cfasim-grid-bp": c.value,
162
+ class: "grid-wrapper"
163
+ }, [a("div", {
164
+ class: "grid",
165
+ style: f({
166
+ gap: r.value,
167
+ gridTemplateColumns: o.value,
168
+ "--grid-cols-small": s.value
169
+ })
170
+ }, [_(e.$slots, "default", {}, void 0, !0)], 4)], 8, ge));
171
+ }
172
+ }), [["__scopeId", "data-v-7ae87f0f"]]), Ce = [
79
173
  "data-size",
80
174
  "data-fill",
81
175
  "data-inline",
82
176
  "aria-hidden",
83
177
  "aria-label",
84
178
  "role"
85
- ], Z = /* @__PURE__ */ c({
179
+ ], $ = /* @__PURE__ */ c({
86
180
  __name: "Icon",
87
181
  props: {
88
182
  icon: {},
@@ -117,35 +211,35 @@ var ce = ["role"], le = /* @__PURE__ */ c({
117
211
  "aria-hidden": e.decorative ? !0 : void 0,
118
212
  "aria-label": e.decorative ? void 0 : e.ariaLabel,
119
213
  role: e.decorative ? void 0 : "img"
120
- }, y(e.icon), 13, pe));
214
+ }, y(e.icon), 13, Ce));
121
215
  }
122
- }), Q = /* @__PURE__ */ X(/* @__PURE__ */ c({
216
+ }), we = /* @__PURE__ */ q(/* @__PURE__ */ c({
123
217
  __name: "Hint",
124
218
  props: { text: {} },
125
219
  setup(e) {
126
- return (t, r) => (h(), n(b(Y), null, {
127
- default: w(() => [s(b(ae), {
220
+ return (t, r) => (h(), n(b(U), null, {
221
+ default: w(() => [s(b(W), {
128
222
  "delay-duration": 0,
129
223
  "disable-closing-trigger": ""
130
224
  }, {
131
- default: w(() => [s(b(oe), { "as-child": "" }, {
225
+ default: w(() => [s(b(G), { "as-child": "" }, {
132
226
  default: w(() => [a("button", {
133
227
  type: "button",
134
228
  class: "HintTrigger",
135
229
  "aria-label": "More info",
136
230
  onPointerdown: r[0] ||= D(() => {}, ["prevent"])
137
- }, [s(Z, {
231
+ }, [s($, {
138
232
  icon: "help",
139
233
  size: 16
140
234
  })], 32)]),
141
235
  _: 1
142
- }), s(b(J), null, {
143
- default: w(() => [s(b(q), {
236
+ }), s(b(H), null, {
237
+ default: w(() => [s(b(de), {
144
238
  class: "HintContent",
145
239
  side: "top",
146
240
  "side-offset": 4
147
241
  }, {
148
- default: w(() => [o(y(e.text) + " ", 1), s(b(K), {
242
+ default: w(() => [o(y(e.text) + " ", 1), s(b(V), {
149
243
  class: "HintArrow",
150
244
  width: 10,
151
245
  height: 5
@@ -159,7 +253,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
159
253
  _: 1
160
254
  }));
161
255
  }
162
- }), [["__scopeId", "data-v-9dbf1c25"]]), me = ["aria-label"], $ = /* @__PURE__ */ X(/* @__PURE__ */ c({
256
+ }), [["__scopeId", "data-v-9dbf1c25"]]), Te = ["aria-label"], Ee = /* @__PURE__ */ q(/* @__PURE__ */ c({
163
257
  __name: "LightDarkToggle",
164
258
  setup(e) {
165
259
  let t = g(window.matchMedia("(prefers-color-scheme: dark)").matches);
@@ -171,53 +265,31 @@ var ce = ["role"], le = /* @__PURE__ */ c({
171
265
  type: "button",
172
266
  "aria-label": t.value ? "Switch to light mode" : "Switch to dark mode",
173
267
  onClick: n[0] ||= (e) => t.value = !t.value
174
- }, [s(Z, {
268
+ }, [s($, {
175
269
  icon: t.value ? "dark_mode" : "light_mode",
176
270
  size: "sm"
177
- }, null, 8, ["icon"])], 8, me));
271
+ }, null, 8, ["icon"])], 8, Te));
178
272
  }
179
- }), [["__scopeId", "data-v-4c423498"]]), he = {
180
- key: 0,
181
- class: "input-label"
182
- }, ge = {
183
- key: 0,
184
- class: "input-wrapper"
185
- }, _e = [
186
- "inputmode",
187
- "placeholder",
188
- "aria-invalid",
189
- "aria-required",
190
- "required"
191
- ], ve = {
192
- key: 0,
193
- class: "input-suffix"
194
- }, ye = {
273
+ }), [["__scopeId", "data-v-4c423498"]]), De = {
195
274
  key: 1,
196
- class: "input-error",
197
- role: "alert"
198
- }, be = {
199
- key: 2,
200
- class: "slider-container"
201
- }, xe = { class: "slider-current" }, Se = { class: "slider-labels" }, Ce = { key: 1 }, we = {
202
- key: 0,
203
275
  class: "input-wrapper"
204
- }, Te = [
276
+ }, Oe = [
205
277
  "inputmode",
206
278
  "placeholder",
207
279
  "aria-invalid",
208
280
  "aria-required",
209
281
  "required"
210
- ], Ee = {
282
+ ], ke = {
211
283
  key: 0,
212
284
  class: "input-suffix"
213
- }, De = {
214
- key: 1,
285
+ }, Ae = {
286
+ key: 2,
215
287
  class: "input-error",
216
288
  role: "alert"
217
- }, Oe = {
218
- key: 2,
289
+ }, je = {
290
+ key: 3,
219
291
  class: "slider-container"
220
- }, ke = { class: "slider-current" }, Ae = { class: "slider-labels" }, je = /* @__PURE__ */ X(/* @__PURE__ */ c({
292
+ }, Me = { class: "slider-current" }, Ne = { class: "slider-labels" }, Pe = /* @__PURE__ */ q(/* @__PURE__ */ c({
221
293
  __name: "NumberInput",
222
294
  props: /* @__PURE__ */ u({
223
295
  label: {},
@@ -235,72 +307,108 @@ var ce = ["role"], le = /* @__PURE__ */ c({
235
307
  decimals: {}
236
308
  }, {
237
309
  modelValue: {},
238
- modelModifiers: {}
310
+ modelModifiers: {},
311
+ range: {},
312
+ rangeModifiers: {},
313
+ lower: {},
314
+ lowerModifiers: {},
315
+ upper: {},
316
+ upperModifiers: {}
239
317
  }),
240
- emits: ["update:modelValue"],
241
- setup(e) {
242
- 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));
243
- 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) {
244
335
  if (!Number.isFinite(e) || Number.isInteger(e)) return 0;
245
336
  let t = parseFloat(Math.abs(e).toPrecision(12)).toString(), n = t.indexOf(".");
246
337
  if (n !== -1) return t.length - n - 1;
247
338
  let r = t.indexOf("e-");
248
339
  return r === -1 ? 0 : Number(t.slice(r + 2));
249
340
  }
250
- 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));
251
- 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) {
252
343
  let n = 10 ** t;
253
344
  return Math.round(e * n) / n;
254
345
  }
255
- function A(e) {
346
+ function L(e) {
256
347
  if (e == null) return "";
257
- let t = O.value;
258
- 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", {
259
350
  minimumFractionDigits: t,
260
351
  maximumFractionDigits: t
261
352
  });
262
353
  }
263
- function j(e) {
264
- 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);
265
356
  }
266
- function M(e) {
267
- return l.percent ? e / 100 : e;
357
+ function z(e) {
358
+ return D.percent ? e / 100 : e;
268
359
  }
269
- function N(e) {
270
- if (l.numberType !== "integer") return e;
271
- let t = j(e);
272
- 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));
273
364
  }
274
- function P(e) {
365
+ function ue(e) {
275
366
  return e == null ? "" : e.toLocaleString("en-US");
276
367
  }
277
- function F(e) {
368
+ function B(e) {
278
369
  if (e == null) return "";
279
- let t = O.value;
370
+ let t = I.value;
280
371
  if (t > 0) return e.toLocaleString("en-US", {
281
372
  minimumFractionDigits: t,
282
373
  maximumFractionDigits: t
283
374
  });
284
- let n = P(e);
285
- 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;
286
377
  }
287
- function I(e) {
378
+ function V(e) {
288
379
  return e.replace(/,/g, "");
289
380
  }
290
- let L = g(F(j(c.value))), R = g(c.value), z = g();
291
- C(c, (e) => {
292
- L.value = F(j(e)), R.value = e, z.value = G(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);
293
401
  });
294
- let ee = /[^0-9,.\-+eE]/g;
295
- function B(e) {
296
- let t = e.target, n = I(t.value);
402
+ let fe = /[^0-9,.\-+eE]/g;
403
+ function pe(e) {
404
+ let t = e.target, n = V(t.value);
297
405
  if (n === "" || n === "-" || n.endsWith(".") || n.includes(".") && n.endsWith("0")) return;
298
406
  let r = Number(n);
299
407
  if (Number.isNaN(r)) return;
300
- let i = P(r);
408
+ let i = ue(r);
301
409
  if (i === t.value) return;
302
410
  let a = t.selectionStart ?? 0, o = (t.value.slice(0, a).match(/,/g) || []).length;
303
- L.value = i, requestAnimationFrame(() => {
411
+ U.value = i, requestAnimationFrame(() => {
304
412
  let e = a - o, n = 0, r = 0;
305
413
  for (let t = 0; t < i.length; t++) if (i[t] !== "," && r++, r >= e) {
306
414
  n = t + 1;
@@ -309,155 +417,132 @@ var ce = ["role"], le = /* @__PURE__ */ c({
309
417
  r < e && (n = i.length), t.setSelectionRange(n, n);
310
418
  });
311
419
  }
312
- function V() {
313
- if (K(), L.value.trim() === "") return;
314
- let e = Number(I(L.value));
315
- Number.isNaN(e) || (L.value = F(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));
424
+ }
425
+ let J = null;
426
+ function me() {
427
+ !D.live || j.value || (J && clearTimeout(J), J = setTimeout(Z, 300));
316
428
  }
317
- let H = null;
318
- function U() {
319
- !l.live || l.slider || (H && clearTimeout(H), H = setTimeout(K, 300));
429
+ function he() {
430
+ !D.live || j.value || (J && clearTimeout(J), Z());
320
431
  }
321
- function W() {
322
- !l.live || l.slider || (H && clearTimeout(H), K());
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 ? "%" : ""}`;
323
436
  }
324
- function G(e) {
325
- if (e == null) return l.required ? "Required" : void 0;
326
- let t = j(e);
327
- if (v.value != null && t < v.value) return `Min ${v.value}${l.percent ? "%" : ""}`;
328
- if (D.value != null && t > D.value) return `Max ${D.value}${l.percent ? "%" : ""}`;
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);
329
446
  }
330
- function K() {
331
- if (L.value.trim() === "") {
332
- c.value = void 0, R.value = void 0, z.value = G(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);
333
451
  return;
334
452
  }
335
- let e = L.value.replace(ee, "");
336
- if (!/\d/.test(e)) {
337
- L.value = F(j(c.value)), z.value = G(c.value);
453
+ let t = U.value.replace(fe, "");
454
+ if (!/\d/.test(t)) {
455
+ U.value = B(R(e)), K.value = X(e);
338
456
  return;
339
457
  }
340
- e !== L.value && (L.value = e);
341
- let t = Number(I(e));
342
- if (Number.isNaN(t)) return;
343
- l.numberType === "integer" && (t = Math.trunc(t), L.value = F(t));
344
- let n = M(t), r = G(n);
345
- z.value = r, !r && (c.value = n, R.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]);
346
468
  }
347
- function q(e) {
348
- if (!e) return;
349
- let t = N(e[0]);
350
- R.value = t, L.value = F(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;
351
471
  }
352
- function J(e) {
353
- e && (c.value = N(e[0]));
472
+ function ve(e) {
473
+ e && ge(e, !!D.live);
354
474
  }
355
- function Y(e, t) {
475
+ function ye(e) {
476
+ e && ge(e, !0);
477
+ }
478
+ function Q(e, t) {
356
479
  e.preventDefault();
357
- let n = Number(I(L.value)), r = (Number.isNaN(n) ? 0 : n) + _.value * (e.shiftKey ? 10 : 1) * t;
358
- 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)), L.value = F(r), c.value = M(r), R.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];
359
484
  }
360
- return (e, t) => l.label ? (h(), i("label", he, [
361
- a("span", { class: d(["input-label-row", { "visually-hidden": l.hideLabel }]) }, [o(y(l.label) + " ", 1), l.hint && !l.hideLabel ? (h(), n(Q, {
362
- key: 0,
363
- text: l.hint
364
- }, null, 8, ["text"])) : r("", !0)], 2),
365
- l.slider ? r("", !0) : (h(), i("span", ge, [T(a("input", {
366
- type: "text",
367
- inputmode: l.numberType === "integer" ? "numeric" : "decimal",
368
- "onUpdate:modelValue": t[0] ||= (e) => L.value = e,
369
- placeholder: l.placeholder,
370
- "aria-invalid": !!z.value,
371
- "aria-required": l.required || void 0,
372
- required: l.required,
373
- onBlur: V,
374
- onKeydown: [
375
- E(K, ["enter"]),
376
- t[1] ||= E((e) => Y(e, 1), ["up"]),
377
- t[2] ||= E((e) => Y(e, -1), ["down"])
378
- ],
379
- onInput: t[3] ||= (e) => {
380
- B(e), U();
381
- },
382
- onChange: W
383
- }, null, 40, _e), [[S, L.value]]), l.percent ? (h(), i("span", ve, "%")) : r("", !0)])),
384
- z.value ? (h(), i("span", ye, y(z.value), 1)) : r("", !0),
385
- l.slider ? (h(), i("div", be, [s(b(ne), {
386
- class: "slider-root",
387
- "model-value": R.value == null ? [u.value] : [R.value],
388
- min: u.value,
389
- max: f.value,
390
- step: p.value,
391
- "onUpdate:modelValue": q,
392
- onValueCommit: J
393
- }, {
394
- default: w(() => [s(b(ie), { class: "slider-track" }, {
395
- default: w(() => [s(b(te), { class: "slider-range" })]),
396
- _: 1
397
- }), s(b(re), {
398
- class: "slider-thumb",
399
- "aria-label": l.label
400
- }, {
401
- default: w(() => [a("span", xe, y(A(R.value)), 1)]),
402
- _: 1
403
- }, 8, ["aria-label"])]),
404
- _: 1
405
- }, 8, [
406
- "model-value",
407
- "min",
408
- "max",
409
- "step"
410
- ]), a("div", Se, [a("span", null, y(A(u.value)), 1), a("span", null, y(A(f.value)), 1)])])) : r("", !0)
411
- ])) : (h(), i("div", Ce, [
412
- l.slider ? r("", !0) : (h(), i("span", we, [T(a("input", {
413
- type: "text",
414
- inputmode: l.numberType === "integer" ? "numeric" : "decimal",
415
- "onUpdate:modelValue": t[4] ||= (e) => L.value = e,
416
- placeholder: l.placeholder,
417
- "aria-invalid": !!z.value,
418
- "aria-required": l.required || void 0,
419
- required: l.required,
420
- onBlur: V,
421
- onKeydown: [
422
- E(K, ["enter"]),
423
- t[5] ||= E((e) => Y(e, 1), ["up"]),
424
- t[6] ||= E((e) => Y(e, -1), ["down"])
425
- ],
426
- onInput: t[7] ||= (e) => {
427
- B(e), U();
428
- },
429
- onChange: W
430
- }, null, 40, Te), [[S, L.value]]), l.percent ? (h(), i("span", Ee, "%")) : r("", !0)])),
431
- z.value ? (h(), i("span", De, y(z.value), 1)) : r("", !0),
432
- l.slider ? (h(), i("div", Oe, [s(b(ne), {
433
- class: "slider-root",
434
- "model-value": R.value == null ? [u.value] : [R.value],
435
- min: u.value,
436
- max: f.value,
437
- step: p.value,
438
- "onUpdate:modelValue": q,
439
- onValueCommit: J
440
- }, {
441
- default: w(() => [s(b(ie), { class: "slider-track" }, {
442
- default: w(() => [s(b(te), { class: "slider-range" })]),
443
- _: 1
444
- }), s(b(re), {
445
- class: "slider-thumb",
446
- "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
447
522
  }, {
448
- default: w(() => [a("span", ke, y(A(R.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))]),
449
534
  _: 1
450
- }, 8, ["aria-label"])]),
451
- _: 1
452
- }, 8, [
453
- "model-value",
454
- "min",
455
- "max",
456
- "step"
457
- ]), a("div", Ae, [a("span", null, y(A(u.value)), 1), a("span", null, y(A(f.value)), 1)])])) : r("", !0)
458
- ]));
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"]));
459
544
  }
460
- }), [["__scopeId", "data-v-10b86a5d"]]), Me = { class: "select-box" }, Ne = ["id"], Pe = /* @__PURE__ */ X(/* @__PURE__ */ c({
545
+ }), [["__scopeId", "data-v-7056d705"]]), Fe = { class: "select-box" }, Ie = ["id"], Le = /* @__PURE__ */ q(/* @__PURE__ */ c({
461
546
  __name: "SelectBox",
462
547
  props: /* @__PURE__ */ u({
463
548
  label: {},
@@ -471,21 +556,21 @@ var ce = ["role"], le = /* @__PURE__ */ c({
471
556
  }),
472
557
  emits: ["update:modelValue"],
473
558
  setup(t) {
474
- let c = x(t, "modelValue"), l = t, u = se();
475
- return (f, p) => (h(), i("div", Me, [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", {
476
561
  key: 0,
477
562
  id: `${b(u)}-label`,
478
563
  class: d(["select-label", { "visually-hidden": t.hideLabel }])
479
- }, y(t.label), 11, Ne)) : r("", !0), s(b(L), {
564
+ }, y(t.label), 11, Ie)) : r("", !0), s(b(P), {
480
565
  modelValue: c.value,
481
566
  "onUpdate:modelValue": p[0] ||= (e) => c.value = e
482
567
  }, {
483
- default: w(() => [s(b(R), {
568
+ default: w(() => [s(b(F), {
484
569
  class: "select-trigger",
485
570
  "aria-labelledby": l.label ? `${b(u)}-label` : void 0,
486
571
  "aria-label": l.label ? void 0 : l.ariaLabel
487
572
  }, {
488
- default: w(() => [s(b(z), { 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", {
489
574
  class: "select-icon",
490
575
  "aria-hidden": "true"
491
576
  }, [a("svg", {
@@ -499,23 +584,23 @@ var ce = ["role"], le = /* @__PURE__ */ c({
499
584
  "stroke-linejoin": "round"
500
585
  }, [a("path", { d: "M3 4.5L6 7.5L9 4.5" })])], -1)]),
501
586
  _: 1
502
- }, 8, ["aria-labelledby", "aria-label"]), s(b(I), null, {
587
+ }, 8, ["aria-labelledby", "aria-label"]), s(b(re), null, {
503
588
  default: w(() => [s(b(M), {
504
589
  class: "select-content",
505
590
  position: "popper",
506
591
  "side-offset": 4,
507
592
  "body-lock": !1
508
593
  }, {
509
- default: w(() => [s(b(ee), { class: "select-viewport" }, {
510
- 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), {
511
596
  key: e.value,
512
597
  value: e.value,
513
598
  class: "select-item"
514
599
  }, {
515
- default: w(() => [s(b(F), null, {
600
+ default: w(() => [s(b(ne), null, {
516
601
  default: w(() => [o(y(e.label), 1)]),
517
602
  _: 2
518
- }, 1024), s(b(P), { class: "select-indicator" }, {
603
+ }, 1024), s(b(te), { class: "select-indicator" }, {
519
604
  default: w(() => [...p[2] ||= [a("svg", {
520
605
  width: "12",
521
606
  height: "12",
@@ -539,7 +624,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
539
624
  _: 1
540
625
  }, 8, ["modelValue"])]));
541
626
  }
542
- }), [["__scopeId", "data-v-63876437"]]), Fe = ["data-collapsed"], Ie = { class: "SidebarRail" }, Le = { class: "Sidebar" }, Re = { class: "SidebarScroll" }, ze = { class: "SidebarHeader" }, Be = { class: "Main" }, Ve = { class: "TabsBar" }, He = { class: "TabsBarEnd" }, Ue = { class: "MainScroll" }, We = { class: "MainContent" }, Ge = { class: "Topbar" }, Ke = { class: "TopbarEnd" }, qe = { class: "MainScroll" }, Je = { class: "MainContent" }, Ye = /* @__PURE__ */ X(/* @__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({
543
628
  __name: "SidebarLayout",
544
629
  props: /* @__PURE__ */ u({
545
630
  hideTopbar: { type: Boolean },
@@ -550,85 +635,85 @@ var ce = ["role"], le = /* @__PURE__ */ c({
550
635
  }),
551
636
  emits: ["update:tab"],
552
637
  setup(c) {
553
- 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);
554
- function k(e) {
555
- 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;
556
641
  }
557
642
  p(() => {
558
- E.addEventListener("change", k);
643
+ T.addEventListener("change", O);
559
644
  }), m(() => {
560
- E.removeEventListener("change", k);
645
+ T.removeEventListener("change", O);
561
646
  });
562
- function A() {
563
- O.value = !O.value;
647
+ function k() {
648
+ D.value = !D.value;
564
649
  }
565
- 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({
566
651
  get() {
567
- return T.value ?? S.tabs?.[0]?.value;
652
+ return S.value ?? v.tabs?.[0]?.value;
568
653
  },
569
654
  set(e) {
570
- if (e && (T.value = e, j.value && d)) {
571
- 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);
572
657
  t?.to && d.push(t.to);
573
658
  }
574
659
  }
575
660
  });
576
661
  return f && C(() => f.path, () => {
577
- if (j.value) {
578
- let e = S.tabs?.find((e) => e.to === f.path);
579
- 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);
580
665
  }
581
666
  }, { immediate: !0 }), (t, l) => (h(), i("div", {
582
667
  class: "SidebarLayout",
583
- "data-collapsed": O.value
584
- }, [a("div", Ie, [a("aside", Le, [a("div", Re, [a("div", ze, [a("button", {
668
+ "data-collapsed": D.value
669
+ }, [a("div", ze, [a("aside", Be, [a("div", Ve, [a("div", He, [a("button", {
585
670
  type: "button",
586
671
  class: "Toggle",
587
672
  "aria-label": "Collapse sidebar",
588
673
  title: "Collapse sidebar",
589
- onClick: A
590
- }, [s(Z, {
674
+ onClick: k
675
+ }, [s($, {
591
676
  icon: "keyboard_double_arrow_left",
592
677
  size: "sm"
593
- })])]), v(t.$slots, "sidebar", {}, void 0, !0)])]), a("button", {
678
+ })])]), _(t.$slots, "sidebar", {}, void 0, !0)])]), a("button", {
594
679
  type: "button",
595
680
  class: "Toggle Toggle--expand",
596
681
  "aria-label": "Expand sidebar",
597
682
  title: "Expand sidebar",
598
- onClick: A
599
- }, [s(Z, {
683
+ onClick: k
684
+ }, [s($, {
600
685
  icon: "keyboard_double_arrow_right",
601
686
  size: "sm"
602
- })])]), a("main", Be, [c.tabs?.length ? (h(), n(b(W), {
687
+ })])]), a("main", Ue, [c.tabs?.length ? (h(), n(b(ue), {
603
688
  key: 0,
604
- "model-value": M.value,
689
+ "model-value": j.value,
605
690
  class: "TabsLayout",
606
- "onUpdate:modelValue": l[0] ||= (e) => M.value = e
691
+ "onUpdate:modelValue": l[0] ||= (e) => j.value = e
607
692
  }, {
608
- default: w(() => [a("div", Ve, [
609
- D.value && O.value ? (h(), i("button", {
693
+ default: w(() => [a("div", We, [
694
+ E.value && D.value ? (h(), i("button", {
610
695
  key: 0,
611
696
  type: "button",
612
697
  class: "Toggle",
613
698
  "aria-label": "Expand sidebar",
614
699
  title: "Expand sidebar",
615
- onClick: A
616
- }, [s(Z, {
700
+ onClick: k
701
+ }, [s($, {
617
702
  icon: "keyboard_double_arrow_right",
618
703
  size: "sm"
619
704
  })])) : r("", !0),
620
- s(b(U), {
705
+ s(b(le), {
621
706
  class: "TabsList",
622
707
  "aria-label": "Tabs"
623
708
  }, {
624
- default: w(() => [(h(!0), i(e, null, _(c.tabs, (e) => (h(), n(b(G), {
709
+ default: w(() => [(h(!0), i(e, null, ee(c.tabs, (e) => (h(), n(b(B), {
625
710
  key: e.value,
626
711
  value: e.value,
627
712
  class: "TabsTrigger"
628
713
  }, {
629
714
  default: w(() => [o(y(e.label), 1)]),
630
715
  _: 2
631
- }, 1032, ["value"]))), 128)), s(b(H), {
716
+ }, 1032, ["value"]))), 128)), s(b(z), {
632
717
  class: "TabsIndicator",
633
718
  style: {
634
719
  width: "var(--reka-tabs-indicator-size)",
@@ -637,22 +722,22 @@ var ce = ["role"], le = /* @__PURE__ */ c({
637
722
  })]),
638
723
  _: 1
639
724
  }),
640
- a("div", He, [v(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n($, { key: 0 }))])
641
- ]), a("div", Ue, [a("div", We, [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)])])]),
642
727
  _: 3
643
- }, 8, ["model-value"])) : (h(), i(e, { key: 1 }, [a("div", Ge, [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", {
644
729
  key: 0,
645
730
  type: "button",
646
731
  class: "Toggle",
647
732
  "aria-label": "Expand sidebar",
648
733
  title: "Expand sidebar",
649
- onClick: A
650
- }, [s(Z, {
734
+ onClick: k
735
+ }, [s($, {
651
736
  icon: "keyboard_double_arrow_right",
652
737
  size: "sm"
653
- })])) : r("", !0), a("div", Ke, [v(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n($, { key: 0 }))])]), a("div", qe, [a("div", Je, [v(t.$slots, "default", {}, void 0, !0)])])], 64))])], 8, Fe));
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));
654
739
  }
655
- }), [["__scopeId", "data-v-e0ed7a62"]]), Xe = ["data-size", "aria-label"], Ze = /* @__PURE__ */ c({
740
+ }), [["__scopeId", "data-v-e0ed7a62"]]), $e = ["data-size", "aria-label"], et = /* @__PURE__ */ c({
656
741
  __name: "Spinner",
657
742
  props: {
658
743
  size: { default: "sm" },
@@ -664,12 +749,12 @@ var ce = ["role"], le = /* @__PURE__ */ c({
664
749
  "data-size": e.size,
665
750
  role: "status",
666
751
  "aria-label": e.label ?? "Loading"
667
- }, null, 8, Xe));
752
+ }, null, 8, $e));
668
753
  }
669
- }), Qe = {
754
+ }), tt = {
670
755
  key: 0,
671
756
  class: "input-label"
672
- }, $e = ["placeholder"], et = { key: 1 }, tt = ["placeholder"], nt = /* @__PURE__ */ X(/* @__PURE__ */ c({
757
+ }, nt = ["placeholder"], rt = { key: 1 }, it = ["placeholder"], at = /* @__PURE__ */ q(/* @__PURE__ */ c({
673
758
  __name: "TextInput",
674
759
  props: /* @__PURE__ */ u({
675
760
  label: {},
@@ -690,7 +775,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
690
775
  t.value = s.value;
691
776
  }
692
777
  let l = e;
693
- return (e, t) => l.label ? (h(), i("label", Qe, [a("span", { class: d(["input-label-row", { "visually-hidden": l.hideLabel }]) }, [o(y(l.label) + " ", 1), l.hint && !l.hideLabel ? (h(), n(Q, {
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, {
694
779
  key: 0,
695
780
  text: l.hint
696
781
  }, null, 8, ["text"])) : r("", !0)], 2), T(a("input", {
@@ -699,15 +784,15 @@ var ce = ["role"], le = /* @__PURE__ */ c({
699
784
  placeholder: l.placeholder,
700
785
  onBlur: c,
701
786
  onKeydown: E(c, ["enter"])
702
- }, null, 40, $e), [[S, s.value]])])) : (h(), i("div", et, [T(a("input", {
787
+ }, null, 40, nt), [[S, s.value]])])) : (h(), i("div", rt, [T(a("input", {
703
788
  type: "text",
704
789
  "onUpdate:modelValue": t[1] ||= (e) => s.value = e,
705
790
  placeholder: l.placeholder,
706
791
  onBlur: c,
707
792
  onKeydown: E(c, ["enter"])
708
- }, null, 40, tt), [[S, s.value]])]));
793
+ }, null, 40, it), [[S, s.value]])]));
709
794
  }
710
- }), [["__scopeId", "data-v-3f3d20cc"]]), rt = { class: "toggle" }, it = ["for"], at = /* @__PURE__ */ X(/* @__PURE__ */ c({
795
+ }), [["__scopeId", "data-v-3f3d20cc"]]), ot = { class: "toggle" }, st = ["for"], ct = /* @__PURE__ */ q(/* @__PURE__ */ c({
711
796
  __name: "Toggle",
712
797
  props: /* @__PURE__ */ u({
713
798
  label: {},
@@ -719,21 +804,21 @@ var ce = ["role"], le = /* @__PURE__ */ c({
719
804
  }),
720
805
  emits: ["update:modelValue"],
721
806
  setup(e) {
722
- let t = x(e, "modelValue"), o = e, c = se();
723
- return (l, u) => (h(), i("div", rt, [
724
- a("label", { for: b(c) }, y(e.label), 9, it),
725
- o.hint ? (h(), n(Q, {
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, {
726
811
  key: 0,
727
812
  text: o.hint
728
813
  }, null, 8, ["text"])) : r("", !0),
729
- s(b(B), {
814
+ s(b(L), {
730
815
  id: b(c),
731
816
  modelValue: t.value,
732
817
  "onUpdate:modelValue": u[0] ||= (e) => t.value = e,
733
818
  disabled: e.disabled,
734
819
  class: "switch"
735
820
  }, {
736
- default: w(() => [s(b(V), { class: "thumb" })]),
821
+ default: w(() => [s(b(R), { class: "thumb" })]),
737
822
  _: 1
738
823
  }, 8, [
739
824
  "id",
@@ -744,4 +829,4 @@ var ce = ["role"], le = /* @__PURE__ */ c({
744
829
  }
745
830
  }), [["__scopeId", "data-v-9916c71e"]]);
746
831
  //#endregion
747
- export { ue as Box, de as Button, fe as Expander, Q as Hint, Z as Icon, $ as LightDarkToggle, je as NumberInput, Pe as SelectBox, Ye as SidebarLayout, Ze as Spinner, nt as TextInput, at 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.15",
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",