@serendie/ui/dist/components/Switch/Switch.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as t, jsx as s } from "react/jsx-runtime";
import { switch_exports as r } from "../../node_modules/@ark-ui/react/dist/components/switch/switch.js";
import { forwardRef as y } from "react";
import { cx as i } from "../../styled-system/css/cx.js";
import { css as b } from "../../styled-system/css/css.js";
import { sva as u } from "../../styled-system/css/sva.js";
const n = u({
  slots: ["root", "control", "thumb", "label", "textGroup", "helperText"],
  base: {
    root: {
      display: "flex",
      alignItems: "center",
      gap: "sd.system.dimension.spacing.medium",
      paddingY: "sd.system.dimension.spacing.small",
      paddingX: "sd.system.dimension.spacing.medium",
      position: "relative",
      '&[data-focus="true"] .control': {
        borderColor: "sd.system.color.impression.primary"
      }
    },
    control: {
      cursor: "pointer",
      width: 52,
      height: 32,
      flexShrink: 0,
      backgroundColor: "sd.system.color.interaction.disabled",
      borderRadius: "sd.system.dimension.radius.full",
      borderWidth: 1,
      borderColor: "sd.system.color.component.outline",
      transitionDuration: ".2s",
      transitionProperty: "background, borderColor",
      transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
      _checked: {
        backgroundColor: "sd.system.color.impression.primaryContainer",
        borderColor: "sd.system.color.impression.primaryContainer",
        _disabled: {
          backgroundColor: "color-mix(in srgb, {colors.sd.system.color.impression.primary}, {colors.sd.system.color.interaction.hoveredOnPrimary});",
          borderColor: "transparent"
        }
      },
      _disabled: {
        cursor: "default",
        background: "sd.system.color.interaction.disabled"
      },
      ".group:has(:focus-visible) &": {
        borderColor: "sd.system.color.impression.primary"
      }
    },
    thumb: {
      display: "block",
      width: 20,
      height: 20,
      marginY: 5,
      marginX: 6,
      background: "sd.system.color.component.surface",
      borderRadius: "sd.system.dimension.radius.full",
      borderColor: "sd.system.color.component.outline",
      borderWidth: 1,
      transitionDuration: ".3s",
      transitionProperty: "transform, borderColor",
      transitionTimingFunction: "cubic-bezier(.2, 0, 0, 1)",
      _checked: {
        transform: "translateX(19px)",
        borderColor: "sd.system.color.component.surface"
      }
    },
    label: {
      color: "sd.system.color.component.onSurface",
      textStyle: "sd.system.typography.body.medium_compact",
      _expanded: {
        textStyle: "sd.system.typography.body.medium_expanded"
      },
      _disabled: {
        color: "sd.system.color.interaction.disabledOnSurface"
      }
    },
    textGroup: {
      display: "flex",
      flexFlow: "column",
      width: 160
    },
    helperText: {
      color: "sd.system.color.component.onSurfaceVariant",
      marginTop: "sd.system.dimension.spacing.twoExtraSmall",
      lineHeight: "sd.reference.typography.lineHeight.tight",
      textStyle: "sd.system.typography.body.extraSmall_compact",
      _expanded: {
        textStyle: "sd.system.typography.body.extraSmall_expanded"
      },
      _disabled: {
        color: "sd.system.color.interaction.disabledOnSurface"
      }
    }
  }
}), _ = y(
  ({ label: a, helperText: e, className: d, ...l }, c) => {
    const [m, p] = n.splitVariantProps(l), o = n(m);
    return /* @__PURE__ */ t(
      r.Root,
      {
        ref: c,
        className: i(
          "group",
          o.root,
          e && b({ alignItems: "flex-start" }),
          d
        ),
        ...p,
        children: [
          /* @__PURE__ */ t("div", { className: o.textGroup, children: [
            /* @__PURE__ */ s(r.Label, { className: o.label, children: a }),
            e && /* @__PURE__ */ s(r.Label, { className: o.helperText, children: e })
          ] }),
          /* @__PURE__ */ s(r.Control, { className: i("control", o.control), children: /* @__PURE__ */ s(r.Thumb, { className: o.thumb }) }),
          /* @__PURE__ */ s(r.HiddenInput, {})
        ]
      }
    );
  }
);
export {
  _ as Switch,
  n as SwitchStyle
};