@blockle/blocks-react 3.0.1 → 3.2.0

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

@@ -0,0 +1,14 @@
+export type Countdowns = {
+    /** Starts a countdown of `duration` for `id`, replacing any it had */
+    set: (id: string, duration: number) => void;
+    /** Drops the countdown of `id` without calling `onEnd` */
+    clear: (id: string) => void;
+    /** Pauses or resumes every countdown; a resumed one runs its time left */
+    setPaused: (paused: boolean) => void;
+};
+/**
+ * Pausable countdowns keyed by id, calling `onEnd` with the id once its
+ * time has run. They only count down while mounted, and are stopped on unmount.
+ */
+export declare function useCountdowns(onEnd: (id: string) => void): Countdowns;
+//# sourceMappingURL=useCountdowns.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCountdowns.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/useCountdowns.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,UAAU,GAAG;IACvB,sEAAsE;IACtE,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,0DAA0D;IAC1D,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5B,0EAA0E;IAC1E,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,UAAU,CAsFrE"}

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

@@ -0,0 +1,74 @@
+"use client";
+import { useRef, useMemo, useEffect } from "react";
+function useCountdowns(onEnd) {
+  const onEndRef = useRef(onEnd);
+  onEndRef.current = onEnd;
+  const countdownsRef = useRef(/* @__PURE__ */ new Map());
+  const pausedRef = useRef(false);
+  const mountedRef = useRef(false);
+  const countdowns = useMemo(() => {
+    function run(id, countdown) {
+      countdown.startedAt = Date.now();
+      countdown.timeout = setTimeout(() => {
+        countdownsRef.current.delete(id);
+        onEndRef.current(id);
+      }, countdown.remaining);
+    }
+    function stop(countdown) {
+      clearTimeout(countdown.timeout);
+      if (countdown.startedAt !== void 0) {
+        countdown.remaining -= Date.now() - countdown.startedAt;
+        countdown.startedAt = void 0;
+      }
+    }
+    function isRunning() {
+      return mountedRef.current && !pausedRef.current;
+    }
+    function clear(id) {
+      const countdown = countdownsRef.current.get(id);
+      if (countdown) {
+        stop(countdown);
+        countdownsRef.current.delete(id);
+      }
+    }
+    function sync() {
+      for (const [id, countdown] of countdownsRef.current) {
+        stop(countdown);
+        if (isRunning()) {
+          run(id, countdown);
+        }
+      }
+    }
+    return {
+      set(id, duration) {
+        clear(id);
+        const countdown = { remaining: duration };
+        countdownsRef.current.set(id, countdown);
+        if (isRunning()) {
+          run(id, countdown);
+        }
+      },
+      clear,
+      setPaused(paused) {
+        if (paused === pausedRef.current) {
+          return;
+        }
+        pausedRef.current = paused;
+        sync();
+      },
+      sync
+    };
+  }, []);
+  useEffect(() => {
+    mountedRef.current = true;
+    countdowns.sync();
+    return () => {
+      mountedRef.current = false;
+      countdowns.sync();
+    };
+  }, [countdowns]);
+  return countdowns;
+}
+export {
+  useCountdowns
+};

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

@@ -1,6 +1,16 @@
 import { Atoms, ComponentThemes, HTMLElementProps, MarginAtoms } from '@blockle/blocks-core';
 import { default as React } from 'react';
 type ButtonTheme = ComponentThemes['button'];
+type ButtonIntentProps = {
+    /**
+     * Use the surrounding text color; only for the ghost and outline variants
+     */
+    intent: 'inherit';
+    variant: Exclude<ButtonTheme['variants']['variant'], 'solid'>;
+} | {
+    intent?: Exclude<ButtonTheme['variants']['intent'], 'inherit'>;
+    variant?: ButtonTheme['variants']['variant'];
+};
 export type ButtonProps = {
     alignSelf?: Atoms['alignSelf'];
     asChild?: boolean;
@@ -8,14 +18,12 @@ export type ButtonProps = {
     disabled?: boolean;
     endSlot?: React.ReactNode;
     inlineSize?: Atoms['inlineSize'];
-    intent?: ButtonTheme['variants']['intent'];
     loading?: boolean;
     popovertarget?: string;
     size?: ButtonTheme['variants']['size'];
     startSlot?: React.ReactNode;
     type?: 'button' | 'submit' | 'reset';
-    variant?: ButtonTheme['variants']['variant'];
-} & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
+} & ButtonIntentProps & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
 export declare const Button: React.FC<ButtonProps>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,GAAG,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GACnD,WAAW,CAAC;AAId,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDxC,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,KAAK,iBAAiB,GAClB;IACE;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;CAC/D,GACD;IACE,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;IAC/D,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAC9C,CAAC;AAEN,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,GAAG,iBAAiB,GACnB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GACjD,WAAW,CAAC;AAId,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDxC,CAAC"}

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;AAQ/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,CAiD5C,CAAC"}

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

@@ -3,13 +3,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useId } from "react";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { CheckIcon } from "../../../icons/icons.js";
 import { Label } from "../Label/Label.js";
 import { input, icon, container } from "./checkbox.css.js";
 const Checkbox = ({
   children,
   className,
   id,
-  name,
   required,
   ...restProps
 }) => {
@@ -31,13 +31,17 @@ const Checkbox = ({
           "input",
           {
             type: "checkbox",
-            name,
             id: inputId,
             className: input,
             ...restProps
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
+        /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), "aria-hidden": true, children: /* @__PURE__ */ jsx(
+          CheckIcon,
+          {
+            style: { width: "1rem", height: "1rem", display: "block" }
+          }
+        ) })
       ]
     }
   );
@@ -49,30 +53,6 @@ const Checkbox = ({
     children && /* @__PURE__ */ jsx(Label, { required, htmlFor: inputId, children })
   ] });
 };
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        strokeWidth: "1.5",
-        stroke: "currentColor",
-        style: { width: "1rem", height: "1rem", display: "block" },
-        role: "presentation",
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "m4.5 12.75 6 6 9-13.5"
-          }
-        )
-      }
-    )
-  );
-};
 export {
   Checkbox
 };

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/IconButton/IconButton.d.ts

@@ -0,0 +1,29 @@
+import { ComponentThemes, HTMLElementProps, MarginAtoms } from '@blockle/blocks-core';
+import { default as React } from 'react';
+type IconButtonTheme = ComponentThemes['iconButton'];
+type IconButtonIntentProps = {
+    /**
+     * Use the surrounding text color; only for the ghost and outline variants
+     */
+    intent: 'inherit';
+    variant: Exclude<IconButtonTheme['variants']['variant'], 'solid'>;
+} | {
+    intent?: Exclude<IconButtonTheme['variants']['intent'], 'inherit'>;
+    variant?: IconButtonTheme['variants']['variant'];
+};
+export type IconButtonProps = {
+    asChild?: boolean;
+    children: React.ReactNode;
+    disabled?: boolean;
+    /**
+     * Accessible name of the button, rendered as `aria-label`
+     */
+    label: string;
+    loading?: boolean;
+    shape?: IconButtonTheme['variants']['shape'];
+    size?: IconButtonTheme['variants']['size'];
+    type?: 'button' | 'submit' | 'reset';
+} & IconButtonIntentProps & Omit<HTMLElementProps<HTMLButtonElement>, 'size'> & MarginAtoms;
+export declare const IconButton: React.FC<IconButtonProps>;
+export {};
+//# sourceMappingURL=IconButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/form/IconButton/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,eAAe,EAGpB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,eAAe,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;AAErD,KAAK,qBAAqB,GACtB;IACE;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;CACnE,GACD;IACE,MAAM,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC;IACnE,OAAO,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,CAAC;CAClD,CAAC;AAEN,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,GAAG,qBAAqB,GACvB,IAAI,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,GACjD,WAAW,CAAC;AAId,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgEhD,CAAC"}

package/dist/components/form/IconButton/IconButton.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { getAtomsAndProps, classnames, atoms } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { isValidElement, cloneElement } from "react";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Spinner } from "../../feedback/Spinner/Spinner.js";
+import { buttonReset } from "../Button/Button.css.js";
+const [Template, Slot] = createSlottable("button");
+const IconButton = ({
+  asChild,
+  children,
+  className,
+  disabled,
+  intent,
+  label,
+  loading,
+  shape,
+  size,
+  type,
+  variant,
+  ...restProps
+}) => {
+  const iconButtonClassName = useComponentStyles("iconButton", {
+    root: true,
+    variants: {
+      variant,
+      intent,
+      size,
+      shape,
+      disabled,
+      loading
+    }
+  });
+  const [atomsProps, otherProps] = getAtomsAndProps(restProps);
+  const spinner = /* @__PURE__ */ jsx(Spinner, { size });
+  let content = children;
+  if (loading) {
+    content = asChild && isValidElement(children) ? cloneElement(children, void 0, spinner) : spinner;
+  }
+  return /* @__PURE__ */ jsx(
+    Template,
+    {
+      asChild,
+      "aria-label": label,
+      disabled: disabled || loading,
+      className: classnames(
+        buttonReset,
+        iconButtonClassName,
+        atoms(atomsProps),
+        className
+      ),
+      type: asChild ? void 0 : type ?? "button",
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Slot, { children: content })
+    }
+  );
+};
+export {
+  IconButton
+};

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

@@ -1,9 +1,19 @@
 import { TextInputProps } from '../TextInput/TextInput.js';
 export type NumericInputProps = {
+    /**
+     * Accessible name of the decrement button. Pass your own wording to translate it.
+     * @default 'Decrease'
+     */
+    decrementLabel?: string;
+    /**
+     * Accessible name of the increment button. Pass your own wording to translate it.
+     * @default 'Increase'
+     */
+    incrementLabel?: string;
     value?: number | string;
     min?: number;
     max?: number;
     step?: number;
-} & TextInputProps;
+} & Omit<TextInputProps, 'startSlot' | 'endSlot'>;
 export declare const NumericInput: React.FC<NumericInputProps>;
 //# sourceMappingURL=NumericInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,cAAc,CAAC;AAEnB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2CpD,CAAC"}
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,SAAS,CAAC,CAAC;AAOlD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgEpD,CAAC"}

package/dist/components/form/NumericInput/NumericInput.js

@@ -1,42 +1,70 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { composeRefs } from "@blockle/blocks-core";
+import { classnames, composeRefs } from "@blockle/blocks-core";
 import { useRef, useCallback } from "react";
-import { Button } from "../Button/Button.js";
+import { PlusIcon, MinusIcon } from "../../../icons/icons.js";
+import { IconButton } from "../IconButton/IconButton.js";
 import { TextInput } from "../TextInput/TextInput.js";
 import { numericInput } from "./NumericInput.css.js";
-const NumericInput = (props) => {
+const shiftMultiplier = 10;
+const stepsFor = (event) => event.shiftKey ? shiftMultiplier : 1;
+const NumericInput = ({
+  decrementLabel = "Decrease",
+  incrementLabel = "Increase",
+  ...props
+}) => {
   const inputRef = useRef(null);
+  const { onKeyDown: consumerOnKeyDown } = props;
   const onDecrement = useCallback((event) => {
-    const size = event.shiftKey ? 10 : 1;
-    inputRef.current?.stepDown(size);
+    inputRef.current?.stepDown(stepsFor(event));
   }, []);
   const onIncrement = useCallback((event) => {
-    const stepSize = event.shiftKey ? 10 : 1;
-    inputRef.current?.stepUp(stepSize);
-  }, []);
-  const onKeyDown = useCallback((event) => {
-    if (!event.shiftKey) {
-      return;
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      inputRef.current?.stepUp(10);
-    } else if (event.key === "ArrowDown") {
-      event.preventDefault();
-      inputRef.current?.stepDown(10);
-    }
+    inputRef.current?.stepUp(stepsFor(event));
   }, []);
+  const onKeyDown = useCallback(
+    (event) => {
+      consumerOnKeyDown?.(event);
+      if (event.defaultPrevented || !event.shiftKey) {
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        inputRef.current?.stepUp(stepsFor(event));
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        inputRef.current?.stepDown(stepsFor(event));
+      }
+    },
+    [consumerOnKeyDown]
+  );
   return /* @__PURE__ */ jsx(
     TextInput,
     {
+      ...props,
       ref: composeRefs(props.ref, inputRef),
-      inputClassName: numericInput,
+      inputClassName: classnames(numericInput, props.inputClassName),
       type: "number",
-      startSlot: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "small", onClick: onDecrement, children: "-" }),
-      endSlot: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "small", onClick: onIncrement, children: "+" }),
-      onKeyDown,
-      ...props
+      startSlot: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: decrementLabel,
+          variant: "ghost",
+          size: "small",
+          onClick: onDecrement,
+          children: /* @__PURE__ */ jsx(MinusIcon, {})
+        }
+      ),
+      endSlot: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: incrementLabel,
+          variant: "ghost",
+          size: "small",
+          onClick: onIncrement,
+          children: /* @__PURE__ */ jsx(PlusIcon, {})
+        }
+      ),
+      onKeyDown
     }
   );
 };

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;AAO/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

@@ -2,19 +2,21 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { ChevronDownIcon } from "../../../icons/icons.js";
 import { Box } from "../../layout/Box/Box.js";
 import { select, icon, wrapper } from "./select.css.js";
 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: [
@@ -35,33 +37,11 @@ const Select = ({
         className: classnames(icon, iconClassName),
         role: "presentation",
         "aria-hidden": true,
-        children: /* @__PURE__ */ jsx(DefaultIcon, {})
+        children: /* @__PURE__ */ jsx(ChevronDownIcon, { style: { width: "1rem", height: "1rem" } })
       }
     )
   ] });
 };
-const DefaultIcon = () => {
-  return (
-    // TOOD - replace with actual icon component renderer
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        role: "presentation",
-        viewBox: "0 0 24 24",
-        style: { width: "1rem", height: "1rem" },
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "currentColor",
-            fillRule: "evenodd",
-            d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
-            clipRule: "evenodd"
-          }
-        )
-      }
-    )
-  );
-};
 export {
   Select
 };

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"}