@dimaan/ui 0.0.0

package/dist/index.d.ts

@@ -0,0 +1,321 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, AnchorHTMLAttributes, Ref } from 'react';
+import { ClassValue } from 'clsx';
+
+interface DashboardLayoutContextValue {
+    collapsed: boolean;
+    setCollapsed: (next: boolean) => void;
+    toggleCollapsed: () => void;
+    mobileOpen: boolean;
+    setMobileOpen: (next: boolean) => void;
+    toggleMobileOpen: () => void;
+}
+declare function useDashboardLayout(): DashboardLayoutContextValue;
+
+type DashboardContentProps = HTMLAttributes<HTMLElement>;
+declare function DashboardContent({ className, children, ...props }: DashboardContentProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    children: ReactNode;
+}
+declare function DashboardLayout({ defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, className, children, ...props }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+
+type DashboardMainProps = HTMLAttributes<HTMLDivElement>;
+declare function DashboardMain({ className, children, ...props }: DashboardMainProps): react_jsx_runtime.JSX.Element;
+
+type RenderLink = (props: {
+    href?: string;
+    className?: string;
+    children: ReactNode;
+    'aria-current'?: 'page';
+}) => ReactElement;
+interface AppShellNavItem {
+    key: string;
+    label: ReactNode;
+    href?: string;
+    icon?: ReactNode;
+    active?: boolean;
+    endSlot?: ReactNode;
+    /** Optional render prop for routing libraries (e.g. react-router <Link>). */
+    render?: RenderLink;
+}
+interface AppShellNavGroup {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    active?: boolean;
+    defaultOpen?: boolean;
+    items: AppShellNavItem[];
+}
+interface AppShellNavSection {
+    key: string;
+    label?: ReactNode;
+    items: Array<AppShellNavItem | AppShellNavGroup>;
+}
+interface AppShellBrand {
+    logo?: ReactNode;
+    name?: ReactNode;
+    href?: string;
+}
+interface AppShellProps extends Pick<DashboardLayoutProps, 'defaultCollapsed' | 'collapsed' | 'onCollapsedChange'> {
+    brand?: AppShellBrand;
+    /** Either a flat list of items, or grouped sections. */
+    nav: AppShellNavSection[] | Array<AppShellNavItem | AppShellNavGroup>;
+    title?: ReactNode;
+    searchPlaceholder?: string;
+    onSearch?: (value: string) => void;
+    /** Slot rendered after the search box (e.g. notifications, user menu). */
+    headerActions?: ReactNode;
+    /** Slot rendered at the bottom of the sidebar (e.g. user badge). */
+    sidebarFooter?: ReactNode;
+    children: ReactNode;
+}
+declare function AppShell({ brand, nav, title, searchPlaceholder, onSearch, headerActions, sidebarFooter, defaultCollapsed, collapsed, onCollapsedChange, children, }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare function Avatar({ src, alt, fallback, size, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'success' | 'warning' | 'link';
+type ButtonSize = 'sm' | 'md' | 'lg' | 'icon' | 'icon-sm';
+declare const buttonVariantClass: Record<ButtonVariant, string>;
+declare const buttonSizeClass: Record<ButtonSize, string>;
+declare const buttonBaseClass = "group/button relative inline-flex items-center justify-center font-medium select-none whitespace-nowrap outline-none transition-[background-color,color,box-shadow,opacity] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Show a leading spinner and disable interaction. */
+    loading?: boolean;
+    /** Optional text shown beside the spinner while loading. Defaults to keeping `children` visible. */
+    loadingText?: ReactNode;
+    /** Element rendered before the label (auto-hidden while loading). */
+    leadingIcon?: ReactNode;
+    /** Element rendered after the label (auto-hidden while loading). */
+    trailingIcon?: ReactNode;
+    /** Stretch to fill the parent's inline width. */
+    fullWidth?: boolean;
+    /**
+     * Render the button's classes onto the single child element instead of a `<button>`.
+     * Useful for routing libraries — e.g. `<Button asChild><Link to="/x">Go</Link></Button>`.
+     */
+    asChild?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type CheckboxSize = 'sm' | 'md';
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
+    /** Tri-state visual: when true, renders a dash and sets `aria-checked="mixed"`. */
+    indeterminate?: boolean;
+    /** Convenience handler that receives the new checked boolean. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Standard change handler. Fires alongside `onCheckedChange`. */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    size?: CheckboxSize;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type DashboardHeaderProps = HTMLAttributes<HTMLElement>;
+declare function DashboardHeader({ className, children, ...props }: DashboardHeaderProps): react_jsx_runtime.JSX.Element;
+
+type HeaderActionsProps = HTMLAttributes<HTMLDivElement>;
+declare function HeaderActions({ className, children, ...props }: HeaderActionsProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderCollapseTriggerProps extends Omit<ButtonProps, 'aria-label' | 'children'> {
+    'aria-label'?: string;
+    icon?: ReactNode;
+}
+declare function HeaderCollapseTrigger({ icon, className, onClick, variant, size, 'aria-label': ariaLabel, ...props }: HeaderCollapseTriggerProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderMobileTriggerProps extends Omit<ButtonProps, 'aria-label' | 'children'> {
+    'aria-label'?: string;
+    icon?: ReactNode;
+}
+declare function HeaderMobileTrigger({ icon, className, onClick, variant, size, 'aria-label': ariaLabel, ...props }: HeaderMobileTriggerProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderSearchProps extends InputHTMLAttributes<HTMLInputElement> {
+    icon?: ReactNode;
+    containerClassName?: string;
+}
+declare const HeaderSearch: react.ForwardRefExoticComponent<HeaderSearchProps & react.RefAttributes<HTMLInputElement>>;
+
+type HeaderTitleProps = HTMLAttributes<HTMLDivElement>;
+declare function HeaderTitle({ className, children, ...props }: HeaderTitleProps): react_jsx_runtime.JSX.Element;
+
+type SidebarProps = HTMLAttributes<HTMLElement>;
+declare function Sidebar({ className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+type SidebarFooterProps = HTMLAttributes<HTMLDivElement>;
+declare function SidebarFooter({ className, children, ...props }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+}
+declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): react_jsx_runtime.JSX.Element;
+
+type SidebarHeaderProps = HTMLAttributes<HTMLDivElement>;
+declare function SidebarHeader({ className, children, ...props }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+
+type SidebarNavProps = HTMLAttributes<HTMLElement>;
+declare function SidebarNav({ className, children, ...props }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarNavGroupProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    icon?: ReactNode;
+    label?: ReactNode;
+    endSlot?: ReactNode;
+    /** Highlight the parent (e.g. when one of its children is active). */
+    active?: boolean;
+    /** Uncontrolled initial state. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+declare function SidebarNavGroup({ icon, label, endSlot, active, defaultOpen, open: openProp, onOpenChange, className, children, onClick, ...props }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
+
+type SidebarNavItemRenderProps = {
+    className: string;
+    children: ReactNode;
+    title?: string;
+    'aria-current'?: 'page';
+    'data-active'?: 'true';
+};
+interface SidebarNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    icon?: ReactNode;
+    active?: boolean;
+    label?: ReactNode;
+    endSlot?: ReactNode;
+    /**
+     * Override the rendered element. Use this to plug in routing-library link
+     * components (e.g. react-router `<Link>`) while keeping the styling.
+     */
+    render?: (props: SidebarNavItemRenderProps) => ReactElement;
+}
+declare function SidebarNavItem({ icon, active, label, endSlot, className, children, render, ...props }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
+
+type TableSize = 'sm' | 'md' | 'lg';
+interface TableSizeClasses {
+    /** Applied to <tr> when needed (currently empty — present for symmetry). */
+    row: string;
+    /** Applied to <td>. */
+    cell: string;
+    /** Applied to <th>. */
+    head: string;
+}
+declare const tableSizeClass: Record<TableSize, TableSizeClasses>;
+declare const tableBaseClass = "w-full caption-bottom border-collapse";
+declare const selectedRowClass = "bg-muted/40";
+declare const sortIconClass = "inline-flex h-3 w-3 shrink-0 items-center justify-center";
+declare const alignClass: Record<ColumnAlign, string>;
+
+type SortDirection = 'asc' | 'desc';
+interface SortState {
+    /** Column id being sorted, or `null` when no sort is active. */
+    columnId: string | null;
+    direction: SortDirection;
+}
+interface PaginationState {
+    /** 0-based page index. */
+    pageIndex: number;
+    pageSize: number;
+}
+/** Set of row ids (returned from `getRowId`) that are currently selected. */
+type RowSelectionState = ReadonlySet<string>;
+type SortableValue = string | number | bigint | boolean | Date | null | undefined;
+type ColumnAlign = 'start' | 'center' | 'end';
+interface Column<T> {
+    /** Stable column id. Used for sort state and React keys. */
+    id: string;
+    /** Header label, ReactNode, or a function that returns the header content. */
+    header: ReactNode | (() => ReactNode);
+    /** Field on T to read for default rendering and default sorting. */
+    accessor?: keyof T;
+    /** Custom cell renderer. If omitted, renders `String(row[accessor] ?? '')`. */
+    render?: (row: T, rowIndex: number) => ReactNode;
+    /** Enable click-to-sort UI on the header. */
+    sortable?: boolean;
+    /** Optional override for the value used to compare during sorting. */
+    sortAccessor?: (row: T) => SortableValue;
+    /** Tailwind classes applied to both <th> and <td>. */
+    className?: string;
+    /** Inline alignment hint. Defaults to 'start'. */
+    align?: ColumnAlign;
+}
+interface TableProps<T> {
+    /** Source rows. In server-side mode, this is just the current page. */
+    data: readonly T[];
+    /** Column definitions. */
+    columns: ReadonlyArray<Column<T>>;
+    /** Stable id for each row. Required for selection; recommended always. */
+    getRowId: (row: T, index: number) => string;
+    /**
+     * Total row count across all pages. Pass this when the parent paginates/sorts
+     * server-side — Table will skip its local sort + slice.
+     */
+    totalCount?: number;
+    defaultSort?: SortState;
+    sort?: SortState;
+    onSortChange?: (next: SortState) => void;
+    defaultPagination?: PaginationState;
+    pagination?: PaginationState;
+    onPaginationChange?: (next: PaginationState) => void;
+    /** Page size dropdown options. Defaults to [10, 25, 50]. */
+    pageSizeOptions?: readonly number[];
+    /** Force the paginator to render even when rowCount <= pageSize. */
+    showPagination?: boolean;
+    /** Adds the selection column + header checkbox. */
+    enableRowSelection?: boolean;
+    defaultSelectedRowIds?: ReadonlySet<string>;
+    selectedRowIds?: ReadonlySet<string>;
+    onSelectedRowIdsChange?: (next: ReadonlySet<string>) => void;
+    /** Per-row guard. Disabled rows have a disabled checkbox and are excluded from "select all". */
+    isRowSelectable?: (row: T) => boolean;
+    /** Render prop receives the array of selected rows currently present in `data`. */
+    bulkActions?: (selectedRows: T[]) => ReactNode;
+    /** Override the "{n} selected" label (i18n / RTL). */
+    renderSelectionLabel?: (count: number) => ReactNode;
+    /** Label for the "Clear" button on the toolbar. */
+    clearSelectionLabel?: ReactNode;
+    loading?: boolean;
+    /** Number of skeleton rows shown while loading. Defaults to current pageSize. */
+    loadingRowCount?: number;
+    /** Empty-state slot. Defaults to a centered "No data" message. */
+    emptyState?: ReactNode;
+    size?: TableSize;
+    className?: string;
+    tableClassName?: string;
+    /**
+     * Constrain the scrollable region's height. Accepts any CSS length (e.g. `400`,
+     * `'24rem'`, `'60vh'`). When set, the body scrolls vertically and the header
+     * sticks to the top.
+     */
+    maxHeight?: number | string;
+    /** Stripe alternating rows. Defaults to false. */
+    striped?: boolean;
+    /** Optional row click handler. */
+    onRowClick?: (row: T, rowIndex: number) => void;
+    /** Optional ref to the underlying <table> element. */
+    tableRef?: Ref<HTMLTableElement>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Caption rendered as <caption className="sr-only"> for assistive tech. */
+    caption?: ReactNode;
+}
+
+declare function Table<T>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+type Direction = 'ltr' | 'rtl';
+declare function useDirection(): Direction;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellNavSection, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };