@itwin/itwinui-react 5.0.0-alpha.1 → 5.0.0-alpha.11

package/dist/bricks/Label.js

@@ -1,17 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
+import { FieldLabel } from "./Field.js";
 const Label = forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.label,
+    FieldLabel,
     {
-      htmlFor: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-label", props.className),
-      ref: forwardedRef
+      render: /* @__PURE__ */ jsx(
+        Role.label,
+        {
+          ...props,
+          className: cx("\u{1F95D}-label", props.className),
+          ref: forwardedRef
+        }
+      )
     }
   );
 });

package/dist/bricks/ProgressBar.d.ts

@@ -0,0 +1,31 @@
+import { type BaseProps } from "./~utils.js";
+interface ProgressBarProps extends Omit<BaseProps, "aria-labelledby">, Required<Pick<BaseProps, "aria-labelledby">> {
+    /**
+     * The size of the progress bar.
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * The tone of the progress bar.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "accent";
+}
+/**
+ * A linear progress bar for indicating progress of an operation (or loading of data).
+ * This component maps to the [ARIA `progressbar` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role)
+ * and must be labelled using `aria-labelledby`.
+ *
+ * Example:
+ * ```tsx
+ * <ProgressBar aria-labelledby={…} />
+ * ```
+ *
+ * Supports a `tone` prop to change the tone (color) of the progress bar.
+ * Supports a `size` prop to change the size of the progress bar.
+ *
+ * Note: This component currently only supports indeterminate progress, and should
+ * only be used for indicating the progress of short operations (i.e. less than 5 seconds).
+ */
+export declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/ProgressBar.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
+import { forwardRef } from "./~utils.js";
+const ProgressBar = forwardRef(
+  (props, forwardedRef) => {
+    const { size = "medium", tone = "neutral", ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        role: "progressbar",
+        ...rest,
+        "data-kiwi-size": size,
+        "data-kiwi-tone": tone,
+        "data-kiwi-variant": "indeterminate",
+        className: cx("\u{1F95D}-progress-bar", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  ProgressBar
+};

package/dist/bricks/Radio.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type RadioProps as AkRadioProps } from "@ariakit/react/radio";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
-type RadioOwnProps = Pick<Ariakit.RadioProps, "value" | "checked" | "onChange">;
+type RadioOwnProps = Pick<AkRadioProps, "value" | "checked" | "onChange">;
 interface RadioProps extends InputBaseProps, RadioOwnProps {
 }
 /**

package/dist/bricks/Radio.js

@@ -1,18 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import {
+  Radio as AkRadio
+} from "@ariakit/react/radio";
+import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
+  const { id, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Radio,
+    FieldControl,
     {
-      accessibleWhenDisabled: true,
-      id: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
-      ref: forwardedRef
+      type: "checkable",
+      id,
+      render: /* @__PURE__ */ jsx(
+        AkRadio,
+        {
+          accessibleWhenDisabled: true,
+          ...rest,
+          className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+          ref: forwardedRef
+        }
+      )
     }
   );
 });

package/dist/bricks/Root.d.ts

@@ -17,6 +17,18 @@ interface RootProps extends BaseProps {
      * The density to use for all components under the Root.
      */
     density: "dense";
+    /**
+     * An HTML sanitizer function that will be used across all components wherever DOM elements
+     * are created from HTML strings.
+     *
+     * When this prop is not passed, sanitization will be skipped.
+     *
+     * Example:
+     * ```tsx
+     * unstablized_htmlSanitizer={DOMPurify.sanitize}
+     * ```
+     */
+    unstable_htmlSanitizer?: (html: string) => string;
 }
 /**
  * Component to be used at the root of your application. It ensures that kiwi styles and fonts are loaded

package/dist/bricks/Root.internal.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export declare const RootNodeContext: React.Context<Document | ShadowRoot | null>;
+/** Returns the closest [rootNode](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). */
+export declare function useRootNode(): Document | ShadowRoot | null | undefined;
+export declare const spriteSheetId = "\uD83E\uDD5D-inline-sprites";
+export declare const HtmlSanitizerContext: React.Context<((html: string) => string) | undefined>;

package/dist/bricks/Root.internal.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { useIsClient } from "./~hooks.js";
+const RootNodeContext = React.createContext(null);
+function useRootNode() {
+  const maybeRootNode = React.useContext(RootNodeContext);
+  const isClient = useIsClient();
+  if (!isClient) return void 0;
+  return maybeRootNode;
+}
+const spriteSheetId = "\u{1F95D}-inline-sprites";
+const HtmlSanitizerContext = React.createContext(void 0);
+export {
+  HtmlSanitizerContext,
+  RootNodeContext,
+  spriteSheetId,
+  useRootNode
+};

package/dist/bricks/Root.js

@@ -1,25 +1,50 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as ReactDOM from "react-dom";
+import { Role } from "@ariakit/react/role";
+import { PortalContext } from "@ariakit/react/portal";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
-import { forwardRef, isBrowser } from "./~utils.js";
-import { useMergedRefs } from "./~hooks.js";
+import {
+  forwardRef,
+  getOwnerDocument,
+  identity,
+  isBrowser,
+  isDocument
+} from "./~utils.js";
+import { useLayoutEffect, useMergedRefs } from "./~hooks.js";
+import {
+  HtmlSanitizerContext,
+  RootNodeContext,
+  spriteSheetId,
+  useRootNode
+} from "./Root.internal.js";
 const css = foundationsCss + bricksCss;
 const Root = forwardRef((props, forwardedRef) => {
-  const { children, synchronizeColorScheme = false, ...rest } = props;
+  const {
+    children,
+    synchronizeColorScheme = false,
+    unstable_htmlSanitizer = identity,
+    ...rest
+  } = props;
+  const [portalContainer, setPortalContainer] = React.useState(null);
   return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(Styles, {}),
     /* @__PURE__ */ jsx(Fonts, {}),
+    /* @__PURE__ */ jsx(InlineSpriteSheet, {}),
     synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
-    children
+    /* @__PURE__ */ jsx(
+      PortalContainer,
+      {
+        colorScheme: props.colorScheme,
+        density: props.density,
+        ref: setPortalContainer
+      }
+    ),
+    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children: /* @__PURE__ */ jsx(HtmlSanitizerContext.Provider, { value: unstable_htmlSanitizer, children }) })
   ] });
 });
-const RootNodeContext = React.createContext(null);
-function useRootNode() {
-  return React.useContext(RootNodeContext);
-}
 const RootInternal = forwardRef(
   (props, forwardedRef) => {
     const { children, colorScheme, density, ...rest } = props;
@@ -31,7 +56,7 @@ const RootInternal = forwardRef(
       setRootNode(rootNode2);
     }, []);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         className: cx("\u{1F95D}-root", props.className),
@@ -59,39 +84,69 @@ function SynchronizeColorScheme({
   }, [rootNode, colorScheme]);
   return null;
 }
+const PortalContainer = forwardRef((props, forwardedRef) => {
+  const rootNode = useRootNode();
+  if (!rootNode) return null;
+  const destination = isDocument(rootNode) ? rootNode.body : rootNode;
+  if (!destination) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "\u{1F95D}-root",
+        "data-kiwi-theme": props.colorScheme,
+        "data-kiwi-density": props.density,
+        style: { display: "contents" },
+        ref: forwardedRef
+      }
+    ),
+    destination
+  );
+});
 function Styles() {
   const rootNode = useRootNode();
   useLayoutEffect(() => {
     if (!rootNode) return;
-    loadStyles(rootNode, { css });
+    const { cleanup } = loadStyles(rootNode, { css });
+    return cleanup;
   }, [rootNode]);
   return null;
 }
-const styleSheets = /* @__PURE__ */ new WeakMap();
-function loadStyles(rootNode, { css: css2 }) {
+const styleSheets = new Map(
+  Object.entries({ default: /* @__PURE__ */ new WeakMap() })
+);
+function loadStyles(rootNode, { css: css2, key = "default" }) {
+  let cleanup = () => {
+  };
   const loaded = (() => {
     if (!isBrowser) return false;
     const ownerDocument = getOwnerDocument(rootNode);
     const _window = getWindow(rootNode);
     if (!ownerDocument || !_window) return false;
-    if (!supportsAdoptedStylesheets && !rootNode.querySelector("style[data-kiwi]")) {
+    if (!supportsAdoptedStylesheets && !rootNode.querySelector(`style[data-kiwi="${key}"]`)) {
       const styleElement = ownerDocument.createElement("style");
-      styleElement.dataset.kiwi = "true";
+      styleElement.dataset.kiwi = key;
       styleElement.textContent = css2;
       (rootNode.head || rootNode).appendChild(styleElement);
+      cleanup = () => styleElement.remove();
       return true;
     }
-    const styleSheet = styleSheets.get(_window) || new _window.CSSStyleSheet();
-    if (!styleSheets.has(_window)) {
-      styleSheets.set(_window, styleSheet);
+    const styleSheet = styleSheets.get(key)?.get(_window) || new _window.CSSStyleSheet();
+    if (!styleSheets.get(key)?.has(_window)) {
+      styleSheets.get(key)?.set(_window, styleSheet);
     }
     styleSheet.replaceSync(css2);
     if (!rootNode.adoptedStyleSheets.includes(styleSheet)) {
       rootNode.adoptedStyleSheets.push(styleSheet);
+      cleanup = () => {
+        rootNode.adoptedStyleSheets = rootNode.adoptedStyleSheets.filter(
+          (sheet) => sheet !== styleSheet
+        );
+      };
     }
     return true;
   })();
-  return { loaded };
+  return { loaded, cleanup };
 }
 function Fonts() {
   const rootNode = useRootNode();
@@ -101,6 +156,35 @@ function Fonts() {
   }, [rootNode]);
   return null;
 }
+function InlineSpriteSheet() {
+  const rootNode = useRootNode();
+  React.useEffect(
+    function maybeCreateSpriteSheet() {
+      const ownerDocument = getOwnerDocument(rootNode);
+      if (!ownerDocument) return;
+      const spriteSheet = ownerDocument?.getElementById(spriteSheetId);
+      if (spriteSheet) return;
+      const svg = ownerDocument.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      svg.id = spriteSheetId;
+      svg.style.display = "none";
+      Object.defineProperty(svg, Symbol.for("\u{1F95D}"), {
+        value: { icons: /* @__PURE__ */ new Map() }
+        // Map of icon URLs that have already been inlined.
+      });
+      ownerDocument.body.appendChild(svg);
+      return () => {
+        if (svg.isConnected) {
+          ownerDocument.body.removeChild(svg);
+        }
+      };
+    },
+    [rootNode]
+  );
+  return null;
+}
 function loadFonts(rootNode) {
   const ownerWindow = getWindow(rootNode);
   if (!ownerWindow || Array.from(ownerWindow.document.fonts).some(
@@ -129,17 +213,10 @@ const supportsAdoptedStylesheets = isBrowser && "adoptedStyleSheets" in Document
 function isShadow(node) {
   return node instanceof ShadowRoot || node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !!node?.host;
 }
-function isDocument(node) {
-  return node?.nodeType === Node.DOCUMENT_NODE;
-}
-function getOwnerDocument(node) {
-  return (isDocument(node) ? node : node.ownerDocument) || null;
-}
 function getWindow(node) {
   const ownerDocument = getOwnerDocument(node);
   return ownerDocument?.defaultView || null;
 }
-const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 export {
   Root
 };

package/dist/bricks/Select.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
 import { type FocusableProps } from "./~utils.js";
 /**
  * Compound component for a select element, which allows the user to select a value from a list of options.
@@ -20,8 +19,15 @@ import { type FocusableProps } from "./~utils.js";
  * </Field>
  * ```
  */
-declare const SelectRoot: React.ForwardRefExoticComponent<Pick<Ariakit.RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface HtmlSelectProps extends Omit<FocusableProps<"select">, "multiple" | "size"> {
+declare const SelectRoot: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+type HtmlSelectBaseProps = Omit<FocusableProps<"select">, "multiple" | "size">;
+interface HtmlSelectProps extends HtmlSelectBaseProps {
+    /**
+     * The variant of the `HtmlSelect`, i.e. solid, outline, or ghost.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline" | "ghost";
 }
 /**
  * The actual select element to be used inside `Select.Root`. This is a wrapper around the

package/dist/bricks/Select.js

@@ -1,20 +1,20 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import {
   forwardRef,
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { useFieldId } from "./Field.js";
+import { FieldControl } from "./Field.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
 const SelectRoot = forwardRef((props, forwardedRef) => {
   const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
   return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...props,
       className: cx("\u{1F95D}-select-root", props.className),
@@ -25,8 +25,8 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
+    const { id, variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
-    const fieldId = useFieldId();
     React.useEffect(
       function updateContext() {
         setIsHtmlSelect(true);
@@ -35,14 +35,20 @@ const HtmlSelect = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        Ariakit.Role.select,
+        FieldControl,
         {
-          id: fieldId,
-          ...props,
-          className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
-          "data-kiwi-tone": "neutral",
-          "data-kiwi-variant": "solid",
-          ref: forwardedRef
+          type: "textlike",
+          id,
+          render: /* @__PURE__ */ jsx(
+            Role.select,
+            {
+              ...rest,
+              className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
+              "data-kiwi-tone": "neutral",
+              "data-kiwi-variant": variant,
+              ref: forwardedRef
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx(DisclosureArrow, { className: "\u{1F95D}-select-arrow" })

package/dist/bricks/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import { type BaseProps } from "./~utils.js";
+interface SkeletonPropsBase extends Omit<BaseProps, "children"> {
+}
+/**
+ * Represents the loaded content before it finishes loading.
+ *
+ * Example:
+ * ```tsx
+ * <Skeleton variant="object" size="small" shape="square" />
+ * <Skeleton variant="text" size="medium" />
+ * ```
+ */
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonPropsBase & {
+    /**
+     * The type of the skeleton item. Available variants: `text`, `object`.
+     * @default "text"
+     */
+    variant?: "text" | "object";
+    /**
+     * The size of the skeleton item. Available sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`
+     * @default "medium"
+     */
+    size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+} & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Skeleton.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
+import { forwardRef } from "./~utils.js";
+const Skeleton = forwardRef(
+  (props, forwardedRef) => {
+    const { variant = "text", size = "medium", ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        ...rest,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-skeleton", props.className),
+        "data-kiwi-variant": variant,
+        "data-kiwi-size": size,
+        "aria-hidden": true
+      }
+    );
+  }
+);
+export {
+  Skeleton
+};

package/dist/bricks/Spinner.d.ts

@@ -0,0 +1,31 @@
+import { type BaseProps } from "./~utils.js";
+interface SpinnerProps extends BaseProps {
+    /**
+     * A text alternative for the spinner.
+     * @default "Loading…"
+     */
+    alt?: string;
+    /**
+     * The size of the spinner.
+     * @default "medium"
+     */
+    size?: "small" | "medium" | "large" | "xlarge";
+    /**
+     * The tone of the spinner.
+     * @default "neutral"
+     */
+    tone?: "neutral" | "accent";
+}
+/**
+ * A loading spinner.
+ *
+ * Example:
+ * ```tsx
+ * <Spinner />
+ * ```
+ *
+ * Supports a `tone` prop to change the tone (color) of the spinner.
+ * Supports a `size` prop to change the size of the spinner.
+ */
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export {};

package/dist/bricks/Spinner.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import cx from "classnames";
+import { VisuallyHidden } from "./VisuallyHidden.js";
+import { forwardRef } from "./~utils.js";
+const Spinner = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      alt = "Loading\u2026",
+      size = "medium",
+      tone = "neutral",
+      ...rest
+    } = props;
+    return /* @__PURE__ */ jsxs(
+      Role,
+      {
+        ...rest,
+        "data-kiwi-size": size,
+        "data-kiwi-tone": tone,
+        "data-kiwi-variant": "indeterminate",
+        className: cx("\u{1F95D}-spinner", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                pathLength: "100",
+                className: "\u{1F95D}-spinner-svg-track",
+                cx: "8",
+                cy: "8",
+                r: "6.5"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                pathLength: "100",
+                className: "\u{1F95D}-spinner-svg-fill",
+                cx: "8",
+                cy: "8",
+                r: "6.5"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: alt })
+        ]
+      }
+    );
+  }
+);
+export {
+  Spinner
+};

package/dist/bricks/Switch.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
-type CheckboxOwnProps = Pick<Ariakit.CheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
+type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
 interface SwitchProps extends InputBaseProps, CheckboxOwnProps {
     /** The default checked state of the toggle switch. */
     defaultChecked?: boolean;

package/dist/bricks/Switch.js

@@ -1,20 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import { useFieldId } from "./Field.js";
+import {
+  Checkbox as AkCheckbox
+} from "@ariakit/react/checkbox";
+import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
+    const { id, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Ariakit.Checkbox,
+      FieldControl,
       {
-        accessibleWhenDisabled: true,
-        id: fieldId,
-        ...props,
-        className: cx("\u{1F95D}-switch", props.className),
-        role: "switch",
-        ref: forwardedRef
+        type: "checkable",
+        id,
+        render: /* @__PURE__ */ jsx(
+          AkCheckbox,
+          {
+            accessibleWhenDisabled: true,
+            ...rest,
+            className: cx("\u{1F95D}-switch", props.className),
+            role: "switch",
+            ref: forwardedRef
+          }
+        )
       }
     );
   }