@zag-js/color-picker 0.24.0 → 0.26.0

package/src/color-picker.types.ts

@@ -76,16 +76,6 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
    * The name for the form input
    */
   name?: string
-  /**
-   * The color format to use (rgb, hsl, hsb)
-   * @default "hsl"
-   */
-  format?: ColorFormat
-  /**
-   * The alpha format to use (decimal, percent)
-   * @default "decimal"
-   */
-  alphaFormat?: "decimal" | "percent"
   /**
    * The positioning options for the color picker
    */
@@ -206,8 +196,8 @@ export interface SwatchProps {
   respectAlpha?: boolean
 }
 
-export interface TransparancyGridProps {
-  size: string
+export interface TransparencyGridProps {
+  size?: string
 }
 
 export interface MachineApi<T extends PropTypes = PropTypes> {
@@ -243,6 +233,10 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    * Function to set the color value of a specific channel
    */
   setChannelValue(channel: ColorChannel, value: number): void
+  /**
+   * The current color format
+   */
+  format: ColorFormat
   /**
    * Function to set the color format
    */
@@ -250,7 +244,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * The alpha value of the color
    */
-  getAlpha(): number
+  alpha: number
   /**
    * Function to set the color alpha
    */
@@ -273,7 +267,7 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   getChannelSliderThumbProps(props: ChannelProps): T["element"]
   getChannelInputProps(props: ChannelInputProps): T["input"]
 
-  getTransparencyGridProps(props: TransparancyGridProps): T["element"]
+  getTransparencyGridProps(props?: TransparencyGridProps): T["element"]
 
   eyeDropperTriggerProps: T["button"]
 

package/src/index.ts

@@ -14,4 +14,6 @@ export type {
   ColorType,
   UserDefinedContext as Context,
   SwatchProps,
+  TransparencyGridProps,
+  SwatchTriggerProps,
 } from "./color-picker.types"

package/src/utils/get-slider-background.ts

@@ -1,4 +1,4 @@
-import type { ChannelProps, MachineContext } from "../color-picker.types"
+import type { ChannelProps, Color, MachineContext } from "../color-picker.types"
 
 function getSliderBackgroundDirection(orientation: "vertical" | "horizontal", dir: "ltr" | "rtl") {
   if (orientation === "vertical") {
@@ -10,22 +10,24 @@ function getSliderBackgroundDirection(orientation: "vertical" | "horizontal", di
   }
 }
 
-export const getSliderBackground = (ctx: MachineContext, props: Required<ChannelProps>) => {
-  const { channel } = props
-
-  const dir = getSliderBackgroundDirection(props.orientation, ctx.dir!)
-  const value = ctx.value
+interface SliderBackgroundProps extends Required<ChannelProps> {
+  value: Color
+  dir: MachineContext["dir"]
+}
 
+export const getSliderBackground = (props: SliderBackgroundProps) => {
+  const { channel, value, dir } = props
+  const bgDirection = getSliderBackgroundDirection(props.orientation, dir!)
   const { minValue, maxValue } = value.getChannelRange(channel)
 
   switch (channel) {
     case "hue":
-      return `linear-gradient(to ${dir}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`
+      return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`
     case "lightness": {
       let start = value.withChannelValue(channel, minValue).toString("css")
       let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css")
       let end = value.withChannelValue(channel, maxValue).toString("css")
-      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`
+      return `linear-gradient(to ${bgDirection}, ${start}, ${middle}, ${end})`
     }
     case "saturation":
     case "brightness":
@@ -35,7 +37,7 @@ export const getSliderBackground = (ctx: MachineContext, props: Required<Channel
     case "alpha": {
       let start = value.withChannelValue(channel, minValue).toString("css")
       let end = value.withChannelValue(channel, maxValue).toString("css")
-      return `linear-gradient(to ${dir}, ${start}, ${end})`
+      return `linear-gradient(to ${bgDirection}, ${start}, ${end})`
     }
     default:
       throw new Error("Unknown color channel: " + channel)