@choice-ui/react 1.7.6 → 1.7.7

package/dist/components/colors/src/color-picker-content/color-picker-content.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { TabItem } from '../color-picker-popover/color-picker-tabs';
+import { ColorContrast, PaintType, PaintTypeLabels, PickerFeatures } from '../types';
+type Props = {
+    additionalTabs?: TabItem[];
+    checkColorContrast?: ColorContrast;
+    features: PickerFeatures;
+    gradientPaint?: ReactNode;
+    handlePaintsTypeChange?: (type: PaintType) => void;
+    imagePaint?: ReactNode;
+    labels?: PaintTypeLabels;
+    paintsType: PaintType;
+    paintsTypeAvailable: boolean;
+    pickerType: string;
+    solidPaint: ReactNode;
+};
+export declare const ColorPickerContent: (props: Props) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/components/colors/src/color-picker-content/color-picker-content.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { match } from "ts-pattern";
+import { ColorPickerCustomContent } from "./color-picker-custom-content.js";
+import { ColorPickerContentTV } from "./tv.js";
+const ColorPickerContent = (props) => {
+  const {
+    features,
+    pickerType,
+    paintsType,
+    handlePaintsTypeChange,
+    paintsTypeAvailable,
+    checkColorContrast,
+    additionalTabs = [],
+    solidPaint,
+    gradientPaint,
+    imagePaint,
+    labels
+  } = props;
+  const styles = ColorPickerContentTV();
+  const renderNoAvailable = () => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.noAvailable(),
+        style: {
+          width: features.containerWidth
+        },
+        children: "No available picker type"
+      }
+    );
+  };
+  const currentAdditionalTab = additionalTabs.find((tab) => tab.value === pickerType);
+  return match(pickerType).with("CUSTOM", () => {
+    if (!features.custom) return renderNoAvailable();
+    return /* @__PURE__ */ jsx(
+      ColorPickerCustomContent,
+      {
+        solidPaint,
+        gradientPaint,
+        imagePaint,
+        features,
+        paintsType,
+        handlePaintsTypeChange,
+        paintsTypeAvailable,
+        checkColorContrast,
+        labels
+      }
+    );
+  }).otherwise(() => {
+    if (currentAdditionalTab) {
+      return currentAdditionalTab.content;
+    }
+    return renderNoAvailable();
+  });
+};
+export {
+  ColorPickerContent
+};

package/dist/components/colors/src/color-picker-content/color-picker-custom-content.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ColorContrast, PaintType, PaintTypeLabels, PickerFeatures } from '../types';
+type Props = {
+    checkColorContrast?: ColorContrast;
+    features: PickerFeatures;
+    gradientPaint?: ReactNode;
+    handlePaintsTypeChange?: (type: PaintType) => void;
+    imagePaint?: ReactNode;
+    labels?: PaintTypeLabels;
+    paintsType: PaintType;
+    paintsTypeAvailable: boolean;
+    patternPaint?: ReactNode;
+    solidPaint: ReactNode;
+};
+export declare const ColorPickerCustomContent: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/colors/src/color-picker-content/color-picker-custom-content.js

@@ -0,0 +1,75 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { isValidElement, cloneElement } from "react";
+import { match } from "ts-pattern";
+import { PaintTypeSelector } from "./paint-type-selector.js";
+import { ColorPickerContentTV } from "./tv.js";
+import { translation } from "../contents/translation.js";
+const injectCheckColorContrast = (element, checkColorContrast) => {
+  if (!checkColorContrast || !isValidElement(element)) {
+    return element;
+  }
+  const elementProps = element.props;
+  if (elementProps.checkColorContrast) {
+    return element;
+  }
+  return cloneElement(element, { checkColorContrast });
+};
+const ColorPickerCustomContent = (props) => {
+  const {
+    features,
+    paintsTypeAvailable,
+    paintsType,
+    handlePaintsTypeChange,
+    checkColorContrast,
+    solidPaint,
+    gradientPaint,
+    imagePaint,
+    labels = {}
+  } = props;
+  const styles = ColorPickerContentTV();
+  const renderNoAvailable = () => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.noAvailable(),
+        style: {
+          width: features.containerWidth
+        },
+        children: translation.colorPicker.NO_AVAILABLE
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PaintTypeSelector,
+      {
+        features,
+        paintsTypeAvailable,
+        className: styles.paintsType(),
+        paintsType,
+        onPaintsTypeChange: handlePaintsTypeChange,
+        showColorContrast: checkColorContrast == null ? void 0 : checkColorContrast.showColorContrast,
+        onShowColorContrast: checkColorContrast == null ? void 0 : checkColorContrast.handleShowColorContrast,
+        labels
+      }
+    ),
+    match(paintsType).with("SOLID", () => {
+      if (!features.solid) return null;
+      return injectCheckColorContrast(solidPaint, checkColorContrast);
+    }).when(
+      (t) => ["GRADIENT_ANGULAR", "GRADIENT_LINEAR", "GRADIENT_RADIAL"].includes(t),
+      () => {
+        if (!features.gradient || !gradientPaint) return renderNoAvailable();
+        return gradientPaint;
+      }
+    ).with("PATTERN", () => renderNoAvailable()).with("IMAGE", () => {
+      if (!imagePaint) return renderNoAvailable();
+      return imagePaint;
+    }).otherwise(() => {
+      return renderNoAvailable();
+    })
+  ] });
+};
+export {
+  ColorPickerCustomContent
+};

package/dist/components/colors/src/color-picker-content/index.d.ts

@@ -0,0 +1 @@
+export * from './color-picker-content';

package/dist/components/colors/src/color-picker-content/paint-type-selector.d.ts

@@ -0,0 +1,13 @@
+import { PaintType, PaintTypeLabels, PickerFeatures } from '../types';
+type Props = {
+    className: string;
+    features: PickerFeatures;
+    labels?: PaintTypeLabels;
+    onPaintsTypeChange?: (type: PaintType) => void;
+    onShowColorContrast?: () => void;
+    paintsType: PaintType;
+    paintsTypeAvailable: boolean;
+    showColorContrast?: boolean;
+};
+export declare const PaintTypeSelector: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/colors/src/color-picker-content/paint-type-selector.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ToggleButton } from "../../../toggle-button/dist/index.js";
+import { CheckColorContrast } from "@choiceform/icons-react";
+import { ColorPaintsType } from "../color-picker-popover/color-paints-type.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+import { translation } from "../contents/translation.js";
+const PaintTypeSelector = (props) => {
+  const {
+    features,
+    paintsTypeAvailable,
+    className,
+    paintsType,
+    onPaintsTypeChange,
+    showColorContrast = false,
+    onShowColorContrast,
+    labels
+  } = props;
+  if (!features.paintsType || !paintsTypeAvailable) return null;
+  return /* @__PURE__ */ jsxs("div", { className: tcx("flex flex-none items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx(
+      ColorPaintsType,
+      {
+        value: paintsType,
+        onChange: onPaintsTypeChange,
+        labels: {
+          gradient: (labels == null ? void 0 : labels.gradient) ?? translation.type.GRADIENT,
+          image: (labels == null ? void 0 : labels.image) ?? translation.type.IMAGE,
+          pattern: (labels == null ? void 0 : labels.pattern) ?? translation.type.PATTERN,
+          solid: (labels == null ? void 0 : labels.solid) ?? translation.type.SOLID
+        },
+        features
+      }
+    ),
+    paintsType === "SOLID" && features.checkColorContrast && /* @__PURE__ */ jsx(
+      ToggleButton,
+      {
+        variant: "highlight",
+        tooltip: {
+          content: (labels == null ? void 0 : labels.colorContrast) ?? translation.colorContrast.LABEL
+        },
+        value: showColorContrast,
+        onChange: onShowColorContrast,
+        children: /* @__PURE__ */ jsx(CheckColorContrast, {})
+      }
+    )
+  ] });
+};
+export {
+  PaintTypeSelector
+};

package/dist/components/colors/src/color-picker-content/tv.d.ts

@@ -0,0 +1,31 @@
+export declare const ColorPickerContentTV: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            paintsType?: import('tailwind-merge').ClassNameValue;
+            noAvailable?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            paintsType?: import('tailwind-merge').ClassNameValue;
+            noAvailable?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    noAvailable: string[];
+    paintsType: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            paintsType?: import('tailwind-merge').ClassNameValue;
+            noAvailable?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    noAvailable: string[];
+    paintsType: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    noAvailable: string[];
+    paintsType: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/color-picker-content/tv.js

@@ -0,0 +1,13 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const ColorPickerContentTV = tcv({
+  slots: {
+    noAvailable: [
+      "grid place-items-center",
+      "bg-secondary-background text-secondary aspect-square rounded-b-xl select-none"
+    ],
+    paintsType: "flex h-10 items-center gap-1 border-b px-2"
+  }
+});
+export {
+  ColorPickerContentTV
+};

package/dist/components/colors/src/color-picker-popover/color-paints-type.d.ts

@@ -0,0 +1,15 @@
+import { Paint, PaintTypeLabels } from '../types';
+interface ColorPaintsTypeProps {
+    className?: string;
+    features: {
+        gradient?: boolean;
+        image?: boolean;
+        pattern?: boolean;
+        solid?: boolean;
+    };
+    labels?: Omit<PaintTypeLabels, "colorContrast">;
+    onChange?: (value: Paint["type"]) => void;
+    value?: Paint["type"];
+}
+export declare const ColorPaintsType: import('react').MemoExoticComponent<(props: ColorPaintsTypeProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/colors/src/color-picker-popover/color-paints-type.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { ColorTypeSolid, ColorTypeGradient, ColorTypePattern, ColorTypeImage } from "@choiceform/icons-react";
+import { memo, useMemo } from "react";
+import { translation } from "../contents/translation.js";
+const ColorPaintsType = memo((props) => {
+  const { value, onChange, features, labels } = props;
+  const normalizedValue = useMemo(() => {
+    return (value == null ? void 0 : value.startsWith("GRADIENT")) ? "GRADIENT_LINEAR" : value;
+  }, [value]);
+  const paintTypeConfig = useMemo(() => {
+    return [
+      {
+        value: "SOLID",
+        icon: /* @__PURE__ */ jsx(ColorTypeSolid, {}),
+        label: (labels == null ? void 0 : labels.solid) ?? translation.type.SOLID,
+        featureKey: "solid"
+      },
+      {
+        value: "GRADIENT_LINEAR",
+        icon: /* @__PURE__ */ jsx(ColorTypeGradient, {}),
+        label: (labels == null ? void 0 : labels.gradient) ?? translation.type.GRADIENT,
+        featureKey: "gradient"
+      },
+      {
+        value: "PATTERN",
+        icon: /* @__PURE__ */ jsx(ColorTypePattern, {}),
+        label: (labels == null ? void 0 : labels.pattern) ?? translation.type.PATTERN,
+        featureKey: "pattern"
+      },
+      {
+        value: "IMAGE",
+        icon: /* @__PURE__ */ jsx(ColorTypeImage, {}),
+        label: (labels == null ? void 0 : labels.image) ?? translation.type.IMAGE,
+        featureKey: "image"
+      }
+    ];
+  }, [labels == null ? void 0 : labels.gradient, labels == null ? void 0 : labels.image, labels == null ? void 0 : labels.pattern, labels == null ? void 0 : labels.solid]);
+  const availableTypes = useMemo(() => {
+    return paintTypeConfig.filter((type) => features[type.featureKey]);
+  }, [features, paintTypeConfig]);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-1", children: availableTypes.map((type) => /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      tooltip: { content: type.label },
+      active: normalizedValue === type.value,
+      onClick: () => onChange == null ? void 0 : onChange(type.value),
+      children: type.icon
+    },
+    type.value
+  )) });
+});
+ColorPaintsType.displayName = "ColorPaintsType";
+export {
+  ColorPaintsType
+};

package/dist/components/colors/src/color-picker-popover/color-picker-popover.d.ts

@@ -0,0 +1,26 @@
+import { PopoverProps } from '../../../popover/src';
+import { Placement } from '@floating-ui/react';
+import { default as React, ReactNode } from 'react';
+import { ColorContrast, ColorPickerLabels, Paint, PickerFeatures } from '../types';
+import { TabItem } from './color-picker-tabs';
+export interface ColorPickerPopoverProps extends Omit<PopoverProps, "content"> {
+    additionalTabs?: TabItem[];
+    autoUpdate?: boolean;
+    checkColorContrast?: ColorContrast;
+    className?: string;
+    features?: PickerFeatures;
+    gradientPaint?: ReactNode;
+    imagePaint?: ReactNode;
+    labels?: ColorPickerLabels;
+    onOpenChange?: (open: boolean) => void;
+    onPaintsTypeChange?: (type: Paint["type"]) => void;
+    onPickerTypeChange?: (type: string) => void;
+    open: boolean;
+    paintsType?: Paint["type"];
+    pickerType?: string;
+    placement?: Placement;
+    solidPaint: ReactNode;
+    title?: string;
+    triggerRef?: React.RefObject<HTMLDivElement | HTMLFieldSetElement>;
+}
+export declare const ColorPickerPopover: (props: ColorPickerPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/colors/src/color-picker-popover/color-picker-popover.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Popover } from "../../../popover/dist/index.js";
+import { useEventCallback } from "usehooks-ts";
+import { ColorPickerTitle } from "./color-picker-title.js";
+import { useColorPickerFeatures } from "../hooks/use-features.js";
+import { ColorPickerContent } from "../color-picker-content/color-picker-content.js";
+const ColorPickerPopover = function ColorPickerPopover2(props) {
+  const {
+    // Base props
+    className,
+    title,
+    // Popover control
+    triggerRef,
+    open,
+    onOpenChange,
+    placement = "bottom-start",
+    autoUpdate = false,
+    // Picker type control
+    pickerType = "CUSTOM",
+    onPickerTypeChange,
+    // Paint type control
+    paintsType = "SOLID",
+    onPaintsTypeChange,
+    // Check color contrast control
+    checkColorContrast,
+    // 动态标签页
+    additionalTabs = [],
+    // Features configuration
+    features: userFeatures = {},
+    labels,
+    solidPaint,
+    gradientPaint,
+    imagePaint,
+    children,
+    ...rest
+  } = props;
+  const features = {
+    containerWidth: 240,
+    spaceDropdown: true,
+    alpha: true,
+    hex: true,
+    rgb: true,
+    hsl: true,
+    hsb: true,
+    nativePicker: true,
+    presets: true,
+    pickerType: true,
+    custom: true,
+    paintsType: true,
+    solid: true,
+    gradient: true,
+    pattern: false,
+    image: true,
+    checkColorContrast: false,
+    ...userFeatures
+  };
+  const handlePickerTypeChange = useEventCallback((type) => {
+    onPickerTypeChange == null ? void 0 : onPickerTypeChange(type);
+  });
+  const handlePaintsTypeChange = useEventCallback((type) => {
+    onPaintsTypeChange == null ? void 0 : onPaintsTypeChange(type);
+  });
+  const { paintsTypeAvailable, pickerTypeAvailable } = useColorPickerFeatures({
+    features,
+    paintsType,
+    onChangePaintsType: handlePaintsTypeChange,
+    pickerType,
+    onChangePickerType: handlePickerTypeChange
+  });
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      ...rest,
+      draggable: true,
+      triggerRef,
+      open,
+      onOpenChange,
+      placement,
+      autoUpdate,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Popover.Header, { children: /* @__PURE__ */ jsx(
+          ColorPickerTitle,
+          {
+            title,
+            features,
+            pickerTypeAvailable,
+            pickerType,
+            onChangePickerType: handlePickerTypeChange,
+            labels,
+            additionalTabs
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(
+          ColorPickerContent,
+          {
+            features,
+            pickerType,
+            paintsType,
+            paintsTypeAvailable,
+            handlePaintsTypeChange,
+            checkColorContrast,
+            additionalTabs,
+            solidPaint,
+            gradientPaint,
+            imagePaint,
+            labels
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  ColorPickerPopover
+};

package/dist/components/colors/src/color-picker-popover/color-picker-tabs.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface TabItem {
+    content: ReactNode;
+    label: string;
+    value: string;
+}
+interface ColorPickerTabsProps {
+    additionalTabs?: TabItem[];
+    customTabLabel?: string;
+    onPickerTypeChange?: (value: string) => void;
+    pickerType: string;
+}
+export declare const ColorPickerTabs: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<ColorPickerTabsProps & import('react').RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/components/colors/src/color-picker-popover/color-picker-tabs.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { Tabs as Tabs2 } from "../../../tabs/dist/index.js";
+import { memo, forwardRef, useMemo } from "react";
+import { translation } from "../contents/translation.js";
+const ColorPickerTabs = memo(
+  forwardRef(function ColorPickerTabs2(props, ref) {
+    const { pickerType, onPickerTypeChange, customTabLabel, additionalTabs = [] } = props;
+    const availableTabs = useMemo(() => {
+      const tabs = [
+        {
+          value: "CUSTOM",
+          label: customTabLabel ?? translation.colorPicker.CUSTOM
+        }
+      ];
+      if (additionalTabs.length > 0) {
+        additionalTabs.forEach((tab) => {
+          tabs.push({
+            value: tab.value,
+            label: tab.label
+          });
+        });
+      }
+      return tabs;
+    }, [customTabLabel, additionalTabs]);
+    return /* @__PURE__ */ jsx(
+      Tabs2,
+      {
+        ref,
+        value: pickerType,
+        onChange: (value) => onPickerTypeChange == null ? void 0 : onPickerTypeChange(value),
+        className: "ml-2",
+        children: availableTabs.map((tab) => /* @__PURE__ */ jsx(
+          Tabs2.Item,
+          {
+            value: tab.value,
+            children: tab.label
+          },
+          tab.value
+        ))
+      }
+    );
+  })
+);
+ColorPickerTabs.displayName = "ColorPickerTabs";
+export {
+  ColorPickerTabs
+};

package/dist/components/colors/src/color-picker-popover/color-picker-title.d.ts

@@ -0,0 +1,14 @@
+import { PickerFeatures } from '../types/colors';
+import { ColorPickerLabels } from '../types/paint';
+import { TabItem } from './color-picker-tabs';
+type Props = {
+    additionalTabs?: TabItem[];
+    features: PickerFeatures;
+    labels?: Pick<ColorPickerLabels, "custom">;
+    onChangePickerType?: (pickerType: string) => void;
+    pickerType: string;
+    pickerTypeAvailable: boolean;
+    title?: string;
+};
+export declare const ColorPickerTitle: (props: Props) => string | import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/colors/src/color-picker-popover/color-picker-title.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { ColorPickerTabs } from "./color-picker-tabs.js";
+import { translation } from "../contents/translation.js";
+const ColorPickerTitle = (props) => {
+  const {
+    title,
+    features,
+    labels,
+    pickerTypeAvailable,
+    pickerType,
+    onChangePickerType,
+    additionalTabs = []
+  } = props;
+  if (title) return title;
+  if (features.pickerType && pickerTypeAvailable) {
+    return /* @__PURE__ */ jsx(
+      ColorPickerTabs,
+      {
+        pickerType,
+        onPickerTypeChange: onChangePickerType,
+        customTabLabel: labels == null ? void 0 : labels.custom,
+        additionalTabs
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "text-body-medium font-strong ml-2 flex items-center gap-2 p-2", children: (labels == null ? void 0 : labels.custom) ?? translation.colorPicker.TITLE });
+};
+export {
+  ColorPickerTitle
+};

package/dist/components/colors/src/color-picker-popover/index.d.ts

@@ -0,0 +1,3 @@
+export * from './color-picker-popover';
+export * from './color-picker-tabs';
+export * from './color-paints-type';

package/dist/components/colors/src/color-picker-popover/tv.d.ts

@@ -0,0 +1,37 @@
+export declare const ColorPickerPopoverTV: import('tailwind-variants').TVReturnType<{
+    presets: {
+        true: {
+            popoverContainer: string;
+        };
+        false: {
+            popoverContainer: string;
+        };
+    };
+}, {
+    popoverContainer: string;
+    paintsType: string;
+}, undefined, {
+    presets: {
+        true: {
+            popoverContainer: string;
+        };
+        false: {
+            popoverContainer: string;
+        };
+    };
+}, {
+    popoverContainer: string;
+    paintsType: string;
+}, import('tailwind-variants').TVReturnType<{
+    presets: {
+        true: {
+            popoverContainer: string;
+        };
+        false: {
+            popoverContainer: string;
+        };
+    };
+}, {
+    popoverContainer: string;
+    paintsType: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/color-slider/color-slider.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { PickerSliderType } from '../types/colors';
+export interface ColorSliderProps {
+    backgroundStyle?: CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    hue?: number;
+    onChange?: (position: number) => void;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    position: number;
+    thumbSize?: number;
+    trackSize?: {
+        height?: number;
+        width?: number;
+    };
+    type: PickerSliderType;
+}
+export declare const ColorSlider: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<ColorSliderProps & import('react').RefAttributes<HTMLDivElement>>>;