pentatrion-design 1.0.7 → 1.1.0

package/.local/redux/notification/NotificationConsumer.tsx

@@ -0,0 +1,59 @@
+import { ReactNode, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { messageRemoved, selectMessages } from ".";
+import { nanoid } from "@reduxjs/toolkit";
+import { Snack } from "../../components/snack";
+import { Message } from "../../types";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function NotificationConsumer({ children }: Props) {
+  const container = useRef<HTMLDivElement>(null!);
+  if (!container.current) {
+    container.current = document.createElement("div");
+    container.current.id = nanoid();
+    container.current.classList.add(
+      "fixed",
+      "bottom-0",
+      "left-0",
+      "right-0",
+      "z-toast",
+      "pointer-events-none",
+    );
+    document.body.append(container.current);
+  }
+
+  if (!container.current.parentElement) {
+    console.log("NotificationConsumer n'a pas de parent !!", container);
+    document.body.append(container.current);
+  }
+
+  useEffect(() => {
+    return () => {
+      container.current && container.current.remove();
+    };
+  }, []);
+
+  const messages = useSelector(selectMessages) as Message[];
+  const dispatch = useDispatch();
+  return (
+    <>
+      {children}
+      {createPortal(
+        <div className="mb-4 flex flex-col items-center gap-4">
+          {messages.map((message) => (
+            <Snack
+              key={message.id}
+              {...message}
+              onRemove={() => dispatch(messageRemoved(message.id))}
+            />
+          ))}
+        </div>,
+        container.current,
+      )}
+    </>
+  );
+}

package/.local/redux/notification/errorCatcherMiddleware.ts

@@ -0,0 +1,37 @@
+import { messageAdded } from "./notificationSlice";
+import { parseError } from "../../lib";
+
+export const errorCatcherMiddleware: any =
+  ({ dispatch }: { dispatch: any }) =>
+  (next: any) =>
+  async (action: any) => {
+    if (typeof action !== "function" && (action as any).type.endsWith("/rejected")) {
+      const errorMessage = parseError((action as any).error || {});
+      if (errorMessage) {
+        dispatch(messageAdded(...errorMessage));
+      }
+    }
+
+    return next(action);
+  };
+
+/*
+import { Action, Middleware } from "@reduxjs/toolkit";
+import { messageAdded } from "./notificationSlice";
+import { parseError } from "../../lib";
+
+export const errorCatcherMiddleware: Middleware =
+  ({ dispatch }) =>
+  (next) =>
+  async (action) => {
+    if (typeof action !== "function" && (action as Action).type.endsWith("/rejected")) {
+      const errorMessage = parseError((action as any).error || {});
+      if (errorMessage) {
+        dispatch(messageAdded(...errorMessage));
+      }
+    }
+
+    return next(action);
+  };
+
+*/

package/.local/redux/notification/index.ts

@@ -0,0 +1,5 @@
+export * from "./notificationSlice";
+export { default as notificationSlice } from "./notificationSlice";
+export * from "./errorCatcherMiddleware";
+export { NotificationConsumer } from "./NotificationConsumer";
+export { useReduxNotifications } from "./useReduxNotifications";

package/.local/redux/notification/notificationSlice.ts

@@ -0,0 +1,68 @@
+import { createSlice, nanoid, PayloadAction } from "@reduxjs/toolkit";
+import { parseError } from "../../lib";
+import { Message, MessageOptions } from "../../types";
+
+type NotificationState = {
+  messages: Message[];
+};
+
+const initialState: NotificationState = {
+  messages: [],
+};
+
+const notificationSlice = createSlice({
+  name: "notification",
+  initialState,
+  reducers: {
+    errorAdded: {
+      reducer(state, action: PayloadAction<Message>) {
+        state.messages.push(action.payload);
+      },
+      prepare(err: any) {
+        const errorMessage = parseError(err);
+        if (errorMessage) {
+          const [content, options] = errorMessage;
+          const {
+            expiration = 5000,
+            color = "red",
+            canClose = true,
+            withLoader = false,
+          } = options || {};
+          const id = nanoid();
+          return {
+            payload: { id, content, expiration, color, canClose, withLoader },
+          };
+        } else {
+          throw err;
+        }
+      },
+    },
+    messageAdded: {
+      reducer(state, action: PayloadAction<Message>) {
+        state.messages.push(action.payload);
+      },
+      prepare(content: string, options?: MessageOptions) {
+        const {
+          expiration = 5000,
+          color = "yellow",
+          canClose = true,
+          withLoader = false,
+        } = options || {};
+        const id = nanoid();
+        return {
+          payload: { id, content, expiration, color, canClose, withLoader },
+        };
+      },
+    },
+    messageRemoved(state, action: PayloadAction<string>) {
+      const messageId = action.payload;
+      state.messages = state.messages.filter((m) => m.id !== messageId);
+    },
+  },
+});
+
+export default notificationSlice.reducer;
+
+export const { messageAdded, messageRemoved, errorAdded } = notificationSlice.actions;
+
+export const selectMessages: (state: any) => Message[] = (state) => state.notification.messages;

package/.local/redux/notification/useReduxNotifications.ts

@@ -0,0 +1,26 @@
+import { parseError } from "../../lib";
+import { MessageOptions } from "../../types";
+
+import { messageAdded } from "./notificationSlice";
+import { useDispatch } from "react-redux";
+
+export function useReduxNotifications() {
+  const dispatch = useDispatch();
+
+  const notify = (content: string, options?: MessageOptions) => {
+    dispatch(messageAdded(content, options));
+  };
+
+  const notifyError = (err: unknown) => {
+    const errorMessage = parseError(err);
+    if (errorMessage) {
+      dispatch(messageAdded(...errorMessage));
+    } else {
+      throw err;
+    }
+  };
+  return {
+    notify,
+    notifyError,
+  };
+}

package/bin/change-version-and-publish.sh

@@ -28,7 +28,7 @@ VERSION=$(npm --no-git-tag-version --allow-same-version version $VERSION_TYPE)
 VERSION=${VERSION:1}
 
 
-pnpm build-for-publication
+pnpm build
 
 git add .
 git commit -m "change pentatrion-design version v$VERSION"

package/dist/Button-Ca-LAzc1.js

@@ -0,0 +1,97 @@
+import { useRipple } from "./hooks-BXFCstNe.js";
+import { Loader } from "./loader-BNwcG8vD.js";
+import { Slot } from "./slot-BKBQMX3X.js";
+import { useImperativeHandle, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { cva } from "class-variance-authority";
+
+//#region src/components/button/Button.tsx
+function loaderColor(color) {
+	switch (color) {
+		case "yellow-alpha": return "yellow";
+		case "gray-alpha": return "gray";
+		default: return color;
+	}
+}
+const buttonVariants = cva("relative box-border inline-flex items-center leading-5 no-underline focus-visible-has:outline-2", {
+	variants: {
+		clickable: {
+			true: "cursor-pointer active:translate-y-[1px] focus-visible-has:z-10",
+			false: "pointer-events-none"
+		},
+		size: {
+			small: "[--h-button:1.5rem] h-(--h-button) truncate",
+			medium: "[--h-button:2rem] h-(--h-button) truncate",
+			large: "[--h-button:3rem] h-(--h-button) truncate",
+			input: "[--h-button:calc(var(--h-input)-2px)] h-(--h-button) truncate",
+			custom: "truncate",
+			scalable: ""
+		},
+		icon: {
+			true: "rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg,strong)]:pr-4",
+			false: "rounded-2xl px-4",
+			custom: ""
+		},
+		width: {
+			fit: "w-full max-w-fit",
+			full: "w-full justify-center",
+			custom: ""
+		},
+		variant: {
+			contained: "shadow-sm hover:shadow-md active:shadow-md-active outline-offset-0 text-custom-text bg-custom-3 hover:bg-custom-4 current:bg-custom-4  focus-visible-has:outline-custom-5",
+			light: "shadow-sm hover:shadow-md has-checked:shadow-md focus:shadow-md active:shadow-md-active outline-offset-0 bg-custom-1 text-gray-text hover:text-custom-text hover:bg-custom-3 current:bg-custom-3 focus-visible-has:outline-custom-4",
+			outlined: "bg-custom-0 hover:shadow-xs active:shadow-xs-active text-gray-7 outline-offset-0 border-1 hover:bg-custom-1 border-custom-3 focus-visible-has:outline-custom-5 current:bg-custom-3 focus-visible-has:border-transparent",
+			text: "bg-transparent hover:shadow-xs active:shadow-xs-active outline-offset-0 hover:bg-custom-1 dark:hover:bg-custom-1/50 text-gray-7 hover:text-gray-8 current:bg-custom-3 focus-visible-has:outline-custom-5",
+			ghost: "outline-offset-0  current:bg-custom-1 focus-visible-has:outline-custom-5"
+		}
+	},
+	defaultVariants: {
+		size: "medium",
+		icon: false,
+		variant: "contained",
+		clickable: true,
+		width: "fit"
+	}
+});
+function Button({ withRipple = true, variant = "contained", loading = false, color = "yellow", size = "medium", focusable = true, className, disabled = false, children, selected = false, icon = false, asChild = false, width = "fit", ref,...props }) {
+	const inputRef = useRef(null);
+	useImperativeHandle(ref, () => inputRef.current);
+	const notClickable = loading || disabled;
+	const ripples = useRipple(inputRef, [
+		"text",
+		"outlined",
+		"ghost"
+	].includes(variant) ? true : false);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		tabIndex: focusable ? 0 : -1,
+		role: "button",
+		ref: inputRef,
+		className: clsx(buttonVariants({
+			variant,
+			size,
+			width,
+			icon: width === "custom" && !icon ? "custom" : icon
+		}), className, loading && !icon && "text-transparent"),
+		"data-color": color,
+		"data-variant": variant,
+		"aria-checked": selected,
+		disabled: typeof disabled === "boolean" ? disabled : void 0,
+		suppressHydrationWarning: true,
+		"aria-busy": loading,
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			!notClickable && withRipple && ripples,
+			children,
+			loading && /* @__PURE__ */ jsx(Loader, {
+				color: loaderColor(color),
+				className: clsx("top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"),
+				position: "absolute"
+			})
+		] })
+	});
+}
+
+//#endregion
+export { Button, buttonVariants };
+//# sourceMappingURL=Button-Ca-LAzc1.js.map

package/dist/Button-Ca-LAzc1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-Ca-LAzc1.js","names":[],"sources":["../src/components/button/Button.tsx"],"sourcesContent":["import { ComponentProps, RefObject, useImperativeHandle, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Loader } from \"../loader\";\nimport { useRipple } from \"../../hooks\";\nimport { Slot } from \"../slot\";\nimport { cva } from \"class-variance-authority\";\nimport { ThemeColor } from \"../../types\";\n\nfunction loaderColor(color: ThemeColor | \"yellow-alpha\" | \"gray-alpha\"): ThemeColor {\n  switch (color) {\n    case \"yellow-alpha\":\n      return \"yellow\";\n    case \"gray-alpha\":\n      return \"gray\";\n    default:\n      return color;\n  }\n}\n\nexport interface ButtonProps extends Omit<ComponentProps<\"button\">, \"color\"> {\n  withRipple?: boolean;\n\n  variant?: \"contained\" | \"light\" | \"outlined\" | \"text\" | \"ghost\";\n\n  size?: \"small\" | \"medium\" | \"large\" | \"custom\" | \"input\" | \"scalable\";\n\n  color?: ThemeColor | \"yellow-alpha\" | \"gray-alpha\";\n\n  width?: \"fit\" | \"full\" | \"custom\";\n\n  loading?: boolean;\n\n  disabled?: boolean;\n\n  focusable?: boolean;\n  /**\n   * For a selected item inside a group.\n   */\n  selected?: boolean;\n\n  icon?: boolean;\n\n  asChild?: boolean;\n\n  ref?: RefObject<HTMLButtonElement>;\n}\n\nexport const buttonVariants = cva(\n  \"relative box-border inline-flex items-center leading-5 no-underline focus-visible-has:outline-2\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer active:translate-y-[1px] focus-visible-has:z-10\",\n        false: \"pointer-events-none\",\n      },\n      size: {\n        small: \"[--h-button:1.5rem] h-(--h-button) truncate\",\n        medium: \"[--h-button:2rem] h-(--h-button) truncate\",\n        large: \"[--h-button:3rem] h-(--h-button) truncate\",\n        input: \"[--h-button:calc(var(--h-input)-2px)] h-(--h-button) truncate\",\n        custom: \"truncate\",\n        scalable: \"\",\n      },\n      icon: {\n        true: \"rounded-[calc(var(--h-button)/2)] min-w-(--h-button) [&_i,&_img,&_svg]:w-(--h-button) justify-center [&_:last-child:not(i,img,svg,strong)]:pr-4\",\n        false: \"rounded-2xl px-4\",\n        custom: \"\",\n      },\n      width: {\n        fit: \"w-full max-w-fit\",\n        full: \"w-full justify-center\",\n        custom: \"\",\n      },\n      variant: {\n        /**\n         * src/tailwind/plugin.ts\n         *   addVariant(\"current\", [\n         *    `&[aria-checked=\"true\"]`,\n         *    `&[aria-current=\"page\"]`,\n         *    `&:has(:checked)`\n         *   ])\n         */\n        contained:\n          \"shadow-sm hover:shadow-md active:shadow-md-active outline-offset-0 text-custom-text bg-custom-3 hover:bg-custom-4 current:bg-custom-4  focus-visible-has:outline-custom-5\",\n        light:\n          \"shadow-sm hover:shadow-md has-checked:shadow-md focus:shadow-md active:shadow-md-active outline-offset-0 bg-custom-1 text-gray-text hover:text-custom-text hover:bg-custom-3 current:bg-custom-3 focus-visible-has:outline-custom-4\",\n        outlined:\n          \"bg-custom-0 hover:shadow-xs active:shadow-xs-active text-gray-7 outline-offset-0 border-1 hover:bg-custom-1 border-custom-3 focus-visible-has:outline-custom-5 current:bg-custom-3 focus-visible-has:border-transparent\",\n        text: \"bg-transparent hover:shadow-xs active:shadow-xs-active outline-offset-0 hover:bg-custom-1 dark:hover:bg-custom-1/50 text-gray-7 hover:text-gray-8 current:bg-custom-3 focus-visible-has:outline-custom-5\",\n        ghost: \"outline-offset-0  current:bg-custom-1 focus-visible-has:outline-custom-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"medium\",\n      icon: false,\n      variant: \"contained\",\n      clickable: true,\n      width: \"fit\",\n    },\n  },\n);\n\nexport function Button({\n  withRipple = true,\n  variant = \"contained\",\n  loading = false,\n  color = \"yellow\",\n  size = \"medium\",\n  focusable = true,\n  className,\n  disabled = false,\n  children,\n  selected = false,\n  icon = false,\n  asChild = false,\n  width = \"fit\",\n  ref,\n  ...props\n}: ButtonProps) {\n  const inputRef = useRef<HTMLButtonElement>(null!);\n\n  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n    ref,\n    () => inputRef.current,\n  );\n\n  const notClickable = loading || disabled;\n\n  const ripples = useRipple(\n    inputRef,\n    [\"text\", \"outlined\", \"ghost\"].includes(variant) ? true : false,\n  );\n\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      tabIndex={focusable ? 0 : -1}\n      role=\"button\"\n      ref={inputRef}\n      className={clsx(\n        buttonVariants({\n          variant,\n          size,\n          width,\n          icon: width === \"custom\" && !icon ? \"custom\" : icon,\n        }),\n        className,\n        loading && !icon && \"text-transparent\",\n      )}\n      data-color={color}\n      data-variant={variant}\n      aria-checked={selected}\n      disabled={typeof disabled === \"boolean\" ? disabled : undefined}\n      suppressHydrationWarning\n      aria-busy={loading}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {!notClickable && withRipple && ripples}\n          {children}\n          {loading && (\n            <Loader\n              color={loaderColor(color)}\n              className={clsx(\"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\")}\n              position=\"absolute\"\n            />\n          )}\n        </>\n      )}\n    </Comp>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,SAAS,YAAY,OAA+D;AAClF,SAAQ,OAAR;EACE,KAAK,eACH,QAAO;EACT,KAAK,aACH,QAAO;EACT,QACE,QAAO;;;AAgCb,MAAa,iBAAiB,IAC5B,mGACA;CACE,UAAU;EACR,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACD,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;GACP,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,MAAM;GACJ,MAAM;GACN,OAAO;GACP,QAAQ;GACT;EACD,OAAO;GACL,KAAK;GACL,MAAM;GACN,QAAQ;GACT;EACD,SAAS;GASP,WACE;GACF,OACE;GACF,UACE;GACF,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,SAAS;EACT,WAAW;EACX,OAAO;EACR;CACF,CACF;AAED,SAAgB,OAAO,EACrB,aAAa,MACb,UAAU,aACV,UAAU,OACV,QAAQ,UACR,OAAO,UACP,YAAY,MACZ,WACA,WAAW,OACX,UACA,WAAW,OACX,OAAO,OACP,UAAU,OACV,QAAQ,OACR,IACA,GAAG,SACW;CACd,MAAM,WAAW,OAA0B,KAAM;AAEjD,qBACE,WACM,SAAS,QAChB;CAED,MAAM,eAAe,WAAW;CAEhC,MAAM,UAAU,UACd,UACA;EAAC;EAAQ;EAAY;EAAQ,CAAC,SAAS,QAAQ,GAAG,OAAO,MAC1D;AAID,QACE,oBAHW,UAAU,OAAO;EAI1B,UAAU,YAAY,IAAI;EAC1B,MAAK;EACL,KAAK;EACL,WAAW,KACT,eAAe;GACb;GACA;GACA;GACA,MAAM,UAAU,YAAY,CAAC,OAAO,WAAW;GAChD,CAAC,EACF,WACA,WAAW,CAAC,QAAQ,mBACrB;EACD,cAAY;EACZ,gBAAc;EACd,gBAAc;EACd,UAAU,OAAO,aAAa,YAAY,WAAW;EACrD;EACA,aAAW;EACX,GAAI;YAEH,UACC,WAEA;GACG,CAAC,gBAAgB,cAAc;GAC/B;GACA,WACC,oBAAC;IACC,OAAO,YAAY,MAAM;IACzB,WAAW,KAAK,qDAAqD;IACrE,UAAS;KACT;MAEH;GAEA"}

package/dist/Button-DIrNK1iO.d.ts

@@ -0,0 +1,50 @@
+import { ThemeColor } from "./types-y6aQKsms.js";
+import { ComponentProps, RefObject } from "react";
+import * as react_jsx_runtime67 from "react/jsx-runtime";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/button/Button.d.ts
+interface ButtonProps extends Omit<ComponentProps<"button">, "color"> {
+  withRipple?: boolean;
+  variant?: "contained" | "light" | "outlined" | "text" | "ghost";
+  size?: "small" | "medium" | "large" | "custom" | "input" | "scalable";
+  color?: ThemeColor | "yellow-alpha" | "gray-alpha";
+  width?: "fit" | "full" | "custom";
+  loading?: boolean;
+  disabled?: boolean;
+  focusable?: boolean;
+  /**
+   * For a selected item inside a group.
+   */
+  selected?: boolean;
+  icon?: boolean;
+  asChild?: boolean;
+  ref?: RefObject<HTMLButtonElement>;
+}
+declare const buttonVariants: (props?: ({
+  clickable?: boolean | null | undefined;
+  size?: "input" | "small" | "medium" | "large" | "custom" | "scalable" | null | undefined;
+  icon?: boolean | "custom" | null | undefined;
+  width?: "custom" | "fit" | "full" | null | undefined;
+  variant?: "text" | "contained" | "light" | "outlined" | "ghost" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function Button({
+  withRipple,
+  variant,
+  loading,
+  color,
+  size,
+  focusable,
+  className,
+  disabled,
+  children,
+  selected,
+  icon,
+  asChild,
+  width,
+  ref,
+  ...props
+}: ButtonProps): react_jsx_runtime67.JSX.Element;
+//#endregion
+export { Button, ButtonProps, buttonVariants };
+//# sourceMappingURL=Button-DIrNK1iO.d.ts.map

package/dist/Button-DIrNK1iO.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-DIrNK1iO.d.ts","names":[],"sources":["../src/components/button/Button.tsx"],"sourcesContent":[],"mappings":";;;;;;UAmBiB,WAAA,SAAoB,KAAK;;;;EAAzB,KAAA,CAAA,EAOP,UAPmB,GAAA,cAAA,GAAA,YAAA;EAAA,KAAA,CAAA,EAAA,KAAA,GAAA,MAAA,GAAA,QAAA;SAAa,CAAA,EAAA,OAAA;UAOhC,CAAA,EAAA,OAAA;WAkBQ,CAAA,EAAA,OAAA;;;;EAGL,QAAA,CAAA,EAAA,OAqDZ;EAEe,IAAA,CAAA,EAAA,OAAM;EAAA,OAAA,CAAA,EAAA,OAAA;KACpB,CAAA,EA3DM,SA2DN,CA3DgB,iBA2DhB,CAAA;;AAEA,cA1DW,cA0DX,EAAA,CAAA,KAMA,CANA,EAAA,CAAA;WACA,CAAA,EAAA,OAAA,GAAA,IAAA,GAAA,SAAA;MACA,CAAA,EAAA,OAAA,GAAA,OAAA,GAAA,QAAA,GAAA,OAAA,GAAA,QAAA,GAAA,UAAA,GAAA,IAAA,GAAA,SAAA;MACA,CAAA,EAAA,OAAA,GAAA,QAAA,GAAA,IAAA,GAAA,SAAA;OACA,CAAA,EAAA,QAAA,GAAA,KAAA,GAAA,MAAA,GAAA,IAAA,GAAA,SAAA;SACA,CAAA,EAAA,MAAA,GAAA,WAAA,GAAA,OAAA,GAAA,UAAA,GAAA,OAAA,GAAA,IAAA,GAAA,SAAA;IAVD,+BAAA,CAAA,SAWC,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;AACA,iBAVc,MAAA,CAUd;EAAA,UAAA;EAAA,OAAA;EAAA,OAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,SAAA;EAAA,QAAA;EAAA,QAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,KAAA;EAAA,GAAA;EAAA,GAAA;AAAA,CAAA,EAMC,WAND,CAAA,EAMY,mBAAA,CAAA,GAAA,CAAA,OANZ"}

package/dist/Dialog-CuzZERVL.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { cva } from "class-variance-authority";
+
+//#region src/components/dialog/Dialog.tsx
+const dialogVariants = cva("relative", {
+	variants: {
+		color: {
+			yellow: "border-t-4 border-t-yellow-3 bg-gray-0",
+			gray: "border-t-4 border-t-gray-3 bg-gray-0",
+			red: "border-t-4 border-t-red-3 bg-red-1",
+			blue: "border-t-4 border-t-blue-3 bg-blue-1",
+			green: "border-t-4 border-t-green-3 bg-green-1",
+			orange: "border-t-4 border-t-orange-3 bg-orange-1",
+			default: "bg-gray-0"
+		},
+		shadow: {
+			true: "shadow-sm dark:shadow-dark",
+			false: "border border-gray-2"
+		},
+		rounded: {
+			true: "rounded-2xl",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		shadow: true,
+		rounded: true
+	}
+});
+function Dialog({ placement, color, rounded, shadow, children, className, role = "dialog",...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		role,
+		className: clsx(dialogVariants({
+			color,
+			rounded,
+			shadow
+		}), className),
+		"data-placement": placement,
+		"data-color": color ?? "gray",
+		...rest,
+		children
+	});
+}
+
+//#endregion
+export { Dialog, dialogVariants };
+//# sourceMappingURL=Dialog-CuzZERVL.js.map

package/dist/Dialog-CuzZERVL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog-CuzZERVL.js","names":[],"sources":["../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Placement } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { ComponentProps, ReactNode } from \"react\";\nimport type { ThemeColor } from \"../../types\";\nimport { cva } from \"class-variance-authority\";\n\ninterface Props extends ComponentProps<\"div\"> {\n  color?: ThemeColor;\n  shadow?: boolean;\n  rounded?: boolean;\n  placement?: Placement;\n  children: ReactNode;\n}\n\nexport const dialogVariants = cva(\"relative\", {\n  variants: {\n    color: {\n      yellow: \"border-t-4 border-t-yellow-3 bg-gray-0\",\n      gray: \"border-t-4 border-t-gray-3 bg-gray-0\",\n      red: \"border-t-4 border-t-red-3 bg-red-1\",\n      blue: \"border-t-4 border-t-blue-3 bg-blue-1\",\n      green: \"border-t-4 border-t-green-3 bg-green-1\",\n      orange: \"border-t-4 border-t-orange-3 bg-orange-1\",\n      default: \"bg-gray-0\",\n    },\n    shadow: {\n      true: \"shadow-sm dark:shadow-dark\",\n      false: \"border border-gray-2\",\n    },\n    rounded: {\n      true: \"rounded-2xl\",\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    color: \"default\",\n    shadow: true,\n    rounded: true,\n  },\n});\n\nexport function Dialog({\n  placement,\n  color,\n  rounded,\n  shadow,\n  children,\n  className,\n  role = \"dialog\",\n  ...rest\n}: Props) {\n  return (\n    <div\n      role={role}\n      className={clsx(dialogVariants({ color, rounded, shadow }), className)}\n      data-placement={placement}\n      data-color={color ?? \"gray\"}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAcA,MAAa,iBAAiB,IAAI,YAAY;CAC5C,UAAU;EACR,OAAO;GACL,QAAQ;GACR,MAAM;GACN,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAS;GACV;EACD,QAAQ;GACN,MAAM;GACN,OAAO;GACR;EACD,SAAS;GACP,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CACF,CAAC;AAEF,SAAgB,OAAO,EACrB,WACA,OACA,SACA,QACA,UACA,WACA,OAAO,SACP,GAAG,QACK;AACR,QACE,oBAAC;EACO;EACN,WAAW,KAAK,eAAe;GAAE;GAAO;GAAS;GAAQ,CAAC,EAAE,UAAU;EACtE,kBAAgB;EAChB,cAAY,SAAS;EACrB,GAAI;EAEH;GACG"}

package/dist/Input-B6uoujyk.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+
+//#region src/components/input/Input.tsx
+const sizeVariant = {
+	small: "[--h-input:24px] h-(--h-input)",
+	medium: "[--h-input:32px] h-(--h-input)",
+	large: "[--h-input:48px] h-(--h-input)",
+	custom: ""
+};
+const inputConfig = {
+	container: "p8n-input-text rounded-full flex box-border",
+	input: "h-full flex-1 appearance-none outline-hidden filter-none min-w-0 bg-transparent",
+	icon: "[--h-icon:calc(var(--h-input)-2px)] h-(--h-icon) w-(--h-icon) inline-flex-center"
+};
+function Input({ variant = "normal", color = "yellow", disabled = false, prefix, suffix, className, inputClassName, readOnly, size = "medium", flexibleWidth = true, type, children, ref,...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-disabled": disabled,
+		"aria-readonly": readOnly,
+		"data-color": color,
+		"data-variant": variant,
+		className: clsx(inputConfig.container, sizeVariant[size], className),
+		children: [
+			prefix && /* @__PURE__ */ jsx("div", {
+				className: clsx(["flex-center relative", typeof prefix === "string" && "text-gray-6 mx-2 select-none"]),
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type,
+				ref,
+				className: clsx(inputConfig.input, size !== "custom" && !prefix && "pl-4", size !== "custom" && type !== "date" && type !== "datetime-local" ? !suffix && "pr-4" : "pr-1", flexibleWidth && "w-0", inputClassName),
+				disabled,
+				readOnly,
+				onClick: (e) => {
+					if (readOnly) e.target?.select();
+				},
+				...rest
+			}),
+			suffix && /* @__PURE__ */ jsx("div", {
+				className: clsx(["flex-center relative", typeof suffix === "string" && "text-gray-6 mx-2 select-none"]),
+				children: suffix
+			}),
+			children
+		]
+	});
+}
+
+//#endregion
+export { Input, inputConfig, sizeVariant };
+//# sourceMappingURL=Input-B6uoujyk.js.map

package/dist/Input-B6uoujyk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-B6uoujyk.js","names":[],"sources":["../src/components/input/Input.tsx"],"sourcesContent":["import { ComponentPropsWithRef, ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport type { ThemeColor } from \"../../types\";\n\nexport interface InputProps extends Omit<ComponentPropsWithRef<\"input\">, \"prefix\" | \"size\"> {\n  variant?: \"normal\" | \"ghost\";\n  disabled?: boolean;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  color?: ThemeColor;\n  size?: \"small\" | \"medium\" | \"large\" | \"custom\";\n  flexibleWidth?: boolean;\n  children?: ReactNode;\n  inputClassName?: string;\n}\n\nexport const sizeVariant = {\n  small: \"[--h-input:24px] h-(--h-input)\",\n  medium: \"[--h-input:32px] h-(--h-input)\",\n  large: \"[--h-input:48px] h-(--h-input)\",\n  custom: \"\",\n};\n\nexport const inputConfig = {\n  container: \"p8n-input-text rounded-full flex box-border\",\n  input: \"h-full flex-1 appearance-none outline-hidden filter-none min-w-0 bg-transparent\",\n  icon: \"[--h-icon:calc(var(--h-input)-2px)] h-(--h-icon) w-(--h-icon) inline-flex-center\",\n};\n\nexport function Input({\n  variant = \"normal\",\n  color = \"yellow\",\n  disabled = false,\n  prefix,\n  suffix,\n  className,\n  inputClassName,\n  readOnly,\n  size = \"medium\",\n  flexibleWidth = true,\n  type,\n  children,\n  ref,\n  ...rest\n}: InputProps) {\n  return (\n    <div\n      aria-disabled={disabled}\n      aria-readonly={readOnly}\n      data-color={color}\n      data-variant={variant}\n      className={clsx(inputConfig.container, sizeVariant[size], className)}\n    >\n      {prefix && (\n        <div\n          className={clsx([\n            \"flex-center relative\",\n            typeof prefix === \"string\" && \"text-gray-6 mx-2 select-none\",\n          ])}\n        >\n          {prefix}\n        </div>\n      )}\n      <input\n        type={type}\n        ref={ref}\n        className={clsx(\n          inputConfig.input,\n          size !== \"custom\" && !prefix && \"pl-4\",\n          size !== \"custom\" && type !== \"date\" && type !== \"datetime-local\"\n            ? !suffix && \"pr-4\"\n            : \"pr-1\",\n          flexibleWidth && \"w-0\",\n          inputClassName,\n        )}\n        disabled={disabled}\n        readOnly={readOnly}\n        onClick={(e) => {\n          if (readOnly) {\n            (e.target as HTMLInputElement)?.select();\n          }\n        }}\n        {...rest}\n      />\n      {suffix && (\n        <div\n          className={clsx([\n            \"flex-center relative\",\n            typeof suffix === \"string\" && \"text-gray-6 mx-2 select-none\",\n          ])}\n        >\n          {suffix}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAgBA,MAAa,cAAc;CACzB,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACT;AAED,MAAa,cAAc;CACzB,WAAW;CACX,OAAO;CACP,MAAM;CACP;AAED,SAAgB,MAAM,EACpB,UAAU,UACV,QAAQ,UACR,WAAW,OACX,QACA,QACA,WACA,gBACA,UACA,OAAO,UACP,gBAAgB,MAChB,MACA,UACA,IACA,GAAG,QACU;AACb,QACE,qBAAC;EACC,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,gBAAc;EACd,WAAW,KAAK,YAAY,WAAW,YAAY,OAAO,UAAU;;GAEnE,UACC,oBAAC;IACC,WAAW,KAAK,CACd,wBACA,OAAO,WAAW,YAAY,+BAC/B,CAAC;cAED;KACG;GAER,oBAAC;IACO;IACD;IACL,WAAW,KACT,YAAY,OACZ,SAAS,YAAY,CAAC,UAAU,QAChC,SAAS,YAAY,SAAS,UAAU,SAAS,mBAC7C,CAAC,UAAU,SACX,QACJ,iBAAiB,OACjB,eACD;IACS;IACA;IACV,UAAU,MAAM;AACd,SAAI,SACF,CAAC,EAAE,QAA6B,QAAQ;;IAG5C,GAAI;KACJ;GACD,UACC,oBAAC;IACC,WAAW,KAAK,CACd,wBACA,OAAO,WAAW,YAAY,+BAC/B,CAAC;cAED;KACG;GAEP;;GACG"}

package/dist/Scroll-DFjbX09-.js

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+
+//#region src/components/scroll/Scroll.tsx
+const TOLERANCE = 5;
+const scrollVariants = {
+	vertical: {
+		inner: "overflow-y-auto h-full",
+		shadow: "h-1 left-0 right-0",
+		shadowStart: "top-0 bg-linear-to-b from-gray-8/10",
+		shadowEnd: "bottom-0 bg-linear-to-t from-gray-8/10",
+		child: ""
+	},
+	horizontal: {
+		inner: "overflow-x-auto",
+		shadow: "w-1 top-0 bottom-0",
+		shadowStart: "left-0 bg-linear-to-r from-gray-8/10",
+		shadowEnd: "right-0 bg-linear-to-l from-gray-8/10",
+		child: "inline-block"
+	}
+};
+function Scroll({ horizontal = false, className, children,...rest }) {
+	const [showStartShadow, setShowStartShadow] = useState(false);
+	const [showEndShadow, setShowEndShadow] = useState(false);
+	const scrollChildRef = useRef(null);
+	const scrollContainerRef = useRef(null);
+	const position = horizontal ? "horizontal" : "vertical";
+	const setShadows = (container, child) => {
+		if (!container || !child) return;
+		const containerRect = container.getBoundingClientRect();
+		const childRect = child.getBoundingClientRect();
+		const isOnStartEdge = horizontal ? containerRect.left - childRect.left < TOLERANCE : containerRect.top - childRect.top < TOLERANCE;
+		const isOnEndEdge = horizontal ? childRect.right - containerRect.right < TOLERANCE : childRect.bottom - containerRect.bottom < TOLERANCE;
+		setShowStartShadow((previousShowStartShadow) => isOnStartEdge === previousShowStartShadow ? !previousShowStartShadow : previousShowStartShadow);
+		setShowEndShadow((previousShowEndShadow) => isOnEndEdge === previousShowEndShadow ? !previousShowEndShadow : previousShowEndShadow);
+	};
+	useEffect(() => {
+		const resizeObserver = new ResizeObserver(() => {
+			setShadows(scrollContainerRef.current, scrollChildRef.current);
+		});
+		resizeObserver.observe(scrollChildRef.current);
+		resizeObserver.observe(scrollContainerRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+	function handleScroll(event) {
+		if (!scrollChildRef?.current) return;
+		setShadows(event.currentTarget, scrollChildRef.current);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("ll-scroll-zone", "relative", className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: clsx("scroll-shadow-sm absolute z-1 opacity-0 transition-all", scrollVariants[position].shadow, scrollVariants[position].shadowStart, showStartShadow && "opacity-100") }),
+			/* @__PURE__ */ jsx("div", { className: clsx("scroll-shadow-sm absolute z-1 opacity-0 transition-all", scrollVariants[position].shadow, scrollVariants[position].shadowEnd, showEndShadow && "opacity-100") }),
+			/* @__PURE__ */ jsx("div", {
+				className: scrollVariants[position].inner,
+				ref: scrollContainerRef,
+				onScroll: handleScroll,
+				children: /* @__PURE__ */ jsx("div", {
+					className: scrollVariants[position].child,
+					ref: scrollChildRef,
+					children
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { Scroll };
+//# sourceMappingURL=Scroll-DFjbX09-.js.map

package/dist/Scroll-DFjbX09-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scroll-DFjbX09-.js","names":[],"sources":["../src/components/scroll/Scroll.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nconst TOLERANCE = 5;\n\ninterface Props extends ComponentPropsWithoutRef<\"div\"> {\n  horizontal?: boolean;\n}\n\nexport const scrollVariants = {\n  vertical: {\n    inner: \"overflow-y-auto h-full\",\n    shadow: \"h-1 left-0 right-0\",\n    shadowStart: \"top-0 bg-linear-to-b from-gray-8/10\",\n    shadowEnd: \"bottom-0 bg-linear-to-t from-gray-8/10\",\n    child: \"\",\n  },\n  horizontal: {\n    inner: \"overflow-x-auto\",\n    shadow: \"w-1 top-0 bottom-0\",\n    shadowStart: \"left-0 bg-linear-to-r from-gray-8/10\",\n    shadowEnd: \"right-0 bg-linear-to-l from-gray-8/10\",\n    child: \"inline-block\",\n  },\n};\n\nexport function Scroll({ horizontal = false, className, children, ...rest }: Props) {\n  const [showStartShadow, setShowStartShadow] = useState(false);\n  const [showEndShadow, setShowEndShadow] = useState(false);\n  const scrollChildRef = useRef<HTMLDivElement>(null);\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  const position = horizontal ? \"horizontal\" : \"vertical\";\n\n  const setShadows = (container: HTMLDivElement | null, child: HTMLDivElement | null) => {\n    if (!container || !child) {\n      return;\n    }\n\n    const containerRect = container.getBoundingClientRect();\n\n    const childRect = child.getBoundingClientRect();\n\n    const isOnStartEdge = horizontal\n      ? containerRect.left - childRect.left < TOLERANCE\n      : containerRect.top - childRect.top < TOLERANCE;\n\n    const isOnEndEdge = horizontal\n      ? childRect.right - containerRect.right < TOLERANCE\n      : childRect.bottom - containerRect.bottom < TOLERANCE;\n\n    setShowStartShadow((previousShowStartShadow) =>\n      isOnStartEdge === previousShowStartShadow\n        ? !previousShowStartShadow\n        : previousShowStartShadow,\n    );\n\n    setShowEndShadow((previousShowEndShadow) =>\n      isOnEndEdge === previousShowEndShadow ? !previousShowEndShadow : previousShowEndShadow,\n    );\n  };\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      setShadows(scrollContainerRef.current, scrollChildRef.current);\n    });\n    resizeObserver.observe(scrollChildRef.current!);\n    resizeObserver.observe(scrollContainerRef.current!);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  });\n\n  function handleScroll(event: React.UIEvent<HTMLDivElement, UIEvent>) {\n    if (!scrollChildRef?.current) {\n      return;\n    }\n    setShadows(event.currentTarget, scrollChildRef.current);\n  }\n\n  return (\n    <div className={clsx(\"ll-scroll-zone\", \"relative\", className)} {...rest}>\n      <div\n        className={clsx(\n          \"scroll-shadow-sm absolute z-1 opacity-0 transition-all\",\n          scrollVariants[position].shadow,\n          scrollVariants[position].shadowStart,\n          showStartShadow && \"opacity-100\",\n        )}\n      ></div>\n      <div\n        className={clsx(\n          \"scroll-shadow-sm absolute z-1 opacity-0 transition-all\",\n          scrollVariants[position].shadow,\n          scrollVariants[position].shadowEnd,\n          showEndShadow && \"opacity-100\",\n        )}\n      ></div>\n      <div\n        className={scrollVariants[position].inner}\n        ref={scrollContainerRef}\n        onScroll={handleScroll}\n      >\n        <div className={scrollVariants[position].child} ref={scrollChildRef}>\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,MAAM,YAAY;AAMlB,MAAa,iBAAiB;CAC5B,UAAU;EACR,OAAO;EACP,QAAQ;EACR,aAAa;EACb,WAAW;EACX,OAAO;EACR;CACD,YAAY;EACV,OAAO;EACP,QAAQ;EACR,aAAa;EACb,WAAW;EACX,OAAO;EACR;CACF;AAED,SAAgB,OAAO,EAAE,aAAa,OAAO,WAAW,SAAU,GAAG,QAAe;CAClF,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,MAAM;CAC7D,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,iBAAiB,OAAuB,KAAK;CACnD,MAAM,qBAAqB,OAAuB,KAAK;CAEvD,MAAM,WAAW,aAAa,eAAe;CAE7C,MAAM,cAAc,WAAkC,UAAiC;AACrF,MAAI,CAAC,aAAa,CAAC,MACjB;EAGF,MAAM,gBAAgB,UAAU,uBAAuB;EAEvD,MAAM,YAAY,MAAM,uBAAuB;EAE/C,MAAM,gBAAgB,aAClB,cAAc,OAAO,UAAU,OAAO,YACtC,cAAc,MAAM,UAAU,MAAM;EAExC,MAAM,cAAc,aAChB,UAAU,QAAQ,cAAc,QAAQ,YACxC,UAAU,SAAS,cAAc,SAAS;AAE9C,sBAAoB,4BAClB,kBAAkB,0BACd,CAAC,0BACD,wBACL;AAED,oBAAkB,0BAChB,gBAAgB,wBAAwB,CAAC,wBAAwB,sBAClE;;AAGH,iBAAgB;EACd,MAAM,iBAAiB,IAAI,qBAAqB;AAC9C,cAAW,mBAAmB,SAAS,eAAe,QAAQ;IAC9D;AACF,iBAAe,QAAQ,eAAe,QAAS;AAC/C,iBAAe,QAAQ,mBAAmB,QAAS;AAEnD,eAAa;AACX,kBAAe,YAAY;;GAE7B;CAEF,SAAS,aAAa,OAA+C;AACnE,MAAI,CAAC,gBAAgB,QACnB;AAEF,aAAW,MAAM,eAAe,eAAe,QAAQ;;AAGzD,QACE,qBAAC;EAAI,WAAW,KAAK,kBAAkB,YAAY,UAAU;EAAE,GAAI;;GACjE,oBAAC,SACC,WAAW,KACT,0DACA,eAAe,UAAU,QACzB,eAAe,UAAU,aACzB,mBAAmB,cACpB,GACI;GACP,oBAAC,SACC,WAAW,KACT,0DACA,eAAe,UAAU,QACzB,eAAe,UAAU,WACzB,iBAAiB,cAClB,GACI;GACP,oBAAC;IACC,WAAW,eAAe,UAAU;IACpC,KAAK;IACL,UAAU;cAEV,oBAAC;KAAI,WAAW,eAAe,UAAU;KAAO,KAAK;KAClD;MACG;KACF;;GACF"}

package/dist/Snack-jhUeQCUo.js

@@ -0,0 +1,47 @@
+import { useEffectEvent } from "./hooks-BXFCstNe.js";
+import { Loader } from "./loader-BNwcG8vD.js";
+import { Button } from "./Button-Ca-LAzc1.js";
+import { Dialog } from "./Dialog-CuzZERVL.js";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+
+//#region src/components/snack/Snack.tsx
+function Snack({ expiration = 5e3, content = "", color = "yellow", withLoader = false, canClose = false, onRemove = () => {} }) {
+	const onRemoveStable = useEffectEvent(onRemove);
+	useEffect(() => {
+		if (expiration === -1) return;
+		const timeoutId = setTimeout(() => onRemoveStable(), expiration);
+		return () => void clearTimeout(timeoutId);
+	}, [onRemoveStable, expiration]);
+	return /* @__PURE__ */ jsx(Dialog, {
+		className: clsx("motion-safe:animate-fade-in pointer-events-auto", "ll-snack"),
+		placement: "top",
+		color,
+		role: color !== "red" ? "status" : "alertdialog",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-fit min-w-60 items-center px-2 py-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 pr-4",
+					children: content
+				}),
+				withLoader && /* @__PURE__ */ jsx(Loader, {
+					size: "small",
+					color: "gray"
+				}),
+				canClose && /* @__PURE__ */ jsx(Button, {
+					icon: true,
+					variant: "text",
+					color: "gray",
+					onClick: onRemove,
+					children: /* @__PURE__ */ jsx("i", { className: "fe-cancel" })
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { Snack };
+//# sourceMappingURL=Snack-jhUeQCUo.js.map

package/dist/Snack-jhUeQCUo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snack-jhUeQCUo.js","names":[],"sources":["../src/components/snack/Snack.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect } from \"react\";\n\nimport { Button } from \"../button\";\nimport { useEffectEvent } from \"../../hooks\";\nimport { Dialog } from \"../dialog\";\nimport { Loader } from \"../loader\";\nimport { Message } from \"../../types\";\n\nexport type SnackProps = Partial<Message> & {\n  onRemove?: () => void;\n};\n\nexport function Snack({\n  expiration = 5000,\n  content = \"\",\n  color = \"yellow\",\n  withLoader = false,\n  canClose = false,\n  onRemove = () => {},\n}: SnackProps) {\n  const onRemoveStable = useEffectEvent(onRemove);\n\n  useEffect(() => {\n    if (expiration === -1) {\n      return;\n    }\n\n    const timeoutId = setTimeout(() => onRemoveStable(), expiration);\n    return () => void clearTimeout(timeoutId);\n  }, [onRemoveStable, expiration]);\n\n  return (\n    <Dialog\n      className={clsx(\"motion-safe:animate-fade-in pointer-events-auto\", \"ll-snack\")}\n      placement=\"top\"\n      color={color}\n      role={color !== \"red\" ? \"status\" : \"alertdialog\"}\n    >\n      <div className=\"flex w-fit min-w-60 items-center px-2 py-1\">\n        <span className=\"flex-1 pr-4\">{content}</span>\n        {withLoader && <Loader size=\"small\" color=\"gray\" />}\n\n        {canClose && (\n          <Button icon variant=\"text\" color=\"gray\" onClick={onRemove}>\n            <i className=\"fe-cancel\"></i>\n          </Button>\n        )}\n      </div>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;AAaA,SAAgB,MAAM,EACpB,aAAa,KACb,UAAU,IACV,QAAQ,UACR,aAAa,OACb,WAAW,OACX,iBAAiB,MACJ;CACb,MAAM,iBAAiB,eAAe,SAAS;AAE/C,iBAAgB;AACd,MAAI,eAAe,GACjB;EAGF,MAAM,YAAY,iBAAiB,gBAAgB,EAAE,WAAW;AAChE,eAAa,KAAK,aAAa,UAAU;IACxC,CAAC,gBAAgB,WAAW,CAAC;AAEhC,QACE,oBAAC;EACC,WAAW,KAAK,mDAAmD,WAAW;EAC9E,WAAU;EACH;EACP,MAAM,UAAU,QAAQ,WAAW;YAEnC,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAK,WAAU;eAAe;MAAe;IAC7C,cAAc,oBAAC;KAAO,MAAK;KAAQ,OAAM;MAAS;IAElD,YACC,oBAAC;KAAO;KAAK,SAAQ;KAAO,OAAM;KAAO,SAAS;eAChD,oBAAC,OAAE,WAAU,cAAgB;MACtB;;IAEP;GACC"}