@stableflow/pay-ui 0.0.1-beta-82ede460a5-20260923

package/dist/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/switch/Switch.tsx","../../src/switch/config.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { motion, type HTMLMotionProps } from \"motion/react\";\nimport { IconLoading } from \"../icons/loading\";\nimport { cn } from \"../lib/cn\";\nimport { SWITCH_THUMB_TRAVEL_PX } from \"./config\";\n\nexport type SwitchProps = Omit<\n  HTMLMotionProps<\"button\">,\n  \"onChange\" | \"role\" | \"aria-checked\" | \"children\" | \"animate\" | \"initial\" | \"transition\"\n> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  loading?: boolean;\n};\n\nexport function Switch(props: SwitchProps) {\n  const {\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    disabled,\n    loading = false,\n    className,\n    type = \"button\",\n    onClick,\n    ...restProps\n  } = props;\n  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);\n  const isChecked = checked ?? uncontrolledChecked;\n  const isDisabled = Boolean(disabled);\n\n  const toggle = () => {\n    const nextChecked = !isChecked;\n    if (checked === undefined) setUncontrolledChecked(nextChecked);\n    onCheckedChange?.(nextChecked);\n  };\n\n  return (\n    <motion.button\n      type={type}\n      role=\"switch\"\n      aria-checked={isChecked}\n      aria-busy={loading || undefined}\n      disabled={isDisabled || loading}\n      onClick={(event) => {\n        onClick?.(event);\n        if (event.defaultPrevented || loading || isDisabled) return;\n        toggle();\n      }}\n      className={cn(\n        \"relative h-5 w-[34px] shrink-0 cursor-pointer rounded-full border border-[#e3e3e3] bg-[#F6F6F6] p-[1px] outline-none select-none transition-colors aria-checked:bg-[#6284F5]\",\n        (isDisabled || loading) && \"pointer-events-none cursor-not-allowed\",\n        isDisabled && \"opacity-30\",\n        loading && \"opacity-100\",\n        className,\n      )}\n      {...restProps}\n    >\n      <motion.span\n        aria-hidden\n        initial={false}\n        animate={{ x: isChecked ? SWITCH_THUMB_TRAVEL_PX : 0 }}\n        transition={{ type: \"spring\", stiffness: 500, damping: 32 }}\n        className={cn(\n          \"absolute top-[1px] left-[1px] flex size-4 items-center justify-center\",\n          loading ? \"rounded-full bg-white/75\" : \"rounded-full border border-[#d9d9d9] bg-white\",\n        )}\n      >\n        {loading ? <IconLoading className=\"size-3.25 shrink-0 animate-spin text-[#909090]\" /> : null}\n      </motion.span>\n    </motion.button>\n  );\n}\n\nexport default Switch;\n","export const SWITCH_THUMB_TRAVEL_PX = 13;\n"],"mappings":";;;;;;;;AAAA,SAAS,gBAAgB;AACzB,SAAS,cAAoC;;;ACDtC,IAAM,yBAAyB;;;ADqEnB;AArDZ,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,cAAc;AAC7E,QAAM,YAAY,WAAW;AAC7B,QAAM,aAAa,QAAQ,QAAQ;AAEnC,QAAM,SAAS,MAAM;AACnB,UAAM,cAAc,CAAC;AACrB,QAAI,YAAY,OAAW,wBAAuB,WAAW;AAC7D,sBAAkB,WAAW;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,aAAW,WAAW;AAAA,MACtB,UAAU,cAAc;AAAA,MACxB,SAAS,CAAC,UAAU;AAClB,kBAAU,KAAK;AACf,YAAI,MAAM,oBAAoB,WAAW,WAAY;AACrD,eAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT;AAAA,SACC,cAAc,YAAY;AAAA,QAC3B,cAAc;AAAA,QACd,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,eAAW;AAAA,UACX,SAAS;AAAA,UACT,SAAS,EAAE,GAAG,YAAY,yBAAyB,EAAE;AAAA,UACrD,YAAY,EAAE,MAAM,UAAU,WAAW,KAAK,SAAS,GAAG;AAAA,UAC1D,WAAW;AAAA,YACT;AAAA,YACA,UAAU,6BAA6B;AAAA,UACzC;AAAA,UAEC,oBAAU,oBAAC,eAAY,WAAU,kDAAiD,IAAK;AAAA;AAAA,MAC1F;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/table/index.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type TableProps = HTMLAttributes<HTMLDivElement> & {
+    columns: string;
+    scrollClassName?: string;
+    toolbar?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+};
+declare function Table(props: TableProps): react.JSX.Element;
+type TableHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare function TableHeader(props: TableHeaderProps): react.JSX.Element;
+type TableBodyProps = HTMLAttributes<HTMLDivElement>;
+declare function TableBody(props: TableBodyProps): react.JSX.Element;
+type TableRowProps = HTMLAttributes<HTMLDivElement>;
+declare function TableRow(props: TableRowProps): react.JSX.Element;
+type TableHeadProps = HTMLAttributes<HTMLDivElement>;
+declare function TableHead(props: TableHeadProps): react.JSX.Element;
+type TableCellProps = HTMLAttributes<HTMLDivElement>;
+declare function TableCell(props: TableCellProps): react.JSX.Element;
+
+declare const TABLE_SKELETON_ROWS = 3;
+declare function TableSkeletonRows({ cells, rows }: {
+    cells: number;
+    rows?: number;
+}): react.JSX.Element;
+
+export { TABLE_SKELETON_ROWS, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableSkeletonRows };

package/dist/table/index.js

@@ -0,0 +1,95 @@
+import {
+  Skeleton
+} from "../chunk-R46DAHYR.js";
+import {
+  Card
+} from "../chunk-MJ36QLY3.js";
+import {
+  fontSans
+} from "../chunk-FXENEWNN.js";
+import {
+  cn
+} from "../chunk-TUEV2KLC.js";
+
+// src/table/Table.tsx
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TableContext = createContext(null);
+function useTableContext() {
+  const context = useContext(TableContext);
+  if (!context) throw new Error("Table compound components must be used within Table.");
+  return context;
+}
+function columnsStyle(columns) {
+  return { gridTemplateColumns: columns };
+}
+function Table(props) {
+  const { columns, className, scrollClassName, toolbar, footer, children, style, ...restProps } = props;
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: { columns }, children: /* @__PURE__ */ jsxs(Card, { className: cn("flex min-h-0 flex-col overflow-hidden p-5", className), style, ...restProps, children: [
+    toolbar ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: toolbar }) : null,
+    /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-auto [scrollbar-gutter:stable]", scrollClassName), children: /* @__PURE__ */ jsx("div", { className: "min-w-full", children }) }),
+    footer ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: footer }) : null
+  ] }) });
+}
+function TableHeader(props) {
+  const { className, style, ...restProps } = props;
+  const { columns } = useTableContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sticky top-0 z-10 grid w-full min-w-min border-b border-black/10 bg-[#FDFDFD] text-sm font-medium text-[#aaa] capitalize",
+        fontSans,
+        className
+      ),
+      style: { ...columnsStyle(columns), ...style },
+      ...restProps
+    }
+  );
+}
+function TableBody(props) {
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), ...restProps });
+}
+function TableRow(props) {
+  const { className, style, ...restProps } = props;
+  const { columns } = useTableContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid w-full min-w-min border-b border-black/10 text-sm font-medium text-black last:border-b-0",
+        fontSans,
+        className
+      ),
+      style: { ...columnsStyle(columns), ...style },
+      ...restProps
+    }
+  );
+}
+function TableHead(props) {
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center px-2 py-3.5 first:pl-0 last:pr-0", className), ...restProps });
+}
+function TableCell(props) {
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center px-2 py-3.5 first:pl-0 last:pr-0", className), ...restProps });
+}
+
+// src/table/TableSkeletonRows.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TABLE_SKELETON_ROWS = 3;
+function TableSkeletonRows({ cells, rows = TABLE_SKELETON_ROWS }) {
+  return /* @__PURE__ */ jsx2(TableBody, { "aria-busy": "true", "aria-label": "Loading", children: Array.from({ length: rows }, (_, row) => /* @__PURE__ */ jsx2(TableRow, { children: Array.from({ length: cells }, (_2, cell) => /* @__PURE__ */ jsx2(TableCell, { children: /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-full" }) }, cell)) }, row)) });
+}
+export {
+  TABLE_SKELETON_ROWS,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableSkeletonRows
+};
+//# sourceMappingURL=index.js.map

package/dist/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/Table.tsx","../../src/table/TableSkeletonRows.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { Card } from \"../card/Card\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\n\ntype TableContextValue = { columns: string };\n\nconst TableContext = createContext<TableContextValue | null>(null);\n\nfunction useTableContext() {\n  const context = useContext(TableContext);\n  if (!context) throw new Error(\"Table compound components must be used within Table.\");\n  return context;\n}\n\nfunction columnsStyle(columns: string): CSSProperties {\n  return { gridTemplateColumns: columns };\n}\n\nexport type TableProps = HTMLAttributes<HTMLDivElement> & {\n  columns: string;\n  scrollClassName?: string;\n  toolbar?: ReactNode;\n  footer?: ReactNode;\n  children?: ReactNode;\n};\n\nexport function Table(props: TableProps) {\n  const { columns, className, scrollClassName, toolbar, footer, children, style, ...restProps } = props;\n\n  return (\n    <TableContext.Provider value={{ columns }}>\n      <Card className={cn(\"flex min-h-0 flex-col overflow-hidden p-5\", className)} style={style} {...restProps}>\n        {toolbar ? <div className=\"shrink-0\">{toolbar}</div> : null}\n        <div className={cn(\"min-h-0 flex-1 overflow-auto [scrollbar-gutter:stable]\", scrollClassName)}>\n          <div className=\"min-w-full\">{children}</div>\n        </div>\n        {footer ? <div className=\"shrink-0\">{footer}</div> : null}\n      </Card>\n    </TableContext.Provider>\n  );\n}\n\nexport type TableHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport function TableHeader(props: TableHeaderProps) {\n  const { className, style, ...restProps } = props;\n  const { columns } = useTableContext();\n  return (\n    <div\n      className={cn(\n        \"sticky top-0 z-10 grid w-full min-w-min border-b border-black/10 bg-[#FDFDFD] text-sm font-medium text-[#aaa] capitalize\",\n        fontSans,\n        className,\n      )}\n      style={{ ...columnsStyle(columns), ...style }}\n      {...restProps}\n    />\n  );\n}\n\nexport type TableBodyProps = HTMLAttributes<HTMLDivElement>;\n\nexport function TableBody(props: TableBodyProps) {\n  const { className, ...restProps } = props;\n  return <div className={cn(\"w-full\", className)} {...restProps} />;\n}\n\nexport type TableRowProps = HTMLAttributes<HTMLDivElement>;\n\nexport function TableRow(props: TableRowProps) {\n  const { className, style, ...restProps } = props;\n  const { columns } = useTableContext();\n  return (\n    <div\n      className={cn(\n        \"grid w-full min-w-min border-b border-black/10 text-sm font-medium text-black last:border-b-0\",\n        fontSans,\n        className,\n      )}\n      style={{ ...columnsStyle(columns), ...style }}\n      {...restProps}\n    />\n  );\n}\n\nexport type TableHeadProps = HTMLAttributes<HTMLDivElement>;\n\nexport function TableHead(props: TableHeadProps) {\n  const { className, ...restProps } = props;\n  return (\n    <div className={cn(\"flex min-w-0 items-center px-2 py-3.5 first:pl-0 last:pr-0\", className)} {...restProps} />\n  );\n}\n\nexport type TableCellProps = HTMLAttributes<HTMLDivElement>;\n\nexport function TableCell(props: TableCellProps) {\n  const { className, ...restProps } = props;\n  return (\n    <div className={cn(\"flex min-w-0 items-center px-2 py-3.5 first:pl-0 last:pr-0\", className)} {...restProps} />\n  );\n}\n\nexport default Table;\n","import { Skeleton } from \"../skeleton/Skeleton\";\nimport { TableBody, TableCell, TableRow } from \"./Table\";\n\nexport const TABLE_SKELETON_ROWS = 3;\n\nexport function TableSkeletonRows({ cells, rows = TABLE_SKELETON_ROWS }: { cells: number; rows?: number }) {\n  return (\n    <TableBody aria-busy=\"true\" aria-label=\"Loading\">\n      {Array.from({ length: rows }, (_, row) => (\n        <TableRow key={row}>\n          {Array.from({ length: cells }, (_, cell) => (\n            <TableCell key={cell}>\n              <Skeleton className=\"h-4 w-full\" />\n            </TableCell>\n          ))}\n        </TableRow>\n      ))}\n    </TableBody>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AACA,SAAS,eAAe,kBAAkB;AAgCpC,SACa,KADb;AAzBN,IAAM,eAAe,cAAwC,IAAI;AAEjE,SAAS,kBAAkB;AACzB,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,QAAS,OAAM,IAAI,MAAM,sDAAsD;AACpF,SAAO;AACT;AAEA,SAAS,aAAa,SAAgC;AACpD,SAAO,EAAE,qBAAqB,QAAQ;AACxC;AAUO,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,SAAS,WAAW,iBAAiB,SAAS,QAAQ,UAAU,OAAO,GAAG,UAAU,IAAI;AAEhG,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,QAAQ,GACtC,+BAAC,QAAK,WAAW,GAAG,6CAA6C,SAAS,GAAG,OAAe,GAAG,WAC5F;AAAA,cAAU,oBAAC,SAAI,WAAU,YAAY,mBAAQ,IAAS;AAAA,IACvD,oBAAC,SAAI,WAAW,GAAG,0DAA0D,eAAe,GAC1F,8BAAC,SAAI,WAAU,cAAc,UAAS,GACxC;AAAA,IACC,SAAS,oBAAC,SAAI,WAAU,YAAY,kBAAO,IAAS;AAAA,KACvD,GACF;AAEJ;AAIO,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,WAAW,OAAO,GAAG,UAAU,IAAI;AAC3C,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,aAAa,OAAO,GAAG,GAAG,MAAM;AAAA,MAC3C,GAAG;AAAA;AAAA,EACN;AAEJ;AAIO,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,WAAW,GAAG,UAAU,IAAI;AACpC,SAAO,oBAAC,SAAI,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,WAAW;AACjE;AAIO,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,WAAW,OAAO,GAAG,UAAU,IAAI;AAC3C,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,GAAG,aAAa,OAAO,GAAG,GAAG,MAAM;AAAA,MAC3C,GAAG;AAAA;AAAA,EACN;AAEJ;AAIO,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,WAAW,GAAG,UAAU,IAAI;AACpC,SACE,oBAAC,SAAI,WAAW,GAAG,8DAA8D,SAAS,GAAI,GAAG,WAAW;AAEhH;AAIO,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,WAAW,GAAG,UAAU,IAAI;AACpC,SACE,oBAAC,SAAI,WAAW,GAAG,8DAA8D,SAAS,GAAI,GAAG,WAAW;AAEhH;;;AC3Fc,gBAAAA,YAAA;AATP,IAAM,sBAAsB;AAE5B,SAAS,kBAAkB,EAAE,OAAO,OAAO,oBAAoB,GAAqC;AACzG,SACE,gBAAAA,KAAC,aAAU,aAAU,QAAO,cAAW,WACpC,gBAAM,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC,GAAG,QAChC,gBAAAA,KAAC,YACE,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAACC,IAAG,SACjC,gBAAAD,KAAC,aACC,0BAAAA,KAAC,YAAS,WAAU,cAAa,KADnB,IAEhB,CACD,KALY,GAMf,CACD,GACH;AAEJ;","names":["jsx","_"]}

package/dist/toast/index.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const ToastType: {
+    readonly Success: "success";
+    readonly Error: "error";
+    readonly Info: "info";
+    readonly Pending: "pending";
+    readonly Notice: "notice";
+};
+type ToastType = (typeof ToastType)[keyof typeof ToastType];
+type ToastProps = {
+    type: ToastType;
+    title: ReactNode;
+    text?: ReactNode;
+    className?: string;
+    closeToast?: () => void;
+};
+declare function Toast(props: ToastProps): react.JSX.Element;
+
+export { Toast, type ToastProps, ToastType, ToastType as ToastTypeName };

package/dist/toast/index.js

@@ -0,0 +1,85 @@
+import {
+  IconAlert
+} from "../chunk-NZGSPYWG.js";
+import {
+  IconCheck
+} from "../chunk-6OV2OZVR.js";
+import {
+  IconClose
+} from "../chunk-J5TQGGEN.js";
+import {
+  IconLoading
+} from "../chunk-SE7Z4ZYP.js";
+import {
+  fontSans
+} from "../chunk-FXENEWNN.js";
+import {
+  cn
+} from "../chunk-TUEV2KLC.js";
+
+// src/toast/Toast.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToastType = {
+  Success: "success",
+  Error: "error",
+  Info: "info",
+  Pending: "pending",
+  Notice: "notice"
+};
+var badgeClassName = {
+  [ToastType.Success]: "bg-[#84a20f]",
+  [ToastType.Error]: "bg-[#ff5656]",
+  [ToastType.Info]: "bg-[#007AFF]",
+  [ToastType.Pending]: "bg-[#FF9500]",
+  [ToastType.Notice]: "bg-[#606060]"
+};
+function Toast(props) {
+  const { type, title, text, className, closeToast } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[316px] rounded-xl border border-[#e0e0e0] bg-[#fdfdfd] px-3 py-3.5 shadow-[0_0_20px_0_rgba(0,0,0,0.06)] max-md:w-[calc(100vw-32px)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-start gap-1.5 text-sm font-semibold leading-normal text-black", fontSans), children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex size-3.5 shrink-0 translate-y-1 items-center justify-center rounded-full text-white",
+                  badgeClassName[type]
+                ),
+                children: [
+                  type === ToastType.Success ? /* @__PURE__ */ jsx(IconCheck, { className: "size-1.5 shrink-0" }) : null,
+                  type === ToastType.Error ? /* @__PURE__ */ jsx(IconClose, { className: "size-1.5 shrink-0" }) : null,
+                  type === ToastType.Info || type === ToastType.Notice ? /* @__PURE__ */ jsx(IconAlert, { className: "size-1.5 shrink-0" }) : null,
+                  type === ToastType.Pending ? /* @__PURE__ */ jsx(IconLoading, { className: "size-2 shrink-0 animate-spin" }) : null
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { children: title })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "mt-0 shrink-0 cursor-pointer border-0 bg-transparent p-0 text-black",
+              onClick: closeToast,
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(IconClose, { className: "size-2" })
+            }
+          )
+        ] }),
+        text ? /* @__PURE__ */ jsx("div", { className: cn("mt-2.5 flex items-center gap-1 text-xs font-medium leading-normal text-[#606060]", fontSans), children: /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: text }) }) : null
+      ]
+    }
+  );
+}
+export {
+  Toast,
+  ToastType
+};
+//# sourceMappingURL=index.js.map

package/dist/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/toast/Toast.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { IconAlert } from \"../icons/alert\";\nimport { IconCheck } from \"../icons/check\";\nimport { IconClose } from \"../icons/close\";\nimport { IconLoading } from \"../icons/loading\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\n\nexport const ToastType = {\n  Success: \"success\",\n  Error: \"error\",\n  Info: \"info\",\n  Pending: \"pending\",\n  Notice: \"notice\",\n} as const;\nexport type ToastType = (typeof ToastType)[keyof typeof ToastType];\n\nexport type ToastProps = {\n  type: ToastType;\n  title: ReactNode;\n  text?: ReactNode;\n  className?: string;\n  closeToast?: () => void;\n};\n\nconst badgeClassName: Record<ToastType, string> = {\n  [ToastType.Success]: \"bg-[#84a20f]\",\n  [ToastType.Error]: \"bg-[#ff5656]\",\n  [ToastType.Info]: \"bg-[#007AFF]\",\n  [ToastType.Pending]: \"bg-[#FF9500]\",\n  [ToastType.Notice]: \"bg-[#606060]\",\n};\n\nexport function Toast(props: ToastProps) {\n  const { type, title, text, className, closeToast } = props;\n\n  return (\n    <div\n      className={cn(\n        \"w-[316px] rounded-xl border border-[#e0e0e0] bg-[#fdfdfd] px-3 py-3.5 shadow-[0_0_20px_0_rgba(0,0,0,0.06)] max-md:w-[calc(100vw-32px)]\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className={cn(\"flex min-w-0 items-start gap-1.5 text-sm font-semibold leading-normal text-black\", fontSans)}>\n          <div\n            className={cn(\n              \"flex size-3.5 shrink-0 translate-y-1 items-center justify-center rounded-full text-white\",\n              badgeClassName[type],\n            )}\n          >\n            {type === ToastType.Success ? <IconCheck className=\"size-1.5 shrink-0\" /> : null}\n            {type === ToastType.Error ? <IconClose className=\"size-1.5 shrink-0\" /> : null}\n            {type === ToastType.Info || type === ToastType.Notice ? <IconAlert className=\"size-1.5 shrink-0\" /> : null}\n            {type === ToastType.Pending ? <IconLoading className=\"size-2 shrink-0 animate-spin\" /> : null}\n          </div>\n          <div>{title}</div>\n        </div>\n        <button\n          type=\"button\"\n          className=\"mt-0 shrink-0 cursor-pointer border-0 bg-transparent p-0 text-black\"\n          onClick={closeToast}\n          aria-label=\"Close\"\n        >\n          <IconClose className=\"size-2\" />\n        </button>\n      </div>\n      {text ? (\n        <div className={cn(\"mt-2.5 flex items-center gap-1 text-xs font-medium leading-normal text-[#606060]\", fontSans)}>\n          <div className=\"min-w-0 flex-1\">{text}</div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport default Toast;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6CU,SAMgC,KANhC;AArCH,IAAM,YAAY;AAAA,EACvB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AACV;AAWA,IAAM,iBAA4C;AAAA,EAChD,CAAC,UAAU,OAAO,GAAG;AAAA,EACrB,CAAC,UAAU,KAAK,GAAG;AAAA,EACnB,CAAC,UAAU,IAAI,GAAG;AAAA,EAClB,CAAC,UAAU,OAAO,GAAG;AAAA,EACrB,CAAC,UAAU,MAAM,GAAG;AACtB;AAEO,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,MAAM,OAAO,MAAM,WAAW,WAAW,IAAI;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0CACb;AAAA,+BAAC,SAAI,WAAW,GAAG,oFAAoF,QAAQ,GAC7G;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,eAAe,IAAI;AAAA,gBACrB;AAAA,gBAEC;AAAA,2BAAS,UAAU,UAAU,oBAAC,aAAU,WAAU,qBAAoB,IAAK;AAAA,kBAC3E,SAAS,UAAU,QAAQ,oBAAC,aAAU,WAAU,qBAAoB,IAAK;AAAA,kBACzE,SAAS,UAAU,QAAQ,SAAS,UAAU,SAAS,oBAAC,aAAU,WAAU,qBAAoB,IAAK;AAAA,kBACrG,SAAS,UAAU,UAAU,oBAAC,eAAY,WAAU,gCAA+B,IAAK;AAAA;AAAA;AAAA,YAC3F;AAAA,YACA,oBAAC,SAAK,iBAAM;AAAA,aACd;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cACT,cAAW;AAAA,cAEX,8BAAC,aAAU,WAAU,UAAS;AAAA;AAAA,UAChC;AAAA,WACF;AAAA,QACC,OACC,oBAAC,SAAI,WAAW,GAAG,oFAAoF,QAAQ,GAC7G,8BAAC,SAAI,WAAU,kBAAkB,gBAAK,GACxC,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { c as FloatingSide } from '../use-floating-position-aNqQwkre.js';
+
+type TooltipProps = {
+    content: ReactNode;
+    children: ReactNode;
+    leaveDelay?: number;
+    side?: FloatingSide;
+    className?: string;
+    triggerClassName?: string;
+};
+declare function Tooltip(props: TooltipProps): react.JSX.Element;
+
+declare const TOOLTIP_LEAVE_DELAY_MS = 0;
+
+export { TOOLTIP_LEAVE_DELAY_MS, Tooltip, type TooltipProps };

package/dist/tooltip/index.js

@@ -0,0 +1,104 @@
+import {
+  FLOATING_ALIGN,
+  FLOATING_SIDE,
+  useFloatingPosition
+} from "../chunk-VAPGLPZ5.js";
+import {
+  floatingLayerZIndex
+} from "../chunk-RUOUGZWI.js";
+import {
+  fontSans
+} from "../chunk-FXENEWNN.js";
+import {
+  cn
+} from "../chunk-TUEV2KLC.js";
+
+// src/tooltip/Tooltip.tsx
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+// src/tooltip/config.ts
+var TOOLTIP_LEAVE_DELAY_MS = 0;
+
+// src/tooltip/Tooltip.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Tooltip(props) {
+  const {
+    content,
+    children,
+    leaveDelay = TOOLTIP_LEAVE_DELAY_MS,
+    side = FLOATING_SIDE.Top,
+    className,
+    triggerClassName
+  } = props;
+  const triggerRef = useRef(null);
+  const panelRef = useRef(null);
+  const leaveTimerRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const panelStyle = useFloatingPosition({
+    open,
+    triggerRef,
+    panelRef,
+    side,
+    align: FLOATING_ALIGN.Center,
+    offset: 8
+  });
+  const clearLeaveTimer = () => {
+    if (leaveTimerRef.current == null) return;
+    window.clearTimeout(leaveTimerRef.current);
+    leaveTimerRef.current = null;
+  };
+  const show = () => {
+    clearLeaveTimer();
+    setOpen(true);
+  };
+  const hide = () => {
+    clearLeaveTimer();
+    if (leaveDelay <= 0) {
+      setOpen(false);
+      return;
+    }
+    leaveTimerRef.current = window.setTimeout(() => {
+      setOpen(false);
+      leaveTimerRef.current = null;
+    }, leaveDelay);
+  };
+  useEffect(() => () => clearLeaveTimer(), []);
+  useEffect(() => {
+    if (!open) return;
+    const onScroll = () => {
+      clearLeaveTimer();
+      setOpen(false);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: triggerRef, className: cn("inline-flex max-w-full", triggerClassName), onMouseEnter: show, onMouseLeave: hide, children }),
+    open && content && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelRef,
+          role: "tooltip",
+          style: { ...panelStyle, zIndex: floatingLayerZIndex() },
+          className: cn(
+            "rounded-[12px] border border-[#E0E0E0] bg-[#FDFDFD] px-[15px] py-2.5 text-sm font-normal leading-normal text-black shadow-[0_0_20px_0_rgba(0,0,0,0.06)]",
+            fontSans,
+            leaveDelay <= 0 && "pointer-events-none",
+            className
+          ),
+          onMouseEnter: leaveDelay > 0 ? show : void 0,
+          onMouseLeave: leaveDelay > 0 ? hide : void 0,
+          children: content
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+export {
+  TOOLTIP_LEAVE_DELAY_MS,
+  Tooltip
+};
+//# sourceMappingURL=index.js.map

package/dist/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tooltip/Tooltip.tsx","../../src/tooltip/config.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { fontSans } from \"../lib/font\";\nimport { floatingLayerZIndex } from \"../overlay/stack\";\nimport { FLOATING_ALIGN, FLOATING_SIDE, type FloatingSide, useFloatingPosition } from \"../overlay/use-floating-position\";\nimport { TOOLTIP_LEAVE_DELAY_MS } from \"./config\";\n\nexport type TooltipProps = {\n  content: ReactNode;\n  children: ReactNode;\n  leaveDelay?: number;\n  side?: FloatingSide;\n  className?: string;\n  triggerClassName?: string;\n};\n\nexport function Tooltip(props: TooltipProps) {\n  const {\n    content,\n    children,\n    leaveDelay = TOOLTIP_LEAVE_DELAY_MS,\n    side = FLOATING_SIDE.Top,\n    className,\n    triggerClassName,\n  } = props;\n  const triggerRef = useRef<HTMLSpanElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const leaveTimerRef = useRef<number | null>(null);\n  const [open, setOpen] = useState(false);\n  const panelStyle = useFloatingPosition({\n    open,\n    triggerRef,\n    panelRef,\n    side,\n    align: FLOATING_ALIGN.Center,\n    offset: 8,\n  });\n\n  const clearLeaveTimer = () => {\n    if (leaveTimerRef.current == null) return;\n    window.clearTimeout(leaveTimerRef.current);\n    leaveTimerRef.current = null;\n  };\n\n  const show = () => {\n    clearLeaveTimer();\n    setOpen(true);\n  };\n\n  const hide = () => {\n    clearLeaveTimer();\n    if (leaveDelay <= 0) {\n      setOpen(false);\n      return;\n    }\n    leaveTimerRef.current = window.setTimeout(() => {\n      setOpen(false);\n      leaveTimerRef.current = null;\n    }, leaveDelay);\n  };\n\n  useEffect(() => () => clearLeaveTimer(), []);\n\n  useEffect(() => {\n    if (!open) return;\n    const onScroll = () => {\n      clearLeaveTimer();\n      setOpen(false);\n    };\n    window.addEventListener(\"scroll\", onScroll, true);\n    return () => window.removeEventListener(\"scroll\", onScroll, true);\n  }, [open]);\n\n  return (\n    <>\n      <span ref={triggerRef} className={cn(\"inline-flex max-w-full\", triggerClassName)} onMouseEnter={show} onMouseLeave={hide}>\n        {children}\n      </span>\n      {open && content && typeof document !== \"undefined\"\n        ? createPortal(\n            <div\n              ref={panelRef}\n              role=\"tooltip\"\n              style={{ ...panelStyle, zIndex: floatingLayerZIndex() }}\n              className={cn(\n                \"rounded-[12px] border border-[#E0E0E0] bg-[#FDFDFD] px-[15px] py-2.5 text-sm font-normal leading-normal text-black shadow-[0_0_20px_0_rgba(0,0,0,0.06)]\",\n                fontSans,\n                leaveDelay <= 0 && \"pointer-events-none\",\n                className,\n              )}\n              onMouseEnter={leaveDelay > 0 ? show : undefined}\n              onMouseLeave={leaveDelay > 0 ? hide : undefined}\n            >\n              {content}\n            </div>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n}\n\nexport default Tooltip;\n","export const TOOLTIP_LEAVE_DELAY_MS = 0;\n"],"mappings":";;;;;;;;;;;;;;;;AACA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,oBAAoB;;;ACFtB,IAAM,yBAAyB;;;AD4ElC,mBACE,KADF;AA1DG,SAAS,QAAQ,OAAqB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,cAAc;AAAA,IACrB;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,aAAa,OAAwB,IAAI;AAC/C,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,gBAAgB,OAAsB,IAAI;AAChD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,aAAa,oBAAoB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB,QAAQ;AAAA,EACV,CAAC;AAED,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,WAAW,KAAM;AACnC,WAAO,aAAa,cAAc,OAAO;AACzC,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,OAAO,MAAM;AACjB,oBAAgB;AAChB,YAAQ,IAAI;AAAA,EACd;AAEA,QAAM,OAAO,MAAM;AACjB,oBAAgB;AAChB,QAAI,cAAc,GAAG;AACnB,cAAQ,KAAK;AACb;AAAA,IACF;AACA,kBAAc,UAAU,OAAO,WAAW,MAAM;AAC9C,cAAQ,KAAK;AACb,oBAAc,UAAU;AAAA,IAC1B,GAAG,UAAU;AAAA,EACf;AAEA,YAAU,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAE3C,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,WAAW,MAAM;AACrB,sBAAgB;AAChB,cAAQ,KAAK;AAAA,IACf;AACA,WAAO,iBAAiB,UAAU,UAAU,IAAI;AAChD,WAAO,MAAM,OAAO,oBAAoB,UAAU,UAAU,IAAI;AAAA,EAClE,GAAG,CAAC,IAAI,CAAC;AAET,SACE,iCACE;AAAA,wBAAC,UAAK,KAAK,YAAY,WAAW,GAAG,0BAA0B,gBAAgB,GAAG,cAAc,MAAM,cAAc,MACjH,UACH;AAAA,IACC,QAAQ,WAAW,OAAO,aAAa,cACpC;AAAA,MACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAO,EAAE,GAAG,YAAY,QAAQ,oBAAoB,EAAE;AAAA,UACtD,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,cAAc,KAAK;AAAA,YACnB;AAAA,UACF;AAAA,UACA,cAAc,aAAa,IAAI,OAAO;AAAA,UACtC,cAAc,aAAa,IAAI,OAAO;AAAA,UAErC;AAAA;AAAA,MACH;AAAA,MACA,SAAS;AAAA,IACX,IACA;AAAA,KACN;AAEJ;","names":[]}

package/dist/types-DNElDQZ9.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+type OverlayChromeProps = {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    ariaLabel?: string;
+    children?: ReactNode;
+    mask?: boolean;
+    maskClassName?: string;
+    closeOnMaskClick?: boolean;
+    cardClassName?: string;
+    panelClassName?: string;
+    titleClassName?: string;
+    closeClassName?: string;
+    contentClassName?: string;
+    closeIcon?: ReactNode;
+    headerAction?: ReactNode;
+    /** Sit in the wallet-portal z-index band, above ordinary dialog and drawer layers. */
+    elevated?: boolean;
+};
+
+export type { OverlayChromeProps as O };

package/dist/use-floating-position-aNqQwkre.d.ts

@@ -0,0 +1,33 @@
+import { RefObject, CSSProperties } from 'react';
+
+declare const FLOATING_SIDE: {
+    readonly Top: "top";
+    readonly TopLeft: "top-left";
+    readonly TopRight: "top-right";
+    readonly Right: "right";
+    readonly RightTop: "right-top";
+    readonly RightBottom: "right-bottom";
+    readonly Bottom: "bottom";
+    readonly BottomLeft: "bottom-left";
+    readonly BottomRight: "bottom-right";
+    readonly Left: "left";
+    readonly LeftTop: "left-top";
+    readonly LeftBottom: "left-bottom";
+};
+type FloatingSide = (typeof FLOATING_SIDE)[keyof typeof FLOATING_SIDE];
+declare const FLOATING_ALIGN: {
+    readonly Start: "start";
+    readonly Center: "center";
+    readonly End: "end";
+};
+type FloatingAlign = (typeof FLOATING_ALIGN)[keyof typeof FLOATING_ALIGN];
+declare function useFloatingPosition(options: {
+    open: boolean;
+    triggerRef: RefObject<HTMLElement | null>;
+    panelRef: RefObject<HTMLElement | null>;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    offset?: number;
+}): CSSProperties;
+
+export { FLOATING_ALIGN as F, FLOATING_SIDE as a, type FloatingAlign as b, type FloatingSide as c, useFloatingPosition as u };

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@stableflow/pay-ui",
+  "version": "0.0.1-beta-82ede460a5-20260923",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./autocomplete": {
+      "types": "./dist/autocomplete/index.d.ts",
+      "import": "./dist/autocomplete/index.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "import": "./dist/button/index.js"
+    },
+    "./card": {
+      "types": "./dist/card/index.d.ts",
+      "import": "./dist/card/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "import": "./dist/checkbox/index.js"
+    },
+    "./date-range-picker": {
+      "types": "./dist/date-range-picker/index.d.ts",
+      "import": "./dist/date-range-picker/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "import": "./dist/dialog/index.js"
+    },
+    "./drawer": {
+      "types": "./dist/drawer/index.d.ts",
+      "import": "./dist/drawer/index.js"
+    },
+    "./dropdown": {
+      "types": "./dist/dropdown/index.d.ts",
+      "import": "./dist/dropdown/index.js"
+    },
+    "./input-number": {
+      "types": "./dist/input-number/index.d.ts",
+      "import": "./dist/input-number/index.js"
+    },
+    "./overlay": {
+      "types": "./dist/overlay/index.d.ts",
+      "import": "./dist/overlay/index.js"
+    },
+    "./pagination": {
+      "types": "./dist/pagination/index.d.ts",
+      "import": "./dist/pagination/index.js"
+    },
+    "./search-input": {
+      "types": "./dist/search-input/index.d.ts",
+      "import": "./dist/search-input/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/skeleton/index.d.ts",
+      "import": "./dist/skeleton/index.js"
+    },
+    "./switch": {
+      "types": "./dist/switch/index.d.ts",
+      "import": "./dist/switch/index.js"
+    },
+    "./table": {
+      "types": "./dist/table/index.d.ts",
+      "import": "./dist/table/index.js"
+    },
+    "./toast": {
+      "types": "./dist/toast/index.d.ts",
+      "import": "./dist/toast/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/tooltip/index.d.ts",
+      "import": "./dist/tooltip/index.js"
+    },
+    "./icons/*": {
+      "types": "./dist/icons/*.d.ts",
+      "import": "./dist/icons/*.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "motion": "^13.0.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.2",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run"
+  }
+}