@tomny-dev/uzi 0.1.8 → 0.1.9-pr.2.1.1

package/dist/index.d.cts

@@ -168,29 +168,63 @@ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttri
 type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
-interface DropdownOption {
+type MultiSelectOption = {
     label: string;
     value: string;
+    disabled?: boolean;
+};
+type MultiSelectProps = {
+    options: MultiSelectOption[];
+    value: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    fullWidth?: boolean;
+    maxVisibleValues?: number;
+    className?: string;
+    disabled?: boolean;
+    name?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
+
+type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "multiple"> & {
+    options: SelectOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    allowEmptyOption?: boolean;
+    fullWidth?: boolean;
+};
+declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "multiple"> & {
+    options: SelectOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    allowEmptyOption?: boolean;
+    fullWidth?: boolean;
+} & React.RefAttributes<HTMLSelectElement>>;
+
+interface DropdownOption extends SelectOption {
 }
-interface DropdownProps {
+interface DropdownProps extends Omit<SelectProps, "allowEmptyOption" | "fullWidth" | "placeholder" | "options"> {
     /** List of options to display in the menu. */
     options: DropdownOption[];
-    /** Currently selected value. Use empty string for "no selection". */
-    value: string;
-    /** Called when the user selects an option. */
-    onChange: (value: string) => void;
     /** Label shown when no option is selected. Defaults to "All". */
     placeholder?: string;
-    /** Additional class name for the wrapper element. */
-    className?: string;
     /** Whether to show the placeholder as a clearable option. Defaults to true. */
     allowClear?: boolean;
-    /** Associates the trigger button with an external label element via its id. */
-    "aria-labelledby"?: string;
-    /** Provides an accessible label directly on the trigger button. */
-    "aria-label"?: string;
 }
-declare function Dropdown({ options, value, onChange, placeholder, className, allowClear, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: DropdownProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use Select for value selection and DropdownMenu for action menus.
+ * Dropdown remains as a compatibility alias during migration.
+ */
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLSelectElement>>;
 
 declare function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
@@ -349,4 +383,25 @@ declare function useTheme(): ThemeContextValue;
 
 declare function cx(...values: Array<string | false | null | undefined>): string;
 
-export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownOption, type DropdownProps, Input, type InputProps, Label, type LabelProps, Modal, ModalOverlay, type ModalOverlayProps, type ModalProps, type ModalSize, Pill, type PillProps, type PillSize, type PillTone, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, ThemeProvider, ThemeToggleButton, type ThemeToggleButtonProps, type Toast, type ToastConfig, type ToastContextValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastType, TopBar, type TopBarProps, type UziAccent, type UziResolvedTheme, type UziTheme, cx, useTheme, useToast };
+type SkeletonProps = HTMLAttributes<HTMLDivElement> & {
+    /** Width as a CSS value. */
+    width?: string;
+    /** Height as a CSS value. */
+    height?: string;
+    /** Border radius preset. Defaults to "md". */
+    radius?: "sm" | "md" | "lg" | "full";
+};
+declare function Skeleton({ width, height, radius, className, style, ...rest }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+type ProgressTone = "default" | "success" | "warning" | "danger";
+type ProgressProps = HTMLAttributes<HTMLDivElement> & {
+    /** Value 0–100. */
+    value: number;
+    /** Visual tone. Defaults to "default". */
+    tone?: ProgressTone;
+    /** Accessible label. */
+    "aria-label"?: string;
+};
+declare function Progress({ value, tone, className, "aria-label": ariaLabel, ...rest }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownOption, type DropdownProps, Input, type InputProps, Label, type LabelProps, Modal, ModalOverlay, type ModalOverlayProps, type ModalProps, type ModalSize, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pill, type PillProps, type PillSize, type PillTone, Progress, type ProgressProps, type ProgressTone, Select, type SelectOption, type SelectProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, ThemeProvider, ThemeToggleButton, type ThemeToggleButtonProps, type Toast, type ToastConfig, type ToastContextValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastType, TopBar, type TopBarProps, type UziAccent, type UziResolvedTheme, type UziTheme, cx, useTheme, useToast };

package/dist/index.d.ts

@@ -168,29 +168,63 @@ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttri
 type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
-interface DropdownOption {
+type MultiSelectOption = {
     label: string;
     value: string;
+    disabled?: boolean;
+};
+type MultiSelectProps = {
+    options: MultiSelectOption[];
+    value: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    fullWidth?: boolean;
+    maxVisibleValues?: number;
+    className?: string;
+    disabled?: boolean;
+    name?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLButtonElement>>;
+
+type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "multiple"> & {
+    options: SelectOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    allowEmptyOption?: boolean;
+    fullWidth?: boolean;
+};
+declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "multiple"> & {
+    options: SelectOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    allowEmptyOption?: boolean;
+    fullWidth?: boolean;
+} & React.RefAttributes<HTMLSelectElement>>;
+
+interface DropdownOption extends SelectOption {
 }
-interface DropdownProps {
+interface DropdownProps extends Omit<SelectProps, "allowEmptyOption" | "fullWidth" | "placeholder" | "options"> {
     /** List of options to display in the menu. */
     options: DropdownOption[];
-    /** Currently selected value. Use empty string for "no selection". */
-    value: string;
-    /** Called when the user selects an option. */
-    onChange: (value: string) => void;
     /** Label shown when no option is selected. Defaults to "All". */
     placeholder?: string;
-    /** Additional class name for the wrapper element. */
-    className?: string;
     /** Whether to show the placeholder as a clearable option. Defaults to true. */
     allowClear?: boolean;
-    /** Associates the trigger button with an external label element via its id. */
-    "aria-labelledby"?: string;
-    /** Provides an accessible label directly on the trigger button. */
-    "aria-label"?: string;
 }
-declare function Dropdown({ options, value, onChange, placeholder, className, allowClear, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: DropdownProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use Select for value selection and DropdownMenu for action menus.
+ * Dropdown remains as a compatibility alias during migration.
+ */
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLSelectElement>>;
 
 declare function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
@@ -349,4 +383,25 @@ declare function useTheme(): ThemeContextValue;
 
 declare function cx(...values: Array<string | false | null | undefined>): string;
 
-export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownOption, type DropdownProps, Input, type InputProps, Label, type LabelProps, Modal, ModalOverlay, type ModalOverlayProps, type ModalProps, type ModalSize, Pill, type PillProps, type PillSize, type PillTone, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, ThemeProvider, ThemeToggleButton, type ThemeToggleButtonProps, type Toast, type ToastConfig, type ToastContextValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastType, TopBar, type TopBarProps, type UziAccent, type UziResolvedTheme, type UziTheme, cx, useTheme, useToast };
+type SkeletonProps = HTMLAttributes<HTMLDivElement> & {
+    /** Width as a CSS value. */
+    width?: string;
+    /** Height as a CSS value. */
+    height?: string;
+    /** Border radius preset. Defaults to "md". */
+    radius?: "sm" | "md" | "lg" | "full";
+};
+declare function Skeleton({ width, height, radius, className, style, ...rest }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+type ProgressTone = "default" | "success" | "warning" | "danger";
+type ProgressProps = HTMLAttributes<HTMLDivElement> & {
+    /** Value 0–100. */
+    value: number;
+    /** Visual tone. Defaults to "default". */
+    tone?: ProgressTone;
+    /** Accessible label. */
+    "aria-label"?: string;
+};
+declare function Progress({ value, tone, className, "aria-label": ariaLabel, ...rest }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownOption, type DropdownProps, Input, type InputProps, Label, type LabelProps, Modal, ModalOverlay, type ModalOverlayProps, type ModalProps, type ModalSize, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pill, type PillProps, type PillSize, type PillTone, Progress, type ProgressProps, type ProgressTone, Select, type SelectOption, type SelectProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, ThemeProvider, ThemeToggleButton, type ThemeToggleButtonProps, type Toast, type ToastConfig, type ToastContextValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastType, TopBar, type TopBarProps, type UziAccent, type UziResolvedTheme, type UziTheme, cx, useTheme, useToast };