@apple-pie/slice 0.1.59 → 0.2.0

package/dist/types/components/Camera/_types.d.ts

@@ -1,17 +1,19 @@
 import type React from 'react';
+import type { ColorValue } from '../../theme/colors/resolveColor';
+import type { SliceIcon } from '../Icon/_types';
 export interface DefaultNoVideoPosterProps {
-    size?: number | string;
     user?: UserProfile;
     message?: string;
 }
 export interface ToolbarButtonProps {
-    icon: string;
-    iconActive?: string;
+    icon: SliceIcon;
+    iconActive?: SliceIcon;
     onClick: () => void;
     active?: boolean;
     label?: string;
     disabled?: boolean;
-    onMouseOver?: (e: React.MouseEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>) => void;
+    borderWidth?: number;
+    onMouseOver?: (e: React.MouseEvent<HTMLButtonElement> | React.FocusEvent<HTMLButtonElement>) => void;
 }
 export interface CameraElement {
     container?: HTMLDivElement;
@@ -19,32 +21,22 @@ export interface CameraElement {
     stream?: MediaStream;
     videoTrack?: MediaStreamTrack;
     audioTrack?: MediaStreamTrack;
-    snapshot?: (options?: CameraSnapshotOptions) => Blob | undefined;
-    startCamera?: () => Promise<MediaStream | Error>;
-    stopCamera?: () => Promise<boolean | Error>;
-    enableVideo?: () => MediaStream | Error;
-    disableVideo?: () => boolean | Error;
-    muteMic?: () => boolean | Error;
-    unmuteMic?: () => boolean | Error;
-    toggleVideo?: () => Promise<MediaStream | boolean | Error>;
-    toggleMic?: () => boolean | Error;
-    devices?: () => Promise<MediaDeviceInfo[] | Error>;
+    snapshot: (options?: CameraSnapshotOptions) => Blob | undefined;
+    startCamera: () => Promise<MediaStream | Error>;
+    stopCamera: () => Promise<boolean | Error>;
+    enableVideo: () => MediaStream | Error;
+    disableVideo: () => boolean | Error;
+    muteMic: () => boolean | Error;
+    unmuteMic: () => boolean | Error;
+    toggleVideo: () => Promise<MediaStream | boolean | Error>;
+    toggleMic: () => boolean | Error;
+    devices: () => Promise<MediaDeviceInfo[] | Error>;
 }
 export interface CameraSnapshotOptions {
     width?: number;
     height?: number;
     toggle?: boolean;
 }
-export interface Controls {
-    mic?: boolean;
-    camera?: boolean;
-    play?: boolean;
-    stop?: boolean;
-    pause?: boolean;
-    videoDevices?: boolean;
-    audioDevices?: boolean;
-    flipCamera?: boolean;
-}
 export interface UserProfile {
     name?: string;
     email?: string;
@@ -52,14 +44,17 @@ export interface UserProfile {
 }
 export interface Settings {
     micDeviceId?: string;
-    micVolume?: number;
     videoDeviceId?: string;
 }
 export interface BaseCameraProps {
+    backgroundColor?: ColorValue;
+    borderColor?: ColorValue;
+    borderWidth?: number | string;
+    borderRadius?: number | string;
+    audio?: boolean;
     width?: number | string;
     height?: number | string;
     noVideoPoster?: React.ReactNode;
-    videoFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
     startCameraOff?: boolean;
     startAudioMuted?: boolean;
     playLocalAudio?: boolean;
@@ -67,13 +62,14 @@ export interface BaseCameraProps {
     sessionSettings?: Settings;
     onVideoStream?: (stream: MediaStream) => void;
     onSnapshot?: (blob: Blob | undefined) => void;
-    onNoVideo?: (reason?: string | Error) => void;
-    onNoAudio?: (reason?: string | Error) => void;
+    onNoVideo?: (reason: Error) => void;
+    onNoAudio?: (reason: Error) => void;
     onChangeProfile?: (profile?: UserProfile) => void;
     onChangeSettings?: (settings?: Settings, devices?: MediaDeviceInfo[] | Error) => void;
     showControlBar?: boolean;
+    showProfileButton?: boolean;
+    showSettingsButton?: boolean;
     autoHideControlBar?: boolean;
-    controls?: Controls;
     pipSnapshot?: boolean;
 }
 export type CameraProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof BaseCameraProps> & BaseCameraProps;

package/dist/types/components/Camera/cameraSession.d.ts

@@ -0,0 +1,59 @@
+import type { Settings } from './_types';
+export interface CameraSessionOptions {
+    audio: boolean;
+    startAudioMuted: boolean;
+    playLocalAudio: boolean;
+    sessionSettings?: Settings;
+    onVideoStream?: (stream: MediaStream) => void;
+    onNoVideo?: (reason: Error) => void;
+    onNoAudio?: (reason: Error) => void;
+}
+export interface CameraMediaState {
+    cameraOn: boolean;
+    micMuted: boolean;
+    audioAvailable: boolean;
+    supported: boolean;
+    error?: string;
+    devices: MediaDeviceInfo[] | Error;
+}
+/** Owns only streams acquired by this Camera. Generation checks release stale results. */
+export declare class CameraSession {
+    private readonly video;
+    private readonly options;
+    private readonly publish;
+    private active;
+    private generation;
+    private ownedStream?;
+    private streamKey?;
+    private videoEnabled;
+    private muted?;
+    private pending?;
+    private unlisten?;
+    constructor(video: () => HTMLVideoElement | null, options: () => CameraSessionOptions, publish: (state: CameraMediaState) => void);
+    get stream(): MediaStream | undefined;
+    get videoTrack(): MediaStreamTrack | undefined;
+    get audioTrack(): MediaStreamTrack | undefined;
+    private readonly emptyDevices;
+    private devices;
+    private lastState?;
+    private key;
+    activate(): void;
+    private emit;
+    private release;
+    dispose(): void;
+    stop(): Promise<boolean | Error>;
+    private refreshDevices;
+    devicesList(): Promise<MediaDeviceInfo[] | Error>;
+    private request;
+    start(preserveTrackState?: boolean): Promise<MediaStream | Error>;
+    /** Device changes replace active/pending capture, without undoing manual video-off state. */
+    reconfigure(options?: Pick<CameraSessionOptions, 'audio' | 'sessionSettings'>): void;
+    private acquire;
+    disableVideo(): boolean | Error;
+    enableVideo(): MediaStream | Error;
+    muteMic(): boolean | Error;
+    unmuteMic(): boolean | Error;
+    private setMuted;
+    toggleMic(): boolean | Error;
+    toggleVideo(): Promise<MediaStream | boolean | Error>;
+}

package/dist/types/components/Camera/index.d.ts

@@ -1,2 +1,2 @@
 export { Camera } from './Camera';
-export type { CameraElement, CameraProps, CameraSnapshotOptions, Controls, UserProfile, Settings, } from './_types';
+export type { CameraElement, CameraProps, CameraSnapshotOptions, UserProfile, Settings, } from './_types';

package/dist/types/components/CheckBox/CheckBox.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { CheckBoxProps } from './_types';
-export declare const CheckBox: React.MemoExoticComponent<(props: CheckBoxProps) => React.JSX.Element>;
+export declare const CheckBox: React.MemoExoticComponent<(rawProps: CheckBoxProps) => React.JSX.Element>;

package/dist/types/components/CheckBox/_types.d.ts

@@ -1,11 +1,23 @@
 import type React from 'react';
+import type { ColorValue } from '../../theme/colors/resolveColor';
+import type { SliceIcon } from '../Icon/_types';
 type CheckBoxBaseProps = {
-    children?: React.ReactNode | string;
-    size?: number;
+    align?: 'top' | 'middle' | 'bottom';
+    children?: React.ReactNode;
+    label?: string;
     checked?: 'mixed' | boolean;
     disabled?: boolean;
-    color?: string;
+    iconChecked?: SliceIcon;
+    iconUnChecked?: SliceIcon;
+    iconPartial?: SliceIcon;
+    iconColor?: ColorValue;
+    iconColorSelected?: ColorValue;
+    iconSize?: number;
+    gap?: number;
+    textColor?: ColorValue;
+    textSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    textTopOffset?: number;
     onChange?: (state: boolean) => void;
 };
-export type CheckBoxProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof CheckBoxBaseProps> & CheckBoxBaseProps;
+export type CheckBoxProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof CheckBoxBaseProps | 'color'> & CheckBoxBaseProps;
 export {};

package/dist/types/components/Chip/Chip.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { ChipProps } from './_types';
-export declare const Chip: React.MemoExoticComponent<(props: ChipProps) => React.JSX.Element>;
+export declare const Chip: React.MemoExoticComponent<(rawProps: ChipProps) => React.JSX.Element>;

package/dist/types/components/Chip/_types.d.ts

@@ -1,34 +1,50 @@
+import type { Transition } from 'motion/react';
 import type React from 'react';
+import type { ColorValue } from '../../theme/colors/resolveColor';
+import type { SliceIcon } from '../Icon/_types';
 import type { ToolTip } from '../sharedTypes';
 type ChipBaseProps = {
     children?: React.ReactNode;
     label?: string;
-    labelSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
-    labelColor?: string;
-    labelColorHover?: string;
-    icon?: string;
+    textSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    textColor?: ColorValue;
+    textColorHover?: ColorValue;
+    icon?: SliceIcon;
     iconSize?: number;
     iconPosition?: 'left' | 'right';
-    iconColor?: string;
-    iconColorHover?: string;
-    backgroundColor?: string;
-    backgroundColorHover?: string;
+    iconColor?: ColorValue;
+    iconColorHover?: ColorValue;
+    backgroundColor?: ColorValue;
+    backgroundColorHover?: ColorValue;
     disabled?: boolean;
-    focused?: boolean;
+    selected?: boolean;
+    textColorSelected?: ColorValue;
+    iconColorSelected?: ColorValue;
+    backgroundColorSelected?: ColorValue;
+    borderColorSelected?: ColorValue;
+    layout?: boolean;
+    transition?: Transition;
+    removeLabel?: string;
+    onRemove?: React.MouseEventHandler<HTMLButtonElement>;
     tooltip?: string;
     borderWidth?: number;
-    borderSize?: number;
-    borderColor?: string;
-    borderColorHover?: string;
-    borderColorDisabled?: string;
+    borderColor?: ColorValue;
+    borderColorHover?: ColorValue;
+    borderColorDisabled?: ColorValue;
     borderRadius?: number | string;
     gap?: number;
-    paddingTop?: number;
-    paddingTops?: number;
-    paddingSides?: number;
-    variant?: 'button' | 'normal';
+    padding?: number | string;
+    paddingTop?: number | string;
+    paddingRight?: number | string;
+    paddingBottom?: number | string;
+    paddingLeft?: number | string;
     onToolTip?: (tip: ToolTip | null) => void;
-    onClick?: (e: React.MouseEvent<HTMLDivElement> | undefined) => void;
 };
-export type ChipProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof ChipBaseProps> & ChipBaseProps;
+type StaticChipProps = ChipBaseProps & {
+    onClick?: undefined;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, keyof ChipBaseProps | 'color' | 'onClick'>;
+type ActionChipProps = ChipBaseProps & {
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ChipBaseProps | 'color' | 'onClick'>;
+export type ChipProps = StaticChipProps | ActionChipProps;
 export {};

package/dist/types/components/ContentEditable/ContentEditable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ContentEditableProps } from './_types';
+export declare const ContentEditable: React.NamedExoticComponent<ContentEditableProps>;

package/dist/types/components/ContentEditable/_types.d.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+import type { ColorValue } from '../../theme/colors/resolveColor';
+export type ContentEditableEditEndReason = 'blur' | 'enter' | 'escape' | 'external';
+type ContentEditableBaseProps = {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    isEditable?: boolean;
+    selectOnEdit?: boolean;
+    placeholder?: string;
+    width?: number | string;
+    textAlign?: 'left' | 'center' | 'right';
+    textSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    textColor?: ColorValue;
+    textColorPlaceholder?: ColorValue;
+    clamp?: number;
+    padding?: number | string;
+    borderRadius?: number | string;
+    backgroundColor?: ColorValue;
+    onChange?: (draft: string) => void;
+    onCommit?: (value: string, previousValue: string) => void;
+    onEditStart?: () => void;
+    onEditEnd?: (reason: ContentEditableEditEndReason) => void;
+};
+export type ContentEditableProps = Omit<React.HTMLAttributes<HTMLSpanElement>, keyof ContentEditableBaseProps | keyof React.AriaAttributes | 'role' | 'children' | 'dangerouslySetInnerHTML' | 'contentEditable' | 'suppressContentEditableWarning' | 'onSubmit'> & ContentEditableBaseProps;
+export {};

package/dist/types/components/ContentEditable/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentEditable } from './ContentEditable';
+export type { ContentEditableProps, ContentEditableEditEndReason } from './_types';

package/dist/types/components/DataTable/DataTable.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ColumnDefinition, DataTableProps, SortKey } from './_types';
-export declare function DataTable<T>(props: Readonly<DataTableProps<T>>): React.JSX.Element;
+export declare function DataTable<T>(rawProps: Readonly<DataTableProps<T>>): React.JSX.Element;
 interface DefaultHeaderRendererProps<T> {
     col: ColumnDefinition<T, unknown>;
     sortKey: SortKey<T>;

package/dist/types/components/DataTable/_types.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { ColorValue } from '../../theme/colors/resolveColor';
 export type CellContext<T, V> = {
     row: T;
     value: V;
@@ -13,9 +14,12 @@ type ColumnBase<T, V> = {
     title: string;
     width?: number | string;
     justify?: 'start' | 'center' | 'end';
+    justifyHeader?: 'start' | 'center' | 'end';
+    showSortIcon?: boolean;
     align?: 'start' | 'center' | 'end';
     padding?: number | string;
     nowrap?: boolean;
+    compare?: (a: T, b: T) => number;
     sort?: keyof T;
     renderHeader?: (ctx: HeaderContext<T, V>) => ReactNode;
     renderCell?: (ctx: CellContext<T, V>) => ReactNode;
@@ -36,23 +40,29 @@ type PlainColumn<T> = ColumnBase<T, undefined> & {
 };
 export type ColumnDefinition<T, V = unknown> = KeyColumn<T> | AccessorColumn<T, V> | PlainColumn<T>;
 export interface DataTableProps<T> {
-    height: number | string;
-    width: number | string;
+    height?: number | string;
+    width?: number | string;
     maxWidth?: number | string;
     margin?: number | string;
-    headerSticky: boolean;
-    freezeColumn: boolean;
-    backgroundColor?: string;
-    backgroundColorHoverRow?: string;
-    freezeColumnBackgroundColor?: string;
-    headerBackgroundColor?: string;
-    candyStripeBackgroundColor?: string;
-    handleHoverColor?: string;
+    headerSticky?: boolean;
+    freezeColumn?: boolean;
+    backgroundColor?: ColorValue;
+    backgroundColorHoverRow?: ColorValue;
+    freezeColumnBackgroundColor?: ColorValue;
+    headerBackgroundColor?: ColorValue;
+    headerBackgroundColorHover?: ColorValue;
+    candyStripeBackgroundColor?: ColorValue;
+    handleHoverColor?: ColorValue;
     borderStyle?: 'box' | 'row' | 'none';
     borderRadius?: number | string;
-    borderColor?: string;
+    borderColor?: ColorValue;
     tableData?: T[];
     colResize?: boolean;
+    colReorder?: boolean;
+    columnOrder?: string[];
+    columnWidths?: Record<string, number | string>;
+    defaultSort?: SortKey<T>;
+    onRowClick?: (row: T, rowIndex: number) => void;
     onColumnResize?: (columnId: string, width: number) => void;
     onColumnReorder?: (columnOrder: string[]) => void;
     columnDefinitions: ColumnDefinition<T, any>[];

package/dist/types/components/DataTable/_useResizeColumn.d.ts

@@ -13,6 +13,6 @@ export declare function useResizeColumn(elements: ResizeVisualElements, colResiz
     clientX: number | undefined;
     clientY: number | undefined;
     resizing: boolean;
-    dragResize: (id: string, e: React.MouseEvent<HTMLDivElement>, colRefs: ColRefs) => void;
+    dragResize: (id: string, e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, colRefs: ColRefs) => void;
     hoverResize: (show: boolean, e: React.MouseEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>) => void;
 };

package/dist/types/components/DataTable/_useRowWindow.d.ts

@@ -10,6 +10,7 @@ export type RowWindow = {
 export type UseRowWindowOptions = {
     enabled: boolean;
     rowHeight: number;
+    headerHeight?: number;
     overscan?: number;
 };
 export declare function useRowWindow(wrapperRef: React.RefObject<HTMLElement | null>, rowCount: number, options: UseRowWindowOptions): RowWindow;

package/dist/types/components/DataTable/compareValues.d.ts

@@ -0,0 +1,2 @@
+/** Deterministic comparison for default field sorting; missing values stay last in either direction. */
+export declare function compareValues(a: unknown, b: unknown, direction: 'asc' | 'desc'): number;

package/dist/types/components/DialogBox/DialogBox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { DialogBoxProps } from './_types';
+import { sections } from './sections';
+type DialogBoxComponent = (<T = string>(props: DialogBoxProps<T>) => React.JSX.Element) & typeof sections;
+export declare const DialogBox: DialogBoxComponent;
+export {};

package/dist/types/components/DialogBox/_types.d.ts

@@ -0,0 +1,68 @@
+import type React from 'react';
+import type { ColorValue } from '../../theme/colors/resolveColor';
+import type { SliceIcon } from '../Icon/_types';
+import type { ToolTip } from '../sharedTypes';
+export type DialogBoxAction<T = string> = {
+    id: string;
+    label?: string;
+    value?: T;
+    primary?: boolean;
+    iconLeft?: SliceIcon;
+    tooltip?: string;
+    iconRight?: SliceIcon;
+    round?: boolean;
+    position?: 'left' | 'right';
+    promise?: 'resolve' | 'reject' | 'none';
+    disabled?: boolean;
+    working?: boolean;
+};
+type DialogBoxBaseProps<T = string> = {
+    children?: React.ReactNode;
+    minHeight?: number | string;
+    /** Explicit values are hard minimums, even when wider than the parent or viewport. */
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    borderRadius?: number | string;
+    borderColor?: ColorValue;
+    borderWidth?: number | string;
+    backgroundColor?: ColorValue;
+    padding?: number | string;
+    title?: string;
+    dialogName?: string;
+    /** Header fill. Defaults to backgroundColor, including while scrolling. */
+    titleBackgroundColor?: ColorValue;
+    titleTextColor?: ColorValue;
+    titleBorderColor?: ColorValue;
+    /** Header bottom divider: defaults to 1px when content overflows, otherwise 0. Explicit 0 disables it. */
+    titleBorderWidth?: number;
+    titleIcon?: SliceIcon;
+    titleIconFill?: boolean;
+    titleTextSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    contentTextSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    close?: boolean;
+    actions?: DialogBoxAction<T>[];
+    /** Footer fill. Defaults to backgroundColor, including while scrolling. */
+    actionsBackgroundColor?: ColorValue;
+    actionsBorderColor?: ColorValue;
+    actionsBorderWidth?: number;
+    autoBorderBottom?: boolean;
+    scrollHandleColor?: ColorValue;
+    scrollHandleColorHover?: ColorValue;
+    onAction?: (value?: T) => void;
+    onResolve?: (value?: T) => void;
+    onReject?: (value?: Error) => void;
+    onClose?: () => void;
+    onDragPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+    onToolTip?: (tip: ToolTip | null) => void;
+};
+export type DialogBoxProps<T = string> = Omit<React.HTMLAttributes<HTMLDivElement>, keyof DialogBoxBaseProps<T> | keyof React.AriaAttributes | 'role' | 'dangerouslySetInnerHTML'> & DialogBoxBaseProps<T>;
+export type DialogBoxSectionProps = {
+    children?: React.ReactNode;
+};
+export type DialogBoxControls<T = string> = {
+    close: () => void;
+    resolve: (value?: T) => void;
+    reject: (error?: Error) => void;
+};
+export {};

package/dist/types/components/DialogBox/index.d.ts

@@ -0,0 +1,3 @@
+export { DialogBox } from './DialogBox';
+export type { DialogBoxAction, DialogBoxProps, DialogBoxControls, DialogBoxSectionProps } from './_types';
+export { useDialogBox } from './useDialogBox';

package/dist/types/components/DialogBox/parseSections.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export declare function parseSections(children: ReactNode, title?: string, actions?: unknown[]): {
+    title: ReactNode;
+    content: ReactNode;
+    actions: ReactNode;
+    hasActions: boolean;
+};

package/dist/types/components/DialogBox/sections.d.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import type { DialogBoxSectionProps } from './_types';
+declare function Title(_props: DialogBoxSectionProps): React.JSX.Element;
+declare namespace Title {
+    var displayName: string;
+}
+declare function Content(_props: DialogBoxSectionProps): React.JSX.Element;
+declare namespace Content {
+    var displayName: string;
+}
+declare function Actions(_props: DialogBoxSectionProps): React.JSX.Element;
+declare namespace Actions {
+    var displayName: string;
+}
+export declare const sections: {
+    Title: typeof Title;
+    Content: typeof Content;
+    Actions: typeof Actions;
+};
+export {};

package/dist/types/components/DialogBox/useDialogBox.d.ts

@@ -0,0 +1,4 @@
+import type { DialogBoxControls } from './_types';
+export declare const DialogBoxContext: import("react").Context<DialogBoxControls<unknown> | null>;
+/** Use inside a descendant of DialogBox. Match T to the parent's action value type. */
+export declare function useDialogBox<T = string>(): DialogBoxControls<T>;

package/dist/types/components/Dot/Dot.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type DotProps } from './_types';
-export declare const Dot: React.MemoExoticComponent<(props: DotProps) => React.JSX.Element>;
+export declare const Dot: React.MemoExoticComponent<(rawProps: DotProps) => React.JSX.Element | null>;

package/dist/types/components/Dot/_types.d.ts

@@ -1,18 +1,24 @@
 import type { Transition, Variants } from 'motion/react';
 import type React from 'react';
+import type { ColorValue } from '../../theme/colors/resolveColor';
 type DotBaseProps = {
     size?: number;
+    /** Shared top/right distance in pixels. Positive values move outward. Defaults to 2. */
+    offSet?: number;
+    /** Overrides offSet for the top edge. Positive values move upward. */
     topOffset?: number;
+    /** Overrides offSet for the right edge. Positive values move rightward. */
     rightOffset?: number;
     border?: number;
     position?: 'inline' | 'corner';
     state?: 'red' | 'yellow' | 'green' | 'blue' | 'grey';
-    color?: string;
+    color?: ColorValue;
     transition?: Transition;
     motionValues?: Variants;
-    motion?: Variants;
     show?: boolean;
 };
+/** No intentional gesture API or component-specific callbacks. Document inherited DOM events as a group;
+ * Motion's incidental passthrough callbacks are implementation details, not Dot features. */
 export type DotProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof DotBaseProps> & DotBaseProps;
 export declare const DEFAULT_VARIANTS: Variants;
 export declare const DEFAULT_TRANSITION: Transition;

package/dist/types/components/DraggablePanel/DrggablePanel.d.ts

@@ -1,55 +1,5 @@
-import React, { type RefObject } from 'react';
-import type { Constraint } from './_types';
-type Info = {
-    div: RefObject<HTMLDivElement | null>;
-    divWidth: number;
-    divHeight: number;
-    deltaWidth: number;
-};
-type ResizeHandle = {
-    width?: number;
-    color?: string;
-    offsetX?: boolean;
-};
-type DraggablePanelBaseProps = {
-    children?: any;
-    onResize?: (info: Info) => void;
-    onResizeEnd?: (info: Info) => void;
-    onResizeStart?: (info: Info) => void;
-    containerRef?: React.RefObject<HTMLDivElement | null>;
-    sizeConstraints?: Constraint;
-    isClosed?: boolean;
-    resizeHandle?: Partial<ResizeHandle>;
-    borderRight?: any;
-    borderLeft?: any;
-    backgroundColor?: string;
-    drags?: 'left' | 'right' | false;
-    dragHandle?: boolean;
-    dragHandleStyle?: DragHandleProps;
-    disableOnContext?: boolean;
-    isTouchDevice?: boolean;
-    /**
-     * Overrides the CSS transition duration used only for the panel's very
-     * first open (its initial mount, when it animates from a closed/zero
-     * width to its settled starting width). A number is treated as
-     * milliseconds; a string is used as-is (e.g. `'0.5s'`). Pass `0` to have
-     * the panel appear already open at its starting width, with no reveal
-     * animation. Leave `undefined` (the default) to use the same
-     * `--motion-water-duration` timing as every other width transition.
-     * Any transition *after* that first open (drags, later `isClosed`
-     * toggles, constraint changes) always uses the normal duration.
-     */
-    transitionDurationOnInit?: string | number;
-};
-export type DraggablePanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof DraggablePanelBaseProps> & DraggablePanelBaseProps;
-export declare const DraggablePanel: React.MemoExoticComponent<(props: DraggablePanelProps) => React.JSX.Element>;
-export type DragHandleProps = {
-    width?: number;
-    height?: number;
-    radius?: number | string;
-    stroke?: number;
-    strokeColor?: string;
-    color?: string;
-};
-export declare const DragHandle: React.MemoExoticComponent<(props: Readonly<DragHandleProps>) => React.JSX.Element>;
-export {};
+import React from 'react';
+import type { DragHandleProps, DraggablePanelProps } from './_types';
+export type { DragHandleProps, DraggablePanelProps } from './_types';
+export declare const DraggablePanel: React.NamedExoticComponent<DraggablePanelProps>;
+export declare const DragHandle: React.MemoExoticComponent<(rawProps: Readonly<DragHandleProps>) => React.JSX.Element>;