@mks2508/mks-ui 0.1.4 → 0.2.0

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

@@ -0,0 +1,39 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { fieldVariants, FieldSlot } from './Field.styles';
+/** Props for the FieldSet component. */
+interface IFieldSetProps extends React.ComponentProps<'fieldset'> {
+    slots?: SlotOverrides<FieldSlot>;
+}
+/** Props for the FieldLegend component. */
+interface IFieldLegendProps extends React.ComponentProps<'legend'> {
+    /** Legend display variant. */
+    variant?: 'legend' | 'label';
+}
+/** Props for the FieldGroup component. */
+type IFieldGroupProps = React.ComponentProps<'div'>;
+/** Props for the Field component. */
+interface IFieldProps extends React.ComponentProps<'div'>, VariantProps<typeof fieldVariants> {
+    slots?: SlotOverrides<FieldSlot>;
+}
+/** Props for the FieldContent component. */
+type IFieldContentProps = React.ComponentProps<'div'>;
+/** Props for the FieldLabel component. */
+type IFieldLabelProps = React.ComponentProps<'label'>;
+/** Props for the FieldTitle component. */
+type IFieldTitleProps = React.ComponentProps<'div'>;
+/** Props for the FieldDescription component. */
+type IFieldDescriptionProps = React.ComponentProps<'p'>;
+/** Props for the FieldSeparator component. */
+interface IFieldSeparatorProps extends React.ComponentProps<'div'> {
+    children?: React.ReactNode;
+}
+/** Props for the FieldError component. */
+interface IFieldErrorProps extends React.ComponentProps<'div'> {
+    /** Array of error objects to display. */
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}
+export type { IFieldSetProps, IFieldLegendProps, IFieldGroupProps, IFieldProps, IFieldContentProps, IFieldLabelProps, IFieldTitleProps, IFieldDescriptionProps, IFieldSeparatorProps, IFieldErrorProps, };
+//# sourceMappingURL=Field.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.types.d.ts","sourceRoot":"","sources":["../../../../src/react/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/Field/index.d.ts

@@ -0,0 +1,56 @@
+import { fieldVariants } from './Field.styles';
+import type { IFieldSetProps, IFieldLegendProps, IFieldGroupProps, IFieldProps, IFieldContentProps, IFieldLabelProps, IFieldTitleProps, IFieldDescriptionProps, IFieldSeparatorProps, IFieldErrorProps } from './Field.types';
+/**
+ * FieldSet — groups related form fields.
+ *
+ * @example
+ * ```tsx
+ * <FieldSet>
+ *   <Field><FieldLabel>Name</FieldLabel></Field>
+ * </FieldSet>
+ * ```
+ */
+declare function FieldSet({ className, ...props }: IFieldSetProps): import("react/jsx-runtime").JSX.Element;
+/** FieldLegend — legend element for a FieldSet. */
+declare function FieldLegend({ className, variant, ...props }: IFieldLegendProps): import("react/jsx-runtime").JSX.Element;
+/** FieldGroup — vertical grouping container for fields. */
+declare function FieldGroup({ className, ...props }: IFieldGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function Field({ className, orientation, ...props }: IFieldProps): import("react/jsx-runtime").JSX.Element;
+/** FieldContent — content wrapper inside a field. */
+declare function FieldContent({ className, ...props }: IFieldContentProps): import("react/jsx-runtime").JSX.Element;
+/** FieldLabel — styled label using the Label component. */
+declare function FieldLabel({ className, ...props }: IFieldLabelProps): import("react/jsx-runtime").JSX.Element;
+/** FieldTitle — alternative title display for a field. */
+declare function FieldTitle({ className, ...props }: IFieldTitleProps): import("react/jsx-runtime").JSX.Element;
+/** FieldDescription — helper text for a field. */
+declare function FieldDescription({ className, ...props }: IFieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
+/** FieldSeparator — divider between fields with optional text content. */
+declare function FieldSeparator({ children, className, ...props }: IFieldSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * FieldError — displays validation errors for a field.
+ *
+ * @param errors - Array of error objects with message property
+ *
+ * @example
+ * ```tsx
+ * <FieldError errors={[{ message: 'Required field' }]} />
+ * ```
+ */
+declare function FieldError({ className, children, errors, ...props }: IFieldErrorProps): import("react/jsx-runtime").JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, fieldVariants, };
+export type { IFieldSetProps, IFieldLegendProps, IFieldGroupProps, IFieldProps, IFieldContentProps, IFieldLabelProps, IFieldTitleProps, IFieldDescriptionProps, IFieldSeparatorProps, IFieldErrorProps, } from './Field.types';
+export type { FieldSlot } from './Field.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/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/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/Input/Input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/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/Input/Input.styles.js

@@ -0,0 +1,5 @@
+//#region src/react/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/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/Input/Input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/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/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/InputGroup/InputGroup.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/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/InputGroup/InputGroup.styles.js

@@ -0,0 +1,34 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react/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/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/InputGroup/InputGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.types.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/InputGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/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/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/Label/Label.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/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/Label/Label.styles.js

@@ -0,0 +1,5 @@
+//#region src/react/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/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/Label/Label.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/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 };