@mks2508/mks-ui 0.1.4 → 0.2.1

package/dist/{components/ui/field.js → react-ui/ui/Field/index.js}

@@ -1,43 +1,60 @@
-"use client";
+'use client';
 
 import { cn } from "../../lib/utils.js";
-import { Label } from "./label.js";
-import { Separator } from "./separator.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";
-import { cva } from "class-variance-authority";
 
-//#region src/components/ui/field.tsx
+//#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("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className),
+		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("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className),
+		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("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", className),
+		className: cn(fieldStyles.group, className),
 		...props
 	});
 }
-const fieldVariants = cva("data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
-	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" }
-});
+/**
+* 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",
@@ -47,39 +64,44 @@ function Field({ className, orientation = "vertical", ...props }) {
 		...props
 	});
 }
+/** FieldContent — content wrapper inside a field. */
 function FieldContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "field-content",
-		className: cn("gap-0.5 group/field-content flex flex-1 flex-col leading-snug", className),
+		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("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", className),
+		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("gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug", className),
+		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("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", className),
+		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("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className),
+		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",
@@ -88,6 +110,16 @@ function FieldSeparator({ children, className, ...props }) {
 		})]
 	});
 }
+/**
+* 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;
@@ -103,7 +135,7 @@ function FieldError({ className, children, errors, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		role: "alert",
 		"data-slot": "field-error",
-		className: cn("text-destructive text-sm font-normal", className),
+		className: cn(fieldStyles.error, className),
 		...props,
 		children: content
 	});

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

@@ -0,0 +1,7 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Input component. */
+type InputSlot = 'root';
+declare const inputStyles: StyleSlots<InputSlot>;
+export { inputStyles };
+export type { InputSlot };
+//# sourceMappingURL=Input.styles.d.ts.map

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

@@ -0,0 +1,9 @@
+import type { SlotOverrides } from '../../../core/types';
+import type { InputSlot } from './Input.styles';
+/** Props for the Input component. */
+interface IInputProps extends React.ComponentProps<'input'> {
+    /** Override classes for input visual regions. */
+    slots?: SlotOverrides<InputSlot>;
+}
+export type { IInputProps };
+//# sourceMappingURL=Input.types.d.ts.map

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

@@ -0,0 +1,17 @@
+import type { IInputProps } from './Input.types';
+/**
+ * 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" />
+ * ```
+ */
+declare function Input({ className, type, slots, ...props }: IInputProps): import("react/jsx-runtime").JSX.Element;
+export { Input };
+export type { IInputProps } from './Input.types';
+export type { InputSlot } from './Input.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,15 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the InputGroup component family. */
+type InputGroupSlot = 'root' | 'addon' | 'button' | 'text' | 'input' | 'textarea';
+declare const inputGroupStyles: StyleSlots<InputGroupSlot>;
+/** CVA variants for InputGroupAddon alignment. */
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** CVA variants for InputGroupButton sizing. */
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { inputGroupStyles, inputGroupAddonVariants, inputGroupButtonVariants, };
+export type { InputGroupSlot };
+//# sourceMappingURL=InputGroup.styles.d.ts.map

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

@@ -0,0 +1,28 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { inputGroupAddonVariants, inputGroupButtonVariants, InputGroupSlot } from './InputGroup.styles';
+/** Props for the InputGroup container. */
+interface IInputGroupProps extends React.ComponentProps<'div'> {
+    /** Override classes for input group visual regions. */
+    slots?: SlotOverrides<InputGroupSlot>;
+}
+/** Props for InputGroupAddon. */
+interface IInputGroupAddonProps extends React.ComponentProps<'div'>, VariantProps<typeof inputGroupAddonVariants> {
+}
+/** Props for InputGroupButton. */
+interface IInputGroupButtonProps extends Omit<React.ComponentProps<'button'>, 'size'>, VariantProps<typeof inputGroupButtonVariants> {
+    /** Button size variant. */
+    size?: 'xs' | 'sm' | 'icon-xs' | 'icon-sm';
+    /** Button visual variant (passed to Button). */
+    variant?: string;
+    /** Disabled state. */
+    disabled?: boolean;
+}
+/** Props for InputGroupText. */
+type IInputGroupTextProps = React.ComponentProps<'span'>;
+/** Props for InputGroupInput. */
+type IInputGroupInputProps = React.ComponentProps<'input'>;
+/** Props for InputGroupTextarea. */
+type IInputGroupTextareaProps = React.ComponentProps<'textarea'>;
+export type { IInputGroupProps, IInputGroupAddonProps, IInputGroupButtonProps, IInputGroupTextProps, IInputGroupInputProps, IInputGroupTextareaProps, };
+//# sourceMappingURL=InputGroup.types.d.ts.map

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

@@ -0,0 +1,28 @@
+import { inputGroupAddonVariants, inputGroupButtonVariants } from './InputGroup.styles';
+import type { IInputGroupProps, IInputGroupAddonProps, IInputGroupButtonProps, IInputGroupTextProps, IInputGroupInputProps, IInputGroupTextareaProps } from './InputGroup.types';
+/**
+ * InputGroup — container for composing inputs with addons and buttons.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupAddon align="inline-start">$</InputGroupAddon>
+ *   <InputGroupInput placeholder="Amount" />
+ * </InputGroup>
+ * ```
+ */
+declare function InputGroup({ className, slots, ...props }: IInputGroupProps): import("react/jsx-runtime").JSX.Element;
+/** InputGroupAddon — decorative addon element within an input group. */
+declare function InputGroupAddon({ className, align, ...props }: IInputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
+/** InputGroupButton — button element within an input group. */
+declare function InputGroupButton({ className, size, ...props }: IInputGroupButtonProps): import("react/jsx-runtime").JSX.Element;
+/** InputGroupText — text element within an input group. */
+declare function InputGroupText({ className, ...props }: IInputGroupTextProps): import("react/jsx-runtime").JSX.Element;
+/** InputGroupInput — input element within an input group (no border/ring). */
+declare function InputGroupInput({ className, ...props }: IInputGroupInputProps): import("react/jsx-runtime").JSX.Element;
+/** InputGroupTextarea — textarea element within an input group (no border/ring). */
+declare function InputGroupTextarea({ className, ...props }: IInputGroupTextareaProps): import("react/jsx-runtime").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, };
+export type { IInputGroupProps, IInputGroupAddonProps, IInputGroupButtonProps, IInputGroupTextProps, IInputGroupInputProps, IInputGroupTextareaProps, } from './InputGroup.types';
+export type { InputGroupSlot } from './InputGroup.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,6 @@
+import type { StyleSlots } from '../../../core/types';
+type LabelSlot = 'root';
+declare const labelStyles: StyleSlots<LabelSlot>;
+export { labelStyles };
+export type { LabelSlot };
+//# sourceMappingURL=Label.styles.d.ts.map

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

@@ -0,0 +1,8 @@
+import type { SlotOverrides } from '../../../core/types';
+import type { LabelSlot } from './Label.styles';
+/** Props for the Label component. */
+interface ILabelProps extends React.ComponentProps<'label'> {
+    slots?: SlotOverrides<LabelSlot>;
+}
+export type { ILabelProps };
+//# sourceMappingURL=Label.types.d.ts.map

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

@@ -0,0 +1,14 @@
+import type { ILabelProps } from './Label.types';
+/**
+ * Label — accessible form label element.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email</Label>
+ * ```
+ */
+declare function Label({ className, slots, ...props }: ILabelProps): import("react/jsx-runtime").JSX.Element;
+export { Label };
+export type { ILabelProps } from './Label.types';
+export type { LabelSlot } from './Label.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,42 @@
+/**
+ * Style slots and defaults for the Menu component.
+ *
+ * Each slot maps to a visual region of the Menu. Consumers override
+ * individual slots via the `slots` prop without touching internals.
+ *
+ * @module @mks2508/mks-ui/react/ui/Menu/Menu.styles
+ *
+ * @example
+ * ```tsx
+ * import { menuStyles } from './Menu.styles';
+ * // menuStyles.popup => default popup classes
+ * ```
+ */
+import type { StyleSlots } from '../../../core/types';
+/**
+ * Union of all visual regions (slots) in the Menu component tree.
+ *
+ * @example
+ * ```typescript
+ * const overrides: SlotOverrides<MenuSlot> = {
+ *   popup: 'bg-zinc-900 border-cyan-500/30',
+ *   item: 'hover:bg-white/5',
+ * };
+ * ```
+ */
+export type MenuSlot = 'root' | 'popup' | 'trigger' | 'item' | 'checkboxItem' | 'radioItem' | 'group' | 'groupLabel' | 'separator' | 'shortcut' | 'arrow' | 'highlight' | 'submenuTrigger';
+/**
+ * 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);
+ * ```
+ */
+export declare const menuStyles: StyleSlots<MenuSlot>;
+//# sourceMappingURL=Menu.styles.d.ts.map

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 };