@diwauhris/ui 1.7.4 → 1.7.7

package/lib/types/lib/composeRefs.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+/**
+ * Composes multiple React refs into one callback ref.
+ * Used when a component needs both an internal ref and a forwarded external ref.
+ *
+ * Example:
+ *   <input ref={composeRefs(internalRef, forwardedRef)} />
+ */
+export declare function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;

package/lib/types/ui-library/gallery/accordion/Accordion.d.ts

@@ -54,4 +54,4 @@ export interface AccordionContentProps {
     children: ReactNode;
     className?: string;
 }
-export declare function AccordionContent({ children, className }: AccordionContentProps): import("react").JSX.Element | null;
+export declare function AccordionContent({ children, className }: AccordionContentProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/breadcrumb/Breadcrumb.d.ts

@@ -27,5 +27,6 @@ export interface BreadcrumbProps {
     showHome?: boolean;
     /** aria-label for the <nav> element (default: "Breadcrumb") */
     ariaLabel?: string;
+    className?: string;
 }
-export declare function Breadcrumb({ items, showHome, ariaLabel, }: BreadcrumbProps): import("react").JSX.Element | null;
+export declare function Breadcrumb({ items, showHome, ariaLabel, className, }: BreadcrumbProps): import("react").JSX.Element | null;

package/lib/types/ui-library/gallery/button/Button.d.ts

@@ -64,5 +64,11 @@ export interface ButtonProps extends React.ComponentProps<'button'> {
     rightIcon?: ReactNode;
     fullWidth?: boolean;
     children?: ReactNode;
+    /**
+     * When true, renders the button as a child component (via Radix Slot).
+     * Use this to render a Link or anchor as a button visually while preserving
+     * its native semantics. The type and disabled props are ignored when asChild is true.
+     */
+    asChild?: boolean;
 }
-export declare function Button({ variant, size, loading, leftIcon, rightIcon, fullWidth, children, className, disabled, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, loading, leftIcon, rightIcon, fullWidth, children, className, disabled, asChild, ...props }: ButtonProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/card/Card.d.ts

@@ -22,10 +22,11 @@ export interface CardProps {
     onClick?: () => void;
 }
 export interface CardHeaderProps {
-    title: string;
-    description?: string;
+    title: ReactNode;
+    description?: ReactNode;
     /** Optional content aligned to the right (badge, menu, button) */
     actions?: ReactNode;
+    className?: string;
 }
 export interface CardContentProps {
     children: ReactNode;
@@ -36,6 +37,6 @@ export interface CardFooterProps {
     className?: string;
 }
 export declare function Card({ variant, children, className, onClick }: CardProps): import("react").JSX.Element;
-export declare function CardHeader({ title, description, actions }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardHeader({ title, description, actions, className }: CardHeaderProps): import("react").JSX.Element;
 export declare function CardContent({ children, className }: CardContentProps): import("react").JSX.Element;
 export declare function CardFooter({ children, className }: CardFooterProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/checkbox/Checkbox.d.ts

@@ -20,4 +20,6 @@ export interface CheckboxProps extends Omit<React.ComponentProps<'input'>, 'type
     /** Error message shown below */
     helper?: string;
 }
-export declare function Checkbox({ label, description, indeterminate, error, helper, disabled, checked, id: externalId, className, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ label, description, indeterminate, error, helper, disabled, checked, id: externalId, className, ref, ...props }: CheckboxProps & {
+    ref?: React.Ref<HTMLInputElement>;
+}): import("react").JSX.Element;

package/lib/types/ui-library/gallery/column-manager/ColumnManager.d.ts

@@ -51,6 +51,7 @@ export interface ColumnManagerProps {
     onReset: () => void;
     /** Label for the trigger button. Default: "Columns" */
     triggerLabel?: string;
+    className?: string;
 }
 /**
  * Apply a stored column order to the runtime column array.
@@ -63,4 +64,4 @@ export interface ColumnManagerProps {
  * - When `order` is null the original array is returned unchanged.
  */
 export declare function applyColumnOrder(columns: ColumnManagerColumn[], order: string[] | null): ColumnManagerColumn[];
-export declare function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnKeysChange, onColumnOrderChange, onReset, triggerLabel, }: ColumnManagerProps): import("react").JSX.Element;
+export declare function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnKeysChange, onColumnOrderChange, onReset, triggerLabel, className, }: ColumnManagerProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/combobox/Combobox.d.ts

@@ -1,15 +1,22 @@
-export interface ComboboxProps {
+export interface ComboboxOption {
     value: string;
-    onChange: (value: string) => void;
-    options: {
-        value: string;
-        label: string;
-    }[];
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    /** Controlled value. When provided, pair with onChange. */
+    value?: string;
+    /** Uncontrolled initial value. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    options: ComboboxOption[];
     placeholder?: string;
     className?: string;
     disabled?: boolean;
     loading?: boolean;
     error?: string;
     'aria-label'?: string;
+    onBlur?: () => void;
+    ref?: React.Ref<HTMLInputElement>;
 }
-export declare function Combobox({ value, onChange, options, placeholder, className, disabled, loading, error, 'aria-label': ariaLabel }: ComboboxProps): import("react").JSX.Element;
+export declare function Combobox({ value: controlledValue, defaultValue, onChange, options, placeholder, className, disabled, loading, error, 'aria-label': ariaLabel, onBlur, ref }: ComboboxProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/command-palette/CommandPalette.d.ts

@@ -37,5 +37,7 @@ export interface CommandPaletteProps {
     placeholder?: string;
     /** aria-label for the dialog. Default: "Command palette" */
     'aria-label'?: string;
+    /** Additional class on the floating panel card. */
+    panelClassName?: string;
 }
-export declare function CommandPalette({ open, onClose, items, query, onQueryChange, placeholder, 'aria-label': ariaLabel, }: CommandPaletteProps): import("react").ReactPortal | null;
+export declare function CommandPalette({ open, onClose, items, query, onQueryChange, placeholder, 'aria-label': ariaLabel, panelClassName, }: CommandPaletteProps): import("react").ReactPortal | null;

package/lib/types/ui-library/gallery/confirm-action/ConfirmAction.d.ts

@@ -21,6 +21,8 @@ interface ConfirmActionProps {
     disabled?: boolean;
     onConfirm: () => Promise<void> | void;
     children: ((props: ConfirmActionRenderProps) => ReactNode) | ReactNode;
+    /** Additional class on the inline trigger wrapper span. */
+    className?: string;
 }
-export declare function ConfirmAction({ title, message, label, description, confirmLabel, tone, disabled, onConfirm, children, }: ConfirmActionProps): import("react").JSX.Element;
+export declare function ConfirmAction({ title, message, label, description, confirmLabel, tone, disabled, onConfirm, children, className, }: ConfirmActionProps): import("react").JSX.Element;
 export {};

package/lib/types/ui-library/gallery/confirm-dialog/ConfirmDialog.d.ts

@@ -51,5 +51,7 @@ export interface ConfirmDialogProps {
      * Default: "danger"
      */
     tone?: ConfirmDialogTone;
+    /** Additional class forwarded to the DialogBody wrapper. */
+    className?: string;
 }
-export declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, tone, }: ConfirmDialogProps): import("react").JSX.Element;
+export declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, tone, className, }: ConfirmDialogProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/date-picker/DatePicker.d.ts

@@ -6,10 +6,12 @@ interface DatePickerProps {
     disabled?: boolean;
     error?: string;
     minDate?: Date;
+    /** Upper bound for selectable dates. Defaults to no limit when omitted. */
+    maxDate?: Date;
     id?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
     required?: boolean;
 }
-export declare function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, required, }: DatePickerProps): import("react").JSX.Element;
+export declare function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, required, }: DatePickerProps): import("react").JSX.Element;
 export {};

package/lib/types/ui-library/gallery/dialog/Dialog.d.ts

@@ -38,6 +38,14 @@ export interface DialogProps {
     preventClose?: boolean;
     size?: DialogSize;
     children?: ReactNode;
+    /** Called when focus moves into the content after opening. */
+    onOpenAutoFocus?: (e: Event) => void;
+    /** Called when focus moves to the trigger after closing. */
+    onCloseAutoFocus?: (e: Event) => void;
+    /** Called when the Escape key is pressed. Return e.preventDefault() to suppress close. */
+    onEscapeKeyDown?: (e: KeyboardEvent) => void;
+    /** Called when a pointer-down event occurs outside the content. Return e.preventDefault() to suppress close. */
+    onInteractOutside?: (e: Event) => void;
 }
 export interface DialogBodyProps {
     children: ReactNode;
@@ -49,4 +57,4 @@ export interface DialogFooterProps {
 }
 export declare function DialogBody({ children, className }: DialogBodyProps): import("react").JSX.Element;
 export declare function DialogFooter({ children, className }: DialogFooterProps): import("react").JSX.Element;
-export declare function Dialog({ open, onClose, title, description, preventClose, size, children, }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ open, onClose, title, description, preventClose, size, children, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onInteractOutside, }: DialogProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/drawer/Drawer.d.ts

@@ -20,5 +20,7 @@ export interface DrawerProps {
     maxHeight?: string;
     closeLabel?: string;
     children: ReactNode;
+    /** Additional class on the drawer panel. */
+    className?: string;
 }
-export declare function Drawer({ open, onClose, title, description, placement, width, maxHeight, closeLabel, children, }: DrawerProps): import("react").ReactPortal | null;
+export declare function Drawer({ open, onClose, title, description, placement, width, maxHeight, closeLabel, children, className, }: DrawerProps): import("react").ReactPortal | null;

package/lib/types/ui-library/gallery/field/Field.d.ts

@@ -9,6 +9,7 @@ interface FieldProps {
     error?: string;
     children: ReactNode;
     inputId?: string;
+    className?: string;
 }
 /**
  * Form field wrapper: label + control + inline error.
@@ -17,5 +18,5 @@ interface FieldProps {
  * FieldInput inside this wrapper automatically receive the correct id,
  * aria-required, aria-invalid, and aria-describedby — with no prop threading.
  */
-export declare function Field({ label, required, error, children, inputId }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, required, error, children, inputId, className }: FieldProps): import("react").JSX.Element;
 export {};

package/lib/types/ui-library/gallery/field-input/FieldInput.d.ts

@@ -1,3 +1,5 @@
 type FieldInputProps = React.ComponentProps<'input'>;
-export declare function FieldInput({ id, 'aria-required': ariaRequired, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, className, disabled, ...rest }: FieldInputProps): import("react").JSX.Element;
+export declare function FieldInput({ id, 'aria-required': ariaRequired, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, className, disabled, ref, ...rest }: FieldInputProps & {
+    ref?: React.Ref<HTMLInputElement>;
+}): import("react").JSX.Element;
 export {};

package/lib/types/ui-library/gallery/file-upload/FileUpload.d.ts

@@ -25,5 +25,11 @@ export interface FileUploadProps {
     'aria-label'?: string;
     /** Additional class on the root element. */
     className?: string;
+    /** Controlled selected files. When provided, component uses this instead of internal state. */
+    value?: File[];
+    /** Called when files change in controlled mode. */
+    onChange?: (files: File[]) => void;
+    /** Ref forwarded to the hidden <input type="file"> element. */
+    ref?: React.Ref<HTMLInputElement>;
 }
-export declare function FileUpload({ onFiles, accept, multiple, disabled, 'aria-label': ariaLabel, className, }: FileUploadProps): import("react").JSX.Element;
+export declare function FileUpload({ onFiles, accept, multiple, disabled, 'aria-label': ariaLabel, className, value, onChange, ref, }: FileUploadProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/icon-button/IconButton.d.ts

@@ -23,5 +23,10 @@ export interface IconButtonProps extends React.ComponentProps<'button'> {
     icon: ReactNode;
     /** Visual variant. Default: "default" (slate hover) */
     variant?: IconButtonVariant;
+    /**
+     * When true, renders as a child component (via Radix Slot).
+     * Useful for rendering a Link as an icon button visually.
+     */
+    asChild?: boolean;
 }
-export declare function IconButton({ icon, variant, className, ...props }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ icon, variant, className, asChild, ...props }: IconButtonProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/input/Input.d.ts

@@ -21,4 +21,6 @@ export interface InputProps extends Omit<React.ComponentProps<'input'>, 'prefix'
     /** Element rendered inside the input on the right (e.g. a unit label or clear button) */
     suffix?: ReactNode;
 }
-export declare function Input({ status, helper, prefix, suffix, disabled, className, ...props }: InputProps): import("react").JSX.Element;
+export declare function Input({ status, helper, prefix, suffix, disabled, className, ref, ...props }: InputProps & {
+    ref?: React.Ref<HTMLInputElement>;
+}): import("react").JSX.Element;

package/lib/types/ui-library/gallery/menu/Menu.d.ts

@@ -42,5 +42,11 @@ export interface MenuProps {
      * 'right' — panel right edge aligns with trigger right edge (default)
      */
     align?: 'left' | 'right';
+    /** Controlled open state. When provided, the caller manages open/close. */
+    open?: boolean;
+    /** Called when the menu should open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional class on the floating panel. */
+    panelClassName?: string;
 }
-export declare function Menu({ trigger, items, ariaLabel, align, }: MenuProps): import("react").JSX.Element;
+export declare function Menu({ trigger, items, ariaLabel, align, open: controlledOpen, onOpenChange, panelClassName, }: MenuProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/modal/Modal.d.ts

@@ -42,5 +42,15 @@ export interface ModalProps {
     error?: string;
     maxWidth?: string;
     closeLabel?: string;
+    /** When true, Escape key and outside click will not close the modal. */
+    preventClose?: boolean;
+    /** Called when focus moves into the content after opening. */
+    onOpenAutoFocus?: (e: Event) => void;
+    /** Called when focus moves to the trigger after closing. */
+    onCloseAutoFocus?: (e: Event) => void;
+    /** Called when the Escape key is pressed. Return e.preventDefault() to suppress close. */
+    onEscapeKeyDown?: (e: KeyboardEvent) => void;
+    /** Called when a pointer-down event occurs outside the content. Return e.preventDefault() to suppress close. */
+    onInteractOutside?: (e: Event) => void;
 }
-export default function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, footer, onSubmit, submitLabel, submittingLabel, submitting, danger, error, maxWidth, closeLabel, }: ModalProps): import("react").JSX.Element;
+export default function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, footer, onSubmit, submitLabel, submittingLabel, submitting, danger, error, maxWidth, closeLabel, preventClose, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onInteractOutside, }: ModalProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/pagination/Pagination.d.ts

@@ -39,5 +39,6 @@ export interface PaginationProps {
      * Default: "items"
      */
     itemLabel?: string;
+    className?: string;
 }
-export declare function Pagination({ page, totalPages, onPageChange, ariaLabel, totalItems, pageSize, itemLabel, }: PaginationProps): import("react").JSX.Element | null;
+export declare function Pagination({ page, totalPages, onPageChange, ariaLabel, totalItems, pageSize, itemLabel, className, }: PaginationProps): import("react").JSX.Element | null;

package/lib/types/ui-library/gallery/popover/Popover.d.ts

@@ -37,7 +37,7 @@
  *   - Tooltip shows text-only hints on hover/focus without interaction.
  */
 import { type ReactNode } from 'react';
-export type PopoverPlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';
+export type PopoverPlacement = 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
 export interface PopoverProps {
     /** Controlled open state */
     open?: boolean;
@@ -51,8 +51,9 @@ export interface PopoverProps {
 export declare function Popover({ open, onOpenChange, defaultOpen, placement, children, }: PopoverProps): import("react").JSX.Element;
 export interface PopoverTriggerProps {
     children: ReactNode;
+    className?: string;
 }
-export declare function PopoverTrigger({ children }: PopoverTriggerProps): import("react").JSX.Element;
+export declare function PopoverTrigger({ children, className }: PopoverTriggerProps): import("react").JSX.Element;
 export interface PopoverContentProps {
     /** Optional title rendered in the popover header */
     title?: string;

package/lib/types/ui-library/gallery/radio-group/RadioGroup.d.ts

@@ -45,5 +45,6 @@ export interface RadioItemProps {
     description?: string;
     disabled?: boolean;
     className?: string;
+    ref?: React.Ref<HTMLInputElement>;
 }
-export declare function RadioItem({ value, label, description, disabled: itemDisabled, className, }: RadioItemProps): import("react").JSX.Element;
+export declare function RadioItem({ value, label, description, disabled: itemDisabled, className, ref, }: RadioItemProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/search/Search.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Search — Design System Component
+ *
+ * A search input with a built-in search icon prefix and optional clear button.
+ * Built for filtering and discovery use cases — not for form submission fields
+ * (use Input for those).
+ *
+ * Features:
+ *   - Search icon in prefix by default
+ *   - Optional × clear button when value is non-empty (pass onClear)
+ *   - Controlled via value + onChange (standard input event)
+ *   - Forwards ref to the underlying <input>
+ *   - All native <input> attributes are forwarded
+ */
+export interface SearchProps extends Omit<React.ComponentProps<'input'>, 'type'> {
+    /** Called when the × clear button is clicked. When provided, shows the × button if value is non-empty. */
+    onClear?: () => void;
+    /** Override className on the outer wrapper div */
+    className?: string;
+    /** Ref forwarded to the underlying <input> element */
+    ref?: React.Ref<HTMLInputElement>;
+}
+export declare function Search({ value, onChange, onClear, placeholder, disabled, className, ref, ...props }: SearchProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/select/Select.d.ts

@@ -12,6 +12,10 @@
  *   - For searchable/multi-select use cases, use Combobox (Phase 3).
  *
  * The label is NOT included. The consuming feature pairs a <label>.
+ *
+ * When renderOption is provided, a custom dropdown is rendered instead
+ * of the native <select>. Only use this when native option rendering
+ * is insufficient (e.g., icons, avatars, multi-line content).
  */
 import { type FieldStatus } from '../shared/fieldStatus';
 export type SelectStatus = FieldStatus;
@@ -32,5 +36,13 @@ export interface SelectProps extends Omit<React.ComponentProps<'select'>, 'child
     placeholder?: string;
     status?: SelectStatus;
     helper?: string;
+    /**
+     * Custom renderer for each option row. When provided, renders a custom
+     * dropdown instead of the native <select>. Only flat SelectOption items
+     * are passed — group labels are rendered as non-interactive dividers.
+     */
+    renderOption?: (item: SelectOption) => React.ReactNode;
+    /** Ref forwarded to the native <select> element (ignored when renderOption is provided). */
+    ref?: React.Ref<HTMLSelectElement>;
 }
-export declare function Select({ items, placeholder, status, helper, disabled, className, ...props }: SelectProps): import("react").JSX.Element;
+export declare function Select({ items, placeholder, status, helper, disabled, className, renderOption, ref, ...props }: SelectProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/skeleton/Skeleton.d.ts

@@ -1,17 +1,21 @@
 /**
  * Skeleton — Design System Component
  *
- * Animated loading placeholder using Tailwind animate-pulse.
+ * Animated loading placeholder. Supports two animation variants:
+ *   - 'pulse'   (default) — Tailwind animate-pulse opacity fade
+ *   - 'shimmer' — horizontal shimmer sweep via .skeleton-shimmer CSS class
+ *
  * Purely presentational — no state, no API calls, no domain logic.
  *
  * Usage:
  *   // Generic block
  *   <Skeleton className="h-4 w-32 rounded-lg" />
+ *   <Skeleton variant="shimmer" className="h-4 w-32 rounded-lg" />
  *
  *   // Composed patterns
- *   <SkeletonText lines={3} />
- *   <SkeletonAvatar />
- *   <SkeletonTableRow columns={['w-32', 'w-24', 'w-16']} />
+ *   <SkeletonText lines={3} variant="shimmer" />
+ *   <SkeletonAvatar variant="shimmer" />
+ *   <SkeletonTableRow columns={['w-32', 'w-24', 'w-16']} variant="shimmer" />
  *
  * Accessibility:
  *   Skeleton elements are aria-hidden by default.
@@ -19,30 +23,36 @@
  *   on the parent container when screen-reader announcements are needed.
  */
 import type { ReactNode } from 'react';
+export type SkeletonVariant = 'pulse' | 'shimmer';
 export interface SkeletonProps {
     className?: string;
+    variant?: SkeletonVariant;
 }
-export declare function Skeleton({ className }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ className, variant }: SkeletonProps): import("react").JSX.Element;
 export interface SkeletonTextProps {
     /** Number of lines to render */
     lines?: number;
     className?: string;
+    variant?: SkeletonVariant;
 }
-export declare function SkeletonText({ lines, className }: SkeletonTextProps): import("react").JSX.Element;
+export declare function SkeletonText({ lines, className, variant }: SkeletonTextProps): import("react").JSX.Element;
 export interface SkeletonAvatarProps {
     size?: 'sm' | 'md' | 'lg';
     className?: string;
+    variant?: SkeletonVariant;
 }
-export declare function SkeletonAvatar({ size, className }: SkeletonAvatarProps): import("react").JSX.Element;
+export declare function SkeletonAvatar({ size, className, variant }: SkeletonAvatarProps): import("react").JSX.Element;
 export interface SkeletonCardProps {
     className?: string;
     children?: ReactNode;
+    variant?: SkeletonVariant;
 }
-export declare function SkeletonCard({ className, children }: SkeletonCardProps): import("react").JSX.Element;
+export declare function SkeletonCard({ className, children, variant }: SkeletonCardProps): import("react").JSX.Element;
 export interface SkeletonTableRowProps {
     /** Number of rows to render */
     rows?: number;
     /** Tailwind width classes per column (e.g. ['w-32', 'w-24', 'w-16']) */
     columns?: string[];
+    variant?: SkeletonVariant;
 }
-export declare function SkeletonTableRow({ rows, columns }: SkeletonTableRowProps): import("react").JSX.Element;
+export declare function SkeletonTableRow({ rows, columns, variant }: SkeletonTableRowProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/stat-card/Statistic.d.ts

@@ -25,5 +25,6 @@ export interface StatisticProps {
     trendLabel?: string;
     /** Visual variant */
     variant?: StatisticVariant;
+    className?: string;
 }
-export declare function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, variant, }: StatisticProps): import("react").JSX.Element;
+export declare function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, variant, className, }: StatisticProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/stepper/Stepper.d.ts

@@ -38,6 +38,8 @@ export interface StepperProps {
     /** IDs of steps that are disabled */
     disabledSteps?: string[];
     orientation?: 'horizontal' | 'vertical';
+    /** Use "dark" when rendering on a dark/navy background */
+    theme?: 'light' | 'dark';
     className?: string;
 }
-export declare function Stepper({ steps, currentStep, completedSteps, disabledSteps, orientation, className, }: StepperProps): import("react").JSX.Element;
+export declare function Stepper({ steps, currentStep, completedSteps, disabledSteps, orientation, theme, className, }: StepperProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/switch/Switch.d.ts

@@ -9,13 +9,16 @@
  */
 import type { ReactNode } from 'react';
 export interface SwitchProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
     label?: ReactNode;
     description?: string;
     disabled?: boolean;
     /** Show a loading spinner in place of the thumb */
     loading?: boolean;
     id?: string;
+    className?: string;
+    ref?: React.Ref<HTMLButtonElement>;
 }
-export declare function Switch({ checked, onChange, label, description, disabled, loading, id: externalId, }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ checked: controlledChecked, defaultChecked, onChange, label, description, disabled, loading, id: externalId, className, ref, }: SwitchProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/textarea/Textarea.d.ts

@@ -14,4 +14,6 @@ export interface TextareaProps extends Omit<React.ComponentProps<'textarea'>, 's
     maxLength?: number;
     resize?: TextareaResize;
 }
-export declare function Textarea({ status, helper, maxLength, resize, disabled, value, defaultValue, onChange, className, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function Textarea({ status, helper, maxLength, resize, disabled, value, defaultValue, onChange, className, ref, ...props }: TextareaProps & {
+    ref?: React.Ref<HTMLTextAreaElement>;
+}): import("react").JSX.Element;

package/lib/types/ui-library/gallery/timeline/Timeline.d.ts

@@ -36,8 +36,9 @@ export interface TimelineItemProps {
     /** True for the last visible item — hides the connector line. */
     isLast: boolean;
     children: ReactNode;
+    className?: string;
 }
-export declare function TimelineItem({ isFirst, isLast, children }: TimelineItemProps): import("react").JSX.Element;
+export declare function TimelineItem({ isFirst, isLast, children, className }: TimelineItemProps): import("react").JSX.Element;
 export interface TimelineValueCardProps {
     /** Label above the "before" block. Default: "Previous" */
     beforeLabel?: string;
@@ -64,5 +65,6 @@ export interface TimelineEmptyStateProps {
     icon?: ReactNode;
     title: string;
     description?: string;
+    className?: string;
 }
-export declare function TimelineEmptyState({ icon, title, description }: TimelineEmptyStateProps): import("react").JSX.Element;
+export declare function TimelineEmptyState({ icon, title, description, className }: TimelineEmptyStateProps): import("react").JSX.Element;

package/lib/types/ui-library/gallery/tooltip/Tooltip.d.ts

@@ -1,8 +1,8 @@
 /**
  * Tooltip — Design System Component
  *
- * A short, text-only label that appears on hover or focus to describe
- * an element.
+ * A short label or non-interactive formatted content that appears on hover
+ * or focus to describe an element.
  *
  * Behavior is provided by @radix-ui/react-tooltip, which handles:
  *   - Trigger scoping (fires only on the direct trigger, not descendants)
@@ -19,21 +19,23 @@
  *   - Typography and spacing
  *
  * Rules:
- *   - Tooltip content must be TEXT only. No interactive elements inside.
+ *   - Tooltip content must be non-interactive. Interactive elements (links,
+ *     buttons) inside `content` will be unclickable due to `pointer-events-none`
+ *     on the tooltip panel.
  *   - Do not put ESSENTIAL information only in a tooltip.
  *   - Use for supplementary descriptions: icon button labels, abbrev. meanings.
  *
  * Placement: 'top' | 'bottom' | 'left' | 'right'
  *
  * Difference from Popover:
- *   - Tooltip is text-only, triggered by hover/focus, no interaction inside.
+ *   - Tooltip is for non-interactive content, triggered by hover/focus.
  *   - Popover contains interactive content, triggered by explicit click.
  */
 import { type ReactNode } from 'react';
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 export interface TooltipProps {
-    /** The text content shown in the tooltip */
-    content: string;
+    /** The content shown in the tooltip. Accepts any ReactNode — string, formatted text, or JSX. */
+    content: ReactNode;
     /** Placement relative to the trigger */
     placement?: TooltipPlacement;
     /** Delay before showing the tooltip, in ms */

package/lib/types/ui-library/index.d.ts

@@ -41,7 +41,7 @@ export type { RadioGroupProps, RadioItemProps } from './gallery/radio-group/Radi
 export { Switch } from './gallery/switch/Switch';
 export type { SwitchProps } from './gallery/switch/Switch';
 export { Combobox } from './gallery/combobox/Combobox';
-export type { ComboboxProps } from './gallery/combobox/Combobox';
+export type { ComboboxProps, ComboboxOption } from './gallery/combobox/Combobox';
 export { DatePicker } from './gallery/date-picker/DatePicker';
 export { OtpInput } from './gallery/otp-input/OtpInput';
 export type { OtpInputProps } from './gallery/otp-input/OtpInput';
@@ -49,6 +49,8 @@ export { FileUpload } from './gallery/file-upload/FileUpload';
 export type { FileUploadProps } from './gallery/file-upload/FileUpload';
 export { FilterChip } from './gallery/filter-chip/FilterChip';
 export type { FilterChipProps } from './gallery/filter-chip/FilterChip';
+export { Search } from './gallery/search/Search';
+export type { SearchProps } from './gallery/search/Search';
 export { SegmentedControl } from './gallery/segmented-control/SegmentedControl';
 export type { SegmentedControlProps, SegmentedControlOption } from './gallery/segmented-control/SegmentedControl';
 export { ValidationSummary } from './gallery/validation-summary/ValidationSummary';
@@ -60,7 +62,7 @@ export type { ErrorBannerProps, ErrorBannerTone } from './gallery/error-banner/E
 export { Progress } from './gallery/progress/Progress';
 export type { ProgressProps } from './gallery/progress/Progress';
 export { Skeleton, SkeletonText, SkeletonAvatar, SkeletonCard, SkeletonTableRow } from './gallery/skeleton/Skeleton';
-export type { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonTableRowProps } from './gallery/skeleton/Skeleton';
+export type { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonTableRowProps, SkeletonVariant } from './gallery/skeleton/Skeleton';
 export { StatusBadge } from './gallery/status-badge/StatusBadge';
 export type { StatusBadgeProps, StatusBadgeTone } from './gallery/status-badge/StatusBadge';
 export { default as Modal } from './gallery/modal/Modal';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.4",
+  "version": "1.7.7",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [
@@ -84,11 +84,10 @@
     "jest-environment-jsdom": "^30.4.1",
     "postcss": "^8.5.15",
     "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.65.0",
     "vite": "^8.2.0",
     "vite-plugin-dts": "^5.0.3"
   }
 }
-
-