@solostylist/ui-kit 1.0.112 → 1.0.114

package/dist/s-theme-demo/s-theme-demo.js

@@ -0,0 +1,417 @@
+import { j as r } from "../jsx-runtime-DywqP_6a.js";
+import * as g from "react";
+import { Box as t, Typography as e, Stack as i, Card as x, CardContent as h, Divider as d, Alert as p, Chip as s, Paper as m } from "@mui/material";
+import n from "../s-button/s-button.js";
+import v from "../s-form/s-form.js";
+import u from "../s-text-field/s-text-field.js";
+import y from "../s-theme-switch/s-theme-switch.js";
+import { c as j } from "../createSvgIcon-PpKM6urg.js";
+import { F as b } from "../Favorite-DpJ7EDHh.js";
+const f = j(/* @__PURE__ */ r.jsx("path", {
+  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
+}), "Add"), S = j(/* @__PURE__ */ r.jsx("path", {
+  d: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"
+}), "Share"), w = j(/* @__PURE__ */ r.jsx("path", {
+  d: "M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+}), "Star"), B = () => {
+  const c = [
+    { name: "Primary", color: "primary.main" },
+    { name: "Secondary", color: "secondary.main" },
+    { name: "Success", color: "success.main" },
+    { name: "Warning", color: "warning.main" },
+    { name: "Error", color: "error.main" },
+    { name: "Info", color: "info.main" }
+  ];
+  return /* @__PURE__ */ r.jsx(x, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+    /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Color Palette" }),
+    /* @__PURE__ */ r.jsx(i, { direction: "row", flexWrap: "wrap", gap: 2, children: c.map((o) => /* @__PURE__ */ r.jsxs(t, { sx: { textAlign: "center" }, children: [
+      /* @__PURE__ */ r.jsx(
+        t,
+        {
+          sx: {
+            width: 60,
+            height: 60,
+            bgcolor: o.color,
+            borderRadius: 1,
+            mb: 1,
+            boxShadow: 1
+          }
+        }
+      ),
+      /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: o.name })
+    ] }, o.name)) }),
+    /* @__PURE__ */ r.jsx(e, { variant: "h6", sx: { mt: 3, mb: 2 }, children: "Background Colors" }),
+    /* @__PURE__ */ r.jsxs(i, { direction: "row", gap: 2, flexWrap: "wrap", children: [
+      /* @__PURE__ */ r.jsx(
+        t,
+        {
+          sx: {
+            p: 2,
+            bgcolor: "background.default",
+            border: 1,
+            borderColor: "divider",
+            borderRadius: 1
+          },
+          children: /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "Default Background" })
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        t,
+        {
+          sx: {
+            p: 2,
+            bgcolor: "background.paper",
+            border: 1,
+            borderColor: "divider",
+            borderRadius: 1
+          },
+          children: /* @__PURE__ */ r.jsx(e, { variant: "caption", children: "Paper Background" })
+        }
+      )
+    ] })
+  ] }) });
+}, T = () => /* @__PURE__ */ r.jsx(x, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+  /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Typography System" }),
+  /* @__PURE__ */ r.jsx(e, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Complete typography scale using Outfit font family with Material-UI variants" }),
+  /* @__PURE__ */ r.jsxs(i, { spacing: 3, children: [
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Headings" }),
+      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h1", component: "div", gutterBottom: !0, children: "Display Large" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h1 - 3.5rem (56px), Weight 600 - Used for hero sections and primary headings" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h2", component: "div", gutterBottom: !0, children: "Display Medium" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h2 - 2.75rem (44px), Weight 600 - Used for page titles and major sections" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h3", component: "div", gutterBottom: !0, children: "Display Small" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h3 - 2.25rem (36px), Weight 600 - Used for large section headings" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h4", component: "div", gutterBottom: !0, children: "Headline Large" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h4 - 2rem (32px), Weight 600 - Used for card titles and content headings" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h5", component: "div", gutterBottom: !0, children: "Headline Medium" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h5 - 1.5rem (24px), Weight 600 - Used for subsection headings" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "h6", component: "div", gutterBottom: !0, children: "Headline Small" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "h6 - 1.25rem (20px), Weight 600 - Used for component titles and labels" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsx(d, {}),
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Body Text" }),
+      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "body1", component: "div", gutterBottom: !0, children: "Body Large - The primary text style used for most content. It provides excellent readability and is suitable for paragraphs, descriptions, and general text content. This is the main body text variant." }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "body1 - 1rem (16px), Weight 400, Line height 1.5" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "body2", component: "div", gutterBottom: !0, children: "Body Medium - Secondary text style, often used for supporting information, captions, and less prominent content elements. Slightly smaller than body1 for hierarchy." }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "body2 - 0.875rem (14px), Weight 400, Line height 1.43" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsx(d, {}),
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Labels & Supporting Text" }),
+      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle1", component: "div", gutterBottom: !0, children: "Subtitle Large - Used for prominent secondary text" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "subtitle1 - 1rem (16px), Weight 500" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", component: "div", gutterBottom: !0, children: "Subtitle Small - Used for form labels and secondary headings" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "subtitle2 - 0.875rem (14px), Weight 500" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", component: "div", gutterBottom: !0, children: "Caption Text - Used for annotations, helper text, and fine print" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "caption - 0.75rem (12px), Weight 400" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "overline", component: "div", gutterBottom: !0, children: "OVERLINE TEXT - USED FOR LABELS AND CATEGORIES" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "overline - 0.75rem (12px), Weight 400, Uppercase, Letter spacing 0.5px" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsx(d, {}),
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Interactive & Special Text" }),
+      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "button", component: "div", gutterBottom: !0, children: "Button Text - All Caps Button Labels" }),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "button - 0.875rem (14px), Weight 500, Uppercase" })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(
+            e,
+            {
+              variant: "body2",
+              component: "a",
+              href: "#",
+              sx: { color: "primary.main", textDecoration: "none", "&:hover": { textDecoration: "underline" } },
+              gutterBottom: !0,
+              children: "Link Text - Interactive text elements"
+            }
+          ),
+          /* @__PURE__ */ r.jsx(e, { variant: "caption", color: "text.secondary", children: "Links inherit body variants with primary color and hover effects" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsx(d, {}),
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "primary", gutterBottom: !0, children: "Text Color Variants" }),
+      /* @__PURE__ */ r.jsxs(i, { spacing: 1, children: [
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "text.primary", children: "Primary Text - Main content color" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "text.secondary", children: "Secondary Text - Supporting content color" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "text.disabled", children: "Disabled Text - Inactive content color" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "primary.main", children: "Primary Brand - Brand color text" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "success.main", children: "Success Text - Positive feedback" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "warning.main", children: "Warning Text - Caution indicators" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body1", color: "error.main", children: "Error Text - Error messages" })
+      ] })
+    ] })
+  ] })
+] }) }), W = () => {
+  const [c, o] = g.useState("");
+  return /* @__PURE__ */ r.jsx(x, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+    /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "SoloStylist Components" }),
+    /* @__PURE__ */ r.jsxs(i, { spacing: 4, children: [
+      /* @__PURE__ */ r.jsxs(t, { children: [
+        /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Enhanced Buttons" }),
+        /* @__PURE__ */ r.jsx(e, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Comprehensive button system with all variants, colors, and sizes" }),
+        /* @__PURE__ */ r.jsxs(i, { spacing: 3, children: [
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Button Variants" }),
+            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", children: "Contained" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "primary", children: "Outlined" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "text", color: "primary", children: "Text" })
+            ] })
+          ] }),
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Contained)" }),
+            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", children: "Primary" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "secondary", children: "Secondary" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "success", children: "Success" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "warning", children: "Warning" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "error", children: "Error" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "info", children: "Info" })
+            ] })
+          ] }),
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants (Outlined)" }),
+            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "primary", children: "Primary" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "secondary", children: "Secondary" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "success", children: "Success" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "warning", children: "Warning" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "error", children: "Error" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "info", children: "Info" })
+            ] })
+          ] }),
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Button Sizes" }),
+            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", size: "small", children: "Small" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", size: "medium", children: "Medium" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", size: "large", children: "Large" })
+            ] })
+          ] }),
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Button States" }),
+            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", children: "Default" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", disabled: !0, children: "Disabled" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "primary", disabled: !0, children: "Disabled Outlined" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "text", color: "primary", disabled: !0, children: "Disabled Text" })
+            ] })
+          ] }),
+          /* @__PURE__ */ r.jsxs(t, { children: [
+            /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Buttons with Icons" }),
+            /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 2, flexWrap: "wrap", gap: 1, children: [
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "primary", startIcon: /* @__PURE__ */ r.jsx(f, {}), children: "Start Icon" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "contained", color: "secondary", endIcon: /* @__PURE__ */ r.jsx(S, {}), children: "End Icon" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "outlined", color: "success", startIcon: /* @__PURE__ */ r.jsx(w, {}), children: "Outlined + Icon" }),
+              /* @__PURE__ */ r.jsx(n, { variant: "text", color: "error", endIcon: /* @__PURE__ */ r.jsx(b, {}), children: "Text + Icon" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ r.jsxs(t, { children: [
+        /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Form Components with SForm" }),
+        /* @__PURE__ */ r.jsx(v, { label: "Sample Form", required: !0, children: /* @__PURE__ */ r.jsxs(i, { spacing: 3, children: [
+          /* @__PURE__ */ r.jsx(
+            u,
+            {
+              label: "Enhanced Text Field",
+              value: c,
+              onChange: (a) => o(a.target.value),
+              placeholder: "Enter text here...",
+              helperText: "This is an enhanced STextField component",
+              fullWidth: !0
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            u,
+            {
+              label: "Password Field",
+              type: "password",
+              placeholder: "Enter password...",
+              helperText: "Password input with custom styling",
+              fullWidth: !0
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            u,
+            {
+              label: "Multiline Text",
+              multiline: !0,
+              rows: 3,
+              placeholder: "Enter multiple lines...",
+              helperText: "Multiline text input",
+              fullWidth: !0
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ r.jsxs(t, { children: [
+        /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Theme Controls" }),
+        /* @__PURE__ */ r.jsx(i, { spacing: 2, children: /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Theme Switch Component" }),
+          /* @__PURE__ */ r.jsx(y, {})
+        ] }) })
+      ] })
+    ] })
+  ] }) });
+}, C = () => /* @__PURE__ */ r.jsx(x, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+  /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Interactive Components" }),
+  /* @__PURE__ */ r.jsxs(i, { spacing: 3, children: [
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Alerts" }),
+      /* @__PURE__ */ r.jsxs(i, { spacing: 2, children: [
+        /* @__PURE__ */ r.jsx(p, { severity: "success", children: "Success alert - Operation completed successfully!" }),
+        /* @__PURE__ */ r.jsx(p, { severity: "warning", children: "Warning alert - Please review your input." }),
+        /* @__PURE__ */ r.jsx(p, { severity: "error", children: "Error alert - Something went wrong." }),
+        /* @__PURE__ */ r.jsx(p, { severity: "info", children: "Info alert - Here's some useful information." })
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsxs(t, { children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Chips & Tags" }),
+      /* @__PURE__ */ r.jsx(e, { variant: "body2", color: "text.secondary", gutterBottom: !0, sx: { mb: 3 }, children: "Comprehensive chip system with all colors, variants, and interactive states" }),
+      /* @__PURE__ */ r.jsxs(i, { spacing: 3, children: [
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Color Variants" }),
+          /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 1, flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ r.jsx(s, { label: "Default" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Primary", color: "primary" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Secondary", color: "secondary" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Success", color: "success" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Warning", color: "warning" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Error", color: "error" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Info", color: "info" })
+          ] })
+        ] }),
+        /* @__PURE__ */ r.jsxs(t, { children: [
+          /* @__PURE__ */ r.jsx(e, { variant: "subtitle2", gutterBottom: !0, children: "Chip Sizes" }),
+          /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
+            /* @__PURE__ */ r.jsx(s, { label: "Small", color: "primary", size: "small" }),
+            /* @__PURE__ */ r.jsx(s, { label: "Medium", color: "primary", size: "medium" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] })
+] }) }), I = () => {
+  const c = [0, 1, 2, 4, 6, 8, 12, 16, 24];
+  return /* @__PURE__ */ r.jsx(x, { elevation: 2, sx: { borderRadius: 2 }, children: /* @__PURE__ */ r.jsxs(h, { children: [
+    /* @__PURE__ */ r.jsx(e, { variant: "h5", gutterBottom: !0, children: "Shadow System" }),
+    /* @__PURE__ */ r.jsx(e, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: "Material-UI elevation system with custom shadows" }),
+    /* @__PURE__ */ r.jsx(i, { direction: "row", flexWrap: "wrap", gap: 3, sx: { mt: 2 }, children: c.map((o) => /* @__PURE__ */ r.jsxs(t, { sx: { textAlign: "center" }, children: [
+      /* @__PURE__ */ r.jsx(
+        m,
+        {
+          elevation: o,
+          sx: {
+            width: 80,
+            height: 80,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            mb: 1,
+            borderRadius: 2
+          },
+          children: /* @__PURE__ */ r.jsx(e, { variant: "h6", children: o })
+        }
+      ),
+      /* @__PURE__ */ r.jsxs(e, { variant: "caption", color: "text.secondary", children: [
+        "Elevation ",
+        o
+      ] })
+    ] }, o)) }),
+    /* @__PURE__ */ r.jsx(d, { sx: { my: 3 } }),
+    /* @__PURE__ */ r.jsx(e, { variant: "h6", gutterBottom: !0, children: "Custom Shadow Effects" }),
+    /* @__PURE__ */ r.jsxs(i, { direction: "row", spacing: 3, flexWrap: "wrap", gap: 2, children: [
+      /* @__PURE__ */ r.jsx(
+        m,
+        {
+          sx: {
+            p: 3,
+            borderRadius: 2,
+            boxShadow: "var(--s-palette-baseShadow)"
+          },
+          children: /* @__PURE__ */ r.jsx(e, { variant: "body2", children: "Custom Base Shadow" })
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        m,
+        {
+          sx: {
+            p: 3,
+            borderRadius: 2,
+            boxShadow: (o) => o.palette.mode === "light" ? "0 4px 20px rgba(0,0,0,0.1)" : "0 4px 20px rgba(0,0,0,0.5)"
+          },
+          children: /* @__PURE__ */ r.jsx(e, { variant: "body2", children: "Theme-aware Shadow" })
+        }
+      )
+    ] })
+  ] }) });
+}, F = ({
+  title: c = "SoloStylist UI Kit Theme Demo",
+  compact: o = !1,
+  sections: a = ["colors", "typography", "components", "forms", "interactive", "shadows"]
+}) => {
+  const l = g.useMemo(
+    () => ({
+      colors: a.includes("colors"),
+      typography: a.includes("typography"),
+      components: a.includes("components"),
+      forms: a.includes("forms"),
+      shadows: a.includes("shadows"),
+      interactive: a.includes("interactive")
+    }),
+    [a]
+  );
+  return /* @__PURE__ */ r.jsxs(t, { sx: { p: o ? 2 : 3, maxWidth: 1200, mx: "auto" }, children: [
+    /* @__PURE__ */ r.jsxs(t, { sx: { mb: 4, textAlign: "center" }, children: [
+      /* @__PURE__ */ r.jsx(e, { variant: "h3", component: "h1", gutterBottom: !0, children: c }),
+      /* @__PURE__ */ r.jsx(e, { variant: "h6", color: "text.secondary", sx: { mb: 3 }, children: "Showcase of the SoloStylist UI Kit with modern theming capabilities" })
+    ] }),
+    /* @__PURE__ */ r.jsxs(i, { spacing: o ? 2 : 4, children: [
+      l.colors && /* @__PURE__ */ r.jsx(B, {}),
+      l.typography && /* @__PURE__ */ r.jsx(T, {}),
+      (l.components || l.forms) && /* @__PURE__ */ r.jsx(W, {}),
+      l.interactive && /* @__PURE__ */ r.jsx(C, {}),
+      l.shadows && /* @__PURE__ */ r.jsx(I, {})
+    ] })
+  ] });
+};
+export {
+  F as default
+};

package/dist/s-theme-provider/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './s-theme-provider';
 export type { SThemeProviderProps } from './s-theme-provider';
+export { useSTheme, default as useSThemeHook } from './use-theme';
+export type { SThemeMode } from './use-theme';

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

@@ -1,4 +1,7 @@
-import { default as o } from "./s-theme-provider.js";
+import { default as m } from "./s-theme-provider.js";
+import { useSTheme as s, useSTheme as u } from "./use-theme.js";
 export {
-  o as default
+  m as default,
+  s as useSTheme,
+  u as useSThemeHook
 };

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

@@ -10,7 +10,7 @@ export interface SThemeProviderProps extends Omit<ThemeProviderProps, 'defaultMo
     disableCustomTheme?: boolean;
     /** Additional theme component overrides */
     themeComponents?: ThemeOptions['components'];
-    /** Default color mode (defaults to 'dark') */
+    /** Default color mode (defaults to 'system') */
     defaultMode?: 'light' | 'dark' | 'system' | undefined;
     /** Custom theme object to merge with internal theme */
     theme?: Theme;
@@ -20,7 +20,7 @@ export interface SThemeProviderProps extends Omit<ThemeProviderProps, 'defaultMo
  *
  * Features:
  * - Material-UI v6 CSS variables integration with 's-' prefix
- * - Dark mode default with light/dark/system mode support
+ * - System mode default with light/dark/system mode support
  * - Comprehensive component customizations
  * - Custom color schemes, typography, shadows, and shapes
  * - Modular theme customizations from separate files

package/dist/s-theme-provider/s-theme-provider.js

@@ -1,30 +1,30 @@
-import { j as e } from "../jsx-runtime-DywqP_6a.js";
-import * as s from "react";
+import { j as s } from "../jsx-runtime-DywqP_6a.js";
+import * as e from "react";
 import { createTheme as p, ThemeProvider as c } from "@mui/material";
 import { components as f } from "../theme/components/components.js";
 import { dataDisplayCustomizations as u } from "../theme/customizations/data-display.js";
 import { feedbackCustomizations as h } from "../theme/customizations/feedback.js";
-import { inputsCustomizations as d } from "../theme/customizations/inputs.js";
-import { navigationCustomizations as l } from "../theme/customizations/navigation.js";
-import { surfacesCustomizations as x } from "../theme/customizations/surfaces.js";
-import { shape as z, shadows as g, typography as j, colorSchemes as S } from "../theme/theme-primitives.js";
+import { inputsCustomizations as l } from "../theme/customizations/inputs.js";
+import { navigationCustomizations as x } from "../theme/customizations/navigation.js";
+import { surfacesCustomizations as d } from "../theme/customizations/surfaces.js";
+import { shape as z, shadows as g, typography as j, colorSchemes as y } from "../theme/theme-primitives.js";
 const w = ({
   children: r,
   disableCustomTheme: o,
   themeComponents: t,
-  defaultMode: m = "dark",
-  // Dark mode by default
+  defaultMode: m = "system",
+  // System preference by default
   theme: i,
   ...a
 }) => {
-  const n = s.useMemo(() => o ? {} : p({
+  const n = e.useMemo(() => o ? {} : p({
     // CSS variables configuration for dynamic theming
     cssVariables: {
       colorSchemeSelector: "data-mui-color-scheme",
       cssVarPrefix: "s"
       // All CSS vars prefixed with '--s-'
     },
-    colorSchemes: S,
+    colorSchemes: y,
     // Light/dark color schemes
     typography: j,
     // Custom typography scales
@@ -34,17 +34,17 @@ const w = ({
     // Border radius and shape settings
     components: {
       // Merge all component customizations
-      ...d,
+      ...l,
       ...u,
       ...h,
-      ...l,
       ...x,
+      ...d,
       ...f,
       ...t
       // Allow external overrides
     }
   }), [o, t]);
-  return o ? /* @__PURE__ */ e.jsx(s.Fragment, { children: r }) : /* @__PURE__ */ e.jsx(
+  return o ? /* @__PURE__ */ s.jsx(e.Fragment, { children: r }) : /* @__PURE__ */ s.jsx(
     c,
     {
       disableTransitionOnChange: !0,

package/dist/s-theme-provider/use-theme.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Type definition for theme modes
+ */
+export type SThemeMode = 'light' | 'dark' | 'system';
+/**
+ * Custom hook for theme management in SoloStylist UI Kit
+ *
+ * This hook provides easy access to the current theme mode and methods
+ * to change the theme throughout the entire application.
+ *
+ * @returns Object containing theme mode, setter, and utility methods
+ *
+ * @example
+ * ```tsx
+ * import { useSTheme } from '@solostylist/ui-kit/s-theme-provider';
+ *
+ * function MyComponent() {
+ *   const { mode, setMode, isDark, isLight, toggleMode } = useSTheme();
+ *
+ *   return (
+ *     <div>
+ *       <p>Current mode: {mode}</p>
+ *       <button onClick={() => setMode('dark')}>Dark Mode</button>
+ *       <button onClick={() => setMode('light')}>Light Mode</button>
+ *       <button onClick={toggleMode}>Toggle Theme</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const useSTheme: () => {
+    /** Current theme mode (includes 'system') */
+    mode: SThemeMode;
+    /** Resolved theme mode (system resolves to light/dark) */
+    resolvedMode: "light" | "dark";
+    /** System preference mode */
+    systemMode: "light" | "dark";
+    /** Set theme mode */
+    setMode: (newMode: SThemeMode) => void;
+    /** Is current theme dark? */
+    isDark: boolean;
+    /** Is current theme light? */
+    isLight: boolean;
+    /** Is using system preference? */
+    isSystem: boolean;
+    /** Toggle between light and dark (skips system) */
+    toggleMode: () => void;
+    /** Cycle through all modes: light → dark → system → light */
+    cycleMode: () => void;
+};
+export default useSTheme;