@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.21

package/dist/ui/src/components/ui/item/item.d.ts

@@ -10,7 +10,7 @@ declare const itemVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const Item: ({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "image" | "icon" | null | undefined;
+    variant?: "default" | "icon" | "image" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const ItemMedia: ({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) => React.JSX.Element;
 export declare const ItemContent: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;

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

@@ -0,0 +1,122 @@
+import { cn } from "../../../lib/utils.js";
+import { Separator } from "../separator/separator.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region ../ui/src/components/ui/item/item.tsx
+var ItemGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		role: "list",
+		"data-slot": "item-group",
+		className: cn("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", className),
+		...props
+	});
+};
+var ItemSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "item-separator",
+		orientation: "horizontal",
+		className: cn("my-2", className),
+		...props
+	});
+};
+var itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none [a]:transition-colors [a]:hover:bg-muted", {
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "border-transparent bg-muted/50"
+		},
+		size: {
+			default: "gap-2.5 px-3 py-2.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var Item = ({ className, variant = "default", size = "default", render, ...props }) => {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(itemVariants({
+			variant,
+			size,
+			className
+		})) }, props),
+		render,
+		state: {
+			slot: "item",
+			variant,
+			size
+		}
+	});
+};
+var itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+	} },
+	defaultVariants: { variant: "default" }
+});
+var ItemMedia = ({ className, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-media",
+		"data-variant": variant,
+		className: cn(itemMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+};
+var ItemContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-content",
+		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
+		...props
+	});
+};
+var ItemTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-title",
+		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
+		...props
+	});
+};
+var ItemDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "item-description",
+		className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+};
+var ItemActions = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-actions",
+		className: cn("flex items-center gap-2", className),
+		...props
+	});
+};
+var ItemHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-header",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+};
+var ItemFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-footer",
+		className: cn("flex basis-full items-center justify-between gap-2", className),
+		...props
+	});
+};
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
+
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":[],"sources":["../../../../../../../ui/src/components/ui/item/item.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nimport { Separator } from '../separator';\n\nexport const ItemGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: preserve shadcn's polymorphic div API for item groups.\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn('group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemSeparator = ({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n  return <Separator data-slot=\"item-separator\" orientation=\"horizontal\" className={cn('my-2', className)} {...props} />;\n};\n\nconst itemVariants = cva(\n  'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none [a]:transition-colors [a]:hover:bg-muted',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent',\n        outline: 'border-border',\n        muted: 'border-transparent bg-muted/50',\n      },\n      size: {\n        default: 'gap-2.5 px-3 py-2.5',\n        sm: 'gap-2.5 px-3 py-2.5',\n        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport const Item = ({\n  className,\n  variant = 'default',\n  size = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) => {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'item',\n      variant,\n      size,\n    },\n  });\n};\n\nconst itemMediaVariants = cva(\n  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport const ItemMedia = ({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) => {\n  return <div data-slot=\"item-media\" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props} />;\n};\n\nexport const ItemContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn('flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn('line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4', className)}\n      {...props}\n    />\n  );\n};\n\nexport const ItemDescription = ({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const ItemActions = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-actions\" className={cn('flex items-center gap-2', className)} {...props} />;\n};\n\nexport const ItemHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-header\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n};\n\nexport const ItemFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"item-footer\" className={cn('flex basis-full items-center justify-between gap-2', className)} {...props} />;\n};\n"],"mappings":";;;;;;;AAQA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OAEE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GAAG,mGAAmG,SAAS;EAC1H,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAoD;CAChG,OAAO,oBAAC,WAAD;EAAW,aAAU;EAAiB,aAAY;EAAa,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtH;AAEA,IAAM,eAAe,IACnB,gKACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;EACT;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAEA,IAAa,QAAQ,EACnB,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,YACsE;CACzE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC,EAC1D,GACA,KACF;EACA;EACA,OAAO;GACL,MAAM;GACN;GACA;EACF;CACF,CAAC;AACH;AAEA,IAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,IAAa,aAAa,EAAE,WAAW,UAAU,WAAW,GAAG,YAAkF;CAC/I,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAa,gBAAc;EAAS,WAAW,GAAG,kBAAkB;GAAE;GAAS;EAAU,CAAC,CAAC;EAAG,GAAI;CAAQ,CAAA;AAClI;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qGAAqG,SAAS;EAC5H,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAyC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kGAAkG,SAAS;EACzH,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAuC;CACrF,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,uLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,2BAA2B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxG;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClI;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClI"}

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

@@ -0,0 +1,21 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../ui/src/components/ui/kbd/kbd.tsx
+var Kbd = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
+		...props
+	});
+};
+var KbdGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd-group",
+		className: cn("inline-flex items-center gap-1", className),
+		...props
+	});
+};
+//#endregion
+export { Kbd, KbdGroup };
+
+//# sourceMappingURL=kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../../../../../../../ui/src/components/ui/kbd/kbd.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\n\nexport const Kbd = ({ className, ...props }: React.ComponentProps<'kbd'>) => {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const KbdGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <kbd data-slot=\"kbd-group\" className={cn('inline-flex items-center gap-1', className)} {...props} />;\n};\n"],"mappings":";;;AAEA,IAAa,OAAO,EAAE,WAAW,GAAG,YAAyC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,yWACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,YAAY,EAAE,WAAW,GAAG,YAAyC;CAChF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAY,WAAW,GAAG,kCAAkC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC5G"}

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

@@ -0,0 +1,14 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../ui/src/components/ui/label/label.tsx
+var Label = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-5 font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+};
+//#endregion
+export { Label };
+
+//# sourceMappingURL=label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":[],"sources":["../../../../../../../ui/src/components/ui/label/label.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const Label = ({ className, ...props }: React.ComponentProps<'label'>) => {\n  return (\n    // biome-ignore lint/a11y/noLabelWithoutControl: htmlFor is supplied by consumers via ...props; Base UI also handles association at runtime\n    <label\n      data-slot=\"label\"\n      className={cn(\n        'flex items-center gap-2 text-sm leading-5 font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,SAAS,EAAE,WAAW,GAAG,YAA2C;CAC/E,OAEE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,oNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,44 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region ../ui/src/components/ui/marker/marker.tsx
+var markerVariants = cva("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground", { variants: { variant: {
+	default: "",
+	separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+	border: "border-b border-border pb-2"
+} } });
+var Marker = ({ className, variant = "default", render, ...props }) => {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(markerVariants({
+			variant,
+			className
+		})) }, props),
+		render,
+		state: {
+			slot: "marker",
+			variant
+		}
+	});
+};
+var MarkerIcon = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+};
+var MarkerContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-content",
+		className: cn("min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };
+
+//# sourceMappingURL=marker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"marker.js","names":[],"sources":["../../../../../../../ui/src/components/ui/marker/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\n\nexport const markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground\",\n  {\n    variants: {\n      variant: {\n        default: '',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border',\n        border: 'border-b border-border pb-2',\n      },\n    },\n  },\n);\n\nexport const Marker = ({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) => {\n  return useRender({\n    defaultTagName: 'div',\n    props: mergeProps<'div'>(\n      {\n        className: cn(markerVariants({ variant, className })),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: 'marker',\n      variant,\n    },\n  });\n};\n\nexport const MarkerIcon = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span data-slot=\"marker-icon\" aria-hidden=\"true\" className={cn(\"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\", className)} {...props} />\n  );\n};\n\nexport const MarkerContent = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,iBAAiB,IAC5B,4MACA,EACE,UAAU,EACR,SAAS;CACP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAEA,IAAa,UAAU,EACrB,WACA,UAAU,WACV,QACA,GAAG,YACwE;CAC3E,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,eAAe;GAAE;GAAS;EAAU,CAAC,CAAC,EACtD,GACA,KACF;EACA;EACA,OAAO;GACL,MAAM;GACN;EACF;CACF,CAAC;AACH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAA0C;CACnF,OACE,oBAAC,QAAD;EAAM,aAAU;EAAc,eAAY;EAAO,WAAW,GAAG,wDAAwD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEnJ;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAA0C;CACtF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,kMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,140 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import { POPUP_ITEM_INDICATOR_CLASS } from "../../../lib/popup-list.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck } from "@tabler/icons-react";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar } from "@base-ui/react/menubar";
+//#region ../ui/src/components/ui/menubar/menubar.tsx
+var Menubar$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menubar, {
+		"data-slot": "menubar",
+		className: cn("flex h-8 items-center gap-0.5 rounded-lg border p-[3px]", className),
+		...props
+	});
+};
+var MenubarMenu = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+};
+var MenubarGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuGroup, {
+		"data-slot": "menubar-group",
+		...props
+	});
+};
+var MenubarPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuPortal, {
+		"data-slot": "menubar-portal",
+		...props
+	});
+};
+var MenubarTrigger = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		"data-slot": "menubar-trigger",
+		className: cn("flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted", className),
+		...props
+	});
+};
+var MenubarContent = ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "menubar-content",
+		align,
+		alignOffset,
+		sideOffset,
+		className,
+		...props
+	});
+};
+var MenubarItem = ({ className, inset, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuItem, {
+		"data-slot": "menubar-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[inset=true]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className),
+		...props
+	});
+};
+var MenubarCheckboxItem = ({ className, children, checked, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "menubar-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[inset=true]:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			"data-slot": "menubar-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+		}), children]
+	});
+};
+var MenubarRadioGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+		"data-slot": "menubar-radio-group",
+		...props
+	});
+};
+var MenubarRadioItem = ({ className, children, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "menubar-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[inset=true]:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			"data-slot": "menubar-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+		}), children]
+	});
+};
+var MenubarLabel = ({ className, inset, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuLabel, {
+		"data-slot": "menubar-label",
+		"data-inset": inset,
+		className: cn("px-1.5 py-1 text-sm font-medium data-[inset=true]:pl-7", className),
+		...props
+	});
+};
+var MenubarSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuSeparator, {
+		"data-slot": "menubar-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+};
+var MenubarShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuShortcut, {
+		"data-slot": "menubar-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground", className),
+		...props
+	});
+};
+var MenubarSub = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuSub, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+};
+var MenubarSubTrigger = ({ className, inset, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuSubTrigger, {
+		"data-slot": "menubar-sub-trigger",
+		"data-inset": inset,
+		className: cn("gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+};
+var MenubarSubContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+		"data-slot": "menubar-sub-content",
+		className: cn("min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-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", "motion-reduce:animate-none", className),
+		...props
+	});
+};
+//#endregion
+export { Menubar$1 as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };
+
+//# sourceMappingURL=menubar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":[],"sources":["../../../../../../../ui/src/components/ui/menubar/menubar.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';\nimport { POPUP_ITEM_INDICATOR_CLASS } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\nexport const Menubar = ({ className, ...props }: MenubarPrimitive.Props) => {\n  return <MenubarPrimitive data-slot=\"menubar\" className={cn('flex h-8 items-center gap-0.5 rounded-lg border p-[3px]', className)} {...props} />;\n};\n\nexport const MenubarMenu = ({ ...props }: React.ComponentProps<typeof DropdownMenu>) => {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />;\n};\n\nexport const MenubarGroup = ({ ...props }: React.ComponentProps<typeof DropdownMenuGroup>) => {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />;\n};\n\nexport const MenubarPortal = ({ ...props }: React.ComponentProps<typeof DropdownMenuPortal>) => {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />;\n};\n\nexport const MenubarTrigger = ({ className, ...props }: React.ComponentProps<typeof DropdownMenuTrigger>) => {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        'flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const MenubarContent = ({\n  className,\n  align = 'start',\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) => {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={className}\n      {...props}\n    />\n  );\n};\n\nexport const MenubarItem = ({ className, inset, variant = 'default', ...props }: React.ComponentProps<typeof DropdownMenuItem>) => {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[inset=true]:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const MenubarCheckboxItem = ({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        'relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[inset=true]:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"menubar-checkbox-item-indicator\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const MenubarRadioGroup = ({ ...props }: React.ComponentProps<typeof DropdownMenuRadioGroup>) => {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />;\n};\n\nexport const MenubarRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[inset=true]:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"menubar-radio-item-indicator\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n};\n\nexport const MenubarLabel = ({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel> & {\n  inset?: boolean;\n}) => {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn('px-1.5 py-1 text-sm font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const MenubarSeparator = ({ className, ...props }: React.ComponentProps<typeof DropdownMenuSeparator>) => {\n  return <DropdownMenuSeparator data-slot=\"menubar-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const MenubarShortcut = ({ className, ...props }: React.ComponentProps<typeof DropdownMenuShortcut>) => {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const MenubarSub = ({ ...props }: React.ComponentProps<typeof DropdownMenuSub>) => {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />;\n};\n\nexport const MenubarSubTrigger = ({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean;\n}) => {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-[inset=true]:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const MenubarSubContent = ({ className, ...props }: React.ComponentProps<typeof DropdownMenuSubContent>) => {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        'min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-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        'motion-reduce:animate-none',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAwBA,IAAa,aAAW,EAAE,WAAW,GAAG,YAAoC;CAC1E,OAAO,oBAAC,SAAD;EAAkB,aAAU;EAAU,WAAW,GAAG,2DAA2D,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChJ;AAEA,IAAa,eAAe,EAAE,GAAG,YAAuD;CACtF,OAAO,oBAAC,cAAD;EAAc,aAAU;EAAe,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA4D;CAC5F,OAAO,oBAAC,mBAAD;EAAmB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AAClE;AAEA,IAAa,iBAAiB,EAAE,GAAG,YAA6D;CAC9F,OAAO,oBAAC,oBAAD;EAAoB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACpE;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAA8D;CAC3G,OACE,oBAAC,qBAAD;EACE,aAAU;EACV,WAAW,GACT,qIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBAAkB,EAC7B,WACA,QAAQ,SACR,cAAc,IACd,aAAa,GACb,GAAG,YACmD;CACtD,OACE,oBAAC,qBAAD;EACE,aAAU;EACH;EACM;EACD;EACD;EACX,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,eAAe,EAAE,WAAW,OAAO,UAAU,WAAW,GAAG,YAA2D;CACjI,OACE,oBAAC,kBAAD;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,4fACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,uBAAuB,EAClC,WACA,UACA,SACA,OACA,GAAG,YAGC;CACJ,OACE,qBAAC,KAAc,cAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,gUACA,SACF;EACS;EACT,GAAI;EARN,UAAA,CAUE,oBAAC,QAAD;GAAM,WAAW;GAA4B,aAAU;GACrD,UAAA,oBAAC,KAAc,uBAAf,EAAA,UACE,oBAAC,WAAD,CAAY,CAAA,EACuB,CAAA;EACjC,CAAA,GACL,QACyB;;AAEhC;AAEA,IAAa,qBAAqB,EAAE,GAAG,YAAiE;CACtG,OAAO,oBAAC,wBAAD;EAAwB,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAC7E;AAEA,IAAa,oBAAoB,EAC/B,WACA,UACA,OACA,GAAG,YAGC;CACJ,OACE,qBAAC,KAAc,WAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,qWACA,SACF;EACA,GAAI;EAPN,UAAA,CASE,oBAAC,QAAD;GAAM,WAAW;GAA4B,aAAU;GACrD,UAAA,oBAAC,KAAc,oBAAf,EAAA,UACE,oBAAC,WAAD,CAAY,CAAA,EACoB,CAAA;EAC9B,CAAA,GACL,QACsB;;AAE7B;AAEA,IAAa,gBAAgB,EAC3B,WACA,OACA,GAAG,YAGC;CACJ,OACE,oBAAC,mBAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,0DAA0D,SAAS;EACjF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAgE;CAC/G,OAAO,oBAAC,uBAAD;EAAuB,aAAU;EAAoB,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACjI;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAA+D;CAC7G,OACE,oBAAC,sBAAD;EACE,aAAU;EACV,WAAW,GAAG,yGAAyG,SAAS;EAChI,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,GAAG,YAA0D;CACxF,OAAO,oBAAC,iBAAD;EAAiB,aAAU;EAAc,GAAI;CAAQ,CAAA;AAC9D;AAEA,IAAa,qBAAqB,EAChC,WACA,OACA,GAAG,YAGC;CACJ,OACE,oBAAC,wBAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,wMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAiE;CACjH,OACE,oBAAC,wBAAD;EACE,aAAU;EACV,WAAW,GACT,gZACA,8BACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,50 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../ui/src/components/ui/message/message.tsx
+var MessageGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-group",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+};
+var Message = ({ className, align = "start", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message",
+		"data-align": align,
+		className: cn("group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse", className),
+		...props
+	});
+};
+var MessageAvatar = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-avatar",
+		className: cn("flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8", className),
+		...props
+	});
+};
+var MessageContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-content",
+		className: cn("flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end", className),
+		...props
+	});
+};
+var MessageHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-header",
+		className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0", className),
+		...props
+	});
+};
+var MessageFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-footer",
+		className: cn("flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end", className),
+		...props
+	});
+};
+//#endregion
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader };
+
+//# sourceMappingURL=message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message.js","names":[],"sources":["../../../../../../../ui/src/components/ui/message/message.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport type * as React from 'react';\n\nexport const MessageGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"message-group\" className={cn('flex min-w-0 flex-col gap-2', className)} {...props} />;\n};\n\nexport const Message = ({ className, align = 'start', ...props }: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) => {\n  return (\n    <div\n      data-slot=\"message\"\n      data-align={align}\n      className={cn('group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse', className)}\n      {...props}\n    />\n  );\n};\n\nexport const MessageAvatar = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"message-avatar\"\n      className={cn(\n        'flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const MessageContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"message-content\"\n      className={cn('flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end', className)}\n      {...props}\n    />\n  );\n};\n\nexport const MessageHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"message-header\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const MessageFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\n        'flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,+BAA+B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7G;AAEA,IAAa,WAAW,EAAE,WAAW,QAAQ,SAAS,GAAG,YAAuE;CAC9H,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,8FAA8F,SAAS;EACrH,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAyC;CACrF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAAyC;CACtF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4GAA4G,SAAS;EACnI,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAyC;CACrF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,mIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAyC;CACrF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,8KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/message-scroller/message-scroller.js

@@ -0,0 +1,61 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconArrowDown } from "@tabler/icons-react";
+import { MessageScroller, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+//#region ../ui/src/components/ui/message-scroller/message-scroller.tsx
+var MessageScrollerProvider = (props) => {
+	return /* @__PURE__ */ jsx(MessageScroller.Provider, { ...props });
+};
+var MessageScroller$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(MessageScroller.Root, {
+		"data-slot": "message-scroller",
+		className: cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className),
+		...props
+	});
+};
+var MessageScrollerViewport = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(MessageScroller.Viewport, {
+		"data-slot": "message-scroller-viewport",
+		className: cn("size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible", className),
+		...props
+	});
+};
+var MessageScrollerContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(MessageScroller.Content, {
+		"data-slot": "message-scroller-content",
+		className: cn("flex h-max min-h-full flex-col gap-6", className),
+		...props
+	});
+};
+var MessageScrollerItem = ({ className, scrollAnchor = false, ...props }) => {
+	return /* @__PURE__ */ jsx(MessageScroller.Item, {
+		"data-slot": "message-scroller-item",
+		scrollAnchor,
+		className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
+		...props
+	});
+};
+var MessageScrollerButton = ({ direction = "end", className, children, render, variant = "secondary", size = "icon-sm", ...props }) => {
+	return /* @__PURE__ */ jsx(MessageScroller.Button, {
+		"data-slot": "message-scroller-button",
+		"data-direction": direction,
+		"data-variant": variant,
+		"data-size": size,
+		direction,
+		className: cn("absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 motion-reduce:transition-none hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180", className),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconArrowDown, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+};
+//#endregion
+export { MessageScroller$1 as MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };
+
+//# sourceMappingURL=message-scroller.js.map

package/dist/ui/src/components/ui/message-scroller/message-scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-scroller.js","names":[],"sources":["../../../../../../../ui/src/components/ui/message-scroller/message-scroller.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { MessageScroller as MessageScrollerPrimitive } from '@shadcn/react/message-scroller';\n\nexport { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';\n\nimport { IconArrowDown } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\nexport const MessageScrollerProvider = (props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>) => {\n  return <MessageScrollerPrimitive.Provider {...props} />;\n};\n\nexport const MessageScroller = ({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) => {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn('group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden', className)}\n      {...props}\n    />\n  );\n};\n\nexport const MessageScrollerViewport = ({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) => {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const MessageScrollerContent = ({ className, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) => {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-6', className)}\n      {...props}\n    />\n  );\n};\n\nexport const MessageScrollerItem = ({ className, scrollAnchor = false, ...props }: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) => {\n  return (\n    <MessageScrollerPrimitive.Item\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn('min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]', className)}\n      {...props}\n    />\n  );\n};\n\nexport const MessageScrollerButton = ({\n  direction = 'end',\n  className,\n  children,\n  render,\n  variant = 'secondary',\n  size = 'icon-sm',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> & Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) => {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      data-variant={variant}\n      data-size={size}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 motion-reduce:transition-none hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180',\n        className,\n      )}\n      render={render ?? <Button variant={variant} size={size} />}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <IconArrowDown />\n          <span className=\"sr-only\">{direction === 'end' ? 'Scroll to end' : 'Scroll to start'}</span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  );\n};\n"],"mappings":";;;;;;AASA,IAAa,2BAA2B,UAA0E;CAChH,OAAO,oBAAC,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;AACxD;AAEA,IAAa,qBAAmB,EAAE,WAAW,GAAG,YAAwE;CACtH,OACE,oBAAC,gBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GAAG,mFAAmF,SAAS;EAC1G,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,2BAA2B,EAAE,WAAW,GAAG,YAA4E;CAClI,OACE,oBAAC,gBAAyB,UAA1B;EACE,aAAU;EACV,WAAW,GACT,iQACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,0BAA0B,EAAE,WAAW,GAAG,YAA2E;CAChI,OACE,oBAAC,gBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,uBAAuB,EAAE,WAAW,eAAe,OAAO,GAAG,YAAwE;CAChJ,OACE,oBAAC,gBAAyB,MAA1B;EACE,aAAU;EACI;EACd,WAAW,GAAG,kFAAkF,SAAS;EACzG,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,yBAAyB,EACpC,YAAY,OACZ,WACA,UACA,QACA,UAAU,aACV,OAAO,WACP,GAAG,YAC+H;CAClI,OACE,oBAAC,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EAChB,gBAAc;EACd,aAAW;EACA;EACX,WAAW,GACT,uwBACA,SACF;EACA,QAAQ,UAAU,oBAAC,QAAD;GAAiB;GAAe;EAAO,CAAA;EACzD,GAAI;EAEH,UAAA,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA,cAAc,QAAQ,kBAAkB;EAAwB,CAAA,CAC3F,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/ui/src/components/ui/native-select/native-select.js

@@ -0,0 +1,39 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconSelector } from "@tabler/icons-react";
+//#region ../ui/src/components/ui/native-select/native-select.tsx
+var NativeSelect = ({ className, size = "default", ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className),
+		"data-slot": "native-select-wrapper",
+		"data-size": size,
+		children: [/* @__PURE__ */ jsx("select", {
+			"data-slot": "native-select",
+			"data-size": size,
+			className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-control bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+			...props
+		}), /* @__PURE__ */ jsx(IconSelector, {
+			className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none",
+			"aria-hidden": "true",
+			"data-slot": "native-select-icon"
+		})]
+	});
+};
+var NativeSelectOption = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("option", {
+		"data-slot": "native-select-option",
+		className: cn("bg-[Canvas] text-[CanvasText]", className),
+		...props
+	});
+};
+var NativeSelectOptGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("optgroup", {
+		"data-slot": "native-select-optgroup",
+		className: cn("bg-[Canvas] text-[CanvasText]", className),
+		...props
+	});
+};
+//#endregion
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
+
+//# sourceMappingURL=native-select.js.map

package/dist/ui/src/components/ui/native-select/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-select.js","names":[],"sources":["../../../../../../../ui/src/components/ui/native-select/native-select.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconSelector } from '@tabler/icons-react';\nimport type * as React from 'react';\n\ntype TNativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {\n  size?: 'sm' | 'default';\n};\n\nexport const NativeSelect = ({ className, size = 'default', ...props }: TNativeSelectProps) => {\n  return (\n    <div\n      className={cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className)}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-8 w-full min-w-0 appearance-none rounded-lg border border-control bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\n        {...props}\n      />\n      <IconSelector\n        className=\"pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  );\n};\n\nexport const NativeSelectOption = ({ className, ...props }: React.ComponentProps<'option'>) => {\n  return <option data-slot=\"native-select-option\" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />;\n};\n\nexport const NativeSelectOptGroup = ({ className, ...props }: React.ComponentProps<'optgroup'>) => {\n  return <optgroup data-slot=\"native-select-optgroup\" className={cn('bg-[Canvas] text-[CanvasText]', className)} {...props} />;\n};\n"],"mappings":";;;;AAQA,IAAa,gBAAgB,EAAE,WAAW,OAAO,WAAW,GAAG,YAAgC;CAC7F,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,uEAAuE,SAAS;EAC9F,aAAU;EACV,aAAW;EAHb,UAAA,CAKE,oBAAC,UAAD;GACE,aAAU;GACV,aAAW;GACX,WAAU;GACV,GAAI;EACL,CAAA,GACD,oBAAC,cAAD;GACE,WAAU;GACV,eAAY;GACZ,aAAU;EACX,CAAA,CACE;;AAET;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA4C;CAC7F,OAAO,oBAAC,UAAD;EAAQ,aAAU;EAAuB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH;AAEA,IAAa,wBAAwB,EAAE,WAAW,GAAG,YAA8C;CACjG,OAAO,oBAAC,YAAD;EAAU,aAAU;EAAyB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7H"}