@zag-js/color-picker 0.9.2 → 0.10.0

package/src/utils/get-channel-input-value.ts

@@ -0,0 +1,23 @@
+import { Color } from "@zag-js/color-utils"
+import { ExtendedColorChannel } from "../color-picker.types"
+
+export function getChannelInputValue(color: Color, channel: ExtendedColorChannel) {
+  switch (channel) {
+    case "hex":
+      return color.toString("hex")
+    case "css":
+      return color.toString("css")
+    default:
+      return color.getChannelValue(channel).toString()
+  }
+}
+
+export function getChannelInputRange(color: Color, channel: ExtendedColorChannel) {
+  switch (channel) {
+    case "hex":
+    case "css":
+      return undefined
+    default:
+      return color.getChannelRange(channel)
+  }
+}

package/src/utils/get-color-area-gradient.ts

@@ -0,0 +1,84 @@
+import { ColorChannel } from "@zag-js/color-utils"
+import { Style } from "@zag-js/types"
+import { MachineContext } from "../color-picker.types"
+import {
+  generateHSB_B,
+  generateHSB_H,
+  generateHSB_S,
+  generateHSL_H,
+  generateHSL_L,
+  generateHSL_S,
+  generateRGB_B,
+  generateRGB_G,
+  generateRGB_R,
+} from "./generate-format-background"
+
+export function getColorAreaGradient(ctx: MachineContext, xChannel: ColorChannel, yChannel: ColorChannel) {
+  const value = ctx.valueAsColor
+
+  const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel })
+  const zValue = value.getChannelValue(zChannel)
+
+  const { minValue: zMin, maxValue: zMax } = value.getChannelRange(zChannel)
+  const orientation: [string, string] = ["top", ctx.dir === "rtl" ? "left" : "right"]
+
+  let dir = false
+  let background = { areaStyles: {} as Style, areaGradientStyles: {} as Style }
+
+  let alphaValue = (zValue - zMin) / (zMax - zMin)
+  let isHSL = value.getColorSpace() === "hsl"
+
+  switch (zChannel) {
+    case "red": {
+      dir = xChannel === "green"
+      background = generateRGB_R(orientation, dir, zValue)
+      break
+    }
+
+    case "green": {
+      dir = xChannel === "red"
+      background = generateRGB_G(orientation, dir, zValue)
+      break
+    }
+
+    case "blue": {
+      dir = xChannel === "red"
+      background = generateRGB_B(orientation, dir, zValue)
+      break
+    }
+
+    case "hue": {
+      dir = xChannel !== "saturation"
+      if (isHSL) {
+        background = generateHSL_H(orientation, dir, zValue)
+      } else {
+        background = generateHSB_H(orientation, dir, zValue)
+      }
+      break
+    }
+
+    case "saturation": {
+      dir = xChannel === "hue"
+      if (isHSL) {
+        background = generateHSL_S(orientation, dir, alphaValue)
+      } else {
+        background = generateHSB_S(orientation, dir, alphaValue)
+      }
+      break
+    }
+
+    case "brightness": {
+      dir = xChannel === "hue"
+      background = generateHSB_B(orientation, dir, alphaValue)
+      break
+    }
+
+    case "lightness": {
+      dir = xChannel === "hue"
+      background = generateHSL_L(orientation, dir, zValue)
+      break
+    }
+  }
+
+  return background
+}

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

@@ -0,0 +1,43 @@
+import { ColorChannelProps, MachineContext } from "../color-picker.types"
+
+function getSliderBgDirection(orientation: "vertical" | "horizontal", dir: "ltr" | "rtl") {
+  if (orientation === "vertical") {
+    return "top"
+  } else if (dir === "ltr") {
+    return "right"
+  } else {
+    return "left"
+  }
+}
+
+export const getSliderBgImage = (ctx: MachineContext, props: Required<ColorChannelProps>) => {
+  const { channel } = props
+
+  const dir = getSliderBgDirection(props.orientation, ctx.dir!)
+  const value = ctx.valueAsColor
+
+  const { minValue, maxValue } = ctx.valueAsColor.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%)`
+    case "lightness": {
+      let start = ctx.valueAsColor.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})`
+    }
+    case "saturation":
+    case "brightness":
+    case "red":
+    case "green":
+    case "blue":
+    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})`
+    }
+    default:
+      throw new Error("Unknown color channel: " + channel)
+  }
+}