@flux-ui/components 3.0.0-next.65 → 3.0.0-next.67

package/dist/component/primitive/SliderTrack.vue.d.ts

@@ -3,19 +3,15 @@ type __VLS_Props = {
     readonly percentageLower: number;
     readonly percentageUpper: number;
 };
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/component/primitive/TreeNodeRenderer.vue.d.ts

@@ -1,21 +1,19 @@
 import { FluxColor } from '@flux-ui/types';
 import { TreeBaseOption, TreeFlatNode } from '../../composable/private';
-import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
-declare const _default: <TOption extends TreeBaseOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onExpandClick?: (args_0: MouseEvent) => any;
-    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onExpandClick"> & {
+import { PublicProps, VNode } from 'vue';
+declare const __VLS_export: <TOption extends TreeBaseOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: PublicProps & __VLS_PrettifyLocal<{
         readonly node: TreeFlatNode<TOption>;
         readonly expanded: boolean;
         readonly levelColors?: (FluxColor | string)[];
-    } & Partial<{}>> & PublicProps;
-    expose(exposed: ShallowUnwrapRef<{}>): void;
+    } & {
+        onExpandClick?: (args_0: MouseEvent) => any;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
-    slots: Readonly<{
-        trailing?(props: {
-            node: TreeFlatNode<TOption>;
-        }): any;
-    }> & {
+    slots: {
         trailing?(props: {
             node: TreeFlatNode<TOption>;
         }): any;
@@ -24,7 +22,10 @@ declare const _default: <TOption extends TreeBaseOption>(__VLS_props: NonNullabl
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/index.css

@@ -767,7 +767,7 @@
 }
 .slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
   position: sticky;
-  top: 45px;
+  top: 60px;
   z-index: 100;
 }
 .slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
@@ -2573,6 +2573,10 @@
   border: 0;
 }
 
+.layer-pane > .pane-header .button {
+  margin: -9px -9px -9px 0;
+}
+
 .layer-pane-secondary {
   display: flex;
   align-items: center;
@@ -3091,6 +3095,7 @@
   display: inline-flex;
   flex-shrink: 0;
   gap: 12px;
+  line-height: 20px;
   outline: 0;
 }
 .checkbox.is-disabled {
@@ -3116,16 +3121,16 @@
 
 .checkbox-element,
 .checkbox-native {
-  margin: 1px 0;
-  height: 22px;
-  width: 22px;
+  margin: 1px 0 0;
+  height: 20px;
+  width: 20px;
 }
 
 .checkbox-element {
   position: relative;
   display: inline-flex;
-  height: 22px;
-  width: 22px;
+  height: 20px;
+  width: 20px;
   padding: 0;
   align-items: center;
   justify-content: center;
@@ -3147,7 +3152,7 @@
   transition-property: opacity;
 }
 .checkbox-element .icon :is(path) {
-  stroke: white;
+  stroke: currentColor;
   stroke-width: 54px;
 }
 
@@ -3157,6 +3162,7 @@
 
 .checkbox-native {
   position: absolute;
+  cursor: pointer;
   opacity: 0;
 }
 @media (hover: hover) {
@@ -3175,6 +3181,14 @@
   outline-color: var(--primary-600);
   outline-offset: 2px;
 }
+.checkbox-native:disabled {
+  cursor: not-allowed;
+}
+.checkbox-native:disabled + .checkbox-element {
+  background: var(--gray-100);
+  border-color: var(--gray-200);
+  color: var(--foreground-secondary);
+}
 
 .quantity-selector {
   min-width: max-content;
@@ -3293,6 +3307,12 @@
   border: 1px solid var(--gray-200);
   border-radius: var(--radius-full);
   contain: paint;
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.toggle:has(.toggle-input:focus-visible) {
+  outline-color: var(--primary-600);
+  outline-offset: 2px;
 }
 .toggle.is-checked {
   border-color: transparent;
@@ -3355,12 +3375,6 @@
   border-radius: inherit;
   cursor: pointer;
   outline: 0;
-  outline: 2px solid rgb(from var(--primary-600) r g b/0);
-  outline-offset: 0;
-}
-.toggle-input:focus-visible {
-  outline-color: var(--primary-600);
-  outline-offset: 2px;
 }
 .toggle-input::after {
   position: absolute;
@@ -4808,6 +4822,9 @@
   margin: 0;
   padding: 0;
 }
+.table-row.is-selectable-row {
+  cursor: pointer;
+}
 
 .table-cell {
   height: 0;
@@ -4851,11 +4868,24 @@ tbody .table-row:nth-child(even) .table-cell.is-striped {
   background: rgb(from var(--gray-50) r g b/0.5);
 }
 
+tbody .table-row.is-selected .table-cell {
+  background: var(--primary-50);
+  border-color: var(--primary-100);
+}
+
+tbody .table-row.is-selected + .table-row .table-cell {
+  border-top-color: var(--primary-100);
+}
+
 @media (hover: hover) {
   tbody .table-row:hover .table-cell.is-hoverable,
   tbody .table-row:has(:focus-visible) .table-cell.is-hoverable {
     background: var(--gray-50);
   }
+  tbody .table-row.is-selected:hover .table-cell.is-hoverable,
+  tbody .table-row.is-selected:has(:focus-visible) .table-cell.is-hoverable {
+    background: var(--primary-50);
+  }
 }
 tfoot .table-cell {
   border-top: 1px solid var(--gray-100);
@@ -4873,6 +4903,10 @@ tfoot .table-cell {
   margin: -4px 0 -4px -3px;
 }
 
+.table-cell-selection {
+  width: 0;
+}
+
 .table-fill {
   pointer-events: none;
 }
@@ -4932,12 +4966,20 @@ tfoot .table-cell {
   }
 }
 
+.base-pane-structure:has(.table) {
+  --table-spacing: 18px;
+}
+
+.base-pane-structure .base-pane-structure {
+  --table-spacing: 15px;
+}
+
 .base-pane-structure > .table .table-cell:first-child .table-cell-content {
-  padding-left: 18px;
+  padding-left: var(--table-spacing);
 }
 
 .base-pane-structure > .table .table-cell:last-child .table-cell-content {
-  padding-right: 18px;
+  padding-right: var(--table-spacing);
 }
 
 .base-pane-structure > .table .table-actions {
@@ -4945,7 +4987,7 @@ tfoot .table-cell {
 }
 
 .base-pane-structure > .table :is(caption) {
-  padding: 12px 18px;
+  padding: 12px var(--table-spacing);
   border-top: 1px solid var(--gray-100);
 }
 
@@ -6972,7 +7014,7 @@ tfoot .table-cell {
 .tab-bar-arrow {
   position: absolute;
   display: flex;
-  top: 3px;
+  top: 2px;
   height: calc(100% - 6px);
   width: 30px;
   align-items: center;
@@ -6993,11 +7035,11 @@ tfoot .table-cell {
 }
 
 .tab-bar-arrow-start {
-  left: -6px;
+  left: 3px;
 }
 
 .tab-bar-arrow-end {
-  right: -6px;
+  right: 3px;
 }
 
 .base-tab-bar-tabs {