@cfasim-ui/components 0.3.14 → 0.3.16

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 (11) 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/_internal/gap.d.ts +2 -0
  8. package/dist/index.css +1 -1
  9. package/dist/index.d.ts +4 -0
  10. package/dist/index.js +246 -152
  11. 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/_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-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))}
2
2
  /*$vite$:1*/
package/dist/index.d.ts CHANGED
@@ -1,7 +1,11 @@
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';
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
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";
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";
3
3
  //#region src/Box/Box.vue?vue&type=script&setup=true&lang.ts
4
- var ce = ["role"], le = /* @__PURE__ */ c({
4
+ var le = ["role"], ue = /* @__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
+ }, [v(t.$slots, "default", {}, void 0, !0)], 14, le));
21
21
  }
22
- }), X = (e, t) => {
22
+ }), Y = (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
+ }, de = /* @__PURE__ */ Y(ue, [["__scopeId", "data-v-d7342c02"]]), fe = /* @__PURE__ */ Y(/* @__PURE__ */ c({
27
27
  __name: "Button",
28
28
  props: {
29
29
  label: {},
@@ -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"]]), X = {
52
+ none: "0",
53
+ small: "var(--space-2)",
54
+ medium: "var(--space-4)",
55
+ large: "var(--space-6)"
56
+ };
57
+ function pe(e, t = "medium") {
58
+ return e == null ? X[t] : e in X ? X[e] : e;
59
+ }
60
+ //#endregion
61
+ //#region src/Container/Container.vue
62
+ var me = /* @__PURE__ */ Y(/* @__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(() => pe(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
+ }, [v(t.$slots, "default", {}, void 0, !0)], 6));
86
+ }
87
+ }), [["__scopeId", "data-v-bff01edb"]]), he = /* @__PURE__ */ Y(/* @__PURE__ */ c({
52
88
  __name: "Expander",
53
89
  props: /* @__PURE__ */ u({ label: {} }, {
54
90
  open: {
@@ -75,14 +111,72 @@ var ce = ["role"], le = /* @__PURE__ */ c({
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 Z = /* @__PURE__ */ new Map();
122
+ function be(e) {
123
+ if (typeof document > "u") return;
124
+ let t = Z.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), Z.set(e, {
131
+ count: 1,
132
+ el: n
133
+ });
134
+ }
135
+ function xe(e) {
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)));
139
+ }
140
+ (void 0)?.dispose(() => {
141
+ Z.forEach(({ el: e }) => e.remove()), Z.clear();
142
+ });
143
+ //#endregion
144
+ //#region src/Grid/Grid.vue
145
+ var Se = /* @__PURE__ */ Y(/* @__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(() => 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) => {
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
+ }, [v(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
+ ], Q = /* @__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
+ }), $ = /* @__PURE__ */ Y(/* @__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(J), null, {
221
+ default: w(() => [s(b(oe), {
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(se), { "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(Q, {
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(q), null, {
237
+ default: w(() => [s(b(K), {
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(G), {
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"]]), we = ["aria-label"], Te = /* @__PURE__ */ Y(/* @__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,53 @@ 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(Q, {
175
269
  icon: t.value ? "dark_mode" : "light_mode",
176
270
  size: "sm"
177
- }, null, 8, ["icon"])], 8, me));
271
+ }, null, 8, ["icon"])], 8, we));
178
272
  }
179
- }), [["__scopeId", "data-v-4c423498"]]), he = {
273
+ }), [["__scopeId", "data-v-4c423498"]]), Ee = {
180
274
  key: 0,
181
275
  class: "input-label"
182
- }, ge = {
276
+ }, De = {
183
277
  key: 0,
184
278
  class: "input-wrapper"
185
- }, _e = [
279
+ }, Oe = [
186
280
  "inputmode",
187
281
  "placeholder",
188
282
  "aria-invalid",
189
283
  "aria-required",
190
284
  "required"
191
- ], ve = {
285
+ ], ke = {
192
286
  key: 0,
193
287
  class: "input-suffix"
194
- }, ye = {
288
+ }, Ae = {
195
289
  key: 1,
196
290
  class: "input-error",
197
291
  role: "alert"
198
- }, be = {
292
+ }, je = {
199
293
  key: 2,
200
294
  class: "slider-container"
201
- }, xe = { class: "slider-current" }, Se = { class: "slider-labels" }, Ce = { key: 1 }, we = {
295
+ }, Me = { class: "slider-current" }, Ne = { class: "slider-labels" }, Pe = { key: 1 }, Fe = {
202
296
  key: 0,
203
297
  class: "input-wrapper"
204
- }, Te = [
298
+ }, Ie = [
205
299
  "inputmode",
206
300
  "placeholder",
207
301
  "aria-invalid",
208
302
  "aria-required",
209
303
  "required"
210
- ], Ee = {
304
+ ], Le = {
211
305
  key: 0,
212
306
  class: "input-suffix"
213
- }, De = {
307
+ }, Re = {
214
308
  key: 1,
215
309
  class: "input-error",
216
310
  role: "alert"
217
- }, Oe = {
311
+ }, ze = {
218
312
  key: 2,
219
313
  class: "slider-container"
220
- }, ke = { class: "slider-current" }, Ae = { class: "slider-labels" }, je = /* @__PURE__ */ X(/* @__PURE__ */ c({
314
+ }, Be = { class: "slider-current" }, Ve = { class: "slider-labels" }, He = /* @__PURE__ */ Y(/* @__PURE__ */ c({
221
315
  __name: "NumberInput",
222
316
  props: /* @__PURE__ */ u({
223
317
  label: {},
@@ -271,36 +365,36 @@ var ce = ["role"], le = /* @__PURE__ */ c({
271
365
  let t = j(e);
272
366
  return t == null ? e : M(Math.trunc(t));
273
367
  }
274
- function P(e) {
368
+ function ee(e) {
275
369
  return e == null ? "" : e.toLocaleString("en-US");
276
370
  }
277
- function F(e) {
371
+ function P(e) {
278
372
  if (e == null) return "";
279
373
  let t = O.value;
280
374
  if (t > 0) return e.toLocaleString("en-US", {
281
375
  minimumFractionDigits: t,
282
376
  maximumFractionDigits: t
283
377
  });
284
- let n = P(e);
378
+ let n = ee(e);
285
379
  return l.numberType === "float" && Number.isInteger(e) ? n + ".0" : n;
286
380
  }
287
- function I(e) {
381
+ function F(e) {
288
382
  return e.replace(/,/g, "");
289
383
  }
290
- let L = g(F(j(c.value))), R = g(c.value), z = g();
384
+ let I = g(P(j(c.value))), L = g(c.value), R = g();
291
385
  C(c, (e) => {
292
- L.value = F(j(e)), R.value = e, z.value = G(e);
386
+ I.value = P(j(e)), L.value = e, R.value = W(e);
293
387
  });
294
- let ee = /[^0-9,.\-+eE]/g;
295
- function B(e) {
296
- let t = e.target, n = I(t.value);
388
+ let te = /[^0-9,.\-+eE]/g;
389
+ function z(e) {
390
+ let t = e.target, n = F(t.value);
297
391
  if (n === "" || n === "-" || n.endsWith(".") || n.includes(".") && n.endsWith("0")) return;
298
392
  let r = Number(n);
299
393
  if (Number.isNaN(r)) return;
300
- let i = P(r);
394
+ let i = ee(r);
301
395
  if (i === t.value) return;
302
396
  let a = t.selectionStart ?? 0, o = (t.value.slice(0, a).match(/,/g) || []).length;
303
- L.value = i, requestAnimationFrame(() => {
397
+ I.value = i, requestAnimationFrame(() => {
304
398
  let e = a - o, n = 0, r = 0;
305
399
  for (let t = 0; t < i.length; t++) if (i[t] !== "," && r++, r >= e) {
306
400
  n = t + 1;
@@ -309,96 +403,96 @@ var ce = ["role"], le = /* @__PURE__ */ c({
309
403
  r < e && (n = i.length), t.setSelectionRange(n, n);
310
404
  });
311
405
  }
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));
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));
316
410
  }
317
- let H = null;
318
- function U() {
319
- !l.live || l.slider || (H && clearTimeout(H), H = setTimeout(K, 300));
411
+ let V = null;
412
+ function H() {
413
+ !l.live || l.slider || (V && clearTimeout(V), V = setTimeout(G, 300));
320
414
  }
321
- function W() {
322
- !l.live || l.slider || (H && clearTimeout(H), K());
415
+ function U() {
416
+ !l.live || l.slider || (V && clearTimeout(V), G());
323
417
  }
324
- function G(e) {
418
+ function W(e) {
325
419
  if (e == null) return l.required ? "Required" : void 0;
326
420
  let t = j(e);
327
421
  if (v.value != null && t < v.value) return `Min ${v.value}${l.percent ? "%" : ""}`;
328
422
  if (D.value != null && t > D.value) return `Max ${D.value}${l.percent ? "%" : ""}`;
329
423
  }
330
- function K() {
331
- if (L.value.trim() === "") {
332
- c.value = void 0, R.value = void 0, z.value = G(void 0);
424
+ function G() {
425
+ if (I.value.trim() === "") {
426
+ c.value = void 0, L.value = void 0, R.value = W(void 0);
333
427
  return;
334
428
  }
335
- let e = L.value.replace(ee, "");
429
+ let e = I.value.replace(te, "");
336
430
  if (!/\d/.test(e)) {
337
- L.value = F(j(c.value)), z.value = G(c.value);
431
+ I.value = P(j(c.value)), R.value = W(c.value);
338
432
  return;
339
433
  }
340
- e !== L.value && (L.value = e);
341
- let t = Number(I(e));
434
+ e !== I.value && (I.value = e);
435
+ let t = Number(F(e));
342
436
  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);
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);
346
440
  }
347
- function q(e) {
441
+ function K(e) {
348
442
  if (!e) return;
349
443
  let t = N(e[0]);
350
- R.value = t, L.value = F(j(t)), l.live && (c.value = t);
444
+ L.value = t, I.value = P(j(t)), l.live && (c.value = t);
351
445
  }
352
- function J(e) {
446
+ function q(e) {
353
447
  e && (c.value = N(e[0]));
354
448
  }
355
- function Y(e, t) {
449
+ function J(e, t) {
356
450
  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;
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;
359
453
  }
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, {
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($, {
362
456
  key: 0,
363
457
  text: l.hint
364
458
  }, null, 8, ["text"])) : r("", !0)], 2),
365
- l.slider ? r("", !0) : (h(), i("span", ge, [T(a("input", {
459
+ l.slider ? r("", !0) : (h(), i("span", De, [T(a("input", {
366
460
  type: "text",
367
461
  inputmode: l.numberType === "integer" ? "numeric" : "decimal",
368
- "onUpdate:modelValue": t[0] ||= (e) => L.value = e,
462
+ "onUpdate:modelValue": t[0] ||= (e) => I.value = e,
369
463
  placeholder: l.placeholder,
370
- "aria-invalid": !!z.value,
464
+ "aria-invalid": !!R.value,
371
465
  "aria-required": l.required || void 0,
372
466
  required: l.required,
373
- onBlur: V,
467
+ onBlur: B,
374
468
  onKeydown: [
375
- E(K, ["enter"]),
376
- t[1] ||= E((e) => Y(e, 1), ["up"]),
377
- t[2] ||= E((e) => Y(e, -1), ["down"])
469
+ E(G, ["enter"]),
470
+ t[1] ||= E((e) => J(e, 1), ["up"]),
471
+ t[2] ||= E((e) => J(e, -1), ["down"])
378
472
  ],
379
473
  onInput: t[3] ||= (e) => {
380
- B(e), U();
474
+ z(e), H();
381
475
  },
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), {
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), {
386
480
  class: "slider-root",
387
- "model-value": R.value == null ? [u.value] : [R.value],
481
+ "model-value": L.value == null ? [u.value] : [L.value],
388
482
  min: u.value,
389
483
  max: f.value,
390
484
  step: p.value,
391
- "onUpdate:modelValue": q,
392
- onValueCommit: J
485
+ "onUpdate:modelValue": K,
486
+ onValueCommit: q
393
487
  }, {
394
- default: w(() => [s(b(ie), { class: "slider-track" }, {
395
- default: w(() => [s(b(te), { class: "slider-range" })]),
488
+ default: w(() => [s(b(ae), { class: "slider-track" }, {
489
+ default: w(() => [s(b(ne), { class: "slider-range" })]),
396
490
  _: 1
397
- }), s(b(re), {
491
+ }), s(b(ie), {
398
492
  class: "slider-thumb",
399
493
  "aria-label": l.label
400
494
  }, {
401
- default: w(() => [a("span", xe, y(A(R.value)), 1)]),
495
+ default: w(() => [a("span", Me, y(A(L.value)), 1)]),
402
496
  _: 1
403
497
  }, 8, ["aria-label"])]),
404
498
  _: 1
@@ -407,45 +501,45 @@ var ce = ["role"], le = /* @__PURE__ */ c({
407
501
  "min",
408
502
  "max",
409
503
  "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", {
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", {
413
507
  type: "text",
414
508
  inputmode: l.numberType === "integer" ? "numeric" : "decimal",
415
- "onUpdate:modelValue": t[4] ||= (e) => L.value = e,
509
+ "onUpdate:modelValue": t[4] ||= (e) => I.value = e,
416
510
  placeholder: l.placeholder,
417
- "aria-invalid": !!z.value,
511
+ "aria-invalid": !!R.value,
418
512
  "aria-required": l.required || void 0,
419
513
  required: l.required,
420
- onBlur: V,
514
+ onBlur: B,
421
515
  onKeydown: [
422
- E(K, ["enter"]),
423
- t[5] ||= E((e) => Y(e, 1), ["up"]),
424
- t[6] ||= E((e) => Y(e, -1), ["down"])
516
+ E(G, ["enter"]),
517
+ t[5] ||= E((e) => J(e, 1), ["up"]),
518
+ t[6] ||= E((e) => J(e, -1), ["down"])
425
519
  ],
426
520
  onInput: t[7] ||= (e) => {
427
- B(e), U();
521
+ z(e), H();
428
522
  },
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), {
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), {
433
527
  class: "slider-root",
434
- "model-value": R.value == null ? [u.value] : [R.value],
528
+ "model-value": L.value == null ? [u.value] : [L.value],
435
529
  min: u.value,
436
530
  max: f.value,
437
531
  step: p.value,
438
- "onUpdate:modelValue": q,
439
- onValueCommit: J
532
+ "onUpdate:modelValue": K,
533
+ onValueCommit: q
440
534
  }, {
441
- default: w(() => [s(b(ie), { class: "slider-track" }, {
442
- default: w(() => [s(b(te), { class: "slider-range" })]),
535
+ default: w(() => [s(b(ae), { class: "slider-track" }, {
536
+ default: w(() => [s(b(ne), { class: "slider-range" })]),
443
537
  _: 1
444
- }), s(b(re), {
538
+ }), s(b(ie), {
445
539
  class: "slider-thumb",
446
540
  "aria-label": l.label
447
541
  }, {
448
- default: w(() => [a("span", ke, y(A(R.value)), 1)]),
542
+ default: w(() => [a("span", Be, y(A(L.value)), 1)]),
449
543
  _: 1
450
544
  }, 8, ["aria-label"])]),
451
545
  _: 1
@@ -454,10 +548,10 @@ var ce = ["role"], le = /* @__PURE__ */ c({
454
548
  "min",
455
549
  "max",
456
550
  "step"
457
- ]), a("div", Ae, [a("span", null, y(A(u.value)), 1), a("span", null, y(A(f.value)), 1)])])) : r("", !0)
551
+ ]), a("div", Ve, [a("span", null, y(A(u.value)), 1), a("span", null, y(A(f.value)), 1)])])) : r("", !0)
458
552
  ]));
459
553
  }
460
- }), [["__scopeId", "data-v-10b86a5d"]]), Me = { class: "select-box" }, Ne = ["id"], Pe = /* @__PURE__ */ X(/* @__PURE__ */ c({
554
+ }), [["__scopeId", "data-v-10b86a5d"]]), Ue = { class: "select-box" }, We = ["id"], Ge = /* @__PURE__ */ Y(/* @__PURE__ */ c({
461
555
  __name: "SelectBox",
462
556
  props: /* @__PURE__ */ u({
463
557
  label: {},
@@ -471,21 +565,21 @@ var ce = ["role"], le = /* @__PURE__ */ c({
471
565
  }),
472
566
  emits: ["update:modelValue"],
473
567
  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", {
568
+ let c = x(t, "modelValue"), l = t, u = ce();
569
+ return (f, p) => (h(), i("div", Ue, [t.label ? (h(), i("label", {
476
570
  key: 0,
477
571
  id: `${b(u)}-label`,
478
572
  class: d(["select-label", { "visually-hidden": t.hideLabel }])
479
- }, y(t.label), 11, Ne)) : r("", !0), s(b(L), {
573
+ }, y(t.label), 11, We)) : r("", !0), s(b(I), {
480
574
  modelValue: c.value,
481
575
  "onUpdate:modelValue": p[0] ||= (e) => c.value = e
482
576
  }, {
483
- default: w(() => [s(b(R), {
577
+ default: w(() => [s(b(L), {
484
578
  class: "select-trigger",
485
579
  "aria-labelledby": l.label ? `${b(u)}-label` : void 0,
486
580
  "aria-label": l.label ? void 0 : l.ariaLabel
487
581
  }, {
488
- default: w(() => [s(b(z), { placeholder: t.placeholder }, null, 8, ["placeholder"]), p[1] ||= a("span", {
582
+ default: w(() => [s(b(R), { placeholder: t.placeholder }, null, 8, ["placeholder"]), p[1] ||= a("span", {
489
583
  class: "select-icon",
490
584
  "aria-hidden": "true"
491
585
  }, [a("svg", {
@@ -499,23 +593,23 @@ var ce = ["role"], le = /* @__PURE__ */ c({
499
593
  "stroke-linejoin": "round"
500
594
  }, [a("path", { d: "M3 4.5L6 7.5L9 4.5" })])], -1)]),
501
595
  _: 1
502
- }, 8, ["aria-labelledby", "aria-label"]), s(b(I), null, {
596
+ }, 8, ["aria-labelledby", "aria-label"]), s(b(F), null, {
503
597
  default: w(() => [s(b(M), {
504
598
  class: "select-content",
505
599
  position: "popper",
506
600
  "side-offset": 4,
507
601
  "body-lock": !1
508
602
  }, {
509
- default: w(() => [s(b(ee), { class: "select-viewport" }, {
603
+ default: w(() => [s(b(te), { class: "select-viewport" }, {
510
604
  default: w(() => [(h(!0), i(e, null, _(t.options, (e) => (h(), n(b(N), {
511
605
  key: e.value,
512
606
  value: e.value,
513
607
  class: "select-item"
514
608
  }, {
515
- default: w(() => [s(b(F), null, {
609
+ default: w(() => [s(b(P), null, {
516
610
  default: w(() => [o(y(e.label), 1)]),
517
611
  _: 2
518
- }, 1024), s(b(P), { class: "select-indicator" }, {
612
+ }, 1024), s(b(ee), { class: "select-indicator" }, {
519
613
  default: w(() => [...p[2] ||= [a("svg", {
520
614
  width: "12",
521
615
  height: "12",
@@ -539,7 +633,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
539
633
  _: 1
540
634
  }, 8, ["modelValue"])]));
541
635
  }
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({
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({
543
637
  __name: "SidebarLayout",
544
638
  props: /* @__PURE__ */ u({
545
639
  hideTopbar: { type: Boolean },
@@ -581,13 +675,13 @@ var ce = ["role"], le = /* @__PURE__ */ c({
581
675
  }, { immediate: !0 }), (t, l) => (h(), i("div", {
582
676
  class: "SidebarLayout",
583
677
  "data-collapsed": O.value
584
- }, [a("div", Ie, [a("aside", Le, [a("div", Re, [a("div", ze, [a("button", {
678
+ }, [a("div", qe, [a("aside", Je, [a("div", Ye, [a("div", Xe, [a("button", {
585
679
  type: "button",
586
680
  class: "Toggle",
587
681
  "aria-label": "Collapse sidebar",
588
682
  title: "Collapse sidebar",
589
683
  onClick: A
590
- }, [s(Z, {
684
+ }, [s(Q, {
591
685
  icon: "keyboard_double_arrow_left",
592
686
  size: "sm"
593
687
  })])]), v(t.$slots, "sidebar", {}, void 0, !0)])]), a("button", {
@@ -596,16 +690,16 @@ var ce = ["role"], le = /* @__PURE__ */ c({
596
690
  "aria-label": "Expand sidebar",
597
691
  title: "Expand sidebar",
598
692
  onClick: A
599
- }, [s(Z, {
693
+ }, [s(Q, {
600
694
  icon: "keyboard_double_arrow_right",
601
695
  size: "sm"
602
- })])]), a("main", Be, [c.tabs?.length ? (h(), n(b(W), {
696
+ })])]), a("main", Ze, [c.tabs?.length ? (h(), n(b(U), {
603
697
  key: 0,
604
698
  "model-value": M.value,
605
699
  class: "TabsLayout",
606
700
  "onUpdate:modelValue": l[0] ||= (e) => M.value = e
607
701
  }, {
608
- default: w(() => [a("div", Ve, [
702
+ default: w(() => [a("div", Qe, [
609
703
  D.value && O.value ? (h(), i("button", {
610
704
  key: 0,
611
705
  type: "button",
@@ -613,22 +707,22 @@ var ce = ["role"], le = /* @__PURE__ */ c({
613
707
  "aria-label": "Expand sidebar",
614
708
  title: "Expand sidebar",
615
709
  onClick: A
616
- }, [s(Z, {
710
+ }, [s(Q, {
617
711
  icon: "keyboard_double_arrow_right",
618
712
  size: "sm"
619
713
  })])) : r("", !0),
620
- s(b(U), {
714
+ s(b(H), {
621
715
  class: "TabsList",
622
716
  "aria-label": "Tabs"
623
717
  }, {
624
- default: w(() => [(h(!0), i(e, null, _(c.tabs, (e) => (h(), n(b(G), {
718
+ default: w(() => [(h(!0), i(e, null, _(c.tabs, (e) => (h(), n(b(W), {
625
719
  key: e.value,
626
720
  value: e.value,
627
721
  class: "TabsTrigger"
628
722
  }, {
629
723
  default: w(() => [o(y(e.label), 1)]),
630
724
  _: 2
631
- }, 1032, ["value"]))), 128)), s(b(H), {
725
+ }, 1032, ["value"]))), 128)), s(b(V), {
632
726
  class: "TabsIndicator",
633
727
  style: {
634
728
  width: "var(--reka-tabs-indicator-size)",
@@ -637,22 +731,22 @@ var ce = ["role"], le = /* @__PURE__ */ c({
637
731
  })]),
638
732
  _: 1
639
733
  }),
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)])])]),
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)])])]),
642
736
  _: 3
643
- }, 8, ["model-value"])) : (h(), i(e, { key: 1 }, [a("div", Ge, [D.value && O.value ? (h(), i("button", {
737
+ }, 8, ["model-value"])) : (h(), i(e, { key: 1 }, [a("div", nt, [D.value && O.value ? (h(), i("button", {
644
738
  key: 0,
645
739
  type: "button",
646
740
  class: "Toggle",
647
741
  "aria-label": "Expand sidebar",
648
742
  title: "Expand sidebar",
649
743
  onClick: A
650
- }, [s(Z, {
744
+ }, [s(Q, {
651
745
  icon: "keyboard_double_arrow_right",
652
746
  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));
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));
654
748
  }
655
- }), [["__scopeId", "data-v-e0ed7a62"]]), Xe = ["data-size", "aria-label"], Ze = /* @__PURE__ */ c({
749
+ }), [["__scopeId", "data-v-e0ed7a62"]]), st = ["data-size", "aria-label"], ct = /* @__PURE__ */ c({
656
750
  __name: "Spinner",
657
751
  props: {
658
752
  size: { default: "sm" },
@@ -664,12 +758,12 @@ var ce = ["role"], le = /* @__PURE__ */ c({
664
758
  "data-size": e.size,
665
759
  role: "status",
666
760
  "aria-label": e.label ?? "Loading"
667
- }, null, 8, Xe));
761
+ }, null, 8, st));
668
762
  }
669
- }), Qe = {
763
+ }), lt = {
670
764
  key: 0,
671
765
  class: "input-label"
672
- }, $e = ["placeholder"], et = { key: 1 }, tt = ["placeholder"], nt = /* @__PURE__ */ X(/* @__PURE__ */ c({
766
+ }, ut = ["placeholder"], dt = { key: 1 }, ft = ["placeholder"], pt = /* @__PURE__ */ Y(/* @__PURE__ */ c({
673
767
  __name: "TextInput",
674
768
  props: /* @__PURE__ */ u({
675
769
  label: {},
@@ -690,7 +784,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
690
784
  t.value = s.value;
691
785
  }
692
786
  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, {
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($, {
694
788
  key: 0,
695
789
  text: l.hint
696
790
  }, null, 8, ["text"])) : r("", !0)], 2), T(a("input", {
@@ -699,15 +793,15 @@ var ce = ["role"], le = /* @__PURE__ */ c({
699
793
  placeholder: l.placeholder,
700
794
  onBlur: c,
701
795
  onKeydown: E(c, ["enter"])
702
- }, null, 40, $e), [[S, s.value]])])) : (h(), i("div", et, [T(a("input", {
796
+ }, null, 40, ut), [[S, s.value]])])) : (h(), i("div", dt, [T(a("input", {
703
797
  type: "text",
704
798
  "onUpdate:modelValue": t[1] ||= (e) => s.value = e,
705
799
  placeholder: l.placeholder,
706
800
  onBlur: c,
707
801
  onKeydown: E(c, ["enter"])
708
- }, null, 40, tt), [[S, s.value]])]));
802
+ }, null, 40, ft), [[S, s.value]])]));
709
803
  }
710
- }), [["__scopeId", "data-v-3f3d20cc"]]), rt = { class: "toggle" }, it = ["for"], at = /* @__PURE__ */ X(/* @__PURE__ */ c({
804
+ }), [["__scopeId", "data-v-3f3d20cc"]]), mt = { class: "toggle" }, ht = ["for"], gt = /* @__PURE__ */ Y(/* @__PURE__ */ c({
711
805
  __name: "Toggle",
712
806
  props: /* @__PURE__ */ u({
713
807
  label: {},
@@ -719,21 +813,21 @@ var ce = ["role"], le = /* @__PURE__ */ c({
719
813
  }),
720
814
  emits: ["update:modelValue"],
721
815
  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, {
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($, {
726
820
  key: 0,
727
821
  text: o.hint
728
822
  }, null, 8, ["text"])) : r("", !0),
729
- s(b(B), {
823
+ s(b(z), {
730
824
  id: b(c),
731
825
  modelValue: t.value,
732
826
  "onUpdate:modelValue": u[0] ||= (e) => t.value = e,
733
827
  disabled: e.disabled,
734
828
  class: "switch"
735
829
  }, {
736
- default: w(() => [s(b(V), { class: "thumb" })]),
830
+ default: w(() => [s(b(B), { class: "thumb" })]),
737
831
  _: 1
738
832
  }, 8, [
739
833
  "id",
@@ -744,4 +838,4 @@ var ce = ["role"], le = /* @__PURE__ */ c({
744
838
  }
745
839
  }), [["__scopeId", "data-v-9916c71e"]]);
746
840
  //#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 };
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cfasim-ui/components",
3
- "version": "0.3.14",
3
+ "version": "0.3.16",
4
4
  "type": "module",
5
5
  "description": "Vue 3 UI components for cfasim-ui",
6
6
  "license": "Apache-2.0",