@mks2508/mks-ui 0.1.3 → 0.2.0

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

@@ -0,0 +1,50 @@
+import type { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import type { SlotOverrides } from '../../../core/types';
+import type { DropdownMenuSlot } from './DropdownMenu.styles';
+/** Props for the DropdownMenu root. */
+type IDropdownMenuProps = MenuPrimitive.Root.Props;
+/** Props for DropdownMenuPortal. */
+type IDropdownMenuPortalProps = MenuPrimitive.Portal.Props;
+/** Props for DropdownMenuTrigger. */
+type IDropdownMenuTriggerProps = MenuPrimitive.Trigger.Props;
+/** Props for DropdownMenuContent. */
+interface IDropdownMenuContentProps extends MenuPrimitive.Popup.Props, Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> {
+    /** Override classes for dropdown menu visual regions. */
+    slots?: SlotOverrides<DropdownMenuSlot>;
+}
+/** Props for DropdownMenuGroup. */
+type IDropdownMenuGroupProps = MenuPrimitive.Group.Props;
+/** Props for DropdownMenuLabel. */
+interface IDropdownMenuLabelProps extends MenuPrimitive.GroupLabel.Props {
+    /** Indent the label to align with items that have icons. */
+    inset?: boolean;
+}
+/** Props for DropdownMenuItem. */
+interface IDropdownMenuItemProps extends MenuPrimitive.Item.Props {
+    /** Indent the item. */
+    inset?: boolean;
+    /** Visual style variant. */
+    variant?: 'default' | 'destructive';
+}
+/** Props for DropdownMenuSub. */
+type IDropdownMenuSubProps = MenuPrimitive.SubmenuRoot.Props;
+/** Props for DropdownMenuSubTrigger. */
+interface IDropdownMenuSubTriggerProps extends MenuPrimitive.SubmenuTrigger.Props {
+    inset?: boolean;
+}
+/** Props for DropdownMenuCheckboxItem. */
+interface IDropdownMenuCheckboxItemProps extends MenuPrimitive.CheckboxItem.Props {
+    inset?: boolean;
+}
+/** Props for DropdownMenuRadioGroup. */
+type IDropdownMenuRadioGroupProps = MenuPrimitive.RadioGroup.Props;
+/** Props for DropdownMenuRadioItem. */
+interface IDropdownMenuRadioItemProps extends MenuPrimitive.RadioItem.Props {
+    inset?: boolean;
+}
+/** Props for DropdownMenuSeparator. */
+type IDropdownMenuSeparatorProps = MenuPrimitive.Separator.Props;
+/** Props for DropdownMenuShortcut. */
+type IDropdownMenuShortcutProps = React.ComponentProps<'span'>;
+export type { IDropdownMenuProps, IDropdownMenuPortalProps, IDropdownMenuTriggerProps, IDropdownMenuContentProps, IDropdownMenuGroupProps, IDropdownMenuLabelProps, IDropdownMenuItemProps, IDropdownMenuSubProps, IDropdownMenuSubTriggerProps, IDropdownMenuCheckboxItemProps, IDropdownMenuRadioGroupProps, IDropdownMenuRadioItemProps, IDropdownMenuSeparatorProps, IDropdownMenuShortcutProps, };
+//# sourceMappingURL=DropdownMenu.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/DropdownMenu/DropdownMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,uCAAuC;AACvC,KAAK,kBAAkB,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAEnD,oCAAoC;AACpC,KAAK,wBAAwB,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC;AAE3D,qCAAqC;AACrC,KAAK,yBAAyB,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC;AAE7D,qCAAqC;AACrC,UAAU,yBACR,SAAQ,aAAa,CAAC,KAAK,CAAC,KAAK,EAC/B,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC;IACvF,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;CACzC;AAED,mCAAmC;AACnC,KAAK,uBAAuB,GAAG,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,mCAAmC;AACnC,UAAU,uBAAwB,SAAQ,aAAa,CAAC,UAAU,CAAC,KAAK;IACtE,4DAA4D;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,kCAAkC;AAClC,UAAU,sBAAuB,SAAQ,aAAa,CAAC,IAAI,CAAC,KAAK;IAC/D,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC;AAED,iCAAiC;AACjC,KAAK,qBAAqB,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC;AAE7D,wCAAwC;AACxC,UAAU,4BAA6B,SAAQ,aAAa,CAAC,cAAc,CAAC,KAAK;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,0CAA0C;AAC1C,UAAU,8BAA+B,SAAQ,aAAa,CAAC,YAAY,CAAC,KAAK;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wCAAwC;AACxC,KAAK,4BAA4B,GAAG,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC;AAEnE,uCAAuC;AACvC,UAAU,2BAA4B,SAAQ,aAAa,CAAC,SAAS,CAAC,KAAK;IACzE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,uCAAuC;AACvC,KAAK,2BAA2B,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC;AAEjE,sCAAsC;AACtC,KAAK,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAE/D,YAAY,EACV,kBAAkB,EAClB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,EACzB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,4BAA4B,EAC5B,8BAA8B,EAC9B,4BAA4B,EAC5B,2BAA2B,EAC3B,2BAA2B,EAC3B,0BAA0B,GAC3B,CAAC"}

package/dist/react/ui/DropdownMenu/index.d.ts

@@ -0,0 +1,50 @@
+import * as React from '../../../react';
+import type { IDropdownMenuProps, IDropdownMenuPortalProps, IDropdownMenuTriggerProps, IDropdownMenuContentProps, IDropdownMenuGroupProps, IDropdownMenuLabelProps, IDropdownMenuItemProps, IDropdownMenuSubProps, IDropdownMenuSubTriggerProps, IDropdownMenuCheckboxItemProps, IDropdownMenuRadioGroupProps, IDropdownMenuRadioItemProps, IDropdownMenuSeparatorProps, IDropdownMenuShortcutProps } from './DropdownMenu.types';
+/**
+ * DropdownMenu — context menu built on Base UI Menu primitive.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+declare function DropdownMenu({ ...props }: IDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuPortal — renders dropdown content in a portal. */
+declare function DropdownMenuPortal({ ...props }: IDropdownMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuTrigger — element that opens the dropdown. */
+declare function DropdownMenuTrigger({ ...props }: IDropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuContent — popup content area for the dropdown. */
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, slots, ...props }: IDropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuGroup — groups related menu items. */
+declare function DropdownMenuGroup({ ...props }: IDropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuLabel — label for a group of menu items. */
+declare function DropdownMenuLabel({ className, inset, ...props }: IDropdownMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuItem — a single selectable menu item. */
+declare function DropdownMenuItem({ className, inset, variant, ...props }: IDropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuSub — submenu root. */
+declare function DropdownMenuSub({ ...props }: IDropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuSubTrigger — trigger for opening a submenu. */
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: IDropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuSubContent — content area for a submenu. */
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuCheckboxItem — menu item with checkbox behavior. */
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: IDropdownMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuRadioGroup — groups radio items. */
+declare function DropdownMenuRadioGroup({ ...props }: IDropdownMenuRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuRadioItem — menu item with radio behavior. */
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: IDropdownMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuSeparator — visual divider between menu items. */
+declare function DropdownMenuSeparator({ className, ...props }: IDropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/** DropdownMenuShortcut — keyboard shortcut hint text. */
+declare function DropdownMenuShortcut({ className, ...props }: IDropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+export type { IDropdownMenuProps, IDropdownMenuPortalProps, IDropdownMenuTriggerProps, IDropdownMenuContentProps, IDropdownMenuGroupProps, IDropdownMenuLabelProps, IDropdownMenuItemProps, IDropdownMenuSubProps, IDropdownMenuSubTriggerProps, IDropdownMenuCheckboxItemProps, IDropdownMenuRadioGroupProps, IDropdownMenuRadioItemProps, IDropdownMenuSeparatorProps, IDropdownMenuShortcutProps, } from './DropdownMenu.types';
+export type { DropdownMenuSlot } from './DropdownMenu.styles';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/{components/ui/dropdown-menu.js → react/ui/DropdownMenu/index.js}

@@ -1,32 +1,51 @@
-"use client";
+'use client';
 
 import { cn } from "../../lib/utils.js";
-import "react";
+import { dropdownMenuStyles } from "./DropdownMenu.styles.js";
+import "../../../react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { ArrowRight01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
-import { Menu } from "@base-ui/react/menu";
 
-//#region src/components/ui/dropdown-menu.tsx
+//#region src/react/ui/DropdownMenu/index.tsx
+/**
+* DropdownMenu — context menu built on Base UI Menu primitive.
+*
+* @example
+* ```tsx
+* <DropdownMenu>
+*   <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+*   <DropdownMenuContent>
+*     <DropdownMenuItem>Item 1</DropdownMenuItem>
+*     <DropdownMenuSeparator />
+*     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+*   </DropdownMenuContent>
+* </DropdownMenu>
+* ```
+*/
 function DropdownMenu({ ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Root, {
 		"data-slot": "dropdown-menu",
 		...props
 	});
 }
+/** DropdownMenuPortal — renders dropdown content in a portal. */
 function DropdownMenuPortal({ ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, {
 		"data-slot": "dropdown-menu-portal",
 		...props
 	});
 }
+/** DropdownMenuTrigger — element that opens the dropdown. */
 function DropdownMenuTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
 		"data-slot": "dropdown-menu-trigger",
 		...props
 	});
 }
-function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+/** DropdownMenuContent — popup content area for the dropdown. */
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, slots, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		className: "isolate z-50 outline-none",
 		align,
@@ -35,45 +54,50 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
 		sideOffset,
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			"data-slot": "dropdown-menu-content",
-			className: cn("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 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden", className),
+			className: cn(dropdownMenuStyles.content, slots?.content, className),
 			...props
 		})
 	}) });
 }
+/** DropdownMenuGroup — groups related menu items. */
 function DropdownMenuGroup({ ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Group, {
 		"data-slot": "dropdown-menu-group",
 		...props
 	});
 }
+/** DropdownMenuLabel — label for a group of menu items. */
 function DropdownMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
 		"data-slot": "dropdown-menu-label",
 		"data-inset": inset,
-		className: cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
+		className: cn(dropdownMenuStyles.label, className),
 		...props
 	});
 }
+/** DropdownMenuItem — a single selectable menu item. */
 function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex 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(dropdownMenuStyles.item, className),
 		...props
 	});
 }
+/** DropdownMenuSub — submenu root. */
 function DropdownMenuSub({ ...props }) {
 	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
 		"data-slot": "dropdown-menu-sub",
 		...props
 	});
 }
+/** DropdownMenuSubTrigger — trigger for opening a submenu. */
 function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		className: cn(dropdownMenuStyles.subTrigger, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(HugeiconsIcon, {
 			icon: ArrowRight01Icon,
@@ -82,10 +106,11 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 		})]
 	});
 }
+/** DropdownMenuSubContent — content area for a submenu. */
 function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(DropdownMenuContent, {
 		"data-slot": "dropdown-menu-sub-content",
-		className: cn("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 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto", className),
+		className: cn(dropdownMenuStyles.subContent, className),
 		align,
 		alignOffset,
 		side,
@@ -93,11 +118,12 @@ function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "rig
 		...props
 	});
 }
+/** DropdownMenuCheckboxItem — menu item with checkbox behavior. */
 function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
 		"data-slot": "dropdown-menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex 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(dropdownMenuStyles.checkboxItem, className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -110,17 +136,19 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
 		}), children]
 	});
 }
+/** DropdownMenuRadioGroup — groups radio items. */
 function DropdownMenuRadioGroup({ ...props }) {
 	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
 		"data-slot": "dropdown-menu-radio-group",
 		...props
 	});
 }
+/** DropdownMenuRadioItem — menu item with radio behavior. */
 function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex 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(dropdownMenuStyles.radioItem, className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "absolute right-2 flex items-center justify-center pointer-events-none",
@@ -132,17 +160,19 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 		}), children]
 	});
 }
+/** DropdownMenuSeparator — visual divider between menu items. */
 function DropdownMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Separator, {
 		"data-slot": "dropdown-menu-separator",
-		className: cn("bg-border -mx-1 my-1 h-px", className),
+		className: cn(dropdownMenuStyles.separator, className),
 		...props
 	});
 }
+/** DropdownMenuShortcut — keyboard shortcut hint text. */
 function DropdownMenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "dropdown-menu-shortcut",
-		className: cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className),
+		className: cn(dropdownMenuStyles.shortcut, className),
 		...props
 	});
 }

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

@@ -0,0 +1,11 @@
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the Field component family. */
+type FieldSlot = 'root' | 'set' | 'legend' | 'group' | 'content' | 'label' | 'title' | 'description' | 'separator' | 'error';
+declare const fieldStyles: StyleSlots<FieldSlot>;
+/** CVA variants for the Field root orientation. */
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { fieldStyles, fieldVariants };
+export type { FieldSlot };
+//# sourceMappingURL=Field.styles.d.ts.map

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

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

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

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

package/dist/react/ui/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/{components/ui/field.js → react/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 { useMemo } from "react";
-import { cva } from "class-variance-authority";
+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/components/ui/field.tsx
+//#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("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/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 };