@yuno-payments/dashboard-design-system 0.0.151 → 0.0.154

package/dist/components/atoms/checkbox/checkbox.d.ts

@@ -17,6 +17,14 @@ export interface CheckboxProps extends Omit<ComponentProps<typeof ShadcnCheckbox
      * Provides a synthetic ChangeEvent compatible with react-hook-form
      */
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional CSS classes to apply to the label element
+     */
+    labelClassName?: string;
+    /**
+     * Optional info icon with tooltip
+     */
+    info?: string;
 }
 /**
  * Checkbox component with optional label and description.

package/dist/components/atoms/checkbox/checkbox.js

@@ -1,11 +1,21 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { forwardRef as u, useId as d } from "react";
-import { Checkbox as g } from "../../../vendor/shadcn/checkbox.js";
+import { forwardRef as g, useId as C } from "react";
+import { Checkbox as j } from "../../../vendor/shadcn/checkbox.js";
 import { cn as x } from "../../../lib/utils.js";
-import { Label as C } from "../../../vendor/shadcn/label.js";
-const j = u(
-  ({ label: n, description: c, id: i, name: t, disabled: s, onChange: a, ...f }, l) => {
-    const p = d(), o = i || t || p, h = (r) => {
+import { Label as k } from "../label/label.js";
+const v = g(
+  ({
+    label: n,
+    description: c,
+    id: i,
+    name: t,
+    disabled: s,
+    onChange: a,
+    labelClassName: f,
+    info: l,
+    ...p
+  }, h) => {
+    const u = C(), o = i || t || u, d = (r) => {
       if (!a) return;
       a({
         target: {
@@ -26,14 +36,14 @@ const j = u(
         }
       });
     }, m = /* @__PURE__ */ e.jsx(
-      g,
+      j,
       {
-        ref: l,
+        ref: h,
         id: o,
         name: t,
         disabled: s,
-        onCheckedChange: h,
-        ...f,
+        onCheckedChange: d,
+        ...p,
         className: "size-3.5 cursor-pointer"
       }
     );
@@ -41,12 +51,14 @@ const j = u(
       m,
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5", children: [
         /* @__PURE__ */ e.jsx(
-          C,
+          k,
           {
             htmlFor: o,
+            info: l,
             className: x(
               "text-sm leading-none cursor-pointer",
-              s && "text-muted-foreground"
+              s && "text-muted-foreground",
+              f
             ),
             children: n
           }
@@ -65,7 +77,7 @@ const j = u(
     ] }) : m;
   }
 );
-j.displayName = "Checkbox";
+v.displayName = "Checkbox";
 export {
-  j as Checkbox
+  v as Checkbox
 };

package/dist/components/atoms/combobox/combobox.js

@@ -3,7 +3,7 @@ import { forwardRef as Y, useState as y, useRef as Z, useEffect as I } from "rea
 import { cn as m } from "../../../lib/utils.js";
 import { Combobox as _, ComboboxTrigger as A, ComboboxContent as W } from "../../../vendor/shadcn/combobox.js";
 import { Icon as $ } from "../icon/icon.js";
-import { Label as P } from "../../../vendor/shadcn/label.js";
+import { Label as P } from "../label/label.js";
 import { Typography as C } from "../typography/typography.js";
 import { Badge as N } from "../badge/badge.js";
 import { Checkbox as ee } from "../checkbox/checkbox.js";

package/dist/components/atoms/label/index.d.ts

@@ -1 +1 @@
-export { Label } from '../../../vendor/shadcn/label';
+export { Label } from './label';

package/dist/components/atoms/label/label.d.ts

@@ -0,0 +1,11 @@
+import { Label as ShadcnLabel } from '../../../vendor/shadcn/label';
+import { ComponentProps } from 'react';
+interface LabelProps extends ComponentProps<typeof ShadcnLabel> {
+    info?: string;
+    className?: string;
+}
+declare const Label: {
+    ({ htmlFor, className, info, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Label };

package/dist/components/atoms/label/label.js

@@ -0,0 +1,28 @@
+import { j as e } from "../../../_virtual/jsx-runtime.js";
+import { cn as o } from "../../../lib/utils.js";
+import { Label as a } from "../../../vendor/shadcn/label.js";
+import "react";
+import { Icon as i } from "../icon/icon.js";
+const l = ({ htmlFor: r, className: t, info: s, ...m }) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ e.jsx(
+    a,
+    {
+      htmlFor: r,
+      className: o("text-sm leading-[18.39px] cursor-pointer", t),
+      ...m
+    }
+  ),
+  s && /* @__PURE__ */ e.jsx(
+    i,
+    {
+      name: "Info",
+      size: "sm",
+      className: "text-muted-foreground",
+      tooltip: s
+    }
+  )
+] });
+l.displayName = "Label";
+export {
+  l as Label
+};

package/dist/components/atoms/password-field/password-field.js

@@ -1,7 +1,7 @@
 import { j as s } from "../../../_virtual/jsx-runtime.js";
 import { forwardRef as m, useState as p } from "react";
 import { cn as x } from "../../../lib/utils.js";
-import { Label as f } from "../../../vendor/shadcn/label.js";
+import { Label as f } from "../label/label.js";
 import { Link as w } from "../link/link.js";
 import { Field as d } from "../field/field.js";
 const u = m(

package/dist/components/atoms/radio-group/radio-group-option.js

@@ -1,7 +1,7 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
 import { RadioGroupItem as d } from "../../../vendor/shadcn/radio-group.js";
 import { cn as a } from "../../../lib/utils.js";
-import { Label as l } from "../../../vendor/shadcn/label.js";
+import { Label as l } from "../label/label.js";
 const o = ({
   option: e,
   radioId: s,

package/dist/components/atoms/search-field/search-field.js

@@ -4,7 +4,7 @@ import { cn as r } from "../../../lib/utils.js";
 import { Input as Z } from "../../../vendor/shadcn/input.js";
 import { Icon as w } from "../icon/icon.js";
 import { cva as D } from "../../../node_modules/class-variance-authority/dist/index.js";
-import { Label as K } from "../../../vendor/shadcn/label.js";
+import { Label as K } from "../label/label.js";
 const P = D("flex gap-2 w-full", {
   variants: {
     layout: {

package/dist/components/atoms/select/select.js

@@ -2,7 +2,7 @@ import { j as e } from "../../../_virtual/jsx-runtime.js";
 import * as y from "react";
 import { cn as c } from "../../../lib/utils.js";
 import { Select as w, SelectTrigger as C, SelectValue as G, SelectContent as L, SelectGroup as O, SelectLabel as R, SelectItem as d } from "../../../vendor/shadcn/select.js";
-import { Label as T } from "../../../vendor/shadcn/label.js";
+import { Label as T } from "../label/label.js";
 import { Typography as n } from "../typography/typography.js";
 const V = y.forwardRef(
   ({

package/dist/components/atoms/switch/switch.d.ts

@@ -37,6 +37,14 @@ export interface SwitchProps extends Omit<ComponentProps<typeof ShadcnSwitch>, "
      * Additional CSS classes to apply to the switch element itself
      */
     switchClassName?: string;
+    /**
+     * Additional CSS classes to apply to the label element
+     */
+    labelClassName?: string;
+    /**
+     * Optional info icon with tooltip
+     */
+    info?: string;
 }
 /**
  * Toggle switch component with label and optional description.

package/dist/components/atoms/switch/switch.js

@@ -1,24 +1,26 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import { Switch as b } from "../../../vendor/shadcn/switch.js";
-import { forwardRef as j, useId as v } from "react";
-import { cn as n } from "../../../lib/utils.js";
-import { Label as y } from "../../../vendor/shadcn/label.js";
-const N = j(
+import { Switch as v } from "../../../vendor/shadcn/switch.js";
+import { forwardRef as N, useId as y } from "react";
+import { cn as o } from "../../../lib/utils.js";
+import { Label as S } from "../label/label.js";
+const C = N(
   ({
     label: c,
-    description: o,
+    description: a,
     side: i = "left",
     variant: l = "default",
     id: d,
     name: t,
-    onChange: a,
-    className: f,
-    switchClassName: m,
-    ...x
-  }, p) => {
-    const h = v(), r = d || t || h, u = (s) => {
-      if (!a) return;
-      a({
+    onChange: n,
+    className: m,
+    switchClassName: x,
+    info: f,
+    labelClassName: p,
+    ...h
+  }, u) => {
+    const g = y(), r = d || t || g, w = (s) => {
+      if (!n) return;
+      n({
         target: {
           name: t || r,
           checked: s,
@@ -36,41 +38,42 @@ const N = j(
         stopPropagation: () => {
         }
       });
-    }, g = /* @__PURE__ */ e.jsx(
-      b,
+    }, b = /* @__PURE__ */ e.jsx(
+      v,
       {
-        ref: p,
+        ref: u,
         id: r,
         name: t,
-        className: n("cursor-pointer", m),
-        onCheckedChange: u,
-        ...x
+        className: o("cursor-pointer", x),
+        onCheckedChange: w,
+        ...h
       }
-    ), w = n(
-      "flex gap-3 items-start",
+    ), j = o(
+      "flex gap-2 items-start",
       {
         "flex-row-reverse": i === "right",
         "bg-background box-border justify-start p-4 rounded-lg border shadow-xs": l === "box"
       },
-      f
+      m
     );
-    return /* @__PURE__ */ e.jsxs("div", { className: w, children: [
-      g,
+    return /* @__PURE__ */ e.jsxs("div", { className: j, children: [
+      b,
       /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
-        /* @__PURE__ */ e.jsx(
-          y,
+        /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e.jsx(
+          S,
           {
             htmlFor: r,
-            className: "text-sm leading-[18.39px] cursor-pointer",
+            info: f,
+            className: o("text-sm leading-[18.39px] cursor-pointer", p),
             children: c
           }
-        ),
-        o && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: o })
+        ) }),
+        a && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: a })
       ] })
     ] });
   }
 );
-N.displayName = "Switch";
+C.displayName = "Switch";
 export {
-  N as Switch
+  C as Switch
 };

package/dist/components/atoms/textarea/textarea.js

@@ -3,7 +3,7 @@ import { forwardRef as p, useId as h } from "react";
 import { cva as d } from "../../../node_modules/class-variance-authority/dist/index.js";
 import { Textarea as j } from "../../../vendor/shadcn/textarea.js";
 import { cn as s } from "../../../lib/utils.js";
-import { Label as N } from "../../../vendor/shadcn/label.js";
+import { Label as N } from "../label/label.js";
 const b = d("flex gap-2 w-full", {
   variants: {
     layout: {

package/dist/components/organisms/data-table/data-table.d.ts

@@ -27,6 +27,11 @@ export interface DataTableProps<TData, TValue> {
      * @default false
      */
     checkboxSelection?: boolean;
+    /**
+     * Key to force reset of row selection. Change this value to clear all selections.
+     * Useful when parent needs to programmatically clear selections.
+     */
+    selectionResetKey?: string | number;
     /**
      * Callback fired when row selection changes
      */
@@ -126,4 +131,4 @@ export interface DataTableProps<TData, TValue> {
  * />
  * ```
  */
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, selectionResetKey, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/data-table/data-table.js

@@ -1,136 +1,139 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as B from "react";
-import { useReactTable as I } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { Table as U } from "../../../vendor/shadcn/table.js";
-import { cn as x } from "../../../lib/utils.js";
-import { DataTableLoading as V } from "./components/states/data-table-loading.js";
-import { DataTableHeader as q } from "./components/data-table-header.js";
-import { DataTableBody as J } from "./components/data-table-body.js";
-import { useDataTableColumns as K } from "./hooks/use-data-table-columns.js";
-import { useDataTableState as Q } from "./hooks/use-data-table-state.js";
-import { ROW_HEIGHT_DEFAULT as X } from "./utils/data-table-constants.js";
-import { getFilteredRowModel as Y, getSortedRowModel as Z, getCoreRowModel as k } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
-import { Empty as O } from "../../molecules/empty/empty.js";
-function fo({
+import * as b from "react";
+import { useReactTable as U } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { Table as V } from "../../../vendor/shadcn/table.js";
+import { cn as h } from "../../../lib/utils.js";
+import { DataTableLoading as q } from "./components/states/data-table-loading.js";
+import { DataTableHeader as J } from "./components/data-table-header.js";
+import { DataTableBody as Q } from "./components/data-table-body.js";
+import { useDataTableColumns as X } from "./hooks/use-data-table-columns.js";
+import { useDataTableState as Y } from "./hooks/use-data-table-state.js";
+import { ROW_HEIGHT_DEFAULT as Z } from "./utils/data-table-constants.js";
+import { getFilteredRowModel as k, getSortedRowModel as K, getCoreRowModel as O } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { Empty as oo } from "../../molecules/empty/empty.js";
+function go({
   columns: m,
   data: d,
-  isLoading: C = !1,
-  empty: b,
-  checkboxSelection: c = !1,
+  isLoading: S = !1,
+  empty: j,
+  checkboxSelection: u = !1,
+  selectionResetKey: c,
   onRowSelectionChange: l,
-  enableSorting: h = !0,
-  manualSorting: S = !1,
-  sorting: j,
-  onSortingChange: w,
-  enableColumnFilters: y = !1,
-  enableColumnResizing: s = !0,
-  columnResizeMode: R = "onChange",
-  enableColumnPinning: T = !0,
-  onRowClick: D,
-  actions: r,
-  height: F,
-  rowHeight: u = X,
-  className: M,
-  persistKey: v,
-  initialSettings: E,
-  onUpdate: N
+  enableSorting: w = !0,
+  manualSorting: y = !1,
+  sorting: T,
+  onSortingChange: R,
+  enableColumnFilters: D = !1,
+  enableColumnResizing: r = !0,
+  columnResizeMode: F = "onChange",
+  enableColumnPinning: v = !0,
+  onRowClick: E,
+  actions: s,
+  height: M,
+  rowHeight: f = Z,
+  className: N,
+  persistKey: H,
+  initialSettings: P,
+  onUpdate: W
 }) {
-  const H = K({
+  const _ = X({
     columns: m,
-    checkboxSelection: c,
-    actions: r
+    checkboxSelection: u,
+    actions: s
   }), {
-    sorting: f,
-    setSorting: g,
-    columnFilters: P,
-    setColumnFilters: W,
-    columnVisibility: _,
-    setColumnVisibility: $,
-    rowSelection: p,
-    setRowSelection: z,
-    columnPinning: A,
-    handleColumnPinningChange: G
-  } = Q({
-    persistKey: v,
-    hasActions: !!r,
-    externalSorting: j,
-    onExternalSortingChange: w,
-    initialSettings: E,
-    onUpdate: N
-  }), i = I({
+    sorting: g,
+    setSorting: p,
+    columnFilters: $,
+    setColumnFilters: z,
+    columnVisibility: A,
+    setColumnVisibility: G,
+    rowSelection: x,
+    setRowSelection: C,
+    columnPinning: L,
+    handleColumnPinningChange: B
+  } = Y({
+    persistKey: H,
+    hasActions: !!s,
+    externalSorting: T,
+    onExternalSortingChange: R,
+    initialSettings: P,
+    onUpdate: W
+  }), i = U({
     data: d,
-    columns: H,
-    getCoreRowModel: k(),
-    enableColumnResizing: s,
-    columnResizeMode: R,
-    enableColumnPinning: T,
+    columns: _,
+    getCoreRowModel: O(),
+    enableColumnResizing: r,
+    columnResizeMode: F,
+    enableColumnPinning: v,
     defaultColumn: {
       enableSorting: !1,
       minSize: 50
     },
-    ...h && {
+    ...w && {
       onSortingChange: (o) => {
-        g(typeof o == "function" ? o(f) : o);
+        p(typeof o == "function" ? o(g) : o);
       },
-      getSortedRowModel: Z(),
-      manualSorting: S
+      getSortedRowModel: K(),
+      manualSorting: y
     },
-    ...y && {
-      onColumnFiltersChange: W,
-      getFilteredRowModel: Y()
+    ...D && {
+      onColumnFiltersChange: z,
+      getFilteredRowModel: k()
     },
-    onColumnVisibilityChange: $,
-    onRowSelectionChange: z,
-    onColumnPinningChange: G,
+    onColumnVisibilityChange: G,
+    onRowSelectionChange: C,
+    onColumnPinningChange: B,
     state: {
-      sorting: f,
-      columnFilters: P,
-      columnVisibility: _,
-      rowSelection: p,
-      columnPinning: A
+      sorting: g,
+      columnFilters: $,
+      columnVisibility: A,
+      rowSelection: x,
+      columnPinning: L
     }
   });
-  if (B.useEffect(() => {
+  if (b.useEffect(() => {
+    c !== void 0 && C({});
+  }, [c]), b.useEffect(() => {
     if (l) {
       const o = i.getFilteredSelectedRowModel().rows.map((t) => t.original);
       l(o);
     }
-  }, [p, l, i]), C)
+  }, [x, l, i]), S)
     return /* @__PURE__ */ e.jsx(
-      V,
+      q,
       {
         columns: m,
-        checkboxSelection: c,
-        actions: r,
-        rowHeight: u
+        checkboxSelection: u,
+        actions: s,
+        rowHeight: f
       }
     );
   if (d.length === 0) {
-    const o = b || {}, {
+    const o = j || {}, {
       title: t = "No results",
       description: a = "No data available",
       media: n,
-      actions: L
+      actions: I
     } = o;
     return /* @__PURE__ */ e.jsx(
-      O,
+      oo,
       {
         media: n,
         title: t,
         description: a,
-        actions: L
+        actions: I
       }
     );
   }
-  return /* @__PURE__ */ e.jsx("div", { className: x("yuno-data-table space-y-4", M), children: /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ e.jsx("div", { className: h("yuno-data-table space-y-4", N), children: /* @__PURE__ */ e.jsx(
     "div",
     {
       className: "rounded-md border overflow-x-auto",
-      style: { height: F || "auto" },
+      style: { height: M || "auto" },
       children: /* @__PURE__ */ e.jsxs(
-        U,
+        V,
         {
-          className: x("table-fixed"),
+          className: h("table-fixed"),
           children: [
             /* @__PURE__ */ e.jsx("colgroup", { children: i.getHeaderGroups()[0]?.headers.map((o) => {
               const t = o.column.columnDef.enableResizing === !1, a = o.column.id === "_spacer", n = o.column.getSize();
@@ -147,19 +150,19 @@ function fo({
               );
             }) }),
             /* @__PURE__ */ e.jsx(
-              q,
+              J,
               {
                 table: i,
-                enableColumnResizing: s
+                enableColumnResizing: r
               }
             ),
             /* @__PURE__ */ e.jsx(
-              J,
+              Q,
               {
                 table: i,
-                enableColumnResizing: s,
-                onRowClick: D,
-                rowHeight: u
+                enableColumnResizing: r,
+                onRowClick: E,
+                rowHeight: f
               }
             )
           ]
@@ -169,5 +172,5 @@ function fo({
   ) });
 }
 export {
-  fo as DataTable
+  go as DataTable
 };

package/dist/components/organisms/data-table/data-table.types.d.ts

@@ -100,6 +100,7 @@ export interface DataTableProps<TData> {
     isLoading?: boolean;
     empty?: EmptyProps;
     checkboxSelection?: boolean;
+    selectionResetKey?: string | number;
     onRowSelectionChange?: (selectedRows: TData[]) => void;
     enablePagination?: boolean;
     pageSize?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.151",
+  "version": "0.0.154",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",