@keboola/design 11.0.0 → 11.2.0

package/dist/internal/components/Separator.js

@@ -1,9 +1,84 @@
-export { Separator } from '../../chunk-6DUMGC7Y.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Separator.js.map
+import { cn } from "../../classNames-BzrkDnOD.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import * as RSeparator from "@radix-ui/react-separator";
+//#region src/components/Separator/Separator.tsx
+const separatorVariants = cva([
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:self-stretch",
+	"tw:before:content-['']",
+	"tw:before:bg-border"
+], {
+	defaultVariants: {
+		orientation: "vertical",
+		size: "full"
+	},
+	compoundVariants: [
+		{
+			orientation: "horizontal",
+			size: "full",
+			className: ["tw:before:w-full"]
+		},
+		{
+			orientation: "horizontal",
+			size: "1/2",
+			className: ["tw:before:w-1/2"]
+		},
+		{
+			orientation: "horizontal",
+			size: "3/4",
+			className: ["tw:before:w-3/4"]
+		},
+		{
+			orientation: "vertical",
+			size: "full",
+			className: ["tw:before:h-full"]
+		},
+		{
+			orientation: "vertical",
+			size: "1/2",
+			className: ["tw:before:h-1/2"]
+		},
+		{
+			orientation: "vertical",
+			size: "3/4",
+			className: ["tw:before:h-3/4"]
+		}
+	],
+	variants: {
+		size: {
+			full: ["tw:before:h-full"],
+			"1/2": [],
+			"3/4": []
+		},
+		orientation: {
+			vertical: ["tw:before:w-px"],
+			horizontal: ["tw:before:h-px"]
+		}
+	}
+});
+const Separator = ({ className, orientation = "vertical", size = "full", label, ...props }) => {
+	if (label != null && label !== false) return /* @__PURE__ */ jsx(RSeparator.Root, {
+		...props,
+		decorative: true,
+		orientation: "horizontal",
+		className: cn("tw:flex tw:w-full tw:items-center tw:gap-3 tw:self-stretch", "tw:text-xs tw:font-medium tw:text-muted-foreground", "tw:before:content-[''] tw:before:h-px tw:before:flex-1 tw:before:bg-border", "tw:after:content-[''] tw:after:h-px tw:after:flex-1 tw:after:bg-border", className),
+		children: label
+	});
+	return /* @__PURE__ */ jsx(RSeparator.Root, {
+		...props,
+		decorative: true,
+		orientation,
+		className: separatorVariants({
+			size,
+			orientation,
+			className
+		})
+	});
+};
+//#endregion
+export { Separator };
+
 //# sourceMappingURL=Separator.js.map

package/dist/internal/components/Separator.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Separator.js"}
+{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport * as RSeparator from '@radix-ui/react-separator';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst separatorVariants = cva(\n  [\n    // position\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:self-stretch',\n\n    // before\n    \"tw:before:content-['']\",\n    'tw:before:bg-border',\n  ],\n  {\n    defaultVariants: {\n      orientation: 'vertical',\n      size: 'full',\n    },\n    compoundVariants: [\n      {\n        orientation: 'horizontal',\n        size: 'full',\n        className: ['tw:before:w-full'],\n      },\n      {\n        orientation: 'horizontal',\n        size: '1/2',\n        className: ['tw:before:w-1/2'],\n      },\n      {\n        orientation: 'horizontal',\n        size: '3/4',\n        className: ['tw:before:w-3/4'],\n      },\n      {\n        orientation: 'vertical',\n        size: 'full',\n        className: ['tw:before:h-full'],\n      },\n      {\n        orientation: 'vertical',\n        size: '1/2',\n        className: ['tw:before:h-1/2'],\n      },\n      {\n        orientation: 'vertical',\n        size: '3/4',\n        className: ['tw:before:h-3/4'],\n      },\n    ],\n    variants: {\n      size: {\n        full: ['tw:before:h-full'],\n        '1/2': [],\n        '3/4': [],\n      },\n      orientation: {\n        vertical: ['tw:before:w-px'],\n        horizontal: ['tw:before:h-px'],\n      },\n    },\n  },\n);\n\ntype Props = VariantProps<typeof separatorVariants> &\n  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'> & {\n    /**\n     * Optional label rendered centered between two line segments\n     * (typical \"OR\" divider). Implies `orientation=\"horizontal\"`.\n     * Overrides any `children` passed to the component.\n     */\n    label?: ReactNode;\n  };\n\nexport const Separator = ({\n  className,\n  orientation = 'vertical',\n  size = 'full',\n  label,\n  ...props\n}: Props) => {\n  if (label != null && label !== false) {\n    return (\n      <RSeparator.Root\n        {...props}\n        decorative\n        orientation=\"horizontal\"\n        className={cn(\n          'tw:flex tw:w-full tw:items-center tw:gap-3 tw:self-stretch',\n          'tw:text-xs tw:font-medium tw:text-muted-foreground',\n          \"tw:before:content-[''] tw:before:h-px tw:before:flex-1 tw:before:bg-border\",\n          \"tw:after:content-[''] tw:after:h-px tw:after:flex-1 tw:after:bg-border\",\n          className,\n        )}\n      >\n        {label}\n      </RSeparator.Root>\n    );\n  }\n\n  return (\n    <RSeparator.Root\n      {...props}\n      decorative\n      orientation={orientation}\n      className={separatorVariants({ size, orientation, className })}\n    />\n  );\n};\n"],"mappings":";;;;;AAOA,MAAM,oBAAoB,IACxB;CAEE;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,aAAa;EACb,MAAM;CACR;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,kBAAkB;EAChC;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,kBAAkB;EAChC;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,aAAa;GACb,MAAM;GACN,WAAW,CAAC,iBAAiB;EAC/B;CACF;CACA,UAAU;EACR,MAAM;GACJ,MAAM,CAAC,kBAAkB;GACzB,OAAO,CAAC;GACR,OAAO,CAAC;EACV;EACA,aAAa;GACX,UAAU,CAAC,gBAAgB;GAC3B,YAAY,CAAC,gBAAgB;EAC/B;CACF;AACF,CACF;AAYA,MAAa,aAAa,EACxB,WACA,cAAc,YACd,OAAO,QACP,OACA,GAAG,YACQ;CACX,IAAI,SAAS,QAAQ,UAAU,OAC7B,OACE,oBAAC,WAAW,MAAZ;EACE,GAAI;EACJ,YAAA;EACA,aAAY;EACZ,WAAW,GACT,8DACA,sDACA,8EACA,0EACA,SACF;EAEC,UAAA;CACc,CAAA;CAIrB,OACE,oBAAC,WAAW,MAAZ;EACE,GAAI;EACJ,YAAA;EACa;EACb,WAAW,kBAAkB;GAAE;GAAM;GAAa;EAAU,CAAC;CAC9D,CAAA;AAEL"}

package/dist/internal/components/Sheet.js

@@ -1,12 +1,2 @@
-export { Sheet } from '../../chunk-BD5BTJKX.js';
-import '../../chunk-KZVC7OYG.js';
-import '../../chunk-IXAYNBOY.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Sheet.js.map
-//# sourceMappingURL=Sheet.js.map
+import { Sheet } from "../../Sheet-Dw9BDvjI.js";
+export { Sheet };

package/dist/internal/components/Sidebar.js

@@ -1,20 +1,2 @@
-export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar } from '../../chunk-LCTGEH57.js';
-import '../../chunk-VYG7BDXC.js';
-import '../../chunk-MWS4VCLV.js';
-import '../../chunk-4FIZZONW.js';
-import '../../chunk-5IG2S7ZY.js';
-import '../../chunk-ERAHK5YQ.js';
-import '../../chunk-FVPGQ6UE.js';
-import '../../chunk-6DUMGC7Y.js';
-import '../../chunk-THHB4EWS.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-KTTLLKGQ.js';
-import '../../chunk-KR7NXXHC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Sidebar.js.map
-//# sourceMappingURL=Sidebar.js.map
+import { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar } from "../../Sidebar-Dcb4rinA.js";
+export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar };

package/dist/internal/components/Skeleton/Skeleton.js

@@ -1,9 +1,39 @@
-export { Skeleton } from '../../../chunk-PACNBKJV.js';
-import '../../../chunk-SWQFYNYG.js';
-import '../../../chunk-3W27OLK5.js';
-import '../../../chunk-MODE4QIA.js';
-import '../../../chunk-WETKNYZX.js';
-import '../../../chunk-LXLIQ2D6.js';
-import '../../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Skeleton.js.map
+import { cn } from "../../../classNames-BzrkDnOD.js";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/Skeleton/Skeleton.tsx
+const HEIGHT_CLASS_NAME = {
+	xxs: "tw:h-3 tw:rounded",
+	xs: "tw:h-4 tw:rounded",
+	sm: "tw:h-5 tw:rounded",
+	md: "tw:h-6 tw:rounded-md",
+	lg: "tw:h-8 tw:rounded-lg",
+	xl: "tw:h-10 tw:rounded-lg",
+	"2xl": "tw:h-12 tw:rounded-lg"
+};
+const ANIMATION_CLASS_NAME = cn("tw:relative", "tw:overflow-hidden", "tw:pointer-events-none", "tw:bg-skeleton", "tw:before:content-[\"\"]", "tw:before:opacity-100", "tw:before:absolute", "tw:before:inset-0", "tw:before:-translate-x-full", "tw:before:animate-[shimmer_2s_infinite]", "tw:before:bg-gradient-to-r", "tw:before:from-transparent", "tw:before:to-transparent", "tw:before:via-white/40");
+/**
+* Animated placeholder shown in place of content that is still loading.
+*
+* **When to use:** during initial page or section load while the real content is fetched. Match the
+* placeholder shape to the eventual content (one `Skeleton height="lg"` per title row, several `xs` for
+* paragraph lines). For list shells use `count` to render N stacked placeholders.
+* **When NOT to use:** for indeterminate background work without a layout slot use `DotsLoader` or
+* `Button isLoading`; for empty / error states once the request resolves use `EmptyState` / `ErrorState`.
+* **Composition:** drop directly into the slot the real content will occupy. `SkeletonList` is the typical
+* shell for `Table` / `Card`-list pages.
+*
+* @see RECIPES.md#data-card-with-skeleton — for a loading card pattern
+*/
+const Skeleton = ({ height = "md", className, count = 1 }) => {
+	const prefixId = useId();
+	const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: keys.map((key) => /* @__PURE__ */ jsx("div", {
+		"data-skeleton": "true",
+		className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)
+	}, key)) });
+};
+//#endregion
+export { Skeleton };
+
 //# sourceMappingURL=Skeleton.js.map

package/dist/internal/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Skeleton.js"}
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn } from '../../utils';\n\nexport type Height = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/**\n * Props for `Skeleton`. `height` maps to the named token (xxs 12px → 2xl 48px); `count` renders multiple\n * stacked placeholders sharing the same shape.\n */\ntype SkeletonProps = {\n  /** Named height token — `xxs` (12px) through `2xl` (48px). */\n  height?: Height;\n  className?: string;\n  /** Number of stacked placeholder rows. Use for list-style loading states. */\n  count?: number;\n};\n\nconst HEIGHT_CLASS_NAME: Record<Height, string> = {\n  xxs: 'tw:h-3 tw:rounded',\n  xs: 'tw:h-4 tw:rounded',\n  sm: 'tw:h-5 tw:rounded',\n  md: 'tw:h-6 tw:rounded-md',\n  lg: 'tw:h-8 tw:rounded-lg',\n  xl: 'tw:h-10 tw:rounded-lg',\n  '2xl': 'tw:h-12 tw:rounded-lg',\n};\n\nconst ANIMATION_CLASS_NAME = cn(\n  // base styles\n  'tw:relative',\n  'tw:overflow-hidden',\n  'tw:pointer-events-none',\n  'tw:bg-skeleton',\n\n  // before\n  'tw:before:content-[\"\"]',\n  'tw:before:opacity-100',\n  'tw:before:absolute',\n  'tw:before:inset-0',\n  'tw:before:-translate-x-full',\n  'tw:before:animate-[shimmer_2s_infinite]',\n  'tw:before:bg-gradient-to-r',\n  'tw:before:from-transparent',\n  'tw:before:to-transparent',\n  'tw:before:via-white/40',\n);\n\n/**\n * Animated placeholder shown in place of content that is still loading.\n *\n * **When to use:** during initial page or section load while the real content is fetched. Match the\n * placeholder shape to the eventual content (one `Skeleton height=\"lg\"` per title row, several `xs` for\n * paragraph lines). For list shells use `count` to render N stacked placeholders.\n * **When NOT to use:** for indeterminate background work without a layout slot use `DotsLoader` or\n * `Button isLoading`; for empty / error states once the request resolves use `EmptyState` / `ErrorState`.\n * **Composition:** drop directly into the slot the real content will occupy. `SkeletonList` is the typical\n * shell for `Table` / `Card`-list pages.\n *\n * @see RECIPES.md#data-card-with-skeleton — for a loading card pattern\n */\nexport const Skeleton = ({ height = 'md', className, count = 1 }: SkeletonProps) => {\n  const prefixId = useId();\n  const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);\n\n  return (\n    <>\n      {keys.map((key) => (\n        <div\n          key={key}\n          data-skeleton=\"true\"\n          className={cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)}\n        />\n      ))}\n    </>\n  );\n};\n"],"mappings":";;;;AAkBA,MAAM,oBAA4C;CAChD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,uBAAuB,GAE3B,eACA,sBACA,0BACA,kBAGA,4BACA,yBACA,sBACA,qBACA,+BACA,2CACA,8BACA,8BACA,4BACA,wBACF;;;;;;;;;;;;;;AAeA,MAAa,YAAY,EAAE,SAAS,MAAM,WAAW,QAAQ,QAAuB;CAClF,MAAM,WAAW,MAAM;CACvB,MAAM,OAAO,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,GAAG;CAEvE,OACE,oBAAA,YAAA,EAAA,UACG,KAAK,KAAK,QACT,oBAAC,OAAD;EAEE,iBAAc;EACd,WAAW,GAAG,kBAAkB,SAAS,sBAAsB,SAAS;CACzE,GAHM,GAGN,CACF,EACD,CAAA;AAEN"}

package/dist/internal/components/Skeleton/SkeletonList.js

@@ -1,10 +1,41 @@
-export { SkeletonList } from '../../../chunk-2YYJDKSP.js';
-import '../../../chunk-PACNBKJV.js';
-import '../../../chunk-SWQFYNYG.js';
-import '../../../chunk-3W27OLK5.js';
-import '../../../chunk-MODE4QIA.js';
-import '../../../chunk-WETKNYZX.js';
-import '../../../chunk-LXLIQ2D6.js';
-import '../../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=SkeletonList.js.map
+import { cn } from "../../../classNames-BzrkDnOD.js";
+import { Skeleton } from "./Skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Skeleton/SkeletonList.tsx
+const duplicateArray = (arr, times) => {
+	return Array(times).fill(arr).flat();
+};
+const Item = ({ className, iconHeight = "md", rowHeight = "sm", iconClassName = "tw:w-6 " }) => /* @__PURE__ */ jsxs("div", {
+	className: "tw:flex tw:items-center tw:gap-3",
+	children: [/* @__PURE__ */ jsx(Skeleton, {
+		height: iconHeight,
+		className: cn("tw:rounded-full tw:shrink-0", iconClassName)
+	}), /* @__PURE__ */ jsx(Skeleton, {
+		height: rowHeight,
+		className
+	})]
+});
+const SkeletonList = ({ hasHeading = false, groups = 3, className, iconHeight = "md", rowHeight = "sm", iconClassName }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("tw:flex tw:flex-col tw:gap-4", className),
+	children: [hasHeading ? /* @__PURE__ */ jsx(Skeleton, {
+		height: "xxs",
+		className: "tw:w-28"
+	}) : null, /* @__PURE__ */ jsx("div", {
+		className: cn("tw:flex tw:flex-col", ["xxs", "xs"].includes(rowHeight) ? "tw:gap-3" : "tw:gap-4"),
+		children: duplicateArray([
+			"tw:w-5/6",
+			"tw:w-3/4",
+			"tw:w-4/5",
+			"tw:w-2/3"
+		], groups).map((className, index) => /* @__PURE__ */ jsx(Item, {
+			iconHeight,
+			rowHeight,
+			iconClassName,
+			className
+		}, `${className}-${index}`))
+	})]
+});
+//#endregion
+export { SkeletonList };
+
 //# sourceMappingURL=SkeletonList.js.map

package/dist/internal/components/Skeleton/SkeletonList.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"SkeletonList.js"}
+{"version":3,"file":"SkeletonList.js","names":[],"sources":["../../../../src/components/Skeleton/SkeletonList.tsx"],"sourcesContent":["import { cn } from '../../utils';\n\nimport type { Height } from './Skeleton';\nimport { Skeleton } from './Skeleton';\n\nconst duplicateArray = (arr: string[], times: number) => {\n  return Array(times).fill(arr).flat();\n};\n\nconst Item = ({\n  className,\n  iconHeight = 'md',\n  rowHeight = 'sm',\n  iconClassName = 'tw:w-6 ',\n}: {\n  className: string;\n  iconHeight?: Height;\n  rowHeight?: Height;\n  iconClassName?: string;\n}) => (\n  <div className=\"tw:flex tw:items-center tw:gap-3\">\n    <Skeleton height={iconHeight} className={cn('tw:rounded-full tw:shrink-0', iconClassName)} />\n    <Skeleton height={rowHeight} className={className} />\n  </div>\n);\n\nexport const SkeletonList = ({\n  hasHeading = false,\n  groups = 3,\n  className,\n  iconHeight = 'md',\n  rowHeight = 'sm',\n  iconClassName,\n}: {\n  hasHeading?: boolean;\n  groups?: number;\n  className?: string;\n  iconHeight?: Height;\n  rowHeight?: Height;\n  iconClassName?: string;\n}) => (\n  <div className={cn('tw:flex tw:flex-col tw:gap-4', className)}>\n    {hasHeading ? <Skeleton height=\"xxs\" className=\"tw:w-28\" /> : null}\n\n    <div\n      className={cn(\n        'tw:flex tw:flex-col',\n        ['xxs', 'xs'].includes(rowHeight) ? 'tw:gap-3' : 'tw:gap-4',\n      )}\n    >\n      {duplicateArray(['tw:w-5/6', 'tw:w-3/4', 'tw:w-4/5', 'tw:w-2/3'], groups).map(\n        (className, index) => (\n          <Item\n            // oxlint-disable-next-line react/no-array-index-key\n            key={`${className}-${index}`}\n            iconHeight={iconHeight}\n            rowHeight={rowHeight}\n            iconClassName={iconClassName}\n            className={className}\n          />\n        ),\n      )}\n    </div>\n  </div>\n);\n"],"mappings":";;;;AAKA,MAAM,kBAAkB,KAAe,UAAkB;CACvD,OAAO,MAAM,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK;AACrC;AAEA,MAAM,QAAQ,EACZ,WACA,aAAa,MACb,YAAY,MACZ,gBAAgB,gBAOhB,qBAAC,OAAD;CAAK,WAAU;CAAf,UAAA,CACE,oBAAC,UAAD;EAAU,QAAQ;EAAY,WAAW,GAAG,+BAA+B,aAAa;CAAI,CAAA,GAC5F,oBAAC,UAAD;EAAU,QAAQ;EAAsB;CAAY,CAAA,CACjD;;AAGP,MAAa,gBAAgB,EAC3B,aAAa,OACb,SAAS,GACT,WACA,aAAa,MACb,YAAY,MACZ,oBASA,qBAAC,OAAD;CAAK,WAAW,GAAG,gCAAgC,SAAS;CAA5D,UAAA,CACG,aAAa,oBAAC,UAAD;EAAU,QAAO;EAAM,WAAU;CAAW,CAAA,IAAI,MAE9D,oBAAC,OAAD;EACE,WAAW,GACT,uBACA,CAAC,OAAO,IAAI,CAAC,CAAC,SAAS,SAAS,IAAI,aAAa,UACnD;EAEC,UAAA,eAAe;GAAC;GAAY;GAAY;GAAY;EAAU,GAAG,MAAM,CAAC,CAAC,KACvE,WAAW,UACV,oBAAC,MAAD;GAGc;GACD;GACI;GACJ;EACZ,GALM,GAAG,UAAU,GAAG,OAKtB,CAEL;CACG,CAAA,CACF"}

package/dist/internal/components/Slider.js

@@ -1,11 +1,2 @@
-export { Slider } from '../../chunk-I2UCOD45.js';
-import '../../chunk-IXAYNBOY.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Slider.js.map
-//# sourceMappingURL=Slider.js.map
+import { Slider } from "../../Slider-BOPfMOMm.js";
+export { Slider };

package/dist/internal/components/SpotlightBackdrop.js

@@ -1,9 +1,132 @@
-export { SpotlightBackdrop, useTargetRect } from '../../chunk-ANFZWPNE.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=SpotlightBackdrop.js.map
+import { cn } from "../../classNames-BzrkDnOD.js";
+import { useId, useLayoutEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SpotlightBackdrop/SpotlightBackdrop.tsx
+/**
+* Full-viewport dimmed layer with an SVG-mask cut-out around a target rect,
+* producing a spotlight highlight. With `rect={null}` it dims the whole viewport
+* (no cut-out). The dim tone uses the semantic `foreground` token, so it re-skins
+* with the active brand.
+*
+* **Presentational primitive** — pass a `rect` from `useTargetRect`, and compose
+* with `Popover` for an anchored callout. Tour / coachmark orchestration
+* (steps, next/prev, "seen" persistence) is intentionally app-owned; see the
+* "Guided tour (recipe)" story for the composition.
+*/
+const SpotlightBackdrop = ({ rect, padding = 8, radius = 8, className, onClick }) => {
+	const maskId = useId();
+	const cutout = rect ? {
+		x: rect.left - padding,
+		y: rect.top - padding,
+		width: rect.width + padding * 2,
+		height: rect.height + padding * 2
+	} : null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		onClick,
+		className: cn("tw:pointer-events-none tw:fixed tw:inset-0 tw:z-[1056]", className),
+		children: /* @__PURE__ */ jsxs("svg", {
+			width: "100%",
+			height: "100%",
+			className: "tw:size-full",
+			children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", {
+				id: maskId,
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: "0",
+					y: "0",
+					width: "100%",
+					height: "100%",
+					fill: "white"
+				}), cutout && /* @__PURE__ */ jsx("rect", {
+					x: cutout.x,
+					y: cutout.y,
+					width: cutout.width,
+					height: cutout.height,
+					rx: radius,
+					ry: radius,
+					fill: "black"
+				})]
+			}) }), /* @__PURE__ */ jsx("rect", {
+				x: "0",
+				y: "0",
+				width: "100%",
+				height: "100%",
+				mask: `url(#${maskId})`,
+				className: "tw:pointer-events-auto tw:fill-foreground/50"
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/components/SpotlightBackdrop/useTargetRect.ts
+const resolveElement = (target) => {
+	if (!target) return null;
+	if (typeof target !== "string") return target.current;
+	try {
+		return document.querySelector(target);
+	} catch (error) {
+		console.error(`useTargetRect: invalid target selector "${target}"`, error);
+		return null;
+	}
+};
+/**
+* Resolves a `target` (CSS selector or React ref) to a live viewport rect and
+* keeps it in sync while `enabled` — re-measuring on resize and scroll so an
+* anchored overlay (e.g. `SpotlightBackdrop` + `Popover`) follows the element.
+* Returns `null` when disabled or the target is absent, so callers can fall
+* back to a centered/full-dim layout.
+*/
+const useTargetRect = (target, enabled) => {
+	const [rect, setRect] = useState(null);
+	useLayoutEffect(() => {
+		if (!enabled || !target) {
+			setRect(null);
+			return;
+		}
+		let frame = 0;
+		let attemptsLeft = 60;
+		const same = (a, b) => {
+			if (a === null) return false;
+			return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+		};
+		const measure = () => {
+			const element = resolveElement(target);
+			if (!element) {
+				setRect(null);
+				if (attemptsLeft > 0) {
+					attemptsLeft -= 1;
+					frame = requestAnimationFrame(measure);
+				}
+				return;
+			}
+			const box = element.getBoundingClientRect();
+			const next = {
+				top: box.top,
+				left: box.left,
+				width: box.width,
+				height: box.height
+			};
+			setRect((prev) => same(prev, next) ? prev : next);
+		};
+		const scheduleMeasure = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		};
+		measure();
+		window.addEventListener("resize", scheduleMeasure, { passive: true });
+		window.addEventListener("scroll", scheduleMeasure, {
+			capture: true,
+			passive: true
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("resize", scheduleMeasure);
+			window.removeEventListener("scroll", scheduleMeasure, true);
+		};
+	}, [target, enabled]);
+	return rect;
+};
+//#endregion
+export { SpotlightBackdrop, useTargetRect };
+
 //# sourceMappingURL=SpotlightBackdrop.js.map

package/dist/internal/components/SpotlightBackdrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"SpotlightBackdrop.js"}
+{"version":3,"file":"SpotlightBackdrop.js","names":[],"sources":["../../../src/components/SpotlightBackdrop/SpotlightBackdrop.tsx","../../../src/components/SpotlightBackdrop/useTargetRect.ts"],"sourcesContent":["import { type MouseEventHandler, useId } from 'react';\n\nimport { cn } from '../../utils';\n\nimport type { TargetRect } from './useTargetRect';\n\ntype Props = {\n  /** Target box to cut out of the dim layer, or `null` for a full dim (no highlight). */\n  rect: TargetRect | null;\n  /** Padding around the target inside the cut-out, in px. */\n  padding?: number;\n  /** Corner radius of the cut-out, in px. */\n  radius?: number;\n  className?: string;\n  /** Fired when the dim layer is clicked (e.g. to dismiss). Receives the click event. */\n  onClick?: MouseEventHandler<HTMLDivElement>;\n};\n\n/**\n * Full-viewport dimmed layer with an SVG-mask cut-out around a target rect,\n * producing a spotlight highlight. With `rect={null}` it dims the whole viewport\n * (no cut-out). The dim tone uses the semantic `foreground` token, so it re-skins\n * with the active brand.\n *\n * **Presentational primitive** — pass a `rect` from `useTargetRect`, and compose\n * with `Popover` for an anchored callout. Tour / coachmark orchestration\n * (steps, next/prev, \"seen\" persistence) is intentionally app-owned; see the\n * \"Guided tour (recipe)\" story for the composition.\n */\nexport const SpotlightBackdrop = ({ rect, padding = 8, radius = 8, className, onClick }: Props) => {\n  const maskId = useId();\n\n  const cutout = rect\n    ? {\n        x: rect.left - padding,\n        y: rect.top - padding,\n        width: rect.width + padding * 2,\n        height: rect.height + padding * 2,\n      }\n    : null;\n\n  return (\n    // Sits above the standard portalled surface tier (z 1055) so stray popovers\n    // can't punch through the dim; the anchored callout must set a higher z.\n    // The wrapper ignores pointer events and only the painted dim (the masked\n    // rect) captures them, bubbling to the wrapper's `onClick`. A click inside\n    // the masked-out cut-out isn't painted, so it falls through to the target.\n    <div\n      aria-hidden\n      onClick={onClick}\n      className={cn('tw:pointer-events-none tw:fixed tw:inset-0 tw:z-[1056]', className)}\n    >\n      <svg width=\"100%\" height=\"100%\" className=\"tw:size-full\">\n        <defs>\n          <mask id={maskId}>\n            <rect x=\"0\" y=\"0\" width=\"100%\" height=\"100%\" fill=\"white\" />\n            {cutout && (\n              <rect\n                x={cutout.x}\n                y={cutout.y}\n                width={cutout.width}\n                height={cutout.height}\n                rx={radius}\n                ry={radius}\n                fill=\"black\"\n              />\n            )}\n          </mask>\n        </defs>\n        <rect\n          x=\"0\"\n          y=\"0\"\n          width=\"100%\"\n          height=\"100%\"\n          mask={`url(#${maskId})`}\n          className=\"tw:pointer-events-auto tw:fill-foreground/50\"\n        />\n      </svg>\n    </div>\n  );\n};\n","import { type RefObject, useLayoutEffect, useState } from 'react';\n\n/** Viewport-relative box of the highlighted target. */\nexport type TargetRect = {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n};\n\n/** Element to track: a CSS selector, a React ref, or nothing (centered/no target). */\nexport type SpotlightTarget = string | RefObject<Element | null> | undefined;\n\nconst resolveElement = (target: SpotlightTarget): Element | null => {\n  if (!target) return null;\n  if (typeof target !== 'string') return target.current;\n  try {\n    return document.querySelector(target);\n  } catch (error) {\n    // An invalid selector throws a DOMException; don't crash the render.\n    console.error(`useTargetRect: invalid target selector \"${target}\"`, error);\n    return null;\n  }\n};\n\n/**\n * Resolves a `target` (CSS selector or React ref) to a live viewport rect and\n * keeps it in sync while `enabled` — re-measuring on resize and scroll so an\n * anchored overlay (e.g. `SpotlightBackdrop` + `Popover`) follows the element.\n * Returns `null` when disabled or the target is absent, so callers can fall\n * back to a centered/full-dim layout.\n */\nexport const useTargetRect = (target: SpotlightTarget, enabled: boolean): TargetRect | null => {\n  const [rect, setRect] = useState<TargetRect | null>(null);\n\n  useLayoutEffect(() => {\n    if (!enabled || !target) {\n      setRect(null);\n      return;\n    }\n\n    let frame = 0;\n    // Cap the lazy-mount poll so a permanently-absent target settles on `null`\n    // instead of spinning a frame forever. ~1s at 60fps is ample for a target\n    // that mounts a tick or two after the overlay opens.\n    let attemptsLeft = 60;\n\n    const same = (a: TargetRect | null, b: TargetRect) => {\n      if (a === null) return false;\n      return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\n    };\n\n    // Re-resolve on every measure: the target may mount lazily after the overlay\n    // opens, so we poll (rAF) until it appears — up to `attemptsLeft` frames —\n    // then track it on resize/scroll. Until then `rect` stays `null` and the\n    // caller falls back to a centered/full-dim layout. State only updates when\n    // the rect actually changed, avoiding needless re-renders.\n    const measure = () => {\n      const element = resolveElement(target);\n      if (!element) {\n        setRect(null);\n        if (attemptsLeft > 0) {\n          attemptsLeft -= 1;\n          frame = requestAnimationFrame(measure);\n        }\n        return;\n      }\n      const box = element.getBoundingClientRect();\n      const next = { top: box.top, left: box.left, width: box.width, height: box.height };\n      setRect((prev) => (same(prev, next) ? prev : next));\n    };\n\n    // Coalesce scroll/resize bursts to at most one measure per animation frame.\n    const scheduleMeasure = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n\n    measure();\n    window.addEventListener('resize', scheduleMeasure, { passive: true });\n    window.addEventListener('scroll', scheduleMeasure, { capture: true, passive: true });\n\n    return () => {\n      cancelAnimationFrame(frame);\n      window.removeEventListener('resize', scheduleMeasure);\n      window.removeEventListener('scroll', scheduleMeasure, true);\n    };\n  }, [target, enabled]);\n\n  return rect;\n};\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAa,qBAAqB,EAAE,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,cAAqB;CACjG,MAAM,SAAS,MAAM;CAErB,MAAM,SAAS,OACX;EACE,GAAG,KAAK,OAAO;EACf,GAAG,KAAK,MAAM;EACd,OAAO,KAAK,QAAQ,UAAU;EAC9B,QAAQ,KAAK,SAAS,UAAU;CAClC,IACA;CAEJ,OAME,oBAAC,OAAD;EACE,eAAA;EACS;EACT,WAAW,GAAG,0DAA0D,SAAS;EAEjF,UAAA,qBAAC,OAAD;GAAK,OAAM;GAAO,QAAO;GAAO,WAAU;GAA1C,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,qBAAC,QAAD;IAAM,IAAI;IAAV,UAAA,CACE,oBAAC,QAAD;KAAM,GAAE;KAAI,GAAE;KAAI,OAAM;KAAO,QAAO;KAAO,MAAK;IAAS,CAAA,GAC1D,UACC,oBAAC,QAAD;KACE,GAAG,OAAO;KACV,GAAG,OAAO;KACV,OAAO,OAAO;KACd,QAAQ,OAAO;KACf,IAAI;KACJ,IAAI;KACJ,MAAK;IACN,CAAA,CAEC;GACF,CAAA,EAAA,CAAA,GACN,oBAAC,QAAD;IACE,GAAE;IACF,GAAE;IACF,OAAM;IACN,QAAO;IACP,MAAM,QAAQ,OAAO;IACrB,WAAU;GACX,CAAA,CACE;;CACF,CAAA;AAET;;;ACnEA,MAAM,kBAAkB,WAA4C;CAClE,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,OAAO,WAAW,UAAU,OAAO,OAAO;CAC9C,IAAI;EACF,OAAO,SAAS,cAAc,MAAM;CACtC,SAAS,OAAO;EAEd,QAAQ,MAAM,2CAA2C,OAAO,IAAI,KAAK;EACzE,OAAO;CACT;AACF;;;;;;;;AASA,MAAa,iBAAiB,QAAyB,YAAwC;CAC7F,MAAM,CAAC,MAAM,WAAW,SAA4B,IAAI;CAExD,sBAAsB;EACpB,IAAI,CAAC,WAAW,CAAC,QAAQ;GACvB,QAAQ,IAAI;GACZ;EACF;EAEA,IAAI,QAAQ;EAIZ,IAAI,eAAe;EAEnB,MAAM,QAAQ,GAAsB,MAAkB;GACpD,IAAI,MAAM,MAAM,OAAO;GACvB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE;EACvF;EAOA,MAAM,gBAAgB;GACpB,MAAM,UAAU,eAAe,MAAM;GACrC,IAAI,CAAC,SAAS;IACZ,QAAQ,IAAI;IACZ,IAAI,eAAe,GAAG;KACpB,gBAAgB;KAChB,QAAQ,sBAAsB,OAAO;IACvC;IACA;GACF;GACA,MAAM,MAAM,QAAQ,sBAAsB;GAC1C,MAAM,OAAO;IAAE,KAAK,IAAI;IAAK,MAAM,IAAI;IAAM,OAAO,IAAI;IAAO,QAAQ,IAAI;GAAO;GAClF,SAAS,SAAU,KAAK,MAAM,IAAI,IAAI,OAAO,IAAK;EACpD;EAGA,MAAM,wBAAwB;GAC5B,qBAAqB,KAAK;GAC1B,QAAQ,sBAAsB,OAAO;EACvC;EAEA,QAAQ;EACR,OAAO,iBAAiB,UAAU,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACpE,OAAO,iBAAiB,UAAU,iBAAiB;GAAE,SAAS;GAAM,SAAS;EAAK,CAAC;EAEnF,aAAa;GACX,qBAAqB,KAAK;GAC1B,OAAO,oBAAoB,UAAU,eAAe;GACpD,OAAO,oBAAoB,UAAU,iBAAiB,IAAI;EAC5D;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,OAAO;AACT"}

package/dist/internal/components/Stepper.js

@@ -1,10 +1,2 @@
-export { Stepper } from '../../chunk-WPVETCGJ.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Stepper.js.map
-//# sourceMappingURL=Stepper.js.map
+import { Stepper } from "../../Stepper-C8sm9ZFM.js";
+export { Stepper };

package/dist/internal/components/Switch.js

@@ -1,10 +1,2 @@
-export { Switch } from '../../chunk-576G5OES.js';
-import '../../chunk-SCQPU4UE.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Switch.js.map
-//# sourceMappingURL=Switch.js.map
+import { Switch } from "../../Switch-CX2A0v50.js";
+export { Switch };

package/dist/internal/components/Table.js

@@ -1,10 +1,2 @@
-export { Table, TableSortHeader, tableAriaSort } from '../../chunk-BHGIDSRJ.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Table.js.map
-//# sourceMappingURL=Table.js.map
+import { Table, TableSortHeader, tableAriaSort } from "../../Table-CvYuTuNU.js";
+export { Table, TableSortHeader, tableAriaSort };

package/dist/internal/components/Tabs.js

@@ -1,12 +1,2 @@
-export { Tabs, TabsContent } from '../../chunk-QGMIPA67.js';
-import '../../chunk-THHB4EWS.js';
-import '../../chunk-IXAYNBOY.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Tabs.js.map
-//# sourceMappingURL=Tabs.js.map
+import { Tabs, TabsContent } from "../../Tabs-UMQuDoW8.js";
+export { Tabs, TabsContent };

package/dist/internal/components/ThemeProvider.js

@@ -1,10 +1,3 @@
-export { ThemeProvider, brandSchema, exampleCustomer, keboola, keboolaLegacySidebar, keboolaLegacyTopnav } from '../../chunk-KTTLLKGQ.js';
-import '../../chunk-KR7NXXHC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-export { ArgoDesignContext, DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, useArgoDesign, useTheme } from '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=ThemeProvider.js.map
-//# sourceMappingURL=ThemeProvider.js.map
+import { ArgoDesignContext, DEFAULT_BRAND_ID, DEFAULT_COLOR_SCHEME, useArgoDesign, useTheme } from "../../context-KxxeMHbR.js";
+import { ThemeProvider, brandSchema, exampleCustomer, keboola, keboolaLegacySidebar, keboolaLegacyTopnav } from "../../ThemeProvider-QncUrfJn.js";
+export { ArgoDesignContext, DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, ThemeProvider, brandSchema, exampleCustomer, keboola, keboolaLegacySidebar, keboolaLegacyTopnav, useArgoDesign, useTheme };

package/dist/internal/components/TimePicker.js

@@ -1,12 +1,2 @@
-export { TimePicker } from '../../chunk-52NDNMK7.js';
-import '../../chunk-QQA37LFB.js';
-import '../../chunk-ON4BJTHI.js';
-import '../../chunk-THHB4EWS.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=TimePicker.js.map
-//# sourceMappingURL=TimePicker.js.map
+import { TimePicker } from "../../TimePicker-D9zktB8A.js";
+export { TimePicker };

package/dist/internal/components/Timeline.js

@@ -1,10 +1,2 @@
-export { Timeline } from '../../chunk-WGG4AML3.js';
-import '../../chunk-MWS4VCLV.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Timeline.js.map
-//# sourceMappingURL=Timeline.js.map
+import { Timeline } from "../../Timeline-6btyJl4D.js";
+export { Timeline };

package/dist/internal/components/Toast.js

@@ -1,11 +1,3 @@
-export { Toaster, useNotification } from '../../chunk-GDT6HQMK.js';
-export { toast } from '../../chunk-6W5BHRCL.js';
-import '../../chunk-RQVK4IYC.js';
-import '../../chunk-SWQFYNYG.js';
-import '../../chunk-3W27OLK5.js';
-import '../../chunk-MODE4QIA.js';
-import '../../chunk-WETKNYZX.js';
-import '../../chunk-LXLIQ2D6.js';
-import '../../chunk-G3PMV62Z.js';
-//# sourceMappingURL=Toast.js.map
-//# sourceMappingURL=Toast.js.map
+import { toast } from "../../toast-CjkURw0M.js";
+import { Toaster, useNotification } from "../../Toast-DQSbs3oA.js";
+export { Toaster, toast, useNotification };