@altimateai/ui-components 0.0.77-beta.4 → 0.0.77-combobox-beta1

package/dist/main.js

@@ -4496,7 +4496,7 @@ const Hi = {
       /* @__PURE__ */ h.jsx("img", { alt: "Teammate", src: e.avatar, className: "al-w-16 al-h-16 al-rounded" }),
       /* @__PURE__ */ h.jsxs("div", { className: "al-ml-2 al-mt-2", children: [
         /* @__PURE__ */ h.jsx(ft, { variant: "subheading", children: e.name }),
-        /* @__PURE__ */ h.jsx(ft, { children: e.description })
+        /* @__PURE__ */ h.jsx(ft, { variant: "body", children: e.description })
       ] })
     ] }),
     /* @__PURE__ */ h.jsxs(oe, { justify: "between", align: "center", children: [

package/dist/shadcn/index.d.ts

@@ -1,9 +1,9 @@
-import { a as Button, B as ButtonProps, b as ButtonSize$1 } from '../Button-42Dj_nRE.js';
+import { a as Button, B as ButtonProps, b as ButtonSize } from '../Button-42Dj_nRE.js';
 export { c as buttonVariants } from '../Button-42Dj_nRE.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DayPicker, DayButton, DateRange } from 'react-day-picker';
 import * as React$1 from 'react';
-import { ComponentProps, HTMLAttributes, ReactNode, SelectHTMLAttributes, ComponentPropsWithoutRef } from 'react';
+import { ComponentProps, HTMLAttributes, AriaRole, ReactNode, SelectHTMLAttributes, ComponentPropsWithoutRef } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
@@ -282,37 +282,18 @@ declare const DialogFooter: {
 declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
 declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
 
-type HeadingVariant = "h1" | "h2" | "h3" | "h4";
-type HeadingWeight = "medium" | "semibold";
-type BodyWeight = "regular" | "medium";
-type BodySize = "lg" | "regular" | "sm" | "xs" | "xxs";
-type ButtonSize = "xs" | "sm" | "md";
-type PlaceholderSize = "regular" | "large";
-type SemanticVariant = "page-heading" | "section-heading";
-type TypographyVariant = HeadingVariant | "body" | "button" | "table-header" | "placeholder" | "subheading" | "caption" | SemanticVariant;
-type WeightForVariant<V extends TypographyVariant> = V extends HeadingVariant | "subheading" | "table-header" ? HeadingWeight : V extends "body" | "caption" ? BodyWeight : never;
-type HeadingHTMLAttributes = Omit<React.HTMLAttributes<HTMLHeadingElement>, "children" | "className">;
-type ParagraphHTMLAttributes = Omit<React.HTMLAttributes<HTMLParagraphElement>, "children" | "className">;
-type SpanHTMLAttributes = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "className">;
-type HTMLAttributesForVariant<V extends TypographyVariant> = V extends HeadingVariant | "subheading" | "page-heading" | "section-heading" ? HeadingHTMLAttributes : V extends "body" ? ParagraphHTMLAttributes : SpanHTMLAttributes;
-interface BaseProps {
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "subheading" | "body" | "caption";
+type FontWeight = "light" | "regular" | "medium" | "semibold" | "bold";
+type FontSize = "xs" | "sm" | "md" | "lg" | "xl";
+interface TypographyProps {
+    variant?: TypographyVariant;
     children: React.ReactNode;
     className?: string;
+    weight?: FontWeight;
+    size?: FontSize;
+    role?: AriaRole | undefined;
 }
-type TypographyProps<V extends TypographyVariant = "body"> = BaseProps & HTMLAttributesForVariant<V> & (V extends SemanticVariant ? {
-    variant: V;
-} : // Other variants can have weight and optionally size
-{
-    variant?: V;
-    weight?: WeightForVariant<V>;
-} & (V extends HeadingVariant | "subheading" | "table-header" ? {} : V extends "button" ? {
-    size?: ButtonSize;
-} : V extends "placeholder" ? {
-    size?: PlaceholderSize;
-} : V extends "body" | "caption" ? {
-    size?: BodySize;
-} : {}));
-declare const Typography: <V extends TypographyVariant = "body">(props: TypographyProps<V>) => react_jsx_runtime.JSX.Element;
+declare const Typography: ({ variant, children, className, weight, size, role, }: TypographyProps) => react_jsx_runtime.JSX.Element;
 
 declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const TooltipCore: React$1.FC<TooltipPrimitive.TooltipProps>;
@@ -535,7 +516,7 @@ declare const SidebarTrigger: React$1.ForwardRefExoticComponent<Omit<React$1.But
 } & class_variance_authority_types.ClassProp) | undefined) => string>, "size"> & {
     asChild?: boolean;
 } & {
-    size?: ButtonSize$1 | undefined;
+    size?: ButtonSize | undefined;
     title?: string;
 } & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SidebarRail: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
@@ -676,7 +657,7 @@ declare const PaginationContent: React$1.ForwardRefExoticComponent<Omit<React$1.
 declare const PaginationItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
 type PaginationLinkProps = {
     isActive?: boolean;
-    size?: ButtonSize$1;
+    size?: ButtonSize;
 } & React$1.ComponentProps<"a">;
 declare const PaginationLink: {
     ({ className, isActive, size, children, "aria-label": ariaLabel, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
@@ -758,4 +739,4 @@ declare function ToggleGroup({ className, variant, size, spacing, children, ...p
 }): 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;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AutosizeTextAreaRef, AutosizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BodySize, type BodyWeight, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonProps, ButtonSize$1 as ButtonSize, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Combobox, ComboboxInner, type ComboboxOption, type ComboboxRef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DebouncedInput, type DebouncedInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragAndDropFileUpload, type DragAndDropFileUploadProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type HeadingWeight, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputPassword, type InputPasswordProps, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, type Option, PREDEFINED_RANGES, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PlaceholderSize, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type SemanticVariant, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, 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, TZDateRange, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputLabel, TagsInputList, Textarea, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipCore, TooltipProvider, TooltipTrigger, Typography, badgeVariants, reducer, tabsVariants, toast, toggleVariants, useAutosizeTextArea, useFormField, useSidebar, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AutosizeTextAreaRef, AutosizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonProps, ButtonSize, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Combobox, ComboboxInner, type ComboboxOption, type ComboboxRef, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DebouncedInput, type DebouncedInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DragAndDropFileUpload, type DragAndDropFileUploadProps, 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, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputPassword, type InputPasswordProps, type InputProps, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, type Option, PREDEFINED_RANGES, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, 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, SheetOverlay, SheetPortal, 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, TZDateRange, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputLabel, TagsInputList, Textarea, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipCore, TooltipProvider, TooltipTrigger, Typography, badgeVariants, reducer, tabsVariants, toast, toggleVariants, useAutosizeTextArea, useFormField, useSidebar, useToast };

package/dist/shadcn/index.js

@@ -2948,7 +2948,7 @@ const Fa = (e, t) => {
         )
       ] }),
       /* @__PURE__ */ u.jsxs(Bt, { justify: "between", className: "al-p-4 al-border-t", children: [
-        /* @__PURE__ */ u.jsxs(pl, { size: "sm", className: "al-leading-5", children: [
+        /* @__PURE__ */ u.jsxs(pl, { className: "al-leading-5", size: "sm", children: [
           /* @__PURE__ */ u.jsx("span", { className: "al-font-semibold", children: "Timezone:" }),
           " ",
           n

package/dist/storybook/Typography.stories.tsx

@@ -15,13 +15,22 @@ type Story = StoryObj<typeof meta>;
 export const Typography: Story = {
   args: {
     variant: "h1",
-    weight: "semibold",
+    weight: "regular",
+    size: "md",
     children: "Heading 1",
   },
   render: () => (
     <div className="space-y-8">
-      {/* Heading 1 Variations - Only Medium & Semibold */}
+      {/* Heading 1 Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h1" weight="light">
+          Heading 1
+          <br /> Light
+        </Component>
+        <Component variant="h1" weight="regular">
+          Heading 1
+          <br /> Regular
+        </Component>
         <Component variant="h1" weight="medium">
           Heading 1 <br />
           Medium
@@ -30,13 +39,25 @@ export const Typography: Story = {
           Heading 1 <br />
           Semibold
         </Component>
+        <Component variant="h1" weight="bold">
+          Heading 1 <br />
+          Bold
+        </Component>
         <Component variant="caption" className="text-gray-500">
-          30px / Line height: 38px
+          32px / Line height: 32px
         </Component>
       </div>
 
-      {/* Heading 2 Variations - Only Medium & Semibold */}
+      {/* Heading 2 Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h2" weight="light">
+          Heading 2 <br />
+          Light
+        </Component>
+        <Component variant="h2" weight="regular">
+          Heading 2 <br />
+          Regular
+        </Component>
         <Component variant="h2" weight="medium">
           Heading 2 <br />
           Medium
@@ -45,13 +66,25 @@ export const Typography: Story = {
           Heading 2 <br />
           Semibold
         </Component>
+        <Component variant="h2" weight="bold">
+          Heading 2 <br />
+          Bold
+        </Component>
         <Component variant="caption" className="text-gray-500">
           24px / Line height: 32px
         </Component>
       </div>
 
-      {/* Heading 3 Variations - Only Medium & Semibold */}
+      {/* Heading 3 Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h3" weight="light">
+          Heading 3 <br />
+          Light
+        </Component>
+        <Component variant="h3" weight="regular">
+          Heading 3 <br />
+          Regular
+        </Component>
         <Component variant="h3" weight="medium">
           Heading 3 <br />
           Medium
@@ -60,13 +93,25 @@ export const Typography: Story = {
           Heading 3 <br />
           Semibold
         </Component>
+        <Component variant="h3" weight="bold">
+          Heading 3 <br />
+          Bold
+        </Component>
         <Component variant="caption" className="text-gray-500">
-          20px / Line height: 24px
+          18px / Line height: 26px
         </Component>
       </div>
 
-      {/* Heading 4 Variations - Only Medium & Semibold */}
+      {/* Heading 4 Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="h4" weight="light">
+          Heading 4 <br />
+          Light
+        </Component>
+        <Component variant="h4" weight="regular">
+          Heading 4 <br />
+          Regular
+        </Component>
         <Component variant="h4" weight="medium">
           Heading 4 <br />
           Medium
@@ -75,13 +120,25 @@ export const Typography: Story = {
           Heading 4 <br />
           Semibold
         </Component>
+        <Component variant="h4" weight="bold">
+          Heading 4 <br />
+          Bold
+        </Component>
         <Component variant="caption" className="text-gray-500">
           16px / Line height: 24px
         </Component>
       </div>
 
-      {/* Subheading Variations - Only Medium & Semibold */}
+      {/* Subheading Variations */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
+        <Component variant="subheading" weight="light">
+          Sub heading <br />
+          Light
+        </Component>
+        <Component variant="subheading" weight="regular">
+          Sub heading <br />
+          Regular
+        </Component>
         <Component variant="subheading" weight="medium">
           Sub heading <br />
           Medium
@@ -90,140 +147,56 @@ export const Typography: Story = {
           Sub heading <br />
           Semibold
         </Component>
-        <Component variant="caption" className="text-gray-500">
-          14px / Line height: 20px
-        </Component>
-      </div>
-
-      {/* Body Text - Regular Weight */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="body" weight="regular" size="lg">
-          Body Large <br /> Regular
-        </Component>
-        <Component variant="body" weight="regular" size="regular">
-          Body Regular <br /> Regular
-        </Component>
-        <Component variant="body" weight="regular" size="sm">
-          Body Small <br /> Regular
-        </Component>
-        <Component variant="body" weight="regular" size="xs">
-          Body X-Small <br /> Regular
-        </Component>
-        <Component weight="regular" size="xxs">
-          Body XX-Small <br /> Regular
-        </Component>
-        <Component variant="caption" className="text-gray-500">
-          18px/24px, 16px/24px, 14px/20px, 12px/18px, 10px/14px
-        </Component>
-      </div>
-
-      {/* Body Text - Medium Weight */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="body" weight="medium" size="lg">
-          Body Large <br /> Medium
-        </Component>
-        <Component variant="body" weight="medium" size="regular">
-          Body Regular <br /> Medium
-        </Component>
-        <Component variant="body" weight="medium" size="sm">
-          Body Small <br /> Medium
-        </Component>
-        <Component variant="body" weight="medium" size="xs">
-          Body X-Small <br /> Medium
-        </Component>
-        <Component variant="body" weight="medium" size="xxs">
-          Body XX-Small <br /> Medium
-        </Component>
-        <Component variant="caption" className="text-gray-500">
-          For emphasis, key values, important inline text
-        </Component>
-      </div>
-
-      {/* Caption - Base Size Only (8px/16px) */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="caption">
-          Caption <br /> Base Size
-        </Component>
-        <Component variant="caption" className="text-gray-500">
-          8px/16px - For extremely tiny metadata only
-        </Component>
-        <Component variant="caption" className="text-gray-500">
-          Note: For all other sizes, use variant=&quot;body&quot;
-        </Component>
-      </div>
-
-      {/* Semantic Variants Section Header */}
-      <div className="al-border-t-2 al-pt-8 al-mt-8">
-        <Component variant="h2" weight="semibold" className="al-mb-4">
-          Semantic Variants
-        </Component>
-        <Component variant="caption" className="text-gray-500 al-mb-4 al-block">
-          Pre-configured variants for consistent page structure. No weight/size props allowed.
+        <Component variant="subheading" weight="bold">
+          Sub heading <br />
+          Bold
         </Component>
-      </div>
-
-      {/* Page Heading - Fixed H2 Semibold */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="page-heading">Page Heading</Component>
         <Component variant="caption" className="text-gray-500">
-          H2 + Semibold (fixed) - Use for main page titles
+          14px / Line height: 20px
         </Component>
       </div>
 
-      {/* Section Heading - Fixed H3 Medium */}
+      {/* Body/Paragraph Example */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="section-heading">Section Heading</Component>
-        <Component variant="caption" className="text-gray-500">
-          H3 + Medium (fixed) - Use for section titles within a page
+        <Component variant="body" size="xs">
+          Body XS <br /> Regular
         </Component>
-      </div>
-
-      {/* Utilities Section Header */}
-      <div className="al-border-t-2 al-pt-8 al-mt-8">
-        <Component variant="h2" weight="semibold" className="al-mb-4">
-          Utility Variants
+        <Component variant="body" size="sm">
+          Body SM <br /> Regular
         </Component>
-      </div>
-
-      {/* Button Text Utility - 3 sizes, fixed Medium weight */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="button" size="xs">
-          Button XS <br /> (12px/16px)
+        <Component variant="body" size="md">
+          Body MD <br /> Regular
         </Component>
-        <Component variant="button" size="sm">
-          Button SM <br /> (14px/20px)
+        <Component variant="body" size="lg">
+          Body LG <br /> Regular
         </Component>
-        <Component variant="button" size="md">
-          Button MD <br /> (16px/24px)
+        <Component variant="body" size="xl">
+          Body XL <br /> Regular
         </Component>
         <Component variant="caption" className="text-gray-500">
-          Button text utility - Fixed Medium weight (500)
+          14px, 10px, 8px | Line height: 18px, 16px, 14px
         </Component>
       </div>
 
-      {/* Table Header Utility - Fixed size, 2 weights */}
+      {/* Caption Example */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="table-header" weight="medium">
-          Table Header <br /> Medium
+        <Component variant="caption" size="xs">
+          Caption XS <br /> Regular
         </Component>
-        <Component variant="table-header" weight="semibold">
-          Table Header <br /> Semibold
+        <Component variant="caption" size="sm">
+          Caption SM <br /> Regular
         </Component>
-        <Component variant="caption" className="text-gray-500">
-          12px/18px - For table column headers
+        <Component variant="caption" weight="medium" size="sm">
+          Caption SM <br /> Medium
         </Component>
-      </div>
-
-      {/* Placeholder Utility - 2 sizes, fixed Regular weight, auto-italic */}
-      <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="placeholder" size="regular">
-          Placeholder Regular <br /> (14px/20px)
+        <Component variant="caption" weight="medium" size="md">
+          Caption MD <br /> Medium
         </Component>
-        <Component variant="placeholder" size="large">
-          Placeholder Large <br /> (16px/24px)
+        <Component variant="caption" weight="medium" size="lg">
+          Caption LG <br /> Medium
         </Component>
         <Component variant="caption" className="text-gray-500">
-          Italic placeholder text - Fixed Regular weight (400)
+          14px, 10px | Line height: 18px, 16px
         </Component>
       </div>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.77-beta.4",
+  "version": "0.0.77-combobox-beta1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"