@usefragments/ui 1.0.0

package/dist/components/Toast/index.js

@@ -0,0 +1,299 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Toast.module.scss.js";
+const ToastContext = React.createContext(null);
+function useToast() {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  const toast = React.useCallback((options) => {
+    return context.addToast(options);
+  }, [context]);
+  const makeVariantHelper = React.useCallback(
+    (variant) => (titleOrOptions, description) => {
+      if (typeof titleOrOptions === "string") {
+        return context.addToast({ title: titleOrOptions, description, variant });
+      }
+      return context.addToast({ ...titleOrOptions, variant });
+    },
+    [context]
+  );
+  const success = React.useMemo(() => makeVariantHelper("success"), [makeVariantHelper]);
+  const error = React.useMemo(() => makeVariantHelper("error"), [makeVariantHelper]);
+  const warning = React.useMemo(() => makeVariantHelper("warning"), [makeVariantHelper]);
+  const info = React.useMemo(() => makeVariantHelper("info"), [makeVariantHelper]);
+  return {
+    toast,
+    success,
+    error,
+    warning,
+    info,
+    dismiss: context.removeToast,
+    dismissAll: context.clearToasts
+  };
+}
+function SuccessIcon() {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })
+  ] });
+}
+function ErrorIcon() {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] });
+}
+function WarningIcon() {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] });
+}
+function InfoIcon() {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+const variantIcons = {
+  default: null,
+  success: SuccessIcon,
+  error: ErrorIcon,
+  warning: WarningIcon,
+  info: InfoIcon
+};
+function ToastItem({
+  id,
+  title,
+  description,
+  variant = "default",
+  action,
+  onDismiss,
+  onPause,
+  onResume,
+  className,
+  ...htmlProps
+}) {
+  const Icon = variantIcons[variant];
+  const uniqueId = React.useId();
+  const toastRef = React.useRef(null);
+  const titleId = title ? `toast-title-${id || uniqueId}` : void 0;
+  const descId = description ? `toast-desc-${id || uniqueId}` : void 0;
+  const liveRole = variant === "error" || variant === "warning" ? "alert" : "status";
+  const toastClasses = [
+    styles.toast,
+    styles[variant],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: toastRef,
+      ...htmlProps,
+      className: toastClasses,
+      role: liveRole,
+      "aria-atomic": "true",
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      onMouseEnter: onPause,
+      onMouseLeave: () => {
+        requestAnimationFrame(() => {
+          var _a;
+          if (!((_a = toastRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+            onResume == null ? void 0 : onResume();
+          }
+        });
+      },
+      onFocusCapture: onPause,
+      onBlurCapture: () => {
+        requestAnimationFrame(() => {
+          var _a;
+          if (!((_a = toastRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
+            onResume == null ? void 0 : onResume();
+          }
+        });
+      },
+      children: [
+        Icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          title && /* @__PURE__ */ jsx("div", { id: titleId, className: styles.title, children: title }),
+          description && /* @__PURE__ */ jsx("div", { id: descId, className: styles.description, children: description })
+        ] }),
+        action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.action,
+            onClick: action.onClick,
+            children: action.label
+          }
+        ),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.close,
+            onClick: onDismiss,
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastContainer({
+  toasts,
+  position,
+  onDismiss,
+  onPause,
+  onResume
+}) {
+  const containerClasses = [
+    styles.container,
+    styles[position.replace("-", "")]
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: containerClasses, role: "region", "aria-label": "Notifications", children: toasts.map((toast) => /* @__PURE__ */ jsx(
+    ToastItem,
+    {
+      ...toast,
+      onDismiss: () => onDismiss(toast.id),
+      onPause: () => onPause(toast.id),
+      onResume: () => onResume(toast.id)
+    },
+    toast.id
+  )) });
+}
+function ToastProvider({
+  position = "bottom-right",
+  duration = 8e3,
+  max = 5,
+  children
+}) {
+  const [toasts, setToasts] = React.useState([]);
+  const idCounterRef = React.useRef(0);
+  const timeoutRef = React.useRef(/* @__PURE__ */ new Map());
+  const remainingRef = React.useRef(/* @__PURE__ */ new Map());
+  const startTimeRef = React.useRef(/* @__PURE__ */ new Map());
+  const clearRemovalTimer = React.useCallback((id) => {
+    const timeout = timeoutRef.current.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutRef.current.delete(id);
+    }
+  }, []);
+  const scheduleRemoval = React.useCallback(
+    (id, delay) => {
+      if (delay <= 0) return;
+      clearRemovalTimer(id);
+      remainingRef.current.set(id, delay);
+      startTimeRef.current.set(id, Date.now());
+      const timeout = setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+        clearRemovalTimer(id);
+        remainingRef.current.delete(id);
+        startTimeRef.current.delete(id);
+      }, delay);
+      timeoutRef.current.set(id, timeout);
+    },
+    [clearRemovalTimer]
+  );
+  const addToast = React.useCallback((toast) => {
+    const id = toast.id ?? `toast-${++idCounterRef.current}`;
+    const toastDuration = toast.duration ?? (toast.action ? 0 : duration);
+    setToasts((prev) => {
+      const nextToasts = [...prev, { ...toast, id }];
+      const overflowCount = Math.max(0, nextToasts.length - max);
+      if (overflowCount > 0) {
+        const removedToasts = nextToasts.slice(0, overflowCount);
+        removedToasts.forEach((removedToast) => {
+          clearRemovalTimer(removedToast.id);
+          remainingRef.current.delete(removedToast.id);
+          startTimeRef.current.delete(removedToast.id);
+        });
+      }
+      return overflowCount > 0 ? nextToasts.slice(overflowCount) : nextToasts;
+    });
+    if (toastDuration > 0) {
+      scheduleRemoval(id, toastDuration);
+    }
+    return id;
+  }, [clearRemovalTimer, duration, max, scheduleRemoval]);
+  const removeToast = React.useCallback((id) => {
+    clearRemovalTimer(id);
+    remainingRef.current.delete(id);
+    startTimeRef.current.delete(id);
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, [clearRemovalTimer]);
+  const pauseToast = React.useCallback((id) => {
+    const remaining = remainingRef.current.get(id);
+    if (remaining === void 0) return;
+    const startedAt = startTimeRef.current.get(id);
+    if (startedAt) {
+      const elapsed = Date.now() - startedAt;
+      remainingRef.current.set(id, Math.max(remaining - elapsed, 0));
+    }
+    clearRemovalTimer(id);
+  }, [clearRemovalTimer]);
+  const resumeToast = React.useCallback((id) => {
+    const remaining = remainingRef.current.get(id);
+    if (remaining === void 0 || remaining <= 0) return;
+    scheduleRemoval(id, remaining);
+  }, [scheduleRemoval]);
+  const clearToasts = React.useCallback(() => {
+    timeoutRef.current.forEach((timeout) => {
+      clearTimeout(timeout);
+    });
+    timeoutRef.current.clear();
+    remainingRef.current.clear();
+    startTimeRef.current.clear();
+    setToasts([]);
+  }, []);
+  React.useEffect(
+    () => () => {
+      timeoutRef.current.forEach((timeout) => {
+        clearTimeout(timeout);
+      });
+      timeoutRef.current.clear();
+      remainingRef.current.clear();
+      startTimeRef.current.clear();
+    },
+    []
+  );
+  const value = React.useMemo(
+    () => ({ toasts, addToast, removeToast, clearToasts }),
+    [toasts, addToast, removeToast, clearToasts]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      ToastContainer,
+      {
+        toasts,
+        position,
+        onDismiss: removeToast,
+        onPause: pauseToast,
+        onResume: resumeToast
+      }
+    )
+  ] });
+}
+const Toast = Object.assign(ToastItem, {
+  Provider: ToastProvider
+});
+export {
+  Toast,
+  ToastProvider,
+  useToast
+};

package/dist/components/Toggle/Toggle.module.scss.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_1sncr_1";
+const rootWithHelper = "_rootWithHelper_1sncr_48";
+const track = "_track_1sncr_51";
+const trackSm = "_trackSm_1sncr_86";
+const trackLg = "_trackLg_1sncr_96";
+const trackMd = "_trackMd_1sncr_106";
+const thumb = "_thumb_1sncr_116";
+const content = "_content_1sncr_139";
+const label = "_label_1sncr_143";
+const labelSm = "_labelSm_1sncr_151";
+const labelLg = "_labelLg_1sncr_155";
+const helper = "_helper_1sncr_159";
+const helperSm = "_helperSm_1sncr_167";
+const styles = {
+  root,
+  rootWithHelper,
+  track,
+  trackSm,
+  trackLg,
+  trackMd,
+  thumb,
+  content,
+  label,
+  labelSm,
+  labelLg,
+  helper,
+  helperSm
+};
+exports.content = content;
+exports.default = styles;
+exports.helper = helper;
+exports.helperSm = helperSm;
+exports.label = label;
+exports.labelLg = labelLg;
+exports.labelSm = labelSm;
+exports.root = root;
+exports.rootWithHelper = rootWithHelper;
+exports.thumb = thumb;
+exports.track = track;
+exports.trackLg = trackLg;
+exports.trackMd = trackMd;
+exports.trackSm = trackSm;

package/dist/components/Toggle/Toggle.module.scss.js

@@ -0,0 +1,44 @@
+const root = "_root_1sncr_1";
+const rootWithHelper = "_rootWithHelper_1sncr_48";
+const track = "_track_1sncr_51";
+const trackSm = "_trackSm_1sncr_86";
+const trackLg = "_trackLg_1sncr_96";
+const trackMd = "_trackMd_1sncr_106";
+const thumb = "_thumb_1sncr_116";
+const content = "_content_1sncr_139";
+const label = "_label_1sncr_143";
+const labelSm = "_labelSm_1sncr_151";
+const labelLg = "_labelLg_1sncr_155";
+const helper = "_helper_1sncr_159";
+const helperSm = "_helperSm_1sncr_167";
+const styles = {
+  root,
+  rootWithHelper,
+  track,
+  trackSm,
+  trackLg,
+  trackMd,
+  thumb,
+  content,
+  label,
+  labelSm,
+  labelLg,
+  helper,
+  helperSm
+};
+export {
+  content,
+  styles as default,
+  helper,
+  helperSm,
+  label,
+  labelLg,
+  labelSm,
+  root,
+  rootWithHelper,
+  thumb,
+  track,
+  trackLg,
+  trackMd,
+  trackSm
+};

package/dist/components/Toggle/index.cjs

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const _switch = require("@base-ui/react/switch");
+const index = require("../ComponentDefaults/index.cjs");
+const aria = require("../../utils/aria.cjs");
+const Toggle_module = require("./Toggle.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const SwitchRoot = React__namespace.forwardRef(function Switch2({
+  checked,
+  defaultChecked,
+  onChange,
+  onCheckedChange,
+  label,
+  helperText,
+  description,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  size: sizeProp,
+  className,
+  name,
+  form,
+  value,
+  uncheckedValue,
+  inputRef,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
+}, ref) {
+  const size = index.useResolvedControlSize(sizeProp);
+  const resolvedHelperText = helperText ?? description;
+  const generatedId = React__namespace.useId();
+  const resolvedId = id ?? `switch-${generatedId}`;
+  const helperId = resolvedHelperText ? `${resolvedId}-helper` : void 0;
+  const trackClasses = [
+    Toggle_module.default.track,
+    size === "sm" ? Toggle_module.default.trackSm : size === "lg" ? Toggle_module.default.trackLg : Toggle_module.default.trackMd
+  ].join(" ");
+  const thumbClasses = Toggle_module.default.thumb;
+  const labelClasses = [
+    Toggle_module.default.label,
+    size === "sm" && Toggle_module.default.labelSm,
+    size === "lg" && Toggle_module.default.labelLg
+  ].filter(Boolean).join(" ");
+  const helperClasses = [Toggle_module.default.helper, size === "sm" && Toggle_module.default.helperSm].filter(Boolean).join(" ");
+  const rootClasses = [Toggle_module.default.root, resolvedHelperText && Toggle_module.default.rootWithHelper, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    _switch.Switch.Root,
+    {
+      ref,
+      id: resolvedId,
+      checked,
+      defaultChecked,
+      onCheckedChange: onCheckedChange ?? onChange,
+      disabled,
+      readOnly,
+      required,
+      name,
+      form,
+      value,
+      uncheckedValue,
+      inputRef,
+      className: rootClasses,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": aria.mergeAriaIds(ariaDescribedBy, helperId),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: trackClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: thumbClasses }) }),
+        (label || resolvedHelperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Toggle_module.default.content, children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClasses, children: label }),
+          resolvedHelperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: resolvedHelperText })
+        ] })
+      ]
+    }
+  );
+});
+const Switch = Object.assign(SwitchRoot, {
+  Root: SwitchRoot
+});
+exports.Switch = Switch;

package/dist/components/Toggle/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+/**
+ * Binary on/off switch for settings and preferences.
+ * @see https://usefragments.com/components/switch
+ */
+export interface SwitchProps {
+    /** Whether the switch is on */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Called when the switch is toggled */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Alias for onCheckedChange */
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    /** Helper text shown below the label */
+    helperText?: string;
+    /** @deprecated Use helperText instead. */
+    description?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    name?: string;
+    form?: string;
+    value?: string;
+    uncheckedValue?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+export type ToggleProps = SwitchProps;
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>> & {
+    Root: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+};
+/** @deprecated Use `Switch` instead. */
+export declare const Toggle: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>> & {
+    Root: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AA4FtC,eAAO,MAAM,MAAM;;CAEjB,CAAC;AAEH,wCAAwC;AACxC,eAAO,MAAM,MAAM;;CAAS,CAAC"}

package/dist/components/Toggle/index.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+import { useResolvedControlSize } from "../ComponentDefaults/index.js";
+import { mergeAriaIds } from "../../utils/aria.js";
+import styles from "./Toggle.module.scss.js";
+const SwitchRoot = React.forwardRef(function Switch2({
+  checked,
+  defaultChecked,
+  onChange,
+  onCheckedChange,
+  label,
+  helperText,
+  description,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  size: sizeProp,
+  className,
+  name,
+  form,
+  value,
+  uncheckedValue,
+  inputRef,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
+}, ref) {
+  const size = useResolvedControlSize(sizeProp);
+  const resolvedHelperText = helperText ?? description;
+  const generatedId = React.useId();
+  const resolvedId = id ?? `switch-${generatedId}`;
+  const helperId = resolvedHelperText ? `${resolvedId}-helper` : void 0;
+  const trackClasses = [
+    styles.track,
+    size === "sm" ? styles.trackSm : size === "lg" ? styles.trackLg : styles.trackMd
+  ].join(" ");
+  const thumbClasses = styles.thumb;
+  const labelClasses = [
+    styles.label,
+    size === "sm" && styles.labelSm,
+    size === "lg" && styles.labelLg
+  ].filter(Boolean).join(" ");
+  const helperClasses = [styles.helper, size === "sm" && styles.helperSm].filter(Boolean).join(" ");
+  const rootClasses = [styles.root, resolvedHelperText && styles.rootWithHelper, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    Switch$1.Root,
+    {
+      ref,
+      id: resolvedId,
+      checked,
+      defaultChecked,
+      onCheckedChange: onCheckedChange ?? onChange,
+      disabled,
+      readOnly,
+      required,
+      name,
+      form,
+      value,
+      uncheckedValue,
+      inputRef,
+      className: rootClasses,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": mergeAriaIds(ariaDescribedBy, helperId),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: trackClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: thumbClasses }) }),
+        (label || resolvedHelperText) && /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          label && /* @__PURE__ */ jsx("span", { className: labelClasses, children: label }),
+          resolvedHelperText && /* @__PURE__ */ jsx("span", { id: helperId, className: helperClasses, children: resolvedHelperText })
+        ] })
+      ]
+    }
+  );
+});
+const Switch = Object.assign(SwitchRoot, {
+  Root: SwitchRoot
+});
+export {
+  Switch
+};

package/dist/components/ToggleGroup/ToggleGroup.module.scss.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const group = "_group_jam3u_1";
+const gapXs = "_gap-xs_jam3u_8";
+const gapSm = "_gap-sm_jam3u_12";
+const item = "_item_jam3u_25";
+const selected = "_selected_jam3u_30";
+const pills = "_pills_jam3u_36";
+const outline = "_outline_jam3u_51";
+const disabled = "_disabled_jam3u_104";
+const sizeSm = "_size-sm_jam3u_109";
+const sizeMd = "_size-md_jam3u_118";
+const sizeLg = "_size-lg_jam3u_127";
+const styles = {
+  group,
+  "gap-xs": "_gap-xs_jam3u_8",
+  gapXs,
+  "gap-sm": "_gap-sm_jam3u_12",
+  gapSm,
+  "default": "_default_jam3u_16",
+  item,
+  selected,
+  pills,
+  outline,
+  disabled,
+  "size-sm": "_size-sm_jam3u_109",
+  sizeSm,
+  "size-md": "_size-md_jam3u_118",
+  sizeMd,
+  "size-lg": "_size-lg_jam3u_127",
+  sizeLg
+};
+exports.default = styles;
+exports.disabled = disabled;
+exports.gapSm = gapSm;
+exports.gapXs = gapXs;
+exports.group = group;
+exports.item = item;
+exports.outline = outline;
+exports.pills = pills;
+exports.selected = selected;
+exports.sizeLg = sizeLg;
+exports.sizeMd = sizeMd;
+exports.sizeSm = sizeSm;