@tomny-dev/uzi 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -1,22 +1,34 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonHTMLAttributes, AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import * as React from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
-type ButtonSize = "sm" | "md" | "lg";
+type ButtonVariant = "default" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
+type ButtonSize = "default" | "sm" | "md" | "lg" | "icon";
 type BaseProps = {
     variant?: ButtonVariant;
     size?: ButtonSize;
     className?: string;
     children?: React.ReactNode;
+    asChild?: boolean;
 };
-type AsButton = BaseProps & ButtonHTMLAttributes<HTMLButtonElement> & {
+type AsButton = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     as?: "button";
 };
-type AsAnchor = BaseProps & AnchorHTMLAttributes<HTMLAnchorElement> & {
+type AsAnchor = BaseProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     as: "a";
 };
 type ButtonProps = AsButton | AsAnchor;
-declare function Button({ as, variant, size, className, children, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ as, variant, size, className, children, asChild, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = "sm" | "md" | "lg";
+type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: AvatarSize;
+};
+declare function Avatar({ className, size, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): react_jsx_runtime.JSX.Element;
 
 type CardTone = "default" | "muted" | "contrast";
 type CardPadding = "none" | "sm" | "md" | "lg";
@@ -48,19 +60,33 @@ type PillProps = HTMLAttributes<HTMLElement> & {
 };
 declare function Pill({ as, tone, size, icon, className, children, ...rest }: PillProps): react_jsx_runtime.JSX.Element;
 
-type ModalSize = "sm" | "md" | "lg";
+type ModalOverlayProps = {
+    open: boolean;
+    onClose: () => void;
+    /** Extra class applied to the backdrop */
+    className?: string;
+    children: ReactNode;
+};
+declare function ModalOverlay({ open, onClose, className, children }: ModalOverlayProps): react_jsx_runtime.JSX.Element | null;
+type ModalSize = "sm" | "md" | "lg" | "xl";
 type ModalProps = {
     open: boolean;
     onClose: () => void;
     title: string;
     subtitle?: string;
     size?: ModalSize;
-    /** Content between the header and footer */
     children: ReactNode;
-    /** Rendered inside the footer row — typically action buttons */
     footer?: ReactNode;
 };
-declare function Modal({ open, onClose, title, subtitle, size, children, footer }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ open, onClose, title, subtitle, size, children, footer }: ModalProps): react_jsx_runtime.JSX.Element;
+
+type AlertTone = "success" | "error" | "warning" | "info";
+type AlertProps = {
+    tone: AlertTone;
+    children: ReactNode;
+    className?: string;
+};
+declare function Alert({ tone, children, className }: AlertProps): react_jsx_runtime.JSX.Element;
 
 /** Visual intent for a toast. Drives colors and icons. */
 type ToastType = "success" | "error" | "warning" | "info";
@@ -133,6 +159,15 @@ declare function ToastProvider({ children, config, }: {
  */
 declare function useToast(): ToastContextValue;
 
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
 interface DropdownOption {
     label: string;
     value: string;
@@ -157,6 +192,53 @@ interface DropdownProps {
 }
 declare function Dropdown({ options, value, onChange, placeholder, className, allowClear, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
+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;
+declare function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuPortal(props: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): react_jsx_runtime.JSX.Element;
+
+type ThemeToggleButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    showLabel?: boolean;
+    lightLabel?: string;
+    darkLabel?: string;
+};
+declare function ThemeToggleButton({ showLabel, lightLabel, darkLabel, className, onClick, ...rest }: ThemeToggleButtonProps): react_jsx_runtime.JSX.Element;
+
+type TopBarProps = HTMLAttributes<HTMLElement> & {
+    leading?: ReactNode;
+    brand?: ReactNode;
+    brandHref?: string;
+    brandingLocation?: "left" | "center";
+    /** Content rendered after the brand in the left region (e.g. breadcrumbs, search). */
+    start?: ReactNode;
+    /** Content rendered in the center region. */
+    center?: ReactNode;
+    actions?: ReactNode;
+    showThemeToggle?: boolean;
+    themeToggleProps?: ThemeToggleButtonProps;
+    innerClassName?: string;
+    isSticky?: boolean;
+    sticky?: boolean;
+};
+declare function TopBar({ leading, brand, brandHref, brandingLocation, start, center, actions, showThemeToggle, themeToggleProps, className, innerClassName, isSticky, sticky, children, ...rest }: TopBarProps): react_jsx_runtime.JSX.Element;
+
 type AppShellProps = {
     /** Primary page content rendered in the main area. */
     children: ReactNode;
@@ -170,6 +252,10 @@ type AppShellProps = {
     topbarStart?: ReactNode;
     /** Optional content aligned to the right side of the top bar. */
     topbarEnd?: ReactNode;
+    /** Optional built-in theme toggle for the top bar. */
+    showThemeToggle?: boolean;
+    themeToggleProps?: TopBarProps["themeToggleProps"];
+    topBarBrandingLocation?: TopBarProps["brandingLocation"];
     /** Custom class names for styling overrides. */
     className?: string;
     sidebarClassName?: string;
@@ -195,34 +281,72 @@ type AppShellProps = {
   * - Provides optional hook to close the sidebar when a prop value changes
   *   (e.g., route transitions).
   */
-declare function AppShell({ children, sidebar, brand, brandHref, topbarStart, topbarEnd, className, sidebarClassName, topbarClassName, mainClassName, sidebarWidth, closeSidebarOnChangeKey, hamburgerLabel, onSidebarToggle, }: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ children, sidebar, brand, brandHref, topbarStart, topbarEnd, showThemeToggle, themeToggleProps, topBarBrandingLocation, className, sidebarClassName, topbarClassName, mainClassName, sidebarWidth, closeSidebarOnChangeKey, hamburgerLabel, onSidebarToggle, }: AppShellProps): react_jsx_runtime.JSX.Element;
 
 type SidebarNavItem = {
     label: string;
-    href: string;
+    href?: string;
     icon?: ReactNode;
+    description?: ReactNode;
     badge?: ReactNode;
     active?: boolean;
+    disabled?: boolean;
+    title?: string;
     target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
     rel?: AnchorHTMLAttributes<HTMLAnchorElement>["rel"];
     onClick?: () => void;
 };
-type SidebarNavProps = {
+type SidebarNavSection = {
+    id?: string;
+    label?: ReactNode;
     items: SidebarNavItem[];
-    /** Optional path-like value used for default active matching. */
+};
+type SidebarNavProps = {
+    items?: SidebarNavItem[];
+    sections?: SidebarNavSection[];
     currentPath?: string;
-    /**
-     * Custom active matcher. Defaults to prefix matching (with a special case for `/`).
-     * If `item.active` is provided, it wins over this function.
-     */
     getIsActive?: (item: SidebarNavItem, currentPath?: string) => boolean;
-    /** Called after the item click handler (if provided). */
     onItemClick?: (item: SidebarNavItem) => void;
+    header?: ReactNode;
+    footer?: ReactNode;
+    ariaLabel?: string;
+    collapsed?: boolean;
+    iconSize?: number | string;
     className?: string;
     itemClassName?: string;
+    sectionClassName?: string;
+};
+declare function SidebarNav({ items, sections, currentPath, getIsActive, onItemClick, header, footer, ariaLabel, collapsed, iconSize, className, itemClassName, sectionClassName, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+declare const UZI_THEMES: readonly ["light", "dark", "system"];
+declare const UZI_ACCENTS: readonly ["blue", "cyan", "violet", "emerald", "amber", "rose"];
+
+type UziTheme = typeof UZI_THEMES[number];
+type UziResolvedTheme = "light" | "dark";
+type UziAccent = typeof UZI_ACCENTS[number];
+type ThemeContextValue = {
+    theme: UziTheme;
+    resolvedTheme: UziResolvedTheme;
+    accent: UziAccent;
+    setTheme: (theme: UziTheme) => void;
+    setAccent: (accent: UziAccent) => void;
+    toggleTheme: () => void;
+};
+type ThemeProviderProps = {
+    children: ReactNode;
+    theme?: UziTheme;
+    defaultTheme?: UziTheme;
+    accent?: UziAccent;
+    defaultAccent?: UziAccent;
+    onThemeChange?: (theme: UziTheme) => void;
+    onAccentChange?: (accent: UziAccent) => void;
+    storageKey?: string;
+    accentStorageKey?: string;
+    disableStorage?: boolean;
 };
-declare function SidebarNav({ items, currentPath, getIsActive, onItemClick, className, itemClassName, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+declare function ThemeProvider({ children, theme, defaultTheme, accent, defaultAccent, onThemeChange, onAccentChange, storageKey, accentStorageKey, disableStorage, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
 
 declare function cx(...values: Array<string | false | null | undefined>): string;
 
-export { AppShell, type AppShellProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardTone, Dropdown, type DropdownOption, type DropdownProps, Modal, type ModalProps, type ModalSize, Pill, type PillProps, type PillSize, type PillTone, SidebarNav, type SidebarNavItem, type SidebarNavProps, type Toast, type ToastConfig, type ToastContextValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastType, cx, useToast };
+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 };