@keboola/design 11.0.0 → 11.2.0

package/dist/chunk-L5DHUN2V.js

@@ -1,204 +0,0 @@
-import { useTheme } from './chunk-WETKNYZX.js';
-import { cn } from './chunk-LXLIQ2D6.js';
-import { Slot } from '@radix-ui/react-slot';
-import { jsx } from 'react/jsx-runtime';
-
-var SidebarShell = ({ ref, className, headerSpan, children, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    "data-app-shell-geometry": "sidebar",
-    "data-header-span": headerSpan,
-    className: cn(
-      "tw:relative tw:grid tw:h-svh tw:w-full tw:bg-background",
-      "tw:grid-cols-[auto_1fr_auto] tw:grid-rows-[auto_1fr]",
-      headerSpan === "full" ? cn(
-        'tw:[grid-template-areas:"header_header_header"_"sidebar_main_aside"]',
-        // `Sidebar`'s inner wrapper is `fixed inset-y-0` — it owns that for its
-        // collapse/resize animation — so it anchors to the viewport and paints
-        // over a full-width header. Promoting the rail slots to containing
-        // blocks re-anchors those fixed children to the slot's own grid box.
-        // Beats overriding `top`: no `!important` to out-specify `inset-y-0`,
-        // and the shell never needs to know the header's height.
-        "tw:[&>[data-app-shell-slot=sidebar]]:[transform:translateZ(0)]",
-        "tw:[&>[data-app-shell-slot=aside]]:[transform:translateZ(0)]",
-        // A containing block is also a stacking context, so the promotion traps
-        // the rail's own `z-50` inside the slot. The left rail sits before `main`
-        // in source order, so without a slot-level z-index an expand-on-hover rail
-        // paints *under* main's positioned content instead of over it. Restate it
-        // here — grid items take `z-index` without `position`. The right rail needs
-        // one too: source order only beats `z-index: auto` content, so main's
-        // sticky elements (table headers at `z-10`, PageLayout's sticky header at
-        // `z-20`) would paint over an aside left at `auto`. `z-30` clears them all
-        // outright — no source-order tiebreak — while staying under the left
-        // rail's `z-50`, keeping an expanding left rail above a filled right one.
-        "tw:[&>[data-app-shell-slot=sidebar]]:z-50",
-        "tw:[&>[data-app-shell-slot=aside]]:z-30"
-        // The promotion is also what lets `styles.css` clip a parked off-canvas
-        // rail: it makes the slot that panel's containing block.
-      ) : 'tw:[grid-template-areas:"sidebar_header_aside"_"sidebar_main_aside"]',
-      className
-    ),
-    ...props,
-    children
-  }
-);
-var TopNavShell = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    "data-app-shell-geometry": "topnav",
-    className: cn(
-      "tw:grid tw:h-svh tw:w-full tw:bg-background",
-      "tw:grid-cols-[1fr_auto] tw:grid-rows-[auto_1fr]",
-      'tw:[grid-template-areas:"header_header"_"main_aside"]',
-      // The sidebar slot has no place in this geometry — hide it without
-      // forcing callers to conditionalise their JSX.
-      "tw:[&>[data-app-shell-slot=sidebar]]:hidden",
-      className
-    ),
-    ...props,
-    children
-  }
-);
-var Root = ({
-  ref,
-  className,
-  // Defaulted here rather than in SidebarShell so the generated component API
-  // records `content` instead of "no default".
-  headerSpan = "content",
-  children,
-  ...props
-}) => {
-  const { currentTheme: brand } = useTheme();
-  if (brand.shell === "topnav") {
-    return /* @__PURE__ */ jsx(TopNavShell, { ref, className, ...props, children });
-  }
-  return /* @__PURE__ */ jsx(SidebarShell, { ref, className, headerSpan, ...props, children });
-};
-var Header = ({
-  ref,
-  className,
-  asChild,
-  flush = false,
-  children,
-  ...props
-}) => {
-  const Comp = asChild ? Slot : "header";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      "data-app-shell-slot": "header",
-      "data-flush": flush || void 0,
-      className: cn(
-        "tw:flex",
-        flush ? "tw:items-stretch tw:gap-0" : "tw:items-center tw:gap-3 tw:border-b tw:border-border tw:bg-background tw:px-4",
-        "tw:[grid-area:header]",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-};
-var SidebarSlot = ({
-  ref,
-  className,
-  asChild,
-  children,
-  ...props
-}) => {
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      "data-app-shell-slot": "sidebar",
-      className: cn("tw:flex tw:min-h-0 tw:flex-col", "tw:[grid-area:sidebar]", className),
-      ...props,
-      children
-    }
-  );
-};
-var Main = ({
-  ref,
-  className,
-  asChild,
-  children,
-  ...props
-}) => {
-  const Comp = asChild ? Slot : "main";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      "data-app-shell-slot": "main",
-      className: cn(
-        "tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto",
-        // Opinionated default page gutter so page content clears the header /
-        // rails and looks right out of the box. `cn` is tailwind-merge, so an
-        // app that owns its own gutter overrides it (e.g. `className="tw:p-0"`).
-        "tw:p-6",
-        "tw:[grid-area:main]",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-};
-var Aside = ({
-  ref,
-  className,
-  asChild,
-  flush = false,
-  children,
-  ...props
-}) => {
-  const Comp = asChild ? Slot : "aside";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      "data-app-shell-slot": "aside",
-      "data-flush": flush || void 0,
-      className: cn(
-        "tw:flex tw:min-h-0 tw:shrink-0 tw:flex-col",
-        // A hosted `Sidebar side="right"` owns its own width, border, background and
-        // scrolling — so the slot must not also set them, or the rail renders inset
-        // inside a second painted surface.
-        flush ? "tw:w-auto tw:overflow-visible" : "tw:w-72 tw:overflow-auto tw:border-l tw:border-border tw:bg-background",
-        "tw:[grid-area:aside]",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-};
-var AppShell = Object.assign(Root, {
-  /**
-   * Top header row. Renders above `Main` in the sidebar shell; renders as the
-   * top bar (with full-width navigation room) in the top-nav shell.
-   */
-  Header,
-  /**
-   * Left navigation rail. Rendered in the sidebar shell; hidden by the
-   * top-nav shell so the same composition works under either brand — move
-   * primary navigation into `Header` for top-nav-first compositions.
-   */
-  Sidebar: SidebarSlot,
-  /**
-   * 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,
-  /** Optional right rail. Present in both shells. */
-  Aside
-});
-
-export { AppShell };
-//# sourceMappingURL=chunk-L5DHUN2V.js.map
-//# sourceMappingURL=chunk-L5DHUN2V.js.map

package/dist/chunk-L5DHUN2V.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/blocks/AppShell/SidebarShell.tsx","../src/blocks/AppShell/TopNavShell.tsx","../src/blocks/AppShell/AppShell.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-L5DHUN2V.js","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport type { AppShellHeaderSpan } from './types';\n\n// Required, not defaulted: `AppShell` owns the default so the generated component\n// API reports it, and this shell is internal — nothing else constructs it.\ntype Props = ComponentProps<'div'> & { headerSpan: AppShellHeaderSpan };\n\n/**\n * Sidebar geometry: left-rail navigation + header row + main outlet, with an\n * optional right rail. The grid template names match the `[grid-area:*]`\n * utilities the `AppShell.*` slots write onto themselves, so slot placement\n * is independent of source order.\n *\n * `headerSpan` picks which of the two row templates applies — see\n * {@link AppShellHeaderSpan}. Both keep the same three columns, so the rails\n * line up either way.\n */\nexport const SidebarShell = ({ ref, className, headerSpan, children, ...props }: Props) => (\n  <div\n    ref={ref}\n    data-app-shell-geometry=\"sidebar\"\n    data-header-span={headerSpan}\n    className={cn(\n      'tw:relative tw:grid tw:h-svh tw:w-full tw:bg-background',\n      'tw:grid-cols-[auto_1fr_auto] tw:grid-rows-[auto_1fr]',\n      headerSpan === 'full'\n        ? cn(\n            'tw:[grid-template-areas:\"header_header_header\"_\"sidebar_main_aside\"]',\n            // `Sidebar`'s inner wrapper is `fixed inset-y-0` — it owns that for its\n            // collapse/resize animation — so it anchors to the viewport and paints\n            // over a full-width header. Promoting the rail slots to containing\n            // blocks re-anchors those fixed children to the slot's own grid box.\n            // Beats overriding `top`: no `!important` to out-specify `inset-y-0`,\n            // and the shell never needs to know the header's height.\n            'tw:[&>[data-app-shell-slot=sidebar]]:[transform:translateZ(0)]',\n            'tw:[&>[data-app-shell-slot=aside]]:[transform:translateZ(0)]',\n            // A containing block is also a stacking context, so the promotion traps\n            // the rail's own `z-50` inside the slot. The left rail sits before `main`\n            // in source order, so without a slot-level z-index an expand-on-hover rail\n            // paints *under* main's positioned content instead of over it. Restate it\n            // here — grid items take `z-index` without `position`. The right rail needs\n            // one too: source order only beats `z-index: auto` content, so main's\n            // sticky elements (table headers at `z-10`, PageLayout's sticky header at\n            // `z-20`) would paint over an aside left at `auto`. `z-30` clears them all\n            // outright — no source-order tiebreak — while staying under the left\n            // rail's `z-50`, keeping an expanding left rail above a filled right one.\n            'tw:[&>[data-app-shell-slot=sidebar]]:z-50',\n            'tw:[&>[data-app-shell-slot=aside]]:z-30',\n            // The promotion is also what lets `styles.css` clip a parked off-canvas\n            // rail: it makes the slot that panel's containing block.\n          )\n        : 'tw:[grid-template-areas:\"sidebar_header_aside\"_\"sidebar_main_aside\"]',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Top-nav geometry: header row spans the full width, main + aside live below.\n * The `sidebar` grid area is intentionally absent — the\n * `[grid-area:sidebar]` slot collapses to `display: none` so consumers can\n * pass the same composition under either brand. Primary navigation moves\n * into `<AppShell.Header>` for top-nav-first compositions.\n *\n * Takes no `headerSpan`: this header already spans the full width, so `AppShell`\n * keeps the prop away from this shell rather than having it accept and ignore it.\n */\nexport const TopNavShell = ({ ref, className, children, ...props }: Props) => (\n  <div\n    ref={ref}\n    data-app-shell-geometry=\"topnav\"\n    className={cn(\n      'tw:grid tw:h-svh tw:w-full tw:bg-background',\n      'tw:grid-cols-[1fr_auto] tw:grid-rows-[auto_1fr]',\n      'tw:[grid-template-areas:\"header_header\"_\"main_aside\"]',\n      // The sidebar slot has no place in this geometry — hide it without\n      // forcing callers to conditionalise their JSX.\n      'tw:[&>[data-app-shell-slot=sidebar]]:hidden',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useTheme } from '../../components/ThemeProvider';\nimport { cn } from '../../utils';\n\nimport { SidebarShell } from './SidebarShell';\nimport { TopNavShell } from './TopNavShell';\nimport type { AppShellHeaderSpan } from './types';\n\ntype RootProps = ComponentPropsWithoutRef<'div'> & {\n  /**\n   * How far the header row stretches. `content` (default) gives it the middle\n   * column only, with both rails beside it; `full` spans all three columns and\n   * drops the rails below it, so the brand mark aligns to the viewport edge.\n   * No-op under the top-nav geometry, whose header is already full width.\n   *\n   * Reach for `full` when the header carries app-wide identity (brand mark,\n   * project switcher, account menu) rather than page-level navigation.\n   */\n  headerSpan?: AppShellHeaderSpan;\n};\n\nconst Root = ({\n  ref,\n  className,\n  // Defaulted here rather than in SidebarShell so the generated component API\n  // records `content` instead of \"no default\".\n  headerSpan = 'content',\n  children,\n  ...props\n}: RootProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const { currentTheme: brand } = useTheme();\n\n  // Branch rather than pick a component and spread: `headerSpan` is meaningless\n  // to the top-nav geometry, and forwarding it there would land a stray\n  // `headerspan` attribute on the DOM node.\n  if (brand.shell === 'topnav') {\n    return (\n      <TopNavShell ref={ref} className={className} {...props}>\n        {children}\n      </TopNavShell>\n    );\n  }\n\n  return (\n    <SidebarShell ref={ref} className={className} headerSpan={headerSpan} {...props}>\n      {children}\n    </SidebarShell>\n  );\n};\n\ntype SlotProps = ComponentPropsWithoutRef<'div'> & {\n  /** Render as the child element (Radix-Slot pattern), forwarding props onto it. */\n  asChild?: boolean;\n};\n\ntype ChromeSlotProps = SlotProps & {\n  /**\n   * Drop the slot's own padding, background and border so a hosted chrome component\n   * (`Navbar` in `Header`, `Sidebar side=\"right\"` in `Aside`) can render edge to edge.\n   *\n   * The slots paint themselves, which is right when you put content straight into them.\n   * It is wrong when the child is already a full-bleed surface: the child ends up inset\n   * inside the slot with the slot's background showing through as gutters at each end.\n   * Use this instead of re-stating the overrides at the call site — hand-written\n   * overrides also have to win a cascade fight, which is why they tend to grow an `!`.\n   */\n  flush?: boolean;\n};\n\nconst Header = ({\n  ref,\n  className,\n  asChild,\n  flush = false,\n  children,\n  ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'header'>> }) => {\n  const Comp = asChild ? Slot : 'header';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"header\"\n      data-flush={flush || undefined}\n      className={cn(\n        'tw:flex',\n        flush\n          ? 'tw:items-stretch tw:gap-0'\n          : 'tw:items-center tw:gap-3 tw:border-b tw:border-border tw:bg-background tw:px-4',\n        'tw:[grid-area:header]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst SidebarSlot = ({\n  ref,\n  className,\n  asChild,\n  children,\n  ...props\n}: SlotProps & { ref?: Ref<ComponentRef<'div'>> }) => {\n  const Comp = asChild ? Slot : 'div';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"sidebar\"\n      // In a sidebar shell the children render in place. In a top-nav shell\n      // the slot is hidden — the shell defines `display: none` for the\n      // `sidebar` grid area in that geometry, so consumers can pass the\n      // same JSX and let the shell decide visibility.\n      className={cn('tw:flex tw:min-h-0 tw:flex-col', 'tw:[grid-area:sidebar]', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst Main = ({\n  ref,\n  className,\n  asChild,\n  children,\n  ...props\n}: SlotProps & { ref?: Ref<ComponentRef<'main'>> }) => {\n  const Comp = asChild ? Slot : 'main';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"main\"\n      className={cn(\n        'tw:flex tw:min-w-0 tw:min-h-0 tw:flex-1 tw:flex-col tw:overflow-auto',\n        // Opinionated default page gutter so page content clears the header /\n        // rails and looks right out of the box. `cn` is tailwind-merge, so an\n        // app that owns its own gutter overrides it (e.g. `className=\"tw:p-0\"`).\n        'tw:p-6',\n        'tw:[grid-area:main]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\nconst Aside = ({\n  ref,\n  className,\n  asChild,\n  flush = false,\n  children,\n  ...props\n}: ChromeSlotProps & { ref?: Ref<ComponentRef<'aside'>> }) => {\n  const Comp = asChild ? Slot : 'aside';\n  return (\n    <Comp\n      ref={ref}\n      data-app-shell-slot=\"aside\"\n      data-flush={flush || undefined}\n      className={cn(\n        'tw:flex tw:min-h-0 tw:shrink-0 tw:flex-col',\n        // A hosted `Sidebar side=\"right\"` owns its own width, border, background and\n        // scrolling — so the slot must not also set them, or the rail renders inset\n        // inside a second painted surface.\n        flush\n          ? 'tw:w-auto tw:overflow-visible'\n          : 'tw:w-72 tw:overflow-auto tw:border-l tw:border-border tw:bg-background',\n        'tw:[grid-area:aside]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  );\n};\n\n/**\n * App-shell layout primitive. Reads `useTheme().brand.shell` and dispatches to\n * a sidebar (left rail) or top-nav geometry. Consumers compose the same\n * `<AppShell.Header>` / `<AppShell.Sidebar>` / `<AppShell.Main>` /\n * `<AppShell.Aside>` slots — the shell decides where each slot lives based on\n * the active brand.\n *\n * **When to use:** the root layout of any app that wants to follow the active\n * brand's shell geometry. Host a `PageLayout` inside `<AppShell.Main>` for\n * the per-page content column. Pass `headerSpan=\"full\"` for a full-bleed header\n * row above both rails.\n * **When NOT to use:** standalone screens that aren't part of a navigated app\n * (sign-in, error pages). Render those without `AppShell`.\n * **Composition:** must be rendered inside a `<ThemeProvider>` — the geometry\n * is brand-driven. Pass the same content across brands; the shell handles\n * placement and shows/hides the `Sidebar` slot accordingly.\n *\n * @see AppShell.stories.tsx — flip the Storybook brand toolbar to see the\n * sidebar / top-nav geometry swap from a single composition.\n */\nexport const AppShell = Object.assign(Root, {\n  /**\n   * Top header row. Renders above `Main` in the sidebar shell; renders as the\n   * top bar (with full-width navigation room) in the top-nav shell.\n   */\n  Header,\n  /**\n   * Left navigation rail. Rendered in the sidebar shell; hidden by the\n   * top-nav shell so the same composition works under either brand — move\n   * primary navigation into `Header` for top-nav-first compositions.\n   */\n  Sidebar: SidebarSlot,\n  /**\n   * Main content outlet. Applies an opinionated default page gutter (`tw:p-6`)\n   * so content looks right out of the box; override the padding (e.g. `tw:p-0`)\n   * when the app owns its own gutter.\n   */\n  Main,\n  /** Optional right rail. Present in both shells. */\n  Aside,\n});\n"]}