@keboola/design 10.1.0 → 11.0.1

package/dist/TimePicker-B_NegL-7.js

@@ -0,0 +1,98 @@
+import { ScrollArea } from "./internal/components/ScrollArea.js";
+import { Toggle } from "./internal/components/Toggle.js";
+import { Popover } from "./Popover-Ca0V6AD1.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TimePicker/utils.ts
+const pad = (n) => n.toString().padStart(2, "0");
+/** The "HH:mm" shape `parseTime` parses back. */
+const formatTime = (hour, minute) => `${pad(hour)}:${pad(minute)}`;
+const parseTime = (time) => {
+	if (!time) return {
+		hour: null,
+		minute: null
+	};
+	const match = /^(\d{1,2}):(\d{1,2})$/.exec(time.trim());
+	if (!match) return {
+		hour: null,
+		minute: null
+	};
+	const hour = Number(match[1]);
+	const minute = Number(match[2]);
+	if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) return {
+		hour: null,
+		minute: null
+	};
+	return {
+		hour,
+		minute
+	};
+};
+const scrollToSelected = (viewport) => {
+	if (!viewport) return;
+	requestAnimationFrame(() => {
+		viewport.querySelector("[aria-pressed=\"true\"]")?.scrollIntoView({ block: "center" });
+	});
+};
+//#endregion
+//#region src/components/TimePicker/TimePicker.tsx
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const MINUTES = Array.from({ length: 60 }, (_, i) => i);
+const TimePicker = ({ align = "end", alignOffset = -18, children, defaultOpen, defaultSelected, onOpenChange, onSelect, open, selected, sideOffset = 12 }) => {
+	const [internalSelected, setInternalSelected] = useState(defaultSelected ?? null);
+	const isControlled = selected !== void 0;
+	const parsed = parseTime(isControlled ? selected : internalSelected);
+	const hour = parsed.hour ?? null;
+	const minute = parsed.minute ?? null;
+	const handleSelect = (time) => {
+		if (!isControlled) setInternalSelected(time);
+		onSelect?.(time);
+	};
+	const handleHourSelect = (h) => {
+		handleSelect(formatTime(h, minute ?? 0));
+	};
+	const handleMinuteSelect = (m) => {
+		handleSelect(formatTime(hour ?? 0, m));
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		defaultOpen,
+		onOpenChange,
+		open,
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsxs(Popover.Content, {
+			align,
+			alignOffset,
+			sideOffset,
+			className: "tw:flex tw:flex-row",
+			children: [/* @__PURE__ */ jsx(ScrollArea, {
+				type: "always",
+				ref: scrollToSelected,
+				viewPortClassName: "tw:h-60 tw:p-3",
+				children: HOURS.map((value) => /* @__PURE__ */ jsx(Toggle, {
+					variant: "ghost",
+					className: "tw:size-10 tw:p-0",
+					pressed: value === hour,
+					onPressedChange: () => handleHourSelect(value),
+					children: pad(value)
+				}, value))
+			}), /* @__PURE__ */ jsx(ScrollArea, {
+				type: "always",
+				ref: scrollToSelected,
+				viewPortClassName: "tw:h-60 tw:p-3",
+				children: MINUTES.map((value) => /* @__PURE__ */ jsx(Toggle, {
+					variant: "ghost",
+					className: "tw:size-10 tw:p-0",
+					pressed: value === minute,
+					onPressedChange: () => handleMinuteSelect(value),
+					children: pad(value)
+				}, value))
+			})]
+		})]
+	});
+};
+//#endregion
+export { TimePicker, formatTime, pad, parseTime };
+
+//# sourceMappingURL=TimePicker-B_NegL-7.js.map

package/dist/TimePicker-B_NegL-7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker-B_NegL-7.js","names":[],"sources":["../src/components/TimePicker/utils.ts","../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["export const pad = (n: number) => n.toString().padStart(2, '0');\n\n/** The \"HH:mm\" shape `parseTime` parses back. */\nexport const formatTime = (hour: number, minute: number) => `${pad(hour)}:${pad(minute)}`;\n\nexport const parseTime = (time?: string | null) => {\n  if (!time) return { hour: null, minute: null };\n\n  const match = /^(\\d{1,2}):(\\d{1,2})$/.exec(time.trim());\n  if (!match) return { hour: null, minute: null };\n\n  const hour = Number(match[1]);\n  const minute = Number(match[2]);\n  if (\n    Number.isNaN(hour) ||\n    Number.isNaN(minute) ||\n    hour < 0 ||\n    hour > 23 ||\n    minute < 0 ||\n    minute > 59\n  )\n    return { hour: null, minute: null };\n\n  return { hour, minute };\n};\n\nexport const scrollToSelected = (viewport: HTMLDivElement | null) => {\n  if (!viewport) return;\n  // Defer scroll until after the popover open animation completes and layout is calculated\n  requestAnimationFrame(() => {\n    const selected = viewport.querySelector('[aria-pressed=\"true\"]');\n    selected?.scrollIntoView({ block: 'center' });\n  });\n};\n","import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';\n\nimport { Popover } from '../Popover';\nimport { ScrollArea } from '../ScrollArea';\nimport { Toggle } from '../Toggle';\n\nimport { formatTime, pad, parseTime, scrollToSelected } from './utils';\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i);\nconst MINUTES = Array.from({ length: 60 }, (_, i) => i);\n\ntype Props = {\n  children?: ReactNode;\n  defaultSelected?: string | null;\n  selected?: string | null;\n  onSelect?: (time: string) => void;\n} & Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &\n  Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;\n\nexport const TimePicker = ({\n  align = 'end',\n  alignOffset = -18,\n  children,\n  defaultOpen,\n  defaultSelected,\n  onOpenChange,\n  onSelect,\n  open,\n  selected,\n  sideOffset = 12,\n}: Props) => {\n  const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelected ?? null);\n\n  const isControlled = selected !== undefined;\n  const currentValue = isControlled ? selected : internalSelected;\n\n  const parsed = parseTime(currentValue);\n  const hour = parsed.hour ?? null;\n  const minute = parsed.minute ?? null;\n\n  const handleSelect = (time: string) => {\n    if (!isControlled) {\n      setInternalSelected(time);\n    }\n    onSelect?.(time);\n  };\n\n  const handleHourSelect = (h: number) => {\n    handleSelect(formatTime(h, minute ?? 0));\n  };\n\n  const handleMinuteSelect = (m: number) => {\n    handleSelect(formatTime(hour ?? 0, m));\n  };\n\n  return (\n    <Popover defaultOpen={defaultOpen} onOpenChange={onOpenChange} open={open}>\n      <Popover.Trigger asChild>{children}</Popover.Trigger>\n      <Popover.Content\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className=\"tw:flex tw:flex-row\"\n      >\n        <ScrollArea type=\"always\" ref={scrollToSelected} viewPortClassName=\"tw:h-60 tw:p-3\">\n          {HOURS.map((value) => (\n            <Toggle\n              key={value}\n              variant=\"ghost\"\n              className=\"tw:size-10 tw:p-0\"\n              pressed={value === hour}\n              onPressedChange={() => handleHourSelect(value)}\n            >\n              {pad(value)}\n            </Toggle>\n          ))}\n        </ScrollArea>\n\n        <ScrollArea type=\"always\" ref={scrollToSelected} viewPortClassName=\"tw:h-60 tw:p-3\">\n          {MINUTES.map((value) => (\n            <Toggle\n              key={value}\n              variant=\"ghost\"\n              className=\"tw:size-10 tw:p-0\"\n              pressed={value === minute}\n              onPressedChange={() => handleMinuteSelect(value)}\n            >\n              {pad(value)}\n            </Toggle>\n          ))}\n        </ScrollArea>\n      </Popover.Content>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAa,OAAO,MAAc,EAAE,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG;;AAG9D,MAAa,cAAc,MAAc,WAAmB,GAAG,IAAI,IAAI,EAAE,GAAG,IAAI,MAAM;AAEtF,MAAa,aAAa,SAAyB;CACjD,IAAI,CAAC,MAAM,OAAO;EAAE,MAAM;EAAM,QAAQ;CAAK;CAE7C,MAAM,QAAQ,wBAAwB,KAAK,KAAK,KAAK,CAAC;CACtD,IAAI,CAAC,OAAO,OAAO;EAAE,MAAM;EAAM,QAAQ;CAAK;CAE9C,MAAM,OAAO,OAAO,MAAM,EAAE;CAC5B,MAAM,SAAS,OAAO,MAAM,EAAE;CAC9B,IACE,OAAO,MAAM,IAAI,KACjB,OAAO,MAAM,MAAM,KACnB,OAAO,KACP,OAAO,MACP,SAAS,KACT,SAAS,IAET,OAAO;EAAE,MAAM;EAAM,QAAQ;CAAK;CAEpC,OAAO;EAAE;EAAM;CAAO;AACxB;AAEA,MAAa,oBAAoB,aAAoC;CACnE,IAAI,CAAC,UAAU;CAEf,4BAA4B;EAE1B,SAD0B,cAAc,yBACjC,CAAC,EAAE,eAAe,EAAE,OAAO,SAAS,CAAC;CAC9C,CAAC;AACH;;;ACvBA,MAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC;AACpD,MAAM,UAAU,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC;AAUtD,MAAa,cAAc,EACzB,QAAQ,OACR,cAAc,KACd,UACA,aACA,iBACA,cACA,UACA,MACA,UACA,aAAa,SACF;CACX,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,mBAAmB,IAAI;CAE/F,MAAM,eAAe,aAAa,KAAA;CAGlC,MAAM,SAAS,UAFM,eAAe,WAAW,gBAEV;CACrC,MAAM,OAAO,OAAO,QAAQ;CAC5B,MAAM,SAAS,OAAO,UAAU;CAEhC,MAAM,gBAAgB,SAAiB;EACrC,IAAI,CAAC,cACH,oBAAoB,IAAI;EAE1B,WAAW,IAAI;CACjB;CAEA,MAAM,oBAAoB,MAAc;EACtC,aAAa,WAAW,GAAG,UAAU,CAAC,CAAC;CACzC;CAEA,MAAM,sBAAsB,MAAc;EACxC,aAAa,WAAW,QAAQ,GAAG,CAAC,CAAC;CACvC;CAEA,OACE,qBAAC,SAAD;EAAsB;EAA2B;EAAoB;EAArE,UAAA,CACE,oBAAC,QAAQ,SAAT;GAAiB,SAAA;GAAS;EAA0B,CAAA,GACpD,qBAAC,QAAQ,SAAT;GACS;GACM;GACD;GACZ,WAAU;GAJZ,UAAA,CAME,oBAAC,YAAD;IAAY,MAAK;IAAS,KAAK;IAAkB,mBAAkB;IAChE,UAAA,MAAM,KAAK,UACV,oBAAC,QAAD;KAEE,SAAQ;KACR,WAAU;KACV,SAAS,UAAU;KACnB,uBAAuB,iBAAiB,KAAK;KAE5C,UAAA,IAAI,KAAK;IACJ,GAPD,KAOC,CACT;GACS,CAAA,GAEZ,oBAAC,YAAD;IAAY,MAAK;IAAS,KAAK;IAAkB,mBAAkB;IAChE,UAAA,QAAQ,KAAK,UACZ,oBAAC,QAAD;KAEE,SAAQ;KACR,WAAU;KACV,SAAS,UAAU;KACnB,uBAAuB,mBAAmB,KAAK;KAE9C,UAAA,IAAI,KAAK;IACJ,GAPD,KAOC,CACT;GACS,CAAA,CACG;EACV,CAAA,CAAA;;AAEb"}

package/dist/Timeline-6btyJl4D.js

@@ -0,0 +1,154 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useElement } from "./useElement-DkF6esWL.js";
+import { Root } from "@radix-ui/react-slot";
+import { useEffect, useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Timeline/useLastLineHeight.ts
+const CONNECTOR_MARGIN_TOP = 8;
+const useLastLineHeight = () => {
+	const [wrapper, setWrapper] = useElement();
+	const [connector, setConnector] = useElement();
+	const [height, setHeight] = useState(0);
+	useEffect(() => {
+		if (wrapper === null) return;
+		if (connector === null) return;
+		const updateHeight = () => {
+			const wrapperRect = wrapper.getBoundingClientRect();
+			const distance = connector.getBoundingClientRect().top - wrapperRect.top - CONNECTOR_MARGIN_TOP;
+			setHeight(distance);
+		};
+		const rafId = requestAnimationFrame(updateHeight);
+		return () => {
+			cancelAnimationFrame(rafId);
+		};
+	}, [wrapper, connector]);
+	return {
+		height,
+		setWrapper,
+		setConnector
+	};
+};
+//#endregion
+//#region src/components/Timeline/TimelineConnector.tsx
+const connectorWrapper = cva([
+	"tw:grow",
+	"tw:min-h-8",
+	"tw:py-2",
+	"tw:flex",
+	"tw:justify-center",
+	"tw:relative",
+	"tw:before:absolute",
+	"tw:before:self-start",
+	"tw:before:left-1/2",
+	"tw:before:-translate-x-1/2",
+	"tw:before:w-px",
+	"tw:before:h-full",
+	"tw:before:group-last/timeline-item:h-(--connector-line-height)",
+	"tw:before:group-data-[variant=solid]/timeline:bg-border",
+	"tw:before:group-data-[variant=dashed]/timeline:bg-gradient-to-b",
+	"tw:before:group-data-[variant=dashed]/timeline:from-border",
+	"tw:before:group-data-[variant=dashed]/timeline:from-50%",
+	"tw:before:group-data-[variant=dashed]/timeline:to-transparent",
+	"tw:before:group-data-[variant=dashed]/timeline:to-50%",
+	"tw:before:group-data-[variant=dashed]/timeline:bg-[length:1px_4px]"
+], {
+	defaultVariants: { align: "start" },
+	variants: { align: {
+		start: ["tw:items-start"],
+		center: ["tw:items-center"],
+		end: ["tw:items-end"],
+		baseline: ["tw:items-baseline"]
+	} }
+});
+const connector = cva(["tw:z-10", "tw:relative"], {
+	defaultVariants: { variant: "label" },
+	variants: { variant: {
+		none: [],
+		label: [
+			"tw:bg-muted",
+			"tw:text-muted-foreground",
+			"tw:rounded",
+			"tw:p-1.5",
+			"tw:text-nowrap",
+			"tw:text-xs"
+		],
+		icon: [
+			"tw:bg-background",
+			"tw:[&_svg:not([class*=\"tw:size-\"])]:size-4",
+			"tw:[&_svg]:text-muted-foreground"
+		],
+		line: [
+			"tw:min-w-8",
+			"tw:overflow-hidden",
+			"tw:w-full",
+			"tw:h-1",
+			"tw:my-1.5",
+			"tw:relative",
+			"tw:before:absolute",
+			"tw:before:left-1/2",
+			"tw:before:bottom-0",
+			"tw:before:w-full",
+			"tw:before:h-full",
+			"tw:before:border-l",
+			"tw:before:border-b",
+			"tw:before:border-border",
+			"tw:before:rounded-bl",
+			"tw:before:group-data-[variant=dashed]/timeline:border-dashed",
+			"tw:before:group-data-[variant=solid]/timeline:!border-solid"
+		]
+	} }
+});
+const TimelineConnector = ({ className, children, asChild, variant, align, offset = 0, style, ...rest }) => {
+	const Comp = asChild ? Root : "div";
+	const { setConnector, setWrapper, height } = useLastLineHeight();
+	return /* @__PURE__ */ jsx("div", {
+		ref: setWrapper,
+		style: { "--connector-line-height": `${height}px` },
+		className: connectorWrapper({ align }),
+		children: /* @__PURE__ */ jsx(Comp, {
+			...rest,
+			ref: setConnector,
+			style: {
+				top: align === "end" ? -offset : offset,
+				...style
+			},
+			className: connector({
+				variant,
+				className
+			}),
+			children
+		})
+	});
+};
+//#endregion
+//#region src/components/Timeline/TimelineContent.tsx
+const TimelineContent = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+	...rest,
+	"data-slot": "timeline-content",
+	className: cn("tw:flex", "tw:py-2", className)
+});
+//#endregion
+//#region src/components/Timeline/TimelineItem.tsx
+const TimelineItem = ({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx("li", {
+		...rest,
+		className: cn("tw:contents", "tw:relative", "tw:group/timeline-item", className)
+	});
+};
+//#endregion
+//#region src/components/Timeline/Timeline.tsx
+const Timeline = ({ className, variant = "dashed", ...rest }) => {
+	return /* @__PURE__ */ jsx("ul", {
+		...rest,
+		"data-variant": variant,
+		className: cn("tailwindcss-preflight", "tw:overflow-y-hidden", "tw:p-0", "tw:grid", "tw:grid-cols-[auto_minmax(0,1fr)]", "tw:group/timeline", "tw:gap-x-4", className)
+	});
+};
+Timeline.Item = TimelineItem;
+Timeline.Content = TimelineContent;
+Timeline.Connector = TimelineConnector;
+//#endregion
+export { Timeline };
+
+//# sourceMappingURL=Timeline-6btyJl4D.js.map

package/dist/Timeline-6btyJl4D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline-6btyJl4D.js","names":[],"sources":["../src/components/Timeline/useLastLineHeight.ts","../src/components/Timeline/TimelineConnector.tsx","../src/components/Timeline/TimelineContent.tsx","../src/components/Timeline/TimelineItem.tsx","../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useElement } from '../../hooks/useElement';\n\nconst CONNECTOR_MARGIN_TOP = 8;\n\nexport const useLastLineHeight = () => {\n  const [wrapper, setWrapper] = useElement();\n  const [connector, setConnector] = useElement();\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    if (wrapper === null) return;\n    if (connector === null) return;\n\n    const updateHeight = () => {\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const connectorRect = connector.getBoundingClientRect();\n      const distance = connectorRect.top - wrapperRect.top - CONNECTOR_MARGIN_TOP;\n      setHeight(distance);\n    };\n\n    // Initial check.\n    const rafId = requestAnimationFrame(updateHeight);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n    };\n  }, [wrapper, connector]);\n\n  return {\n    height,\n    setWrapper,\n    setConnector,\n  };\n};\n","import type { ComponentProps, CSSProperties } from 'react';\nimport { Root } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { useLastLineHeight } from './useLastLineHeight';\n\nconst connectorWrapper = cva(\n  [\n    'tw:grow',\n    'tw:min-h-8',\n    'tw:py-2',\n\n    // layout\n    'tw:flex',\n    'tw:justify-center',\n\n    // CONNECTOR LINE\n    'tw:relative',\n    'tw:before:absolute',\n    'tw:before:self-start',\n\n    // Centered on x-axis\n    'tw:before:left-1/2',\n    'tw:before:-translate-x-1/2',\n    'tw:before:w-px',\n    'tw:before:h-full',\n    'tw:before:group-last/timeline-item:h-(--connector-line-height)',\n\n    // Solid line\n    'tw:before:group-data-[variant=solid]/timeline:bg-border',\n\n    // Dashed line using gradient\n    'tw:before:group-data-[variant=dashed]/timeline:bg-gradient-to-b',\n    'tw:before:group-data-[variant=dashed]/timeline:from-border',\n    'tw:before:group-data-[variant=dashed]/timeline:from-50%',\n    'tw:before:group-data-[variant=dashed]/timeline:to-transparent',\n    'tw:before:group-data-[variant=dashed]/timeline:to-50%',\n    'tw:before:group-data-[variant=dashed]/timeline:bg-[length:1px_4px]',\n  ],\n  {\n    defaultVariants: {\n      align: 'start',\n    },\n    variants: {\n      align: {\n        start: ['tw:items-start'],\n        center: ['tw:items-center'],\n        end: ['tw:items-end'],\n        baseline: ['tw:items-baseline'],\n      },\n    },\n  },\n);\n\nconst connector = cva(\n  [\n    // ensure that it is always above the connector line.\n    'tw:z-10',\n    'tw:relative',\n  ],\n  {\n    defaultVariants: {\n      variant: 'label',\n    },\n    variants: {\n      variant: {\n        none: [],\n        label: [\n          'tw:bg-muted',\n          'tw:text-muted-foreground',\n          'tw:rounded',\n          'tw:p-1.5',\n          'tw:text-nowrap',\n          'tw:text-xs',\n        ],\n        icon: [\n          'tw:bg-background',\n          'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n          'tw:[&_svg]:text-muted-foreground',\n        ],\n        line: [\n          'tw:min-w-8',\n          'tw:overflow-hidden',\n          'tw:w-full',\n          // height of the curved corner\n          'tw:h-1',\n\n          // small offset from top and bottom\n          'tw:my-1.5',\n          // positioning\n          'tw:relative',\n          'tw:before:absolute',\n          'tw:before:left-1/2',\n          'tw:before:bottom-0',\n\n          // sizing\n          'tw:before:w-full',\n          'tw:before:h-full',\n\n          // l-shape\n          'tw:before:border-l',\n          'tw:before:border-b',\n          'tw:before:border-border',\n\n          'tw:before:rounded-bl',\n          // Solid or dashed\n          'tw:before:group-data-[variant=dashed]/timeline:border-dashed',\n          'tw:before:group-data-[variant=solid]/timeline:!border-solid',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean; offset?: number } & ComponentProps<'div'> &\n  VariantProps<typeof connectorWrapper> &\n  VariantProps<typeof connector>;\n\nexport const TimelineConnector = ({\n  className,\n  children,\n  asChild,\n  variant,\n  align,\n  offset = 0,\n  style,\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'div';\n  const { setConnector, setWrapper, height } = useLastLineHeight();\n\n  return (\n    <div\n      ref={setWrapper}\n      style={\n        {\n          '--connector-line-height': `${height}px`,\n        } as CSSProperties\n      }\n      className={connectorWrapper({\n        align,\n      })}\n    >\n      <Comp\n        {...rest}\n        ref={setConnector}\n        style={{\n          top: align === 'end' ? -offset : offset,\n          ...style,\n        }}\n        className={connector({ variant, className })}\n      >\n        {children}\n      </Comp>\n    </div>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const TimelineContent = ({ className, ...rest }: Props) => (\n  <div\n    {...rest}\n    data-slot=\"timeline-content\"\n    className={cn(\n      'tw:flex',\n      // spacing in between timeline items\n      'tw:py-2',\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const TimelineItem = ({ className, ...rest }: Props) => {\n  return (\n    <li\n      {...rest}\n      className={cn('tw:contents', 'tw:relative', 'tw:group/timeline-item', className)}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { TimelineConnector } from './TimelineConnector';\nimport { TimelineContent } from './TimelineContent';\nimport { TimelineItem } from './TimelineItem';\n\ntype Props = ComponentProps<'ul'> & {\n  variant?: 'solid' | 'dashed';\n};\n\nexport const Timeline = ({ className, variant = 'dashed', ...rest }: Props) => {\n  return (\n    <ul\n      {...rest}\n      data-variant={variant}\n      className={cn(\n        'tailwindcss-preflight',\n        'tw:overflow-y-hidden',\n        // reset default styling\n        'tw:p-0',\n        'tw:grid',\n        'tw:grid-cols-[auto_minmax(0,1fr)]',\n        'tw:group/timeline',\n        'tw:gap-x-4',\n        className,\n      )}\n    />\n  );\n};\n\nTimeline.Item = TimelineItem;\nTimeline.Content = TimelineContent;\nTimeline.Connector = TimelineConnector;\n"],"mappings":";;;;;;;AAIA,MAAM,uBAAuB;AAE7B,MAAa,0BAA0B;CACrC,MAAM,CAAC,SAAS,cAAc,WAAW;CACzC,MAAM,CAAC,WAAW,gBAAgB,WAAW;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC;CAEtC,gBAAgB;EACd,IAAI,YAAY,MAAM;EACtB,IAAI,cAAc,MAAM;EAExB,MAAM,qBAAqB;GACzB,MAAM,cAAc,QAAQ,sBAAsB;GAElD,MAAM,WADgB,UAAU,sBACH,CAAC,CAAC,MAAM,YAAY,MAAM;GACvD,UAAU,QAAQ;EACpB;EAGA,MAAM,QAAQ,sBAAsB,YAAY;EAEhD,aAAa;GACX,qBAAqB,KAAK;EAC5B;CACF,GAAG,CAAC,SAAS,SAAS,CAAC;CAEvB,OAAO;EACL;EACA;EACA;CACF;AACF;;;AC5BA,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,OAAO,QACT;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,gBAAgB;EACxB,QAAQ,CAAC,iBAAiB;EAC1B,KAAK,CAAC,cAAc;EACpB,UAAU,CAAC,mBAAmB;CAChC,EACF;AACF,CACF;AAEA,MAAM,YAAY,IAChB,CAEE,WACA,aACF,GACA;CACE,iBAAiB,EACf,SAAS,QACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,CAAC;EACP,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GAEA;GAGA;GAEA;GACA;GACA;GACA;GAGA;GACA;GAGA;GACA;GACA;GAEA;GAEA;GACA;EACF;CACF,EACF;AACF,CACF;AAMA,MAAa,qBAAqB,EAChC,WACA,UACA,SACA,SACA,OACA,SAAS,GACT,OACA,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,EAAE,cAAc,YAAY,WAAW,kBAAkB;CAE/D,OACE,oBAAC,OAAD;EACE,KAAK;EACL,OACE,EACE,2BAA2B,GAAG,OAAO,IACvC;EAEF,WAAW,iBAAiB,EAC1B,MACF,CAAC;EAED,UAAA,oBAAC,MAAD;GACE,GAAI;GACJ,KAAK;GACL,OAAO;IACL,KAAK,UAAU,QAAQ,CAAC,SAAS;IACjC,GAAG;GACL;GACA,WAAW,UAAU;IAAE;IAAS;GAAU,CAAC;GAE1C;EACG,CAAA;CACH,CAAA;AAET;;;ACvJA,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAC9C,oBAAC,OAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GACT,WAEA,WACA,SACF;AACD,CAAA;;;ACVH,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAAkB;CAC7D,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,WAAW,GAAG,eAAe,eAAe,0BAA0B,SAAS;CAChF,CAAA;AAEL;;;ACDA,MAAa,YAAY,EAAE,WAAW,UAAU,UAAU,GAAG,WAAkB;CAC7E,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,gBAAc;EACd,WAAW,GACT,yBACA,wBAEA,UACA,WACA,qCACA,qBACA,cACA,SACF;CACD,CAAA;AAEL;AAEA,SAAS,OAAO;AAChB,SAAS,UAAU;AACnB,SAAS,YAAY"}

package/dist/Toast-DQSbs3oA.js

@@ -0,0 +1,49 @@
+import { toast as toast$1 } from "./toast-CjkURw0M.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toaster } from "sonner";
+//#region src/components/Toast/useNotification.tsx
+/**
+* Declarative notification component built on top of sonner/toast.
+*
+* Use `Notification` for persistent, system-driven messages that require user acknowledgment
+* (e.g., trial expiration warnings, upgrade prompts, billing alerts).
+* The notification stays visible until the user dismisses it or the component unmounts.
+*
+* Use `toast()` for transient feedback after a user action
+* (e.g., "Saved", "Copied", "Deleted") that auto-dismisses after a few seconds.
+*/
+const useNotification = ({ enabled = true, ...toastOptions }) => {
+	useEffect(() => {
+		if (!enabled) return;
+		let toastId;
+		const frameId = requestAnimationFrame(() => {
+			toastId = toast$1({
+				...toastOptions,
+				duration: toastOptions.duration ?? Infinity
+			});
+		});
+		return () => {
+			cancelAnimationFrame(frameId);
+			toast$1.dismiss(toastId);
+		};
+	}, [enabled]);
+};
+//#endregion
+//#region src/components/Toast/Toaster.tsx
+const DEFAULT_STYLES = { "--width": "512px" };
+const stopPropagation = (event) => event.stopPropagation();
+const Toaster$1 = ({ gap = 12, visibleToasts = 5, ...props }) => /* @__PURE__ */ jsx("div", {
+	onPointerDown: stopPropagation,
+	children: /* @__PURE__ */ jsx(Toaster, {
+		...props,
+		gap,
+		visibleToasts,
+		className: "tw:pointer-events-auto tw:flex tw:w-full tw:max-w-lg tw:justify-center",
+		style: DEFAULT_STYLES
+	})
+});
+//#endregion
+export { Toaster$1 as Toaster, useNotification };
+
+//# sourceMappingURL=Toast-DQSbs3oA.js.map

package/dist/Toast-DQSbs3oA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast-DQSbs3oA.js","names":["toast","Toaster","SonnerToaster"],"sources":["../src/components/Toast/useNotification.tsx","../src/components/Toast/Toaster.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { toast } from './toast';\n\ntype Props = {\n  enabled?: boolean;\n} & Parameters<typeof toast>[0];\n\n/**\n * Declarative notification component built on top of sonner/toast.\n *\n * Use `Notification` for persistent, system-driven messages that require user acknowledgment\n * (e.g., trial expiration warnings, upgrade prompts, billing alerts).\n * The notification stays visible until the user dismisses it or the component unmounts.\n *\n * Use `toast()` for transient feedback after a user action\n * (e.g., \"Saved\", \"Copied\", \"Deleted\") that auto-dismisses after a few seconds.\n */\nexport const useNotification = ({ enabled = true, ...toastOptions }: Props) => {\n  useEffect(() => {\n    if (!enabled) return;\n    let toastId: string | number | undefined;\n    const frameId = requestAnimationFrame(() => {\n      toastId = toast({ ...toastOptions, duration: toastOptions.duration ?? Infinity });\n    });\n\n    return () => {\n      cancelAnimationFrame(frameId);\n      toast.dismiss(toastId);\n    };\n    // oxlint-disable-next-line react/exhaustive-deps -- we only want to trigger this effect when enabled changes, not when other toast options change\n  }, [enabled]);\n};\n","import type { ComponentProps, PointerEvent } from 'react';\nimport { Toaster as SonnerToaster } from 'sonner';\n\ntype ToasterProps = ComponentProps<typeof SonnerToaster>;\n\nconst DEFAULT_STYLES = {\n  '--width': '512px', // match max-w-lg\n} as React.CSSProperties;\n\nconst stopPropagation = (event: PointerEvent) => event.stopPropagation();\n\nexport const Toaster = ({ gap = 12, visibleToasts = 5, ...props }: ToasterProps) => (\n  // Wrapper prevents toast clicks from reaching Radix Dialog's DismissableLayer,\n  // which would otherwise close the modal on any \"outside\" pointer event.\n  // oxlint-disable-next-line jsx-a11y/no-static-element-interactions\n  <div onPointerDown={stopPropagation}>\n    <SonnerToaster\n      {...props}\n      gap={gap}\n      visibleToasts={visibleToasts}\n      className=\"tw:pointer-events-auto tw:flex tw:w-full tw:max-w-lg tw:justify-center\"\n      style={DEFAULT_STYLES}\n    />\n  </div>\n);\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,mBAAmB,EAAE,UAAU,MAAM,GAAG,mBAA0B;CAC7E,gBAAgB;EACd,IAAI,CAAC,SAAS;EACd,IAAI;EACJ,MAAM,UAAU,4BAA4B;GAC1C,UAAUA,QAAM;IAAE,GAAG;IAAc,UAAU,aAAa,YAAY;GAAS,CAAC;EAClF,CAAC;EAED,aAAa;GACX,qBAAqB,OAAO;GAC5B,QAAM,QAAQ,OAAO;EACvB;CAEF,GAAG,CAAC,OAAO,CAAC;AACd;;;AC3BA,MAAM,iBAAiB,EACrB,WAAW,QACb;AAEA,MAAM,mBAAmB,UAAwB,MAAM,gBAAgB;AAEvE,MAAaC,aAAW,EAAE,MAAM,IAAI,gBAAgB,GAAG,GAAG,YAIxD,oBAAC,OAAD;CAAK,eAAe;CAClB,UAAA,oBAACC,SAAD;EACE,GAAI;EACC;EACU;EACf,WAAU;EACV,OAAO;CACR,CAAA;AACE,CAAA"}

package/dist/ToggleGroup-Cy_10Mvu.js

@@ -0,0 +1,47 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+//#region src/components/ToggleGroup/ToggleGroup.tsx
+const rootVariants = cva([
+	"tailwindcss-preflight",
+	"tw:inline-flex",
+	"tw:items-center",
+	"tw:shrink-0",
+	"tw:bg-muted",
+	"tw:rounded-lg",
+	"tw:p-[3px]",
+	"tw:gap-0"
+], {
+	defaultVariants: { size: "medium" },
+	variants: { size: {
+		small: ["tw:h-8"],
+		medium: ["tw:h-9"],
+		large: ["tw:h-10"]
+	} }
+});
+const itemClasses = cn("tailwindcss-preflight", "tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:gap-2", "tw:shrink-0", "tw:whitespace-nowrap", "tw:h-full", "tw:rounded-md", "tw:px-2", "tw:py-1", "tw:bg-transparent", "tw:text-muted-foreground", "tw:text-sm", "tw:font-medium", "tw:transition-colors", "tw:disabled:cursor-not-allowed", "tw:disabled:opacity-50", "tw:!outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:not-disabled:[&[data-state=off]]:hover:bg-background/60", "tw:not-disabled:[&[data-state=off]]:hover:text-foreground", "tw:data-[state=on]:bg-background", "tw:data-[state=on]:text-foreground", "tw:data-[state=on]:shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]", "tw:[[data-theme=dark]_&]:data-[state=on]:bg-secondary", "tw:[[data-theme=dark]_&]:data-[state=on]:shadow-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:pointer-events-none", "tw:[&_svg:not([class*='tw:size-'])]:size-4");
+/**
+* Segmented row of mutually-exclusive (or multi-select) options. Built on `@radix-ui/react-toggle-group`.
+* For `type="single"`, `onValueChange` receives `""` when the user deselects the active item.
+*/
+const Root = ({ ref, className, size = "medium", ...props }) => /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, {
+	ref,
+	...props,
+	className: cn(rootVariants({
+		size,
+		className
+	}))
+});
+const Item = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, {
+	ref,
+	...props,
+	className: cn(itemClasses, className)
+});
+const ToggleGroup = Object.assign(Root, { 
+/** Individual segment inside a `ToggleGroup`. `value` is required and must be unique within the group. */
+Item });
+//#endregion
+export { ToggleGroup };
+
+//# sourceMappingURL=ToggleGroup-Cy_10Mvu.js.map

package/dist/ToggleGroup-Cy_10Mvu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup-Cy_10Mvu.js","names":[],"sources":["../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst rootVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:shrink-0',\n    'tw:bg-muted',\n    'tw:rounded-lg',\n    'tw:p-[3px]',\n    'tw:gap-0',\n  ],\n  {\n    defaultVariants: { size: 'medium' },\n    variants: {\n      size: {\n        small: ['tw:h-8'],\n        medium: ['tw:h-9'],\n        large: ['tw:h-10'],\n      },\n    },\n  },\n);\n\nconst itemClasses = cn(\n  'tailwindcss-preflight',\n  'tw:inline-flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:gap-2',\n  'tw:shrink-0',\n  'tw:whitespace-nowrap',\n\n  'tw:h-full',\n  'tw:rounded-md',\n  'tw:px-2',\n  'tw:py-1',\n\n  'tw:bg-transparent',\n  // Off-state copy is muted so the pressed segment reads as pressed from the label\n  // alone — the fill alone is a near-invisible step on either scheme's track.\n  'tw:text-muted-foreground',\n  'tw:text-sm',\n  'tw:font-medium',\n\n  'tw:transition-colors',\n\n  'tw:disabled:cursor-not-allowed',\n  'tw:disabled:opacity-50',\n\n  'tw:!outline-hidden',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-ring/50',\n\n  // hover on non-pressed\n  'tw:not-disabled:[&[data-state=off]]:hover:bg-background/60',\n  'tw:not-disabled:[&[data-state=off]]:hover:text-foreground',\n\n  // pressed\n  'tw:data-[state=on]:bg-background',\n  'tw:data-[state=on]:text-foreground',\n  'tw:data-[state=on]:shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]',\n\n  // Dark scheme inverts the lift: `background` is darker than the `muted` track, so the\n  // pressed segment reads as a hole and the black drop shadow renders nothing on it.\n  // `secondary` is the step above the track.\n  'tw:[[data-theme=dark]_&]:data-[state=on]:bg-secondary',\n  'tw:[[data-theme=dark]_&]:data-[state=on]:shadow-none',\n\n  'tw:[&_svg]:shrink-0',\n  'tw:[&_svg]:pointer-events-none',\n  \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n);\n\ntype RootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof rootVariants>;\n\n/**\n * Segmented row of mutually-exclusive (or multi-select) options. Built on `@radix-ui/react-toggle-group`.\n * For `type=\"single\"`, `onValueChange` receives `\"\"` when the user deselects the active item.\n */\nconst Root = ({ ref, className, size = 'medium', ...props }: RootProps) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    {...props}\n    className={cn(rootVariants({ size, className }))}\n  />\n);\n\ntype ItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>;\n\nconst Item = ({ ref, className, ...props }: ItemProps) => (\n  <ToggleGroupPrimitive.Item ref={ref} {...props} className={cn(itemClasses, className)} />\n);\n\nexport const ToggleGroup = Object.assign(Root, {\n  /** Individual segment inside a `ToggleGroup`. `value` is required and must be unique within the group. */\n  Item,\n});\n"],"mappings":";;;;;AAMA,MAAM,eAAe,IACnB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,MAAM,SAAS;CAClC,UAAU,EACR,MAAM;EACJ,OAAO,CAAC,QAAQ;EAChB,QAAQ,CAAC,QAAQ;EACjB,OAAO,CAAC,SAAS;CACnB,EACF;AACF,CACF;AAEA,MAAM,cAAc,GAClB,yBACA,kBACA,mBACA,qBACA,YACA,eACA,wBAEA,aACA,iBACA,WACA,WAEA,qBAGA,4BACA,cACA,kBAEA,wBAEA,kCACA,0BAEA,sBACA,2BACA,iCAGA,8DACA,6DAGA,oCACA,sCACA,oFAKA,yDACA,wDAEA,uBACA,kCACA,4CACF;;;;;AASA,MAAM,QAAQ,EAAE,KAAK,WAAW,OAAO,UAAU,GAAG,YAClD,oBAAC,qBAAqB,MAAtB;CACO;CACL,GAAI;CACJ,WAAW,GAAG,aAAa;EAAE;EAAM;CAAU,CAAC,CAAC;AAChD,CAAA;AAKH,MAAM,QAAQ,EAAE,KAAK,WAAW,GAAG,YACjC,oBAAC,qBAAqB,MAAtB;CAAgC;CAAK,GAAI;CAAO,WAAW,GAAG,aAAa,SAAS;AAAI,CAAA;AAG1F,MAAa,cAAc,OAAO,OAAO,MAAM;;AAE7C,KACF,CAAC"}