@solostylist/ui-kit 1.0.166 → 1.0.168

package/dist/s-lazy-image/s-lazy-image.js

@@ -1,66 +1,61 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import { useId as j, useState as b } from "react";
-import { useTheme as k, Box as n, Skeleton as y } from "@mui/material";
-const g = ({
-  src: c,
+import { j as i } from "../jsx-runtime-OVHDjVDe.js";
+import { useId as h, useState as v } from "react";
+import { useTheme as I, Box as m, Skeleton as x } from "@mui/material";
+const n = ({
+  src: u,
   variant: e = "rounded",
-  height: s = "100%",
-  width: o = "100%",
-  style: u,
-  minWidth: a = "auto",
-  minHeight: m = "auto",
+  height: a = "100%",
+  width: t = "100%",
+  style: l,
+  minWidth: s = "auto",
+  minHeight: d = "auto",
   onLoad: r,
-  ...l
+  ...p
 }) => {
-  const p = j(), x = k(), [d, i] = b(!1);
-  return (
-    // Container box maintains consistent dimensions throughout the loading process
-    // This prevents layout shifts and provides stable positioning for both skeleton and image
-    /* @__PURE__ */ t.jsxs(n, { height: s, width: o, children: [
-      !d && /* @__PURE__ */ t.jsx(
-        y,
-        {
-          variant: e,
-          id: `image-skeleton-${p}`,
-          animation: "wave",
-          style: {
-            height: s,
-            width: o,
-            minWidth: a,
-            minHeight: m,
-            ...u
-            // User styles applied to skeleton for consistency
-          }
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        n,
-        {
-          component: "img",
-          src: c,
-          style: {
-            height: s,
-            width: o,
-            minWidth: a,
-            minHeight: m,
-            // Performance optimization: display toggling instead of opacity transitions
-            // This approach reduces GPU usage and improves rendering performance
-            display: d ? "block" : "none",
-            // Theme-aware border radius calculation for consistent styling
-            // Matches Material-UI skeleton variants with proper theme integration
-            borderRadius: e === "circular" ? "50%" : e === "rounded" ? x.shape.borderRadius : "0px",
-            ...u
-            // User-provided styles override defaults
-          },
-          onLoad: (f) => {
-            i(!0), r == null || r(f);
-          },
+  const c = h(), g = I(), [o, y] = v(!1);
+  return /* @__PURE__ */ i.jsxs(m, { height: a, width: t, children: [
+    !o && /* @__PURE__ */ i.jsx(
+      x,
+      {
+        variant: e,
+        id: `image-skeleton-${c}`,
+        animation: "wave",
+        style: {
+          height: a,
+          width: t,
+          minWidth: s,
+          minHeight: d,
           ...l
         }
-      )
-    ] })
-  );
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      m,
+      {
+        component: "img",
+        src: u,
+        style: {
+          height: a,
+          width: t,
+          minWidth: s,
+          minHeight: d,
+          display: o ? "block" : "none",
+          borderRadius: e === "circular" ? "50%" : e === "rounded" ? g.shape.borderRadius : "0px",
+          ...l
+        },
+        onLoad: (f) => {
+          y(!0), r == null || r(f);
+        },
+        ...p
+      }
+    )
+  ] });
 };
+n.displayName = "SLazyImage";
+try {
+  n.displayName = "SLazyImage", n.__docgenInfo = { description: "A lazy-loading image component with skeleton placeholder.", displayName: "SLazyImage", props: { src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, variant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } }, style: { defaultValue: null, description: "Custom styles applied to both skeleton and loaded image", name: "style", required: !1, type: { name: "CSSProperties" } }, height: { defaultValue: { value: "100%" }, description: "Image height", name: "height", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width", name: "width", required: !1, type: { name: "string | number" } }, minWidth: { defaultValue: { value: "auto" }, description: "Minimum width constraint", name: "minWidth", required: !1, type: { name: "string | number" } }, minHeight: { defaultValue: { value: "auto" }, description: "Minimum height constraint", name: "minHeight", required: !1, type: { name: "string | number" } } } };
+} catch {
+}
 export {
-  g as default
+  n as default
 };

package/dist/s-localization-provider/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-localization-provider.js";
+import { SLocalizationProvider as r } from "./s-localization-provider.js";
 export {
-  o as default
+  r as default
 };

package/dist/s-localization-provider/s-localization-provider.d.ts

@@ -6,30 +6,9 @@ export interface SLocalizationProviderProps {
     /** Child components that will have access to date localization */
     children: React.ReactNode;
 }
-/**
- * Localization provider for Material-UI date picker components
- *
- * Provides localization context for all Material-UI X date picker components
- * using Day.js as the date library adapter. This provider must wrap any
- * components that use date pickers to ensure proper date formatting,
- * parsing, and localization.
- *
- * Day.js is used instead of other date libraries for its:
- * - Small bundle size and performance
- * - Immutable date objects
- * - Extensive plugin ecosystem
- * - Similar API to Moment.js but modernized
- *
- * @param children - Child components that may contain date picker components
- * @returns JSX element wrapping children with date localization context
- *
- * @example
- * ```tsx
- * <SLocalizationProvider>
- *   <SDatePicker />
- *   <STimePicker />
- *   <SDateTimePicker />
- * </SLocalizationProvider>
- * ```
- */
-export default function SLocalizationProvider({ children }: SLocalizationProviderProps): React.JSX.Element;
+/** Localization provider for Material-UI date picker components. */
+export declare const SLocalizationProvider: {
+    ({ children }: SLocalizationProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export default SLocalizationProvider;