@vkzstudio/muza-ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,62 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ ...props }: React.ComponentProps<import('react').FC<import('@radix-ui/react-dropdown-menu').DropdownMenuProps>>) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    tags: string[];
+    argTypes: {
+        defaultOpen: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        modal: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        dir: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+        };
+        open: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
+        onOpenChange: {
+            control: false;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcons: Story;
+export declare const WithSeparator: Story;
+export declare const WithDisabledItem: Story;
+export declare const ActiveMenuItem: Story;
+export declare const WithButton: Story;
+export declare const ItemVariants: Story;
+export declare const WithCheckboxItems: Story;
+export declare const WithCheckboxItemsWithCustomContent: Story;
+export declare const WithRadioGroup: Story;
+//# sourceMappingURL=DropdownMenu.stories.d.ts.map

package/dist/components/DropdownMenu/DropdownMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AA2B3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC2B,CAAA;AAErC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAyBxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqC/B,CAAA;AAED,eAAO,MAAM,kCAAkC,EAAE,KAyEhD,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAA"}

package/dist/components/DropdownMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DropdownMenu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DropdownMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/components/EdgeButton/EdgeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeButton.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,QAAA,MAAM,kBAAkB;;8EA0BvB,CAAA;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,QAAA,MAAM,UAAU,2FA8Bf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"EdgeButton.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,QAAA,MAAM,kBAAkB;;8EAwBvB,CAAA;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,QAAA,MAAM,UAAU,2FAuCf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/EdgeButton/EdgeButton.js

@@ -0,0 +1,72 @@
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import d from "react";
+import { cva as u } from "class-variance-authority";
+import { sharedButtonVariants as o } from "../Button/buttonVariants.js";
+import { Typography as l } from "../Typography/Typography.js";
+import { cn as f } from "../../utils/cn.js";
+const z = u(
+  [
+    "inline-flex items-center justify-center",
+    "h-comp-help-button-h gap-comp-button-gap px-comp-help-button-p",
+    "rounded-tl-2xl",
+    "&>svg]:duration-250 transition-colors duration-250 [&>svg]:transition-opacity",
+    "[&>svg]:size-icon-medium",
+    "disabled:pointer-events-none",
+    ...o.primary
+  ],
+  {
+    variants: {
+      disabled: {
+        true: [
+          // 'bg-comp-button-fill-primary-disabled text-comp-button-text-text-disabled',
+          "pointer-events-none",
+          "[&>svg]:text-comp-button-icon-brand-disabled"
+        ]
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), g = d.forwardRef(
+  ({ onClick: e, disabled: t, text: i, className: r, asChild: a, icon: s, ...n }, p) => /* @__PURE__ */ m(
+    a ? "span" : "button",
+    {
+      ref: p,
+      type: "button",
+      onClick: t ? void 0 : e,
+      disabled: t,
+      className: f(
+        "inline-flex items-center justify-center",
+        "h-comp-help-button-h gap-comp-button-gap px-comp-help-button-p",
+        "rounded-tl-2xl",
+        "cursor-pointer disabled:pointer-events-none",
+        "&>svg]:duration-250 transition-colors duration-250 [&>svg]:transition-opacity",
+        "[&>svg]:size-icon-medium",
+        ...o.primary,
+        r
+      ),
+      ...n,
+      children: [
+        s,
+        /* @__PURE__ */ c(
+          l,
+          {
+            component: "span",
+            size: "base",
+            variant: "cta",
+            weight: "medium",
+            fixY: !0,
+            children: i
+          }
+        ),
+        n.children
+      ]
+    }
+  )
+);
+g.displayName = "EdgeButton";
+export {
+  g as EdgeButton,
+  z as edgeButtonVariants
+};

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

@@ -6,7 +6,6 @@ type Story = StoryObj<typeof EdgeButton>;
 export declare const Default: Story;
 export declare const WithIcon: Story;
 export declare const InteractiveStates: Story;
-export declare const EventHandlers: Story;
 export declare const Accessibility: Story;
 export declare const Playground: Story;
 //# sourceMappingURL=EdgeButton.stories.d.ts.map

package/dist/components/EdgeButton/EdgeButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EdgeButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAKzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAuEjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAmD3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAkD3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA"}
+{"version":3,"file":"EdgeButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAuEjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAmD3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAA"}

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    headline?: string;
+    text?: string;
+    className?: string;
+    buttonsLayout?: 'horizontal' | 'vertical';
+    children?: React.ReactNode;
+}
+declare const EmptyState: ({ icon, className, headline, text, children, buttonsLayout, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export { EmptyState };
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/EmptyState/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,UAAU,GAAI,+DAOjB,eAAe,4CA6CjB,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,59 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { Typography as r } from "../Typography/Typography.js";
+import { cn as c } from "../../utils/cn.js";
+const x = ({
+  icon: m,
+  className: o,
+  headline: e,
+  text: t,
+  children: i,
+  buttonsLayout: l
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: c(
+      "flex flex-col items-center gap-comp-empty-state-gap",
+      "[&>svg]:size-comp-empty-state-ico-size [&>svg]:text-gray-500",
+      o
+    ),
+    children: [
+      m,
+      (e || t) && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2xs text-center align-middle", children: [
+        e && /* @__PURE__ */ a(
+          r,
+          {
+            component: "p",
+            variant: "body",
+            weight: "medium",
+            size: "base",
+            className: "text-text-dark-secondary",
+            children: e
+          }
+        ),
+        t && /* @__PURE__ */ a(
+          r,
+          {
+            component: "p",
+            variant: "body",
+            weight: "regular",
+            size: "sm",
+            className: "text-text-dark-secondary",
+            children: t
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: c("flex gap-sm", {
+            "flex-col": l === "vertical"
+          }),
+          children: i
+        }
+      )
+    ]
+  }
+);
+export {
+  x as EmptyState
+};

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { EmptyState } from './EmptyState';
+declare const meta: Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+export declare const TwoButtonsHorizontal: Story;
+export declare const TwoButtonsVertical: Story;
+export declare const OneButton: Story;
+export declare const NoButton: Story;
+//# sourceMappingURL=EmptyState.stories.d.ts.map

package/dist/components/EmptyState/EmptyState.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAuCjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAoBhC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAA"}

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export * from './EmptyState';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/EmptyState/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/components/ExpandableTable/ExpandableTable.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface IColumn<T> {
+    dataKey: keyof T;
+    title: ReactNode;
+    className?: string;
+    render?: (value: T[keyof T], rowData: T) => ReactNode;
+    responsive?: 'xs' | 'sm' | 'md' | 'lg';
+}
+export interface IExpandableTableRowCell<T> {
+    dataKey: keyof T;
+    className?: string;
+    title: ReactNode;
+    render?: (value: T[keyof T], rowData: T) => ReactNode;
+}
+export interface IExpandableTableRowSection<T> {
+    title?: ReactNode;
+    cells: IExpandableTableRowCell<T>[];
+}
+export interface ExpandableTableProps<T> {
+    data: T[];
+    columns: IColumn<T>[];
+    expandableRowSections?: IExpandableTableRowSection<T>[] | ((row: T) => IExpandableTableRowSection<T>[]);
+}
+export declare const ExpandableTable: <T>({ data, columns, expandableRowSections, }: ExpandableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExpandableTable.d.ts.map

package/dist/components/ExpandableTable/ExpandableTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableTable.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAA;AAgBnE,MAAM,WAAW,OAAO,CAAC,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,KAAK,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;IACrD,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACvC;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,OAAO,EAAE,MAAM,CAAC,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,SAAS,CAAA;CACtD;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAA;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IACrB,qBAAqB,CAAC,EAClB,0BAA0B,CAAC,CAAC,CAAC,EAAE,GAC/B,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;CAClD;AAmBD,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,2CAIjC,oBAAoB,CAAC,CAAC,CAAC,4CA+RzB,CAAA"}

package/dist/components/ExpandableTable/ExpandableTable.js

@@ -0,0 +1,231 @@
+import { jsxs as n, jsx as a, Fragment as j } from "react/jsx-runtime";
+import { useState as z, useMemo as K, Fragment as M } from "react";
+import { cva as A } from "class-variance-authority";
+import { useIsMinSm as H, useIsMinMd as L, useIsMinLg as x } from "../../hooks/use-is-breakpoint.js";
+import { Table as C, TableHeader as O, TableRow as u, TableHead as V, TableBody as _, TableCell as v } from "./Table.js";
+import { Typography as p } from "../Typography/Typography.js";
+import { Flex as B } from "../Flex/Flex.js";
+import { cn as h } from "../../utils/cn.js";
+import { AltArrowDownOutline as q } from "@solar-icons/react-perf";
+const b = A("", {
+  variants: {
+    responsive: {
+      xs: "",
+      sm: "hidden sm:table-cell",
+      md: "hidden md:table-cell",
+      lg: "hidden lg:table-cell"
+    },
+    reverse: {
+      xs: "hidden",
+      sm: "sm:hidden",
+      md: "md:hidden",
+      lg: "lg:hidden"
+    }
+  }
+}), S = ({
+  data: F,
+  columns: d,
+  expandableRowSections: s
+}) => {
+  const [t, P] = z(/* @__PURE__ */ new Set()), y = (e) => {
+    P((r) => {
+      const l = new Set(r);
+      return l.has(e) ? l.delete(e) : l.add(e), l;
+    });
+  }, m = K(() => {
+    const e = d.filter((r) => r.responsive).map((r) => r.responsive);
+    return e.includes("lg") ? "lg" : e.includes("md") ? "md" : e.includes("sm") ? "sm" : e.includes("xs") ? "xs" : null;
+  }, [d]), N = H(), k = L(), T = x(), E = K(() => m ? m === "lg" ? T : m === "md" ? k : m === "sm" ? N : !1 : !1, [m, N, k, T]), c = !s && !!m && !E;
+  return /* @__PURE__ */ n(C, { children: [
+    /* @__PURE__ */ a(O, { children: /* @__PURE__ */ a(u, { className: "after:hidden", children: d.map((e, r) => /* @__PURE__ */ a(
+      V,
+      {
+        className: h(
+          e.className,
+          b({ responsive: e.responsive })
+        ),
+        children: e.title
+      },
+      r
+    )) }) }),
+    /* @__PURE__ */ a(_, { children: F.map((e, r) => {
+      var l;
+      return /* @__PURE__ */ n(M, { children: [
+        /* @__PURE__ */ n(
+          u,
+          {
+            hideBottomSpacing: t.has(r) || c,
+            isExpanded: t.has(r) || c,
+            colNumber: d.length + 1,
+            expandablePosition: s && t.has(r) || c ? "top" : "none",
+            className: h("focus-visible-default", {
+              "cursor-pointer": s,
+              "hover:after:bg-surface-base-primary": !s
+            }),
+            onClick: s ? () => y(r) : void 0,
+            onKeyDown: s ? (i) => {
+              (i.key === "Enter" || i.key === " ") && (i.preventDefault(), y(r));
+            } : void 0,
+            tabIndex: s ? 0 : void 0,
+            role: s ? "button" : void 0,
+            "aria-expanded": s ? t.has(r) : void 0,
+            children: [
+              d.map((i, o) => /* @__PURE__ */ a(
+                v,
+                {
+                  expandablePosition: s && t.has(r) ? "top" : "none",
+                  className: h(
+                    i.className,
+                    b({ responsive: i.responsive })
+                  ),
+                  children: i.render ? i.render(e[i.dataKey], e) : /* @__PURE__ */ a(
+                    p,
+                    {
+                      variant: "body",
+                      size: "base",
+                      weight: "medium",
+                      component: "span",
+                      children: e[i.dataKey]
+                    }
+                  )
+                },
+                o
+              )),
+              s && /* @__PURE__ */ a(
+                v,
+                {
+                  className: "w-[68px]",
+                  expandablePosition: t.has(r) ? "top" : "none",
+                  children: /* @__PURE__ */ a(
+                    q,
+                    {
+                      className: h(
+                        "text-text-brand-def transition-transform duration-200",
+                        {
+                          "rotate-180": t.has(r)
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          u,
+          {
+            hideBottomSpacing: s && !t.has(r) || !s && !c,
+            expandablePosition: "bottom",
+            className: h("hover:after:bg-surface-base-secondary", {
+              collapse: s && !t.has(r) || !s && !c
+            }),
+            children: /* @__PURE__ */ a(
+              v,
+              {
+                colSpan: d.length + 1,
+                padding: "none",
+                expandablePosition: "bottom",
+                children: /* @__PURE__ */ n(
+                  "div",
+                  {
+                    id: "test-id",
+                    className: h(
+                      "grid grid-cols-1 gap-2xl overflow-hidden px-comp-table-p py-2xl md:grid-cols-[auto_1fr]",
+                      t.has(r) ? "animate-expandable-row-down" : "animate-expandable-row-up"
+                    ),
+                    children: [
+                      !E && /* @__PURE__ */ n(j, { children: [
+                        /* @__PURE__ */ a(
+                          B,
+                          {
+                            gap: "md",
+                            direction: "column",
+                            className: "col-span-full",
+                            children: d.map((i, o) => /* @__PURE__ */ n(
+                              B,
+                              {
+                                align: "center",
+                                justify: "between",
+                                direction: "row",
+                                className: b({
+                                  reverse: i.responsive
+                                }),
+                                children: [
+                                  /* @__PURE__ */ a(p, { variant: "body", component: "span", children: i.title }),
+                                  i.render ? i.render(e[i.dataKey], e) : /* @__PURE__ */ a(
+                                    p,
+                                    {
+                                      variant: "body",
+                                      weight: "medium",
+                                      size: "base",
+                                      component: "span",
+                                      children: e[i.dataKey]
+                                    }
+                                  )
+                                ]
+                              },
+                              o
+                            ))
+                          }
+                        ),
+                        s && /* @__PURE__ */ a("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
+                      ] }),
+                      (l = typeof s == "function" ? s(e) : s) == null ? void 0 : l.map((i, o) => {
+                        if (!s) return null;
+                        const $ = typeof s == "function" ? s(e).length : s.length;
+                        return /* @__PURE__ */ n(M, { children: [
+                          /* @__PURE__ */ n("div", { className: "col-span-full grid grid-cols-1 gap-y-xl md:col-span-2 md:grid-cols-subgrid", children: [
+                            i.title && /* @__PURE__ */ a(
+                              p,
+                              {
+                                variant: "body",
+                                uppercase: !0,
+                                size: "sm",
+                                weight: "medium",
+                                component: "p",
+                                className: "text-text-brand-def md:col-span-2",
+                                children: i.title
+                              }
+                            ),
+                            /* @__PURE__ */ a("div", { className: "col-span-full grid grid-cols-1 gap-x-3xl md:col-span-2 md:grid-cols-subgrid md:gap-y-md", children: i.cells.flatMap((f, g) => [
+                              /* @__PURE__ */ a(
+                                p,
+                                {
+                                  component: "span",
+                                  variant: "body",
+                                  className: "mb-xs text-text-dark-primary-def md:mb-0",
+                                  children: f.title
+                                },
+                                `${g}-label`
+                              ),
+                              f.render ? /* @__PURE__ */ a("div", { children: f.render(e[f.dataKey], e) }, `${g}-value`) : /* @__PURE__ */ a(
+                                p,
+                                {
+                                  variant: "body",
+                                  weight: "medium",
+                                  component: "span",
+                                  className: "mb-md last-of-type:mb-0 md:mb-0",
+                                  children: e[f.dataKey]
+                                },
+                                `${g}-value`
+                              )
+                            ]) })
+                          ] }),
+                          o < $ - 1 && /* @__PURE__ */ a("hr", { className: "col-span-full text-stroke-base-secondary md:col-span-2" })
+                        ] }, o);
+                      })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] }, r);
+    }) })
+  ] });
+};
+export {
+  S as ExpandableTable
+};

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: <T>({ data, columns, expandableRowSections, }: import('./ExpandableTable').ExpandableTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+        design: {
+            type: string;
+            url: string;
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Orders: Story;
+export declare const WithoutExpandable: Story;
+export declare const WithLinksAndButtons: Story;
+export declare const SingleRow: Story;
+export declare const DynamicExpandableRowSections: Story;
+//# sourceMappingURL=ExpandableTable.stories.d.ts.map

package/dist/components/ExpandableTable/ExpandableTable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/ExpandableTable.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAM3D,QAAA,MAAM,IAAI;;;;;;;;;;;CAW8B,CAAA;AAExC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA+MlC,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAoJjC,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAmBvB,CAAA;AAED,eAAO,MAAM,4BAA4B,EAAE,KAqH1C,CAAA"}

package/dist/components/ExpandableTable/Table.d.ts

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+declare const Table: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLTableElement> & import('react').RefAttributes<HTMLTableElement>>;
+declare const TableHeader: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLTableRowElement> & VariantProps<(props?: ({
+    expandablePosition?: "none" | "bottom" | "top" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+    hideBottomSpacing?: boolean;
+    colNumber?: number;
+    isExpanded?: boolean;
+} & import('react').RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: import('react').ForwardRefExoticComponent<import('react').ThHTMLAttributes<HTMLTableCellElement> & import('react').RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: import('react').ForwardRefExoticComponent<import('react').TdHTMLAttributes<HTMLTableCellElement> & VariantProps<(props?: ({
+    padding?: "none" | "default" | null | undefined;
+    expandablePosition?: "none" | "bottom" | "top" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLTableCellElement>>;
+export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };
+//# sourceMappingURL=Table.d.ts.map

package/dist/components/ExpandableTable/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableTable/Table.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,KAAK,+IAST,CAAA;AAGF,QAAA,MAAM,WAAW,6JAKf,CAAA;AAGF,QAAA,MAAM,SAAS,6JAKb,CAAA;AAoBF,QAAA,MAAM,QAAQ;;;wBAIY,OAAO;gBACf,MAAM;iBACL,OAAO;uDAoCzB,CAAA;AAGD,QAAA,MAAM,SAAS,yJAkBb,CAAA;AAqBF,QAAA,MAAM,SAAS;;;sIAab,CAAA;AAGF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA"}