apple-liquid-glass-react-ui-kit 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,235 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const colors: {
+    readonly primary: "#0066A1";
+    readonly secondary: "#00B2A9";
+    readonly text: {
+        readonly primary: "#111827";
+        readonly secondary: "#6B7280";
+    };
+    readonly surface: {
+        readonly base: "rgba(255,255,255,0.72)";
+        readonly strong: "rgba(255,255,255,0.88)";
+        readonly dark: "rgba(20,20,25,0.65)";
+    };
+    readonly border: {
+        readonly glass: "rgba(255,255,255,0.35)";
+    };
+    readonly status: {
+        readonly info: "#0EA5E9";
+        readonly success: "#22C55E";
+        readonly warning: "#F59E0B";
+        readonly error: "#EF4444";
+    };
+};
+type ColorTokens = typeof colors;
+
+declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 12: "48px";
+};
+type SpacingTokens = typeof spacing;
+
+declare const typography: {
+    readonly fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'";
+    readonly display: {
+        readonly fontSize: "40px";
+        readonly lineHeight: "48px";
+        readonly fontWeight: 700;
+    };
+    readonly h1: {
+        readonly fontSize: "32px";
+        readonly lineHeight: "40px";
+        readonly fontWeight: 700;
+    };
+    readonly h2: {
+        readonly fontSize: "24px";
+        readonly lineHeight: "32px";
+        readonly fontWeight: 600;
+    };
+    readonly body: {
+        readonly fontSize: "16px";
+        readonly lineHeight: "24px";
+        readonly fontWeight: 400;
+    };
+    readonly caption: {
+        readonly fontSize: "13px";
+        readonly lineHeight: "18px";
+        readonly fontWeight: 400;
+    };
+};
+type TypographyTokens = typeof typography;
+
+declare const radius: {
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "20px";
+    readonly xl: "28px";
+    readonly full: "999px";
+};
+type RadiusTokens = typeof radius;
+
+declare const shadows: {
+    readonly glass: "0 8px 32px rgba(0,0,0,0.12)";
+    readonly floating: "0 16px 48px rgba(0,0,0,0.18)";
+    readonly modal: "0 24px 64px rgba(0,0,0,0.22)";
+};
+type ShadowTokens = typeof shadows;
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'glass' | 'danger';
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    size?: "sm" | "md" | "lg";
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    state?: "default" | "focused" | "error" | "disabled";
+} & React.RefAttributes<HTMLInputElement>>;
+
+type Variant$1 = 'info' | 'success' | 'warning' | 'error';
+type Props$2 = {
+    variant?: Variant$1;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+};
+declare function Badge({ variant, children, style }: Props$2): react_jsx_runtime.JSX.Element;
+
+type AvatarProps = {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    size?: number;
+    style?: React.CSSProperties;
+};
+declare function Avatar({ src, alt, initials, size, style }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type Variant = 'default' | 'glass' | 'active';
+declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: Variant;
+    icon: React.ReactNode;
+    size?: number;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+type Props$1 = React.HTMLAttributes<HTMLDivElement> & {
+    tone?: 'light' | 'dark';
+    strength?: 'base' | 'strong';
+    floating?: boolean;
+};
+declare function GlassCard({ tone, strength, floating, style, ...rest }: Props$1): react_jsx_runtime.JSX.Element;
+
+type Props = {
+    label: string;
+    value: string | number;
+    delta?: string;
+    icon?: React.ReactNode;
+    tone?: 'light' | 'dark';
+    style?: React.CSSProperties;
+};
+declare function StatCard({ label, value, delta, icon, tone, style }: Props): react_jsx_runtime.JSX.Element;
+
+type SearchBarProps = {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    onClear?: () => void;
+    leadingIcon?: React.ReactNode;
+    clearIcon?: React.ReactNode;
+};
+declare function SearchBar({ value, onChange, placeholder, onClear, leadingIcon, clearIcon }: SearchBarProps): react_jsx_runtime.JSX.Element;
+
+type FormFieldProps = {
+    label: string;
+    hint?: string;
+    error?: string;
+    children: React.ReactNode;
+};
+declare function FormField({ label, hint, error, children }: FormFieldProps): react_jsx_runtime.JSX.Element;
+
+type ToastVariant = 'success' | 'error' | 'info' | 'warning';
+type ToastProps = {
+    title: string;
+    message?: string;
+    variant?: ToastVariant;
+    onDismiss?: () => void;
+};
+declare function Toast({ title, message, variant, onDismiss }: ToastProps): react_jsx_runtime.JSX.Element;
+
+type AppShellProps = {
+    sidebar?: React.ReactNode;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+};
+declare function AppShell({ sidebar, header, children }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+type DashboardGridProps = {
+    stats?: React.ReactNode;
+    main?: React.ReactNode;
+    side?: React.ReactNode;
+};
+declare function DashboardGrid({ stats, main, side }: DashboardGridProps): react_jsx_runtime.JSX.Element;
+
+type ModalProps = {
+    open: boolean;
+    title?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    onClose: () => void;
+};
+declare function Modal({ open, title, children, footer, onClose }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+type Column<T> = {
+    key: string;
+    header: string;
+    render: (row: T) => React.ReactNode;
+    width?: string;
+};
+type DataTableProps<T> = {
+    columns: Column<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    emptyState?: React.ReactNode;
+};
+declare function DataTable<T>({ columns, rows, rowKey, emptyState }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+type Step = {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+};
+type FormWizardProps = {
+    steps: Step[];
+    activeStepId: string;
+    onBack?: () => void;
+    onNext?: () => void;
+    onFinish?: () => void;
+    isLast?: boolean;
+};
+declare function FormWizard({ steps, activeStepId, onBack, onNext, onFinish, isLast }: FormWizardProps): react_jsx_runtime.JSX.Element;
+
+type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    maxWidth?: number;
+};
+declare function PageContainer({ maxWidth, style, ...rest }: PageContainerProps): react_jsx_runtime.JSX.Element;
+
+type SectionProps = React.HTMLAttributes<HTMLElement> & {
+    title?: React.ReactNode;
+    actions?: React.ReactNode;
+};
+declare function Section({ title, actions, children, style, ...rest }: SectionProps): react_jsx_runtime.JSX.Element;
+
+type GridProps = React.HTMLAttributes<HTMLDivElement> & {
+    columns?: string;
+    gap?: keyof typeof spacing;
+};
+declare function Grid({ columns, gap, style, ...rest }: GridProps): react_jsx_runtime.JSX.Element;
+
+export { AppShell, type AppShellProps, Avatar, type AvatarProps, Badge, Button, type ColorTokens, type Column, DashboardGrid, type DashboardGridProps, DataTable, type DataTableProps, FormField, type FormFieldProps, FormWizard, type FormWizardProps, GlassCard, Grid, type GridProps, IconButton, Input, Modal, type ModalProps, PageContainer, type PageContainerProps, type RadiusTokens, SearchBar, type SearchBarProps, Section, type SectionProps, type ShadowTokens, type SpacingTokens, StatCard, type Step, Toast, type ToastProps, type ToastVariant, type TypographyTokens, colors, radius, shadows, spacing, typography };

package/dist/index.d.ts

@@ -0,0 +1,235 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const colors: {
+    readonly primary: "#0066A1";
+    readonly secondary: "#00B2A9";
+    readonly text: {
+        readonly primary: "#111827";
+        readonly secondary: "#6B7280";
+    };
+    readonly surface: {
+        readonly base: "rgba(255,255,255,0.72)";
+        readonly strong: "rgba(255,255,255,0.88)";
+        readonly dark: "rgba(20,20,25,0.65)";
+    };
+    readonly border: {
+        readonly glass: "rgba(255,255,255,0.35)";
+    };
+    readonly status: {
+        readonly info: "#0EA5E9";
+        readonly success: "#22C55E";
+        readonly warning: "#F59E0B";
+        readonly error: "#EF4444";
+    };
+};
+type ColorTokens = typeof colors;
+
+declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 12: "48px";
+};
+type SpacingTokens = typeof spacing;
+
+declare const typography: {
+    readonly fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'";
+    readonly display: {
+        readonly fontSize: "40px";
+        readonly lineHeight: "48px";
+        readonly fontWeight: 700;
+    };
+    readonly h1: {
+        readonly fontSize: "32px";
+        readonly lineHeight: "40px";
+        readonly fontWeight: 700;
+    };
+    readonly h2: {
+        readonly fontSize: "24px";
+        readonly lineHeight: "32px";
+        readonly fontWeight: 600;
+    };
+    readonly body: {
+        readonly fontSize: "16px";
+        readonly lineHeight: "24px";
+        readonly fontWeight: 400;
+    };
+    readonly caption: {
+        readonly fontSize: "13px";
+        readonly lineHeight: "18px";
+        readonly fontWeight: 400;
+    };
+};
+type TypographyTokens = typeof typography;
+
+declare const radius: {
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "20px";
+    readonly xl: "28px";
+    readonly full: "999px";
+};
+type RadiusTokens = typeof radius;
+
+declare const shadows: {
+    readonly glass: "0 8px 32px rgba(0,0,0,0.12)";
+    readonly floating: "0 16px 48px rgba(0,0,0,0.18)";
+    readonly modal: "0 24px 64px rgba(0,0,0,0.22)";
+};
+type ShadowTokens = typeof shadows;
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'glass' | 'danger';
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+    size?: "sm" | "md" | "lg";
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    state?: "default" | "focused" | "error" | "disabled";
+} & React.RefAttributes<HTMLInputElement>>;
+
+type Variant$1 = 'info' | 'success' | 'warning' | 'error';
+type Props$2 = {
+    variant?: Variant$1;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+};
+declare function Badge({ variant, children, style }: Props$2): react_jsx_runtime.JSX.Element;
+
+type AvatarProps = {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    size?: number;
+    style?: React.CSSProperties;
+};
+declare function Avatar({ src, alt, initials, size, style }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type Variant = 'default' | 'glass' | 'active';
+declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: Variant;
+    icon: React.ReactNode;
+    size?: number;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+type Props$1 = React.HTMLAttributes<HTMLDivElement> & {
+    tone?: 'light' | 'dark';
+    strength?: 'base' | 'strong';
+    floating?: boolean;
+};
+declare function GlassCard({ tone, strength, floating, style, ...rest }: Props$1): react_jsx_runtime.JSX.Element;
+
+type Props = {
+    label: string;
+    value: string | number;
+    delta?: string;
+    icon?: React.ReactNode;
+    tone?: 'light' | 'dark';
+    style?: React.CSSProperties;
+};
+declare function StatCard({ label, value, delta, icon, tone, style }: Props): react_jsx_runtime.JSX.Element;
+
+type SearchBarProps = {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    onClear?: () => void;
+    leadingIcon?: React.ReactNode;
+    clearIcon?: React.ReactNode;
+};
+declare function SearchBar({ value, onChange, placeholder, onClear, leadingIcon, clearIcon }: SearchBarProps): react_jsx_runtime.JSX.Element;
+
+type FormFieldProps = {
+    label: string;
+    hint?: string;
+    error?: string;
+    children: React.ReactNode;
+};
+declare function FormField({ label, hint, error, children }: FormFieldProps): react_jsx_runtime.JSX.Element;
+
+type ToastVariant = 'success' | 'error' | 'info' | 'warning';
+type ToastProps = {
+    title: string;
+    message?: string;
+    variant?: ToastVariant;
+    onDismiss?: () => void;
+};
+declare function Toast({ title, message, variant, onDismiss }: ToastProps): react_jsx_runtime.JSX.Element;
+
+type AppShellProps = {
+    sidebar?: React.ReactNode;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+};
+declare function AppShell({ sidebar, header, children }: AppShellProps): react_jsx_runtime.JSX.Element;
+
+type DashboardGridProps = {
+    stats?: React.ReactNode;
+    main?: React.ReactNode;
+    side?: React.ReactNode;
+};
+declare function DashboardGrid({ stats, main, side }: DashboardGridProps): react_jsx_runtime.JSX.Element;
+
+type ModalProps = {
+    open: boolean;
+    title?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    onClose: () => void;
+};
+declare function Modal({ open, title, children, footer, onClose }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+type Column<T> = {
+    key: string;
+    header: string;
+    render: (row: T) => React.ReactNode;
+    width?: string;
+};
+type DataTableProps<T> = {
+    columns: Column<T>[];
+    rows: T[];
+    rowKey: (row: T) => string;
+    emptyState?: React.ReactNode;
+};
+declare function DataTable<T>({ columns, rows, rowKey, emptyState }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+type Step = {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+};
+type FormWizardProps = {
+    steps: Step[];
+    activeStepId: string;
+    onBack?: () => void;
+    onNext?: () => void;
+    onFinish?: () => void;
+    isLast?: boolean;
+};
+declare function FormWizard({ steps, activeStepId, onBack, onNext, onFinish, isLast }: FormWizardProps): react_jsx_runtime.JSX.Element;
+
+type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    maxWidth?: number;
+};
+declare function PageContainer({ maxWidth, style, ...rest }: PageContainerProps): react_jsx_runtime.JSX.Element;
+
+type SectionProps = React.HTMLAttributes<HTMLElement> & {
+    title?: React.ReactNode;
+    actions?: React.ReactNode;
+};
+declare function Section({ title, actions, children, style, ...rest }: SectionProps): react_jsx_runtime.JSX.Element;
+
+type GridProps = React.HTMLAttributes<HTMLDivElement> & {
+    columns?: string;
+    gap?: keyof typeof spacing;
+};
+declare function Grid({ columns, gap, style, ...rest }: GridProps): react_jsx_runtime.JSX.Element;
+
+export { AppShell, type AppShellProps, Avatar, type AvatarProps, Badge, Button, type ColorTokens, type Column, DashboardGrid, type DashboardGridProps, DataTable, type DataTableProps, FormField, type FormFieldProps, FormWizard, type FormWizardProps, GlassCard, Grid, type GridProps, IconButton, Input, Modal, type ModalProps, PageContainer, type PageContainerProps, type RadiusTokens, SearchBar, type SearchBarProps, Section, type SectionProps, type ShadowTokens, type SpacingTokens, StatCard, type Step, Toast, type ToastProps, type ToastVariant, type TypographyTokens, colors, radius, shadows, spacing, typography };