@sprawlify/primitives 0.0.1

package/dist/machines/color-picker/index.d.cts

@@ -0,0 +1,205 @@
+import { t as Anatomy } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { a as ColorFormat, n as ColorAxes, r as ColorChannel, s as ColorType, t as Color } from "../../color-VKewNv2e.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, d as Orientation, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-C9-feK5c.cjs";
+import { d as PositioningOptions } from "../../types-DiIdKZ3K.cjs";
+
+//#region src/machines/color-picker/color-picker.anatomy.d.ts
+declare const anatomy: Anatomy<"root" | "area" | "label" | "trigger" | "content" | "positioner" | "control" | "valueText" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+//#endregion
+//#region src/machines/color-picker/color-picker.types.d.ts
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
+interface EyeDropper {
+  new (): EyeDropper;
+  open: (options?: {
+    signal?: AbortSignal | undefined;
+  }) => Promise<{
+    sRGBHex: string;
+  }>;
+  [Symbol.toStringTag]: "EyeDropper";
+}
+declare global {
+  interface Window {
+    EyeDropper: EyeDropper;
+  }
+}
+interface ValueChangeDetails {
+  value: Color;
+  valueAsString: string;
+}
+interface OpenChangeDetails {
+  open: boolean;
+  value: Color;
+}
+interface FormatChangeDetails {
+  format: ColorFormat;
+}
+type ElementIds = Partial<{
+  root: string;
+  control: string;
+  trigger: string;
+  label: string;
+  input: string;
+  hiddenInput: string;
+  content: string;
+  area: string;
+  areaGradient: string;
+  positioner: string;
+  formatSelect: string;
+  areaThumb: string;
+  channelInput: (id: string) => string;
+  channelSliderTrack: (id: ColorChannel) => string;
+  channelSliderThumb: (id: ColorChannel) => string;
+}>;
+interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
+  ids?: ElementIds | undefined;
+  value?: Color | undefined;
+  defaultValue?: Color | undefined;
+  disabled?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  required?: boolean | undefined;
+  invalid?: boolean | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueChangeEnd?: ((details: ValueChangeDetails) => void) | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  name?: string | undefined;
+  positioning?: PositioningOptions | undefined;
+  initialFocusEl?: (() => HTMLElement | null) | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  format?: ColorFormat | undefined;
+  defaultFormat?: ColorFormat | undefined;
+  onFormatChange?: ((details: FormatChangeDetails) => void) | undefined;
+  closeOnSelect?: boolean | undefined;
+  openAutoFocus?: boolean | undefined;
+  inline?: boolean | undefined;
+}
+type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "dir" | "positioning";
+type ColorPickerSchema = {
+  tag: "open" | "closed" | "dragging" | "focused";
+  state: "idle" | "focused" | "open" | "open:dragging";
+  props: RequiredBy<ColorPickerProps, PropsWithDefault>;
+  computed: {
+    disabled: boolean;
+    rtl: boolean;
+    interactive: boolean;
+    valueAsString: string;
+    areaValue: Color;
+  };
+  context: {
+    format: ColorFormat;
+    value: Color;
+    activeId: string | null;
+    activeChannel: Partial<ColorAxes> | null;
+    activeOrientation: Orientation | null;
+    fieldsetDisabled: boolean;
+    currentPlacement: PositioningOptions["placement"] | undefined;
+    restoreFocus: boolean;
+  };
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+};
+type ColorPickerService = Service<ColorPickerSchema>;
+type ColorPickerMachine = Machine<ColorPickerSchema>;
+interface ChannelProps {
+  channel: ColorChannel;
+  orientation?: Orientation | undefined;
+}
+interface ChannelSliderProps extends ChannelProps {
+  format?: ColorFormat | undefined;
+}
+interface ChannelInputProps {
+  channel: ExtendedColorChannel;
+  orientation?: Orientation | undefined;
+}
+interface AreaProps {
+  xChannel?: ColorChannel | undefined;
+  yChannel?: ColorChannel | undefined;
+}
+interface SwatchTriggerProps {
+  value: string | Color;
+  disabled?: boolean | undefined;
+}
+interface SwatchTriggerState {
+  value: Color;
+  valueAsString: string;
+  checked: boolean;
+  disabled: boolean;
+}
+interface SwatchProps {
+  value: string | Color;
+  respectAlpha?: boolean | undefined;
+}
+interface TransparencyGridProps {
+  size?: string | undefined;
+}
+interface ColorPickerApi<T extends PropTypes = PropTypes> {
+  dragging: boolean;
+  open: boolean;
+  inline: boolean;
+  value: Color;
+  valueAsString: string;
+  setValue: (value: string | Color) => void;
+  getChannelValue: (channel: ColorChannel) => string;
+  getChannelValueText: (channel: ColorChannel, locale: string) => string;
+  setChannelValue: (channel: ColorChannel, value: number) => void;
+  format: ColorFormat;
+  setFormat: (format: ColorFormat) => void;
+  alpha: number;
+  setAlpha: (value: number) => void;
+  setOpen: (open: boolean) => void;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getTriggerProps: () => T["button"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+  getHiddenInputProps: () => T["input"];
+  getValueTextProps: () => T["element"];
+  getAreaProps: (props?: AreaProps) => T["element"];
+  getAreaBackgroundProps: (props?: AreaProps) => T["element"];
+  getAreaThumbProps: (props?: AreaProps) => T["element"];
+  getChannelInputProps: (props: ChannelInputProps) => T["input"];
+  getChannelSliderProps: (props: ChannelSliderProps) => T["element"];
+  getChannelSliderTrackProps: (props: ChannelSliderProps) => T["element"];
+  getChannelSliderThumbProps: (props: ChannelSliderProps) => T["element"];
+  getChannelSliderLabelProps: (props: ChannelProps) => T["element"];
+  getChannelSliderValueTextProps: (props: ChannelProps) => T["element"];
+  getTransparencyGridProps: (props?: TransparencyGridProps) => T["element"];
+  getEyeDropperTriggerProps: () => T["button"];
+  getSwatchGroupProps: () => T["element"];
+  getSwatchTriggerProps: (props: SwatchTriggerProps) => T["button"];
+  getSwatchTriggerState: (props: SwatchTriggerProps) => SwatchTriggerState;
+  getSwatchProps: (props: SwatchProps) => T["element"];
+  getSwatchIndicatorProps: (props: SwatchProps) => T["element"];
+  getFormatSelectProps: () => T["select"];
+  getFormatTriggerProps: () => T["button"];
+}
+//#endregion
+//#region src/machines/color-picker/color-picker.connect.d.ts
+declare function connect<T extends PropTypes>(service: ColorPickerService, normalize: NormalizeProps<T>): ColorPickerApi<T>;
+//#endregion
+//#region src/machines/color-picker/color-picker.machine.d.ts
+declare const machine: Machine<ColorPickerSchema>;
+//#endregion
+//#region src/machines/color-picker/color-picker.parse.d.ts
+declare const parse: (colorString: string) => Color;
+//#endregion
+//#region src/machines/color-picker/color-picker.props.d.ts
+declare const props: (keyof ColorPickerProps)[];
+declare const splitProps: <Props extends Partial<ColorPickerProps>>(props: Props) => [Partial<ColorPickerProps>, Omit<Props, keyof ColorPickerProps>];
+declare const areaProps: (keyof AreaProps)[];
+declare const splitAreaProps: <Props extends AreaProps>(props: Props) => [AreaProps, Omit<Props, keyof AreaProps>];
+declare const channelProps: (keyof ChannelProps)[];
+declare const splitChannelProps: <Props extends ChannelProps>(props: Props) => [ChannelProps, Omit<Props, keyof ChannelProps>];
+declare const swatchTriggerProps: (keyof SwatchTriggerProps)[];
+declare const splitSwatchTriggerProps: <Props extends SwatchTriggerProps>(props: Props) => [SwatchTriggerProps, Omit<Props, keyof SwatchTriggerProps>];
+declare const swatchProps: (keyof SwatchProps)[];
+declare const splitSwatchProps: <Props extends SwatchProps>(props: Props) => [SwatchProps, Omit<Props, keyof SwatchProps>];
+declare const transparencyGridProps: "size"[];
+declare const splitTransparencyGridProps: <Props extends TransparencyGridProps>(props: Props) => [TransparencyGridProps, Omit<Props, "size">];
+//#endregion
+export { type ColorPickerApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type Color, type ColorAxes, type ColorChannel, type ColorFormat, type ColorType, type ElementIds, type ExtendedColorChannel, type FocusOutsideEvent, type FormatChangeDetails, type InteractOutsideEvent, type ColorPickerMachine as Machine, type OpenChangeDetails, type PointerDownOutsideEvent, type PositioningOptions, type ColorPickerProps as Props, type ColorPickerService as Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };

package/dist/machines/color-picker/index.d.mts

@@ -0,0 +1,205 @@
+import { t as Anatomy } from "../../create-anatomy-B3XYc-qG.mjs";
+import { a as ColorFormat, n as ColorAxes, r as ColorChannel, s as ColorType, t as Color } from "../../color-BkAP1Tkd.mjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DDTcG99l.mjs";
+import { b as NormalizeProps, d as Orientation, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-BkzYij2j.mjs";
+import { p as PositioningOptions } from "../../index-D96rs8B0.mjs";
+
+//#region src/machines/color-picker/color-picker.anatomy.d.ts
+declare const anatomy: Anatomy<"root" | "area" | "label" | "trigger" | "content" | "positioner" | "control" | "valueText" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+//#endregion
+//#region src/machines/color-picker/color-picker.types.d.ts
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
+interface EyeDropper {
+  new (): EyeDropper;
+  open: (options?: {
+    signal?: AbortSignal | undefined;
+  }) => Promise<{
+    sRGBHex: string;
+  }>;
+  [Symbol.toStringTag]: "EyeDropper";
+}
+declare global {
+  interface Window {
+    EyeDropper: EyeDropper;
+  }
+}
+interface ValueChangeDetails {
+  value: Color;
+  valueAsString: string;
+}
+interface OpenChangeDetails {
+  open: boolean;
+  value: Color;
+}
+interface FormatChangeDetails {
+  format: ColorFormat;
+}
+type ElementIds = Partial<{
+  root: string;
+  control: string;
+  trigger: string;
+  label: string;
+  input: string;
+  hiddenInput: string;
+  content: string;
+  area: string;
+  areaGradient: string;
+  positioner: string;
+  formatSelect: string;
+  areaThumb: string;
+  channelInput: (id: string) => string;
+  channelSliderTrack: (id: ColorChannel) => string;
+  channelSliderThumb: (id: ColorChannel) => string;
+}>;
+interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
+  ids?: ElementIds | undefined;
+  value?: Color | undefined;
+  defaultValue?: Color | undefined;
+  disabled?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  required?: boolean | undefined;
+  invalid?: boolean | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueChangeEnd?: ((details: ValueChangeDetails) => void) | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  name?: string | undefined;
+  positioning?: PositioningOptions | undefined;
+  initialFocusEl?: (() => HTMLElement | null) | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  format?: ColorFormat | undefined;
+  defaultFormat?: ColorFormat | undefined;
+  onFormatChange?: ((details: FormatChangeDetails) => void) | undefined;
+  closeOnSelect?: boolean | undefined;
+  openAutoFocus?: boolean | undefined;
+  inline?: boolean | undefined;
+}
+type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "dir" | "positioning";
+type ColorPickerSchema = {
+  tag: "open" | "closed" | "dragging" | "focused";
+  state: "idle" | "focused" | "open" | "open:dragging";
+  props: RequiredBy<ColorPickerProps, PropsWithDefault>;
+  computed: {
+    disabled: boolean;
+    rtl: boolean;
+    interactive: boolean;
+    valueAsString: string;
+    areaValue: Color;
+  };
+  context: {
+    format: ColorFormat;
+    value: Color;
+    activeId: string | null;
+    activeChannel: Partial<ColorAxes> | null;
+    activeOrientation: Orientation | null;
+    fieldsetDisabled: boolean;
+    currentPlacement: PositioningOptions["placement"] | undefined;
+    restoreFocus: boolean;
+  };
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+};
+type ColorPickerService = Service<ColorPickerSchema>;
+type ColorPickerMachine = Machine<ColorPickerSchema>;
+interface ChannelProps {
+  channel: ColorChannel;
+  orientation?: Orientation | undefined;
+}
+interface ChannelSliderProps extends ChannelProps {
+  format?: ColorFormat | undefined;
+}
+interface ChannelInputProps {
+  channel: ExtendedColorChannel;
+  orientation?: Orientation | undefined;
+}
+interface AreaProps {
+  xChannel?: ColorChannel | undefined;
+  yChannel?: ColorChannel | undefined;
+}
+interface SwatchTriggerProps {
+  value: string | Color;
+  disabled?: boolean | undefined;
+}
+interface SwatchTriggerState {
+  value: Color;
+  valueAsString: string;
+  checked: boolean;
+  disabled: boolean;
+}
+interface SwatchProps {
+  value: string | Color;
+  respectAlpha?: boolean | undefined;
+}
+interface TransparencyGridProps {
+  size?: string | undefined;
+}
+interface ColorPickerApi<T extends PropTypes = PropTypes> {
+  dragging: boolean;
+  open: boolean;
+  inline: boolean;
+  value: Color;
+  valueAsString: string;
+  setValue: (value: string | Color) => void;
+  getChannelValue: (channel: ColorChannel) => string;
+  getChannelValueText: (channel: ColorChannel, locale: string) => string;
+  setChannelValue: (channel: ColorChannel, value: number) => void;
+  format: ColorFormat;
+  setFormat: (format: ColorFormat) => void;
+  alpha: number;
+  setAlpha: (value: number) => void;
+  setOpen: (open: boolean) => void;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["element"];
+  getControlProps: () => T["element"];
+  getTriggerProps: () => T["button"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+  getHiddenInputProps: () => T["input"];
+  getValueTextProps: () => T["element"];
+  getAreaProps: (props?: AreaProps) => T["element"];
+  getAreaBackgroundProps: (props?: AreaProps) => T["element"];
+  getAreaThumbProps: (props?: AreaProps) => T["element"];
+  getChannelInputProps: (props: ChannelInputProps) => T["input"];
+  getChannelSliderProps: (props: ChannelSliderProps) => T["element"];
+  getChannelSliderTrackProps: (props: ChannelSliderProps) => T["element"];
+  getChannelSliderThumbProps: (props: ChannelSliderProps) => T["element"];
+  getChannelSliderLabelProps: (props: ChannelProps) => T["element"];
+  getChannelSliderValueTextProps: (props: ChannelProps) => T["element"];
+  getTransparencyGridProps: (props?: TransparencyGridProps) => T["element"];
+  getEyeDropperTriggerProps: () => T["button"];
+  getSwatchGroupProps: () => T["element"];
+  getSwatchTriggerProps: (props: SwatchTriggerProps) => T["button"];
+  getSwatchTriggerState: (props: SwatchTriggerProps) => SwatchTriggerState;
+  getSwatchProps: (props: SwatchProps) => T["element"];
+  getSwatchIndicatorProps: (props: SwatchProps) => T["element"];
+  getFormatSelectProps: () => T["select"];
+  getFormatTriggerProps: () => T["button"];
+}
+//#endregion
+//#region src/machines/color-picker/color-picker.connect.d.ts
+declare function connect<T extends PropTypes>(service: ColorPickerService, normalize: NormalizeProps<T>): ColorPickerApi<T>;
+//#endregion
+//#region src/machines/color-picker/color-picker.machine.d.ts
+declare const machine: Machine<ColorPickerSchema>;
+//#endregion
+//#region src/machines/color-picker/color-picker.parse.d.ts
+declare const parse: (colorString: string) => Color;
+//#endregion
+//#region src/machines/color-picker/color-picker.props.d.ts
+declare const props: (keyof ColorPickerProps)[];
+declare const splitProps: <Props extends Partial<ColorPickerProps>>(props: Props) => [Partial<ColorPickerProps>, Omit<Props, keyof ColorPickerProps>];
+declare const areaProps: (keyof AreaProps)[];
+declare const splitAreaProps: <Props extends AreaProps>(props: Props) => [AreaProps, Omit<Props, keyof AreaProps>];
+declare const channelProps: (keyof ChannelProps)[];
+declare const splitChannelProps: <Props extends ChannelProps>(props: Props) => [ChannelProps, Omit<Props, keyof ChannelProps>];
+declare const swatchTriggerProps: (keyof SwatchTriggerProps)[];
+declare const splitSwatchTriggerProps: <Props extends SwatchTriggerProps>(props: Props) => [SwatchTriggerProps, Omit<Props, keyof SwatchTriggerProps>];
+declare const swatchProps: (keyof SwatchProps)[];
+declare const splitSwatchProps: <Props extends SwatchProps>(props: Props) => [SwatchProps, Omit<Props, keyof SwatchProps>];
+declare const transparencyGridProps: "size"[];
+declare const splitTransparencyGridProps: <Props extends TransparencyGridProps>(props: Props) => [TransparencyGridProps, Omit<Props, "size">];
+//#endregion
+export { type ColorPickerApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type Color, type ColorAxes, type ColorChannel, type ColorFormat, type ColorType, type ElementIds, type ExtendedColorChannel, type FocusOutsideEvent, type FormatChangeDetails, type InteractOutsideEvent, type ColorPickerMachine as Machine, type OpenChangeDetails, type PointerDownOutsideEvent, type PositioningOptions, type ColorPickerProps as Props, type ColorPickerService as Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };