@vkzstudio/muza-ui 1.0.44 → 1.0.46

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.d.ts

@@ -0,0 +1,266 @@
+import { ResponsiveBreakpoint } from '../../hooks/use-is-breakpoint';
+import * as React from 'react';
+/**
+ * Column definition for a single layout of the ResponsiveLayoutTable.
+ *
+ * Each column either renders a raw value from the row via `dataKey` (wrapped in
+ * a Typography component) or a fully custom cell via `render`. Use `skeleton` to
+ * describe the loading placeholder shape.
+ *
+ * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * ```tsx
+ * const columns: ResponsiveLayoutTableColumn<Transaction>[] = [
+ *   { title: 'Customer', dataKey: 'customer', className: 'w-[240px]' },
+ *   {
+ *     title: 'Amount',
+ *     render: (row) => <AmountCell row={row} />,
+ *     skeleton: <Skeleton className="h-4 w-20" />,
+ *   },
+ * ]
+ * ```
+ */
+export interface ResponsiveLayoutTableColumn<T extends {
+    id: string | number;
+}> {
+    /** Header label. Accepts ReactNode for multi-line headers (e.g. tablet stacked text). */
+    title?: React.ReactNode;
+    /**
+     * Property key from the data object. Used as default cell content when `render`
+     * is omitted — the raw value is rendered inside a Typography component. Ignored
+     * when `render` is provided.
+     */
+    dataKey?: keyof T;
+    /** Additional CSS class applied to both the header and body cells. */
+    className?: string;
+    /**
+     * Truncates default cell text to the specified number of lines. Only applies
+     * when `render` is omitted. `true` or `1` clamps to one line, `2` clamps to two.
+     * @default false
+     */
+    lineClamp?: boolean | 1 | 2;
+    /**
+     * Custom render function for cell content. Receives the full row data so that
+     * compressed layouts can combine data from multiple fields in a single cell.
+     * When omitted, the raw `dataKey` value is displayed inside a Typography component.
+     *
+     * @param rowData - The data object for the current row
+     * @param rowIndex - The zero-based index of the row in `data`
+     * @param disabled - Whether the table is in the disabled state (forwarded from
+     *   `ResponsiveLayoutTableProps.disabled` so cells can mute their own styling)
+     */
+    render?: (rowData: T, rowIndex: number, disabled?: boolean) => React.ReactNode;
+    /**
+     * Skeleton placeholder rendered in this cell when the row is in a loading state
+     * (see `ResponsiveLayoutTableProps.isRowLoading`). Compose `<Skeleton />` primitives
+     * to match the shape of the real cell. Omit to fall back to a generic full-width bar.
+     */
+    skeleton?: React.ReactNode;
+}
+/**
+ * Per-layout className overrides for the header and body rows.
+ *
+ * @example
+ * ```tsx
+ * classNames: { row: 'border-dashed', header: 'bg-surface-base-tertiary' }
+ * ```
+ */
+export interface ResponsiveLayoutTableLayoutClassNames {
+    /** Additional CSS class applied to each body row. */
+    row?: string;
+    /** Additional CSS class applied to the header row. */
+    header?: string;
+}
+/**
+ * A single layout configuration for the ResponsiveLayoutTable. Each layout
+ * describes a distinct set of columns that becomes active when its `responsive`
+ * predicate matches. Layouts are evaluated in order and the first match wins;
+ * the last entry should omit `responsive` so it matches as a fallback.
+ *
+ * @typeParam T - The type of data objects in each row
+ *
+ * @example
+ * ```tsx
+ * const layouts: ResponsiveLayoutTableLayout<Transaction>[] = [
+ *   { responsive: 'lg', columns: desktopColumns },
+ *   { responsive: 'md', columns: tabletColumns },
+ *   { showHeader: false, columns: phoneColumns },
+ * ]
+ * ```
+ */
+export interface ResponsiveLayoutTableLayout<T extends {
+    id: string | number;
+}> {
+    /**
+     * Controls when this layout is active.
+     * - Named breakpoint (`'xs'..'3xl'`): active at and above that breakpoint, resolved internally via hooks.
+     * - Boolean: caller supplies the result directly (e.g. from `useMediaQuery('(min-width: 52rem)')`).
+     *   `true` activates this layout, `false` skips it. Use this for arbitrary thresholds.
+     * - Omitted: treated as fallback (always matches).
+     *
+     * @see {@link ResponsiveBreakpoint}
+     */
+    responsive?: ResponsiveBreakpoint | boolean;
+    /** Column definitions for this layout. */
+    columns: ResponsiveLayoutTableColumn<T>[];
+    /**
+     * Whether to show the header row.
+     * @default true
+     */
+    showHeader?: boolean;
+    /** Per-layout className overrides for the header and body rows. */
+    classNames?: ResponsiveLayoutTableLayoutClassNames;
+}
+/**
+ * Top-level className overrides for the ResponsiveLayoutTable.
+ *
+ * @example
+ * ```tsx
+ * classNames={{
+ *   root: 'rounded-xl',
+ *   rowBackgroundInset:
+ *     'before:-left-comp-webcheckout-table-cells-p-hor before:-right-comp-webcheckout-table-cells-p-hor',
+ * }}
+ * ```
+ */
+export interface ResponsiveLayoutTableClassNames {
+    /** Outer wrapper `<div>`. */
+    root?: string;
+    /**
+     * Classes applied to each row's `::before` pseudo-element when
+     * `overflowingRowBackground` is `true`. Default is zero bleed
+     * (the background sits flush inside the row). Consumer passes any
+     * Tailwind classes with the `before:` prefix and can use `first:` /
+     * `last:` variants to extend the tint past the first / last row so it
+     * reaches the surrounding card's top / bottom padding.
+     *
+     * @example
+     * ```tsx
+     * classNames={{
+     *   rowBackgroundInset:
+     *     'before:-left-comp-webcheckout-table-cells-p-hor ' +
+     *     'before:-right-comp-webcheckout-table-cells-p-hor ' +
+     *     'first:before:-top-sm last:before:-bottom-sm',
+     * }}
+     * ```
+     */
+    rowBackgroundInset?: string;
+}
+/**
+ * Props for the ResponsiveLayoutTable component.
+ * @typeParam T - The type of data objects in each row. Must include an
+ *   `id: string | number` field so each row has a stable React key —
+ *   keying by index corrupts focus / selection / animation state when
+ *   rows reorder, filter, or paginate.
+ */
+export interface ResponsiveLayoutTableProps<T extends {
+    id: string | number;
+}> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    /** Array of data objects where each item represents one table row. */
+    data: T[];
+    /**
+     * Array of layout configurations ordered from largest to smallest breakpoint.
+     * The first layout whose `responsive` matches wins. The last layout should
+     * omit `responsive` (fallback for smallest viewports).
+     *
+     * Uses the same pattern as ExpandableTable's column `responsive` prop:
+     * - Named breakpoint (`'xs'..'3xl'`): resolved internally via hooks.
+     * - Boolean: consumer controls it with their own `useMediaQuery()`.
+     *
+     * @example
+     * ```tsx
+     * layouts={[
+     *   { responsive: 'lg', columns: desktopColumns },
+     *   { responsive: 'md', columns: tabletColumns },
+     *   { showHeader: false, columns: phoneColumns },
+     * ]}
+     * ```
+     */
+    layouts: ResponsiveLayoutTableLayout<T>[];
+    /**
+     * Fires when a row is clicked. When provided and not `disabled`, rows become
+     * interactive: pointer cursor, keyboard-activatable, and a hover border.
+     */
+    onRowClick?: (rowData: T, rowIndex: number) => void;
+    /** Prevents interaction and applies muted text colors. @default false */
+    disabled?: boolean;
+    /**
+     * Predicate that marks a row as "new", applying the
+     * `bg-comp-responsive-layout-table-bg-success` tint. On interactive rows,
+     * hover and focus-visible backgrounds visually override the new-state tint.
+     */
+    isRowNew?: (rowData: T, rowIndex: number) => boolean;
+    /**
+     * Predicate that marks a row as loading. Each cell renders its column
+     * `skeleton` (or a default bar) instead of the normal content, and the row
+     * becomes non-interactive regardless of `onRowClick`. The `isRowNew` tint is
+     * also suppressed for loading rows.
+     *
+     * Use for initial load (an array of empty objects with the predicate always
+     * returning true) and for pagination (append placeholder rows after real
+     * data and detect them in the predicate).
+     */
+    isRowLoading?: (rowData: T, rowIndex: number) => boolean;
+    /**
+     * When `true`, row backgrounds (new/hover/focus) render via a `::before`
+     * pseudo-element sized to the row (zero bleed by default). The outer
+     * wrapper switches to `overflow: visible` in this mode — horizontal
+     * scrolling is disabled, so only use when your active layout fits the
+     * viewport (typically the phone layout).
+     *
+     * Pair with `classNames.rowBackgroundInset` to extend the tint past any
+     * edge — typically to bleed through the surrounding card's horizontal
+     * padding, and (via `first:` / `last:`) its top and bottom padding.
+     * @default false
+     */
+    overflowingRowBackground?: boolean;
+    /** className overrides for sub-elements. */
+    classNames?: ResponsiveLayoutTableClassNames;
+    /**
+     * Controls how column widths are calculated, mirroring the CSS
+     * `table-layout` property.
+     *
+     * - `'auto'` (default): Columns size based on their content. This is more
+     *   flexible. In case of overflow the content is scrollable.
+     * - `'fixed'`: Columns use fixed widths (from column definitions or equal
+     *   distribution). This is more predictable and performs better for large
+     *   datasets, but content may truncate.
+     *
+     * @default 'auto'
+     */
+    tableLayout?: 'auto' | 'fixed';
+}
+/**
+ * A responsive table that switches between completely different column layouts
+ * at configurable breakpoints. Each layout defines its own set of columns with
+ * independent headers and render functions, enabling compressed tablet views
+ * (stacked cells) and phone card layouts (single full-width column) — not just
+ * hidden columns.
+ *
+ * Supports named Tailwind breakpoints and arbitrary boolean values for custom
+ * thresholds. Rows become interactive when `onRowClick` is provided (pointer
+ * cursor, keyboard-activatable, hover border). Loading rows are driven by the
+ * `isRowLoading` predicate and render per-column `skeleton` placeholders.
+ *
+ * @typeParam T - The type of data objects in each row. Must include an
+ *   `id: string | number` field so rows receive a stable React key.
+ *
+ * @example
+ * ```tsx
+ * <ResponsiveLayoutTable
+ *   data={transactions}
+ *   layouts={[
+ *     { responsive: 'lg', columns: desktopColumns },
+ *     { responsive: 'md', columns: tabletColumns },
+ *     { showHeader: false, columns: phoneColumns },
+ *   ]}
+ *   onRowClick={(row) => navigate(`/transactions/${row.id}`)}
+ * />
+ * ```
+ */
+declare const ResponsiveLayoutTable: <T extends {
+    id: string | number;
+}>({ data, layouts, onRowClick, disabled, isRowNew, isRowLoading, overflowingRowBackground, classNames, tableLayout, ...props }: ResponsiveLayoutTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { ResponsiveLayoutTable };
+//# sourceMappingURL=ResponsiveLayoutTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayoutTable.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/ResponsiveLayoutTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.d.ts

@@ -0,0 +1,39 @@
+import { ResponsiveLayoutTableColumn, ResponsiveLayoutTableLayout } from './ResponsiveLayoutTable';
+export interface Transaction {
+    id: string;
+    date: string;
+    time: string;
+    customer: string;
+    transactionCode: string;
+    status: 'warning' | 'success' | 'info' | 'error';
+    statusLabel: string;
+    amount: number;
+    originalAmount?: number;
+    isNew?: boolean;
+}
+export declare const formatKc: (value: number) => string;
+export declare const transactions: Transaction[];
+interface CellProps {
+    row: Transaction;
+    disabled?: boolean;
+}
+export declare const DateTimeCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomerCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomerCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionCodeCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TransactionCodeCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const StatusCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StatusCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const AmountCell: ({ row, disabled, hideOriginalAmount, }: CellProps & {
+    hideOriginalAmount?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AmountCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const ActionArrowCell: ({ row, disabled }: CellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionArrowCellSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const desktopColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const tabletColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const phoneColumns: ResponsiveLayoutTableColumn<Transaction>[];
+export declare const layouts: ResponsiveLayoutTableLayout<Transaction>[];
+export {};
+//# sourceMappingURL=ResponsiveLayoutTable.examples.d.ts.map

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayoutTable.examples.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/ResponsiveLayoutTable.examples.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,2BAA2B,EAC3B,2BAA2B,EAC5B,MAAM,yBAAyB,CAAA;AAIhC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;IAChD,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAID,eAAO,MAAM,QAAQ,GAAI,OAAO,MAAM,WAC+B,CAAA;AAIrE,eAAO,MAAM,YAAY,EAAE,WAAW,EAkCrC,CAAA;AAID,UAAU,SAAS;IACjB,GAAG,EAAE,WAAW,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,YAAY,GAAI,mBAAmB,SAAS,4CAyBxD,CAAA;AAED,eAAO,MAAM,oBAAoB,+CAKhC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,mBAAmB,SAAS,4CAaxD,CAAA;AAED,eAAO,MAAM,oBAAoB,+CAEhC,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,mBAAmB,SAAS,4CAwC/D,CAAA;AAED,eAAO,MAAM,2BAA2B,+CAKvC,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,mBAAmB,SAAS,4CAItD,CAAA;AAED,eAAO,MAAM,kBAAkB,+CAE9B,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,wCAIxB,SAAS,GAAG;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,4CAgC9C,CAAA;AAED,eAAO,MAAM,kBAAkB,+CAE9B,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,mBAAmB,SAAS,4CAmC3D,CAAA;AAED,eAAO,MAAM,uBAAuB,+CAKnC,CAAA;AAID,eAAO,MAAM,cAAc,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAsDpE,CAAA;AAID,eAAO,MAAM,aAAa,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAqEnE,CAAA;AAID,eAAO,MAAM,YAAY,EAAE,2BAA2B,CAAC,WAAW,CAAC,EA2BlE,CAAA;AAID,eAAO,MAAM,OAAO,EAAE,2BAA2B,CAAC,WAAW,CAAC,EAI7D,CAAA"}

package/dist/components/ResponsiveLayoutTable/ResponsiveLayoutTable.js

@@ -0,0 +1,134 @@
+import { jsx as r, jsxs as T } from "react/jsx-runtime";
+import "react";
+import { useBreakpoints as E } from "../../hooks/use-is-breakpoint.js";
+import { Skeleton as H } from "../Skeleton/Skeleton.js";
+import { cn as l } from "../../utils/cn.js";
+import { typographyVariants as S, Typography as V } from "../Typography/Typography.js";
+const J = ({
+  data: y,
+  layouts: n,
+  onRowClick: f,
+  disabled: o = !1,
+  isRowNew: h,
+  isRowLoading: d,
+  overflowingRowBackground: i = !1,
+  classNames: c,
+  tableLayout: x,
+  ...k
+}) => {
+  const K = E(), g = (() => {
+    for (const e of n) {
+      if (e.responsive === void 0) return e;
+      if (typeof e.responsive == "boolean") {
+        if (e.responsive) return e;
+      } else if (K[e.responsive])
+        return e;
+    }
+    return n[n.length - 1];
+  })(), {
+    columns: u,
+    showHeader: m = !0,
+    classNames: p
+  } = g, j = !!f && !o;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: l(
+        "w-full",
+        i ? "overflow-visible" : "overflow-x-auto overflow-y-hidden",
+        c == null ? void 0 : c.root
+      ),
+      ...k,
+      children: /* @__PURE__ */ T(
+        "table",
+        {
+          className: l("w-full border-collapse", {
+            "table-fixed": x === "fixed"
+          }),
+          children: [
+            m && /* @__PURE__ */ r("thead", { children: /* @__PURE__ */ r("tr", { className: l(p == null ? void 0 : p.header), children: u.map((e, s) => /* @__PURE__ */ r(
+              "th",
+              {
+                className: l(
+                  S({
+                    size: "sm",
+                    uppercase: !0,
+                    variant: "body",
+                    weight: "medium"
+                  }),
+                  "h-comp-webcheckout-table-cells-h-first-row",
+                  "px-comp-webcheckout-table-cells-p-hor py-comp-webcheckout-table-cells-p-ver text-left",
+                  "text-text-dark-secondary",
+                  { "text-text-dark-disabled": o },
+                  e.className
+                ),
+                children: e.title
+              },
+              s
+            )) }) }),
+            /* @__PURE__ */ r("tbody", { children: y.map((e, s) => {
+              const a = (d == null ? void 0 : d(e, s)) ?? !1, v = !a && ((h == null ? void 0 : h(e, s)) ?? !1), b = j && !a;
+              return /* @__PURE__ */ r(
+                "tr",
+                {
+                  className: l(
+                    "border-t border-stroke-base-secondary",
+                    !m && "first:border-t-0",
+                    {
+                      "relative before:absolute before:inset-0 before:content-['']": i,
+                      "bg-comp-responsive-layout-table-bg-success": !i && v,
+                      "before:bg-comp-responsive-layout-table-bg-success": i && v,
+                      "cursor-pointer": b,
+                      "outline-0 hover:bg-surface-state-bg-info focus-visible:bg-surface-state-bg-info": b && !i,
+                      "outline-0 hover:before:bg-surface-state-bg-info focus-visible:before:bg-surface-state-bg-info": b && i
+                    },
+                    i && (c == null ? void 0 : c.rowBackgroundInset),
+                    p == null ? void 0 : p.row
+                  ),
+                  onClick: b ? () => f(e, s) : void 0,
+                  onKeyDown: b ? (t) => {
+                    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), f(e, s));
+                  } : void 0,
+                  tabIndex: b ? 0 : void 0,
+                  "aria-busy": a || void 0,
+                  children: u.map((t, z) => /* @__PURE__ */ r(
+                    "td",
+                    {
+                      className: l(
+                        "h-comp-webcheckout-table-cells-h w-full",
+                        "px-comp-webcheckout-table-cells-p-hor py-comp-webcheckout-table-cells-p-ver",
+                        i && "relative",
+                        t.className
+                      ),
+                      children: a ? t.skeleton ?? /* @__PURE__ */ r(H, { color: "light", className: "h-4 w-full" }) : t.render ? t.render(e, s, o) : /* @__PURE__ */ r(
+                        V,
+                        {
+                          variant: "body",
+                          size: "base",
+                          weight: "medium",
+                          component: "span",
+                          fixY: !0,
+                          className: l({
+                            "line-clamp-1": t.lineClamp === !0 || t.lineClamp === 1,
+                            "line-clamp-2": t.lineClamp === 2,
+                            "text-text-dark-disabled": o
+                          }),
+                          children: t.dataKey ? e[t.dataKey] : null
+                        }
+                      )
+                    },
+                    z
+                  ))
+                },
+                e.id
+              );
+            }) })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  J as ResponsiveLayoutTable
+};

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithRowClick: Story;
+export declare const WithNewRow: Story;
+export declare const NewRowWithRowClick: Story;
+export declare const OverflowingRowBackground: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const LoadingMore: Story;
+export declare const CustomBreakpoint: Story;
+//# sourceMappingURL=ResponsiveLayoutTable.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveLayoutTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/ResponsiveLayoutTable.stories.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAiB3D,QAAA,MAAM,IAAI,EAAE,IAoDX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAErB,eAAO,MAAM,OAAO,EAAE,KAmBrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KA8BtC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAA;AAUD,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAA;AAeD,eAAO,MAAM,WAAW,EAAE,KAwBzB,CAAA;AAID,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAA"}

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

@@ -0,0 +1,2 @@
+export { ResponsiveLayoutTable, type ResponsiveLayoutTableProps, type ResponsiveLayoutTableLayout, type ResponsiveLayoutTableColumn, type ResponsiveLayoutTableClassNames, type ResponsiveLayoutTableLayoutClassNames, } from './ResponsiveLayoutTable';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ResponsiveLayoutTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,2BAA2B,EAChC,KAAK,+BAA+B,EACpC,KAAK,qCAAqC,GAC3C,MAAM,yBAAyB,CAAA"}

package/dist/components/Select/Select.d.ts

@@ -6,6 +6,7 @@ import { default as React, ReactNode } from 'react';
  * const options: ISelectOption[] = [
  *   { value: 'a', label: 'Option A' },
  *   { value: 'b', label: 'Option B', disabled: true, icon: <Icon /> },
+ *   { value: 'c', label: 'Location C', description: 'Address line' },
  * ]
  */
 export interface ISelectOption {
@@ -13,6 +14,8 @@ export interface ISelectOption {
     value: string;
     /** Visible label rendered inside the dropdown item and in the trigger when selected. */
     label: ReactNode;
+    /** Secondary text rendered below the label, producing a two-line layout. */
+    description?: ReactNode;
     /** Prevents the option from being selected and applies disabled styling. @default false */
     disabled?: boolean;
     /** Icon rendered before the option label inside the dropdown. */
@@ -20,23 +23,25 @@ export interface ISelectOption {
 }
 /**
  * Props for the Select component.
+ *
+ * @see ISelectOption
  */
 export interface ISelectProps {
-    /** Label text displayed above the select trigger. */
+    /** Label text rendered above the trigger by `FormField`. */
     label?: string;
-    /** Helper text displayed below the select. Renders in error color when `error` is true. */
+    /** Helper text rendered below the trigger. Switches to the error color when `error` is `true`. */
     hint?: string;
-    /** Applies error styling to the trigger border and hint text. @default false */
+    /** Applies error styling to the trigger border and `hint` text. @default false */
     error?: boolean;
     /** Marks the field as required and shows an asterisk next to the label. @default false */
     required?: boolean;
-    /** Hides the required asterisk even when `required` is true. @default false */
+    /** Hides the required asterisk even when `required` is `true`. @default false */
     disableRequiredAsterisk?: boolean;
     /** Element rendered after the selected value inside the trigger. */
     suffix?: ReactNode;
     /** Icon or element rendered before the selected value inside the trigger. */
     prefix?: ReactNode;
-    /** Text shown when no option is selected. @default translations.select.placeholder */
+    /** Placeholder text shown when no option is selected. @default translations.select.placeholder */
     placeholder?: string;
     /** Text shown inside the dropdown when `options` is empty. @default translations.select.noOptions */
     emptyMessage?: string;
@@ -51,6 +56,7 @@ export interface ISelectProps {
      *   options={[
      *     { value: 'a', label: 'Option A' },
      *     { value: 'b', label: 'Option B', disabled: true, icon: <Icon /> },
+     *     { value: 'c', label: 'Location C', description: 'Address line' },
      *   ]}
      * />
      */
@@ -59,9 +65,16 @@ export interface ISelectProps {
     disabled?: boolean;
     /** Controlled selected value. Must match a `value` field in `options`. */
     value?: string;
-    /** Fires when the selected value changes. Receives the new value string. */
+    /**
+     * Fires when the user picks an option. Receives the newly selected `value` string.
+     *
+     * @example
+     * ```tsx
+     * <Select onChange={(value) => setSelected(value)} />
+     * ```
+     */
     onChange?: (value: string) => void;
-    /** Scrolls the dropdown to the selected option when opened. @default false */
+    /** Scrolls the dropdown to the selected option when it opens. @default false */
     shouldScrollToSelectedOption?: boolean;
     /** Distance in pixels from the viewport edge before the dropdown repositions. Passed to Radix collision padding. */
     collisionPadding?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAed;;;;;;;;GAQG;AACH,MAAM,WAAW,aAAa;IAC5B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,KAAK,EAAE,SAAS,CAAA;IAChB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2FAA2F;IAC3F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qGAAqG;IACrG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;;;OAWG;IACH,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,8EAA8E;IAC9E,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,oHAAoH;IACpH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,6HAA6H;IAC7H,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,MAAM,wFAyMlB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAgBd;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,KAAK,EAAE,SAAS,CAAA;IAChB,4EAA4E;IAC5E,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kGAAkG;IAClG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kFAAkF;IAClF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iFAAiF;IACjF,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,kGAAkG;IAClG,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qGAAqG;IACrG,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IAClC;;;;;;;;;;;;OAYG;IACH,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,gFAAgF;IAChF,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,oHAAoH;IACpH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,6HAA6H;IAC7H,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,MAAM,wFA+OlB,CAAA"}