minerva-design 0.0.0-stage → 1.0.0

package/dist/react/components/Switch/Switch.js

@@ -0,0 +1,196 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { hooks as t } from "../../internal/stylingHooks.js";
+import { warnControlledProps as n } from "../../internal/devWarnings.js";
+import { useMergedRefs as r } from "../../internal/mergeRefs.js";
+import { pickDataAttributes as i } from "../../internal/dataAttributes.js";
+import { useControllableState as ee } from "../../internal/useControllableState.js";
+import { useFormControlContext as te, useFormControlProps as ne } from "../FormControl/context.js";
+import a from "./switch.module.scss.js";
+import { useEffect as o, useRef as s, useState as re } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/Switch/Switch.tsx
+var ie = 400, u = {
+	start: a.labelStart,
+	end: a.labelEnd,
+	top: a.labelTop,
+	bottom: a.labelBottom
+}, d = (e) => e != null && e !== !1 && e !== "", f = ({ checked: f, defaultChecked: p, disabled: ae, size: m = "medium", color: h = "primary", shape: g = "round", variant: oe = "slider", label: se, children: ce, offLabel: _, onLabel: v, "aria-label": y, "aria-labelledby": b, "aria-describedby": x, name: le, id: ue, value: de, labelPlacement: S = "end", loading: C = !1, ripple: w = !0, className: T, style: E, trackStyle: fe, thumbStyle: pe, onChange: D, onFocus: me, onBlur: O, icon: k, iconPlacement: A = "start", ref: he, ...ge }) => {
+	let j = i(ge), [M, N] = ee({
+		value: f,
+		defaultValue: p ?? !1,
+		name: "Switch",
+		prop: "checked"
+	}), [P, F] = re(!1), I = s(void 0), L = s(null), _e = r(L, he);
+	o(() => () => clearTimeout(I.current), []);
+	let R = te(), z = ne({
+		id: ue,
+		"aria-describedby": x
+	}), B = ae ?? R?.disabled ?? !1, V = !!R?.readOnly, H = B || C || V;
+	process.env.NODE_ENV !== "production" && n("Switch", {
+		prop: "checked",
+		value: f,
+		defaultProp: "defaultChecked",
+		defaultValue: p,
+		handlerProp: "onChange",
+		handler: D,
+		locked: H,
+		lockHint: "set `disabled`"
+	});
+	let ve = (e) => {
+		H || (N(e.target.checked), D?.(e.target.checked, e));
+	}, ye = (e) => {
+		e.key === "Enter" && (e.preventDefault(), !H && e.currentTarget.click());
+	}, be = (e) => {
+		if (V) {
+			e.preventDefault();
+			return;
+		}
+		w && !H && (clearTimeout(I.current), F(!0), I.current = setTimeout(() => F(!1), ie));
+	}, U = (e) => {
+		H || e === M || L.current?.click();
+	}, W = d(_) && d(v), G = oe === "segmented" && W, K = /* @__PURE__ */ c("input", {
+		ref: _e,
+		type: "checkbox",
+		role: G ? void 0 : "switch",
+		className: G ? a.hiddenInput : void 0,
+		id: G ? void 0 : z.id,
+		name: le,
+		value: de,
+		"aria-label": G ? void 0 : y,
+		"aria-labelledby": G ? void 0 : b,
+		"aria-checked": G ? void 0 : M,
+		"aria-disabled": G ? void 0 : B || C || void 0,
+		"aria-busy": C || void 0,
+		"aria-invalid": G ? void 0 : z["aria-invalid"],
+		"aria-required": G ? void 0 : z["aria-required"],
+		"aria-readonly": G ? void 0 : z["aria-readonly"],
+		"aria-describedby": G ? void 0 : z["aria-describedby"],
+		"aria-hidden": G || void 0,
+		tabIndex: G ? -1 : void 0,
+		checked: M,
+		disabled: B || C,
+		onChange: ve,
+		onClick: be,
+		onKeyDown: ye,
+		onFocus: me,
+		onBlur: O,
+		...t("switch", "input")
+	}), q = t("switch", "root", {
+		state: M ? "checked" : "unchecked",
+		disabled: B,
+		loading: C,
+		invalid: !!R?.invalid,
+		readonly: V,
+		required: !!R?.required,
+		size: m,
+		color: h,
+		shape: g,
+		variant: G ? "segmented" : "slider"
+	});
+	if (G) return /* @__PURE__ */ l("span", {
+		role: "group",
+		id: z.id,
+		"aria-label": y,
+		"aria-labelledby": b ?? (R && !y ? R.labelId : void 0),
+		"aria-describedby": z["aria-describedby"],
+		"aria-disabled": H || void 0,
+		...j,
+		...q,
+		className: e(a.segmented, a[m], a[h], H && a.disabled, T),
+		style: E,
+		children: [K, [!1, !0].map((n) => {
+			let r = M === n;
+			return /* @__PURE__ */ c("button", {
+				type: "button",
+				className: e(a.segment, r && a.segmentActive),
+				disabled: H,
+				"aria-pressed": r,
+				onClick: () => U(n),
+				...t("switch", "segment"),
+				children: n ? v : _
+			}, String(n));
+		})]
+	});
+	let J = e(a.switch, a[m], !W && u[S], a[h], {
+		[a.checked]: M,
+		[a.checkedLarge]: M && m === "large",
+		[a.disabled]: B,
+		[a.loading]: C,
+		[a.square]: g === "square",
+		[a.ripple]: w && P,
+		[a.bilateral]: W
+	}, T), Y = /* @__PURE__ */ l("span", {
+		className: a.switchBase,
+		...t("switch", "control"),
+		children: [
+			K,
+			/* @__PURE__ */ c("span", {
+				className: a.track,
+				style: fe,
+				...t("switch", "track")
+			}),
+			/* @__PURE__ */ c("span", {
+				className: a.thumb,
+				style: pe,
+				...t("switch", "thumb"),
+				children: A === "start" && k && /* @__PURE__ */ c("span", {
+					className: a.icon,
+					...t("switch", "icon"),
+					children: k
+				})
+			}),
+			w && /* @__PURE__ */ c("span", { className: a.rippleEffect })
+		]
+	}), X = A === "end" && k ? /* @__PURE__ */ c("span", {
+		className: a.icon,
+		...t("switch", "icon"),
+		children: k
+	}) : null;
+	if (W) {
+		let n = (n) => {
+			let r = M === n;
+			return /* @__PURE__ */ c("button", {
+				type: "button",
+				className: e(a.side, r && a.sideActive),
+				disabled: H,
+				onClick: () => U(n),
+				...t("switch", "side"),
+				children: n ? v : _
+			});
+		};
+		return /* @__PURE__ */ l("span", {
+			className: J,
+			style: E,
+			...j,
+			...q,
+			children: [
+				n(!1),
+				Y,
+				n(!0),
+				X
+			]
+		});
+	}
+	let Z = se ?? ce, Q = d(Z) ? /* @__PURE__ */ c("span", {
+		className: a.label,
+		...t("switch", "label"),
+		children: Z
+	}) : null, $ = S === "start" || S === "top";
+	return /* @__PURE__ */ l("label", {
+		className: J,
+		style: E,
+		...j,
+		...q,
+		children: [
+			$ && Q,
+			Y,
+			X,
+			!$ && Q
+		]
+	});
+};
+//#endregion
+export { f as default };
+
+//# sourceMappingURL=Switch.js.map

package/dist/react/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","names":["styles","switch_module_default","RIPPLE_DURATION","placementClass","hasContent","node","Switch","ariaLabel","ariaLabelledBy","ariaDescribedBy","rest","dataAttributes","pickDataAttributes","isChecked","setIsChecked","useControllableState","checked","defaultChecked","rippleActive","setRippleActive","useState","rippleTimer","useRef","inputRef","mergedRef","useMergedRefs","ref","fc","useFormControlContext","field","useFormControlProps","isDisabled","disabled","readOnly","blocked","loading","warnControlledProps","onChange","handleChange","event","handleKeyDown","handleClick","ripple","setState","next","bilateral","offLabel","onLabel","segmented","variant","input","hooks","rootHooks","cn","size","color","className","active","segmentState","switchClasses","labelPlacement","shape","control","trackStyle","thumbStyle","iconPlacement","icon","iconNode","side","sideState","content","label","children","labelNode","labelFirst"],"sources":["../../../../../react/src/components/Switch/Switch.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../internal/useControllableState\";\nimport { warnControlledProps } from \"../../internal/devWarnings\";\nimport { useMergedRefs } from \"../../internal/mergeRefs\";\nimport { pickDataAttributes } from \"../../internal/dataAttributes\";\nimport {\n  useFormControlContext,\n  useFormControlProps,\n} from \"../FormControl/context\";\nimport { hooks } from \"../../internal/stylingHooks\";\nimport type { SwitchProps } from \"./types\";\nimport styles from \"./switch.module.scss\";\n\nconst RIPPLE_DURATION = 400;\n\nconst placementClass = {\n  start: styles.labelStart,\n  end: styles.labelEnd,\n  top: styles.labelTop,\n  bottom: styles.labelBottom,\n} as const;\n\nconst hasContent = (node: React.ReactNode) =>\n  node != null && node !== false && node !== \"\";\n\n/**\n * Switch: toggles between two mutually exclusive states.\n * Renders a native checkbox with role=\"switch\"; `ref` reaches the <input>.\n * `offLabel` + `onLabel` add clickable labels on both sides of the slider, or\n * build a two-segment control with `variant=\"segmented\"`.\n */\nconst Switch = ({\n  checked,\n  defaultChecked,\n  disabled,\n  size = \"medium\",\n  color = \"primary\",\n  shape = \"round\",\n  variant = \"slider\",\n  label,\n  children,\n  offLabel,\n  onLabel,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  name,\n  id,\n  value,\n  labelPlacement = \"end\",\n  loading = false,\n  ripple = true,\n  className,\n  style,\n  trackStyle,\n  thumbStyle,\n  onChange,\n  onFocus,\n  onBlur,\n  icon,\n  iconPlacement = \"start\",\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const dataAttributes = pickDataAttributes(rest);\n  const [isChecked, setIsChecked] = useControllableState({\n    value: checked,\n    defaultValue: defaultChecked ?? false,\n    name: \"Switch\",\n    prop: \"checked\",\n  });\n  const [rippleActive, setRippleActive] = useState(false);\n  const rippleTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n    undefined,\n  );\n  const inputRef = useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRefs(inputRef, ref);\n\n  useEffect(() => () => clearTimeout(rippleTimer.current), []);\n\n  // FormControl wiring; an explicit `disabled` wins (so `false` opts out).\n  const fc = useFormControlContext();\n  const field = useFormControlProps({\n    id,\n    \"aria-describedby\": ariaDescribedBy,\n  });\n  const isDisabled = disabled ?? fc?.disabled ?? false;\n  const readOnly = !!fc?.readOnly;\n  const blocked = isDisabled || loading || readOnly;\n\n  if (process.env.NODE_ENV !== \"production\") {\n    warnControlledProps(\"Switch\", {\n      prop: \"checked\",\n      value: checked,\n      defaultProp: \"defaultChecked\",\n      defaultValue: defaultChecked,\n      handlerProp: \"onChange\",\n      handler: onChange,\n      locked: blocked,\n      lockHint: \"set `disabled`\",\n    });\n  }\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (blocked) return;\n    setIsChecked(event.target.checked);\n    onChange?.(event.target.checked, event);\n  };\n\n  // Native checkboxes toggle on Space only; the switch pattern also allows Enter.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key !== \"Enter\") return;\n    event.preventDefault();\n    if (blocked) return;\n    event.currentTarget.click();\n  };\n\n  // Clicks reach the input also when the wrapping label is clicked, and the\n  // Space key fires a click too: the ripple follows every toggle.\n  const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      event.preventDefault();\n      return;\n    }\n    if (!ripple || blocked) return;\n    clearTimeout(rippleTimer.current);\n    setRippleActive(true);\n    rippleTimer.current = setTimeout(\n      () => setRippleActive(false),\n      RIPPLE_DURATION,\n    );\n  };\n\n  // Side labels / segments set a state directly: they click the input so the\n  // regular change event (and onChange) fires.\n  const setState = (next: boolean) => {\n    if (blocked || next === isChecked) return;\n    inputRef.current?.click();\n  };\n\n  const bilateral = hasContent(offLabel) && hasContent(onLabel);\n  const segmented = variant === \"segmented\" && bilateral;\n\n  const input = (\n    <input\n      ref={mergedRef}\n      type=\"checkbox\"\n      role={segmented ? undefined : \"switch\"}\n      className={segmented ? styles.hiddenInput : undefined}\n      id={segmented ? undefined : field.id}\n      name={name}\n      value={value}\n      aria-label={segmented ? undefined : ariaLabel}\n      aria-labelledby={segmented ? undefined : ariaLabelledBy}\n      aria-checked={segmented ? undefined : isChecked}\n      aria-disabled={segmented ? undefined : isDisabled || loading || undefined}\n      aria-busy={loading || undefined}\n      aria-invalid={segmented ? undefined : field[\"aria-invalid\"]}\n      aria-required={segmented ? undefined : field[\"aria-required\"]}\n      aria-readonly={segmented ? undefined : field[\"aria-readonly\"]}\n      aria-describedby={segmented ? undefined : field[\"aria-describedby\"]}\n      aria-hidden={segmented || undefined}\n      tabIndex={segmented ? -1 : undefined}\n      checked={isChecked}\n      disabled={isDisabled || loading}\n      onChange={handleChange}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      {...hooks(\"switch\", \"input\")}\n    />\n  );\n  const rootHooks = hooks(\"switch\", \"root\", {\n    state: isChecked ? \"checked\" : \"unchecked\",\n    disabled: isDisabled,\n    loading,\n    invalid: !!fc?.invalid,\n    readonly: readOnly,\n    required: !!fc?.required,\n    size,\n    color,\n    shape,\n    variant: segmented ? \"segmented\" : \"slider\",\n  });\n\n  if (segmented) {\n    return (\n      // The group carries the field wiring: its name (FormControl label unless\n      // named explicitly) and helper / error description (the FormControl\n      // error message is referenced while invalid). aria-invalid and\n      // aria-required are not supported on role=\"group\": both states are\n      // exposed by the data-invalid / data-required hooks (and by the\n      // FormControl).\n      <span\n        role=\"group\"\n        id={field.id}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy ?? (fc && !ariaLabel ? fc.labelId : undefined)\n        }\n        aria-describedby={field[\"aria-describedby\"]}\n        aria-disabled={blocked || undefined}\n        {...dataAttributes}\n        {...rootHooks}\n        className={cn(\n          styles.segmented,\n          styles[size],\n          styles[color],\n          blocked && styles.disabled,\n          className,\n        )}\n        style={style}\n      >\n        {input}\n        {[false, true].map((segmentState) => {\n          const active = isChecked === segmentState;\n          return (\n            <button\n              key={String(segmentState)}\n              type=\"button\"\n              className={cn(styles.segment, active && styles.segmentActive)}\n              disabled={blocked}\n              aria-pressed={active}\n              onClick={() => setState(segmentState)}\n              {...hooks(\"switch\", \"segment\")}\n            >\n              {segmentState ? onLabel : offLabel}\n            </button>\n          );\n        })}\n      </span>\n    );\n  }\n\n  const switchClasses = cn(\n    styles.switch,\n    styles[size],\n    !bilateral && placementClass[labelPlacement],\n    styles[color],\n    {\n      [styles.checked]: isChecked,\n      [styles.checkedLarge]: isChecked && size === \"large\",\n      [styles.disabled]: isDisabled,\n      [styles.loading]: loading,\n      [styles.square]: shape === \"square\",\n      [styles.ripple]: ripple && rippleActive,\n      [styles.bilateral]: bilateral,\n    },\n    className,\n  );\n\n  const control = (\n    <span className={styles.switchBase} {...hooks(\"switch\", \"control\")}>\n      {input}\n      <span\n        className={styles.track}\n        style={trackStyle}\n        {...hooks(\"switch\", \"track\")}\n      />\n      <span\n        className={styles.thumb}\n        style={thumbStyle}\n        {...hooks(\"switch\", \"thumb\")}\n      >\n        {iconPlacement === \"start\" && icon && (\n          <span className={styles.icon} {...hooks(\"switch\", \"icon\")}>\n            {icon}\n          </span>\n        )}\n      </span>\n      {ripple && <span className={styles.rippleEffect} />}\n    </span>\n  );\n  const iconNode =\n    iconPlacement === \"end\" && icon ? (\n      <span className={styles.icon} {...hooks(\"switch\", \"icon\")}>\n        {icon}\n      </span>\n    ) : null;\n\n  if (bilateral) {\n    const side = (sideState: boolean) => {\n      const active = isChecked === sideState;\n      return (\n        <button\n          type=\"button\"\n          className={cn(styles.side, active && styles.sideActive)}\n          disabled={blocked}\n          onClick={() => setState(sideState)}\n          {...hooks(\"switch\", \"side\")}\n        >\n          {sideState ? onLabel : offLabel}\n        </button>\n      );\n    };\n    // A <span> root: the side buttons must not sit inside the input's label.\n    return (\n      <span\n        className={switchClasses}\n        style={style}\n        {...dataAttributes}\n        {...rootHooks}\n      >\n        {side(false)}\n        {control}\n        {side(true)}\n        {iconNode}\n      </span>\n    );\n  }\n\n  const content = label ?? children;\n  const labelNode = hasContent(content) ? (\n    <span className={styles.label} {...hooks(\"switch\", \"label\")}>\n      {content}\n    </span>\n  ) : null;\n  // Label before the control for start/top, after it for end/bottom; the\n  // placement class only changes the flex direction (row vs column).\n  const labelFirst = labelPlacement === \"start\" || labelPlacement === \"top\";\n\n  return (\n    // The label wraps the input, so clicking anywhere on it toggles the switch.\n    <label\n      className={switchClasses}\n      style={style}\n      {...dataAttributes}\n      {...rootHooks}\n    >\n      {labelFirst && labelNode}\n      {control}\n      {iconNode}\n      {!labelFirst && labelNode}\n    </label>\n  );\n};\n\nexport default Switch;\n"],"mappings":"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"}

package/dist/react/components/Switch/index.cjs

@@ -0,0 +1 @@
+"use client";const e=require("./Switch.cjs");exports.Switch=e.default;

package/dist/react/components/Switch/index.d.cts

@@ -0,0 +1,5 @@
+import { default as Switch } from './Switch.cjs';
+import { SwitchProps, SwitchVariant } from './types.cjs';
+export { Switch };
+export type { SwitchProps, SwitchVariant };
+export default Switch;

package/dist/react/components/Switch/index.d.ts

@@ -0,0 +1,5 @@
+import { default as Switch } from './Switch.js';
+import { SwitchProps, SwitchVariant } from './types.js';
+export { Switch };
+export type { SwitchProps, SwitchVariant };
+export default Switch;

package/dist/react/components/Switch/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./Switch.js";
+export { e as Switch };

package/dist/react/components/Switch/switch.module.scss.cjs

@@ -0,0 +1,2 @@
+"use client";var e=`_segmented_nbntp_2`,t=`_disabled_nbntp_27`,n=`_labelStart_nbntp_31`,r=`_label_nbntp_31`,i=`_labelEnd_nbntp_34`,a=`_labelTop_nbntp_37`,o=`_labelBottom_nbntp_37`,s=`_switchBase_nbntp_52`,c=`_thumb_nbntp_70`,l=`_track_nbntp_75`,u=`_checked_nbntp_82`,d=`_checkedLarge_nbntp_110`,f=`_square_nbntp_120`,p=`_loading_nbntp_123`,m=`_switchLoading_nbntp_1`,h=`_rippleEffect_nbntp_139`,g=`_ripple_nbntp_139`,_=`_small_nbntp_156`,v=`_large_nbntp_168`,y=`_primary_nbntp_177`,b=`_success_nbntp_181`,x=`_warning_nbntp_185`,S=`_info_nbntp_189`,C=`_danger_nbntp_193`,w=`_icon_nbntp_197`,T=`_loadingIcon_nbntp_216`,E=`_bilateral_nbntp_239`,D=`_side_nbntp_243`,O=`_sideActive_nbntp_267`,k=`_hiddenInput_nbntp_286`,A=`_segment_nbntp_2`,j=`_segmentActive_nbntp_313`,M={switch:`_switch_nbntp_1`,segmented:e,disabled:t,labelStart:n,label:r,labelEnd:i,labelTop:a,labelBottom:o,switchBase:s,thumb:c,track:l,checked:u,checkedLarge:d,square:f,loading:p,switchLoading:m,rippleEffect:h,ripple:g,small:_,large:v,primary:y,success:b,warning:x,info:S,danger:C,icon:w,loadingIcon:T,bilateral:E,side:D,sideActive:O,hiddenInput:k,segment:A,segmentActive:j};exports.bilateral=E,exports.checked=u,exports.checkedLarge=d,exports.danger=C,exports.default=M,exports.disabled=t,exports.hiddenInput=k,exports.icon=w,exports.info=S,exports.label=r,exports.labelBottom=o,exports.labelEnd=i,exports.labelStart=n,exports.labelTop=a,exports.large=v,exports.loading=p,exports.loadingIcon=T,exports.primary=y,exports.ripple=g,exports.rippleEffect=h,exports.segment=A,exports.segmentActive=j,exports.segmented=e,exports.side=D,exports.sideActive=O,exports.small=_,exports.square=f,exports.success=b,exports.switchBase=s,exports.switchLoading=m,exports.thumb=c,exports.track=l,exports.warning=x;
+//# sourceMappingURL=switch.module.scss.cjs.map

package/dist/react/components/Switch/switch.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.module.scss.cjs","names":["segmented","disabled","labelStart","label","labelEnd","labelTop","labelBottom","switchBase","thumb","track","checked","checkedLarge","square","loading","switchLoading","rippleEffect","ripple","small","large","primary","success","warning","info","danger","icon","loadingIcon","bilateral","side","sideActive","hiddenInput","segment","segmentActive","switch_module_default","\"switch\""],"sources":["../../../../../react/src/components/Switch/switch.module.scss"],"sourcesContent":["// Public CSS variables (set them on `className` or any ancestor):\n// @css-var --switch-track-width Width of the track (every size)\n// @css-var --switch-track-height Height of the track (every size)\n// @css-var --switch-thumb-size Width and height of the thumb (every size)\n// @css-var --switch-track-color Background of the unchecked track\n// @css-var --switch-thumb-color Background of the unchecked thumb\n// @css-var --switch-checked-color Accent of the checked thumb, track and active segment (defaults to the color prop's accent)\n// @css-var --switch-label-gap Space between the switch and its label\n// @css-var --switch-label-font-size Font size of the label (every size)\n//\n// Internal plumbing uses the --_switch-* prefix (per-size dimensions, color\n// accent, reading direction).\n.switch,\n.segmented {\n  --_switch-track-w: 36px;\n  --_switch-track-h: 14px;\n  --_switch-thumb: 20px;\n  --_switch-dir: 1;\n}\n\n.switch:dir(rtl) {\n  --_switch-dir: -1;\n}\n\n[dir=\"rtl\"] .switch {\n  --_switch-dir: -1;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  vertical-align: middle;\n  -webkit-tap-highlight-color: transparent;\n  min-height: 24px;\n\n  &.disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  // The label is rendered before the control for start/top and after it for\n  // end/bottom (DOM order = reading order); these only set the direction.\n  &.labelStart .label {\n    margin-inline-end: var(--switch-label-gap, var(--space-3));\n  }\n\n  &.labelEnd .label {\n    margin-inline-start: var(--switch-label-gap, var(--space-3));\n  }\n\n  &.labelTop,\n  &.labelBottom {\n    flex-direction: column;\n  }\n\n  &.labelTop .label {\n    margin-bottom: var(--space-1);\n  }\n\n  &.labelBottom .label {\n    margin-top: var(--space-1);\n  }\n\n  .label {\n    font-size: var(--switch-label-font-size, var(--font-size-md));\n    color: var(--text-color);\n    line-height: 1.4;\n  }\n}\n\n.switchBase {\n  position: relative;\n  display: inline-flex;\n  padding: 3px;\n  transition: all var(--transition-base);\n\n  input {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    z-index: 1;\n  }\n\n  input:focus-visible ~ .thumb {\n    outline: 2px solid var(--focus-ring-color);\n    outline-offset: 2px;\n  }\n}\n\n.track {\n  width: var(--switch-track-width, var(--_switch-track-w));\n  height: var(--switch-track-height, var(--_switch-track-h));\n  border-radius: var(--radius-full);\n  background-color: var(--switch-track-color, var(--border-strong-color));\n  transition: all var(--transition-base);\n\n  .checked & {\n    // `--_switch-accent` is set by the color classes below.\n    // Material-style: translucent accent track under a solid accent thumb.\n    background-color: color-mix(in srgb, var(--switch-checked-color, var(--_switch-accent, var(--border-strong-color))) 45%, transparent);\n  }\n}\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  inset-inline-start: 2px;\n  width: var(--switch-thumb-size, var(--_switch-thumb));\n  height: var(--switch-thumb-size, var(--_switch-thumb));\n  // Thin ring keeps the thumb visible against the page/track in dark themes.\n  --_switch-thumb-ring: var(--border-strong-color);\n  // Travel of the checked thumb: track width - thumb size, mirrored in RTL.\n  --_switch-travel: calc(var(--_switch-dir) * (var(--switch-track-width, var(--_switch-track-w)) - var(--switch-thumb-size, var(--_switch-thumb))));\n  background-color: var(--switch-thumb-color, var(--surface-color));\n  color: var(--switch-checked-color, var(--_switch-accent, var(--text-secondary-color)));\n  border-radius: 50%;\n  transform: translateY(-50%);\n  box-shadow:\n    0 0 0 1px var(--_switch-thumb-ring),\n    var(--shadow-sm);\n  transition: all var(--transition-base);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .checked & {\n    --_switch-thumb-ring: transparent;\n    // Solid accent thumb stays visible on light and dark pages alike.\n    background-color: var(--switch-checked-color, var(--_switch-accent, var(--surface-color)));\n    transform: translate(var(--_switch-travel), -50%);\n    box-shadow:\n      0 0 0 1px var(--_switch-thumb-ring),\n      var(--shadow-md);\n  }\n\n  .checkedLarge & {\n    transform: translate(var(--_switch-travel), -50%);\n    box-shadow:\n      0 0 0 1px var(--_switch-thumb-ring),\n      var(--shadow-md);\n  }\n\n  .switch:not(.disabled):hover & {\n    box-shadow:\n      0 0 0 1px var(--_switch-thumb-ring),\n      var(--shadow-md);\n  }\n\n  .switch:not(.disabled):active & {\n    box-shadow:\n      0 0 0 1px var(--_switch-thumb-ring),\n      var(--shadow-sm);\n  }\n\n  .square & {\n    border-radius: calc(var(--radius-sm) / 2);\n  }\n\n  .loading & {\n    &::before {\n      content: \"\";\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      border: 2px solid color-mix(in srgb, var(--text-color) 20%, transparent);\n      border-top-color: currentColor;\n      border-radius: 50%;\n      animation: switchLoading 0.8s linear infinite;\n\n      @media (prefers-reduced-motion: reduce) {\n        animation-duration: 2.4s;\n      }\n    }\n  }\n}\n\n.rippleEffect {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background-color: color-mix(in srgb, var(--switch-checked-color, var(--_switch-accent, var(--text-color))) 12%, transparent);\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(0);\n  transition: all var(--transition-slow);\n\n  .ripple & {\n    opacity: 0.12;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.small {\n  --_switch-track-w: 28px;\n  --_switch-track-h: 12px;\n  --_switch-thumb: 16px;\n\n  .switchBase {\n    padding: 2px;\n  }\n  .label {\n    font-size: var(--switch-label-font-size, var(--font-size-xs));\n  }\n}\n\n.large {\n  --_switch-track-w: 48px;\n  --_switch-track-h: 18px;\n  --_switch-thumb: 24px;\n\n  .label {\n    font-size: var(--switch-label-font-size, var(--font-size-lg));\n  }\n}\n\n// Color roles: accent used by the checked thumb and (translucent) track.\n.primary {\n  --_switch-accent: var(--primary-color);\n}\n\n.success {\n  --_switch-accent: var(--success-color);\n}\n\n.warning {\n  --_switch-accent: var(--warning-color);\n}\n\n.info {\n  --_switch-accent: var(--info-color);\n}\n\n.danger {\n  --_switch-accent: var(--danger-color);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--text-secondary-color);\n  font-size: 14px;\n  z-index: 1;\n\n  .checked & {\n    color: var(--text-inverse-color);\n  }\n\n  .loading & {\n    opacity: 0.5;\n  }\n}\n\n.loadingIcon {\n  display: none;\n}\n\n@keyframes switchLoading {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.disabled {\n  cursor: not-allowed;\n\n  .thumb {\n    background-color: var(--surface-muted-color);\n\n    &::before {\n      border-color: color-mix(in srgb, var(--text-color) 10%, transparent);\n      border-top-color: var(--text-disabled-color);\n    }\n  }\n\n  &:not(.checked) .track {\n    background-color: var(--border-color);\n  }\n}\n\n// Bilateral labels: [off] [slider] [on]; the active side is highlighted.\n.bilateral {\n  gap: var(--space-3);\n}\n\n.side {\n  background: transparent;\n  border: none;\n  padding: var(--space-0-5) var(--space-1);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--switch-label-font-size, var(--font-size-md));\n  font-weight: var(--font-weight-medium);\n  color: var(--text-muted-color);\n  border-radius: var(--radius-sm);\n  transition: color var(--transition-fast);\n  white-space: nowrap;\n\n  &:hover:not(:disabled) {\n    color: var(--text-color);\n  }\n\n  &:focus-visible {\n    outline: var(--focus-ring-width) solid var(--switch-checked-color, var(--_switch-accent, var(--primary-color)));\n    outline-offset: 1px;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.sideActive {\n  color: var(--switch-checked-color, var(--_switch-accent, var(--primary-color)));\n  font-weight: var(--font-weight-semibold);\n}\n\n// Segmented: two buttons sharing one pill; the active half is filled.\n.segmented {\n  position: relative;\n  display: inline-flex;\n  background: var(--surface-muted-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-md);\n  padding: var(--space-0-5);\n  user-select: none;\n  vertical-align: middle;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n}\n\n.hiddenInput {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.segment {\n  background: transparent;\n  border: none;\n  padding: var(--space-1) var(--space-3);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--switch-label-font-size, var(--font-size-md));\n  font-weight: var(--font-weight-medium);\n  color: var(--text-secondary-color);\n  border-radius: calc(var(--radius-md) - 2px);\n  transition:\n    background-color var(--transition-fast),\n    color var(--transition-fast),\n    box-shadow var(--transition-fast);\n  white-space: nowrap;\n\n  &:hover:not(:disabled):not(.segmentActive) {\n    color: var(--text-color);\n  }\n\n  &:focus-visible {\n    outline: var(--focus-ring-width) solid var(--switch-checked-color, var(--_switch-accent, var(--primary-color)));\n    outline-offset: 1px;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.segmentActive {\n  background-color: var(--switch-checked-color, var(--_switch-accent, var(--primary-color)));\n  color: var(--text-inverse-color);\n  font-weight: var(--font-weight-semibold);\n  box-shadow: var(--shadow-sm);\n}\n\n.segmented.small .segment {\n  padding: var(--space-0-5) var(--space-2);\n  font-size: var(--switch-label-font-size, var(--font-size-xs));\n}\n\n.segmented.large .segment {\n  padding: var(--space-1-5) var(--space-4);\n  font-size: var(--switch-label-font-size, var(--font-size-lg));\n}\n\n// Forced colors drop backgrounds and box-shadows: draw the track, the thumb\n// and the active segment with system colors (checked = Highlight).\n@media (forced-colors: active) {\n  .track {\n    forced-color-adjust: none;\n    background-color: Canvas;\n    outline: 1px solid ButtonText;\n\n    .checked & {\n      background-color: Highlight;\n      outline-color: Highlight;\n    }\n  }\n\n  .thumb {\n    forced-color-adjust: none;\n    background-color: ButtonText;\n    color: Canvas;\n    box-shadow: none;\n\n    .checked & {\n      background-color: HighlightText;\n      color: Highlight;\n      outline: 1px solid Highlight;\n    }\n  }\n\n  .switchBase input:focus-visible ~ .thumb {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n  }\n\n  .disabled .track,\n  .disabled .thumb {\n    outline-color: GrayText;\n  }\n\n  .segmentActive {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n\n  .sideActive {\n    text-decoration: underline;\n  }\n}\n"],"mappings":""}

package/dist/react/components/Switch/switch.module.scss.js

@@ -0,0 +1,41 @@
+"use client";
+//#region src/components/Switch/switch.module.scss
+var e = "_segmented_nbntp_2", t = "_disabled_nbntp_27", n = "_labelStart_nbntp_31", r = "_label_nbntp_31", i = "_labelEnd_nbntp_34", a = "_labelTop_nbntp_37", o = "_labelBottom_nbntp_37", s = "_switchBase_nbntp_52", c = "_thumb_nbntp_70", l = "_track_nbntp_75", u = "_checked_nbntp_82", d = "_checkedLarge_nbntp_110", f = "_square_nbntp_120", p = "_loading_nbntp_123", m = "_switchLoading_nbntp_1", h = "_rippleEffect_nbntp_139", g = "_ripple_nbntp_139", _ = "_small_nbntp_156", v = "_large_nbntp_168", y = "_primary_nbntp_177", b = "_success_nbntp_181", x = "_warning_nbntp_185", S = "_info_nbntp_189", C = "_danger_nbntp_193", w = "_icon_nbntp_197", T = "_loadingIcon_nbntp_216", E = "_bilateral_nbntp_239", D = "_side_nbntp_243", O = "_sideActive_nbntp_267", k = "_hiddenInput_nbntp_286", A = "_segment_nbntp_2", j = "_segmentActive_nbntp_313", M = {
+	switch: "_switch_nbntp_1",
+	segmented: e,
+	disabled: t,
+	labelStart: n,
+	label: r,
+	labelEnd: i,
+	labelTop: a,
+	labelBottom: o,
+	switchBase: s,
+	thumb: c,
+	track: l,
+	checked: u,
+	checkedLarge: d,
+	square: f,
+	loading: p,
+	switchLoading: m,
+	rippleEffect: h,
+	ripple: g,
+	small: _,
+	large: v,
+	primary: y,
+	success: b,
+	warning: x,
+	info: S,
+	danger: C,
+	icon: w,
+	loadingIcon: T,
+	bilateral: E,
+	side: D,
+	sideActive: O,
+	hiddenInput: k,
+	segment: A,
+	segmentActive: j
+};
+//#endregion
+export { E as bilateral, u as checked, d as checkedLarge, C as danger, M as default, t as disabled, k as hiddenInput, w as icon, S as info, r as label, o as labelBottom, i as labelEnd, n as labelStart, a as labelTop, v as large, p as loading, T as loadingIcon, y as primary, g as ripple, h as rippleEffect, A as segment, j as segmentActive, e as segmented, D as side, O as sideActive, _ as small, f as square, b as success, s as switchBase, m as switchLoading, c as thumb, l as track, x as warning };
+
+//# sourceMappingURL=switch.module.scss.js.map

package/dist/react/components/Switch/switch.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.module.scss.js","names":["segmented","disabled","labelStart","label","labelEnd","labelTop","labelBottom","switchBase","thumb","track","checked","checkedLarge","square","loading","switchLoading","rippleEffect","ripple","small","large","primary","success","warning","info","danger","icon","loadingIcon","bilateral","side","sideActive","hiddenInput","segment","segmentActive","switch_module_default","\"switch\""],"sources":["../../../../../react/src/components/Switch/switch.module.scss"],"sourcesContent":["// Public CSS variables (set them on `className` or any ancestor):\n// @css-var --switch-track-width Width of the track (every size)\n// @css-var --switch-track-height Height of the track (every size)\n// @css-var --switch-thumb-size Width and height of the thumb (every size)\n// @css-var --switch-track-color Background of the unchecked track\n// @css-var --switch-thumb-color Background of the unchecked thumb\n// @css-var --switch-checked-color Accent of the checked thumb, track and active segment (defaults to the color prop's accent)\n// @css-var --switch-label-gap Space between the switch and its label\n// @css-var --switch-label-font-size Font size of the label (every size)\n//\n// Internal plumbing uses the --_switch-* prefix (per-size dimensions, color\n// accent, reading direction).\n.switch,\n.segmented {\n  --_switch-track-w: 36px;\n  --_switch-track-h: 14px;\n  --_switch-thumb: 20px;\n  --_switch-dir: 1;\n}\n\n.switch:dir(rtl) {\n  --_switch-dir: -1;\n}\n\n[dir=\"rtl\"] .switch {\n  --_switch-dir: -1;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  vertical-align: middle;\n  -webkit-tap-highlight-color: transparent;\n  min-height: 24px;\n\n  &.disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  // The label is rendered before the control for start/top and after it for\n  // end/bottom (DOM order = reading order); these only set the direction.\n  &.labelStart .label {\n    margin-inline-end: var(--switch-label-gap, var(--space-3));\n  }\n\n  &.labelEnd .label {\n    margin-inline-start: var(--switch-label-gap, var(--space-3));\n  }\n\n  &.labelTop,\n  &.labelBottom {\n    flex-direction: column;\n  }\n\n  &.labelTop .label {\n    margin-bottom: var(--space-1);\n  }\n\n  &.labelBottom .label {\n    margin-top: var(--space-1);\n  }\n\n  .label {\n    font-size: var(--switch-label-font-size, var(--font-size-md));\n    color: var(--text-color);\n    line-height: 1.4;\n  }\n}\n\n.switchBase {\n  position: relative;\n  display: inline-flex;\n  padding: 3px;\n  transition: all var(--transition-base);\n\n  input {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    z-index: 1;\n  }\n\n  input:focus-visible ~ .thumb {\n    outline: 2px solid var(--focus-ring-color);\n    outline-offset: 2px;\n  }\n}\n\n.track {\n  width: var(--switch-track-width, var(--_switch-track-w));\n  height: var(--switch-track-height, var(--_switch-track-h));\n  border-radius: var(--radius-full);\n  background-color: var(--switch-track-color, var(--border-strong-color));\n  transition: all var(--transition-base);\n\n  .checked & {\n    // `--_switch-accent` is set by the color classes below.\n    // Material-style: translucent accent track under a solid accent thumb.\n    background-color: color-mix(in srgb, var(--switch-checked-color, var(--_switch-accent, var(--border-strong-color))) 45%, transparent);\n  }\n}\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  inset-inline-start: 2px;\n  width: var(--switch-thumb-size, var(--_switch-thumb));\n  height: var(--switch-thumb-size, var(--_switch-thumb));\n  // Thin ring keeps the thumb visible against the page/track in dark themes.\n  --_switch-thumb-ring: var(--border-strong-color);\n  // Travel of the checked thumb: track width - thumb size, mirrored in RTL.\n  --_switch-travel: calc(var(--_switch-dir) * (var(--switch-track-width, var(--_switch-track-w)) - var(--switch-thumb-size, var(--_switch-thumb))));\n  background-color: var(--switch-thumb-color, var(--surface-color));\n  color: var(--switch-checked-color, var(--_switch-accent, var(--text-secondary-color)));\n  border-radius: 50%;\n  transform: translateY(-50%);\n  box-shadow:\n    0 0 0 1px var(--_switch-thumb-ring),\n    var(--shadow-sm);\n  transition: all var(--transition-base);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .checked & {\n    --_switch-thumb-ring: transparent;\n    // Solid accent thumb stays visible on light and dark pages alike.\n    background-color: var(--switch-checked-color, var(--_switch-accent, var(--surface-color)));\n    transform: translate(var(--_switch-travel), -50%);\n    box-shadow:\n      0 0 0 1px var(--_switch-thumb-ring),\n      var(--shadow-md);\n  }\n\n  .checkedLarge & {\n    transform: translate(var(--_switch-travel), -50%);\n    box-shadow:\n      0 0 0 1px var(--_switch-thumb-ring),\n      var(--shadow-md);\n  }\n\n  .switch:not(.disabled):hover & {\n    box-shadow:\n      0 0 0 1px var(--_switch-thumb-ring),\n      var(--shadow-md);\n  }\n\n  .switch:not(.disabled):active & {\n    box-shadow:\n      0 0 0 1px var(--_switch-thumb-ring),\n      var(--shadow-sm);\n  }\n\n  .square & {\n    border-radius: calc(var(--radius-sm) / 2);\n  }\n\n  .loading & {\n    &::before {\n      content: \"\";\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      border: 2px solid color-mix(in srgb, var(--text-color) 20%, transparent);\n      border-top-color: currentColor;\n      border-radius: 50%;\n      animation: switchLoading 0.8s linear infinite;\n\n      @media (prefers-reduced-motion: reduce) {\n        animation-duration: 2.4s;\n      }\n    }\n  }\n}\n\n.rippleEffect {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background-color: color-mix(in srgb, var(--switch-checked-color, var(--_switch-accent, var(--text-color))) 12%, transparent);\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(0);\n  transition: all var(--transition-slow);\n\n  .ripple & {\n    opacity: 0.12;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.small {\n  --_switch-track-w: 28px;\n  --_switch-track-h: 12px;\n  --_switch-thumb: 16px;\n\n  .switchBase {\n    padding: 2px;\n  }\n  .label {\n    font-size: var(--switch-label-font-size, var(--font-size-xs));\n  }\n}\n\n.large {\n  --_switch-track-w: 48px;\n  --_switch-track-h: 18px;\n  --_switch-thumb: 24px;\n\n  .label {\n    font-size: var(--switch-label-font-size, var(--font-size-lg));\n  }\n}\n\n// Color roles: accent used by the checked thumb and (translucent) track.\n.primary {\n  --_switch-accent: var(--primary-color);\n}\n\n.success {\n  --_switch-accent: var(--success-color);\n}\n\n.warning {\n  --_switch-accent: var(--warning-color);\n}\n\n.info {\n  --_switch-accent: var(--info-color);\n}\n\n.danger {\n  --_switch-accent: var(--danger-color);\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--text-secondary-color);\n  font-size: 14px;\n  z-index: 1;\n\n  .checked & {\n    color: var(--text-inverse-color);\n  }\n\n  .loading & {\n    opacity: 0.5;\n  }\n}\n\n.loadingIcon {\n  display: none;\n}\n\n@keyframes switchLoading {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.disabled {\n  cursor: not-allowed;\n\n  .thumb {\n    background-color: var(--surface-muted-color);\n\n    &::before {\n      border-color: color-mix(in srgb, var(--text-color) 10%, transparent);\n      border-top-color: var(--text-disabled-color);\n    }\n  }\n\n  &:not(.checked) .track {\n    background-color: var(--border-color);\n  }\n}\n\n// Bilateral labels: [off] [slider] [on]; the active side is highlighted.\n.bilateral {\n  gap: var(--space-3);\n}\n\n.side {\n  background: transparent;\n  border: none;\n  padding: var(--space-0-5) var(--space-1);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--switch-label-font-size, var(--font-size-md));\n  font-weight: var(--font-weight-medium);\n  color: var(--text-muted-color);\n  border-radius: var(--radius-sm);\n  transition: color var(--transition-fast);\n  white-space: nowrap;\n\n  &:hover:not(:disabled) {\n    color: var(--text-color);\n  }\n\n  &:focus-visible {\n    outline: var(--focus-ring-width) solid var(--switch-checked-color, var(--_switch-accent, var(--primary-color)));\n    outline-offset: 1px;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.sideActive {\n  color: var(--switch-checked-color, var(--_switch-accent, var(--primary-color)));\n  font-weight: var(--font-weight-semibold);\n}\n\n// Segmented: two buttons sharing one pill; the active half is filled.\n.segmented {\n  position: relative;\n  display: inline-flex;\n  background: var(--surface-muted-color);\n  border: 1px solid var(--border-color);\n  border-radius: var(--radius-md);\n  padding: var(--space-0-5);\n  user-select: none;\n  vertical-align: middle;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n}\n\n.hiddenInput {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.segment {\n  background: transparent;\n  border: none;\n  padding: var(--space-1) var(--space-3);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--switch-label-font-size, var(--font-size-md));\n  font-weight: var(--font-weight-medium);\n  color: var(--text-secondary-color);\n  border-radius: calc(var(--radius-md) - 2px);\n  transition:\n    background-color var(--transition-fast),\n    color var(--transition-fast),\n    box-shadow var(--transition-fast);\n  white-space: nowrap;\n\n  &:hover:not(:disabled):not(.segmentActive) {\n    color: var(--text-color);\n  }\n\n  &:focus-visible {\n    outline: var(--focus-ring-width) solid var(--switch-checked-color, var(--_switch-accent, var(--primary-color)));\n    outline-offset: 1px;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.segmentActive {\n  background-color: var(--switch-checked-color, var(--_switch-accent, var(--primary-color)));\n  color: var(--text-inverse-color);\n  font-weight: var(--font-weight-semibold);\n  box-shadow: var(--shadow-sm);\n}\n\n.segmented.small .segment {\n  padding: var(--space-0-5) var(--space-2);\n  font-size: var(--switch-label-font-size, var(--font-size-xs));\n}\n\n.segmented.large .segment {\n  padding: var(--space-1-5) var(--space-4);\n  font-size: var(--switch-label-font-size, var(--font-size-lg));\n}\n\n// Forced colors drop backgrounds and box-shadows: draw the track, the thumb\n// and the active segment with system colors (checked = Highlight).\n@media (forced-colors: active) {\n  .track {\n    forced-color-adjust: none;\n    background-color: Canvas;\n    outline: 1px solid ButtonText;\n\n    .checked & {\n      background-color: Highlight;\n      outline-color: Highlight;\n    }\n  }\n\n  .thumb {\n    forced-color-adjust: none;\n    background-color: ButtonText;\n    color: Canvas;\n    box-shadow: none;\n\n    .checked & {\n      background-color: HighlightText;\n      color: Highlight;\n      outline: 1px solid Highlight;\n    }\n  }\n\n  .switchBase input:focus-visible ~ .thumb {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n  }\n\n  .disabled .track,\n  .disabled .thumb {\n    outline-color: GrayText;\n  }\n\n  .segmentActive {\n    forced-color-adjust: none;\n    background-color: Highlight;\n    color: HighlightText;\n  }\n\n  .sideActive {\n    text-decoration: underline;\n  }\n}\n"],"mappings":""}

package/dist/react/components/Switch/types.d.cts

@@ -0,0 +1,115 @@
+import { Ref } from 'react';
+import { ColorScheme } from '../../../core/index.cjs';
+import { DataAttributes } from '../../internal/dataAttributes.cjs';
+/** Appearance of a Switch */
+export type SwitchVariant = "slider" | "segmented";
+/** `data-*` attributes are forwarded to the root element. */
+export interface SwitchProps extends DataAttributes {
+    /** Whether the switch is on (controlled) */
+    checked?: boolean;
+    /**
+     * Initial state (uncontrolled)
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Disables the switch. Inherited from an enclosing FormControl when not
+     * set; an explicit `false` overrides the FormControl
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Switch size
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Semantic color of the "on" state (checked thumb and track, active side
+     * label / segment)
+     * @default "primary"
+     */
+    color?: Extract<ColorScheme, "primary" | "success" | "info" | "warning" | "danger">;
+    /**
+     * Shape of the track and thumb
+     * @default "round"
+     */
+    shape?: "round" | "square";
+    /**
+     * "slider" is the classic track + thumb; "segmented" renders two pressable
+     * segments (requires offLabel and onLabel, otherwise falls back to slider)
+     * @default "slider"
+     */
+    variant?: SwitchVariant;
+    /** Label displayed next to the switch */
+    label?: React.ReactNode;
+    /** Label content (alternative to `label`; used when `label` is not set) */
+    children?: React.ReactNode;
+    /**
+     * Label of the "off" state. With onLabel, both labels are rendered as
+     * buttons on each side of the slider (they replace `label`) or as the
+     * segments of the segmented variant
+     */
+    offLabel?: React.ReactNode;
+    /** Label of the "on" state (see offLabel) */
+    onLabel?: React.ReactNode;
+    /**
+     * Accessible label, required when the switch has no visible label. Set on
+     * the switch input (on the segment group for the segmented variant)
+     */
+    "aria-label"?: string;
+    /**
+     * id(s) of the element(s) labelling the switch (on the segment group for the
+     * segmented variant). Defaults to the enclosing FormControl's label for the
+     * segmented variant
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Extra id(s) of elements describing the switch, merged with the enclosing
+     * FormControl's helper / error text
+     */
+    "aria-describedby"?: string;
+    /** Name of the input, used in forms */
+    name?: string;
+    /** id of the input (defaults to the enclosing FormControl's id) */
+    id?: string;
+    /** Value submitted with the form when on */
+    value?: string;
+    /**
+     * Position of the label relative to the switch
+     * @default "end"
+     */
+    labelPlacement?: "start" | "end" | "top" | "bottom";
+    /**
+     * Shows a loading state and blocks interaction
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Shows a ripple effect on click
+     * @default true
+     */
+    ripple?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles of the root element */
+    style?: React.CSSProperties;
+    /** Inline styles of the track */
+    trackStyle?: React.CSSProperties;
+    /** Inline styles of the thumb */
+    thumbStyle?: React.CSSProperties;
+    /** Called when the state changes */
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Called when the switch receives focus */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Called when the switch loses focus */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /**
+     * Icon position: inside the thumb ("start") or after the switch ("end")
+     * @default "start"
+     */
+    iconPlacement?: "start" | "end";
+    /** Ref to the underlying <input role="switch"> element */
+    ref?: Ref<HTMLInputElement>;
+}

package/dist/react/components/Switch/types.d.ts

@@ -0,0 +1,115 @@
+import { Ref } from 'react';
+import { ColorScheme } from '../../../core/index.js';
+import { DataAttributes } from '../../internal/dataAttributes.js';
+/** Appearance of a Switch */
+export type SwitchVariant = "slider" | "segmented";
+/** `data-*` attributes are forwarded to the root element. */
+export interface SwitchProps extends DataAttributes {
+    /** Whether the switch is on (controlled) */
+    checked?: boolean;
+    /**
+     * Initial state (uncontrolled)
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Disables the switch. Inherited from an enclosing FormControl when not
+     * set; an explicit `false` overrides the FormControl
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Switch size
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Semantic color of the "on" state (checked thumb and track, active side
+     * label / segment)
+     * @default "primary"
+     */
+    color?: Extract<ColorScheme, "primary" | "success" | "info" | "warning" | "danger">;
+    /**
+     * Shape of the track and thumb
+     * @default "round"
+     */
+    shape?: "round" | "square";
+    /**
+     * "slider" is the classic track + thumb; "segmented" renders two pressable
+     * segments (requires offLabel and onLabel, otherwise falls back to slider)
+     * @default "slider"
+     */
+    variant?: SwitchVariant;
+    /** Label displayed next to the switch */
+    label?: React.ReactNode;
+    /** Label content (alternative to `label`; used when `label` is not set) */
+    children?: React.ReactNode;
+    /**
+     * Label of the "off" state. With onLabel, both labels are rendered as
+     * buttons on each side of the slider (they replace `label`) or as the
+     * segments of the segmented variant
+     */
+    offLabel?: React.ReactNode;
+    /** Label of the "on" state (see offLabel) */
+    onLabel?: React.ReactNode;
+    /**
+     * Accessible label, required when the switch has no visible label. Set on
+     * the switch input (on the segment group for the segmented variant)
+     */
+    "aria-label"?: string;
+    /**
+     * id(s) of the element(s) labelling the switch (on the segment group for the
+     * segmented variant). Defaults to the enclosing FormControl's label for the
+     * segmented variant
+     */
+    "aria-labelledby"?: string;
+    /**
+     * Extra id(s) of elements describing the switch, merged with the enclosing
+     * FormControl's helper / error text
+     */
+    "aria-describedby"?: string;
+    /** Name of the input, used in forms */
+    name?: string;
+    /** id of the input (defaults to the enclosing FormControl's id) */
+    id?: string;
+    /** Value submitted with the form when on */
+    value?: string;
+    /**
+     * Position of the label relative to the switch
+     * @default "end"
+     */
+    labelPlacement?: "start" | "end" | "top" | "bottom";
+    /**
+     * Shows a loading state and blocks interaction
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Shows a ripple effect on click
+     * @default true
+     */
+    ripple?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles of the root element */
+    style?: React.CSSProperties;
+    /** Inline styles of the track */
+    trackStyle?: React.CSSProperties;
+    /** Inline styles of the thumb */
+    thumbStyle?: React.CSSProperties;
+    /** Called when the state changes */
+    onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Called when the switch receives focus */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Called when the switch loses focus */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /**
+     * Icon position: inside the thumb ("start") or after the switch ("end")
+     * @default "start"
+     */
+    iconPlacement?: "start" | "end";
+    /** Ref to the underlying <input role="switch"> element */
+    ref?: Ref<HTMLInputElement>;
+}

package/dist/react/components/Table/DataTable.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../hooks/useI18n.cjs"),t=require("../../internal/stylingHooks.cjs"),n=require("../Button/Button.cjs"),r=require("../../internal/icons.cjs"),i=require("../Pagination/Pagination.cjs"),a=require("./table.module.scss.cjs"),o=require("./Table.cjs");let s=require("react/jsx-runtime");function c({pagination:c,error:l,onRetry:u,retryLabel:d,loading:f,...p}){let{t:m}=e.default(),h=!!l&&!f;return(0,s.jsx)(`div`,{className:a.default.dataTable,"aria-busy":f||void 0,...t.hooks(`data-table`,`root`,{loading:f,size:p.size??`medium`,variant:p.variant??`simple`}),children:h?(0,s.jsxs)(`div`,{className:a.default.error,role:`alert`,...t.hooks(`data-table`,`error`),children:[(0,s.jsx)(`div`,{className:a.default.errorTitle,children:l}),u&&(0,s.jsxs)(n.default,{color:`neutral`,variant:`outline`,size:`small`,onClick:u,children:[(0,s.jsx)(r.IconRefreshCw,{"aria-hidden":`true`,className:a.default.retryIcon}),d??m(`table.retry`)]})]}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.Table,{...p,loading:f}),c&&(0,s.jsx)(i.default,{...c})]})})}exports.DataTable=c;
+//# sourceMappingURL=DataTable.cjs.map

package/dist/react/components/Table/DataTable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.cjs","names":["useI18n","styles","hooks","Button","IconRefreshCw","_Fragment","Table","Pagination","require_useI18n","require_stylingHooks","require_Button","require_icons","require_Pagination","require_table_module","require_Table","react_jsx_runtime","DataTable","props","showError","error","loading","onRetry","retryLabel","t","pagination"],"sources":["../../../../../react/src/components/Table/DataTable.tsx"],"sourcesContent":["import { IconRefreshCw } from \"../../internal/icons\";\nimport useI18n from \"../../hooks/useI18n\";\nimport Button from \"../Button/Button\";\nimport Pagination from \"../Pagination/Pagination\";\nimport { Table } from \"./Table\";\nimport type { DataTableProps } from \"./types\";\nimport { hooks } from \"../../internal/stylingHooks\";\nimport styles from \"./table.module.scss\";\n\n/**\n * DataTable: a `Table` with optional pagination and an error state with a\n * retry action. While loading it shows skeleton rows (even if `error` is set)\n * and marks itself busy.\n */\nexport function DataTable<T>({\n  pagination,\n  error,\n  onRetry,\n  retryLabel,\n  loading,\n  ...props\n}: DataTableProps<T>) {\n  const { t } = useI18n();\n  const showError = Boolean(error) && !loading;\n\n  return (\n    <div\n      className={styles.dataTable}\n      aria-busy={loading || undefined}\n      {...hooks(\"data-table\", \"root\", {\n        loading,\n        size: props.size ?? \"medium\",\n        variant: props.variant ?? \"simple\",\n      })}\n    >\n      {showError ? (\n        <div\n          className={styles.error}\n          role=\"alert\"\n          {...hooks(\"data-table\", \"error\")}\n        >\n          <div className={styles.errorTitle}>{error}</div>\n          {onRetry && (\n            <Button\n              color=\"neutral\"\n              variant=\"outline\"\n              size=\"small\"\n              onClick={onRetry}\n            >\n              <IconRefreshCw aria-hidden=\"true\" className={styles.retryIcon} />\n              {retryLabel ?? t(\"table.retry\")}\n            </Button>\n          )}\n        </div>\n      ) : (\n        <>\n          <Table {...props} loading={loading} />\n          {pagination && <Pagination {...pagination} />}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"wTAcA,SAAgBgB,EAAa,CAC3B,aACA,QACA,UACA,aACA,UACA,GAAGC,GACiB,CACpB,GAAM,CAAE,KAAMjB,EAAAA,QAAQ,EAChBkB,EAAY,EAAQC,GAAU,CAACC,EAErC,OACE,EAAAL,EAAA,IAAA,CAAC,MAAD,CACE,UAAWd,EAAAA,QAAO,UAClB,YAAWmB,GAAW,IAAA,GACtB,GAAIlB,EAAAA,MAAM,aAAc,OAAQ,CAC9B,UACA,KAAMe,EAAM,MAAQ,SACpB,QAASA,EAAM,SAAW,QAC5B,CAAC,EAEA,SAAAC,GACC,EAAAH,EAAA,KAAA,CAAC,MAAD,CACE,UAAWd,EAAAA,QAAO,MAClB,KAAK,QACL,GAAIC,EAAAA,MAAM,aAAc,OAAO,EAHjC,SAAA,EAKE,EAAAa,EAAA,IAAA,CAAC,MAAD,CAAK,UAAWd,EAAAA,QAAO,WAAa,SAAAkB,CAAW,CAAA,EAC9CE,IACC,EAAAN,EAAA,KAAA,CAACZ,EAAAA,QAAD,CACE,MAAM,UACN,QAAQ,UACR,KAAK,QACL,QAASkB,EAJX,SAAA,EAME,EAAAN,EAAA,IAAA,CAACX,EAAAA,cAAD,CAAe,cAAY,OAAO,UAAWH,EAAAA,QAAO,SAAY,CAAA,EAC/DqB,GAAcC,EAAE,aAAa,CACxB,CAEP,CAAA,CAAA,CAEL,CAAA,GAAA,EAAAR,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,EACE,EAAAU,EAAA,IAAA,CAACT,EAAAA,MAAD,CAAO,GAAIW,EAAgB,SAAU,CAAA,EACpCO,IAAc,EAAAT,EAAA,IAAA,CAACR,EAAAA,QAAD,CAAY,GAAIiB,CAAa,CAAA,CAC5C,CAAA,CAAA,CAED,CAAA,CAET"}

package/dist/react/components/Table/DataTable.d.cts

@@ -0,0 +1,7 @@
+import { DataTableProps } from './types.cjs';
+/**
+ * DataTable: a `Table` with optional pagination and an error state with a
+ * retry action. While loading it shows skeleton rows (even if `error` is set)
+ * and marks itself busy.
+ */
+export declare function DataTable<T>({ pagination, error, onRetry, retryLabel, loading, ...props }: DataTableProps<T>): import('react').JSX.Element;

package/dist/react/components/Table/DataTable.d.ts

@@ -0,0 +1,7 @@
+import { DataTableProps } from './types.js';
+/**
+ * DataTable: a `Table` with optional pagination and an error state with a
+ * retry action. While loading it shows skeleton rows (even if `error` is set)
+ * and marks itself busy.
+ */
+export declare function DataTable<T>({ pagination, error, onRetry, retryLabel, loading, ...props }: DataTableProps<T>): import('react').JSX.Element;