@flux-ui/components 3.0.0-next.73 → 3.0.0-next.74

package/dist/component/FluxKanbanColumn.vue.d.ts

@@ -2,7 +2,7 @@ import { FluxIconName } from '@flux-ui/types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 type __VLS_Props = {
     readonly columnId: string | number;
-    readonly count: string | number;
+    readonly count?: string | number;
     readonly disabled?: boolean;
     readonly icon?: FluxIconName;
     readonly label: string;

package/dist/component/FluxSegmentedControl.vue.d.ts

@@ -1,17 +1,27 @@
-import { FluxSegmentedControlItemObject } from '@flux-ui/types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { FluxSize } from '@flux-ui/types';
+import { VNode, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { FluxSegmentedControlValue } from '../data';
 type __VLS_Props = {
     readonly ariaLabel?: string;
     readonly isFill?: boolean;
-    readonly items: FluxSegmentedControlItemObject[];
+    readonly size?: FluxSize;
+};
+type __VLS_Slots = {
+    default(): VNode[];
 };
 type __VLS_ModelProps = {
-    modelValue?: number;
+    modelValue?: FluxSegmentedControlValue;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "update:modelValue": (value: number) => any;
+declare const __VLS_base: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (value: FluxSegmentedControlValue) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: (value: number) => any;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+    "onUpdate:modelValue"?: (value: FluxSegmentedControlValue) => any;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxSegmentedControlItem.vue.d.ts

@@ -0,0 +1,20 @@
+import { FluxIconName } from '@flux-ui/types';
+import { FluxSegmentedControlValue } from '../data';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly value: FluxSegmentedControlValue;
+    readonly disabled?: boolean;
+    readonly icon?: FluxIconName;
+    readonly label?: string;
+};
+type __VLS_Slots = {
+    default(): any;
+};
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/component/FluxSpacing.vue.d.ts

@@ -1,7 +1,8 @@
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare const spacings: readonly [0, 3, 6, 9, 12, 15, 18, 24, 30, 36, 42, 48, 54, 60, 72, 84, 90, 120];
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 type __VLS_Props = {
-    readonly size: keyof typeof spacings;
+    readonly size: Enumerate<typeof spacings['length']>;
 };
 declare const _default: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/component/index.d.ts

@@ -130,7 +130,7 @@ export { default as FluxScroller } from './FluxScroller.vue';
 export { default as FluxSecondaryButton } from './FluxSecondaryButton.vue';
 export { default as FluxSecondaryLinkButton } from './FluxSecondaryLinkButton.vue';
 export { default as FluxSegmentedControl } from './FluxSegmentedControl.vue';
-export { default as FluxSegmentedView } from './FluxSegmentedView.vue';
+export { default as FluxSegmentedControlItem } from './FluxSegmentedControlItem.vue';
 export { default as FluxSeparator } from './FluxSeparator.vue';
 export { default as FluxSlideOver } from './FluxSlideOver.vue';
 export { default as FluxSnackbar } from './FluxSnackbar.vue';

package/dist/component/primitive/FilterMenuRenderer.d.ts

@@ -1,4 +1,4 @@
-import { VNode, DefineComponent, ExtractPropTypes, RendererNode, RendererElement, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { PropType, VNode, DefineComponent, ExtractPropTypes, RendererNode, RendererElement, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 export declare const FilterMenuRenderer: DefineComponent<ExtractPropTypes<{
     menuItems: {
         required: true;
@@ -6,7 +6,7 @@ export declare const FilterMenuRenderer: DefineComponent<ExtractPropTypes<{
     };
     navigate: {
         required: true;
-        type: FunctionConstructor;
+        type: PropType<(name: string) => void>;
     };
 }>, () => VNode< RendererNode, RendererElement, {
     [key: string]: any;
@@ -17,6 +17,6 @@ export declare const FilterMenuRenderer: DefineComponent<ExtractPropTypes<{
     };
     navigate: {
         required: true;
-        type: FunctionConstructor;
+        type: PropType<(name: string) => void>;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

package/dist/composable/index.d.ts

@@ -8,6 +8,7 @@ export { default as useFilterInjection } from './useFilterInjection';
 export { default as useFlyoutInjection } from './useFlyoutInjection';
 export { default as useFormFieldInjection } from './useFormFieldInjection';
 export { default as useKanbanInjection } from './useKanbanInjection';
+export { default as useSegmentedControlInjection } from './useSegmentedControlInjection';
 export { default as useTabBarInjection } from './useTabBarInjection';
 export { default as useTableInjection } from './useTableInjection';
 export { default as useTooltipInjection } from './useTooltipInjection';

package/dist/composable/useSegmentedControlInjection.d.ts

@@ -0,0 +1,2 @@
+import { FluxSegmentedControlInjection } from '../data';
+export default function (): FluxSegmentedControlInjection;

package/dist/data/di.d.ts

@@ -1,4 +1,4 @@
-import { FluxFilterDefinition, FluxFilterState, FluxFilterValue } from '@flux-ui/types';
+import { FluxFilterDefinition, FluxFilterState, FluxFilterValue, FluxSize } from '@flux-ui/types';
 import { DateTime } from 'luxon';
 import { ComponentInternalInstance, ComputedRef, InjectionKey, Ref, VNode } from 'vue';
 export declare const FluxAdaptiveGroupInjectionKey: InjectionKey<FluxAdaptiveGroupInjection>;
@@ -9,6 +9,7 @@ export declare const FluxExpandableGroupInjectionKey: InjectionKey<FluxExpandabl
 export declare const FluxFlyoutInjectionKey: InjectionKey<FluxFlyoutInjection>;
 export declare const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection>;
 export declare const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection>;
+export declare const FluxSegmentedControlInjectionKey: InjectionKey<FluxSegmentedControlInjection>;
 export declare const FluxSplitViewInjectionKey: InjectionKey<FluxSplitViewInjection>;
 export declare const FluxTabBarInjectionKey: InjectionKey<FluxTabBarInjection>;
 export declare const FluxTableInjectionKey: InjectionKey<FluxTableInjection>;
@@ -142,6 +143,14 @@ export type FluxSplitViewInjection = {
     unregisterPane(id: number): void;
     getPaneIndex(id: number): number;
 };
+export type FluxSegmentedControlValue = string | number;
+export type FluxSegmentedControlInjection = {
+    readonly modelValue: Ref<FluxSegmentedControlValue | undefined>;
+    readonly size: Ref<FluxSize>;
+    select(value: FluxSegmentedControlValue): void;
+    registerItem(element: HTMLElement, value: FluxSegmentedControlValue): void;
+    unregisterItem(element: HTMLElement): void;
+};
 export type FluxTabBarInjection = {
     readonly isPills: Ref<boolean>;
     registerItem(element: Element, isActive: Ref<boolean>): void;

package/dist/index.css

@@ -2723,8 +2723,8 @@
 
 .form-field-header {
   display: flex;
-  margin-bottom: 0;
   width: 100%;
+  margin-bottom: 0;
   align-items: center;
   align-self: flex-start;
   gap: 6px;
@@ -2889,9 +2889,9 @@
   border-radius: var(--radius-half);
 }
 .form-input-native::-webkit-color-swatch-wrapper {
+  width: calc(100% + 24px);
   margin: 0 -12px;
   padding: 3px;
-  width: calc(100% + 24px);
 }
 
 .form-input-native-has-icon-leading {
@@ -4468,12 +4468,12 @@
   pointer-events: none;
 }
 .tree-indent.has-line::before {
-  content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 9px;
   width: 1px;
+  content: "";
   background: var(--surface-stroke);
 }
 
@@ -4485,21 +4485,21 @@
   pointer-events: none;
 }
 .tree-connector:not(.is-last)::before {
-  content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 9px;
   width: 1px;
+  content: "";
   background: var(--surface-stroke);
 }
 .tree-connector::after {
-  content: "";
   position: absolute;
   top: 0;
   bottom: 50%;
   left: 9px;
   right: 0;
+  content: "";
   border-left: 1px solid var(--surface-stroke);
   border-bottom: 1px solid var(--surface-stroke);
   border-bottom-left-radius: 6px;
@@ -6645,10 +6645,11 @@ tfoot .table-cell {
 }.segmented-control {
   position: relative;
   align-items: center;
-  gap: 1px;
+  gap: 3px;
+  padding: 3px;
   background: var(--gray-50);
   border: 1px solid var(--surface-stroke);
-  border-radius: var(--radius);
+  border-radius: var(--radius-full);
 }
 
 .segmented-control-fill {
@@ -6662,60 +6663,89 @@ tfoot .table-cell {
 
 .segmented-control-highlight {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 3px;
+  bottom: 3px;
   background: var(--surface);
-  border-radius: calc(var(--radius) - 2px);
-  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-md);
   outline: 1px solid var(--surface-stroke);
   pointer-events: none;
   transition: 300ms var(--swift-out);
   transition-property: left, width;
-  translate: -1px 0;
 }
 
 .segmented-control-item {
+  position: relative;
   display: flex;
-  height: 36px;
-  padding-left: 12px;
-  padding-right: 12px;
   align-items: center;
   flex: 1 1 0;
-  gap: 9px;
   justify-content: center;
   background: none;
   border: 0;
-  border-radius: var(--radius);
+  border-radius: var(--radius-full);
   color: var(--foreground);
   cursor: pointer;
   font-weight: 500;
   text-align: center;
-  transition: 300ms var(--swift-out);
-  transition-property: background, color;
+  transition: color 300ms var(--swift-out);
+  white-space: nowrap;
 }
 @media (hover: hover) {
   .segmented-control-item:hover {
-    background: var(--gray-100);
+    color: var(--foreground-prominent);
   }
 }
+.segmented-control-item {
+  outline: 2px solid rgb(from var(--primary-600) r g b/0);
+  outline-offset: 0;
+}
+.segmented-control-item:focus-visible {
+  outline-color: var(--primary-600);
+  outline-offset: 3px;
+}
 .segmented-control-item.is-active {
-  background: none;
   color: var(--foreground-prominent);
   cursor: default;
 }
+.segmented-control-item:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
 .segmented-control-item > * {
   position: relative;
+  z-index: 1;
 }
-
-.segmented-control-separator {
+.segmented-control-item + .segmented-control-item::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -2px;
   height: 15px;
   width: 1px;
-  flex-shrink: 0;
   background: var(--surface-stroke);
   transition: opacity 300ms var(--swift-out);
+  translate: 0 -50%;
 }
-.segmented-control-separator.is-active {
+.segmented-control-item.is-active::before, .segmented-control-item.is-active + .segmented-control-item::before {
   opacity: 0;
+}
+
+.is-small {
+  height: 30px;
+  padding: 0 12px;
+  gap: 9px;
+}
+
+.is-medium {
+  height: 36px;
+  padding: 0 15px;
+  gap: 9px;
+}
+
+.is-large {
+  height: 48px;
+  padding: 0 21px;
+  gap: 12px;
 }.split-view {
   display: grid;
   width: 100%;