@keboola/design 4.1.1 → 4.2.0

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;
@@ -4746,25 +4750,26 @@ declare const PageLayout: (({ ref, className, maxWidth, children, ...props }: Ro
  * single-entity pages with breadcrumbs.
  * **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside
  * `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.
- * **Composition:** nest inside `PageLayout.Header`. Always opt into `Button argo` for any buttons passed
- * into header slots. The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
+ * **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots
+ * (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
  *
  * @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition
  */
 declare const PageHeader: {
     /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */
-    Index: ({ ref, className, title, description, metadata, documentation, action, headerNav, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    Index: ({ ref, className, title, description, metadata, documentation, action, headerNav, fullWidthDescription, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
         title: react.ReactNode;
         description?: react.ReactNode;
         metadata?: react.ReactNode;
         documentation?: react.ReactNode;
         action?: react.ReactNode;
         headerNav?: react.ReactNode;
+        fullWidthDescription?: boolean;
     }) & {
         ref?: react.Ref<react.ElementRef<"header">>;
     }) => react_jsx_runtime.JSX.Element;
     /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */
-    Detail: ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact, primaryAction, secondaryAction, headerNav, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    Detail: ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact, primaryAction, secondaryAction, headerNav, fullWidthDescription, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
         breadcrumbs: react.ReactNode;
         overflowActions?: react.ReactNode;
         title: react.ReactNode;
@@ -4775,6 +4780,7 @@ declare const PageHeader: {
         primaryAction?: react.ReactNode;
         secondaryAction?: react.ReactNode;
         headerNav?: react.ReactNode;
+        fullWidthDescription?: boolean;
     }) & {
         ref?: react.Ref<react.ElementRef<"header">>;
     }) => react_jsx_runtime.JSX.Element;
@@ -5644,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;
@@ -4746,25 +4750,26 @@ declare const PageLayout: (({ ref, className, maxWidth, children, ...props }: Ro
  * single-entity pages with breadcrumbs.
  * **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside
  * `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.
- * **Composition:** nest inside `PageLayout.Header`. Always opt into `Button argo` for any buttons passed
- * into header slots. The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
+ * **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots
+ * (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
  *
  * @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition
  */
 declare const PageHeader: {
     /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */
-    Index: ({ ref, className, title, description, metadata, documentation, action, headerNav, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    Index: ({ ref, className, title, description, metadata, documentation, action, headerNav, fullWidthDescription, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
         title: react.ReactNode;
         description?: react.ReactNode;
         metadata?: react.ReactNode;
         documentation?: react.ReactNode;
         action?: react.ReactNode;
         headerNav?: react.ReactNode;
+        fullWidthDescription?: boolean;
     }) & {
         ref?: react.Ref<react.ElementRef<"header">>;
     }) => react_jsx_runtime.JSX.Element;
     /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */
-    Detail: ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact, primaryAction, secondaryAction, headerNav, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    Detail: ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact, primaryAction, secondaryAction, headerNav, fullWidthDescription, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
         breadcrumbs: react.ReactNode;
         overflowActions?: react.ReactNode;
         title: react.ReactNode;
@@ -4775,6 +4780,7 @@ declare const PageHeader: {
         primaryAction?: react.ReactNode;
         secondaryAction?: react.ReactNode;
         headerNav?: react.ReactNode;
+        fullWidthDescription?: boolean;
     }) & {
         ref?: react.Ref<react.ElementRef<"header">>;
     }) => react_jsx_runtime.JSX.Element;
@@ -5644,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;