@ledgerhq/lumen-ui-react 0.1.6 → 0.1.8

package/dist/lib/Components/Card/Card.js

@@ -0,0 +1,349 @@
+import { jsx as s, jsxs as f, Fragment as b } from "react/jsx-runtime";
+import { createSafeContext as m, DisabledProvider as g, cn as o, getButtonA11yProps as C, useDisabledContext as c } from "../../../libs/utils-shared/dist/index.js";
+import { cva as N } from "class-variance-authority";
+import { useMemo as h } from "react";
+import { ChevronUp as w } from "../../Symbols/Icons/ChevronUp.js";
+import { ChevronDown as y } from "../../Symbols/Icons/ChevronDown.js";
+const k = ({
+  type: r,
+  expanded: t,
+  onClick: e,
+  disabled: a
+}) => {
+  switch (r) {
+    case "interactive":
+      return {
+        cardClickable: !!e,
+        headerClickable: !1,
+        footerExpanded: !0,
+        onHeaderClick: void 0
+      };
+    case "expandable":
+      return {
+        cardClickable: !1,
+        headerClickable: !!e && !a,
+        footerExpanded: !!t,
+        onHeaderClick: e
+      };
+    case "info":
+      return {
+        cardClickable: !1,
+        headerClickable: !1,
+        footerExpanded: !0,
+        onHeaderClick: void 0
+      };
+  }
+}, [H, v] = m(
+  "Card",
+  {
+    cardClickable: !1,
+    headerClickable: !1,
+    footerExpanded: !0
+  }
+), [F, p] = m("CardContentAlign", {
+  align: "left"
+}), R = N(
+  "flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
+  {
+    variants: {
+      interactive: {
+        true: "cursor-pointer hover:bg-surface-hover active:bg-surface-pressed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+        false: ""
+      },
+      outlined: {
+        true: "border-2 border-active",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-default",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        interactive: !0,
+        disabled: !0,
+        className: "cursor-default hover:bg-surface active:bg-surface"
+      }
+    ],
+    defaultVariants: {
+      interactive: !1,
+      outlined: !1,
+      disabled: !1
+    }
+  }
+), A = ({
+  ref: r,
+  className: t,
+  type: e = "interactive",
+  expanded: a,
+  outlined: n = !1,
+  disabled: i = !1,
+  onClick: d,
+  children: l,
+  ...x
+}) => {
+  const u = h(
+    () => k({
+      type: e,
+      expanded: a,
+      onClick: d,
+      disabled: i
+    }),
+    [e, a, d, i]
+  );
+  return /* @__PURE__ */ s(H, { value: u, children: /* @__PURE__ */ s(g, { value: { disabled: i }, children: /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      ...u.cardClickable && C({ onClick: d, disabled: i }),
+      className: o(
+        R({
+          interactive: u.cardClickable,
+          outlined: n,
+          disabled: i
+        }),
+        t
+      ),
+      ...x,
+      children: l
+    }
+  ) }) });
+};
+A.displayName = "Card";
+const D = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => {
+  const n = c({
+    consumerName: "CardHeader"
+  }), { headerClickable: i, footerExpanded: d, onHeaderClick: l } = v({
+    consumerName: "CardHeader",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: r,
+      "aria-expanded": l ? d : void 0,
+      ...C({ onClick: l, disabled: n }),
+      className: o(
+        "flex items-center gap-12 p-12",
+        i && "cursor-pointer -outline-offset-6 transition-colors hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-focus active:bg-surface-pressed",
+        e
+      ),
+      ...a,
+      children: [
+        t,
+        l && /* @__PURE__ */ f(b, { children: [
+          d && /* @__PURE__ */ s(w, { className: "text-muted", size: 20 }),
+          !d && /* @__PURE__ */ s(y, { className: "text-muted", size: 20 })
+        ] })
+      ]
+    }
+  );
+};
+D.displayName = "CardHeader";
+const E = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: r,
+    className: o("flex min-w-0 flex-1 items-center gap-12", e),
+    ...a,
+    children: t
+  }
+);
+E.displayName = "CardLeading";
+const T = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => {
+  const { align: n } = p({
+    consumerName: "CardContent",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "flex min-w-0 flex-1 flex-col gap-4",
+        n === "right" && "items-end text-end",
+        e
+      ),
+      ...a,
+      children: t
+    }
+  );
+};
+T.displayName = "CardContent";
+const j = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => {
+  const { align: n } = p({
+    consumerName: "CardContentRow",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "flex min-w-0 items-center gap-8",
+        n === "right" && "justify-end",
+        e
+      ),
+      ...a,
+      children: t
+    }
+  );
+};
+j.displayName = "CardContentRow";
+const q = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => {
+  const n = c({
+    consumerName: "CardContentTitle"
+  });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "truncate body-2-semi-bold",
+        n && "text-disabled",
+        e
+      ),
+      ...a,
+      children: t
+    }
+  );
+};
+q.displayName = "CardContentTitle";
+const P = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => {
+  const n = c({
+    consumerName: "CardContentDescription"
+  });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "truncate body-3",
+        n ? "text-disabled" : "text-muted",
+        e
+      ),
+      ...a,
+      children: t
+    }
+  );
+};
+P.displayName = "CardContentDescription";
+const z = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => {
+  const n = c({
+    consumerName: "CardTrailing"
+  });
+  return /* @__PURE__ */ s(F, { value: { align: "right" }, children: /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: o(
+        "flex shrink-0 items-center",
+        n && "text-disabled",
+        e
+      ),
+      ...a,
+      children: t
+    }
+  ) });
+};
+z.displayName = "CardTrailing";
+const V = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => {
+  const n = c({
+    consumerName: "CardFooter"
+  }), { footerExpanded: i } = v({
+    consumerName: "CardFooter",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: o(
+        "grid flex-1 bg-muted-transparent transition-[grid-template-rows] duration-300",
+        i ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ s("div", { className: "overflow-hidden", children: /* @__PURE__ */ s(
+        "div",
+        {
+          ref: r,
+          className: o(
+            "flex w-full flex-col gap-8 px-12 py-10",
+            n && "text-disabled",
+            e
+          ),
+          ...a,
+          children: t
+        }
+      ) })
+    }
+  );
+};
+V.displayName = "CardFooter";
+const B = ({
+  ref: r,
+  children: t,
+  className: e,
+  ...a
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: r,
+    className: o("flex flex-row justify-end gap-10", e),
+    ...a,
+    children: t
+  }
+);
+B.displayName = "CardFooterActions";
+export {
+  A as Card,
+  T as CardContent,
+  P as CardContentDescription,
+  j as CardContentRow,
+  q as CardContentTitle,
+  V as CardFooter,
+  B as CardFooterActions,
+  D as CardHeader,
+  E as CardLeading,
+  z as CardTrailing,
+  k as resolveCardInnerContext
+};

package/dist/lib/Components/Card/index.d.ts

@@ -0,0 +1,3 @@
+export { Card, CardHeader, CardLeading, CardContent, CardContentRow, CardContentTitle, CardContentDescription, CardTrailing, CardFooter, CardFooterActions, } from './Card';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,UAAU,EACV,iBAAiB,GAClB,MAAM,QAAQ,CAAC;AAChB,cAAc,SAAS,CAAC"}

package/dist/lib/Components/Card/types.d.ts

@@ -0,0 +1,134 @@
+import { ComponentPropsWithRef, MouseEventHandler, ReactNode } from 'react';
+export type CardType = 'interactive' | 'expandable' | 'info';
+export type CardContextValue = {
+    cardClickable: boolean;
+    headerClickable: boolean;
+    footerExpanded: boolean;
+    onHeaderClick?: MouseEventHandler<HTMLDivElement>;
+};
+export type CardContentAlignContextValue = {
+    align?: 'left' | 'right';
+};
+export type CardProps = {
+    /**
+     * The interaction mode of the card.
+     * - `'interactive'` (default): whole card is clickable with hover/pressed states.
+     * - `'expandable'`: only the header is clickable, toggles footer visibility.
+     * - `'info'`: data-display only, no built-in click handling.
+     * @default 'interactive'
+     */
+    type?: CardType;
+    /**
+     * Whether the card footer is expanded (visible).
+     * Only relevant when `type="expandable"`.
+     * When `false`, CardFooter is hidden. When `undefined`, CardFooter is always visible.
+     */
+    expanded?: boolean;
+    /**
+     * Whether the card shows a selection outline.
+     */
+    outlined?: boolean;
+    /**
+     * Whether the card is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The card content (CardHeader, CardFooter, etc.).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardHeaderProps = {
+    /**
+     * The header content (CardLeading, CardTrailing).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardLeadingProps = {
+    /**
+     * The leading content (icon + CardContent).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardContentProps = {
+    /**
+     * The content (CardContentTitle, CardContentDescription).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardContentTitleProps = {
+    /**
+     * The title text or custom inline content.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardContentDescriptionProps = {
+    /**
+     * The description text or custom inline content.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardContentRowProps = {
+    /**
+     * The row content (CardContentTitle or CardContentDescription alongside additional elements like Tag).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardTrailingProps = {
+    /**
+     * The trailing content (Button, Tag, CardContent, etc.).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardFooterProps = {
+    /**
+     * The footer content (DescriptionList, Button, etc.).
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+export type CardFooterActionsProps = {
+    /**
+     * The action buttons to display in a horizontal row.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes for layout adjustments.
+     */
+    className?: string;
+} & ComponentPropsWithRef<'div'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/Card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,iBAAiB,EACjB,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,QAAQ,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,CAAC;AAE7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}

package/dist/lib/Components/DataTable/DataTable.js

@@ -75,7 +75,7 @@ const p = ({
   }) }, a.id)) });
 };
 p.displayName = "DataTableHeader";
-const J = ({ className: n, ref: r, ...o }) => {
+const z = ({ className: n, ref: r, ...o }) => {
   const {
     appearance: e,
     paginationMode: a,
@@ -106,7 +106,7 @@ const J = ({ className: n, ref: r, ...o }) => {
     }
   );
 };
-J.displayName = "DataTable";
+z.displayName = "DataTable";
 const g = ({ className: n, ref: r, ...o }) => {
   const { table: e } = d({
     consumerName: "DataTableBody",
@@ -115,7 +115,7 @@ const g = ({ className: n, ref: r, ...o }) => {
   return /* @__PURE__ */ l(T, { ref: r, className: n, ...o, children: e.getRowModel().rows.map((a) => /* @__PURE__ */ l(b, { row: a }, a.id)) });
 };
 g.displayName = "DataTableBody";
-const K = (n, r) => {
+const L = (n, r) => {
   const o = [];
   let e = null;
   for (const a of n) {
@@ -131,7 +131,7 @@ const K = (n, r) => {
   const { table: e, groupBy: a, renderGroupHeader: t } = d({
     consumerName: "DataTableGroupedBody",
     contextRequired: !0
-  }), c = K(e.getRowModel().rows, a);
+  }), c = L(e.getRowModel().rows, a);
   return /* @__PURE__ */ l(T, { ref: r, className: n, ...o, children: c.map((i) => /* @__PURE__ */ u(N, { children: [
     /* @__PURE__ */ l(I, { colSpan: i.rows[0].getVisibleCells().length, children: t ? t({ row: i.rows[0], count: i.count }) : i.key }),
     i.rows.map((s) => /* @__PURE__ */ l(b, { row: s }, s.id))
@@ -165,7 +165,7 @@ const b = ({ row: n }) => {
   );
 };
 b.displayName = "DataTableRow";
-const L = ({
+const A = ({
   onChange: n,
   ...r
 }) => {
@@ -187,9 +187,9 @@ const L = ({
     }
   );
 };
-L.displayName = "DataTableGlobalSearchInput";
+A.displayName = "DataTableGlobalSearchInput";
 export {
-  J as DataTable,
-  L as DataTableGlobalSearchInput,
+  z as DataTable,
+  A as DataTableGlobalSearchInput,
   V as DataTableRoot
 };

package/dist/lib/Components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EAGjB,WAAW,EACX,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAwBjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,MAAM,CAAC,EAAE,MAAc,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAM/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAE7D;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAqDxD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAkBpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;oEAOpB,eAAe;;CAoBjB,CAAC;AAGF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY;6CAKtB,iBAAiB;;CAWnB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EAGjB,WAAW,EACX,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAwBjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,MAAM,CAAC,EAAE,MAAc,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAM/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAE7D;AAED,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAqDxD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAkBpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;oEAOpB,eAAe;;CAqBjB,CAAC;AAGF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY;6CAKtB,iBAAiB;;CAWnB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/Components/Dialog/Dialog.js

@@ -1,8 +1,8 @@
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { createSafeContext as u, cn as n } from "../../../libs/utils-shared/dist/index.js";
-import * as l from "@radix-ui/react-dialog";
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
+import { createSafeContext as m, cn as n } from "../../../libs/utils-shared/dist/index.js";
+import * as i from "@radix-ui/react-dialog";
 import { cva as f } from "class-variance-authority";
-const [h, r] = u("Dialog"), x = f(
+const [h, r] = m("Dialog"), x = f(
   [
     "flex w-400 max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl bg-canvas-sheet pb-24",
     "fixed top-[50%] left-[50%] z-dialog-content translate-[-50%]",
@@ -21,18 +21,18 @@ const [h, r] = u("Dialog"), x = f(
   }
 );
 function C({ height: a = "hug", ...t }) {
-  return /* @__PURE__ */ o(h, { value: { height: a }, children: /* @__PURE__ */ o(l.Root, { "data-slot": "dialog", ...t }) });
+  return /* @__PURE__ */ o(h, { value: { height: a }, children: /* @__PURE__ */ o(i.Root, { "data-slot": "dialog", ...t }) });
 }
 function w({ ...a }) {
-  return /* @__PURE__ */ o(l.Trigger, { "data-slot": "dialog-trigger", ...a });
+  return /* @__PURE__ */ o(i.Trigger, { "data-slot": "dialog-trigger", ...a });
 }
 function p({
   ...a
 }) {
-  return /* @__PURE__ */ o(l.Portal, { "data-slot": "dialog-portal", ...a });
+  return /* @__PURE__ */ o(i.Portal, { "data-slot": "dialog-portal", ...a });
 }
 const s = ({ ref: a, className: t, ...e }) => /* @__PURE__ */ o(
-  l.Overlay,
+  i.Overlay,
   {
     ref: a,
     "data-slot": "dialog-overlay",
@@ -49,17 +49,17 @@ function P({
   children: t,
   ...e
 }) {
-  const { height: i } = r({
+  const { height: l } = r({
     consumerName: "DialogContent",
     contextRequired: !0
   });
-  return /* @__PURE__ */ m(p, { "data-slot": "dialog-portal", children: [
+  return /* @__PURE__ */ u(p, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ o(s, {}),
     /* @__PURE__ */ o(
-      l.Content,
+      i.Content,
       {
         "data-slot": "dialog-content",
-        className: n(x({ height: i }), a),
+        className: n(x({ height: l }), a),
         ...e,
         children: t
       }
@@ -70,7 +70,7 @@ const v = ({
   ref: a,
   className: t,
   children: e,
-  scrollbarWidth: i = "none",
+  scrollbarWidth: l = "none",
   style: d,
   ...g
 }) => {
@@ -83,11 +83,12 @@ const v = ({
     {
       ref: a,
       "data-slot": "dialog-body",
-      style: { scrollbarWidth: i, ...d },
+      style: d,
       className: n(
         "-mb-24 flex min-h-0 grow flex-col overflow-y-auto px-24 pb-24",
         c === "hug" ? "basis-auto" : "basis-0",
-        t
+        t,
+        l === "auto" ? "scrollbar-custom" : "scrollbar-none"
       ),
       ...g,
       children: e
@@ -95,26 +96,26 @@ const v = ({
   );
 };
 v.displayName = "DialogBody";
-const y = ({
+const D = ({
   ref: a,
   className: t,
   children: e,
-  ...i
+  ...l
 }) => /* @__PURE__ */ o(
   "div",
   {
     ref: a,
     "data-slot": "dialog-footer",
     className: n("flex shrink-0 justify-end gap-8 px-24 pt-24", t),
-    ...i,
+    ...l,
     children: e
   }
 );
-y.displayName = "DialogFooter";
+D.displayName = "DialogFooter";
 export {
   C as Dialog,
   v as DialogBody,
   P as DialogContent,
-  y as DialogFooter,
+  D as DialogFooter,
   w as DialogTrigger
 };