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

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

@@ -92,7 +92,6 @@ export { default as FluxItemMedia } from './FluxItemMedia.vue';
 export { default as FluxItemStack } from './FluxItemStack.vue';
 export { default as FluxLayerPane } from './FluxLayerPane.vue';
 export { default as FluxLayerPaneSecondary } from './FluxLayerPaneSecondary.vue';
-export { default as FluxLegend } from './FluxLegend.vue';
 export { default as FluxLink } from './FluxLink.vue';
 export { default as FluxMenu } from './FluxMenu.vue';
 export { default as FluxMenuCollapsible } from './FluxMenuCollapsible.vue';
@@ -115,7 +114,6 @@ export { default as FluxPaneGroup } from './FluxPaneGroup.vue';
 export { default as FluxPaneHeader } from './FluxPaneHeader.vue';
 export { default as FluxPaneIllustration } from './FluxPaneIllustration.vue';
 export { default as FluxPaneMedia } from './FluxPaneMedia.vue';
-export { default as FluxPercentageBar } from './FluxPercentageBar.vue';
 export { default as FluxPersona } from './FluxPersona.vue';
 export { default as FluxPlaceholder } from './FluxPlaceholder.vue';
 export { default as FluxPressable } from './FluxPressable.vue';
@@ -130,7 +128,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';
@@ -141,7 +139,6 @@ export { default as FluxSpinner } from './FluxSpinner.vue';
 export { default as FluxSplitButton } from './FluxSplitButton.vue';
 export { default as FluxSplitView } from './FluxSplitView.vue';
 export { default as FluxSplitViewPane } from './FluxSplitViewPane.vue';
-export { default as FluxStatistic } from './FluxStatistic.vue';
 export { default as FluxStepper } from './FluxStepper.vue';
 export { default as FluxStepperStep } from './FluxStepperStep.vue';
 export { default as FluxStepperSteps } from './FluxStepperSteps.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;
@@ -5908,33 +5908,6 @@ tfoot .table-cell {
 
 .base-pane-structure:is(a, button):hover:has(> .item) {
   background-color: color-mix(in srgb, rgb(from var(--surface-hover) r g b/0.125), var(--surface));
-}.legend-horizontal {
-  display: flex;
-  gap: 12px 18px;
-}
-
-.legend-vertical {
-  display: flex;
-  flex-flow: column;
-  gap: 12px;
-}
-
-.legend-item {
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 6px;
-  font-size: 14px;
-  line-height: 1;
-}
-.legend-item::before {
-  display: block;
-  margin-top: 1px;
-  height: 12px;
-  width: 12px;
-  content: "";
-  flex: 0 0 12px;
-  background: var(--color);
-  border-radius: var(--radius-full);
 }.notice {
   display: flex;
   padding: 12px 15px;
@@ -6161,35 +6134,6 @@ tfoot .table-cell {
 .base-pane > .notice {
   padding-left: 18px;
   padding-right: 18px;
-}.percentage-bar {
-  display: flex;
-  flex-flow: column;
-  gap: 12px;
-}
-
-.percentage-bar-segment {
-  height: 12px;
-  border-radius: calc(var(--radius) / 3);
-  transition: var(--transition-default);
-  transition-property: height, margin, flex-grow;
-}
-.percentage-bar-segment:hover {
-  height: 16px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-}
-
-.percentage-bar-tooltip {
-  display: flex;
-  align-items: center;
-  flex-flow: row nowrap;
-  gap: 9px;
-}
-
-.percentage-bar-track {
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 3px;
 }.progress-bar {
   position: relative;
 }
@@ -6645,7 +6589,8 @@ 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);
@@ -6662,60 +6607,90 @@ 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: calc(var(--radius) - 3px);
+  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);
+  width: 2px;
+  background: var(--gray-100);
+  border-radius: 1px;
   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%;
@@ -6779,82 +6754,6 @@ tfoot .table-cell {
   left: 0;
   height: 2px;
   width: 100%;
-}.statistic {
-  padding: 18px;
-  flex-basis: 0;
-  flex-grow: 1;
-  gap: 18px;
-}
-
-.statistic-change {
-  display: flex;
-  align-items: center;
-  align-self: flex-end;
-  gap: 6px;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-}
-.statistic-change.is-gray {
-  color: var(--foreground-prominent);
-}
-.statistic-change.is-primary {
-  color: var(--primary-600);
-}
-.statistic-change.is-danger {
-  color: var(--danger-600);
-}
-.statistic-change.is-info {
-  color: var(--info-600);
-}
-.statistic-change.is-success {
-  color: var(--success-600);
-}
-.statistic-change.is-warning {
-  color: var(--warning-600);
-}
-
-.statistic-data {
-  display: flex;
-  flex-flow: column;
-  flex-grow: 1;
-  gap: 9px;
-  line-height: 1;
-}
-.statistic-data :is(span) {
-  color: var(--foreground-secondary);
-}
-.statistic-data :is(strong) {
-  color: var(--foreground-prominent);
-  font-size: 24px;
-  font-weight: 700;
-}
-
-.statistic-icon .icon {
-  font-size: 0.45em;
-}
-
-.statistic-image {
-  height: 48px;
-  width: 48px;
-  border-radius: var(--radius);
-}
-
-.statistic-horizontal {
-  display: flex;
-}
-
-.statistic-vertical {
-  display: flex;
-  align-items: center;
-  flex-flow: column;
-  text-align: center;
-}
-.statistic-vertical .statistic-change {
-  align-self: center;
-}
-.statistic-vertical .statistic-data {
-  align-items: center;
 }.sparkles-container {
   z-index: 0;
 }