@protonradio/proton-ui 0.2.1-beta1 → 0.3.1

package/dist/proton-ui.es.d.ts

@@ -4,7 +4,10 @@ import { AriaSelectProps } from 'react-aria';
 import { AriaTableProps } from 'react-aria';
 import { ColumnProps } from '@react-stately/table';
 import { default as default_2 } from 'react';
+import { DOMProps } from '@react-types/shared';
+import { ItemProps } from 'react-stately';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX as JSX_3 } from 'react';
 import { OverlayTriggerProps } from 'react-stately';
 import { OverlayTriggerState } from 'react-stately';
 import { PressEvent } from 'react-aria';
@@ -17,9 +20,65 @@ import { TableStateProps } from 'react-stately';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
 
+export declare const Badge: ({ variant, children, ...props }: BadgeProps) => JSX_2.Element;
+
+export declare interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The badge's visual aesthetic.
+     */
+    variant?: BadgeVariant;
+    /**
+     * The content to display within the badge.
+     */
+    children: ReactNode;
+}
+
 export declare type BadgeVariant = "success" | "warning" | "danger" | "primary" | "secondary" | "dark" | "transparent";
 
-export declare type BannerVariant = "gray" | "success" | "warning" | "danger";
+export declare const BadgeVariants: {
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly DANGER: "danger";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly DARK: "dark";
+    readonly TRANSPARENT: "transparent";
+};
+
+export declare const Banner: {
+    ({ variant, icon, children, ...props }: BannerProps): JSX_2.Element;
+    Title: ({ children, ...props }: BannerProps) => JSX_2.Element;
+    Content: ({ children, ...props }: BannerProps) => JSX_2.Element;
+    Colors: Record<BannerVariant, {
+        BACKGROUND: string;
+        TITLE: string;
+        CONTENT: string;
+        ICON: string;
+    }>;
+};
+
+declare interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The banners visual aesthetic.
+     */
+    variant?: BannerVariant;
+    /**
+     * The icon to display in the banner.
+     */
+    icon?: ReactNode;
+    /**
+     * The content to display within the banner.
+     */
+    children: ReactNode;
+}
+
+declare type BannerVariant = "default" | "success" | "warning" | "danger";
+
+export declare const BRAND: {
+    PRIMARY: string;
+    PRIMARY_LIGHT: string;
+    SECONDARY: string;
+};
 
 export declare function Button({ variant, ...props }: ButtonProps): JSX_2.Element;
 
@@ -88,6 +147,14 @@ export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
 export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
+export declare const DANGER: {
+    SUPER_DARK: string;
+    DARK: string;
+    MEDIUM: string;
+    LIGHT: string;
+    SUPER_LIGHT: string;
+};
+
 /**
  * Intended use in overlay containers such as modals or popovers.
  */
@@ -102,6 +169,18 @@ export declare const generateThemeCssVariables: (baseColor: RGBArray | null) =>
 
 export declare const generateThemedRGBArray: (baseColor: RGBArray | null) => RGBArray;
 
+export declare const GRAYSCALE: {
+    GRAY_SUPER_DARK: string;
+    GRAY_DARK: string;
+    GRAY_MEDIUM: string;
+    GRAY_MEDIUM_LIGHT: string;
+    GRAY_LIGHT: string;
+    GRAY_LIGHTEST: string;
+    GRAY_SUPER_LIGHT: string;
+    WHITE: string;
+    BORDER: string;
+};
+
 export declare function Icon(props: Omit<IconProps, "svgContent">): JSX_2.Element;
 
 declare type IconID = "external-link" | "caret-down";
@@ -149,44 +228,6 @@ declare interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
     arrow?: boolean;
 }
 
-export declare const PROTON_COLORS: {
-    BRAND: {
-        PRIMARY: string;
-        PRIMARY_LIGHT: string;
-        SECONDARY: string;
-    };
-    GRAYSCALE: {
-        GRAY_SUPER_DARK: string;
-        GRAY_DARK: string;
-        GRAY_MEDIUM: string;
-        GRAY_MEDIUM_LIGHT: string;
-        GRAY_LIGHT: string;
-        GRAY_LIGHTEST: string;
-        GRAY_SUPER_LIGHT: string;
-        WHITE: string;
-        BORDER: string;
-    };
-    DANGER: {
-        SUPER_DARK: string;
-        DARK: string;
-        MEDIUM: string;
-        LIGHT: string;
-        SUPER_LIGHT: string;
-    };
-    WARNING: {
-        DARK: string;
-        MEDIUM: string;
-        LIGHT: string;
-        SUPER_LIGHT: string;
-    };
-    SUCCESS: {
-        DARK: string;
-        MEDIUM: string;
-        LIGHT: string;
-        SUPER_LIGHT: string;
-    };
-};
-
 export declare interface ProtonColumnProps<T> extends ColumnProps<T> {
     align?: "left" | "center" | "right";
 }
@@ -199,7 +240,7 @@ export { Section }
 
 export declare const Select: {
     Menu: typeof SelectMenu;
-    Option: any;
+    Option: <T>(props: ItemProps<T>) => JSX_3.Element;
 };
 
 declare function SelectMenu<T extends object>({ label, name, isDisabled, ...props }: SelectProps<T>): JSX_2.Element;
@@ -209,6 +250,13 @@ declare interface SelectProps<T> extends AriaSelectProps<T> {
     name: string;
 }
 
+export declare const SUCCESS: {
+    DARK: string;
+    MEDIUM: string;
+    LIGHT: string;
+    SUPER_LIGHT: string;
+};
+
 export declare function Switch(props: SwitchProps): JSX_2.Element;
 
 declare interface SwitchProps {
@@ -309,14 +357,21 @@ declare interface TooltipTriggerProps extends TooltipProps, TooltipTriggerCompon
  * and popover trigger. For examples see Popover.stories.tsx.
  */
 export declare function usePopoverTrigger(props?: OverlayTriggerProps): {
-    buttonProps: any;
-    overlayProps: any;
+    buttonProps: default_2.ButtonHTMLAttributes<HTMLButtonElement>;
+    overlayProps: DOMProps;
     buttonRef: default_2.MutableRefObject<HTMLButtonElement>;
-    state: any;
+    state: OverlayTriggerState;
 };
 
 export declare const useTheme: () => ThemeContextType;
 
+export declare const WARNING: {
+    DARK: string;
+    MEDIUM: string;
+    LIGHT: string;
+    SUPER_LIGHT: string;
+};
+
 export { }