@dinofront/design_system 0.1.0

package/dist/components/PersonCard/PersonCard.types.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type PersonCardVariant = 'default' | 'highlight' | 'warning';
+export type PersonCardSize = 'sm' | 'md';
+export interface PersonCardProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    name: string;
+    role?: string;
+    avatar?: string;
+    /** Visual treatment.
+     *  - default: neutral border
+     *  - highlight: brand-green tint + border (use for "you" / current user / featured)
+     *  - warning: amber border + small status dot (use for "needs attention")
+     */
+    variant?: PersonCardVariant;
+    size?: PersonCardSize;
+    /** Optional badge rendered inline at the end of the row (e.g. "YOU"). */
+    badge?: ReactNode;
+    /** If set, renders as a button so it's clickable. */
+    onClick?: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { PersonCard } from './PersonCard';
+export type { PersonCardProps, PersonCardVariant, PersonCardSize } from './PersonCard.types';

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import { RadioGroupProps, RadioProps } from './Radio.types';
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Radio/Radio.types.d.ts

@@ -0,0 +1,22 @@
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type RadioSize = 'md' | 'sm';
+export interface RadioGroupProps extends BaseProps {
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    size?: RadioSize;
+    orientation?: 'horizontal' | 'vertical';
+    children: ReactNode;
+    className?: string;
+}
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'name' | 'onChange'>, BaseProps {
+    value: string;
+    size?: RadioSize;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './Radio';
+export type { RadioProps, RadioGroupProps, RadioSize } from './Radio.types';

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,2 @@
+import { SelectProps } from './Select.types';
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Select/Select.types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type SelectSize = 'lg' | 'md' | 'sm';
+export interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectProps extends BaseProps {
+    options: SelectOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    error?: boolean;
+    size?: SelectSize;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    wrapperClassName?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption, SelectSize } from './Select.types';

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,3 @@
+import { SidebarItemProps, SidebarProps } from './Sidebar.types';
+export declare const Sidebar: import('react').ForwardRefExoticComponent<SidebarProps & import('react').RefAttributes<HTMLElement>>;
+export declare const SidebarItem: import('react').ForwardRefExoticComponent<SidebarItemProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/Sidebar/Sidebar.types.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, BaseProps {
+    /** Uncontrolled initial collapsed state. */
+    defaultCollapsed?: boolean;
+    /** Controlled collapsed state. Pass alongside `onCollapsedChange` to fully control it. */
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    children: ReactNode;
+    logo?: ReactNode;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+}
+export interface SidebarItemProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'>, BaseProps {
+    icon?: ReactNode;
+    label: ReactNode;
+    /** Marks the item as the current selection and, when it has `children`, defaults its group open. */
+    active?: boolean;
+    badge?: ReactNode;
+    /** Nested items, rendered as a collapsible group below this item. */
+    children?: ReactNode;
+    onClick?: () => void;
+    /** Renders the item as an `<a>` instead of a `<button>` when provided. */
+    href?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Sidebar, SidebarItem } from './Sidebar';
+export type { SidebarProps, SidebarItemProps } from './Sidebar.types';

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,3 @@
+import { SnackbarContextValue, SnackbarProviderProps } from './Snackbar.types';
+export declare function useSnackbar(): SnackbarContextValue;
+export declare function SnackbarProvider({ children, dataTestId }: SnackbarProviderProps): import("react").JSX.Element;

package/dist/components/Snackbar/Snackbar.types.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type SnackbarVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+/**
+ * A single toast entry. `dataTestId` is optional per-toast so callers can
+ * tag a specific `show()` call for e2e selection (there's no other prop
+ * surface to hang a QA hook off — the toast itself is never a
+ * consumer-authored JSX element, just a data object passed to `show()`).
+ */
+export interface SnackbarItem extends BaseProps {
+    id: string;
+    message: ReactNode;
+    variant?: SnackbarVariant;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export interface SnackbarContextValue {
+    show: (item: Omit<SnackbarItem, 'id'> & {
+        id?: string;
+    }) => string;
+    dismiss: (id: string) => void;
+}
+export interface SnackbarProviderProps extends BaseProps {
+    children: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { SnackbarProvider, useSnackbar } from './Snackbar';
+export type { SnackbarVariant, SnackbarItem, SnackbarContextValue, SnackbarProviderProps, } from './Snackbar.types';

package/dist/components/Status/Status.d.ts

@@ -0,0 +1,2 @@
+import { StatusProps } from './Status.types';
+export declare const Status: import('react').ForwardRefExoticComponent<StatusProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Status/Status.types.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type StatusVariant = 'general' | 'info' | 'brand' | 'danger' | 'warning' | 'success' | 'discovery' | 'disabled';
+export type StatusSize = 'lg' | 'md' | 'sm';
+export interface StatusProps extends HTMLAttributes<HTMLSpanElement>, BaseProps {
+    variant?: StatusVariant;
+    size?: StatusSize;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    /** Renders a leading color dot when true and no `leftIcon` is supplied. */
+    dot?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Status } from './Status';
+export type { StatusProps, StatusSize, StatusVariant } from './Status.types';

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import { SwitchProps } from './Switch.types';
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Switch/Switch.types.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type SwitchSize = 'md' | 'sm';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseProps {
+    size?: SwitchSize;
+    label?: ReactNode;
+    description?: ReactNode;
+    labelPosition?: 'left' | 'right';
+}

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchSize } from './Switch.types';

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,8 @@
+import { TableProps, THeadProps, TBodyProps, TRProps, THProps, TDProps, DataTableProps } from './Table.types';
+export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<HTMLTableElement>>;
+export declare const THead: import('react').ForwardRefExoticComponent<THeadProps & import('react').RefAttributes<HTMLTableSectionElement>>;
+export declare const TBody: import('react').ForwardRefExoticComponent<TBodyProps & import('react').RefAttributes<HTMLTableSectionElement>>;
+export declare const TR: import('react').ForwardRefExoticComponent<TRProps & import('react').RefAttributes<HTMLTableRowElement>>;
+export declare const TH: import('react').ForwardRefExoticComponent<THProps & import('react').RefAttributes<HTMLTableCellElement>>;
+export declare const TD: import('react').ForwardRefExoticComponent<TDProps & import('react').RefAttributes<HTMLTableCellElement>>;
+export declare function DataTable<T>({ columns, rows, rowKey, empty, density, striped, hoverable, sortKey, sortDir, onSortChange, onRowClick, className, dataTestId, }: DataTableProps<T>): import("react").JSX.Element;

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,55 @@
+import { HTMLAttributes, ReactNode, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+import { BaseProps } from '../../types';
+export type TableDensity = 'comfortable' | 'compact';
+export type SortDir = 'asc' | 'desc' | null;
+/** Horizontal alignment shared by `TH`, `TD`, and `TableColumn`. */
+export type TableAlign = 'left' | 'center' | 'right';
+export interface TableProps extends HTMLAttributes<HTMLTableElement>, BaseProps {
+    density?: TableDensity;
+    striped?: boolean;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    /**
+     * Applied to the outer scroll container (border/background/rounding) —
+     * `className` is applied to the `<table>` element itself, matching where
+     * `ref` and the rest of `HTMLAttributes<HTMLTableElement>` land.
+     */
+    wrapperClassName?: string;
+}
+export interface THeadProps extends HTMLAttributes<HTMLTableSectionElement>, BaseProps {
+}
+export interface TBodyProps extends HTMLAttributes<HTMLTableSectionElement>, BaseProps {
+}
+export interface TRProps extends HTMLAttributes<HTMLTableRowElement>, BaseProps {
+}
+export interface THProps extends ThHTMLAttributes<HTMLTableCellElement>, BaseProps {
+    sortable?: boolean;
+    sortDir?: SortDir;
+    onSortChange?: (dir: SortDir) => void;
+    align?: TableAlign;
+}
+export interface TDProps extends TdHTMLAttributes<HTMLTableCellElement>, BaseProps {
+    align?: TableAlign;
+}
+export interface TableColumn<T> {
+    key: string;
+    header: ReactNode;
+    render?: (row: T) => ReactNode;
+    accessor?: (row: T) => ReactNode;
+    align?: TableAlign;
+    sortable?: boolean;
+}
+export interface DataTableProps<T> extends BaseProps {
+    columns: TableColumn<T>[];
+    rows: T[];
+    rowKey: (row: T, i: number) => string;
+    empty?: ReactNode;
+    density?: TableDensity;
+    striped?: boolean;
+    hoverable?: boolean;
+    sortKey?: string;
+    sortDir?: SortDir;
+    onSortChange?: (key: string, dir: SortDir) => void;
+    onRowClick?: (row: T) => void;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Table, THead, TBody, TR, TH, TD, DataTable } from './Table';
+export type { TableProps, THeadProps, TBodyProps, TRProps, THProps, TDProps, TableAlign, TableColumn, DataTableProps, TableDensity, SortDir, } from './Table.types';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+import { TabListProps, TabPanelProps, TabProps, TabsProps } from './Tabs.types';
+export declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const TabList: import('react').ForwardRefExoticComponent<TabListProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/Tabs.types.d.ts

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type TabsVariant = 'underline' | 'pills' | 'boxed';
+export type TabsSize = 'lg' | 'md' | 'sm';
+export interface TabsProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** Uncontrolled initial active tab value. Falls back to the first `<Tab>`'s value if omitted. */
+    defaultValue?: string;
+    /** Controlled active tab value. Pass alongside `onValueChange` to fully control which tab is active. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    variant?: TabsVariant;
+    size?: TabsSize;
+}
+export interface TabListProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+}
+export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
+    /** Unique identifier matched against the parent `Tabs`'s active value. */
+    value: string;
+    icon?: ReactNode;
+    /** Count/indicator rendered after the label. Hidden when `undefined`, `null`, or `false`. */
+    badge?: ReactNode;
+}
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** Matched against the parent `Tabs`'s active value; renders nothing (unmounted) when not active. */
+    value: string;
+}

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

@@ -0,0 +1,2 @@
+export { Tab, TabList, TabPanel, Tabs } from './Tabs';
+export type { TabListProps, TabPanelProps, TabProps, TabsProps, TabsSize, TabsVariant, } from './Tabs.types';

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,2 @@
+import { TextProps } from './Text.types';
+export declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Text/Text.types.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ElementType } from 'react';
+import { BaseProps } from '../../types';
+export type TextVariant = 'h-xl' | 'h-lg' | 'h-md' | 'h-std' | 'h-sm' | 'h-xs' | 'p-lg' | 'p-md' | 'p-std' | 'p-sm' | 'p-xs' | 'label-lg' | 'label-md' | 'label-std' | 'label-sm' | 'label-xs' | 'label-xxs';
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+export type TextColor = 'default' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'brand' | 'info' | 'success' | 'warning' | 'danger';
+export interface TextProps extends HTMLAttributes<HTMLElement>, BaseProps {
+    /** Typographic token — pairs size + line-height from tokens.css. */
+    variant?: TextVariant;
+    weight?: TextWeight;
+    color?: TextColor;
+    /** HTML element to render. Defaults to a sensible mapping based on variant. */
+    as?: ElementType;
+    /** Truncate to a single line with ellipsis. */
+    truncate?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Text } from './Text';
+export type { TextProps, TextVariant, TextWeight, TextColor } from './Text.types';

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,2 @@
+import { TextAreaProps } from './TextArea.types';
+export declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,10 @@
+import { TextareaHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, BaseProps {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    error?: boolean;
+    wrapperClassName?: string;
+    showCount?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea.types';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from './Tooltip.types';
+export declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipSize = 'lg' | 'sm';
+export interface TooltipProps extends BaseProps {
+    /** Tooltip bubble content. */
+    content: ReactNode;
+    /** Single trigger element the tooltip attaches its hover/focus handlers to. */
+    children: ReactElement;
+    side?: TooltipSide;
+    size?: TooltipSize;
+    /** Delay in ms before the tooltip opens on hover/focus. */
+    delay?: number;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipSide, TooltipSize } from './Tooltip.types';

package/dist/components/Upload/Upload.d.ts

@@ -0,0 +1,3 @@
+import { UploadItemProps, UploadProps } from './Upload.types';
+export declare const Upload: import('react').ForwardRefExoticComponent<UploadProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const UploadItem: import('react').ForwardRefExoticComponent<UploadItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Upload/Upload.types.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop' | 'onDragOver' | 'onDragLeave' | 'onKeyDown' | 'role' | 'tabIndex' | 'aria-disabled'>, BaseProps {
+    /** Forwarded to the hidden native `<input type="file">`, e.g. `"image/png,image/jpeg"`. */
+    accept?: string;
+    multiple?: boolean;
+    /** Shown in the default hint text (e.g. "PNG, up to 10 MB"); purely informational, not enforced. */
+    maxSizeMB?: number;
+    /** Overrides the auto-generated hint derived from `accept`/`maxSizeMB`. */
+    hint?: ReactNode;
+    onFiles?: (files: File[]) => void;
+    disabled?: boolean;
+}
+export type UploadItemStatus = 'processing' | 'completed' | 'error';
+export interface UploadItemProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    name: ReactNode;
+    meta?: ReactNode;
+    status?: UploadItemStatus;
+    /** 0-100, only rendered while `status="processing"`. */
+    progress?: number;
+    errorText?: ReactNode;
+    onRetry?: () => void;
+    onRemove?: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { Upload, UploadItem } from './Upload';
+export type { UploadItemProps, UploadItemStatus, UploadProps } from './Upload.types';

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+export * from './components/Accordion';
+export * from './components/Avatar';
+export * from './components/Badge';
+export * from './components/Button';
+export * from './components/ButtonGroup';
+export * from './components/Card';
+export * from './components/Checkbox';
+export * from './components/DatePicker';
+export * from './components/Drawer';
+export * from './components/DropdownMenu';
+export * from './components/Filter';
+export * from './components/IconTile';
+export * from './components/InfoField';
+export * from './components/InlineAlert';
+export * from './components/Input';
+export * from './components/Modal';
+export * from './components/MultiSelect';
+export * from './components/NotificationBadge';
+export * from './components/Pagination';
+export * from './components/PersonCard';
+export * from './components/Radio';
+export * from './components/Select';
+export * from './components/Sidebar';
+export * from './components/Snackbar';
+export * from './components/Status';
+export * from './components/Switch';
+export * from './components/Table';
+export * from './components/Tabs';
+export * from './components/Text';
+export * from './components/TextArea';
+export * from './components/Tooltip';
+export * from './components/Upload';
+export { cn } from './lib/cn';
+export * from './tokens';
+export * from './types';