@newtonedev/editor 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/editor",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Shared color system editor for Newtone applications",
   "license": "MIT",
   "repository": {

package/src/components/sections/OthersSection.tsx

@@ -1,6 +1,6 @@
-import { Slider, useTokens } from "@newtonedev/components";
+import { Slider, Select, useTokens } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
-import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorState, SpacingPreset } from "@newtonedev/configurator";
 import type { ConfiguratorAction } from "@newtonedev/configurator";
 
 interface OthersSectionProps {
@@ -11,9 +11,17 @@ interface OthersSectionProps {
 export function OthersSection({ state, dispatch }: OthersSectionProps) {
   const tokens = useTokens();
 
-  const density = state.spacing?.density ?? 0.5;
+  const spacingPreset = state.spacing?.preset ?? 'md';
   const intensity = state.roundness?.intensity ?? 0.5;
 
+  const spacingOptions: Array<{ value: SpacingPreset; label: string }> = [
+    { value: 'xs', label: 'Extra Small' },
+    { value: 'sm', label: 'Small' },
+    { value: 'md', label: 'Medium' },
+    { value: 'lg', label: 'Large' },
+    { value: 'xl', label: 'Extra Large' },
+  ];
+
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
       <div>
@@ -29,15 +37,13 @@ export function OthersSection({ state, dispatch }: OthersSectionProps) {
         >
           Spacing
         </div>
-        <Slider
-          value={Math.round(density * 100)}
-          onValueChange={(v) =>
-            dispatch({ type: "SET_SPACING_DENSITY", density: v / 100 })
+        <Select
+          value={spacingPreset}
+          onValueChange={(preset) =>
+            dispatch({ type: "SET_SPACING_PRESET", preset: preset as SpacingPreset })
           }
-          min={0}
-          max={100}
-          label="Density"
-          showValue
+          options={spacingOptions}
+          label="Preset"
         />
       </div>