@jigowatts/jigowatts-ui 2.2.0 → 2.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"themeStoryUtils.es.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jigowatts/jigowatts-ui",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "",
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -265,6 +265,11 @@
       "types": "./dist/components/TwoFaDialog/index.d.ts",
       "import": "./dist/components/TwoFaDialog/index.es.js",
       "require": "./dist/components/TwoFaDialog/index.cjs.js"
+    },
+    "./Theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.es.js",
+      "require": "./dist/theme/index.cjs.js"
     }
   },
   "files": [

package/dist/index-D7VNQwOv.js

@@ -1,51 +0,0 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import g from "classnames";
-import './assets/index28.css';const j = "_inputContainer_1sj6d_2", v = "_selectWrapper_1sj6d_9", C = "_select_1sj6d_9", N = "_placeholder_1sj6d_36", f = "_error_1sj6d_40", M = "_errorMessage_1sj6d_44", e = {
-  inputContainer: j,
-  selectWrapper: v,
-  select: C,
-  placeholder: N,
-  error: f,
-  errorMessage: M
-}, S = (d) => {
-  const {
-    id: i,
-    name: p,
-    values: l,
-    register: _,
-    errorMessage: a,
-    placeholder: t,
-    defaultValue: h,
-    onChange: n
-  } = d, u = (s) => {
-    const o = l.find(
-      (m) => m.value == s.target.value
-    );
-    n && o && n(o);
-  };
-  return /* @__PURE__ */ c("div", { className: e.inputContainer, children: [
-    /* @__PURE__ */ r("div", { className: e.selectWrapper, children: /* @__PURE__ */ c(
-      "select",
-      {
-        id: i,
-        name: p,
-        className: g(e.select, {
-          [e.error]: a
-        }),
-        ..._,
-        onChange: u,
-        value: h,
-        children: [
-          t && /* @__PURE__ */ r("option", { value: "", selected: !0, className: e.placeholder, children: t }),
-          l.map((s) => /* @__PURE__ */ r("option", { value: s.value, children: s.label }, s.value))
-        ]
-      }
-    ) }),
-    a && /* @__PURE__ */ r("small", { className: e.errorMessage, children: a })
-  ] });
-};
-export {
-  S,
-  e as s
-};
-//# sourceMappingURL=index-D7VNQwOv.js.map

package/dist/index-SHLzSoKB.cjs

@@ -1,2 +0,0 @@
-"use strict";require('./assets/index28.css');const s=require("react/jsx-runtime"),j=require("classnames"),g="_inputContainer_1sj6d_2",m="_selectWrapper_1sj6d_9",x="_select_1sj6d_9",v="_placeholder_1sj6d_36",C="_error_1sj6d_40",N="_errorMessage_1sj6d_44",e={inputContainer:g,selectWrapper:m,select:x,placeholder:v,error:C,errorMessage:N},M=o=>{const{id:i,name:d,values:a,register:p,errorMessage:l,placeholder:t,defaultValue:u,onChange:c}=o,_=r=>{const n=a.find(h=>h.value==r.target.value);c&&n&&c(n)};return s.jsxs("div",{className:e.inputContainer,children:[s.jsx("div",{className:e.selectWrapper,children:s.jsxs("select",{id:i,name:d,className:j(e.select,{[e.error]:l}),...p,onChange:_,value:u,children:[t&&s.jsx("option",{value:"",selected:!0,className:e.placeholder,children:t}),a.map(r=>s.jsx("option",{value:r.value,children:r.label},r.value))]})}),l&&s.jsx("small",{className:e.errorMessage,children:l})]})};exports.SelectBox=M;exports.styles=e;
-//# sourceMappingURL=index-SHLzSoKB.cjs.map