@altimateai/ui-components 0.0.77-beta.1 → 0.0.77-beta.3

package/dist/Stack.js

@@ -6911,8 +6911,12 @@ const ue = Gt("", {
       button: "",
       // Button uses size for styling
       "table-header": "al-text-table-header",
-      placeholder: ""
+      placeholder: "",
       // Placeholder uses size for styling
+      "page-heading": "al-text-h2",
+      // Semantic variant for page headings (fixed h2 + semibold)
+      "section-heading": "al-text-h3"
+      // Semantic variant for section headings (fixed h3 + semibold)
     },
     weight: {
       regular: "al-font-regular",
@@ -6959,29 +6963,36 @@ const ue = Gt("", {
   caption: "span",
   button: "span",
   "table-header": "span",
-  placeholder: "span"
+  placeholder: "span",
+  "page-heading": "h2",
+  "section-heading": "h3"
 }, md = (e) => {
   const { variant: t = "body", children: n, className: r, role: o } = e;
   let s, a;
-  if (t === "h1" || t === "h2" || t === "h3" || t === "h4" || t === "subheading")
-    s = e.weight ?? "semibold", a = void 0;
+  const i = () => e.weight;
+  if (t === "page-heading")
+    s = "semibold", a = void 0;
+  else if (t === "section-heading")
+    s = "medium", a = void 0;
+  else if (t === "h1" || t === "h2" || t === "h3" || t === "h4" || t === "subheading")
+    s = i() ?? "semibold", a = void 0;
   else if (t === "table-header")
-    s = e.weight ?? "medium", a = void 0;
+    s = i() ?? "medium", a = void 0;
   else if (t === "body") {
-    const c = e;
-    s = c.weight ?? "regular", a = c.size ?? "regular";
+    const u = e;
+    s = u.weight ?? "regular", a = u.size ?? "regular";
   } else if (t === "caption") {
-    const c = e;
-    s = c.weight ?? "regular", a = c.size;
+    const u = e;
+    s = u.weight ?? "regular", a = u.size;
   } else if (t === "button") {
-    const c = e;
-    s = "medium", a = c.size ? `button-${c.size}` : "button-sm";
+    const u = e;
+    s = "medium", a = u.size ? `button-${u.size}` : "button-sm";
   } else {
-    const c = e;
-    s = "regular", a = c.size ? `placeholder-${c.size}` : "placeholder-large";
+    const u = e;
+    s = "regular", a = u.size ? `placeholder-${u.size}` : "placeholder-large";
   }
-  const i = Yu[t];
-  return /* @__PURE__ */ g.jsx(i, { className: M(ue({ variant: t, weight: s, size: a }), r), role: o, children: n });
+  const c = Yu[t];
+  return /* @__PURE__ */ g.jsx(c, { className: M(ue({ variant: t, weight: s, size: a }), r), role: o, children: n });
 }, gd = H(function({
   children: t,
   wrap: n = !1,

package/dist/shadcn/index.d.ts

@@ -288,14 +288,18 @@ type BodyWeight = "regular" | "medium";
 type BodySize = "lg" | "regular" | "sm" | "xs" | "xxs";
 type ButtonSize = "xs" | "sm" | "md";
 type PlaceholderSize = "regular" | "large";
-type TypographyVariant = HeadingVariant | "body" | "button" | "table-header" | "placeholder" | "subheading" | "caption";
+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;
 interface BaseProps {
     children: React.ReactNode;
     className?: string;
     role?: AriaRole | undefined;
 }
-type TypographyProps<V extends TypographyVariant = "body"> = BaseProps & {
+type TypographyProps<V extends TypographyVariant = "body"> = BaseProps & (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" ? {
@@ -304,7 +308,7 @@ type TypographyProps<V extends TypographyVariant = "body"> = BaseProps & {
     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>;
@@ -751,4 +755,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$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, 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/storybook/Typography.stories.tsx

@@ -152,6 +152,32 @@ export const Typography: Story = {
         </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">

package/package.json

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