dialkit 0.2.2 → 1.1.0

package/dist/index.d.cts

@@ -1,6 +1,5 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 type SpringConfig = {
     type: 'spring';
@@ -10,6 +9,12 @@ type SpringConfig = {
     visualDuration?: number;
     bounce?: number;
 };
+type EasingConfig = {
+    type: 'easing';
+    duration: number;
+    ease: [number, number, number, number];
+};
+type TransitionConfig = SpringConfig | EasingConfig;
 type ActionConfig = {
     type: 'action';
     label?: string;
@@ -31,15 +36,15 @@ type TextConfig = {
     default?: string;
     placeholder?: string;
 };
-type DialValue = number | boolean | string | SpringConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
+type DialValue = number | boolean | string | SpringConfig | EasingConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
 type DialConfig = {
     [key: string]: DialValue | [number, number, number, number?] | DialConfig;
 };
 type ResolvedValues<T extends DialConfig> = {
-    [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];
+    [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];
 };
 type ControlMeta = {
-    type: 'slider' | 'toggle' | 'spring' | 'folder' | 'action' | 'select' | 'color' | 'text';
+    type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
     path: string;
     label: string;
     min?: number;
@@ -76,10 +81,13 @@ declare class DialStoreClass {
     private activePreset;
     private baseValues;
     registerPanel(id: string, name: string, config: DialConfig): void;
+    updatePanel(id: string, name: string, config: DialConfig): void;
     unregisterPanel(id: string): void;
     updateValue(panelId: string, path: string, value: DialValue): void;
     updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
     getSpringMode(panelId: string, path: string): 'simple' | 'advanced';
+    updateTransitionMode(panelId: string, path: string, mode: 'easing' | 'simple' | 'advanced'): void;
+    getTransitionMode(panelId: string, path: string): 'easing' | 'simple' | 'advanced';
     getValue(panelId: string, path: string): DialValue | undefined;
     getValues(panelId: string): Record<string, DialValue>;
     getPanels(): PanelConfig[];
@@ -96,9 +104,11 @@ declare class DialStoreClass {
     clearActivePreset(panelId: string): void;
     private notify;
     private notifyGlobal;
+    private initTransitionModes;
     private parseConfig;
     private flattenValues;
     private isSpringConfig;
+    private isEasingConfig;
     private isActionConfig;
     private isSelectConfig;
     private isColorConfig;
@@ -107,6 +117,10 @@ declare class DialStoreClass {
     private formatLabel;
     private inferRange;
     private inferStep;
+    private normalizePreservedValue;
+    private roundToStep;
+    private stepPrecision;
+    private mapControlsByPath;
 }
 declare const DialStore: DialStoreClass;
 
@@ -116,10 +130,13 @@ interface UseDialOptions {
 declare function useDialKit<T extends DialConfig>(name: string, config: T, options?: UseDialOptions): ResolvedValues<T>;
 
 type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type DialMode = 'popover' | 'inline';
 interface DialRootProps {
     position?: DialPosition;
+    defaultOpen?: boolean;
+    mode?: DialMode;
 }
-declare function DialRoot({ position }: DialRootProps): react.ReactPortal | null;
+declare function DialRoot({ position, defaultOpen, mode }: DialRootProps): react_jsx_runtime.JSX.Element | null;
 
 interface SliderProps {
     label: string;
@@ -144,10 +161,11 @@ interface FolderProps {
     children: ReactNode;
     defaultOpen?: boolean;
     isRoot?: boolean;
+    inline?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     toolbar?: ReactNode;
 }
-declare function Folder({ title, children, defaultOpen, isRoot, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
+declare function Folder({ title, children, defaultOpen, isRoot, inline, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonGroupProps {
     buttons: Array<{
@@ -172,6 +190,20 @@ interface SpringVisualizationProps {
 }
 declare function SpringVisualization({ spring, isSimpleMode }: SpringVisualizationProps): react_jsx_runtime.JSX.Element;
 
+interface TransitionControlProps {
+    panelId: string;
+    path: string;
+    label: string;
+    value: TransitionConfig;
+    onChange: (value: TransitionConfig) => void;
+}
+declare function TransitionControl({ panelId, path, label, value, onChange }: TransitionControlProps): react_jsx_runtime.JSX.Element;
+
+interface EasingVisualizationProps {
+    easing: EasingConfig;
+}
+declare function EasingVisualization({ easing }: EasingVisualizationProps): react_jsx_runtime.JSX.Element;
+
 interface TextControlProps {
     label: string;
     value: string;
@@ -207,4 +239,4 @@ interface PresetManagerProps {
 }
 declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
 
-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 };
+export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialMode, 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

@@ -1,6 +1,5 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 type SpringConfig = {
     type: 'spring';
@@ -10,6 +9,12 @@ type SpringConfig = {
     visualDuration?: number;
     bounce?: number;
 };
+type EasingConfig = {
+    type: 'easing';
+    duration: number;
+    ease: [number, number, number, number];
+};
+type TransitionConfig = SpringConfig | EasingConfig;
 type ActionConfig = {
     type: 'action';
     label?: string;
@@ -31,15 +36,15 @@ type TextConfig = {
     default?: string;
     placeholder?: string;
 };
-type DialValue = number | boolean | string | SpringConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
+type DialValue = number | boolean | string | SpringConfig | EasingConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
 type DialConfig = {
     [key: string]: DialValue | [number, number, number, number?] | DialConfig;
 };
 type ResolvedValues<T extends DialConfig> = {
-    [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];
+    [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];
 };
 type ControlMeta = {
-    type: 'slider' | 'toggle' | 'spring' | 'folder' | 'action' | 'select' | 'color' | 'text';
+    type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
     path: string;
     label: string;
     min?: number;
@@ -76,10 +81,13 @@ declare class DialStoreClass {
     private activePreset;
     private baseValues;
     registerPanel(id: string, name: string, config: DialConfig): void;
+    updatePanel(id: string, name: string, config: DialConfig): void;
     unregisterPanel(id: string): void;
     updateValue(panelId: string, path: string, value: DialValue): void;
     updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
     getSpringMode(panelId: string, path: string): 'simple' | 'advanced';
+    updateTransitionMode(panelId: string, path: string, mode: 'easing' | 'simple' | 'advanced'): void;
+    getTransitionMode(panelId: string, path: string): 'easing' | 'simple' | 'advanced';
     getValue(panelId: string, path: string): DialValue | undefined;
     getValues(panelId: string): Record<string, DialValue>;
     getPanels(): PanelConfig[];
@@ -96,9 +104,11 @@ declare class DialStoreClass {
     clearActivePreset(panelId: string): void;
     private notify;
     private notifyGlobal;
+    private initTransitionModes;
     private parseConfig;
     private flattenValues;
     private isSpringConfig;
+    private isEasingConfig;
     private isActionConfig;
     private isSelectConfig;
     private isColorConfig;
@@ -107,6 +117,10 @@ declare class DialStoreClass {
     private formatLabel;
     private inferRange;
     private inferStep;
+    private normalizePreservedValue;
+    private roundToStep;
+    private stepPrecision;
+    private mapControlsByPath;
 }
 declare const DialStore: DialStoreClass;
 
@@ -116,10 +130,13 @@ interface UseDialOptions {
 declare function useDialKit<T extends DialConfig>(name: string, config: T, options?: UseDialOptions): ResolvedValues<T>;
 
 type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type DialMode = 'popover' | 'inline';
 interface DialRootProps {
     position?: DialPosition;
+    defaultOpen?: boolean;
+    mode?: DialMode;
 }
-declare function DialRoot({ position }: DialRootProps): react.ReactPortal | null;
+declare function DialRoot({ position, defaultOpen, mode }: DialRootProps): react_jsx_runtime.JSX.Element | null;
 
 interface SliderProps {
     label: string;
@@ -144,10 +161,11 @@ interface FolderProps {
     children: ReactNode;
     defaultOpen?: boolean;
     isRoot?: boolean;
+    inline?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     toolbar?: ReactNode;
 }
-declare function Folder({ title, children, defaultOpen, isRoot, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
+declare function Folder({ title, children, defaultOpen, isRoot, inline, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonGroupProps {
     buttons: Array<{
@@ -172,6 +190,20 @@ interface SpringVisualizationProps {
 }
 declare function SpringVisualization({ spring, isSimpleMode }: SpringVisualizationProps): react_jsx_runtime.JSX.Element;
 
+interface TransitionControlProps {
+    panelId: string;
+    path: string;
+    label: string;
+    value: TransitionConfig;
+    onChange: (value: TransitionConfig) => void;
+}
+declare function TransitionControl({ panelId, path, label, value, onChange }: TransitionControlProps): react_jsx_runtime.JSX.Element;
+
+interface EasingVisualizationProps {
+    easing: EasingConfig;
+}
+declare function EasingVisualization({ easing }: EasingVisualizationProps): react_jsx_runtime.JSX.Element;
+
 interface TextControlProps {
     label: string;
     value: string;
@@ -207,4 +239,4 @@ interface PresetManagerProps {
 }
 declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
 
-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 };
+export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialMode, 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 };