@usefui/components 1.5.1 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @usefui/components
 
+## 1.5.3
+
+### Patch Changes
+
+- Update components and design tokens
+
+## 1.5.2
+
+### Patch Changes
+
+- New components, new CSS generator options
+
 ## 1.5.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -9,6 +9,7 @@ type TComponentHeight = "fullscreen" | "display" | "auto";
 type TComponentAPI = boolean | string | number | null | unknown;
 type TComponentSize = "small" | "medium" | "large";
 type TComponentSide = "top" | "right" | "bottom" | "left";
+type TComponentShape = "square" | "smooth" | "round";
 type TComponentVariant = "primary" | "secondary" | "tertiary" | "mono" | "border" | "ghost";
 type TKeyBinding = "ctrlKey" | "metaKey" | "altKey" | "shiftKey";
 interface IComponentAPI {
@@ -34,8 +35,11 @@ interface IComponentSpacing {
     spacing?: TComponentSize;
 }
 
-interface IButtonProperties extends IComponentStyling, IComponentSize, IComponentVariant, React$1.ComponentPropsWithRef<"button"> {
+interface IButtonProperties extends IComponentStyling, IComponentSize, React$1.ComponentPropsWithRef<"button"> {
     rawicon?: boolean;
+    variant?: TComponentVariant | "danger" | "warning";
+    shape?: TComponentShape;
+    animation?: "reflective";
 }
 /**
  * Buttons are used to initialize an action.
@@ -48,8 +52,10 @@ interface IButtonProperties extends IComponentStyling, IComponentSize, IComponen
  * @param {IButtonProperties} props - The props for the Button component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
  * @param {boolean} props.rawicon - Define whether the component is styles its svg children.
- * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "medium".
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
  * @param {string} props.variant - The style definition used by the component.
+ * @param {string} props.animation - The animation that comes with the variant.
  * @param {ReactNode} props.children - The content to be rendered inside the button.
  * @returns {ReactElement} The Button component.
  */
@@ -162,7 +168,7 @@ interface IAvatarProperties extends IComponentStyling, IComponentSize, React$1.H
  *
  * @param {IAvatarProperties} props - The props for the Avatar component.
  * @param {boolean} props.raw - Whether the avatar is styled or not.
- * @param {ComponentSizeEnum} props.sizing - The size of the avatar. Defaults to ComponentSizeEnum.Medium.
+ * @param {ComponentSizeEnum} props.sizing - The size of the avatar. Defaults to "medium".
  * @param {string} props.status - The status of the user represented by the avatar.
  * @param {string} props.src - The source URL of the image to be displayed in the avatar.
  * @param {string} props.alt - The alternative text for the image in the avatar.
@@ -176,7 +182,7 @@ declare const Avatar: {
 
 interface IBadgeProperties extends IComponentStyling, React$1.ComponentProps<"div"> {
     variant?: "primary" | "secondary" | "border" | "error" | "warning" | "success" | "meta";
-    shape?: "square" | "smooth" | "round";
+    shape?: TComponentShape;
 }
 /**
  * Badges are used to convey data or states to the users.
@@ -188,7 +194,7 @@ interface IBadgeProperties extends IComponentStyling, React$1.ComponentProps<"di
  *
  * @param {IBadgeProperties} props - The props for the Badge component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
- * @param {ComponentSizeEnum} props.shape - The shape of the component. Defaults to `smooth`.
+ * @param {TComponentShape} props.shape - The shape of the component. Defaults to `smooth`.
  * @param {string} props.variant - The style definition used by the component.
  * @param {ReactNode} props.children - The content to be rendered inside the Badge.
  * @returns {ReactElement} The Badge component.
@@ -198,6 +204,100 @@ declare const Badge: {
     displayName: string;
 };
 
+interface BreadcrumbProps extends React$1.ComponentProps<"div"> {
+    navigate?: (href: string) => void;
+    capitalizeItems?: boolean;
+    path: string;
+}
+interface BreadcrumbItemProps extends IButtonProperties {
+    isLastItem?: boolean;
+}
+interface BreadcrumbComposition {
+    Item: typeof BreadcrumbItem;
+    Separator: typeof BreadcrumbSeparator;
+}
+/**
+ * Breadcrumb Item are used to display the path to the current resource.
+ *
+ * @param {BreadcrumbItemProps} props - The props for the Breadcrumb Item component.
+ * @param {boolean} props.isLastItem - Render the item as latest on the links hierarchy.
+ * @returns {ReactElement} The Breadcrumb Item component.
+ */
+declare const BreadcrumbItem: {
+    (props: BreadcrumbItemProps): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Breadcrumb Separators are used to display hierarchy of links.
+ *
+ * @param {React.ComponentProps<"span">} props - The props for the Breadcrumb Separators component.
+ * @returns {ReactElement} The Breadcrumb Separators component.
+ */
+declare const BreadcrumbSeparator: {
+    (props: React$1.ComponentProps<"span">): React$1.JSX.Element;
+    displayName: string;
+};
+/**
+ * Breadcrumbs are used to display the path to the current resource using a hierarchy of links.
+ *
+ * @param {BreadcrumbProps} props - The props for the Breadcrumb component.
+ * @param {boolean} props.capitalizeItems - Render the current path with a capitalized case. Defaults to 'true'.
+ * @param {string} props.path - The current path.
+ * @param {function} props.navigate - The function used to redirect to the path route.
+ * @returns {ReactElement} The Breadcrumb component.
+ */
+declare const Breadcrumb: {
+    (props: BreadcrumbProps): React$1.JSX.Element | null;
+    displayName: string;
+    Item: {
+        (props: BreadcrumbItemProps): React$1.JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (props: React$1.ComponentProps<"span">): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+
+interface CardComposition {
+    Body: typeof CardBody;
+    Meta: typeof CardMeta;
+    Grid: typeof CardGrid;
+}
+interface CardGridProps extends React$1.ComponentProps<"div">, IComponentSize {
+}
+interface CardProps extends React$1.ComponentProps<"div"> {
+    shape?: TComponentShape;
+}
+declare const CardGrid: {
+    (props: CardGridProps): React$1.JSX.Element;
+    displayName: string;
+};
+declare const CardMeta: {
+    (props: React$1.ComponentProps<"div">): React$1.JSX.Element;
+    displayName: string;
+};
+declare const CardBody: {
+    (props: CardProps): React$1.JSX.Element;
+    displayName: string;
+};
+declare const Card: {
+    (props: CardProps): React$1.JSX.Element;
+    displayName: string;
+    Grid: {
+        (props: CardGridProps): React$1.JSX.Element;
+        displayName: string;
+    };
+    Meta: {
+        (props: React$1.ComponentProps<"div">): React$1.JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        (props: CardProps): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+
 interface ICheckboxComposition {
     Root: typeof CheckboxRoot;
     Indicator: typeof CheckboxIndicator;
@@ -315,6 +415,34 @@ declare const CollapsibleContent: {
     displayName: string;
 };
 
+type TooltipValueProperties = {
+    copyLabel?: string;
+    copiedLabel?: string;
+};
+interface CopyButtonProperties extends IButtonProperties {
+    delay?: number;
+    value: string;
+    tooltip?: TooltipValueProperties;
+}
+/**
+ * CopyButton are used to copy stored values when clicked.
+ *
+ * @param {IButtonProperties} props - The props for the CopyButton component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.rawicon - Define whether the component is styles its svg children.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {string} props.value - The value copied when the CopyButton is clicked.
+ * @param {number} props.delay - The delay used to rendered the state change.
+ * @param {TooltipValueProperties} props.tooltip - The values used to convey the copy state.
+ * @param {ReactNode} props.children - The content to be rendered inside the CopyButton.
+ * @returns {ReactElement} The CopyButton component.
+ */
+declare const CopyButton: {
+    ({ value, delay, tooltip, children, ...restProps }: CopyButtonProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 interface IDialogItemProperties extends IComponentStyling, IComponentSize, IScrollAreaProperties, React$1.ComponentProps<"dialog"> {
     lock?: boolean;
 }
@@ -329,7 +457,7 @@ interface IDialogItemProperties extends IComponentStyling, IComponentSize, IScro
  *
  * @param {IDialogItemProperties} props - The props for the Dialog component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
- * @param {ComponentSizeEnum} props.sizing - The size of the component.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "medium".
  * @param {boolean} props.open - Whether the dialog is open or not.
  * @param {ReactNode} props.children - The content to be rendered inside the dialog.
  * @returns {ReactElement} The Dialog component.
@@ -482,7 +610,7 @@ declare const DropdownMenuTrigger: {
  *
  * @param {IDropdownContentProperties} props - The props for the DropdownMenu.Content component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
- * @param {ComponentSizeEnum} props.sizing - The size of the component.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "medium".
  * @param {boolean} props.defaultOpen - The initial open state of the dropdown menu. Defaults to false.
  * @param {ReactNode} props.children - The content to be rendered inside the dropdown menu.
  * @returns {ReactElement} The DropdownMenu.Content component.
@@ -509,6 +637,7 @@ declare enum MetaVariantEnum {
 }
 type TMetaVariant = "default" | "hint" | "emphasis" | "error";
 interface IField extends React$1.ComponentProps<"input">, IComponentSize, IComponentVariant, IComponentStyling {
+    shape?: TComponentShape;
     hint?: string;
     error?: string;
 }
@@ -536,6 +665,7 @@ interface IFieldComposition {
  * @param {boolean} props.raw - Define whether the component is styled or not.
  * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
  * @param {string} props.variant - The style definition used by the component.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
  * @param {string} props.error - The error message to display.
  * @param {string} props.hint - The hint message to display.
  * @returns {ReactElement} The Field component.
@@ -739,7 +869,7 @@ declare const PageNavigation: {
  * @param {string} props.shortcut - The key combination used as keyboard shortcuts to trigger the Page.Toolbar.
  * @param {string} props.hotkey - The key to use in the key combination for the keyboard shortcuts.
  * @param {KeyBindingEnum} props.bindkey - The modifier key to use in the key combination.
- * @param {ComponentSizeEnum} props.sizing - The size of the Page.Toolbar.
+ * @param {ComponentSizeEnum} props.sizing - The size of the Page.Toolbar. Defaults to "medium".
  * @param {ComponentHeightEnum} props.height - The height definition of the Page.Toolbar.
  * @param {TComponentSide} props.side - The side of the Page.Toolbar.
  * @param {boolean} props.defaultOpen - Whether the Page.Toolbar should be open by default.
@@ -812,6 +942,50 @@ declare const Portal: {
     displayName: string;
 };
 
+type PrivacyType = "password" | "text";
+interface PrivacyFieldProps extends IField {
+    defaultType?: PrivacyType;
+    textIcon: React$1.ReactNode;
+    passwordIcon: React$1.ReactNode;
+}
+/**
+ * PrivacyFields are used to hide sensitive values typed by users.
+ *
+ * @param {PrivacyFieldProps} props - The props for the PrivacyField component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {string} props.error - The error message to display.
+ * @param {string} props.hint - The hint message to display.
+ * @param {string} props.defaultType - The type of the PrivacyField when rendered.
+ * @param {ReactElement} props.textIcon - The Icon used to convey the text type information.
+ * @param {ReactElement} props.passwordIcon - The Icon used to convey the password type information.
+ * @returns {ReactElement} The PrivacyField component.
+ */
+declare const PrivacyField: {
+    ({ defaultType, textIcon, passwordIcon, ...restProps }: PrivacyFieldProps): React$1.JSX.Element;
+    displayName: string;
+};
+
+type ResizableEditorProperties = {
+    defaultWidth?: number;
+    left: React$1.ReactNode;
+    right: React$1.ReactNode;
+};
+/**
+ * Resizable are used to render children into separated sections that can be resized by users.
+ *
+ * @param {ResizableEditorProperties} props - The props for the Resizable component.
+ * @param {number} props.defaultWidth - The default width of the Resizable left section.
+ * @param {ReactNode} props.left - The content to be rendered inside the Left panel of the Resizable component.
+ * @param {ReactNode} props.right - The content to be rendered inside the Right panel of the Resizable component.
+ * @returns {ReactElement} The Resizable component.
+ */
+declare const Resizable: {
+    ({ defaultWidth, left, right, }: ResizableEditorProperties): React$1.JSX.Element;
+    displayName: string;
+};
+
 interface ISheetProperties extends IComponentStyling, IComponentSize, IComponentControlProperties, React$1.ComponentProps<"dialog"> {
     side?: "left" | "right";
     lock?: boolean;
@@ -889,6 +1063,33 @@ interface IScrollAreaProperties extends React$1.ComponentProps<any> {
  */
 declare const ScrollArea: ({ scrollbar, children, ...restProps }: IScrollAreaProperties) => React$1.JSX.Element;
 
+interface SpinnerProperties extends IComponentSize {
+}
+/**
+ * Spinners are used to convoy a loading state information.
+ *
+ * @param {TextareaProps} props - The props for the Spinner component.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @returns {ReactElement} The Spinner component.
+ */
+declare const Spinner: (props: SpinnerProperties) => React$1.JSX.Element;
+
+interface SkeletonProperties extends IComponentSize, React$1.ComponentPropsWithRef<"span"> {
+    shape?: TComponentShape;
+}
+/**
+ * Skeletons are used to convoy a loading state information.
+ *
+ * @param {IButtonProperties} props - The props for the Skeleton component.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @returns {ReactElement} The Skeleton component.
+ */
+declare const Skeleton: {
+    (props: SkeletonProperties): React$1.ReactElement;
+    displayName: string;
+};
+
 interface ISwitchComposition {
     Root: typeof SwitchRoot;
     Thumb: typeof SwitchThumb;
@@ -1109,6 +1310,33 @@ declare const TabsContent: {
     displayName: string;
 };
 
+type ScrollContainerProps = {
+    $height?: string;
+    $width?: string;
+    $thumbColor?: string;
+    $trackColor?: string;
+    $thumbHoverColor?: string;
+};
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, IComponentStyling, IComponentSize, IComponentVariant {
+    resizable?: boolean;
+    shape?: "square" | "smooth";
+}
+/**
+ * Textarea are used to allow users to write large chunks of text.
+ *
+ * @param {TextareaProps} props - The props for the Textarea component.
+ * @param {string} props.variant - The style definition used by the component.  Defaults to `secondary`.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {boolean} props.resizable - Define whether the component is resizable or not. Defaults to 'true'.
+ *
+ * @returns {ReactElement} The TextareaProps component.
+ */
+declare const Textarea: {
+    (props: TextareaProps): React$1.JSX.Element;
+    displayName: string;
+};
+
 interface IToggleProperties extends IButtonProperties {
     defaultChecked?: boolean;
 }
@@ -1296,4 +1524,4 @@ declare const useTabs: () => IComponentAPI;
 
 declare const useToolbar: () => IComponentAPI;
 
-export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger, AvataStatusEnum, Avatar, Badge, Button, Checkbox, CheckboxIndicator, CheckboxRoot, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, Dialog, DialogControl, DialogMenu, DialogOverlay, DialogRoot, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger, Field, FieldLabel, FieldMeta, FieldRoot, FieldWrapper, type IAccordionComposition, type IAccordionContentProperties, type IAccordionProperties, type IAccordionTriggerProperties, type IAvatarProperties, type IButtonProperties, type ICheckboxComposition, type ICheckboxProperties, type ICollapsibleComposition, type ICollapsibleProperties, type IDialogItemProperties, type IDropdownComposition, type IDropdownContentProperties, type IDropdownItemProperties, type IField, type IFieldComposition, type IFieldLabel, type IFieldMeta, type IOTPFieldComposition, type IOverlayProperties, type IPageToolsProperties, type IPageWrapperProperties, type IPortalProperties, type IScrollAreaProperties, type ISheetComposition, type ISheetProperties, type ISwitchComposition, type ISwitchProperties, type ISwitchThumbProperties, type ITabsComposition, type ITabsProperties, type IToggleProperties, type IToolbarBodyProperties, type IToolbarComposition, type IToolbarItemProperties, type IToolbarSectionProperties, MetaVariantEnum, OTPField, OTPFieldSlot, Overlay, Page, PageContent, PageMenu, PageNavigation, PagePanel, PageTools, PageWrapper, Portal, ScrollArea, Sheet, SheetRoot, SheetTrigger, Switch, SwitchRoot, SwitchThumb, type TMetaVariant, Table, TableBody, TableCell, TableFooter, TableHead, TableHeadCell, TableRow, Tabs, TabsContent, TabsRoot, TabsTrigger, Toggle, Toolbar, ToolbarItem, ToolbarRoot, ToolbarSection, ToolbarTrigger, Tooltip, useAccordion, useCheckbox, useCollapsible, useDialog, useDropdownMenu, useField, useSheet, useSwitch, useTabs, useToolbar };
+export { Accordion, AccordionContent, AccordionRoot, AccordionTrigger, AvataStatusEnum, Avatar, Badge, Breadcrumb, type BreadcrumbComposition, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardBody, type CardComposition, CardGrid, CardMeta, Checkbox, CheckboxIndicator, CheckboxRoot, Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, CopyButton, Dialog, DialogControl, DialogMenu, DialogOverlay, DialogRoot, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuRoot, DropdownMenuTrigger, Field, FieldLabel, FieldMeta, FieldRoot, FieldWrapper, type IAccordionComposition, type IAccordionContentProperties, type IAccordionProperties, type IAccordionTriggerProperties, type IAvatarProperties, type IButtonProperties, type ICheckboxComposition, type ICheckboxProperties, type ICollapsibleComposition, type ICollapsibleProperties, type IDialogItemProperties, type IDropdownComposition, type IDropdownContentProperties, type IDropdownItemProperties, type IField, type IFieldComposition, type IFieldLabel, type IFieldMeta, type IOTPFieldComposition, type IOverlayProperties, type IPageToolsProperties, type IPageWrapperProperties, type IPortalProperties, type IScrollAreaProperties, type ISheetComposition, type ISheetProperties, type ISwitchComposition, type ISwitchProperties, type ISwitchThumbProperties, type ITabsComposition, type ITabsProperties, type IToggleProperties, type IToolbarBodyProperties, type IToolbarComposition, type IToolbarItemProperties, type IToolbarSectionProperties, MetaVariantEnum, OTPField, OTPFieldSlot, Overlay, Page, PageContent, PageMenu, PageNavigation, PagePanel, PageTools, PageWrapper, Portal, PrivacyField, Resizable, ScrollArea, type ScrollContainerProps, Sheet, SheetRoot, SheetTrigger, Skeleton, type SkeletonProperties, Spinner, Switch, SwitchRoot, SwitchThumb, type TMetaVariant, Table, TableBody, TableCell, TableFooter, TableHead, TableHeadCell, TableRow, Tabs, TabsContent, TabsRoot, TabsTrigger, Textarea, type TextareaProps, Toggle, Toolbar, ToolbarItem, ToolbarRoot, ToolbarSection, ToolbarTrigger, Tooltip, useAccordion, useCheckbox, useCollapsible, useDialog, useDropdownMenu, useField, useSheet, useSwitch, useTabs, useToolbar };