@solostylist/ui-kit 1.0.78 → 1.0.80

package/dist/s-date-picker/s-date-picker.js

@@ -1,26 +1,27 @@
 import { j as b } from "../jsx-runtime-DywqP_6a.js";
-import { TextField as z } from "@mui/material";
-import I from "../s-form/s-form.js";
-import { _ as h, a as s } from "../objectWithoutPropertiesLoose-DiWPeE4c.js";
+import { useTheme as I, TextField as z } from "@mui/material";
+import L from "../s-form/s-form.js";
+import { _ as O, a } from "../objectWithoutPropertiesLoose-DiWPeE4c.js";
 import * as p from "react";
-import { g as L, P as e } from "../createTheme-DuP3DZSF.js";
-import { u as P, a as Y, b as U, c as Q, r as T, d as q, P as B, e as H, f as $, g as K, h as Z, i as G, j as J, C as X, k as m, l as M, m as ee, v as F, s as N, n as oe, D as te, o as ae } from "../useMobilePicker-DlmTFHhN.js";
-import { u as y } from "../warning-DWsjz4u6.js";
-import { g as se } from "../generateUtilityClasses-BpNk3DNr.js";
-import { a as R, d as ne } from "../createSvgIcon-DN-sh_sr.js";
-import { T as re } from "../Typography-D38zoHJr.js";
-import { r as D, a as C } from "../useSlot-CiHsL61G.js";
-function le(l) {
-  return L("MuiDatePickerToolbar", l);
+import { P as e } from "../createTheme-wt8sY36y.js";
+import { u as P, a as Y, b as U, c as Q, r as T, d as q, P as B, e as H, f as $, g as K, h as Z, i as G, j as J, C as X, k as m, l as M, m as ee, v as F, s as R, n as oe, D as te, o as se } from "../useMobilePicker-CYRSYIKP.js";
+import { u as y } from "../warning-DyDdgu8-.js";
+import { g as ae } from "../colorManipulator-CPZHCebU.js";
+import { g as ne } from "../generateUtilityClasses-D-O3RBPF.js";
+import { s as N, b as re } from "../createSvgIcon-9XY7lJan.js";
+import { T as le } from "../Typography-CeAbQ9LX.js";
+import { r as h, a as C } from "../useSlot-B_4ipGBP.js";
+function ie(l) {
+  return ae("MuiDatePickerToolbar", l);
 }
-se("MuiDatePickerToolbar", ["root", "title"]);
-const ie = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ce = (l) => ne({
+ne("MuiDatePickerToolbar", ["root", "title"]);
+const ce = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ue = (l) => re({
   root: ["root"],
   title: ["title"]
-}, le, l), ue = R(B, {
+}, ie, l), de = N(B, {
   name: "MuiDatePickerToolbar",
   slot: "Root"
-})({}), de = R(re, {
+})({}), fe = N(le, {
   name: "MuiDatePickerToolbar",
   slot: "Title"
 })({
@@ -38,32 +39,32 @@ const ie = ["toolbarFormat", "toolbarPlaceholder", "className", "classes"], ce =
     name: "MuiDatePickerToolbar"
   }), {
     toolbarFormat: o,
-    toolbarPlaceholder: a = "––",
-    className: u,
+    toolbarPlaceholder: s = "––",
+    className: i,
     classes: f
-  } = r, i = h(r, ie), d = P(), {
-    value: c,
-    views: x,
+  } = r, c = O(r, ce), d = P(), {
+    value: u,
+    views: v,
     orientation: E
-  } = Y(), V = U(), _ = Q(), v = ce(f), A = p.useMemo(() => {
-    if (!d.isValid(c))
-      return a;
+  } = Y(), V = U(), _ = Q(), w = ue(f), A = p.useMemo(() => {
+    if (!d.isValid(u))
+      return s;
     const W = T(d, {
       format: o,
-      views: x
+      views: v
     }, !0);
-    return d.formatByString(c, W);
-  }, [c, o, a, d, x]);
-  return /* @__PURE__ */ b.jsx(ue, s({
+    return d.formatByString(u, W);
+  }, [u, o, s, d, v]);
+  return /* @__PURE__ */ b.jsx(de, a({
     ref: t,
     toolbarTitle: V.datePickerToolbarTitle,
-    className: q(v.root, u)
-  }, i, {
-    children: /* @__PURE__ */ b.jsx(de, {
+    className: q(w.root, i)
+  }, c, {
+    children: /* @__PURE__ */ b.jsx(fe, {
       variant: "h4",
       align: E === "landscape" ? "left" : "center",
       ownerState: _,
-      className: v.title,
+      className: w.title,
       children: A
     })
   }));
@@ -104,12 +105,12 @@ function S(l, n) {
     props: l,
     name: n
   }), r = H(t), o = p.useMemo(() => {
-    var a;
-    return ((a = t.localeText) == null ? void 0 : a.toolbarTitle) == null ? t.localeText : s({}, t.localeText, {
+    var s;
+    return ((s = t.localeText) == null ? void 0 : s.toolbarTitle) == null ? t.localeText : a({}, t.localeText, {
       datePickerToolbarTitle: t.localeText.toolbarTitle
     });
   }, [t.localeText]);
-  return s({}, t, r, {
+  return a({}, t, r, {
     localeText: o
   }, $({
     views: t.views,
@@ -117,38 +118,38 @@ function S(l, n) {
     defaultViews: ["year", "day"],
     defaultOpenTo: "day"
   }), {
-    slots: s({
+    slots: a({
       toolbar: g
     }, t.slots)
   });
 }
-const fe = (l) => {
+const be = (l) => {
   const n = K(l);
   return Z({
     manager: n,
     props: l
   });
-}, be = ["slots", "slotProps"], O = /* @__PURE__ */ p.forwardRef(function(n, t) {
+}, pe = ["slots", "slotProps"], D = /* @__PURE__ */ p.forwardRef(function(n, t) {
   const r = y({
     props: n,
     name: "MuiDateField"
   }), {
     slots: o,
-    slotProps: a
-  } = r, u = h(r, be), f = G({
-    slotProps: a,
+    slotProps: s
+  } = r, i = O(r, pe), f = G({
+    slotProps: s,
     ref: t,
-    externalForwardedProps: u
-  }), i = fe(f);
+    externalForwardedProps: i
+  }), c = be(f);
   return /* @__PURE__ */ b.jsx(J, {
     slots: o,
-    slotProps: a,
-    fieldResponse: i,
+    slotProps: s,
+    fieldResponse: c,
     defaultOpenPickerIcon: X
   });
 });
-process.env.NODE_ENV !== "production" && (O.displayName = "DateField");
-process.env.NODE_ENV !== "production" && (O.propTypes = {
+process.env.NODE_ENV !== "production" && (D.displayName = "DateField");
+process.env.NODE_ENV !== "production" && (D.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -264,7 +265,7 @@ process.env.NODE_ENV !== "production" && (O.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: D,
+  inputRef: h,
   /**
    * The label content.
    */
@@ -430,34 +431,34 @@ process.env.NODE_ENV !== "production" && (O.propTypes = {
   variant: e.oneOf(["filled", "outlined", "standard"])
 });
 const k = /* @__PURE__ */ p.forwardRef(function(n, t) {
-  var i;
-  const r = P(), o = S(n, "MuiDesktopDatePicker"), a = s({
+  var c;
+  const r = P(), o = S(n, "MuiDesktopDatePicker"), s = a({
     day: m,
     month: m,
     year: m
-  }, o.viewRenderers), u = s({}, o, {
+  }, o.viewRenderers), i = a({}, o, {
     closeOnSelect: o.closeOnSelect ?? !0,
-    viewRenderers: a,
+    viewRenderers: s,
     format: T(r, o, !1),
     yearsPerRow: o.yearsPerRow ?? 4,
-    slots: s({
-      field: O
+    slots: a({
+      field: D
     }, o.slots),
-    slotProps: s({}, o.slotProps, {
+    slotProps: a({}, o.slotProps, {
       field: (d) => {
-        var c;
-        return s({}, C((c = o.slotProps) == null ? void 0 : c.field, d), M(o));
+        var u;
+        return a({}, C((u = o.slotProps) == null ? void 0 : u.field, d), M(o));
       },
-      toolbar: s({
+      toolbar: a({
         hidden: !0
-      }, (i = o.slotProps) == null ? void 0 : i.toolbar)
+      }, (c = o.slotProps) == null ? void 0 : c.toolbar)
     })
   }), {
     renderPicker: f
   } = ee({
     ref: t,
-    props: u,
-    valueManager: N,
+    props: i,
+    valueManager: R,
     valueType: "date",
     validator: F,
     steps: null
@@ -549,7 +550,7 @@ k.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: D,
+  inputRef: h,
   /**
    * The label content.
    */
@@ -780,32 +781,32 @@ k.propTypes = {
   yearsPerRow: e.oneOf([3, 4])
 };
 const j = /* @__PURE__ */ p.forwardRef(function(n, t) {
-  var i;
-  const r = P(), o = S(n, "MuiMobileDatePicker"), a = s({
+  var c;
+  const r = P(), o = S(n, "MuiMobileDatePicker"), s = a({
     day: m,
     month: m,
     year: m
-  }, o.viewRenderers), u = s({}, o, {
-    viewRenderers: a,
+  }, o.viewRenderers), i = a({}, o, {
+    viewRenderers: s,
     format: T(r, o, !1),
-    slots: s({
-      field: O
+    slots: a({
+      field: D
     }, o.slots),
-    slotProps: s({}, o.slotProps, {
+    slotProps: a({}, o.slotProps, {
       field: (d) => {
-        var c;
-        return s({}, C((c = o.slotProps) == null ? void 0 : c.field, d), M(o));
+        var u;
+        return a({}, C((u = o.slotProps) == null ? void 0 : u.field, d), M(o));
       },
-      toolbar: s({
+      toolbar: a({
         hidden: !1
-      }, (i = o.slotProps) == null ? void 0 : i.toolbar)
+      }, (c = o.slotProps) == null ? void 0 : c.toolbar)
     })
   }), {
     renderPicker: f
   } = oe({
     ref: t,
-    props: u,
-    valueManager: N,
+    props: i,
+    valueManager: R,
     valueType: "date",
     validator: F,
     steps: null
@@ -897,7 +898,7 @@ j.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: D,
+  inputRef: h,
   /**
    * The label content.
    */
@@ -1127,23 +1128,23 @@ j.propTypes = {
    */
   yearsPerRow: e.oneOf([3, 4])
 };
-const pe = ["desktopModeMediaQuery"], w = /* @__PURE__ */ p.forwardRef(function(n, t) {
+const me = ["desktopModeMediaQuery"], x = /* @__PURE__ */ p.forwardRef(function(n, t) {
   const r = y({
     props: n,
     name: "MuiDatePicker"
   }), {
     desktopModeMediaQuery: o = te
-  } = r, a = h(r, pe);
-  return ae(o, {
+  } = r, s = O(r, me);
+  return se(o, {
     defaultMatches: !0
-  }) ? /* @__PURE__ */ b.jsx(k, s({
+  }) ? /* @__PURE__ */ b.jsx(k, a({
     ref: t
-  }, a)) : /* @__PURE__ */ b.jsx(j, s({
+  }, s)) : /* @__PURE__ */ b.jsx(j, a({
     ref: t
-  }, a));
+  }, s));
 });
-process.env.NODE_ENV !== "production" && (w.displayName = "DatePicker");
-process.env.NODE_ENV !== "production" && (w.propTypes = {
+process.env.NODE_ENV !== "production" && (x.displayName = "DatePicker");
+process.env.NODE_ENV !== "production" && (x.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -1233,7 +1234,7 @@ process.env.NODE_ENV !== "production" && (w.propTypes = {
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: D,
+  inputRef: h,
   /**
    * The label content.
    */
@@ -1463,20 +1464,36 @@ process.env.NODE_ENV !== "production" && (w.propTypes = {
    */
   yearsPerRow: e.oneOf([3, 4])
 });
-function xe({ label: l, required: n = !1, error: t, htmlFor: r, hint: o, ...a }) {
-  return /* @__PURE__ */ b.jsx(I, { label: l, required: n, error: t, htmlFor: r, hint: o, children: /* @__PURE__ */ b.jsx(
-    w,
+function Me({ label: l, required: n = !1, error: t, htmlFor: r, hint: o, ...s }) {
+  const i = I();
+  return /* @__PURE__ */ b.jsx(L, { label: l, required: n, error: t, htmlFor: r, hint: o, children: /* @__PURE__ */ b.jsx(
+    x,
     {
       enableAccessibleFieldDOMStructure: !1,
       slots: {
         textField: z,
-        ...a.slots || {}
-        // allow user to override if needed
+        // Use Material-UI TextField as input
+        ...s.slots || {}
+        // Allow user to override slots if needed
       },
-      ...a
+      slotProps: {
+        popper: {
+          sx: {
+            "& .MuiPaper-root": {
+              border: "1px solid var(--s-palette-divider)",
+              borderRadius: (i.vars || i).shape.borderRadius,
+              boxShadow: "none",
+              backgroundImage: "none"
+            }
+          }
+        },
+        ...s.slotProps || {}
+        // Allow user to override slotProps if needed
+      },
+      ...s
     }
   ) });
 }
 export {
-  xe as default
+  Me as default
 };

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

@@ -1,11 +1,37 @@
 import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
 import * as React from 'react';
+/**
+ * Props interface for SDateTimePicker component - extends Material-UI X DateTimePickerProps
+ * with form integration capabilities
+ */
 export interface SDateTimePickerProps extends DateTimePickerProps {
+    /** Field label displayed above the datetime 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;
 }
+/**
+ * SDateTimePicker - A standardized date and time picker component that wraps Material-UI X DateTimePicker
+ * 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 DateTimePicker 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
+ * - Combines both date and time selection in a single input
+ *
+ * @param props - SDateTimePickerProps with form integration and Material-UI X DateTimePicker props
+ * @returns JSX.Element - Wrapped DateTimePicker with form labeling and validation
+ */
 declare function SDateTimePicker({ label, required, error, htmlFor, hint, ...props }: SDateTimePickerProps): React.JSX.Element;
 export default SDateTimePicker;