figma-kit 1.0.0-beta.10 → 1.0.0-beta.11

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { ClassProp } from 'class-variance-authority/types';
 import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as RadixAlertDialog from '@radix-ui/react-alert-dialog';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import * as RadixDialog from '@radix-ui/react-dialog';
@@ -55,12 +56,24 @@ declare namespace AlertDialog {
 }
 export { AlertDialog }
 
+declare const Alpha: (props: AlphaProps) => JSX_2.Element;
+
+declare type AlphaProps = React.ComponentPropsWithoutRef<'div'>;
+
 declare const Anchor: default_2.ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & default_2.RefAttributes<HTMLDivElement>>;
 
 declare type AnchorProps = RadixPopover.PopoverAnchorProps;
 
+declare const Area: (props: AreaProps) => JSX_2.Element;
+
+declare type AreaProps = {
+    size?: number;
+};
+
 declare const Arrow: default_2.ForwardRefExoticComponent<RadixSelect.SelectArrowProps & default_2.RefAttributes<SVGSVGElement>>;
 
+export declare function blendWithWhite(color: RGBA): RGBA;
+
 export declare const Button: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "text" | "primary" | "secondary" | "inverse" | "destructive" | "success" | null | undefined;
     size?: "small" | "medium" | null | undefined;
@@ -104,16 +117,56 @@ declare type CloseProps_2 = Omit<RadixDialog.DialogCloseProps, 'asChild'>;
 
 declare namespace Collapsible {
     export {
-        RootProps_11 as RootProps,
+        RootProps_12 as RootProps,
         ContentProps_8 as ContentProps,
         TriggerProps_8 as TriggerProps,
-        Root_12 as Root,
+        Root_13 as Root,
         Content_8 as Content,
         Trigger_8 as Trigger
     }
 }
 export { Collapsible }
 
+declare type ColorChangeParams = {
+    mode: 'hsv';
+    value: HSVA;
+} | {
+    mode: 'hsl';
+    value: HSLA;
+} | {
+    mode: 'rgb';
+    value: RGBA;
+};
+
+declare type ColorModel = 'hex' | 'rgb' | 'hsl' | 'hsv';
+
+declare namespace ColorPicker {
+    export {
+        RootProps_11 as RootProps,
+        ColorModel,
+        ColorSpace,
+        ColorsByModel,
+        Root_12 as Root,
+        useColorPickerContext,
+        HueProps,
+        Hue,
+        AlphaProps,
+        Alpha,
+        Area,
+        Input_3 as Input
+    }
+}
+export { ColorPicker }
+
+declare type ColorsByModel = {
+    hex: HEX;
+    rgb: RGBA;
+    hsl: HSLA;
+    hsv: HSVA;
+};
+
+declare type ColorSpace = 'srgb' | 'display-p3';
+
 declare const Content: default_2.ForwardRefExoticComponent<RadixTabs.TabsContentProps & default_2.RefAttributes<HTMLDivElement>>;
 
 declare const content: (props?: ({
@@ -326,8 +379,10 @@ declare const Header: default_2.ForwardRefExoticComponent<Omit<default_2.Detaile
 
 declare type HeaderProps = default_2.ComponentPropsWithoutRef<'header'>;
 
+declare type HEX = string;
+
 declare const Hex: default_2.ForwardRefExoticComponent<Omit<InputProps, "onChange" | "value"> & {
-    /** Color in Figma's RGBA format */
+    /** Color in Figma's normalized RGBA format */
     value: RGBA;
     /** Callback to call upon submission. */
     onChange: (value: RGBA) => void;
@@ -340,7 +395,7 @@ declare const Hex: default_2.ForwardRefExoticComponent<Omit<InputProps, "onChang
 } & default_2.RefAttributes<HTMLInputElement>>;
 
 declare type HexProps = Omit<InputProps, 'value' | 'onChange'> & {
-    /** Color in Figma's RGBA format */
+    /** Color in Figma's normalized RGBA format */
     value: RGBA;
     /** Callback to call upon submission. */
     onChange: (value: RGBA) => void;
@@ -352,6 +407,24 @@ declare type HexProps = Omit<InputProps, 'value' | 'onChange'> & {
     ignoreAlpha?: boolean;
 };
 
+declare type HSLA = {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+
+declare type HSVA = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+
+declare const Hue: (props: HueProps) => JSX_2.Element;
+
+declare type HueProps = React.ComponentPropsWithoutRef<'div'>;
+
 export declare const IconButton: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     size?: "small" | "medium" | null | undefined;
     activeAppearance?: "subtle" | "solid" | null | undefined;
@@ -369,10 +442,17 @@ declare const Input_2: default_2.ForwardRefExoticComponent<Omit<default_2.Detail
     indeterminate?: boolean | undefined;
 } & default_2.RefAttributes<HTMLInputElement>>;
 
+declare const Input_3: (props: InputProps_2) => JSX_2.Element;
+
 declare type InputProps = default_2.ComponentPropsWithoutRef<'input'> & {
     selectOnClick?: boolean;
 };
 
+declare type InputProps_2 = {
+    className?: string;
+    style?: CSSProperties;
+};
+
 declare const Item: default_2.ForwardRefExoticComponent<RadixToggleGroup.ToggleGroupItemProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 declare const Item_2: default_2.ForwardRefExoticComponent<RadixRadioGroup.RadioGroupItemProps & default_2.RefAttributes<HTMLButtonElement>>;
@@ -518,6 +598,8 @@ declare type OverlayProps = Omit<RadixDialog.DialogOverlayProps, 'asChild'>;
 
 declare type OverlayProps_2 = Omit<RadixAlertDialog.AlertDialogOverlayProps, 'asChild'>;
 
+declare type P3String = `color(display-p3 ${number} ${number} ${number}${` / ${number}` | ''})`;
+
 export declare const Paragraph: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & VariantProps<(props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     weight?: "strong" | "default" | null | undefined;
@@ -598,6 +680,12 @@ declare type RGBA = {
     a: number;
 };
 
+export declare function rgbaToCssString(color: RGBA): RGBString;
+
+export declare function rgbaToP3String(color: RGBA): P3String;
+
+declare type RGBString = `rgb(${number} ${number} ${number}${` / ${number}` | ''})`;
+
 declare const Root: default_2.ForwardRefExoticComponent<RadixTabs.TabsProps & default_2.RefAttributes<HTMLDivElement>>;
 
 declare const Root_10: default_2.FC<RadixAlertDialog.AlertDialogProps>;
@@ -606,7 +694,9 @@ declare const Root_11: default_2.ForwardRefExoticComponent<Omit<default_2.Detail
     disabled?: boolean | undefined;
 } & default_2.RefAttributes<HTMLLabelElement>>;
 
-declare const Root_12: default_2.ForwardRefExoticComponent<RadixCollapsible.CollapsibleProps & default_2.RefAttributes<HTMLDivElement>>;
+declare const Root_12: (props: RootProps_11) => JSX_2.Element;
+
+declare const Root_13: default_2.ForwardRefExoticComponent<RadixCollapsible.CollapsibleProps & default_2.RefAttributes<HTMLDivElement>>;
 
 declare const Root_2: default_2.ForwardRefExoticComponent<Omit<RadixToggleGroup.ToggleGroupSingleProps, "type"> & {
     fullWidth?: boolean | undefined;
@@ -632,7 +722,39 @@ declare type RootProps_10 = default_2.ComponentPropsWithoutRef<'label'> & {
     disabled?: boolean;
 };
 
-declare type RootProps_11 = RadixCollapsible.CollapsibleProps;
+declare type RootProps_11 = {
+    /**
+     * Color space of the picker. Should match the color profile of the current Figma document.
+     * see: https://www.figma.com/plugin-docs/api/DocumentNode/#documentcolorprofile
+     * */
+    colorSpace: ColorSpace;
+    /**
+     * Default color model for the picker (uncontrolled mode). Determines the area box type and the initially displayed color input.
+     * */
+    defaultActiveModel?: ColorModel;
+    /**
+     * Color model for the picker (controlled mode). Determines the area box type and the initially displayed color input.
+     * When specified, you also need to specify 'onActiveModelChange' callback to handle changing the models.
+     * @default 'hex' or first item in 'models' if specified.
+     * */
+    activeModel?: ColorModel;
+    /** Callback to call upon model change */
+    onActiveModelChange?: (model: ColorModel) => void;
+    /**
+     * Color models the picker needs to display.
+     * @default ['hex', 'rgb', 'hsl', 'hsv']
+     * */
+    models?: ColorModel[];
+    /** Default color in Figma's normalized RGBA format  (uncontrolled mode) */
+    defaultColor?: RGBA;
+    /** Color in Figma's normalized RGBA format  (controlled mode) */
+    color?: RGBA;
+    /** Callback to call upon color change */
+    onColorChange?: (color: RGBA) => void;
+    children: React.ReactNode;
+};
+
+declare type RootProps_12 = RadixCollapsible.CollapsibleProps;
 
 declare type RootProps_2 = Omit<RadixToggleGroup.ToggleGroupSingleProps, 'type'> & {
     fullWidth?: boolean;
@@ -855,6 +977,17 @@ declare type TriggerProps_7 = Omit<RadixAlertDialog.AlertDialogTriggerProps, 'as
 
 declare type TriggerProps_8 = RadixCollapsible.CollapsibleTriggerProps;
 
+declare const useColorPickerContext: (consumerName: string) => {
+    colorSpace: ColorSpace;
+    models: ColorModel[];
+    activeModel: ColorModel;
+    onActiveModelChange: (model: ColorModel) => void;
+    color: RGBA;
+    onColorChange: (params: ColorChangeParams) => void;
+    colorsByModel: ColorsByModel;
+    hue: number;
+};
+
 declare namespace ValueField {
     export {
         Multi,