@validationcloud/fractal-ui 1.39.1 → 1.41.0

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/{tailwind-merge-DQj6rVv5.js → lib/tailwind-merge.js}

@@ -35,5 +35,5 @@ const e = t({
   }
 });
 export {
-  e as t
+  e as twMerge
 };

package/dist/src/components/scroll-area/index.d.ts

@@ -0,0 +1,8 @@
+import { Root, Viewport, Scrollbar, Thumb, Corner } from './scroll-area';
+export declare const ScrollArea: {
+    Root: typeof Root;
+    Viewport: typeof Viewport;
+    Scrollbar: typeof Scrollbar;
+    Thumb: typeof Thumb;
+    Corner: typeof Corner;
+};

package/dist/{components → src/components}/scroll-area/scroll-area.d.ts

@@ -10,11 +10,4 @@ type ScrollAreaThumbProps = {} & React.ComponentPropsWithoutRef<typeof RadixScro
 export declare function Thumb({ className, ...props }: ScrollAreaThumbProps): import("react/jsx-runtime").JSX.Element;
 type ScrollAreaCornerProps = {} & React.ComponentPropsWithoutRef<typeof RadixScrollArea.Corner>;
 export declare function Corner({ className, ...props }: ScrollAreaCornerProps): import("react/jsx-runtime").JSX.Element;
-export declare const ScrollArea: {
-    Root: typeof Root;
-    Viewport: typeof Viewport;
-    Scrollbar: typeof Scrollbar;
-    Thumb: typeof Thumb;
-    Corner: typeof Corner;
-};
 export {};

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';
+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,33 +1,29 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.39.1",
-  "module": "./dist/fractal-ui.js",
+  "version": "1.41.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"
+    "format:check": "prettier --check .",
+    "typecheck": "tsc -b --noEmit"
   },
   "exports": {
     ".": {
       "import": "./dist/index.js"
     },
-    "./utils": {
-      "import": "./dist/utils.js"
-    },
     "./tailwind.css": "./dist/styles/tailwind.css"
   },
+  "types": "./dist/index.d.ts",
   "release": {
     "branches": [
       "main"
@@ -44,7 +40,8 @@
     "tailwind-merge": "^3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.37.0",
     "@storybook/addon-docs": "^9",
     "@storybook/addon-onboarding": "^9",
     "@storybook/react-vite": "^9",
@@ -53,22 +50,24 @@
     "@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-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-refresh": "^0.4.23",
     "eslint-plugin-storybook": "^9",
     "globals": "^16.4.0",
     "postcss": "^8.5.6",
+    "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "rollup-plugin-analyzer": "^4.0.0",
     "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;

package/dist/components/badge/badge.stories.d.ts

@@ -1,17 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    component: import('react').ForwardRefExoticComponent<{
-        color?: "number" | "success" | "primary" | "successInverted";
-        size?: "caption" | "tag" | "bodyBold";
-    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const DefaultExample: Story;
-export declare const Preview: Story;
-export declare const NumberTag: Story;
-export declare const ValueTag: Story;
-export declare const AsLink: Story;
-export declare const AsButton: Story;

package/dist/components/box/box.stories.d.ts

@@ -1,19 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    component: import('react').ForwardRefExoticComponent<{
-        header?: React.ReactNode;
-        borderRadius?: "rounded-xl" | "rounded-lg";
-        padding?: "p-r6" | "p-r4" | "p-0";
-        background?: "bg-neutral-60" | "bg-neutral-70" | "bg-neutral-80" | "bg-gradient-box" | "transparent";
-        borderColor?: "border-secondary-40";
-    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const EmptyBox: Story;
-export declare const BoxWithHeader: Story;
-export declare const BoxWithoutHeader: Story;
-export declare const GradientBox: Story;
-export declare const RenderedAsDifferentElement: Story;

package/dist/components/button/button.stories.d.ts

@@ -1,28 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    component: import('react').ForwardRefExoticComponent<{
-        className?: string;
-        variant?: "primary" | "warning" | "info" | "gradient" | "secondary" | "ghost" | "text" | "light" | "redText";
-        size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
-    } & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean;
-    } & import('react').RefAttributes<HTMLButtonElement>>;
-    args: {
-        disabled: false;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Light: Story;
-export declare const Gradient: Story;
-export declare const Warning: Story;
-export declare const Info: Story;
-export declare const RedText: Story;
-export declare const Ghost: Story;
-export declare const GhostButtonInTextLayout: Story;
-export declare const AllSizes: Story;
-export declare const AllVariants: Story;
-export declare const ButtonLink: Story;
-export declare const LoadingState: Story;

package/dist/components/client-modal/client-modal.stories.d.ts

@@ -1,8 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { ClientModal } from './client-modal';
-declare const meta: {
-    component: typeof ClientModal;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

package/dist/components/decorated-icon/decorated-icon.stories.d.ts

@@ -1,18 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { DecoratedIcon } from './decorated-icon';
-declare const meta: {
-    component: typeof DecoratedIcon;
-    argTypes: {
-        symbolScale: {
-            control: {
-                type: "range";
-                min: number;
-                max: number;
-                step: number;
-            };
-        };
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const ExampleDecoratedIcon: Story;

package/dist/components/dropdown-menu/dropdown-menu.stories.d.ts

@@ -1,10 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { DropdownMenu } from './dropdown-menu';
-declare const meta: {
-    component: typeof DropdownMenu;
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Example: Story;
-export declare const LongItemLabels: Story;

package/dist/components/icon/icon-showcase.stories.d.ts

@@ -1,13 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-type IconShowcaseProps = {
-    backgroundColor: string;
-    roundBackground: boolean;
-    className: string;
-};
-declare function IconShowcase({ backgroundColor, roundBackground, className }: IconShowcaseProps): import("react/jsx-runtime").JSX.Element;
-declare const meta: {
-    component: typeof IconShowcase;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const IconShowcaseStory: Story;

package/dist/components/icon/icon.stories.d.ts

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

package/dist/components/input-button/input-button.stories.d.ts

@@ -1,11 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { InputButton } from './input-button';
-declare const meta: {
-    component: typeof InputButton;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const DefaultEnter: Story;
-export declare const DefaultClear: Story;
-export declare const Disabled: Story;
-export declare const CTA: Story;

package/dist/components/page-padding/page-padding.stories.d.ts

@@ -1,10 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-declare const meta: {
-    component: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Example: Story;
-export declare const LayoutExample: Story;