@ctlyst.id/voila-ui 1.0.0

package/dist/types/@types/vanilla-sprinkles.d.ts

@@ -0,0 +1,17 @@
+import type { Properties } from 'csstype';
+
+declare module '@vanilla-extract/sprinkles' {
+  type ConditionKey = '@media' | '@supports' | '@container' | 'selector';
+
+  type CSSProperties = Properties<number | (string & object)>;
+
+  type AtomicProperties = {
+    [Property in keyof CSSProperties]?:
+      | Record<string, CSSProperties[Property] | Omit<StyleRule, ConditionKey>>
+      | ReadonlyArray<CSSProperties[Property]>;
+  };
+
+  type ShorthandProperties<T> = {
+    [shorthandName: string]: Array<T>;
+  };
+}

package/dist/types/assets/Spinner.d.ts

@@ -0,0 +1,8 @@
+import type { FC, SVGProps } from 'react';
+type BaseSpinnerProps = SVGProps<SVGSVGElement> & {
+    size?: number;
+    thickness?: number;
+};
+declare const Spinner: FC<BaseSpinnerProps>;
+export type SpinnerProps = Parameters<typeof Spinner>[0];
+export default Spinner;

package/dist/types/assets/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner';

package/dist/types/components/badge/badge.css.d.ts

@@ -0,0 +1,40 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const badgeRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    colorScheme: {
+        primary: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        disabled: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        yellow: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        red: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        blue: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        neutral: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+    size: {
+        medium: string;
+        small: string;
+    };
+    isRounded: {
+        true: {
+            borderRadius: number;
+        };
+        false: {
+            borderRadius: number;
+        };
+    };
+    variant: {
+        primary: {};
+        secondary: {};
+    };
+}>;
+export type BadgeRecipe = RecipeVariants<typeof badgeRecipe>;

package/dist/types/components/badge/badge.d.ts

@@ -0,0 +1,15 @@
+import type { ElementType, HTMLAttributes } from 'react';
+export type BadgeProperties = Omit<HTMLAttributes<HTMLSpanElement>, 'as' | 'height' | 'width' | 'size' | 'ref' | 'disabled' | 'wrap' | 'sizes'>;
+declare const Badge: import("react").ForwardRefExoticComponent<{
+    colorScheme?: "primary" | "blue" | "red" | "yellow" | "disabled" | "neutral" | undefined;
+    size?: "small" | "medium" | undefined;
+    isRounded?: boolean | undefined;
+    variant?: "primary" | "secondary" | undefined;
+} & BadgeProperties & {
+    as?: ElementType<any> | undefined;
+    'data-test-id'?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<BadgeProperties>>;
+export type BadgeProps = Parameters<typeof Badge>[0];
+export default Badge;

package/dist/types/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge';
+export * from './badge';

package/dist/types/components/button/button.css.d.ts

@@ -0,0 +1,121 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css';
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const colorScheme: {
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const ghostStyle: Record<"primary" | "neutral" | "danger" | "warning" | "info", string>;
+export type GhostStyle = keyof typeof ghostStyle;
+export declare const loadingColorSchemeVariants: {
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const base: ComplexStyleRule;
+export declare const buttonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    colorScheme: {
+        primary: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        neutral: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        danger: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        warning: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        info: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    };
+    variant: {
+        solid: {
+            borderStyle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':disabled': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        outline: {
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingBottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderStyle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':disabled': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        ghost: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: "none";
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            ':disabled': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    };
+    size: {
+        small: {
+            paddingTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingBottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            minHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        medium: {
+            minHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        large: {
+            paddingTop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingBottom: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            minHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+    unstyled: {
+        true: {
+            all: "unset";
+        };
+    };
+    isFluid: {
+        true: {
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export type ButtonRecipe = RecipeVariants<typeof buttonRecipe>;
+export default buttonRecipe;

package/dist/types/components/button/button.d.ts

@@ -0,0 +1,19 @@
+import type { ButtonHTMLAttributes, ElementType } from 'react';
+export type ButtonProperties = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as' | 'height' | 'width' | 'size' | 'ref' | 'disabled' | 'wrap' | 'sizes'>;
+declare const Button: import("react").ForwardRefExoticComponent<{
+    colorScheme?: "primary" | "neutral" | "danger" | "warning" | "info" | undefined;
+    variant?: "solid" | "outline" | "ghost" | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    unstyled?: boolean | undefined;
+    isFluid?: boolean | undefined;
+} & ButtonProperties & {
+    as?: ElementType<any> | undefined;
+    'data-test-id'?: string | undefined;
+    isDisabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    isFluid?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<ButtonProperties>>;
+export type ButtonProps = Parameters<typeof Button>[0];
+export default Button;

package/dist/types/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './button';
+export * from './button';

package/dist/types/components/close-button/close-button.css.d.ts

@@ -0,0 +1,2 @@
+export declare const closeButtonStyle: string;
+export default closeButtonStyle;

package/dist/types/components/close-button/close-button.d.ts

@@ -0,0 +1,14 @@
+import type { ElementType, HTMLAttributes } from 'react';
+export type CloseButtonProperties = Omit<HTMLAttributes<HTMLButtonElement>, 'as' | 'height' | 'width' | 'size' | 'ref' | 'disabled' | 'wrap' | 'sizes'>;
+type BaseIconButtonProps = CloseButtonProperties & {
+    as?: ElementType;
+    'data-test-id'?: string;
+    isDisabled?: boolean;
+};
+declare const CloseButton: import("react").ForwardRefExoticComponent<CloseButtonProperties & {
+    as?: ElementType<any> | undefined;
+    'data-test-id'?: string | undefined;
+    isDisabled?: boolean | undefined;
+} & import("react").RefAttributes<BaseIconButtonProps>>;
+export type CloseButtonProps = Parameters<typeof CloseButton>[0];
+export default CloseButton;

package/dist/types/components/close-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CloseButton } from './close-button';
+export * from './close-button';

package/dist/types/components/form/common/action-icon.d.ts

@@ -0,0 +1,3 @@
+import type { FC, PropsWithChildren } from 'react';
+declare const ActionIcon: FC<PropsWithChildren>;
+export default ActionIcon;

package/dist/types/components/form/common/add-on.d.ts

@@ -0,0 +1,10 @@
+import type { FC, ReactNode } from 'react';
+import type { FormState } from '../form.type';
+interface BaseAddonProps {
+    formState: FormState;
+    place: 'left' | 'right';
+    children: ReactNode;
+}
+declare const Addon: FC<BaseAddonProps>;
+export type AddonProps = Parameters<typeof Addon>[0];
+export default Addon;

package/dist/types/components/form/common/label.d.ts

@@ -0,0 +1,10 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+interface BaseLabelProps {
+    children: ReactNode;
+    isError: boolean | undefined;
+    isDisabled: boolean | undefined;
+    required: boolean | undefined;
+}
+declare const Label: FC<PropsWithChildren<BaseLabelProps>>;
+export type LabelProps = Parameters<typeof Label>[0];
+export default Label;

package/dist/types/components/form/field.d.ts

@@ -0,0 +1,15 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+type BaseFieldProps = {
+    helperTextLeft?: string | ReactNode;
+    helperTextRight?: string | ReactNode;
+    errorMessage?: string | ReactNode;
+    addonRight?: string;
+    addonLeft?: string;
+    isError?: boolean;
+    isDisabled?: boolean;
+    isValid?: boolean;
+    className?: string;
+};
+declare const Field: FC<PropsWithChildren<BaseFieldProps>>;
+export type FieldProps = Parameters<typeof Field>[0];
+export default Field;

package/dist/types/components/form/form.type.d.ts

@@ -0,0 +1 @@
+export type FormState = 'default' | 'error' | 'valid' | 'disabled';

package/dist/types/components/form/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Input } from './input';
+export * from './input';
+export { default as Textarea } from './textarea';
+export * from './textarea';

package/dist/types/components/form/input.d.ts

@@ -0,0 +1,24 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+declare const Input: import("react").ForwardRefExoticComponent<{
+    helperTextLeft?: ReactNode;
+    helperTextRight?: ReactNode;
+    errorMessage?: ReactNode;
+    addonRight?: string | undefined;
+    addonLeft?: string | undefined;
+    isError?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isValid?: boolean | undefined;
+    className?: string | undefined;
+} & {
+    children?: ReactNode;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "disabled"> & {
+    label: string;
+    isLoading?: boolean | undefined;
+    isClearable?: boolean | undefined;
+    onClear?: (() => void) | undefined;
+    icon?: ReactNode;
+    containerStyles?: string | undefined;
+    'data-test-id'?: string | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export type InputProps = Parameters<typeof Input>[0];
+export default Input;

package/dist/types/components/form/styles/addon.css.d.ts

@@ -0,0 +1,29 @@
+declare const addonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    place: {
+        left: {
+            borderRightWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderRightStyle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderRightColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        right: {
+            borderLeftWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderLeftStyle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderLeftColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+    state: {
+        default: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        error: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        valid: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        disabled: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export default addonRecipe;

package/dist/types/components/form/styles/common.css.d.ts

@@ -0,0 +1,4 @@
+export declare const formErrorColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const formPrimaryColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const formValidColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const iconStyle: string;

package/dist/types/components/form/styles/field.css.d.ts

@@ -0,0 +1,37 @@
+export declare const wrapperStyle: string;
+declare const fieldContainerRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: {
+            outlineColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':focus-within': {
+                outlineWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                outlineColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        error: {
+            outlineColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            outlineWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':focus-within': {
+                outlineWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                outlineColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        valid: {
+            outlineColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            outlineWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':focus-within': {
+                outlineWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                outlineColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        disabled: {
+            outlineColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            opacity: number;
+        };
+    };
+}>;
+export default fieldContainerRecipe;

package/dist/types/components/form/styles/index.d.ts

@@ -0,0 +1,6 @@
+export { default as addonRecipe } from './addon.css';
+export * from './common.css';
+export { default as fieldContainerRecipe } from './field.css';
+export { default as inputStyle } from './input.css';
+export * from './label.css';
+export { default as textareaStyle } from './textarea.css';

package/dist/types/components/form/styles/input.css.d.ts

@@ -0,0 +1,2 @@
+declare const inputStyle: string;
+export default inputStyle;

package/dist/types/components/form/styles/label.css.d.ts

@@ -0,0 +1,20 @@
+export declare const labelContainer: string;
+export declare const labelRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: (string | {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        })[];
+        error: (string | {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        })[];
+        valid: (string | {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        })[];
+        disabled: (string | {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        })[];
+    };
+}>;

package/dist/types/components/form/styles/textarea.css.d.ts

@@ -0,0 +1,2 @@
+declare const textareaStyle: string;
+export default textareaStyle;

package/dist/types/components/form/textarea.d.ts

@@ -0,0 +1,18 @@
+import type { TextareaHTMLAttributes } from 'react';
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").PropsWithChildren<{
+    helperTextLeft?: import("react").ReactNode;
+    helperTextRight?: import("react").ReactNode;
+    errorMessage?: import("react").ReactNode;
+    addonRight?: string | undefined;
+    addonLeft?: string | undefined;
+    isError?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isValid?: boolean | undefined;
+    className?: string | undefined;
+}>, "addonRight" | "addonLeft"> & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled"> & {
+    label: string;
+    containerStyles?: string | undefined;
+    'data-test-id'?: string | undefined;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export type TextareaProps = Parameters<typeof Textarea>[0];
+export default Textarea;

package/dist/types/components/form/utils/resolve-form-state.d.ts

@@ -0,0 +1,8 @@
+import type { FormState } from '../form.type';
+type Params = {
+    isError?: boolean;
+    isDisabled?: boolean;
+    isValid?: boolean;
+};
+declare const resolveFormState: ({ isError, isDisabled, isValid }: Params) => FormState;
+export default resolveFormState;

package/dist/types/components/icon-button/icon-button.css.d.ts

@@ -0,0 +1,101 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css';
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const loadingColorSchemeVariants: {
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    danger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const base: ComplexStyleRule;
+export declare const iconButtonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    colorScheme: {
+        primary: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            selectors: {
+                '&:hover:disabled': {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        neutral: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            selectors: {
+                '&:hover:disabled': {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        danger: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            selectors: {
+                '&:hover:disabled': {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        warning: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            selectors: {
+                '&:hover:disabled': {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        info: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            ':hover': {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            selectors: {
+                '&:hover:disabled': {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    };
+    variant: {
+        solid: {
+            padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                '&:hover:disabled': {
+                    cursor: "not-allowed";
+                    opacity: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        outline: {
+            padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            borderStyle: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                '&:disabled': {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    };
+    unstyled: {
+        true: {
+            all: "unset";
+        };
+    };
+}>;
+export type IconButtonRecipe = RecipeVariants<typeof iconButtonRecipe>;
+export default iconButtonRecipe;

package/dist/types/components/icon-button/icon-button.d.ts

@@ -0,0 +1,15 @@
+import type { ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+export type IconButtonProperties = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'as' | 'height' | 'width' | 'size' | 'ref' | 'disabled' | 'wrap' | 'sizes'>;
+declare const IconButton: import("react").ForwardRefExoticComponent<{
+    colorScheme?: "primary" | "neutral" | "danger" | "warning" | "info" | undefined;
+    variant?: "solid" | "outline" | undefined;
+    unstyled?: boolean | undefined;
+} & IconButtonProperties & {
+    as?: ElementType<any> | undefined;
+    'data-test-id'?: string | undefined;
+    isDisabled?: boolean | undefined;
+    isLoading?: boolean | undefined;
+    icon: ReactNode;
+} & import("react").RefAttributes<IconButtonProperties>>;
+export type IconButtonProps = Parameters<typeof IconButton>[0];
+export default IconButton;

package/dist/types/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IconButton } from './icon-button';
+export * from './icon-button';

package/dist/types/components/image/image.css.d.ts

@@ -0,0 +1,21 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const imageRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    fit: {
+        fill: {
+            objectFit: "fill";
+        };
+        contain: {
+            objectFit: "contain";
+        };
+        cover: {
+            objectFit: "cover";
+        };
+        'scale-down': {
+            objectFit: "scale-down";
+        };
+        none: {
+            objectFit: "none";
+        };
+    };
+}>;
+export type ImageRecipe = RecipeVariants<typeof imageRecipe>;