@nayhoo/ui 0.8.0 → 0.9.1

package/dist/providers/index.d.mts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import react__default from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
 
 type ThemeMode = "light" | "dark";
 
@@ -13,4 +15,22 @@ type ThemeProviderProps = {
  */
 declare const ThemeProvider: ({ children, themeMode, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { ThemeContext, ThemeProvider };
+type AddToastPayload = Omit<Toast, "status">;
+type ToasterContextProps = ((payload: AddToastPayload) => void) & {
+    error: (payload: AddToastPayload) => void;
+    success: (payload: AddToastPayload) => void;
+};
+declare const ToasterContext: react.Context<ToasterContextProps>;
+declare const Toaster: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
+type Toast = {
+    title?: string;
+    description?: string;
+    status: "default" | "error" | "success";
+    action?: react.ReactNode;
+} & ToastPrimitives.ToastProps;
+declare const Toast: (props: ToastPrimitives.ToastProps & {
+    toast: Toast;
+}) => react_jsx_runtime.JSX.Element;
+declare const ToastAction: ({ ...props }: Omit<ToastPrimitives.ToastActionProps, "asChild">) => react_jsx_runtime.JSX.Element;
+
+export { ThemeContext, ThemeProvider, ToastAction, Toaster, ToasterContext };

package/dist/providers/index.d.ts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import react__default from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
 
 type ThemeMode = "light" | "dark";
 
@@ -13,4 +15,22 @@ type ThemeProviderProps = {
  */
 declare const ThemeProvider: ({ children, themeMode, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
-export { ThemeContext, ThemeProvider };
+type AddToastPayload = Omit<Toast, "status">;
+type ToasterContextProps = ((payload: AddToastPayload) => void) & {
+    error: (payload: AddToastPayload) => void;
+    success: (payload: AddToastPayload) => void;
+};
+declare const ToasterContext: react.Context<ToasterContextProps>;
+declare const Toaster: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
+type Toast = {
+    title?: string;
+    description?: string;
+    status: "default" | "error" | "success";
+    action?: react.ReactNode;
+} & ToastPrimitives.ToastProps;
+declare const Toast: (props: ToastPrimitives.ToastProps & {
+    toast: Toast;
+}) => react_jsx_runtime.JSX.Element;
+declare const ToastAction: ({ ...props }: Omit<ToastPrimitives.ToastActionProps, "asChild">) => react_jsx_runtime.JSX.Element;
+
+export { ThemeContext, ThemeProvider, ToastAction, Toaster, ToasterContext };

package/dist/providers/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,13 +17,24 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/providers/index.ts
 var providers_exports = {};
 __export(providers_exports, {
   ThemeContext: () => ThemeContext,
-  ThemeProvider: () => ThemeProvider
+  ThemeProvider: () => ThemeProvider,
+  ToastAction: () => ToastAction,
+  Toaster: () => Toaster,
+  ToasterContext: () => ToasterContext
 });
 module.exports = __toCommonJS(providers_exports);
 
@@ -56,9 +69,365 @@ var ThemeProvider = ({
     }
   ) });
 };
+
+// src/theme/recipes/spinner.css.ts
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var spinnerRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "spinner_spinnerRecipe__15xzcy90", variantClassNames: { size: { "1": "spinner_spinnerRecipe_size_1__15xzcy91", "2": "spinner_spinnerRecipe_size_2__15xzcy92", "3": "spinner_spinnerRecipe_size_3__15xzcy93", "4": "spinner_spinnerRecipe_size_4__15xzcy94", "5": "spinner_spinnerRecipe_size_5__15xzcy95", "6": "spinner_spinnerRecipe_size_6__15xzcy96", "7": "spinner_spinnerRecipe_size_7__15xzcy97", "8": "spinner_spinnerRecipe_size_8__15xzcy98", "9": "spinner_spinnerRecipe_size_9__15xzcy99" } }, defaultVariants: { size: "3" }, compoundVariants: [] });
+
+// src/utils/merge-classes.ts
+function mergeClasses(...classes) {
+  return classes.filter((cls) => Boolean(cls)).join(" ");
+}
+
+// src/utils/pick.ts
+function pick(obj, ...keys) {
+  const ret = {};
+  keys.forEach((key) => {
+    ret[key] = obj[key];
+  });
+  return ret;
+}
+
+// src/components/spinner.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultElement = "div";
+var Spinner = ({ asChild, ...props }) => {
+  const variants = pick(props, ...spinnerRecipe.variants());
+  const spinner = spinnerRecipe(variants);
+  const Comp = asChild ? import_react_slot.Slot : defaultElement;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Comp, { ...props, className: mergeClasses(spinner, props.className), children: props.children });
+};
+
+// src/theme/recipes/button.css.ts
+var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
+var buttonRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "button_buttonRecipe__hi3ya00", variantClassNames: { fullWidth: { true: "button_buttonRecipe_fullWidth_true__hi3ya01" }, loading: { true: "button_buttonRecipe_loading_true__hi3ya02" }, size: { "1": "button_buttonRecipe_size_1__hi3ya03", "2": "button_buttonRecipe_size_2__hi3ya04", "3": "button_buttonRecipe_size_3__hi3ya05" }, shape: { square: "button_buttonRecipe_shape_square__hi3ya06", pill: "button_buttonRecipe_shape_pill__hi3ya07" }, variant: { primary: "button_buttonRecipe_variant_primary__hi3ya08", secondary: "button_buttonRecipe_variant_secondary__hi3ya09", outline: "button_buttonRecipe_variant_outline__hi3ya0a", ghost: "button_buttonRecipe_variant_ghost__hi3ya0b", error: "button_buttonRecipe_variant_error__hi3ya0c", success: "button_buttonRecipe_variant_success__hi3ya0d" } }, defaultVariants: { size: "2", variant: "primary" }, compoundVariants: [] });
+
+// src/components/button.tsx
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultElement2 = "button";
+var Button = ({ asChild, ...props }) => {
+  const variants = pick(props, ...buttonRecipe.variants());
+  const button = buttonRecipe(variants);
+  const Comp = asChild ? import_react_slot2.Slot : defaultElement2;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    Comp,
+    {
+      ...props,
+      className: mergeClasses(button, props.className),
+      disabled: props.disabled || Boolean(variants.loading),
+      children: [
+        props.children,
+        variants.loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { style: { position: "absolute" } })
+      ]
+    }
+  );
+};
+
+// src/theme/recipes/text.css.ts
+var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
+var textRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "text_textRecipe__1y7s4vx0", variantClassNames: { color: { primary: "text_textRecipe_color_primary__1y7s4vx1", secondary: "text_textRecipe_color_secondary__1y7s4vx2", error: "text_textRecipe_color_error__1y7s4vx3", subtle: "text_textRecipe_color_subtle__1y7s4vx4" }, size: { "1": "text_textRecipe_size_1__1y7s4vx5", "2": "text_textRecipe_size_2__1y7s4vx6", "3": "text_textRecipe_size_3__1y7s4vx7", "4": "text_textRecipe_size_4__1y7s4vx8", "5": "text_textRecipe_size_5__1y7s4vx9", "6": "text_textRecipe_size_6__1y7s4vxa", "7": "text_textRecipe_size_7__1y7s4vxb", "8": "text_textRecipe_size_8__1y7s4vxc", "9": "text_textRecipe_size_9__1y7s4vxd" }, weight: { regular: "text_textRecipe_weight_regular__1y7s4vxe", medium: "text_textRecipe_weight_medium__1y7s4vxf", bold: "text_textRecipe_weight_bold__1y7s4vxg" } }, defaultVariants: { size: "3" }, compoundVariants: [] });
+
+// src/components/heading.tsx
+var import_react_slot3 = require("@radix-ui/react-slot");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var textAs = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+var textSize = {
+  1: "8",
+  2: "7",
+  3: "6",
+  4: "5",
+  5: "4",
+  6: "3"
+};
+var Heading = ({
+  asChild,
+  color,
+  level = "1",
+  weight = "medium",
+  // overrides defaultVariant
+  ...props
+}) => {
+  const text = textRecipe({ color, size: textSize[level], weight });
+  const Comp = asChild ? import_react_slot3.Slot : textAs[level];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Comp, { ...props, className: mergeClasses(text, props.className), children: props.children });
+};
+
+// src/theme/recipes/icon-button.css.ts
+var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
+var iconButtonRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "icon-button_iconButtonRecipe__v93z8s0", variantClassNames: { loading: { true: "icon-button_iconButtonRecipe_loading_true__v93z8s1" }, size: { "1": "icon-button_iconButtonRecipe_size_1__v93z8s2", "2": "icon-button_iconButtonRecipe_size_2__v93z8s3", "3": "icon-button_iconButtonRecipe_size_3__v93z8s4", "4": "icon-button_iconButtonRecipe_size_4__v93z8s5" }, variant: { ghost: "icon-button_iconButtonRecipe_variant_ghost__v93z8s6", outline: "icon-button_iconButtonRecipe_variant_outline__v93z8s7" } }, defaultVariants: { size: "1", variant: "ghost" }, compoundVariants: [] });
+
+// src/components/icon-button.tsx
+var import_react_slot4 = require("@radix-ui/react-slot");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var defaultElement3 = "button";
+var IconButton = ({ asChild, ...props }) => {
+  const variants = pick(props, ...iconButtonRecipe.variants());
+  const iconButton = iconButtonRecipe(variants);
+  const Comp = asChild ? import_react_slot4.Slot : defaultElement3;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    Comp,
+    {
+      ...props,
+      className: mergeClasses(iconButton, props.className),
+      disabled: props.disabled || Boolean(variants.loading),
+      children: [
+        props.children,
+        variants.loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { style: { position: "absolute" } })
+      ]
+    }
+  );
+};
+
+// src/components/text.tsx
+var import_react_slot5 = require("@radix-ui/react-slot");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var defaultElement4 = "span";
+var Text = ({ asChild, ...props }) => {
+  const variants = pick(props, ...textRecipe.variants());
+  const text = textRecipe(variants);
+  const Comp = asChild ? import_react_slot5.Slot : defaultElement4;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Comp, { ...props, className: mergeClasses(text, props.className), children: props.children });
+};
+
+// src/theme/styles/toaster.css.ts
+var checkmark = "toaster_checkmark__3jyebmb";
+var error = "toaster_error__3jyebmc";
+var toastClose = "toaster_toastClose__3jyebm6";
+var toastInner = "toaster_toastInner__3jyebm5";
+var toastRoot = "toaster_toastRoot__3jyebm4";
+var toastViewport = "toaster_toastViewport__3jyebm3";
+
+// src/providers/toaster.tsx
+var import_react_icons = require("@radix-ui/react-icons");
+var ToastPrimitives = __toESM(require("@radix-ui/react-toast"));
+var React2 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var defaultToaster = Object.assign(() => {
+}, {
+  success: () => {
+  },
+  error: () => {
+  }
+});
+var ToasterContext = React2.createContext(defaultToaster);
+var toastElementsMapRef = React2.createRef();
+var defaultToastImpl = {
+  toastElementsMapRef,
+  sortToasts: () => {
+  }
+};
+var ToastContextImpl = React2.createContext(defaultToastImpl);
+var ANIMATION_OUT_DURATION = 350;
+var Toaster = ({
+  children,
+  ...props
+}) => {
+  const [toasts, setToasts] = React2.useState(/* @__PURE__ */ new Map());
+  const toastElementsMapRef2 = React2.useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const viewportRef = React2.useRef(null);
+  const sortToasts = React2.useCallback(() => {
+    const toastElements = Array.from(toastElementsMapRef2.current).reverse();
+    const heights = [];
+    toastElements.forEach(([, toast], index) => {
+      if (!toast) return;
+      const height = toast.clientHeight;
+      heights.push(height);
+      const frontToastHeight = heights[0];
+      toast.setAttribute("data-front", `${index === 0}`);
+      toast.setAttribute("data-hidden", `${index > 2}`);
+      toast.style.setProperty("--index", `${index}`);
+      toast.style.setProperty("--height", `${height}px`);
+      toast.style.setProperty("--front-height", `${frontToastHeight}px`);
+      const hoverOffsetY = heights.slice(0, index).reduce((res, next) => res += next, 0);
+      toast.style.setProperty("--hover-offset-y", `-${hoverOffsetY}px`);
+    });
+  }, []);
+  const handleAddToast = React2.useCallback((toast) => {
+    setToasts((currentToasts) => {
+      const newMap = new Map(currentToasts);
+      newMap.set(String(Date.now()), { ...toast, open: true });
+      return newMap;
+    });
+  }, []);
+  const handleRemoveToast = React2.useCallback((key) => {
+    setToasts((currentToasts) => {
+      const newMap = new Map(currentToasts);
+      newMap.delete(key);
+      return newMap;
+    });
+  }, []);
+  const handleDispatchDefault = React2.useCallback(
+    (payload) => handleAddToast({ ...payload, status: "default" }),
+    [handleAddToast]
+  );
+  const handleDispatchSuccess = React2.useCallback(
+    (payload) => handleAddToast({ ...payload, status: "success" }),
+    [handleAddToast]
+  );
+  const handleDispatchError = React2.useCallback(
+    (payload) => handleAddToast({ ...payload, status: "error" }),
+    [handleAddToast]
+  );
+  React2.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport) {
+      const handleFocus = () => {
+        toastElementsMapRef2.current.forEach((toast) => {
+          toast.setAttribute("data-hovering", "true");
+        });
+      };
+      const handleBlur = (event) => {
+        if (!viewport.contains(event.target) || viewport === event.target) {
+          toastElementsMapRef2.current.forEach((toast) => {
+            toast.setAttribute("data-hovering", "false");
+          });
+        }
+      };
+      viewport.addEventListener("pointermove", handleFocus);
+      viewport.addEventListener("pointerleave", handleBlur);
+      viewport.addEventListener("focusin", handleFocus);
+      viewport.addEventListener("focusout", handleBlur);
+      return () => {
+        viewport.removeEventListener("pointermove", handleFocus);
+        viewport.removeEventListener("pointerleave", handleBlur);
+        viewport.removeEventListener("focusin", handleFocus);
+        viewport.removeEventListener("focusout", handleBlur);
+      };
+    }
+  }, []);
+  const toastApi = React2.useMemo(
+    () => Object.assign(handleDispatchDefault, {
+      success: handleDispatchSuccess,
+      error: handleDispatchError
+    }),
+    [handleDispatchDefault, handleDispatchSuccess, handleDispatchError]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToasterContext.Provider, { value: toastApi, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ToastContextImpl.Provider,
+    {
+      value: React2.useMemo(
+        () => ({
+          toastElementsMapRef: toastElementsMapRef2,
+          sortToasts
+        }),
+        [sortToasts]
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ToastPrimitives.Provider, { ...props, children: [
+        children,
+        Array.from(toasts).map(([key, toast]) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Toast,
+          {
+            id: key,
+            toast,
+            onOpenChange: (open) => {
+              if (!open) {
+                toastElementsMapRef2.current.delete(key);
+                sortToasts();
+                if (!open) {
+                  setTimeout(() => {
+                    handleRemoveToast(key);
+                  }, ANIMATION_OUT_DURATION);
+                }
+              }
+            }
+          },
+          key
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ToastPrimitives.Viewport,
+          {
+            ref: viewportRef,
+            className: toastViewport
+          }
+        )
+      ] })
+    }
+  ) });
+};
+var Toast = (props) => {
+  const { onOpenChange, toast, id, ...toastProps } = props;
+  const ref = React2.useRef(null);
+  const context = React2.useContext(ToastContextImpl);
+  const { sortToasts, toastElementsMapRef: toastElementsMapRef2 } = context;
+  const toastElementsMap = toastElementsMapRef2.current;
+  React2.useLayoutEffect(() => {
+    if (ref.current) {
+      toastElementsMap == null ? void 0 : toastElementsMap.set(id, ref.current);
+      sortToasts();
+    }
+  }, [id, sortToasts, toastElementsMap]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ToastPrimitives.Root,
+    {
+      ...toastProps,
+      ref,
+      type: toast.type,
+      duration: toast.duration,
+      className: toastRoot,
+      onOpenChange,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: toastInner, "data-status": toast.status, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastStatusIcon, { status: toast.status }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastPrimitives.Title, { asChild: true, style: { gridArea: "title" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Heading, { level: "6", children: toast.title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ToastPrimitives.Description,
+          {
+            asChild: true,
+            style: { gridArea: "description" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color: "subtle", size: "2", children: toast.description })
+          }
+        ),
+        toast.action,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ToastPrimitives.Close,
+          {
+            "aria-label": "Close",
+            asChild: true,
+            className: toastClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton, { variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons.Cross2Icon, {}) })
+          }
+        )
+      ] })
+    }
+  );
+};
+var ToastStatusIcon = ({ status }) => {
+  return status !== "default" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { gridArea: "icon", alignSelf: "start" }, children: [
+    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckmarkIcon, {}),
+    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorIcon, {})
+  ] }) : null;
+};
+var ErrorIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "aria-hidden": true, className: error });
+var CheckmarkIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { "aria-hidden": true, className: checkmark });
+var ToastAction = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ToastPrimitives.Action,
+    {
+      ...props,
+      style: { gridArea: "action", ...props.style },
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "1", variant: "outline", children: props.children })
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeContext,
-  ThemeProvider
+  ThemeProvider,
+  ToastAction,
+  Toaster,
+  ToasterContext
 });
 //# sourceMappingURL=index.js.map