@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -1,300 +0,0 @@
-'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/index.tsx

@@ -1,254 +0,0 @@
-'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/react/ui/Input/index.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { Input as InputPrimitive } from '@base-ui/react/input';
-
-import { cn } from '@/react/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';