@stigmer/react 3.1.6 → 3.1.8

package/switch/Switch.d.ts

@@ -0,0 +1,47 @@
+/** Props for {@link Switch}. */
+export interface SwitchProps {
+    /** Whether the switch is on. */
+    readonly checked: boolean;
+    /** Called with the next value when the user toggles the switch. */
+    readonly onCheckedChange: (checked: boolean) => void;
+    /** When `true`, the switch is shown but non-interactive. */
+    readonly disabled?: boolean;
+    /**
+     * Accessible name. Required unless `aria-labelledby` points at a
+     * visible label element.
+     */
+    readonly "aria-label"?: string;
+    /** ID of the element that labels this switch. */
+    readonly "aria-labelledby"?: string;
+    /** Element ID, for association with an external `<label htmlFor>`. */
+    readonly id?: string;
+    /** Additional CSS classes for the root button. */
+    readonly className?: string;
+}
+/**
+ * Accessible on/off toggle following the WAI-ARIA Switch pattern.
+ *
+ * Built on a native `<button role="switch">` so Space/Enter activation,
+ * focus, and disabled semantics come from the platform. `aria-checked`
+ * reflects the state for assistive technology.
+ *
+ * Use a switch only for instant binary state changes that take effect
+ * immediately (e.g. enabling sharing) — not for choices that need a
+ * separate save step (use radios or a select for those).
+ *
+ * The visible track is compact; an invisible expanded hit area keeps the
+ * touch target at ~44px without disturbing layout. All visual properties
+ * flow through `--stgm-*` design tokens, and the thumb transition is
+ * suppressed under `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   checked={sharing.enabled}
+ *   onCheckedChange={(next) => save({ ...sharing, enabled: next })}
+ *   aria-label="Enable sharing"
+ * />
+ * ```
+ */
+export declare function Switch({ checked, onCheckedChange, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, id, className, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Switch.d.ts.map

package/switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/switch/Switch.tsx"],"names":[],"mappings":"AAIA,gCAAgC;AAChC,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,4DAA4D;IAC5D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,iDAAiD;IACjD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,eAAe,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,EAAE,EACF,SAAS,GACV,EAAE,WAAW,2CAiCb"}

package/switch/Switch.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@stigmer/theme";
+/**
+ * Accessible on/off toggle following the WAI-ARIA Switch pattern.
+ *
+ * Built on a native `<button role="switch">` so Space/Enter activation,
+ * focus, and disabled semantics come from the platform. `aria-checked`
+ * reflects the state for assistive technology.
+ *
+ * Use a switch only for instant binary state changes that take effect
+ * immediately (e.g. enabling sharing) — not for choices that need a
+ * separate save step (use radios or a select for those).
+ *
+ * The visible track is compact; an invisible expanded hit area keeps the
+ * touch target at ~44px without disturbing layout. All visual properties
+ * flow through `--stgm-*` design tokens, and the thumb transition is
+ * suppressed under `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   checked={sharing.enabled}
+ *   onCheckedChange={(next) => save({ ...sharing, enabled: next })}
+ *   aria-label="Enable sharing"
+ * />
+ * ```
+ */
+export function Switch({ checked, onCheckedChange, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, id, className, }) {
+    return (_jsx("button", { type: "button", role: "switch", id: id, "aria-checked": checked, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled: disabled, onClick: () => onCheckedChange(!checked), className: cn(
+        // Track. `relative` anchors both the thumb and the expanded hit area.
+        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors", "motion-reduce:transition-none", checked ? "bg-primary" : "bg-muted", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", 
+        // Expanded invisible hit area (~44px tall) for touch targets.
+        "after:absolute after:-inset-3 after:content-['']", className), children: _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-transform", "motion-reduce:transition-none", checked ? "translate-x-[18px]" : "translate-x-0.5") }) }));
+}
+//# sourceMappingURL=Switch.js.map

package/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAuBpC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,EACP,eAAe,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,EAAE,EACF,SAAS,GACG;IACZ,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,kBACQ,OAAO,gBACT,SAAS,qBACJ,cAAc,EAC/B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EACxC,SAAS,EAAE,EAAE;QACX,sEAAsE;QACtE,mFAAmF,EACnF,+BAA+B,EAC/B,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EACnC,qGAAqG,EACrG,kDAAkD;QAClD,8DAA8D;QAC9D,kDAAkD,EAClD,SAAS,CACV,YAED,8BACc,MAAM,EAClB,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,+BAA+B,EAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,iBAAiB,CACnD,GACD,GACK,CACV,CAAC;AACJ,CAAC"}

package/switch/index.d.ts

@@ -0,0 +1,3 @@
+export { Switch } from "./Switch.js";
+export type { SwitchProps } from "./Switch.js";
+//# sourceMappingURL=index.d.ts.map

package/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}

package/switch/index.js

@@ -0,0 +1,2 @@
+export { Switch } from "./Switch.js";
+//# sourceMappingURL=index.js.map

package/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC"}