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

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-1.5", 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-none 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-1.5', 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-none 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,qCAAqC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC3H;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OACE,oBAAC,MAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAET,8IACA,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,38 @@
+"use client";
+import { cn } from "../../../lib/utils.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: "isolate z-50",
+			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 { 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 align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className=\"isolate z-50\">\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":";;;;;AAKA,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;GAAwC;GAAoB;GAAmB;GAAkB;GAAY,WAAU;GACrH,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-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", 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-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,WAAS,EAAE,WAAW,MAAM,GAAG,YAA2C;CACrF,OACE,oBAAC,OAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,+oBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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-input transition-colors outline-none", "has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/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-input transition-colors outline-none',\n        'has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/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,iIACA,gPACA,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"}

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

@@ -0,0 +1,48 @@
+import { cn } from "../../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconMinus } from "@tabler/icons-react";
+import { OTPInput, OTPInputContext } from "input-otp";
+//#region ../ui/src/components/ui/input-otp/input-otp.tsx
+var InputOTP = ({ className, containerClassName, ...props }) => {
+	return /* @__PURE__ */ jsx(OTPInput, {
+		"data-slot": "input-otp",
+		containerClassName: cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName),
+		spellCheck: false,
+		className: cn("disabled:cursor-not-allowed", className),
+		...props
+	});
+};
+var InputOTPGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: cn("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
+		...props
+	});
+};
+var InputOTPSlot = ({ index, className, ...props }) => {
+	const { char, hasFakeCaret, isActive } = React.useContext(OTPInputContext)?.slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive,
+		className: cn("relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000 motion-reduce:animate-none" })
+		})]
+	});
+};
+var InputOTPSeparator = ({ ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		className: "flex items-center [&_svg:not([class*='size-'])]:size-4",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx(IconMinus, {})
+	});
+};
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+
+//# sourceMappingURL=input-otp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../../../../../../ui/src/components/ui/input-otp/input-otp.tsx"],"sourcesContent":["import { cn } from '@edyn/ui/lib/utils';\nimport { IconMinus } from '@tabler/icons-react';\nimport { OTPInput, OTPInputContext } from 'input-otp';\nimport * as React from 'react';\n\nexport const InputOTP = ({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string;\n}) => {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn('cn-input-otp flex items-center has-disabled:opacity-50', containerClassName)}\n      spellCheck={false}\n      className={cn('disabled:cursor-not-allowed', className)}\n      {...props}\n    />\n  );\n};\n\nexport const InputOTPGroup = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        'flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const InputOTPSlot = ({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  index: number;\n}) => {\n  const inputOTPContext = React.useContext(OTPInputContext);\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        'relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40',\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000 motion-reduce:animate-none\" />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport const InputOTPSeparator = ({ ...props }: React.ComponentProps<'div'>) => {\n  return (\n    <div data-slot=\"input-otp-separator\" className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\" aria-hidden=\"true\" {...props}>\n      <IconMinus />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAKA,IAAa,YAAY,EACvB,WACA,oBACA,GAAG,YAGC;CACJ,OACE,oBAAC,UAAD;EACE,aAAU;EACV,oBAAoB,GAAG,0DAA0D,kBAAkB;EACnG,YAAY;EACZ,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAyC;CACrF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAC3B,OACA,WACA,GAAG,YAGC;CAEJ,MAAM,EAAE,MAAM,cAAc,aADJ,MAAM,WAAW,eACA,CAAA,EAAiB,MAAM,UAAU,CAAC;CAE3E,OACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,6eACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,MACA,gBACC,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,OAAD,EAAK,WAAU,sFAAuF,CAAA;EACnG,CAAA,CAEJ;;AAET;AAEA,IAAa,qBAAqB,EAAE,GAAG,YAAyC;CAC9E,OACE,oBAAC,OAAD;EAAK,aAAU;EAAsB,WAAU;EAAyD,eAAY;EAAO,GAAI;EAC7H,UAAA,oBAAC,WAAD,CAAY,CAAA;CACT,CAAA;AAET"}

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 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [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 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [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,8OACA;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-none 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-none 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,uNACA,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"}