@altimateai/ui-components 0.0.77-combobox-beta1 → 0.0.77

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, { variant: "body", children: e.description })
+        /* @__PURE__ */ h.jsx(ft, { 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 } from '../Button-42Dj_nRE.js';
+import { a as Button, B as ButtonProps, b as ButtonSize$1 } 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, AriaRole, ReactNode, SelectHTMLAttributes, ComponentPropsWithoutRef } from 'react';
+import { ComponentProps, HTMLAttributes, 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,18 +282,37 @@ 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 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;
+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 {
     children: React.ReactNode;
     className?: string;
-    weight?: FontWeight;
-    size?: FontSize;
-    role?: AriaRole | undefined;
 }
-declare const Typography: ({ variant, children, className, weight, size, role, }: TypographyProps) => react_jsx_runtime.JSX.Element;
+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 TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
 declare const TooltipCore: React$1.FC<TooltipPrimitive.TooltipProps>;
@@ -516,7 +535,7 @@ declare const SidebarTrigger: React$1.ForwardRefExoticComponent<Omit<React$1.But
 } & class_variance_authority_types.ClassProp) | undefined) => string>, "size"> & {
     asChild?: boolean;
 } & {
-    size?: ButtonSize | undefined;
+    size?: ButtonSize$1 | 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>>;
@@ -657,7 +676,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;
+    size?: ButtonSize$1;
 } & React$1.ComponentProps<"a">;
 declare const PaginationLink: {
     ({ className, isActive, size, children, "aria-label": ariaLabel, ...props }: PaginationLinkProps): react_jsx_runtime.JSX.Element;
@@ -739,4 +758,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, 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 };
+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 };

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, { className: "al-leading-5", size: "sm", children: [
+        /* @__PURE__ */ u.jsxs(pl, { size: "sm", className: "al-leading-5", children: [
           /* @__PURE__ */ u.jsx("span", { className: "al-font-semibold", children: "Timezone:" }),
           " ",
           n

package/dist/storybook/Typography.stories.tsx

@@ -15,22 +15,13 @@ type Story = StoryObj<typeof meta>;
 export const Typography: Story = {
   args: {
     variant: "h1",
-    weight: "regular",
-    size: "md",
+    weight: "semibold",
     children: "Heading 1",
   },
   render: () => (
     <div className="space-y-8">
-      {/* Heading 1 Variations */}
+      {/* Heading 1 Variations - Only Medium & Semibold */}
       <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
@@ -39,25 +30,13 @@ 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">
-          32px / Line height: 32px
+          30px / Line height: 38px
         </Component>
       </div>
 
-      {/* Heading 2 Variations */}
+      {/* Heading 2 Variations - Only Medium & Semibold */}
       <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
@@ -66,25 +45,13 @@ 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 */}
+      {/* Heading 3 Variations - Only Medium & Semibold */}
       <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
@@ -93,25 +60,13 @@ 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">
-          18px / Line height: 26px
+          20px / Line height: 24px
         </Component>
       </div>
 
-      {/* Heading 4 Variations */}
+      {/* Heading 4 Variations - Only Medium & Semibold */}
       <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
@@ -120,25 +75,13 @@ 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 */}
+      {/* Subheading Variations - Only Medium & Semibold */}
       <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
@@ -147,56 +90,140 @@ export const Typography: Story = {
           Sub heading <br />
           Semibold
         </Component>
-        <Component variant="subheading" weight="bold">
-          Sub heading <br />
-          Bold
-        </Component>
         <Component variant="caption" className="text-gray-500">
           14px / Line height: 20px
         </Component>
       </div>
 
-      {/* Body/Paragraph Example */}
+      {/* Body Text - Regular Weight */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="body" size="xs">
-          Body XS <br /> Regular
+        <Component variant="body" weight="regular" size="lg">
+          Body Large <br /> Regular
         </Component>
-        <Component variant="body" size="sm">
-          Body SM <br /> Regular
+        <Component variant="body" weight="regular" size="regular">
+          Body Regular <br /> Regular
         </Component>
-        <Component variant="body" size="md">
-          Body MD <br /> Regular
+        <Component variant="body" weight="regular" size="sm">
+          Body Small <br /> Regular
         </Component>
-        <Component variant="body" size="lg">
-          Body LG <br /> Regular
+        <Component variant="body" weight="regular" size="xs">
+          Body X-Small <br /> Regular
         </Component>
-        <Component variant="body" size="xl">
-          Body XL <br /> Regular
+        <Component weight="regular" size="xxs">
+          Body XX-Small <br /> Regular
         </Component>
         <Component variant="caption" className="text-gray-500">
-          14px, 10px, 8px | Line height: 18px, 16px, 14px
+          18px/24px, 16px/24px, 14px/20px, 12px/18px, 10px/14px
         </Component>
       </div>
 
-      {/* Caption Example */}
+      {/* Body Text - Medium Weight */}
       <div className="al-border al-flex al-justify-between al-p-4 al-my-2">
-        <Component variant="caption" size="xs">
-          Caption XS <br /> Regular
+        <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="caption" size="sm">
-          Caption SM <br /> Regular
+        <Component variant="body" weight="medium" size="sm">
+          Body Small <br /> Medium
         </Component>
-        <Component variant="caption" weight="medium" size="sm">
-          Caption SM <br /> Medium
+        <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" weight="medium" size="md">
-          Caption MD <br /> Medium
+        <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>
+      </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
+        </Component>
+      </div>
+
+      {/* Section Heading - Fixed H3 Medium */}
+      <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>
+      </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>
+      </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>
+        <Component variant="button" size="sm">
+          Button SM <br /> (14px/20px)
+        </Component>
+        <Component variant="button" size="md">
+          Button MD <br /> (16px/24px)
+        </Component>
+        <Component variant="caption" className="text-gray-500">
+          Button text utility - Fixed Medium weight (500)
+        </Component>
+      </div>
+
+      {/* Table Header Utility - Fixed size, 2 weights */}
+      <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>
+        <Component variant="table-header" weight="semibold">
+          Table Header <br /> Semibold
+        </Component>
+        <Component variant="caption" className="text-gray-500">
+          12px/18px - For table column headers
+        </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>
-        <Component variant="caption" weight="medium" size="lg">
-          Caption LG <br /> Medium
+        <Component variant="placeholder" size="large">
+          Placeholder Large <br /> (16px/24px)
         </Component>
         <Component variant="caption" className="text-gray-500">
-          14px, 10px | Line height: 18px, 16px
+          Italic placeholder text - Fixed Regular weight (400)
         </Component>
       </div>
     </div>

package/package.json

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