tinytsdk 0.2.0

package/dist/react/theme.d.ts

@@ -0,0 +1,111 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface TtTheme {
+    /** Component background */
+    bg: string;
+    /** Elevated surface (rows, cards) */
+    surface: string;
+    /** Border color */
+    border: string;
+    /** Divider / subtle separator */
+    divider: string;
+    /** Primary text */
+    text: string;
+    /** Secondary / muted text */
+    muted: string;
+    /** Faint / disabled text */
+    faint: string;
+    /** Accent colors per metric */
+    cpu: string;
+    mem: string;
+    net: string;
+    disk: string;
+    load: string;
+    /** Status colors */
+    ok: string;
+    warn: string;
+    crit: string;
+    /** UI chrome */
+    btnBg: string;
+    btnText: string;
+    /** Font family */
+    font: string;
+    /** Border radius (px) */
+    radius: number;
+    /** Optional glow/shadow for accents (CSS box-shadow value or empty string) */
+    glow?: string;
+    /** Transition for animated values */
+    transition?: string;
+}
+export type ThemePreset = 'terminal' | 'dark' | 'light' | 'material' | 'dracula' | 'heroui';
+export declare const THEMES: Record<ThemePreset, TtTheme>;
+export declare function useTheme(): TtTheme;
+export interface ThemeProviderProps {
+    /** Built-in preset name. Default: 'terminal' */
+    preset?: ThemePreset;
+    /** Override individual tokens on top of the preset */
+    theme?: Partial<TtTheme>;
+    children: ReactNode;
+}
+export declare function ThemeProvider({ preset, theme, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function themeStyles(t: TtTheme): {
+    root: {
+        fontFamily: string;
+        fontSize: number;
+        background: string;
+        color: string;
+        border: string;
+        borderRadius: number;
+        padding: string;
+        display: "flex";
+        flexDirection: "column";
+        gap: number;
+        boxSizing: "border-box";
+        boxShadow: string | undefined;
+        transition: string | undefined;
+    };
+    divider: {
+        height: number;
+        background: string;
+        margin: string;
+    };
+    label: {
+        color: string;
+        whiteSpace: "nowrap";
+    };
+    value: {
+        color: string;
+        whiteSpace: "nowrap";
+        minWidth: number;
+        display: "inline-block";
+    };
+    numval: {
+        color: string;
+        whiteSpace: "nowrap";
+        minWidth: number;
+        display: "inline-block";
+        fontVariantNumeric: "tabular-nums";
+    };
+    btn: {
+        fontSize: number;
+        padding: string;
+        background: string;
+        border: string;
+        borderRadius: number;
+        color: string;
+        cursor: "pointer";
+        transition: string | undefined;
+        fontFamily: string;
+    };
+    select: {
+        fontSize: number;
+        background: string;
+        border: string;
+        borderRadius: number;
+        color: string;
+        padding: string;
+        cursor: "pointer";
+        fontFamily: string;
+    };
+    badge: (color: string) => CSSProperties;
+    alert: (level: "warn" | "crit" | "ok") => CSSProperties;
+};