import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import { createContext, forwardRef, useContext, useRef, useId } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { D as DurationDefault } from './primitive-BXgYQTTw.js';
import { I as Icon } from './Icon-B4uCvMU9.js';
import { u as useReducedMotion } from './use-reduced-motion-CqjZZ5QB.js';
import { useTrackingId } from './useTrackingId.js';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
import { m as motion } from './proxy-DEehATlA.js';
import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';

import './SegmentedControl.css';const SegmentedControlContext = createContext({});

const segment = "_segment_12jil_1";
const input = "_input_12jil_54";
const fill = "_fill_12jil_98";
const small = "_small_12jil_102";
const medium = "_medium_12jil_113";
const styles = {
	"segmented-control": "_segmented-control_12jil_1",
	segment: segment,
	input: input,
	"select-indicator": "_select-indicator_12jil_73",
	fill: fill,
	small: small,
	"icon-only": "_icon-only_12jil_107",
	medium: medium
};

const SegmentedControlSegment = forwardRef((props, ref) => {
  const {
    icon,
    value,
    children,
    className,
    "aria-label": ariaLabel,
    ...rest
  } = props;
  const shouldReduceMotion = useReducedMotion();
  const { current, setCurrent, name } = useContext(SegmentedControlContext);
  const labelRef = useRef(null);
  const classNames = cx(styles.segment, className, {
    [styles["icon-only"]]: icon && !children
  });
  const data = {
    value: props.value
  };
  const trackingId = useTrackingId({
    name: "SegmentedControlSegment",
    data,
    hasOverride: !!props["data-tracking-id"]
  });
  const computedAriaLabel = !children ? ariaLabel || value : void 0;
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
    "label",
    {
      className: classNames,
      ref: useMergeRefs([labelRef, ref]),
      "data-tracking-id": trackingId,
      "data-anv": "segmented-control-segment",
      "aria-label": computedAriaLabel,
      ...rest,
      children: [
        /* @__PURE__ */ jsx(
          "input",
          {
            type: "radio",
            name,
            value,
            onChange: () => setCurrent?.(value),
            checked: current === value,
            "aria-checked": current === value,
            className: styles["input"]
          }
        ),
        icon ? /* @__PURE__ */ jsx(Icon, { svg: icon, "aria-hidden": true }) : null,
        children,
        current === value && /* @__PURE__ */ jsx(
          motion.span,
          {
            layoutId: name,
            className: styles["select-indicator"],
            transition: {
              duration: shouldReduceMotion ? 0 : +DurationDefault.value.replace("ms", "") / 1e3
            }
          }
        )
      ]
    }
  ) });
});
SegmentedControlSegment.displayName = "SegmentedControlSegment";

const SegmentedControl = Object.assign(
  forwardRef(
    function SegmentedControlInner(props, ref) {
      const {
        className,
        onClick,
        onChange,
        children,
        size = "medium",
        defaultSelected,
        selected,
        name,
        fill,
        ...rest
      } = props;
      const [current, setCurrent] = useOptionallyControlledState({
        controlledValue: selected,
        defaultValue: defaultSelected,
        onChange
      });
      const segmentedControlRef = useRef(null);
      const SegmentedControlClassNames = cx(
        styles["segmented-control"],
        styles[size],
        className,
        {
          [styles.fill]: fill
        }
      );
      const uid = useId();
      const data = {
        name: props.name
      };
      const trackingId = useTrackingId({
        name: "SegmentedControl",
        data,
        hasOverride: !!props["data-tracking-id"]
      });
      return /* @__PURE__ */ jsx(
        motion.div,
        {
          transition: { duration: 0 },
          layout: true,
          role: "radiogroup",
          className: SegmentedControlClassNames,
          "data-anv": "segmented-control",
          "data-tracking-id": trackingId,
          ref: useMergeRefs([segmentedControlRef, ref]),
          ...rest,
          children: /* @__PURE__ */ jsx(
            SegmentedControlContext.Provider,
            {
              value: { current, setCurrent, name: name ?? uid },
              children
            }
          )
        }
      );
    }
  ),
  {
    /**
     * SegmentedControlSegment component for individual segments within a segmented control.
     *
     * Features:
     * - Individual segment with radio input
     * - Optional icon support
     * - Animated selection indicator
     * - Accessibility support with proper ARIA attributes
     * - Context integration with parent SegmentedControl
     * - Motion animations with reduced motion support
     *
     * @example
     * <SegmentedControl.Segment value="option1" icon={Icon1}>
     *   Option 1
     * </SegmentedControl.Segment>
     */
    Segment: SegmentedControlSegment
  }
);
SegmentedControl.displayName = "SegmentedControl";

export { SegmentedControl as S, SegmentedControlSegment as a };
//# sourceMappingURL=SegmentedControl-Be6jCglV.js.map
