@codapet/design-system 0.2.5 → 0.2.7

package/dist/index.d.mts

@@ -501,8 +501,39 @@ declare function Toggle({ className, variant, size, ...props }: React$1.Componen
 declare function ToggleGroup({ className, variant, size, children, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 
+declare const displayTextVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function DisplayHeading({ className, size, asChild, ...props }: React$1.ComponentProps<'h1'> & VariantProps<typeof displayTextVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare const bodyTextVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Body({ className, size, asChild, ...props }: React$1.ComponentProps<'h1'> & VariantProps<typeof bodyTextVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingXL({ className, asChild, ...props }: React$1.ComponentProps<'h1'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingL({ className, asChild, ...props }: React$1.ComponentProps<'h2'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingM({ className, asChild, ...props }: React$1.ComponentProps<'h3'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingS({ className, asChild, ...props }: React$1.ComponentProps<'h4'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingXS({ className, asChild, ...props }: React$1.ComponentProps<'h5'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function HeadingXXS({ className, asChild, ...props }: React$1.ComponentProps<'h6'> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
 declare function useIsMobile(): boolean;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, inputVariants, labelTextVariants, navigationMenuTriggerStyle, toggleVariants, useFormField, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingM, HeadingS, HeadingXL, HeadingXS, HeadingXXS, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, toggleVariants, useFormField, useIsMobile, useSidebar };

package/dist/index.mjs

@@ -152,7 +152,7 @@ var buttonVariants = cva2(
         outline: "text-zinc-800 border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:bg-surface-default",
         ghost: "text-zinc-800 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 active:bg-surface-default",
         link: "text-primary underline-offset-4 hover:underline active:bg-surface-light",
-        destructive: "bg-red-400 text-white hover:bg-red-900 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:bg-red-surface-dark",
+        destructive: "bg-red-400 text-white hover:bg-red-800 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:bg-red-surface-dark",
         "destructive-secondary": "bg-red-50 border border-red-200 text-red-400 hover:border-red-400 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:bg-red-100",
         "destructive-tertiary": "bg-transparent border border-red-200 text-red-400 hover:border-red-200 hover:bg-red-50 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:bg-red-100"
       },
@@ -4606,6 +4606,180 @@ function ToggleGroupItem({
     }
   );
 }
+
+// src/components/ui/typography.tsx
+import { Slot as Slot7 } from "@radix-ui/react-slot";
+import { cva as cva9 } from "class-variance-authority";
+import "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var displayTextVariants = cva9(
+  "tracking-normal font-normal leading-none text-brand-dark font-serif italic",
+  {
+    variants: {
+      size: {
+        md: "text-[1.75rem] md:text-4xl leading-[2.75rem] md:leading-[4rem]",
+        sm: "text-lg md:text-xl leading-[2.5rem] md:leading-[3rem]",
+        lg: "text-4xl md:text-[3.25rem] leading-[4rem] md:leading-[5rem]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function DisplayHeading({
+  className,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h1";
+  return /* @__PURE__ */ jsx47(
+    Comp,
+    {
+      "data-slot": "h1",
+      className: cn(displayTextVariants({ size, className })),
+      ...props
+    }
+  );
+}
+var bodyTextVariants = cva9("font-sans ", {
+  variants: {
+    size: {
+      lg: "text-lg md:text-xl leading-[1.625rem] md:leading-[1.75rem]",
+      md: "text-base  leading-[1.5rem] ",
+      sm: "text-sm  leading-[1.25rem] ",
+      xs: "text-xs leading-[1rem]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Body({
+  className,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "p";
+  return /* @__PURE__ */ jsx47(
+    Comp,
+    {
+      "data-slot": "h1",
+      className: cn(bodyTextVariants({ size, className })),
+      ...props
+    }
+  );
+}
+function HeadingXL({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h1";
+  return /* @__PURE__ */ jsx47(
+    Comp,
+    {
+      "data-slot": "h1",
+      className: cn(
+        "text-2xl md:text-[2rem] md:leading-[2.5rem] leading-[2rem] font-semibold font-sans",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingL({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h2";
+  return /* @__PURE__ */ jsx47(
+    Comp,
+    {
+      "data-slot": "h2",
+      className: cn(
+        "md:text-[1.5rem] text-[1.25rem] md:leading-[2rem] leading-[1.75rem] font-semibold font-sans",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingM({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h3";
+  return /* @__PURE__ */ jsx47(
+    Comp,
+    {
+      "data-slot": "h3",
+      className: cn(
+        "text-[1.125rem] md:text-xl md:leading-[1.75rem] leading-[1.625rem] font-semibold font-sans",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingS({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h4";
+  return /* @__PURE__ */ jsx47(
+    Comp,
+    {
+      "data-slot": "h4",
+      className: cn(
+        "text-base leading-[1.5rem] font-semibold font-sans",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingXS({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h5";
+  return /* @__PURE__ */ jsx47(
+    Comp,
+    {
+      "data-slot": "h5",
+      className: cn(
+        "text-sm  leading-[1.25rem] font-semibold font-sans",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeadingXXS({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot7 : "h6";
+  return /* @__PURE__ */ jsx47(
+    Comp,
+    {
+      "data-slot": "h5",
+      className: cn(
+        "text-xs leading-[1rem]  font-semibold font-sans",
+        className
+      ),
+      ...props
+    }
+  );
+}
 export {
   Accordion,
   AccordionContent,
@@ -4630,6 +4804,7 @@ export {
   AvatarFallback,
   AvatarImage,
   Badge,
+  Body,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -4696,6 +4871,7 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  DisplayHeading,
   Drawer,
   DrawerClose,
   DrawerContent,
@@ -4728,6 +4904,12 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  HeadingL,
+  HeadingM,
+  HeadingS,
+  HeadingXL,
+  HeadingXS,
+  HeadingXXS,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
@@ -4847,8 +5029,10 @@ export {
   TooltipProvider,
   TooltipTrigger,
   badgeVariants,
+  bodyTextVariants,
   buttonVariants,
   cn,
+  displayTextVariants,
   inputVariants,
   labelTextVariants,
   navigationMenuTriggerStyle,