@kobalte/core/dist/segmented-control/index.jsx

Unstyled components and primitives for building accessible web apps and design systems with SolidJS.

import {
  RadioGroup,
  RadioGroupItemControl,
  RadioGroupItemDescription,
  RadioGroupItemIndicator,
  RadioGroupItemLabel,
  RadioGroupLabel,
  useRadioGroupContext,
  useRadioGroupItemContext
} from "../chunk/FQAGELOF.jsx";
import "../chunk/FOXVCQFV.jsx";
import {
  createFormResetListener
} from "../chunk/QJIB6BDF.jsx";
import {
  FormControlErrorMessage
} from "../chunk/ZZYKR3VO.jsx";
import {
  FormControlDescription
} from "../chunk/XUUROM4M.jsx";
import "../chunk/JNCCF6MP.jsx";
import "../chunk/FN6EICGO.jsx";
import "../chunk/OYES4GOP.jsx";
import {
  Polymorphic
} from "../chunk/FLVHQV4A.jsx";
import "../chunk/5WXHJDCZ.jsx";

// src/segmented-control/segmented-control-indicator.tsx
import {
  batch,
  createEffect,
  createSignal,
  on,
  splitProps
} from "solid-js";
import { combineStyle } from "@solid-primitives/props";
import { createResizeObserver } from "@solid-primitives/resize-observer";

// src/segmented-control/segmented-control-context.tsx
import {
  createContext,
  useContext
} from "solid-js";
var SegmentedControlContext = createContext();
function useSegmentedControlContext() {
  const context = useContext(SegmentedControlContext);
  if (context === void 0) {
    throw new Error(
      "[kobalte]: `useSegmentedControlContext` must be used within a `SegmentedControl` component"
    );
  }
  return context;
}

// src/segmented-control/segmented-control-indicator.tsx
function SegmentedControlIndicator(props) {
  const context = useSegmentedControlContext();
  const [localProps, otherProps] = splitProps(props, ["style"]);
  const [style, setStyle] = createSignal();
  const [resizing, setResizing] = createSignal(false);
  const computeStyle = () => {
    const element = context.selectedItem();
    if (!element) {
      setStyle(void 0);
      return;
    }
    setStyle({
      width: `${element.offsetWidth}px`,
      height: `${element.offsetHeight}px`,
      transform: computeTransform(element),
      "transition-duration": resizing() ? "0ms" : void 0
    });
  };
  const computeTransform = (element) => {
    const style2 = getComputedStyle(element.parentElement);
    const x = element.offsetLeft - Number.parseFloat(style2.paddingLeft);
    const y = element.offsetTop - Number.parseFloat(style2.paddingTop);
    return `translate(${x}px, ${y}px)`;
  };
  createEffect(
    on(context.selectedItem, () => {
      setResizing(!style());
      computeStyle();
      setResizing(false);
    })
  );
  createResizeObserver(context.root, () => {
    batch(() => {
      setResizing(true);
      computeStyle();
      setResizing(false);
    });
  });
  return <Polymorphic
    as="div"
    role="presentation"
    style={combineStyle(style(), localProps.style)}
    data-resizing={resizing()}
    data-orientation={context.orientation()}
    {...otherProps}
  />;
}

// src/segmented-control/segmented-control-item.tsx
import { mergeRefs } from "@kobalte/utils";
import {
  createEffect as createEffect2,
  createSignal as createSignal2,
  splitProps as splitProps2
} from "solid-js";
var SegmentedControlItem = (props) => {
  const radioGroupContext = useRadioGroupContext();
  const segmentedControlContext = useSegmentedControlContext();
  const [localProps, otherProps] = splitProps2(props, ["ref"]);
  const [ref, setRef] = createSignal2();
  createEffect2(() => {
    const element = ref();
    if (!element)
      return;
    if (radioGroupContext.isSelectedValue(props.value)) {
      segmentedControlContext.setSelectedItem(element);
    }
  });
  return <RadioGroup.Item
    ref={mergeRefs(setRef, localProps.ref)}
    {...otherProps}
  />;
};

// src/segmented-control/segmented-control-item-input.tsx
import { mergeRefs as mergeRefs2 } from "@kobalte/utils";
import {
  createSignal as createSignal3,
  splitProps as splitProps3
} from "solid-js";
var SegmentedControlItemInput = (props) => {
  const radioGroupItemContext = useRadioGroupItemContext();
  const [localProps, otherProps] = splitProps3(props, ["ref"]);
  const [ref, setRef] = createSignal3();
  createFormResetListener(ref, () => {
    requestAnimationFrame(() => {
      if (radioGroupItemContext.isDefault()) {
        radioGroupItemContext.select();
      }
    });
  });
  return <RadioGroup.ItemInput
    ref={mergeRefs2(setRef, localProps.ref)}
    {...otherProps}
  />;
};

// src/segmented-control/segmented-control-root.tsx
import { mergeRefs as mergeRefs3 } from "@kobalte/utils";
import {
  createEffect as createEffect3,
  createSignal as createSignal4,
  mergeProps,
  splitProps as splitProps4
} from "solid-js";
var SegmentedControlRoot = (props) => {
  const mergedProps = mergeProps(
    {
      defaultValue: props.value,
      orientation: "horizontal"
    },
    props
  );
  const [localProps, otherProps] = splitProps4(mergedProps, ["ref"]);
  const [ref, setRef] = createSignal4();
  const [selectedItem, setSelectedItem] = createSignal4();
  const context = {
    value: () => otherProps.value,
    defaultValue: () => otherProps.defaultValue,
    orientation: () => otherProps.orientation,
    root: ref,
    selectedItem,
    setSelectedItem
  };
  createEffect3(() => {
    if (context.value())
      return;
    setSelectedItem(void 0);
  });
  return <SegmentedControlContext.Provider value={context}><RadioGroup ref={mergeRefs3(setRef, localProps.ref)} {...otherProps} /></SegmentedControlContext.Provider>;
};

// src/segmented-control/index.tsx
var SegmentedControl = Object.assign(SegmentedControlRoot, {
  Description: FormControlDescription,
  ErrorMessage: FormControlErrorMessage,
  Indicator: SegmentedControlIndicator,
  Item: SegmentedControlItem,
  ItemControl: RadioGroupItemControl,
  ItemDescription: RadioGroupItemDescription,
  ItemIndicator: RadioGroupItemIndicator,
  ItemInput: SegmentedControlItemInput,
  ItemLabel: RadioGroupItemLabel,
  Label: RadioGroupLabel
});
export {
  FormControlDescription as Description,
  FormControlErrorMessage as ErrorMessage,
  SegmentedControlIndicator as Indicator,
  SegmentedControlItem as Item,
  RadioGroupItemControl as ItemControl,
  RadioGroupItemDescription as ItemDescription,
  RadioGroupItemIndicator as ItemIndicator,
  SegmentedControlItemInput as ItemInput,
  RadioGroupItemLabel as ItemLabel,
  RadioGroupLabel as Label,
  SegmentedControlRoot as Root,
  SegmentedControl,
  useSegmentedControlContext
};