@codapet/design-system 0.2.6 → 0.2.8

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

@@ -147,14 +147,14 @@ var buttonVariants = cva2(
     variants: {
       variant: {
         primary: "bg-primary text-primary-foreground hover:bg-brand-dark active:bg-slate-800 ",
-        secondary: "bg-brand-subtle text-brand-vibrant hover:bg-brand-light border border-brand-light active:bg-icon-disabled",
-        tertiary: "bg-zinc-100 text-zinc-700 hover:bg-zinc-300 hover:border-zinc-300 border border-zinc-200 active:bg-zinc-400",
-        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-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"
+        secondary: "bg-brand-subtle text-brand-vibrant hover:bg-primary-surface-light border border-brand-light active:bg-icon-disabled hover:border-transparent active:border-transparent",
+        tertiary: "bg-gray-surface-light text-zinc-700 hover:bg-gray-surface-default border border-gray-stroke-light active:bg-zinc-400",
+        outline: "text-zinc-800 border border-gray-surface-default bg-background hover:bg-gray-surface-light hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:bg-gray-surface-default",
+        ghost: "text-zinc-800 hover:bg-gray-surface-light hover:text-accent-foreground dark:hover:bg-accent/50 active:bg-gray-surface-default",
+        link: "text-primary underline-offset-4 hover:underline hover:bg-primary-surface-subtle active:bg-primary-surface-light",
+        destructive: "bg-error-surface-default text-white hover:bg-red-800 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:bg-error-surface-dark",
+        "destructive-secondary": "bg-error-surface-light  border border-error-stroke-light text-red-400 hover:border-error-surface-default 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-error-stroke-light text-red-400  hover:bg-red-50 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 active:bg-red-100"
       },
       size: {
         md: "h-10 px-4 py-2 has-[>svg]:px-3 text-lg",
@@ -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,