@mks2508/mks-ui 0.1.4 → 0.2.1

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

@@ -0,0 +1,158 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { checkboxStyles } from "./Checkbox.styles.js";
+import "react";
+import { motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+
+//#region src/react-ui/ui/Checkbox/index.tsx
+const [CheckboxProvider, useCheckbox] = getStrictContext("CheckboxContext");
+/**
+* Checkbox root component with animated tap and hover interactions.
+*
+* Wraps Base UI `Checkbox.Root` with a `motion.button` render element,
+* providing spring-based press and hover scale animations. Supports both
+* controlled and uncontrolled checked state via `useControlledState`.
+*
+* @param props - Checkbox props including Base UI root props, motion props, slots, and config
+* @returns A checkbox button element with animation support
+*
+* @example
+* ```tsx
+* <Checkbox
+*   checked={isChecked}
+*   onCheckedChange={setIsChecked}
+*   slots={{ root: 'border-2 border-cyan-500 rounded-md' }}
+* >
+*   <CheckboxIndicator />
+* </Checkbox>
+* ```
+*
+* @example
+* ```tsx
+* // Indeterminate state
+* <Checkbox indeterminate>
+*   <CheckboxIndicator />
+* </Checkbox>
+* ```
+*/
+function Checkbox$1({ name, checked, defaultChecked, onCheckedChange, indeterminate, value, nativeButton, parent, disabled, readOnly, required, inputRef, id, className, slots, config, ...props }) {
+	const [isChecked, setIsChecked] = useControlledState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const tapScale = config?.tapScale ?? .95;
+	const hoverScale = config?.hoverScale ?? 1.05;
+	return /* @__PURE__ */ jsx(CheckboxProvider, {
+		value: {
+			isChecked,
+			setIsChecked,
+			isIndeterminate: indeterminate
+		},
+		children: /* @__PURE__ */ jsx(Checkbox.Root, {
+			name,
+			defaultChecked,
+			checked,
+			onCheckedChange: setIsChecked,
+			indeterminate,
+			value,
+			nativeButton,
+			parent,
+			disabled,
+			readOnly,
+			required,
+			inputRef,
+			id,
+			render: /* @__PURE__ */ jsx(motion.button, {
+				"data-slot": "checkbox",
+				whileTap: { scale: tapScale },
+				whileHover: { scale: hoverScale },
+				className: cn(checkboxStyles.root, slots?.root, className),
+				...props
+			})
+		})
+	});
+}
+/**
+* CheckboxIndicator renders an animated SVG checkmark or indeterminate line.
+*
+* Uses Motion `pathLength` and `opacity` variants for smooth check/uncheck
+* transitions. Remains mounted (`keepMounted`) to enable exit animations.
+*
+* @param props - SVG motion props plus optional slot overrides
+* @returns An animated SVG indicator element
+*
+* @example
+* ```tsx
+* <Checkbox checked={isChecked} onCheckedChange={setIsChecked}>
+*   <CheckboxIndicator className="size-4 text-white" />
+* </Checkbox>
+* ```
+*
+* @example
+* ```tsx
+* // With slot overrides
+* <CheckboxIndicator slots={{ indicator: 'size-3.5' }} />
+* ```
+*/
+function CheckboxIndicator({ className, slots, ...props }) {
+	const { isChecked, isIndeterminate } = useCheckbox();
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.svg, {
+			"data-slot": "checkbox-indicator",
+			xmlns: "http://www.w3.org/2000/svg",
+			fill: "none",
+			viewBox: "0 0 24 24",
+			strokeWidth: "3.5",
+			stroke: "currentColor",
+			initial: "unchecked",
+			animate: isChecked ? "checked" : "unchecked",
+			className: cn(checkboxStyles.indicator, slots?.indicator, className),
+			...props,
+			children: isIndeterminate ? /* @__PURE__ */ jsx(motion.line, {
+				x1: "5",
+				y1: "12",
+				x2: "19",
+				y2: "12",
+				strokeLinecap: "round",
+				initial: {
+					pathLength: 0,
+					opacity: 0
+				},
+				animate: {
+					pathLength: 1,
+					opacity: 1,
+					transition: { duration: .2 }
+				}
+			}) : /* @__PURE__ */ jsx(motion.path, {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "M4.5 12.75l6 6 9-13.5",
+				variants: {
+					checked: {
+						pathLength: 1,
+						opacity: 1,
+						transition: {
+							duration: .2,
+							delay: .2
+						}
+					},
+					unchecked: {
+						pathLength: 0,
+						opacity: 0,
+						transition: { duration: .2 }
+					}
+				}
+			})
+		})
+	});
+}
+
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxIndicator, useCheckbox };

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

@@ -0,0 +1,7 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Combobox component family. */
+type ComboboxSlot = 'root' | 'trigger' | 'content' | 'list' | 'item' | 'label' | 'separator' | 'empty' | 'chips' | 'chip' | 'chipInput';
+declare const comboboxStyles: StyleSlots<ComboboxSlot>;
+export { comboboxStyles };
+export type { ComboboxSlot };
+//# sourceMappingURL=Combobox.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Combobox/Combobox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,wDAAwD;AACxD,KAAK,YAAY,GACb,MAAM,GACN,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,OAAO,GACP,WAAW,GACX,OAAO,GACP,OAAO,GACP,MAAM,GACN,WAAW,CAAC;AAEhB,QAAA,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAc5C,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,17 @@
+//#region src/react-ui/ui/Combobox/Combobox.styles.ts
+const comboboxStyles = {
+	root: "",
+	trigger: "[&_svg:not([class*='size-'])]:size-4",
+	content: "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)",
+	list: "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
+	item: "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	label: "text-muted-foreground px-2 py-1.5 text-xs",
+	separator: "bg-border -mx-1 my-1 h-px",
+	empty: "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+	chips: "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
+	chip: "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
+	chipInput: "min-w-16 flex-1 outline-none"
+};
+
+//#endregion
+export { comboboxStyles };

package/dist/react-ui/ui/Combobox/Combobox.types.d.ts

@@ -0,0 +1,49 @@
+import type { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import type { SlotOverrides } from '../../../core/types';
+import type { ComboboxSlot } from './Combobox.styles';
+/** Props for the Combobox root. */
+type IComboboxProps = ComboboxPrimitive.Root.Props<any, any>;
+/** Props for ComboboxValue. */
+type IComboboxValueProps = ComboboxPrimitive.Value.Props;
+/** Props for ComboboxTrigger. */
+type IComboboxTriggerProps = ComboboxPrimitive.Trigger.Props;
+/** Props for ComboboxClear. */
+type IComboboxClearProps = ComboboxPrimitive.Clear.Props;
+/** Props for ComboboxInput. */
+interface IComboboxInputProps extends ComboboxPrimitive.Input.Props {
+    /** Show the trigger arrow button. */
+    showTrigger?: boolean;
+    /** Show the clear button. */
+    showClear?: boolean;
+    /** Override classes for combobox visual regions. */
+    slots?: SlotOverrides<ComboboxSlot>;
+}
+/** Props for ComboboxContent. */
+interface IComboboxContentProps extends ComboboxPrimitive.Popup.Props, Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> {
+    slots?: SlotOverrides<ComboboxSlot>;
+}
+/** Props for ComboboxList. */
+type IComboboxListProps = ComboboxPrimitive.List.Props;
+/** Props for ComboboxItem. */
+type IComboboxItemProps = ComboboxPrimitive.Item.Props;
+/** Props for ComboboxGroup. */
+type IComboboxGroupProps = ComboboxPrimitive.Group.Props;
+/** Props for ComboboxLabel. */
+type IComboboxLabelProps = ComboboxPrimitive.GroupLabel.Props;
+/** Props for ComboboxCollection. */
+type IComboboxCollectionProps = ComboboxPrimitive.Collection.Props;
+/** Props for ComboboxEmpty. */
+type IComboboxEmptyProps = ComboboxPrimitive.Empty.Props;
+/** Props for ComboboxSeparator. */
+type IComboboxSeparatorProps = ComboboxPrimitive.Separator.Props;
+/** Props for ComboboxChips. */
+type IComboboxChipsProps = React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props;
+/** Props for ComboboxChip. */
+interface IComboboxChipProps extends ComboboxPrimitive.Chip.Props {
+    /** Show the remove button on the chip. */
+    showRemove?: boolean;
+}
+/** Props for ComboboxChipsInput. */
+type IComboboxChipsInputProps = ComboboxPrimitive.Input.Props;
+export type { IComboboxProps, IComboboxValueProps, IComboboxTriggerProps, IComboboxClearProps, IComboboxInputProps, IComboboxContentProps, IComboboxListProps, IComboboxItemProps, IComboboxGroupProps, IComboboxLabelProps, IComboboxCollectionProps, IComboboxEmptyProps, IComboboxSeparatorProps, IComboboxChipsProps, IComboboxChipProps, IComboboxChipsInputProps, };
+//# sourceMappingURL=Combobox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,mCAAmC;AAEnC,KAAK,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAE7D,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,iCAAiC;AACjC,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC;AAE7D,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,+BAA+B;AAC/B,UAAU,mBAAoB,SAAQ,iBAAiB,CAAC,KAAK,CAAC,KAAK;IACjE,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED,iCAAiC;AACjC,UAAU,qBACR,SAAQ,iBAAiB,CAAC,KAAK,CAAC,KAAK,EACnC,IAAI,CACF,iBAAiB,CAAC,UAAU,CAAC,KAAK,EAClC,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,GAAG,QAAQ,CAC3D;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED,8BAA8B;AAC9B,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEvD,8BAA8B;AAC9B,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEvD,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC;AAE9D,oCAAoC;AACpC,KAAK,wBAAwB,GAAG,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC;AAEnE,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,mCAAmC;AACnC,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,SAAS,CAAC,KAAK,CAAC;AAEjE,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,iBAAiB,CAAC,KAAK,CAAC,GACpF,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEhC,8BAA8B;AAC9B,UAAU,kBAAmB,SAAQ,iBAAiB,CAAC,IAAI,CAAC,KAAK;IAC/D,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,oCAAoC;AACpC,KAAK,wBAAwB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAE9D,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,GACzB,CAAC"}

package/dist/react-ui/ui/Combobox/index.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import type { IComboboxTriggerProps, IComboboxInputProps, IComboboxContentProps, IComboboxListProps, IComboboxItemProps, IComboboxGroupProps, IComboboxLabelProps, IComboboxCollectionProps, IComboboxEmptyProps, IComboboxSeparatorProps, IComboboxChipsProps, IComboboxChipProps, IComboboxChipsInputProps, IComboboxValueProps } from './Combobox.types';
+/** Combobox — root component wrapping Base UI Combobox. */
+declare const Combobox: typeof ComboboxPrimitive.Root;
+/** ComboboxValue — displays the selected value. */
+declare function ComboboxValue({ ...props }: IComboboxValueProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxTrigger — trigger button with arrow icon. */
+declare function ComboboxTrigger({ className, children, ...props }: IComboboxTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxInput — text input with optional trigger and clear buttons.
+ *
+ * @param showTrigger - Show dropdown arrow button
+ * @param showClear - Show clear button
+ *
+ * @example
+ * ```tsx
+ * <Combobox>
+ *   <ComboboxInput showClear placeholder="Search..." />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxItem>Option 1</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ * ```
+ */
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: IComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxContent — popup content area for the combobox. */
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, slots, ...props }: IComboboxContentProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxList — scrollable list of combobox items. */
+declare function ComboboxList({ className, ...props }: IComboboxListProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxItem — a single selectable item with check indicator. */
+declare function ComboboxItem({ className, children, ...props }: IComboboxItemProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxGroup — groups related combobox items. */
+declare function ComboboxGroup({ className, ...props }: IComboboxGroupProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxLabel — label for a group of combobox items. */
+declare function ComboboxLabel({ className, ...props }: IComboboxLabelProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxCollection — collection for combobox items. */
+declare function ComboboxCollection({ ...props }: IComboboxCollectionProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxEmpty — displayed when no items match the query. */
+declare function ComboboxEmpty({ className, ...props }: IComboboxEmptyProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxSeparator — visual divider between combobox items. */
+declare function ComboboxSeparator({ className, ...props }: IComboboxSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxChips — container for multi-select chips. */
+declare function ComboboxChips({ className, ...props }: IComboboxChipsProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxChip — individual chip with optional remove button. */
+declare function ComboboxChip({ className, children, showRemove, ...props }: IComboboxChipProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxChipsInput — input within the chips container for multi-select. */
+declare function ComboboxChipsInput({ className, ...props }: IComboboxChipsInputProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to create an anchor ref for the combobox chips.
+ *
+ * @returns A ref to be used as the anchor for ComboboxContent
+ */
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
+export type { IComboboxProps, IComboboxValueProps, IComboboxTriggerProps, IComboboxClearProps, IComboboxInputProps, IComboboxContentProps, IComboboxListProps, IComboboxItemProps, IComboboxGroupProps, IComboboxLabelProps, IComboboxCollectionProps, IComboboxEmptyProps, IComboboxSeparatorProps, IComboboxChipsProps, IComboboxChipProps, IComboboxChipsInputProps, } from './Combobox.types';
+export type { ComboboxSlot } from './Combobox.styles';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/{components/ui/combobox.js → react-ui/ui/Combobox/index.js}

@@ -1,25 +1,28 @@
 import { cn } from "../../lib/utils.js";
-import { Button } from "./button/button.js";
-import "./button/index.js";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { Button } from "../Button/index.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../InputGroup/index.js";
+import { comboboxStyles } from "./Combobox.styles.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { ArrowDown01Icon, Cancel01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
 
-//#region src/components/ui/combobox.tsx
+//#region src/react-ui/ui/Combobox/index.tsx
+/** Combobox — root component wrapping Base UI Combobox. */
 const Combobox$1 = Combobox.Root;
+/** ComboboxValue — displays the selected value. */
 function ComboboxValue({ ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Value, {
 		"data-slot": "combobox-value",
 		...props
 	});
 }
+/** ComboboxTrigger — trigger button with arrow icon. */
 function ComboboxTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
 		"data-slot": "combobox-trigger",
-		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		className: cn(comboboxStyles.trigger, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(HugeiconsIcon, {
 			icon: ArrowDown01Icon,
@@ -28,6 +31,7 @@ function ComboboxTrigger({ className, children, ...props }) {
 		})]
 	});
 }
+/** ComboboxClear — clears the combobox selection. */
 function ComboboxClear({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Clear, {
 		"data-slot": "combobox-clear",
@@ -41,6 +45,24 @@ function ComboboxClear({ className, ...props }) {
 		})
 	});
 }
+/**
+* ComboboxInput — text input with optional trigger and clear buttons.
+*
+* @param showTrigger - Show dropdown arrow button
+* @param showClear - Show clear button
+*
+* @example
+* ```tsx
+* <Combobox>
+*   <ComboboxInput showClear placeholder="Search..." />
+*   <ComboboxContent>
+*     <ComboboxList>
+*       <ComboboxItem>Option 1</ComboboxItem>
+*     </ComboboxList>
+*   </ComboboxContent>
+* </Combobox>
+* ```
+*/
 function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		className: cn("w-auto", className),
@@ -63,7 +85,8 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
 		]
 	});
 }
-function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+/** ComboboxContent — popup content area for the combobox. */
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, slots, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 		side,
 		sideOffset,
@@ -74,22 +97,24 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 		children: /* @__PURE__ */ jsx(Combobox.Popup, {
 			"data-slot": "combobox-content",
 			"data-chips": !!anchor,
-			className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className),
+			className: cn(comboboxStyles.content, slots?.content, className),
 			...props
 		})
 	}) });
 }
+/** ComboboxList — scrollable list of combobox items. */
 function ComboboxList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.List, {
 		"data-slot": "combobox-list",
-		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain", className),
+		className: cn(comboboxStyles.list, className),
 		...props
 	});
 }
+/** ComboboxItem — a single selectable item with check indicator. */
 function ComboboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox.Item, {
 		"data-slot": "combobox-item",
-		className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		className: cn(comboboxStyles.item, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
@@ -101,6 +126,7 @@ function ComboboxItem({ className, children, ...props }) {
 		})]
 	});
 }
+/** ComboboxGroup — groups related combobox items. */
 function ComboboxGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Group, {
 		"data-slot": "combobox-group",
@@ -108,44 +134,50 @@ function ComboboxGroup({ className, ...props }) {
 		...props
 	});
 }
+/** ComboboxLabel — label for a group of combobox items. */
 function ComboboxLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
 		"data-slot": "combobox-label",
-		className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+		className: cn(comboboxStyles.label, className),
 		...props
 	});
 }
+/** ComboboxCollection — collection for combobox items. */
 function ComboboxCollection({ ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Collection, {
 		"data-slot": "combobox-collection",
 		...props
 	});
 }
+/** ComboboxEmpty — displayed when no items match the query. */
 function ComboboxEmpty({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Empty, {
 		"data-slot": "combobox-empty",
-		className: cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className),
+		className: cn(comboboxStyles.empty, className),
 		...props
 	});
 }
+/** ComboboxSeparator — visual divider between combobox items. */
 function ComboboxSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Separator, {
 		"data-slot": "combobox-separator",
-		className: cn("bg-border -mx-1 my-1 h-px", className),
+		className: cn(comboboxStyles.separator, className),
 		...props
 	});
 }
+/** ComboboxChips — container for multi-select chips. */
 function ComboboxChips({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Chips, {
 		"data-slot": "combobox-chips",
-		className: cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className),
+		className: cn(comboboxStyles.chips, className),
 		...props
 	});
 }
+/** ComboboxChip — individual chip with optional remove button. */
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox.Chip, {
 		"data-slot": "combobox-chip",
-		className: cn("bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50", className),
+		className: cn(comboboxStyles.chip, className),
 		...props,
 		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 			render: /* @__PURE__ */ jsx(Button, {
@@ -163,13 +195,19 @@ function ComboboxChip({ className, children, showRemove = true, ...props }) {
 		})]
 	});
 }
+/** ComboboxChipsInput — input within the chips container for multi-select. */
 function ComboboxChipsInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Input, {
 		"data-slot": "combobox-chip-input",
-		className: cn("min-w-16 flex-1 outline-none", className),
+		className: cn(comboboxStyles.chipInput, className),
 		...props
 	});
 }
+/**
+* Hook to create an anchor ref for the combobox chips.
+*
+* @returns A ref to be used as the anchor for ComboboxContent
+*/
 function useComboboxAnchor() {
 	return React.useRef(null);
 }

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

@@ -0,0 +1,18 @@
+import type { StyleSlots } from '../../../core/types';
+type CornerBracketSlot = 'root';
+declare const cornerBracketStyles: StyleSlots<CornerBracketSlot>;
+/** CVA variants for CornerBracket positioning and color. */
+declare const bracketVariants: (props?: ({
+    position?: "br" | "tr" | "tl" | "bl" | null | undefined;
+    variant?: "default" | "accent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** SVG path data for each corner position. */
+declare const BRACKET_PATHS: {
+    readonly tl: "M 0 20 L 0 5 A 5 5 0 0 1 5 0 L 20 0";
+    readonly tr: "M 0 0 L 15 0 A 5 5 0 0 1 20 5 L 20 20";
+    readonly bl: "M 0 0 L 0 15 A 5 5 0 0 0 5 20 L 20 20";
+    readonly br: "M 20 0 L 5 0 A 5 5 0 0 0 0 5 L 0 20";
+};
+export { cornerBracketStyles, bracketVariants, BRACKET_PATHS };
+export type { CornerBracketSlot };
+//# sourceMappingURL=CornerBracket.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CornerBracket.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/CornerBracket/CornerBracket.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,iBAAiB,GAAG,MAAM,CAAC;AAEhC,QAAA,MAAM,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAEtD,CAAC;AAEF,4DAA4D;AAC5D,QAAA,MAAM,eAAe;;;8EAgBnB,CAAC;AAEH,8CAA8C;AAC9C,QAAA,MAAM,aAAa;;;;;CAKT,CAAC;AAEX,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/CornerBracket/CornerBracket.styles.ts
+const cornerBracketStyles = { root: "absolute pointer-events-none" };
+/** CVA variants for CornerBracket positioning and color. */
+const bracketVariants = cva(cornerBracketStyles.root, {
+	variants: {
+		position: {
+			tl: "top-0 left-0",
+			tr: "top-0 right-0",
+			bl: "bottom-0 left-0",
+			br: "bottom-0 right-0"
+		},
+		variant: {
+			default: "stroke-primary/50",
+			accent: "stroke-primary/66"
+		}
+	},
+	defaultVariants: { variant: "default" }
+});
+/** SVG path data for each corner position. */
+const BRACKET_PATHS = {
+	tl: "M 0 20 L 0 5 A 5 5 0 0 1 5 0 L 20 0",
+	tr: "M 0 0 L 15 0 A 5 5 0 0 1 20 5 L 20 20",
+	bl: "M 0 0 L 0 15 A 5 5 0 0 0 5 20 L 20 20",
+	br: "M 20 0 L 5 0 A 5 5 0 0 0 0 5 L 0 20"
+};
+
+//#endregion
+export { BRACKET_PATHS, bracketVariants };

package/dist/react-ui/ui/CornerBracket/CornerBracket.types.d.ts

@@ -0,0 +1,12 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { bracketVariants, CornerBracketSlot } from './CornerBracket.styles';
+/** Props for the CornerBracket component. */
+interface ICornerBracketProps extends Omit<React.SVGProps<SVGSVGElement>, 'variant'>, VariantProps<typeof bracketVariants> {
+    /** Bracket size in pixels. */
+    size?: number;
+    /** Override classes for bracket visual regions. */
+    slots?: SlotOverrides<CornerBracketSlot>;
+}
+export type { ICornerBracketProps };
+//# sourceMappingURL=CornerBracket.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CornerBracket.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/CornerBracket/CornerBracket.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,eAAe,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEjF,6CAA6C;AAC7C,UAAU,mBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,EACpD,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CAC1C;AAED,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/react-ui/ui/CornerBracket/index.d.ts

@@ -0,0 +1,23 @@
+import { bracketVariants } from './CornerBracket.styles';
+import type { ICornerBracketProps } from './CornerBracket.types';
+/**
+ * CornerBracket — SVG corner bracket decoration for industrial/technical UI styling.
+ *
+ * @param position - Corner position: 'tl', 'tr', 'bl', 'br'
+ * @param variant - Visual style: 'default' or 'accent'
+ * @param size - Bracket size in pixels (default: 20)
+ *
+ * @example
+ * ```tsx
+ * <div className="relative p-4">
+ *   <CornerBracket position="tl" />
+ *   <CornerBracket position="br" variant="accent" />
+ *   Content here
+ * </div>
+ * ```
+ */
+declare function CornerBracket({ className, position, variant, size, slots, ...props }: ICornerBracketProps): import("react/jsx-runtime").JSX.Element;
+export { CornerBracket, bracketVariants };
+export type { ICornerBracketProps } from './CornerBracket.types';
+export type { CornerBracketSlot } from './CornerBracket.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/CornerBracket/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAiB,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiBrB;AAED,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,42 @@
+import { cn } from "../../lib/utils.js";
+import { BRACKET_PATHS, bracketVariants } from "./CornerBracket.styles.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/CornerBracket/index.tsx
+/**
+* CornerBracket — SVG corner bracket decoration for industrial/technical UI styling.
+*
+* @param position - Corner position: 'tl', 'tr', 'bl', 'br'
+* @param variant - Visual style: 'default' or 'accent'
+* @param size - Bracket size in pixels (default: 20)
+*
+* @example
+* ```tsx
+* <div className="relative p-4">
+*   <CornerBracket position="tl" />
+*   <CornerBracket position="br" variant="accent" />
+*   Content here
+* </div>
+* ```
+*/
+function CornerBracket({ className, position, variant, size = 20, slots, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 20 20",
+		fill: "none",
+		className: cn(bracketVariants({
+			position,
+			variant
+		}), slots?.root, className),
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: BRACKET_PATHS[position || "tl"],
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		})
+	});
+}
+
+//#endregion
+export { CornerBracket };