@choice-ui/react 1.7.6 → 1.7.8

package/dist/components/colors/src/libraries/components/virtualized-grid-row.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { LibraryItem } from "../library-item/library-item.js";
+import { colorLibrariesPaneTv } from "../tv.js";
+import { tcx } from "../../../../../shared/utils/tcx/tcx.js";
+const VirtualizedGridRow = memo(function VirtualizedGridRow2({
+  row,
+  size,
+  start,
+  duplicateIndex,
+  onSwatchChange,
+  onLibraryChange,
+  displayType,
+  columns = 6,
+  padding = "px-3",
+  offset = 0,
+  selectedItem
+}) {
+  const styles = colorLibrariesPaneTv({
+    displayType
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: `${size}px`,
+        transform: `translateY(${start + offset}px)`,
+        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+      },
+      className: tcx(styles.container(), padding),
+      children: row.map((item) => {
+        if (item.type !== "item") return null;
+        return /* @__PURE__ */ jsx(
+          LibraryItem,
+          {
+            item: item.item,
+            libraryType: item.itemType,
+            isSelected: (selectedItem == null ? void 0 : selectedItem.type) === item.itemType && (selectedItem == null ? void 0 : selectedItem.item.id) === item.item.id,
+            isDuplicate: duplicateIndex === item.index,
+            onSwatchChange,
+            onLibraryChange,
+            displayType
+          },
+          item.item.id || `color-${item.itemType}-${item.index}`
+        );
+      })
+    }
+  );
+});
+VirtualizedGridRow.displayName = "VirtualizedGridRow";
+export {
+  VirtualizedGridRow
+};

package/dist/components/colors/src/libraries/components/virtualized-header.d.ts

@@ -0,0 +1,9 @@
+interface VirtualizedHeaderProps {
+    headerType: "category" | "subcategory";
+    isFirst?: boolean;
+    size: number;
+    start: number;
+    title: string;
+}
+export declare const VirtualizedHeader: import('react').NamedExoticComponent<VirtualizedHeaderProps>;
+export {};

package/dist/components/colors/src/libraries/components/virtualized-header.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { tcx } from "../../../../../shared/utils/tcx/tcx.js";
+const VirtualizedHeader = memo(function VirtualizedHeader2({
+  title,
+  size,
+  start,
+  headerType,
+  isFirst
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        height: `${size}px`,
+        transform: `translateY(${start + 16}px)`
+      },
+      className: tcx(
+        "absolute top-0 left-0 flex w-full items-center px-4 select-none",
+        headerType === "category" && "font-bold",
+        headerType === "category" && !isFirst && "mt-2 border-t"
+      ),
+      children: title
+    }
+  );
+});
+VirtualizedHeader.displayName = "VirtualizedHeader";
+export {
+  VirtualizedHeader
+};

package/dist/components/colors/src/libraries/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-palette-color';
+export * from './use-category-options';

package/dist/components/colors/src/libraries/hooks/use-category-options.d.ts

@@ -0,0 +1,11 @@
+import { Style, Variable } from '../../types';
+export type CategoryOption = {
+    label: string;
+    value: string;
+};
+interface UseLibraryCategoriesProps {
+    styles?: Style[];
+    variables?: Variable[];
+}
+export declare function useLibraryCategories({ variables, styles }: UseLibraryCategoriesProps): CategoryOption[];
+export {};

package/dist/components/colors/src/libraries/hooks/use-category-options.js

@@ -0,0 +1,27 @@
+import { useMemo } from "react";
+import { translation } from "../../contents/translation.js";
+function useLibraryCategories({ variables = [], styles = [] }) {
+  return useMemo(() => {
+    const categories = /* @__PURE__ */ new Set();
+    variables.forEach((v) => {
+      if (v.masterId) {
+        categories.add(v.masterId.split("/")[0]);
+      }
+    });
+    styles.forEach((s) => {
+      if (s.fileId) {
+        categories.add(s.fileId.split("/")[0]);
+      }
+    });
+    return [
+      { label: translation.libraries.ALL, value: "all" },
+      ...Array.from(categories).map((category) => ({
+        label: category,
+        value: category
+      }))
+    ];
+  }, [variables, styles]);
+}
+export {
+  useLibraryCategories
+};

package/dist/components/colors/src/libraries/hooks/use-palette-color.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { RGB, Style, Variable, LibrariesType } from '../../types';
+interface PaletteColor {
+    alpha: number;
+    color: RGB;
+}
+interface PaletteStyle extends CSSProperties {
+    "--color": string;
+}
+interface UsePaletteColorOptions {
+    item: Variable | Style;
+    libraryType: LibrariesType;
+}
+interface UsePaletteColorResult {
+    paletteColor: PaletteColor;
+    paletteStyle: PaletteStyle;
+}
+export declare function usePaletteColor({ item, libraryType, }: UsePaletteColorOptions): UsePaletteColorResult;
+export {};

package/dist/components/colors/src/libraries/hooks/use-palette-color.js

@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import tinycolor from "tinycolor2";
+import { getColorArr } from "../../utils/color.js";
+function usePaletteColor({
+  item,
+  libraryType
+}) {
+  const paletteColor = useMemo(() => {
+    try {
+      let color = { r: 0, g: 0, b: 0 };
+      if (libraryType === "VARIABLE") {
+        color = item.value;
+      } else {
+        const firstFill = item.fills[0];
+        if (firstFill.type === "SOLID") {
+          color = firstFill.color;
+        }
+      }
+      return getColorArr(color) || { color: { r: 0, g: 0, b: 0 }, alpha: 1 };
+    } catch {
+      return { color: { r: 0, g: 0, b: 0 }, alpha: 1 };
+    }
+  }, [libraryType, item]);
+  const paletteStyle = useMemo(() => {
+    return {
+      "--color": tinycolor({
+        r: paletteColor.color.r,
+        g: paletteColor.color.g,
+        b: paletteColor.color.b,
+        a: 0.5
+      }).toRgbString()
+    };
+  }, [paletteColor]);
+  return {
+    paletteColor,
+    paletteStyle
+  };
+}
+export {
+  usePaletteColor
+};

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

@@ -0,0 +1,8 @@
+export * from './library-item';
+export * from './libraries';
+export * from './libraries-header';
+export * from './library-color-swatch';
+export * from './libraries-search-input';
+export * from './libraries-content';
+export * from './libraries-empty-content';
+export * from './libraries-search-empty-content';

package/dist/components/colors/src/libraries/libraries-content.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactNode } from 'react';
+type Props = {
+    className?: string;
+    items: unknown[];
+    libraryItem: (item: unknown, style: CSSProperties) => ReactNode;
+};
+export declare const IfLibrariesContent: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/colors/src/libraries/libraries-empty-content.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    label: string;
+};
+export declare const LibrariesEmptyContent: ({ label }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/colors/src/libraries/libraries-header.d.ts

@@ -0,0 +1,18 @@
+import { LibrariesDisplayType } from '../types';
+interface LibrariesHeaderProps {
+    actionElement?: React.ReactNode;
+    allowDisplayTypeSwitch?: boolean;
+    categoryOptions: {
+        label?: string;
+        value?: string;
+    }[];
+    displayType?: LibrariesDisplayType;
+    inputRef: React.RefObject<HTMLInputElement>;
+    onChange?: (category: string) => void;
+    onDisplayTypeChange?: (type: LibrariesDisplayType) => void;
+    onSearchChange?: (value: string) => void;
+    searchValue?: string;
+    value: string;
+}
+export declare const LibrariesHeader: import('react').ForwardRefExoticComponent<LibrariesHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/colors/src/libraries/libraries-header.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { Input } from "../../../input/dist/index.js";
+import { Select as Select2 } from "../../../select/dist/index.js";
+import { Search, Grid, FontBulletedSmall } from "@choiceform/icons-react";
+import { forwardRef, Fragment } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { colorLibrariesHeaderTv } from "./tv.js";
+import { translation } from "../contents/translation.js";
+const LibrariesHeader = forwardRef(
+  function LibrariesHeader2(props, ref) {
+    var _a;
+    const {
+      searchValue,
+      onSearchChange,
+      displayType,
+      onDisplayTypeChange,
+      inputRef,
+      categoryOptions,
+      value,
+      onChange,
+      allowDisplayTypeSwitch,
+      actionElement
+    } = props;
+    const showDisplay = allowDisplayTypeSwitch && (displayType === "LIST" || displayType === "LARGE_GRID");
+    const styles = colorLibrariesHeaderTv({
+      isLibrariesPane: displayType === "LIST" || displayType === "LARGE_GRID"
+    });
+    const handleCategoryChange = useEventCallback((value2) => {
+      onChange == null ? void 0 : onChange(value2);
+    });
+    const handleDisplayTypeChange = useEventCallback(() => {
+      if (displayType === "SMALL_GRID") return;
+      const newDisplayType = displayType === "LIST" ? "LARGE_GRID" : "LIST";
+      onDisplayTypeChange == null ? void 0 : onDisplayTypeChange(newDisplayType);
+    });
+    const handleSearchChange = useEventCallback((value2) => {
+      onSearchChange == null ? void 0 : onSearchChange(value2);
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: styles.container(),
+        children: [
+          displayType !== "SMALL_GRID" && /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-4 py-2", children: [
+            /* @__PURE__ */ jsx(Search, {}),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                autoFocus: true,
+                ref: inputRef,
+                value: searchValue,
+                onChange: handleSearchChange,
+                placeholder: translation.common.SEARCH,
+                variant: "reset",
+                className: "flex-1"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.selections(), children: [
+            /* @__PURE__ */ jsxs(
+              Select2,
+              {
+                matchTriggerWidth: displayType === "SMALL_GRID",
+                value,
+                onChange: handleCategoryChange,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Select2.Trigger,
+                    {
+                      "aria-label": translation.libraries.LABEL,
+                      className: displayType === "SMALL_GRID" ? "flex-1" : void 0,
+                      children: /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: (_a = categoryOptions.find((option) => option.value === value)) == null ? void 0 : _a.label })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Select2.Content, { children: categoryOptions.map((option) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      Select2.Item,
+                      {
+                        value: option.value,
+                        children: option.label
+                      },
+                      option.value
+                    ),
+                    option.value === "all" && /* @__PURE__ */ jsx(Select2.Divider, {})
+                  ] }, option.value)) })
+                ]
+              }
+            ),
+            showDisplay && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                tooltip: {
+                  content: displayType === "LIST" ? translation.libraries.SWITCH_TO_GRID : translation.libraries.SWITCH_TO_LIST
+                },
+                onClick: handleDisplayTypeChange,
+                children: displayType === "LIST" ? /* @__PURE__ */ jsx(Grid, {}) : /* @__PURE__ */ jsx(FontBulletedSmall, {})
+              }
+            ),
+            actionElement
+          ] })
+        ]
+      }
+    );
+  }
+);
+LibrariesHeader.displayName = "LibrariesHeader";
+export {
+  LibrariesHeader
+};

package/dist/components/colors/src/libraries/libraries-search-empty-content.d.ts

@@ -0,0 +1 @@
+export declare const LibrariesSearchEmptyContent: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/colors/src/libraries/libraries-search-input.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onSearchValueChange: (value: string) => void;
+    searchValue: string;
+};
+export declare const IfLibrariesSearchInput: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+import { LibrariesFeature, RGB, Style, Variable, LibrariesDisplayType, LibrariesType } from '../types';
+interface LibrariesDataProps {
+    features?: LibrariesFeature;
+    styles?: Style[];
+    variables?: Variable[];
+}
+interface CategoryProps {
+    category?: string;
+    onCategoryChange?: (category: string) => void;
+}
+interface DisplayProps {
+    displayType?: LibrariesDisplayType;
+    onDisplayTypeChange?: (displayType: LibrariesDisplayType) => void;
+}
+interface SelectionProps {
+    /** 重复项的索引，用于标记重复的颜色 */
+    duplicateIndex?: number | null;
+    /** 当选择库中的项目时的回调 */
+    onLibraryChange?: (value: {
+        item: Variable | Style;
+        type: LibrariesType;
+    }) => void;
+    /** 当色板颜色改变时的回调 */
+    onSwatchChange?: (value: {
+        alpha: number;
+        color: RGB;
+    }) => void;
+    /** 外部选中的项目，用于定位和高亮显示 */
+    selectedItem?: {
+        item: Variable | Style;
+        type: LibrariesType;
+    } | null;
+}
+interface BaseProps {
+    className?: string;
+    /** 头部右侧的元素 */
+    headerActionElement?: React.ReactNode;
+}
+export interface LibrariesProps extends LibrariesDataProps, CategoryProps, DisplayProps, SelectionProps, BaseProps {
+}
+export declare const Libraries: import('react').ForwardRefExoticComponent<LibrariesProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};