@choice-ui/react 1.7.6 → 1.7.8

package/dist/components/colors/src/libraries/library-item/style-items.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { EffectInnerShadow, EffectDropShadow, EffectLayerBlur, EffectBackgroundBlur } from "@choiceform/icons-react";
+import { colorLibrariesItemTv } from "../tv.js";
+import { usePaletteColor } from "../hooks/use-palette-color.js";
+import { ColorSwatch } from "../../color-swatch/color-swatch.js";
+const StylePaintItem = ({
+  item,
+  libraryType,
+  displayType,
+  paletteSize,
+  isSelected,
+  isDuplicate
+}) => {
+  const { paletteColor, paletteStyle } = usePaletteColor({
+    item,
+    libraryType: "STYLE"
+  });
+  return /* @__PURE__ */ jsx(
+    ColorSwatch,
+    {
+      color: paletteColor.color,
+      alpha: paletteColor.alpha,
+      size: paletteSize,
+      className: colorLibrariesItemTv({
+        displayType,
+        libraryType,
+        isSelected,
+        isDuplicate
+      }).palette(),
+      style: paletteStyle,
+      type: "STYLE"
+    }
+  );
+};
+const StyleTextItem = ({ item, previewUrl }) => {
+  return /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: previewUrl && /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: "dark:invert",
+      src: previewUrl,
+      alt: "Preview",
+      width: 16,
+      height: 16
+    }
+  ) });
+};
+const EffectIcons = {
+  BACKGROUND_BLUR: () => /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: /* @__PURE__ */ jsx(EffectBackgroundBlur, {}) }),
+  FOREGROUND_BLUR: () => /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: /* @__PURE__ */ jsx(EffectLayerBlur, {}) }),
+  DROP_SHADOW: () => /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: /* @__PURE__ */ jsx(EffectDropShadow, {}) }),
+  INNER_SHADOW: () => /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: /* @__PURE__ */ jsx(EffectInnerShadow, {}) })
+};
+const StyleEffectItem = ({ item }) => {
+  var _a;
+  const effectType = (_a = item.effects[0]) == null ? void 0 : _a.type;
+  const EffectIcon = EffectIcons[effectType];
+  return EffectIcon ? /* @__PURE__ */ jsx(EffectIcon, {}) : null;
+};
+export {
+  StyleEffectItem,
+  StylePaintItem,
+  StyleTextItem
+};

package/dist/components/colors/src/libraries/library-item/variable-items.d.ts

@@ -0,0 +1,19 @@
+import { RGB, Variable, LibrariesDisplayType, LibrariesType } from '../../types';
+interface VariableItemProps {
+    displayType?: LibrariesDisplayType;
+    isDuplicate?: boolean;
+    isSelected?: boolean;
+    item: Variable;
+    libraryType?: LibrariesType;
+    onSwatchChange?: (value: {
+        alpha: number;
+        color: RGB;
+    }) => void;
+    paletteSize?: number;
+}
+export declare const VariableColorItem: ({ item, libraryType, displayType, onSwatchChange, paletteSize, isSelected, isDuplicate, }: VariableItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VariableNumberItem: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariableBooleanItem: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariableStringItem: () => import("react/jsx-runtime").JSX.Element;
+export declare const VariableEnumItem: () => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/colors/src/libraries/library-item/variable-items.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { VariablesEnum, VariablesString, VariablesBoolean, VariablesNumber } from "@choiceform/icons-react";
+import { colorLibrariesItemTv } from "../tv.js";
+import { usePaletteColor } from "../hooks/use-palette-color.js";
+import { ColorSwatch } from "../../color-swatch/color-swatch.js";
+const VariableColorItem = ({
+  item,
+  libraryType,
+  displayType,
+  onSwatchChange,
+  paletteSize,
+  isSelected,
+  isDuplicate
+}) => {
+  const { paletteColor, paletteStyle } = usePaletteColor({
+    item,
+    libraryType: "VARIABLE"
+  });
+  return /* @__PURE__ */ jsx(
+    ColorSwatch,
+    {
+      color: paletteColor.color,
+      alpha: paletteColor.alpha,
+      size: paletteSize,
+      className: colorLibrariesItemTv({
+        displayType,
+        libraryType,
+        isSelected,
+        isDuplicate
+      }).palette(),
+      style: paletteStyle,
+      type: "VARIABLE",
+      onClick: onSwatchChange ? () => onSwatchChange({ color: paletteColor.color, alpha: paletteColor.alpha }) : void 0
+    }
+  );
+};
+const VariableNumberItem = () => /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: /* @__PURE__ */ jsx(VariablesNumber, {}) });
+const VariableBooleanItem = () => /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: /* @__PURE__ */ jsx(VariablesBoolean, {}) });
+const VariableStringItem = () => /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: /* @__PURE__ */ jsx(VariablesString, {}) });
+const VariableEnumItem = () => /* @__PURE__ */ jsx("div", { className: colorLibrariesItemTv().itemIcon(), children: /* @__PURE__ */ jsx(VariablesEnum, {}) });
+export {
+  VariableBooleanItem,
+  VariableColorItem,
+  VariableEnumItem,
+  VariableNumberItem,
+  VariableStringItem
+};

package/dist/components/colors/src/libraries/tv.d.ts

@@ -0,0 +1,198 @@
+export declare const colorLibrariesItemTv: import('tailwind-variants').TVReturnType<{
+    displayType: {
+        LIST: {
+            container: string;
+        };
+        LARGE_GRID: {
+            container: string;
+        };
+        SMALL_GRID: {
+            container: string;
+            palette: string;
+        };
+    };
+    isDuplicate: {
+        true: {
+            palette: string;
+        };
+        false: {};
+    };
+    libraryType: {
+        STYLE: {};
+        VARIABLE: {};
+    };
+    isSelected: {
+        true: {};
+        false: {};
+    };
+}, {
+    container: string;
+    wrapper: string;
+    palette: string;
+    itemIcon: string;
+    variableName: string;
+    variableValue: string;
+    styleName: string;
+    styleValue: string;
+    itemSetup: string;
+}, undefined, {
+    displayType: {
+        LIST: {
+            container: string;
+        };
+        LARGE_GRID: {
+            container: string;
+        };
+        SMALL_GRID: {
+            container: string;
+            palette: string;
+        };
+    };
+    isDuplicate: {
+        true: {
+            palette: string;
+        };
+        false: {};
+    };
+    libraryType: {
+        STYLE: {};
+        VARIABLE: {};
+    };
+    isSelected: {
+        true: {};
+        false: {};
+    };
+}, {
+    container: string;
+    wrapper: string;
+    palette: string;
+    itemIcon: string;
+    variableName: string;
+    variableValue: string;
+    styleName: string;
+    styleValue: string;
+    itemSetup: string;
+}, import('tailwind-variants').TVReturnType<{
+    displayType: {
+        LIST: {
+            container: string;
+        };
+        LARGE_GRID: {
+            container: string;
+        };
+        SMALL_GRID: {
+            container: string;
+            palette: string;
+        };
+    };
+    isDuplicate: {
+        true: {
+            palette: string;
+        };
+        false: {};
+    };
+    libraryType: {
+        STYLE: {};
+        VARIABLE: {};
+    };
+    isSelected: {
+        true: {};
+        false: {};
+    };
+}, {
+    container: string;
+    wrapper: string;
+    palette: string;
+    itemIcon: string;
+    variableName: string;
+    variableValue: string;
+    styleName: string;
+    styleValue: string;
+    itemSetup: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const colorLibrariesHeaderTv: import('tailwind-variants').TVReturnType<{
+    isLibrariesPane: {
+        true: {
+            container: string;
+            selections: string;
+        };
+        false: {
+            container: string;
+            selections: string;
+        };
+    };
+}, {
+    container: string;
+    selections: string;
+}, undefined, {
+    isLibrariesPane: {
+        true: {
+            container: string;
+            selections: string;
+        };
+        false: {
+            container: string;
+            selections: string;
+        };
+    };
+}, {
+    container: string;
+    selections: string;
+}, import('tailwind-variants').TVReturnType<{
+    isLibrariesPane: {
+        true: {
+            container: string;
+            selections: string;
+        };
+        false: {
+            container: string;
+            selections: string;
+        };
+    };
+}, {
+    container: string;
+    selections: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const colorLibrariesPaneTv: import('tailwind-variants').TVReturnType<{
+    displayType: {
+        LIST: {
+            container: string;
+        };
+        LARGE_GRID: {
+            container: string;
+        };
+        SMALL_GRID: {
+            container: string;
+        };
+    };
+}, {
+    container: string;
+}, undefined, {
+    displayType: {
+        LIST: {
+            container: string;
+        };
+        LARGE_GRID: {
+            container: string;
+        };
+        SMALL_GRID: {
+            container: string;
+        };
+    };
+}, {
+    container: string;
+}, import('tailwind-variants').TVReturnType<{
+    displayType: {
+        LIST: {
+            container: string;
+        };
+        LARGE_GRID: {
+            container: string;
+        };
+        SMALL_GRID: {
+            container: string;
+        };
+    };
+}, {
+    container: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/libraries/tv.js

@@ -0,0 +1,141 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const colorLibrariesItemTv = tcv({
+  slots: {
+    container: "group flex items-center select-none",
+    wrapper: "flex w-full min-w-0 flex-1 items-center gap-x-2",
+    palette: "aspect-square",
+    itemIcon: "flex size-4 flex-none items-center justify-center",
+    variableName: "max-w-9/10 shrink-0 grow truncate",
+    variableValue: "text-secondary-foreground min-w-0 truncate pr-2",
+    styleName: "truncate",
+    styleValue: "text-secondary-foreground min-w-0 shrink-0 truncate pr-2",
+    itemSetup: "hidden group-hover:flex"
+  },
+  variants: {
+    displayType: {
+      LIST: {
+        container: "h-8 w-full min-w-0 gap-2 pr-3 pl-5"
+      },
+      LARGE_GRID: {
+        container: "p-1"
+      },
+      SMALL_GRID: {
+        container: "cursor-(--color-picker-cursor) justify-center p-1",
+        palette: "rounded-sm"
+      }
+    },
+    isDuplicate: {
+      true: {
+        palette: "ring-warning ring-2 ring-offset-2"
+      },
+      false: {}
+    },
+    libraryType: {
+      STYLE: {},
+      VARIABLE: {}
+    },
+    isSelected: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      displayType: "LIST",
+      isSelected: true,
+      class: {
+        container: "bg-selected-background"
+      }
+    },
+    {
+      displayType: "LIST",
+      isSelected: false,
+      class: {
+        container: "hover:bg-secondary-background"
+      }
+    },
+    {
+      displayType: "LARGE_GRID",
+      libraryType: "STYLE",
+      class: {
+        palette: "rounded-full"
+      }
+    },
+    {
+      displayType: "LARGE_GRID",
+      libraryType: "VARIABLE",
+      class: {
+        palette: "rounded-md"
+      }
+    },
+    {
+      displayType: "LARGE_GRID",
+      isSelected: true,
+      class: {
+        palette: "ring-selected-boundary ring-2 ring-offset-2"
+      }
+    },
+    {
+      displayType: "LARGE_GRID",
+      isSelected: false,
+      class: {
+        palette: "hover:ring-2 hover:ring-(--color)"
+      }
+    },
+    {
+      displayType: "LIST",
+      libraryType: "STYLE",
+      class: {
+        palette: "rounded-full"
+      }
+    },
+    {
+      displayType: "LIST",
+      libraryType: "VARIABLE",
+      class: {
+        palette: "rounded-sm"
+      }
+    }
+  ]
+});
+const colorLibrariesHeaderTv = tcv({
+  slots: {
+    container: "flex flex-col",
+    selections: "flex items-center gap-4"
+  },
+  variants: {
+    isLibrariesPane: {
+      true: {
+        container: "border-b",
+        selections: "justify-between py-2 pr-2 pl-4"
+      },
+      false: {
+        container: "border-t",
+        selections: "px-4 pt-3 pb-2"
+      }
+    }
+  }
+});
+const colorLibrariesPaneTv = tcv({
+  slots: {
+    container: "absolute top-0 left-0 grid w-full"
+  },
+  variants: {
+    displayType: {
+      LIST: {
+        container: "p-1"
+      },
+      LARGE_GRID: {
+        container: "p-0"
+      },
+      SMALL_GRID: {
+        container: "p-0"
+      }
+    }
+  }
+});
+export {
+  colorLibrariesHeaderTv,
+  colorLibrariesItemTv,
+  colorLibrariesPaneTv
+};

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

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

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

@@ -0,0 +1,17 @@
+import { ChannelFieldSpace, ColorChannelLabels, RGB, SolidPaintFeature } from '../types';
+type SimpleColorPickerProps = {
+    alpha?: number;
+    className?: string;
+    color?: RGB;
+    colorAreaClassName?: string;
+    colorSpace?: ChannelFieldSpace;
+    features?: SolidPaintFeature;
+    labels?: ColorChannelLabels;
+    onAlphaChange?: (alpha: number) => void;
+    onChangeEnd?: () => void;
+    onChangeStart?: () => void;
+    onColorChange?: (color: RGB) => void;
+    onColorSpaceChange?: (colorSpace: ChannelFieldSpace) => void;
+};
+export declare const SimpleColorPicker: import('react').ForwardRefExoticComponent<SimpleColorPickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,153 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { SolidPaintAlphaSlider } from "../color-solid-paint/solid-paint-alpha-slider.js";
+import { SolidPaintHueSlider } from "../color-solid-paint/solid-paint-hue-slider.js";
+import { SolidPaintChannelField } from "../color-solid-paint/solid-paint-channel-field.js";
+import { SolidPaintArea } from "../color-solid-paint/solid-paint-area.js";
+import { ColorSolidPaintTv } from "../color-solid-paint/tv.js";
+import { COLOR_SPACES } from "../contents/color-space.js";
+import { usePaintState } from "../hooks/use-paint-state.js";
+import { useRgbColorHandler } from "../hooks/use-rgb-color-handler.js";
+const SimpleColorPicker = forwardRef(
+  function ColorSolidPaint(props, ref) {
+    const {
+      className,
+      colorAreaClassName,
+      color = { r: 250, g: 250, b: 250 },
+      alpha: opacity = 1,
+      onColorChange,
+      onAlphaChange,
+      onChangeStart,
+      onChangeEnd,
+      colorSpace = COLOR_SPACES.RGB,
+      onColorSpaceChange,
+      features: featureProps = {}
+    } = props;
+    const isColorSpaceControlled = onColorSpaceChange !== void 0;
+    const { paintState, setPaintState, updateSourceRef } = usePaintState({ color });
+    const { handleRgbChange } = useRgbColorHandler({
+      paintState,
+      setPaintState,
+      updateSourceRef,
+      colorSpace,
+      onColorChange
+    });
+    const features = {
+      containerWidth: 240,
+      presets: true,
+      spaceDropdown: isColorSpaceControlled,
+      alpha: true,
+      hex: true,
+      rgb: true,
+      hsl: true,
+      hsb: true,
+      ...featureProps
+    };
+    const sliderTrackSize = useMemo(() => {
+      const getPadding = () => {
+        let padding = 0;
+        padding += 32;
+        return padding;
+      };
+      return {
+        width: 240 - getPadding(),
+        height: 16
+      };
+    }, []);
+    const styles = ColorSolidPaintTv({
+      alpha: true,
+      nativePicker: false,
+      presets: false
+    });
+    const containerWidth = (features == null ? void 0 : features.containerWidth) ?? 240;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className,
+        style: { width: containerWidth },
+        children: [
+          /* @__PURE__ */ jsx(
+            SolidPaintArea,
+            {
+              paintState,
+              setPaintState: (newState) => {
+                setPaintState(newState);
+              },
+              colorSpace,
+              rgbColor: color,
+              onColorChange,
+              containerWidth,
+              updateSourceRef,
+              onChangeStart,
+              onChangeEnd,
+              className: colorAreaClassName
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles.sliderContainer(),
+              style: { width: containerWidth },
+              children: [
+                /* @__PURE__ */ jsx(
+                  SolidPaintHueSlider,
+                  {
+                    hue: paintState.h,
+                    setHue: (newHue) => {
+                      const newPaintState = { ...paintState, h: newHue };
+                      setPaintState(newPaintState);
+                    },
+                    color,
+                    onColorChange,
+                    onChangeStart,
+                    onChangeEnd,
+                    onChange: onChangeEnd,
+                    type: "hue",
+                    trackSize: sliderTrackSize,
+                    updateSourceRef
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SolidPaintAlphaSlider,
+                  {
+                    hue: paintState.h,
+                    alpha: opacity,
+                    onAlphaChange,
+                    type: "alpha",
+                    trackSize: sliderTrackSize,
+                    onChangeStart,
+                    onChangeEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SolidPaintChannelField,
+            {
+              paintState,
+              setPaintState: (newState) => {
+                setPaintState(newState);
+              },
+              colorSpace,
+              setColorSpace: onColorSpaceChange,
+              updateSourceRef,
+              rgb: color,
+              alpha: opacity,
+              onAlphaChange,
+              onAlphaChangeEnd: onChangeEnd,
+              onAlphaChangeStart: onChangeStart,
+              onColorChange: handleRgbChange,
+              className: styles.channelField(),
+              features
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  SimpleColorPicker
+};

package/dist/components/colors/src/types/base.d.ts

@@ -0,0 +1,5 @@
+export type IndexKey = string;
+export interface Vector {
+    readonly x: number;
+    readonly y: number;
+}