@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/content/Layout/LayoutFlex.js

@@ -0,0 +1,35 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _LayoutContent } from "./LayoutContent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutFlex.tsx
+const FlexElement = tasty(_LayoutContent, {
+	qa: "LayoutFlex",
+	styles: {
+		container: "none",
+		flexShrink: 0,
+		flexGrow: 0,
+		Inner: {
+			display: "flex",
+			flow: "row",
+			padding: 0
+		}
+	}
+});
+function LayoutFlex(props, ref) {
+	const { children, scrollbar = "tiny", ...otherProps } = props;
+	return /* @__PURE__ */ jsx(FlexElement, {
+		...otherProps,
+		ref,
+		scrollbar,
+		children
+	});
+}
+const _LayoutFlex = forwardRef(LayoutFlex);
+_LayoutFlex.displayName = "Layout.Flex";
+
+//#endregion
+export { _LayoutFlex };
+//# sourceMappingURL=LayoutFlex.js.map

package/dist/components/content/Layout/LayoutFlex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutFlex.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutFlex.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport { tasty } from '../../../tasty';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst FlexElement = tasty(LayoutContent, {\n  qa: 'LayoutFlex',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'flex',\n      flow: 'row',\n      padding: 0,\n    },\n  },\n});\n\nexport interface CubeLayoutFlexProps extends CubeLayoutContentProps {}\n\nfunction LayoutFlex(\n  props: CubeLayoutFlexProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { children, scrollbar = 'tiny', ...otherProps } = props;\n\n  return (\n    <FlexElement {...otherProps} ref={ref} scrollbar={scrollbar}>\n      {children}\n    </FlexElement>\n  );\n}\n\nconst _LayoutFlex = forwardRef(LayoutFlex);\n\n_LayoutFlex.displayName = 'Layout.Flex';\n\nexport { _LayoutFlex as LayoutFlex };\n"],"mappings":";;;;;;;AAMA,MAAM,cAAc,MAAMA,gBAAe;CACvC,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,SAAS;GACT,MAAM;GACN,SAAS;GACV;EACF;CACF,CAAC;AAIF,SAAS,WACP,OACA,KACA;CACA,MAAM,EAAE,UAAU,YAAY,QAAQ,GAAG,eAAe;AAExD,QACE,oBAAC;EAAY,GAAI;EAAiB;EAAgB;EAC/C;GACW;;AAIlB,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}

package/dist/components/content/Layout/LayoutFooter.d.ts

@@ -0,0 +1,13 @@
+
+import { CubeLayoutContentProps } from "./LayoutContent.js";
+import * as react from "react";
+
+//#region src/components/content/Layout/LayoutFooter.d.ts
+interface CubeLayoutFooterProps extends CubeLayoutContentProps {
+  /** Inverts the order of children (primary action on right) */
+  invertOrder?: boolean;
+}
+declare const _LayoutFooter: react.ForwardRefExoticComponent<CubeLayoutFooterProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutFooterProps, _LayoutFooter };
+//# sourceMappingURL=LayoutFooter.d.ts.map

package/dist/components/content/Layout/LayoutFooter.js

@@ -0,0 +1,53 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _LayoutContent } from "./LayoutContent.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutFooter.tsx
+const FooterElement = tasty(_LayoutContent, {
+	as: "footer",
+	qa: "LayoutFooter",
+	role: "contentinfo",
+	styles: {
+		container: "none",
+		height: "min 5x",
+		flexShrink: 0,
+		flexGrow: 0,
+		whiteSpace: "nowrap",
+		border: {
+			"": 0,
+			"!:last-child": "($layout-border-size, 1bw) solid #border bottom"
+		},
+		Inner: {
+			display: "flex",
+			flow: {
+				"": "row nowrap",
+				inverted: "row-reverse nowrap"
+			},
+			placeContent: "center space-between",
+			placeItems: "center stretch",
+			gap: "1x"
+		}
+	}
+});
+function LayoutFooter(props, ref) {
+	const { children, invertOrder, scrollbar = "tiny", mods, ...otherProps } = props;
+	const finalMods = useMemo(() => ({
+		inverted: invertOrder,
+		...mods
+	}), [invertOrder, mods]);
+	return /* @__PURE__ */ jsx(FooterElement, {
+		...otherProps,
+		ref,
+		mods: finalMods,
+		scrollbar,
+		children
+	});
+}
+const _LayoutFooter = forwardRef(LayoutFooter);
+_LayoutFooter.displayName = "Layout.Footer";
+
+//#endregion
+export { _LayoutFooter };
+//# sourceMappingURL=LayoutFooter.js.map

package/dist/components/content/Layout/LayoutFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutFooter.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutFooter.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useMemo } from 'react';\n\nimport { tasty } from '../../../tasty';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst FooterElement = tasty(LayoutContent, {\n  as: 'footer',\n  qa: 'LayoutFooter',\n  role: 'contentinfo',\n  styles: {\n    container: 'none',\n    // Footer inherits auto-border from LayoutContent\n    // (no border when last-child, which is typical for footers)\n    height: 'min 5x',\n    flexShrink: 0,\n    flexGrow: 0,\n    whiteSpace: 'nowrap',\n    border: {\n      '': 0,\n      '!:last-child': '($layout-border-size, 1bw) solid #border bottom',\n    },\n\n    Inner: {\n      display: 'flex',\n      flow: {\n        '': 'row nowrap',\n        inverted: 'row-reverse nowrap',\n      },\n      placeContent: 'center space-between',\n      placeItems: 'center stretch',\n      gap: '1x',\n    },\n  },\n});\n\nexport interface CubeLayoutFooterProps extends CubeLayoutContentProps {\n  /** Inverts the order of children (primary action on right) */\n  invertOrder?: boolean;\n}\n\nfunction LayoutFooter(\n  props: CubeLayoutFooterProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    invertOrder,\n    scrollbar = 'tiny',\n    mods,\n    ...otherProps\n  } = props;\n\n  const finalMods = useMemo(\n    () => ({\n      inverted: invertOrder,\n      ...mods,\n    }),\n    [invertOrder, mods],\n  );\n\n  return (\n    <FooterElement\n      {...otherProps}\n      ref={ref}\n      mods={finalMods}\n      scrollbar={scrollbar}\n    >\n      {children}\n    </FooterElement>\n  );\n}\n\nconst _LayoutFooter = forwardRef(LayoutFooter);\n\n_LayoutFooter.displayName = 'Layout.Footer';\n\nexport { _LayoutFooter as LayoutFooter };\n"],"mappings":";;;;;;;AAMA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,QAAQ;EACN,WAAW;EAGX,QAAQ;EACR,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,QAAQ;GACN,IAAI;GACJ,gBAAgB;GACjB;EAED,OAAO;GACL,SAAS;GACT,MAAM;IACJ,IAAI;IACJ,UAAU;IACX;GACD,cAAc;GACd,YAAY;GACZ,KAAK;GACN;EACF;CACF,CAAC;AAOF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,UACA,aACA,YAAY,QACZ,MACA,GAAG,eACD;CAEJ,MAAM,YAAY,eACT;EACL,UAAU;EACV,GAAG;EACJ,GACD,CAAC,aAAa,KAAK,CACpB;AAED,QACE,oBAAC;EACC,GAAI;EACC;EACL,MAAM;EACK;EAEV;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/content/Layout/LayoutGrid.d.ts

@@ -0,0 +1,19 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import "../../../tasty/index.js";
+import { CubeLayoutContentProps } from "./LayoutContent.js";
+import * as react from "react";
+
+//#region src/components/content/Layout/LayoutGrid.d.ts
+interface CubeLayoutGridProps extends CubeLayoutContentProps {
+  /** Grid template columns */
+  columns?: Styles['gridColumns'];
+  /** Grid template rows */
+  rows?: Styles['gridRows'];
+  /** Grid template shorthand */
+  template?: Styles['gridTemplate'];
+}
+declare const _LayoutGrid: react.ForwardRefExoticComponent<CubeLayoutGridProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutGridProps, _LayoutGrid };
+//# sourceMappingURL=LayoutGrid.d.ts.map

package/dist/components/content/Layout/LayoutGrid.js

@@ -0,0 +1,38 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { _LayoutContent } from "./LayoutContent.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutGrid.tsx
+const GridElement = tasty(_LayoutContent, {
+	qa: "LayoutGrid",
+	styles: {
+		container: "none",
+		flexShrink: 0,
+		flexGrow: 0,
+		Inner: {
+			display: "grid",
+			flow: "row",
+			padding: 0
+		}
+	}
+});
+function LayoutGrid(props, ref) {
+	const { children, scrollbar = "tiny", columns, rows, template, ...otherProps } = props;
+	return /* @__PURE__ */ jsx(GridElement, {
+		...otherProps,
+		ref,
+		scrollbar,
+		gridColumns: columns,
+		gridRows: rows,
+		gridTemplate: template,
+		children
+	});
+}
+const _LayoutGrid = forwardRef(LayoutGrid);
+_LayoutGrid.displayName = "Layout.Grid";
+
+//#endregion
+export { _LayoutGrid };
+//# sourceMappingURL=LayoutGrid.js.map

package/dist/components/content/Layout/LayoutGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutGrid.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutGrid.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react';\n\nimport { Styles, tasty } from '../../../tasty';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst GridElement = tasty(LayoutContent, {\n  qa: 'LayoutGrid',\n  styles: {\n    container: 'none',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      display: 'grid',\n      flow: 'row',\n      padding: 0,\n    },\n  },\n});\n\nexport interface CubeLayoutGridProps extends CubeLayoutContentProps {\n  /** Grid template columns */\n  columns?: Styles['gridColumns'];\n  /** Grid template rows */\n  rows?: Styles['gridRows'];\n  /** Grid template shorthand */\n  template?: Styles['gridTemplate'];\n}\n\nfunction LayoutGrid(\n  props: CubeLayoutGridProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    children,\n    scrollbar = 'tiny',\n    columns,\n    rows,\n    template,\n    ...otherProps\n  } = props;\n\n  return (\n    <GridElement\n      {...otherProps}\n      ref={ref}\n      scrollbar={scrollbar}\n      gridColumns={columns}\n      gridRows={rows}\n      gridTemplate={template}\n    >\n      {children}\n    </GridElement>\n  );\n}\n\nconst _LayoutGrid = forwardRef(LayoutGrid);\n\n_LayoutGrid.displayName = 'Layout.Grid';\n\nexport { _LayoutGrid as LayoutGrid };\n"],"mappings":";;;;;;;AAMA,MAAM,cAAc,MAAMA,gBAAe;CACvC,IAAI;CACJ,QAAQ;EACN,WAAW;EACX,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,SAAS;GACT,MAAM;GACN,SAAS;GACV;EACF;CACF,CAAC;AAWF,SAAS,WACP,OACA,KACA;CACA,MAAM,EACJ,UACA,YAAY,QACZ,SACA,MACA,UACA,GAAG,eACD;AAEJ,QACE,oBAAC;EACC,GAAI;EACC;EACM;EACX,aAAa;EACb,UAAU;EACV,cAAc;EAEb;GACW;;AAIlB,MAAM,cAAc,WAAW,WAAW;AAE1C,YAAY,cAAc"}

package/dist/components/content/Layout/LayoutHeader.d.ts

@@ -0,0 +1,27 @@
+
+import { CubeLayoutContentProps } from "./LayoutContent.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/content/Layout/LayoutHeader.d.ts
+interface CubeLayoutHeaderProps extends CubeLayoutContentProps {
+  /** Page/section title */
+  title?: ReactNode;
+  /** Title heading level (1-6) */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** Content next to the title */
+  suffix?: ReactNode;
+  /** Content on the right side */
+  extra?: ReactNode;
+  /** Text below the title */
+  subtitle?: ReactNode;
+  /**
+   * Navigation breadcrumbs (max 3 items recommended).
+   * Uses Link component which integrates with the navigation provider.
+   */
+  breadcrumbs?: Array<[label: string, href: string]>;
+}
+declare const _LayoutHeader: react.ForwardRefExoticComponent<CubeLayoutHeaderProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutHeaderProps, _LayoutHeader };
+//# sourceMappingURL=LayoutHeader.d.ts.map

package/dist/components/content/Layout/LayoutHeader.js

@@ -0,0 +1,145 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { useAutoTooltip } from "../use-auto-tooltip.js";
+import { SlashIcon } from "../../../icons/SlashIcon.js";
+import { Link } from "../../actions/Link/Link.js";
+import { _LayoutContent } from "./LayoutContent.js";
+import { Fragment, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/content/Layout/LayoutHeader.tsx
+const HeaderElement = tasty(_LayoutContent, {
+	as: "header",
+	qa: "LayoutHeader",
+	styles: {
+		container: "none",
+		border: "bottom",
+		flexShrink: 0,
+		flexGrow: 0,
+		Inner: {
+			$: ">",
+			display: "grid",
+			gridTemplate: `
+        "breadcrumbs breadcrumbs breadcrumbs" auto
+        "title suffix extra" 1fr
+        "subtitle subtitle extra" auto
+        / max-content 1fr minmax(0, auto)
+      `,
+			gap: 0,
+			placeContent: "stretch",
+			placeItems: "center stretch"
+		},
+		Breadcrumbs: {
+			$: "> Inner >",
+			gridArea: "breadcrumbs",
+			display: "flex",
+			flow: "row nowrap",
+			placeItems: "center start",
+			gap: "1bw",
+			preset: "t3 strong",
+			color: "#dark-02"
+		},
+		Title: {
+			$: "> Inner >",
+			gridArea: "title",
+			preset: {
+				"": "h3",
+				"level=1": "h1",
+				"level=2": "h2",
+				"level=3": "h3",
+				"level=4": "h4",
+				"level=5": "h5",
+				"level=6": "h6"
+			},
+			color: "#dark",
+			margin: 0,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		},
+		Suffix: {
+			$: "> Inner >",
+			gridArea: "suffix",
+			display: "flex",
+			placeItems: "center"
+		},
+		Extra: {
+			$: "> Inner >",
+			gridArea: "extra",
+			display: "flex",
+			placeItems: "center",
+			placeSelf: "end",
+			gap: "1x",
+			width: "max 100%"
+		},
+		Subtitle: {
+			$: "> Inner >",
+			gridArea: "subtitle",
+			preset: "t3",
+			color: "#dark-02"
+		}
+	}
+});
+function LayoutHeader(props, ref) {
+	const { title, level = 3, suffix, extra, subtitle, breadcrumbs, scrollbar = "tiny", children, mods, ...otherProps } = props;
+	const { labelRef, renderWithTooltip } = useAutoTooltip({
+		tooltip: true,
+		children: typeof title === "string" ? title : void 0
+	});
+	const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;
+	const renderBreadcrumbs = () => {
+		if (!hasBreadcrumbs) return null;
+		return /* @__PURE__ */ jsx("div", {
+			"data-element": "Breadcrumbs",
+			children: breadcrumbs.map(([label, href], index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Link, {
+				to: href,
+				children: label
+			}), /* @__PURE__ */ jsx(SlashIcon, {})] }, href))
+		});
+	};
+	const renderTitle = (tooltipProps, tooltipRef) => {
+		if (!title) return null;
+		return /* @__PURE__ */ jsx(`h${level}`, {
+			ref: tooltipRef,
+			"data-element": "Title",
+			"data-level": level,
+			...tooltipProps,
+			children: /* @__PURE__ */ jsx("span", {
+				ref: labelRef,
+				children: title
+			})
+		});
+	};
+	return /* @__PURE__ */ jsxs(HeaderElement, {
+		...otherProps,
+		ref,
+		mods: {
+			...mods,
+			level
+		},
+		scrollbar,
+		children: [
+			renderBreadcrumbs(),
+			renderWithTooltip(renderTitle, "bottom"),
+			suffix && /* @__PURE__ */ jsx("div", {
+				"data-element": "Suffix",
+				children: suffix
+			}),
+			extra && /* @__PURE__ */ jsx("div", {
+				"data-element": "Extra",
+				children: extra
+			}),
+			subtitle && /* @__PURE__ */ jsx("div", {
+				"data-element": "Subtitle",
+				children: subtitle
+			}),
+			children
+		]
+	});
+}
+const _LayoutHeader = forwardRef(LayoutHeader);
+_LayoutHeader.displayName = "Layout.Header";
+
+//#endregion
+export { _LayoutHeader };
+//# sourceMappingURL=LayoutHeader.js.map

package/dist/components/content/Layout/LayoutHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutHeader.js","names":["LayoutContent"],"sources":["../../../../src/components/content/Layout/LayoutHeader.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  Fragment,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefCallback,\n} from 'react';\n\nimport { SlashIcon } from '../../../icons/SlashIcon';\nimport { tasty } from '../../../tasty';\nimport { Link } from '../../actions/Link/Link';\nimport { useAutoTooltip } from '../use-auto-tooltip';\n\nimport { CubeLayoutContentProps, LayoutContent } from './LayoutContent';\n\nconst HeaderElement = tasty(LayoutContent, {\n  as: 'header',\n  qa: 'LayoutHeader',\n  styles: {\n    container: 'none',\n    // Header always has bottom border (inherent style)\n    border: 'bottom',\n    flexShrink: 0,\n    flexGrow: 0,\n\n    Inner: {\n      $: '>',\n      display: 'grid',\n      gridTemplate: `\n        \"breadcrumbs breadcrumbs breadcrumbs\" auto\n        \"title suffix extra\" 1fr\n        \"subtitle subtitle extra\" auto\n        / max-content 1fr minmax(0, auto)\n      `,\n      gap: 0,\n      placeContent: 'stretch',\n      placeItems: 'center stretch',\n    },\n\n    Breadcrumbs: {\n      $: '> Inner >',\n      gridArea: 'breadcrumbs',\n      display: 'flex',\n      flow: 'row nowrap',\n      placeItems: 'center start',\n      gap: '1bw',\n      preset: 't3 strong',\n      color: '#dark-02',\n    },\n\n    Title: {\n      $: '> Inner >',\n      gridArea: 'title',\n      preset: {\n        '': 'h3',\n        'level=1': 'h1',\n        'level=2': 'h2',\n        'level=3': 'h3',\n        'level=4': 'h4',\n        'level=5': 'h5',\n        'level=6': 'h6',\n      },\n      color: '#dark',\n      margin: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n\n    Suffix: {\n      $: '> Inner >',\n      gridArea: 'suffix',\n      display: 'flex',\n      placeItems: 'center',\n    },\n\n    Extra: {\n      $: '> Inner >',\n      gridArea: 'extra',\n      display: 'flex',\n      placeItems: 'center',\n      placeSelf: 'end',\n      gap: '1x',\n      width: 'max 100%',\n    },\n\n    Subtitle: {\n      $: '> Inner >',\n      gridArea: 'subtitle',\n      preset: 't3',\n      color: '#dark-02',\n    },\n  },\n});\n\nexport interface CubeLayoutHeaderProps extends CubeLayoutContentProps {\n  /** Page/section title */\n  title?: ReactNode;\n  /** Title heading level (1-6) */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Content next to the title */\n  suffix?: ReactNode;\n  /** Content on the right side */\n  extra?: ReactNode;\n  /** Text below the title */\n  subtitle?: ReactNode;\n  /**\n   * Navigation breadcrumbs (max 3 items recommended).\n   * Uses Link component which integrates with the navigation provider.\n   */\n  breadcrumbs?: Array<[label: string, href: string]>;\n}\n\nfunction LayoutHeader(\n  props: CubeLayoutHeaderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    title,\n    level = 3,\n    suffix,\n    extra,\n    subtitle,\n    breadcrumbs,\n    scrollbar = 'tiny',\n    children,\n    mods,\n    ...otherProps\n  } = props;\n\n  // Use auto tooltip for title overflow detection\n  const { labelRef, renderWithTooltip } = useAutoTooltip({\n    tooltip: true,\n    children: typeof title === 'string' ? title : undefined,\n  });\n\n  const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;\n\n  const renderBreadcrumbs = () => {\n    if (!hasBreadcrumbs) return null;\n\n    return (\n      <div data-element=\"Breadcrumbs\">\n        {breadcrumbs.map(([label, href], index) => (\n          <Fragment key={href}>\n            <Link to={href}>{label}</Link>\n            <SlashIcon />\n          </Fragment>\n        ))}\n      </div>\n    );\n  };\n\n  const renderTitle = (\n    tooltipProps?: HTMLAttributes<HTMLElement>,\n    tooltipRef?: Ref<HTMLElement>,\n  ) => {\n    if (!title) return null;\n\n    const TitleTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    return (\n      <TitleTag\n        ref={tooltipRef as Ref<HTMLHeadingElement>}\n        data-element=\"Title\"\n        data-level={level}\n        {...tooltipProps}\n      >\n        <span ref={labelRef as RefCallback<HTMLSpanElement>}>{title}</span>\n      </TitleTag>\n    );\n  };\n\n  return (\n    <HeaderElement\n      {...otherProps}\n      ref={ref}\n      mods={{ ...mods, level }}\n      scrollbar={scrollbar}\n    >\n      {renderBreadcrumbs()}\n      {renderWithTooltip(renderTitle, 'bottom')}\n      {suffix && <div data-element=\"Suffix\">{suffix}</div>}\n      {extra && <div data-element=\"Extra\">{extra}</div>}\n      {subtitle && <div data-element=\"Subtitle\">{subtitle}</div>}\n      {children}\n    </HeaderElement>\n  );\n}\n\nconst _LayoutHeader = forwardRef(LayoutHeader);\n\n_LayoutHeader.displayName = 'Layout.Header';\n\nexport { _LayoutHeader as LayoutHeader };\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,gBAAgB,MAAMA,gBAAe;CACzC,IAAI;CACJ,IAAI;CACJ,QAAQ;EACN,WAAW;EAEX,QAAQ;EACR,YAAY;EACZ,UAAU;EAEV,OAAO;GACL,GAAG;GACH,SAAS;GACT,cAAc;;;;;;GAMd,KAAK;GACL,cAAc;GACd,YAAY;GACb;EAED,aAAa;GACX,GAAG;GACH,UAAU;GACV,SAAS;GACT,MAAM;GACN,YAAY;GACZ,KAAK;GACL,QAAQ;GACR,OAAO;GACR;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,QAAQ;IACN,IAAI;IACJ,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACZ;GACD,OAAO;GACP,QAAQ;GACR,UAAU;GACV,cAAc;GACd,YAAY;GACb;EAED,QAAQ;GACN,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACb;EAED,OAAO;GACL,GAAG;GACH,UAAU;GACV,SAAS;GACT,YAAY;GACZ,WAAW;GACX,KAAK;GACL,OAAO;GACR;EAED,UAAU;GACR,GAAG;GACH,UAAU;GACV,QAAQ;GACR,OAAO;GACR;EACF;CACF,CAAC;AAoBF,SAAS,aACP,OACA,KACA;CACA,MAAM,EACJ,OACA,QAAQ,GACR,QACA,OACA,UACA,aACA,YAAY,QACZ,UACA,MACA,GAAG,eACD;CAGJ,MAAM,EAAE,UAAU,sBAAsB,eAAe;EACrD,SAAS;EACT,UAAU,OAAO,UAAU,WAAW,QAAQ;EAC/C,CAAC;CAEF,MAAM,iBAAiB,eAAe,YAAY,SAAS;CAE3D,MAAM,0BAA0B;AAC9B,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,oBAAC;GAAI,gBAAa;aACf,YAAY,KAAK,CAAC,OAAO,OAAO,UAC/B,qBAAC,uBACC,oBAAC;IAAK,IAAI;cAAO;KAAa,EAC9B,oBAAC,cAAY,KAFA,KAGJ,CACX;IACE;;CAIV,MAAM,eACJ,cACA,eACG;AACH,MAAI,CAAC,MAAO,QAAO;AAInB,SACE,oBAHe,IAAI;GAIjB,KAAK;GACL,gBAAa;GACb,cAAY;GACZ,GAAI;aAEJ,oBAAC;IAAK,KAAK;cAA2C;KAAa;IAC1D;;AAIf,QACE,qBAAC;EACC,GAAI;EACC;EACL,MAAM;GAAE,GAAG;GAAM;GAAO;EACb;;GAEV,mBAAmB;GACnB,kBAAkB,aAAa,SAAS;GACxC,UAAU,oBAAC;IAAI,gBAAa;cAAU;KAAa;GACnD,SAAS,oBAAC;IAAI,gBAAa;cAAS;KAAY;GAChD,YAAY,oBAAC;IAAI,gBAAa;cAAY;KAAe;GACzD;;GACa;;AAIpB,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

package/dist/components/content/Layout/LayoutPane.d.ts

@@ -0,0 +1,39 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, ContainerStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import { ScrollbarType } from "./LayoutContent.js";
+import * as react from "react";
+import { ForwardedRef, HTMLAttributes, ReactNode } from "react";
+
+//#region src/components/content/Layout/LayoutPane.d.ts
+type ResizeEdge = 'right' | 'bottom';
+interface CubeLayoutPaneProps extends BaseProps, ContainerStyleProps {
+  /** Edge where resize handler appears */
+  resizeEdge?: ResizeEdge;
+  /** Enable resize functionality */
+  isResizable?: boolean;
+  /** Controlled size (width for right edge, height for bottom edge) */
+  size?: number | string;
+  /** Default size for uncontrolled state */
+  defaultSize?: number | string;
+  /** Minimum size constraint */
+  minSize?: number | string;
+  /** Maximum size constraint */
+  maxSize?: number | string;
+  /** Size change callback */
+  onSizeChange?: (size: number) => void;
+  /** Scrollbar style */
+  scrollbar?: ScrollbarType;
+  /** Custom styles */
+  styles?: Styles;
+  children?: ReactNode;
+  /** Ref for the inner content element */
+  innerRef?: ForwardedRef<HTMLDivElement>;
+  /** Props to spread on the Inner sub-element */
+  innerProps?: HTMLAttributes<HTMLDivElement>;
+}
+declare const _LayoutPane: react.ForwardRefExoticComponent<CubeLayoutPaneProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CubeLayoutPaneProps, ResizeEdge, _LayoutPane };
+//# sourceMappingURL=LayoutPane.d.ts.map