@blockle/blocks-react 2.0.1 → 2.1.0

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.d.ts

@@ -4,3 +4,4 @@ export type VisuallyHiddenProps = {
     asChild?: boolean;
 } & HTMLElementProps<HTMLSpanElement>;
 export declare const VisuallyHidden: React.FC<VisuallyHiddenProps>;
+//# sourceMappingURL=VisuallyHidden.d.ts.map

package/dist/components/accessibility/VisuallyHidden/VisuallyHidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../../src/components/accessibility/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIzE,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;AAEtC,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAaxD,CAAC"}

package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.d.ts

@@ -1 +1,2 @@
 export declare const visuallyHidden: string;
+//# sourceMappingURL=visually-hidden.css.d.ts.map

package/dist/components/accessibility/VisuallyHidden/visually-hidden.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visually-hidden.css.d.ts","sourceRoot":"","sources":["../../../../src/components/accessibility/VisuallyHidden/visually-hidden.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,QAQzB,CAAC"}

package/dist/components/display/Divider/Divider.d.ts

@@ -5,3 +5,4 @@ export type DividerProps = {
     style?: React.CSSProperties;
 };
 export declare const Divider: React.FC<DividerProps>;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/display/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Divider/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,KAAK,EAAc,MAAM,sBAAsB,CAAC;AAO9D,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiB1C,CAAC"}

package/dist/components/display/Divider/divider.css.d.ts

@@ -1 +1,2 @@
 export declare const divider: string;
+//# sourceMappingURL=divider.css.d.ts.map

package/dist/components/display/Divider/divider.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.css.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Divider/divider.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,QAOlB,CAAC"}

package/dist/components/display/Divider/divider.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks-react");
 const divider = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       clear: "both",
       blockSize: "1px"
     }

package/dist/components/display/Icon/IconMask.css.d.ts

@@ -0,0 +1,2 @@
+export declare const iconMask: string;
+//# sourceMappingURL=IconMask.css.d.ts.map

package/dist/components/display/Icon/IconMask.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconMask.css.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Icon/IconMask.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,QAKnB,CAAC"}

package/dist/components/display/Icon/IconMask.css.js

@@ -0,0 +1,13 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/display/Icon/IconMask.css.ts", "@blockle/blocks-react");
+const iconMask = style({
+  aspectRatio: "1 / 1",
+  maskSize: "100%",
+  display: "inline-block",
+  backgroundColor: "currentcolor"
+});
+endFileScope();
+export {
+  iconMask
+};

package/dist/components/display/Icon/IconMask.d.ts

@@ -0,0 +1,12 @@
+import { Atoms, ComponentThemes } from '@blockle/blocks-core';
+import { default as React } from 'react';
+type IconTheme = ComponentThemes['icon'];
+export type IconMaskProps = {
+    className?: string;
+    color?: Atoms['color'];
+    src: string;
+    size?: IconTheme['variants']['size'];
+};
+export declare const IconMask: React.FC<IconMaskProps>;
+export {};
+//# sourceMappingURL=IconMask.d.ts.map

package/dist/components/display/Icon/IconMask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconMask.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Icon/IconMask.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAErB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,SAAS,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwB5C,CAAC"}

package/dist/components/display/Icon/IconMask.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { classnames, atoms } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { iconMask } from "./IconMask.css.js";
+const IconMask = ({
+  className,
+  color = "currentColor",
+  src,
+  size
+}) => {
+  const iconClassName = useComponentStyles("icon", {
+    variants: { size }
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "presentation",
+      className: classnames(
+        atoms({ color }),
+        iconMask,
+        iconClassName,
+        className
+      ),
+      style: {
+        mask: `url(${src}) no-repeat center`
+      }
+    }
+  );
+};
+export {
+  IconMask
+};

package/dist/components/display/Icon/createIconMask.d.ts

@@ -0,0 +1,7 @@
+import { IconMaskProps } from './IconMask.js';
+type CreateIconMaskProps<TName extends string> = Omit<IconMaskProps, 'src'> & {
+    name: TName;
+};
+export declare const createIconMask: <TName extends string>(getIconUrl: (name: TName) => string) => ({ name, ...props }: CreateIconMaskProps<TName>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=createIconMask.d.ts.map

package/dist/components/display/Icon/createIconMask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createIconMask.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Icon/createIconMask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7D,KAAK,mBAAmB,CAAC,KAAK,SAAS,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,GAAG;IAC5E,IAAI,EAAE,KAAK,CAAC;CACb,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,SAAS,MAAM,EACjD,YAAY,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,MAE3B,oBAAoB,mBAAmB,CAAC,KAAK,CAAC,4CAGvD,CAAC"}

package/dist/components/display/Icon/createIconMask.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { IconMask } from "./IconMask.js";
+const createIconMask = (getIconUrl) => {
+  return ({ name, ...props }) => {
+    return /* @__PURE__ */ jsx(IconMask, { ...props, src: getIconUrl(name) });
+  };
+};
+export {
+  createIconMask
+};

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

@@ -0,0 +1,2 @@
+export declare const closeButton: string;
+//# sourceMappingURL=Alert.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,QAMtB,CAAC"}

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

@@ -0,0 +1,11 @@
+import { ComponentThemes } from '@blockle/blocks-core';
+type AlertTheme = ComponentThemes['alert'];
+export type AlertProps = {
+    intent?: AlertTheme['variants']['intent'];
+    children?: React.ReactNode;
+    open?: boolean;
+    onRequestClose?: () => void;
+};
+export declare const Alert: React.FC<AlertProps>;
+export {};
+//# sourceMappingURL=Alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,eAAe,EAAc,MAAM,sBAAsB,CAAC;AAOxE,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwDtC,CAAC"}

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

@@ -14,3 +14,4 @@ export type ProgressProps = {
     ref?: React.Ref<HTMLDivElement>;
 };
 export declare const Progress: React.FC<ProgressProps>;
+//# sourceMappingURL=Progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Progress/Progress.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8C5C,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare const skeleton: string;
+//# sourceMappingURL=Skeleton.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/Skeleton.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,QAAQ,QAUnB,CAAC"}

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

@@ -0,0 +1,10 @@
+import { Atoms } from '@blockle/blocks-core';
+export type SkeletonProps = {
+    height?: string | number;
+    circle?: boolean;
+    className?: string;
+    borderRadius?: Atoms['borderRadius'];
+    backgroundColor?: Atoms['backgroundColor'];
+};
+export declare const Skeleton: React.FC<SkeletonProps>;
+//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAc,MAAM,sBAAsB,CAAC;AAK9D,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAe5C,CAAC"}

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

@@ -8,3 +8,4 @@ export type SpinnerProps = {
 } & MarginAtoms;
 export declare const Spinner: React.FC<SpinnerProps>;
 export {};
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Spinner/Spinner.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAK9B,KAAK,YAAY,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,GAAG,WAAW,CAAC;AAEhB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmB1C,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare const container: string;
+//# sourceMappingURL=Toast.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/Toast.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,QAMpB,CAAC"}

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

@@ -0,0 +1,12 @@
+import { ComponentThemes } from '@blockle/blocks-core';
+type ToastTheme = ComponentThemes['toast'];
+export type ToastProps = {
+    children?: React.ReactNode;
+    duration?: number;
+    intent?: ToastTheme['variants']['intent'];
+    onRequestClose: () => void;
+    open: boolean;
+};
+export declare const Toast: React.FC<ToastProps>;
+export {};
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAK5D,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAmCtC,CAAC"}

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

@@ -0,0 +1,13 @@
+export type Toast = {
+    id: string;
+    intent: 'neutral' | 'success' | 'error' | 'warning' | 'info';
+    duration?: number;
+    onRequestClose: () => void;
+    children?: React.ReactNode;
+};
+export type ToastContextType = {
+    add: (toast: Toast) => void;
+    remove: (id: string) => void;
+};
+export declare const ToastContext: import('react').Context<ToastContextType | null>;
+//# sourceMappingURL=ToastContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAIF,eAAO,MAAM,YAAY,kDAA+C,CAAC"}

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

@@ -0,0 +1,6 @@
+export type ToastProviderProps = {
+    children?: React.ReactNode;
+    position?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
+};
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+//# sourceMappingURL=ToastProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAwBA,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,CAkFtD,CAAC"}

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

@@ -1 +1,2 @@
 export declare const buttonReset: string;
+//# sourceMappingURL=Button.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Button/Button.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,QAOtB,CAAC"}

package/dist/components/form/Button/Button.css.js

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks-react");
 const buttonReset = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.reset]: {
       all: "unset",
       cursor: "pointer"
     }

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

@@ -19,3 +19,4 @@ export type ButtonProps = {
 } & 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

@@ -0,0 +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;AAM/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,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,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,CAkDxC,CAAC"}

package/dist/components/form/Button/Button.js

@@ -17,6 +17,7 @@ const Button = ({
   ref,
   size,
   startSlot,
+  type = "button",
   variant,
   ...restProps
 }) => {
@@ -43,6 +44,7 @@ const Button = ({
         atoms(atomsProps),
         className
       ),
+      type: asChild ? void 0 : type,
       ...otherProps,
       children: [
         startSlot && /* @__PURE__ */ jsx("div", { children: startSlot }),

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

@@ -7,3 +7,4 @@ export type CheckboxProps = {
     required?: boolean;
 } & HTMLElementProps<HTMLInputElement>;
 export declare const Checkbox: React.FC<CheckboxProps>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +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,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmD5C,CAAC"}

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

@@ -1,3 +1,4 @@
 export declare const container: string;
 export declare const input: string;
 export declare const icon: string;
+//# sourceMappingURL=checkbox.css.d.ts.map

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

@@ -0,0 +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"}

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

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
@@ -16,7 +16,7 @@ const input = style({
   inset: 0,
   opacity: 0,
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       all: "unset"
     }
   }

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

@@ -16,3 +16,4 @@ export type LabelProps = {
 } & HTMLElementProps<HTMLLabelElement>;
 export declare const Label: React.FC<LabelProps>;
 export {};
+//# sourceMappingURL=Label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Label/Label.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAI9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC1B,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuBtC,CAAC"}

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

@@ -0,0 +1,3 @@
+export declare const numericInputContainer: string;
+export declare const numericInput: string;
+//# sourceMappingURL=NumericInput.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumericInput.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB,QAAY,CAAC;AAE/C,eAAO,MAAM,YAAY,QAiBvB,CAAC"}

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

@@ -0,0 +1,27 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/form/NumericInput/NumericInput.css.ts", "@blockle/blocks-react");
+style({});
+const numericInput = style({
+  "@layer": {
+    [layers.molecule]: {
+      // Hide native number input controls
+      MozAppearance: "textfield",
+      selectors: {
+        "&::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        },
+        "&::-webkit-outer-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        }
+      }
+    }
+  }
+});
+endFileScope();
+export {
+  numericInput
+};

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

@@ -0,0 +1,9 @@
+import { TextInputProps } from '../TextInput/TextInput.js';
+export type NumericInputProps = {
+    value: number | string;
+    min?: number;
+    max?: number;
+    step?: number;
+} & TextInputProps;
+export declare const NumericInput: React.FC<NumericInputProps>;
+//# sourceMappingURL=NumericInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/NumericInput/NumericInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,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"}

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

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { composeRefs } from "@blockle/blocks-core";
+import { useRef, useCallback } from "react";
+import { Button } from "../Button/Button.js";
+import { TextInput } from "../TextInput/TextInput.js";
+import { numericInput } from "./NumericInput.css.js";
+const NumericInput = (props) => {
+  const inputRef = useRef(null);
+  const onDecrement = useCallback((event) => {
+    const size = event.shiftKey ? 10 : 1;
+    inputRef.current?.stepDown(size);
+  }, []);
+  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);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      ref: composeRefs(props.ref, inputRef),
+      inputClassName: numericInput,
+      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
+    }
+  );
+};
+export {
+  NumericInput
+};

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

@@ -6,3 +6,4 @@ export type RadioProps = {
     value: string;
 } & HTMLElementProps<HTMLInputElement>;
 export declare const Radio: React.FC<RadioProps>;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -0,0 +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,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;AAEvC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuCtC,CAAC"}

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

@@ -6,3 +6,4 @@ export type RadioGroupProps = {
     style?: React.CSSProperties;
 };
 export declare const RadioGroup: React.FC<RadioGroupProps>;
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Radio/RadioGroup.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAUhD,CAAC"}

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

@@ -1,3 +1,4 @@
 export declare const container: string;
 export declare const input: string;
 export declare const icon: string;
+//# sourceMappingURL=radio.css.d.ts.map

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

@@ -0,0 +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"}

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

@@ -1,10 +1,10 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks-react");
 const container = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "relative",
       cursor: "pointer",
       overflow: "hidden"
@@ -16,7 +16,7 @@ const input = style({
   inset: 0,
   opacity: 0,
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       all: "unset"
     }
   }

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

@@ -9,3 +9,4 @@ export type SelectProps = {
 } & HTMLElementProps<HTMLSelectElement>;
 export declare const Select: React.FC<SelectProps>;
 export {};
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +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,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,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,CAsCxC,CAAC"}

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

@@ -1,3 +1,4 @@
 export declare const wrapper: string;
 export declare const select: string;
 export declare const icon: string;
+//# sourceMappingURL=select.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/select.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,MAAM,QAOjB,CAAC;AAEH,eAAO,MAAM,IAAI,QAYf,CAAC"}

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

@@ -1,17 +1,17 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { blocksLayerComponent } from "@blockle/blocks-core";
+import { layers } from "@blockle/blocks-core";
 import { style } from "@vanilla-extract/css";
 setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks-react");
 const wrapper = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "relative"
     }
   }
 });
 const select = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       appearance: "none",
       inlineSize: "100%"
     }
@@ -19,7 +19,7 @@ const select = style({
 });
 const icon = style({
   "@layer": {
-    [blocksLayerComponent]: {
+    [layers.molecule]: {
       position: "absolute",
       right: 0,
       top: 0,

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

@@ -19,3 +19,4 @@ export type SliderProps = {
 };
 export declare const Slider: React.FC<SliderProps>;
 export {};
+//# sourceMappingURL=Slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,KAAK,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,IAAI,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACtC,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsIxC,CAAC"}

package/dist/components/form/Slider/slider.css.d.ts

@@ -3,3 +3,4 @@ export declare const containerVertical: string;
 export declare const track: string;
 export declare const filledTrack: string;
 export declare const thumb: string;
+//# sourceMappingURL=slider.css.d.ts.map

package/dist/components/form/Slider/slider.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.css.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Slider/slider.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAM5B,CAAC;AAEH,eAAO,MAAM,KAAK,QAehB,CAAC;AAEH,eAAO,MAAM,WAAW,QAatB,CAAC;AAEH,eAAO,MAAM,KAAK,QAiBhB,CAAC"}