@exsto/ds 0.0.1-rc.13 → 0.0.1-rc.14

package/dist/ui/src/components/ui/toggle-group/toggle-group.js

@@ -0,0 +1,56 @@
+import { cn } from "../../../lib/utils.js";
+import { toggleVariants } from "../toggle/toggle.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region ../ui/src/components/ui/toggle-group/toggle-group.tsx
+var ToggleGroupContext = createContext({
+	variant: "default",
+	size: "default",
+	spacing: 2,
+	orientation: "horizontal"
+});
+var ToggleGroup$1 = ({ className, variant = "default", size = "default", spacing = 2, orientation = "horizontal", children, ...props }) => {
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: {
+			variant,
+			size,
+			spacing,
+			orientation
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup, {
+			"data-slot": "toggle-group",
+			"data-variant": variant,
+			"data-size": size,
+			"data-spacing": spacing,
+			"data-orientation": orientation,
+			orientation,
+			"aria-orientation": void 0,
+			style: { gap: `calc(var(--spacing) * ${spacing})` },
+			className: cn("group/toggle-group flex w-fit flex-row items-center rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", className),
+			...props,
+			children
+		})
+	});
+};
+var ToggleGroupItem = ({ className, variant, size, ...props }) => {
+	const ctx = useContext(ToggleGroupContext);
+	const resolvedVariant = variant ?? ctx.variant ?? "default";
+	const resolvedSize = size ?? ctx.size ?? "default";
+	return /* @__PURE__ */ jsx(Toggle, {
+		"data-slot": "toggle-group-item",
+		"data-variant": resolvedVariant,
+		"data-size": resolvedSize,
+		"data-spacing": ctx.spacing,
+		className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+			variant: resolvedVariant,
+			size: resolvedSize
+		}), className),
+		...props
+	});
+};
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupItem };
+
+//# sourceMappingURL=toggle-group.js.map

package/dist/ui/src/components/ui/toggle-group/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","names":[],"sources":["../../../../../../../ui/src/components/ui/toggle-group/toggle-group.tsx"],"sourcesContent":["import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { type CSSProperties, createContext, useContext } from 'react';\nimport { type TToggleVariants, toggleVariants } from '../toggle/toggle';\n\ninterface IToggleGroupContext extends TToggleVariants {\n  spacing?: number;\n  orientation?: 'horizontal' | 'vertical';\n}\n\nconst ToggleGroupContext = createContext<IToggleGroupContext>({\n  variant: 'default',\n  size: 'default',\n  spacing: 2,\n  orientation: 'horizontal',\n});\n\nexport const ToggleGroup = <Value extends string>({\n  className,\n  variant = 'default',\n  size = 'default',\n  spacing = 2,\n  orientation = 'horizontal',\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props<Value> & TToggleVariants & { spacing?: number }) => {\n  return (\n    <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>\n      <ToggleGroupPrimitive\n        data-slot=\"toggle-group\"\n        data-variant={variant}\n        data-size={size}\n        data-spacing={spacing}\n        data-orientation={orientation}\n        orientation={orientation}\n        aria-orientation={undefined}\n        style={{ gap: `calc(var(--spacing) * ${spacing})` } as CSSProperties}\n        className={cn(\n          'group/toggle-group flex w-fit flex-row items-center rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </ToggleGroupPrimitive>\n    </ToggleGroupContext.Provider>\n  );\n};\n\nexport const ToggleGroupItem = <Value extends string>({ className, variant, size, ...props }: TogglePrimitive.Props<Value> & TToggleVariants) => {\n  const ctx = useContext(ToggleGroupContext);\n  const resolvedVariant = variant ?? ctx.variant ?? 'default';\n  const resolvedSize = size ?? ctx.size ?? 'default';\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={resolvedVariant}\n      data-size={resolvedSize}\n      data-spacing={ctx.spacing}\n      className={cn(\n        'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',\n        toggleVariants({ variant: resolvedVariant, size: resolvedSize }),\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAWA,IAAM,qBAAqB,cAAmC;CAC5D,SAAS;CACT,MAAM;CACN,SAAS;CACT,aAAa;AACf,CAAC;AAED,IAAa,iBAAqC,EAChD,WACA,UAAU,WACV,OAAO,WACP,UAAU,GACV,cAAc,cACd,UACA,GAAG,YAC6E;CAChF,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;GAAE;GAAS;GAAM;GAAS;EAAY;EACxE,UAAA,oBAAC,aAAD;GACE,aAAU;GACV,gBAAc;GACd,aAAW;GACX,gBAAc;GACd,oBAAkB;GACL;GACb,oBAAkB,KAAA;GAClB,OAAO,EAAE,KAAK,yBAAyB,QAAQ,GAAG;GAClD,WAAW,GACT,qMACA,SACF;GACA,GAAI;GAEH;EACmB,CAAA;CACK,CAAA;AAEjC;AAEA,IAAa,mBAAyC,EAAE,WAAW,SAAS,MAAM,GAAG,YAA4D;CAC/I,MAAM,MAAM,WAAW,kBAAkB;CACzC,MAAM,kBAAkB,WAAW,IAAI,WAAW;CAClD,MAAM,eAAe,QAAQ,IAAI,QAAQ;CAEzC,OACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,gBAAc,IAAI;EAClB,WAAW,GACT,o/BACA,eAAe;GAAE,SAAS;GAAiB,MAAM;EAAa,CAAC,GAC/D,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/tooltip/tooltip.js

@@ -0,0 +1,42 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region ../ui/src/components/ui/tooltip/tooltip.tsx
+var TooltipProvider = ({ delay = 0, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delay,
+		...props
+	});
+};
+var Tooltip$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	});
+};
+var TooltipTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+};
+var TooltipContent = ({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+			"data-slot": "tooltip-content",
+			className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
+		})
+	}) });
+};
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/ui/src/components/ui/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../../../../../ui/src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport const TooltipProvider = ({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) => {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delay={delay} {...props} />;\n};\n\nexport const Tooltip = ({ ...props }: TooltipPrimitive.Root.Props) => {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n};\n\nexport const TooltipTrigger = ({ ...props }: TooltipPrimitive.Trigger.Props) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n};\n\nexport const TooltipContent = ({\n  className,\n  side = 'top',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className=\"isolate z-50\">\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,mBAAmB,EAAE,QAAQ,GAAG,GAAG,YAA6C;CAC3F,OAAO,oBAAC,QAAiB,UAAlB;EAA2B,aAAU;EAA0B;EAAO,GAAI;CAAQ,CAAA;AAC3F;AAEA,IAAa,aAAW,EAAE,GAAG,YAAyC;CACpE,OAAO,oBAAC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,IAAa,kBAAkB,EAAE,GAAG,YAA4C;CAC9E,OAAO,oBAAC,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,IAAa,kBAAkB,EAC7B,WACA,OAAO,OACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,UACA,GAAG,YAC0H;CAC7H,OACE,oBAAC,QAAiB,QAAlB,EAAA,UACE,oBAAC,QAAiB,YAAlB;EAAoC;EAAoB;EAAmB;EAAkB;EAAY,WAAU;EACjH,UAAA,qBAAC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,mwBACA,8BACA,SACF;GACA,GAAI;GAPN,UAAA,CASG,UACD,oBAAC,QAAiB,OAAlB,EAAwB,WAAU,2hBAA4hB,CAAA,CACxiB;;CACG,CAAA,EACN,CAAA;AAE7B"}

package/dist/ui/src/hooks/use-media-player.js

@@ -0,0 +1,140 @@
+import * as React from "react";
+//#region ../ui/src/hooks/use-media-player.ts
+/** `0:00` for anything that is not a finite, non-negative number, so a loading or errored source still renders. */
+var formatMediaTime = (seconds) => {
+	if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+	const whole = Math.floor(seconds);
+	const hours = Math.floor(whole / 3600);
+	const minutes = Math.floor(whole % 3600 / 60);
+	const rest = whole % 60;
+	const padded = `${String(rest).padStart(2, "0")}`;
+	if (hours > 0) return `${hours}:${String(minutes).padStart(2, "0")}:${padded}`;
+	return `${minutes}:${padded}`;
+};
+/**
+* Shared playback engine for the Audio and Video players. Both wrap the same
+* HTMLMediaElement API, so the state machine lives here once and each component
+* owns only its own layout and controls.
+*/
+var useMediaPlayer = (options = {}) => {
+	const { onPlay, onPause, onEnded, onTimeUpdate } = options;
+	const refMedia = React.useRef(null);
+	const [state, setState] = React.useState({
+		playing: false,
+		currentTime: 0,
+		duration: 0,
+		volume: 1,
+		muted: false
+	});
+	React.useEffect(() => {
+		const media = refMedia.current;
+		if (!media) return;
+		const syncMeta = () => {
+			setState((previous) => ({
+				...previous,
+				duration: Number.isFinite(media.duration) ? media.duration : 0,
+				volume: media.volume,
+				muted: media.muted
+			}));
+		};
+		const handlePlay = () => {
+			setState((previous) => ({
+				...previous,
+				playing: true
+			}));
+			onPlay?.();
+		};
+		const handlePause = () => {
+			setState((previous) => ({
+				...previous,
+				playing: false
+			}));
+			onPause?.();
+		};
+		const handleEnded = () => {
+			setState((previous) => ({
+				...previous,
+				playing: false
+			}));
+			onEnded?.();
+		};
+		const handleTimeUpdate = () => {
+			setState((previous) => ({
+				...previous,
+				currentTime: media.currentTime
+			}));
+			onTimeUpdate?.(media.currentTime, Number.isFinite(media.duration) ? media.duration : 0);
+		};
+		const handleVolumeChange = () => {
+			setState((previous) => ({
+				...previous,
+				volume: media.volume,
+				muted: media.muted
+			}));
+		};
+		syncMeta();
+		media.addEventListener("loadedmetadata", syncMeta);
+		media.addEventListener("durationchange", syncMeta);
+		media.addEventListener("play", handlePlay);
+		media.addEventListener("pause", handlePause);
+		media.addEventListener("ended", handleEnded);
+		media.addEventListener("timeupdate", handleTimeUpdate);
+		media.addEventListener("volumechange", handleVolumeChange);
+		return () => {
+			media.removeEventListener("loadedmetadata", syncMeta);
+			media.removeEventListener("durationchange", syncMeta);
+			media.removeEventListener("play", handlePlay);
+			media.removeEventListener("pause", handlePause);
+			media.removeEventListener("ended", handleEnded);
+			media.removeEventListener("timeupdate", handleTimeUpdate);
+			media.removeEventListener("volumechange", handleVolumeChange);
+		};
+	}, [
+		onPlay,
+		onPause,
+		onEnded,
+		onTimeUpdate
+	]);
+	const toggle = React.useCallback(() => {
+		const media = refMedia.current;
+		if (!media) return;
+		if (media.paused) {
+			media.play().catch(() => void 0);
+			return;
+		}
+		media.pause();
+	}, []);
+	const seek = React.useCallback((seconds) => {
+		const media = refMedia.current;
+		if (!media || !Number.isFinite(seconds)) return;
+		media.currentTime = seconds;
+		setState((previous) => ({
+			...previous,
+			currentTime: seconds
+		}));
+	}, []);
+	const changeVolume = React.useCallback((volume) => {
+		const media = refMedia.current;
+		if (!media || !Number.isFinite(volume)) return;
+		const next = Math.min(1, Math.max(0, volume));
+		media.volume = next;
+		media.muted = next === 0;
+	}, []);
+	const toggleMute = React.useCallback(() => {
+		const media = refMedia.current;
+		if (!media) return;
+		media.muted = !media.muted;
+	}, []);
+	return {
+		...state,
+		refMedia,
+		toggle,
+		seek,
+		changeVolume,
+		toggleMute
+	};
+};
+//#endregion
+export { formatMediaTime, useMediaPlayer };
+
+//# sourceMappingURL=use-media-player.js.map

package/dist/ui/src/hooks/use-media-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-player.js","names":[],"sources":["../../../../../ui/src/hooks/use-media-player.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface IMediaPlayerState {\n  playing: boolean;\n  currentTime: number;\n  duration: number;\n  volume: number;\n  muted: boolean;\n}\n\nexport interface IUseMediaPlayerOptions {\n  onPlay?: () => void;\n  onPause?: () => void;\n  onEnded?: () => void;\n  onTimeUpdate?: (currentTime: number, duration: number) => void;\n}\n\nexport interface IUseMediaPlayerResult<TElement extends HTMLMediaElement> extends IMediaPlayerState {\n  refMedia: React.RefObject<TElement | null>;\n  toggle: () => void;\n  seek: (seconds: number) => void;\n  changeVolume: (volume: number) => void;\n  toggleMute: () => void;\n}\n\n/** `0:00` for anything that is not a finite, non-negative number, so a loading or errored source still renders. */\nexport const formatMediaTime = (seconds: number): string => {\n  if (!Number.isFinite(seconds) || seconds < 0) {\n    return '0:00';\n  }\n  const whole = Math.floor(seconds);\n  const hours = Math.floor(whole / 3600);\n  const minutes = Math.floor((whole % 3600) / 60);\n  const rest = whole % 60;\n  const padded = `${String(rest).padStart(2, '0')}`;\n  if (hours > 0) {\n    return `${hours}:${String(minutes).padStart(2, '0')}:${padded}`;\n  }\n  return `${minutes}:${padded}`;\n};\n\n/**\n * Shared playback engine for the Audio and Video players. Both wrap the same\n * HTMLMediaElement API, so the state machine lives here once and each component\n * owns only its own layout and controls.\n */\nexport const useMediaPlayer = <TElement extends HTMLMediaElement>(options: IUseMediaPlayerOptions = {}): IUseMediaPlayerResult<TElement> => {\n  const { onPlay, onPause, onEnded, onTimeUpdate } = options;\n  const refMedia = React.useRef<TElement | null>(null);\n  const [state, setState] = React.useState<IMediaPlayerState>({\n    playing: false,\n    currentTime: 0,\n    duration: 0,\n    volume: 1,\n    muted: false,\n  });\n\n  React.useEffect(() => {\n    const media = refMedia.current;\n    if (!media) {\n      return;\n    }\n\n    const syncMeta = () => {\n      setState((previous) => ({\n        ...previous,\n        duration: Number.isFinite(media.duration) ? media.duration : 0,\n        volume: media.volume,\n        muted: media.muted,\n      }));\n    };\n    const handlePlay = () => {\n      setState((previous) => ({ ...previous, playing: true }));\n      onPlay?.();\n    };\n    const handlePause = () => {\n      setState((previous) => ({ ...previous, playing: false }));\n      onPause?.();\n    };\n    const handleEnded = () => {\n      setState((previous) => ({ ...previous, playing: false }));\n      onEnded?.();\n    };\n    const handleTimeUpdate = () => {\n      setState((previous) => ({ ...previous, currentTime: media.currentTime }));\n      onTimeUpdate?.(media.currentTime, Number.isFinite(media.duration) ? media.duration : 0);\n    };\n    const handleVolumeChange = () => {\n      setState((previous) => ({ ...previous, volume: media.volume, muted: media.muted }));\n    };\n\n    syncMeta();\n    media.addEventListener('loadedmetadata', syncMeta);\n    media.addEventListener('durationchange', syncMeta);\n    media.addEventListener('play', handlePlay);\n    media.addEventListener('pause', handlePause);\n    media.addEventListener('ended', handleEnded);\n    media.addEventListener('timeupdate', handleTimeUpdate);\n    media.addEventListener('volumechange', handleVolumeChange);\n\n    return () => {\n      media.removeEventListener('loadedmetadata', syncMeta);\n      media.removeEventListener('durationchange', syncMeta);\n      media.removeEventListener('play', handlePlay);\n      media.removeEventListener('pause', handlePause);\n      media.removeEventListener('ended', handleEnded);\n      media.removeEventListener('timeupdate', handleTimeUpdate);\n      media.removeEventListener('volumechange', handleVolumeChange);\n    };\n  }, [onPlay, onPause, onEnded, onTimeUpdate]);\n\n  const toggle = React.useCallback(() => {\n    const media = refMedia.current;\n    if (!media) {\n      return;\n    }\n    if (media.paused) {\n      // Autoplay policies reject this when the gesture is not trusted; the pause\n      // state is already correct, so swallowing keeps the UI truthful.\n      void media.play().catch(() => undefined);\n      return;\n    }\n    media.pause();\n  }, []);\n\n  const seek = React.useCallback((seconds: number) => {\n    const media = refMedia.current;\n    if (!media || !Number.isFinite(seconds)) {\n      return;\n    }\n    media.currentTime = seconds;\n    setState((previous) => ({ ...previous, currentTime: seconds }));\n  }, []);\n\n  const changeVolume = React.useCallback((volume: number) => {\n    const media = refMedia.current;\n    if (!media || !Number.isFinite(volume)) {\n      return;\n    }\n    const next = Math.min(1, Math.max(0, volume));\n    media.volume = next;\n    media.muted = next === 0;\n  }, []);\n\n  const toggleMute = React.useCallback(() => {\n    const media = refMedia.current;\n    if (!media) {\n      return;\n    }\n    media.muted = !media.muted;\n  }, []);\n\n  return { ...state, refMedia, toggle, seek, changeVolume, toggleMute };\n};\n"],"mappings":"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"}

package/dist/ui/src/hooks/use-merged-refs.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+//#region ../ui/src/hooks/use-merged-refs.ts
+var assignRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref !== null) ref.current = value;
+};
+var mergeRefs = (...refs) => {
+	return (node) => {
+		for (const ref of refs) if (ref) assignRef(ref, node);
+	};
+};
+var useMergedRefs = (...refs) => {
+	return useCallback(mergeRefs(...refs), [...refs]);
+};
+//#endregion
+export { useMergedRefs };
+
+//# sourceMappingURL=use-merged-refs.js.map

package/dist/ui/src/hooks/use-merged-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-merged-refs.js","names":[],"sources":["../../../../../ui/src/hooks/use-merged-refs.ts"],"sourcesContent":["import { type Ref, type RefCallback, useCallback } from 'react';\n\ntype TPossibleRef<T> = Ref<T> | undefined;\n\nconst assignRef = <T>(ref: TPossibleRef<T>, value: T) => {\n  if (typeof ref === 'function') {\n    ref(value);\n  } else if (ref !== null) {\n    // Using type assertion to RefObject since we know it's not null\n    (ref as { current: T }).current = value;\n  }\n};\n\nconst mergeRefs = <T>(...refs: TPossibleRef<T>[]) => {\n  return (node: T) => {\n    for (const ref of refs) {\n      if (ref) {\n        assignRef(ref, node);\n      }\n    }\n  };\n};\n\nexport const useMergedRefs = <T>(...refs: TPossibleRef<T>[]) => {\n  return useCallback(mergeRefs(...refs), [...refs]) as RefCallback<T>;\n};\n"],"mappings":";;AAIA,IAAM,aAAgB,KAAsB,UAAa;CACvD,IAAI,OAAO,QAAQ,YACjB,IAAI,KAAK;MACJ,IAAI,QAAQ,MAEjB,IAAwB,UAAU;AAEtC;AAEA,IAAM,aAAgB,GAAG,SAA4B;CACnD,QAAQ,SAAY;EAClB,KAAK,MAAM,OAAO,MAChB,IAAI,KACF,UAAU,KAAK,IAAI;CAGzB;AACF;AAEA,IAAa,iBAAoB,GAAG,SAA4B;CAC9D,OAAO,YAAY,UAAU,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AAClD"}

package/dist/ui/src/hooks/use-mobile.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+//#region ../ui/src/hooks/use-mobile.ts
+var MOBILE_BREAKPOINT = 768;
+var useIsMobile = () => {
+	const [isMobile, setIsMobile] = React.useState(void 0);
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: 767px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+	return !!isMobile;
+};
+//#endregion
+export { useIsMobile };
+
+//# sourceMappingURL=use-mobile.js.map

package/dist/ui/src/hooks/use-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.js","names":[],"sources":["../../../../../ui/src/hooks/use-mobile.ts"],"sourcesContent":["import * as React from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport const useIsMobile = () => {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  return !!isMobile;\n};\n"],"mappings":";;AAEA,IAAM,oBAAoB;AAE1B,IAAa,oBAAoB;CAC/B,MAAM,CAAC,UAAU,eAAe,MAAM,SAA8B,KAAA,CAAS;CAE7E,MAAM,gBAAgB;EACpB,MAAM,MAAM,OAAO,WAAW,oBAAyC;EACvE,MAAM,iBAAiB;GACrB,YAAY,OAAO,aAAa,iBAAiB;EACnD;EACA,IAAI,iBAAiB,UAAU,QAAQ;EACvC,YAAY,OAAO,aAAa,iBAAiB;EACjD,aAAa,IAAI,oBAAoB,UAAU,QAAQ;CACzD,GAAG,CAAC,CAAC;CAEL,OAAO,CAAC,CAAC;AACX"}

package/dist/ui/src/lib/first-weekday.js

@@ -0,0 +1,34 @@
+//#region ../ui/src/lib/first-weekday.ts
+var SUNDAY_FIRST = /* @__PURE__ */ new Set([
+	"US",
+	"CA",
+	"MX",
+	"BR",
+	"JP",
+	"IL",
+	"IN",
+	"PH",
+	"ZA",
+	"KR",
+	"TW",
+	"HK",
+	"SA"
+]);
+/**
+* The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on
+* Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.
+*/
+var firstWeekdayOf = (locale) => {
+	try {
+		const info = new Intl.Locale(locale);
+		const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
+		if (first !== void 0) return first % 7;
+		return SUNDAY_FIRST.has(info.region ?? "") ? 0 : 1;
+	} catch {
+		return 0;
+	}
+};
+//#endregion
+export { firstWeekdayOf };
+
+//# sourceMappingURL=first-weekday.js.map

package/dist/ui/src/lib/first-weekday.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"first-weekday.js","names":[],"sources":["../../../../../ui/src/lib/first-weekday.ts"],"sourcesContent":["export type TWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n// Regions whose week starts on a Sunday, for a browser that cannot say (Intl week info is not everywhere yet).\nconst SUNDAY_FIRST = new Set(['US', 'CA', 'MX', 'BR', 'JP', 'IL', 'IN', 'PH', 'ZA', 'KR', 'TW', 'HK', 'SA']);\n\n/**\n * The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on\n * Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.\n */\nexport const firstWeekdayOf = (locale: string): TWeekday => {\n  try {\n    const info = new Intl.Locale(locale) as Intl.Locale & { getWeekInfo?: () => { firstDay: number }; weekInfo?: { firstDay: number } };\n    const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;\n    if (first !== undefined) {\n      // Intl counts Monday as 1 to Sunday as 7; the calendar counts Sunday as 0.\n      return (first % 7) as TWeekday;\n    }\n    return SUNDAY_FIRST.has(info.region ?? '') ? 0 : 1;\n  } catch {\n    return 0;\n  }\n};\n"],"mappings":";AAGA,IAAM,+BAAe,IAAI,IAAI;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI,CAAC;;;;;AAM3G,IAAa,kBAAkB,WAA6B;CAC1D,IAAI;EACF,MAAM,OAAO,IAAI,KAAK,OAAO,MAAM;EACnC,MAAM,QAAQ,KAAK,cAAc,CAAC,CAAC,YAAY,KAAK,UAAU;EAC9D,IAAI,UAAU,KAAA,GAEZ,OAAQ,QAAQ;EAElB,OAAO,aAAa,IAAI,KAAK,UAAU,EAAE,IAAI,IAAI;CACnD,QAAQ;EACN,OAAO;CACT;AACF"}

package/dist/ui/src/lib/popup-list.js

@@ -0,0 +1,26 @@
+import { cn } from "./utils.js";
+//#region ../ui/src/lib/popup-list.ts
+var ITEM_BASE = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none select-none [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg:not([class*='size-'])]:size-4";
+var ITEM_STATES = {
+	"base-ui": "data-highlighted:bg-foreground/6 data-highlighted:[&>svg]:text-foreground data-[selected]:font-medium data-disabled:pointer-events-none data-disabled:opacity-50",
+	cmdk: "data-[selected=true]:bg-foreground/6 data-[selected=true]:[&>svg]:text-foreground data-[checked=true]:font-medium data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+};
+/** The shared item look. `checkable` leaves room at the end for the check. */
+var popupItemClass = (flavor = "base-ui", checkable = false) => cn(ITEM_BASE, ITEM_STATES[flavor], checkable && "pr-8");
+/**
+* The check's slot, at the end of the item and the same size whether or not the
+* check is in it, so a list does not shift as the choice moves.
+*/
+var POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground";
+/** A group's heading in any of these lists. */
+var POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
+/**
+* How wide a combobox's list is: never narrower than the control it opens from, and as wide as its longest option up to
+* 28rem or what the window leaves from the control's start (the list is aligned to that start), whichever is less. A
+* control wider than that cap keeps its own width. Longer options are cut by their item, they do not widen the list.
+*/
+var POPUP_LIST_WIDTH_CLASS = "min-w-(--anchor-width) max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]";
+//#endregion
+export { POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass };
+
+//# sourceMappingURL=popup-list.js.map

package/dist/ui/src/lib/popup-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-list.js","names":[],"sources":["../../../../../ui/src/lib/popup-list.ts"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\n\n/**\n * The one look for a list in a popup or a menu: the command palette, Select,\n * Combobox, MultiSelect and the dropdown menus.\n *\n * These lists used to disagree with each other in every detail that shows:\n * three different radii, two different paddings, a grey fill for the highlight\n * in one and the accent in another, and the chosen item marked by a check on\n * the left in Select and on the right in the menus. Picking something from one\n * list then felt like a different product from picking something in the next.\n *\n * It lives here as classes rather than as a stylesheet so a caller's own\n * className still wins: an unlayered rule would beat every utility, including\n * the one someone passes for a single list.\n *\n * ONE ITEM: transparent at rest, 32px tall, 6px radius (--radius-sm), 6px by\n * 8px of padding, text-sm, its own icons 16px and muted. Under the pointer or\n * the keyboard it takes one translucent fill of the text colour, and its icons\n * the text colour. Chosen is medium weight with a check at the END, never a\n * fill, so \"where I am\" and \"what I picked\" can be told apart at a glance.\n */\n\n/**\n * Which primitive renders the item, because the two disagree about the same\n * attribute names in a way that silently breaks the styling:\n *\n * - cmdk writes `data-selected=\"false\"` and `data-disabled=\"false\"` on items\n *   that are neither, so a bare `data-selected:` variant matches EVERY item and\n *   highlights the whole list. Its states have to be matched by value.\n * - Base UI omits the attribute instead, so presence is the test there. That\n *   needs the BRACKET form for `selected`: shadcn redefines the bare\n *   `data-selected:` variant to match only data-selected=\"true\" (for the\n *   calendar), and Base UI writes it as an empty string, so the bare form\n *   compiles and silently never applies. `highlighted` and `disabled` have no\n *   such override, so those stay bare.\n * - And the same name means different things: cmdk's `data-selected` is the\n *   keyboard cursor, Base UI's is the chosen value. In cmdk the chosen state is\n *   `data-checked`, which the DS's own CommandItem sets.\n */\nexport type TPopupItemFlavor = 'base-ui' | 'cmdk';\n\nconst ITEM_BASE =\n  \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none select-none [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg:not([class*='size-'])]:size-4\";\n\nconst ITEM_STATES: Record<TPopupItemFlavor, string> = {\n  'base-ui':\n    'data-highlighted:bg-foreground/6 data-highlighted:[&>svg]:text-foreground data-[selected]:font-medium data-disabled:pointer-events-none data-disabled:opacity-50',\n  cmdk: 'data-[selected=true]:bg-foreground/6 data-[selected=true]:[&>svg]:text-foreground data-[checked=true]:font-medium data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n};\n\n/** The shared item look. `checkable` leaves room at the end for the check. */\nexport const popupItemClass = (flavor: TPopupItemFlavor = 'base-ui', checkable = false): string =>\n  cn(ITEM_BASE, ITEM_STATES[flavor], checkable && 'pr-8');\n\n/**\n * The check's slot, at the end of the item and the same size whether or not the\n * check is in it, so a list does not shift as the choice moves.\n */\nexport const POPUP_ITEM_INDICATOR_CLASS = 'pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground';\n\n/** A group's heading in any of these lists. */\nexport const POPUP_GROUP_LABEL_CLASS = 'px-2 py-1.5 text-xs font-medium text-muted-foreground';\n\n/**\n * How wide a combobox's list is: never narrower than the control it opens from, and as wide as its longest option up to\n * 28rem or what the window leaves from the control's start (the list is aligned to that start), whichever is less. A\n * control wider than that cap keeps its own width. Longer options are cut by their item, they do not widen the list.\n */\nexport const POPUP_LIST_WIDTH_CLASS = 'min-w-(--anchor-width) max-w-[max(var(--anchor-width),min(28rem,var(--available-width)))]';\n"],"mappings":";;AA0CA,IAAM,YACJ;AAEF,IAAM,cAAgD;CACpD,WACE;CACF,MAAM;AACR;;AAGA,IAAa,kBAAkB,SAA2B,WAAW,YAAY,UAC/E,GAAG,WAAW,YAAY,SAAS,aAAa,MAAM;;;;;AAMxD,IAAa,6BAA6B;;AAG1C,IAAa,0BAA0B;;;;;;AAOvC,IAAa,yBAAyB"}

package/dist/ui/src/lib/utils.js

@@ -0,0 +1,21 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region ../ui/src/lib/utils.ts
+var cn = (...inputs) => twMerge(clsx(inputs));
+/**
+* Normalise a size prop to a CSS length.
+*
+* Bare numbers become px, which is also what a bare numeric *string* means: an
+* element attribute arrives as a string, so `width="480"` and `width={480}` have
+* to land on the same value. Anything with a unit, a percentage or a keyword
+* passes through untouched.
+*/
+var cssLength = (value) => {
+	if (value == null || value === "") return;
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+	return /^-?\d*\.?\d+$/.test(value.trim()) ? `${value.trim()}px` : value;
+};
+//#endregion
+export { cn, cssLength };
+
+//# sourceMappingURL=utils.js.map

package/dist/ui/src/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../../ui/src/lib/utils.ts"],"sourcesContent":["import type { ClassValue } from 'clsx';\nimport { clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\n/** A CSS length as a component prop: a number is px, a string is used verbatim. */\nexport type TCssLength = number | string;\n\n/**\n * Normalise a size prop to a CSS length.\n *\n * Bare numbers become px, which is also what a bare numeric *string* means: an\n * element attribute arrives as a string, so `width=\"480\"` and `width={480}` have\n * to land on the same value. Anything with a unit, a percentage or a keyword\n * passes through untouched.\n */\nexport const cssLength = (value: TCssLength | null | undefined): string | undefined => {\n  if (value == null || value === '') {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return Number.isFinite(value) ? `${value}px` : undefined;\n  }\n\n  return /^-?\\d*\\.?\\d+$/.test(value.trim()) ? `${value.trim()}px` : value;\n};\n"],"mappings":";;;AAIA,IAAa,MAAM,GAAG,WAAiC,QAAQ,KAAK,MAAM,CAAC;;;;;;;;;AAa3E,IAAa,aAAa,UAA6D;CACrF,IAAI,SAAS,QAAQ,UAAU,IAC7B;CAGF,IAAI,OAAO,UAAU,UACnB,OAAO,OAAO,SAAS,KAAK,IAAI,GAAG,MAAM,MAAM,KAAA;CAGjD,OAAO,gBAAgB,KAAK,MAAM,KAAK,CAAC,IAAI,GAAG,MAAM,KAAK,EAAE,MAAM;AACpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.13",
+  "version": "0.0.1-rc.14",
   "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [

package/dist/chunks/date-range-picker-CWVcHgy2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-range-picker-CWVcHgy2.js","names":[],"sources":["../../../ui/src/components/ui/calendar/calendar.tsx","../../../ui/src/hooks/use-mobile.ts","../../../ui/src/lib/first-weekday.ts","../../../ui/src/components/edyn/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconChevronDown, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';\nimport * as React from 'react';\nimport { type DayButton, DayPicker, getDefaultClassNames, type Locale } from 'react-day-picker';\nimport { Button, buttonVariants } from '../button';\n\nexport const Calendar = ({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = 'label',\n  buttonVariant = 'ghost',\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>['variant'];\n}) => {\n  const defaultClassNames = getDefaultClassNames();\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn('w-fit', defaultClassNames.root),\n        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),\n        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n        nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)', defaultClassNames.month_caption),\n        dropdowns: cn('flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium', defaultClassNames.dropdowns),\n        dropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),\n        dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),\n        caption_label: cn(\n          'font-medium select-none',\n          captionLayout === 'label'\n            ? 'text-sm'\n            : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n          defaultClassNames.caption_label,\n        ),\n        month_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n        weekdays: cn('flex', defaultClassNames.weekdays),\n        weekday: cn('flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none', defaultClassNames.weekday),\n        week: cn('mt-2 flex w-full', defaultClassNames.week),\n        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),\n        week_number: cn('text-[0.8rem] text-muted-foreground select-none', defaultClassNames.week_number),\n        day: cn(\n          'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',\n          props.showWeekNumber\n            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'\n            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',\n          defaultClassNames.day,\n        ),\n        range_start: cn(\n          'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',\n          defaultClassNames.range_start,\n        ),\n        range_middle: cn('rounded-none', defaultClassNames.range_middle),\n        range_end: cn(\n          'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',\n          defaultClassNames.range_end,\n        ),\n        today: cn('rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none', defaultClassNames.today),\n        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),\n        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),\n        hidden: cn('invisible', defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === 'left') {\n            return <IconChevronLeft className={cn('size-4', className)} {...props} />;\n          }\n\n          if (orientation === 'right') {\n            return <IconChevronRight className={cn('size-4', className)} {...props} />;\n          }\n\n          return <IconChevronDown className={cn('size-4', className)} {...props} />;\n        },\n        DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">{children}</div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n};\n\nexport const CalendarDayButton = ({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) => {\n  const defaultClassNames = getDefaultClassNames();\n\n  const refButton = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) {\n      refButton.current?.focus();\n    }\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={refButton}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle}\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import * as React from 'react';\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport const useIsMobile = () => {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener('change', onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener('change', onChange);\n  }, []);\n\n  return !!isMobile;\n};\n","export type TWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n// Regions whose week starts on a Sunday, for a browser that cannot say (Intl week info is not everywhere yet).\nconst SUNDAY_FIRST = new Set(['US', 'CA', 'MX', 'BR', 'JP', 'IL', 'IN', 'PH', 'ZA', 'KR', 'TW', 'HK', 'SA']);\n\n/**\n * The weekday a locale starts its week on, 0 for Sunday to 6 for Saturday, from Intl, so en-GB starts on Monday and en-US on\n * Sunday with no locale data of our own shipped. A browser without week info gets the region's usual start.\n */\nexport const firstWeekdayOf = (locale: string): TWeekday => {\n  try {\n    const info = new Intl.Locale(locale) as Intl.Locale & { getWeekInfo?: () => { firstDay: number }; weekInfo?: { firstDay: number } };\n    const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;\n    if (first !== undefined) {\n      // Intl counts Monday as 1 to Sunday as 7; the calendar counts Sunday as 0.\n      return (first % 7) as TWeekday;\n    }\n    return SUNDAY_FIRST.has(info.region ?? '') ? 0 : 1;\n  } catch {\n    return 0;\n  }\n};\n","import { Button } from '@edyn/ui/components/ui/button';\nimport { Calendar } from '@edyn/ui/components/ui/calendar';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { useIsMobile } from '@edyn/ui/hooks/use-mobile';\nimport { firstWeekdayOf } from '@edyn/ui/lib/first-weekday';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCalendar } from '@tabler/icons-react';\nimport type { ComponentPropsWithoutRef } from 'react';\n\n/** A range of calendar days as yyyy-mm-dd, either end optional. */\nexport type TDateRange = { from?: string; to?: string };\n\n// A calendar day is read and written at midday local time, so no time zone or daylight\n// saving change can move it onto the day before or after.\nexport const dayToDate = (value: string | undefined): Date | undefined => (value === undefined ? undefined : new Date(`${value}T12:00:00`));\n\nexport const dateToDay = (date: Date | undefined): string | undefined =>\n  date === undefined ? undefined : `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;\n\n/** Anything else a button takes (data-*, aria-*, title) goes to the trigger. */\nexport interface IDateRangePickerProps\n  extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'defaultValue' | 'placeholder' | 'id' | 'className' | 'children' | 'onChange' | 'type'> {\n  id?: string;\n  value: TDateRange;\n  onValueChange: (value: TDateRange) => void;\n  placeholder?: string;\n  /**\n   * What the trigger says once a range is set. `range` (default) writes the ends; `label` keeps the label, so a\n   * range the page shows elsewhere (as a removable chip, say) is not repeated here. In both, the trigger carries\n   * `data-set` while either end is set, for a look of its own.\n   */\n  summary?: 'range' | 'label';\n  /** How the ends are written on the trigger, and which weekday the calendar starts on (BCP 47); en-GB reads 05 Mar 2026 and starts on Monday. */\n  locale?: string;\n  /** An accessible name for the trigger, when there is no visible label to point at. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** A range of calendar days, either end optional; two months side by side, one on a phone. */\nexport const DateRangePicker = ({\n  id,\n  value,\n  onValueChange,\n  placeholder = 'Select date range',\n  locale = 'en-GB',\n  summary = 'range',\n  'aria-label': ariaLabel,\n  className,\n  ...props\n}: IDateRangePickerProps) => {\n  const isMobile = useIsMobile();\n  const from = dayToDate(value.from);\n  const to = dayToDate(value.to);\n  const format = new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'short', year: 'numeric' });\n  const ends = [from, to].filter((date) => date !== undefined).map((date) => format.format(date));\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={\n          <Button\n            {...props}\n            id={id}\n            aria-label={ariaLabel}\n            data-slot=\"date-range-picker-trigger\"\n            data-set={ends.length > 0 ? '' : undefined}\n            variant=\"outline\"\n            className={cn('w-full min-w-0 justify-start font-normal', ends.length === 0 && 'text-muted-foreground', className)}\n          />\n        }\n      >\n        <IconCalendar aria-hidden=\"true\" />\n        <span className=\"truncate\">{ends.length === 0 || summary === 'label' ? placeholder : ends.join(' – ')}</span>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-auto p-0\">\n        <Calendar\n          mode=\"range\"\n          defaultMonth={from}\n          numberOfMonths={isMobile ? 1 : 2}\n          weekStartsOn={firstWeekdayOf(locale)}\n          selected={{ from, to }}\n          onSelect={(range) => onValueChange({ from: dateToDay(range?.from), to: dateToDay(range?.to) })}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,YAAY,EACvB,WACA,YACA,kBAAkB,MAClB,gBAAgB,SAChB,gBAAgB,SAChB,QACA,YACA,YACA,GAAG,YAGC;CACJ,MAAM,oBAAoB,qBAAqB;CAE/C,OACE,oBAAC,WAAD;EACmB;EACjB,WAAW,GACT,yLACA,OAAO,GAAG,6CACV,OAAO,GAAG,iDACV,SACF;EACe;EACP;EACR,YAAY;GACV,sBAAsB,SAAS,KAAK,eAAe,QAAQ,MAAM,EAAE,OAAO,QAAQ,CAAC;GACnF,GAAG;EACL;EACA,YAAY;GACV,MAAM,GAAG,SAAS,kBAAkB,IAAI;GACxC,QAAQ,GAAG,4CAA4C,kBAAkB,MAAM;GAC/E,OAAO,GAAG,8BAA8B,kBAAkB,KAAK;GAC/D,KAAK,GAAG,2EAA2E,kBAAkB,GAAG;GACxG,iBAAiB,GACf,eAAe,EAAE,SAAS,cAAc,CAAC,GACzC,+DACA,kBAAkB,eACpB;GACA,aAAa,GACX,eAAe,EAAE,SAAS,cAAc,CAAC,GACzC,+DACA,kBAAkB,WACpB;GACA,eAAe,GAAG,4EAA4E,kBAAkB,aAAa;GAC7H,WAAW,GAAG,uFAAuF,kBAAkB,SAAS;GAChI,eAAe,GAAG,oCAAoC,kBAAkB,aAAa;GACrF,UAAU,GAAG,yCAAyC,kBAAkB,QAAQ;GAChF,eAAe,GACb,2BACA,kBAAkB,UACd,YACA,0GACJ,kBAAkB,aACpB;GACA,YAAY,GAAG,0BAA0B,kBAAkB,UAAU;GACrE,UAAU,GAAG,QAAQ,kBAAkB,QAAQ;GAC/C,SAAS,GAAG,8FAA8F,kBAAkB,OAAO;GACnI,MAAM,GAAG,oBAAoB,kBAAkB,IAAI;GACnD,oBAAoB,GAAG,+BAA+B,kBAAkB,kBAAkB;GAC1F,aAAa,GAAG,mDAAmD,kBAAkB,WAAW;GAChG,KAAK,GACH,0KACA,MAAM,iBACF,0EACA,wEACJ,kBAAkB,GACpB;GACA,aAAa,GACX,iIACA,kBAAkB,WACpB;GACA,cAAc,GAAG,gBAAgB,kBAAkB,YAAY;GAC/D,WAAW,GACT,gIACA,kBAAkB,SACpB;GACA,OAAO,GAAG,sFAAsF,kBAAkB,KAAK;GACvH,SAAS,GAAG,6DAA6D,kBAAkB,OAAO;GAClG,UAAU,GAAG,oCAAoC,kBAAkB,QAAQ;GAC3E,QAAQ,GAAG,aAAa,kBAAkB,MAAM;GAChD,GAAG;EACL;EACA,YAAY;GACV,OAAO,EAAE,WAAW,SAAS,GAAG,YAAY;IAC1C,OAAO,oBAAC,OAAD;KAAK,aAAU;KAAW,KAAK;KAAS,WAAW,GAAG,SAAS;KAAG,GAAI;IAAQ,CAAA;GACvF;GACA,UAAU,EAAE,WAAW,aAAa,GAAG,YAAY;IACjD,IAAI,gBAAgB,QAClB,OAAO,oBAAC,iBAAD;KAAiB,WAAW,GAAG,UAAU,SAAS;KAAG,GAAI;IAAQ,CAAA;IAG1E,IAAI,gBAAgB,SAClB,OAAO,oBAAC,kBAAD;KAAkB,WAAW,GAAG,UAAU,SAAS;KAAG,GAAI;IAAQ,CAAA;IAG3E,OAAO,oBAAC,iBAAD;KAAiB,WAAW,GAAG,UAAU,SAAS;KAAG,GAAI;IAAQ,CAAA;GAC1E;GACA,YAAY,EAAE,GAAG,YAAY,oBAAC,mBAAD;IAA2B;IAAQ,GAAI;GAAQ,CAAA;GAC5E,aAAa,EAAE,UAAU,GAAG,YAAY;IACtC,OACE,oBAAC,MAAD;KAAI,GAAI;KACN,UAAA,oBAAC,OAAD;MAAK,WAAU;MAAmE;KAAc,CAAA;IAC9F,CAAA;GAER;GACA,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAChC,WACA,KACA,WACA,QACA,GAAG,YACwE;CAC3E,MAAM,oBAAoB,qBAAqB;CAE/C,MAAM,YAAY,MAAM,OAA0B,IAAI;CACtD,MAAM,gBAAgB;EACpB,IAAI,UAAU,SACZ,UAAU,SAAS,MAAM;CAE7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,OACE,oBAAC,QAAD;EACE,KAAK;EACL,SAAQ;EACR,MAAK;EACL,YAAU,IAAI,KAAK,mBAAmB,QAAQ,IAAI;EAClD,wBAAsB,UAAU,YAAY,CAAC,UAAU,eAAe,CAAC,UAAU,aAAa,CAAC,UAAU;EACzG,oBAAkB,UAAU;EAC5B,kBAAgB,UAAU;EAC1B,qBAAmB,UAAU;EAC7B,WAAW,GACT,w7BACA,kBAAkB,KAClB,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;ACxJA,IAAM,oBAAoB;AAE1B,IAAa,oBAAoB;CAC/B,MAAM,CAAC,UAAU,eAAe,MAAM,SAA8B,KAAA,CAAS;CAE7E,MAAM,gBAAgB;EACpB,MAAM,MAAM,OAAO,WAAW,oBAAyC;EACvE,MAAM,iBAAiB;GACrB,YAAY,OAAO,aAAa,iBAAiB;EACnD;EACA,IAAI,iBAAiB,UAAU,QAAQ;EACvC,YAAY,OAAO,aAAa,iBAAiB;EACjD,aAAa,IAAI,oBAAoB,UAAU,QAAQ;CACzD,GAAG,CAAC,CAAC;CAEL,OAAO,CAAC,CAAC;AACX;;;ACfA,IAAM,+BAAe,IAAI,IAAI;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI,CAAC;;;;;AAM3G,IAAa,kBAAkB,WAA6B;CAC1D,IAAI;EACF,MAAM,OAAO,IAAI,KAAK,OAAO,MAAM;EACnC,MAAM,QAAQ,KAAK,cAAc,CAAC,CAAC,YAAY,KAAK,UAAU;EAC9D,IAAI,UAAU,KAAA,GAEZ,OAAQ,QAAQ;EAElB,OAAO,aAAa,IAAI,KAAK,UAAU,EAAE,IAAI,IAAI;CACnD,QAAQ;EACN,OAAO;CACT;AACF;;;ACPA,IAAa,aAAa,UAAiD,UAAU,KAAA,IAAY,KAAA,oBAAY,IAAI,KAAK,GAAG,MAAM,UAAU;AAEzI,IAAa,aAAa,SACxB,SAAS,KAAA,IAAY,KAAA,IAAY,GAAG,KAAK,YAAY,EAAE,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG;;AAuBlJ,IAAa,mBAAmB,EAC9B,IACA,OACA,eACA,cAAc,qBACd,SAAS,SACT,UAAU,SACV,cAAc,WACd,WACA,GAAG,YACwB;CAC3B,MAAM,WAAW,YAAY;CAC7B,MAAM,OAAO,UAAU,MAAM,IAAI;CACjC,MAAM,KAAK,UAAU,MAAM,EAAE;CAC7B,MAAM,SAAS,IAAI,KAAK,eAAe,QAAQ;EAAE,KAAK;EAAW,OAAO;EAAS,MAAM;CAAU,CAAC;CAClG,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,SAAS,SAAS,KAAA,CAAS,CAAC,CAAC,KAAK,SAAS,OAAO,OAAO,IAAI,CAAC;CAC9F,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,qBAAC,gBAAD;EACE,QACE,oBAAC,QAAD;GACE,GAAI;GACA;GACJ,cAAY;GACZ,aAAU;GACV,YAAU,KAAK,SAAS,IAAI,KAAK,KAAA;GACjC,SAAQ;GACR,WAAW,GAAG,4CAA4C,KAAK,WAAW,KAAK,yBAAyB,SAAS;EAClH,CAAA;EAVL,UAAA,CAaE,oBAAC,cAAD,EAAc,eAAY,OAAQ,CAAA,GAClC,oBAAC,QAAD;GAAM,WAAU;GAAY,UAAA,KAAK,WAAW,KAAK,YAAY,UAAU,cAAc,KAAK,KAAK,KAAK;EAAQ,CAAA,CAC9F;CAChB,CAAA,GAAA,oBAAC,gBAAD;EAAgB,OAAM;EAAQ,WAAU;EACtC,UAAA,oBAAC,UAAD;GACE,MAAK;GACL,cAAc;GACd,gBAAgB,WAAW,IAAI;GAC/B,cAAc,eAAe,MAAM;GACnC,UAAU;IAAE;IAAM;GAAG;GACrB,WAAW,UAAU,cAAc;IAAE,MAAM,UAAU,OAAO,IAAI;IAAG,IAAI,UAAU,OAAO,EAAE;GAAE,CAAC;EAC9F,CAAA;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/chunks/input-syWxjY2U.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-syWxjY2U.js","names":[],"sources":["../../../ui/src/lib/utils.ts","../../../ui/src/components/ui/button/button.tsx","../../../ui/src/components/ui/popover/popover.tsx","../../../ui/src/components/ui/input/input.tsx"],"sourcesContent":["import type { ClassValue } from 'clsx';\nimport { clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));\n\n/** A CSS length as a component prop: a number is px, a string is used verbatim. */\nexport type TCssLength = number | string;\n\n/**\n * Normalise a size prop to a CSS length.\n *\n * Bare numbers become px, which is also what a bare numeric *string* means: an\n * element attribute arrives as a string, so `width=\"480\"` and `width={480}` have\n * to land on the same value. Anything with a unit, a percentage or a keyword\n * passes through untouched.\n */\nexport const cssLength = (value: TCssLength | null | undefined): string | undefined => {\n  if (value == null || value === '') {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return Number.isFinite(value) ? `${value}px` : undefined;\n  }\n\n  return /^-?\\d*\\.?\\d+$/.test(value.trim()) ? `${value.trim()}px` : value;\n};\n","import { Button as ButtonPrimitive } from '@base-ui/react/button';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { isValidElement } from 'react';\n\n/**\n * The fill of a disabled Button that has one: muted, whichever way it is disabled (a button's own disabled, Base UI's\n * data-disabled, or aria-disabled on a link), in the dark theme too, where the variants set their own fill. Ghost and link\n * have no fill to begin with and are given none: a grey box would turn a link into a button.\n */\nconst DISABLED_FILL =\n  'disabled:bg-muted data-disabled:bg-muted aria-disabled:bg-muted dark:disabled:bg-muted dark:data-disabled:bg-muted dark:aria-disabled:bg-muted';\n\nexport const buttonVariants = cva(\n  \"group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:not-aria-disabled:translate-y-px disabled:pointer-events-none disabled:border-transparent disabled:text-foreground/60 disabled:shadow-none disabled:focus-visible:ring-0 dark:disabled:border-transparent data-link-disabled:pointer-events-none data-link-disabled:focus-visible:ring-0 data-disabled:border-transparent data-disabled:text-foreground/60 data-disabled:shadow-none dark:data-disabled:border-transparent aria-disabled:border-transparent aria-disabled:text-foreground/60 aria-disabled:shadow-none dark:aria-disabled:border-transparent aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: `bg-primary text-primary-foreground hover:bg-primary/80 ${DISABLED_FILL}`,\n        outline: `border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 ${DISABLED_FILL}`,\n        secondary: `bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground ${DISABLED_FILL}`,\n        ghost:\n          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 aria-disabled:hover:bg-transparent dark:aria-disabled:hover:bg-transparent',\n        destructive: `bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/15 dark:hover:bg-destructive/20 dark:focus-visible:ring-destructive/40 ${DISABLED_FILL}`,\n        link: 'text-primary underline-offset-4 hover:underline aria-disabled:hover:no-underline',\n      },\n      size: {\n        default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n        icon: 'size-8',\n        'icon-xs': \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n        'icon-lg': 'size-9',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * Whether this Button is rendering a link rather than a button, so it can keep\n * link semantics. Covers `render={<a href=\"...\" />}` and a routing component\n * that takes an `href` (Next's Link). A component with a different prop for its\n * destination (react-router's `to`) cannot be recognised from here: give those\n * `nativeButton={false} role={undefined}` directly.\n */\nconst rendersALink = (render: ButtonPrimitive.Props['render']): boolean =>\n  isValidElement(render) && (render.type === 'a' || typeof (render.props as { href?: unknown }).href === 'string');\n\n/**\n * A link that looks like a button is still a link, and has to be announced as\n * one: it opens in a new tab, it has an address, Enter follows it and Space\n * scrolls the page.\n *\n * Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`\n * is true (its default) warns in development and puts `type=\"button\"` on the\n * anchor; following the warning and passing `nativeButton={false}` then adds\n * `role=\"button\"`, which is what takes the link semantics away. So this does\n * both: non-native, with the role and the tabindex Base UI would add cleared\n * again. An explicit prop from the caller still wins over either.\n */\nconst LINK_PROPS = { nativeButton: false, role: undefined, tabIndex: undefined } as const;\n\n/**\n * A disabled link is not :disabled (only a form control can be), so the markup has to say it: Base UI already marks it\n * `aria-disabled` and `data-disabled` and stops the click, and this takes it out of the tab order, which LINK_PROPS\n * would otherwise leave to the browser. The href is kept on purpose, so a routing component that requires one keeps\n * working; the pointer is kept off the link by `data-link-disabled:pointer-events-none`, which also covers a middle\n * click and the context menu, and the click and Enter are stopped by Base UI. It is a data attribute of its own, not\n * `aria-disabled`, because an aria-disabled button (`focusableWhenDisabled`) is meant to stay hoverable and focusable so it\n * can say why it cannot act; only a native :disabled button and this link are inert.\n */\nconst DISABLED_LINK_PROPS = { ...LINK_PROPS, tabIndex: -1, 'data-link-disabled': '' } as const;\n\nexport const Button = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) => {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      {...(rendersALink(props.render) ? (props.disabled ? DISABLED_LINK_PROPS : LINK_PROPS) : {})}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n};\n","import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Popover = ({ ...props }: PopoverPrimitive.Root.Props) => {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n};\n\nexport const PopoverTrigger = ({ ...props }: PopoverPrimitive.Trigger.Props) => {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n};\n\nexport const PopoverContent = ({\n  className,\n  align = 'center',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'anchor' | 'side' | 'sideOffset'>) => {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n};\n\nexport const PopoverHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"popover-header\" className={cn('flex flex-col gap-0.5 text-sm', className)} {...props} />;\n};\n\nexport const PopoverTitle = ({ className, ...props }: PopoverPrimitive.Title.Props) => {\n  return <PopoverPrimitive.Title data-slot=\"popover-title\" className={cn('font-medium', className)} {...props} />;\n};\n\nexport const PopoverDescription = ({ className, ...props }: PopoverPrimitive.Description.Props) => {\n  return <PopoverPrimitive.Description data-slot=\"popover-description\" className={cn('text-muted-foreground', className)} {...props} />;\n};\n","import { Input as InputPrimitive } from '@base-ui/react/input';\nimport { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Input = ({ className, type, ...props }: React.ComponentProps<'input'>) => {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}