@blockle/blocks-react 2.0.1 → 2.2.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.css.js

@@ -0,0 +1,15 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/feedback/Alert/Alert.css.ts", "@blockle/blocks-react");
+const closeButton = style({
+  "@layer": {
+    [layers.organism]: {
+      color: "currentColor"
+    }
+  }
+});
+endFileScope();
+export {
+  closeButton
+};

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/Alert/Alert.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { Button } from "../../form/Button/Button.js";
+import { Box } from "../../layout/Box/Box.js";
+import { closeButton } from "./Alert.css.js";
+const Alert = ({
+  intent = "info",
+  children,
+  open,
+  onRequestClose
+}) => {
+  const containerClassName = useComponentStyles("alert", {
+    base: true,
+    variants: { intent }
+  });
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "alert",
+      className: classnames(containerClassName),
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [
+        /* @__PURE__ */ jsx("div", { children }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "small",
+            className: closeButton,
+            onClick: () => onRequestClose?.(),
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                role: "presentation",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                children: [
+                  /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+                  /* @__PURE__ */ jsx("path", { d: "M18 6l-12 12" }),
+                  /* @__PURE__ */ jsx("path", { d: "M6 6l12 12" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Alert
+};

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.css.js

@@ -0,0 +1,23 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, keyframes } from "@vanilla-extract/css";
+setFileScope("src/components/feedback/Skeleton/Skeleton.css.ts", "@blockle/blocks-react");
+const pulse = keyframes({
+  "0%": { opacity: 1 },
+  "50%": { opacity: 0.4 },
+  "100%": { opacity: 1 }
+});
+const skeleton = style({
+  minHeight: "24px",
+  "@media": {
+    "screen and (prefers-reduced-motion: no-preference)": {
+      animationName: pulse,
+      animationDuration: "3s",
+      animationTimingFunction: "ease-in-out",
+      animationIterationCount: "infinite"
+    }
+  }
+});
+endFileScope();
+export {
+  skeleton
+};

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/Skeleton/Skeleton.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { Box } from "../../layout/Box/Box.js";
+import { skeleton } from "./Skeleton.css.js";
+const Skeleton = ({
+  height,
+  circle = false,
+  className,
+  borderRadius = 1,
+  backgroundColor = "background-300"
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: classnames(skeleton, className),
+      borderRadius: circle ? "full" : borderRadius,
+      backgroundColor,
+      style: { height, aspectRatio: circle ? "1 / 1" : void 0 }
+    }
+  );
+};
+export {
+  Skeleton
+};

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":"AAOA,eAAO,MAAM,SAAS,QAKpB,CAAC"}

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

@@ -0,0 +1,17 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, keyframes } 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 container = style({
+  animationName: toastEnter,
+  animationDuration: "240ms",
+  animationTimingFunction: "ease-out",
+  height: "fit-content"
+});
+endFileScope();
+export {
+  container
+};

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

@@ -0,0 +1,8 @@
+export type ToastProps = {
+    children?: React.ReactNode;
+    duration?: number;
+    onRequestClose: () => void;
+    open: boolean;
+};
+export declare const Toast: React.FC<ToastProps>;
+//# 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":"AAMA,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAiCtC,CAAC"}

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

@@ -0,0 +1,36 @@
+"use client";
+import { useId, useContext, useEffect } from "react";
+import { ToastContext } from "./ToastContext.js";
+const Toast = ({
+  children,
+  duration,
+  onRequestClose,
+  open
+}) => {
+  const toastId = useId();
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("Toast must be used within a ToastProvider");
+  }
+  useEffect(() => {
+    if (open) {
+      context.add({
+        id: toastId,
+        duration,
+        children,
+        onRequestClose
+      });
+    } else {
+      context.remove(toastId);
+    }
+  }, [duration, open, children, onRequestClose, context, toastId]);
+  useEffect(() => {
+    return () => {
+      context.remove(toastId);
+    };
+  }, [context, toastId]);
+  return null;
+};
+export {
+  Toast
+};

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

@@ -0,0 +1,12 @@
+export type Toast = {
+    id: string;
+    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,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/ToastContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const ToastContext = createContext(null);
+export {
+  ToastContext
+};

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,CAiFtD,CAAC"}

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

@@ -0,0 +1,85 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+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 { container } from "./Toast.css.js";
+import { ToastContext } from "./ToastContext.js";
+function makeTransition(transition) {
+  if (document.startViewTransition) {
+    document.startViewTransition(() => {
+      flushSync(() => {
+        transition();
+      });
+    });
+  } else {
+    transition();
+  }
+}
+const ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const toastsRef = useRef(toasts);
+  toastsRef.current = toasts;
+  const removeToast = useCallback((id) => {
+    makeTransition(() => {
+      setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    });
+  }, []);
+  const addToast = useCallback((toast) => {
+    const toasts2 = toastsRef.current;
+    const match = toasts2.findIndex(({ id }) => id === toast.id) !== -1;
+    function updateState(prev) {
+      const match2 = prev.findIndex(({ id }) => id === toast.id) !== -1;
+      if (match2) {
+        return prev.map((item) => item.id === toast.id ? toast : item);
+      }
+      return [...prev, toast];
+    }
+    if (match) {
+      setToasts(updateState);
+      return;
+    }
+    makeTransition(() => {
+      setToasts(updateState);
+    });
+    if (toast.duration) {
+      setTimeout(() => {
+        toast.onRequestClose();
+      }, toast.duration);
+    }
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      add: addToast,
+      remove: removeToast
+    }),
+    [addToast, removeToast]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ToastContext.Provider, { value: contextValue, children }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        position: "fixed",
+        insetBlockEnd: 0,
+        insetInline: 0,
+        padding: 2,
+        children: /* @__PURE__ */ jsx(Stack, { gap: 2, children: toasts.map(({ id, children: children2 }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: container,
+            style: {
+              viewTransitionName: `toast-${id}`
+            },
+            children: children2
+          },
+          id
+        )) })
+      }
+    )
+  ] });
+};
+export {
+  ToastProvider
+};

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