@moduix/react 2.2.0 → 2.2.4

package/dist/components/scroll-area/ScrollArea_module.css

@@ -0,0 +1,176 @@
+@layer moduix.components {
+  .root-FtAkRy {
+    box-sizing: border-box;
+    width: var(--moduix-scroll-area-width, 100%);
+    height: var(--moduix-scroll-area-height, 100%);
+    min-width: 0;
+    min-height: 0;
+    color: var(--moduix-scroll-area-color, var(--moduix-color-foreground));
+    position: relative;
+  }
+
+  .viewport-SrqU1k {
+    box-sizing: border-box;
+    border-radius: var(--moduix-scroll-area-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-scroll-area-bg, transparent);
+    scrollbar-width: none;
+    --_scroll-area-block-fade-mask: linear-gradient(to bottom,
+      transparent 0,
+      black
+        min(var(--moduix-scroll-area-fade-start-size, var(--moduix-scroll-area-fade-size, var(--moduix-spacing-10))),
+          var(--scroll-area-overflow-y-start, 0px)),
+      black
+        calc(100% -
+            min(var(--moduix-scroll-area-fade-end-size, var(--moduix-scroll-area-fade-size, var(--moduix-spacing-10))),
+              var(--scroll-area-overflow-y-end, 0px))),
+      transparent 100%);
+    outline: 0;
+    width: 100%;
+    min-width: 0;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .viewport-SrqU1k::-webkit-scrollbar {
+    display: none;
+  }
+
+  .root-FtAkRy[data-fade] .viewport-SrqU1k {
+    -webkit-mask-image: var(--_scroll-area-block-fade-mask);
+    mask-image: var(--_scroll-area-block-fade-mask);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  .viewport-SrqU1k:focus-visible {
+    outline: var(--moduix-scroll-area-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+        solid var(--moduix-scroll-area-focus-ring-color, var(--moduix-color-ring));
+    outline-offset: var(--moduix-scroll-area-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
+  }
+
+  .content-PFPQ4z {
+    box-sizing: border-box;
+    padding: var(--moduix-scroll-area-content-padding, 0);
+    display: block;
+  }
+
+  .scrollbar-LN_VI4 {
+    --_scroll-area-scrollbar-margin: var(--moduix-scroll-area-scrollbar-margin, var(--moduix-spacing-1));
+    --_scroll-area-scrollbar-hit-area-size: var(--moduix-scroll-area-scrollbar-hit-area-size, var(--moduix-spacing-5));
+    box-sizing: border-box;
+    padding: var(--moduix-scroll-area-scrollbar-padding, 0);
+    border-radius: var(--moduix-scroll-area-scrollbar-radius, var(--moduix-radius-md));
+    background-color: var(--moduix-scroll-area-scrollbar-bg, transparent);
+    opacity: var(--moduix-scroll-area-scrollbar-hidden-opacity, 0);
+    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: none;
+    transition: opacity var(--moduix-scroll-area-transition, var(--moduix-transition-default)),
+      width var(--moduix-scroll-area-thumb-hover-transition, var(--moduix-transition-fast)),
+      height var(--moduix-scroll-area-thumb-hover-transition, var(--moduix-transition-fast));
+    justify-content: center;
+    display: flex;
+    position: absolute;
+  }
+
+  .scrollbar-LN_VI4:before {
+    content: "";
+    position: absolute;
+  }
+
+  .scrollbar-LN_VI4[data-orientation="vertical"] {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: var(--corner-height, 0px);
+    width: var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1));
+    margin-block: var(--_scroll-area-scrollbar-margin);
+    margin-inline-end: var(--_scroll-area-scrollbar-margin);
+  }
+
+  .scrollbar-LN_VI4[data-orientation="vertical"]:before {
+    width: var(--_scroll-area-scrollbar-hit-area-size);
+    height: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .scrollbar-LN_VI4[data-orientation="vertical"]:not([data-overflow-y]) {
+    display: none;
+  }
+
+  .scrollbar-LN_VI4[data-orientation="vertical"]:hover, .scrollbar-LN_VI4[data-orientation="vertical"][data-dragging] {
+    width: calc(var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1)) +
+            var(--moduix-scroll-area-thumb-hover-increase, 2px));
+  }
+
+  .scrollbar-LN_VI4[data-orientation="horizontal"] {
+    inset-inline-start: 0;
+    inset-inline-end: var(--corner-width, 0px);
+    height: var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1));
+    margin-inline: var(--_scroll-area-scrollbar-margin);
+    flex-direction: column;
+    margin-block-end: var(--_scroll-area-scrollbar-margin);
+    bottom: 0;
+  }
+
+  .scrollbar-LN_VI4[data-orientation="horizontal"]:before {
+    width: 100%;
+    height: var(--_scroll-area-scrollbar-hit-area-size);
+    bottom: 50%;
+    left: 0;
+    right: 0;
+    transform: translateY(50%);
+  }
+
+  .scrollbar-LN_VI4[data-orientation="horizontal"]:not([data-overflow-x]) {
+    display: none;
+  }
+
+  .scrollbar-LN_VI4[data-orientation="horizontal"]:hover, .scrollbar-LN_VI4[data-orientation="horizontal"][data-dragging] {
+    height: calc(var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1)) +
+            var(--moduix-scroll-area-thumb-hover-increase, 2px));
+  }
+
+  .scrollbar-LN_VI4[data-hover], .scrollbar-LN_VI4[data-scrolling] {
+    opacity: var(--moduix-scroll-area-scrollbar-visible-opacity, 1);
+    pointer-events: auto;
+  }
+
+  .scrollbar-LN_VI4[data-scrolling] {
+    transition-duration: 0s;
+  }
+
+  .root-FtAkRy[data-variant="always"] .scrollbar-LN_VI4 {
+    opacity: var(--moduix-scroll-area-scrollbar-visible-opacity, 1);
+    pointer-events: auto;
+  }
+
+  .thumb-eKzpKM {
+    box-sizing: border-box;
+    border-radius: var(--moduix-scroll-area-thumb-radius, var(--moduix-radius-full));
+    background-color: var(--moduix-scroll-area-thumb-bg, var(--moduix-color-border));
+  }
+
+  .thumb-eKzpKM[data-orientation="vertical"] {
+    width: 100%;
+    min-height: var(--moduix-scroll-area-thumb-min-size, var(--moduix-size-xs));
+  }
+
+  .thumb-eKzpKM[data-orientation="horizontal"] {
+    height: 100%;
+    min-width: var(--moduix-scroll-area-thumb-min-size, var(--moduix-size-xs));
+  }
+
+  .corner-dcr1vM {
+    box-sizing: border-box;
+    background-color: var(--moduix-scroll-area-corner-bg, var(--moduix-scroll-area-scrollbar-bg, transparent));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .scrollbar-LN_VI4 {
+      transition: none;
+    }
+  }
+}
+

package/dist/components/scroll-area/index.d.ts

@@ -1,2 +1,2 @@
-import { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps, ScrollArea } from "./ScrollArea.js";
-export { type ModuixScrollAreaRootProps, type ModuixScrollAreaRootProviderProps, ScrollArea };
+export { ScrollArea, useScrollArea, useScrollAreaContext } from './ScrollArea.js';
+export type { ModuixScrollAreaRootProps, ModuixScrollAreaRootProviderProps } from './ScrollArea.js';

package/dist/components/scroll-area/index.js

@@ -0,0 +1 @@
+export { ScrollArea, useScrollArea, useScrollAreaContext } from "./ScrollArea.js";

package/dist/components/segment-group/SegmentGroup.d.ts

@@ -1,25 +1,24 @@
-import { ReactNode } from "react";
-import { SegmentGroup, useSegmentGroup } from "@ark-ui/react/segment-group";
-
-//#region src/components/segment-group/SegmentGroup.d.ts
-declare function SegmentGroupItems({
-  items
-}: {
-  items: readonly {
-    value: string;
-    label: ReactNode;
-    disabled?: boolean;
-  }[];
+import { SegmentGroup as SegmentGroupPrimitive, useSegmentGroup as useSegmentGroupPrimitive, useSegmentGroupContext, useSegmentGroupItemContext } from '@ark-ui/react/segment-group';
+import type { ReactNode } from 'react';
+type SegmentGroupMachineProps = Parameters<typeof useSegmentGroupPrimitive>[0];
+declare function useSegmentGroup(props?: SegmentGroupMachineProps): import("@ark-ui/react/segment-group").UseSegmentGroupReturn;
+declare function SegmentGroupItems({ items, }: {
+    items: readonly {
+        value: string;
+        label: ReactNode;
+        disabled?: boolean;
+    }[];
 }): import("react").JSX.Element[];
-declare const SegmentGroup$1: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
-  Root: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  RootProvider: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Label: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Item: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
-  ItemControl: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  ItemText: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-  Indicator: import("react").ForwardRefExoticComponent<Omit<SegmentGroup.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  Items: typeof SegmentGroupItems;
+declare const SegmentGroup: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Root: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RootProvider: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: SegmentGroupPrimitive.ContextProps) => ReactNode;
+    ItemContext: (props: SegmentGroupPrimitive.ItemContextProps) => ReactNode;
+    Label: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.LabelProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+    ItemControl: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.ItemTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<SegmentGroupPrimitive.IndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Items: typeof SegmentGroupItems;
 };
-//#endregion
-export { SegmentGroup$1 as SegmentGroup, useSegmentGroup };
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };

package/dist/components/segment-group/SegmentGroup.js

@@ -1,91 +1,134 @@
-import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
-import SegmentGroup_module_default from "./SegmentGroup.module.js";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+import { useFieldsetContext } from "@ark-ui/react/fieldset";
+import { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "@ark-ui/react/segment-group";
 import { clsx } from "clsx";
 import { Children, cloneElement, forwardRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { SegmentGroup, useSegmentGroup } from "@ark-ui/react/segment-group";
-//#region src/components/segment-group/SegmentGroup.tsx
-const SegmentGroupRoot = forwardRef(function SegmentGroupRoot({ className, orientation = "horizontal", ...props }, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.Root, {
-		ref,
-		orientation,
-		"data-slot": "segment-group-root",
-		className: clsx(SegmentGroup_module_default.root, normalizeClassName(className)),
-		...props
-	});
+import { normalizeClassName } from "../../internal/normalizeClassName.js";
+import SegmentGroup_module from "./SegmentGroup.module.js";
+function omitUndefined(props) {
+    return Object.fromEntries(Object.entries(props).filter(([, value])=>void 0 !== value));
+}
+function SegmentGroup_useSegmentGroup(props) {
+    const field = useFieldContext();
+    const fieldset = useFieldsetContext();
+    return useSegmentGroup({
+        disabled: field?.disabled ?? fieldset?.disabled,
+        invalid: field?.invalid ?? fieldset?.invalid,
+        readOnly: field?.readOnly,
+        required: field?.required,
+        ...omitUndefined(props ?? {})
+    });
+}
+const SegmentGroup_SegmentGroupRoot = /*#__PURE__*/ forwardRef(function({ className, defaultValue, disabled, form, id, ids, invalid, name, onValueChange, orientation = 'horizontal', readOnly, required, value, ...props }, ref) {
+    const segmentGroup = SegmentGroup_useSegmentGroup(omitUndefined({
+        defaultValue,
+        disabled,
+        form,
+        id,
+        ids,
+        invalid,
+        name,
+        onValueChange,
+        orientation,
+        readOnly,
+        required,
+        value
+    }));
+    return /*#__PURE__*/ jsx(SegmentGroup.RootProvider, {
+        ref: ref,
+        value: segmentGroup,
+        "data-slot": "segment-group-root",
+        className: clsx(SegmentGroup_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const SegmentGroupRootProvider = forwardRef(function SegmentGroupRootProvider({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.RootProvider, {
-		ref,
-		"data-slot": "segment-group-root-provider",
-		className: clsx(SegmentGroup_module_default.root, normalizeClassName(className)),
-		...props
-	});
+const SegmentGroup_SegmentGroupRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.RootProvider, {
+        ref: ref,
+        "data-slot": "segment-group-root-provider",
+        className: clsx(SegmentGroup_module.root, normalizeClassName(className)),
+        ...props
+    });
 });
-const SegmentGroupLabel = forwardRef(function SegmentGroupLabel({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.Label, {
-		ref,
-		"data-slot": "segment-group-label",
-		className: clsx(SegmentGroup_module_default.label, normalizeClassName(className)),
-		...props
-	});
+const SegmentGroup_SegmentGroupLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.Label, {
+        ref: ref,
+        "data-slot": "segment-group-label",
+        className: clsx(SegmentGroup_module.label, normalizeClassName(className)),
+        ...props
+    });
 });
-const SegmentGroupItem = forwardRef(function SegmentGroupItem({ asChild, children, className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.Item, {
-		ref,
-		asChild,
-		"data-slot": "segment-group-item",
-		className: clsx(SegmentGroup_module_default.item, normalizeClassName(className)),
-		...props,
-		children: withItemHiddenInput(children, asChild)
-	});
+const SegmentGroup_SegmentGroupItem = /*#__PURE__*/ forwardRef(function({ asChild, children, className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.Item, {
+        ref: ref,
+        asChild: asChild,
+        "data-slot": "segment-group-item",
+        className: clsx(SegmentGroup_module.item, normalizeClassName(className)),
+        ...props,
+        children: withItemHiddenInput(children, asChild)
+    });
 });
-const SegmentGroupItemControl = forwardRef(function SegmentGroupItemControl({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.ItemControl, {
-		ref,
-		"data-slot": "segment-group-item-control",
-		className: clsx(SegmentGroup_module_default.itemControl, normalizeClassName(className)),
-		...props
-	});
+const SegmentGroup_SegmentGroupItemControl = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.ItemControl, {
+        ref: ref,
+        "data-slot": "segment-group-item-control",
+        className: clsx(SegmentGroup_module.itemControl, normalizeClassName(className)),
+        ...props
+    });
 });
-const SegmentGroupItemText = forwardRef(function SegmentGroupItemText({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.ItemText, {
-		ref,
-		"data-slot": "segment-group-item-text",
-		className: clsx(SegmentGroup_module_default.itemText, normalizeClassName(className)),
-		...props
-	});
+const SegmentGroup_SegmentGroupItemText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.ItemText, {
+        ref: ref,
+        "data-slot": "segment-group-item-text",
+        className: clsx(SegmentGroup_module.itemText, normalizeClassName(className)),
+        ...props
+    });
 });
 function withItemHiddenInput(children, asChild) {
-	const hiddenInput = /* @__PURE__ */ jsx(SegmentGroup.ItemHiddenInput, { "data-slot": "segment-group-item-hidden-input" });
-	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
-	const child = Children.only(children);
-	return cloneElement(child, {}, child.props.children, hiddenInput);
+    const hiddenInput = /*#__PURE__*/ jsx(SegmentGroup.ItemHiddenInput, {
+        "data-slot": "segment-group-item-hidden-input"
+    });
+    if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            children,
+            hiddenInput
+        ]
+    });
+    const child = Children.only(children);
+    return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
 }
-const SegmentGroupIndicator = forwardRef(function SegmentGroupIndicator({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(SegmentGroup.Indicator, {
-		ref,
-		"data-slot": "segment-group-indicator",
-		className: clsx(SegmentGroup_module_default.indicator, normalizeClassName(className)),
-		...props
-	});
+const SegmentGroup_SegmentGroupIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
+    return /*#__PURE__*/ jsx(SegmentGroup.Indicator, {
+        ref: ref,
+        "data-slot": "segment-group-indicator",
+        className: clsx(SegmentGroup_module.indicator, normalizeClassName(className)),
+        ...props
+    });
 });
 function SegmentGroupItems({ items }) {
-	return items.map(({ value, label, disabled }) => /* @__PURE__ */ jsxs(SegmentGroupItem, {
-		value,
-		disabled,
-		children: [/* @__PURE__ */ jsx(SegmentGroupItemText, { children: label }), /* @__PURE__ */ jsx(SegmentGroupItemControl, {})]
-	}, value));
+    return items.map(({ value, label, disabled })=>/*#__PURE__*/ jsxs(SegmentGroup_SegmentGroupItem, {
+            value: value,
+            disabled: disabled,
+            children: [
+                /*#__PURE__*/ jsx(SegmentGroup_SegmentGroupItemText, {
+                    children: label
+                }),
+                /*#__PURE__*/ jsx(SegmentGroup_SegmentGroupItemControl, {})
+            ]
+        }, value));
 }
-const SegmentGroup$1 = Object.assign(SegmentGroupRoot, {
-	Root: SegmentGroupRoot,
-	RootProvider: SegmentGroupRootProvider,
-	Label: SegmentGroupLabel,
-	Item: SegmentGroupItem,
-	ItemControl: SegmentGroupItemControl,
-	ItemText: SegmentGroupItemText,
-	Indicator: SegmentGroupIndicator,
-	Items: SegmentGroupItems
+const SegmentGroup_SegmentGroup = Object.assign(SegmentGroup_SegmentGroupRoot, {
+    Root: SegmentGroup_SegmentGroupRoot,
+    RootProvider: SegmentGroup_SegmentGroupRootProvider,
+    Context: SegmentGroup.Context,
+    ItemContext: SegmentGroup.ItemContext,
+    Label: SegmentGroup_SegmentGroupLabel,
+    Item: SegmentGroup_SegmentGroupItem,
+    ItemControl: SegmentGroup_SegmentGroupItemControl,
+    ItemText: SegmentGroup_SegmentGroupItemText,
+    Indicator: SegmentGroup_SegmentGroupIndicator,
+    Items: SegmentGroupItems
 });
-//#endregion
-export { SegmentGroup$1 as SegmentGroup, useSegmentGroup };
+export { SegmentGroup_SegmentGroup as SegmentGroup, SegmentGroup_useSegmentGroup as useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };

package/dist/components/segment-group/SegmentGroup.module.js

@@ -1,12 +1,10 @@
-import './SegmentGroup.css';
-//#region src/components/segment-group/SegmentGroup.module.css
-var SegmentGroup_module_default = {
-	"indicator": "_3r0tBa_indicator",
-	"item": "_3r0tBa_item",
-	"itemControl": "_3r0tBa_itemControl",
-	"itemText": "_3r0tBa_itemText",
-	"label": "_3r0tBa_label",
-	"root": "_3r0tBa_root"
+import "./SegmentGroup_module.css";
+const SegmentGroup_module = {
+    root: "root-Bd4lNR",
+    label: "label-shCFGn",
+    item: "item-YWqgii",
+    itemControl: "itemControl-pbg2uY",
+    itemText: "itemText-aBveL1",
+    indicator: "indicator-hgTUcL"
 };
-//#endregion
-export { SegmentGroup_module_default as default };
+export default SegmentGroup_module;

package/dist/components/segment-group/{SegmentGroup.css → SegmentGroup_module.css}

@@ -1,8 +1,8 @@
 @layer moduix.components {
-  ._3r0tBa_root {
+  .root-Bd4lNR {
     box-sizing: border-box;
     isolation: isolate;
-    max-width: var(--moduix-segment-group-max-width, 100%);
+    max-inline-size: var(--moduix-segment-group-max-width, 100%);
     align-items: stretch;
     gap: var(--moduix-segment-group-gap, var(--moduix-spacing-1));
     padding: var(--moduix-segment-group-padding, var(--moduix-spacing-1));
@@ -13,32 +13,33 @@
     color: var(--moduix-segment-group-color, var(--moduix-color-foreground));
     display: inline-flex;
     position: relative;
+  }
 
-    &[data-orientation="vertical"] {
-      flex-direction: column;
-      align-items: stretch;
-    }
+  .root-Bd4lNR[data-orientation="vertical"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-segment-group-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .root-Bd4lNR[data-disabled] {
+    opacity: var(--moduix-segment-group-disabled-opacity, var(--moduix-opacity-disabled));
+  }
 
-    &[data-invalid] {
-      border-color: var(--moduix-segment-group-border-color-invalid, var(--moduix-color-destructive));
-    }
+  .root-Bd4lNR[data-invalid] {
+    border-color: var(--moduix-segment-group-border-color-invalid, var(--moduix-color-destructive));
   }
 
-  ._3r0tBa_label {
+  .label-shCFGn {
     z-index: 1;
     color: var(--moduix-segment-group-label-color, var(--moduix-segment-group-color, var(--moduix-color-foreground)));
     font-size: var(--moduix-segment-group-label-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-segment-group-label-font-weight, var(--moduix-weight-semibold));
     line-height: var(--moduix-segment-group-label-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
     user-select: none;
     position: relative;
   }
 
-  ._3r0tBa_item {
+  .item-YWqgii {
     box-sizing: border-box;
     z-index: 1;
     justify-content: center;
@@ -51,6 +52,7 @@
     font-size: var(--moduix-segment-group-item-font-size, var(--moduix-text-sm));
     font-weight: var(--moduix-segment-group-item-font-weight, var(--moduix-weight-medium));
     line-height: var(--moduix-segment-group-item-line-height, var(--moduix-line-height-text-sm));
+    -webkit-user-select: none;
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
@@ -59,51 +61,51 @@
     outline: 0;
     display: inline-flex;
     position: relative;
+  }
 
-    @media (hover: hover) {
-      &:hover:not([data-readonly], [data-disabled]) {
-        color: var(--moduix-segment-group-item-color-hover, var(--moduix-color-foreground));
-      }
+  @media (hover: hover) {
+    .item-YWqgii:hover:not([data-readonly], [data-disabled]) {
+      color: var(--moduix-segment-group-item-color-hover, var(--moduix-color-foreground));
     }
+  }
 
-    &[data-state="checked"] {
-      color: var(--moduix-segment-group-item-color-checked, var(--moduix-color-foreground));
-    }
+  .item-YWqgii[data-state="checked"] {
+    color: var(--moduix-segment-group-item-color-checked, var(--moduix-color-foreground));
+  }
 
-    &[data-focus-visible] {
-      outline: var(--moduix-segment-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
+  .item-YWqgii[data-focus-visible] {
+    outline: var(--moduix-segment-group-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
         solid var(--moduix-segment-group-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-segment-group-focus-ring-offset, var(--moduix-border-width-sm));
-    }
+    outline-offset: var(--moduix-segment-group-focus-ring-offset, var(--moduix-border-width-sm));
+  }
 
-    &[data-invalid][data-focus-visible] {
-      outline-color: var(--moduix-segment-group-focus-ring-color-invalid, var(--moduix-color-destructive));
-    }
+  .item-YWqgii[data-invalid][data-focus-visible] {
+    outline-color: var(--moduix-segment-group-focus-ring-color-invalid, var(--moduix-color-destructive));
+  }
 
-    &[data-readonly], &[data-disabled] {
-      cursor: default;
-    }
+  .item-YWqgii[data-readonly], .item-YWqgii[data-disabled] {
+    cursor: default;
+  }
 
-    &[data-disabled] {
-      opacity: var(--moduix-segment-group-item-disabled-opacity, var(--moduix-opacity-disabled));
-    }
+  .item-YWqgii[data-disabled] {
+    opacity: var(--moduix-segment-group-item-disabled-opacity, var(--moduix-opacity-disabled));
+  }
 
-    &[data-orientation="vertical"] {
-      justify-content: flex-start;
-      width: 100%;
-    }
+  .item-YWqgii[data-orientation="vertical"] {
+    justify-content: flex-start;
+    inline-size: 100%;
   }
 
-  ._3r0tBa_itemControl {
+  .itemControl-pbg2uY {
     display: none;
   }
 
-  ._3r0tBa_itemText {
+  .itemText-aBveL1 {
     z-index: 1;
     position: relative;
   }
 
-  ._3r0tBa_indicator {
+  .indicator-hgTUcL {
     --transition-duration: var(--moduix-segment-group-indicator-transition-duration, var(--moduix-duration-normal));
     --transition-timing-function: var(--moduix-segment-group-indicator-transition-timing-function, var(--moduix-ease-in-out));
     z-index: 0;
@@ -118,3 +120,4 @@
     position: absolute;
   }
 }
+

package/dist/components/segment-group/index.d.ts

@@ -1,2 +1 @@
-import { SegmentGroup, useSegmentGroup } from "./SegmentGroup.js";
-export { SegmentGroup, useSegmentGroup };
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext, } from './SegmentGroup.js';

package/dist/components/segment-group/index.js

@@ -0,0 +1 @@
+export { SegmentGroup, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext } from "./SegmentGroup.js";