@wallarm-org/design-system 2.3.2 → 2.4.0-rc-feature-page-header-group.1

package/dist/components/Page/PageContent.js

@@ -24,7 +24,7 @@ const PageContent = (t0)=>{
     const testId = useTestId("content");
     let t1;
     if ($[5] !== className) {
-        t1 = cn("flex-1 min-h-0 overflow-auto px-24 pt-8 pb-24", "[:is([data-slot=page-header],[data-slot=settings-header])+&]:pt-6", className);
+        t1 = cn("flex-1 min-h-0 overflow-auto px-24 pt-8 pb-24", "[:is([data-slot=page-header],[data-slot=page-toolbar])+&]:pt-6", className);
         $[5] = className;
         $[6] = t1;
     } else t1 = $[6];

package/dist/components/Page/PageDescription.d.ts

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface PageDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    ref?: Ref<HTMLParagraphElement>;
+}
+export declare const PageDescription: FC<PageDescriptionProps>;

package/dist/components/{SettingsHeader/SettingsHeaderDescription.js → Page/PageDescription.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const SettingsHeaderDescription = (t0)=>{
+const PageDescription = (t0)=>{
     const $ = c(13);
     let children;
     let className;
@@ -34,7 +34,7 @@ const SettingsHeaderDescription = (t0)=>{
             ...props,
             ref: ref,
             "data-testid": testId,
-            "data-slot": "settings-header-description",
+            "data-slot": "page-description",
             className: t1,
             children: children
         });
@@ -47,5 +47,5 @@ const SettingsHeaderDescription = (t0)=>{
     } else t2 = $[12];
     return t2;
 };
-SettingsHeaderDescription.displayName = "SettingsHeaderDescription";
-export { SettingsHeaderDescription };
+PageDescription.displayName = "PageDescription";
+export { PageDescription };

package/dist/components/Page/PageHeaderGroup.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface PageHeaderGroupProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+/** Stacks `PageTitle` and `PageDescription` so they sit as one item beside `PageActions`. */
+export declare const PageHeaderGroup: FC<PageHeaderGroupProps>;

package/dist/components/{SettingsHeader/SettingsHeaderFilters.js → Page/PageHeaderGroup.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const SettingsHeaderFilters = (t0)=>{
+const PageHeaderGroup = (t0)=>{
     const $ = c(13);
     let children;
     let className;
@@ -21,10 +21,10 @@ const SettingsHeaderFilters = (t0)=>{
         props = $[3];
         ref = $[4];
     }
-    const testId = useTestId("filters");
+    const testId = useTestId("header-group");
     let t1;
     if ($[5] !== className) {
-        t1 = cn("flex gap-12 items-center", className);
+        t1 = cn("flex flex-col min-w-0", className);
         $[5] = className;
         $[6] = t1;
     } else t1 = $[6];
@@ -34,7 +34,7 @@ const SettingsHeaderFilters = (t0)=>{
             ...props,
             ref: ref,
             "data-testid": testId,
-            "data-slot": "settings-header-filters",
+            "data-slot": "page-header-group",
             className: t1,
             children: children
         });
@@ -47,5 +47,5 @@ const SettingsHeaderFilters = (t0)=>{
     } else t2 = $[12];
     return t2;
 };
-SettingsHeaderFilters.displayName = "SettingsHeaderFilters";
-export { SettingsHeaderFilters };
+PageHeaderGroup.displayName = "PageHeaderGroup";
+export { PageHeaderGroup };

package/dist/components/Page/PageToolbar.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface PageToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+/** Row of filters (search, segmented tabs, …) placed between `PageHeader` and `PageContent`. */
+export declare const PageToolbar: FC<PageToolbarProps>;

package/dist/components/{SettingsHeader/SettingsHeaderBreadcrumbs.js → Page/PageToolbar.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-const SettingsHeaderBreadcrumbs = (t0)=>{
+const PageToolbar = (t0)=>{
     const $ = c(13);
     let children;
     let className;
@@ -21,10 +21,10 @@ const SettingsHeaderBreadcrumbs = (t0)=>{
         props = $[3];
         ref = $[4];
     }
-    const testId = useTestId("breadcrumbs");
+    const testId = useTestId("toolbar");
     let t1;
     if ($[5] !== className) {
-        t1 = cn("ml-[-4px]", className);
+        t1 = cn("flex items-center gap-12 px-24 pb-8 has-[+[data-slot=page-content]]:pb-6", className);
         $[5] = className;
         $[6] = t1;
     } else t1 = $[6];
@@ -34,7 +34,7 @@ const SettingsHeaderBreadcrumbs = (t0)=>{
             ...props,
             ref: ref,
             "data-testid": testId,
-            "data-slot": "settings-header-breadcrumbs",
+            "data-slot": "page-toolbar",
             className: t1,
             children: children
         });
@@ -47,5 +47,5 @@ const SettingsHeaderBreadcrumbs = (t0)=>{
     } else t2 = $[12];
     return t2;
 };
-SettingsHeaderBreadcrumbs.displayName = "SettingsHeaderBreadcrumbs";
-export { SettingsHeaderBreadcrumbs };
+PageToolbar.displayName = "PageToolbar";
+export { PageToolbar };

package/dist/components/Page/index.d.ts

@@ -1,6 +1,9 @@
 export { Page, type PageProps } from './Page.js';
 export { PageActions, type PageActionsProps } from './PageActions.js';
 export { PageContent, type PageContentProps } from './PageContent.js';
+export { PageDescription, type PageDescriptionProps } from './PageDescription.js';
 export { PageHeader, type PageHeaderProps } from './PageHeader.js';
+export { PageHeaderGroup, type PageHeaderGroupProps } from './PageHeaderGroup.js';
 export { type PageHostContextValue, PageHostProvider, type PageLayoutOptions, usePageHost, } from './PageHostContext.js';
 export { PageTitle, type PageTitleProps } from './PageTitle.js';
+export { PageToolbar, type PageToolbarProps } from './PageToolbar.js';

package/dist/components/Page/index.js

@@ -1,6 +1,9 @@
 export { Page } from "./Page.js";
 export { PageActions } from "./PageActions.js";
 export { PageContent } from "./PageContent.js";
+export { PageDescription } from "./PageDescription.js";
 export { PageHeader } from "./PageHeader.js";
+export { PageHeaderGroup } from "./PageHeaderGroup.js";
 export { PageHostProvider, usePageHost } from "./PageHostContext.js";
 export { PageTitle } from "./PageTitle.js";
+export { PageToolbar } from "./PageToolbar.js";

package/dist/components/RemoteShell/RemoteShell.js

@@ -204,7 +204,7 @@ const RemoteShell = (t0)=>{
     const navCtxValue = t10;
     let t11;
     if ($[49] !== className) {
-        t11 = cn('grid h-full overflow-hidden overscroll-none [grid-template-areas:"panel_breadcrumb""panel_content"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr]', "[&:has([data-slot=page-header],[data-slot=settings-header])_[data-slot=remote-shell-breadcrumb]]:pb-4", "[&:has([data-slot=remote-shell-breadcrumb])_:is([data-slot=page-header],[data-slot=settings-header])]:pt-4", className);
+        t11 = cn('grid h-full overflow-hidden overscroll-none [grid-template-areas:"panel_breadcrumb""panel_content"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr]', "[&:has([data-slot=page-header])_[data-slot=remote-shell-breadcrumb]]:pb-4", "[&:has([data-slot=remote-shell-breadcrumb])_[data-slot=page-header]]:pt-4", className);
         $[49] = className;
         $[50] = t11;
     } else t11 = $[50];

package/dist/components/Table/TableMasterCellActions.js

@@ -6,7 +6,7 @@ const TableMasterCellActions = (t0)=>{
     const { children } = t0;
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-        t1 = cn("shrink-0 pl-4 pr-4 flex items-center gap-2", "opacity-0 pointer-events-none", "group-hover/row:opacity-100 group-hover/row:pointer-events-auto", "group-data-[selected]/row:opacity-100 group-data-[selected]/row:pointer-events-auto", "group-data-[preview-active]/row:opacity-100 group-data-[preview-active]/row:pointer-events-auto", "has-[[data-state=open]]:opacity-100 has-[[data-state=open]]:pointer-events-auto", "[&_[data-state=open]]:overlay [&_[data-state=open]]:overlay-states-primary-hover");
+        t1 = cn("shrink-0 pl-4 pr-4 flex items-center gap-2", "opacity-0 pointer-events-none", "group-hover/row:opacity-100 group-hover/row:pointer-events-auto", "group-data-[preview-active]/row:opacity-100 group-data-[preview-active]/row:pointer-events-auto", "has-[[data-state=open]]:opacity-100 has-[[data-state=open]]:pointer-events-auto", "[&_[data-state=open]]:overlay [&_[data-state=open]]:overlay-states-primary-hover");
         $[0] = t1;
     } else t1 = $[0];
     let t2;

package/dist/index.d.ts

@@ -60,7 +60,7 @@ export { NavRail, NavRailBody, type NavRailBodyProps, NavRailFooter, type NavRai
 export { NumberInput, type NumberInputProps } from './components/NumberInput/index.js';
 export { NumericBadge, type NumericBadgeProps, } from './components/NumericBadge/index.js';
 export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentProps, type OverflowTooltipProps, } from './components/OverflowTooltip/index.js';
-export { Page, PageActions, type PageActionsProps, PageContent, type PageContentProps, PageHeader, type PageHeaderProps, type PageHostContextValue, PageHostProvider, type PageLayoutOptions, type PageProps, PageTitle, type PageTitleProps, usePageHost, } from './components/Page/index.js';
+export { Page, PageActions, type PageActionsProps, PageContent, type PageContentProps, PageDescription, type PageDescriptionProps, PageHeader, PageHeaderGroup, type PageHeaderGroupProps, type PageHeaderProps, type PageHostContextValue, PageHostProvider, type PageLayoutOptions, type PageProps, PageTitle, type PageTitleProps, PageToolbar, type PageToolbarProps, usePageHost, } from './components/Page/index.js';
 export { Pagination, type PaginationAlign, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationList, type PaginationListProps, PaginationNext, type PaginationNextProps, type PaginationPage, type PaginationPageChangeDetails, PaginationPageSize, type PaginationPageSizeChangeDetails, type PaginationPageSizeProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationSize, usePaginationSizeContext, } from './components/Pagination/index.js';
 export { type CopyFormatData, formatAsFilter, ParameterPath, type ParameterPathProps, } from './components/ParameterPath/index.js';
 export { PasswordComplexity, type PasswordComplexityItem, type PasswordComplexityItemId, type PasswordComplexityProps, passwordValidators, } from './components/PasswordComplexity/index.js';
@@ -79,7 +79,6 @@ export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabs
 export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectEmptyState, type SelectEmptyStateProps, SelectFooter, type SelectFooterProps, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionHint, type SelectOptionHintProps, SelectOptionIndicator, SelectOptionText, SelectPositioner, type SelectPositionerProps, SelectSearchInput, SelectSeparator, selectFooterVariants, type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './components/Select/index.js';
 export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, type SelectionContextValue, SelectionItem, type SelectionItemProps, type SelectionProps, useSelectionContext, } from './components/Selection/index.js';
 export { Separator, type SeparatorProps } from './components/Separator/index.js';
-export { SettingsHeader, SettingsHeaderActions, type SettingsHeaderActionsProps, SettingsHeaderBreadcrumbs, type SettingsHeaderBreadcrumbsProps, SettingsHeaderDescription, type SettingsHeaderDescriptionProps, SettingsHeaderFilters, type SettingsHeaderFiltersProps, SettingsHeaderHeading, type SettingsHeaderHeadingProps, type SettingsHeaderProps, SettingsHeaderTitle, type SettingsHeaderTitleProps, } from './components/SettingsHeader/index.js';
 export { Skeleton, type SkeletonProps } from './components/Skeleton/index.js';
 export { Slider, SliderControl, type SliderControlProps, SliderInput, type SliderInputProps, type SliderMark, SliderMarks, type SliderMarksProps, type SliderProps, SliderThumb, type SliderThumbProps, SliderValue, type SliderValueProps, } from './components/Slider/index.js';
 export { SplashScreen, type SplashScreenProps } from './components/SplashScreen/index.js';

package/dist/index.js

@@ -49,7 +49,7 @@ export { NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, Nav
 export { NumberInput } from "./components/NumberInput/index.js";
 export { NumericBadge } from "./components/NumericBadge/index.js";
 export { OverflowTooltip, OverflowTooltipContent } from "./components/OverflowTooltip/index.js";
-export { Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, usePageHost } from "./components/Page/index.js";
+export { Page, PageActions, PageContent, PageDescription, PageHeader, PageHeaderGroup, PageHostProvider, PageTitle, PageToolbar, usePageHost } from "./components/Page/index.js";
 export { Pagination, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPageSize, PaginationPrevious, usePaginationSizeContext } from "./components/Pagination/index.js";
 export { ParameterPath, formatAsFilter } from "./components/ParameterPath/index.js";
 export { PasswordComplexity, passwordValidators } from "./components/PasswordComplexity/index.js";
@@ -68,7 +68,6 @@ export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabs
 export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectEmptyState, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionHint, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection, selectFooterVariants, useSelectSearch } from "./components/Select/index.js";
 export { Selection, SelectionAll, SelectionBulkBar, SelectionItem, useSelectionContext } from "./components/Selection/index.js";
 export { Separator } from "./components/Separator/index.js";
-export { SettingsHeader, SettingsHeaderActions, SettingsHeaderBreadcrumbs, SettingsHeaderDescription, SettingsHeaderFilters, SettingsHeaderHeading, SettingsHeaderTitle } from "./components/SettingsHeader/index.js";
 export { Skeleton } from "./components/Skeleton/index.js";
 export { Slider, SliderControl, SliderInput, SliderMarks, SliderThumb, SliderValue } from "./components/Slider/index.js";
 export { SplashScreen } from "./components/SplashScreen/index.js";