@jigowatts/jigowatts-ui 2.1.2 → 2.3.0

package/dist/theme/index.es.js

@@ -0,0 +1,123 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createTheme as m, ThemeProvider as y } from "@mui/material/styles";
+import { createContext as u, useContext as p, useMemo as T } from "react";
+const F = {
+  palette: {
+    primary: { main: "#6672E8", contrastText: "#FFFFFF" },
+    secondary: { main: "#00AD79", contrastText: "#FFFFFF" },
+    thirdly: { main: "#1E2D50", contrastText: "#FFFFFF" },
+    normal: { main: "#808181", contrastText: "#FFFFFF" },
+    negative: { main: "#CA0000", contrastText: "#FFFFFF" }
+  },
+  semantic: {
+    surface: {
+      base: "#FFFFFF",
+      subtle: "#F7F8FA",
+      border: "#CCCCCC"
+    },
+    text: {
+      primary: "#000000",
+      secondary: "#363636",
+      muted: "#808181"
+    },
+    overlay: {
+      background: "rgba(0, 0, 0, 0.5)"
+    },
+    loader: {
+      color: "#071D2E"
+    },
+    pagination: {
+      selected: "#071D2E",
+      contrastText: "#FFFFFF"
+    },
+    input: {
+      border: "#C4C4C4",
+      placeholder: "#C4C4C4"
+    },
+    radio: {
+      checked: "#354E57"
+    },
+    interaction: {
+      primaryHover: "rgba(100, 113, 232, 0.2)"
+    }
+  },
+  muiTheme: m({
+    palette: {
+      primary: { main: "#6672E8", contrastText: "#FFFFFF" },
+      secondary: { main: "#00AD79", contrastText: "#FFFFFF" },
+      thirdly: { main: "#1E2D50", contrastText: "#FFFFFF" },
+      normal: { main: "#808181", contrastText: "#FFFFFF" },
+      negative: { main: "#CA0000", contrastText: "#FFFFFF" }
+    }
+  })
+}, o = (t) => typeof t == "object" && t !== null && !Array.isArray(t), i = (t, a) => {
+  if (!a)
+    return t;
+  if (!o(t) || !o(a))
+    return a ?? t;
+  const r = { ...t };
+  for (const [c, e] of Object.entries(a)) {
+    if (e === void 0)
+      continue;
+    const l = r[c];
+    o(l) && o(e) ? r[c] = i(l, e) : r[c] = e;
+  }
+  return r;
+}, x = (t) => m({
+  palette: {
+    primary: t.primary,
+    secondary: t.secondary,
+    thirdly: t.thirdly,
+    normal: t.normal,
+    negative: t.negative
+  }
+}), s = (t) => {
+  const a = i(F.palette, t == null ? void 0 : t.palette), r = i(F.semantic, t == null ? void 0 : t.semantic);
+  return {
+    palette: a,
+    semantic: r,
+    muiTheme: x(a)
+  };
+}, d = s(), g = u(
+  d
+), C = () => p(g), w = (t) => ({
+  display: "contents",
+  "--jigowatts-color-primary": t.palette.primary.main,
+  "--jigowatts-color-primary-contrast": t.palette.primary.contrastText,
+  "--jigowatts-color-secondary": t.palette.secondary.main,
+  "--jigowatts-color-secondary-contrast": t.palette.secondary.contrastText,
+  "--jigowatts-color-thirdly": t.palette.thirdly.main,
+  "--jigowatts-color-thirdly-contrast": t.palette.thirdly.contrastText,
+  "--jigowatts-color-normal": t.palette.normal.main,
+  "--jigowatts-color-normal-contrast": t.palette.normal.contrastText,
+  "--jigowatts-color-negative": t.palette.negative.main,
+  "--jigowatts-color-negative-contrast": t.palette.negative.contrastText,
+  "--jigowatts-color-surface": t.semantic.surface.base,
+  "--jigowatts-color-surface-subtle": t.semantic.surface.subtle,
+  "--jigowatts-color-border": t.semantic.surface.border,
+  "--jigowatts-color-text": t.semantic.text.primary,
+  "--jigowatts-color-text-secondary": t.semantic.text.secondary,
+  "--jigowatts-color-text-muted": t.semantic.text.muted,
+  "--jigowatts-color-overlay": t.semantic.overlay.background,
+  "--jigowatts-color-loader": t.semantic.loader.color,
+  "--jigowatts-color-pagination-selected": t.semantic.pagination.selected,
+  "--jigowatts-color-pagination-contrast-text": t.semantic.pagination.contrastText,
+  "--jigowatts-color-input-border": t.semantic.input.border,
+  "--jigowatts-color-input-placeholder": t.semantic.input.placeholder,
+  "--jigowatts-color-radio-checked": t.semantic.radio.checked,
+  "--jigowatts-color-primary-hover": t.semantic.interaction.primaryHover
+}), b = ({ children: t, theme: a }) => {
+  const r = T(
+    () => a ? s(a) : d,
+    [a]
+  );
+  return /* @__PURE__ */ n(g.Provider, { value: r, children: /* @__PURE__ */ n(y, { theme: r.muiTheme, children: /* @__PURE__ */ n("div", { style: w(r), children: t }) }) });
+}, h = s;
+export {
+  b as JigowattsThemeProvider,
+  b as ThemeProvider,
+  h as createJigowattsTheme,
+  d as defaultJigowattsTheme,
+  C as useJigowattsTheme
+};
+//# sourceMappingURL=index.es.js.map

package/dist/theme/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["import {\n  createTheme,\n  type PaletteColor,\n  type PaletteColorOptions,\n  type PaletteOptions,\n  ThemeProvider as MuiThemeProvider,\n  type Theme,\n} from \"@mui/material/styles\";\nimport {\n  createContext,\n  type CSSProperties,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\n\ndeclare module \"@mui/material/styles\" {\n  interface Palette {\n    thirdly: PaletteColor;\n    normal: PaletteColor;\n    negative: PaletteColor;\n  }\n  interface PaletteOptions {\n    thirdly?: PaletteColorOptions;\n    normal?: PaletteColorOptions;\n    negative?: PaletteColorOptions;\n  }\n}\n\ndeclare module \"@mui/material/Button\" {\n  interface ButtonPropsColorOverrides {\n    thirdly: true;\n    normal: true;\n    negative: true;\n  }\n}\n\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends Record<string, unknown>\n    ? DeepPartial<T[K]>\n    : T[K];\n};\n\nexport type JigowattsPaletteColor = {\n  main: string;\n  contrastText: string;\n};\n\nexport type JigowattsPalette = {\n  primary: JigowattsPaletteColor;\n  secondary: JigowattsPaletteColor;\n  thirdly: JigowattsPaletteColor;\n  normal: JigowattsPaletteColor;\n  negative: JigowattsPaletteColor;\n};\n\nexport type JigowattsSemanticTheme = {\n  surface: {\n    base: string;\n    subtle: string;\n    border: string;\n  };\n  text: {\n    primary: string;\n    secondary: string;\n    muted: string;\n  };\n  overlay: {\n    background: string;\n  };\n  loader: {\n    color: string;\n  };\n  pagination: {\n    selected: string;\n    contrastText: string;\n  };\n  input: {\n    border: string;\n    placeholder: string;\n  };\n  radio: {\n    checked: string;\n  };\n  interaction: {\n    primaryHover: string;\n  };\n};\n\nexport type JigowattsThemeOptions = {\n  palette?: DeepPartial<JigowattsPalette>;\n  semantic?: DeepPartial<JigowattsSemanticTheme>;\n};\n\nexport type JigowattsTheme = {\n  palette: JigowattsPalette;\n  semantic: JigowattsSemanticTheme;\n  muiTheme: Theme;\n};\n\nconst defaultThemeValues: JigowattsTheme = {\n  palette: {\n    primary: { main: \"#6672E8\", contrastText: \"#FFFFFF\" },\n    secondary: { main: \"#00AD79\", contrastText: \"#FFFFFF\" },\n    thirdly: { main: \"#1E2D50\", contrastText: \"#FFFFFF\" },\n    normal: { main: \"#808181\", contrastText: \"#FFFFFF\" },\n    negative: { main: \"#CA0000\", contrastText: \"#FFFFFF\" },\n  },\n  semantic: {\n    surface: {\n      base: \"#FFFFFF\",\n      subtle: \"#F7F8FA\",\n      border: \"#CCCCCC\",\n    },\n    text: {\n      primary: \"#000000\",\n      secondary: \"#363636\",\n      muted: \"#808181\",\n    },\n    overlay: {\n      background: \"rgba(0, 0, 0, 0.5)\",\n    },\n    loader: {\n      color: \"#071D2E\",\n    },\n    pagination: {\n      selected: \"#071D2E\",\n      contrastText: \"#FFFFFF\",\n    },\n    input: {\n      border: \"#C4C4C4\",\n      placeholder: \"#C4C4C4\",\n    },\n    radio: {\n      checked: \"#354E57\",\n    },\n    interaction: {\n      primaryHover: \"rgba(100, 113, 232, 0.2)\",\n    },\n  },\n  muiTheme: createTheme({\n    palette: {\n      primary: { main: \"#6672E8\", contrastText: \"#FFFFFF\" },\n      secondary: { main: \"#00AD79\", contrastText: \"#FFFFFF\" },\n      thirdly: { main: \"#1E2D50\", contrastText: \"#FFFFFF\" },\n      normal: { main: \"#808181\", contrastText: \"#FFFFFF\" },\n      negative: { main: \"#CA0000\", contrastText: \"#FFFFFF\" },\n    },\n  }),\n};\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\nconst deepMerge = <T,>(base: T, override?: DeepPartial<T>): T => {\n  if (!override) {\n    return base;\n  }\n\n  if (!isPlainObject(base) || !isPlainObject(override)) {\n    return (override as T) ?? base;\n  }\n\n  const result: Record<string, unknown> = { ...base };\n\n  for (const [key, value] of Object.entries(override)) {\n    if (value === undefined) {\n      continue;\n    }\n\n    const current = result[key];\n    if (isPlainObject(current) && isPlainObject(value)) {\n      result[key] = deepMerge(current, value);\n    } else {\n      result[key] = value;\n    }\n  }\n\n  return result as T;\n};\n\nconst createMuiThemeFromPalette = (palette: JigowattsPalette): Theme =>\n  createTheme({\n    palette: {\n      primary: palette.primary,\n      secondary: palette.secondary,\n      ...{\n        thirdly: palette.thirdly,\n        normal: palette.normal,\n        negative: palette.negative,\n      },\n    } as PaletteOptions,\n  });\n\nconst createResolvedTheme = (\n  options?: JigowattsThemeOptions,\n): JigowattsTheme => {\n  const palette = deepMerge(defaultThemeValues.palette, options?.palette);\n  const semantic = deepMerge(defaultThemeValues.semantic, options?.semantic);\n\n  return {\n    palette,\n    semantic,\n    muiTheme: createMuiThemeFromPalette(palette),\n  };\n};\n\nexport const defaultJigowattsTheme = createResolvedTheme();\n\nconst JigowattsThemeContext = createContext<JigowattsTheme>(\n  defaultJigowattsTheme,\n);\n\nexport const useJigowattsTheme = () => useContext(JigowattsThemeContext);\n\nconst getCssVariables = (theme: JigowattsTheme): CSSProperties =>\n  ({\n    display: \"contents\",\n    \"--jigowatts-color-primary\": theme.palette.primary.main,\n    \"--jigowatts-color-primary-contrast\": theme.palette.primary.contrastText,\n    \"--jigowatts-color-secondary\": theme.palette.secondary.main,\n    \"--jigowatts-color-secondary-contrast\":\n      theme.palette.secondary.contrastText,\n    \"--jigowatts-color-thirdly\": theme.palette.thirdly.main,\n    \"--jigowatts-color-thirdly-contrast\": theme.palette.thirdly.contrastText,\n    \"--jigowatts-color-normal\": theme.palette.normal.main,\n    \"--jigowatts-color-normal-contrast\": theme.palette.normal.contrastText,\n    \"--jigowatts-color-negative\": theme.palette.negative.main,\n    \"--jigowatts-color-negative-contrast\": theme.palette.negative.contrastText,\n    \"--jigowatts-color-surface\": theme.semantic.surface.base,\n    \"--jigowatts-color-surface-subtle\": theme.semantic.surface.subtle,\n    \"--jigowatts-color-border\": theme.semantic.surface.border,\n    \"--jigowatts-color-text\": theme.semantic.text.primary,\n    \"--jigowatts-color-text-secondary\": theme.semantic.text.secondary,\n    \"--jigowatts-color-text-muted\": theme.semantic.text.muted,\n    \"--jigowatts-color-overlay\": theme.semantic.overlay.background,\n    \"--jigowatts-color-loader\": theme.semantic.loader.color,\n    \"--jigowatts-color-pagination-selected\": theme.semantic.pagination.selected,\n    \"--jigowatts-color-pagination-contrast-text\":\n      theme.semantic.pagination.contrastText,\n    \"--jigowatts-color-input-border\": theme.semantic.input.border,\n    \"--jigowatts-color-input-placeholder\": theme.semantic.input.placeholder,\n    \"--jigowatts-color-radio-checked\": theme.semantic.radio.checked,\n    \"--jigowatts-color-primary-hover\": theme.semantic.interaction.primaryHover,\n  }) as CSSProperties;\n\nexport type ThemeProviderProps = {\n  children: ReactNode;\n  theme?: JigowattsThemeOptions;\n};\n\nexport const ThemeProvider = ({ children, theme }: ThemeProviderProps) => {\n  const resolvedTheme = useMemo(\n    () => (theme ? createResolvedTheme(theme) : defaultJigowattsTheme),\n    [theme],\n  );\n\n  return (\n    <JigowattsThemeContext.Provider value={resolvedTheme}>\n      <MuiThemeProvider theme={resolvedTheme.muiTheme}>\n        <div style={getCssVariables(resolvedTheme)}>{children}</div>\n      </MuiThemeProvider>\n    </JigowattsThemeContext.Provider>\n  );\n};\n\nexport { ThemeProvider as JigowattsThemeProvider };\n\nexport const createJigowattsTheme = createResolvedTheme;\n"],"names":["defaultThemeValues","createTheme","isPlainObject","value","deepMerge","base","override","result","key","current","createMuiThemeFromPalette","palette","createResolvedTheme","options","semantic","defaultJigowattsTheme","JigowattsThemeContext","createContext","useJigowattsTheme","useContext","getCssVariables","theme","ThemeProvider","children","resolvedTheme","useMemo","MuiThemeProvider","jsx","createJigowattsTheme"],"mappings":";;;AAoGA,MAAMA,IAAqC;AAAA,EACzC,SAAS;AAAA,IACP,SAAS,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,IAC1C,WAAW,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,IAC5C,SAAS,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,IAC1C,QAAQ,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,IACzC,UAAU,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,EAAU;AAAA,EAEvD,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,IAEV,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,IAAA;AAAA,IAET,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,IAEd,QAAQ;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,IAET,YAAY;AAAA,MACV,UAAU;AAAA,MACV,cAAc;AAAA,IAAA;AAAA,IAEhB,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,cAAc;AAAA,IAAA;AAAA,EAChB;AAAA,EAEF,UAAUC,EAAY;AAAA,IACpB,SAAS;AAAA,MACP,SAAS,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,MAC1C,WAAW,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,MAC5C,SAAS,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,MAC1C,QAAQ,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,MACzC,UAAU,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,IAAU;AAAA,EACvD,CACD;AACH,GAEMC,IAAgB,CAACC,MACrB,OAAOA,KAAU,YAAYA,MAAU,QAAQ,CAAC,MAAM,QAAQA,CAAK,GAE/DC,IAAY,CAAKC,GAASC,MAAiC;AAC/D,MAAI,CAACA;AACH,WAAOD;AAGT,MAAI,CAACH,EAAcG,CAAI,KAAK,CAACH,EAAcI,CAAQ;AACjD,WAAQA,KAAkBD;AAG5B,QAAME,IAAkC,EAAE,GAAGF,EAAA;AAE7C,aAAW,CAACG,GAAKL,CAAK,KAAK,OAAO,QAAQG,CAAQ,GAAG;AACnD,QAAIH,MAAU;AACZ;AAGF,UAAMM,IAAUF,EAAOC,CAAG;AAC1B,IAAIN,EAAcO,CAAO,KAAKP,EAAcC,CAAK,IAC/CI,EAAOC,CAAG,IAAIJ,EAAUK,GAASN,CAAK,IAEtCI,EAAOC,CAAG,IAAIL;AAAA,EAElB;AAEA,SAAOI;AACT,GAEMG,IAA4B,CAACC,MACjCV,EAAY;AAAA,EACV,SAAS;AAAA,IACP,SAASU,EAAQ;AAAA,IACjB,WAAWA,EAAQ;AAAA,IAEjB,SAASA,EAAQ;AAAA,IACjB,QAAQA,EAAQ;AAAA,IAChB,UAAUA,EAAQ;AAAA,EACpB;AAEJ,CAAC,GAEGC,IAAsB,CAC1BC,MACmB;AACnB,QAAMF,IAAUP,EAAUJ,EAAmB,SAASa,KAAA,gBAAAA,EAAS,OAAO,GAChEC,IAAWV,EAAUJ,EAAmB,UAAUa,KAAA,gBAAAA,EAAS,QAAQ;AAEzE,SAAO;AAAA,IACL,SAAAF;AAAA,IACA,UAAAG;AAAA,IACA,UAAUJ,EAA0BC,CAAO;AAAA,EAAA;AAE/C,GAEaI,IAAwBH,EAAA,GAE/BI,IAAwBC;AAAA,EAC5BF;AACF,GAEaG,IAAoB,MAAMC,EAAWH,CAAqB,GAEjEI,IAAkB,CAACC,OACtB;AAAA,EACC,SAAS;AAAA,EACT,6BAA6BA,EAAM,QAAQ,QAAQ;AAAA,EACnD,sCAAsCA,EAAM,QAAQ,QAAQ;AAAA,EAC5D,+BAA+BA,EAAM,QAAQ,UAAU;AAAA,EACvD,wCACEA,EAAM,QAAQ,UAAU;AAAA,EAC1B,6BAA6BA,EAAM,QAAQ,QAAQ;AAAA,EACnD,sCAAsCA,EAAM,QAAQ,QAAQ;AAAA,EAC5D,4BAA4BA,EAAM,QAAQ,OAAO;AAAA,EACjD,qCAAqCA,EAAM,QAAQ,OAAO;AAAA,EAC1D,8BAA8BA,EAAM,QAAQ,SAAS;AAAA,EACrD,uCAAuCA,EAAM,QAAQ,SAAS;AAAA,EAC9D,6BAA6BA,EAAM,SAAS,QAAQ;AAAA,EACpD,oCAAoCA,EAAM,SAAS,QAAQ;AAAA,EAC3D,4BAA4BA,EAAM,SAAS,QAAQ;AAAA,EACnD,0BAA0BA,EAAM,SAAS,KAAK;AAAA,EAC9C,oCAAoCA,EAAM,SAAS,KAAK;AAAA,EACxD,gCAAgCA,EAAM,SAAS,KAAK;AAAA,EACpD,6BAA6BA,EAAM,SAAS,QAAQ;AAAA,EACpD,4BAA4BA,EAAM,SAAS,OAAO;AAAA,EAClD,yCAAyCA,EAAM,SAAS,WAAW;AAAA,EACnE,8CACEA,EAAM,SAAS,WAAW;AAAA,EAC5B,kCAAkCA,EAAM,SAAS,MAAM;AAAA,EACvD,uCAAuCA,EAAM,SAAS,MAAM;AAAA,EAC5D,mCAAmCA,EAAM,SAAS,MAAM;AAAA,EACxD,mCAAmCA,EAAM,SAAS,YAAY;AAChE,IAOWC,IAAgB,CAAC,EAAE,UAAAC,GAAU,OAAAF,QAAgC;AACxE,QAAMG,IAAgBC;AAAA,IACpB,MAAOJ,IAAQT,EAAoBS,CAAK,IAAIN;AAAA,IAC5C,CAACM,CAAK;AAAA,EAAA;AAGR,2BACGL,EAAsB,UAAtB,EAA+B,OAAOQ,GACrC,4BAACE,GAAA,EAAiB,OAAOF,EAAc,UACrC,UAAA,gBAAAG,EAAC,SAAI,OAAOP,EAAgBI,CAAa,GAAI,UAAAD,GAAS,GACxD,EAAA,CACF;AAEJ,GAIaK,IAAuBhB;"}

package/dist/theme/index.test.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),t=require("../react.esm-DGuy6Rn3.cjs"),s=require("./index.cjs.js"),o=()=>{const r=s.useJigowattsTheme();return e.jsx("span",{children:r.palette.primary.main})};describe("ThemeProvider",()=>{it("uses default colors when no override is provided",()=>{t.render(e.jsx(s.ThemeProvider,{children:e.jsx(o,{})})),expect(t.screen.getByText("#6672E8")).toBeInTheDocument()}),it("merges partial overrides and exposes css variables",()=>{const{container:r}=t.render(e.jsx(s.ThemeProvider,{theme:{palette:{primary:{main:"#123456",contrastText:"#abcdef"}},semantic:{surface:{base:"#f0f0f0"}}},children:e.jsx(o,{})}));expect(t.screen.getByText("#123456")).toBeInTheDocument();const i=r.firstElementChild;expect(i).toHaveStyle("--jigowatts-color-primary: #123456"),expect(i).toHaveStyle("--jigowatts-color-surface: #f0f0f0")})});
+//# sourceMappingURL=index.test.cjs.js.map

package/dist/theme/index.test.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.cjs.js","sources":["../../src/theme/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\n\nimport {\n  ThemeProvider,\n  useJigowattsTheme,\n} from \".\";\n\nconst ThemeProbe = () => {\n  const theme = useJigowattsTheme();\n\n  return <span>{theme.palette.primary.main}</span>;\n};\n\ndescribe(\"ThemeProvider\", () => {\n  it(\"uses default colors when no override is provided\", () => {\n    render(\n      <ThemeProvider>\n        <ThemeProbe />\n      </ThemeProvider>,\n    );\n\n    expect(screen.getByText(\"#6672E8\")).toBeInTheDocument();\n  });\n\n  it(\"merges partial overrides and exposes css variables\", () => {\n    const { container } = render(\n      <ThemeProvider\n        theme={{\n          palette: {\n            primary: { main: \"#123456\", contrastText: \"#abcdef\" },\n          },\n          semantic: {\n            surface: {\n              base: \"#f0f0f0\",\n            },\n          },\n        }}\n      >\n        <ThemeProbe />\n      </ThemeProvider>,\n    );\n\n    expect(screen.getByText(\"#123456\")).toBeInTheDocument();\n    const wrapper = container.firstElementChild as HTMLElement;\n\n    expect(wrapper).toHaveStyle(\n      \"--jigowatts-color-primary: #123456\",\n    );\n    expect(wrapper).toHaveStyle(\n      \"--jigowatts-color-surface: #f0f0f0\",\n    );\n  });\n});\n"],"names":["ThemeProbe","theme","useJigowattsTheme","jsx","render","ThemeProvider","screen","container","wrapper"],"mappings":"qHAOMA,EAAa,IAAM,CACvB,MAAMC,EAAQC,EAAAA,kBAAA,EAEd,OAAOC,EAAAA,IAAC,OAAA,CAAM,SAAAF,EAAM,QAAQ,QAAQ,KAAK,CAC3C,EAEA,SAAS,gBAAiB,IAAM,CAC9B,GAAG,mDAAoD,IAAM,CAC3DG,EAAAA,OACED,EAAAA,IAACE,EAAAA,cAAA,CACC,SAAAF,EAAAA,IAACH,EAAA,CAAA,CAAW,CAAA,CACd,CAAA,EAGF,OAAOM,EAAAA,OAAO,UAAU,SAAS,CAAC,EAAE,kBAAA,CACtC,CAAC,EAED,GAAG,qDAAsD,IAAM,CAC7D,KAAM,CAAE,UAAAC,GAAcH,EAAAA,OACpBD,EAAAA,IAACE,EAAAA,cAAA,CACC,MAAO,CACL,QAAS,CACP,QAAS,CAAE,KAAM,UAAW,aAAc,SAAA,CAAU,EAEtD,SAAU,CACR,QAAS,CACP,KAAM,SAAA,CACR,CACF,EAGF,eAACL,EAAA,CAAA,CAAW,CAAA,CAAA,CACd,EAGF,OAAOM,EAAAA,OAAO,UAAU,SAAS,CAAC,EAAE,kBAAA,EACpC,MAAME,EAAUD,EAAU,kBAE1B,OAAOC,CAAO,EAAE,YACd,oCAAA,EAEF,OAAOA,CAAO,EAAE,YACd,oCAAA,CAEJ,CAAC,CACH,CAAC"}

package/dist/theme/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/theme/index.test.es.js

@@ -0,0 +1,41 @@
+import { jsx as e } from "react/jsx-runtime";
+import { r as o, s } from "../react.esm-BBESb8eI.js";
+import { ThemeProvider as a, useJigowattsTheme as c } from "./index.es.js";
+const i = () => {
+  const t = c();
+  return /* @__PURE__ */ e("span", { children: t.palette.primary.main });
+};
+describe("ThemeProvider", () => {
+  it("uses default colors when no override is provided", () => {
+    o(
+      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(i, {}) })
+    ), expect(s.getByText("#6672E8")).toBeInTheDocument();
+  }), it("merges partial overrides and exposes css variables", () => {
+    const { container: t } = o(
+      /* @__PURE__ */ e(
+        a,
+        {
+          theme: {
+            palette: {
+              primary: { main: "#123456", contrastText: "#abcdef" }
+            },
+            semantic: {
+              surface: {
+                base: "#f0f0f0"
+              }
+            }
+          },
+          children: /* @__PURE__ */ e(i, {})
+        }
+      )
+    );
+    expect(s.getByText("#123456")).toBeInTheDocument();
+    const r = t.firstElementChild;
+    expect(r).toHaveStyle(
+      "--jigowatts-color-primary: #123456"
+    ), expect(r).toHaveStyle(
+      "--jigowatts-color-surface: #f0f0f0"
+    );
+  });
+});
+//# sourceMappingURL=index.test.es.js.map

package/dist/theme/index.test.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.es.js","sources":["../../src/theme/index.test.tsx"],"sourcesContent":["import { render, screen } from \"@testing-library/react\";\n\nimport {\n  ThemeProvider,\n  useJigowattsTheme,\n} from \".\";\n\nconst ThemeProbe = () => {\n  const theme = useJigowattsTheme();\n\n  return <span>{theme.palette.primary.main}</span>;\n};\n\ndescribe(\"ThemeProvider\", () => {\n  it(\"uses default colors when no override is provided\", () => {\n    render(\n      <ThemeProvider>\n        <ThemeProbe />\n      </ThemeProvider>,\n    );\n\n    expect(screen.getByText(\"#6672E8\")).toBeInTheDocument();\n  });\n\n  it(\"merges partial overrides and exposes css variables\", () => {\n    const { container } = render(\n      <ThemeProvider\n        theme={{\n          palette: {\n            primary: { main: \"#123456\", contrastText: \"#abcdef\" },\n          },\n          semantic: {\n            surface: {\n              base: \"#f0f0f0\",\n            },\n          },\n        }}\n      >\n        <ThemeProbe />\n      </ThemeProvider>,\n    );\n\n    expect(screen.getByText(\"#123456\")).toBeInTheDocument();\n    const wrapper = container.firstElementChild as HTMLElement;\n\n    expect(wrapper).toHaveStyle(\n      \"--jigowatts-color-primary: #123456\",\n    );\n    expect(wrapper).toHaveStyle(\n      \"--jigowatts-color-surface: #f0f0f0\",\n    );\n  });\n});\n"],"names":["ThemeProbe","theme","useJigowattsTheme","jsx","render","ThemeProvider","screen","container","wrapper"],"mappings":";;;AAOA,MAAMA,IAAa,MAAM;AACvB,QAAMC,IAAQC,EAAA;AAEd,SAAO,gBAAAC,EAAC,QAAA,EAAM,UAAAF,EAAM,QAAQ,QAAQ,MAAK;AAC3C;AAEA,SAAS,iBAAiB,MAAM;AAC9B,KAAG,oDAAoD,MAAM;AAC3D,IAAAG;AAAA,MACE,gBAAAD,EAACE,GAAA,EACC,UAAA,gBAAAF,EAACH,GAAA,CAAA,CAAW,EAAA,CACd;AAAA,IAAA,GAGF,OAAOM,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAA;AAAA,EACtC,CAAC,GAED,GAAG,sDAAsD,MAAM;AAC7D,UAAM,EAAE,WAAAC,MAAcH;AAAA,MACpB,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,cACP,SAAS,EAAE,MAAM,WAAW,cAAc,UAAA;AAAA,YAAU;AAAA,YAEtD,UAAU;AAAA,cACR,SAAS;AAAA,gBACP,MAAM;AAAA,cAAA;AAAA,YACR;AAAA,UACF;AAAA,UAGF,4BAACL,GAAA,CAAA,CAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAGF,WAAOM,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAA;AACpC,UAAME,IAAUD,EAAU;AAE1B,WAAOC,CAAO,EAAE;AAAA,MACd;AAAA,IAAA,GAEF,OAAOA,CAAO,EAAE;AAAA,MACd;AAAA,IAAA;AAAA,EAEJ,CAAC;AACH,CAAC;"}

package/dist/theme/themeStoryUtils.cjs.js

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),t=require("./index.cjs.js"),a={primary:t.defaultJigowattsTheme.palette.primary.main,secondary:t.defaultJigowattsTheme.palette.secondary.main,thirdly:t.defaultJigowattsTheme.palette.thirdly.main,negative:t.defaultJigowattsTheme.palette.negative.main,surface:t.defaultJigowattsTheme.semantic.surface.base,subtleSurface:t.defaultJigowattsTheme.semantic.surface.subtle,border:t.defaultJigowattsTheme.semantic.surface.border,loader:t.defaultJigowattsTheme.semantic.loader.color,overlay:t.defaultJigowattsTheme.semantic.overlay.background,text:t.defaultJigowattsTheme.semantic.text.primary,textSecondary:t.defaultJigowattsTheme.semantic.text.secondary,inputBorder:t.defaultJigowattsTheme.semantic.input.border,inputPlaceholder:t.defaultJigowattsTheme.semantic.input.placeholder,radioChecked:t.defaultJigowattsTheme.semantic.radio.checked,paginationSelected:t.defaultJigowattsTheme.semantic.pagination.selected,paginationContrastText:t.defaultJigowattsTheme.semantic.pagination.contrastText,primaryHover:t.defaultJigowattsTheme.semantic.interaction.primaryHover},n={primary:a.primary,secondary:a.secondary,thirdly:a.thirdly,negative:a.negative},d={surface:a.surface,subtleSurface:a.subtleSurface,border:a.border,loader:a.loader,overlay:a.overlay,text:a.text,textSecondary:a.textSecondary,inputBorder:a.inputBorder,inputPlaceholder:a.inputPlaceholder,radioChecked:a.radioChecked,paginationSelected:a.paginationSelected,paginationContrastText:a.paginationContrastText,primaryHover:a.primaryHover},r=e=>({palette:{primary:{main:e.primary,contrastText:"#FFFFFF"},secondary:{main:e.secondary,contrastText:"#FFFFFF"},thirdly:{main:e.thirdly,contrastText:"#FFFFFF"},normal:{main:"#808181",contrastText:"#FFFFFF"},negative:{main:e.negative,contrastText:"#FFFFFF"}},semantic:{surface:{base:e.surface,subtle:e.subtleSurface,border:e.border},text:{primary:e.text,secondary:e.textSecondary,inverse:"#FFFFFF",muted:"#808181"},overlay:{background:e.overlay},loader:{color:e.loader},pagination:{selected:e.paginationSelected,contrastText:e.paginationContrastText},input:{border:e.inputBorder,placeholder:e.inputPlaceholder},radio:{checked:e.radioChecked},interaction:{primaryHover:e.primaryHover}}}),c={primary:{control:{type:"text"}},secondary:{control:{type:"text"}},thirdly:{control:{type:"text"}},negative:{control:{type:"text"}}},l={surface:{control:{type:"text"}},subtleSurface:{control:{type:"text"}},border:{control:{type:"text"}},loader:{control:{type:"text"}},overlay:{control:{type:"text"}},text:{control:{type:"text"}},textSecondary:{control:{type:"text"}},inputBorder:{control:{type:"text"}},inputPlaceholder:{control:{type:"text"}},radioChecked:{control:{type:"text"}},paginationSelected:{control:{type:"text"}},paginationContrastText:{control:{type:"text"}},primaryHover:{control:{type:"text"}}},s=`
+  .theme-preview-card {
+    padding: 20px;
+    border-radius: 20px;
+    background: var(--jigowatts-color-surface, white);
+    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
+  }
+
+  .theme-token-label {
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: capitalize;
+  }
+
+  .theme-token-note {
+    font-size: 12px;
+    line-height: 1.4;
+    opacity: 0.85;
+  }
+
+  .theme-visual-surface {
+    border-radius: 16px;
+    padding: 16px;
+    background: var(--jigowatts-color-surface, white);
+    border: 1px solid var(--jigowatts-color-border, #e5e7eb);
+  }
+
+  .theme-visual-surface-subtle {
+    border-radius: 16px;
+    padding: 16px;
+    background: var(--jigowatts-color-surface-subtle, #f7f8fa);
+    border: 1px solid var(--jigowatts-color-border, #e5e7eb);
+  }
+
+  .theme-text-sample {
+    display: grid;
+    gap: 8px;
+  }
+
+  .theme-token-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .theme-token-pill {
+    padding: 8px 12px;
+    border-radius: 9999px;
+    font-size: 13px;
+    font-weight: 700;
+  }
+`,p=({themeState:e,children:o})=>i.jsx(t.ThemeProvider,{theme:r(e),children:o}),u={padding:20,borderRadius:20,background:"var(--jigowatts-color-surface, white)",boxShadow:"0 20px 50px rgba(15, 23, 42, 0.08)"};exports.ThemeStoryProvider=p;exports.createThemeOptions=r;exports.defaultPaletteThemeState=n;exports.defaultSemanticThemeState=d;exports.defaultThemeState=a;exports.themeArgTypesPalette=c;exports.themeArgTypesSemantic=l;exports.themeCardStyle=u;exports.themePreviewStyles=s;
+//# sourceMappingURL=themeStoryUtils.cjs.js.map

package/dist/theme/themeStoryUtils.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeStoryUtils.cjs.js","sources":["../../src/theme/themeStoryUtils.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\n\nimport { defaultJigowattsTheme, ThemeProvider } from \".\";\n\nexport type ThemeState = {\n  primary: string;\n  secondary: string;\n  thirdly: string;\n  negative: string;\n  surface: string;\n  subtleSurface: string;\n  border: string;\n  loader: string;\n  overlay: string;\n  text: string;\n  textSecondary: string;\n  inputBorder: string;\n  inputPlaceholder: string;\n  radioChecked: string;\n  paginationSelected: string;\n  paginationContrastText: string;\n  primaryHover: string;\n};\n\nexport const defaultThemeState: ThemeState = {\n  primary: defaultJigowattsTheme.palette.primary.main,\n  secondary: defaultJigowattsTheme.palette.secondary.main,\n  thirdly: defaultJigowattsTheme.palette.thirdly.main,\n  negative: defaultJigowattsTheme.palette.negative.main,\n  surface: defaultJigowattsTheme.semantic.surface.base,\n  subtleSurface: defaultJigowattsTheme.semantic.surface.subtle,\n  border: defaultJigowattsTheme.semantic.surface.border,\n  loader: defaultJigowattsTheme.semantic.loader.color,\n  overlay: defaultJigowattsTheme.semantic.overlay.background,\n  text: defaultJigowattsTheme.semantic.text.primary,\n  textSecondary: defaultJigowattsTheme.semantic.text.secondary,\n  inputBorder: defaultJigowattsTheme.semantic.input.border,\n  inputPlaceholder: defaultJigowattsTheme.semantic.input.placeholder,\n  radioChecked: defaultJigowattsTheme.semantic.radio.checked,\n  paginationSelected: defaultJigowattsTheme.semantic.pagination.selected,\n  paginationContrastText:\n    defaultJigowattsTheme.semantic.pagination.contrastText,\n  primaryHover: defaultJigowattsTheme.semantic.interaction.primaryHover,\n};\n\nexport const defaultPaletteThemeState = {\n  primary: defaultThemeState.primary,\n  secondary: defaultThemeState.secondary,\n  thirdly: defaultThemeState.thirdly,\n  negative: defaultThemeState.negative,\n} satisfies Pick<ThemeState, \"primary\" | \"secondary\" | \"thirdly\" | \"negative\">;\n\nexport const defaultSemanticThemeState = {\n  surface: defaultThemeState.surface,\n  subtleSurface: defaultThemeState.subtleSurface,\n  border: defaultThemeState.border,\n  loader: defaultThemeState.loader,\n  overlay: defaultThemeState.overlay,\n  text: defaultThemeState.text,\n  textSecondary: defaultThemeState.textSecondary,\n  inputBorder: defaultThemeState.inputBorder,\n  inputPlaceholder: defaultThemeState.inputPlaceholder,\n  radioChecked: defaultThemeState.radioChecked,\n  paginationSelected: defaultThemeState.paginationSelected,\n  paginationContrastText: defaultThemeState.paginationContrastText,\n  primaryHover: defaultThemeState.primaryHover,\n} satisfies Omit<\n  ThemeState,\n  \"primary\" | \"secondary\" | \"thirdly\" | \"negative\"\n>;\n\nexport const createThemeOptions = (themeState: ThemeState) => ({\n  palette: {\n    primary: { main: themeState.primary, contrastText: \"#FFFFFF\" },\n    secondary: { main: themeState.secondary, contrastText: \"#FFFFFF\" },\n    thirdly: { main: themeState.thirdly, contrastText: \"#FFFFFF\" },\n    normal: { main: \"#808181\", contrastText: \"#FFFFFF\" },\n    negative: { main: themeState.negative, contrastText: \"#FFFFFF\" },\n  },\n  semantic: {\n    surface: {\n      base: themeState.surface,\n      subtle: themeState.subtleSurface,\n      border: themeState.border,\n    },\n    text: {\n      primary: themeState.text,\n      secondary: themeState.textSecondary,\n      inverse: \"#FFFFFF\",\n      muted: \"#808181\",\n    },\n    overlay: {\n      background: themeState.overlay,\n    },\n    loader: {\n      color: themeState.loader,\n    },\n    pagination: {\n      selected: themeState.paginationSelected,\n      contrastText: themeState.paginationContrastText,\n    },\n    input: {\n      border: themeState.inputBorder,\n      placeholder: themeState.inputPlaceholder,\n    },\n    radio: {\n      checked: themeState.radioChecked,\n    },\n    interaction: {\n      primaryHover: themeState.primaryHover,\n    },\n  },\n});\n\nexport const themeArgTypesPalette = {\n  primary: { control: { type: \"text\" } },\n  secondary: { control: { type: \"text\" } },\n  thirdly: { control: { type: \"text\" } },\n  negative: { control: { type: \"text\" } },\n} as const;\n\nexport const themeArgTypesSemantic = {\n  surface: { control: { type: \"text\" } },\n  subtleSurface: { control: { type: \"text\" } },\n  border: { control: { type: \"text\" } },\n  loader: { control: { type: \"text\" } },\n  overlay: { control: { type: \"text\" } },\n  text: { control: { type: \"text\" } },\n  textSecondary: { control: { type: \"text\" } },\n  inputBorder: { control: { type: \"text\" } },\n  inputPlaceholder: { control: { type: \"text\" } },\n  radioChecked: { control: { type: \"text\" } },\n  paginationSelected: { control: { type: \"text\" } },\n  paginationContrastText: { control: { type: \"text\" } },\n  primaryHover: { control: { type: \"text\" } },\n} as const;\n\nexport const themePreviewStyles = `\n  .theme-preview-card {\n    padding: 20px;\n    border-radius: 20px;\n    background: var(--jigowatts-color-surface, white);\n    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);\n  }\n\n  .theme-token-label {\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 0.02em;\n    text-transform: capitalize;\n  }\n\n  .theme-token-note {\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.85;\n  }\n\n  .theme-visual-surface {\n    border-radius: 16px;\n    padding: 16px;\n    background: var(--jigowatts-color-surface, white);\n    border: 1px solid var(--jigowatts-color-border, #e5e7eb);\n  }\n\n  .theme-visual-surface-subtle {\n    border-radius: 16px;\n    padding: 16px;\n    background: var(--jigowatts-color-surface-subtle, #f7f8fa);\n    border: 1px solid var(--jigowatts-color-border, #e5e7eb);\n  }\n\n  .theme-text-sample {\n    display: grid;\n    gap: 8px;\n  }\n\n  .theme-token-pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .theme-token-pill {\n    padding: 8px 12px;\n    border-radius: 9999px;\n    font-size: 13px;\n    font-weight: 700;\n  }\n`;\n\nexport const ThemeStoryProvider = ({\n  themeState,\n  children,\n}: {\n  themeState: ThemeState;\n  children: ReactNode;\n}) => <ThemeProvider theme={createThemeOptions(themeState)}>{children}</ThemeProvider>;\n\nexport const themeCardStyle = {\n  padding: 20,\n  borderRadius: 20,\n  background: \"var(--jigowatts-color-surface, white)\",\n  boxShadow: \"0 20px 50px rgba(15, 23, 42, 0.08)\",\n} as CSSProperties;\n"],"names":["defaultThemeState","defaultJigowattsTheme","defaultPaletteThemeState","defaultSemanticThemeState","createThemeOptions","themeState","themeArgTypesPalette","themeArgTypesSemantic","themePreviewStyles","ThemeStoryProvider","children","ThemeProvider","themeCardStyle"],"mappings":"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"}

package/dist/theme/themeStoryUtils.d.ts

@@ -0,0 +1,195 @@
+import { CSSProperties, ReactNode } from 'react';
+
+export type ThemeState = {
+    primary: string;
+    secondary: string;
+    thirdly: string;
+    negative: string;
+    surface: string;
+    subtleSurface: string;
+    border: string;
+    loader: string;
+    overlay: string;
+    text: string;
+    textSecondary: string;
+    inputBorder: string;
+    inputPlaceholder: string;
+    radioChecked: string;
+    paginationSelected: string;
+    paginationContrastText: string;
+    primaryHover: string;
+};
+export declare const defaultThemeState: ThemeState;
+export declare const defaultPaletteThemeState: {
+    primary: string;
+    secondary: string;
+    thirdly: string;
+    negative: string;
+};
+export declare const defaultSemanticThemeState: {
+    surface: string;
+    subtleSurface: string;
+    border: string;
+    loader: string;
+    overlay: string;
+    text: string;
+    textSecondary: string;
+    inputBorder: string;
+    inputPlaceholder: string;
+    radioChecked: string;
+    paginationSelected: string;
+    paginationContrastText: string;
+    primaryHover: string;
+};
+export declare const createThemeOptions: (themeState: ThemeState) => {
+    palette: {
+        primary: {
+            main: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            contrastText: string;
+        };
+        thirdly: {
+            main: string;
+            contrastText: string;
+        };
+        normal: {
+            main: string;
+            contrastText: string;
+        };
+        negative: {
+            main: string;
+            contrastText: string;
+        };
+    };
+    semantic: {
+        surface: {
+            base: string;
+            subtle: string;
+            border: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            inverse: string;
+            muted: string;
+        };
+        overlay: {
+            background: string;
+        };
+        loader: {
+            color: string;
+        };
+        pagination: {
+            selected: string;
+            contrastText: string;
+        };
+        input: {
+            border: string;
+            placeholder: string;
+        };
+        radio: {
+            checked: string;
+        };
+        interaction: {
+            primaryHover: string;
+        };
+    };
+};
+export declare const themeArgTypesPalette: {
+    readonly primary: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly secondary: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly thirdly: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly negative: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+};
+export declare const themeArgTypesSemantic: {
+    readonly surface: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly subtleSurface: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly border: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly loader: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly overlay: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly text: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly textSecondary: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly inputBorder: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly inputPlaceholder: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly radioChecked: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly paginationSelected: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly paginationContrastText: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+    readonly primaryHover: {
+        readonly control: {
+            readonly type: "text";
+        };
+    };
+};
+export declare const themePreviewStyles = "\n  .theme-preview-card {\n    padding: 20px;\n    border-radius: 20px;\n    background: var(--jigowatts-color-surface, white);\n    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);\n  }\n\n  .theme-token-label {\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 0.02em;\n    text-transform: capitalize;\n  }\n\n  .theme-token-note {\n    font-size: 12px;\n    line-height: 1.4;\n    opacity: 0.85;\n  }\n\n  .theme-visual-surface {\n    border-radius: 16px;\n    padding: 16px;\n    background: var(--jigowatts-color-surface, white);\n    border: 1px solid var(--jigowatts-color-border, #e5e7eb);\n  }\n\n  .theme-visual-surface-subtle {\n    border-radius: 16px;\n    padding: 16px;\n    background: var(--jigowatts-color-surface-subtle, #f7f8fa);\n    border: 1px solid var(--jigowatts-color-border, #e5e7eb);\n  }\n\n  .theme-text-sample {\n    display: grid;\n    gap: 8px;\n  }\n\n  .theme-token-pills {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .theme-token-pill {\n    padding: 8px 12px;\n    border-radius: 9999px;\n    font-size: 13px;\n    font-weight: 700;\n  }\n";
+export declare const ThemeStoryProvider: ({ themeState, children, }: {
+    themeState: ThemeState;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const themeCardStyle: CSSProperties;

package/dist/theme/themeStoryUtils.es.js

@@ -0,0 +1,172 @@
+import { jsx as o } from "react/jsx-runtime";
+import { defaultJigowattsTheme as t, ThemeProvider as n } from "./index.es.js";
+const r = {
+  primary: t.palette.primary.main,
+  secondary: t.palette.secondary.main,
+  thirdly: t.palette.thirdly.main,
+  negative: t.palette.negative.main,
+  surface: t.semantic.surface.base,
+  subtleSurface: t.semantic.surface.subtle,
+  border: t.semantic.surface.border,
+  loader: t.semantic.loader.color,
+  overlay: t.semantic.overlay.background,
+  text: t.semantic.text.primary,
+  textSecondary: t.semantic.text.secondary,
+  inputBorder: t.semantic.input.border,
+  inputPlaceholder: t.semantic.input.placeholder,
+  radioChecked: t.semantic.radio.checked,
+  paginationSelected: t.semantic.pagination.selected,
+  paginationContrastText: t.semantic.pagination.contrastText,
+  primaryHover: t.semantic.interaction.primaryHover
+}, p = {
+  primary: r.primary,
+  secondary: r.secondary,
+  thirdly: r.thirdly,
+  negative: r.negative
+}, l = {
+  surface: r.surface,
+  subtleSurface: r.subtleSurface,
+  border: r.border,
+  loader: r.loader,
+  overlay: r.overlay,
+  text: r.text,
+  textSecondary: r.textSecondary,
+  inputBorder: r.inputBorder,
+  inputPlaceholder: r.inputPlaceholder,
+  radioChecked: r.radioChecked,
+  paginationSelected: r.paginationSelected,
+  paginationContrastText: r.paginationContrastText,
+  primaryHover: r.primaryHover
+}, i = (e) => ({
+  palette: {
+    primary: { main: e.primary, contrastText: "#FFFFFF" },
+    secondary: { main: e.secondary, contrastText: "#FFFFFF" },
+    thirdly: { main: e.thirdly, contrastText: "#FFFFFF" },
+    normal: { main: "#808181", contrastText: "#FFFFFF" },
+    negative: { main: e.negative, contrastText: "#FFFFFF" }
+  },
+  semantic: {
+    surface: {
+      base: e.surface,
+      subtle: e.subtleSurface,
+      border: e.border
+    },
+    text: {
+      primary: e.text,
+      secondary: e.textSecondary,
+      inverse: "#FFFFFF",
+      muted: "#808181"
+    },
+    overlay: {
+      background: e.overlay
+    },
+    loader: {
+      color: e.loader
+    },
+    pagination: {
+      selected: e.paginationSelected,
+      contrastText: e.paginationContrastText
+    },
+    input: {
+      border: e.inputBorder,
+      placeholder: e.inputPlaceholder
+    },
+    radio: {
+      checked: e.radioChecked
+    },
+    interaction: {
+      primaryHover: e.primaryHover
+    }
+  }
+}), s = {
+  primary: { control: { type: "text" } },
+  secondary: { control: { type: "text" } },
+  thirdly: { control: { type: "text" } },
+  negative: { control: { type: "text" } }
+}, x = {
+  surface: { control: { type: "text" } },
+  subtleSurface: { control: { type: "text" } },
+  border: { control: { type: "text" } },
+  loader: { control: { type: "text" } },
+  overlay: { control: { type: "text" } },
+  text: { control: { type: "text" } },
+  textSecondary: { control: { type: "text" } },
+  inputBorder: { control: { type: "text" } },
+  inputPlaceholder: { control: { type: "text" } },
+  radioChecked: { control: { type: "text" } },
+  paginationSelected: { control: { type: "text" } },
+  paginationContrastText: { control: { type: "text" } },
+  primaryHover: { control: { type: "text" } }
+}, y = `
+  .theme-preview-card {
+    padding: 20px;
+    border-radius: 20px;
+    background: var(--jigowatts-color-surface, white);
+    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
+  }
+
+  .theme-token-label {
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    text-transform: capitalize;
+  }
+
+  .theme-token-note {
+    font-size: 12px;
+    line-height: 1.4;
+    opacity: 0.85;
+  }
+
+  .theme-visual-surface {
+    border-radius: 16px;
+    padding: 16px;
+    background: var(--jigowatts-color-surface, white);
+    border: 1px solid var(--jigowatts-color-border, #e5e7eb);
+  }
+
+  .theme-visual-surface-subtle {
+    border-radius: 16px;
+    padding: 16px;
+    background: var(--jigowatts-color-surface-subtle, #f7f8fa);
+    border: 1px solid var(--jigowatts-color-border, #e5e7eb);
+  }
+
+  .theme-text-sample {
+    display: grid;
+    gap: 8px;
+  }
+
+  .theme-token-pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .theme-token-pill {
+    padding: 8px 12px;
+    border-radius: 9999px;
+    font-size: 13px;
+    font-weight: 700;
+  }
+`, u = ({
+  themeState: e,
+  children: a
+}) => /* @__PURE__ */ o(n, { theme: i(e), children: a }), m = {
+  padding: 20,
+  borderRadius: 20,
+  background: "var(--jigowatts-color-surface, white)",
+  boxShadow: "0 20px 50px rgba(15, 23, 42, 0.08)"
+};
+export {
+  u as ThemeStoryProvider,
+  i as createThemeOptions,
+  p as defaultPaletteThemeState,
+  l as defaultSemanticThemeState,
+  r as defaultThemeState,
+  s as themeArgTypesPalette,
+  x as themeArgTypesSemantic,
+  m as themeCardStyle,
+  y as themePreviewStyles
+};
+//# sourceMappingURL=themeStoryUtils.es.js.map