@cognite/aura 0.3.4 → 1.46104.0

package/dist/components/ui/core/search/search.d.ts

@@ -1,10 +1,10 @@
-import { ForwardRefExoticComponent, RefAttributes, ComponentProps } from 'react';
-type SearchProps = Omit<ComponentProps<'input'>, 'type' | 'className'> & {
-    className?: string;
-    inputClassName?: string;
-    clearLabel?: string;
-    onClear?: () => void;
-    'data-slot'?: never;
+import { type ForwardRefExoticComponent, type RefAttributes, type ComponentProps } from "react";
+type SearchProps = Omit<ComponentProps<"input">, "type" | "className"> & {
+	className?: string;
+	inputClassName?: string;
+	clearLabel?: string;
+	onClear?: () => void;
+	"data-slot"?: never;
 };
-declare const Search: ForwardRefExoticComponent<Omit<SearchProps, 'ref'> & RefAttributes<HTMLInputElement | null>>;
+declare const Search: ForwardRefExoticComponent<Omit<SearchProps, "ref"> & RefAttributes<HTMLInputElement | null>>;
 export { Search };

package/dist/components/ui/core/search/search.js

@@ -1,77 +1,123 @@
-import { cn as e } from "../../../../lib/utils.js";
-import { InputGroup as t, InputGroupAddon as n, InputGroupButton as r, InputGroupInput as i } from "../input-group/input-group.js";
-import { forwardRef as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
-import { IconCircleXFilled as l, IconSearch as u } from "@tabler/icons-react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/search/search.tsx
-var p = (e) => typeof e == "string" ? e.length > 0 : typeof e == "number" ? Number.isFinite(e) : Array.isArray(e) ? e.length > 0 : !1, m = a(({ className: a, inputClassName: m, clearLabel: h = "Clear search", onClear: g, value: _, defaultValue: v, onChange: y, onInput: b, onFocus: x, onBlur: S, disabled: C, readOnly: w, ...T }, E) => {
-	let [D, O] = c(!1), [k, A] = c(() => p(_ ?? v)), j = s(null), M = _ != null, N = M ? p(_) : k;
-	o(E, () => j.current, []);
-	let P = () => {
-		O(!0);
-	}, F = (e) => {
-		e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget) || O(!1);
-	}, I = () => {
-		let e = j.current;
-		e != null && (g?.(), !M && e.value !== "" && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), e.dispatchEvent(new Event("change", { bubbles: !0 }))), e.focus());
-	}, L = (e) => {
-		M || A(p(e.currentTarget.value)), b?.(e);
-	}, R = (e) => {
-		M || A(p(e.currentTarget.value)), y?.(e);
-	}, z = D && N && !C && !w && (!M || g != null);
-	return /* @__PURE__ */ d("div", {
-		"data-slot": "search",
-		className: e("w-full cursor-text", a),
-		onFocusCapture: P,
-		onBlurCapture: F,
-		onClick: () => j.current?.focus(),
-		children: /* @__PURE__ */ f(t, {
-			className: "w-full transition-none",
-			children: [
-				/* @__PURE__ */ d(n, {
-					align: "inline-start",
-					children: /* @__PURE__ */ d(u, {
-						className: "size-4",
-						"aria-hidden": !0
-					})
-				}),
-				/* @__PURE__ */ d(i, {
-					...T,
-					ref: j,
-					type: "search",
-					value: _,
-					defaultValue: v,
-					disabled: C,
-					readOnly: w,
-					onInput: L,
-					onChange: R,
-					onFocus: x,
-					onBlur: S,
-					className: e("placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none", m)
-				}),
-				/* @__PURE__ */ d(n, {
-					align: "inline-end",
-					"aria-hidden": !z || void 0,
-					className: z ? void 0 : "invisible pointer-events-none",
-					children: /* @__PURE__ */ d(r, {
-						type: "button",
-						variant: "ghost",
-						size: "icon-sm",
-						"aria-label": h,
-						onMouseDown: (e) => {
-							e.preventDefault();
-						},
-						onClick: I,
-						children: /* @__PURE__ */ d(l, {
-							className: "size-4",
-							"aria-hidden": !0
-						})
-					})
-				})
-			]
-		})
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { IconCircleXFilled, IconSearch } from "@tabler/icons-react";
+import { cn } from "../../../../lib/utils.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../input-group/input-group.js";
+const hasInputValue = (value)=>{
+    if (typeof value === 'string') {
+        return value.length > 0;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value);
+    }
+    if (Array.isArray(value)) {
+        return value.length > 0;
+    }
+    return false;
+};
+const Search = /*#__PURE__*/ forwardRef(({ className, inputClassName, clearLabel = 'Clear search', onClear, value, defaultValue, onChange, onInput, onFocus, onBlur, disabled, readOnly, ...props }, ref)=>{
+    const [hasFocusWithin, setHasFocusWithin] = useState(false);
+    const [isUncontrolledInputFilled, setIsUncontrolledInputFilled] = useState(()=>hasInputValue(value ?? defaultValue));
+    const inputRef = useRef(null);
+    const isControlled = value != null;
+    const isInputFilled = isControlled ? hasInputValue(value) : isUncontrolledInputFilled;
+    useImperativeHandle(ref, ()=>inputRef.current, []);
+    const handleFocusCapture = ()=>{
+        setHasFocusWithin(true);
+    };
+    const handleBlurCapture = (event)=>{
+        if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) {
+            return;
+        }
+        setHasFocusWithin(false);
+    };
+    const handleClear = ()=>{
+        const input = inputRef.current;
+        if (input == null) {
+            return;
+        }
+        onClear?.();
+        if (!isControlled && input.value !== '') {
+            // Use the native setter so React's synthetic event system detects the change.
+            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, '');
+            input.dispatchEvent(new Event('input', {
+                bubbles: true
+            }));
+            input.dispatchEvent(new Event('change', {
+                bubbles: true
+            }));
+        }
+        input.focus();
+    };
+    const handleInput = (event)=>{
+        if (!isControlled) {
+            setIsUncontrolledInputFilled(hasInputValue(event.currentTarget.value));
+        }
+        onInput?.(event);
+    };
+    const handleChange = (event)=>{
+        if (!isControlled) {
+            setIsUncontrolledInputFilled(hasInputValue(event.currentTarget.value));
+        }
+        onChange?.(event);
+    };
+    const canClear = !isControlled || onClear != null;
+    const showClearButton = hasFocusWithin && isInputFilled && !disabled && !readOnly && canClear;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "search",
+        className: cn('w-full cursor-text', className),
+        onFocusCapture: handleFocusCapture,
+        onBlurCapture: handleBlurCapture,
+        onClick: ()=>inputRef.current?.focus(),
+        children: /*#__PURE__*/ _jsxs(InputGroup, {
+            className: "w-full transition-none",
+            children: [
+                /*#__PURE__*/ _jsx(InputGroupAddon, {
+                    align: "inline-start",
+                    className: "[&_svg]:text-muted-foreground group-hover/input-group:[&_svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:enabled:focus-visible:not(:read-only)]/input-group:[&_svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:enabled:not(:placeholder-shown):not(:read-only)]/input-group:[&_svg]:text-muted-foreground",
+                    children: /*#__PURE__*/ _jsx(IconSearch, {
+                        className: "size-4",
+                        "aria-hidden": true
+                    })
+                }),
+                /*#__PURE__*/ _jsx(InputGroupInput, {
+                    ...props,
+                    ref: inputRef,
+                    type: "search",
+                    value: value,
+                    defaultValue: defaultValue,
+                    disabled: disabled,
+                    readOnly: readOnly,
+                    onInput: handleInput,
+                    onChange: handleChange,
+                    onFocus: onFocus,
+                    onBlur: onBlur,
+                    className: cn('placeholder:text-muted-foreground [&:not(:placeholder-shown):not(:read-only)]:text-base-foreground [&:not(:placeholder-shown):not(:read-only)]:hover:text-base-foreground [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none', inputClassName)
+                }),
+                /*#__PURE__*/ _jsx(InputGroupAddon, {
+                    align: "inline-end",
+                    "aria-hidden": showClearButton ? undefined : true,
+                    className: showClearButton ? undefined : 'invisible pointer-events-none',
+                    children: /*#__PURE__*/ _jsx(InputGroupButton, {
+                        type: "button",
+                        variant: "ghost",
+                        size: "icon-sm",
+                        "aria-label": clearLabel,
+                        onMouseDown: (event)=>{
+                            event.preventDefault();
+                        },
+                        onClick: handleClear,
+                        children: /*#__PURE__*/ _jsx(IconCircleXFilled, {
+                            className: "size-4",
+                            "aria-hidden": true
+                        })
+                    })
+                })
+            ]
+        })
+    });
 });
-m.displayName = "Search";
-//#endregion
-export { m as Search };
+Search.displayName = 'Search';
+export { Search };
+
+//# sourceMappingURL=search.js.map

package/dist/components/ui/core/search/search.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/search/search.tsx"],"sourcesContent":["import {\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type ChangeEvent,\n  type ComponentProps,\n  type ComponentRef,\n  type FocusEvent,\n  type FormEvent,\n  forwardRef,\n  type MouseEvent,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\n\nimport { IconCircleXFilled, IconSearch } from '@tabler/icons-react';\n\nimport { cn } from '../../../../lib/utils';\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from '../input-group/input-group';\n\ntype SearchProps = Omit<ComponentProps<'input'>, 'type' | 'className'> & {\n  className?: string;\n  inputClassName?: string;\n  clearLabel?: string;\n  onClear?: () => void;\n  'data-slot'?: never;\n};\n\nconst hasInputValue = (value: unknown): boolean => {\n  if (typeof value === 'string') {\n    return value.length > 0;\n  }\n  if (typeof value === 'number') {\n    return Number.isFinite(value);\n  }\n  if (Array.isArray(value)) {\n    return value.length > 0;\n  }\n  return false;\n};\n\nconst Search: ForwardRefExoticComponent<\n  Omit<SearchProps, 'ref'> & RefAttributes<HTMLInputElement | null>\n> = forwardRef<ComponentRef<'input'> | null, SearchProps>(\n  (\n    {\n      className,\n      inputClassName,\n      clearLabel = 'Clear search',\n      onClear,\n      value,\n      defaultValue,\n      onChange,\n      onInput,\n      onFocus,\n      onBlur,\n      disabled,\n      readOnly,\n      ...props\n    },\n    ref\n  ) => {\n    const [hasFocusWithin, setHasFocusWithin] = useState(false);\n    const [isUncontrolledInputFilled, setIsUncontrolledInputFilled] =\n      useState<boolean>(() => hasInputValue(value ?? defaultValue));\n    const inputRef = useRef<ComponentRef<'input'>>(null);\n    const isControlled = value != null;\n    const isInputFilled = isControlled\n      ? hasInputValue(value)\n      : isUncontrolledInputFilled;\n\n    useImperativeHandle<\n      ComponentRef<'input'> | null,\n      ComponentRef<'input'> | null\n    >(ref, () => inputRef.current, []);\n\n    const handleFocusCapture = (): void => {\n      setHasFocusWithin(true);\n    };\n\n    const handleBlurCapture = (event: FocusEvent<HTMLDivElement>): void => {\n      if (\n        event.relatedTarget instanceof Node &&\n        event.currentTarget.contains(event.relatedTarget)\n      ) {\n        return;\n      }\n      setHasFocusWithin(false);\n    };\n\n    const handleClear = (): void => {\n      const input = inputRef.current;\n      if (input == null) {\n        return;\n      }\n      onClear?.();\n      if (!isControlled && input.value !== '') {\n        // Use the native setter so React's synthetic event system detects the change.\n        Object.getOwnPropertyDescriptor(\n          HTMLInputElement.prototype,\n          'value'\n        )?.set?.call(input, '');\n        input.dispatchEvent(new Event('input', { bubbles: true }));\n        input.dispatchEvent(new Event('change', { bubbles: true }));\n      }\n      input.focus();\n    };\n\n    const handleInput = (event: FormEvent<HTMLInputElement>): void => {\n      if (!isControlled) {\n        setIsUncontrolledInputFilled(hasInputValue(event.currentTarget.value));\n      }\n      onInput?.(event);\n    };\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n      if (!isControlled) {\n        setIsUncontrolledInputFilled(hasInputValue(event.currentTarget.value));\n      }\n      onChange?.(event);\n    };\n\n    const canClear = !isControlled || onClear != null;\n    const showClearButton =\n      hasFocusWithin && isInputFilled && !disabled && !readOnly && canClear;\n\n    return (\n      <div\n        data-slot=\"search\"\n        className={cn('w-full cursor-text', className)}\n        onFocusCapture={handleFocusCapture}\n        onBlurCapture={handleBlurCapture}\n        onClick={() => inputRef.current?.focus()}\n      >\n        <InputGroup className=\"w-full transition-none\">\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"[&_svg]:text-muted-foreground group-hover/input-group:[&_svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:enabled:focus-visible:not(:read-only)]/input-group:[&_svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:enabled:not(:placeholder-shown):not(:read-only)]/input-group:[&_svg]:text-muted-foreground\"\n          >\n            <IconSearch className=\"size-4\" aria-hidden />\n          </InputGroupAddon>\n          <InputGroupInput\n            {...props}\n            ref={inputRef}\n            type=\"search\"\n            value={value}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            readOnly={readOnly}\n            onInput={handleInput}\n            onChange={handleChange}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            className={cn(\n              'placeholder:text-muted-foreground [&:not(:placeholder-shown):not(:read-only)]:text-base-foreground [&:not(:placeholder-shown):not(:read-only)]:hover:text-base-foreground [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none',\n              inputClassName\n            )}\n          />\n          <InputGroupAddon\n            align=\"inline-end\"\n            aria-hidden={showClearButton ? undefined : true}\n            className={\n              showClearButton ? undefined : 'invisible pointer-events-none'\n            }\n          >\n            <InputGroupButton\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label={clearLabel}\n              onMouseDown={(event: MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault();\n              }}\n              onClick={handleClear}\n            >\n              <IconCircleXFilled className=\"size-4\" aria-hidden />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    );\n  }\n);\n\nSearch.displayName = 'Search';\n\nexport { Search };\n"],"names":["forwardRef","useImperativeHandle","useRef","useState","IconCircleXFilled","IconSearch","cn","InputGroup","InputGroupAddon","InputGroupButton","InputGroupInput","hasInputValue","value","length","Number","isFinite","Array","isArray","Search","className","inputClassName","clearLabel","onClear","defaultValue","onChange","onInput","onFocus","onBlur","disabled","readOnly","props","ref","hasFocusWithin","setHasFocusWithin","isUncontrolledInputFilled","setIsUncontrolledInputFilled","inputRef","isControlled","isInputFilled","current","handleFocusCapture","handleBlurCapture","event","relatedTarget","Node","currentTarget","contains","handleClear","input","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","focus","handleInput","handleChange","canClear","showClearButton","div","data-slot","onFocusCapture","onBlurCapture","onClick","align","aria-hidden","type","undefined","variant","size","aria-label","onMouseDown","preventDefault","displayName"],"mappings":"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"}

package/dist/components/ui/core/segmented-control/segmented-control.d.ts

@@ -1,20 +1,26 @@
-import { ReactNode } from 'react';
-import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
-import { VariantProps } from 'class-variance-authority';
-import { ClassProp } from 'class-variance-authority/types';
+import { type ComponentProps, type ReactNode } from "react";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { type VariantProps } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
 declare function SegmentedControl({ className, ...props }: TabsPrimitive.Root.Props): ReactNode;
-interface SegmentedControlListVariantProps {
-    size?: 'small' | 'default' | null;
+interface SegmentedControlSizeVariantProps {
+	size?: "small" | "default" | null;
 }
-declare const segmentedControlListVariants: (props?: (SegmentedControlListVariantProps & ClassProp) | undefined) => string;
+declare const segmentedControlListVariants: (props?: (SegmentedControlSizeVariantProps & ClassProp) | undefined) => string;
+type SegmentedControlSize = NonNullable<VariantProps<typeof segmentedControlListVariants>["size"]>;
 type SegmentedControlListProps = TabsPrimitive.List.Props & VariantProps<typeof segmentedControlListVariants>;
 declare function SegmentedControlList({ className, size, children, ...props }: SegmentedControlListProps): ReactNode;
-interface SegmentedControlButtonVariantProps {
-    size?: 'small' | 'default' | null;
-    tabContent?: 'icon-label' | 'label-only' | 'icon-only' | null;
+declare const segmentedControlIndicatorVariants: (props?: (SegmentedControlSizeVariantProps & ClassProp) | undefined) => string;
+type SegmentedControlIndicatorProps = ComponentProps<"div"> & VariantProps<typeof segmentedControlIndicatorVariants> & {
+	activeSelector?: string;
+};
+declare function SegmentedControlIndicator({ className, size, activeSelector, style, ...props }: SegmentedControlIndicatorProps): ReactNode;
+interface SegmentedControlButtonVariantProps extends SegmentedControlSizeVariantProps {
+	tabContent?: "icon-label" | "label-only" | "icon-only" | null;
 }
 declare const segmentedControlButtonVariants: (props?: (SegmentedControlButtonVariantProps & ClassProp) | undefined) => string;
 type SegmentedControlButtonProps = TabsPrimitive.Tab.Props & VariantProps<typeof segmentedControlButtonVariants>;
 declare function SegmentedControlButton({ className, size, tabContent, ...props }: SegmentedControlButtonProps): ReactNode;
 declare function SegmentedControlContent({ className, ...props }: TabsPrimitive.Panel.Props): ReactNode;
-export { SegmentedControl, SegmentedControlButton, SegmentedControlContent, SegmentedControlList, segmentedControlButtonVariants, segmentedControlListVariants, };
+export { SegmentedControl, SegmentedControlButton, SegmentedControlContent, SegmentedControlIndicator, SegmentedControlList, segmentedControlButtonVariants, segmentedControlIndicatorVariants, segmentedControlListVariants };
+export type { SegmentedControlSize };

package/dist/components/ui/core/segmented-control/segmented-control.js

@@ -1,115 +1,211 @@
-import { cn as e } from "../../../../lib/utils.js";
-import { createContext as t, useContext as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { cva as a } from "class-variance-authority";
-import { Tabs as o } from "@base-ui/react/tabs";
-//#region libs/aura/src/components/ui/core/segmented-control/segmented-control.tsx
-function s({ className: t, ...n }) {
-	return /* @__PURE__ */ r(o.Root, {
-		"data-slot": "segmented-control",
-		className: e("flex flex-col gap-2", t),
-		...n
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useRef } from "react";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../../lib/utils.js";
+function SegmentedControl({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(TabsPrimitive.Root, {
+        "data-slot": "segmented-control",
+        className: cn('flex flex-col gap-2', className),
+        ...props
+    });
 }
-var c = a("bg-muted-background text-muted-foreground relative isolate inline-flex w-fit items-center justify-center gap-2 p-0.5", {
-	variants: { size: {
-		default: "h-9 rounded-lg",
-		small: "h-7 rounded-md"
-	} },
-	defaultVariants: { size: "default" }
-}), l = t(void 0);
-function u({ className: t, size: n, children: a, ...s }) {
-	let u = n ?? "default";
-	return /* @__PURE__ */ r(o.List, {
-		"data-slot": "segmented-control-list",
-		className: e(c({ size: n }), t),
-		...s,
-		children: /* @__PURE__ */ i(l.Provider, {
-			value: u,
-			children: [/* @__PURE__ */ r(f, { size: u }), a]
-		})
-	});
+const segmentedControlListVariants = cva('bg-medium-background text-muted-foreground relative isolate inline-flex w-fit items-center justify-center gap-2 p-0.5', {
+    variants: {
+        size: {
+            default: 'h-9 rounded-lg',
+            small: 'h-7 rounded-md'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
+});
+const SegmentedControlSizeContext = /*#__PURE__*/ createContext(undefined);
+function useSegmentedControlSize(size) {
+    const inherited = useContext(SegmentedControlSizeContext);
+    return size ?? inherited ?? 'default';
+}
+function SegmentedControlList({ className, size, children, ...props }) {
+    const resolvedSize = size ?? 'default';
+    return /*#__PURE__*/ _jsx(TabsPrimitive.List, {
+        "data-slot": "segmented-control-list",
+        className: cn(segmentedControlListVariants({
+            size
+        }), className),
+        ...props,
+        children: /*#__PURE__*/ _jsxs(SegmentedControlSizeContext.Provider, {
+            value: resolvedSize,
+            children: [
+                /*#__PURE__*/ _jsx(SegmentedControlIndicator, {
+                    size: resolvedSize,
+                    activeSelector: '[aria-selected="true"]'
+                }),
+                children
+            ]
+        })
+    });
 }
-var d = a("bg-background pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) -z-0 h-(--active-tab-height) w-(--active-tab-width) motion-safe:transition-[top,left,width,height] motion-safe:duration-200 motion-safe:ease-out data-[activation-direction=none]:transition-none", {
-	variants: { size: {
-		default: "rounded-md",
-		small: "rounded-sm"
-	} },
-	defaultVariants: { size: "default" }
+const segmentedControlIndicatorVariants = cva('bg-background shadow-sm pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) -z-0 h-(--active-tab-height) w-(--active-tab-width) motion-safe:transition-[top,left,width,height] motion-safe:duration-200 motion-safe:ease-out data-[activation-direction=none]:transition-none', {
+    variants: {
+        size: {
+            default: 'rounded-md',
+            small: 'rounded-sm'
+        }
+    },
+    defaultVariants: {
+        size: 'default'
+    }
 });
-function f({ className: t, size: n, ...i }) {
-	return /* @__PURE__ */ r(o.Indicator, {
-		"data-slot": "segmented-control-indicator",
-		className: e(d({ size: n }), t),
-		...i
-	});
+function SegmentedControlIndicator({ className, size, activeSelector = '[aria-selected="true"],[data-active]', style, ...props }) {
+    const ref = useRef(null);
+    const previousLeftRef = useRef(null);
+    useLayoutEffect(()=>{
+        const indicator = ref.current;
+        const list = indicator?.parentElement;
+        if (!indicator || !list) {
+            return undefined;
+        }
+        let currentActive = null;
+        const pendingInitialObserve = new Set();
+        const observeResize = (element)=>{
+            pendingInitialObserve.add(element);
+            resizeObserver.observe(element);
+        };
+        const update = (isResize = false)=>{
+            const active = list.querySelector(activeSelector);
+            if (!active) {
+                indicator.style.opacity = '0';
+                return;
+            }
+            if (active !== currentActive) {
+                if (currentActive) {
+                    resizeObserver.unobserve(currentActive);
+                }
+                observeResize(active);
+                currentActive = active;
+            }
+            const left = active.offsetLeft;
+            const previousLeft = previousLeftRef.current;
+            const direction = isResize || previousLeft === null || left === previousLeft ? 'none' : left > previousLeft ? 'right' : 'left';
+            indicator.dataset.activationDirection = direction;
+            indicator.style.opacity = '1';
+            indicator.style.setProperty('--active-tab-left', `${left}px`);
+            indicator.style.setProperty('--active-tab-top', `${active.offsetTop}px`);
+            indicator.style.setProperty('--active-tab-width', `${active.offsetWidth}px`);
+            indicator.style.setProperty('--active-tab-height', `${active.offsetHeight}px`);
+            previousLeftRef.current = left;
+        };
+        const resizeObserver = new ResizeObserver((entries)=>{
+            const isGenuineResize = entries.some((entry)=>{
+                if (pendingInitialObserve.has(entry.target)) {
+                    pendingInitialObserve.delete(entry.target);
+                    return false;
+                }
+                return true;
+            });
+            if (isGenuineResize) {
+                update(true);
+            }
+        });
+        observeResize(list);
+        update();
+        const mutationObserver = new MutationObserver(()=>update(false));
+        mutationObserver.observe(list, {
+            attributes: true,
+            attributeFilter: [
+                'aria-selected',
+                'data-active',
+                'class'
+            ],
+            subtree: true,
+            childList: true
+        });
+        return ()=>{
+            mutationObserver.disconnect();
+            resizeObserver.disconnect();
+        };
+    }, [
+        activeSelector
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        "data-slot": "segmented-control-indicator",
+        "data-activation-direction": "none",
+        className: cn('opacity-0', segmentedControlIndicatorVariants({
+            size
+        }), className),
+        style: style,
+        ...props
+    });
 }
-var p = a("text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap text-muted-foreground dark:text-muted-foreground border border-transparent transition-[color,box-shadow] duration-200 ease-out focus-visible:border-ring focus-visible:ring focus-visible:ring-ring-shadow focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 hover:text-foreground data-active:text-foreground data-active:hover:text-foreground", {
-	variants: {
-		size: {
-			default: "rounded-md",
-			small: "rounded-sm"
-		},
-		tabContent: {
-			"icon-label": "",
-			"label-only": "",
-			"icon-only": "px-0"
-		}
-	},
-	compoundVariants: [
-		{
-			size: "default",
-			tabContent: "icon-label",
-			className: "h-8 gap-2 px-2 py-0"
-		},
-		{
-			size: "default",
-			tabContent: "label-only",
-			className: "h-8 gap-0 px-2 py-0"
-		},
-		{
-			size: "default",
-			tabContent: "icon-only",
-			className: "size-8 gap-0 py-0"
-		},
-		{
-			size: "small",
-			tabContent: "icon-label",
-			className: "h-6 gap-2 px-2 py-0"
-		},
-		{
-			size: "small",
-			tabContent: "label-only",
-			className: "h-6 gap-0 px-2 py-0"
-		},
-		{
-			size: "small",
-			tabContent: "icon-only",
-			className: "size-6 gap-0 py-0"
-		}
-	],
-	defaultVariants: {
-		size: "default",
-		tabContent: "icon-label"
-	}
+const segmentedControlButtonVariants = cva('text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap text-muted-foreground dark:text-muted-foreground border border-transparent transition-[color,box-shadow] duration-200 ease-out focus-visible:border-ring focus-visible:ring focus-visible:ring-ring-shadow focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 hover:text-foreground data-active:text-foreground data-active:hover:text-foreground', {
+    variants: {
+        size: {
+            default: 'rounded-md',
+            small: 'rounded-sm'
+        },
+        tabContent: {
+            'icon-label': '',
+            'label-only': '',
+            'icon-only': 'px-0'
+        }
+    },
+    compoundVariants: [
+        {
+            size: 'default',
+            tabContent: 'icon-label',
+            className: 'h-8 gap-2 px-2 py-0'
+        },
+        {
+            size: 'default',
+            tabContent: 'label-only',
+            className: 'h-8 gap-0 px-2 py-0'
+        },
+        {
+            size: 'default',
+            tabContent: 'icon-only',
+            className: 'size-8 gap-0 py-0'
+        },
+        {
+            size: 'small',
+            tabContent: 'icon-label',
+            className: 'h-6 gap-2 px-2 py-0'
+        },
+        {
+            size: 'small',
+            tabContent: 'label-only',
+            className: 'h-6 gap-0 px-2 py-0'
+        },
+        {
+            size: 'small',
+            tabContent: 'icon-only',
+            className: 'size-6 gap-0 py-0'
+        }
+    ],
+    defaultVariants: {
+        size: 'default',
+        tabContent: 'icon-label'
+    }
 });
-function m({ className: t, size: i, tabContent: a, ...s }) {
-	let c = n(l), u = i ?? c;
-	return /* @__PURE__ */ r(o.Tab, {
-		"data-slot": "segmented-control-trigger",
-		className: e(p({
-			size: u,
-			tabContent: a
-		}), t),
-		...s
-	});
+function SegmentedControlButton({ className, size, tabContent, ...props }) {
+    const resolvedSize = useSegmentedControlSize(size);
+    return /*#__PURE__*/ _jsx(TabsPrimitive.Tab, {
+        "data-slot": "segmented-control-trigger",
+        className: cn(segmentedControlButtonVariants({
+            size: resolvedSize,
+            tabContent
+        }), className),
+        ...props
+    });
 }
-function h({ className: t, ...n }) {
-	return /* @__PURE__ */ r(o.Panel, {
-		"data-slot": "segmented-control-content",
-		className: e("flex-1 outline-none", t),
-		...n
-	});
+function SegmentedControlContent({ className, ...props }) {
+    return /*#__PURE__*/ _jsx(TabsPrimitive.Panel, {
+        "data-slot": "segmented-control-content",
+        className: cn('flex-1 outline-none', className),
+        ...props
+    });
 }
-//#endregion
-export { s as SegmentedControl, m as SegmentedControlButton, h as SegmentedControlContent, u as SegmentedControlList, p as segmentedControlButtonVariants, c as segmentedControlListVariants };
+export { SegmentedControl, SegmentedControlButton, SegmentedControlContent, SegmentedControlIndicator, SegmentedControlList, segmentedControlButtonVariants, segmentedControlIndicatorVariants, segmentedControlListVariants };
+
+//# sourceMappingURL=segmented-control.js.map