dialkit 0.2.2 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +12 -0
  2. package/dist/index.cjs +474 -141
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +35 -5
  5. package/dist/index.d.ts +35 -5
  6. package/dist/index.js +446 -115
  7. package/dist/index.js.map +1 -1
  8. package/dist/solid/index.cjs +2569 -0
  9. package/dist/solid/index.cjs.map +1 -0
  10. package/dist/solid/index.d.cts +225 -0
  11. package/dist/solid/index.d.ts +225 -0
  12. package/dist/solid/index.js +2530 -0
  13. package/dist/solid/index.js.map +1 -0
  14. package/dist/styles.css +7 -1
  15. package/package.json +31 -9
package/dist/index.d.cts CHANGED
@@ -10,6 +10,12 @@ type SpringConfig = {
10
10
  visualDuration?: number;
11
11
  bounce?: number;
12
12
  };
13
+ type EasingConfig = {
14
+ type: 'easing';
15
+ duration: number;
16
+ ease: [number, number, number, number];
17
+ };
18
+ type TransitionConfig = SpringConfig | EasingConfig;
13
19
  type ActionConfig = {
14
20
  type: 'action';
15
21
  label?: string;
@@ -31,15 +37,15 @@ type TextConfig = {
31
37
  default?: string;
32
38
  placeholder?: string;
33
39
  };
34
- type DialValue = number | boolean | string | SpringConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
40
+ type DialValue = number | boolean | string | SpringConfig | EasingConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
35
41
  type DialConfig = {
36
42
  [key: string]: DialValue | [number, number, number, number?] | DialConfig;
37
43
  };
38
44
  type ResolvedValues<T extends DialConfig> = {
39
- [K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? SpringConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
45
+ [K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? TransitionConfig : T[K] extends EasingConfig ? TransitionConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
40
46
  };
41
47
  type ControlMeta = {
42
- type: 'slider' | 'toggle' | 'spring' | 'folder' | 'action' | 'select' | 'color' | 'text';
48
+ type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
43
49
  path: string;
44
50
  label: string;
45
51
  min?: number;
@@ -76,10 +82,13 @@ declare class DialStoreClass {
76
82
  private activePreset;
77
83
  private baseValues;
78
84
  registerPanel(id: string, name: string, config: DialConfig): void;
85
+ updatePanel(id: string, name: string, config: DialConfig): void;
79
86
  unregisterPanel(id: string): void;
80
87
  updateValue(panelId: string, path: string, value: DialValue): void;
81
88
  updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
82
89
  getSpringMode(panelId: string, path: string): 'simple' | 'advanced';
90
+ updateTransitionMode(panelId: string, path: string, mode: 'easing' | 'simple' | 'advanced'): void;
91
+ getTransitionMode(panelId: string, path: string): 'easing' | 'simple' | 'advanced';
83
92
  getValue(panelId: string, path: string): DialValue | undefined;
84
93
  getValues(panelId: string): Record<string, DialValue>;
85
94
  getPanels(): PanelConfig[];
@@ -96,9 +105,11 @@ declare class DialStoreClass {
96
105
  clearActivePreset(panelId: string): void;
97
106
  private notify;
98
107
  private notifyGlobal;
108
+ private initTransitionModes;
99
109
  private parseConfig;
100
110
  private flattenValues;
101
111
  private isSpringConfig;
112
+ private isEasingConfig;
102
113
  private isActionConfig;
103
114
  private isSelectConfig;
104
115
  private isColorConfig;
@@ -107,6 +118,10 @@ declare class DialStoreClass {
107
118
  private formatLabel;
108
119
  private inferRange;
109
120
  private inferStep;
121
+ private normalizePreservedValue;
122
+ private roundToStep;
123
+ private stepPrecision;
124
+ private mapControlsByPath;
110
125
  }
111
126
  declare const DialStore: DialStoreClass;
112
127
 
@@ -118,8 +133,9 @@ declare function useDialKit<T extends DialConfig>(name: string, config: T, optio
118
133
  type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
119
134
  interface DialRootProps {
120
135
  position?: DialPosition;
136
+ defaultOpen?: boolean;
121
137
  }
122
- declare function DialRoot({ position }: DialRootProps): react.ReactPortal | null;
138
+ declare function DialRoot({ position, defaultOpen }: DialRootProps): react.ReactPortal | null;
123
139
 
124
140
  interface SliderProps {
125
141
  label: string;
@@ -172,6 +188,20 @@ interface SpringVisualizationProps {
172
188
  }
173
189
  declare function SpringVisualization({ spring, isSimpleMode }: SpringVisualizationProps): react_jsx_runtime.JSX.Element;
174
190
 
191
+ interface TransitionControlProps {
192
+ panelId: string;
193
+ path: string;
194
+ label: string;
195
+ value: TransitionConfig;
196
+ onChange: (value: TransitionConfig) => void;
197
+ }
198
+ declare function TransitionControl({ panelId, path, label, value, onChange }: TransitionControlProps): react_jsx_runtime.JSX.Element;
199
+
200
+ interface EasingVisualizationProps {
201
+ easing: EasingConfig;
202
+ }
203
+ declare function EasingVisualization({ easing }: EasingVisualizationProps): react_jsx_runtime.JSX.Element;
204
+
175
205
  interface TextControlProps {
176
206
  label: string;
177
207
  value: string;
@@ -207,4 +237,4 @@ interface PresetManagerProps {
207
237
  }
208
238
  declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
209
239
 
210
- export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type UseDialOptions, useDialKit };
240
+ export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };
package/dist/index.d.ts CHANGED
@@ -10,6 +10,12 @@ type SpringConfig = {
10
10
  visualDuration?: number;
11
11
  bounce?: number;
12
12
  };
13
+ type EasingConfig = {
14
+ type: 'easing';
15
+ duration: number;
16
+ ease: [number, number, number, number];
17
+ };
18
+ type TransitionConfig = SpringConfig | EasingConfig;
13
19
  type ActionConfig = {
14
20
  type: 'action';
15
21
  label?: string;
@@ -31,15 +37,15 @@ type TextConfig = {
31
37
  default?: string;
32
38
  placeholder?: string;
33
39
  };
34
- type DialValue = number | boolean | string | SpringConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
40
+ type DialValue = number | boolean | string | SpringConfig | EasingConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
35
41
  type DialConfig = {
36
42
  [key: string]: DialValue | [number, number, number, number?] | DialConfig;
37
43
  };
38
44
  type ResolvedValues<T extends DialConfig> = {
39
- [K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? SpringConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
45
+ [K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? TransitionConfig : T[K] extends EasingConfig ? TransitionConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
40
46
  };
41
47
  type ControlMeta = {
42
- type: 'slider' | 'toggle' | 'spring' | 'folder' | 'action' | 'select' | 'color' | 'text';
48
+ type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
43
49
  path: string;
44
50
  label: string;
45
51
  min?: number;
@@ -76,10 +82,13 @@ declare class DialStoreClass {
76
82
  private activePreset;
77
83
  private baseValues;
78
84
  registerPanel(id: string, name: string, config: DialConfig): void;
85
+ updatePanel(id: string, name: string, config: DialConfig): void;
79
86
  unregisterPanel(id: string): void;
80
87
  updateValue(panelId: string, path: string, value: DialValue): void;
81
88
  updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
82
89
  getSpringMode(panelId: string, path: string): 'simple' | 'advanced';
90
+ updateTransitionMode(panelId: string, path: string, mode: 'easing' | 'simple' | 'advanced'): void;
91
+ getTransitionMode(panelId: string, path: string): 'easing' | 'simple' | 'advanced';
83
92
  getValue(panelId: string, path: string): DialValue | undefined;
84
93
  getValues(panelId: string): Record<string, DialValue>;
85
94
  getPanels(): PanelConfig[];
@@ -96,9 +105,11 @@ declare class DialStoreClass {
96
105
  clearActivePreset(panelId: string): void;
97
106
  private notify;
98
107
  private notifyGlobal;
108
+ private initTransitionModes;
99
109
  private parseConfig;
100
110
  private flattenValues;
101
111
  private isSpringConfig;
112
+ private isEasingConfig;
102
113
  private isActionConfig;
103
114
  private isSelectConfig;
104
115
  private isColorConfig;
@@ -107,6 +118,10 @@ declare class DialStoreClass {
107
118
  private formatLabel;
108
119
  private inferRange;
109
120
  private inferStep;
121
+ private normalizePreservedValue;
122
+ private roundToStep;
123
+ private stepPrecision;
124
+ private mapControlsByPath;
110
125
  }
111
126
  declare const DialStore: DialStoreClass;
112
127
 
@@ -118,8 +133,9 @@ declare function useDialKit<T extends DialConfig>(name: string, config: T, optio
118
133
  type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
119
134
  interface DialRootProps {
120
135
  position?: DialPosition;
136
+ defaultOpen?: boolean;
121
137
  }
122
- declare function DialRoot({ position }: DialRootProps): react.ReactPortal | null;
138
+ declare function DialRoot({ position, defaultOpen }: DialRootProps): react.ReactPortal | null;
123
139
 
124
140
  interface SliderProps {
125
141
  label: string;
@@ -172,6 +188,20 @@ interface SpringVisualizationProps {
172
188
  }
173
189
  declare function SpringVisualization({ spring, isSimpleMode }: SpringVisualizationProps): react_jsx_runtime.JSX.Element;
174
190
 
191
+ interface TransitionControlProps {
192
+ panelId: string;
193
+ path: string;
194
+ label: string;
195
+ value: TransitionConfig;
196
+ onChange: (value: TransitionConfig) => void;
197
+ }
198
+ declare function TransitionControl({ panelId, path, label, value, onChange }: TransitionControlProps): react_jsx_runtime.JSX.Element;
199
+
200
+ interface EasingVisualizationProps {
201
+ easing: EasingConfig;
202
+ }
203
+ declare function EasingVisualization({ easing }: EasingVisualizationProps): react_jsx_runtime.JSX.Element;
204
+
175
205
  interface TextControlProps {
176
206
  label: string;
177
207
  value: string;
@@ -207,4 +237,4 @@ interface PresetManagerProps {
207
237
  }
208
238
  declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
209
239
 
210
- export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type UseDialOptions, useDialKit };
240
+ export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };