@keboola/design 10.1.0 → 11.0.1

package/dist/internal/components/Separator.js

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+import { Sheet } from "../../Sheet-BQrX8-h5.js";
+export { Sheet };

package/dist/internal/components/Sidebar.js

@@ -0,0 +1,2 @@
+import { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar } from "../../Sidebar-ROaR_AqC.js";
+export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar };

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+import { Slider } from "../../Slider-Da_3mS5v.js";
+export { Slider };

package/dist/internal/components/SpotlightBackdrop.js

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+import { Stepper } from "../../Stepper-C8sm9ZFM.js";
+export { Stepper };

package/dist/internal/components/Switch.js

@@ -0,0 +1,2 @@
+import { Switch } from "../../Switch-CX2A0v50.js";
+export { Switch };

package/dist/internal/components/Table.js

@@ -0,0 +1,2 @@
+import { Table, TableSortHeader, tableAriaSort } from "../../Table-CvYuTuNU.js";
+export { Table, TableSortHeader, tableAriaSort };

package/dist/internal/components/Tabs.js

@@ -0,0 +1,2 @@
+import { Tabs, TabsContent } from "../../Tabs-EAihyqCt.js";
+export { Tabs, TabsContent };

package/dist/internal/components/ThemeProvider.js

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,2 @@
+import { TimePicker } from "../../TimePicker-B_NegL-7.js";
+export { TimePicker };

package/dist/internal/components/Timeline.js

@@ -0,0 +1,2 @@
+import { Timeline } from "../../Timeline-6btyJl4D.js";
+export { Timeline };

package/dist/internal/components/Toast.js

@@ -0,0 +1,3 @@
+import { toast } from "../../toast-CjkURw0M.js";
+import { Toaster, useNotification } from "../../Toast-DQSbs3oA.js";
+export { Toaster, toast, useNotification };

package/dist/internal/components/Toggle.js

@@ -0,0 +1,169 @@
+import { cn } from "../../classNames-BzrkDnOD.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Root } from "@radix-ui/react-toggle";
+//#region src/components/Toggle/Toggle.tsx
+const toggleVariants = cva([
+	"tailwindcss-preflight",
+	"tw:relative",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:gap-2",
+	"tw:uppercase",
+	"tw:text-xs",
+	"tw:leading-5",
+	"tw:font-medium",
+	"tw:tracking-[1px]",
+	"tw:border",
+	"tw:rounded",
+	"tw:whitespace-nowrap",
+	"tw:transition-colors",
+	"tw:duration-100",
+	"tw:ease-linear",
+	"tw:[&_svg]:transition-colors",
+	"tw:[&_svg]:duration-100",
+	"tw:[&_svg]:ease-linear",
+	"tw:not-disabled:hover:border-neutral-300",
+	"tw:not-disabled:hover:bg-neutral-100",
+	"tw:disabled:opacity-50",
+	"tw:disabled:cursor-not-allowed",
+	"tw:[&:not(:active)]:not-disabled:focus-visible:outline",
+	"tw:!outline-offset-0",
+	"tw:[&:not(:active)]:not-disabled:focus-visible:outline-ring",
+	"tw:[&:not(:active)]:not-disabled:focus-visible:outline-1",
+	"tw:[&:not(:active)]:not-disabled:focus-visible:ring-4",
+	"tw:[&:not(:active)]:not-disabled:focus-visible:ring-ring/20"
+], {
+	variants: {
+		variant: {
+			ai: [
+				"tw:border-0",
+				"tw:aria-[pressed=false]:bg-gradient-to-br",
+				"tw:aria-[pressed=false]:from-secondary-100",
+				"tw:aria-[pressed=false]:to-purple-100",
+				"tw:hover:aria-[pressed=false]:from-secondary-200",
+				"tw:hover:aria-[pressed=false]:to-purple-200",
+				"tw:aria-pressed:bg-gradient-to-br",
+				"tw:aria-pressed:from-secondary-600",
+				"tw:aria-pressed:to-purple-600",
+				"tw:hover:aria-pressed:from-secondary-700",
+				"tw:hover:aria-pressed:to-purple-700",
+				"tw:[&_*]:stroke-aigradient-600",
+				"tw:aria-pressed:[&_*]:stroke-white",
+				"tw:*:aria-pressed:text-white"
+			],
+			"ai-vivid": [
+				"tw:border-0",
+				"tw:rounded-lg",
+				"tw:normal-case",
+				"tw:tracking-normal",
+				"tw:gap-1.5",
+				"tw:bg-gradient-to-br",
+				"tw:from-sky-400",
+				"tw:via-sky-600",
+				"tw:to-violet-600",
+				"tw:text-white",
+				"tw:not-disabled:hover:bg-none",
+				"tw:not-disabled:hover:bg-sky-100",
+				"tw:not-disabled:hover:border-transparent",
+				"tw:not-disabled:hover:text-sky-700",
+				"tw:not-disabled:hover:[&_svg]:text-sky-700",
+				"tw:aria-[pressed=true]:bg-gradient-to-br",
+				"tw:aria-[pressed=true]:from-sky-700",
+				"tw:aria-[pressed=true]:to-sky-900",
+				"tw:aria-[pressed=true]:text-white",
+				"tw:aria-[pressed=true]:[&_svg]:text-white"
+			],
+			ghost: [
+				"tw:border-0",
+				"tw:rounded-lg",
+				"tw:normal-case",
+				"tw:bg-transparent",
+				"tw:[&_svg]:text-muted-foreground",
+				"tw:not-disabled:hover:bg-muted",
+				"tw:not-disabled:hover:[&_svg]:text-secondary-500",
+				"tw:aria-pressed:bg-secondary-500/15",
+				"tw:aria-pressed:[&_svg]:text-secondary-500",
+				"tw:not-disabled:hover:aria-pressed:bg-secondary-500/25",
+				"tw:not-disabled:hover:aria-pressed:[&_svg]:text-secondary-500"
+			]
+		},
+		size: {
+			small: "tw:max-h-8 tw:min-h-8 tw:px-2 tw:py-1.5",
+			medium: "tw:max-h-10 tw:min-h-10 tw:px-4 tw:py-2.5",
+			large: "tw:max-h-12 tw:min-h-12 tw:px-4 tw:py-3.5"
+		},
+		orientation: {
+			horizontal: "",
+			vertical: [
+				"tw:flex-col",
+				"tw:gap-1",
+				"tw:whitespace-normal",
+				"tw:break-words",
+				"tw:text-center"
+			]
+		},
+		iconOnly: {
+			true: "tw:p-0",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			iconOnly: true,
+			size: "small",
+			className: "tw:size-8"
+		},
+		{
+			iconOnly: true,
+			size: "medium",
+			className: "tw:size-10"
+		},
+		{
+			iconOnly: true,
+			size: "large",
+			className: "tw:size-12"
+		}
+	],
+	defaultVariants: {
+		variant: "ai",
+		size: "medium",
+		iconOnly: false,
+		orientation: "horizontal"
+	}
+});
+const Toggle = ({ ref, className, variant = "ai", size = "medium", orientation = "horizontal", children, icon, badge, disabled = false, ...props }) => {
+	const isAiVariant = variant === "ai";
+	const isIconOnly = Boolean(icon && children == null);
+	return /* @__PURE__ */ jsxs(Root, {
+		...props,
+		ref,
+		className: cn(toggleVariants({
+			variant,
+			size,
+			orientation,
+			iconOnly: isIconOnly,
+			className
+		})),
+		disabled,
+		children: [
+			badge && /* @__PURE__ */ jsx("span", {
+				className: "tw:absolute tw:right-0 tw:top-0 tw:-translate-y-1/2 tw:translate-x-1/4",
+				children: badge
+			}),
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:align-middle tw:[&_svg:not([class*='tw:size-'])]:size-4",
+				children: icon
+			}),
+			isAiVariant ? /* @__PURE__ */ jsx("div", {
+				className: "tw:bg-gradient-to-br tw:from-secondary-700 tw:to-purple-700 tw:bg-clip-text tw:text-transparent",
+				children
+			}) : children
+		]
+	});
+};
+//#endregion
+export { Toggle };
+
+//# sourceMappingURL=Toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":[],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst toggleVariants = cva(\n  [\n    'tailwindcss-preflight',\n\n    // layout\n    'tw:relative',\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:gap-2',\n\n    // text\n    'tw:uppercase',\n    'tw:text-xs',\n    'tw:leading-5',\n    'tw:font-medium',\n    'tw:tracking-[1px]',\n\n    // border\n    'tw:border',\n\n    // style\n    'tw:rounded',\n    'tw:whitespace-nowrap',\n\n    // transitions\n    'tw:transition-colors',\n    'tw:duration-100',\n    'tw:ease-linear',\n    'tw:[&_svg]:transition-colors',\n    'tw:[&_svg]:duration-100',\n    'tw:[&_svg]:ease-linear',\n\n    // hover\n    'tw:not-disabled:hover:border-neutral-300',\n    'tw:not-disabled:hover:bg-neutral-100',\n\n    'tw:disabled:opacity-50',\n    'tw:disabled:cursor-not-allowed',\n\n    // focus-visible\n    'tw:[&:not(:active)]:not-disabled:focus-visible:outline',\n    'tw:!outline-offset-0',\n    'tw:[&:not(:active)]:not-disabled:focus-visible:outline-ring',\n    'tw:[&:not(:active)]:not-disabled:focus-visible:outline-1',\n    'tw:[&:not(:active)]:not-disabled:focus-visible:ring-4',\n    'tw:[&:not(:active)]:not-disabled:focus-visible:ring-ring/20',\n  ],\n  {\n    variants: {\n      variant: {\n        ai: [\n          'tw:border-0',\n\n          // off state\n          'tw:aria-[pressed=false]:bg-gradient-to-br',\n          'tw:aria-[pressed=false]:from-secondary-100',\n          'tw:aria-[pressed=false]:to-purple-100',\n          'tw:hover:aria-[pressed=false]:from-secondary-200',\n          'tw:hover:aria-[pressed=false]:to-purple-200',\n\n          // on state\n          'tw:aria-pressed:bg-gradient-to-br',\n          'tw:aria-pressed:from-secondary-600',\n          'tw:aria-pressed:to-purple-600',\n          'tw:hover:aria-pressed:from-secondary-700',\n          'tw:hover:aria-pressed:to-purple-700',\n\n          // icon color - gradient stroke when off, white stroke when on.\n          // Lucide icons are stroke-based; targeting every shape (`*`)\n          // catches paths, circles, and other non-path sub-shapes so the\n          // whole glyph picks up the gradient.\n          'tw:[&_*]:stroke-aigradient-600',\n          'tw:aria-pressed:[&_*]:stroke-white',\n          'tw:*:aria-pressed:text-white',\n        ],\n        'ai-vivid': [\n          'tw:border-0',\n          'tw:rounded-lg',\n          'tw:normal-case',\n          'tw:tracking-normal',\n          'tw:gap-1.5',\n\n          // default: sky → violet gradient, white text\n          'tw:bg-gradient-to-br',\n          'tw:from-sky-400',\n          'tw:via-sky-600',\n          'tw:to-violet-600',\n          'tw:text-white',\n\n          // hover: light sky bg, dark text\n          'tw:not-disabled:hover:bg-none',\n          'tw:not-disabled:hover:bg-sky-100',\n          'tw:not-disabled:hover:border-transparent',\n          'tw:not-disabled:hover:text-sky-700',\n          'tw:not-disabled:hover:[&_svg]:text-sky-700',\n\n          // pressed: dark navy gradient, white\n          'tw:aria-[pressed=true]:bg-gradient-to-br',\n          'tw:aria-[pressed=true]:from-sky-700',\n          'tw:aria-[pressed=true]:to-sky-900',\n          'tw:aria-[pressed=true]:text-white',\n          'tw:aria-[pressed=true]:[&_svg]:text-white',\n        ],\n        ghost: [\n          'tw:border-0',\n          'tw:rounded-lg',\n\n          // The neutral utility variant — mostly icon-only, and where it does carry a label that\n          // label is content (a value, an identifier), not chrome, so it keeps its own casing.\n          // `ai` / `ai-vivid` stay on the house `uppercase` (`ai-vivid` already opts out).\n          'tw:normal-case',\n\n          // The fills are surface-relative — `muted` for hover, a translucent\n          // blue tint for pressed — rather than the fixed pale `neutral-100` /\n          // `secondary-100`, which glared as bright blocks on the dark scheme.\n          // The blue mark itself is unchanged and reads on either surface.\n          // default state - transparent background\n          'tw:bg-transparent',\n          'tw:[&_svg]:text-muted-foreground',\n\n          // hover state\n          'tw:not-disabled:hover:bg-muted',\n          'tw:not-disabled:hover:[&_svg]:text-secondary-500',\n\n          // pressed state\n          'tw:aria-pressed:bg-secondary-500/15',\n          'tw:aria-pressed:[&_svg]:text-secondary-500',\n\n          // hover on pressed state\n          'tw:not-disabled:hover:aria-pressed:bg-secondary-500/25',\n          'tw:not-disabled:hover:aria-pressed:[&_svg]:text-secondary-500',\n        ],\n      },\n      size: {\n        small: 'tw:max-h-8 tw:min-h-8 tw:px-2 tw:py-1.5',\n        medium: 'tw:max-h-10 tw:min-h-10 tw:px-4 tw:py-2.5',\n        large: 'tw:max-h-12 tw:min-h-12 tw:px-4 tw:py-3.5',\n      },\n      // A stacked label wraps (`break-words` splits an identifier too long for its column) instead\n      // of forcing every cell as wide as its longest label.\n      orientation: {\n        horizontal: '',\n        vertical: [\n          'tw:flex-col',\n          'tw:gap-1',\n          'tw:whitespace-normal',\n          'tw:break-words',\n          'tw:text-center',\n        ],\n      },\n      iconOnly: {\n        true: 'tw:p-0',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      { iconOnly: true, size: 'small', className: 'tw:size-8' },\n      { iconOnly: true, size: 'medium', className: 'tw:size-10' },\n      { iconOnly: true, size: 'large', className: 'tw:size-12' },\n    ],\n    defaultVariants: {\n      variant: 'ai',\n      size: 'medium',\n      iconOnly: false,\n      orientation: 'horizontal',\n    },\n  },\n);\n\ntype Props = {\n  icon?: ReactNode;\n  badge?: ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n} & ComponentProps<typeof Root> &\n  Omit<VariantProps<typeof toggleVariants>, 'iconOnly' | 'orientation'>;\n\nexport const Toggle = ({\n  ref,\n  className,\n  variant = 'ai',\n  size = 'medium',\n  orientation = 'horizontal',\n  children,\n  icon,\n  badge,\n  disabled = false,\n  ...props\n}: Props) => {\n  const isAiVariant = variant === 'ai';\n  const isIconOnly = Boolean(icon && children == null);\n\n  return (\n    <Root\n      {...props}\n      ref={ref}\n      className={cn(\n        toggleVariants({ variant, size, orientation, iconOnly: isIconOnly, className }),\n      )}\n      disabled={disabled}\n    >\n      {badge && (\n        <span className=\"tw:absolute tw:right-0 tw:top-0 tw:-translate-y-1/2 tw:translate-x-1/4\">\n          {badge}\n        </span>\n      )}\n      {icon && (\n        <span className=\"tw:inline-flex tw:size-4 tw:shrink-0 tw:items-center tw:justify-center tw:align-middle tw:[&_svg:not([class*='tw:size-'])]:size-4\">\n          {icon}\n        </span>\n      )}\n\n      {isAiVariant ? (\n        <div className=\"tw:bg-gradient-to-br tw:from-secondary-700 tw:to-purple-700 tw:bg-clip-text tw:text-transparent\">\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </Root>\n  );\n};\n"],"mappings":";;;;;AAMA,MAAM,iBAAiB,IACrB;CACE;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,IAAI;IACF;IAGA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IAMA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IAKA;IAOA;IACA;IAGA;IACA;IAGA;IACA;IAGA;IACA;GACF;EACF;EACA,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;EAGA,aAAa;GACX,YAAY;GACZ,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;EACF;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,UAAU;GAAM,MAAM;GAAS,WAAW;EAAY;EACxD;GAAE,UAAU;GAAM,MAAM;GAAU,WAAW;EAAa;EAC1D;GAAE,UAAU;GAAM,MAAM;GAAS,WAAW;EAAa;CAC3D;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,UAAU;EACV,aAAa;CACf;AACF,CACF;AASA,MAAa,UAAU,EACrB,KACA,WACA,UAAU,MACV,OAAO,UACP,cAAc,cACd,UACA,MACA,OACA,WAAW,OACX,GAAG,YACQ;CACX,MAAM,cAAc,YAAY;CAChC,MAAM,aAAa,QAAQ,QAAQ,YAAY,IAAI;CAEnD,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,eAAe;GAAE;GAAS;GAAM;GAAa,UAAU;GAAY;EAAU,CAAC,CAChF;EACU;EANZ,UAAA;GAQG,SACC,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA;GAEP,QACC,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA;GACG,CAAA;GAGP,cACC,oBAAC,OAAD;IAAK,WAAU;IACZ;GACE,CAAA,IAEL;EAEE;;AAEV"}

package/dist/internal/components/ToggleGroup.js

@@ -0,0 +1,2 @@
+import { ToggleGroup } from "../../ToggleGroup-Cy_10Mvu.js";
+export { ToggleGroup };

package/dist/internal/components/Tooltip.js

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipProvider } from "../../utils-D0c5VAyF.js";
+export { Tooltip, TooltipProvider };

package/dist/internal/components/Truncated.js

@@ -0,0 +1,45 @@
+import { cn } from "../../classNames-BzrkDnOD.js";
+import { Tooltip } from "../../utils-D0c5VAyF.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Truncated.tsx
+const OFFSET_TOLERANCE = 2;
+const Truncated = ({ ref, text, tooltip = text, className, twoLines = false, noTooltip = false, tooltipVariant = "explanatory", tooltipPlacement = "top", ...rest }) => {
+	const tooltipText = typeof tooltip === "string" ? tooltip : "";
+	const [showTooltip, setShowTooltip] = useState(false);
+	const isScrollableTarget = (e) => {
+		return e.scrollHeight - OFFSET_TOLERANCE >= e.clientHeight;
+	};
+	const truncatedClasses = cn(className, "tw:[word-break:break-all]", twoLines ? "tw:line-clamp-2 tw:[word-break:break-word]" : "tw:line-clamp-1");
+	if (noTooltip || !tooltipText) return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: truncatedClasses,
+		...rest,
+		children: text
+	});
+	return /* @__PURE__ */ jsx(Tooltip, {
+		placement: tooltipPlacement,
+		variant: tooltipVariant,
+		forceHide: !showTooltip,
+		tooltip: /* @__PURE__ */ jsx("div", { children: tooltipText }),
+		triggerAsChild: true,
+		children: /* @__PURE__ */ jsx("span", {
+			ref,
+			className: truncatedClasses,
+			...rest,
+			onMouseOver: (e) => {
+				setShowTooltip(isScrollableTarget(e.currentTarget));
+				rest.onMouseOver?.(e);
+			},
+			onFocus: (e) => {
+				setShowTooltip(isScrollableTarget(e.currentTarget));
+				rest.onFocus?.(e);
+			},
+			children: text
+		})
+	});
+};
+//#endregion
+export { Truncated };
+
+//# sourceMappingURL=Truncated.js.map