@andre-gra/oryx-ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,622 @@
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * An accessible accordion component for expanding/collapsing content sections.
+ *
+ * @example
+ * ```tsx
+ * <Accordion items={[
+ *   { mainText: "Section 1", collapsibleText: "Content 1" },
+ *   { mainText: "Section 2", collapsibleText: "Content 2" }
+ * ]} />
+ * ```
+ */
+export declare const Accordion: ({ items, className }: AccordionProps) => JSX_2.Element;
+
+/**
+ * Item structure for Accordion
+ */
+export declare interface AccordionItem {
+    /** Header text displayed on the trigger */
+    mainText: string;
+    /** Content revealed when expanded */
+    collapsibleText: string;
+}
+
+/**
+ * Props for the Accordion component
+ */
+export declare interface AccordionProps {
+    /** Array of accordion items */
+    items: AccordionItem[];
+    /** Additional className for the root element */
+    className?: string;
+}
+
+/**
+ * Component that tracks theme and size changes and reports to the agent
+ * Should be placed inside ThemeProvider, SizeProvider, and ThemeAgentProvider
+ */
+export declare const AgentInteractionTracker: () => null;
+
+/**
+ * Agent automation mode
+ */
+export declare type AgentMode = "passive" | "semi-automatic" | "full-automatic";
+
+/**
+ * AI agent recommendation with confidence score
+ */
+export declare interface AgentRecommendation {
+    theme: Theme;
+    size: Size;
+    confidence: number;
+    reason: string;
+}
+
+/**
+ * Overall agent state and configuration
+ */
+export declare interface AgentState {
+    mode: AgentMode;
+    isActive: boolean;
+    isLearning: boolean;
+    interactionCount: number;
+    lastRecommendation?: AgentRecommendation;
+    currentSession: {
+        theme: Theme;
+        size: Size;
+        startTime: number;
+    };
+}
+
+/**
+ * A modal dialog for confirming destructive actions.
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog
+ *   texts={{
+ *     buttonTrigger: "Delete",
+ *     content: "Are you sure?",
+ *     description: "This action cannot be undone.",
+ *     buttonCancel: "Cancel",
+ *     action: "Delete"
+ *   }}
+ *   onAction={() => handleDelete()}
+ * />
+ * ```
+ */
+export declare const AlertDialog: ({ texts, onAction, onCancel, className }: AlertDialogProps) => JSX_2.Element;
+
+/**
+ * Props for the AlertDialog component
+ */
+export declare interface AlertDialogProps {
+    /** Text configuration */
+    texts: AlertDialogTexts;
+    /** Callback when action is confirmed */
+    onAction?: () => void;
+    /** Callback when dialog is cancelled */
+    onCancel?: () => void;
+    /** Additional className for trigger */
+    className?: string;
+}
+
+/**
+ * Text configuration for AlertDialog
+ */
+export declare interface AlertDialogTexts {
+    /** Text for the trigger button */
+    buttonTrigger: string;
+    /** Title/heading content */
+    content: string;
+    /** Description text */
+    description: string;
+    /** Cancel button text */
+    buttonCancel: string;
+    /** Confirm action button text */
+    action: string;
+}
+
+declare type Amber = "amber";
+
+declare type AmberDark = "amberDark";
+
+declare type Blue = "blue";
+
+declare type BlueDark = "blueDark";
+
+declare type Brown = "brown";
+
+declare type BrownDark = "brownDark";
+
+declare type Crimson = "crimson";
+
+declare type CrimsonDark = "crimsonDark";
+
+declare type Cyan = "cyan";
+
+declare type CyanDark = "cyanDark";
+
+declare type Grass = "grass";
+
+declare type GrassDark = "grassDark";
+
+declare type Green = "green";
+
+declare type GreenDark = "greenDark";
+
+declare type Indigo = "indigo";
+
+declare type IndigoDark = "indigoDark";
+
+/**
+ * Tracks user interactions with theme and size selections
+ */
+export declare class InteractionTracker {
+    private interactions;
+    private currentSession;
+    constructor();
+    /**
+     * Start tracking a new theme/size session
+     */
+    startSession(theme: Theme, size: Size): void;
+    /**
+     * End the current session and record the interaction
+     */
+    endSession(): void;
+    /**
+     * Get all recorded interactions
+     */
+    getInteractions(): StyleInteraction[];
+    /**
+     * Get interactions within a time range
+     */
+    getInteractionsInRange(startTime: number, endTime: number): StyleInteraction[];
+    /**
+     * Get recent interactions (last N days)
+     */
+    getRecentInteractions(days?: number): StyleInteraction[];
+    /**
+     * Clear all interaction history
+     */
+    clearHistory(): void;
+    /**
+     * Get total number of interactions
+     */
+    getInteractionCount(): number;
+    /**
+     * Load interactions from localStorage
+     */
+    private loadFromStorage;
+    /**
+     * Save interactions to localStorage
+     */
+    private saveToStorage;
+}
+
+declare type Lime = "lime";
+
+declare type LimeDark = "limeDark";
+
+declare type Mint = "mint";
+
+declare type MintDark = "mintDark";
+
+/**
+ * A responsive navigation menu with dropdowns and featured items.
+ *
+ * @example
+ * ```tsx
+ * <NavigationMenu items={[
+ *   {
+ *     title: "Products",
+ *     item: [
+ *       { type: "card", title: "Featured", href: "/", text: "Our main product" },
+ *       { type: "text", title: "Other", href: "/other", text: "Description" }
+ *     ]
+ *   },
+ *   { title: "About", href: "/about" }
+ * ]} />
+ * ```
+ */
+export declare const NavigationMenu: ({ items, className }: NavigationMenuProps) => JSX_2.Element;
+
+/**
+ * Navigation menu item content
+ */
+export declare interface NavigationMenuItem {
+    /** Item display type: "card" for featured, "text" for simple */
+    type: "card" | "text";
+    /** Item title */
+    title: string;
+    /** Link URL */
+    href: string;
+    /** Description text */
+    text: string;
+}
+
+/**
+ * Props for the NavigationMenu component
+ */
+export declare interface NavigationMenuProps {
+    /** Menu sections */
+    items: NavigationMenuSection[];
+    /** Additional className */
+    className?: string;
+}
+
+/**
+ * Navigation menu section
+ */
+export declare interface NavigationMenuSection {
+    /** Items in this section (omit for simple link) */
+    item?: NavigationMenuItem[];
+    /** Section title */
+    title: string;
+    /** Direct link href (for sections without dropdown) */
+    href?: string;
+}
+
+declare type Orange = "orange";
+
+declare type OrangeDark = "orangeDark";
+
+/**
+ * Unified provider that wraps all Oryx UI context providers.
+ * Use this at the root of your application to enable theming, sizing, and AI agent features.
+ *
+ * @example
+ * ```tsx
+ * import { OryxProvider } from 'oryx-ui';
+ * import 'oryx-ui/styles';
+ *
+ * function App() {
+ *   return (
+ *     <OryxProvider>
+ *       <YourApp />
+ *     </OryxProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare const OryxProvider: ({ children, defaultTheme: _defaultTheme, defaultSize: _defaultSize, enableAgent, }: OryxProviderProps) => JSX_2.Element;
+
+/**
+ * Props for OryxProvider
+ */
+export declare interface OryxProviderProps {
+    /** Child components */
+    children: ReactNode;
+    /** Default theme (reserved for future use) */
+    defaultTheme?: Theme;
+    /** Default size (reserved for future use) */
+    defaultSize?: Size;
+    /** Enable AI theme agent (defaults to true) */
+    enableAgent?: boolean;
+}
+
+declare type Pink = "pink";
+
+declare type PinkDark = "pinkDark";
+
+declare type Plum = "plum";
+
+declare type PlumDark = "plumDark";
+
+/**
+ * A popover component with form fields.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   buttonTriggerLabel="Settings"
+ *   fields={[
+ *     {
+ *       fieldTitle: "Dimensions",
+ *       field: [{ label: "Width", htmlFor: "width", id: "width", defaultValue: "100%" }]
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Popover: ({ buttonTriggerLabel, fields, className }: PopoverProps) => JSX_2.Element;
+
+/**
+ * Field definition for Popover form
+ */
+export declare interface PopoverField {
+    /** Field label */
+    label: string;
+    /** htmlFor attribute */
+    htmlFor: string;
+    /** Input id */
+    id: string;
+    /** Default value */
+    defaultValue?: string;
+}
+
+/**
+ * Field group with title
+ */
+export declare interface PopoverFieldGroup {
+    /** Fields in this group */
+    field: PopoverField[];
+    /** Group title */
+    fieldTitle: string;
+}
+
+/**
+ * Props for the Popover component
+ */
+export declare interface PopoverProps {
+    /** Aria label for trigger button */
+    buttonTriggerLabel?: string;
+    /** Aria label for close button */
+    buttonCloseLabel?: string;
+    /** Field groups to render */
+    fields: PopoverFieldGroup[];
+    /** Additional className */
+    className?: string;
+}
+
+declare type ProviderProps = {
+    children: default_2.ReactNode;
+};
+
+declare type ProviderProps_2 = {
+    children: default_2.ReactNode;
+};
+
+declare type ProviderProps_3 = {
+    children: React.ReactNode;
+    onRecommendation?: (recommendation: AgentRecommendation) => void;
+};
+
+declare type Purple = "purple";
+
+declare type PurpleDark = "purpleDark";
+
+declare type Red = "red";
+
+declare type RedDark = "redDark";
+
+/**
+ * A styled select/dropdown component with grouped options.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   label="Fruits"
+ *   placeholder="Select a fruit..."
+ *   options={[
+ *     { label: "Fruits", group: [{ value: "apple", label: "Apple" }] }
+ *   ]}
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+export declare const Select: ({ label, placeholder, options, value, onValueChange, className, id, }: SelectProps) => JSX_2.Element;
+
+/**
+ * Individual option item
+ */
+export declare interface SelectOption {
+    /** Display label */
+    label: string;
+    /** Value to be submitted */
+    value: string;
+    /** Whether option is disabled */
+    disabled?: boolean;
+}
+
+/**
+ * Group of options with a label
+ */
+export declare interface SelectOptionGroup {
+    /** Options in this group */
+    group: SelectOption[];
+    /** Group label */
+    label: string;
+}
+
+/**
+ * Props for the Select component
+ */
+export declare interface SelectProps {
+    /** Accessible label for the select */
+    label: string;
+    /** Placeholder text when no value selected */
+    placeholder?: string;
+    /** Grouped options */
+    options: SelectOptionGroup[];
+    /** Controlled value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Additional className */
+    className?: string;
+    /** Optional ID for accessibility */
+    id?: string;
+}
+
+export declare type Size = "2" | "3" | "4";
+
+export declare const SizeContext: default_2.Context<SizeContextProps | null>;
+
+export declare interface SizeContextProps {
+    size: Size;
+    changeSize: (size: Size) => void;
+}
+
+export declare const SizeProvider: default_2.FC<ProviderProps_2>;
+
+declare type Sky = "sky";
+
+declare type SkyDark = "skyDark";
+
+/**
+ * Represents a single interaction event when user changes theme or size
+ */
+export declare interface StyleInteraction {
+    theme: Theme;
+    size: Size;
+    timestamp: number;
+    duration?: number;
+    dayOfWeek: number;
+    hourOfDay: number;
+}
+
+/**
+ * Aggregated preference data for a specific theme+size combination
+ */
+export declare interface StylePreference {
+    theme: Theme;
+    size: Size;
+    usageCount: number;
+    totalDuration: number;
+    lastUsed: number;
+    score: number;
+    timePatterns: {
+        morning: number;
+        afternoon: number;
+        evening: number;
+        night: number;
+    };
+    dayPatterns: number[];
+}
+
+declare type Teal = "teal";
+
+declare type TealDark = "tealDark";
+
+export declare type Theme = `theme-${Amber | Teal | TealDark | AmberDark | Mint | MintDark | TomatoDark | Tomato | Red | RedDark | Crimson | CrimsonDark | Pink | PinkDark | Plum | PlumDark | Purple | PurpleDark | Violet | VioletDark | Indigo | IndigoDark | Blue | BlueDark | Cyan | CyanDark | GreenDark | Green | GrassDark | Grass | OrangeDark | Orange | BrownDark | Brown | SkyDark | Sky | Lime | LimeDark | Yellow | YellowDark}`;
+
+/**
+ * AI Agent that learns user preferences and recommends theme/size combinations
+ */
+export declare class ThemeAgent {
+    private tracker;
+    private preferences;
+    private mode;
+    constructor();
+    /**
+     * Record a theme/size change
+     */
+    recordChange(theme: Theme, size: Size): void;
+    /**
+     * Generates a theme based on a natural language prompt.
+     * For now, this is a simplified version using keyword matching.
+     */
+    generateThemeFromPrompt(prompt: string): Theme;
+    /**
+     * Get current recommendation based on learned preferences
+     */
+    getRecommendation(): AgentRecommendation | null;
+    /**
+     * Get insights about user preferences
+     */
+    getInsights(): string[];
+    /**
+     * Set agent mode
+     */
+    setMode(mode: AgentMode): void;
+    /**
+     * Get current mode
+     */
+    getMode(): AgentMode;
+    /**
+     * Get interaction count
+     */
+    getInteractionCount(): number;
+    /**
+     * Update preferences based on interaction history
+     */
+    private updatePreferences;
+    /**
+     * Calculate preference score
+     */
+    private calculateScore;
+    /**
+     * Update time pattern for a preference
+     */
+    private updateTimePattern;
+    /**
+     * Get time-based boost for a preference
+     */
+    private getTimeBoost;
+    /**
+     * Get user's time preferences as a string
+     */
+    private getTimePreferences;
+    /**
+     * Generate human-readable reason for recommendation
+     */
+    private generateReason;
+    /**
+     * Get preference key
+     */
+    private getPreferenceKey;
+    /**
+     * Load preferences from localStorage
+     */
+    private loadPreferences;
+    /**
+     * Save preferences to localStorage
+     */
+    private savePreferences;
+}
+
+export declare const ThemeAgentContext: Context<ThemeAgentContextValue | null>;
+
+export declare interface ThemeAgentContextValue {
+    state: AgentState;
+    recommendation: AgentRecommendation | null;
+    enableAgent: () => void;
+    disableAgent: () => void;
+    setMode: (mode: AgentMode) => void;
+    getInsights: () => string[];
+    recordInteraction: (theme: Theme, size: Size) => void;
+    applyRecommendation: ((rec: AgentRecommendation) => void) | null;
+    generateThemeFromPrompt: (prompt: string) => Theme | null;
+}
+
+export declare const ThemeAgentPanel: () => JSX_2.Element | null;
+
+export declare const ThemeAgentProvider: React.FC<ProviderProps_3>;
+
+export declare const ThemeContext: default_2.Context<ThemeContextProps | null>;
+
+export declare interface ThemeContextProps {
+    theme: Theme;
+    changeTheme: (theme: Theme) => void;
+}
+
+export declare const ThemeProvider: default_2.FC<ProviderProps>;
+
+declare type Tomato = "tomato";
+
+declare type TomatoDark = "tomatoDark";
+
+export declare const useSize: () => SizeContextProps;
+
+export declare const useTheme: () => ThemeContextProps;
+
+/**
+ * Hook to access the theme agent from components
+ */
+export declare const useThemeAgent: () => ThemeAgentContextValue;
+
+declare type Violet = "violet";
+
+declare type VioletDark = "violetDark";
+
+declare type Yellow = "yellow";
+
+declare type YellowDark = "yellowDark";
+
+export { }