@keboola/design 4.1.2 → 4.2.1

package/dist/index.d.cts

@@ -4675,7 +4675,11 @@ declare const AppShell: (({ ref, className, children, ...props }: RootProps$1 &
     Sidebar: ({ ref, className, asChild, children, ...props }: SlotProps & {
         ref?: Ref<ElementRef<"div">>;
     }) => react_jsx_runtime.JSX.Element;
-    /** Main content outlet. */
+    /**
+     * Main content outlet. Applies an opinionated default page gutter (`tw-p-6`)
+     * so content looks right out of the box; override the padding (e.g. `tw-p-0`)
+     * when the app owns its own gutter.
+     */
     Main: ({ ref, className, asChild, children, ...props }: SlotProps & {
         ref?: Ref<ElementRef<"main">>;
     }) => react_jsx_runtime.JSX.Element;
@@ -5646,14 +5650,22 @@ declare const Separator: ({ className, orientation, size, label, ...props }: Pro
 declare const navbarClassnames: (props?: ({
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type Props$g = ComponentProps<'header'> & VariantProps<typeof navbarClassnames> & {
+type Props$g = ComponentProps<'nav'> & VariantProps<typeof navbarClassnames> & {
     accent?: 'blue' | 'purple' | 'green' | 'orange';
 };
 /**
- * WIP: The design is not yet complete, and the implementation is far from finished. Please do not use it.
- * As of now, its usage is hidden behind the feature flag `sidebar-navigation`.
- * Will be based on radix, which handles accessibility: https://www.radix-ui.com/primitives/docs/components/navigation-menu
- * Design (WIP), missing a lot of actual cases: https://www.figma.com/design/HEBm5hXa4AIxcCh5PGKoF9/Main-Navigation?node-id=1568-1126&t=s3RREpciWrKQTL8p-0
+ * Top navigation bar for the app shell. Host inside `<AppShell.Header>` to give a
+ * top-nav (or `keboola-legacy` top-bar) layout its primary navigation, brand mark,
+ * and account/actions area.
+ *
+ * **Composition:** `Navbar.Header` (left — brand / logo), `Navbar.Content` (center —
+ * primary `Navbar.Menu` of `Navbar.MenuItem` + `Navbar.MenuButton`, horizontally
+ * scrollable), and `Navbar.Footer` (right — search, notifications, `Navbar.MenuAvatar`).
+ * `bordered` renders a top accent hairline whose color follows `accent`. Renders a
+ * `<nav>` landmark with a default `aria-label` — override it via `aria-label` /
+ * `aria-labelledby` when a page has more than one nav.
+ *
+ * @see AppShell — pair with `AppShell.Header`; the sidebar rail uses `Sidebar` instead.
  */
 declare const Navbar: {
     ({ className, accent, bordered, ...rest }: Props$g): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -4675,7 +4675,11 @@ declare const AppShell: (({ ref, className, children, ...props }: RootProps$1 &
     Sidebar: ({ ref, className, asChild, children, ...props }: SlotProps & {
         ref?: Ref<ElementRef<"div">>;
     }) => react_jsx_runtime.JSX.Element;
-    /** Main content outlet. */
+    /**
+     * Main content outlet. Applies an opinionated default page gutter (`tw-p-6`)
+     * so content looks right out of the box; override the padding (e.g. `tw-p-0`)
+     * when the app owns its own gutter.
+     */
     Main: ({ ref, className, asChild, children, ...props }: SlotProps & {
         ref?: Ref<ElementRef<"main">>;
     }) => react_jsx_runtime.JSX.Element;
@@ -5646,14 +5650,22 @@ declare const Separator: ({ className, orientation, size, label, ...props }: Pro
 declare const navbarClassnames: (props?: ({
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type Props$g = ComponentProps<'header'> & VariantProps<typeof navbarClassnames> & {
+type Props$g = ComponentProps<'nav'> & VariantProps<typeof navbarClassnames> & {
     accent?: 'blue' | 'purple' | 'green' | 'orange';
 };
 /**
- * WIP: The design is not yet complete, and the implementation is far from finished. Please do not use it.
- * As of now, its usage is hidden behind the feature flag `sidebar-navigation`.
- * Will be based on radix, which handles accessibility: https://www.radix-ui.com/primitives/docs/components/navigation-menu
- * Design (WIP), missing a lot of actual cases: https://www.figma.com/design/HEBm5hXa4AIxcCh5PGKoF9/Main-Navigation?node-id=1568-1126&t=s3RREpciWrKQTL8p-0
+ * Top navigation bar for the app shell. Host inside `<AppShell.Header>` to give a
+ * top-nav (or `keboola-legacy` top-bar) layout its primary navigation, brand mark,
+ * and account/actions area.
+ *
+ * **Composition:** `Navbar.Header` (left — brand / logo), `Navbar.Content` (center —
+ * primary `Navbar.Menu` of `Navbar.MenuItem` + `Navbar.MenuButton`, horizontally
+ * scrollable), and `Navbar.Footer` (right — search, notifications, `Navbar.MenuAvatar`).
+ * `bordered` renders a top accent hairline whose color follows `accent`. Renders a
+ * `<nav>` landmark with a default `aria-label` — override it via `aria-label` /
+ * `aria-labelledby` when a page has more than one nav.
+ *
+ * @see AppShell — pair with `AppShell.Header`; the sidebar rail uses `Sidebar` instead.
  */
 declare const Navbar: {
     ({ className, accent, bordered, ...rest }: Props$g): react_jsx_runtime.JSX.Element;