@choice-ui/react 1.7.6 → 1.7.7

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

@@ -0,0 +1,162 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useMemo, useRef } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { ColorGradientCombined } from "./color-gradient-combined.js";
+import { ColorGradientsToolbar } from "./color-gradients-toolbar.js";
+import { ColorPickerPopover } from "../color-picker-popover/color-picker-popover.js";
+import { ColorSolidPaint } from "../color-solid-paint/color-solid-paint.js";
+import { translation } from "../contents/translation.js";
+const ColorGradientsPaint = forwardRef(
+  function ColorGradientsPaint2(props, ref) {
+    const {
+      className,
+      gradient,
+      onGradientChange,
+      features = {
+        containerWidth: 240
+      },
+      labels,
+      colorSpace,
+      onColorSpaceChange,
+      onChangeStart,
+      onChangeEnd,
+      solidPaintLabels
+    } = props;
+    const [selectedStopId, setSelectedStopId] = useState(() => {
+      var _a;
+      return ((_a = gradient.gradientStops[0]) == null ? void 0 : _a.id) ?? "";
+    });
+    const [colorPaneOpen, setColorPaneOpen] = useState(null);
+    const gradientStops = gradient.gradientStops;
+    const [selectedStopColor, selectedStopAlpha] = useMemo(() => {
+      const selectedStop = gradientStops.find((stop) => stop.id === selectedStopId);
+      return [selectedStop == null ? void 0 : selectedStop.color, selectedStop == null ? void 0 : selectedStop.alpha];
+    }, [selectedStopId, gradientStops]);
+    const controlRef = useRef(null);
+    const handleTypeChange = useEventCallback((value) => {
+      onGradientChange == null ? void 0 : onGradientChange({
+        ...gradient,
+        type: value
+      });
+    });
+    const handleRotate = useEventCallback(() => {
+      const transform = gradient.gradientTransform;
+      const newTransform = transform.map((row) => row.map((value) => (value + 90) % 360));
+      onGradientChange == null ? void 0 : onGradientChange({
+        ...gradient,
+        gradientTransform: newTransform
+      });
+    });
+    const handleFlipStops = useEventCallback(() => {
+      const sortedStops = [...gradient.gradientStops].sort((a, b) => a.position - b.position);
+      const flippedStops = sortedStops.map((stop) => ({
+        ...stop,
+        position: 1 - stop.position
+      })).reverse();
+      onGradientChange == null ? void 0 : onGradientChange({
+        ...gradient,
+        gradientStops: flippedStops
+      });
+    });
+    const handleStopsChange = useEventCallback((newStops) => {
+      onGradientChange == null ? void 0 : onGradientChange({
+        ...gradient,
+        gradientStops: [...newStops]
+      });
+    });
+    const handleSelectedStopIdChange = useEventCallback((id) => {
+      setSelectedStopId(id);
+    });
+    const handleOpenStopColorPicker = useEventCallback((stop) => {
+      setSelectedStopId(stop.id);
+      setColorPaneOpen(stop.id);
+    });
+    const handleSelectStopColorChange = useEventCallback((color) => {
+      const newStops = gradientStops.map(
+        (stop) => stop.id === selectedStopId ? { ...stop, color } : stop
+      );
+      handleStopsChange(newStops);
+    });
+    const handleSelectStopAlphaChange = useEventCallback((alpha) => {
+      const newStops = gradientStops.map(
+        (stop) => stop.id === selectedStopId ? { ...stop, alpha } : stop
+      );
+      handleStopsChange(newStops);
+    });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: controlRef,
+          className,
+          children: [
+            /* @__PURE__ */ jsx(
+              ColorGradientsToolbar,
+              {
+                type: gradient.type,
+                onTypeChange: handleTypeChange,
+                onRotate: handleRotate,
+                onFlipStops: handleFlipStops,
+                labels
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColorGradientCombined,
+              {
+                active: (stopId) => colorPaneOpen === stopId,
+                stops: gradient.gradientStops,
+                selectedStopId,
+                onStopsChange: handleStopsChange,
+                onSelectedStopIdChange: handleSelectedStopIdChange,
+                onStopColorPickerOpen: handleOpenStopColorPicker,
+                containerWidth: (features == null ? void 0 : features.containerWidth) ?? 240,
+                onChangeStart,
+                onChangeEnd,
+                labels
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorPickerPopover,
+        {
+          autoUpdate: true,
+          triggerRef: controlRef,
+          placement: "left-start",
+          open: colorPaneOpen !== null,
+          onOpenChange: (open) => {
+            if (!open) {
+              setColorPaneOpen(null);
+            }
+          },
+          labels: {
+            custom: (solidPaintLabels == null ? void 0 : solidPaintLabels.custom) ?? translation.colorPicker.TITLE
+          },
+          solidPaint: /* @__PURE__ */ jsx(
+            ColorSolidPaint,
+            {
+              onChangeStart,
+              onChangeEnd,
+              colorSpace,
+              onColorSpaceChange,
+              color: selectedStopColor,
+              onColorChange: handleSelectStopColorChange,
+              alpha: selectedStopAlpha,
+              onAlphaChange: handleSelectStopAlphaChange,
+              labels: solidPaintLabels
+            }
+          ),
+          features: {
+            paintsType: false,
+            pickerType: true
+          }
+        }
+      )
+    ] });
+  }
+);
+ColorGradientsPaint.displayName = "ColorGradientsPaint";
+export {
+  ColorGradientsPaint
+};

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

@@ -0,0 +1,10 @@
+import { GradientPaint, GradientToolbarLabels } from '../types/paint';
+interface ColorGradientsToolbarProps {
+    labels?: GradientToolbarLabels;
+    onFlipStops: () => void;
+    onRotate: () => void;
+    onTypeChange: (value: string) => void;
+    type: GradientPaint["type"];
+}
+export declare const ColorGradientsToolbar: (props: ColorGradientsToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { Select as Select2 } from "../../../select/dist/index.js";
+import { Rotate90Right, SwapHorizontalSmall } from "@choiceform/icons-react";
+import { useMemo } from "react";
+import { translation } from "../contents/translation.js";
+const ColorGradientsToolbar = function ColorGradientsToolbar2(props) {
+  var _a;
+  const { type, onTypeChange, onRotate, onFlipStops, labels } = props;
+  const GRADIENTS_TYPES = useMemo(() => {
+    return [
+      { value: "GRADIENT_LINEAR", label: (labels == null ? void 0 : labels.linear) ?? translation.gradients.LINEAR },
+      { value: "GRADIENT_RADIAL", label: (labels == null ? void 0 : labels.radial) ?? translation.gradients.RADIAL },
+      { value: "GRADIENT_ANGULAR", label: (labels == null ? void 0 : labels.conic) ?? translation.gradients.CONIC }
+    ];
+  }, [labels == null ? void 0 : labels.conic, labels == null ? void 0 : labels.linear, labels == null ? void 0 : labels.radial]);
+  return /* @__PURE__ */ jsxs("div", { className: "grid h-12 grid-cols-2 items-center gap-2 pr-2 pl-4", children: [
+    /* @__PURE__ */ jsxs(
+      Select2,
+      {
+        value: type,
+        onChange: onTypeChange,
+        children: [
+          /* @__PURE__ */ jsx(Select2.Trigger, { children: /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: (_a = GRADIENTS_TYPES.find((option) => option.value === type)) == null ? void 0 : _a.label }) }),
+          /* @__PURE__ */ jsx(Select2.Content, { className: "min-w-28", children: GRADIENTS_TYPES.map((option) => /* @__PURE__ */ jsx(
+            Select2.Item,
+            {
+              value: option.value,
+              children: option.label
+            },
+            option.value
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-end", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: {
+            content: (labels == null ? void 0 : labels.rotateGradient) ?? translation.gradients.ROTATE_GRADIENT
+          },
+          onClick: onRotate,
+          children: /* @__PURE__ */ jsx(Rotate90Right, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          tooltip: {
+            content: (labels == null ? void 0 : labels.flipGradient) ?? translation.gradients.FLIP_GRADIENT
+          },
+          onClick: onFlipStops,
+          children: /* @__PURE__ */ jsx(SwapHorizontalSmall, {})
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ColorGradientsToolbar
+};

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

@@ -0,0 +1,3 @@
+export * from './color-gradient-control';
+export * from './color-gradient-slider';
+export * from './color-gradients-paint';

package/dist/components/colors/src/color-image-paint/color-image-paint.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { ImagePaint, ImagePaintFeature } from '../types';
+export interface ColorImagePaintProps {
+    className?: string;
+    features?: ImagePaintFeature;
+    image?: ImagePaint;
+    imageSrc?: string;
+    onChooseImage?: () => void;
+    onImageChange?: (image: ImagePaint) => void;
+    onImageChangeEnd?: () => void;
+    onImageChangeStart?: () => void;
+}
+export declare const ColorImagePaint: React.NamedExoticComponent<ColorImagePaintProps>;

package/dist/components/colors/src/color-image-paint/color-image-paint.js

@@ -0,0 +1,236 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "../../../button/dist/index.js";
+import { Range } from "../../../range/dist/index.js";
+import React__default, { memo, useState, useRef, useMemo, useEffect, useCallback } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { ColorImageToolbar } from "./color-image-toolbar.js";
+import { ColorImagePaintTv } from "./tv.js";
+import { useImageProcessor } from "../hooks/use-image-processor.js";
+import { useImageFilterStyle } from "../hooks/use-image-filter-style.js";
+import { getColorSwatchBackground } from "../utils/background.js";
+import { useMergedValue } from "../../../../shared/hooks/use-merged-value/use-merged-value.js";
+const createDefaultSizes = (baseUrl = null) => ({
+  thumb: baseUrl || "",
+  small: baseUrl || "",
+  regular: baseUrl || "",
+  raw: baseUrl || "",
+  sourceSize: {
+    width: 0,
+    height: 0
+  }
+});
+const createImageChangeObject = (baseImage, overrides) => {
+  return {
+    type: "IMAGE",
+    scaleMode: (baseImage == null ? void 0 : baseImage.scaleMode) ?? "FILL",
+    imageHash: (baseImage == null ? void 0 : baseImage.imageHash) ?? null,
+    imageSizes: (baseImage == null ? void 0 : baseImage.imageSizes) ?? createDefaultSizes(baseImage == null ? void 0 : baseImage.imageHash),
+    imageTransform: baseImage == null ? void 0 : baseImage.imageTransform,
+    scalingFactor: baseImage == null ? void 0 : baseImage.scalingFactor,
+    rotation: (baseImage == null ? void 0 : baseImage.rotation) ?? 0,
+    visible: (baseImage == null ? void 0 : baseImage.visible) ?? true,
+    opacity: (baseImage == null ? void 0 : baseImage.opacity) ?? 1,
+    filters: baseImage == null ? void 0 : baseImage.filters,
+    ...overrides
+  };
+};
+const ColorImagePaint = memo(function ColorImagePaint2(props) {
+  var _a, _b, _c, _d;
+  const {
+    image,
+    imageSrc: initialImageSrc,
+    onImageChange,
+    onChooseImage,
+    className,
+    features: userFeatures = {},
+    onImageChangeEnd,
+    onImageChangeStart
+  } = props;
+  const [imageSrc, setImageSrc] = useState(
+    ((_a = image == null ? void 0 : image.imageSizes) == null ? void 0 : _a.small) ?? initialImageSrc ?? void 0
+  );
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef(null);
+  const features = useMemo(
+    () => ({
+      containerWidth: 240,
+      labels: {
+        exposure: "Exposure",
+        contrast: "Contrast",
+        saturation: "Saturation",
+        temperature: "Temperature",
+        tint: "Tint",
+        upload: "Upload from computer",
+        fill: "Fill",
+        fit: "Fit",
+        crop: "Crop",
+        tile: "Tile",
+        rotate: "Rotate 90°",
+        processing: "Processing..."
+      },
+      ...userFeatures
+    }),
+    [userFeatures]
+  );
+  const containerWidth = (features == null ? void 0 : features.containerWidth) ?? 240;
+  const styles = ColorImagePaintTv({ hasImage: !!imageSrc });
+  const checkerboard = useMemo(
+    () => getColorSwatchBackground((containerWidth - 32) / 15, 1),
+    [containerWidth]
+  );
+  const { processImage, isProcessing } = useImageProcessor();
+  const isLoading = isUploading || isProcessing;
+  useEffect(() => {
+    var _a2;
+    if ((_a2 = image == null ? void 0 : image.imageSizes) == null ? void 0 : _a2.small) {
+      setImageSrc(image.imageSizes.small);
+    }
+  }, [(_b = image == null ? void 0 : image.imageSizes) == null ? void 0 : _b.small]);
+  const [filters, setFilters] = useMergedValue({
+    defaultValue: {
+      exposure: 0,
+      contrast: 0,
+      saturation: 0,
+      temperature: 0,
+      tint: 0
+    },
+    value: image == null ? void 0 : image.filters,
+    onChange: (filters2) => {
+      if (onImageChange) {
+        onImageChange(createImageChangeObject(image, { filters: filters2 }));
+      }
+    }
+  });
+  const handleFileChange = useEventCallback((event) => {
+    var _a2;
+    if (onChooseImage) return;
+    const file = (_a2 = event.target.files) == null ? void 0 : _a2[0];
+    if (!file || !onImageChange) return;
+    setIsUploading(true);
+    processImage(file).then((urls) => {
+      setImageSrc(urls.small);
+      onImageChange(
+        createImageChangeObject(image, {
+          imageHash: urls.small,
+          imageSizes: urls
+        })
+      );
+    }).catch((error) => {
+      console.error("图片处理失败", error);
+    }).finally(() => {
+      setIsUploading(false);
+    });
+  });
+  const handleUploadClick = useEventCallback(() => {
+    var _a2;
+    if (onChooseImage) {
+      onChooseImage();
+    } else {
+      (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+    }
+  });
+  const handleScaleModeChange = useCallback(
+    (scaleMode) => {
+      console.log("scale mode change", scaleMode);
+      if (onImageChange) {
+        onImageChange(createImageChangeObject(image, { scaleMode }));
+      }
+    },
+    [image, onImageChange]
+  );
+  const handleRotate = useCallback(() => {
+    if (onImageChange) {
+      const currentRotation = (image == null ? void 0 : image.rotation) ?? 0;
+      onImageChange(
+        createImageChangeObject(image, {
+          rotation: currentRotation + 90
+        })
+      );
+    }
+  }, [image, onImageChange]);
+  const imageStyle = useImageFilterStyle(filters);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.root({ className }),
+      style: { width: containerWidth },
+      children: [
+        /* @__PURE__ */ jsx(
+          ColorImageToolbar,
+          {
+            features,
+            scaleMode: image == null ? void 0 : image.scaleMode,
+            onScaleModeChange: handleScaleModeChange,
+            onRotate: handleRotate
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.container(),
+            style: { background: checkerboard },
+            children: [
+              imageSrc && /* @__PURE__ */ jsx("div", { className: styles.imgContainer(), children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  className: styles.image(),
+                  src: imageSrc,
+                  alt: "Uploaded image",
+                  style: imageStyle
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: styles.buttonContainer(), children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: styles.button(),
+                    onClick: handleUploadClick,
+                    disabled: isLoading,
+                    children: isLoading ? (_c = features == null ? void 0 : features.labels) == null ? void 0 : _c.processing : (_d = features == null ? void 0 : features.labels) == null ? void 0 : _d.upload
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    accept: "image/*",
+                    onChange: handleFileChange,
+                    className: "hidden",
+                    disabled: isLoading
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: styles.adjustContainer(), children: ["exposure", "contrast", "saturation", "temperature", "tint"].map((filterName) => {
+          var _a2;
+          return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: styles.adjustLabel(), children: (_a2 = features == null ? void 0 : features.labels) == null ? void 0 : _a2[filterName] }),
+            /* @__PURE__ */ jsx(
+              Range,
+              {
+                min: -100,
+                max: 100,
+                defaultValue: 0,
+                trackSize: { width: 128 },
+                value: filters[filterName],
+                onChange: (value) => setFilters({
+                  ...filters,
+                  [filterName]: value
+                }),
+                onChangeEnd: onImageChangeEnd,
+                onChangeStart: onImageChangeStart,
+                disabled: isLoading || !imageSrc
+              }
+            )
+          ] }, filterName);
+        }) })
+      ]
+    }
+  );
+});
+export {
+  ColorImagePaint
+};

package/dist/components/colors/src/color-image-paint/color-image-toolbar.d.ts

@@ -0,0 +1,9 @@
+import { ImagePaintFeature, ImageScaleMode } from '../types';
+interface ColorImageToolbarProps {
+    features?: ImagePaintFeature;
+    onRotate?: () => void;
+    onScaleModeChange?: (scaleMode: ImageScaleMode) => void;
+    scaleMode?: ImageScaleMode;
+}
+export declare const ColorImageToolbar: import('react').NamedExoticComponent<ColorImageToolbarProps>;
+export {};

package/dist/components/colors/src/color-image-paint/color-image-toolbar.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { Select as Select2 } from "../../../select/dist/index.js";
+import { Rotate90Right } from "@choiceform/icons-react";
+import { memo } from "react";
+import { ColorImageToolbarTv } from "./tv.js";
+import { useMergedValue } from "../../../../shared/hooks/use-merged-value/use-merged-value.js";
+const ColorImageToolbar = memo(function ColorImageToolbar2(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { features, scaleMode, onScaleModeChange, onRotate } = props;
+  const styles = ColorImageToolbarTv();
+  const [internalScaleMode, setInternalScaleMode] = useMergedValue({
+    defaultValue: "FILL",
+    value: scaleMode,
+    onChange: (value) => {
+      onScaleModeChange == null ? void 0 : onScaleModeChange(value);
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: styles.root(), children: [
+    /* @__PURE__ */ jsxs(
+      Select2,
+      {
+        value: internalScaleMode,
+        onChange: (value) => {
+          setInternalScaleMode(value);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Select2.Trigger, { children: /* @__PURE__ */ jsx(Select2.Value, { children: (_a = features == null ? void 0 : features.labels) == null ? void 0 : _a[internalScaleMode.toLowerCase()] }) }),
+          /* @__PURE__ */ jsxs(Select2.Content, { children: [
+            /* @__PURE__ */ jsx(Select2.Item, { value: "FILL", children: (_b = features == null ? void 0 : features.labels) == null ? void 0 : _b.fill }),
+            /* @__PURE__ */ jsx(Select2.Item, { value: "FIT", children: (_c = features == null ? void 0 : features.labels) == null ? void 0 : _c.fit }),
+            /* @__PURE__ */ jsx(Select2.Item, { value: "CROP", children: (_d = features == null ? void 0 : features.labels) == null ? void 0 : _d.crop }),
+            /* @__PURE__ */ jsx(Select2.Item, { value: "TILE", children: (_e = features == null ? void 0 : features.labels) == null ? void 0 : _e.tile })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.right(), children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        tooltip: {
+          content: (_f = features == null ? void 0 : features.labels) == null ? void 0 : _f.rotate
+        },
+        onClick: onRotate,
+        children: /* @__PURE__ */ jsx(Rotate90Right, {})
+      }
+    ) })
+  ] });
+});
+export {
+  ColorImageToolbar
+};

package/dist/components/colors/src/color-image-paint/index.d.ts

@@ -0,0 +1 @@
+export * from './color-image-paint';

package/dist/components/colors/src/color-image-paint/tv.d.ts

@@ -0,0 +1,89 @@
+export declare const ColorImagePaintTv: import('tailwind-variants').TVReturnType<{
+    hasImage: {
+        true: {
+            container: string;
+            buttonContainer: string[];
+        };
+        false: {
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    container: string[];
+    buttonContainer: string;
+    button: string;
+    imgContainer: string;
+    image: string;
+    adjustContainer: string;
+    adjustLabel: string;
+}, undefined, {
+    hasImage: {
+        true: {
+            container: string;
+            buttonContainer: string[];
+        };
+        false: {
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    container: string[];
+    buttonContainer: string;
+    button: string;
+    imgContainer: string;
+    image: string;
+    adjustContainer: string;
+    adjustLabel: string;
+}, import('tailwind-variants').TVReturnType<{
+    hasImage: {
+        true: {
+            container: string;
+            buttonContainer: string[];
+        };
+        false: {
+            container: string;
+        };
+    };
+}, {
+    root: string;
+    container: string[];
+    buttonContainer: string;
+    button: string;
+    imgContainer: string;
+    image: string;
+    adjustContainer: string;
+    adjustLabel: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const ColorImageToolbarTv: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            right?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            right?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    right: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            right?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string;
+    right: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string;
+    right: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/color-image-paint/tv.js

@@ -0,0 +1,45 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const ColorImagePaintTv = tcv({
+  slots: {
+    root: "flex flex-col pb-4",
+    container: [
+      "group/image-container mx-4",
+      "relative grid aspect-square place-content-center overflow-hidden rounded-md",
+      "before:absolute before:inset-0 before:z-1 before:border",
+      "before:pointer-events-none before:rounded-md before:content-['']"
+    ],
+    buttonContainer: "absolute inset-0 grid place-content-center bg-black/40",
+    button: "relative",
+    imgContainer: "absolute inset-0 grid place-content-center overflow-hidden",
+    image: "aspect-square h-full w-full object-contain",
+    adjustContainer: "mx-4 mt-4 grid grid-cols-[1fr_auto] gap-x-2 gap-y-4",
+    adjustLabel: "text-secondary-foreground truncate"
+  },
+  variants: {
+    hasImage: {
+      true: {
+        container: "before:border-black/10 hover:before:border-transparent",
+        buttonContainer: [
+          "opacity-0 transition-opacity duration-300",
+          "group-hover/image-container:opacity-100"
+        ]
+      },
+      false: {
+        container: "before:border-transparent"
+      }
+    }
+  },
+  defaultVariants: {
+    hasImage: false
+  }
+});
+const ColorImageToolbarTv = tcv({
+  slots: {
+    root: "grid h-12 grid-cols-2 items-center gap-2 pr-2 pl-4",
+    right: "flex flex-1 items-center justify-end"
+  }
+});
+export {
+  ColorImagePaintTv,
+  ColorImageToolbarTv
+};