@hubbiparts/uikit 0.2.1 → 0.3.0

package/dist/components/ui/app-shell.d.ts

@@ -0,0 +1,34 @@
+import { SidebarTrigger } from './sidebar';
+import * as React from 'react';
+export interface AppShellNavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    badge?: React.ReactNode;
+}
+export interface AppShellNavSection {
+    label: string;
+    items: readonly AppShellNavItem[];
+}
+export interface AppShellBreadcrumb {
+    label: string;
+    href?: string;
+}
+export interface AppShellProps extends React.ComponentProps<'div'> {
+    navSections: readonly AppShellNavSection[];
+    activeNavId?: string;
+    onNavigate?: (item: AppShellNavItem) => void;
+    logo?: React.ReactNode;
+    sidebarFooter?: React.ReactNode;
+    topbar?: React.ReactNode;
+    breadcrumbs?: readonly AppShellBreadcrumb[];
+    defaultSidebarOpen?: boolean;
+    sidebarOpen?: boolean;
+    onSidebarOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+declare const AppShell: React.ForwardRefExoticComponent<Omit<AppShellProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { AppShell, SidebarTrigger as AppShellSidebarTrigger };

package/dist/components/ui/backoffice-charts.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export type BackofficeChartValue = string | number;
+export type BackofficeChartPoint = Record<string, BackofficeChartValue>;
+export interface BackofficeChartSeries {
+    key: string;
+    label: string;
+    color?: string;
+}
+export interface BackofficeChartProps {
+    title: string;
+    description?: string;
+    data: readonly BackofficeChartPoint[];
+    series: readonly BackofficeChartSeries[];
+    xKey?: string;
+    loading?: boolean;
+    emptyState?: React.ReactNode;
+    height?: number;
+    className?: string;
+    ariaLabel?: string;
+}
+export interface BackofficeDonutChartProps extends Omit<BackofficeChartProps, 'xKey'> {
+    nameKey: string;
+    valueKey: string;
+}
+declare const BackofficeLineChart: ({ data, series, xKey, ...props }: BackofficeChartProps) => React.JSX.Element;
+declare const BackofficeAreaChart: ({ data, series, xKey, ...props }: BackofficeChartProps) => React.JSX.Element;
+declare const BackofficeBarChart: ({ data, series, xKey, ...props }: BackofficeChartProps) => React.JSX.Element;
+declare const BackofficeDonutChart: ({ data, series, nameKey, valueKey, ...props }: BackofficeDonutChartProps) => React.JSX.Element;
+export { BackofficeLineChart, BackofficeAreaChart, BackofficeBarChart, BackofficeDonutChart };

package/dist/components/ui/data-table.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export type DataTableSortDirection = 'asc' | 'desc';
+export interface DataTableSorting {
+    id: string;
+    direction: DataTableSortDirection;
+}
+export interface DataTableColumn<T> {
+    id: string;
+    header: React.ReactNode;
+    accessorKey?: keyof T;
+    cell?: (row: T) => React.ReactNode;
+    sortable?: boolean;
+    className?: string;
+}
+export interface DataTableProps<T> {
+    columns: readonly DataTableColumn<T>[];
+    rows: readonly T[];
+    rowId: (row: T, index: number) => string;
+    total: number;
+    page: number;
+    pageSize: number;
+    sorting?: DataTableSorting | null;
+    onPageChange: (page: number) => void;
+    onSortChange: (sorting: DataTableSorting | null) => void;
+    selectedRowIds?: ReadonlySet<string>;
+    onRowSelectionChange?: (rowIds: Set<string>) => void;
+    loading?: boolean;
+    error?: React.ReactNode;
+    emptyState?: React.ReactNode;
+    density?: 'compact' | 'default';
+    stickyHeader?: boolean;
+    caption?: string;
+    ariaLabel?: string;
+    className?: string;
+}
+declare const DataTable: <T>({ columns, rows, rowId, total, page, pageSize, sorting, onPageChange, onSortChange, selectedRowIds, onRowSelectionChange, loading, error, emptyState, density, stickyHeader, caption, ariaLabel, className, }: DataTableProps<T>) => React.JSX.Element;
+export { DataTable };

package/dist/components/ui/date-range-picker.d.ts

@@ -0,0 +1,20 @@
+import { Locale } from 'date-fns';
+import { DateRange } from 'react-day-picker';
+import * as React from 'react';
+export type DateRangePreset = 'today' | '7d' | '30d' | 'month';
+export interface DateRangePickerProps {
+    value?: DateRange;
+    onChange: (value: DateRange | undefined) => void;
+    presets?: readonly DateRangePreset[];
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    placeholder?: string;
+    clearable?: boolean;
+    locale?: Locale;
+    className?: string;
+    'aria-label'?: string;
+}
+declare const getPresetRange: (preset: DateRangePreset, now?: Date) => DateRange;
+declare const DateRangePicker: ({ value, onChange, presets, minDate, maxDate, disabled, placeholder, clearable, locale, className, "aria-label": ariaLabel, }: DateRangePickerProps) => React.JSX.Element;
+export { DateRangePicker, getPresetRange };

package/dist/components/ui/detail-sheet.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export type DetailSheetSide = 'left' | 'right';
+export type DetailSheetWidth = 'sm' | 'md' | 'lg';
+export interface DetailSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    side?: DetailSheetSide;
+    width?: DetailSheetWidth;
+    loading?: boolean;
+    error?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const DetailSheet: ({ open, onOpenChange, title, description, side, width, loading, error, actions, children, className, }: DetailSheetProps) => React.JSX.Element;
+export { DetailSheet };

package/dist/components/ui/filter-bar.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface FilterBarChip {
+    id: string;
+    label: React.ReactNode;
+    onRemove?: () => void;
+}
+export interface FilterBarProps extends React.ComponentProps<'form'> {
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    filters?: React.ReactNode;
+    activeFilters?: readonly FilterBarChip[];
+    onClear?: () => void;
+    clearLabel?: string;
+    children?: React.ReactNode;
+}
+declare const FilterBar: React.ForwardRefExoticComponent<Omit<FilterBarProps, "ref"> & React.RefAttributes<HTMLFormElement>>;
+export { FilterBar };

package/dist/components/ui/index.d.ts

@@ -1,4 +1,4 @@
-export declare const publicComponentSlugs: readonly ["accordion", "alert", "alert-dialog", "aspect-ratio", "attachment", "avatar", "badge", "breadcrumb", "bubble", "button", "button-group", "calendar", "card", "carousel", "chart", "checkbox", "collapsible", "combobox", "command", "context-menu", "dialog", "direction", "drawer", "dropdown-menu", "empty", "field", "hover-card", "input", "input-group", "input-otp", "item", "kbd", "label", "marker", "menubar", "message", "message-scroller", "native-select", "navigation-menu", "pagination", "popover", "progress", "questionnaire", "radio-group", "resizable", "scroll-area", "select", "separator", "sheet", "sidebar", "skeleton", "slider", "sonner", "spinner", "switch", "table", "tabs", "textarea", "toggle", "toggle-group", "tooltip"];
+export declare const publicComponentSlugs: readonly ["accordion", "alert", "alert-dialog", "aspect-ratio", "attachment", "avatar", "badge", "breadcrumb", "bubble", "button", "button-group", "calendar", "card", "carousel", "chart", "checkbox", "collapsible", "combobox", "command", "context-menu", "dialog", "direction", "drawer", "dropdown-menu", "empty", "field", "hover-card", "input", "input-group", "input-otp", "item", "kbd", "label", "marker", "menubar", "message", "message-scroller", "native-select", "navigation-menu", "pagination", "popover", "progress", "questionnaire", "radio-group", "resizable", "scroll-area", "select", "separator", "sheet", "sidebar", "skeleton", "slider", "sonner", "spinner", "switch", "table", "tabs", "textarea", "toggle", "toggle-group", "tooltip", "app-shell", "backoffice-charts", "data-table", "date-range-picker", "detail-sheet", "filter-bar", "page-header", "stat-card", "status-badge"];
 export * from './accordion';
 export * from './alert';
 export * from './alert-dialog';
@@ -60,3 +60,12 @@ export * from './textarea';
 export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
+export * from './app-shell';
+export * from './backoffice-charts';
+export * from './data-table';
+export * from './date-range-picker';
+export * from './detail-sheet';
+export * from './filter-bar';
+export * from './page-header';
+export * from './stat-card';
+export * from './status-badge';

package/dist/components/ui/page-header.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface PageHeaderBreadcrumb {
+    label: string;
+    href?: string;
+}
+export interface PageHeaderProps extends React.ComponentProps<'header'> {
+    eyebrow?: React.ReactNode;
+    title: string;
+    description?: React.ReactNode;
+    breadcrumbs?: readonly PageHeaderBreadcrumb[];
+    actions?: React.ReactNode;
+    secondaryActions?: React.ReactNode;
+    backHref?: string;
+    status?: React.ReactNode;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<Omit<PageHeaderProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { PageHeader };

package/dist/components/ui/stat-card.d.ts

@@ -0,0 +1,19 @@
+import { Card } from './card';
+import * as React from 'react';
+export type StatCardIntent = 'neutral' | 'positive' | 'warning' | 'negative';
+export type StatCardDeltaDirection = 'up' | 'down' | 'flat';
+export interface StatCardProps extends React.ComponentProps<typeof Card> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    unit?: React.ReactNode;
+    delta?: React.ReactNode;
+    deltaDirection?: StatCardDeltaDirection;
+    comparison?: React.ReactNode;
+    trend?: React.ReactNode;
+    icon?: React.ReactNode;
+    href?: string;
+    loading?: boolean;
+    intent?: StatCardIntent;
+}
+declare const StatCard: React.ForwardRefExoticComponent<Omit<StatCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { StatCard };

package/dist/components/ui/status-badge.d.ts

@@ -0,0 +1,12 @@
+import { Badge } from './badge';
+import * as React from 'react';
+export type StatusBadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export type StatusBadgeSize = 'sm' | 'md';
+export interface StatusBadgeProps extends React.ComponentProps<typeof Badge> {
+    tone?: StatusBadgeTone;
+    label: React.ReactNode;
+    showDot?: boolean;
+    size?: StatusBadgeSize;
+}
+declare const StatusBadge: React.ForwardRefExoticComponent<Omit<StatusBadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { StatusBadge };