@framingui/ui 0.6.5 → 0.6.7

package/README.md

@@ -1,63 +1,62 @@
 # @framingui/ui
 
-> Production-ready React components with CSS Variables theming
+React components for FramingUI.
 
-[![npm](https://img.shields.io/npm/v/@framingui/ui)](https://www.npmjs.com/package/@framingui/ui)
-[![License](https://img.shields.io/badge/license-MIT-blue.svg)](../../LICENSE)
+Use this package when you want FramingUI components directly in an app, whether you install them manually or through `@framingui/mcp-server init`.
 
-## Installation
+## Install
 
 ```bash
-npm install @framingui/ui
+pnpm add @framingui/ui
 ```
 
-## Quick Start
+Import the shared styles when your app uses the FramingUI-native style contract:
 
 ```tsx
-import { Button, Input, Card } from '@framingui/ui';
 import '@framingui/ui/styles';
+```
+
+## Basic Usage
 
-export default function App() {
+```tsx
+import '@framingui/ui/styles';
+import { Button, Card, CardContent, CardHeader, CardTitle, Input } from '@framingui/ui';
+
+export function SignupCard() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Welcome to FramingUI</CardTitle>
-        <CardDescription>Build accessible UIs faster</CardDescription>
+        <CardTitle>Create account</CardTitle>
       </CardHeader>
       <CardContent>
-        <Input placeholder="Enter your email..." />
+        <Input type="email" placeholder="Email" />
+        <Button>Create account</Button>
       </CardContent>
-      <CardFooter>
-        <Button variant="primary">Get Started</Button>
-      </CardFooter>
     </Card>
   );
 }
 ```
 
-## Components
-
-### Primitives (14)
-
-Button, Input, Checkbox, Radio, Switch, Slider, Text, Heading, Badge, Avatar, Progress, Link, Image, List
+## What You Get
 
-### Composed (6)
+- core components such as `Button`, `Input`, `Card`, `Badge`, `Avatar`, and `Select`
+- complex components such as `Dialog`, `Tabs`, `Table`, and `Popover`
+- advanced components such as `Sidebar`, `NavigationMenu`, and `Calendar`
+- styles designed to work with FramingUI themes and MCP workflows
 
-Card, Form, Modal, Dropdown, Tabs, Table
+## MCP Guidance
 
-## Key Features
+If you are using FramingUI through MCP, do not guess component APIs.
+Use:
 
-- **WCAG 2.1 AA Compliant**: Fully accessible
-- **CSS Variables**: 3-layer token system (Atomic → Semantic → Component)
-- **Type-Safe**: Full TypeScript support
-- **Zero Config**: Works out of the box
-- **98%+ Test Coverage**: Production-ready quality
+- `list-components`
+- `preview-component`
+- `validate-environment`
 
-## Documentation
+## Docs
 
-- [Component Reference](https://framingui.com/docs/components)
-- [Theming Guide](https://framingui.com/docs/guides/theming)
-- [CSS Variables Reference](https://framingui.com/docs/guides/css-variables)
+- [framingui.com/docs/components](https://framingui.com/docs/components)
+- [framingui.com/docs/themes](https://framingui.com/docs/themes)
 
 ## License
 

package/dist/chunk-VV6WUMYC.mjs

@@ -0,0 +1,170 @@
+'use client';
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[var(--radius-xl)] text-sm font-medium ring-offset-[var(--bg-background)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--bg-primary)] text-[var(--bg-primary-foreground)] hover:bg-[var(--bg-primary)]/90",
+        destructive: "bg-[var(--bg-destructive)] text-[var(--bg-destructive-foreground)] hover:bg-[var(--bg-destructive)]/90",
+        outline: "border border-[var(--border-input)] bg-[var(--bg-background)] hover:bg-[var(--bg-accent)] hover:text-[var(--bg-accent-foreground)]",
+        secondary: "bg-[var(--bg-secondary)] text-[var(--bg-secondary-foreground)] hover:bg-[var(--bg-secondary)]/80",
+        ghost: "hover:bg-[var(--bg-accent)] hover:text-[var(--bg-accent-foreground)]",
+        link: "text-[var(--bg-primary)] underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-[var(--spacing-4)] py-[var(--spacing-2)]",
+        sm: "h-9 rounded-[var(--radius-xl)] px-[var(--spacing-3)]",
+        lg: "h-11 rounded-[var(--radius-xl)] px-[var(--spacing-8)]",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/input.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-[var(--radius-md)] border border-[var(--border-input)] bg-[var(--bg-background)] px-[var(--spacing-3)] py-[var(--spacing-2)] text-sm ring-offset-[var(--bg-background)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--bg-muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-ring)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/label.tsx
+import * as React3 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var labelVariants = cva2(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/card.tsx
+import * as React4 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Card = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-[var(--radius-lg)] border border-[var(--border-default)] bg-[var(--bg-card)] text-[var(--bg-card-foreground)] shadow-sm",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col space-y-[var(--spacing-2)] p-[var(--spacing-6)]", className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+    "h3",
+    {
+      ref,
+      className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("p", { ref, className: cn("text-sm text-[var(--bg-muted-foreground)]", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", { ref, className: cn("p-[var(--spacing-6)] pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center p-[var(--spacing-6)] pt-0", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+// src/components/separator.tsx
+import * as React5 from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Separator = React5.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx5(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-[var(--border-default)]",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export {
+  cn,
+  buttonVariants,
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Separator
+};

package/dist/index.d.mts

@@ -1,9 +1,9 @@
 import { ClassValue } from 'clsx';
 import { TokenReference } from '@framingui/tokens';
-import { Variants, Transition } from 'framer-motion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React$1 from 'react';
 import { VariantProps } from 'class-variance-authority';
+import { Variants, Transition } from 'framer-motion';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -77,6 +77,23 @@ type TektonTokenVars = typeof tokenVars;
 declare function isTokenReference(value: string): value is TokenReference;
 declare function extractTokenName(token: TokenReference): string;
 
+declare const headingVariants: (props?: ({
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const Heading: React$1.ForwardRefExoticComponent<HeadingProps & React$1.RefAttributes<HTMLHeadingElement>>;
+
+declare const textVariants: (props?: ({
+    variant?: "body" | "caption" | "label" | "code" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof textVariants> {
+    as?: 'span' | 'p' | 'div';
+}
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<HTMLElement>>;
+
 interface ThemeDefinition {
     id: string;
     name: string;
@@ -246,8 +263,8 @@ declare function useMotionSafe(): boolean;
 declare function getMotionTransition(transition: Transition, motionSafe: boolean): Transition;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -267,7 +284,7 @@ declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
 declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "outline" | "default" | "destructive" | "secondary" | null | undefined;
+    variant?: "default" | "outline" | "destructive" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
@@ -472,7 +489,7 @@ declare const NavigationMenuViewport: React$1.ForwardRefExoticComponent<Omit<Nav
 declare const NavigationMenuIndicator: React$1.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const breadcrumbVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const breadcrumbLinkVariants: (props?: ({
     active?: boolean | null | undefined;
@@ -517,7 +534,7 @@ declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pic
     ref?: React$1.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "key" | "asChild" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
@@ -543,7 +560,7 @@ declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React$1.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -561,7 +578,7 @@ declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
     ref?: React$1.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "key" | "asChild" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -579,4 +596,4 @@ declare namespace Calendar {
     var displayName: string;
 }
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, type InputProps, Label, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type OKLCHColor, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarSectionTitle, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TektonTokenVars, Textarea, type TextareaProps, type ThemeDefinition, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, extractTokenName, fadeVariants, getCurrentThemeId, getMotionTransition, injectThemeCSS, isTokenReference, motionTokens, navigationMenuTriggerStyle, oklchToCSS, resolveSemanticToken, scaleVariants, setThemeId, sidebarVariants, slideVariants, themeToCSS, tokenVars, transitions, useMotionSafe };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Heading, type HeadingProps, Input, type InputProps, Label, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type OKLCHColor, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarSectionTitle, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TektonTokenVars, Text, type TextProps, Textarea, type TextareaProps, type ThemeDefinition, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, extractTokenName, fadeVariants, getCurrentThemeId, getMotionTransition, headingVariants, injectThemeCSS, isTokenReference, motionTokens, navigationMenuTriggerStyle, oklchToCSS, resolveSemanticToken, scaleVariants, setThemeId, sidebarVariants, slideVariants, textVariants, themeToCSS, tokenVars, transitions, useMotionSafe };