@solostylist/ui-kit 1.0.79 → 1.0.80

package/dist/s-data-table/s-data-table.d.ts

@@ -1,28 +1,115 @@
 import { TableProps } from '@mui/material/Table';
 import * as React from 'react';
+/**
+ * Column definition interface for data table columns
+ * Defines how data should be displayed and formatted in table columns
+ */
 export interface ColumnDef<TRowModel> {
+    /** Text alignment for column content and header */
     align?: 'left' | 'right' | 'center';
+    /** Object field to extract value from (optional if using formatter) */
     field?: keyof TRowModel;
+    /** Custom rendering function for cell content */
     formatter?: (row: TRowModel, index: number) => React.ReactNode;
+    /** Whether to hide the column header name */
     hideName?: boolean;
+    /** Display name for the column header */
     name: string;
+    /** Fixed width for the column */
     width?: number | string;
 }
+/** Type for row identification - can be number or string */
 type RowId = number | string;
+/**
+ * Props for the SDataTable component, extending Material-UI TableProps
+ */
 export interface SDataTableProps<TRowModel> extends Omit<TableProps, 'onClick'> {
+    /** Array of column definitions specifying how to display data */
     columns: ColumnDef<TRowModel>[];
+    /** Whether to hide the table header */
     hideHead?: boolean;
+    /** Whether rows should show hover effects */
     hover?: boolean;
+    /** Click handler for row interactions */
     onClick?: (event: React.MouseEvent, row: TRowModel) => void;
+    /** Handler for deselecting all rows */
     onDeselectAll?: (event: React.ChangeEvent) => void;
+    /** Handler for deselecting individual rows */
     onDeselectOne?: (event: React.ChangeEvent, row: TRowModel) => void;
+    /** Handler for selecting all rows */
     onSelectAll?: (event: React.ChangeEvent) => void;
+    /** Handler for selecting individual rows */
     onSelectOne?: (event: React.ChangeEvent, row: TRowModel) => void;
+    /** Array of data objects to display in table rows */
     rows: TRowModel[];
+    /** Whether rows can be selected with checkboxes */
     selectable?: boolean;
+    /** Set of currently selected row IDs */
     selected?: Set<RowId>;
+    /** Function to extract unique ID from row data */
     uniqueRowId?: (row: TRowModel) => RowId;
 }
+/**
+ * Advanced data table component with selection, sorting, and customizable columns
+ *
+ * Features:
+ * - Flexible column definitions with custom formatting
+ * - Row selection with checkboxes (individual and bulk)
+ * - Clickable rows with hover effects
+ * - Empty state handling
+ * - Hidden header option
+ * - Customizable column alignment and width
+ * - Generic type support for type-safe row data
+ *
+ * The table expects row data to optionally have an 'id' field, or you can provide
+ * a custom uniqueRowId function to extract identifiers from your data structure.
+ *
+ * @param columns - Array defining how each column should be displayed
+ * @param hideHead - Whether to hide the table header row
+ * @param hover - Whether rows should show hover effects
+ * @param onClick - Handler for row click events
+ * @param onDeselectAll - Handler for bulk deselection
+ * @param onDeselectOne - Handler for individual row deselection
+ * @param onSelectOne - Handler for individual row selection
+ * @param onSelectAll - Handler for bulk selection
+ * @param rows - Array of data objects to display
+ * @param selectable - Whether to show selection checkboxes
+ * @param selected - Set of currently selected row IDs
+ * @param uniqueRowId - Function to extract unique ID from row data
+ * @param props - Additional Material-UI Table props
+ * @returns JSX element containing the complete data table
+ *
+ * @example
+ * ```tsx
+ * interface User {
+ *   id: number;
+ *   name: string;
+ *   email: string;
+ *   role: string;
+ * }
+ *
+ * const columns: ColumnDef<User>[] = [
+ *   { name: 'Name', field: 'name' },
+ *   { name: 'Email', field: 'email' },
+ *   {
+ *     name: 'Actions',
+ *     formatter: (user) => (
+ *       <Button onClick={() => editUser(user.id)}>Edit</Button>
+ *     )
+ *   }
+ * ];
+ *
+ * <SDataTable
+ *   columns={columns}
+ *   rows={users}
+ *   selectable
+ *   selected={selectedUsers}
+ *   onSelectOne={handleSelectUser}
+ *   onSelectAll={handleSelectAll}
+ *   onClick={handleRowClick}
+ * />
+ * ```
+ */
 declare function SDataTable<TRowModel extends object & {
     id?: RowId | null;
 }>({ columns, hideHead, hover, onClick, onDeselectAll, onDeselectOne, onSelectOne, onSelectAll, rows, selectable, selected, uniqueRowId, ...props }: SDataTableProps<TRowModel>): React.JSX.Element;

package/dist/s-data-table/s-data-table.js

@@ -1,14 +1,15 @@
 import { j as r } from "../jsx-runtime-DywqP_6a.js";
 import * as y from "react";
 import ve from "../s-empty/s-empty.js";
-import { g as N, c as j, P as e } from "../createTheme-DuP3DZSF.js";
-import { a as S, d as B, r as se, c as q, u as $, b as I, m as _ } from "../createSvgIcon-DN-sh_sr.js";
-import { g as M } from "../generateUtilityClasses-BpNk3DNr.js";
+import { c as j, P as e } from "../createTheme-wt8sY36y.js";
+import { s as S, b as N, r as se, c as q, u as $, a as I, m as _ } from "../createSvgIcon-9XY7lJan.js";
+import { g as B } from "../colorManipulator-CPZHCebU.js";
+import { g as M } from "../generateUtilityClasses-D-O3RBPF.js";
 import { u as Te, a as Ce } from "../useFormControl-B3RPiDsz.js";
-import { b as L, B as ke, r as je, m as we } from "../useSlot-CiHsL61G.js";
+import { b as L, B as ke, r as je, m as we } from "../useSlot-B_4ipGBP.js";
 import { c as X } from "../createSimplePaletteValueFilter-B7--0ryQ.js";
 function Re(o) {
-  return N("PrivateSwitchBase", o);
+  return B("PrivateSwitchBase", o);
 }
 M("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
 const Oe = (o) => {
@@ -21,7 +22,7 @@ const Oe = (o) => {
     root: ["root", s && "checked", a && "disabled", i && `edge${j(i)}`],
     input: ["input"]
   };
-  return B(n, Re, t);
+  return N(n, Re, t);
 }, Pe = S(ke, {
   name: "MuiSwitchBase"
 })({
@@ -320,7 +321,7 @@ const ze = q(/* @__PURE__ */ r.jsx("path", {
   d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
 }), "IndeterminateCheckBox");
 function Me(o) {
-  return N("MuiCheckbox", o);
+  return B("MuiCheckbox", o);
 }
 const D = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), He = (o) => {
   const {
@@ -330,7 +331,7 @@ const D = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     size: i
   } = o, n = {
     root: ["root", s && "indeterminate", `color${j(a)}`, `size${j(i)}`]
-  }, p = B(n, Me, t);
+  }, p = N(n, Me, t);
   return {
     ...t,
     // forward the disabled and checked classes to the SwitchBase
@@ -569,7 +570,7 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
 const J = /* @__PURE__ */ y.createContext();
 process.env.NODE_ENV !== "production" && (J.displayName = "TableContext");
 function Ue(o) {
-  return N("MuiTable", o);
+  return B("MuiTable", o);
 }
 M("MuiTable", ["root", "stickyHeader"]);
 const Ve = (o) => {
@@ -577,7 +578,7 @@ const Ve = (o) => {
     classes: t,
     stickyHeader: s
   } = o;
-  return B({
+  return N({
     root: ["root", s && "stickyHeader"]
   }, Ue, t);
 }, _e = S("table", {
@@ -690,14 +691,14 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
 const F = /* @__PURE__ */ y.createContext();
 process.env.NODE_ENV !== "production" && (F.displayName = "Tablelvl2Context");
 function We(o) {
-  return N("MuiTableBody", o);
+  return B("MuiTableBody", o);
 }
 M("MuiTableBody", ["root"]);
 const De = (o) => {
   const {
     classes: t
   } = o;
-  return B({
+  return N({
     root: ["root"]
   }, We, t);
 }, Le = S("tbody", {
@@ -759,7 +760,7 @@ process.env.NODE_ENV !== "production" && (re.propTypes = {
   sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
 function qe(o) {
-  return N("MuiTableCell", o);
+  return B("MuiTableCell", o);
 }
 const Je = M("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "sizeMedium", "paddingCheckbox", "paddingNone", "alignLeft", "alignCenter", "alignRight", "alignJustify", "stickyHeader"]), Ge = (o) => {
   const {
@@ -772,7 +773,7 @@ const Je = M("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "si
   } = o, d = {
     root: ["root", s, p && "stickyHeader", a !== "inherit" && `align${j(a)}`, i !== "normal" && `padding${j(i)}`, `size${j(n)}`]
   };
-  return B(d, qe, t);
+  return N(d, qe, t);
 }, Ke = S("td", {
   name: "MuiTableCell",
   slot: "Root",
@@ -989,14 +990,14 @@ process.env.NODE_ENV !== "production" && (H.propTypes = {
   variant: e.oneOfType([e.oneOf(["body", "footer", "head"]), e.string])
 });
 function Qe(o) {
-  return N("MuiTableHead", o);
+  return B("MuiTableHead", o);
 }
 M("MuiTableHead", ["root"]);
 const Xe = (o) => {
   const {
     classes: t
   } = o;
-  return B({
+  return N({
     root: ["root"]
   }, Qe, t);
 }, Ye = S("thead", {
@@ -1058,7 +1059,7 @@ process.env.NODE_ENV !== "production" && (ie.propTypes = {
   sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
 function eo(o) {
-  return N("MuiTableRow", o);
+  return B("MuiTableRow", o);
 }
 const oe = M("MuiTableRow", ["root", "selected", "hover", "head", "footer"]), oo = (o) => {
   const {
@@ -1068,7 +1069,7 @@ const oe = M("MuiTableRow", ["root", "selected", "hover", "head", "footer"]), oo
     head: i,
     footer: n
   } = o;
-  return B({
+  return N({
     root: ["root", s && "selected", a && "hover", i && "head", n && "footer"]
   }, eo, t);
 }, to = S("tr", {
@@ -1161,7 +1162,7 @@ process.env.NODE_ENV !== "production" && (V.propTypes = {
    */
   sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
-function uo({
+function fo({
   columns: o,
   hideHead: t,
   hover: s,
@@ -1184,6 +1185,7 @@ function uo({
         sx: {
           ...t && {
             visibility: "collapse",
+            // Hide header while preserving layout
             "--TableCell-borderWidth": 0
           }
         },
@@ -1203,9 +1205,11 @@ function uo({
               H,
               {
                 sx: {
+                  // Apply fixed width if specified
                   width: c.width,
                   minWidth: c.width,
                   maxWidth: c.width,
+                  // Apply text alignment if specified
                   ...c.align && { textAlign: c.align }
                 },
                 children: c.hideName ? null : c.name
@@ -1243,15 +1247,22 @@ function uo({
               }
             ) }) : null,
             o.map(
-              (f) => /* @__PURE__ */ r.jsx(H, { sx: { ...f.align && { textAlign: f.align } }, children: f.formatter ? f.formatter(c, v) : f.field ? c[f.field] : null }, f.name)
+              (f) => /* @__PURE__ */ r.jsx(H, {
+                sx: { ...f.align && { textAlign: f.align } },
+                // Use custom formatter if provided, otherwise extract field value
+                children: f.formatter ? f.formatter(c, v) : f.field ? c[f.field] : null
+              }, f.name)
             )
           ]
         },
         m ?? v
       );
-    }) : /* @__PURE__ */ r.jsx(V, { children: /* @__PURE__ */ r.jsx(H, { align: "center", colSpan: o.length, children: /* @__PURE__ */ r.jsx(ve, {}) }) }) })
+    }) : (
+      // Empty state when no data is available
+      /* @__PURE__ */ r.jsx(V, { children: /* @__PURE__ */ r.jsx(H, { align: "center", colSpan: o.length, children: /* @__PURE__ */ r.jsx(ve, {}) }) })
+    ) })
   ] });
 }
 export {
-  uo as default
+  fo as default
 };

package/dist/s-date-picker/s-date-picker.d.ts

@@ -1,11 +1,36 @@
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import * as React from 'react';
+/**
+ * Props interface for SDatePicker component - extends Material-UI X DatePickerProps
+ * with form integration capabilities
+ */
 export interface SDatePickerProps extends DatePickerProps {
+    /** Field label displayed above the date picker */
     label?: string | React.ReactNode;
+    /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
+    /** Error message to display below the field */
     error?: string;
+    /** HTML id attribute for the input element */
     htmlFor?: string;
+    /** Help text shown in tooltip next to the label */
     hint?: string;
 }
+/**
+ * SDatePicker - A standardized date picker component that wraps Material-UI X DatePicker
+ * with consistent form labeling, validation, and help text patterns.
+ *
+ * Key features:
+ * - Integrates with SForm for consistent label and error handling
+ * - Uses Material-UI TextField as the default input component
+ * - Maintains full Material-UI X DatePicker API compatibility
+ * - Provides accessible form labeling with htmlFor/id association
+ * - Includes help text tooltip functionality
+ * - Disables accessible field DOM structure for better styling control
+ * - Allows slot overrides for advanced customization
+ *
+ * @param props - SDatePickerProps with form integration and Material-UI X DatePicker props
+ * @returns JSX.Element - Wrapped DatePicker with form labeling and validation
+ */
 declare function SDatePicker({ label, required, error, htmlFor, hint, ...props }: SDatePickerProps): React.JSX.Element;
 export default SDatePicker;