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

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,159 @@
+import { cn } from "../../../lib/utils.js";
+import { useExposedFocusGuards } from "../../../lib/focus-guards.js";
+import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LAYER_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { PopupListScroll } from "../scroll-area/popup-list-scroll.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronRight } from "@tabler/icons-react";
+import { Menu } from "@base-ui/react/menu";
+//#region ../ui/src/components/ui/dropdown-menu/dropdown-menu.tsx
+var DropdownMenu = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+};
+var DropdownMenuPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+};
+var DropdownMenuTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+};
+/**
+* Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown
+* for as long as the menu overflows and a fade on whichever end is cut off.
+*
+* Base UI puts `role="menu"` on this popup itself and offers no inner list part
+* to move it onto, so the ScrollArea sits INSIDE the role. That is only legal
+* because ScrollArea drops the `role="presentation"` Base UI gives its root,
+* viewport and content: a menu may not own presentation wrappers (axe reports
+* a critical aria-required-children violation), but it may own plain divs.
+* e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.
+*/
+var DropdownMenuContent = ({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, children, ...props }) => {
+	useExposedFocusGuards();
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: cn(POPUP_LAYER_CLASS, "isolate outline-none"),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn("z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100", POPUP_FRAME_CLASS, POPUP_LIST_WIDTH_CLASS, "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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none", className),
+			...props,
+			children: /* @__PURE__ */ jsx(PopupListScroll, {
+				focusable: false,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "px-1",
+					children
+				})
+			})
+		})
+	}) });
+};
+var DropdownMenuGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+};
+var DropdownMenuLabel = ({ className, inset, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn(POPUP_GROUP_LABEL_CLASS, "data-[inset=true]:pl-7", className),
+		...props
+	});
+};
+var DropdownMenuItem = ({ className, inset, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item", popupItemClass(), "data-[inset=true]:pl-7", "data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive", "data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive", className),
+		...props
+	});
+};
+var DropdownMenuSub = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+};
+var DropdownMenuSubTrigger = ({ className, inset, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn(popupItemClass(), "data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(IconChevronRight, { className: "ml-auto" })]
+	});
+};
+var DropdownMenuSubContent = ({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("shadow-lg", className),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		...props
+	});
+};
+var DropdownMenuCheckboxItem = ({ className, children, checked, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn(popupItemClass("base-ui", true), "data-checked:font-medium data-[inset=true]:pl-7", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+		}), children]
+	});
+};
+var DropdownMenuRadioGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+};
+var DropdownMenuRadioItem = ({ className, children, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn(popupItemClass("base-ui", true), "data-checked:font-medium data-[inset=true]:pl-7", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+		}), children]
+	});
+};
+var DropdownMenuSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+};
+var DropdownMenuShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/ui/src/components/ui/dropdown-menu/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../../../../../../ui/src/components/ui/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport { useExposedFocusGuards } from '@edyn/ui/lib/focus-guards';\nimport {\n  POPUP_FRAME_CLASS,\n  POPUP_GROUP_LABEL_CLASS,\n  POPUP_ITEM_INDICATOR_CLASS,\n  POPUP_LAYER_CLASS,\n  POPUP_LIST_WIDTH_CLASS,\n  popupItemClass,\n} from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { PopupListScroll } from '../scroll-area';\n\nexport const DropdownMenu = ({ ...props }: MenuPrimitive.Root.Props) => {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n};\n\nexport const DropdownMenuPortal = ({ ...props }: MenuPrimitive.Portal.Props) => {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n};\n\nexport const DropdownMenuTrigger = ({ ...props }: MenuPrimitive.Trigger.Props) => {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n};\n\n/**\n * Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown\n * for as long as the menu overflows and a fade on whichever end is cut off.\n *\n * Base UI puts `role=\"menu\"` on this popup itself and offers no inner list part\n * to move it onto, so the ScrollArea sits INSIDE the role. That is only legal\n * because ScrollArea drops the `role=\"presentation\"` Base UI gives its root,\n * viewport and content: a menu may not own presentation wrappers (axe reports\n * a critical aria-required-children violation), but it may own plain divs.\n * e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.\n */\nexport const DropdownMenuContent = ({\n  align = 'start',\n  alignOffset = 0,\n  side = 'bottom',\n  sideOffset = 4,\n  className,\n  children,\n  ...props\n}: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  useExposedFocusGuards();\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className={cn(POPUP_LAYER_CLASS, 'isolate outline-none')}\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            'z-50 flex max-h-(--available-height) origin-(--transform-origin) flex-col overflow-hidden duration-100',\n            POPUP_FRAME_CLASS,\n            POPUP_LIST_WIDTH_CLASS,\n            '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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95',\n            'motion-reduce:animate-none',\n            className,\n          )}\n          {...props}\n        >\n          {/* POPUP_LIST_HEIGHT_CLASS caps the element that scrolls at eight rows, or at the whole rows the\n              positioner's measured height allows; the air above and below the rows is that class's margin, so the content takes\n              no vertical padding. */}\n          <PopupListScroll focusable={false}>\n            <div className=\"px-1\">{children}</div>\n          </PopupListScroll>\n        </MenuPrimitive.Popup>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n};\n\nexport const DropdownMenuGroup = ({ ...props }: MenuPrimitive.Group.Props) => {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n};\n\nexport const DropdownMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(POPUP_GROUP_LABEL_CLASS, 'data-[inset=true]:pl-7', className)}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuItem = ({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: 'default' | 'destructive';\n}) => {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        'group/dropdown-menu-item',\n        popupItemClass(),\n        'data-[inset=true]:pl-7',\n        // A destructive item keeps its own colour, and its own highlight with it:\n        // the shared translucent one would make it read like any other item.\n        'data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive',\n        'data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuSub = ({ ...props }: MenuPrimitive.SubmenuRoot.Props) => {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />;\n};\n\nexport const DropdownMenuSubTrigger = ({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        popupItemClass(),\n        // An open submenu holds its trigger in the highlight while the pointer is\n        // down in its panel.\n        'data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <IconChevronRight className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n};\n\nexport const DropdownMenuSubContent = ({\n  align = 'start',\n  alignOffset = -3,\n  side = 'right',\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) => {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn('shadow-lg', className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuCheckboxItem = ({\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=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      checked={checked}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-checkbox-item-indicator\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n};\n\nexport const DropdownMenuRadioGroup = ({ ...props }: MenuPrimitive.RadioGroup.Props) => {\n  return <MenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n};\n\nexport const DropdownMenuRadioItem = ({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) => {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(popupItemClass('base-ui', true), 'data-checked:font-medium data-[inset=true]:pl-7', className)}\n      {...props}\n    >\n      <span className={POPUP_ITEM_INDICATOR_CLASS} data-slot=\"dropdown-menu-radio-item-indicator\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconCheck />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n};\n\nexport const DropdownMenuSeparator = ({ className, ...props }: MenuPrimitive.Separator.Props) => {\n  return <MenuPrimitive.Separator data-slot=\"dropdown-menu-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />;\n};\n\nexport const DropdownMenuShortcut = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
-export declare const Empty: ({ className, ...props }: React.ComponentProps<"div">) => import('react').JSX.Element;
+declare const emptyVariants: (props?: ({
+    variant?: "dashed" | "solid" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** An empty state. It has no border until the caller adds `border`; `variant` is the line style that border takes. */
+export declare const Empty: ({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyVariants>) => import('react').JSX.Element;
 export declare const EmptyHeader: ({ className, ...props }: React.ComponentProps<"div">) => import('react').JSX.Element;
 declare const emptyMediaVariants: (props?: ({
     variant?: "default" | "icon" | null | undefined;

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

@@ -0,0 +1,72 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region ../ui/src/components/ui/empty/empty.tsx
+var emptyVariants = cva("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl p-6 text-center text-balance", {
+	variants: { 
+	/** The line style of the border you give it (`border`); Empty draws none of its own. */
+variant: {
+		solid: "border-solid",
+		dashed: "border-dashed"
+	} },
+	defaultVariants: { variant: "solid" }
+});
+/** An empty state. It has no border until the caller adds `border`; `variant` is the line style that border takes. */
+var Empty = ({ className, variant = "solid", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty",
+		"data-variant": variant,
+		className: cn(emptyVariants({ variant }), className),
+		...props
+	});
+};
+var EmptyHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-header",
+		className: cn("flex max-w-sm flex-col items-center gap-2", className),
+		...props
+	});
+};
+var emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
+	} },
+	defaultVariants: { variant: "default" }
+});
+var EmptyMedia = ({ className, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		className: cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+};
+var EmptyTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-title",
+		className: cn("font-heading text-sm font-medium tracking-tight", className),
+		...props
+	});
+};
+var EmptyDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-description",
+		className: cn("text-sm/6 text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+};
+var EmptyContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-content",
+		className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className),
+		...props
+	});
+};
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };
+
+//# sourceMappingURL=empty.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","names":[],"sources":["../../../../../../../ui/src/components/ui/empty/empty.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst emptyVariants = cva('flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl p-6 text-center text-balance', {\n  variants: {\n    /** The line style of the border you give it (`border`); Empty draws none of its own. */\n    variant: {\n      solid: 'border-solid',\n      dashed: 'border-dashed',\n    },\n  },\n  defaultVariants: {\n    variant: 'solid',\n  },\n});\n\n/** An empty state. It has no border until the caller adds `border`; `variant` is the line style that border takes. */\nexport const Empty = ({ className, variant = 'solid', ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyVariants>) => {\n  return <div data-slot=\"empty\" data-variant={variant} className={cn(emptyVariants({ variant }), className)} {...props} />;\n};\n\nexport const EmptyHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"empty-header\" className={cn('flex max-w-sm flex-col items-center gap-2', className)} {...props} />;\n};\n\nconst emptyMediaVariants = cva('mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      icon: \"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const EmptyMedia = ({ className, variant = 'default', ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) => {\n  return <div data-slot=\"empty-icon\" data-variant={variant} className={cn(emptyMediaVariants({ variant, className }))} {...props} />;\n};\n\nexport const EmptyTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"empty-title\" className={cn('font-heading text-sm font-medium tracking-tight', className)} {...props} />;\n};\n\nexport const EmptyDescription = ({ className, ...props }: React.ComponentProps<'p'>) => {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn('text-sm/6 text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary', className)}\n      {...props}\n    />\n  );\n};\n\nexport const EmptyContent = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;AAGA,IAAM,gBAAgB,IAAI,iHAAiH;CACzI,UAAU;;AAER,SAAS;EACP,OAAO;EACP,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,QACX;AACF,CAAC;;AAGD,IAAa,SAAS,EAAE,WAAW,UAAU,SAAS,GAAG,YAA8E;CACrI,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAQ,gBAAc;EAAS,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,6CAA6C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1H;AAEA,IAAM,qBAAqB,IAAI,+FAA+F;CAC5H,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;AAED,IAAa,cAAc,EAAE,WAAW,UAAU,WAAW,GAAG,YAAmF;CACjJ,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAa,gBAAc;EAAS,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EAAG,GAAI;CAAQ,CAAA;AACnI;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyC;CAClF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,mDAAmD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC/H;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAuC;CACtF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qGAAqG,SAAS;EAC5H,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAyC;CACpF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mFAAmF,SAAS;EAC1G,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,36 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region ../ui/src/components/ui/field/field.tsx
+var Field$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Field.Root, {
+		"data-slot": "field",
+		className: cn("group/field flex flex-col gap-2", className),
+		...props
+	});
+};
+var FieldLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Field.Label, {
+		"data-slot": "field-label",
+		className: cn("flex items-center gap-2 text-sm leading-5 font-medium select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground", className),
+		...props
+	});
+};
+var FieldDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Field.Description, {
+		"data-slot": "field-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+};
+var FieldError = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Field.Error, {
+		"data-slot": "field-error",
+		className: cn("text-sm text-destructive", className),
+		...props
+	});
+};
+//#endregion
+export { Field$1 as Field, FieldDescription, FieldError, FieldLabel };
+
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":[],"sources":["../../../../../../../ui/src/components/ui/field/field.tsx"],"sourcesContent":["import { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport const Field = ({ className, ...props }: FieldPrimitive.Root.Props) => {\n  return <FieldPrimitive.Root data-slot=\"field\" className={cn('group/field flex flex-col gap-2', className)} {...props} />;\n};\n\nexport const FieldLabel = ({ className, ...props }: FieldPrimitive.Label.Props) => {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        // Dimmed only when the Field itself is disabled (data-disabled), and in the muted text colour, not at half opacity, so it still reads at 4.5:1.\n        'flex items-center gap-2 text-sm leading-5 font-medium select-none data-disabled:pointer-events-none data-disabled:text-muted-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const FieldDescription = ({ className, ...props }: FieldPrimitive.Description.Props) => {\n  return <FieldPrimitive.Description data-slot=\"field-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n\nexport const FieldError = ({ className, ...props }: FieldPrimitive.Error.Props) => {\n  return <FieldPrimitive.Error data-slot=\"field-error\" className={cn('text-sm text-destructive', className)} {...props} />;\n};\n"],"mappings":";;;;AAGA,IAAa,WAAS,EAAE,WAAW,GAAG,YAAuC;CAC3E,OAAO,oBAAC,MAAe,MAAhB;EAAqB,aAAU;EAAQ,WAAW,GAAG,mCAAmC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OACE,oBAAC,MAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAET,2IACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA8C;CAC7F,OAAO,oBAAC,MAAe,aAAhB;EAA4B,aAAU;EAAoB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OAAO,oBAAC,MAAe,OAAhB;EAAsB,aAAU;EAAc,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzH"}

package/dist/ui/src/components/ui/hover-card/hover-card.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../../../lib/utils.js";
+import { POPUP_LAYER_CLASS } from "../../../lib/popup-list.js";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region ../ui/src/components/ui/hover-card/hover-card.tsx
+var HoverCard = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(PreviewCard.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+};
+var HoverCardTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+};
+var HoverCardContent = ({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) => {
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			align,
+			alignOffset,
+			side,
+			sideOffset,
+			className: cn(POPUP_LAYER_CLASS, "isolate"),
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				"data-slot": "hover-card-content",
+				className: cn("z-50 w-64 origin-(--transform-origin) 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", className),
+				...props
+			})
+		})
+	});
+};
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+
+//# sourceMappingURL=hover-card.js.map

package/dist/ui/src/components/ui/hover-card/hover-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.js","names":[],"sources":["../../../../../../../ui/src/components/ui/hover-card/hover-card.tsx"],"sourcesContent":["'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport { POPUP_LAYER_CLASS } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\n\nexport const HoverCard = ({ ...props }: PreviewCardPrimitive.Root.Props) => {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n};\n\nexport const HoverCardTrigger = ({ ...props }: PreviewCardPrimitive.Trigger.Props) => {\n  return <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n};\n\nexport const HoverCardContent = ({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) => {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className={cn(POPUP_LAYER_CLASS, 'isolate')}\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            'z-50 w-64 origin-(--transform-origin) 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      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,aAAa,EAAE,GAAG,YAA6C;CAC1E,OAAO,oBAAC,YAAqB,MAAtB;EAA2B,aAAU;EAAa,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,oBAAoB,EAAE,GAAG,YAAgD;CACpF,OAAO,oBAAC,YAAqB,SAAtB;EAA8B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAClF;AAEA,IAAa,oBAAoB,EAC/B,WACA,OAAO,UACP,aAAa,GACb,QAAQ,UACR,cAAc,GACd,GAAG,YACkI;CACrI,OACE,oBAAC,YAAqB,QAAtB;EAA6B,aAAU;EACrC,UAAA,oBAAC,YAAqB,YAAtB;GACS;GACM;GACP;GACM;GACZ,WAAW,GAAG,mBAAmB,SAAS;GAE1C,UAAA,oBAAC,YAAqB,OAAtB;IACE,aAAU;IACV,WAAW,GACT,4jBACA,SACF;IACA,GAAI;GACL,CAAA;EAC8B,CAAA;CACN,CAAA;AAEjC"}

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

@@ -0,0 +1,79 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region ../ui/src/components/ui/indicator/indicator.tsx
+/**
+* Indicator: notification count-bubble or status-dot that attaches to a corner
+* of another element (the Material/Angular "badge" concept; our Badge is the
+* label chip). The parent element must be position-relative (e.g. `relative`).
+*
+* Legacy mapping: `edynBadge` directive -> `Indicator` default/destructive;
+*                 `edyn-dot`             -> `Indicator` dot variant.
+* Positioning uses Radix vocabulary: side (top|bottom) + align (start|end).
+*/
+var indicatorVariants = cva("absolute z-10 inline-flex shrink-0 items-center justify-center font-medium leading-none ring-2 ring-background", {
+	variants: {
+		variant: {
+			/** Count bubble: primary colors, shows children as the count/text. */
+			default: "h-4 min-w-4 rounded-full bg-primary px-1 text-xs tabular-nums text-primary-foreground",
+			/** Status dot: solid circle, no children rendered. */
+			dot: "size-2 rounded-full bg-primary",
+			/** Count bubble in destructive (error/alert) colors. */
+			destructive: "h-4 min-w-4 rounded-full bg-destructive px-1 text-xs text-destructive-foreground tabular-nums dark:text-background"
+		},
+		side: {
+			top: "top-0",
+			bottom: "bottom-0"
+		},
+		align: {
+			start: "left-0",
+			end: "right-0"
+		}
+	},
+	compoundVariants: [
+		{
+			side: "top",
+			align: "start",
+			class: "-translate-x-1/2 -translate-y-1/2"
+		},
+		{
+			side: "top",
+			align: "end",
+			class: "translate-x-1/2 -translate-y-1/2"
+		},
+		{
+			side: "bottom",
+			align: "start",
+			class: "-translate-x-1/2 translate-y-1/2"
+		},
+		{
+			side: "bottom",
+			align: "end",
+			class: "translate-x-1/2 translate-y-1/2"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		side: "top",
+		align: "end"
+	}
+});
+var Indicator = ({ className, variant = "default", side = "top", align = "end", children, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "indicator",
+		"data-variant": variant,
+		"data-side": side,
+		"data-align": align,
+		className: cn(indicatorVariants({
+			variant,
+			side,
+			align
+		}), className),
+		...props,
+		children: variant !== "dot" ? children : null
+	});
+};
+//#endregion
+export { Indicator, indicatorVariants };
+
+//# sourceMappingURL=indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"indicator.js","names":[],"sources":["../../../../../../../ui/src/components/ui/indicator/indicator.tsx"],"sourcesContent":["/**\n * Indicator: notification count-bubble or status-dot that attaches to a corner\n * of another element (the Material/Angular \"badge\" concept; our Badge is the\n * label chip). The parent element must be position-relative (e.g. `relative`).\n *\n * Legacy mapping: `edynBadge` directive -> `Indicator` default/destructive;\n *                 `edyn-dot`             -> `Indicator` dot variant.\n * Positioning uses Radix vocabulary: side (top|bottom) + align (start|end).\n */\nimport { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\n\nexport const indicatorVariants = cva(\n  'absolute z-10 inline-flex shrink-0 items-center justify-center font-medium leading-none ring-2 ring-background',\n  {\n    variants: {\n      variant: {\n        /** Count bubble: primary colors, shows children as the count/text. */\n        default: 'h-4 min-w-4 rounded-full bg-primary px-1 text-xs tabular-nums text-primary-foreground',\n        /** Status dot: solid circle, no children rendered. */\n        dot: 'size-2 rounded-full bg-primary',\n        /** Count bubble in destructive (error/alert) colors. */\n        destructive: 'h-4 min-w-4 rounded-full bg-destructive px-1 text-xs text-destructive-foreground tabular-nums dark:text-background',\n      },\n      side: {\n        top: 'top-0',\n        bottom: 'bottom-0',\n      },\n      align: {\n        start: 'left-0',\n        end: 'right-0',\n      },\n    },\n    compoundVariants: [\n      {\n        side: 'top',\n        align: 'start',\n        class: '-translate-x-1/2 -translate-y-1/2',\n      },\n      {\n        side: 'top',\n        align: 'end',\n        class: 'translate-x-1/2 -translate-y-1/2',\n      },\n      {\n        side: 'bottom',\n        align: 'start',\n        class: '-translate-x-1/2 translate-y-1/2',\n      },\n      {\n        side: 'bottom',\n        align: 'end',\n        class: 'translate-x-1/2 translate-y-1/2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      side: 'top',\n      align: 'end',\n    },\n  },\n);\n\nexport type TIndicatorVariantProps = VariantProps<typeof indicatorVariants>;\n\nexport type TIndicatorProps = ComponentProps<'span'> & TIndicatorVariantProps;\n\nexport const Indicator = ({ className, variant = 'default', side = 'top', align = 'end', children, ...props }: TIndicatorProps) => {\n  return (\n    <span\n      data-slot=\"indicator\"\n      data-variant={variant}\n      data-side={side}\n      data-align={align}\n      className={cn(indicatorVariants({ variant, side, align }), className)}\n      {...props}\n    >\n      {variant !== 'dot' ? children : null}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,oBAAoB,IAC/B,kHACA;CACE,UAAU;EACR,SAAS;;GAEP,SAAS;;GAET,KAAK;;GAEL,aAAa;EACf;EACA,MAAM;GACJ,KAAK;GACL,QAAQ;EACV;EACA,OAAO;GACL,OAAO;GACP,KAAK;EACP;CACF;CACA,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,OAAO;EACT;EACA;GACE,MAAM;GACN,OAAO;GACP,OAAO;EACT;EACA;GACE,MAAM;GACN,OAAO;GACP,OAAO;EACT;EACA;GACE,MAAM;GACN,OAAO;GACP,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;CACT;AACF,CACF;AAMA,IAAa,aAAa,EAAE,WAAW,UAAU,WAAW,OAAO,OAAO,QAAQ,OAAO,UAAU,GAAG,YAA6B;CACjI,OACE,oBAAC,QAAD;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,cAAY;EACZ,WAAW,GAAG,kBAAkB;GAAE;GAAS;GAAM;EAAM,CAAC,GAAG,SAAS;EACpE,GAAI;EAEH,UAAA,YAAY,QAAQ,WAAW;CAC5B,CAAA;AAEV"}

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

@@ -0,0 +1,16 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+//#region ../ui/src/components/ui/input/input.tsx
+var Input$1 = ({ className, type, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn("h-8 w-full min-w-0 rounded-lg border border-control 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 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", className),
+		...props
+	});
+};
+//#endregion
+export { Input$1 as Input };
+
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../../../../../../ui/src/components/ui/input/input.tsx"],"sourcesContent":["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-control 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 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":";;;;AAIA,IAAa,WAAS,EAAE,WAAW,MAAM,GAAG,YAA2C;CACrF,OACE,oBAAC,OAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,ukBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/input-group/input-group.d.ts

@@ -6,7 +6,7 @@ export interface IInputGroupProps extends React.ComponentProps<'div'> {
 export declare const InputGroup: ({ className, ...props }: IInputGroupProps) => React.JSX.Element;
 export type TInputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
 declare const inputGroupAddonVariants: (props?: ({
-    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IInputGroupAddonProps extends React.ComponentProps<'div'>, VariantProps<typeof inputGroupAddonVariants> {
 }

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

@@ -0,0 +1,77 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { Textarea } from "../textarea/textarea.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region ../ui/src/components/ui/input-group/input-group.tsx
+var InputGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-control transition-colors outline-none", "has-disabled:bg-input/50 has-disabled:opacity-50 ", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto", "has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		...props
+	});
+};
+var inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-foreground/70 select-none [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+		"inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+var InputGroupAddon = ({ className, align = "inline-start", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onPointerDown: (event) => {
+			if (event.target.closest("button")) return;
+			event.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+};
+var inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+var InputGroupButton = ({ className, type = "button", variant = "ghost", size = "xs", ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+};
+var InputGroupText = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-sm text-foreground/70 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+};
+var InputGroupInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+};
+var InputGroupTextarea = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+};
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.js","names":[],"sources":["../../../../../../../ui/src/components/ui/input-group/input-group.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type * as React from 'react';\nimport { Button } from '../button/button';\nimport { Input } from '../input/input';\nimport { Textarea } from '../textarea/textarea';\n\nexport interface IInputGroupProps extends React.ComponentProps<'div'> {}\n\nexport const InputGroup = ({ className, ...props }: IInputGroupProps) => {\n  return (\n    <div\n      data-slot=\"input-group\"\n      className={cn(\n        'group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-control transition-colors outline-none',\n        'has-disabled:bg-input/50 has-disabled:opacity-50 ',\n        'has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',\n        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto',\n        'has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport type TInputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-foreground/70 select-none [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',\n        'inline-end': 'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',\n        'block-start': 'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',\n        'block-end': 'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',\n      },\n    },\n    defaultVariants: {\n      align: 'inline-start',\n    },\n  },\n);\n\nexport interface IInputGroupAddonProps extends React.ComponentProps<'div'>, VariantProps<typeof inputGroupAddonVariants> {}\n\nexport const InputGroupAddon = ({ className, align = 'inline-start', ...props }: IInputGroupAddonProps) => {\n  return (\n    <div\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onPointerDown={(event) => {\n        if ((event.target as HTMLElement).closest('button')) {\n          return;\n        }\n        event.currentTarget.parentElement?.querySelector('input')?.focus();\n      }}\n      {...props}\n    />\n  );\n};\n\nconst inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-none', {\n  variants: {\n    size: {\n      xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n      sm: '',\n      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',\n      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',\n    },\n  },\n  defaultVariants: {\n    size: 'xs',\n  },\n});\n\nexport type TInputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: 'button' | 'submit' | 'reset';\n  };\n\nexport const InputGroupButton = ({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }: TInputGroupButtonProps) => {\n  return <Button type={type} data-size={size} variant={variant} className={cn(inputGroupButtonVariants({ size }), className)} {...props} />;\n};\n\nexport const InputGroupText = ({ className, ...props }: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\"flex items-center gap-2 text-sm text-foreground/70 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  );\n};\n\nexport interface IInputGroupInputProps extends React.ComponentProps<'input'> {}\n\nexport const InputGroupInput = ({ className, ...props }: IInputGroupInputProps) => {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const InputGroupTextarea = ({ className, ...props }: React.ComponentProps<'textarea'>) => {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAa,cAAc,EAAE,WAAW,GAAG,YAA8B;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,mIACA,qDACA,6QACA,sLACA,iMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,IAAM,0BAA0B,IAC9B,sMACA;CACE,UAAU,EACR,OAAO;EACL,gBAAgB;EAChB,cAAc;EACd,eAAe;EACf,aAAa;CACf,EACF;CACA,iBAAiB,EACf,OAAO,eACT;AACF,CACF;AAIA,IAAa,mBAAmB,EAAE,WAAW,QAAQ,gBAAgB,GAAG,YAAmC;CACzG,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,MAAM,CAAC,GAAG,SAAS;EAC3D,gBAAgB,UAAU;GACxB,IAAK,MAAM,OAAuB,QAAQ,QAAQ,GAChD;GAEF,MAAM,cAAc,eAAe,cAAc,OAAO,CAAC,EAAE,MAAM;EACnE;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,2BAA2B,IAAI,+CAA+C;CAClF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WAAW;EACX,WAAW;CACb,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;AAOD,IAAa,oBAAoB,EAAE,WAAW,OAAO,UAAU,UAAU,SAAS,OAAO,MAAM,GAAG,YAAoC;CACpI,OAAO,oBAAC,QAAD;EAAc;EAAM,aAAW;EAAe;EAAS,WAAW,GAAG,yBAAyB,EAAE,KAAK,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I;AAEA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAA0C;CACvF,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,uHAAuH,SAAS;EAC9I,GAAI;CACL,CAAA;AAEL;AAIA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAmC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oLACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAA8C;CAC/F,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}