@mks2508/mks-ui 0.2.0 → 0.3.1

package/src/react-ui/ui/DropdownMenu/index.tsx

@@ -0,0 +1,300 @@
+'use client';
+
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+
+import { cn } from '@/react-ui/lib/utils';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { ArrowRight01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import { dropdownMenuStyles } from './DropdownMenu.styles';
+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>
+ * ```
+ */
+function DropdownMenu({ ...props }: IDropdownMenuProps) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+/** DropdownMenuPortal — renders dropdown content in a portal. */
+function DropdownMenuPortal({ ...props }: IDropdownMenuPortalProps) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+/** DropdownMenuTrigger — element that opens the dropdown. */
+function DropdownMenuTrigger({ ...props }: IDropdownMenuTriggerProps) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+/** DropdownMenuContent — popup content area for the dropdown. */
+function DropdownMenuContent({
+  align = 'start',
+  alignOffset = 0,
+  side = 'bottom',
+  sideOffset = 4,
+  className,
+  slots,
+  ...props
+}: IDropdownMenuContentProps) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn(dropdownMenuStyles.content, slots?.content, className)}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+/** DropdownMenuGroup — groups related menu items. */
+function DropdownMenuGroup({ ...props }: IDropdownMenuGroupProps) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+/** DropdownMenuLabel — label for a group of menu items. */
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: IDropdownMenuLabelProps) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(dropdownMenuStyles.label, className)}
+      {...props}
+    />
+  );
+}
+
+/** DropdownMenuItem — a single selectable menu item. */
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: IDropdownMenuItemProps) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(dropdownMenuStyles.item, className)}
+      {...props}
+    />
+  );
+}
+
+/** DropdownMenuSub — submenu root. */
+function DropdownMenuSub({ ...props }: IDropdownMenuSubProps) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
+}
+
+/** DropdownMenuSubTrigger — trigger for opening a submenu. */
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: IDropdownMenuSubTriggerProps) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(dropdownMenuStyles.subTrigger, className)}
+      {...props}
+    >
+      {children}
+      <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+/** DropdownMenuSubContent — content area for a submenu. */
+function DropdownMenuSubContent({
+  align = 'start',
+  alignOffset = -3,
+  side = 'right',
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(dropdownMenuStyles.subContent, className)}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+/** DropdownMenuCheckboxItem — menu item with checkbox behavior. */
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: IDropdownMenuCheckboxItemProps) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(dropdownMenuStyles.checkboxItem, className)}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="absolute right-2 flex items-center justify-center pointer-events-none"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+/** DropdownMenuRadioGroup — groups radio items. */
+function DropdownMenuRadioGroup({ ...props }: IDropdownMenuRadioGroupProps) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+/** DropdownMenuRadioItem — menu item with radio behavior. */
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: IDropdownMenuRadioItemProps) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(dropdownMenuStyles.radioItem, className)}
+      {...props}
+    >
+      <span
+        className="absolute right-2 flex items-center justify-center pointer-events-none"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+/** DropdownMenuSeparator — visual divider between menu items. */
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: IDropdownMenuSeparatorProps) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn(dropdownMenuStyles.separator, className)}
+      {...props}
+    />
+  );
+}
+
+/** DropdownMenuShortcut — keyboard shortcut hint text. */
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: IDropdownMenuShortcutProps) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(dropdownMenuStyles.shortcut, className)}
+      {...props}
+    />
+  );
+}
+
+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';

package/src/react-ui/ui/Field/index.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { cn } from '@/react-ui/lib/utils';
+import { Label } from '@/react-ui/ui/Label';
+import { Separator } from '@/react-ui/ui/Separator';
+import { fieldStyles, 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>
+ * ```
+ */
+function FieldSet({ className, ...props }: IFieldSetProps) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(fieldStyles.set, className)}
+      {...props}
+    />
+  );
+}
+
+/** FieldLegend — legend element for a FieldSet. */
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: IFieldLegendProps) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(fieldStyles.legend, className)}
+      {...props}
+    />
+  );
+}
+
+/** FieldGroup — vertical grouping container for fields. */
+function FieldGroup({ className, ...props }: IFieldGroupProps) {
+  return (
+    <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
+}: IFieldProps) {
+  return (
+    <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 }: IFieldContentProps) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(fieldStyles.content, className)}
+      {...props}
+    />
+  );
+}
+
+/** FieldLabel — styled label using the Label component. */
+function FieldLabel({ className, ...props }: IFieldLabelProps) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(fieldStyles.label, className)}
+      {...props}
+    />
+  );
+}
+
+/** FieldTitle — alternative title display for a field. */
+function FieldTitle({ className, ...props }: IFieldTitleProps) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(fieldStyles.title, className)}
+      {...props}
+    />
+  );
+}
+
+/** FieldDescription — helper text for a field. */
+function FieldDescription({ className, ...props }: IFieldDescriptionProps) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(fieldStyles.description, className)}
+      {...props}
+    />
+  );
+}
+
+/** FieldSeparator — divider between fields with optional text content. */
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: IFieldSeparatorProps) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(fieldStyles.separator, className)}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * 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
+}: IFieldErrorProps) {
+  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 (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn(fieldStyles.error, className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+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';

package/src/react-ui/ui/Input/index.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+
+import { cn } from '@/react-ui/lib/utils';
+import { inputStyles } from './Input.styles';
+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" />
+ * ```
+ */
+function Input({ className, type, slots, ...props }: IInputProps) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(inputStyles.root, slots?.root, className)}
+      {...props}
+    />
+  );
+}
+
+export { Input };
+export type { IInputProps } from './Input.types';
+export type { InputSlot } from './Input.styles';