@choice-ui/react 1.7.5 → 1.7.7

package/dist/components/colors/src/color-channel-field/color-channel-field.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Select as Select2 } from "../../../select/dist/index.js";
+import { memo, forwardRef, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { ColorChannelInput } from "./color-channel-input.js";
+import { ColorChannelFieldTv } from "./tv.js";
+import { useChannelFieldFeatures } from "../hooks/use-features.js";
+import { COLOR_SPACES, COLOR_SPACE_OPTIONS } from "../contents/color-space.js";
+import { translation } from "../contents/translation.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const ColorChannelField = memo(
+  forwardRef(function ColorChannelField2(props, ref) {
+    var _a;
+    const {
+      hsl,
+      rgb,
+      hsb,
+      alpha,
+      defaultColorSpace = COLOR_SPACES.HEX,
+      colorSpace,
+      onChangeColorSpace,
+      onHslChange,
+      onRgbChange,
+      onHsbChange,
+      onAlphaChange,
+      onAlphaChangeEnd,
+      onAlphaChangeStart,
+      className,
+      disabled,
+      features: userFeatures = {},
+      labels
+    } = props;
+    const features = {
+      alpha: true,
+      spaceDropdown: true,
+      hex: true,
+      rgb: true,
+      hsl: true,
+      hsb: true,
+      ...userFeatures
+    };
+    const handleAlphaChange = useEventCallback((value) => {
+      onAlphaChange == null ? void 0 : onAlphaChange(value);
+    });
+    const spacesAvailable = useChannelFieldFeatures({
+      features,
+      colorSpace,
+      onChangeColorSpace,
+      onAlphaChange
+    });
+    const styles = ColorChannelFieldTv({
+      spacesAvailable,
+      spaceDropdown: features.spaceDropdown
+    });
+    const spaceOptions = useMemo(() => {
+      return COLOR_SPACE_OPTIONS.filter((option) => features[option.value]);
+    }, [features]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(styles.container(), className),
+        children: spacesAvailable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            ColorChannelInput,
+            {
+              colorSpace: colorSpace ?? defaultColorSpace,
+              alpha,
+              disabled,
+              rgb,
+              hsl,
+              hsb,
+              onAlphaChange: handleAlphaChange,
+              onAlphaChangeEnd,
+              onAlphaChangeStart,
+              onRgbChange,
+              onHslChange,
+              onHsbChange,
+              features,
+              labels
+            }
+          ),
+          features.spaceDropdown && /* @__PURE__ */ jsxs(
+            Select2,
+            {
+              value: colorSpace,
+              onChange: (value) => onChangeColorSpace == null ? void 0 : onChangeColorSpace(value),
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx(Select2.Trigger, { children: /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: (_a = COLOR_SPACE_OPTIONS.find((option) => option.value === colorSpace)) == null ? void 0 : _a.label }) }),
+                /* @__PURE__ */ jsx(Select2.Content, { className: "min-w-24", children: spaceOptions.map((option) => /* @__PURE__ */ jsx(
+                  Select2.Item,
+                  {
+                    value: option.value,
+                    children: option.label
+                  },
+                  option.value
+                )) })
+              ]
+            }
+          )
+        ] }) : translation.channelField.EMPTY
+      }
+    );
+  })
+);
+ColorChannelField.displayName = "ColorChannelField";
+export {
+  ColorChannelField
+};

package/dist/components/colors/src/color-channel-field/color-channel-input.d.ts

@@ -0,0 +1,20 @@
+import { ChannelFieldFeature, ChannelFieldSpace, HSB, HSL, RGB } from '../types/colors';
+import { ColorChannelLabels } from '../types/paint';
+interface ColorChannelInputProps {
+    alpha?: number;
+    colorSpace: ChannelFieldSpace;
+    disabled?: boolean;
+    features?: ChannelFieldFeature;
+    hsb?: HSB;
+    hsl?: HSL;
+    labels?: ColorChannelLabels;
+    onAlphaChange?: (value: number) => void;
+    onAlphaChangeEnd?: () => void;
+    onAlphaChangeStart?: () => void;
+    onHsbChange?: (hsb: HSB) => void;
+    onHslChange?: (hsl: HSL) => void;
+    onRgbChange?: (rgb: RGB) => void;
+    rgb?: RGB;
+}
+export declare const ColorChannelInput: (props: ColorChannelInputProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/colors/src/color-channel-field/color-channel-input.js

@@ -0,0 +1,261 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NumericInput } from "../../../numeric-input/dist/index.js";
+import { round } from "es-toolkit";
+import { memo } from "react";
+import { AlphaInput } from "../fill-input/alpha-input.js";
+import { ColorChannelInputTv } from "./tv.js";
+import { translation } from "../contents/translation.js";
+import { COLOR_SPACES } from "../contents/color-space.js";
+import { HexInput } from "../hex-input/hex-input.js";
+const ChannelInput = memo((props) => {
+  const { value, onChange, ...rest } = props;
+  const styles = ColorChannelInputTv({});
+  return /* @__PURE__ */ jsx(
+    NumericInput,
+    {
+      classNames: {
+        container: styles.numeric(),
+        input: styles.numericInput()
+      },
+      variant: "reset",
+      value,
+      onChange: (value2) => onChange == null ? void 0 : onChange(value2),
+      ...rest
+    }
+  );
+});
+ChannelInput.displayName = "ChannelInput";
+const ColorChannelInput = (props) => {
+  const {
+    colorSpace,
+    disabled,
+    rgb,
+    hsl,
+    hsb,
+    alpha,
+    onAlphaChange,
+    onAlphaChangeEnd,
+    onAlphaChangeStart,
+    onRgbChange,
+    onHslChange,
+    onHsbChange,
+    features = {
+      alpha: true,
+      hex: true,
+      rgb: true,
+      hsl: true,
+      hsb: true
+    },
+    labels = {
+      alpha: translation.channels.ALPHA,
+      red: translation.channels.RED,
+      green: translation.channels.GREEN,
+      blue: translation.channels.BLUE,
+      hue: translation.channels.HUE,
+      brightness: translation.channels.BRIGHTNESS,
+      saturation: translation.channels.SATURATION,
+      lightness: translation.channels.LIGHTNESS
+    }
+  } = props;
+  const styles = ColorChannelInputTv({ alpha: features.alpha });
+  switch (colorSpace) {
+    case COLOR_SPACES.HEX:
+      return features.hex ? /* @__PURE__ */ jsxs("div", { className: styles.container({ variant: "hex" }), children: [
+        /* @__PURE__ */ jsx(
+          HexInput,
+          {
+            className: styles.hexInput(),
+            value: rgb,
+            onChange: onRgbChange,
+            disabled,
+            onAlphaChange
+          }
+        ),
+        features.alpha && /* @__PURE__ */ jsx(
+          AlphaInput,
+          {
+            className: "[grid-area:input-2]",
+            value: alpha ?? 1,
+            onChange: (value) => onAlphaChange == null ? void 0 : onAlphaChange(value),
+            onPressEnd: onAlphaChangeEnd,
+            onPressStart: onAlphaChangeStart,
+            disabled,
+            tooltipLabel: labels.alpha
+          }
+        )
+      ] }) : null;
+    case COLOR_SPACES.RGB:
+      return features.rgb && rgb ? /* @__PURE__ */ jsxs("div", { className: styles.container({ variant: "default" }), children: [
+        Object.entries(rgb).map(([key, value], index) => {
+          const channelLabels = {
+            r: labels.red,
+            g: labels.green,
+            b: labels.blue
+          };
+          return /* @__PURE__ */ jsx(
+            ChannelInput,
+            {
+              tooltip: {
+                content: channelLabels[key]
+              },
+              className: `[grid-area:input-${index + 1}]`,
+              value,
+              onChange: (value2) => onRgbChange == null ? void 0 : onRgbChange({ ...rgb, [key]: value2 }),
+              min: 0,
+              max: 255,
+              disabled
+            },
+            key
+          );
+        }),
+        features.alpha && /* @__PURE__ */ jsx(
+          AlphaInput,
+          {
+            className: "[grid-area:input-4]",
+            value: alpha ?? 1,
+            onChange: (value) => onAlphaChange == null ? void 0 : onAlphaChange(value),
+            onPressEnd: onAlphaChangeEnd,
+            onPressStart: onAlphaChangeStart,
+            disabled,
+            tooltipLabel: labels.alpha
+          }
+        )
+      ] }) : null;
+    case COLOR_SPACES.HSL:
+      return features.hsl && hsl ? /* @__PURE__ */ jsxs("div", { className: styles.container({ variant: "default" }), children: [
+        /* @__PURE__ */ jsx(
+          ChannelInput,
+          {
+            tooltip: {
+              content: labels.hue
+            },
+            className: "[grid-area:input-1]",
+            value: round(hsl.h, 0),
+            onChange: (value) => {
+              onHslChange == null ? void 0 : onHslChange({
+                ...hsl,
+                h: value
+              });
+            },
+            min: 0,
+            max: 360,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChannelInput,
+          {
+            tooltip: {
+              content: labels.saturation
+            },
+            className: "[grid-area:input-2]",
+            value: round(hsl.s * 100, 0),
+            onChange: (value) => onHslChange == null ? void 0 : onHslChange({
+              ...hsl,
+              s: value / 100
+            }),
+            min: 0,
+            max: 100,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChannelInput,
+          {
+            tooltip: {
+              content: labels.lightness
+            },
+            className: "[grid-area:input-3]",
+            value: round(hsl.l * 100, 0),
+            onChange: (value) => onHslChange == null ? void 0 : onHslChange({
+              ...hsl,
+              l: value / 100
+            }),
+            min: 0,
+            max: 100,
+            disabled
+          }
+        ),
+        features.alpha && /* @__PURE__ */ jsx(
+          AlphaInput,
+          {
+            className: "[grid-area:input-4]",
+            value: alpha ?? 1,
+            onChange: (value) => onAlphaChange == null ? void 0 : onAlphaChange(value),
+            onPressEnd: onAlphaChangeEnd,
+            onPressStart: onAlphaChangeStart,
+            disabled,
+            tooltipLabel: labels.alpha
+          }
+        )
+      ] }) : null;
+    case COLOR_SPACES.HSB:
+      return features.hsb && hsb ? /* @__PURE__ */ jsxs("div", { className: styles.container({ variant: "default" }), children: [
+        /* @__PURE__ */ jsx(
+          ChannelInput,
+          {
+            tooltip: {
+              content: labels.hue
+            },
+            className: "[grid-area:input-1]",
+            value: round(hsb.h, 0),
+            onChange: (value) => {
+              onHsbChange == null ? void 0 : onHsbChange({ ...hsb, h: value });
+            },
+            min: 0,
+            max: 360,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChannelInput,
+          {
+            tooltip: {
+              content: labels.saturation
+            },
+            className: "[grid-area:input-2]",
+            value: round(hsb.s * 100, 0),
+            onChange: (value) => {
+              onHsbChange == null ? void 0 : onHsbChange({ ...hsb, s: value / 100 });
+            },
+            min: 0,
+            max: 100,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChannelInput,
+          {
+            tooltip: {
+              content: labels.brightness
+            },
+            className: "[grid-area:input-3]",
+            value: round(hsb.b * 100, 0),
+            onChange: (value) => {
+              onHsbChange == null ? void 0 : onHsbChange({ ...hsb, b: value / 100 });
+            },
+            min: 0,
+            max: 100,
+            disabled
+          }
+        ),
+        features.alpha && /* @__PURE__ */ jsx(
+          AlphaInput,
+          {
+            className: "[grid-area:input-4]",
+            value: alpha ?? 1,
+            onChange: (value) => onAlphaChange == null ? void 0 : onAlphaChange(value),
+            onPressEnd: onAlphaChangeEnd,
+            onPressStart: onAlphaChangeStart,
+            disabled,
+            tooltipLabel: labels.alpha
+          }
+        )
+      ] }) : null;
+    default:
+      return null;
+  }
+};
+export {
+  ColorChannelInput
+};

package/dist/components/colors/src/color-channel-field/index.d.ts

@@ -0,0 +1 @@
+export * from './color-channel-field';

package/dist/components/colors/src/color-channel-field/tv.d.ts

@@ -0,0 +1,101 @@
+export declare const ColorChannelInputTv: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        hex: string;
+    };
+    alpha: {
+        true: {
+            hexInput: string;
+        };
+        false: {
+            hexInput: string;
+        };
+    };
+}, {
+    container: string[];
+    hexInput: string;
+    numeric: string;
+    numericInput: string;
+}, undefined, {
+    variant: {
+        default: string;
+        hex: string;
+    };
+    alpha: {
+        true: {
+            hexInput: string;
+        };
+        false: {
+            hexInput: string;
+        };
+    };
+}, {
+    container: string[];
+    hexInput: string;
+    numeric: string;
+    numericInput: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+        hex: string;
+    };
+    alpha: {
+        true: {
+            hexInput: string;
+        };
+        false: {
+            hexInput: string;
+        };
+    };
+}, {
+    container: string[];
+    hexInput: string;
+    numeric: string;
+    numericInput: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const ColorChannelFieldTv: import('tailwind-variants').TVReturnType<{
+    spaceDropdown: {
+        false: {};
+        true: {};
+    };
+    spacesAvailable: {
+        true: {
+            container: string;
+        };
+        false: {
+            container: string[];
+        };
+    };
+}, {
+    container: string;
+}, undefined, {
+    spaceDropdown: {
+        false: {};
+        true: {};
+    };
+    spacesAvailable: {
+        true: {
+            container: string;
+        };
+        false: {
+            container: string[];
+        };
+    };
+}, {
+    container: string;
+}, import('tailwind-variants').TVReturnType<{
+    spaceDropdown: {
+        false: {};
+        true: {};
+    };
+    spacesAvailable: {
+        true: {
+            container: string;
+        };
+        false: {
+            container: string[];
+        };
+    };
+}, {
+    container: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/color-channel-field/tv.js

@@ -0,0 +1,85 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const ColorChannelInputTv = tcv({
+  slots: {
+    container: [
+      "input-fill grid min-w-0 rounded-md",
+      "hover:not-focus-within:before:border-default-boundary",
+      "focus-within:before:border-selected-boundary"
+    ],
+    hexInput: "bg-secondary-background [grid-area:input-1]",
+    numeric: "bg-secondary-background flex-none first:rounded-l-md last:rounded-r-md",
+    numericInput: "pr-0 pl-1.25"
+  },
+  variants: {
+    variant: {
+      default: "",
+      hex: ""
+    },
+    alpha: {
+      true: { hexInput: "rounded-l-md" },
+      false: { hexInput: "rounded-md" }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "hex",
+      alpha: true,
+      className: { container: "input-fill--hex-and-alpha" }
+    },
+    {
+      variant: "hex",
+      alpha: false,
+      className: { container: "input-fill--hex" }
+    },
+    {
+      variant: "default",
+      alpha: true,
+      className: { container: "input-fill--rgb-and-alpha" }
+    },
+    {
+      variant: "default",
+      alpha: false,
+      className: { container: "input-fill--rgb" }
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    alpha: true
+  }
+});
+const ColorChannelFieldTv = tcv({
+  slots: {
+    container: ""
+  },
+  variants: {
+    spaceDropdown: {
+      false: {},
+      true: {}
+    },
+    spacesAvailable: {
+      true: {
+        container: "grid gap-2"
+      },
+      false: {
+        container: [
+          "flex items-center justify-center select-none",
+          "bg-secondary-background text-secondary-foreground h-6 rounded-md"
+        ]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      spacesAvailable: true,
+      spaceDropdown: true,
+      className: { container: "grid-cols-[1fr_auto]" }
+    }
+  ],
+  defaultVariants: {
+    spaceDropdown: true
+  }
+});
+export {
+  ColorChannelFieldTv,
+  ColorChannelInputTv
+};

package/dist/components/colors/src/color-gradients-paint/color-gradient-combined.d.ts

@@ -0,0 +1,16 @@
+import { ColorStop } from '../types/colors';
+import { GradientControlLabels } from '../types/paint';
+interface ColorGradientCombinedProps {
+    active?: (stopId: string) => boolean;
+    containerWidth: number;
+    labels?: GradientControlLabels;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onSelectedStopIdChange: (id: string) => void;
+    onStopColorPickerOpen: (stop: ColorStop) => void;
+    onStopsChange: (stops: ColorStop[]) => void;
+    selectedStopId: string;
+    stops: ColorStop[];
+}
+export declare const ColorGradientCombined: (props: ColorGradientCombinedProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/colors/src/color-gradients-paint/color-gradient-combined.js

@@ -0,0 +1,54 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { ColorGradientControl } from "./color-gradient-control.js";
+import { ColorGradientSlider } from "./color-gradient-slider.js";
+const ColorGradientCombined = (props) => {
+  const {
+    active,
+    stops,
+    selectedStopId,
+    onStopsChange,
+    onSelectedStopIdChange,
+    onStopColorPickerOpen,
+    containerWidth,
+    onChangeEnd,
+    onChangeStart,
+    labels
+  } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ColorGradientSlider,
+      {
+        value: stops,
+        onChange: onStopsChange,
+        onChangeStart,
+        onChangeEnd,
+        controlledSelectedStopId: selectedStopId,
+        onSelectedStopIdChange,
+        trackSize: {
+          width: containerWidth - 32,
+          height: 16
+        },
+        className: "min-w-0 px-4 pb-4"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorGradientControl,
+      {
+        className: "min-w-0 border-t",
+        active,
+        stops,
+        openPicker: onStopColorPickerOpen,
+        selectedStopId,
+        onStopChange: onStopsChange,
+        onSelectedStopIdChange,
+        controlSize: containerWidth - 32,
+        onChangeStart,
+        onChangeEnd,
+        labels
+      }
+    )
+  ] });
+};
+export {
+  ColorGradientCombined
+};

package/dist/components/colors/src/color-gradients-paint/color-gradient-control.d.ts

@@ -0,0 +1,18 @@
+import { ColorStop } from '../types/colors';
+import { GradientControlLabels, GradientPaint } from '../types/paint';
+interface ColorGradientControlProps {
+    active?: (stopId: string) => boolean;
+    addStopLabel?: string;
+    className?: string;
+    controlSize?: number;
+    labels?: GradientControlLabels;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onSelectedStopIdChange?: (id: string) => void;
+    onStopChange?: (stops: ColorStop[]) => void;
+    openPicker?: (stop: ColorStop) => void;
+    selectedStopId?: string;
+    stops: GradientPaint["gradientStops"];
+}
+export declare const ColorGradientControl: import('react').ForwardRefExoticComponent<ColorGradientControlProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};