@blockle/blocks-react 3.0.1 → 3.1.0

package/README.md

@@ -1 +1,139 @@
 # @blockle/blocks-react
+
+## Testing
+
+`Dialog` and `Drawer` open with `HTMLDialogElement.showModal()` and close with `close()`. jsdom does not implement these, so in a jsdom test an open `Dialog` stays a closed `<dialog>`, and Testing Library cannot find it, or anything in it, by role.
+
+Add this polyfill to your Vitest or Jest setup file. It only defines the methods jsdom is missing:
+
+```ts
+const DialogPrototype = HTMLDialogElement.prototype;
+
+if (!DialogPrototype.showModal) {
+  DialogPrototype.showModal = function showModal() {
+    this.setAttribute('open', '');
+  };
+}
+
+if (!DialogPrototype.show) {
+  DialogPrototype.show = function show() {
+    this.setAttribute('open', '');
+  };
+}
+
+if (!DialogPrototype.close) {
+  DialogPrototype.close = function close() {
+    if (!this.hasAttribute('open')) {
+      return;
+    }
+
+    this.removeAttribute('open');
+    this.dispatchEvent(new Event('close'));
+  };
+}
+```
+
+With it, an open dialog can be found with `getByRole('dialog')`:
+
+```tsx
+render(
+  <Dialog open onRequestClose={() => {}} aria-label="Settings">
+    <button type="button">Save</button>
+  </Dialog>,
+);
+
+screen.getByRole('dialog', { name: 'Settings' });
+screen.getByRole('button', { name: 'Save' });
+```
+
+Under the polyfill the dialog is open but not modal: it is not in the top layer, and nothing outside it is made inert, so content behind it can still be queried and clicked. Test modal behaviour, focus trapping and clicks outside in a real browser, for example with Vitest Browser Mode or Playwright.
+
+### Popover
+
+`Popover` opens with `showPopover()` and closes with `hidePopover()`. jsdom does not implement the Popover API, and its default stylesheet hides every `[popover]` element that is not open, so Testing Library treats an open popover's content as hidden and `getByRole` finds nothing in it.
+
+Add this polyfill to your test setup. It only defines the methods jsdom is missing, and marks an open popover with a `data-popover-open` attribute that a test stylesheet shows:
+
+```ts
+const PopoverPrototype = HTMLElement.prototype;
+
+if (!PopoverPrototype.showPopover) {
+  PopoverPrototype.showPopover = function showPopover() {
+    this.setAttribute('data-popover-open', '');
+  };
+}
+
+if (!PopoverPrototype.hidePopover) {
+  PopoverPrototype.hidePopover = function hidePopover() {
+    this.removeAttribute('data-popover-open');
+  };
+}
+
+if (!PopoverPrototype.togglePopover) {
+  PopoverPrototype.togglePopover = function togglePopover(force?: boolean) {
+    return this.toggleAttribute('data-popover-open', force);
+  };
+}
+
+const popoverStyle = document.createElement('style');
+popoverStyle.textContent = '[popover][data-popover-open] { display: block; }';
+document.head.append(popoverStyle);
+```
+
+With it, an open popover's content can be found by role:
+
+```tsx
+render(
+  <Popover open anchorElement={anchorRef} onRequestClose={() => {}}>
+    <button type="button">Inside</button>
+  </Popover>,
+);
+
+screen.getByRole('button', { name: 'Inside' });
+```
+
+Other libraries may check for `showPopover` and behave differently once it exists; dnd-kit, for example, drags differently. If a global polyfill breaks such tests, apply it only inside the `describe` that opens a popover, and remove what it added afterwards:
+
+```ts
+import { afterAll, beforeAll, describe } from 'vitest';
+
+describe('with a popover open', () => {
+  const polyfills: Record<string, (this: HTMLElement, force?: boolean) => unknown> = {
+    showPopover() {
+      this.setAttribute('data-popover-open', '');
+    },
+    hidePopover() {
+      this.removeAttribute('data-popover-open');
+    },
+    togglePopover(force?: boolean) {
+      return this.toggleAttribute('data-popover-open', force);
+    },
+  };
+  const added: string[] = [];
+  const popoverStyle = document.createElement('style');
+
+  beforeAll(() => {
+    for (const [method, polyfill] of Object.entries(polyfills)) {
+      if (!(method in HTMLElement.prototype)) {
+        Reflect.set(HTMLElement.prototype, method, polyfill);
+        added.push(method);
+      }
+    }
+
+    popoverStyle.textContent = '[popover][data-popover-open] { display: block; }';
+    document.head.append(popoverStyle);
+  });
+
+  afterAll(() => {
+    for (const method of added) {
+      Reflect.deleteProperty(HTMLElement.prototype, method);
+    }
+
+    popoverStyle.remove();
+  });
+
+  // Tests that open a popover
+});
+```
+
+Where the Popover API is missing and no polyfill is applied, `Popover` warns when it opens or closes instead of throwing. Its content then stays hidden under jsdom's default styles. Test positioning, the top layer and clicks outside in a real browser.

package/dist/components/feedback/Alert/Alert.d.ts

@@ -4,6 +4,12 @@ export type AlertProps = {
     children?: React.ReactNode;
     intent?: AlertTheme['variants']['intent'];
     onRequestClose?: () => void;
+    /**
+     * Accessible name of the close button, rendered when `onRequestClose` is set.
+     * Pass your own wording to translate it.
+     * @default 'Close'
+     */
+    closeLabel?: string;
 } & HTMLElementProps<HTMLDivElement>;
 export declare const Alert: React.FC<AlertProps>;
 export {};

package/dist/components/feedback/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAO9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwDtC,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAO9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0DtC,CAAC"}

package/dist/components/feedback/Alert/Alert.js

@@ -9,6 +9,7 @@ const Alert = ({
   intent = "info",
   children,
   onRequestClose,
+  closeLabel = "Close",
   className,
   ...restProps
 }) => {
@@ -33,6 +34,7 @@ const Alert = ({
             variant: "ghost",
             size: "small",
             className: closeButton,
+            "aria-label": closeLabel,
             onClick: () => onRequestClose?.(),
             children: /* @__PURE__ */ jsxs(
               "svg",

package/dist/components/feedback/Toast/Toast.css.d.ts

@@ -1,2 +1,11 @@
-export declare const container: string;
+export declare const stack: string;
+export declare const toast: string;
+export declare const placement: {
+    top: string;
+    'top-start': string;
+    'top-end': string;
+    bottom: string;
+    'bottom-start': string;
+    'bottom-end': string;
+};
 //# sourceMappingURL=Toast.css.d.ts.map

package/dist/components/feedback/Toast/Toast.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/Toast.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,QASpB,CAAC"}
+{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/Toast.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,QAYhB,CAAC;AAEH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAmBH,eAAO,MAAM,SAAS;;;;;;;CAOrB,CAAC"}

package/dist/components/feedback/Toast/Toast.css.js

@@ -1,22 +1,49 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { layers } from "@blockle/blocks-core";
-import { style, keyframes } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 setFileScope("src/components/feedback/Toast/Toast.css.ts", "@blockle/blocks-react");
-const toastEnter = keyframes({
-  from: { opacity: 0, scale: 0.9, translate: "0 20%" },
-  to: { opacity: 1, scale: 1, translate: "0 0" }
+const stack = style({
+  "@layer": {
+    [layers.molecule]: {
+      position: "fixed",
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      boxSizing: "border-box",
+      // Let clicks through the stack's empty space, but not through a toast
+      pointerEvents: "none"
+    }
+  }
 });
-const container = style({
+const toast = style({
   "@layer": {
     [layers.molecule]: {
-      animationName: toastEnter,
-      animationDuration: "240ms",
-      animationTimingFunction: "ease-out",
-      height: "fit-content"
+      height: "fit-content",
+      pointerEvents: "auto"
     }
   }
 });
+const top = {
+  insetBlockStart: 0,
+  // Newest toast nearest the top edge
+  flexDirection: "column-reverse"
+};
+const bottom = { insetBlockEnd: 0 };
+const center = { insetInline: 0, marginInline: "auto" };
+const start = { insetInlineStart: 0 };
+const end = { insetInlineEnd: 0 };
+const placementStyle = (...rules) => style({ "@layer": { [layers.molecule]: Object.assign({}, ...rules) } });
+const placement = {
+  top: placementStyle(top, center),
+  "top-start": placementStyle(top, start),
+  "top-end": placementStyle(top, end),
+  bottom: placementStyle(bottom, center),
+  "bottom-start": placementStyle(bottom, start),
+  "bottom-end": placementStyle(bottom, end)
+};
 endFileScope();
 export {
-  container
+  placement,
+  stack,
+  toast
 };

package/dist/components/feedback/Toast/ToastProvider.d.ts

@@ -1,6 +1,14 @@
+import { ToastPlacement } from '@blockle/blocks-core';
+export type { ToastPlacement };
+type ToastPosition = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
 export type ToastProviderProps = {
     children?: React.ReactNode;
-    position?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
+    /** Where the toasts sit on the screen. Defaults to `bottom` */
+    placement?: ToastPlacement;
+    /**
+     * @deprecated Use `placement`, which wins when both are passed
+     */
+    position?: ToastPosition;
 };
 export declare const ToastProvider: React.FC<ToastProviderProps>;
 //# sourceMappingURL=ToastProvider.d.ts.map

package/dist/components/feedback/Toast/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastProvider.tsx"],"names":[],"mappings":"AA2BA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EACL,aAAa,GACb,eAAe,GACf,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwFtD,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA4BvE,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,KAAK,aAAa,GACd,aAAa,GACb,eAAe,GACf,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,CAAC;AAWhB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoGtD,CAAC"}

package/dist/components/feedback/Toast/ToastProvider.js

@@ -1,41 +1,64 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
 import { useState, useRef, useCallback, useMemo } from "react";
 import { flushSync } from "react-dom";
-import { Box } from "../../layout/Box/Box.js";
-import { Stack } from "../../layout/Stack/Stack.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Alert } from "../Alert/Alert.js";
-import { container } from "./Toast.css.js";
+import { toast, stack, placement } from "./Toast.css.js";
 import { ToastContext } from "./ToastContext.js";
 function makeTransition(transition) {
   if (document.startViewTransition) {
-    document.startViewTransition(() => {
+    const viewTransition = document.startViewTransition(() => {
       flushSync(() => {
         transition();
       });
     });
+    viewTransition.ready.catch(() => {
+    });
   } else {
     transition();
   }
 }
-const ToastProvider = ({ children }) => {
+const placementByPosition = {
+  "bottom-left": "bottom-start",
+  "bottom-center": "bottom",
+  "bottom-right": "bottom-end",
+  "top-left": "top-start",
+  "top-center": "top",
+  "top-right": "top-end"
+};
+const ToastProvider = ({
+  children,
+  placement: placementProp,
+  position
+}) => {
+  const placement$1 = placementProp ?? (position ? placementByPosition[position] : "bottom");
+  const rootClassName = useComponentStyles("toast", {
+    root: true,
+    variants: { placement: placement$1 }
+  });
+  const toastClassName = useComponentStyles("toast", {
+    toast: true,
+    variants: { placement: placement$1 }
+  });
   const [toasts, setToasts] = useState([]);
   const toastsRef = useRef(toasts);
   toastsRef.current = toasts;
   const removeToast = useCallback((id) => {
     makeTransition(() => {
-      setToasts((prev) => prev.filter((toast) => toast.id !== id));
+      setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
     });
   }, []);
-  const addToast = useCallback((toast) => {
+  const addToast = useCallback((toast2) => {
     const toasts2 = toastsRef.current;
-    const match = toasts2.findIndex(({ id }) => id === toast.id) !== -1;
+    const match = toasts2.findIndex(({ id }) => id === toast2.id) !== -1;
     function updateState(prev) {
-      const match2 = prev.findIndex(({ id }) => id === toast.id) !== -1;
+      const match2 = prev.findIndex(({ id }) => id === toast2.id) !== -1;
       if (match2) {
-        return prev.map((item) => item.id === toast.id ? toast : item);
+        return prev.map((item) => item.id === toast2.id ? toast2 : item);
       }
-      return [...prev, toast];
+      return [...prev, toast2];
     }
     if (match) {
       setToasts(updateState);
@@ -44,13 +67,13 @@ const ToastProvider = ({ children }) => {
     makeTransition(() => {
       setToasts(updateState);
     });
-    if (toast.duration) {
-      const toastId = toast.id;
+    if (toast2.duration) {
+      const toastId = toast2.id;
       setTimeout(() => {
         makeTransition(() => {
-          setToasts((prev) => prev.filter((toast2) => toast2.id !== toastId));
+          setToasts((prev) => prev.filter((toast22) => toast22.id !== toastId));
         });
-      }, toast.duration);
+      }, toast2.duration);
     }
   }, []);
   const contextValue = useMemo(
@@ -63,18 +86,18 @@ const ToastProvider = ({ children }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ToastContext.Provider, { value: contextValue, children }),
     /* @__PURE__ */ jsx(
-      Box,
+      "div",
       {
-        asChild: true,
-        position: "fixed",
-        insetBlockEnd: 0,
-        insetInline: 0,
-        padding: 2,
-        children: /* @__PURE__ */ jsx(Stack, { gap: 2, children: toasts.map(({ id, children: children2, intent }) => /* @__PURE__ */ jsx(
+        className: classnames(
+          stack,
+          placement[placement$1],
+          rootClassName
+        ),
+        children: toasts.map(({ id, children: children2, intent }) => /* @__PURE__ */ jsx(
           Alert,
           {
             intent,
-            className: container,
+            className: classnames(toast, toastClassName),
             style: {
               viewTransitionName: `toast-${id}`
             },
@@ -84,7 +107,7 @@ const ToastProvider = ({ children }) => {
             children: children2
           },
           id
-        )) })
+        ))
       }
     )
   ] });

package/dist/components/form/Checkbox/Checkbox.d.ts

@@ -2,7 +2,6 @@ import { HTMLElementProps } from '@blockle/blocks-core';
 import { default as React } from 'react';
 export type CheckboxProps = {
     children?: React.ReactNode;
-    name: string;
     required?: boolean;
 } & HTMLElementProps<HTMLInputElement>;
 export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/form/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAC"}

package/dist/components/form/Checkbox/Checkbox.js

@@ -9,7 +9,6 @@ const Checkbox = ({
   children,
   className,
   id,
-  name,
   required,
   ...restProps
 }) => {
@@ -31,7 +30,6 @@ const Checkbox = ({
           "input",
           {
             type: "checkbox",
-            name,
             id: inputId,
             className: input,
             ...restProps

package/dist/components/form/Checkbox/checkbox.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/checkbox.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAShB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}
+{"version":3,"file":"checkbox.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Checkbox/checkbox.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QASpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAShB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}

package/dist/components/form/Checkbox/checkbox.css.js

@@ -5,6 +5,7 @@ setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks-re
 const container = style({
   "@layer": {
     [layers.molecule]: {
+      flexShrink: 0,
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"

package/dist/components/form/Radio/Radio.d.ts

@@ -1,7 +1,6 @@
 import { HTMLElementProps } from '@blockle/blocks-core';
 export type RadioProps = {
     children?: React.ReactNode;
-    name: string;
     value: string;
 } & HTMLElementProps<HTMLInputElement>;
 export declare const Radio: React.FC<RadioProps>;

package/dist/components/form/Radio/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOzE,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqCtC,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOzE,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8BtC,CAAC"}

package/dist/components/form/Radio/Radio.js

@@ -6,7 +6,6 @@ import { useComponentStyles } from "../../../hooks/useComponentStyles/useCompone
 import { Label } from "../Label/Label.js";
 import { input, icon, container } from "./radio.css.js";
 const Radio = ({
-  name,
   children,
   className,
   ...restProps
@@ -21,16 +20,7 @@ const Radio = ({
     {
       className: classnames(container, containerClassName, className),
       children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "radio",
-            name,
-            id,
-            className: input,
-            ...restProps
-          }
-        ),
+        /* @__PURE__ */ jsx("input", { type: "radio", id, className: input, ...restProps }),
         /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
       ]
     }

package/dist/components/form/Radio/radio.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/radio.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAShB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}
+{"version":3,"file":"radio.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/radio.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QASpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAShB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC"}

package/dist/components/form/Radio/radio.css.js

@@ -5,6 +5,7 @@ setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
     [layers.molecule]: {
+      flexShrink: 0,
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"

package/dist/components/form/Select/Select.d.ts

@@ -4,8 +4,9 @@ type SelectTheme = ComponentThemes['select'];
 export type SelectProps = {
     children: React.ReactNode;
     placeholder?: string;
+    size?: SelectTheme['variants']['size'];
     variant?: SelectTheme['variants']['variant'];
-} & HTMLElementProps<HTMLSelectElement>;
+} & Omit<HTMLElementProps<HTMLSelectElement>, 'size'>;
 export declare const Select: React.FC<SelectProps>;
 export {};
 //# sourceMappingURL=Select.d.ts.map

package/dist/components/form/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgCxC,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiCxC,CAAC"}

package/dist/components/form/Select/Select.js

@@ -8,13 +8,14 @@ const Select = ({
   children,
   placeholder,
   className,
+  size,
   variant,
   ...restProps
 }) => {
   const wrapperClassName = useComponentStyles("select", { root: true }, false);
   const selectClassName = useComponentStyles("select", {
     select: true,
-    variants: { variant }
+    variants: { variant, size }
   });
   const iconClassName = useComponentStyles("select", { icon: true }, false);
   return /* @__PURE__ */ jsxs(Box, { className: classnames(wrapper, wrapperClassName), children: [

package/dist/components/form/Switch/Switch.d.ts

@@ -1,6 +1,10 @@
 import { HTMLElementProps } from '@blockle/blocks-core';
 export type SwitchProps = {
-    onChange?: (value: boolean) => void;
+    /**
+     * The native change handler of the underlying input.
+     * Read the new value from `event.target.checked`.
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
 export declare const Switch: React.FC<SwitchProps>;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/components/form/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAMzE,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEzD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsExC,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEzD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyDxC,CAAC"}

package/dist/components/form/Switch/Switch.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { classnames } from "@blockle/blocks-core";
-import { useState, useEffect, useCallback } from "react";
+import { composeRefs, classnames } from "@blockle/blocks-core";
+import { useRef, useState } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { input, container } from "./switch.css.js";
 const Switch = ({
@@ -9,55 +9,45 @@ const Switch = ({
   className,
   defaultChecked,
   onChange,
+  ref,
   ...restProps
 }) => {
-  const [isChecked, setIsChecked] = useState(
-    defaultChecked || checked || false
+  const inputRef = useRef(null);
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(
+    defaultChecked ?? false
   );
+  const isControlled = checked !== void 0;
+  const isChecked = isControlled ? checked : uncontrolledChecked;
   const baseClassName = useComponentStyles("switch", { root: true });
   const thumbClassName = useComponentStyles("switch", { thumb: true }, false);
-  useEffect(() => {
-    if (checked !== void 0) {
-      setIsChecked(checked);
+  const onChangeHandler = (event) => {
+    if (!isControlled) {
+      setUncontrolledChecked(event.target.checked);
     }
-  }, [checked]);
-  const toggle = useCallback(() => {
-    setIsChecked((checked2) => {
-      const newValue = !checked2;
-      if (onChange) {
-        onChange(newValue);
-      }
-      return newValue;
-    });
-  }, [onChange]);
-  const onChangeHandler = useCallback(
-    (event) => {
-      setIsChecked(event.target.checked);
-      if (onChange) {
-        onChange(event.target.checked);
-      }
-    },
-    [onChange]
-  );
+    onChange?.(event);
+  };
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: classnames(className, container, baseClassName),
       "data-checked": isChecked,
       onClick: (event) => {
-        if (event.target.tagName === "INPUT") {
+        if (event.target === inputRef.current) {
           return;
         }
-        toggle();
+        inputRef.current?.click();
       },
       children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
+            role: "switch",
             className: input,
-            checked: isChecked,
+            checked,
+            defaultChecked,
             onChange: onChangeHandler,
+            ref: composeRefs(ref, inputRef),
             ...restProps
           }
         ),

package/dist/components/form/Switch/switch.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/switch.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAQpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAQhB,CAAC"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/switch.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QASpB,CAAC;AAEH,eAAO,MAAM,KAAK,QAQhB,CAAC"}