@validationcloud/fractal-ui 1.39.0 → 1.40.0

package/dist/components/page-padding/page-padding.js

@@ -0,0 +1,25 @@
+import { jsx as p } from "react/jsx-runtime";
+import { Slot as e } from "radix-ui";
+import { forwardRef as a } from "react";
+import { twMerge as i } from "../../lib/tailwind-merge.js";
+const f = a(
+  ({ asChild: o, className: r, ...t }, d) => {
+    const m = o ? e.Root : "div";
+    return /* @__PURE__ */ p(
+      m,
+      {
+        ref: d,
+        className: i(
+          // Apply dynamic padding utilities to all sides by default
+          "dpt dpr dpb dpl",
+          r
+        ),
+        ...t
+      }
+    );
+  }
+);
+f.displayName = "PagePadding";
+export {
+  f as PagePadding
+};

package/dist/components/protocol-logo/protocol-logo.js

@@ -0,0 +1,89 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { twMerge as i } from "../../lib/tailwind-merge.js";
+const c = {
+  abstract: "abs",
+  apechain: "ape",
+  aptos: "apt",
+  arbitrum: "arb",
+  astar: "astr",
+  avalanche: "avax",
+  axelar: "axl",
+  base: "base",
+  berachain: "bera",
+  binance: "bnb",
+  bitcoin: "btc",
+  bitlayer: "btr",
+  bittensor: "tao",
+  bsc: "bnb",
+  bsquared: "b2",
+  casper: "cspr",
+  conflux: "cfx",
+  cronos: "cro",
+  ethereum: "eth",
+  etherlink: "xtz",
+  fraxtal: "frax",
+  gnosis: "gno",
+  hashkey: "hsk",
+  hedera: "hbar",
+  hyperliquid: "hype",
+  icp: "icp",
+  katana: "kat",
+  lisk: "lsk",
+  mantle: "mnt",
+  merlin: "merl",
+  mezo: "mezo",
+  mind: "fhe",
+  monad: "mon",
+  opbnb: "opbnb",
+  polygon: "matic",
+  provenance: "hash",
+  ronin: "ron",
+  rootstock: "rbtc",
+  saucerswap: "sauce",
+  solana: "sol",
+  somnia: "stt",
+  sonic: "s",
+  scroll: "scr",
+  stellar: "xlm",
+  superseed: "supr",
+  tron: "trx",
+  unichain: "uni",
+  wemix: "wemix",
+  worldchain: "wld",
+  xlayer: "okb",
+  zksync: "zk"
+};
+function n(e, r) {
+  let a = e.toLowerCase();
+  const o = c[a];
+  return o && (a = o), r === "xl" ? `${a}_square` : a;
+}
+const l = {
+  xs: 16,
+  // Tailwind size 4
+  sm: 24,
+  // Tailwind size 6
+  md: 32,
+  // Tailwind size 8
+  lg: 40,
+  // Tailwind size 10
+  xl: 60
+  // Tailwind size 15
+};
+function h({ name: e, size: r = "md", className: a, ...o }) {
+  const s = l[r];
+  return /* @__PURE__ */ t(
+    "svg",
+    {
+      ...o,
+      className: i(`text-protocols-${n(e)}`, a),
+      height: s,
+      width: s,
+      children: /* @__PURE__ */ t("use", { href: `#${n(e, r)}` })
+    }
+  );
+}
+export {
+  h as ProtocolLogo
+};

package/dist/components/scroll-area/scroll-area.js

@@ -0,0 +1,71 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ScrollArea as t } from "radix-ui";
+import "react";
+import { twMerge as a } from "../../lib/tailwind-merge.js";
+function l({ className: r, ...o }) {
+  return /* @__PURE__ */ e(
+    t.Root,
+    {
+      className: a(
+        "overflow-hidden",
+        // custom scrollbar styles, override by redefining these CSS variables
+        "[--scrollbar-size:--spacing(2.5)] [--thumb-color:var(--color-neutral-60)] [--thumb-hover-color:var(--color-neutral-55)] [--track-color:var(--color-transparent)] [--track-hover-color:var(--color-transparent)]",
+        r
+      ),
+      ...o
+    }
+  );
+}
+function n({ className: r, ...o }) {
+  return /* @__PURE__ */ e(t.Viewport, { className: a("", r), ...o });
+}
+function c({ className: r, ...o }) {
+  return /* @__PURE__ */ e(
+    t.Scrollbar,
+    {
+      className: a(
+        "flex touch-none p-[1px] transition-colors duration-150 ease-out select-none",
+        // colors
+        "bg-(--track-color) hover:bg-(--track-hover-color)",
+        // size and orientation styles
+        "data-[orientation=horizontal]:w-(--scrollbar-size) data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-(--scrollbar-size)",
+        r
+      ),
+      ...o
+    }
+  );
+}
+function i({ className: r, ...o }) {
+  return /* @__PURE__ */ e(
+    t.Thumb,
+    {
+      className: a(
+        "relative flex-1 rounded-(--scrollbar-size) transition-colors duration-150 ease-out",
+        // colors
+        "bg-(--thumb-color) hover:bg-(--thumb-hover-color)",
+        /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
+        'before:absolute before:top-1/2 before:left-1/2 before:h-full before:min-h-[44px] before:w-full before:min-w-[44px] before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:content-[""]',
+        r
+      ),
+      ...o
+    }
+  );
+}
+function s({ className: r, ...o }) {
+  return /* @__PURE__ */ e(t.Corner, { className: a("", r), ...o });
+}
+const h = {
+  Root: l,
+  Viewport: n,
+  Scrollbar: c,
+  Thumb: i,
+  Corner: s
+};
+export {
+  s as Corner,
+  l as Root,
+  h as ScrollArea,
+  c as Scrollbar,
+  i as Thumb,
+  n as Viewport
+};

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,12 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "react";
+import { twMerge as i } from "../../lib/tailwind-merge.js";
+function o({ className: n, ...l }) {
+  return /* @__PURE__ */ r("span", { className: i("relative inline-block", n), ...l, children: [
+    /* @__PURE__ */ e("div", { className: "inline-block" }),
+    /* @__PURE__ */ e("div", { className: i("absolute inset-0 animate-pulse rounded bg-neutral-50") })
+  ] });
+}
+export {
+  o as Skeleton
+};

package/dist/components/text-input/text-input.js

@@ -0,0 +1,57 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import "react";
+import { twMerge as l } from "../../lib/tailwind-merge.js";
+import { DISABLE_PASSWORD_MANAGERS_ATTRIBUTES as c } from "../../utils/disable-password-managers.js";
+const g = ({
+  variant: i = "outlined",
+  disablePasswordManagers: d,
+  rightAccessory: t,
+  errorState: o,
+  className: s,
+  containerClassName: u,
+  ...r
+}) => {
+  const e = i === "filled", n = o || r["aria-invalid"];
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: l(
+        // base wrapper styles:
+        "flex min-h-10 w-full flex-row items-center justify-between rounded-lg",
+        // variant-specific base:
+        e ? "bg-neutral-60" : "border-neutral-40 focus-within:border-secondary-40 border bg-transparent",
+        // error:
+        n && (e ? "" : "border-warning-50 focus-within:border-warning-50"),
+        // disabled:
+        r.disabled && "cursor-not-allowed",
+        r.disabled && (e ? "bg-neutral-55" : "border-neutral-55"),
+        u
+      ),
+      children: [
+        /* @__PURE__ */ a(
+          "input",
+          {
+            className: l(
+              // base input styles:
+              "tg-body placeholder-neutral-40 flex-1 bg-transparent px-3 focus:outline-none disabled:cursor-not-allowed",
+              // text color:
+              e ? "text-neutral-10 caret-secondary-40" : "",
+              // error:
+              n && e && "text-warning-50",
+              // disabled:
+              r.disabled && !e && "text-neutral-40",
+              s
+            ),
+            "aria-invalid": n,
+            ...d && c,
+            ...r
+          }
+        ),
+        t && /* @__PURE__ */ a("div", { className: "pr-4", children: t })
+      ]
+    }
+  );
+};
+export {
+  g as TextInput
+};

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { Tooltip as t } from "radix-ui";
+import "react";
+import { twMerge as o } from "../../lib/tailwind-merge.js";
+function w({
+  content: r,
+  color: e = "bg-neutral-80",
+  side: n = "bottom",
+  matchTriggerWidth: l,
+  open: d,
+  defaultOpen: s,
+  onOpenChange: p,
+  delayDuration: m,
+  className: g,
+  children: c,
+  ...h
+}) {
+  return /* @__PURE__ */ i(
+    t.Root,
+    {
+      open: d,
+      defaultOpen: s,
+      onOpenChange: p,
+      delayDuration: m,
+      children: [
+        /* @__PURE__ */ a(t.Trigger, { className: "cursor-pointer", asChild: !0, children: c }),
+        /* @__PURE__ */ a(t.Portal, { children: /* @__PURE__ */ i(
+          t.Content,
+          {
+            className: o(
+              "tg-caption text-neutral-20 max-h-(--radix-tooltip-content-available-height) origin-(--radix-tooltip-content-transform-origin) rounded-lg p-3 text-center text-pretty shadow-md",
+              // animations
+              "data-[state=closed]:animate-tooltip-exit data-[state=delayed-open]:animate-tooltip-delayed-enter data-[state=instant-open]:animate-tooltip-enter",
+              l && "w-(--radix-tooltip-trigger-width)",
+              e,
+              g
+            ),
+            side: n,
+            sideOffset: 4,
+            align: "center",
+            ...h,
+            children: [
+              r,
+              /* @__PURE__ */ a(
+                t.Arrow,
+                {
+                  className: o(
+                    e === "bg-neutral-60" && "fill-neutral-60",
+                    e === "bg-neutral-80" && "fill-neutral-80",
+                    e === "bg-secondary-40" && "fill-secondary-40"
+                  ),
+                  width: 11,
+                  height: 5
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  w as Tooltip
+};

package/dist/components/tooltip-provider/tooltip-provider.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { Tooltip as p } from "radix-ui";
+function n({
+  children: o,
+  delayDuration: r = 300,
+  skipDelayDuration: i = 50,
+  ...t
+}) {
+  return /* @__PURE__ */ e(p.TooltipProvider, { delayDuration: r, skipDelayDuration: i, ...t, children: o });
+}
+export {
+  n as TooltipProvider
+};

package/dist/index.d.ts

@@ -1,18 +1,2 @@
-export { AnimatedLoader } from './components/animated-loader/animated-loader';
-export { Badge } from './components/badge/badge';
-export { Box } from './components/box/box';
-export { Button } from './components/button/button';
-export { ClientModal } from './components/client-modal/client-modal';
-export { DecoratedIcon } from './components/decorated-icon/decorated-icon';
-export { DropdownMenu, DropdownMenuItem } from './components/dropdown-menu/dropdown-menu';
-export { ScrollArea } from './components/scroll-area/scroll-area';
-export { Icon } from './components/icon/icon';
-export { InputButton } from './components/input-button/input-button';
-export { MountSvgSprite } from './components/mount-svg-sprite/mount-svg-sprite';
-export { PagePadding } from './components/page-padding/page-padding';
-export { ProtocolLogo } from './components/protocol-logo/protocol-logo';
-export { Skeleton } from './components/skeleton/skeleton';
-export { TextInput } from './components/text-input/text-input';
-export { Tooltip } from './components/tooltip/tooltip';
-export { TooltipProvider } from './components/tooltip-provider/tooltip-provider';
-export { twMerge } from './lib/tailwind-merge.ts';
+export * from './src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,39 @@
+import { AnimatedLoader as e } from "./components/animated-loader/animated-loader.js";
+import { Badge as p } from "./components/badge/badge.js";
+import { Box as x } from "./components/box/box.js";
+import { Button as n } from "./components/button/button.js";
+import { ClientModal as a } from "./components/client-modal/client-modal.js";
+import { DecoratedIcon as i } from "./components/decorated-icon/decorated-icon.js";
+import { DropdownMenu as g, DropdownMenuItem as c } from "./components/dropdown-menu/dropdown-menu.js";
+import { ScrollArea as M } from "./components/scroll-area/scroll-area.js";
+import { Icon as P } from "./components/icon/icon.js";
+import { InputButton as w } from "./components/input-button/input-button.js";
+import { MountSvgSprite as T } from "./components/mount-svg-sprite/mount-svg-sprite.js";
+import { PagePadding as A } from "./components/page-padding/page-padding.js";
+import { ProtocolLogo as k } from "./components/protocol-logo/protocol-logo.js";
+import { Skeleton as b } from "./components/skeleton/skeleton.js";
+import { TextInput as j } from "./components/text-input/text-input.js";
+import { Tooltip as s } from "./components/tooltip/tooltip.js";
+import { TooltipProvider as z } from "./components/tooltip-provider/tooltip-provider.js";
+import { twMerge as F } from "./lib/tailwind-merge.js";
+export {
+  e as AnimatedLoader,
+  p as Badge,
+  x as Box,
+  n as Button,
+  a as ClientModal,
+  i as DecoratedIcon,
+  g as DropdownMenu,
+  c as DropdownMenuItem,
+  P as Icon,
+  w as InputButton,
+  T as MountSvgSprite,
+  A as PagePadding,
+  k as ProtocolLogo,
+  M as ScrollArea,
+  b as Skeleton,
+  j as TextInput,
+  s as Tooltip,
+  z as TooltipProvider,
+  F as twMerge
+};

package/dist/internal/modal-header.js

@@ -0,0 +1,18 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { RoundButton as s } from "./round-button.js";
+import "react";
+import { Icon as c } from "../components/icon/icon.js";
+import { twMerge as f } from "../lib/tailwind-merge.js";
+function u({ title: e, description: r, onClose: t, disabled: a, className: m, ...n }) {
+  return /* @__PURE__ */ l("div", { className: f("gap-r4 flex flex-row items-center justify-between", m), ...n, children: [
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
+      e && (typeof e == "string" ? /* @__PURE__ */ o("h3", { className: "tg-title-and-quote-bold", children: e }) : e),
+      r && (typeof r == "string" ? /* @__PURE__ */ o("p", { className: "tg-body text-neutral-40", children: r }) : r)
+    ] }),
+    " ",
+    t && /* @__PURE__ */ o(s, { disabled: a, onClick: t, children: /* @__PURE__ */ o(c, { icon: "close", className: "size-3" }) })
+  ] });
+}
+export {
+  u as ModalHeader
+};

package/dist/internal/modal.js

@@ -0,0 +1,35 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import "react";
+import { Box as o } from "../components/box/box.js";
+import { twMerge as r } from "../lib/tailwind-merge.js";
+function p({ isExiting: a, className: i, children: l, ...t }) {
+  return /* @__PURE__ */ d("div", { className: "relative z-50", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: r(
+          "animate-modal-backdrop-enter bg-neutral-60/85 fixed inset-0",
+          a && "animate-modal-backdrop-exit"
+        ),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "fixed inset-0 overflow-y-scroll", children: /* @__PURE__ */ e("div", { className: "xs:p-4 flex min-h-full items-center justify-center p-1", children: /* @__PURE__ */ e(
+      o,
+      {
+        borderRadius: "rounded-xl",
+        padding: "p-r6",
+        className: r(
+          "animate-modal-panel-enter gap-r6 shadow-modal mx-auto flex flex-col items-stretch",
+          a && "animate-modal-panel-exit",
+          i
+        ),
+        ...t,
+        children: l
+      }
+    ) }) })
+  ] });
+}
+export {
+  p as Modal
+};

package/dist/internal/react-portal.js

@@ -0,0 +1,17 @@
+"use client";
+import { useState as u, useEffect as f } from "react";
+import { createPortal as l } from "react-dom";
+function i({ children: n, wrapperId: t }) {
+  const [o, r] = u(!1);
+  if (f(() => {
+    r(!0);
+  }, []), !o)
+    return null;
+  const e = document.getElementById(t);
+  if (!e)
+    throw new Error(`Element with id '${t}' not found`);
+  return l(n, e);
+}
+export {
+  i as ReactPortal
+};

package/dist/internal/round-button.js

@@ -0,0 +1,32 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as s } from "radix-ui";
+import { forwardRef as u } from "react";
+import { twMerge as l } from "../lib/tailwind-merge.js";
+const a = u(
+  ({ asChild: e, className: r, ...t }, n) => {
+    const o = e ? s.Root : "button";
+    return /* @__PURE__ */ i(
+      o,
+      {
+        ref: n,
+        className: l(
+          "bg-neutral-60 text-neutral-30 ring-1.5 ring-neutral-60 flex flex-none cursor-pointer items-center justify-center rounded-full text-nowrap transition ease-in-out ring-inset",
+          // size:
+          "xs:size-9 size-8 p-2",
+          // focus:
+          "focus-visible:ring-neutral-10 focus:border-none focus:outline-none focus-visible:ring-2",
+          // hover:
+          "hover:bg-neutral-60 hover:text-neutral-10 hover:ring-1.5 hover:ring-neutral-40",
+          // disabled state:
+          "disabled:bg-neutral-70 disabled:text-neutral-40 disabled:ring-neutral-60 disabled:pointer-events-none disabled:cursor-default",
+          r
+        ),
+        ...t
+      }
+    );
+  }
+);
+a.displayName = "RoundButton";
+export {
+  a as RoundButton
+};

package/dist/lib/tailwind-merge.js

@@ -0,0 +1,39 @@
+import { extendTailwindMerge as t } from "tailwind-merge";
+const e = t({
+  extend: {
+    classGroups: {
+      gap: ["gap-r3", "gap-r4", "gap-r5", "gap-r6"],
+      pt: ["dpt"],
+      pr: ["dpr"],
+      pb: ["dpb"],
+      pl: ["dpl"],
+      tg: [
+        "tg-display-1",
+        "tg-display-2",
+        "tg-headline-1",
+        "tg-headline-2",
+        "tg-headline-3",
+        "tg-headline-4",
+        "tg-headline-5",
+        "tg-headline-6",
+        "tg-title-and-quote-bold",
+        "tg-title-and-quote",
+        "tg-body-large-bold",
+        "tg-body-large",
+        "tg-subtitle-bold",
+        "tg-subtitle",
+        "tg-button-text",
+        "tg-button-small",
+        "tg-body-bold",
+        "tg-body",
+        "tg-link",
+        "tg-caption-bold",
+        "tg-caption",
+        "tg-tag"
+      ]
+    }
+  }
+});
+export {
+  e as twMerge
+};

package/dist/src/index.d.ts

@@ -0,0 +1,18 @@
+export { AnimatedLoader } from './components/animated-loader/animated-loader';
+export { Badge } from './components/badge/badge';
+export { Box } from './components/box/box';
+export { Button } from './components/button/button';
+export { ClientModal } from './components/client-modal/client-modal';
+export { DecoratedIcon } from './components/decorated-icon/decorated-icon';
+export { DropdownMenu, DropdownMenuItem } from './components/dropdown-menu/dropdown-menu';
+export { ScrollArea } from './components/scroll-area/scroll-area';
+export { Icon, type IconID } from './components/icon/icon';
+export { InputButton } from './components/input-button/input-button';
+export { MountSvgSprite } from './components/mount-svg-sprite/mount-svg-sprite';
+export { PagePadding } from './components/page-padding/page-padding';
+export { ProtocolLogo } from './components/protocol-logo/protocol-logo';
+export { Skeleton } from './components/skeleton/skeleton';
+export { TextInput } from './components/text-input/text-input';
+export { Tooltip } from './components/tooltip/tooltip';
+export { TooltipProvider } from './components/tooltip-provider/tooltip-provider';
+export { twMerge } from './lib/tailwind-merge';

package/dist/utils/disable-password-managers.js

@@ -0,0 +1,10 @@
+const t = {
+  "data-lpignore": !0,
+  "data-1p-ignore": !0,
+  "data-form-type": "other",
+  "data-bwignore": !0,
+  autoComplete: "off"
+};
+export {
+  t as DISABLE_PASSWORD_MANAGERS_ATTRIBUTES
+};

package/package.json

@@ -1,30 +1,28 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.39.0",
-  "module": "./dist/fractal-ui.js",
+  "version": "1.40.0",
+  "module": "./dist/index.js",
   "type": "module",
   "files": [
-    "dist",
-    "README.md"
+    "dist"
   ],
   "license": "MIT",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "lint": "eslint",
-    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "format": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc -b --noEmit"
   },
   "exports": {
     ".": {
-      "import": "./dist/fractal-ui.js"
+      "import": "./dist/index.js"
     },
     "./tailwind.css": "./dist/styles/tailwind.css"
   },
+  "types": "./dist/index.d.ts",
   "release": {
     "branches": [
       "main"
@@ -41,7 +39,7 @@
     "tailwind-merge": "^3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
+    "@eslint/js": "^9.37.0",
     "@storybook/addon-docs": "^9",
     "@storybook/addon-onboarding": "^9",
     "@storybook/react-vite": "^9",
@@ -50,10 +48,10 @@
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^5.0.3",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.21",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.37.0",
+    "eslint-plugin-react-hooks": "^6.1.1",
+    "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-storybook": "^9",
     "globals": "^16.4.0",
     "postcss": "^8.5.6",
@@ -62,10 +60,10 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^9",
-    "tailwindcss": "^4.1.13",
+    "tailwindcss": "^4.1.14",
     "typescript": "^5",
-    "typescript-eslint": "^8.44.1",
-    "vite": "^7.1.7",
+    "typescript-eslint": "^8.46.0",
+    "vite": "^7.1.9",
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {

package/dist/components/animated-loader/animated-loader.stories.d.ts

@@ -1,8 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { AnimatedLoader } from './animated-loader';
-declare const meta: {
-    component: typeof AnimatedLoader;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Example: Story;