@zag-js/color-picker 0.48.0 → 0.50.0

package/src/color-picker.types.ts

@@ -2,13 +2,10 @@ import type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from "@za
 import type { StateMachine as S } from "@zag-js/core"
 import type { InteractOutsideHandlers } from "@zag-js/dismissable"
 import type { PositioningOptions } from "@zag-js/popper"
-import type { CommonProperties, MaybeElement, Orientation, PropTypes, RequiredBy } from "@zag-js/types"
-import type { MaybeFunction } from "@zag-js/utils"
+import type { CommonProperties, DirectionProperty, Orientation, PropTypes, RequiredBy } from "@zag-js/types"
 
 export type ExtendedColorChannel = ColorChannel | "hex" | "css"
 
-// patch the global window object to include the EyeDropper API
-
 interface EyeDropper {
   new (): EyeDropper
   open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>
@@ -57,17 +54,14 @@ export type ElementIds = Partial<{
   channelSliderThumb(id: ColorChannel): string
 }>
 
-interface PublicContext extends CommonProperties, InteractOutsideHandlers {
+interface PublicContext extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
   /**
    * The ids of the elements in the color picker. Useful for composition.
    */
   ids?: ElementIds
-  /**
-   * The direction of the color picker
-   */
-  dir: "ltr" | "rtl"
   /**
    * The current color value
+   * @default #000000
    */
   value: Color
   /**
@@ -98,11 +92,10 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
    * The positioning options for the color picker
    */
   positioning: PositioningOptions
-
   /**
    * The initial focus element when the color picker is opened.
    */
-  initialFocusEl?: MaybeFunction<MaybeElement>
+  initialFocusEl?: () => HTMLElement | null
   /**
    * Whether the color picker is open
    */
@@ -113,6 +106,7 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
   "open.controlled"?: boolean
   /**
    * The color format to use
+   * @default "rgba"
    */
   format: ColorFormat
   /**
@@ -121,6 +115,7 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
   onFormatChange?: (details: FormatChangeDetails) => void
   /**
    * Whether to close the color picker when a swatch is selected
+   * @default false
    */
   closeOnSelect?: boolean
 }
@@ -336,4 +331,4 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
  * Re-exported types
  * -----------------------------------------------------------------------------*/
 
-export type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType }
+export type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType, PositioningOptions }

package/src/index.ts

@@ -1,3 +1,4 @@
+export type { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from "@zag-js/dismissable"
 export { anatomy } from "./color-picker.anatomy"
 export { connect } from "./color-picker.connect"
 export { machine } from "./color-picker.machine"
@@ -16,6 +17,7 @@ export type {
   ElementIds,
   FormatChangeDetails,
   OpenChangeDetails,
+  PositioningOptions,
   SwatchProps,
   SwatchTriggerProps,
   SwatchTriggerState,