@protoflexo/proto-ui 0.1.0

package/dist/fonts.css

@@ -0,0 +1,93 @@
+/*
+ * Flex Font Faces
+ * Proprietary fonts hosted via Vercel Blob.
+ *
+ * TODO: Replace placeholder URLs with actual Vercel Blob URLs after upload.
+ * For now, fonts fall back to system fonts defined in tokens.css.
+ */
+
+/* ── ABCDiatype ──────────────────────────────────────────── */
+
+@font-face {
+  font-family: 'ABCDiatype';
+  src: url('__BLOB_URL__/ABCDiatype-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABCDiatype';
+  src: url('__BLOB_URL__/ABCDiatype-RegularItalic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABCDiatype';
+  src: url('__BLOB_URL__/ABCDiatype-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABCDiatype';
+  src: url('__BLOB_URL__/ABCDiatype-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABCDiatype';
+  src: url('__BLOB_URL__/ABCDiatype-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABCDiatype';
+  src: url('__BLOB_URL__/ABCDiatype-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* ── ABCDiatypeSemi-Mono ─────────────────────────────────── */
+
+@font-face {
+  font-family: 'ABCDiatypeSemi-Mono';
+  src: url('__BLOB_URL__/ABCDiatypeSemi-Mono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABCDiatypeSemi-Mono';
+  src: url('__BLOB_URL__/ABCDiatypeSemi-Mono-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'ABCDiatypeSemi-Mono';
+  src: url('__BLOB_URL__/ABCDiatypeSemi-Mono-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ── CooperBT ────────────────────────────────────────────── */
+
+@font-face {
+  font-family: 'CooperBT-Medium';
+  src: url('__BLOB_URL__/CooperBT-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/index.d.ts

@@ -0,0 +1,485 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+interface FlexProviderProps {
+    children: React.ReactNode;
+}
+/**
+ * FlexProvider ensures Flex design tokens, typography, and fonts
+ * are available in the document. Wrap your app root with this.
+ *
+ * In prototypes, CSS files are loaded via <link> tags in index.html,
+ * so FlexProvider is mainly a semantic wrapper. It can also inject
+ * tokens programmatically when CSS files aren't loaded via HTML.
+ */
+declare function FlexProvider({ children }: FlexProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Flex Design System Tokens (TypeScript)
+ * Extracted from genoa/src/rxp/unistyles.ts and genoa/src/rxp/globalStyles.ts
+ *
+ * Use these when you need token values in JS (e.g., inline styles, dynamic calculations).
+ * For CSS styling, prefer the CSS custom properties in tokens.css.
+ */
+declare const palette: {
+    readonly brandPurple: {
+        readonly '01': "#2C194D";
+        readonly '02': "#6A3DB8";
+        readonly '03': "#DDC6F9";
+        readonly '04': "#EEE2FC";
+        readonly '05': "#E3E1E6";
+    };
+    readonly offWhite: "#F7F7F7";
+    readonly offBlack: "#1D1D1D";
+    readonly white: "#FFFFFF";
+    readonly black: "#000000";
+    readonly grayPurple: {
+        readonly '01': "#EDEBF1";
+        readonly '02': "#D5D1DB";
+        readonly '03': "#C0BACA";
+        readonly '04': "#ABA3B8";
+        readonly '05': "#958CA6";
+        readonly '06': "#807594";
+        readonly '07': "#6B5E82";
+        readonly '08': "#564771";
+    };
+    readonly gray: {
+        readonly '01': "#F3F3F3";
+        readonly '02': "#EEEEEE";
+        readonly '03': "#E2E2E2";
+        readonly '04': "#BBBBBB";
+        readonly '05': "#949494";
+        readonly '06': "#737373";
+        readonly '07': "#6A6A6A";
+        readonly '08': "#535353";
+    };
+    readonly success: {
+        readonly '01': "#01795C";
+        readonly '02': "#67AF9D";
+        readonly '03': "#B3D7CE";
+        readonly '04': "#E6F2EF";
+    };
+    readonly error: {
+        readonly '01': "#7A0800";
+        readonly '02': "#E27474";
+        readonly '03': "#F0BABA";
+        readonly '04': "#FAE8E8";
+    };
+    readonly warning: {
+        readonly '01': "#C8880A";
+        readonly '05': "#FFF5E2";
+    };
+    readonly red: {
+        readonly '01': "#CE1818";
+    };
+    readonly blue: {
+        readonly '01': "#00359C";
+        readonly '02': "#1C53BA";
+        readonly '03': "#6CA3EB";
+        readonly '04': "#B1D4FF";
+        readonly '05': "#E5EEFF";
+    };
+};
+declare const spacing: {
+    readonly 12: 2;
+    readonly 18: 3;
+    readonly 25: 4;
+    readonly 37: 6;
+    readonly 50: 8;
+    readonly 75: 12;
+    readonly 87: 14;
+    readonly 100: 16;
+    readonly 112: 18;
+    readonly 125: 20;
+    readonly 150: 24;
+    readonly 175: 28;
+    readonly 200: 32;
+    readonly 250: 40;
+    readonly 275: 44;
+    readonly 300: 48;
+    readonly 325: 52;
+    readonly 350: 56;
+    readonly 375: 60;
+    readonly 400: 64;
+    readonly 500: 80;
+    readonly 600: 96;
+    readonly 725: 116;
+    readonly 800: 128;
+    readonly 900: 144;
+};
+declare const radius: {
+    readonly none: 0;
+    readonly xs: 2;
+    readonly sm: 4;
+    readonly md: 8;
+    readonly mlg: 10;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly xxl: 20;
+    readonly xxxl: 24;
+    readonly super: 100;
+    readonly full: 9999;
+};
+declare const fontFamily: {
+    readonly sans: "'ABCDiatype', system-ui, -apple-system, sans-serif";
+    readonly serif: "'CooperBT-Medium', Georgia, serif";
+    readonly mono: "'ABCDiatypeSemi-Mono', ui-monospace, monospace";
+};
+declare const fontSize: {
+    readonly 250: 10;
+    readonly 300: 12;
+    readonly 350: 14;
+    readonly 400: 16;
+    readonly 450: 18;
+    readonly 500: 20;
+    readonly 550: 22;
+    readonly 600: 24;
+    readonly 700: 28;
+    readonly 800: 32;
+    readonly 900: 36;
+    readonly 1000: 40;
+    readonly 1200: 48;
+};
+declare const lineHeight: {
+    readonly 350: 14;
+    readonly 400: 16;
+    readonly 450: 18;
+    readonly 475: 19;
+    readonly 500: 20;
+    readonly 550: 22;
+    readonly 600: 24;
+    readonly 700: 28;
+    readonly 850: 34;
+    readonly 925: 37;
+    readonly 1050: 42;
+    readonly 1225: 49;
+};
+declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly bold: 700;
+};
+
+/**
+ * Hook to access Flex design tokens in JavaScript.
+ * Returns the full token set for use in inline styles.
+ */
+declare function useFlexTheme(): {
+    palette: {
+        readonly brandPurple: {
+            readonly '01': "#2C194D";
+            readonly '02': "#6A3DB8";
+            readonly '03': "#DDC6F9";
+            readonly '04': "#EEE2FC";
+            readonly '05': "#E3E1E6";
+        };
+        readonly offWhite: "#F7F7F7";
+        readonly offBlack: "#1D1D1D";
+        readonly white: "#FFFFFF";
+        readonly black: "#000000";
+        readonly grayPurple: {
+            readonly '01': "#EDEBF1";
+            readonly '02': "#D5D1DB";
+            readonly '03': "#C0BACA";
+            readonly '04': "#ABA3B8";
+            readonly '05': "#958CA6";
+            readonly '06': "#807594";
+            readonly '07': "#6B5E82";
+            readonly '08': "#564771";
+        };
+        readonly gray: {
+            readonly '01': "#F3F3F3";
+            readonly '02': "#EEEEEE";
+            readonly '03': "#E2E2E2";
+            readonly '04': "#BBBBBB";
+            readonly '05': "#949494";
+            readonly '06': "#737373";
+            readonly '07': "#6A6A6A";
+            readonly '08': "#535353";
+        };
+        readonly success: {
+            readonly '01': "#01795C";
+            readonly '02': "#67AF9D";
+            readonly '03': "#B3D7CE";
+            readonly '04': "#E6F2EF";
+        };
+        readonly error: {
+            readonly '01': "#7A0800";
+            readonly '02': "#E27474";
+            readonly '03': "#F0BABA";
+            readonly '04': "#FAE8E8";
+        };
+        readonly warning: {
+            readonly '01': "#C8880A";
+            readonly '05': "#FFF5E2";
+        };
+        readonly red: {
+            readonly '01': "#CE1818";
+        };
+        readonly blue: {
+            readonly '01': "#00359C";
+            readonly '02': "#1C53BA";
+            readonly '03': "#6CA3EB";
+            readonly '04': "#B1D4FF";
+            readonly '05': "#E5EEFF";
+        };
+    };
+    spacing: {
+        readonly 12: 2;
+        readonly 18: 3;
+        readonly 25: 4;
+        readonly 37: 6;
+        readonly 50: 8;
+        readonly 75: 12;
+        readonly 87: 14;
+        readonly 100: 16;
+        readonly 112: 18;
+        readonly 125: 20;
+        readonly 150: 24;
+        readonly 175: 28;
+        readonly 200: 32;
+        readonly 250: 40;
+        readonly 275: 44;
+        readonly 300: 48;
+        readonly 325: 52;
+        readonly 350: 56;
+        readonly 375: 60;
+        readonly 400: 64;
+        readonly 500: 80;
+        readonly 600: 96;
+        readonly 725: 116;
+        readonly 800: 128;
+        readonly 900: 144;
+    };
+    radius: {
+        readonly none: 0;
+        readonly xs: 2;
+        readonly sm: 4;
+        readonly md: 8;
+        readonly mlg: 10;
+        readonly lg: 12;
+        readonly xl: 16;
+        readonly xxl: 20;
+        readonly xxxl: 24;
+        readonly super: 100;
+        readonly full: 9999;
+    };
+    fontFamily: {
+        readonly sans: "'ABCDiatype', system-ui, -apple-system, sans-serif";
+        readonly serif: "'CooperBT-Medium', Georgia, serif";
+        readonly mono: "'ABCDiatypeSemi-Mono', ui-monospace, monospace";
+    };
+    fontSize: {
+        readonly 250: 10;
+        readonly 300: 12;
+        readonly 350: 14;
+        readonly 400: 16;
+        readonly 450: 18;
+        readonly 500: 20;
+        readonly 550: 22;
+        readonly 600: 24;
+        readonly 700: 28;
+        readonly 800: 32;
+        readonly 900: 36;
+        readonly 1000: 40;
+        readonly 1200: 48;
+    };
+    lineHeight: {
+        readonly 350: 14;
+        readonly 400: 16;
+        readonly 450: 18;
+        readonly 475: 19;
+        readonly 500: 20;
+        readonly 550: 22;
+        readonly 600: 24;
+        readonly 700: 28;
+        readonly 850: 34;
+        readonly 925: 37;
+        readonly 1050: 42;
+        readonly 1225: 49;
+    };
+    fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly bold: 700;
+    };
+};
+
+/**
+ * All typography variant types from Genoa's design system.
+ * Maps 1:1 to the .flex-type-* CSS classes in typography.css.
+ */
+type TypographyType = 'hero.lg' | 'hero.lg.italic' | 'hero.lg.number' | 'hero.md' | 'hero.md.italic' | 'hero.sm' | 'hero.sm.expressive' | 'hero.sm.expressive.italic' | 'hero.sm.number' | 'page.title' | 'section.title' | 'title.number' | 'header.sm' | 'headline' | 'body' | 'body.md' | 'body.sm' | 'body.xs' | 'body.bold' | 'body.md.bold' | 'body.input' | 'body.hyperlink' | 'body.md.hyperlink' | 'label' | 'label.sm' | 'label.sm.bold' | 'label.sm.hyperlink' | 'button' | 'button.sm' | 'number' | 'number.bold' | 'caption' | 'caption.hyperlink' | 'overline';
+interface TypographyProps {
+    type?: TypographyType;
+    color?: string;
+    weight?: 400 | 500 | 700;
+    align?: 'left' | 'center' | 'right';
+    as?: keyof React$1.JSX.IntrinsicElements;
+    style?: React$1.CSSProperties;
+    children?: React$1.ReactNode;
+    className?: string;
+}
+declare function Typography({ type, color, weight, align, as, style, children, className, }: TypographyProps): React$1.ReactElement<{
+    style: React$1.CSSProperties;
+    className: string | undefined;
+}, string | React$1.JSXElementConstructor<any>>;
+
+interface DividerProps {
+    color?: string;
+    spacing?: number;
+    style?: React$1.CSSProperties;
+}
+declare function Divider({ color, spacing, style }: DividerProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps {
+    variant?: 'primary' | 'secondary' | 'outline' | 'minimal' | 'destructive';
+    size?: 'default' | 'sm';
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: React$1.ReactNode;
+    fullWidth?: boolean;
+    onClick?: () => void;
+    children?: React$1.ReactNode;
+    style?: React$1.CSSProperties;
+    type?: 'button' | 'submit' | 'reset';
+}
+declare function Button({ variant, size, disabled, loading, icon, fullWidth, onClick, children, style, type, }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface TextFieldProps {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    helperText?: string;
+    error?: string;
+    disabled?: boolean;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+    onChange?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    style?: React$1.CSSProperties;
+    inputStyle?: React$1.CSSProperties;
+}
+declare function TextField({ label, value, placeholder, helperText, error, disabled, type, onChange, onFocus, onBlur, style, inputStyle, }: TextFieldProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    style?: React$1.CSSProperties;
+}
+declare function Checkbox({ checked, onChange, label, disabled, style }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface RadioProps {
+    selected?: boolean;
+    onSelect?: () => void;
+    label?: string;
+    disabled?: boolean;
+    style?: React$1.CSSProperties;
+}
+declare function Radio({ selected, onSelect, label, disabled, style }: RadioProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    style?: React$1.CSSProperties;
+}
+declare function Toggle({ checked, onChange, disabled, style }: ToggleProps): react_jsx_runtime.JSX.Element;
+
+interface CardProps {
+    variant?: 'default' | 'subdued' | 'brand' | 'elevated';
+    selected?: boolean;
+    onClick?: () => void;
+    header?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+    style?: React$1.CSSProperties;
+}
+declare function Card({ variant, selected, onClick, header, children, style, }: CardProps): react_jsx_runtime.JSX.Element;
+
+interface ListItemProps {
+    title: string;
+    subtitle?: string;
+    leading?: React$1.ReactNode;
+    trailing?: React$1.ReactNode;
+    onClick?: () => void;
+    divider?: boolean;
+    style?: React$1.CSSProperties;
+}
+declare function ListItem({ title, subtitle, leading, trailing, onClick, divider, style, }: ListItemProps): react_jsx_runtime.JSX.Element;
+
+interface PageProps {
+    children: React$1.ReactNode;
+    stickyFooter?: React$1.ReactNode;
+    backgroundColor?: string;
+    style?: React$1.CSSProperties;
+}
+declare function Page({ children, stickyFooter, backgroundColor, style }: PageProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: React$1.ReactNode;
+    style?: React$1.CSSProperties;
+}
+declare function Modal({ open, onClose, title, children, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface SelectProps {
+    label?: string;
+    value?: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+    style?: React$1.CSSProperties;
+}
+declare function Select({ label, value, options, onChange, placeholder, error, disabled, style, }: SelectProps): react_jsx_runtime.JSX.Element;
+
+interface ToastProps {
+    title: string;
+    description?: string;
+    variant?: 'brand' | 'success' | 'warning' | 'error';
+    visible: boolean;
+    onDismiss?: () => void;
+    duration?: number;
+}
+declare function Toast({ title, description, variant, visible, onDismiss, duration }: ToastProps): react_jsx_runtime.JSX.Element | null;
+/** Simple hook for managing toast state */
+declare function useToast(): {
+    toastProps: ToastProps;
+    show: (props: Omit<ToastProps, "visible" | "onDismiss">) => void;
+    dismiss: () => void;
+};
+
+interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number | string;
+    style?: React$1.CSSProperties;
+}
+declare function Skeleton({ width, height, borderRadius, style, }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressBarProps {
+    progress: number;
+    width?: number | string;
+    height?: number;
+    style?: React$1.CSSProperties;
+}
+declare function ProgressBar({ progress, width, height, style, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+interface AccordionProps {
+    title: string;
+    children: React$1.ReactNode;
+    defaultOpen?: boolean;
+    onChange?: (open: boolean) => void;
+    style?: React$1.CSSProperties;
+}
+declare function Accordion({ title, children, defaultOpen, onChange, style, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, type AccordionProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, FlexProvider, ListItem, type ListItemProps, Modal, type ModalProps, Page, type PageProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, Select, type SelectProps, Skeleton, type SkeletonProps, TextField, type TextFieldProps, Toast, type ToastProps, Toggle, type ToggleProps, Typography, type TypographyProps, type TypographyType, fontFamily, fontSize, fontWeight, lineHeight, palette, radius, spacing, useFlexTheme, useToast };