@momoi-labs/kiso-react 0.5.0 → 0.6.0

package/README.md

@@ -62,7 +62,8 @@ Data and structure
 - Sidebar, SidebarHeader, SidebarBody, SidebarFooter.
 - AppShell and AppShellMain, the low-level columns of a console.
 - ApplicationShell, the standard brand, navigation, header, footer, and page
-  arrangement.
+  arrangement. Pass `layout="topbar"` for a single-surface frame with brand and
+  primary action in the top bar and no sidebar rail.
 - Split, Pane, and Splitter, a list-detail layout with a resizable divider.
 - LogView, LogViewLine, LogViewTime, and LogViewLevel.
 - Stat, StatHeader, StatLabel, StatValue, StatFoot, and StatDelta.
@@ -119,9 +120,11 @@ const notify = useToast();
 notify('error', `Could not stop ${app.name}`, details);
 ```
 
-ApplicationShell takes navigation groups as data. Destinations keep routing in
-the product through `{ href, active, onClick? }`; the package owns the repeated
-Sidebar, Navigation, Header, and main arrangement.
+ApplicationShell takes navigation groups as data in the default sidebar layout.
+Destinations keep routing in the product through `{ href, active, onClick? }`;
+the package owns the repeated Sidebar, Navigation, Header, and main
+arrangement. With `layout="topbar"`, omit navigation and footer: brand and
+primary action move into Header beside the existing header slot.
 
 Navigation, Sidebar, and Link know nothing about routing. Mark the current
 destination with `active`, and pass `asChild` to render a router's own link

package/dist/app-shell.d.ts

@@ -14,15 +14,25 @@ type ApplicationShellGroup = {
     destinations: readonly ApplicationShellDestination[];
     empty?: React.ReactNode;
 };
-type ApplicationShellProps = Omit<React.ComponentProps<typeof AppShell>, "children"> & {
+type ApplicationShellSharedProps = Omit<React.ComponentProps<typeof AppShell>, "children"> & {
     brand: React.ReactNode;
     primaryAction?: React.ReactNode;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+};
+type ApplicationShellSidebarProps = ApplicationShellSharedProps & {
+    layout?: "sidebar";
     navigation: readonly ApplicationShellGroup[];
     navigationLabel?: string;
     footer?: React.ReactNode;
-    header?: React.ReactNode;
-    children: React.ReactNode;
 };
-declare function ApplicationShell({ brand, primaryAction, navigation, navigationLabel, footer, header, children, ...props }: ApplicationShellProps): React.JSX.Element;
+type ApplicationShellTopbarProps = ApplicationShellSharedProps & {
+    layout: "topbar";
+    navigation?: never;
+    navigationLabel?: never;
+    footer?: never;
+};
+type ApplicationShellProps = ApplicationShellSidebarProps | ApplicationShellTopbarProps;
+declare function ApplicationShell(props: ApplicationShellProps): React.JSX.Element;
 export { AppShell, AppShellMain, ApplicationShell };
 export type { ApplicationShellDestination, ApplicationShellGroup, ApplicationShellProps, };

package/dist/app-shell.js

@@ -11,12 +11,20 @@ function AppShell({ className, ...props }) {
 function AppShellMain({ className, ...props }) {
     return (_jsx("main", { "data-slot": "app-shell-main", className: cn("grow", className), ...props }));
 }
-function ApplicationShell({ brand, primaryAction, navigation, navigationLabel = "Primary", footer, header, children, ...props }) {
-    return (_jsxs(AppShell, { ...props, children: [_jsxs(Sidebar, { children: [_jsxs(SidebarHeader, { children: [brand, primaryAction] }), _jsx(SidebarBody, { children: _jsx(Navigation, { "aria-label": navigationLabel, children: navigation.map((group, groupIndex) => (_jsx(NavigationGroup, { label: group.label, children: group.destinations.length > 0 ? (_jsx(NavigationList, { children: group.destinations.map((destination, destinationIndex) => (_jsx(NavigationItem, { children: _jsxs(NavigationLink, { href: destination.href, active: destination.active, onClick: (event) => {
-                                                if (!destination.onClick)
-                                                    return;
-                                                event.preventDefault();
-                                                destination.onClick();
-                                            }, children: [destination.leading, _jsx("span", { className: "grow truncate", children: destination.label }), destination.trailing] }) }, `${destination.href}-${destinationIndex}`))) })) : group.empty }, group.label ?? groupIndex))) }) }), footer && _jsx(SidebarFooter, { children: footer })] }), _jsxs(AppShellMain, { children: [header && _jsx(Header, { children: header }), children] })] }));
+function ApplicationShellNavigation({ navigation, navigationLabel, }) {
+    return (_jsx(Navigation, { "aria-label": navigationLabel, children: navigation.map((group, groupIndex) => (_jsx(NavigationGroup, { label: group.label, children: group.destinations.length > 0 ? (_jsx(NavigationList, { children: group.destinations.map((destination, destinationIndex) => (_jsx(NavigationItem, { children: _jsxs(NavigationLink, { href: destination.href, active: destination.active, onClick: (event) => {
+                            if (!destination.onClick)
+                                return;
+                            event.preventDefault();
+                            destination.onClick();
+                        }, children: [destination.leading, _jsx("span", { className: "grow truncate", children: destination.label }), destination.trailing] }) }, `${destination.href}-${destinationIndex}`))) })) : (group.empty) }, group.label ?? groupIndex))) }));
+}
+function ApplicationShell(props) {
+    if (props.layout === "topbar") {
+        const { brand, primaryAction, header, children, layout: _layout, ...shellProps } = props;
+        return (_jsx(AppShell, { ...shellProps, "data-layout": "topbar", children: _jsxs(AppShellMain, { children: [_jsxs(Header, { children: [brand, primaryAction, header] }), children] }) }));
+    }
+    const { brand, primaryAction, navigation, navigationLabel = "Primary", footer, header, children, layout: _layout, ...shellProps } = props;
+    return (_jsxs(AppShell, { ...shellProps, children: [_jsxs(Sidebar, { children: [_jsxs(SidebarHeader, { children: [brand, primaryAction] }), _jsx(SidebarBody, { children: _jsx(ApplicationShellNavigation, { navigation: navigation, navigationLabel: navigationLabel }) }), footer && _jsx(SidebarFooter, { children: footer })] }), _jsxs(AppShellMain, { children: [header && _jsx(Header, { children: header }), children] })] }));
 }
 export { AppShell, AppShellMain, ApplicationShell };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso-react",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Kiso React components built with shadcn/ui and Radix",
   "type": "module",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@momoi-labs/kiso": "^0.8.0",
+    "@momoi-labs/kiso": "^0.9.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "radix-ui": "1.6.7",