@orellabs/ui 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,507 @@
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+declare type ActionItem = {
+    text: string;
+    tone?: "error" | "warning" | "info" | "neutral";
+};
+
+export declare function ActionList({ items }: ActionListProps): JSX_2.Element;
+
+declare type ActionListProps = {
+    items: ActionItem[];
+};
+
+export declare const AlertIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const ArrowDownIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const ArrowLeftIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const ArrowRightIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const ArrowUpIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const Badge: default_2.NamedExoticComponent<BadgeProps>;
+
+declare type BadgeProps = {
+    tone: "success" | "warning" | "error" | "info" | "neutral";
+    dot?: boolean;
+    children: default_2.ReactNode;
+};
+
+export declare function Button({ variant, size, loading, disabled, fullWidth, leftIcon, children, onClick, }: ButtonProps): JSX_2.Element;
+
+declare type ButtonProps = {
+    variant: "primary" | "ghost" | "danger" | "text";
+    size: "sm" | "md" | "lg";
+    loading?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    leftIcon?: default_2.ReactNode;
+    children: default_2.ReactNode;
+    onClick?: () => void;
+};
+
+export declare function Card({ padding, noBorder, shadow, children, }: CardProps): JSX_2.Element;
+
+declare type CardProps = {
+    padding?: "none" | "sm" | "md" | "lg";
+    noBorder?: boolean;
+    shadow?: boolean;
+    children: default_2.ReactNode;
+};
+
+export declare const CheckIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare function CheckRow({ checked, onChange, label, sublabel, disabled, locked, badge, right, }: CheckRowProps): JSX_2.Element;
+
+declare type CheckRowProps = {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label: string;
+    sublabel?: string;
+    disabled?: boolean;
+    locked?: boolean;
+    badge?: default_2.ReactNode;
+    right?: default_2.ReactNode;
+};
+
+export declare const ChevronDownIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const ChevronLeftIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const ChevronRightIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const ChevronUpIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const CodeChip: default_2.NamedExoticComponent<{
+    children: default_2.ReactNode;
+}>;
+
+export declare const colors: {
+    readonly black: "#1A1A1A";
+    readonly blackHover: "#2A2A2A";
+    readonly red: "#D42B2B";
+    readonly white: "#FFFFFF";
+    readonly pageBg: "#F1F1F1";
+    readonly cardBg: "#FFFFFF";
+    readonly bgSubtle: "#FAFAFA";
+    readonly textPrimary: "#1A1A1A";
+    readonly textSecondary: "#6B7280";
+    readonly textTertiary: "#9CA3AF";
+    readonly textDark: "#374151";
+    readonly textDisabled: "#D1D5DB";
+    readonly textInverse: "#FFFFFF";
+    readonly border: "#E5E5E5";
+    readonly borderLight: "#D1D5DB";
+    readonly borderSubtle: "#F3F4F6";
+    readonly borderFocus: "#1A1A1A";
+    readonly success: "#22C55E";
+    readonly successBg: "#F0FDF4";
+    readonly successBorder: "#BBF7D0";
+    readonly warning: "#F59E0B";
+    readonly warningBg: "#FFFBEB";
+    readonly warningBorder: "#FDE68A";
+    readonly error: "#EF4444";
+    readonly errorHover: "#DC2626";
+    readonly errorBg: "#FEF2F2";
+    readonly errorBorder: "#FECACA";
+    readonly info: "#2563EB";
+    readonly infoBg: "#EFF6FF";
+    readonly infoBorder: "#BFDBFE";
+    readonly neutralBg: "#F3F4F6";
+    readonly neutralText: "#6B7280";
+    readonly skeletonBase: "#E5E5E5";
+    readonly skeletonPulse: "#F1F2F4";
+};
+
+export declare type ColorToken = keyof typeof colors;
+
+declare type Column<T> = {
+    key: keyof T | string;
+    header: string;
+    width?: number | string;
+    render?: (row: T) => default_2.ReactNode;
+    align?: "left" | "center" | "right";
+};
+
+/**
+ * Utility for conditionally joining class names.
+ * Filters out falsy values and joins the rest with a space.
+ *
+ * @example
+ * cx("base", isActive && "active", isDisabled && "disabled")
+ * // => "base active" (if isActive=true, isDisabled=false)
+ */
+export declare function cx(...classes: (string | false | null | undefined)[]): string;
+
+export declare function DataTable<T extends Record<string, unknown>>({ columns, rows, loading, emptyState, onRowClick, }: DataTableProps<T>): JSX_2.Element;
+
+declare type DataTableProps<T> = {
+    columns: Column<T>[];
+    rows: T[];
+    loading?: boolean;
+    emptyState?: default_2.ReactNode;
+    onRowClick?: (row: T) => void;
+};
+
+export declare function DiffRow({ title, handle, field, csvVal, storeVal, type, note }: DiffRowProps): JSX_2.Element;
+
+declare type DiffRowProps = {
+    title: string;
+    handle: string;
+    field: string;
+    csvVal: string;
+    storeVal: string;
+    type: DiffType;
+    note?: string;
+};
+
+declare type DiffType = "added" | "modified" | "destructive" | "safe";
+
+export declare const DownloadIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+declare type IconProps = default_2.SVGProps<SVGSVGElement> & {
+    size?: number | string;
+    filled?: boolean;
+};
+
+export declare const InfoIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare function Input({ label, hint, error, prefix, suffix, type, placeholder, disabled, value, onChange, }: InputProps): JSX_2.Element;
+
+declare type InputProps = {
+    label?: string;
+    hint?: string;
+    error?: string;
+    prefix?: default_2.ReactNode;
+    suffix?: default_2.ReactNode;
+    type?: "text" | "email" | "password" | "time" | "url";
+    placeholder?: string;
+    disabled?: boolean;
+    value: string;
+    onChange: (value: string) => void;
+};
+
+export declare function IssueCard({ severity, field, rowCount, message, fixable, onFix }: IssueCardProps): JSX_2.Element;
+
+declare type IssueCardProps = {
+    severity: "error" | "warning" | "info";
+    field: string;
+    rowCount: number;
+    message: string;
+    fixable: boolean;
+    onFix?: () => void;
+};
+
+export declare function IssueGroup({ category, issues, defaultOpen }: IssueGroupProps): JSX_2.Element;
+
+declare type IssueGroupProps = {
+    category: string;
+    issues: IssueCardProps[];
+    defaultOpen?: boolean;
+};
+
+export declare const LockIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const MenuIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const MiniStat: default_2.NamedExoticComponent<MiniStatProps>;
+
+declare type MiniStatProps = {
+    value: string | default_2.ReactNode;
+    label: string;
+    tone?: "success" | "error" | "neutral" | "info";
+};
+
+export declare function Modal({ open, onClose, children, maxWidth, title, }: ModalProps): JSX_2.Element | null;
+
+declare type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    children: default_2.ReactNode;
+    maxWidth?: number;
+    title?: string;
+};
+
+export declare const ModelTag: default_2.NamedExoticComponent<ModelTagProps>;
+
+declare type ModelTagProps = {
+    name: string;
+};
+
+export declare function PageHeader({ title, sub, action }: PageHeaderProps): JSX_2.Element;
+
+declare type PageHeaderProps = {
+    title: string;
+    sub?: string;
+    action?: default_2.ReactNode;
+};
+
+export declare const PlayIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const ProgressBar: default_2.NamedExoticComponent<ProgressBarProps>;
+
+declare type ProgressBarProps = {
+    percent: number;
+    height?: number;
+};
+
+export declare function ProgressList({ steps }: ProgressListProps): JSX_2.Element;
+
+declare type ProgressListProps = {
+    steps: ProgressStep[];
+};
+
+declare type ProgressStep = {
+    id: string;
+    label: string;
+    status: "pending" | "running" | "done";
+    value?: default_2.ReactNode;
+};
+
+export declare const radii: {
+    readonly none: "0px";
+    readonly xs: "4px";
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "10px";
+    readonly xl: "12px";
+    readonly "2xl": "16px";
+    readonly full: "9999px";
+};
+
+export declare type RadiiToken = keyof typeof radii;
+
+export declare function Radio({ checked, onChange, value, name, disabled, label, description, id, }: RadioProps): JSX_2.Element;
+
+declare type RadioProps = {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+    id?: string;
+};
+
+export declare const ScoreBar: default_2.NamedExoticComponent<ScoreBarProps>;
+
+declare type ScoreBarProps = {
+    score: number;
+    max?: number;
+    width?: number | string;
+    showLabel?: boolean;
+    size?: "sm" | "md";
+};
+
+export declare const SearchIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const SectionLabel: default_2.NamedExoticComponent<SectionLabelProps>;
+
+declare type SectionLabelProps = {
+    children: default_2.ReactNode;
+    action?: default_2.ReactNode;
+};
+
+export declare const SettingsIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export declare const shadows: {
+    readonly none: "none";
+    readonly sm: "0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)";
+    readonly md: "0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04)";
+    readonly lg: "0 20px 60px rgba(0,0,0,0.18)";
+    readonly focus: "0 0 0 3px rgba(26, 26, 26, 0.12)";
+};
+
+export declare type ShadowToken = keyof typeof shadows;
+
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+};
+
+export declare type SpacingToken = keyof typeof spacing;
+
+export declare const StarIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+declare type Stat = {
+    label: string;
+    value: string;
+    unit?: string;
+    sub?: string;
+    color?: string;
+    highlight?: boolean;
+};
+
+export declare function StatGrid({ stats, cols: _cols }: StatGridProps): JSX_2.Element;
+
+declare type StatGridProps = {
+    stats: Stat[];
+    cols?: 2 | 3 | 4;
+};
+
+export declare const StatusDot: default_2.NamedExoticComponent<StatusDotProps>;
+
+declare type StatusDotProps = {
+    tone: "success" | "warning" | "error" | "info" | "neutral";
+    size?: "sm" | "md";
+    pulse?: boolean;
+};
+
+export declare function StepBar({ steps, current }: StepBarProps): JSX_2.Element;
+
+declare type StepBarProps = {
+    steps: string[];
+    current: number;
+};
+
+export declare const SummaryCard: default_2.NamedExoticComponent<SummaryCardProps>;
+
+declare type SummaryCardProps = {
+    label: string;
+    value: string | number;
+    highlight?: boolean;
+    color?: string;
+};
+
+export declare function Switch({ checked, onChange, disabled, label, description, id }: SwitchProps): JSX_2.Element;
+
+declare type SwitchProps = {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+    id?: string;
+};
+
+declare type Tab = {
+    id: string;
+    label: string;
+    badge?: number;
+};
+
+export declare function TabBar({ tabs, active, onChange, size }: TabBarProps): JSX_2.Element;
+
+declare type TabBarProps = {
+    tabs: Tab[];
+    active: string;
+    onChange: (id: string) => void;
+    size?: "sm" | "md";
+};
+
+export declare function Toast({ open, onClose, message, tone, duration, action, }: ToastProps): JSX_2.Element | null;
+
+declare type ToastProps = {
+    open: boolean;
+    onClose: () => void;
+    message: string;
+    tone?: ToastTone;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+
+declare type ToastTone = "success" | "error" | "warning" | "info" | "neutral";
+
+export declare function ToggleGroup({ options, value, onChange, fullWidth, }: ToggleGroupProps): JSX_2.Element;
+
+declare type ToggleGroupProps = {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    value: string;
+    onChange: (value: string) => void;
+    fullWidth?: boolean;
+};
+
+export declare const Trend: default_2.NamedExoticComponent<TrendProps>;
+
+declare type TrendProps = {
+    value: number;
+    label?: string;
+    suffix?: string;
+    inverse?: boolean;
+};
+
+export declare const typography: {
+    readonly fontFamily: {
+        readonly base: "-apple-system, 'Helvetica Neue', sans-serif";
+        readonly mono: "'Menlo', 'Monaco', 'Courier New', monospace";
+    };
+    readonly size: {
+        readonly xs: "10px";
+        readonly sm: "11px";
+        readonly base: "13px";
+        readonly md: "14px";
+        readonly lg: "16px";
+        readonly xl: "20px";
+        readonly "2xl": "24px";
+        readonly "3xl": "32px";
+    };
+    readonly weight: {
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly extrabold: 800;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly snug: 1.4;
+        readonly normal: 1.5;
+        readonly relaxed: 1.55;
+        readonly loose: 1.75;
+    };
+    readonly letterSpacing: {
+        readonly tight: "-0.02em";
+        readonly snug: "-0.01em";
+        readonly normal: "0em";
+        readonly wide: "0.02em";
+    };
+};
+
+export declare const UploadIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+/**
+ * Typed localStorage wrapper with SSR safety.
+ *
+ * @example
+ * const [tab, setTab] = useLocalStorage<string>("active-tab", "Overview");
+ */
+export declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void];
+
+/**
+ * Hook to manage modal open/close state.
+ *
+ * @example
+ * const { isOpen, open, close, toggle } = useModal();
+ * <Button onClick={open}>Open</Button>
+ * <Modal open={isOpen} onClose={close}>...</Modal>
+ */
+export declare function useModal(initialState?: boolean): {
+    readonly isOpen: boolean;
+    readonly open: () => void;
+    readonly close: () => void;
+    readonly toggle: () => void;
+};
+
+export declare const XIcon: ({ size, filled, className, style, ...props }: IconProps) => JSX_2.Element;
+
+export { }