@spark-ui/components/dist/switch/index.mjs

Spark (Leboncoin design system) components.

import {
  Label
} from "../chunk-HLXYG643.mjs";
import {
  Slot
} from "../chunk-4F5DOL57.mjs";

// src/switch/Switch.tsx
import { useFormFieldControl as useFormFieldControl2 } from "@spark-ui/components/form-field";
import { cx } from "class-variance-authority";
import { useId } from "react";

// src/switch/SwitchInput.tsx
import { useFormFieldControl } from "@spark-ui/components/form-field";
import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
import { Check } from "@spark-ui/icons/Check";
import { Close } from "@spark-ui/icons/Close";
import { Switch as RadixSwitch } from "radix-ui";

// src/switch/SwitchInput.styles.ts
import { makeVariants, tw } from "@spark-ui/internal-utils";
import { cva } from "class-variance-authority";
var styles = cva(
  tw([
    "relative shrink-0 self-baseline",
    "cursor-pointer",
    "rounded-full border-transparent",
    "hover:ring-4",
    "transition-colors duration-200 ease-in-out",
    "disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3",
    "focus-visible:u-outline",
    "data-[state=unchecked]:bg-on-surface/dim-4",
    "u-shadow-border-transition",
    "overflow-x-hidden"
  ]),
  {
    variants: {
      /**
       * Size of the switch input.
       */
      size: makeVariants({
        sm: tw(["h-sz-24", "w-sz-40", "border-md"]),
        md: tw(["h-sz-32", "w-sz-56", "border-[4px]"])
      }),
      /**
       * Color scheme of the switch input.
       */
      intent: makeVariants({
        main: ["data-[state=checked]:bg-main", "hover:ring-main-container", "text-main"],
        support: [
          "data-[state=checked]:bg-support",
          "hover:ring-support-container",
          "text-support"
        ],
        accent: ["data-[state=checked]:bg-accent", "hover:ring-accent-container", "text-accent"],
        basic: ["data-[state=checked]:bg-basic", "hover:ring-basic-container", "text-basic"],
        success: [
          "data-[state=checked]:bg-success",
          "hover:ring-success-container",
          "text-success"
        ],
        alert: ["data-[state=checked]:bg-alert", "hover:ring-alert-container", "text-alert"],
        error: ["data-[state=checked]:bg-error", "hover:ring-error-container", "text-error"],
        info: ["data-[state=checked]:bg-info", "hover:ring-info-container", "text-info"],
        neutral: [
          "data-[state=checked]:bg-neutral",
          "hover:ring-neutral-container",
          "text-neutral"
        ]
      })
    },
    defaultVariants: {
      intent: "basic",
      size: "sm"
    }
  }
);
var thumbWrapperStyles = cva(
  [
    "pointer-events-none absolute inset-0 flex items-center",
    "transition-all duration-200 ease-in-out"
  ],
  {
    variants: {
      checked: {
        true: "translate-x-full",
        false: "translate-x-0"
      }
    }
  }
);
var thumbStyles = cva(
  [
    "absolute left-0 top-0 flex items-center justify-center",
    "bg-surface",
    "rounded-full",
    "ring-0",
    "transition-all duration-200 ease-in-out"
  ],
  {
    variants: {
      size: makeVariants({
        sm: ["h-sz-20", "w-sz-20"],
        md: ["h-sz-24", "w-sz-24"]
      }),
      checked: {
        true: "-translate-x-full",
        false: "translate-x-0 text-on-surface/dim-4"
      }
    },
    defaultVariants: {
      size: "sm",
      checked: false
    }
  }
);
var thumbCheckSVGStyles = cva(["transition-opacity duration-200"], {
  variants: {
    size: makeVariants({
      sm: ["h-sz-10 w-sz-10"],
      md: ["h-sz-12 w-sz-12"]
    })
  },
  defaultVariants: {
    size: "sm"
  }
});

// src/switch/SwitchInput.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var SwitchInput = ({
  checked,
  checkedIcon = /* @__PURE__ */ jsx(Check, {}),
  defaultChecked,
  intent: intentProp,
  uncheckedIcon = /* @__PURE__ */ jsx(Close, {}),
  size = "md",
  value = "on",
  onCheckedChange,
  className,
  required,
  ref,
  ...rest
}) => {
  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked);
  const { name, description, state, isRequired, isInvalid } = useFormFieldControl();
  const intent = state ?? intentProp;
  const handleCheckedChange = (updatedValue) => {
    setIsChecked(updatedValue);
    onCheckedChange?.(updatedValue);
  };
  return /* @__PURE__ */ jsx(
    RadixSwitch.Root,
    {
      ref,
      className: styles({ intent, size, className }),
      value,
      checked,
      defaultChecked,
      onCheckedChange: handleCheckedChange,
      name,
      required: required || isRequired,
      "aria-invalid": isInvalid,
      "aria-describedby": description,
      ...rest,
      children: /* @__PURE__ */ jsx("span", { className: thumbWrapperStyles({ checked: isChecked }), children: /* @__PURE__ */ jsxs(RadixSwitch.Thumb, { className: thumbStyles({ size, checked: isChecked }), children: [
        isChecked && checkedIcon && /* @__PURE__ */ jsx(Slot, { className: thumbCheckSVGStyles({ size }), children: checkedIcon }),
        !isChecked && uncheckedIcon && /* @__PURE__ */ jsx(Slot, { className: thumbCheckSVGStyles({ size }), children: uncheckedIcon })
      ] }) })
    }
  );
};
SwitchInput.displayName = "SwitchInput";

// src/switch/SwitchLabel.styles.ts
import { cva as cva2 } from "class-variance-authority";
var labelStyles = cva2("", {
  variants: {
    disabled: {
      true: ["text-neutral/dim-2", "cursor-not-allowed"],
      false: ["cursor-pointer"]
    }
  },
  defaultVariants: {
    disabled: false
  }
});

// src/switch/SwitchLabel.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var SwitchLabel = ({ className, disabled, ...others }) => /* @__PURE__ */ jsx2(Label, { className: labelStyles({ disabled, className }), ...others });

// src/switch/Switch.tsx
import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var ID_PREFIX = ":switch";
var Switch = ({
  size = "md",
  children,
  className,
  id,
  disabled,
  reverse = false,
  ref,
  ...rest
}) => {
  const field = useFormFieldControl2();
  const labelID = `${ID_PREFIX}-label-${useId()}`;
  const innerID = `${ID_PREFIX}-input-${useId()}`;
  const fieldID = field.id || id || innerID;
  const switchLabel = children && /* @__PURE__ */ jsx3(SwitchLabel, { disabled, htmlFor: fieldID, id: labelID, children });
  const switchInput = /* @__PURE__ */ jsx3(
    SwitchInput,
    {
      ref,
      size,
      id: fieldID,
      disabled,
      "aria-labelledby": children ? labelID : field.labelId,
      ...rest
    }
  );
  const content = reverse ? /* @__PURE__ */ jsxs2(Fragment, { children: [
    switchLabel,
    switchInput
  ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
    switchInput,
    switchLabel
  ] });
  return /* @__PURE__ */ jsx3(
    "div",
    {
      "data-spark-component": "switch",
      className: cx("gap-md text-body-1 flex items-center", className),
      children: content
    }
  );
};
Switch.displayName = "Switch";
export {
  Switch
};
//# sourceMappingURL=index.mjs.map