@flamingo-stack/openframe-frontend-core 0.0.439 → 0.0.440

package/src/components/.dialog.md

@@ -1,60 +0,0 @@
-<!-- source-hash: f32246d114b706570b821cefac3455d9 -->
-A custom client-side Dialog component system built without external libraries, providing a controlled modal overlay with backdrop blur, centered content panel, and composable sub-components.
-
-## Key Components
-
-| Component | Description |
-|-----------|-------------|
-| `Dialog` | Root container; renders a full-screen backdrop when `open` is `true`, closes on overlay click |
-| `DialogTrigger` | Button wrapper to programmatically open the dialog |
-| `DialogPortal` | Passthrough wrapper for portaling children (inline, no actual portal) |
-| `DialogOverlay` | Standalone backdrop overlay with blur effect |
-| `DialogClose` | Generic close button element |
-| `DialogContent` | Centered modal panel (`z-[10000]`) with built-in close (`X`) icon button and click-stop propagation |
-| `DialogHeader` | Flex column layout for title/description grouping |
-| `DialogFooter` | Responsive footer with reversed column on mobile, row on desktop |
-| `DialogTitle` | Styled `<h2>` for the modal heading |
-| `DialogDescription` | Styled `<p>` for supporting modal text |
-
-## Usage Example
-
-```typescript
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-  DialogTrigger,
-} from "./dialog"
-
-export function ConfirmModal() {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <>
-      <DialogTrigger onClick={() => setOpen(true)}>
-        Open Modal
-      </DialogTrigger>
-
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent onCloseClick={() => setOpen(false)}>
-          <DialogHeader>
-            <DialogTitle>Confirm Action</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to proceed?
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <button onClick={() => setOpen(false)}>Cancel</button>
-            <button onClick={() => setOpen(false)}>Confirm</button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
-```
-
-> **Note:** `DialogContent` uses `onCloseClick` (not the standard `onClose`) for the built-in `X` button handler. Backdrop clicks are handled by the root `Dialog` via `onOpenChange`.

package/src/components/.dropdown-menu.md

@@ -1,51 +0,0 @@
-<!-- source-hash: bce1c12cc20621daf9a85c036a451097 -->
-A comprehensive dropdown menu component library built on top of Radix UI primitives with custom styling using the OpenFrame design system (ODS). Provides a complete set of accessible dropdown menu components including items, checkboxes, radio groups, submenus, and separators.
-
-## Key Components
-
-- **DropdownMenu** - Root container component
-- **DropdownMenuTrigger** - Button that opens the menu
-- **DropdownMenuContent** - The dropdown panel with animation and positioning
-- **DropdownMenuItem** - Individual menu items with hover states
-- **DropdownMenuCheckboxItem** - Checkbox menu items with check indicators
-- **DropdownMenuRadioItem** - Radio button menu items for single selection
-- **DropdownMenuLabel** - Section headers within the menu
-- **DropdownMenuSeparator** - Visual dividers between menu sections
-- **DropdownMenuShortcut** - Keyboard shortcut display component
-- **DropdownMenuSub/SubContent/SubTrigger** - Nested submenu components
-- **DropdownMenuGroup/RadioGroup** - Logical grouping containers
-
-## Usage Example
-
-```typescript
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuCheckboxItem,
-  DropdownMenuShortcut,
-} from "./dropdown-menu"
-
-function UserMenu() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          Profile
-          <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
-        </DropdownMenuItem>
-        <DropdownMenuCheckboxItem checked={true}>
-          Notifications
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuItem>Logout</DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-```

package/src/components/.input.md

@@ -1,40 +0,0 @@
-<!-- source-hash: 5d248f58ad416e0486c3eb74baeb29fc -->
-A styled, accessible HTML input component built with `React.forwardRef`, supporting error states and full HTML input attribute passthrough.
-
-## Key Components
-
-- **`Input`** — Forwarded-ref input component with ODS (OpenFrame Design System) theming, focus/disabled states, hover animations, and optional error styling
-- **`InputProps`** — Extended interface adding an `invalid` boolean prop on top of standard `React.InputHTMLAttributes<HTMLInputElement>`
-
-## Usage Example
-
-```typescript
-import { Input } from "./input"
-
-// Basic usage
-<Input placeholder="Enter your email" type="email" />
-
-// With error state
-<Input
-  type="text"
-  invalid={true}
-  placeholder="Invalid field"
-/>
-
-// With ref forwarding
-const ref = React.useRef<HTMLInputElement>(null)
-<Input ref={ref} type="text" />
-
-// Disabled state
-<Input disabled placeholder="Not editable" />
-```
-
-## Styling Highlights
-
-| State | Applied Classes |
-|-------|----------------|
-| Default | `bg-ods-card border-ods-border text-ods-text-primary` |
-| Hover | `hover:border-ods-accent/30` |
-| Focus | `focus:border-ods-accent focus-visible:ring-ods-accent/20` |
-| Disabled | `disabled:cursor-not-allowed disabled:bg-ods-bg` |
-| Invalid | `border-red-500 focus-visible:ring-red-500` |

package/src/components/.label.md

@@ -1,41 +0,0 @@
-<!-- source-hash: 23bab55c76644996a403e0958181e956 -->
-A React component that provides a styled form label built on top of Radix UI's Label primitive with consistent typography and styling.
-
-## Key Components
-
-- **Label** - A forwardRef component that wraps `@radix-ui/react-label`
-- **labelVariants** - CVA variant configuration defining the label's visual styling
-- Accessibility features inherited from Radix UI Label primitive
-
-## Usage Example
-
-```typescript
-import { Label } from "./components/ui/label"
-
-function FormField() {
-  return (
-    <div>
-      <Label htmlFor="email">Email Address</Label>
-      <input 
-        id="email" 
-        type="email" 
-        placeholder="Enter your email"
-      />
-    </div>
-  )
-}
-
-// With custom styling
-function CustomLabel() {
-  return (
-    <Label 
-      htmlFor="username" 
-      className="text-blue-600"
-    >
-      Username
-    </Label>
-  )
-}
-```
-
-The component uses DM Sans font family with semibold weight, uppercase text transformation, and responsive text sizing. It automatically applies proper semantic labeling for form accessibility when used with the `htmlFor` attribute.

package/src/components/.menubar.md

@@ -1,49 +0,0 @@
-<!-- source-hash: 1d6d763391c6c349742d108be28d7163 -->
-A comprehensive menubar component library built on Radix UI primitives with custom styling and enhanced functionality. Provides a complete set of accessible menubar components including triggers, items, separators, and submenus with built-in keyboard navigation and ARIA support.
-
-## Key Components
-
-- **Menubar** - Root container component with horizontal layout and border styling
-- **MenubarTrigger** - Clickable trigger buttons that open menu content
-- **MenubarContent/MenubarSubContent** - Dropdown containers with portal rendering and animations
-- **MenubarItem** - Basic menu items with hover states and optional inset styling
-- **MenubarCheckboxItem** - Checkable items with check mark indicators
-- **MenubarRadioItem** - Radio button items with circle indicators for single selection
-- **MenubarLabel** - Non-interactive labels for grouping menu sections
-- **MenubarSeparator** - Visual dividers between menu sections
-- **MenubarShortcut** - Keyboard shortcut display component
-- **MenubarSubTrigger** - Items that trigger nested submenus with chevron icons
-
-## Usage Example
-
-```typescript
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from "./menubar"
-
-function AppMenubar() {
-  return (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            New File <MenubarShortcut>⌘N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Open <MenubarShortcut>⌘O</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Exit</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  )
-}
-```

package/src/components/.navigation-menu.md

@@ -1,44 +0,0 @@
-<!-- source-hash: 36c8899a20576854ae461e8c611427cc -->
-A React navigation menu component built on Radix UI primitives with styled variants and animations. Provides a complete set of components for building accessible dropdown navigation menus with smooth transitions and hover states.
-
-## Key Components
-
-- **NavigationMenu** - Root container component with automatic viewport management
-- **NavigationMenuList** - Flex container for menu items with centered layout
-- **NavigationMenuItem** - Direct export of Radix primitive item component
-- **NavigationMenuTrigger** - Clickable trigger with chevron icon and rotation animation
-- **NavigationMenuContent** - Dropdown content panel with slide-in/fade animations
-- **NavigationMenuLink** - Direct export of Radix primitive link component
-- **NavigationMenuViewport** - Animated viewport container for dropdown content
-- **NavigationMenuIndicator** - Visual indicator showing active menu state
-- **navigationMenuTriggerStyle** - CVA style variant for consistent trigger styling
-
-## Usage Example
-
-```typescript
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-} from "./navigation-menu"
-
-function MainNav() {
-  return (
-    <NavigationMenu>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <div className="p-6">
-              <a href="/product-1">Product 1</a>
-              <a href="/product-2">Product 2</a>
-            </div>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-    </NavigationMenu>
-  )
-}
-```

package/src/components/.select.md

@@ -1,54 +0,0 @@
-<!-- source-hash: edcc0618a769c715daef264fcd0292ee -->
-Accessible, styled select/dropdown component built on Radix UI primitives with Flamingo ODS design tokens and smooth open/close animations.
-
-## Key Components
-
-| Export | Description |
-|--------|-------------|
-| `Select` | Root component managing open/value state |
-| `SelectTrigger` | Styled button that opens the dropdown, includes `ChevronDown` icon |
-| `SelectContent` | Animated portal-rendered dropdown container with scroll support |
-| `SelectItem` | Individual option with a `Check` indicator when selected |
-| `SelectGroup` | Groups related items together |
-| `SelectLabel` | Section label within a group |
-| `SelectValue` | Displays the currently selected value in the trigger |
-| `SelectSeparator` | Horizontal divider between items or groups |
-| `SelectScrollUpButton` | Scroll control shown when content overflows upward |
-| `SelectScrollDownButton` | Scroll control shown when content overflows downward |
-
-## Usage Example
-
-```typescript
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-
-export function PrioritySelect() {
-  return (
-    <Select onValueChange={(value) => console.log(value)}>
-      <SelectTrigger className="w-[200px]">
-        <SelectValue placeholder="Select priority..." />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectGroup>
-          <SelectLabel>Ticket Priority</SelectLabel>
-          <SelectItem value="critical">Critical</SelectItem>
-          <SelectItem value="high">High</SelectItem>
-          <SelectSeparator />
-          <SelectItem value="medium">Medium</SelectItem>
-          <SelectItem value="low">Low</SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-  )
-}
-```
-
-> All sub-components forward refs and accept native Radix UI props, allowing full customization via `className` alongside ODS defaults.

package/src/components/.sidebar.md

@@ -1,58 +0,0 @@
-<!-- source-hash: b66af7d5956b3733b491a303d043d297 -->
-A comprehensive sidebar UI component system providing collapsible, responsive navigation panels with mobile drawer support, keyboard shortcuts, and multiple layout variants.
-
-## Key Components
-
-| Component | Description |
-|-----------|-------------|
-| `SidebarProvider` | Context provider managing open/collapsed state, mobile detection, and cookie persistence |
-| `useSidebar` | Hook to access sidebar context (state, toggle, mobile status) |
-| `Sidebar` | Core sidebar container supporting `left`/`right` sides, `sidebar`/`floating`/`inset` variants, and `offcanvas`/`icon`/`none` collapsible modes |
-| `SidebarTrigger` | Button component that toggles the sidebar (with `PanelLeft` icon) |
-| `SidebarRail` | Thin interactive strip for resize/toggle on desktop |
-| `SidebarInset` | Main content area companion that adjusts layout based on sidebar state |
-| `SidebarInput` | Styled input field scoped to sidebar context |
-| `SidebarHeader` | Top section container for branding/navigation |
-| `SidebarFooter` | Bottom section container for user/settings actions |
-| `SidebarSeparator` | Styled divider using sidebar border token |
-| `SidebarContent` | Scrollable middle section for navigation items |
-
-## Usage Example
-
-```typescript
-import {
-  SidebarProvider,
-  Sidebar,
-  SidebarHeader,
-  SidebarContent,
-  SidebarFooter,
-  SidebarTrigger,
-  SidebarInset,
-  useSidebar,
-} from "./sidebar"
-
-export function AppLayout() {
-  return (
-    <SidebarProvider defaultOpen={true}>
-      <Sidebar side="left" variant="sidebar" collapsible="icon">
-        <SidebarHeader>
-          <span>My App</span>
-        </SidebarHeader>
-        <SidebarContent>
-          {/* Navigation items */}
-        </SidebarContent>
-        <SidebarFooter>
-          {/* User profile */}
-        </SidebarFooter>
-      </Sidebar>
-
-      <SidebarInset>
-        <SidebarTrigger />
-        {/* Page content */}
-      </SidebarInset>
-    </SidebarProvider>
-  )
-}
-```
-
-> **Keyboard shortcut:** `Ctrl+B` / `Cmd+B` toggles the sidebar globally. State is persisted via a 7-day cookie (`sidebar:state`). On mobile, the sidebar renders as a `Sheet` drawer automatically.

package/src/components/.square-avatar.md

@@ -1,42 +0,0 @@
-<!-- source-hash: 0ad0fd1585cc95092b328aab82e5f963 -->
-A flexible square avatar component that displays either a user image or initials fallback with automatic image proxying and responsive sizing options.
-
-## Key Components
-
-- **SquareAvatar**: Main component that renders a square avatar with rounded corners
-- **SquareAvatarProps**: TypeScript interface defining component props including image source, fallback name, sizing options
-- **Automatic fallback**: Generates up to 2 initials from the provided name when no image is available
-- **Image proxying**: Uses `getProxiedImageUrl` utility for secure image loading
-- **Responsive sizing**: Supports both fixed pixel sizing and full-width responsive layouts
-
-## Usage Example
-
-```typescript
-import { SquareAvatar } from './components/square-avatar';
-
-// With image
-<SquareAvatar 
-  src="https://example.com/avatar.jpg" 
-  fallbackName="John Doe"
-  size={64}
-/>
-
-// Fallback to initials
-<SquareAvatar 
-  fallbackName="Jane Smith" 
-  size={48}
-/>
-
-// Full width responsive
-<SquareAvatar 
-  src="/user-avatar.png"
-  fallbackName="Alex Johnson"
-  fullWidth={true}
-  className="max-w-xs"
-/>
-
-// Minimal usage
-<SquareAvatar fallbackName="Bob Wilson" />
-```
-
-The component automatically handles image loading failures by falling back to initials, uses design system colors and borders, and provides both fixed and responsive sizing modes for different layout contexts.

package/src/components/.table.md

@@ -1,51 +0,0 @@
-<!-- source-hash: 233d24ac5b6d195653b75a57fb3cf96a -->
-A comprehensive React table component library that provides semantic HTML table elements with consistent styling, responsive design, and accessibility features.
-
-## Key Components
-
-- **Table** - Main table wrapper with responsive overflow handling
-- **TableHeader** - Styled `<thead>` element with border styling
-- **TableBody** - Table body with conditional border removal for last row
-- **TableFooter** - Footer section with primary background styling
-- **TableRow** - Interactive row with hover effects and selection states
-- **TableHead** - Header cell with medium font weight and muted text
-- **TableCell** - Standard table cell with consistent padding
-- **TableCaption** - Accessible table caption with muted styling
-
-## Usage Example
-
-```typescript
-import { 
-  Table, 
-  TableHeader, 
-  TableBody, 
-  TableHead, 
-  TableRow, 
-  TableCell,
-  TableCaption 
-} from './table'
-
-function UserTable() {
-  return (
-    <Table>
-      <TableCaption>A list of recent users</TableCaption>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Email</TableHead>
-          <TableHead>Status</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        <TableRow>
-          <TableCell>John Doe</TableCell>
-          <TableCell>john@example.com</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-All components are built with React.forwardRef for ref forwarding and use the `cn` utility for className merging, enabling easy customization while maintaining base styles.

package/src/components/.tabs.md

@@ -1,38 +0,0 @@
-<!-- source-hash: 40507b5774d55768095b4012b33992e8 -->
-A React tabs component built on Radix UI primitives with styled forwarded refs for accessible tabbed interfaces. Provides a complete tab system with customizable styling through className props.
-
-## Key Components
-
-- **`Tabs`** - Root container component (alias for `TabsPrimitive.Root`)
-- **`TabsList`** - Container for tab triggers with horizontal flex layout and muted background
-- **`TabsTrigger`** - Individual tab button with active/inactive states and focus management
-- **`TabsContent`** - Content panels that show/hide based on active tab selection
-
-## Usage Example
-
-```typescript
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs"
-
-function MyTabs() {
-  return (
-    <Tabs defaultValue="tab1" className="w-[400px]">
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="tab1">Account</TabsTrigger>
-        <TabsTrigger value="tab2">Settings</TabsTrigger>
-      </TabsList>
-      
-      <TabsContent value="tab1" className="space-y-2">
-        <h3 className="text-lg font-medium">Account Information</h3>
-        <p>Manage your account details here.</p>
-      </TabsContent>
-      
-      <TabsContent value="tab2" className="space-y-2">
-        <h3 className="text-lg font-medium">Settings</h3>
-        <p>Configure your preferences here.</p>
-      </TabsContent>
-    </Tabs>
-  )
-}
-```
-
-All components support standard React props and include built-in accessibility features, keyboard navigation, and focus management through Radix UI primitives.

package/src/components/.toggle.md

@@ -1,49 +0,0 @@
-<!-- source-hash: 2e278b19202e7067419c145f3d6571fc -->
-A customizable toggle button component built on Radix UI Toggle primitive with styled variants for different sizes and appearances.
-
-## Key Components
-
-- **`toggleVariants`** - CVA-powered style variants with size and variant options
-- **`Toggle`** - Main toggle component with forwardRef support
-- **Variant types**: `default`, `outline`
-- **Size types**: `sm`, `default`, `lg`
-
-## Usage Example
-
-```typescript
-import { Toggle } from "@/components/ui/toggle"
-import { Bold, Italic } from "lucide-react"
-
-function TextEditor() {
-  return (
-    <div className="flex gap-2">
-      {/* Default toggle */}
-      <Toggle>
-        <Bold />
-        Bold
-      </Toggle>
-
-      {/* Outline variant */}
-      <Toggle variant="outline">
-        <Italic />
-        Italic  
-      </Toggle>
-
-      {/* Small size */}
-      <Toggle size="sm">
-        Small
-      </Toggle>
-
-      {/* Controlled state */}
-      <Toggle 
-        pressed={isBold}
-        onPressedChange={setIsBold}
-      >
-        Controlled
-      </Toggle>
-    </div>
-  )
-}
-```
-
-The component automatically handles pressed/unpressed states, accessibility features, and keyboard navigation through the underlying Radix primitive.

package/src/components/accordion.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "../utils/cn"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = "AccordionTrigger"
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className,
-    )}
-    {...props}
-  >
-    <div className="pb-4 pt-0">{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = "AccordionContent"
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }