@platned/ui 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,293 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+
+type ButtonVariant = 'primary' | 'neutral' | 'subtle' | 'danger' | 'danger-subtle';
+type ButtonSize = 'lg' | 'md' | 'sm';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+}
+declare function Button({ variant, size, leadingIcon, trailingIcon, children, className, ...props }: ButtonProps): react.JSX.Element;
+
+type IconButtonVariant = 'primary' | 'neutral' | 'subtle';
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: IconButtonVariant;
+    size?: ButtonSize;
+    /** Required for accessibility — no visible text label */
+    'aria-label': string;
+    icon: ReactNode;
+}
+declare function IconButton({ variant, size, icon, className, ...props }: IconButtonProps): react.JSX.Element;
+
+type ButtonGroupVariant = 'primary' | 'neutral' | 'filter';
+type ButtonGroupAlign = 'justify' | 'start' | 'end' | 'center' | 'stack';
+interface ButtonGroupItem {
+    value: string;
+    label: ReactNode;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    disabled?: boolean;
+}
+interface ButtonGroupProps {
+    items: ButtonGroupItem[];
+    value: string;
+    onChange: (value: string) => void;
+    variant?: ButtonGroupVariant;
+    size?: ButtonSize;
+    align?: ButtonGroupAlign;
+    /** Forwarded to the container as aria-label */
+    'aria-label'?: string;
+    className?: string;
+}
+declare function ButtonGroup({ items, value, onChange, variant, size, align, className, 'aria-label': ariaLabel, }: ButtonGroupProps): react.JSX.Element;
+
+type AvatarSize = 'sm' | 'md' | 'lg';
+type AvatarShape = 'circle' | 'square';
+interface AvatarInitialProps {
+    type?: 'initial';
+    /** Single character — Figma spec: one letter only to avoid overflow */
+    initial: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    className?: string;
+}
+interface AvatarImageProps {
+    type: 'image';
+    src: string;
+    alt?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    className?: string;
+}
+type AvatarProps = AvatarInitialProps | AvatarImageProps;
+declare function Avatar(props: AvatarProps): react.JSX.Element;
+
+type AvatarGroupSpacing = 'spaced' | 'overlap';
+interface AvatarGroupProps {
+    children: ReactNode;
+    /** Number shown in the overflow badge — omit to hide the badge */
+    overflow?: number;
+    spacing?: AvatarGroupSpacing;
+    className?: string;
+}
+declare function AvatarGroup({ children, overflow, spacing, className, }: AvatarGroupProps): react.JSX.Element;
+
+interface NavItemProps {
+    icon?: ReactNode;
+    label: string;
+    isActive?: boolean;
+    /** Red indicator dot at top-right corner (e.g. unread count) */
+    indicator?: boolean;
+    /** Collapsed mode — icon only, label hidden */
+    collapsed?: boolean;
+    className?: string;
+}
+declare function NavItem({ icon, label, isActive, indicator, collapsed, className, }: NavItemProps): react.JSX.Element;
+
+type InputSize = 'lg' | 'md' | 'sm';
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    description?: string;
+    /** Red border + message shown below the input */
+    error?: string;
+    /** Neutral helper text shown below the input (hidden when error is set) */
+    hint?: string;
+    size?: InputSize;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    description?: string;
+    error?: string;
+    hint?: string;
+    size?: InputSize;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    description?: string;
+    error?: string;
+    hint?: string;
+    size?: InputSize;
+    options: SelectOption[];
+    placeholder?: string;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+type StepStatus = 'complete' | 'active' | 'upcoming';
+interface StepItem {
+    label: string;
+    status: StepStatus;
+}
+interface StepperProps {
+    steps: StepItem[];
+    className?: string;
+}
+declare function Stepper({ steps, className }: StepperProps): react.JSX.Element;
+
+interface MultiSelectCardProps {
+    icon: ReactNode;
+    title: string;
+    description?: string;
+    selected: boolean;
+    onToggle: () => void;
+    className?: string;
+}
+declare function MultiSelectCard({ icon, title, description, selected, onToggle, className, }: MultiSelectCardProps): react.JSX.Element;
+
+interface ColumnDef<T> {
+    key: string;
+    header: string;
+    /** CSS width value — e.g. "320px", "10rem". When grow is true, acts as min-width. */
+    width: string;
+    /** When true the column fills remaining row width; width becomes a min-width floor. */
+    grow?: boolean;
+    render: (row: T) => ReactNode;
+}
+declare function DataTable<T>({ columns, rows, getRowKey, className, onRowClick, }: {
+    columns: ColumnDef<T>[];
+    rows: T[];
+    getRowKey: (row: T, index: number) => React.Key;
+    className?: string;
+    onRowClick?: (row: T) => void;
+}): react.JSX.Element;
+/** Primary bold text + optional muted subtitle — for lead entity/name cells */
+declare function TableCellLeadText({ primary, secondary, }: {
+    primary: string;
+    secondary?: string;
+}): react.JSX.Element;
+/** Plain text cell — muted (secondary) by default, pass muted=false for primary colour */
+declare function TableCellText({ children, muted, }: {
+    children: ReactNode;
+    muted?: boolean;
+}): react.JSX.Element;
+/** Small outlined chip — Supplier / Customer, entity type labels etc. */
+declare function TableCellBadge({ label }: {
+    label: string;
+}): react.JSX.Element;
+/** Coloured pill with a leading dot — pass explicit colours for full design-system flexibility */
+declare function TableCellStatusPill({ label, dotColor, backgroundColor, textColor, }: {
+    label: string;
+    dotColor: string;
+    backgroundColor: string;
+    textColor: string;
+}): react.JSX.Element;
+/** Mini horizontal progress bar with a percentage label below */
+declare function TableCellProgress({ percent, barColor, }: {
+    percent: number;
+    barColor?: string;
+}): react.JSX.Element;
+
+interface StatTileProps {
+    label: string;
+    value: string | number;
+    dotColor?: string;
+    className?: string;
+}
+declare function StatTile({ label, value, dotColor, className }: StatTileProps): react.JSX.Element;
+
+interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+}
+declare function Toggle({ checked, onChange, label, disabled }: ToggleProps): react.JSX.Element;
+
+interface FileDropZoneProps {
+    className?: string;
+}
+declare function FileDropZone({ className }: FileDropZoneProps): react.JSX.Element;
+
+declare function FormCard({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+interface FormCardHeaderProps {
+    title: string;
+    subtitle?: string;
+}
+declare function FormCardHeader({ title, subtitle }: FormCardHeaderProps): react.JSX.Element;
+interface FormCardFooterProps {
+    onSaveDraft?: () => void;
+    onBack?: () => void;
+    onContinue?: () => void;
+    continueLabel?: string;
+    backDisabled?: boolean;
+}
+declare function FormCardFooter({ onSaveDraft, onBack, onContinue, continueLabel, backDisabled, }: FormCardFooterProps): react.JSX.Element;
+
+type DocumentStatus = 'uploaded' | 'under-review' | 'processing' | 'missing' | 'not-provided';
+interface DocumentRowProps {
+    title: string;
+    required: boolean;
+    description: string;
+    status: DocumentStatus;
+    fileName?: string;
+    fileSize?: string;
+    fileType?: string;
+}
+declare function DocumentRow({ title, required, description, status, fileName, fileSize, fileType, }: DocumentRowProps): react.JSX.Element;
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    maxWidth?: string;
+}
+declare function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth }: ModalProps): react.JSX.Element | null;
+
+interface RoleBadgeProps {
+    role: string;
+    size?: 'sm' | 'md';
+}
+declare function RoleBadge({ role, size }: RoleBadgeProps): react.JSX.Element;
+
+interface RoleOption {
+    role: string;
+    description: string;
+}
+declare const ROLE_COMBO_OPTIONS: RoleOption[];
+interface RoleComboBoxProps {
+    value: string;
+    onChange: (role: string) => void;
+    options?: RoleOption[];
+}
+declare function RoleComboBox({ value, onChange, options }: RoleComboBoxProps): react.JSX.Element;
+
+declare function Panel({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare function MetricCard({ label, value, tone }: {
+    label: string;
+    value: string | number;
+    tone?: 'default' | 'signal' | 'ember' | 'moss';
+}): react.JSX.Element;
+declare function SeverityBadge({ severity }: {
+    severity?: string | null;
+}): react.JSX.Element;
+declare function SentimentBadge({ sentiment }: {
+    sentiment?: string | null;
+}): react.JSX.Element;
+
+declare function SectionHeading({ eyebrow, title, detail }: {
+    eyebrow: string;
+    title: string;
+    detail?: string;
+}): react.JSX.Element;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, type ColumnDef, DataTable, DocumentRow, type DocumentRowProps, type DocumentStatus, FileDropZone, type FileDropZoneProps, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, IconButton, type IconButtonProps, type IconButtonVariant, Input, type InputProps, type InputSize, MetricCard, Modal, type ModalProps, MultiSelectCard, type MultiSelectCardProps, NavItem, type NavItemProps, Panel, ROLE_COMBO_OPTIONS, RoleBadge, type RoleBadgeProps, RoleComboBox, type RoleComboBoxProps, type RoleOption, SectionHeading, Select, type SelectOption, type SelectProps, SentimentBadge, SeverityBadge, StatTile, type StatTileProps, type StepItem, type StepStatus, Stepper, type StepperProps, TableCellBadge, TableCellLeadText, TableCellProgress, TableCellStatusPill, TableCellText, Textarea, type TextareaProps, Toggle, type ToggleProps };