@validationcloud/fractal-ui 1.39.1 → 1.40.0

package/dist/assets/animated-loader.svg.js

@@ -0,0 +1,4 @@
+const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20style='shape-rendering:%20auto'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='xMidYMid'%20%3e%3ccircle%20cx='34'%20cy='50'%20fill='%23fff'%20r='16'%3e%3canimate%20attributeName='cx'%20repeatCount='indefinite'%20dur='0.8s'%20keyTimes='0;0.5;1'%20values='34;66;34'%20begin='-0.4s'%20/%3e%3c/circle%3e%3ccircle%20cx='66'%20cy='50'%20fill='%23D63D57'%20r='16'%3e%3canimate%20attributeName='cx'%20repeatCount='indefinite'%20dur='0.8s'%20keyTimes='0;0.5;1'%20values='34;66;34'%20begin='0s'%20/%3e%3c/circle%3e%3ccircle%20cx='34'%20cy='50'%20fill='%23fff'%20r='16'%3e%3canimate%20attributeName='cx'%20repeatCount='indefinite'%20dur='0.8s'%20keyTimes='0;0.5;1'%20values='34;66;34'%20begin='-0.4s'%20/%3e%3canimate%20attributeName='fill-opacity'%20values='0;0;1;1'%20calcMode='discrete'%20keyTimes='0;0.499;0.5;1'%20dur='0.8s'%20repeatCount='indefinite'%20/%3e%3c/circle%3e%3c/svg%3e";
+export {
+  e as default
+};

package/dist/components/animated-loader/animated-loader.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import m from "../../assets/animated-loader.svg.js";
+import { twMerge as e } from "../../lib/tailwind-merge.js";
+function c({ className: r, ...o }) {
+  return /* @__PURE__ */ t(
+    "img",
+    {
+      className: e("mx-auto block", r),
+      src: m,
+      height: 150,
+      width: 150,
+      alt: "Loader",
+      ...o
+    }
+  );
+}
+export {
+  c as AnimatedLoader
+};

package/dist/components/badge/badge.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { Slot as d } from "radix-ui";
+import { forwardRef as a } from "react";
+import { twMerge as u } from "../../lib/tailwind-merge.js";
+const m = {
+  number: "bg-success-30/10 text-success-50 border border-success-50/50",
+  success: "bg-neutral-70 text-success-30",
+  primary: "bg-secondary-30/15 text-secondary-30",
+  successInverted: "bg-success-30 text-neutral-80"
+}, x = {
+  tag: "tg-tag px-[6px] py-[2px] rounded",
+  caption: "tg-caption px-2 py-[2px] rounded-lg",
+  bodyBold: "tg-body-bold px-[10px] py-1 rounded"
+}, g = a(
+  ({ asChild: e, color: t = "number", size: s = "tag", className: r, ...o }, c) => {
+    const n = e ? d.Root : "div";
+    return /* @__PURE__ */ p(
+      n,
+      {
+        ref: c,
+        className: u("flex items-center justify-center text-nowrap", m[t], x[s], r),
+        ...o
+      }
+    );
+  }
+);
+g.displayName = "Badge";
+export {
+  g as Badge
+};

package/dist/components/box/box.js

@@ -0,0 +1,69 @@
+import { jsx as p, jsxs as n, Fragment as w } from "react/jsx-runtime";
+import { Slot as j } from "radix-ui";
+import { forwardRef as B } from "react";
+import { twMerge as s } from "../../lib/tailwind-merge.js";
+const N = B(
+  ({
+    asChild: m,
+    header: r,
+    borderColor: e,
+    borderRadius: x = "rounded-lg",
+    padding: t = "p-r6",
+    background: b = "bg-neutral-70",
+    className: f,
+    children: o,
+    ...l
+  }, c) => {
+    const u = m ? j.Root : "div";
+    return /* @__PURE__ */ p(
+      u,
+      {
+        ref: c,
+        className: s(
+          // borders:
+          x,
+          e,
+          e && "border-1.5",
+          // padding:
+          t === "p-r6" && "xs:p-5 p-4 md:p-6",
+          t === "p-r4" && "xs:p-3.5 p-3 md:p-4",
+          t === "p-0" && "p-0",
+          // background:
+          b,
+          f
+        ),
+        ...l,
+        children: m ? o : /* @__PURE__ */ n(w, { children: [
+          r && /* @__PURE__ */ p(i, { padding: t, children: r }),
+          o
+        ] })
+      }
+    );
+  }
+);
+N.displayName = "Box";
+function i({ padding: m, children: r, className: e, ...x }) {
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: s(
+        "border-b-neutral-60 flex flex-row items-center justify-between border-b",
+        // nullify outside padding with negative margin on top and side:
+        m === "p-r6" && "xs:-mx-5 xs:-mt-5 -mx-4 -mt-4 md:-mx-6 md:-mt-6",
+        m === "p-r4" && "xs:-mx-3.5 xs:-mt-3.5 -mx-3 -mt-3 md:-mx-4 md:-mt-4",
+        // add additional padding below divider:
+        m === "p-r6" && "xs:mb-5 mb-4 md:mb-6",
+        m === "p-r4" && "xs:mb-3.5 mb-3 md:mb-4",
+        m === "p-r6" && "xs:p-5 p-4 md:p-6",
+        m === "p-r4" && "xs:p-3.5 p-3 md:p-4",
+        m === "p-0" && "p-0",
+        e
+      ),
+      ...x,
+      children: r
+    }
+  );
+}
+export {
+  N as Box
+};

package/dist/components/button/button.js

@@ -0,0 +1,137 @@
+import { jsx as d } from "react/jsx-runtime";
+import { Slot as u } from "radix-ui";
+import { forwardRef as b } from "react";
+import { twMerge as g } from "../../lib/tailwind-merge.js";
+const e = {
+  base: [
+    // Base
+    "flex cursor-pointer items-center justify-center text-nowrap text-neutral-10 ring-inset transition ease-in-out",
+    // Focus
+    "focus:border-none focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-10 focus-visible:text-neutral-10",
+    // Disabled base
+    "disabled:cursor-default disabled:hover:shadow-none"
+  ],
+  variants: {
+    primary: [
+      // Base
+      "bg-primary-50",
+      // Hover
+      "hover:bg-primary-60",
+      // Focus
+      "focus-visible:ring-neutral-30",
+      // Disabled
+      "disabled:bg-neutral-50 disabled:text-neutral-30"
+    ],
+    secondary: [
+      // Base
+      "bg-neutral-80 ring-1 ring-neutral-55 text-neutral-20",
+      // Hover
+      "hover:ring-1 hover:ring-neutral-60 hover:shadow-button hover:text-neutral-10",
+      // Focus
+      "focus-visible:ring-neutral-30 focus-visible:ring-1.5",
+      // Disabled
+      "disabled:bg-neutral-60 disabled:text-neutral-40 disabled:ring-neutral-60"
+    ],
+    redText: [
+      // Base
+      "bg-neutral-80 text-primary-40 ring-1 ring-neutral-55",
+      // Hover
+      "hover:shadow-button hover:ring-neutral-60",
+      // Focus
+      "focus-visible:ring-neutral-30 focus-visible:ring-1.5",
+      // Disabled
+      "disabled:bg-neutral-60 disabled:text-neutral-40 disabled:ring-neutral-60"
+    ],
+    warning: [
+      // Base
+      "bg-warning-50",
+      // Hover
+      "hover:bg-warning-60",
+      // Disabled
+      "disabled:bg-neutral-50 disabled:text-neutral-30"
+    ],
+    info: [
+      // Base
+      "bg-secondary-40",
+      // Hover
+      "hover:bg-secondary-50",
+      // Disabled
+      "disabled:bg-neutral-50 disabled:text-neutral-30"
+    ],
+    gradient: [
+      // Base
+      "bg-ctaGradient",
+      // Hover
+      "hover:bg-ctaGradientHover",
+      // Disabled
+      "disabled:bg-neutral-50 disabled:text-neutral-30"
+    ],
+    light: [
+      // Base
+      "bg-neutral-10 text-neutral-60",
+      // Hover
+      "hover:text-neutral-80 hover:bg-neutral-20",
+      // Disabled
+      "disabled:bg-neutral-30 disabled:text-neutral-50",
+      // Focus
+      "focus-visible:ring-neutral-40 focus-visible:ring-1.5 focus-visible:text-neutral-60"
+    ],
+    ghost: [
+      // Base
+      "inline-flex text-current bg-transparent",
+      // Hover
+      "hover:bg-neutral-30/15",
+      // Active
+      "active:bg-neutral-10/30",
+      // Disabled
+      "disabled:cursor-not-allowed disabled:opacity-50"
+    ],
+    text: [
+      // Base
+      "inline-flex text-neutral-10 bg-transparent underline decoration-neutral-10 tg-body-bold",
+      // Hover - text color change and underline color change
+      "hover:text-neutral-10/80 hover:decoration-neutral-10/60",
+      // Active state
+      "active:text-neutral-10/70 active:decoration-neutral-10/50",
+      // Disabled
+      "disabled:cursor-not-allowed disabled:opacity-50"
+    ]
+  },
+  sizes: {
+    xlarge: "tg-subtitle-bold min-h-12 rounded-xl px-5 py-3 md:min-h-14 md:rounded-2xl",
+    large: "tg-button-text min-h-11 rounded-lg px-5 py-3 md:min-h-12",
+    medium: "tg-button-small min-h-10 rounded-lg px-4 py-2 md:min-h-10",
+    small: "tg-caption-bold min-h-[34px] rounded-md px-4 py-1.5",
+    xsmall: "tg-tag min-h-6 rounded-sm px-2 py-1"
+  },
+  ghostSizes: {
+    xlarge: "-mx-5 -my-3 px-5 py-3",
+    large: "-mx-5 -my-3 px-5 py-3",
+    medium: "-mx-5 -my-3 px-5 py-3",
+    small: "-mx-4 -my-2 px-4 py-2",
+    xsmall: "-mx-4 -my-1.5 px-2 py-1"
+  }
+}, m = b(
+  ({ asChild: n, variant: t = "primary", size: r = "medium", className: a, children: i, ...l }, o) => {
+    const s = n ? u.Root : "button";
+    return /* @__PURE__ */ d(
+      s,
+      {
+        ref: o,
+        className: g(
+          ...e.base,
+          ...e.variants[t],
+          t !== "text" && e.sizes[r],
+          t === "ghost" && e.ghostSizes[r],
+          a
+        ),
+        ...l,
+        children: i
+      }
+    );
+  }
+);
+m.displayName = "Button";
+export {
+  m as Button
+};

package/dist/components/client-modal/client-modal.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as t, Fragment as n, jsxs as f } from "react/jsx-runtime";
+import { Modal as p } from "../../internal/modal.js";
+import { ModalHeader as x } from "../../internal/modal-header.js";
+import { ReactPortal as g } from "../../internal/react-portal.js";
+import { useEffect as h } from "react";
+import { useTransitionState as E } from "react-transition-state";
+function R({
+  wrapperId: m = "client-modals",
+  isOpen: r,
+  title: o,
+  onClose: e,
+  description: u,
+  disabled: a,
+  children: l,
+  ...s
+}) {
+  const [{ status: c, isMounted: d }, i] = E({
+    timeout: 150,
+    //TODO: make the delay configurable. It should match exit animation duration.
+    mountOnEnter: !0,
+    unmountOnExit: !0
+  });
+  return h(() => {
+    i(r);
+  }, [r, i]), /* @__PURE__ */ t(n, { children: d && /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(g, { wrapperId: m, children: /* @__PURE__ */ f(p, { isExiting: c === "exiting", ...s, children: [
+    (o || e) && /* @__PURE__ */ t(x, { title: o, description: u, onClose: e, disabled: a }),
+    l
+  ] }) }) }) });
+}
+export {
+  R as ClientModal
+};

package/dist/components/decorated-icon/decorated-icon.js

@@ -0,0 +1,30 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import "react";
+import { Icon as i } from "../icon/icon.js";
+import { twMerge as s } from "../../lib/tailwind-merge.js";
+function N({
+  background: r,
+  backgroundClassName: l,
+  symbol: o,
+  symbolClassName: a,
+  symbolScale: t = 0.55,
+  className: c,
+  ...m
+}) {
+  return /* @__PURE__ */ n("div", { className: s("relative", c), ...m, children: [
+    /* @__PURE__ */ e("div", { className: "absolute inset-0", children: /* @__PURE__ */ e(i, { icon: r, className: s("size-full", l) }) }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "absolute inset-0",
+        style: {
+          transform: `scale(${t})`
+        },
+        children: /* @__PURE__ */ e(i, { icon: o, className: s("size-full", a) })
+      }
+    )
+  ] });
+}
+export {
+  N as DecoratedIcon
+};

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,63 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { DropdownMenu as t, ScrollArea as n } from "radix-ui";
+import { forwardRef as h } from "react";
+import { twMerge as d } from "../../lib/tailwind-merge.js";
+const g = h(
+  ({ className: a, baseColor: r = "bg-neutral-60", textValue: l, ...o }, i) => /* @__PURE__ */ e(
+    t.Item,
+    {
+      className: d(
+        "tg-button-small data-highlighted:text-neutral-10 flex cursor-pointer items-center truncate rounded-[10px] px-4 py-2.5 transition-colors outline-none select-none",
+        r === "bg-neutral-60" && "text-neutral-20 data-highlighted:bg-neutral-55",
+        r === "bg-neutral-80" && "text-neutral-40 data-highlighted:bg-neutral-60",
+        a
+      ),
+      textValue: l,
+      ...o,
+      ref: i
+    }
+  )
+);
+g.displayName = "DropdownMenuItem";
+function f({
+  trigger: a,
+  baseColor: r = "bg-neutral-60",
+  children: l,
+  className: o,
+  contentClassName: i,
+  disabled: u,
+  ...c
+}) {
+  return /* @__PURE__ */ s(t.Root, { ...c, children: [
+    /* @__PURE__ */ e(t.Trigger, { className: d("", o), asChild: !0, disabled: u, children: a }),
+    /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(n.Root, { type: "hover", style: { "--scrollbar-size": "10px" }, asChild: !0, children: /* @__PURE__ */ s(
+      t.Content,
+      {
+        className: d(
+          "max-h-(--radix-dropdown-menu-content-available-height) overflow-hidden rounded-2xl shadow-[0px_8px_20px_2px_rgba(0,0,0,0.40)]",
+          r === "bg-neutral-60" && "bg-neutral-60",
+          r === "bg-neutral-80" && "bg-neutral-80",
+          i
+        ),
+        align: "end",
+        sideOffset: 8,
+        collisionPadding: 8,
+        children: [
+          /* @__PURE__ */ e(n.Viewport, { className: "max-h-(--radix-dropdown-menu-content-available-height) p-1.5", children: l }),
+          /* @__PURE__ */ e(
+            n.Scrollbar,
+            {
+              className: "hover:bg-neutral-60 flex w-(--scrollbar-size) touch-none px-0.5 py-4 transition-all select-none hover:px-0",
+              orientation: "vertical",
+              children: /* @__PURE__ */ e(n.Thumb, { className: "bg-neutral-10/50 hover:bg-neutral-10 flex-1 rounded-(--scrollbar-size) transition-colors" })
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+}
+export {
+  f as DropdownMenu,
+  g as DropdownMenuItem
+};

package/dist/components/icon/icon.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+function i({ icon: o, ...e }) {
+  return /* @__PURE__ */ r("svg", { ...e, children: /* @__PURE__ */ r("use", { href: `#${o}` }) });
+}
+export {
+  i as Icon
+};

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

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { Icon as c } from "../icon/icon.js";
+import { twMerge as r } from "../../lib/tailwind-merge.js";
+function g({ clearIcon: o, cta: n, disabled: e, className: u, ...l }) {
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      className: r(
+        "group flex h-full w-10 items-center justify-center focus:outline-none",
+        e && "pointer-events-none",
+        u
+      ),
+      ...l,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: r(
+            "bg-neutral-80 group-focus:ring-neutral-40 flex h-8 w-full items-center justify-center rounded-lg group-focus:ring-1",
+            n && "bg-ctaGradient hover:bg-ctaGradientHover",
+            e && "bg-neutral-55"
+          ),
+          children: /* @__PURE__ */ t(
+            c,
+            {
+              icon: o ? "close" : "enter",
+              className: r(
+                "text-neutral-10 group-hover:text-neutral-40 h-3.5 w-3.5",
+                n && "group-hover:text-neutral-10",
+                e && "text-neutral-30"
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  g as InputButton
+};