@cloudvoyant/helix 0.13.0 → 0.14.0

package/dist/index.cjs

@@ -99,6 +99,13 @@ __export(index_exports, {
   numberInputInputBase: () => numberInputInputBase,
   numberInputRootBase: () => numberInputRootBase,
   numberInputTriggerBase: () => numberInputTriggerBase,
+  pageContentBase: () => pageContentBase,
+  pageFooterBase: () => pageFooterBase,
+  pageGutterAreaBase: () => pageGutterAreaBase,
+  pageGutterContentVariants: () => pageGutterContentVariants,
+  pageGutterVariants: () => pageGutterVariants,
+  pageSectionBase: () => pageSectionBase,
+  pageVariants: () => pageVariants,
   paginationEllipsisBase: () => paginationEllipsisBase,
   paginationItemBase: () => paginationItemBase,
   paginationRootBase: () => paginationRootBase,
@@ -409,6 +416,53 @@ var scrollScrollbarBase = "relative m-[var(--scrollbar-margin)] flex touch-none
 var scrollThumbBase = "rounded-[inherit] bg-border/40 transition-colors data-[orientation=vertical]:w-full data-[orientation=horizontal]:h-full";
 var scrollCornerBase = "m-[var(--scrollbar-margin)] bg-muted opacity-0 transition-opacity duration-150 data-[hover]:opacity-100";
 
+// src/page.ts
+var import_class_variance_authority6 = require("class-variance-authority");
+
+// src/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/page.ts
+var pageVariants = (0, import_class_variance_authority6.cva)("min-h-svh w-full", {
+  variants: {
+    variant: {
+      default: 'grid grid-cols-[auto_minmax(0,1fr)_auto] grid-rows-[minmax(100svh,1fr)_auto] [grid-template-areas:"left_content_right"_"footer_footer_footer"]',
+      landing: colBase
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var pageGutterAreaBase = "h-full min-w-0 [grid-area:left]";
+var pageGutterVariants = (0, import_class_variance_authority6.cva)(
+  "sticky top-0 h-svh w-4 shrink-0 overflow-hidden p-0.5 md:w-56 md:p-2 lg:w-72 lg:p-3",
+  {
+    variants: {
+      side: {
+        left: "",
+        right: ""
+      }
+    },
+    defaultVariants: { side: "left" }
+  }
+);
+var pageGutterContentVariants = (0, import_class_variance_authority6.cva)("hidden h-full w-full flex-col md:flex", {
+  variants: {
+    align: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end"
+    }
+  },
+  defaultVariants: { align: "start" }
+});
+var pageContentBase = "min-w-0 [grid-area:content]";
+var pageFooterBase = "w-full shrink-0 [grid-area:footer]";
+var pageSectionBase = cn(colBase, "min-h-svh w-full");
+
 // src/splitter.ts
 var splitterRootBase = "";
 var splitterPanelBase = "";
@@ -417,12 +471,12 @@ var splitterResizeTriggerSeparatorBase = "absolute bg-border group-data-[orienta
 var splitterResizeTriggerIndicatorBase = "relative z-10 rounded-full border border-border bg-muted shadow-xs data-[dragging]:bg-muted-foreground data-[focus]:bg-accent data-[disabled]:hidden data-[orientation=horizontal]:h-6 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-6";
 
 // src/sidebar.ts
-var import_class_variance_authority6 = require("class-variance-authority");
+var import_class_variance_authority7 = require("class-variance-authority");
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var sidebarMenuButtonVariants = (0, import_class_variance_authority6.cva)(
+var sidebarMenuButtonVariants = (0, import_class_variance_authority7.cva)(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
@@ -475,11 +529,11 @@ var sidebarStyles = {
 };
 
 // src/navbar-menu.ts
-var import_class_variance_authority7 = require("class-variance-authority");
+var import_class_variance_authority8 = require("class-variance-authority");
 var navbarMenuRootBase = "group/nav-menu relative flex max-w-max flex-1 items-center justify-center";
 var navbarMenuListBase = "group flex flex-1 list-none items-center justify-center gap-1";
 var navbarMenuItemBase = "relative";
-var navbarMenuTriggerStyle = (0, import_class_variance_authority7.cva)(
+var navbarMenuTriggerStyle = (0, import_class_variance_authority8.cva)(
   "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent",
   {
     variants: {
@@ -504,10 +558,10 @@ var navbarMenuViewportBase = "absolute left-(--viewport-x) top-0 mt-1.5 h-(--vie
 var navbarMenuIndicatorBase = "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-50 flex h-1.5 items-end justify-center overflow-hidden";
 
 // src/tabs.ts
-var import_class_variance_authority8 = require("class-variance-authority");
+var import_class_variance_authority9 = require("class-variance-authority");
 var tabsRootBase = "flex flex-col gap-2 data-[orientation=vertical]:flex-row";
 var tabsListBase = "relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground data-[orientation=vertical]:flex-col";
-var tabsListVariants = (0, import_class_variance_authority8.cva)("", {
+var tabsListVariants = (0, import_class_variance_authority9.cva)("", {
   variants: {
     variant: {
       default: "rounded-lg",
@@ -519,7 +573,7 @@ var tabsListVariants = (0, import_class_variance_authority8.cva)("", {
   }
 });
 var tabsIndicatorBase = "absolute inset-x-0 bottom-0 h-(--height) w-(--width) transition-[width,translate] duration-200 ease-in-out motion-reduce:transition-none";
-var tabsIndicatorVariants = (0, import_class_variance_authority8.cva)("", {
+var tabsIndicatorVariants = (0, import_class_variance_authority9.cva)("", {
   variants: {
     variant: {
       default: "-z-1 rounded-lg bg-accent",
@@ -540,8 +594,8 @@ var paginationItemBase = "inline-flex h-9 min-w-9 items-center justify-center wh
 var paginationEllipsisBase = "flex h-8 w-12 items-end justify-center text-muted-foreground pointer-events-none select-none [&_svg]:size-4";
 
 // src/navbar.ts
-var import_class_variance_authority9 = require("class-variance-authority");
-var navbarVariants = (0, import_class_variance_authority9.cva)(
+var import_class_variance_authority10 = require("class-variance-authority");
+var navbarVariants = (0, import_class_variance_authority10.cva)(
   "w-full bg-background/80 backdrop-blur transition-[box-shadow,height,translate] duration-300",
   {
     variants: {
@@ -563,7 +617,7 @@ var navbarVariants = (0, import_class_variance_authority9.cva)(
   }
 );
 var navbarContainerBase = "flex items-center justify-between transition-[height,gap,padding] duration-300";
-var navbarDensityVariants = (0, import_class_variance_authority9.cva)("", {
+var navbarDensityVariants = (0, import_class_variance_authority10.cva)("", {
   variants: {
     density: {
       relaxed: "h-16 gap-4 px-4 md:px-6",
@@ -577,7 +631,7 @@ var navbarDensityVariants = (0, import_class_variance_authority9.cva)("", {
 var navbarShrunkBase = "h-12";
 var navbarBrandBase = "flex shrink-0 items-center gap-2";
 var navbarMenuBase = "hidden items-center md:flex";
-var navbarMenuPlacementVariants = (0, import_class_variance_authority9.cva)("", {
+var navbarMenuPlacementVariants = (0, import_class_variance_authority10.cva)("", {
   variants: {
     placement: {
       left: "justify-start",
@@ -590,7 +644,7 @@ var navbarMenuPlacementVariants = (0, import_class_variance_authority9.cva)("",
   }
 });
 var navbarActionsBase = "ml-auto hidden items-center gap-2 md:flex";
-var navbarTriggerVariants = (0, import_class_variance_authority9.cva)(
+var navbarTriggerVariants = (0, import_class_variance_authority10.cva)(
   "inline-flex h-9 w-9 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
   {
     variants: {
@@ -669,13 +723,6 @@ var THEMES = [
 ];
 var THEME_NAMES = THEMES.map((t) => t.name);
 
-// src/cn.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-
 // src/field.ts
 var fieldRootBase = "flex w-full flex-col gap-2 data-invalid:text-destructive";
 var fieldLabelBase = "flex w-fit select-none items-center gap-1 text-sm font-medium leading-none text-foreground";
@@ -688,8 +735,8 @@ var fieldsetHelperBase = "text-sm text-muted-foreground";
 var fieldsetErrorBase = "text-sm text-destructive";
 
 // src/input.ts
-var import_class_variance_authority10 = require("class-variance-authority");
-var inputVariants = (0, import_class_variance_authority10.cva)(
+var import_class_variance_authority11 = require("class-variance-authority");
+var inputVariants = (0, import_class_variance_authority11.cva)(
   "flex w-full min-w-0 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24 data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
   {
     variants: {
@@ -715,8 +762,8 @@ var numberInputInputBase = "h-9 w-full min-w-0 flex-1 border-0 bg-transparent px
 var numberInputTriggerBase = "flex size-9 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
 
 // src/checkbox.ts
-var import_class_variance_authority11 = require("class-variance-authority");
-var checkboxVariants = (0, import_class_variance_authority11.cva)(
+var import_class_variance_authority12 = require("class-variance-authority");
+var checkboxVariants = (0, import_class_variance_authority12.cva)(
   "relative inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-transparent shadow-xs transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 focus-visible:ring-offset-1 focus-visible:ring-offset-background data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
@@ -736,8 +783,8 @@ var checkboxLabelBase = "select-none text-sm font-medium leading-none";
 var checkboxGroupBase = "flex flex-col gap-2";
 
 // src/switch.ts
-var import_class_variance_authority12 = require("class-variance-authority");
-var switchVariants = (0, import_class_variance_authority12.cva)(
+var import_class_variance_authority13 = require("class-variance-authority");
+var switchVariants = (0, import_class_variance_authority13.cva)(
   "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-input p-0.5 shadow-xs transition-colors outline-none data-[state=checked]:bg-primary data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24 focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
@@ -757,7 +804,7 @@ var switchThumbBase = "pointer-events-none block aspect-square h-full w-auto rou
 var switchLabelBase = "select-none text-sm font-medium leading-none";
 
 // src/select.ts
-var import_class_variance_authority13 = require("class-variance-authority");
+var import_class_variance_authority14 = require("class-variance-authority");
 var selectTriggerBase = "flex w-fit cursor-default items-center gap-2 whitespace-nowrap data-[placeholder-shown]:text-muted-foreground data-[state=open]:border-ring data-[state=open]:ring-[3px] data-[state=open]:ring-ring/30 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground";
 var selectValueBase = "flex min-w-0 items-center gap-2 truncate";
 var selectIndicatorBase = "flex items-center justify-center text-muted-foreground";
@@ -768,7 +815,7 @@ var selectItemGroupLabelBase = "px-2 py-1.5 text-xs font-semibold text-muted-for
 var selectItemBase = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 pe-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground";
 var selectItemTextBase = "flex w-full flex-1 items-center gap-2";
 var selectItemIndicatorBase = "absolute inset-y-0 end-2 flex items-center justify-center text-foreground";
-var nativeSelectVariants = (0, import_class_variance_authority13.cva)(
+var nativeSelectVariants = (0, import_class_variance_authority14.cva)(
   "appearance-none w-full min-w-0 rounded-md border border-input bg-transparent pe-8 ps-2.5 text-sm shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24",
   {
     variants: {
@@ -787,7 +834,7 @@ var nativeSelectWrapperBase = "relative w-fit [&_svg]:pointer-events-none [&_svg
 var nativeSelectIconBase = "pointer-events-none absolute inset-y-0 end-2.5 flex items-center justify-center text-muted-foreground";
 
 // src/combobox.ts
-var import_class_variance_authority14 = require("class-variance-authority");
+var import_class_variance_authority15 = require("class-variance-authority");
 var comboboxControlBase = "relative flex w-full flex-wrap items-center gap-1";
 var comboboxInputBase = "pe-8";
 var comboboxTriggerBase = "absolute inset-y-0 end-1 flex w-8 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
@@ -795,7 +842,7 @@ var comboboxClearTriggerBase = "absolute inset-y-0 end-9 flex items-center justi
 var comboboxPositionerBase = "z-50";
 var comboboxContentBase = "relative z-50 max-h-96 min-w-48 overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none";
 var comboboxItemGroupLabelBase = "px-2 py-1.5 text-xs font-semibold text-muted-foreground";
-var comboboxItemVariants = (0, import_class_variance_authority14.cva)(
+var comboboxItemVariants = (0, import_class_variance_authority15.cva)(
   "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
   {
     variants: {
@@ -903,6 +950,13 @@ var tagsInputClearTriggerBase = "ms-auto flex shrink-0 items-center justify-cent
   numberInputInputBase,
   numberInputRootBase,
   numberInputTriggerBase,
+  pageContentBase,
+  pageFooterBase,
+  pageGutterAreaBase,
+  pageGutterContentVariants,
+  pageGutterVariants,
+  pageSectionBase,
+  pageVariants,
   paginationEllipsisBase,
   paginationItemBase,
   paginationRootBase,

package/dist/index.d.cts

@@ -91,6 +91,23 @@ declare const scrollScrollbarBase = "relative m-[var(--scrollbar-margin)] flex t
 declare const scrollThumbBase = "rounded-[inherit] bg-border/40 transition-colors data-[orientation=vertical]:w-full data-[orientation=horizontal]:h-full";
 declare const scrollCornerBase = "m-[var(--scrollbar-margin)] bg-muted opacity-0 transition-opacity duration-150 data-[hover]:opacity-100";
 
+declare const pageVariants: (props?: ({
+    variant?: "default" | "landing" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageGutterAreaBase = "h-full min-w-0 [grid-area:left]";
+declare const pageGutterVariants: (props?: ({
+    side?: "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageGutterContentVariants: (props?: ({
+    align?: "start" | "center" | "end" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageContentBase = "min-w-0 [grid-area:content]";
+declare const pageFooterBase = "w-full shrink-0 [grid-area:footer]";
+declare const pageSectionBase: string;
+type PageVariants = VariantProps<typeof pageVariants>;
+type PageGutterVariants = VariantProps<typeof pageGutterVariants>;
+type PageGutterContentVariants = VariantProps<typeof pageGutterContentVariants>;
+
 /**
  * Intentionally empty: Ark UI sets `display`/`flex-direction` on the root and
  * the panel's `height`/`width: 100%`, `overflow`, and flex sizing inline.
@@ -203,7 +220,7 @@ declare const navbarShrunkBase = "h-12";
 declare const navbarBrandBase = "flex shrink-0 items-center gap-2";
 declare const navbarMenuBase = "hidden items-center md:flex";
 declare const navbarMenuPlacementVariants: (props?: ({
-    placement?: "left" | "center" | "right" | null | undefined;
+    placement?: "left" | "right" | "center" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const navbarActionsBase = "ml-auto hidden items-center gap-2 md:flex";
 declare const navbarTriggerVariants: (props?: ({
@@ -336,4 +353,4 @@ interface TagsInputProps {
     className?: string;
 }
 
-export { type BadgeProps, type BadgeVariants, type ButtonProps, type ButtonVariants, type CardCoverProps, type CardProps, type CardVariants, type CheckboxProps, type CheckboxVariants, type ComboboxItemVariants, type ComboboxProps, type InputProps, type InputVariants, type ItemProps, type ItemVariants, type NativeSelectVariants, type NavbarDensity, type NavbarMenuDensity, type NavbarMenuVariant, type NavbarVariant, type NumberInputProps, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, type SelectItemData, type SelectProps, type SidebarContextProps, type SidebarMenuButtonVariants, type SwitchProps, type SwitchVariants, THEMES, THEME_NAMES, type TabsIndicatorVariants, type TabsListVariants, type TagsInputProps, type TextareaProps, type ThemeMeta, type ToggleButtonProps, type ToggleButtonVariants, badgeVariants, buttonVariants, cardBodyBase, cardCoverVariants, cardDescriptionBase, cardFooterBase, cardHeaderBase, cardTitleBase, cardVariants, centerBase, checkboxGroupBase, checkboxIndicatorBase, checkboxLabelBase, checkboxVariants, cn, colBase, comboboxClearTriggerBase, comboboxContentBase, comboboxControlBase, comboboxEmptyBase, comboboxInputBase, comboboxItemGroupLabelBase, comboboxItemIndicatorBase, comboboxItemVariants, comboboxListBase, comboboxPositionerBase, comboboxTriggerBase, containerBase, fieldErrorBase, fieldHelperBase, fieldLabelBase, fieldRequiredIndicatorBase, fieldRootBase, fieldsetErrorBase, fieldsetHelperBase, fieldsetLegendBase, fieldsetRootBase, hstackBase, inputVariants, itemVariants, nativeSelectIconBase, nativeSelectVariants, nativeSelectWrapperBase, navbarActionsBase, navbarActivationAreaBase, navbarBrandBase, navbarContainerBase, navbarDensityVariants, navbarMenuBase, navbarMenuContentBase, navbarMenuIndicatorBase, navbarMenuItemBase, navbarMenuLinkBase, navbarMenuListBase, navbarMenuPlacementVariants, navbarMenuRootBase, navbarMenuTriggerStyle, navbarMenuViewportBase, navbarMenuViewportPositionerBase, navbarMobileActionsBase, navbarMobileBase, navbarMobileContentBase, navbarMobileHeaderBase, navbarMobileMenuBase, navbarMobileMenuContentBase, navbarMobileMenuTriggerBase, navbarShrunkBase, navbarTriggerVariants, navbarVariants, numberInputControlBase, numberInputInputBase, numberInputRootBase, numberInputTriggerBase, paginationEllipsisBase, paginationItemBase, paginationRootBase, paginationTriggerBase, rowBase, scrollContentBase, scrollCornerBase, scrollRootBase, scrollScrollbarBase, scrollThumbBase, scrollViewportBase, selectClearTriggerBase, selectContentBase, selectIndicatorBase, selectItemBase, selectItemGroupLabelBase, selectItemIndicatorBase, selectItemTextBase, selectPositionerBase, selectTriggerBase, selectValueBase, sidebarMenuButtonVariants, sidebarStyles, splitterPanelBase, splitterResizeTriggerBase, splitterResizeTriggerIndicatorBase, splitterResizeTriggerSeparatorBase, splitterRootBase, stackBase, switchControlBase, switchLabelBase, switchThumbBase, switchVariants, tabsContentBase, tabsIndicatorBase, tabsIndicatorVariants, tabsListBase, tabsListVariants, tabsRootBase, tabsTriggerBase, tagsInputClearTriggerBase, tagsInputControlBase, tagsInputInputBase, tagsInputItemBase, tagsInputItemDeleteTriggerBase, tagsInputItemInputBase, tagsInputItemTextBase, tagsInputRootBase, textareaBase, toggleButtonVariants, vstackBase };
+export { type BadgeProps, type BadgeVariants, type ButtonProps, type ButtonVariants, type CardCoverProps, type CardProps, type CardVariants, type CheckboxProps, type CheckboxVariants, type ComboboxItemVariants, type ComboboxProps, type InputProps, type InputVariants, type ItemProps, type ItemVariants, type NativeSelectVariants, type NavbarDensity, type NavbarMenuDensity, type NavbarMenuVariant, type NavbarVariant, type NumberInputProps, type PageGutterContentVariants, type PageGutterVariants, type PageVariants, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, type SelectItemData, type SelectProps, type SidebarContextProps, type SidebarMenuButtonVariants, type SwitchProps, type SwitchVariants, THEMES, THEME_NAMES, type TabsIndicatorVariants, type TabsListVariants, type TagsInputProps, type TextareaProps, type ThemeMeta, type ToggleButtonProps, type ToggleButtonVariants, badgeVariants, buttonVariants, cardBodyBase, cardCoverVariants, cardDescriptionBase, cardFooterBase, cardHeaderBase, cardTitleBase, cardVariants, centerBase, checkboxGroupBase, checkboxIndicatorBase, checkboxLabelBase, checkboxVariants, cn, colBase, comboboxClearTriggerBase, comboboxContentBase, comboboxControlBase, comboboxEmptyBase, comboboxInputBase, comboboxItemGroupLabelBase, comboboxItemIndicatorBase, comboboxItemVariants, comboboxListBase, comboboxPositionerBase, comboboxTriggerBase, containerBase, fieldErrorBase, fieldHelperBase, fieldLabelBase, fieldRequiredIndicatorBase, fieldRootBase, fieldsetErrorBase, fieldsetHelperBase, fieldsetLegendBase, fieldsetRootBase, hstackBase, inputVariants, itemVariants, nativeSelectIconBase, nativeSelectVariants, nativeSelectWrapperBase, navbarActionsBase, navbarActivationAreaBase, navbarBrandBase, navbarContainerBase, navbarDensityVariants, navbarMenuBase, navbarMenuContentBase, navbarMenuIndicatorBase, navbarMenuItemBase, navbarMenuLinkBase, navbarMenuListBase, navbarMenuPlacementVariants, navbarMenuRootBase, navbarMenuTriggerStyle, navbarMenuViewportBase, navbarMenuViewportPositionerBase, navbarMobileActionsBase, navbarMobileBase, navbarMobileContentBase, navbarMobileHeaderBase, navbarMobileMenuBase, navbarMobileMenuContentBase, navbarMobileMenuTriggerBase, navbarShrunkBase, navbarTriggerVariants, navbarVariants, numberInputControlBase, numberInputInputBase, numberInputRootBase, numberInputTriggerBase, pageContentBase, pageFooterBase, pageGutterAreaBase, pageGutterContentVariants, pageGutterVariants, pageSectionBase, pageVariants, paginationEllipsisBase, paginationItemBase, paginationRootBase, paginationTriggerBase, rowBase, scrollContentBase, scrollCornerBase, scrollRootBase, scrollScrollbarBase, scrollThumbBase, scrollViewportBase, selectClearTriggerBase, selectContentBase, selectIndicatorBase, selectItemBase, selectItemGroupLabelBase, selectItemIndicatorBase, selectItemTextBase, selectPositionerBase, selectTriggerBase, selectValueBase, sidebarMenuButtonVariants, sidebarStyles, splitterPanelBase, splitterResizeTriggerBase, splitterResizeTriggerIndicatorBase, splitterResizeTriggerSeparatorBase, splitterRootBase, stackBase, switchControlBase, switchLabelBase, switchThumbBase, switchVariants, tabsContentBase, tabsIndicatorBase, tabsIndicatorVariants, tabsListBase, tabsListVariants, tabsRootBase, tabsTriggerBase, tagsInputClearTriggerBase, tagsInputControlBase, tagsInputInputBase, tagsInputItemBase, tagsInputItemDeleteTriggerBase, tagsInputItemInputBase, tagsInputItemTextBase, tagsInputRootBase, textareaBase, toggleButtonVariants, vstackBase };

package/dist/index.d.ts

@@ -91,6 +91,23 @@ declare const scrollScrollbarBase = "relative m-[var(--scrollbar-margin)] flex t
 declare const scrollThumbBase = "rounded-[inherit] bg-border/40 transition-colors data-[orientation=vertical]:w-full data-[orientation=horizontal]:h-full";
 declare const scrollCornerBase = "m-[var(--scrollbar-margin)] bg-muted opacity-0 transition-opacity duration-150 data-[hover]:opacity-100";
 
+declare const pageVariants: (props?: ({
+    variant?: "default" | "landing" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageGutterAreaBase = "h-full min-w-0 [grid-area:left]";
+declare const pageGutterVariants: (props?: ({
+    side?: "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageGutterContentVariants: (props?: ({
+    align?: "start" | "center" | "end" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const pageContentBase = "min-w-0 [grid-area:content]";
+declare const pageFooterBase = "w-full shrink-0 [grid-area:footer]";
+declare const pageSectionBase: string;
+type PageVariants = VariantProps<typeof pageVariants>;
+type PageGutterVariants = VariantProps<typeof pageGutterVariants>;
+type PageGutterContentVariants = VariantProps<typeof pageGutterContentVariants>;
+
 /**
  * Intentionally empty: Ark UI sets `display`/`flex-direction` on the root and
  * the panel's `height`/`width: 100%`, `overflow`, and flex sizing inline.
@@ -203,7 +220,7 @@ declare const navbarShrunkBase = "h-12";
 declare const navbarBrandBase = "flex shrink-0 items-center gap-2";
 declare const navbarMenuBase = "hidden items-center md:flex";
 declare const navbarMenuPlacementVariants: (props?: ({
-    placement?: "left" | "center" | "right" | null | undefined;
+    placement?: "left" | "right" | "center" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const navbarActionsBase = "ml-auto hidden items-center gap-2 md:flex";
 declare const navbarTriggerVariants: (props?: ({
@@ -336,4 +353,4 @@ interface TagsInputProps {
     className?: string;
 }
 
-export { type BadgeProps, type BadgeVariants, type ButtonProps, type ButtonVariants, type CardCoverProps, type CardProps, type CardVariants, type CheckboxProps, type CheckboxVariants, type ComboboxItemVariants, type ComboboxProps, type InputProps, type InputVariants, type ItemProps, type ItemVariants, type NativeSelectVariants, type NavbarDensity, type NavbarMenuDensity, type NavbarMenuVariant, type NavbarVariant, type NumberInputProps, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, type SelectItemData, type SelectProps, type SidebarContextProps, type SidebarMenuButtonVariants, type SwitchProps, type SwitchVariants, THEMES, THEME_NAMES, type TabsIndicatorVariants, type TabsListVariants, type TagsInputProps, type TextareaProps, type ThemeMeta, type ToggleButtonProps, type ToggleButtonVariants, badgeVariants, buttonVariants, cardBodyBase, cardCoverVariants, cardDescriptionBase, cardFooterBase, cardHeaderBase, cardTitleBase, cardVariants, centerBase, checkboxGroupBase, checkboxIndicatorBase, checkboxLabelBase, checkboxVariants, cn, colBase, comboboxClearTriggerBase, comboboxContentBase, comboboxControlBase, comboboxEmptyBase, comboboxInputBase, comboboxItemGroupLabelBase, comboboxItemIndicatorBase, comboboxItemVariants, comboboxListBase, comboboxPositionerBase, comboboxTriggerBase, containerBase, fieldErrorBase, fieldHelperBase, fieldLabelBase, fieldRequiredIndicatorBase, fieldRootBase, fieldsetErrorBase, fieldsetHelperBase, fieldsetLegendBase, fieldsetRootBase, hstackBase, inputVariants, itemVariants, nativeSelectIconBase, nativeSelectVariants, nativeSelectWrapperBase, navbarActionsBase, navbarActivationAreaBase, navbarBrandBase, navbarContainerBase, navbarDensityVariants, navbarMenuBase, navbarMenuContentBase, navbarMenuIndicatorBase, navbarMenuItemBase, navbarMenuLinkBase, navbarMenuListBase, navbarMenuPlacementVariants, navbarMenuRootBase, navbarMenuTriggerStyle, navbarMenuViewportBase, navbarMenuViewportPositionerBase, navbarMobileActionsBase, navbarMobileBase, navbarMobileContentBase, navbarMobileHeaderBase, navbarMobileMenuBase, navbarMobileMenuContentBase, navbarMobileMenuTriggerBase, navbarShrunkBase, navbarTriggerVariants, navbarVariants, numberInputControlBase, numberInputInputBase, numberInputRootBase, numberInputTriggerBase, paginationEllipsisBase, paginationItemBase, paginationRootBase, paginationTriggerBase, rowBase, scrollContentBase, scrollCornerBase, scrollRootBase, scrollScrollbarBase, scrollThumbBase, scrollViewportBase, selectClearTriggerBase, selectContentBase, selectIndicatorBase, selectItemBase, selectItemGroupLabelBase, selectItemIndicatorBase, selectItemTextBase, selectPositionerBase, selectTriggerBase, selectValueBase, sidebarMenuButtonVariants, sidebarStyles, splitterPanelBase, splitterResizeTriggerBase, splitterResizeTriggerIndicatorBase, splitterResizeTriggerSeparatorBase, splitterRootBase, stackBase, switchControlBase, switchLabelBase, switchThumbBase, switchVariants, tabsContentBase, tabsIndicatorBase, tabsIndicatorVariants, tabsListBase, tabsListVariants, tabsRootBase, tabsTriggerBase, tagsInputClearTriggerBase, tagsInputControlBase, tagsInputInputBase, tagsInputItemBase, tagsInputItemDeleteTriggerBase, tagsInputItemInputBase, tagsInputItemTextBase, tagsInputRootBase, textareaBase, toggleButtonVariants, vstackBase };
+export { type BadgeProps, type BadgeVariants, type ButtonProps, type ButtonVariants, type CardCoverProps, type CardProps, type CardVariants, type CheckboxProps, type CheckboxVariants, type ComboboxItemVariants, type ComboboxProps, type InputProps, type InputVariants, type ItemProps, type ItemVariants, type NativeSelectVariants, type NavbarDensity, type NavbarMenuDensity, type NavbarMenuVariant, type NavbarVariant, type NumberInputProps, type PageGutterContentVariants, type PageGutterVariants, type PageVariants, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, type SelectItemData, type SelectProps, type SidebarContextProps, type SidebarMenuButtonVariants, type SwitchProps, type SwitchVariants, THEMES, THEME_NAMES, type TabsIndicatorVariants, type TabsListVariants, type TagsInputProps, type TextareaProps, type ThemeMeta, type ToggleButtonProps, type ToggleButtonVariants, badgeVariants, buttonVariants, cardBodyBase, cardCoverVariants, cardDescriptionBase, cardFooterBase, cardHeaderBase, cardTitleBase, cardVariants, centerBase, checkboxGroupBase, checkboxIndicatorBase, checkboxLabelBase, checkboxVariants, cn, colBase, comboboxClearTriggerBase, comboboxContentBase, comboboxControlBase, comboboxEmptyBase, comboboxInputBase, comboboxItemGroupLabelBase, comboboxItemIndicatorBase, comboboxItemVariants, comboboxListBase, comboboxPositionerBase, comboboxTriggerBase, containerBase, fieldErrorBase, fieldHelperBase, fieldLabelBase, fieldRequiredIndicatorBase, fieldRootBase, fieldsetErrorBase, fieldsetHelperBase, fieldsetLegendBase, fieldsetRootBase, hstackBase, inputVariants, itemVariants, nativeSelectIconBase, nativeSelectVariants, nativeSelectWrapperBase, navbarActionsBase, navbarActivationAreaBase, navbarBrandBase, navbarContainerBase, navbarDensityVariants, navbarMenuBase, navbarMenuContentBase, navbarMenuIndicatorBase, navbarMenuItemBase, navbarMenuLinkBase, navbarMenuListBase, navbarMenuPlacementVariants, navbarMenuRootBase, navbarMenuTriggerStyle, navbarMenuViewportBase, navbarMenuViewportPositionerBase, navbarMobileActionsBase, navbarMobileBase, navbarMobileContentBase, navbarMobileHeaderBase, navbarMobileMenuBase, navbarMobileMenuContentBase, navbarMobileMenuTriggerBase, navbarShrunkBase, navbarTriggerVariants, navbarVariants, numberInputControlBase, numberInputInputBase, numberInputRootBase, numberInputTriggerBase, pageContentBase, pageFooterBase, pageGutterAreaBase, pageGutterContentVariants, pageGutterVariants, pageSectionBase, pageVariants, paginationEllipsisBase, paginationItemBase, paginationRootBase, paginationTriggerBase, rowBase, scrollContentBase, scrollCornerBase, scrollRootBase, scrollScrollbarBase, scrollThumbBase, scrollViewportBase, selectClearTriggerBase, selectContentBase, selectIndicatorBase, selectItemBase, selectItemGroupLabelBase, selectItemIndicatorBase, selectItemTextBase, selectPositionerBase, selectTriggerBase, selectValueBase, sidebarMenuButtonVariants, sidebarStyles, splitterPanelBase, splitterResizeTriggerBase, splitterResizeTriggerIndicatorBase, splitterResizeTriggerSeparatorBase, splitterRootBase, stackBase, switchControlBase, switchLabelBase, switchThumbBase, switchVariants, tabsContentBase, tabsIndicatorBase, tabsIndicatorVariants, tabsListBase, tabsListVariants, tabsRootBase, tabsTriggerBase, tagsInputClearTriggerBase, tagsInputControlBase, tagsInputInputBase, tagsInputItemBase, tagsInputItemDeleteTriggerBase, tagsInputItemInputBase, tagsInputItemTextBase, tagsInputRootBase, textareaBase, toggleButtonVariants, vstackBase };

package/dist/index.js

@@ -254,6 +254,53 @@ var scrollScrollbarBase = "relative m-[var(--scrollbar-margin)] flex touch-none
 var scrollThumbBase = "rounded-[inherit] bg-border/40 transition-colors data-[orientation=vertical]:w-full data-[orientation=horizontal]:h-full";
 var scrollCornerBase = "m-[var(--scrollbar-margin)] bg-muted opacity-0 transition-opacity duration-150 data-[hover]:opacity-100";
 
+// src/page.ts
+import { cva as cva6 } from "class-variance-authority";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/page.ts
+var pageVariants = cva6("min-h-svh w-full", {
+  variants: {
+    variant: {
+      default: 'grid grid-cols-[auto_minmax(0,1fr)_auto] grid-rows-[minmax(100svh,1fr)_auto] [grid-template-areas:"left_content_right"_"footer_footer_footer"]',
+      landing: colBase
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var pageGutterAreaBase = "h-full min-w-0 [grid-area:left]";
+var pageGutterVariants = cva6(
+  "sticky top-0 h-svh w-4 shrink-0 overflow-hidden p-0.5 md:w-56 md:p-2 lg:w-72 lg:p-3",
+  {
+    variants: {
+      side: {
+        left: "",
+        right: ""
+      }
+    },
+    defaultVariants: { side: "left" }
+  }
+);
+var pageGutterContentVariants = cva6("hidden h-full w-full flex-col md:flex", {
+  variants: {
+    align: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end"
+    }
+  },
+  defaultVariants: { align: "start" }
+});
+var pageContentBase = "min-w-0 [grid-area:content]";
+var pageFooterBase = "w-full shrink-0 [grid-area:footer]";
+var pageSectionBase = cn(colBase, "min-h-svh w-full");
+
 // src/splitter.ts
 var splitterRootBase = "";
 var splitterPanelBase = "";
@@ -262,12 +309,12 @@ var splitterResizeTriggerSeparatorBase = "absolute bg-border group-data-[orienta
 var splitterResizeTriggerIndicatorBase = "relative z-10 rounded-full border border-border bg-muted shadow-xs data-[dragging]:bg-muted-foreground data-[focus]:bg-accent data-[disabled]:hidden data-[orientation=horizontal]:h-6 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-6";
 
 // src/sidebar.ts
-import { cva as cva6 } from "class-variance-authority";
+import { cva as cva7 } from "class-variance-authority";
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var sidebarMenuButtonVariants = cva6(
+var sidebarMenuButtonVariants = cva7(
   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
@@ -320,11 +367,11 @@ var sidebarStyles = {
 };
 
 // src/navbar-menu.ts
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 var navbarMenuRootBase = "group/nav-menu relative flex max-w-max flex-1 items-center justify-center";
 var navbarMenuListBase = "group flex flex-1 list-none items-center justify-center gap-1";
 var navbarMenuItemBase = "relative";
-var navbarMenuTriggerStyle = cva7(
+var navbarMenuTriggerStyle = cva8(
   "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent",
   {
     variants: {
@@ -349,10 +396,10 @@ var navbarMenuViewportBase = "absolute left-(--viewport-x) top-0 mt-1.5 h-(--vie
 var navbarMenuIndicatorBase = "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-50 flex h-1.5 items-end justify-center overflow-hidden";
 
 // src/tabs.ts
-import { cva as cva8 } from "class-variance-authority";
+import { cva as cva9 } from "class-variance-authority";
 var tabsRootBase = "flex flex-col gap-2 data-[orientation=vertical]:flex-row";
 var tabsListBase = "relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground data-[orientation=vertical]:flex-col";
-var tabsListVariants = cva8("", {
+var tabsListVariants = cva9("", {
   variants: {
     variant: {
       default: "rounded-lg",
@@ -364,7 +411,7 @@ var tabsListVariants = cva8("", {
   }
 });
 var tabsIndicatorBase = "absolute inset-x-0 bottom-0 h-(--height) w-(--width) transition-[width,translate] duration-200 ease-in-out motion-reduce:transition-none";
-var tabsIndicatorVariants = cva8("", {
+var tabsIndicatorVariants = cva9("", {
   variants: {
     variant: {
       default: "-z-1 rounded-lg bg-accent",
@@ -385,8 +432,8 @@ var paginationItemBase = "inline-flex h-9 min-w-9 items-center justify-center wh
 var paginationEllipsisBase = "flex h-8 w-12 items-end justify-center text-muted-foreground pointer-events-none select-none [&_svg]:size-4";
 
 // src/navbar.ts
-import { cva as cva9 } from "class-variance-authority";
-var navbarVariants = cva9(
+import { cva as cva10 } from "class-variance-authority";
+var navbarVariants = cva10(
   "w-full bg-background/80 backdrop-blur transition-[box-shadow,height,translate] duration-300",
   {
     variants: {
@@ -408,7 +455,7 @@ var navbarVariants = cva9(
   }
 );
 var navbarContainerBase = "flex items-center justify-between transition-[height,gap,padding] duration-300";
-var navbarDensityVariants = cva9("", {
+var navbarDensityVariants = cva10("", {
   variants: {
     density: {
       relaxed: "h-16 gap-4 px-4 md:px-6",
@@ -422,7 +469,7 @@ var navbarDensityVariants = cva9("", {
 var navbarShrunkBase = "h-12";
 var navbarBrandBase = "flex shrink-0 items-center gap-2";
 var navbarMenuBase = "hidden items-center md:flex";
-var navbarMenuPlacementVariants = cva9("", {
+var navbarMenuPlacementVariants = cva10("", {
   variants: {
     placement: {
       left: "justify-start",
@@ -435,7 +482,7 @@ var navbarMenuPlacementVariants = cva9("", {
   }
 });
 var navbarActionsBase = "ml-auto hidden items-center gap-2 md:flex";
-var navbarTriggerVariants = cva9(
+var navbarTriggerVariants = cva10(
   "inline-flex h-9 w-9 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
   {
     variants: {
@@ -514,13 +561,6 @@ var THEMES = [
 ];
 var THEME_NAMES = THEMES.map((t) => t.name);
 
-// src/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
 // src/field.ts
 var fieldRootBase = "flex w-full flex-col gap-2 data-invalid:text-destructive";
 var fieldLabelBase = "flex w-fit select-none items-center gap-1 text-sm font-medium leading-none text-foreground";
@@ -533,8 +573,8 @@ var fieldsetHelperBase = "text-sm text-muted-foreground";
 var fieldsetErrorBase = "text-sm text-destructive";
 
 // src/input.ts
-import { cva as cva10 } from "class-variance-authority";
-var inputVariants = cva10(
+import { cva as cva11 } from "class-variance-authority";
+var inputVariants = cva11(
   "flex w-full min-w-0 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24 data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24",
   {
     variants: {
@@ -560,8 +600,8 @@ var numberInputInputBase = "h-9 w-full min-w-0 flex-1 border-0 bg-transparent px
 var numberInputTriggerBase = "flex size-9 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
 
 // src/checkbox.ts
-import { cva as cva11 } from "class-variance-authority";
-var checkboxVariants = cva11(
+import { cva as cva12 } from "class-variance-authority";
+var checkboxVariants = cva12(
   "relative inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-transparent shadow-xs transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 focus-visible:ring-offset-1 focus-visible:ring-offset-background data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
@@ -581,8 +621,8 @@ var checkboxLabelBase = "select-none text-sm font-medium leading-none";
 var checkboxGroupBase = "flex flex-col gap-2";
 
 // src/switch.ts
-import { cva as cva12 } from "class-variance-authority";
-var switchVariants = cva12(
+import { cva as cva13 } from "class-variance-authority";
+var switchVariants = cva13(
   "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-input p-0.5 shadow-xs transition-colors outline-none data-[state=checked]:bg-primary data-invalid:border-destructive data-invalid:ring-[3px] data-invalid:ring-destructive/24 focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
@@ -602,7 +642,7 @@ var switchThumbBase = "pointer-events-none block aspect-square h-full w-auto rou
 var switchLabelBase = "select-none text-sm font-medium leading-none";
 
 // src/select.ts
-import { cva as cva13 } from "class-variance-authority";
+import { cva as cva14 } from "class-variance-authority";
 var selectTriggerBase = "flex w-fit cursor-default items-center gap-2 whitespace-nowrap data-[placeholder-shown]:text-muted-foreground data-[state=open]:border-ring data-[state=open]:ring-[3px] data-[state=open]:ring-ring/30 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground";
 var selectValueBase = "flex min-w-0 items-center gap-2 truncate";
 var selectIndicatorBase = "flex items-center justify-center text-muted-foreground";
@@ -613,7 +653,7 @@ var selectItemGroupLabelBase = "px-2 py-1.5 text-xs font-semibold text-muted-for
 var selectItemBase = "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 pe-8 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground";
 var selectItemTextBase = "flex w-full flex-1 items-center gap-2";
 var selectItemIndicatorBase = "absolute inset-y-0 end-2 flex items-center justify-center text-foreground";
-var nativeSelectVariants = cva13(
+var nativeSelectVariants = cva14(
   "appearance-none w-full min-w-0 rounded-md border border-input bg-transparent pe-8 ps-2.5 text-sm shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/24",
   {
     variants: {
@@ -632,7 +672,7 @@ var nativeSelectWrapperBase = "relative w-fit [&_svg]:pointer-events-none [&_svg
 var nativeSelectIconBase = "pointer-events-none absolute inset-y-0 end-2.5 flex items-center justify-center text-muted-foreground";
 
 // src/combobox.ts
-import { cva as cva14 } from "class-variance-authority";
+import { cva as cva15 } from "class-variance-authority";
 var comboboxControlBase = "relative flex w-full flex-wrap items-center gap-1";
 var comboboxInputBase = "pe-8";
 var comboboxTriggerBase = "absolute inset-y-0 end-1 flex w-8 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
@@ -640,7 +680,7 @@ var comboboxClearTriggerBase = "absolute inset-y-0 end-9 flex items-center justi
 var comboboxPositionerBase = "z-50";
 var comboboxContentBase = "relative z-50 max-h-96 min-w-48 overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none";
 var comboboxItemGroupLabelBase = "px-2 py-1.5 text-xs font-semibold text-muted-foreground";
-var comboboxItemVariants = cva14(
+var comboboxItemVariants = cva15(
   "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
   {
     variants: {
@@ -747,6 +787,13 @@ export {
   numberInputInputBase,
   numberInputRootBase,
   numberInputTriggerBase,
+  pageContentBase,
+  pageFooterBase,
+  pageGutterAreaBase,
+  pageGutterContentVariants,
+  pageGutterVariants,
+  pageSectionBase,
+  pageVariants,
   paginationEllipsisBase,
   paginationItemBase,
   paginationRootBase,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudvoyant/helix",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "helix shared component interfaces, cva variants, and theme",
   "license": "MIT",
   "type": "module",

package/src/theme.css

@@ -158,4 +158,31 @@
   body {
     @apply bg-background text-foreground;
   }
+  /* helix page scrollbar. `Page` relies on the document scrollbar (sticky
+     gutters + footer bottom-out need window scrolling, so the page body is
+     never wrapped in Ark ScrollArea). Style that document scrollbar — and any
+     other native scrollbar — to match the Scroll component's look: thin,
+     rounded, --border-based. The Scroll component's own viewport keeps hiding
+     its native scrollbar ([scrollbar-width:none] / ::-webkit-scrollbar:hidden),
+     so this never double-styles it. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--border) 40%, transparent) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--border) 40%, transparent);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--border);
+  }
 }