@mks2508/mks-ui 0.1.3 → 0.2.0

package/src/react/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/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/Field/Field.styles.ts

@@ -0,0 +1,47 @@
+import { cva } from 'class-variance-authority';
+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';
+
+const fieldStyles: StyleSlots<FieldSlot> = {
+  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',
+  },
+});
+
+export { fieldStyles, fieldVariants };
+export type { FieldSlot };

package/src/react/ui/Field/Field.types.ts

@@ -0,0 +1,60 @@
+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,
+};

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

@@ -0,0 +1,254 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { cn } from '@/react/lib/utils';
+import { Label } from '@/react/ui/Label';
+import { Separator } from '@/react/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/{components/ui/input.tsx → react/ui/Input/Input.styles.ts}

@@ -1,20 +1,11 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
+import type { StyleSlots } from '@/core/types';
 
-import { cn } from "@/lib/utils"
+/** Visual regions for the Input component. */
+type InputSlot = 'root';
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <InputPrimitive
-      type={type}
-      data-slot="input"
-      className={cn(
-        "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",
-        className
-      )}
-      {...props}
-    />
-  )
-}
+const inputStyles: StyleSlots<InputSlot> = {
+  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',
+};
 
-export { Input }
+export { inputStyles };
+export type { InputSlot };

package/src/react/ui/Input/Input.types.ts

@@ -0,0 +1,10 @@
+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 };