@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/segmentedControl/SegmentedControl.js

@@ -3,42 +3,145 @@ import classNames from "classnames";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { segmentedControlPropDefs } from "./segmentedControl.props.js";
-import { jsx } from "react/jsx-runtime";
-const SegmentedControlRoot = React.forwardRef(({ className, children, disabled = false, size = "md", variant = "default", value, defaultValue, onValueChange, ...props }, forwardedRef) => {
+import { jsx, jsxs } from "react/jsx-runtime";
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+        continue;
+      }
+      ;
+      ref.current = node;
+    }
+  };
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
+const SegmentedControlSelectionContext = React.createContext(null);
+const SegmentedControlRoot = React.forwardRef(({ className, children, disabled = false, size = "md", variant = "default", orientation = "horizontal", activationMode = "manual", fill = false, value, defaultValue, onValueChange, ...props }, forwardedRef) => {
   const rootProps = extractProps(
-    { className, disabled, size, variant },
+    { className, disabled, orientation, size },
     segmentedControlPropDefs
   );
-  return /* @__PURE__ */ jsx(
+  const innerRootRef = React.useRef(null);
+  const mergedRef = composeRefs(forwardedRef, innerRootRef);
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const resolvedValue = value ?? uncontrolledValue;
+  const [indicator, setIndicator] = React.useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [indicatorLive, setIndicatorLive] = React.useState(false);
+  const measureActive = React.useCallback((root) => {
+    const active = root.querySelector('[data-state="on"]');
+    if (!active) {
+      return;
+    }
+    const rootRect = root.getBoundingClientRect();
+    const activeRect = active.getBoundingClientRect();
+    setIndicator({
+      x: activeRect.left - rootRect.left - root.clientLeft,
+      y: activeRect.top - rootRect.top - root.clientTop,
+      width: activeRect.width,
+      height: activeRect.height
+    });
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const root = innerRootRef.current;
+    if (!root) {
+      return void 0;
+    }
+    const measure = () => measureActive(root);
+    measure();
+    setIndicatorLive(true);
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    const active = root.querySelector('[data-state="on"]');
+    if (active) {
+      observer.observe(active);
+    }
+    return () => observer.disconnect();
+  }, [resolvedValue, measureActive]);
+  const handleValueChange = (nextValue) => {
+    if (!nextValue) {
+      return;
+    }
+    if (value === void 0) {
+      setUncontrolledValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  };
+  const selection = React.useMemo(
+    () => ({
+      activationMode,
+      disabled,
+      selectedValue: resolvedValue,
+      requestSelect: handleValueChange
+    }),
+    [activationMode, disabled, resolvedValue, handleValueChange]
+  );
+  return /* @__PURE__ */ jsxs(
     ToggleGroupPrimitive.Root,
     {
       ...props,
       ...rootProps,
-      ref: forwardedRef,
+      ref: mergedRef,
       className: classNames(
         "dsx-segmented-control",
         `dsx-segmented-control--${size}`,
         `dsx-segmented-control--${variant}`,
+        fill && "dsx-segmented-control--fill",
         className
       ),
       type: "single",
-      value,
-      defaultValue,
-      onValueChange: (newValue) => {
-        if (newValue) {
-          onValueChange?.(newValue);
-        }
-      },
+      value: resolvedValue,
+      onValueChange: handleValueChange,
       disabled,
+      orientation,
       "data-disabled": disabled || void 0,
+      "data-fill": fill || void 0,
       "data-size": size,
       "data-variant": variant,
-      children
+      "data-orientation": orientation,
+      "data-activation-mode": activationMode,
+      children: [
+        /* @__PURE__ */ jsx(SegmentedControlSelectionContext.Provider, { value: selection, children }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "dsx-segmented-control__indicator",
+            style: orientation === "vertical" ? {
+              transform: `translateY(${indicator.y}px)`,
+              height: indicator.height,
+              transition: indicatorLive ? void 0 : "none"
+            } : {
+              transform: `translateX(${indicator.x}px)`,
+              width: indicator.width,
+              transition: indicatorLive ? void 0 : "none"
+            }
+          }
+        )
+      ]
     }
   );
 });
 SegmentedControlRoot.displayName = "SegmentedControl";
-const SegmentedControlItem = React.forwardRef(({ children, className, disabled, value, ...props }, forwardedRef) => {
+const SegmentedControlItem = React.forwardRef(({ children, className, disabled, iconOnly = false, value, onFocus, ...props }, forwardedRef) => {
+  const selection = React.useContext(SegmentedControlSelectionContext);
+  const handleItemFocus = (event) => {
+    onFocus?.(event);
+    if (!selection || selection.activationMode !== "automatic") {
+      return;
+    }
+    if (selection.disabled || disabled || value === selection.selectedValue) {
+      return;
+    }
+    selection.requestSelect(value);
+  };
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -48,6 +151,8 @@ const SegmentedControlItem = React.forwardRef(({ children, className, disabled,
       className: classNames("dsx-segmented-control__item", className),
       disabled,
       "data-disabled": disabled || void 0,
+      "data-icon-only": iconOnly || void 0,
+      onFocus: handleItemFocus,
       children
     }
   );

package/dist/components/segmentedControl/SegmentedControl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/segmentedControl/SegmentedControl.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { segmentedControlPropDefs } from './segmentedControl.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedControlPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n}\n\ntype SegmentedControlRootProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>\n  & SegmentedControlRootOwnProps\n\nconst SegmentedControlRoot = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  SegmentedControlRootProps\n>(({ className, children, disabled = false, size = 'md', variant = 'default', value, defaultValue, onValueChange, ...props }, forwardedRef) => {\n  const rootProps = extractProps(\n    { className, disabled, size, variant },\n    segmentedControlPropDefs,\n  )\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      {...rootProps}\n      ref={forwardedRef}\n      className={classNames(\n        'dsx-segmented-control',\n        `dsx-segmented-control--${size}`,\n        `dsx-segmented-control--${variant}`,\n        className,\n      )}\n      type=\"single\"\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={(newValue) => {\n        if (newValue) {\n          onValueChange?.(newValue)\n        }\n      }}\n      disabled={disabled}\n      data-disabled={disabled || undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      {children}\n    </ToggleGroupPrimitive.Root>\n  )\n})\nSegmentedControlRoot.displayName = 'SegmentedControl'\n\ninterface SegmentedControlItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n  value: string\n}\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ children, className, disabled, value, ...props }, forwardedRef) => {\n  return (\n    <ToggleGroupPrimitive.Item\n      {...props}\n      ref={forwardedRef}\n      value={value}\n      className={classNames('dsx-segmented-control__item', className)}\n      disabled={disabled}\n      data-disabled={disabled || undefined}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\nconst SegmentedControl: typeof SegmentedControlRoot & {\n  Item: typeof SegmentedControlItem\n} = Object.assign(SegmentedControlRoot, {\n  Item: SegmentedControlItem,\n})\n\nexport { SegmentedControl, SegmentedControlItem, SegmentedControlRoot }\nexport type { SegmentedControlItemProps, SegmentedControlRootProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,0BAA0B;AAEtC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAuBrC;AAVJ,MAAM,uBAAuB,MAAM,WAGjC,CAAC,EAAE,WAAW,UAAU,WAAW,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,cAAc,eAAe,GAAG,MAAM,GAAG,iBAAiB;AAC7I,QAAM,YAAY;AAAA,IAChB,EAAE,WAAW,UAAU,MAAM,QAAQ;AAAA,IACrC;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,0BAA0B,IAAI;AAAA,QAC9B,0BAA0B,OAAO;AAAA,QACjC;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,eAAe,CAAC,aAAa;AAC3B,YAAI,UAAU;AACZ,0BAAgB,QAAQ;AAAA,QAC1B;AAAA,MACF;AAAA,MACA;AAAA,MACA,iBAAe,YAAY;AAAA,MAC3B,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,qBAAqB,cAAc;AAOnC,MAAM,uBAAuB,MAAM,WAGjC,CAAC,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,MAAM,GAAG,iBAAiB;AACtE,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA,WAAW,WAAW,+BAA+B,SAAS;AAAA,MAC9D;AAAA,MACA,iBAAe,YAAY;AAAA,MAE1B;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,qBAAqB,cAAc;AAEnC,MAAM,mBAEF,OAAO,OAAO,sBAAsB;AAAA,EACtC,MAAM;AACR,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { segmentedControlPropDefs } from './segmentedControl.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedControlPropDefs> & {\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n}\n\ntype SegmentedControlRootProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>\n  & SegmentedControlRootOwnProps\n\ntype SegmentedControlRootElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>\n\nfunction composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (!ref) {\n        continue\n      }\n\n      if (typeof ref === 'function') {\n        ref(node)\n        continue\n      }\n\n      ;(ref as { current: T | null }).current = node\n    }\n  }\n}\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\ninterface SegmentedControlSelection {\n  activationMode: 'manual' | 'automatic'\n  disabled: boolean\n  selectedValue: string | undefined\n  requestSelect(value: string): void\n}\n\nconst SegmentedControlSelectionContext = React.createContext<SegmentedControlSelection | null>(null)\n\nconst SegmentedControlRoot = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n  SegmentedControlRootProps\n>(({ className, children, disabled = false, size = 'md', variant = 'default', orientation = 'horizontal', activationMode = 'manual', fill = false, value, defaultValue, onValueChange, ...props }, forwardedRef) => {\n  const rootProps = extractProps(\n    { className, disabled, orientation, size },\n    segmentedControlPropDefs,\n  )\n  const innerRootRef = React.useRef<SegmentedControlRootElement | null>(null)\n  const mergedRef = composeRefs(forwardedRef, innerRootRef)\n\n  // Deselect guard (disallowEmptySelection): own the selection so the control\n  // can never render with no active item. Radix fires \"\" when the active item\n  // is clicked; the handler below swallows it and keeps the last value, and\n  // the resolved value below keeps Radix controlled so its internal state can\n  // never clear either.\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<string | undefined>(defaultValue)\n  const resolvedValue = value ?? uncontrolledValue\n\n  // Sliding indicator: Mantine-style measured pill rendered behind the active\n  // item. The offset is a physical-pixel diff (active.left - root.left), which\n  // is direction-agnostic and therefore RTL-correct without special-casing.\n  // Measuring in layout effect positions the pill before first paint, and the\n  // `indicatorLive` gate keeps `transition: none` until that first positioned\n  // frame so mount never animates from the origin.\n  const [indicator, setIndicator] = React.useState({ x: 0, y: 0, width: 0, height: 0 })\n  const [indicatorLive, setIndicatorLive] = React.useState(false)\n\n  const measureActive = React.useCallback((root: HTMLElement) => {\n    const active = root.querySelector<HTMLElement>('[data-state=\"on\"]')\n\n    if (!active) {\n      return\n    }\n\n    const rootRect = root.getBoundingClientRect()\n    const activeRect = active.getBoundingClientRect()\n    // Border-box diffs are padding-box positioned: subtract the frame so the\n    // wrapper never overshoots the content box (1-2px overflow summoned a\n    // horizontal scrollbar on bordered variants).\n    setIndicator({\n      x: activeRect.left - rootRect.left - root.clientLeft,\n      y: activeRect.top - rootRect.top - root.clientTop,\n      width: activeRect.width,\n      height: activeRect.height,\n    })\n  }, [])\n\n  useIsomorphicLayoutEffect(() => {\n    const root = innerRootRef.current\n\n    if (!root) {\n      return undefined\n    }\n\n    const measure = () => measureActive(root)\n\n    measure()\n    setIndicatorLive(true)\n\n    if (typeof ResizeObserver === 'undefined') {\n      return undefined\n    }\n\n    const observer = new ResizeObserver(measure)\n    observer.observe(root)\n\n    const active = root.querySelector('[data-state=\"on\"]')\n\n    if (active) {\n      observer.observe(active)\n    }\n\n    return () => observer.disconnect()\n  }, [resolvedValue, measureActive])\n\n  const handleValueChange = (nextValue: string) => {\n    if (!nextValue) {\n      return\n    }\n\n    if (value === undefined) {\n      setUncontrolledValue(nextValue)\n    }\n\n    onValueChange?.(nextValue)\n  }\n\n  // Automatic activation: selection follows focus, so arrow-key navigation\n  // selects without Enter. The focused value goes through the same guarded\n  // setter, so focus can never empty the selection; landing on the\n  // already-selected item is a no-op. Manual mode (default) ignores focus\n  // and only selects on activation \u2014 use it when onValueChange drives side\n  // effects that must not fire on focus. Each item reads this context in its\n  // own onFocus (Radix strips the value prop from the DOM, so the root\n  // cannot recover the focused value from the event target).\n  const selection = React.useMemo<SegmentedControlSelection>(\n    () => ({\n      activationMode,\n      disabled,\n      selectedValue: resolvedValue,\n      requestSelect: handleValueChange,\n    }),\n    [activationMode, disabled, resolvedValue, handleValueChange],\n  )\n\n  return (\n    <ToggleGroupPrimitive.Root\n      {...props}\n      {...rootProps}\n      ref={mergedRef}\n      className={classNames(\n        'dsx-segmented-control',\n        `dsx-segmented-control--${size}`,\n        `dsx-segmented-control--${variant}`,\n        fill && 'dsx-segmented-control--fill',\n        className,\n      )}\n      type=\"single\"\n      value={resolvedValue}\n      onValueChange={handleValueChange}\n      disabled={disabled}\n      orientation={orientation}\n      data-disabled={disabled || undefined}\n      data-fill={fill || undefined}\n      data-size={size}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-activation-mode={activationMode}\n    >\n      <SegmentedControlSelectionContext.Provider value={selection}>\n        {children}\n      </SegmentedControlSelectionContext.Provider>\n      <span\n        aria-hidden=\"true\"\n        className=\"dsx-segmented-control__indicator\"\n        style={\n          orientation === 'vertical'\n            ? {\n                transform: `translateY(${indicator.y}px)`,\n                height: indicator.height,\n                transition: indicatorLive ? undefined : 'none',\n              }\n            : {\n                transform: `translateX(${indicator.x}px)`,\n                width: indicator.width,\n                transition: indicatorLive ? undefined : 'none',\n              }\n        }\n      />\n    </ToggleGroupPrimitive.Root>\n  )\n})\nSegmentedControlRoot.displayName = 'SegmentedControl'\n\ninterface SegmentedControlItemProps\n  extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n  iconOnly?: boolean\n  value: string\n}\n\nconst SegmentedControlItem = React.forwardRef<\n  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,\n  SegmentedControlItemProps\n>(({ children, className, disabled, iconOnly = false, value, onFocus, ...props }, forwardedRef) => {\n  const selection = React.useContext(SegmentedControlSelectionContext)\n\n  const handleItemFocus: React.FocusEventHandler<React.ComponentRef<typeof ToggleGroupPrimitive.Item>> = (event) => {\n    onFocus?.(event)\n\n    if (!selection || selection.activationMode !== 'automatic') {\n      return\n    }\n\n    if (selection.disabled || disabled || value === selection.selectedValue) {\n      return\n    }\n\n    selection.requestSelect(value)\n  }\n\n  return (\n    <ToggleGroupPrimitive.Item\n      {...props}\n      ref={forwardedRef}\n      value={value}\n      className={classNames('dsx-segmented-control__item', className)}\n      disabled={disabled}\n      data-disabled={disabled || undefined}\n      data-icon-only={iconOnly || undefined}\n      onFocus={handleItemFocus}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\nconst SegmentedControl: typeof SegmentedControlRoot & {\n  Item: typeof SegmentedControlItem\n} = Object.assign(SegmentedControlRoot, {\n  Item: SegmentedControlItem,\n})\n\nexport { SegmentedControl, SegmentedControlItem, SegmentedControlRoot }\nexport type { SegmentedControlItemProps, SegmentedControlRootProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/segmentedControl/segmentedControl.props.cjs

@@ -22,7 +22,9 @@ __export(segmentedControl_props_exports, {
 });
 module.exports = __toCommonJS(segmentedControl_props_exports);
 const segmentedControlSizes = ["sm", "md", "lg"];
-const segmentedControlVariants = ["default", "outline"];
+const segmentedControlVariants = ["default", "outline", "subtle"];
+const segmentedControlActivationModes = ["manual", "automatic"];
+const segmentedControlOrientations = ["horizontal", "vertical"];
 const segmentedControlPropDefs = {
   size: {
     type: "enum",
@@ -34,9 +36,23 @@ const segmentedControlPropDefs = {
     values: segmentedControlVariants,
     default: "default"
   },
+  orientation: {
+    type: "enum",
+    values: segmentedControlOrientations,
+    default: "horizontal"
+  },
+  activationMode: {
+    type: "enum",
+    values: segmentedControlActivationModes,
+    default: "manual"
+  },
   disabled: {
     type: "boolean",
     default: false
+  },
+  fill: {
+    type: "boolean",
+    default: false
   }
 };
 //# sourceMappingURL=segmentedControl.props.cjs.map

package/dist/components/segmentedControl/segmentedControl.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/segmentedControl/segmentedControl.props.ts"],
-  "sourcesContent": ["import type { PropDef } from '../../_internal/props/propDef'\n\nconst segmentedControlSizes = ['sm', 'md', 'lg'] as const\nconst segmentedControlVariants = ['default', 'outline'] as const\n\nconst segmentedControlPropDefs = {\n  size: {\n    type: 'enum',\n    values: segmentedControlSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    values: segmentedControlVariants,\n    default: 'default',\n  },\n  disabled: {\n    type: 'boolean',\n    default: false,\n  },\n} satisfies {\n  disabled: PropDef\n  size: PropDef<(typeof segmentedControlSizes)[number]>\n  variant: PropDef<(typeof segmentedControlVariants)[number]>\n}\n\nexport { segmentedControlPropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,wBAAwB,CAAC,MAAM,MAAM,IAAI;AAC/C,MAAM,2BAA2B,CAAC,WAAW,SAAS;AAEtD,MAAM,2BAA2B;AAAA,EAC/B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import type { PropDef } from '../../_internal/props/propDef'\n\nconst segmentedControlSizes = ['sm', 'md', 'lg'] as const\nconst segmentedControlVariants = ['default', 'outline', 'subtle'] as const\nconst segmentedControlActivationModes = ['manual', 'automatic'] as const\nconst segmentedControlOrientations = ['horizontal', 'vertical'] as const\n\nconst segmentedControlPropDefs = {\n  size: {\n    type: 'enum',\n    values: segmentedControlSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    values: segmentedControlVariants,\n    default: 'default',\n  },\n  orientation: {\n    type: 'enum',\n    values: segmentedControlOrientations,\n    default: 'horizontal',\n  },\n  activationMode: {\n    type: 'enum',\n    values: segmentedControlActivationModes,\n    default: 'manual',\n  },\n  disabled: {\n    type: 'boolean',\n    default: false,\n  },\n  fill: {\n    type: 'boolean',\n    default: false,\n  },\n} satisfies {\n  activationMode: PropDef<(typeof segmentedControlActivationModes)[number]>\n  disabled: PropDef\n  fill: PropDef\n  orientation: PropDef<(typeof segmentedControlOrientations)[number]>\n  size: PropDef<(typeof segmentedControlSizes)[number]>\n  variant: PropDef<(typeof segmentedControlVariants)[number]>\n}\n\nexport { segmentedControlPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,wBAAwB,CAAC,MAAM,MAAM,IAAI;AAC/C,MAAM,2BAA2B,CAAC,WAAW,WAAW,QAAQ;AAChE,MAAM,kCAAkC,CAAC,UAAU,WAAW;AAC9D,MAAM,+BAA+B,CAAC,cAAc,UAAU;AAE9D,MAAM,2BAA2B;AAAA,EAC/B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/segmentedControl/segmentedControl.props.d.cts

@@ -6,13 +6,27 @@ declare const segmentedControlPropDefs: {
     };
     variant: {
         type: "enum";
-        values: readonly ["default", "outline"];
+        values: readonly ["default", "outline", "subtle"];
         default: "default";
     };
+    orientation: {
+        type: "enum";
+        values: readonly ["horizontal", "vertical"];
+        default: "horizontal";
+    };
+    activationMode: {
+        type: "enum";
+        values: readonly ["manual", "automatic"];
+        default: "manual";
+    };
     disabled: {
         type: "boolean";
         default: false;
     };
+    fill: {
+        type: "boolean";
+        default: false;
+    };
 };
 export { segmentedControlPropDefs };
 //# sourceMappingURL=segmentedControl.props.d.cts.map

package/dist/components/segmentedControl/segmentedControl.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"segmentedControl.props.d.cts","sourceRoot":"","sources":["../../../src/components/segmentedControl/segmentedControl.props.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;CAmB7B,CAAA;AAED,OAAO,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"segmentedControl.props.d.cts","sourceRoot":"","sources":["../../../src/components/segmentedControl/segmentedControl.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC7B,CAAA;AAED,OAAO,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/segmentedControl/segmentedControl.props.d.mts

@@ -6,13 +6,27 @@ declare const segmentedControlPropDefs: {
     };
     variant: {
         type: "enum";
-        values: readonly ["default", "outline"];
+        values: readonly ["default", "outline", "subtle"];
         default: "default";
     };
+    orientation: {
+        type: "enum";
+        values: readonly ["horizontal", "vertical"];
+        default: "horizontal";
+    };
+    activationMode: {
+        type: "enum";
+        values: readonly ["manual", "automatic"];
+        default: "manual";
+    };
     disabled: {
         type: "boolean";
         default: false;
     };
+    fill: {
+        type: "boolean";
+        default: false;
+    };
 };
 export { segmentedControlPropDefs };
 //# sourceMappingURL=segmentedControl.props.d.mts.map

package/dist/components/segmentedControl/segmentedControl.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"segmentedControl.props.d.mts","sourceRoot":"","sources":["../../../src/components/segmentedControl/segmentedControl.props.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;CAmB7B,CAAA;AAED,OAAO,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"segmentedControl.props.d.mts","sourceRoot":"","sources":["../../../src/components/segmentedControl/segmentedControl.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC7B,CAAA;AAED,OAAO,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/segmentedControl/segmentedControl.props.d.ts

@@ -6,13 +6,27 @@ declare const segmentedControlPropDefs: {
     };
     variant: {
         type: "enum";
-        values: readonly ["default", "outline"];
+        values: readonly ["default", "outline", "subtle"];
         default: "default";
     };
+    orientation: {
+        type: "enum";
+        values: readonly ["horizontal", "vertical"];
+        default: "horizontal";
+    };
+    activationMode: {
+        type: "enum";
+        values: readonly ["manual", "automatic"];
+        default: "manual";
+    };
     disabled: {
         type: "boolean";
         default: false;
     };
+    fill: {
+        type: "boolean";
+        default: false;
+    };
 };
 export { segmentedControlPropDefs };
 //# sourceMappingURL=segmentedControl.props.d.ts.map

package/dist/components/segmentedControl/segmentedControl.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmentedControl.props.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedControl/segmentedControl.props.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;CAmB7B,CAAA;AAED,OAAO,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"segmentedControl.props.d.ts","sourceRoot":"","sources":["../../../src/components/segmentedControl/segmentedControl.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC7B,CAAA;AAED,OAAO,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/segmentedControl/segmentedControl.props.js

@@ -1,5 +1,7 @@
 const segmentedControlSizes = ["sm", "md", "lg"];
-const segmentedControlVariants = ["default", "outline"];
+const segmentedControlVariants = ["default", "outline", "subtle"];
+const segmentedControlActivationModes = ["manual", "automatic"];
+const segmentedControlOrientations = ["horizontal", "vertical"];
 const segmentedControlPropDefs = {
   size: {
     type: "enum",
@@ -11,9 +13,23 @@ const segmentedControlPropDefs = {
     values: segmentedControlVariants,
     default: "default"
   },
+  orientation: {
+    type: "enum",
+    values: segmentedControlOrientations,
+    default: "horizontal"
+  },
+  activationMode: {
+    type: "enum",
+    values: segmentedControlActivationModes,
+    default: "manual"
+  },
   disabled: {
     type: "boolean",
     default: false
+  },
+  fill: {
+    type: "boolean",
+    default: false
   }
 };
 export {

package/dist/components/segmentedControl/segmentedControl.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/segmentedControl/segmentedControl.props.ts"],
-  "sourcesContent": ["import type { PropDef } from '../../_internal/props/propDef'\n\nconst segmentedControlSizes = ['sm', 'md', 'lg'] as const\nconst segmentedControlVariants = ['default', 'outline'] as const\n\nconst segmentedControlPropDefs = {\n  size: {\n    type: 'enum',\n    values: segmentedControlSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    values: segmentedControlVariants,\n    default: 'default',\n  },\n  disabled: {\n    type: 'boolean',\n    default: false,\n  },\n} satisfies {\n  disabled: PropDef\n  size: PropDef<(typeof segmentedControlSizes)[number]>\n  variant: PropDef<(typeof segmentedControlVariants)[number]>\n}\n\nexport { segmentedControlPropDefs }\n"],
-  "mappings": "AAEA,MAAM,wBAAwB,CAAC,MAAM,MAAM,IAAI;AAC/C,MAAM,2BAA2B,CAAC,WAAW,SAAS;AAEtD,MAAM,2BAA2B;AAAA,EAC/B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import type { PropDef } from '../../_internal/props/propDef'\n\nconst segmentedControlSizes = ['sm', 'md', 'lg'] as const\nconst segmentedControlVariants = ['default', 'outline', 'subtle'] as const\nconst segmentedControlActivationModes = ['manual', 'automatic'] as const\nconst segmentedControlOrientations = ['horizontal', 'vertical'] as const\n\nconst segmentedControlPropDefs = {\n  size: {\n    type: 'enum',\n    values: segmentedControlSizes,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    values: segmentedControlVariants,\n    default: 'default',\n  },\n  orientation: {\n    type: 'enum',\n    values: segmentedControlOrientations,\n    default: 'horizontal',\n  },\n  activationMode: {\n    type: 'enum',\n    values: segmentedControlActivationModes,\n    default: 'manual',\n  },\n  disabled: {\n    type: 'boolean',\n    default: false,\n  },\n  fill: {\n    type: 'boolean',\n    default: false,\n  },\n} satisfies {\n  activationMode: PropDef<(typeof segmentedControlActivationModes)[number]>\n  disabled: PropDef\n  fill: PropDef\n  orientation: PropDef<(typeof segmentedControlOrientations)[number]>\n  size: PropDef<(typeof segmentedControlSizes)[number]>\n  variant: PropDef<(typeof segmentedControlVariants)[number]>\n}\n\nexport { segmentedControlPropDefs }\n"],
+  "mappings": "AAEA,MAAM,wBAAwB,CAAC,MAAM,MAAM,IAAI;AAC/C,MAAM,2BAA2B,CAAC,WAAW,WAAW,QAAQ;AAChE,MAAM,kCAAkC,CAAC,UAAU,WAAW;AAC9D,MAAM,+BAA+B,CAAC,cAAc,UAAU;AAE9D,MAAM,2BAA2B;AAAA,EAC/B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;",
   "names": []
 }

package/dist/components/select/Select.cjs

@@ -35,6 +35,7 @@ __export(Select_exports, {
   SelectHiddenSelect: () => SelectHiddenSelect,
   SelectItem: () => SelectItem,
   SelectItemGroupLabel: () => SelectItemGroupLabel,
+  SelectItemMedia: () => SelectItemMedia,
   SelectLabel: () => SelectLabel,
   SelectRoot: () => SelectRoot,
   SelectSeparator: () => SelectSeparator,
@@ -47,6 +48,7 @@ var React = __toESM(require("react"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
 var import_BaseDialog = require("../../_internal/BaseDialog");
+var import_floatingLayer = require("../../_internal/floatingLayer");
 var import_extractProps = require("../../_internal/helpers/extractProps");
 var import_Icon = require("../icon/Icon");
 var import_VisuallyHidden = require("../visuallyHidden/VisuallyHidden");
@@ -80,21 +82,35 @@ SelectRoot.displayName = "Select";
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = React.forwardRef(
   ({ className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPrimitive.Value, { ...props, ref: forwardedRef, className: (0, import_classnames.default)("dsx-select__value", className) });
+    const wrapRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+      const el = wrapRef.current;
+      if (!el) return;
+      const sync = () => {
+        const text = el.textContent ?? "";
+        if (el.title !== text) el.title = text;
+      };
+      sync();
+      const observer = new MutationObserver(sync);
+      observer.observe(el, { childList: true, characterData: true, subtree: true });
+      return () => observer.disconnect();
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: wrapRef, className: (0, import_classnames.default)("dsx-select__value", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPrimitive.Value, { ...props, ref: forwardedRef }) });
   }
 );
 SelectValue.displayName = "SelectValue";
 const SelectTrigger = React.forwardRef(
-  ({ children, className, size, variant, ...props }, forwardedRef) => {
+  ({ children, className, size, variant, invalid = false, ...props }, forwardedRef) => {
     const context = useSelectContext();
     const resolvedSize = props["data-size"] ?? size ?? context.size;
     const resolvedVariant = props["data-variant"] ?? variant ?? context.variant;
-    const { asChild, className: triggerClassName, ...triggerProps } = (0, import_extractProps.extractProps)(
+    const { asChild, className: triggerClassName, invalid: _invalid, ...triggerProps } = (0, import_extractProps.extractProps)(
       {
         ...props,
         className,
         size: resolvedSize,
-        variant: resolvedVariant
+        variant: resolvedVariant,
+        invalid
       },
       import_select.selectTriggerPropDefs
     );
@@ -106,6 +122,7 @@ const SelectTrigger = React.forwardRef(
         className: (0, import_classnames.default)("dsx-select__trigger", triggerClassName),
         "data-size": resolvedSize,
         "data-variant": resolvedVariant,
+        "aria-invalid": invalid || void 0,
         asChild,
         children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValue, {}),
@@ -120,7 +137,7 @@ const SelectContent = React.forwardRef(
   ({
     children,
     className,
-    position = "item-aligned",
+    position = "popper",
     sideOffset = position === "popper" ? 4 : void 0,
     size,
     variant,
@@ -129,6 +146,7 @@ const SelectContent = React.forwardRef(
     const context = useSelectContext();
     const resolvedSize = props["data-size"] ?? size ?? context.size;
     const resolvedVariant = props["data-variant"] ?? variant ?? context.variant;
+    const nestedInModalHost = (0, import_floatingLayer.useFloatingLayerHost)();
     const { asChild: _asChild, className: contentClassName, ...contentProps } = (0, import_extractProps.extractProps)(
       {
         ...props,
@@ -145,7 +163,8 @@ const SelectContent = React.forwardRef(
         ref: forwardedRef,
         position,
         sideOffset,
-        className: (0, import_classnames.default)("dsx-select__content", contentClassName),
+        align: "start",
+        className: (0, import_classnames.default)("dsx-select__content", nestedInModalHost && "dsx-menu__nested", contentClassName),
         "data-size": resolvedSize,
         "data-variant": resolvedVariant,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ScrollArea.ScrollArea, { className: "dsx-select__scroll-area", viewportAsChild: true, viewportClassName: "dsx-select__viewport", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPrimitive.Viewport, { children }) })
@@ -162,13 +181,62 @@ const SelectLabel = React.forwardRef(
 SelectLabel.displayName = "SelectLabel";
 const SelectItem = React.forwardRef(
   ({ children, className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectPrimitive.Item, { ...props, ref: forwardedRef, className: (0, import_classnames.default)("dsx-select__item", className), children: [
+    const { media, rest } = React.useMemo(() => {
+      const media2 = [];
+      const rest2 = [];
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.type === SelectItemMedia) media2.push(child);
+        else rest2.push(child);
+      });
+      return { media: media2, rest: rest2 };
+    }, [children]);
+    const itemRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+      const el = itemRef.current;
+      const panel = el?.closest(".dsx-select__content");
+      if (!el || !panel) return;
+      const sync = () => {
+        const panelStyle = getComputedStyle(panel);
+        const cap = panel.clientWidth - parseFloat(panelStyle.paddingLeft) - parseFloat(panelStyle.paddingRight);
+        if (el.hasAttribute("data-overflow")) {
+          el.style.maxWidth = `${cap}px`;
+          return;
+        }
+        if (el.scrollWidth > cap + 1) {
+          el.style.maxWidth = `${cap}px`;
+          el.setAttribute("data-overflow", "true");
+        } else {
+          el.style.maxWidth = "";
+        }
+      };
+      sync();
+      const observer = new ResizeObserver(sync);
+      observer.observe(el);
+      observer.observe(panel);
+      return () => observer.disconnect();
+    }, []);
+    const setRefs = React.useCallback(
+      (node) => {
+        itemRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SelectPrimitive.Item, { ...props, ref: setRefs, className: (0, import_classnames.default)("dsx-select__item", className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-select__item-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "check", size: "sm" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPrimitive.ItemText, { children })
+      media,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-select__item-text", children: rest }) })
     ] });
   }
 );
 SelectItem.displayName = "SelectItem";
+const SelectItemMedia = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref: forwardedRef, className: (0, import_classnames.default)("dsx-select__item-media", className) });
+  }
+);
+SelectItemMedia.displayName = "SelectItemMedia";
 const SelectSeparator = React.forwardRef(
   ({ className, ...props }, forwardedRef) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPrimitive.Separator, { ...props, ref: forwardedRef, className: (0, import_classnames.default)("dsx-select__separator", className) });
@@ -189,15 +257,8 @@ const SelectItemGroupLabel = React.forwardRef(
 );
 SelectItemGroupLabel.displayName = "SelectItemGroupLabel";
 const SelectValueText = React.forwardRef(
-  ({ className, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      SelectPrimitive.ItemText,
-      {
-        ...props,
-        ref: forwardedRef,
-        className: (0, import_classnames.default)("dsx-select__item-text", className)
-      }
-    );
+  ({ children, className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...props, ref: forwardedRef, className: (0, import_classnames.default)("dsx-select__item-text", className), children }) });
   }
 );
 SelectValueText.displayName = "SelectValueText";
@@ -227,6 +288,7 @@ const Select = Object.assign(SelectRoot, {
   Trigger: SelectTrigger,
   Content: SelectContent,
   Item: SelectItem,
+  ItemMedia: SelectItemMedia,
   Label: SelectLabel,
   Group: SelectGroup,
   Value: SelectValue,