@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/color-picker/color-picker.presentation.d.ts

@@ -0,0 +1,402 @@
+import { ColorFormat, ColorPickerArgs, ColorPickerContext, ColorPickerState } from "./color-picker.state.js";
+import { ColorPickerEvents } from "./color-picker.events.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { ColorChannel } from "@zag-js/color-utils";
+import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+/**
+ * Color-picker definition: the DOM contract as data.
+ *
+ * Everything that needs a node lives here — the area and channel drags
+ * (the gesture itself is the runtime's `drag` action; the bags only report
+ * the percent and send the events carrying it), the keyboard maps, the
+ * channel inputs, and the dismissal reflex.
+ *
+ * Thumb positions and gradient stops are CONTINUOUS values — a drag lands
+ * between utilities — so the bags project them into their own style object
+ * as concrete properties (`left`, `top`, `background`); the markup names
+ * nothing and no custom property carries the geometry.
+ *
+ * The color object is reconstructed per read: the context holds the
+ * serialized string.
+ */
+export interface AreaSlotProps {
+  readonly xChannel?: ColorChannel | undefined;
+  readonly yChannel?: ColorChannel | undefined;
+}
+export interface ChannelSlotProps {
+  readonly channel: ColorChannel;
+  readonly orientation?: "horizontal" | "vertical" | undefined;
+}
+export interface SwatchSlotProps {
+  readonly value: string;
+  readonly disabled?: boolean | undefined;
+}
+export interface ColorPickerItemState {
+  readonly value: string;
+  readonly disabled: boolean;
+  readonly checked: boolean;
+}
+export interface ColorPickerValueChange {
+  readonly value: string;
+  readonly format: ColorFormat;
+}
+export interface ColorPickerOpenChange {
+  readonly open: boolean;
+}
+export interface ColorPickerFormatChange {
+  readonly format: ColorFormat;
+}
+type ScopeLike = ViewFor<ColorPickerContext, ColorPickerEvents, ColorPickerState>;
+export declare const def: {
+  name: string;
+  machine: (args: ColorPickerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ColorPickerContext, ColorPickerEvents, ColorPickerState>;
+  start: (raw: Record<string, unknown>) => "idle" | "active";
+  reconcile: ({ context, parsed, authored, send, state }: {
+    readonly context: ColorPickerContext;
+    readonly state: ColorPickerState;
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  parts: {
+    root: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        dir: "ltr" | "rtl";
+        "data-disabled": string | undefined;
+      };
+    };
+    label: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        dir: "ltr" | "rtl";
+        "data-disabled": string | undefined;
+      };
+    };
+    control: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        "data-disabled": string | undefined;
+      };
+    };
+    trigger: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        "data-state": string;
+        "data-disabled": string | undefined;
+        onClick: () => void;
+        onBlur: () => void;
+        type: string;
+        dir: "ltr" | "rtl";
+        "aria-label": string;
+      };
+    };
+    positioner: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        "data-state": string;
+      };
+    };
+    content: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        role: string | undefined;
+        tabindex: string;
+        dir: "ltr" | "rtl";
+        "data-state": string;
+        hidden: string | undefined;
+        "use:dismissable": {
+          onEscape: () => void;
+          onOutside: () => void;
+        };
+      };
+    };
+    valueText: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        dir: "ltr" | "rtl";
+        "data-disabled": string | undefined;
+      };
+    };
+    area: {
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>, arg: unknown) => {
+        role: string;
+        "data-disabled": string | undefined;
+        "data-channel-x": ColorChannel;
+        "data-channel-y": ColorChannel;
+        "use:drag": {
+          enabled: boolean;
+          cancelOnEscape: boolean;
+          onStart: (press: DragPress) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: () => void;
+        };
+      };
+    };
+    areaBackground: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-disabled": string | undefined;
+        style: {
+          backgroundColor: string;
+        };
+      };
+    };
+    areaThumb: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-disabled": string | undefined;
+        style: {
+          left: string;
+          top: string;
+          transform: string;
+          background: string;
+        };
+        onFocus: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        role: string;
+        tabindex: string | undefined;
+        dir: "ltr" | "rtl";
+        "aria-label": string;
+      };
+    };
+    transparencyGrid: {
+      id: string;
+      attrs: () => {
+        "--picker-grid": string;
+      };
+    };
+    channelSlider: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        role: string;
+        "data-channel": ColorChannel;
+        "data-orientation": "horizontal" | "vertical";
+        "use:drag": {
+          enabled: boolean;
+          cancelOnEscape: boolean;
+          onStart: (press: DragPress) => void;
+          onMove: (delta: DragDelta) => void;
+          onEnd: () => void;
+        };
+      };
+    };
+    channelSliderTrack: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        id: string;
+        role: string;
+        "data-channel": ColorChannel;
+        "data-orientation": "horizontal" | "vertical";
+        style: {
+          background: string;
+        };
+      };
+    };
+    channelSliderThumb: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-channel": ColorChannel;
+        "data-disabled": string | undefined;
+        "data-orientation": "horizontal" | "vertical";
+        style: {
+          left: string;
+          top: string;
+          transform: string;
+          background: string;
+        };
+        onFocus: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        role: string;
+        tabindex: string | undefined;
+        "aria-label": ColorChannel;
+      };
+    };
+    channelSliderLabel: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-channel": ColorChannel;
+        dir: "ltr" | "rtl";
+      };
+    };
+    channelSliderValueText: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-channel": ColorChannel;
+      };
+    };
+    channelInput: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        type: string;
+        dir: "ltr" | "rtl";
+        "data-channel": "hex" | ColorChannel;
+        "aria-label": "hex" | ColorChannel;
+        "data-disabled": string | undefined;
+        value: string;
+        onFocus: (event: FocusEvent) => void;
+        onBlur: (event: FocusEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+      };
+    };
+    hiddenInput: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        type: string;
+        name: string | undefined;
+        tabindex: string;
+        readonly: string | undefined;
+        value: string;
+      };
+    };
+    eyeDropperTrigger: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        type: string;
+        dir: "ltr" | "rtl";
+        "aria-label": string;
+        "data-disabled": string | undefined;
+        hidden: string | undefined;
+        onClick: () => void;
+      };
+    };
+    formatSelect: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        dir: "ltr" | "rtl";
+        "data-disabled": string | undefined;
+        value: ColorFormat;
+        onChange: (event: Event) => void;
+      };
+    };
+    swatchGroup: {
+      id: string;
+      attrs: (scope: import("@spinjs/runtime").PartView<unknown, ColorPickerContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<ColorPickerEvents>, ColorPickerState>) => {
+        id: string;
+        role: string;
+      };
+    };
+    swatchTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        id: string;
+        type: string;
+        dir: "ltr" | "rtl";
+        "aria-label": string;
+        "data-checked": string | undefined;
+        "data-value": string;
+        "data-disabled": string | undefined;
+        style: {
+          "--picker-swatch": string;
+          backgroundColor: string;
+        };
+        onClick: () => void;
+      };
+    };
+    swatchIndicator: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-checked": string | undefined;
+        hidden: string | undefined;
+      };
+    };
+    swatch: {
+      id: string;
+      attrs: (scope: ScopeLike, arg?: unknown) => {
+        "data-checked": string | undefined;
+        "data-value": string;
+        style: {
+          "--picker-swatch": string;
+          backgroundColor: string;
+        };
+      };
+    };
+  };
+  commands: {
+    setValue: {
+      event: ([value]: [value: string]) => {
+        type: "VALUE.SET";
+        value: string;
+      };
+    };
+    setFormat: {
+      event: ([format]: [format: ColorFormat]) => {
+        type: "FORMAT.SET";
+        format: ColorFormat;
+      };
+    };
+    setOpen: {
+      event: ([open]: [open: boolean]) => {
+        type: "OPEN" | "CLOSE";
+      };
+    };
+  };
+  readers: {
+    open: {
+      read: (context: ColorPickerContext, state: ColorPickerState) => boolean;
+    };
+    value: {
+      read: (context: ColorPickerContext) => string;
+    };
+    valueAsString: {
+      read: (context: ColorPickerContext) => string;
+    };
+    format: {
+      read: (context: ColorPickerContext) => ColorFormat;
+    };
+    disabled: {
+      read: (context: ColorPickerContext) => boolean;
+    };
+    empty: {
+      read: () => boolean;
+    };
+  };
+  methods: {
+    getChannelValue: {
+      call: (context: ColorPickerContext, _state: ColorPickerState, [channel]: [channel: ColorChannel | "hex"]) => string;
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: ColorPickerContext) => string[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: ColorPickerContext) => {
+        value: string;
+        format: ColorFormat;
+      };
+    };
+    "open-change": {
+      prop: string;
+      watch: (context: ColorPickerContext, state: ColorPickerState) => boolean[];
+      detail: (watched: readonly unknown[]) => {
+        open: boolean;
+      };
+    };
+    "format-change": {
+      prop: string;
+      watch: (context: ColorPickerContext) => ColorFormat[];
+      detail: (watched: readonly unknown[]) => {
+        format: ColorFormat;
+      };
+    };
+    "value-change-end": {
+      prop: string;
+      watch: (context: ColorPickerContext) => string[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: ColorPickerContext) => {
+        value: string;
+        format: ColorFormat;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, _before: ColorPickerContext, after: ColorPickerContext) => {
+        value: string;
+        format: ColorFormat;
+      } | null;
+    };
+  };
+};
+export type ColorPickerApi = ApiOf<typeof def>;
+export declare const colorPicker: import("@spinjs/runtime").DefinedComponent<ColorPickerApi, ColorPickerArgs>;
+export {};
+//# sourceMappingURL=color-picker.presentation.d.ts.map