@choice-ui/react 1.7.5 → 1.7.7

package/dist/components/colors/src/fill-input/gradient-item.js

@@ -0,0 +1,103 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { AlphaInput } from "./alpha-input.js";
+import { fillInputTv } from "./tv.js";
+import { translation } from "../contents/translation.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { ColorSwatch } from "../color-swatch/color-swatch.js";
+const GradientItem = forwardRef(
+  function GradientItem2(props, ref) {
+    const {
+      className,
+      classNames,
+      alpha,
+      gradient,
+      active,
+      disabled,
+      selected,
+      onAlphaChange,
+      onClick,
+      onPickerClick,
+      labels,
+      features = {
+        alpha: true
+      }
+    } = props;
+    const handleContainerClick = useEventCallback((e) => {
+      e.stopPropagation();
+      onClick == null ? void 0 : onClick(e);
+    });
+    const handleWrapperMouseDown = useEventCallback((e) => {
+      e.stopPropagation();
+      onPickerClick == null ? void 0 : onPickerClick();
+    });
+    const handleWrapperClick = useEventCallback((e) => {
+      e.stopPropagation();
+    });
+    const gradientLabel = useMemo(() => {
+      switch (gradient == null ? void 0 : gradient.type) {
+        case "GRADIENT_LINEAR":
+          return (labels == null ? void 0 : labels.linear) ?? translation.gradients.LINEAR;
+        case "GRADIENT_RADIAL":
+          return (labels == null ? void 0 : labels.radial) ?? translation.gradients.RADIAL;
+        case "GRADIENT_ANGULAR":
+          return (labels == null ? void 0 : labels.conic) ?? translation.gradients.CONIC;
+        default:
+          return "Linear";
+      }
+    }, [gradient == null ? void 0 : gradient.type, labels == null ? void 0 : labels.conic, labels == null ? void 0 : labels.linear, labels == null ? void 0 : labels.radial]);
+    const styles = fillInputTv({
+      type: "GRADIENT",
+      alpha: features.alpha,
+      selected,
+      active,
+      disabled,
+      variantType: "VARIABLE",
+      empty: !gradient
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: tcx(styles.root(), classNames == null ? void 0 : classNames.container, className),
+        onClick: handleContainerClick,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: tcx(styles.wrapper(), classNames == null ? void 0 : classNames.wrapper),
+              onMouseDown: handleWrapperMouseDown,
+              onClick: handleWrapperClick,
+              children: [
+                /* @__PURE__ */ jsx(
+                  ColorSwatch,
+                  {
+                    className: tcx(styles.swatch(), classNames == null ? void 0 : classNames.swatch),
+                    gradient
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: tcx(styles.content(), classNames == null ? void 0 : classNames.content), children: /* @__PURE__ */ jsx("span", { className: styles.label(), children: gradientLabel }) })
+              ]
+            }
+          ),
+          features.alpha && /* @__PURE__ */ jsx(
+            AlphaInput,
+            {
+              className: tcx(styles.alpha(), classNames == null ? void 0 : classNames.alpha),
+              value: alpha,
+              onChange: onAlphaChange,
+              disabled,
+              active,
+              tooltipLabel: (labels == null ? void 0 : labels.alpha) ?? translation.input.ALPHA
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+GradientItem.displayName = "GradientItem";
+export {
+  GradientItem
+};

package/dist/components/colors/src/fill-input/image-item.d.ts

@@ -0,0 +1,25 @@
+import { FillItemLabels, ImagePaint } from '../types/paint';
+export interface ImageItemProps {
+    active?: boolean;
+    alpha?: number;
+    className?: string;
+    classNames?: {
+        alpha?: string;
+        container?: string;
+        content?: string;
+        wrapper?: string;
+    };
+    disabled?: boolean;
+    features?: {
+        alpha?: boolean;
+    };
+    image?: ImagePaint;
+    imageUrl?: string;
+    label?: string;
+    labels: FillItemLabels;
+    onAlphaChange?: (alpha: number) => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onPickerClick?: () => void;
+    selected?: boolean;
+}
+export declare const ImageItem: import('react').ForwardRefExoticComponent<ImageItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/colors/src/fill-input/image-item.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { AlphaInput } from "./alpha-input.js";
+import { fillInputTv } from "./tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { translation } from "../contents/translation.js";
+const ImagePreview = memo(function ImagePreview2(props) {
+  const { image } = props;
+  return /* @__PURE__ */ jsx("div", { className: "bg-default-background shadow-line flex size-3.5 flex-none items-center justify-center overflow-hidden rounded-sm", children: image && /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: "h-full w-full object-contain",
+      src: image,
+      alt: ""
+    }
+  ) });
+});
+const ImageItem = forwardRef(function ImageItem2(props, ref) {
+  const {
+    className,
+    classNames,
+    alpha,
+    labels,
+    image,
+    imageUrl,
+    active,
+    disabled,
+    selected,
+    onAlphaChange,
+    onClick,
+    onPickerClick,
+    label,
+    features = {
+      alpha: true
+    }
+  } = props;
+  const handleContainerClick = useEventCallback((e) => {
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick(e);
+  });
+  const handleWrapperMouseDown = useEventCallback(() => {
+    onPickerClick == null ? void 0 : onPickerClick();
+  });
+  const styles = fillInputTv({
+    type: "IMAGE",
+    alpha: features.alpha,
+    selected,
+    active,
+    disabled,
+    empty: !image
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: tcx(styles.root(), classNames == null ? void 0 : classNames.container, className),
+      onClick: handleContainerClick,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: tcx(styles.wrapper(), classNames == null ? void 0 : classNames.wrapper),
+            onMouseDown: handleWrapperMouseDown,
+            children: [
+              /* @__PURE__ */ jsx(ImagePreview, { image: imageUrl ?? null }),
+              /* @__PURE__ */ jsx("div", { className: tcx(styles.content(), classNames == null ? void 0 : classNames.content), children: /* @__PURE__ */ jsx("span", { className: styles.label(), children: label }) })
+            ]
+          }
+        ),
+        features.alpha && /* @__PURE__ */ jsx(
+          AlphaInput,
+          {
+            value: alpha,
+            onChange: onAlphaChange,
+            disabled,
+            active,
+            className: tcx(styles.alpha(), classNames == null ? void 0 : classNames.alpha),
+            tooltipLabel: (labels == null ? void 0 : labels.alpha) ?? translation.input.ALPHA
+          }
+        )
+      ]
+    }
+  );
+});
+ImageItem.displayName = "ImageItem";
+export {
+  ImageItem
+};

package/dist/components/colors/src/fill-input/index.d.ts

@@ -0,0 +1,5 @@
+export * from './color-input';
+export * from './alpha-input';
+export * from './gradient-item';
+export * from './image-item';
+export * from './variable-item';

package/dist/components/colors/src/fill-input/tv.d.ts

@@ -0,0 +1,221 @@
+export declare const fillInputTv: import('tailwind-variants').TVReturnType<{
+    type: {
+        SOLID: {};
+        GRADIENT: {};
+        IMAGE: {};
+        VARIABLE: {};
+    };
+    alpha: {
+        false: {
+            root: string;
+            wrapper: string;
+        };
+        true: {
+            root: string;
+            wrapper: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    active: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+    empty: {
+        true: {
+            label: string;
+        };
+        false: {};
+    };
+    variantType: {
+        VARIABLE: {
+            swatch: string;
+        };
+        STYLE: {
+            swatch: string;
+        };
+    };
+}, {
+    root: string[];
+    wrapper: string[];
+    swatch: string;
+    content: string[];
+    alpha: string[];
+    hex: string;
+    label: string;
+}, undefined, {
+    type: {
+        SOLID: {};
+        GRADIENT: {};
+        IMAGE: {};
+        VARIABLE: {};
+    };
+    alpha: {
+        false: {
+            root: string;
+            wrapper: string;
+        };
+        true: {
+            root: string;
+            wrapper: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    active: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+    empty: {
+        true: {
+            label: string;
+        };
+        false: {};
+    };
+    variantType: {
+        VARIABLE: {
+            swatch: string;
+        };
+        STYLE: {
+            swatch: string;
+        };
+    };
+}, {
+    root: string[];
+    wrapper: string[];
+    swatch: string;
+    content: string[];
+    alpha: string[];
+    hex: string;
+    label: string;
+}, import('tailwind-variants').TVReturnType<{
+    type: {
+        SOLID: {};
+        GRADIENT: {};
+        IMAGE: {};
+        VARIABLE: {};
+    };
+    alpha: {
+        false: {
+            root: string;
+            wrapper: string;
+        };
+        true: {
+            root: string;
+            wrapper: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    active: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            content: string;
+        };
+        false: {};
+    };
+    empty: {
+        true: {
+            label: string;
+        };
+        false: {};
+    };
+    variantType: {
+        VARIABLE: {
+            swatch: string;
+        };
+        STYLE: {
+            swatch: string;
+        };
+    };
+}, {
+    root: string[];
+    wrapper: string[];
+    swatch: string;
+    content: string[];
+    alpha: string[];
+    hex: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const alphaInputTv: import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: {
+            input: string;
+            suffix: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    suffix: string;
+}, undefined, {
+    disabled: {
+        true: {
+            input: string;
+            suffix: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    suffix: string;
+}, import('tailwind-variants').TVReturnType<{
+    disabled: {
+        true: {
+            input: string;
+            suffix: string;
+        };
+        false: {};
+    };
+    active: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    input: string;
+    suffix: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/fill-input/tv.js

@@ -0,0 +1,205 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const fillInputTv = tcv({
+  slots: {
+    root: [
+      // Layout
+      "h-6 min-w-0 flex-1 shrink-0 items-center",
+      // Container
+      "input-fill",
+      // State
+      "group"
+    ],
+    wrapper: [
+      // Layout
+      "flex min-h-6 min-w-0 items-center",
+      // Position
+      "[grid-area:input-1]",
+      // Spacing
+      "h-full pl-2"
+    ],
+    swatch: "flex-none",
+    content: [
+      // Layout
+      "flex h-6 min-w-0 flex-1 items-center",
+      // Spacing
+      "px-2",
+      // Interaction
+      "cursor-default"
+    ],
+    alpha: [
+      // Layout
+      "min-w-0 flex-1",
+      // Position
+      "[grid-area:input-2]"
+    ],
+    hex: "flex-1",
+    label: "flex-1 truncate select-none"
+  },
+  variants: {
+    // 输入类型
+    type: {
+      SOLID: {},
+      GRADIENT: {},
+      IMAGE: {},
+      VARIABLE: {}
+    },
+    // Alpha 输入是否禁用
+    alpha: {
+      false: {
+        root: "input-fill--hex",
+        wrapper: "rounded-md"
+      },
+      true: {
+        root: "input-fill--hex-and-alpha",
+        wrapper: "rounded-l-md"
+      }
+    },
+    // 选中状态
+    selected: {
+      true: {},
+      false: {}
+    },
+    // 激活状态
+    active: {
+      true: {},
+      false: {}
+    },
+    // 禁用状态
+    disabled: {
+      true: {
+        content: "text-disabled-foreground"
+      },
+      false: {}
+    },
+    empty: {
+      true: {
+        label: "text-secondary-foreground"
+      },
+      false: {}
+    },
+    // 变体类型
+    variantType: {
+      VARIABLE: {
+        swatch: "rounded-sm"
+      },
+      STYLE: {
+        swatch: "rounded-full"
+      }
+    }
+  },
+  compoundVariants: [
+    // 基础类型（SOLID、GRADIENT、IMAGE）的状态样式
+    {
+      type: ["SOLID", "GRADIENT", "IMAGE"],
+      selected: true,
+      class: {
+        root: [
+          // Focus
+          "focus-within:before:border-selected-boundary",
+          // Hover
+          "not-focus-within:before:border-selected-boundary/50"
+        ],
+        wrapper: "bg-body",
+        alpha: "bg-body"
+      }
+    },
+    {
+      type: ["SOLID", "GRADIENT", "IMAGE"],
+      selected: false,
+      class: {
+        root: [
+          "focus-within:before:border-selected-boundary",
+          "hover:not-focus-within:before:border-default-boundary"
+        ]
+      }
+    },
+    {
+      type: ["SOLID", "GRADIENT", "IMAGE"],
+      selected: false,
+      active: true,
+      class: {
+        wrapper: "bg-tertiary-background"
+      }
+    },
+    {
+      type: ["SOLID", "GRADIENT", "IMAGE"],
+      selected: false,
+      active: false,
+      class: {
+        wrapper: "bg-secondary-background"
+      }
+    },
+    // 变量类型的状态样式
+    {
+      type: "VARIABLE",
+      selected: false,
+      active: false,
+      class: {
+        root: [
+          // Focus
+          "before:border-default-boundary",
+          // Hover
+          "hover:not-focus-within:before:border-default-boundary"
+        ],
+        wrapper: "group-hover:bg-secondary-background"
+      }
+    },
+    {
+      type: "VARIABLE",
+      selected: false,
+      active: true,
+      class: {
+        wrapper: "bg-tertiary-background"
+      }
+    },
+    {
+      type: "VARIABLE",
+      selected: true,
+      active: false,
+      class: {
+        root: "before:border-selected-boundary/50",
+        wrapper: "bg-default-background"
+      }
+    }
+  ],
+  defaultVariants: {
+    alpha: true,
+    selected: false,
+    active: false,
+    variantType: "VARIABLE",
+    empty: false,
+    disabled: false
+  }
+});
+const alphaInputTv = tcv({
+  slots: {
+    root: "flex-none first:rounded-l-md last:rounded-r-md",
+    input: "pr-0 pl-1.5",
+    suffix: "w-fit pr-1"
+  },
+  variants: {
+    disabled: {
+      true: {
+        input: "text-disabled-foreground",
+        suffix: "text-disabled-foreground"
+      },
+      false: {}
+    },
+    active: {
+      true: {
+        root: "bg-tertiary-background"
+      },
+      false: {
+        root: "bg-secondary-background"
+      }
+    }
+  },
+  defaultVariants: {
+    active: false,
+    disabled: false
+  }
+});
+export {
+  alphaInputTv,
+  fillInputTv
+};

package/dist/components/colors/src/fill-input/variable-item.d.ts

@@ -0,0 +1,22 @@
+import { LibrariesType } from '../types/libraries';
+import { Style } from '../types/style';
+import { Variable } from '../types/variable';
+export interface VariableItemProps {
+    active?: boolean;
+    className?: string;
+    classNames?: {
+        container?: string;
+        content?: string;
+        wrapper?: string;
+    };
+    disabled?: boolean;
+    label?: string;
+    libraries?: {
+        item: Variable | Style;
+        type: LibrariesType;
+    };
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onPickerClick?: () => void;
+    selected?: boolean;
+}
+export declare const VariableItem: import('react').ForwardRefExoticComponent<VariableItemProps & import('react').RefAttributes<HTMLDivElement>>;