figma-kit 1.0.0-beta.2 → 1.0.0-beta.22

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,10 +56,20 @@ 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 const Button: default_2.ForwardRefExoticComponent<Omit<default_2.DetailedHTMLProps<default_2.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
@@ -104,16 +115,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?: ({
@@ -305,9 +356,9 @@ export declare const Flex: default_2.ForwardRefExoticComponent<Omit<default_2.De
     align?: "center" | "end" | "start" | "baseline" | "stretch" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | null | undefined;
     wrap?: "wrap" | "nowrap" | "wrapReverse" | null | undefined;
-    gap?: "px" | "0" | "1" | "2" | "3" | "6" | "2_5" | "3_5" | "4" | "5" | "7" | "8" | "9" | "10" | "0_5" | "1_5" | "11" | "12" | "13" | "14" | "15" | "16" | null | undefined;
-    columnGap?: "px" | "0" | "1" | "2" | "3" | "6" | "2_5" | "3_5" | "4" | "5" | "7" | "8" | "9" | "10" | "0_5" | "1_5" | "11" | "12" | "13" | "14" | "15" | "16" | null | undefined;
-    rowGap?: "px" | "0" | "1" | "2" | "3" | "6" | "2_5" | "3_5" | "4" | "5" | "7" | "8" | "9" | "10" | "0_5" | "1_5" | "11" | "12" | "13" | "14" | "15" | "16" | null | undefined;
+    gap?: "px" | "0" | "1" | "2" | "3" | "6" | "4" | "5" | "7" | "8" | "9" | "10" | "0.5" | "1.5" | "2.5" | "3.5" | "11" | "12" | "13" | "14" | "15" | "16" | null | undefined;
+    columnGap?: "px" | "0" | "1" | "2" | "3" | "6" | "4" | "5" | "7" | "8" | "9" | "10" | "0.5" | "1.5" | "2.5" | "3.5" | "11" | "12" | "13" | "14" | "15" | "16" | null | undefined;
+    rowGap?: "px" | "0" | "1" | "2" | "3" | "6" | "4" | "5" | "7" | "8" | "9" | "10" | "0.5" | "1.5" | "2.5" | "3.5" | "11" | "12" | "13" | "14" | "15" | "16" | null | undefined;
 } & ClassProp) | undefined) => string> & default_2.RefAttributes<HTMLDivElement>>;
 
 declare const Group: default_2.ForwardRefExoticComponent<RadixSelect.SelectGroupProps & default_2.RefAttributes<HTMLDivElement>>;
@@ -326,8 +377,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 +393,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 +405,26 @@ declare type HexProps = Omit<InputProps, 'value' | 'onChange'> & {
     ignoreAlpha?: boolean;
 };
 
+declare type HSL = {
+    h: number;
+    s: number;
+    l: number;
+};
+
+declare type HSLA = WithAlpha<HSL>;
+
+declare type HSV = {
+    h: number;
+    s: number;
+    v: number;
+};
+
+declare type HSVA = WithAlpha<HSV>;
+
+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>>;
@@ -591,13 +671,14 @@ declare type RadioItemProps = RadixMenu.DropdownMenuRadioItemProps;
 
 declare type RadioItemProps_2 = RadixMenu_2.ContextMenuRadioItemProps;
 
-declare type RGBA = {
+declare type RGB = {
     r: number;
     g: number;
     b: number;
-    a: number;
 };
 
+declare type RGBA = WithAlpha<RGB>;
+
 declare const Root: default_2.ForwardRefExoticComponent<RadixTabs.TabsProps & default_2.RefAttributes<HTMLDivElement>>;
 
 declare const Root_10: default_2.FC<RadixAlertDialog.AlertDialogProps>;
@@ -606,7 +687,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 +715,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 +970,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,
@@ -871,4 +997,8 @@ declare namespace ValueField {
 }
 export { ValueField }
 
+declare type WithAlpha<T> = T & {
+    a: number;
+};
+
 export { }