@l3mpire/ui 2.5.3 → 2.6.0

package/USAGE.md

@@ -286,6 +286,66 @@ import { faMagnifyingGlassSolid, faEnvelopeSolid } from "@l3mpire/icons";
 
 ---
 
+### ChipInput
+
+```tsx
+import { ChipInput } from "@l3mpire/ui";
+
+const [values, setValues] = useState<string[]>([]);
+
+<ChipInput values={values} onChange={setValues} label="Does contain" placeholder="Write your value and press Enter" />
+<ChipInput values={values} onChange={setValues} label="Tags" error errorMessage="At least one value required" />
+<ChipInput values={values} onChange={setValues} label="Filter" size="sm" />
+```
+
+| Prop | Values |
+|---|---|
+| `size` | `"sm"`, `"md"` |
+| `values` | `string[]` (controlled) |
+| `onChange` | `(values: string[]) => void` |
+| `placeholder` | `string` |
+| `label` | `string` |
+| `error` | `boolean` |
+| `errorMessage` | `string` |
+| `disabled` | `boolean` |
+| `iconLeft` | `IconDefinition` |
+| `max` | `number` (max chips, 0 = unlimited) |
+
+Type a value and press Enter to create a chip. Backspace on empty input removes the last chip. Duplicate values are ignored.
+
+---
+
+### NumberInput
+
+```tsx
+import { NumberInput } from "@l3mpire/ui";
+
+const [value, setValue] = useState(1);
+
+<NumberInput value={value} onChange={setValue} label="Quantity" />
+<NumberInput value={value} onChange={setValue} label="Quantity" min={0} max={100} step={5} />
+<NumberInput value={value} onChange={setValue} label="Quantity" size="sm" />
+<NumberInput value={value} onChange={setValue} label="Quantity" error errorMessage="Value out of range" />
+```
+
+| Prop | Values |
+|---|---|
+| `size` | `"sm"`, `"md"` |
+| `value` | `number` (controlled) |
+| `defaultValue` | `number` (uncontrolled, default `0`) |
+| `onChange` | `(value: number) => void` |
+| `min` | `number` |
+| `max` | `number` |
+| `step` | `number` (default `1`) |
+| `label` | `string` |
+| `error` | `boolean` |
+| `errorMessage` | `string` |
+| `disabled` | `boolean` |
+
+Buttons disable automatically at min/max. Input auto-resizes for large numbers (>3 digits).
+
+---
+
 ### TextArea
 
 ```tsx
@@ -368,6 +428,9 @@ import { Select } from "@l3mpire/ui";
 | `error` | `boolean` |
 | `errorMessage` | `string` |
 | `icon` | `IconDefinition` |
+| `tags` | `string[]` (shows selected values as chips with overflow +X) |
+| `onTagRemove` | `(tag: string) => void` (remove chip callback) |
+| `multiCount` | `number` (shows "+N others" text, non-tags mode) |
 | `isOpen` | `boolean` (controlled) |
 | `onOpenChange` | `(open: boolean) => void` |
 | `disabled` | `boolean` |
@@ -972,6 +1035,8 @@ import { faUsersSolid } from "@l3mpire/icons";
 | Tag | x | x | | |
 | Link | x | x | | |
 | TextInput | x | x | | |
+| ChipInput | x | x | | |
+| NumberInput | x | x | | |
 | Select | x | x | | |
 | SearchBar | x | x | | |
 | Avatar | x | x | x | x |

package/dist/index.d.mts

@@ -243,6 +243,8 @@ interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     placeholder?: string;
     value?: string;
     multiCount?: number;
+    tags?: string[];
+    onTagRemove?: (tag: string) => void;
     icon?: IconDefinition;
     avatar?: React.ReactNode;
     flag?: React.ReactNode;
@@ -308,9 +310,44 @@ interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 
+declare const chipInputVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ChipInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof chipInputVariants> {
+    values: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    label?: string;
+    labelType?: InputLabelProps["type"];
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    iconLeft?: IconDefinition;
+    /** Max number of chips (0 = unlimited) */
+    max?: number;
+}
+declare const ChipInput: React.ForwardRefExoticComponent<ChipInputProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange">, VariantProps<typeof inputVariants> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    labelType?: InputLabelProps["type"];
+    error?: boolean;
+    errorMessage?: string;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+
 declare const typographyVariants: (props?: ({
     variant?: "xs" | "sm" | "md" | "lg" | "h2" | "h3" | "h1" | null | undefined;
-    weight?: "bold" | "regular" | "medium" | null | undefined;
+    weight?: "bold" | "medium" | "regular" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React.ElementType;
@@ -581,4 +618,4 @@ interface SidePanelContentProps extends React.ComponentPropsWithoutRef<typeof Di
 }
 declare const SidePanelContent: React.ForwardRefExoticComponent<SidePanelContentProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DateCell, type DateCellProps, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type FilterOperator, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, type Product, ProductLogo, type ProductLogoProps, RowActions, type RowActionsProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatusCell, type StatusCellProps, Switch, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, avatarVariants, badgeVariants, buttonVariants, cn, emptyStateVariants, infoMessageVariants, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useSidebarContext };
+export { Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, ChipInput, type ChipInputProps, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DateCell, type DateCellProps, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type FilterOperator, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, NumberInput, type NumberInputProps, type Product, ProductLogo, type ProductLogoProps, RowActions, type RowActionsProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatusCell, type StatusCellProps, Switch, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, avatarVariants, badgeVariants, buttonVariants, chipInputVariants, cn, emptyStateVariants, infoMessageVariants, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useSidebarContext };

package/dist/index.d.ts

@@ -243,6 +243,8 @@ interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     placeholder?: string;
     value?: string;
     multiCount?: number;
+    tags?: string[];
+    onTagRemove?: (tag: string) => void;
     icon?: IconDefinition;
     avatar?: React.ReactNode;
     flag?: React.ReactNode;
@@ -308,9 +310,44 @@ interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 
+declare const chipInputVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ChipInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof chipInputVariants> {
+    values: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    label?: string;
+    labelType?: InputLabelProps["type"];
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    iconLeft?: IconDefinition;
+    /** Max number of chips (0 = unlimited) */
+    max?: number;
+}
+declare const ChipInput: React.ForwardRefExoticComponent<ChipInputProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange">, VariantProps<typeof inputVariants> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    labelType?: InputLabelProps["type"];
+    error?: boolean;
+    errorMessage?: string;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+
 declare const typographyVariants: (props?: ({
     variant?: "xs" | "sm" | "md" | "lg" | "h2" | "h3" | "h1" | null | undefined;
-    weight?: "bold" | "regular" | "medium" | null | undefined;
+    weight?: "bold" | "medium" | "regular" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React.ElementType;
@@ -581,4 +618,4 @@ interface SidePanelContentProps extends React.ComponentPropsWithoutRef<typeof Di
 }
 declare const SidePanelContent: React.ForwardRefExoticComponent<SidePanelContentProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DateCell, type DateCellProps, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type FilterOperator, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, type Product, ProductLogo, type ProductLogoProps, RowActions, type RowActionsProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatusCell, type StatusCellProps, Switch, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, avatarVariants, badgeVariants, buttonVariants, cn, emptyStateVariants, infoMessageVariants, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useSidebarContext };
+export { Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, ChipInput, type ChipInputProps, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DateCell, type DateCellProps, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type FilterOperator, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, NumberInput, type NumberInputProps, type Product, ProductLogo, type ProductLogoProps, RowActions, type RowActionsProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatusCell, type StatusCellProps, Switch, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, avatarVariants, badgeVariants, buttonVariants, chipInputVariants, cn, emptyStateVariants, infoMessageVariants, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useSidebarContext };