@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214-snapshot.20260528192313

package/src/components/.card.md

@@ -1,42 +0,0 @@
-<!-- source-hash: 7f5f4e9fc3cf030cd0a457a087d76849 -->
-A comprehensive React card component library providing both standard card elements and a specialized horizontal layout variant for category displays.
-
-## Key Components
-
-- **Card**: Base container with rounded borders and shadow styling
-- **CardHeader**: Top section with vertical spacing for titles and descriptions
-- **CardTitle**: Large, semibold heading text with tight tracking
-- **CardDescription**: Muted subtitle text for additional context
-- **CardContent**: Main body content area with standard padding
-- **CardFooter**: Bottom section with horizontal flex layout for actions
-- **CardHorizontal**: Specialized horizontal card with icon, title, and description for homepage categories
-
-## Usage Example
-
-```typescript
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardHorizontal } from './card'
-
-// Standard card layout
-<Card className="w-full max-w-md">
-  <CardHeader>
-    <CardTitle>Getting Started</CardTitle>
-    <CardDescription>Learn the basics of our platform</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Welcome to our documentation system...</p>
-  </CardContent>
-  <CardFooter>
-    <button>Read More</button>
-  </CardFooter>
-</Card>
-
-// Horizontal card for categories
-<CardHorizontal
-  icon={<DocumentIcon />}
-  title="API Reference"
-  description="Complete API documentation and examples"
-  borderLeft={true}
-/>
-```
-
-All components are built with `React.forwardRef` for proper ref forwarding and use the `cn` utility for conditional class merging.

package/src/components/.contact-button.md

@@ -1,30 +0,0 @@
-<!-- source-hash: 06bbc1613a73935df9ce7e564ffcb143 -->
-A client-side button component that navigates users to the contact page when clicked. This component provides a reusable way to add contact navigation throughout the application with customizable styling and content.
-
-## Key Components
-
-- **ContactButton** - The main functional component that renders a clickable button
-- **ContactButtonProps** - TypeScript interface defining the component's props (children and optional className)
-- **handleClick** - Click handler function that performs client-side navigation to `/contact`
-
-## Usage Example
-
-```typescript
-import { ContactButton } from './contact-button';
-
-// Basic usage
-<ContactButton>Get in Touch</ContactButton>
-
-// With custom styling
-<ContactButton className="bg-blue-500 text-white px-4 py-2 rounded">
-  Contact Us
-</ContactButton>
-
-// With custom content
-<ContactButton className="flex items-center gap-2">
-  <MailIcon />
-  Send Message
-</ContactButton>
-```
-
-The component uses `window.location.href` for navigation, which triggers a full page reload. For Next.js applications, consider using `useRouter` from `next/navigation` for client-side routing without page reloads.

package/src/components/.drawer.md

@@ -1,46 +0,0 @@
-<!-- source-hash: 4dba78b167ab0543cc3c3511ec3f84e7 -->
-A React component library that provides a styled drawer/modal interface built on top of the Vaul primitive library. This file exports a complete set of drawer components with consistent styling and accessibility features.
-
-## Key Components
-
-- **Drawer** - Root container component with optional background scaling
-- **DrawerTrigger** - Button or element that opens the drawer
-- **DrawerContent** - Main drawer panel with bottom sheet styling and drag handle
-- **DrawerOverlay** - Semi-transparent backdrop overlay
-- **DrawerHeader/DrawerFooter** - Layout sections for drawer content organization
-- **DrawerTitle/DrawerDescription** - Semantic text components for drawer headers
-- **DrawerPortal/DrawerClose** - Portal rendering and close functionality
-
-## Usage Example
-
-```typescript
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./drawer"
-
-function MyDrawer() {
-  return (
-    <Drawer>
-      <DrawerTrigger asChild>
-        <button>Open Drawer</button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>Settings</DrawerTitle>
-          <DrawerDescription>
-            Manage your account settings and preferences.
-          </DrawerDescription>
-        </DrawerHeader>
-        {/* Drawer content */}
-      </DrawerContent>
-    </Drawer>
-  )
-}
-```
-
-The drawer appears as a bottom sheet on mobile with a drag handle, backdrop overlay, and smooth animations. All components are forwardRef-compatible and accept custom className props for styling customization.

package/src/components/.fixed-layout-container.md

@@ -1,47 +0,0 @@
-<!-- source-hash: eec64c454da156b6de3dfdb1754d4764 -->
-A React component library providing layout containers that maintain stable positioning during content loading states to prevent visual jumping and layout shifts.
-
-## Key Components
-
-- **`FixedLayoutContainer`** - Main wrapper component with configurable content types ('blog' | 'vendor') and optional pagination display
-- **`FixedContentArea`** - Content-specific container with loading state support and accessibility attributes
-- **`StableControlsContainer`** - Simple wrapper for search and filter controls
-- **`StablePaginationContainer`** - Pagination wrapper with disabled state handling
-
-## Usage Example
-
-```typescript
-import { 
-  FixedLayoutContainer, 
-  FixedContentArea, 
-  StableControlsContainer,
-  StablePaginationContainer 
-} from './fixed-layout-container'
-
-function BlogPage() {
-  const [isLoading, setIsLoading] = useState(false)
-  
-  return (
-    <FixedLayoutContainer contentType="blog" showPagination={true}>
-      <StableControlsContainer className="mb-4">
-        <SearchInput />
-        <FilterControls />
-      </StableControlsContainer>
-      
-      <FixedContentArea 
-        contentType="blog" 
-        isLoading={isLoading}
-        className="min-h-[400px]"
-      >
-        <BlogCardGrid posts={posts} />
-      </FixedContentArea>
-      
-      <StablePaginationContainer disabled={isLoading}>
-        <PaginationControls />
-      </StablePaginationContainer>
-    </FixedLayoutContainer>
-  )
-}
-```
-
-The components use a simplified approach with natural content height determination rather than forced dimensions, providing stable layouts while avoiding layout calculation issues.

package/src/components/.footer-waitlist-card.md

@@ -1,29 +0,0 @@
-<!-- source-hash: 51871db59129328dc60e5dca9f64dfcd -->
-A React component that renders a promotional waitlist card for OpenFrame, featuring smart navigation behavior that either scrolls to an existing form or navigates to the waitlist page.
-
-## Key Components
-
-- **FooterWaitlistCard**: Main component that displays OpenFrame promotional content with a call-to-action button
-- **handleClick**: Smart navigation handler that detects current page context and either scrolls to existing form or navigates to waitlist page
-- **OpenFrameLogo**: Custom logo component with configurable colors for the button icon
-- **Button**: UI component with left icon support for the call-to-action
-
-## Usage Example
-
-```typescript
-import { FooterWaitlistCard } from './footer-waitlist-card';
-
-function Footer() {
-  return (
-    <footer className="p-6">
-      <FooterWaitlistCard />
-    </footer>
-  );
-}
-
-// The component handles two scenarios automatically:
-// 1. On /waitlist page: Scrolls to #waitlist-form anchor and focuses email input
-// 2. On other pages: Navigates to /waitlist#waitlist-form
-```
-
-The component uses Next.js navigation hooks and implements smooth scrolling with automatic email input focus when already on the waitlist page. It features a responsive design with OpenFrame branding and a distinctive call-to-action button with the OpenFrame logo.

package/src/components/.join-waitlist-cta.md

@@ -1,29 +0,0 @@
-<!-- source-hash: 90522847a433b51f7e5cbd0fa607c5d4 -->
-A reusable call-to-action component that promotes OpenFrame early access signup with intelligent navigation handling and customizable behavior.
-
-## Key Components
-
-- **JoinWaitlistCTA** - Main component with OpenFrame branding, hero text, and CTA button
-- **JoinWaitlistCTAProps** - Interface defining optional custom handlers, loading states, and styling props
-- **defaultHandler** - Smart navigation logic that scrolls to form if already on waitlist page, otherwise navigates there
-- **ResponsiveIconsBlock** - Visual element displaying partner/technology icons in the bottom section
-
-## Usage Example
-
-```typescript
-// Basic usage with default behavior
-<JoinWaitlistCTA />
-
-// With custom join handler and loading state
-<JoinWaitlistCTA
-  onJoin={() => handleCustomSignup()}
-  loading={isSubmitting}
-  showBottomText={false}
-  className="mt-8"
-/>
-
-// On waitlist page (automatically scrolls to form)
-<JoinWaitlistCTA showBottomText={false} />
-```
-
-The component features a radial gradient background, OpenFrame logo with wordmark, and intelligent UX that either navigates to `/waitlist#waitlist-form` or smooth-scrolls to the form if already on the waitlist page. The CTA button includes auto-focus functionality and supports external loading states when using custom handlers.

package/src/components/.sheet.md

@@ -1,47 +0,0 @@
-<!-- source-hash: def6780e314223ec7c16ecc202b30bc5 -->
-A customizable slide-out sheet component built on Radix UI Dialog primitives, providing modal-like overlays that can slide in from any side of the screen. Features responsive design, smooth animations, and accessibility support.
-
-## Key Components
-
-- **Sheet** - Root container component (Radix Dialog.Root)
-- **SheetTrigger** - Button to open the sheet
-- **SheetContent** - Main content area with configurable slide direction
-- **SheetOverlay** - Background overlay with fade animations
-- **SheetHeader/SheetFooter** - Layout components for content organization
-- **SheetTitle/SheetDescription** - Accessible heading and description components
-- **SheetClose** - Close button with X icon
-- **SheetPortal** - Portal for rendering outside DOM tree
-
-## Usage Example
-
-```typescript
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "./sheet"
-
-function MySheet() {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <button>Open Settings</button>
-      </SheetTrigger>
-      <SheetContent side="right">
-        <SheetHeader>
-          <SheetTitle>Settings</SheetTitle>
-          <SheetDescription>
-            Configure your application preferences here.
-          </SheetDescription>
-        </SheetHeader>
-        {/* Your content */}
-      </SheetContent>
-    </Sheet>
-  )
-}
-```
-
-The `side` prop accepts "top", "bottom", "left", or "right" (default) to control slide direction. Content is responsive with mobile-optimized widths and smooth enter/exit animations.

package/src/components/.sliding-panel.md

@@ -1,48 +0,0 @@
-<!-- source-hash: 2662f35e5ddfa676dff33957c81825fe -->
-A sliding panel component that slides in from the right side of the screen, built on Headless UI Dialog for proper accessibility and smooth transitions.
-
-## Key Components
-
-- **SlidingPanel**: Main component with configurable size options (sm, md, lg, xl, half, fullscreen)
-- **SlidingPanelProps**: Interface defining component props including open state, close handler, title, subtitle, children, and optional footer
-- **Size variants**: Predefined width classes for different panel sizes
-- **Body scroll prevention**: Effect that prevents background scrolling when panel is open
-
-## Usage Example
-
-```typescript
-import { SlidingPanel } from './sliding-panel';
-import { useState } from 'react';
-
-function MyComponent() {
-  const [isPanelOpen, setIsPanelOpen] = useState(false);
-
-  return (
-    <>
-      <button onClick={() => setIsPanelOpen(true)}>
-        Open Panel
-      </button>
-      
-      <SlidingPanel
-        isOpen={isPanelOpen}
-        onClose={() => setIsPanelOpen(false)}
-        title="Panel Title"
-        subtitle="Optional subtitle"
-        size="lg"
-        footer={
-          <div className="flex gap-2">
-            <button>Cancel</button>
-            <button>Save</button>
-          </div>
-        }
-      >
-        <div className="p-6">
-          Panel content goes here
-        </div>
-      </SlidingPanel>
-    </>
-  );
-}
-```
-
-The component features smooth slide-in animations, backdrop blur, proper focus management, and responsive sizing options.

package/src/components/.tooltip.md

@@ -1,48 +0,0 @@
-<!-- source-hash: 07e48d3063c765b8f0aaadfb30488f31 -->
-A React tooltip component system with both compound and simple implementations, featuring intelligent positioning, viewport collision detection, and portal rendering.
-
-## Key Components
-
-- **`Tooltip`** - Main component for simple tooltip usage with automatic positioning
-- **`TooltipProvider`** - Context provider for compound tooltip patterns
-- **`TooltipRoot`** - State management for compound tooltips
-- **`TooltipTrigger`** - Trigger element with hover/focus handlers
-- **`TooltipContent`** - Tooltip content with conditional rendering
-- **`TooltipContext`** - React context for sharing tooltip state
-
-## Usage Example
-
-```typescript
-import { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from './tooltip'
-
-// Simple usage
-function SimpleTooltip() {
-  return (
-    <Tooltip 
-      content="This is a helpful tooltip"
-      side="top"
-      align="center"
-    >
-      <button>Hover me</button>
-    </Tooltip>
-  )
-}
-
-// Compound usage for complex content
-function CompoundTooltip() {
-  return (
-    <TooltipProvider>
-      <TooltipRoot>
-        <TooltipTrigger>
-          <button>Complex tooltip</button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <div>Rich content with formatting</div>
-        </TooltipContent>
-      </TooltipRoot>
-    </TooltipProvider>
-  )
-}
-```
-
-The component supports intelligent positioning with collision detection, custom styling with yellow text formatting, arrow indicators, and handles both mouse and keyboard interactions for accessibility.

package/src/components/.use-mobile.md

@@ -1,42 +0,0 @@
-<!-- source-hash: b52f9a2097229f30bb9694a66e168241 -->
-A React hook for detecting mobile screen sizes with responsive breakpoint detection at 768px.
-
-## Key Components
-
-- **`useIsMobile()`** - Custom hook that returns a boolean indicating if the current viewport is mobile-sized
-- **`MOBILE_BREAKPOINT`** - Constant set to 768px defining the mobile/desktop threshold
-- **Responsive listener** - Uses `matchMedia` API to detect viewport changes in real-time
-
-## Usage Example
-
-```typescript
-import { useIsMobile } from './use-mobile'
-
-function ResponsiveComponent() {
-  const isMobile = useIsMobile()
-
-  return (
-    <div>
-      {isMobile ? (
-        <MobileNavigation />
-      ) : (
-        <DesktopNavigation />
-      )}
-      <p>Current view: {isMobile ? 'Mobile' : 'Desktop'}</p>
-    </div>
-  )
-}
-
-// Conditional rendering based on screen size
-function Layout() {
-  const isMobile = useIsMobile()
-  
-  return (
-    <main className={isMobile ? 'mobile-layout' : 'desktop-layout'}>
-      {/* Content adapts to screen size */}
-    </main>
-  )
-}
-```
-
-The hook returns `false` during initial server-side rendering to prevent hydration mismatches, then updates to the correct value once mounted on the client.

package/src/components/.vendor-compact-card.md

@@ -1,66 +0,0 @@
-<!-- source-hash: fcf5e2a60dfc10761e7d21abb629aa8b -->
-A compact card component for displaying vendor information in lists, comparisons, and selection interfaces with support for pricing, scoring, and interactive states.
-
-## Key Components
-
-**Main Component:**
-- `VendorCompactCard` - Primary compact card component with configurable layout and interactions
-
-**Key Props:**
-- `vendor` - Vendor data including title, logo, pricing, and classifications
-- `score` - Optional scoring display (score/total format)
-- `isExpanded/showChevron` - Expansion state and chevron button controls
-- `showPricing` - Toggle pricing information display
-- `isEmptyState` - Special styling for placeholder/empty states
-- `isEditableText` - Inline text editing capability
-- `stackedInfoTop/stackedInfoBottom` - Additional info elements in stacked layout
-- `linkToVendor` - Auto-navigation to vendor detail page
-
-**Interactive Elements:**
-- Chevron expansion button with customizable styling
-- X button for removal/closing actions
-- Click-to-edit text input for vendor names
-- Pricing display integration using `PricingDisplay` component
-
-## Usage Example
-
-```typescript
-import { VendorCompactCard } from './vendor-compact-card';
-
-// Basic vendor card
-<VendorCompactCard
-  vendor={{
-    id: 1,
-    title: "Flamingo MSP",
-    slug: "flamingo-msp",
-    logo: "/logos/flamingo.png",
-    vendor_classification: [
-      { classification: 'open_source' }
-    ]
-  }}
-  score={{ score: 8, total: 10 }}
-  showPricing={true}
-  linkToVendor={true}
-/>
-
-// Expandable card with custom actions
-<VendorCompactCard
-  vendor={vendorData}
-  isExpanded={expanded}
-  onChevronClick={() => setExpanded(!expanded)}
-  onXClick={() => removeVendor(vendorData.id)}
-  rightAddon={<CustomBadge />}
-  stackedInfoTop={<PricingBadge />}
-  className="border rounded-lg p-4"
-/>
-
-// Editable card for comparison tables
-<VendorCompactCard
-  vendor={vendor}
-  isEditableText={true}
-  editableValue={customName}
-  onEditableChange={setCustomName}
-  comparisonContext={true}
-  featureSummary="Core MSP features included"
-/>
-```

package/src/components/.x-button.md

@@ -1,42 +0,0 @@
-<!-- source-hash: 94dc1041b128d032b51d69d3fcf1bb02 -->
-A reusable close button component built on Lucide React's X icon with customizable styling and hover effects.
-
-## Key Components
-
-- **XButton** - Main component export that renders a customizable X (close) button
-- **XButtonProps** - TypeScript interface defining component props:
-  - `className` - Optional CSS classes for styling
-  - `size` - Button size variants ('sm', 'default', 'lg', 'icon')
-  - `backgroundColor` - Custom background color
-  - `borderColor` - Custom border color
-  - `onClick` - Click event handler
-
-## Usage Example
-
-```typescript
-import { XButton } from './x-button';
-
-function Modal() {
-  const handleClose = () => {
-    console.log('Modal closed');
-  };
-
-  return (
-    <div className="modal">
-      {/* Default icon size */}
-      <XButton onClick={handleClose} />
-      
-      {/* Custom styling with background and border */}
-      <XButton 
-        size="lg"
-        backgroundColor="rgba(255, 0, 0, 0.1)"
-        borderColor="red"
-        onClick={handleClose}
-        className="absolute top-2 right-2"
-      />
-    </div>
-  );
-}
-```
-
-The component features dynamic hover states that make the background transparent on hover, smooth transitions, and responsive sizing based on the selected size variant. It leverages the shadcn/ui Button component as its foundation while providing X-specific customizations.

package/src/components/features/.github-repo-button.md

@@ -1,40 +0,0 @@
-<!-- source-hash: 400a2c07bec9623931c10cd2795cdf1c -->
-A pre-configured React button component for linking to GitHub repositories with consistent styling and GitHub branding.
-
-## Key Components
-
-- **GithubRepoButton**: Main component that renders a button with GitHub icon, outline styling, and customizable text
-- **GithubRepoButtonProps**: Interface extending Button props with restrictions on certain properties and defaults for GitHub-specific usage
-
-## Usage Example
-
-```typescript
-import { GithubRepoButton } from './github-repo-button';
-
-function ProjectSection() {
-  return (
-    <div>
-      {/* Default usage - links to OpenFrame OSS Tenant repo */}
-      <GithubRepoButton />
-      
-      {/* Custom text and size */}
-      <GithubRepoButton size="lg">
-        View Repository
-      </GithubRepoButton>
-      
-      {/* Custom repository URL */}
-      <GithubRepoButton 
-        href="https://github.com/your-org/your-repo"
-        className="mt-4"
-      >
-        Fork This Project
-      </GithubRepoButton>
-      
-      {/* Icon-only button */}
-      <GithubRepoButton size="icon" />
-    </div>
-  );
-}
-```
-
-The component automatically opens links in new tabs, uses outline variant styling, and includes the GitHub icon. It defaults to the OpenFrame OSS Tenant repository but can be customized with any GitHub URL.

package/src/components/features/.organization-icon.md

@@ -1,47 +0,0 @@
-<!-- source-hash: 36896b883a8f0d239dc900379868fd5f -->
-A React component that displays organization logos with automatic fallback to initials, maintaining visual consistency with the VendorIcon component across the application.
-
-## Key Components
-
-- **OrganizationIcon**: Main component that renders organization logos with fallback initials
-- **OrganizationIconProps**: TypeScript interface defining component props including image URL, organization name, size variants, and styling options
-- **Size Configuration**: Six predefined size variants (xs through xl) with corresponding Tailwind classes and image dimensions
-- **Background Variants**: Three background styles (dark, light, white) for different UI contexts
-- **Error Handling**: Automatic fallback to initials when image loading fails
-
-## Usage Example
-
-```typescript
-import { OrganizationIcon } from './organization-icon'
-
-// Basic usage with medium size (default)
-<OrganizationIcon
-  imageUrl={organization.logoUrl}
-  organizationName="Acme Corporation"
-/>
-
-// Large icon for detail views
-<OrganizationIcon
-  imageUrl={org.imageUrl}
-  organizationName={org.name}
-  size="xl"
-  backgroundStyle="light"
-/>
-
-// Inline icon without background
-<OrganizationIcon
-  imageUrl={org.logoUrl}
-  organizationName="Tech Corp"
-  size="sm"
-  showBackground={false}
-  className="mr-2"
-/>
-
-// Fallback example (no image URL provided)
-<OrganizationIcon
-  organizationName="Example Inc"
-  size="md"
-/>
-```
-
-The component automatically handles loading states, displays two-letter initials as fallbacks, and maintains consistent dimensions to prevent layout shifts. It supports various image URL formats including blob URLs, API paths, and full URLs.

package/src/components/features/.organization-selector.md

@@ -1,45 +0,0 @@
-<!-- source-hash: 319c57ac13da3078bf12a6a248a5d596 -->
-A React dropdown component for selecting organizations with image pre-fetching, search functionality, and loading states. Built on top of Radix UI Select with custom searchable mode for enhanced user experience.
-
-## Key Components
-
-- **OrganizationSelector**: Main component with two modes - standard Select (non-searchable) and custom dropdown (searchable)
-- **OrganizationOption**: Interface defining organization data structure with id, name, imageUrl, and default status
-- **OrganizationSelectorProps**: Comprehensive props interface supporting customization, loading states, and search functionality
-- **useBatchImages**: Hook for pre-fetching organization images for better performance
-- **OrganizationIcon**: Child component for displaying organization avatars with fallback to initials
-
-## Usage Example
-
-```typescript
-import { OrganizationSelector } from '@/components/features'
-
-function MyComponent() {
-  const [selectedOrgId, setSelectedOrgId] = useState('')
-  
-  const organizations = [
-    {
-      id: '1',
-      organizationId: 'org-1',
-      name: 'Acme Corp',
-      imageUrl: 'https://example.com/logo.png',
-      isDefault: true
-    }
-  ]
-
-  return (
-    <OrganizationSelector
-      organizations={organizations}
-      value={selectedOrgId}
-      onValueChange={setSelectedOrgId}
-      label="Select Organization"
-      placeholder="Choose organization"
-      searchable
-      iconSize="md"
-      maxItems={50}
-    />
-  )
-}
-```
-
-The component automatically switches between Radix UI Select (for better accessibility when search isn't needed) and a custom popover implementation (when `searchable={true}`) with keyboard navigation, click-outside handling, and real-time search filtering.