@zag-js/color-picker 0.20.0 → 0.22.0

package/src/utils/generate-format-background.ts

@@ -1,139 +0,0 @@
-export const generateRGB_R = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
-  const result = {
-    areaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`,
-    },
-    areaGradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-      WebkitMaskImage: maskImage,
-      maskImage,
-    },
-  }
-  return result
-}
-
-export const generateRGB_G = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
-  const result = {
-    areaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`,
-    },
-    areaGradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-      WebkitMaskImage: maskImage,
-      maskImage,
-    },
-  }
-  return result
-}
-
-export const generateRGB_B = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`
-  const result = {
-    areaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`,
-    },
-    areaGradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-      WebkitMaskImage: maskImage,
-      maskImage,
-    },
-  }
-  return result
-}
-
-export const generateHSL_H = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${
-          orientation[Number(dir)]
-        }, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
-        `hsl(${zValue}, 100%, 50%)`,
-      ].join(","),
-    },
-  }
-  return result
-}
-
-export const generateHSL_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${
-          orientation[Number(!dir)]
-        }, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
-        `linear-gradient(to ${
-          orientation[Number(dir)]
-        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        "hsl(0, 0%, 50%)",
-      ].join(","),
-    },
-  }
-  return result
-}
-
-export const generateHSL_L = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      backgroundImage: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
-        `linear-gradient(to ${
-          orientation[Number(dir)]
-        },hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`,
-      ].join(","),
-    },
-  }
-  return result
-}
-
-export const generateHSB_H = (orientation: [string, string], dir: boolean, zValue: number) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
-        `hsl(${zValue}, 100%, 50%)`,
-      ].join(","),
-    },
-  }
-  return result
-}
-
-export const generateHSB_S = (orientation: [string, string], dir: boolean, alphaValue: number) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
-        `linear-gradient(to ${
-          orientation[Number(dir)]
-        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`,
-      ].join(","),
-    },
-  }
-  return result
-}
-
-export const generateHSB_B = (orientation: [string, string], dir: boolean, alphaValue: number) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
-        `linear-gradient(to ${
-          orientation[Number(dir)]
-        },hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        "#000",
-      ].join(","),
-    },
-  }
-  return result
-}

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

@@ -1,84 +0,0 @@
-import type { ColorChannel } from "@zag-js/color-utils"
-import type { Style } from "@zag-js/types"
-import type { 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
-}