@crossed/ui/lib/module/forms/Switch/Root.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { useUncontrolled } from "@crossed/core";
import { useSharedValue } from "react-native-reanimated";
import { useCallback } from "react";
import { localContext } from "./context";
import { Pressable } from "react-native";
import { composeStyles, inlineStyle } from "@crossed/styled";
const Root = ({
  value: valueProps,
  onChange: onChangeProps,
  children,
  defaultValue = false,
  disabled,
  ...props
}) => {
  const DURATION = 300;
  const [value, setValue] = useUncontrolled({
    defaultValue,
    value: valueProps,
    onChange: onChangeProps
  });
  const height = useSharedValue(24);
  const width = useSharedValue(48);
  const onChange = useCallback(() => {
    setValue(!value);
  }, [value, setValue]);
  return /* @__PURE__ */ jsx(
    localContext.Provider,
    {
      value: {
        height,
        width,
        duration: DURATION,
        value,
        disabled
      },
      children: /* @__PURE__ */ jsx(
        Pressable,
        {
          onPress: onChange,
          disabled,
          "aria-checked": value,
          role: "switch",
          style: composeStyles(
            inlineStyle(({ space }) => ({
              base: {
                display: "flex",
                flexDirection: "row",
                gap: space.xs,
                alignItems: "center"
              }
            })),
            props.style
          ).style().style,
          ...props,
          children
        }
      )
    }
  );
};
export {
  Root
};
//# sourceMappingURL=Root.js.map