@newtonedev/configurator 0.1.1 → 0.1.3

package/dist/bridge/toThemeConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toThemeConfig.d.ts","sourceRoot":"","sources":["../../src/bridge/toThemeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,wBAAwB,CAAC;AAgE7E;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,kBAAkB,CAuF1E"}
+{"version":3,"file":"toThemeConfig.d.ts","sourceRoot":"","sources":["../../src/bridge/toThemeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,wBAAwB,CAAC;AAoE7E;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,kBAAkB,CA8F1E"}

package/dist/index.cjs

@@ -78,8 +78,8 @@ var DEFAULT_CONFIGURATOR_STATE = {
     theme: "neutral"
   },
   spacing: {
-    density: 0.5
-    // 1.0x multiplier = preserves current hardcoded values
+    preset: "md"
+    // Medium (8px base): default/balanced spacing
   },
   roundness: {
     intensity: 0.5
@@ -275,11 +275,11 @@ function configuratorReducer(state, action) {
         }
       };
     // Spacing actions
-    case "SET_SPACING_DENSITY":
+    case "SET_SPACING_PRESET":
       return {
         ...state,
         spacing: {
-          density: clamp(action.density, 0, 1)
+          preset: action.preset
         }
       };
     // Roundness actions
@@ -446,9 +446,18 @@ function traditionalHueToOklch(hue) {
 }
 
 // src/bridge/toThemeConfig.ts
-function densityToMultiplier(density) {
-  return 0.5 + density * 1.5;
-}
+var SPACING_PRESET_TO_BASE = {
+  xs: 6,
+  // Extra Small: compact/dense UI
+  sm: 7,
+  // Small: tighter spacing
+  md: 8,
+  // Medium: default/balanced
+  lg: 9,
+  // Large: more spacious
+  xl: 10
+  // Extra Large: maximum spacing
+};
 function roundnessToMultiplier(intensity) {
   return intensity * 2;
 }
@@ -514,7 +523,7 @@ function toThemeConfig(state) {
     darkest: state.dynamicRange.darkest,
     ...hueGrading ? { hueGrading } : {}
   };
-  const spacingMultiplier = densityToMultiplier(state.spacing?.density ?? 0.5);
+  const spacingBase = SPACING_PRESET_TO_BASE[state.spacing?.preset ?? "md"];
   const radiusMultiplier = roundnessToMultiplier(state.roundness?.intensity ?? 0.5);
   return {
     colorSystem: { dynamicRange, palettes },
@@ -528,12 +537,21 @@ function toThemeConfig(state) {
       offsets: [-0.02, 0, 0.04]
     },
     spacing: {
-      xs: Math.round(4 * spacingMultiplier),
-      sm: Math.round(8 * spacingMultiplier),
-      md: Math.round(12 * spacingMultiplier),
-      lg: Math.round(16 * spacingMultiplier),
-      xl: Math.round(24 * spacingMultiplier),
-      xxl: Math.round(32 * spacingMultiplier)
+      "00": Math.round(spacingBase * 0),
+      // Always 0
+      "02": Math.round(spacingBase * 0.25),
+      "04": Math.round(spacingBase * 0.5),
+      "06": Math.round(spacingBase * 0.75),
+      "08": Math.round(spacingBase * 1),
+      // Equals base
+      "10": Math.round(spacingBase * 1.25),
+      "12": Math.round(spacingBase * 1.5),
+      "16": Math.round(spacingBase * 2),
+      "20": Math.round(spacingBase * 2.5),
+      "24": Math.round(spacingBase * 3),
+      "32": Math.round(spacingBase * 4),
+      "40": Math.round(spacingBase * 5),
+      "48": Math.round(spacingBase * 6)
     },
     radius: {
       none: 0,
@@ -1028,7 +1046,7 @@ function PreviewCard({
       onValueChange: (t) => dispatch({ type: "SET_PREVIEW_THEME", theme: t }),
       label: "Theme"
     }
-  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.wrapper }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "primary", size: "sm" }, "Primary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "secondary", size: "sm" }, "Secondary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "ghost", size: "sm" }, "Ghost"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "outline", size: "sm" }, "Outline")), /* @__PURE__ */ React__default.default.createElement(components.TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
+  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.wrapper }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "primary", semantic: "accent", size: "sm" }, "Primary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "primary", semantic: "neutral", size: "sm" }, "Secondary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "tertiary", semantic: "neutral", size: "sm" }, "Ghost"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "secondary", semantic: "neutral", size: "sm" }, "Outline")), /* @__PURE__ */ React__default.default.createElement(components.TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
   } }), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.success.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Success"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.warning.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Warning"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.error.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Error"))));
 }
 function PreviewPanel({ state, dispatch, themeConfig }) {
@@ -1156,7 +1174,8 @@ function ExportPanel({ state }) {
   return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles4.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles4.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Export"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles4.tabs }, /* @__PURE__ */ React__default.default.createElement(
     components.Button,
     {
-      variant: format === "css" ? "primary" : "ghost",
+      variant: format === "css" ? "primary" : "tertiary",
+      semantic: format === "css" ? "accent" : "neutral",
       size: "sm",
       onPress: () => setFormat("css")
     },
@@ -1164,12 +1183,13 @@ function ExportPanel({ state }) {
   ), /* @__PURE__ */ React__default.default.createElement(
     components.Button,
     {
-      variant: format === "json" ? "primary" : "ghost",
+      variant: format === "json" ? "primary" : "tertiary",
+      semantic: format === "json" ? "accent" : "neutral",
       size: "sm",
       onPress: () => setFormat("json")
     },
     "JSON"
-  ), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "outline", size: "sm", onPress: handleCopy }, copied ? "Copied!" : "Copy")), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [styles4.codeBlock, { backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb) }] }, /* @__PURE__ */ React__default.default.createElement(
+  ), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "secondary", semantic: "neutral", size: "sm", onPress: handleCopy }, copied ? "Copied!" : "Copy")), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [styles4.codeBlock, { backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb) }] }, /* @__PURE__ */ React__default.default.createElement(
     reactNative.Text,
     {
       style: [styles4.code, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }],
@@ -1219,21 +1239,25 @@ var ICON_WEIGHT_OPTIONS = [
 ];
 function DesignPanel({ state, dispatch }) {
   const tokens = components.useTokens(1);
-  const density = state.spacing?.density ?? 0.5;
+  const spacingPreset = state.spacing?.preset ?? "md";
   const intensity = state.roundness?.intensity ?? 0.5;
   const baseSize = state.typography?.scale.baseSize ?? 16;
   const ratio = state.typography?.scale.ratio ?? 1.25;
   const variant = state.icons?.variant ?? "rounded";
   const weight = state.icons?.weight ?? 400;
   return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles5.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Design System"), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Spacing"), /* @__PURE__ */ React__default.default.createElement(
-    components.Slider,
+    components.Select,
     {
-      value: Math.round(density * 100),
-      onValueChange: (v) => dispatch({ type: "SET_SPACING_DENSITY", density: v / 100 }),
-      min: 0,
-      max: 100,
-      label: "Density",
-      showValue: true
+      value: spacingPreset,
+      onValueChange: (preset) => dispatch({ type: "SET_SPACING_PRESET", preset }),
+      options: [
+        { value: "xs", label: "Extra Small" },
+        { value: "sm", label: "Small" },
+        { value: "md", label: "Medium" },
+        { value: "lg", label: "Large" },
+        { value: "xl", label: "Extra Large" }
+      ],
+      label: "Preset"
     }
   ), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Roundness"), /* @__PURE__ */ React__default.default.createElement(
     components.Slider,