@choice-ui/react 1.7.5 → 1.7.7

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

@@ -0,0 +1,139 @@
+import { COLOR_SPACES } from '../contents';
+export interface RGB {
+    readonly b: number;
+    readonly g: number;
+    readonly r: number;
+}
+export interface RGBA {
+    readonly a: number;
+    readonly b: number;
+    readonly g: number;
+    readonly r: number;
+}
+export interface HSL {
+    readonly h: number;
+    readonly l: number;
+    readonly s: number;
+}
+export interface HSV {
+    readonly h: number;
+    readonly s: number;
+    readonly v: number;
+}
+export interface HSLA {
+    readonly a: number;
+    readonly h: number;
+    readonly l: number;
+    readonly s: number;
+}
+export interface HSB {
+    readonly b: number;
+    readonly h: number;
+    readonly s: number;
+}
+export interface HSBA {
+    readonly a: number;
+    readonly b: number;
+    readonly h: number;
+    readonly s: number;
+}
+export declare type Transform = [[number, number, number], [number, number, number]];
+export interface PaintState {
+    h: number;
+    hsl_s: number;
+    hsv_s: number;
+    l: number;
+    v: number;
+}
+export interface ColorStop {
+    readonly alpha: number;
+    readonly color: RGB;
+    readonly id: string;
+    readonly position: number;
+}
+export type ColorProfile = "srgb" | "display-p3";
+export type CheckColorContrastCategory = "auto" | "large-text" | "normal-text" | "graphics";
+export type CheckColorContrastLevel = "AA" | "AAA";
+export type PickerType = string;
+export type PickerAreaType = "saturation-lightness" | "saturation-brightness";
+export type PickerSliderType = "hue" | "saturation" | "lightness" | "alpha";
+export type PickerGradientType = "linear" | "radial" | "conic";
+export type ChannelFieldSpace = (typeof COLOR_SPACES)[keyof typeof COLOR_SPACES];
+export type ChannelFieldFeature = {
+    alpha?: boolean;
+    hex?: boolean;
+    hsb?: boolean;
+    hsl?: boolean;
+    rgb?: boolean;
+    spaceDropdown?: boolean;
+};
+export interface SolidPaintFeature extends ChannelFieldFeature {
+    checkColorContrast?: boolean;
+    containerWidth?: number;
+    nativePicker?: boolean;
+    presets?: boolean;
+}
+export interface ImagePaintFeature extends SolidPaintFeature {
+    containerWidth?: number;
+    labels?: {
+        contrast?: string;
+        crop?: string;
+        exposure?: string;
+        fill?: string;
+        fit?: string;
+        processing?: string;
+        rotate?: string;
+        saturation?: string;
+        temperature?: string;
+        tile?: string;
+        tint?: string;
+        upload?: string;
+    };
+}
+export interface PickerFeatures extends SolidPaintFeature {
+    custom?: boolean;
+    gradient?: boolean;
+    image?: boolean;
+    paintsType?: boolean;
+    pattern?: boolean;
+    pickerType?: boolean;
+    solid?: boolean;
+}
+export interface ColorContrast {
+    backgroundColor?: RGB;
+    category?: CheckColorContrastCategory;
+    contrastInfo?: number;
+    foregroundAlpha?: number;
+    foregroundColor?: RGB;
+    handleApplyRecommendedPoint?: () => void;
+    handleCategoryChange?: (category: CheckColorContrastCategory) => void;
+    handleLevelChange?: (level: CheckColorContrastLevel) => void;
+    handleShowColorContrast?: () => void;
+    level?: CheckColorContrastLevel;
+    selectedElementType?: "text" | "graphics";
+    showColorContrast?: boolean;
+    standard?: boolean;
+}
+export interface RecommendedPoint {
+    slX: number;
+    slY: number;
+    x: number;
+    y: number;
+}
+export interface BezierCurveSegment {
+    cp1: [number, number];
+    cp2: [number, number];
+    end: [number, number];
+    start: [number, number];
+}
+export interface BoundaryInfo {
+    bezierSegments: BezierCurveSegment[];
+    points: [number, number][];
+    simplifiedPoints: [number, number][];
+}
+export interface BoundaryCalculationResult {
+    lowerBoundary: BoundaryInfo | null;
+    threshold: number;
+    upperBoundary: BoundaryInfo | null;
+}
+export type PaletteType = "Slate" | "Red" | "Pink" | "Purple" | "Blue" | "Green" | "Brown" | "Orange" | "Yellow" | "Sky";

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

@@ -0,0 +1,18 @@
+import { IndexKey } from './base';
+import { RGBA } from './colors';
+import { ValueOf } from './util';
+export type EffectItemType = "BACKGROUND_BLUR" | "FOREGROUND_BLUR" | "DROP_SHADOW" | "INNER_SHADOW";
+export type EffectItem = {
+    color: RGBA;
+    index: IndexKey;
+    offset: {
+        x: number;
+        y: number;
+    };
+    radius: number;
+    spread: number;
+    type: EffectItemType;
+    visible: boolean;
+};
+export type EffectItemKey = keyof EffectItem;
+export type EffectItemValue = ValueOf<EffectItem>;

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

@@ -0,0 +1,15 @@
+import { IndexKey } from './base';
+import { ValueOf } from './util';
+import { GradientPaint, ImagePaint, Paint, SolidPaint } from './paint';
+export type FillItem = BaseFillItem & Paint;
+export type BaseFillItem = {
+    index: IndexKey;
+    isVariable?: boolean;
+};
+export type SolidFillItem = BaseFillItem & SolidPaint;
+export type TextFillItem = SolidFillItem;
+export type GradientFillItem = BaseFillItem & GradientPaint;
+export type ImageFillItem = BaseFillItem & ImagePaint;
+export type FillItemKey = keyof FillItem;
+export type FillItemValue = ValueOf<FillItem>;
+export type FillType = Paint["type"];

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

@@ -0,0 +1,38 @@
+import { IndexKey } from './base';
+import { TextFillItem } from './fill';
+export type TextContent = Array<TextContentItem>;
+export type TextContentItem = {
+    align?: LineAlignment;
+    children?: Array<TextElement>;
+    index: IndexKey;
+    lineHeight?: LineHeight;
+    paragraphSpacing?: number;
+    type?: TextType;
+};
+export type TextElement = {
+    fill?: TextFillItem;
+    fontName?: FontName;
+    fontSize?: number;
+    index: IndexKey;
+    letterSpacing?: LetterSpacing;
+    text: string;
+    textCase?: TextCase;
+    textDecoration?: string;
+};
+export type TextType = string;
+export type LineAlignment = string;
+export type TextCase = string;
+export type FontName = {
+    family: string;
+    style: string;
+};
+export type LineHeight = {
+    number: number;
+    unit: LineHeightUnitType;
+};
+export type LetterSpacing = {
+    number: number;
+    unit: LetterSpacingUnitType;
+};
+export type LineHeightUnitType = "px" | "%" | "em";
+export type LetterSpacingUnitType = "px" | "em";

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

@@ -0,0 +1,7 @@
+export * from './colors';
+export * from './paint';
+export * from './variable';
+export * from './style';
+export * from './effect';
+export * from './fill';
+export * from './libraries';

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

@@ -0,0 +1,7 @@
+export type LibrariesDisplayType = "LIST" | "LARGE_GRID" | "SMALL_GRID";
+export type LibrariesType = "VARIABLE" | "STYLE";
+export type LibrariesFeature = {
+    containerWidth?: number;
+    styles?: boolean;
+    variables?: boolean;
+};

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

@@ -0,0 +1,139 @@
+import { Vector } from './base';
+import { ColorStop, RGB, Transform } from './colors';
+export interface SolidPaint {
+    readonly color: RGB;
+    readonly opacity: number;
+    readonly type: "SOLID";
+    readonly visible?: boolean;
+}
+export interface GradientPaint {
+    readonly gradientStops: Array<ColorStop>;
+    readonly gradientTransform: Transform;
+    readonly opacity?: number;
+    readonly type: GradientPaintType;
+    readonly visible?: boolean;
+}
+export interface ImagePaint {
+    readonly filters?: ImageFilters;
+    readonly imageHash: string | null;
+    readonly imageSizes: ImageSizes;
+    readonly imageTransform?: Transform;
+    readonly opacity?: number;
+    readonly rotation?: number;
+    readonly scaleMode: ImageScaleMode;
+    readonly scalingFactor?: number;
+    readonly type: "IMAGE";
+    readonly visible?: boolean;
+}
+export interface ImageFilters {
+    readonly contrast?: number;
+    readonly exposure?: number;
+    readonly saturation?: number;
+    readonly temperature?: number;
+    readonly tint?: number;
+}
+export interface PatternPaint {
+    readonly horizontalAlignment: "START" | "CENTER" | "END";
+    readonly scalingFactor: number;
+    readonly sourceNodeId: string;
+    readonly spacing: Vector;
+    readonly tileType: "RECTANGULAR" | "HORIZONTAL_HEXAGONAL" | "VERTICAL_HEXAGONAL";
+    readonly type: "PATTERN";
+}
+export interface ImageSizes {
+    raw: string;
+    regular: string;
+    small: string;
+    sourceSize: {
+        height: number;
+        width: number;
+    };
+    thumb: string;
+}
+export type ImageScaleMode = "FILL" | "FIT" | "CROP" | "TILE";
+export type Paint = SolidPaint | GradientPaint | ImagePaint | PatternPaint;
+export type PaintType = Paint["type"];
+export type GradientPaintType = "GRADIENT_LINEAR" | "GRADIENT_RADIAL" | "GRADIENT_ANGULAR";
+export type TextPaint = SolidPaint;
+export type ColorUpdateSource = "external" | "internal";
+export interface SolidPaintLabels {
+    alpha: string;
+    blue: string;
+    brightness: string;
+    custom?: string;
+    green: string;
+    hue: string;
+    lightness: string;
+    pickerColor?: string;
+    red: string;
+    saturation: string;
+}
+export interface ColorChannelLabels {
+    alpha: string;
+    blue: string;
+    brightness: string;
+    green: string;
+    hue: string;
+    lightness: string;
+    red: string;
+    saturation: string;
+}
+export interface GradientLabels {
+    addStopLabel: string;
+    alpha: string;
+    conic: string;
+    delete: string;
+    flipGradient: string;
+    linear: string;
+    position: string;
+    radial: string;
+    rotateGradient: string;
+    stopsTitle: string;
+    title: string;
+}
+export interface GradientControlLabels {
+    addStopLabel: string;
+    alpha: string;
+    delete: string;
+    position: string;
+    title: string;
+}
+export interface GradientListLabels {
+    alpha: string;
+    delete: string;
+    position: string;
+}
+export interface GradientToolbarLabels {
+    conic: string;
+    flipGradient: string;
+    linear: string;
+    radial: string;
+    rotateGradient: string;
+}
+export interface PaintTypeLabels {
+    colorContrast?: string;
+    gradient?: string;
+    image?: string;
+    pattern?: string;
+    solid?: string;
+}
+export interface ColorPickerLabels {
+    custom?: string;
+    gradient?: string;
+    image?: string;
+    pattern?: string;
+    solid?: string;
+}
+export interface ColorContrastLabels {
+    contrastSettings?: string;
+    notMeetStandard?: string;
+    viewColorValues?: string;
+}
+export interface FillItemLabels {
+    alpha: string;
+}
+export interface GradientFillLabels extends FillItemLabels {
+    conic: string;
+    linear: string;
+    radial: string;
+}

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

@@ -0,0 +1,51 @@
+import { IndexKey } from './base';
+import { EffectItem } from './effect';
+import { FillItem } from './fill';
+import { FontName, LetterSpacing, LineHeight, TextCase } from './fonts';
+import { ValueOf } from './util';
+export type StyleId = string;
+export type BaseStyleCommon = {
+    consumers: string[];
+    createdAt: number;
+    description?: string;
+    fileId: string;
+    id: StyleId;
+    index: IndexKey;
+    name?: string;
+    updatedAt: number | null;
+};
+export type BasePendingStyleCommon = {
+    description?: string;
+    id: string;
+    isPending: true;
+    name?: string;
+};
+export type BasePaintStyle = {
+    fills: FillItem[];
+    type: "PAINT";
+};
+export type PaintStyle = BaseStyleCommon & BasePaintStyle;
+export type PendingPaintStyle = BasePaintStyle & BasePendingStyleCommon;
+export type BaseTextStyle = {
+    fontName: FontName;
+    fontSize: number;
+    letterSpacing: LetterSpacing;
+    lineHeight: LineHeight;
+    paragraphSpacing: number;
+    textCase: TextCase;
+    textDecoration: string;
+    type: "TEXT";
+};
+export type TextStyle = BaseTextStyle & BaseStyleCommon;
+export type PendingTextStyle = BaseTextStyle & BasePendingStyleCommon;
+export type BaseEffectStyle = {
+    effects: EffectItem[];
+    type: "EFFECT";
+};
+export type EffectStyle = BaseEffectStyle & BaseStyleCommon;
+export type PendingEffectStyle = BaseEffectStyle & BasePendingStyleCommon;
+export type BasePendingStyle = PendingPaintStyle | PendingTextStyle | PendingEffectStyle;
+export type StyleType = "TEXT" | "PAINT" | "EFFECT";
+export type TextStyleKey = keyof BaseTextStyle;
+export type TextStyleValue = ValueOf<BaseTextStyle>;
+export type Style = PaintStyle | TextStyle | EffectStyle;

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

@@ -0,0 +1,26 @@
+/**
+ * 用于「展平」对象类型
+ *
+ *  @example
+ *
+ *  type A = Flatten<{ a: number; b: string }>;
+ *
+ *  A 的类型是 { a: number; b: string }
+ */
+export type Flatten<T> = T extends object ? {
+    [K in keyof T]: T[K];
+} : T;
+export type FlattenWithType<T, N> = T extends object ? {
+    [K in keyof T]: T[K] | N;
+} : T;
+export type FlattenToType<T, N> = T extends object ? {
+    [K in keyof T]: N;
+} : N;
+export type FlattenWithPrefixAndType<T, U, Prefix extends string, ExcludedKey extends keyof T = never> = T extends object ? {
+    [P in keyof T as P extends ExcludedKey ? never : `${Prefix}${Capitalize<string & P>}`]: T[P] | U;
+} : T;
+export type PartialExceptId<T, K extends keyof T> = Partial<Omit<T, K>> & Pick<T, K>;
+export type ValueOf<T> = T[keyof T];
+export type Expand<T> = T extends infer O ? {
+    [K in keyof O]: O[K];
+} : never;

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

@@ -0,0 +1,27 @@
+import { RGBA } from './colors';
+export type BaseVariableValue = string | number | boolean | RGBA;
+export type VariableId = string;
+export type VariableValue = BaseVariableValue | Record<string, unknown> | Array<BaseVariableValue>;
+export type VariableType = "color" | "number" | "boolean" | "string" | "enum" | "object" | "array";
+export type VariableOption = {
+    id: string;
+    value: string;
+};
+export type VariableControlKey = "overflow" | "blendingMode" | "pointerEvents" | "userSelect" | "scrollbars" | "cursor";
+export type Variable = {
+    controlKey?: VariableControlKey;
+    createdAt: number;
+    description?: string;
+    id: VariableId;
+    isComponentVariable?: boolean;
+    masterId: string;
+    name: string;
+    options?: Array<VariableOption>;
+    referencedConditionIds?: string[];
+    referencedNodeIds?: string[];
+    referencedVariantIds?: string[];
+    type: VariableType;
+    updatedAt: number | null;
+    value: VariableValue;
+};
+export type Property = Pick<Variable, "id" | "name" | "type" | "value">;

package/dist/components/colors/src/utils/background.d.ts

@@ -0,0 +1,12 @@
+import { PickerAreaType, PickerSliderType, ColorProfile } from '../types/colors';
+/**
+ * Generate background style for different types of color area
+ */
+export declare function getColorAreaBackground(type: PickerAreaType, hue: number | undefined, colorSpace: ColorProfile): React.CSSProperties;
+export declare function getSliderBackground(type: PickerSliderType, hue: number | undefined, colorSpace: ColorProfile): {
+    background: string;
+};
+export declare function getColorSwatchBackground(size: number, scale?: number, colors?: {
+    background: string;
+    foreground: string;
+}): string;