@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/ui/DropdownMenu/index.js

@@ -0,0 +1,181 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { dropdownMenuStyles } from "./DropdownMenu.styles.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ArrowRight01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
+
+//#region src/react-ui/ui/DropdownMenu/index.tsx
+/**
+* DropdownMenu — context menu built on Base UI Menu primitive.
+*
+* @example
+* ```tsx
+* <DropdownMenu>
+*   <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+*   <DropdownMenuContent>
+*     <DropdownMenuItem>Item 1</DropdownMenuItem>
+*     <DropdownMenuSeparator />
+*     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+*   </DropdownMenuContent>
+* </DropdownMenu>
+* ```
+*/
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+/** DropdownMenuPortal — renders dropdown content in a portal. */
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+/** DropdownMenuTrigger — element that opens the dropdown. */
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+/** DropdownMenuContent — popup content area for the dropdown. */
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, slots, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn(dropdownMenuStyles.content, slots?.content, className),
+			...props
+		})
+	}) });
+}
+/** DropdownMenuGroup — groups related menu items. */
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+/** DropdownMenuLabel — label for a group of menu items. */
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn(dropdownMenuStyles.label, className),
+		...props
+	});
+}
+/** DropdownMenuItem — a single selectable menu item. */
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn(dropdownMenuStyles.item, className),
+		...props
+	});
+}
+/** DropdownMenuSub — submenu root. */
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+/** DropdownMenuSubTrigger — trigger for opening a submenu. */
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn(dropdownMenuStyles.subTrigger, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(HugeiconsIcon, {
+			icon: ArrowRight01Icon,
+			strokeWidth: 2,
+			className: "ml-auto"
+		})]
+	});
+}
+/** DropdownMenuSubContent — content area for a submenu. */
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn(dropdownMenuStyles.subContent, className),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		...props
+	});
+}
+/** DropdownMenuCheckboxItem — menu item with checkbox behavior. */
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn(dropdownMenuStyles.checkboxItem, className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 flex items-center justify-center pointer-events-none",
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Tick02Icon,
+				strokeWidth: 2
+			}) })
+		}), children]
+	});
+}
+/** DropdownMenuRadioGroup — groups radio items. */
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+/** DropdownMenuRadioItem — menu item with radio behavior. */
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn(dropdownMenuStyles.radioItem, className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "absolute right-2 flex items-center justify-center pointer-events-none",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Tick02Icon,
+				strokeWidth: 2
+			}) })
+		}), children]
+	});
+}
+/** DropdownMenuSeparator — visual divider between menu items. */
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn(dropdownMenuStyles.separator, className),
+		...props
+	});
+}
+/** DropdownMenuShortcut — keyboard shortcut hint text. */
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn(dropdownMenuStyles.shortcut, className),
+		...props
+	});
+}
+
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/react-ui/ui/Field/Field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Field/Field.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,qDAAqD;AACrD,KAAK,SAAS,GACV,MAAM,GACN,KAAK,GACL,QAAQ,GACR,OAAO,GACP,SAAS,GACT,OAAO,GACP,OAAO,GACP,aAAa,GACb,WAAW,GACX,OAAO,CAAC;AAEZ,QAAA,MAAM,WAAW,EAAE,UAAU,CAAC,SAAS,CAWtC,CAAC;AAEF,mDAAmD;AACnD,QAAA,MAAM,aAAa;;8EAajB,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/react-ui/ui/Field/Field.styles.js

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/Field/Field.styles.ts
+const fieldStyles = {
+	root: "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+	set: "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+	legend: "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+	group: "gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+	content: "gap-0.5 group/field-content flex flex-1 flex-col leading-snug",
+	label: "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+	title: "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
+	description: "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+	separator: "-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative",
+	error: "text-destructive text-sm font-normal"
+};
+/** CVA variants for the Field root orientation. */
+const fieldVariants = cva(fieldStyles.root, {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		responsive: "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+
+//#endregion
+export { fieldStyles, fieldVariants };

package/dist/react-ui/ui/Field/Field.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Field/Field.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE/D,wCAAwC;AACxC,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;IAC/D,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,2CAA2C;AAC3C,UAAU,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IAChE,8BAA8B;IAC9B,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC9B;AAED,0CAA0C;AAC1C,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,qCAAqC;AACrC,UAAU,WACR,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,4CAA4C;AAC5C,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEtD,0CAA0C;AAC1C,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEtD,0CAA0C;AAC1C,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD,gDAAgD;AAChD,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAExD,8CAA8C;AAC9C,UAAU,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,0CAA0C;AAC1C,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5D,yCAAyC;IACzC,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC,CAAC;CAClD;AAED,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,GACjB,CAAC"}

package/dist/react-ui/ui/Field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Field/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAe,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,KAAK,EACV,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;GASG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAQxD;AAED,mDAAmD;AACnD,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,OAAkB,EAClB,GAAG,KAAK,EACT,EAAE,iBAAiB,2CASnB;AAED,2DAA2D;AAC3D,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ5D;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,WAAW,2CAUb;AAED,qDAAqD;AACrD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQhE;AAED,2DAA2D;AAC3D,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ5D;AAED,0DAA0D;AAC1D,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ5D;AAED,kDAAkD;AAClD,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQxE;AAED,0EAA0E;AAC1E,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAmBtB;AAED;;;;;;;;;GASG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,kDA0ClB;AAED,OAAO,EACL,KAAK,EACL,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,aAAa,GACd,CAAC;AAEF,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/react-ui/ui/Field/index.js

@@ -0,0 +1,145 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { Label } from "../Label/index.js";
+import { Separator } from "../Separator/index.js";
+import { fieldStyles, fieldVariants } from "./Field.styles.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/Field/index.tsx
+/**
+* FieldSet — groups related form fields.
+*
+* @example
+* ```tsx
+* <FieldSet>
+*   <Field><FieldLabel>Name</FieldLabel></Field>
+* </FieldSet>
+* ```
+*/
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "field-set",
+		className: cn(fieldStyles.set, className),
+		...props
+	});
+}
+/** FieldLegend — legend element for a FieldSet. */
+function FieldLegend({ className, variant = "legend", ...props }) {
+	return /* @__PURE__ */ jsx("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: cn(fieldStyles.legend, className),
+		...props
+	});
+}
+/** FieldGroup — vertical grouping container for fields. */
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cn(fieldStyles.group, className),
+		...props
+	});
+}
+/**
+* Field — form field container with orientation variants.
+*
+* @param orientation - Layout direction: 'vertical', 'horizontal', 'responsive'
+*
+* @example
+* ```tsx
+* <Field orientation="horizontal">
+*   <FieldLabel>Email</FieldLabel>
+*   <Input type="email" />
+* </Field>
+* ```
+*/
+function Field({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+}
+/** FieldContent — content wrapper inside a field. */
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn(fieldStyles.content, className),
+		...props
+	});
+}
+/** FieldLabel — styled label using the Label component. */
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: cn(fieldStyles.label, className),
+		...props
+	});
+}
+/** FieldTitle — alternative title display for a field. */
+function FieldTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-label",
+		className: cn(fieldStyles.title, className),
+		...props
+	});
+}
+/** FieldDescription — helper text for a field. */
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn(fieldStyles.description, className),
+		...props
+	});
+}
+/** FieldSeparator — divider between fields with optional text content. */
+function FieldSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": !!children,
+		className: cn(fieldStyles.separator, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground px-2 bg-background relative mx-auto block w-fit",
+			"data-slot": "field-separator-content",
+			children
+		})]
+	});
+}
+/**
+* FieldError — displays validation errors for a field.
+*
+* @param errors - Array of error objects with message property
+*
+* @example
+* ```tsx
+* <FieldError errors={[{ message: 'Required field' }]} />
+* ```
+*/
+function FieldError({ className, children, errors, ...props }) {
+	const content = useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn(fieldStyles.error, className),
+		...props,
+		children: content
+	});
+}
+
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/react-ui/ui/Input/Input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Input/Input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,8CAA8C;AAC9C,KAAK,SAAS,GAAG,MAAM,CAAC;AAExB,QAAA,MAAM,WAAW,EAAE,UAAU,CAAC,SAAS,CAEtC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/react-ui/ui/Input/Input.styles.js

@@ -0,0 +1,5 @@
+//#region src/react-ui/ui/Input/Input.styles.ts
+const inputStyles = { root: "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50" };
+
+//#endregion
+export { inputStyles };

package/dist/react-ui/ui/Input/Input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,qCAAqC;AACrC,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACzD,iDAAiD;IACjD,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/ui/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Input/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAS/D;AAED,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/react-ui/ui/Input/index.js

@@ -0,0 +1,29 @@
+import { cn } from "../../lib/utils.js";
+import { inputStyles } from "./Input.styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+
+//#region src/react-ui/ui/Input/index.tsx
+/**
+* Input — styled text input wrapping Base UI Input primitive.
+*
+* @param type - HTML input type
+* @param slots - Override classes for input visual regions
+*
+* @example
+* ```tsx
+* <Input type="email" placeholder="Enter email" />
+* ```
+*/
+function Input$1({ className, type, slots, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn(inputStyles.root, slots?.root, className),
+		...props
+	});
+}
+
+//#endregion
+export { Input$1 as Input };

package/dist/react-ui/ui/InputGroup/InputGroup.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/InputGroup/InputGroup.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,0DAA0D;AAC1D,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AAElF,QAAA,MAAM,gBAAgB,EAAE,UAAU,CAAC,cAAc,CAOhD,CAAC;AAEF,kDAAkD;AAClD,QAAA,MAAM,uBAAuB;;8EAc3B,CAAC;AAEH,gDAAgD;AAChD,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AAEH,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,wBAAwB,GACzB,CAAC;AACF,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/react-ui/ui/InputGroup/InputGroup.styles.js

@@ -0,0 +1,34 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/InputGroup/InputGroup.styles.ts
+const inputGroupStyles = {
+	root: "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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-[>[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 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+	addon: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+	button: "gap-2 text-sm shadow-none flex items-center",
+	text: "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+	input: "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 flex-1",
+	textarea: "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 flex-1 resize-none"
+};
+/** CVA variants for InputGroupAddon alignment. */
+const inputGroupAddonVariants = cva(inputGroupStyles.addon, {
+	variants: { align: {
+		"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+		"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+		"block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+		"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+/** CVA variants for InputGroupButton sizing. */
+const inputGroupButtonVariants = cva(inputGroupStyles.button, {
+	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" }
+});
+
+//#endregion
+export { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupStyles };

package/dist/react-ui/ui/InputGroup/InputGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/InputGroup/InputGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE7G,0CAA0C;AAC1C,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC5D,uDAAuD;IACvD,KAAK,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;CACvC;AAED,iCAAiC;AACjC,UAAU,qBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EACjC,YAAY,CAAC,OAAO,uBAAuB,CAAC;CAAG;AAEnD,kCAAkC;AAClC,UAAU,sBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,EAClD,YAAY,CAAC,OAAO,wBAAwB,CAAC;IAC/C,2BAA2B;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;IAC3C,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,gCAAgC;AAChC,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEzD,iCAAiC;AACjC,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAE3D,oCAAoC;AACpC,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;AAEjE,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACrB,wBAAwB,GACzB,CAAC"}

package/dist/react-ui/ui/InputGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/InputGroup/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,uBAAuB,EACvB,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EACV,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACrB,wBAAwB,EACzB,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;;;;GAUG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CASnE;AAED,wEAAwE;AACxE,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAgBvB;AAED,+DAA+D;AAC/D,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAW,EACX,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAmBxB;AAED,2DAA2D;AAC3D,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAOpE;AAED,8EAA8E;AAC9E,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAQtE;AAED,oFAAoF;AACpF,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAQ1B;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,GACzB,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,oBAAoB,CAAC;AAE5B,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/react-ui/ui/InputGroup/index.js

@@ -0,0 +1,81 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/index.js";
+import { Input } from "../Input/index.js";
+import { Textarea } from "../Textarea/index.js";
+import { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupStyles } from "./InputGroup.styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/InputGroup/index.tsx
+/**
+* InputGroup — container for composing inputs with addons and buttons.
+*
+* @example
+* ```tsx
+* <InputGroup>
+*   <InputGroupAddon align="inline-start">$</InputGroupAddon>
+*   <InputGroupInput placeholder="Amount" />
+* </InputGroup>
+* ```
+*/
+function InputGroup({ className, slots, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn(inputGroupStyles.root, slots?.root, className),
+		...props
+	});
+}
+/** InputGroupAddon — decorative addon element within an input group. */
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+/** InputGroupButton — button element within an input group. */
+function InputGroupButton({ className, size = "xs", ...props }) {
+	const buttonSize = size === "xs" ? "sm" : size === "icon-xs" || size === "icon-sm" ? "icon" : "default";
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		"data-slot": "input-group-button",
+		"data-size": size,
+		size: buttonSize,
+		variant: "ghost",
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+/** InputGroupText — text element within an input group. */
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(inputGroupStyles.text, className),
+		...props
+	});
+}
+/** InputGroupInput — input element within an input group (no border/ring). */
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn(inputGroupStyles.input, className),
+		...props
+	});
+}
+/** InputGroupTextarea — textarea element within an input group (no border/ring). */
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn(inputGroupStyles.textarea, className),
+		...props
+	});
+}
+
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/react-ui/ui/Label/Label.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Label/Label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,SAAS,GAAG,MAAM,CAAC;AAExB,QAAA,MAAM,WAAW,EAAE,UAAU,CAAC,SAAS,CAEtC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/react-ui/ui/Label/Label.styles.js

@@ -0,0 +1,5 @@
+//#region src/react-ui/ui/Label/Label.styles.ts
+const labelStyles = { root: "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed" };
+
+//#endregion
+export { labelStyles };

package/dist/react-ui/ui/Label/Label.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Label/Label.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,qCAAqC;AACrC,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/react-ui/ui/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Label/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;;;;GAOG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAQzD;AAED,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/react-ui/ui/Label/index.js

@@ -0,0 +1,24 @@
+import { cn } from "../../lib/utils.js";
+import { labelStyles } from "./Label.styles.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/Label/index.tsx
+/**
+* Label — accessible form label element.
+*
+* @example
+* ```tsx
+* <Label htmlFor="email">Email</Label>
+* ```
+*/
+function Label({ className, slots, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn(labelStyles.root, slots?.root, className),
+		...props
+	});
+}
+
+//#endregion
+export { Label };

package/dist/react-ui/ui/Menu/Menu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Menu/Menu.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;;;;;;GAUG;AACH,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,GACN,cAAc,GACd,WAAW,GACX,OAAO,GACP,YAAY,GACZ,WAAW,GACX,UAAU,GACV,OAAO,GACP,WAAW,GACX,gBAAgB,CAAC;AAErB;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,EAAE,UAAU,CAAC,QAAQ,CAc3C,CAAC"}

package/dist/react-ui/ui/Menu/Menu.styles.js

@@ -0,0 +1,32 @@
+//#region src/react-ui/ui/Menu/Menu.styles.ts
+/**
+* Default style map for every Menu slot.
+*
+* Base classes are intentionally minimal so consumers can fully
+* control the visual appearance through `slots` overrides.
+* No colors are hardcoded -- all visuals come from consumer styles.
+*
+* @example
+* ```typescript
+* import { menuStyles } from './Menu.styles';
+* cn(menuStyles.popup, slots?.popup, className);
+* ```
+*/
+const menuStyles = {
+	root: "",
+	popup: "",
+	trigger: "",
+	item: "",
+	checkboxItem: "",
+	radioItem: "",
+	group: "",
+	groupLabel: "",
+	separator: "",
+	shortcut: "",
+	arrow: "",
+	highlight: "",
+	submenuTrigger: ""
+};
+
+//#endregion
+export { menuStyles };