@framingui/ui 0.6.2 → 0.6.3

package/dist/chunk-7UBERMRE.mjs

@@ -0,0 +1,180 @@
+'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(--tekton-radius-xl)] text-sm font-medium ring-offset-[var(--tekton-bg-background)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-border-ring)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--tekton-bg-primary)] text-[var(--tekton-bg-primary-foreground)] hover:bg-[var(--tekton-bg-primary)]/90",
+        destructive: "bg-[var(--tekton-bg-destructive)] text-[var(--tekton-bg-destructive-foreground)] hover:bg-[var(--tekton-bg-destructive)]/90",
+        outline: "border border-[var(--tekton-border-input)] bg-[var(--tekton-bg-background)] hover:bg-[var(--tekton-bg-accent)] hover:text-[var(--tekton-bg-accent-foreground)]",
+        secondary: "bg-[var(--tekton-bg-secondary)] text-[var(--tekton-bg-secondary-foreground)] hover:bg-[var(--tekton-bg-secondary)]/80",
+        ghost: "hover:bg-[var(--tekton-bg-accent)] hover:text-[var(--tekton-bg-accent-foreground)]",
+        link: "text-[var(--tekton-bg-primary)] underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-[var(--tekton-spacing-4)] py-[var(--tekton-spacing-2)]",
+        sm: "h-9 rounded-[var(--tekton-radius-xl)] px-[var(--tekton-spacing-3)]",
+        lg: "h-11 rounded-[var(--tekton-radius-xl)] px-[var(--tekton-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(--tekton-radius-md)] border border-[var(--tekton-border-input)] bg-[var(--tekton-bg-background)] px-[var(--tekton-spacing-3)] py-[var(--tekton-spacing-2)] text-sm ring-offset-[var(--tekton-bg-background)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--tekton-bg-muted-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tekton-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(--tekton-radius-lg)] border border-[var(--tekton-border-default)] bg-[var(--tekton-bg-card)] text-[var(--tekton-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(--tekton-spacing-2)] p-[var(--tekton-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(--tekton-bg-muted-foreground)]", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React4.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", { ref, className: cn("p-[var(--tekton-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(--tekton-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(--tekton-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

@@ -3,7 +3,6 @@ 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 { ComponentType, ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -580,142 +579,4 @@ declare namespace Calendar {
     var displayName: string;
 }
 
-type ScreenCategory = 'auth' | 'dashboard' | 'form' | 'marketing' | 'feedback';
-type TemplateLayout = 'centered' | 'sidebar' | 'full';
-interface ResponsiveBreakpoints {
-    mobile: number;
-    tablet: number;
-    desktop: number;
-}
-interface ResponsiveLayout {
-    mobile: {
-        padding: string;
-        gap: string;
-        columns: number;
-    };
-    tablet: {
-        padding: string;
-        gap: string;
-        columns: number;
-    };
-    desktop: {
-        padding: string;
-        gap: string;
-        columns: number;
-    };
-}
-interface TemplateLayoutConfig {
-    type: TemplateLayout;
-    responsive: ResponsiveLayout;
-}
-interface SectionTemplate {
-    id: string;
-    name: string;
-    slot: string;
-    required: boolean;
-    Component: ComponentType<any>;
-}
-interface CustomizationBoundaries {
-    texts: string[];
-    optional: string[];
-    slots: string[];
-}
-interface TemplateSkeleton {
-    shell: string;
-    page: string;
-    sections: SectionTemplate[];
-}
-interface ScreenTemplateProps {
-    children?: ReactNode;
-    className?: string;
-    slots?: Record<string, ReactNode>;
-    texts?: Record<string, string>;
-    options?: Record<string, string | boolean | number>;
-}
-interface ScreenTemplate {
-    id: string;
-    name: string;
-    category: ScreenCategory;
-    description: string;
-    skeleton: TemplateSkeleton;
-    layout: TemplateLayoutConfig;
-    customizable: CustomizationBoundaries;
-    requiredComponents: string[];
-    Component: ComponentType<ScreenTemplateProps>;
-    version: string;
-    created: string;
-    updated: string;
-    tags?: string[];
-}
-interface TemplateRegistryEntry {
-    template: ScreenTemplate;
-    metadata: {
-        usageCount: number;
-        lastUsed?: string;
-    };
-}
-declare const DEFAULT_RESPONSIVE_LAYOUT: ResponsiveLayout;
-declare const DEFAULT_BREAKPOINTS: ResponsiveBreakpoints;
-
-declare class TemplateRegistry {
-    private static instance;
-    private templates;
-    private constructor();
-    static getInstance(): TemplateRegistry;
-    register(template: ScreenTemplate): void;
-    registerMany(templates: ScreenTemplate[]): void;
-    get(id: string): ScreenTemplate | undefined;
-    getAll(): ScreenTemplate[];
-    getByCategory(category: ScreenCategory): ScreenTemplate[];
-    findByRequiredComponents(components: string[]): ScreenTemplate[];
-    search(keyword: string): ScreenTemplate[];
-    getMetadata(id: string): TemplateRegistryEntry['metadata'] | undefined;
-    getMostUsed(limit?: number): ScreenTemplate[];
-    getRecentlyUsed(limit?: number): ScreenTemplate[];
-    clear(): void;
-    count(): number;
-    has(id: string): boolean;
-    remove(id: string): boolean;
-}
-declare const templateRegistry: TemplateRegistry;
-
-declare function LoginTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const LoginTemplate: ScreenTemplate;
-
-declare function SignupTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const SignupTemplate: ScreenTemplate;
-
-declare function ForgotPasswordTemplateComponent({ children, className, slots, texts, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const ForgotPasswordTemplate: ScreenTemplate;
-
-declare function VerificationTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const VerificationTemplate: ScreenTemplate;
-
-declare function LandingTemplateComponent({ children, className, slots, texts, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const LandingTemplate: ScreenTemplate;
-
-declare function PreferencesTemplateComponent({ children, className, slots, texts, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const PreferencesTemplate: ScreenTemplate;
-
-declare function ProfileTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const ProfileTemplate: ScreenTemplate;
-
-declare function LoadingTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const LoadingTemplate: ScreenTemplate;
-
-declare function ErrorTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const ErrorTemplate: ScreenTemplate;
-
-declare function EmptyTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const EmptyTemplate: ScreenTemplate;
-
-declare function ConfirmationTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const ConfirmationTemplate: ScreenTemplate;
-
-declare function SuccessTemplateComponent({ children, className, slots, texts, options, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const SuccessTemplate: ScreenTemplate;
-
-declare function DashboardTemplateComponent({ children, className, slots, texts, }: ScreenTemplateProps): react_jsx_runtime.JSX.Element;
-declare const DashboardTemplate: ScreenTemplate;
-
-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, ConfirmationTemplate, ConfirmationTemplateComponent, type CustomizationBoundaries, DEFAULT_BREAKPOINTS, DEFAULT_RESPONSIVE_LAYOUT, DashboardTemplate, DashboardTemplateComponent, 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, EmptyTemplate, EmptyTemplateComponent, ErrorTemplate, ErrorTemplateComponent, ForgotPasswordTemplate, ForgotPasswordTemplateComponent, Input, type InputProps, Label, LandingTemplate, LandingTemplateComponent, LoadingTemplate, LoadingTemplateComponent, LoginTemplate, LoginTemplateComponent, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, type OKLCHColor, Popover, PopoverContent, PopoverTrigger, PreferencesTemplate, PreferencesTemplateComponent, ProfileTemplate, ProfileTemplateComponent, Progress, RadioGroup, RadioGroupItem, type ResponsiveBreakpoints, type ResponsiveLayout, type ScreenCategory, type ScreenTemplate, type ScreenTemplateProps, ScrollArea, ScrollBar, type SectionTemplate, 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, SignupTemplate, SignupTemplateComponent, Skeleton, SuccessTemplate, SuccessTemplateComponent, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TektonTokenVars, type TemplateLayout, type TemplateLayoutConfig, TemplateRegistry, type TemplateRegistryEntry, type TemplateSkeleton, Textarea, type TextareaProps, type ThemeDefinition, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VerificationTemplate, VerificationTemplateComponent, badgeVariants, buttonVariants, cn, extractTokenName, fadeVariants, getCurrentThemeId, getMotionTransition, injectThemeCSS, isTokenReference, motionTokens, navigationMenuTriggerStyle, oklchToCSS, resolveSemanticToken, scaleVariants, setThemeId, sidebarVariants, slideVariants, templateRegistry, 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, 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 };