@mks2508/mks-ui 0.5.4 → 0.5.8

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

@@ -1,254 +0,0 @@
-'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/Input.styles.ts

@@ -1,11 +0,0 @@
-import type { StyleSlots } from '@/core/types';
-
-/** Visual regions for the Input component. */
-type InputSlot = 'root';
-
-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 { inputStyles };
-export type { InputSlot };

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

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

package/src/react-ui/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-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';

package/src/react-ui/ui/InputGroup/InputGroup.styles.ts

@@ -1,53 +0,0 @@
-import { cva } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
-
-/** Visual regions for the InputGroup component family. */
-type InputGroupSlot = 'root' | 'addon' | 'button' | 'text' | 'input' | 'textarea';
-
-const inputGroupStyles: StyleSlots<InputGroupSlot> = {
-  root: 'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
-  addon: 'text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*=\'size-\'])]:size-4 flex cursor-text items-center justify-center select-none',
-  button: 'gap-2 text-sm shadow-none flex items-center',
-  text: 'text-muted-foreground gap-2 text-sm [&_svg:not([class*=\'size-\'])]:size-4 flex items-center [&_svg]:pointer-events-none',
-  input: 'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
-  textarea: 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',
-};
-
-/** CVA variants for InputGroupAddon alignment. */
-const inputGroupAddonVariants = cva(inputGroupStyles.addon, {
-  variants: {
-    align: {
-      'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
-      'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
-      'block-start':
-        'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
-      'block-end':
-        'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
-    },
-  },
-  defaultVariants: {
-    align: 'inline-start',
-  },
-});
-
-/** CVA variants for InputGroupButton sizing. */
-const inputGroupButtonVariants = cva(inputGroupStyles.button, {
-  variants: {
-    size: {
-      xs: 'h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*=\'size-\'])]:size-3.5',
-      sm: '',
-      'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
-      'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
-    },
-  },
-  defaultVariants: {
-    size: 'xs',
-  },
-});
-
-export {
-  inputGroupStyles,
-  inputGroupAddonVariants,
-  inputGroupButtonVariants,
-};
-export type { InputGroupSlot };

package/src/react-ui/ui/InputGroup/InputGroup.types.ts

@@ -1,44 +0,0 @@
-import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
-import type { inputGroupAddonVariants, inputGroupButtonVariants, InputGroupSlot } from './InputGroup.styles';
-
-/** Props for the InputGroup container. */
-interface IInputGroupProps extends React.ComponentProps<'div'> {
-  /** Override classes for input group visual regions. */
-  slots?: SlotOverrides<InputGroupSlot>;
-}
-
-/** Props for InputGroupAddon. */
-interface IInputGroupAddonProps
-  extends React.ComponentProps<'div'>,
-    VariantProps<typeof inputGroupAddonVariants> {}
-
-/** Props for InputGroupButton. */
-interface IInputGroupButtonProps
-  extends Omit<React.ComponentProps<'button'>, 'size'>,
-    VariantProps<typeof inputGroupButtonVariants> {
-  /** Button size variant. */
-  size?: 'xs' | 'sm' | 'icon-xs' | 'icon-sm';
-  /** Button visual variant (passed to Button). */
-  variant?: string;
-  /** Disabled state. */
-  disabled?: boolean;
-}
-
-/** Props for InputGroupText. */
-type IInputGroupTextProps = React.ComponentProps<'span'>;
-
-/** Props for InputGroupInput. */
-type IInputGroupInputProps = React.ComponentProps<'input'>;
-
-/** Props for InputGroupTextarea. */
-type IInputGroupTextareaProps = React.ComponentProps<'textarea'>;
-
-export type {
-  IInputGroupProps,
-  IInputGroupAddonProps,
-  IInputGroupButtonProps,
-  IInputGroupTextProps,
-  IInputGroupInputProps,
-  IInputGroupTextareaProps,
-};

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

@@ -1,149 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { cn } from '@/react-ui/lib/utils';
-import { Button } from '@/react-ui/ui/Button';
-import { Input } from '@/react-ui/ui/Input';
-import { Textarea } from '@/react-ui/ui/Textarea';
-import {
-  inputGroupStyles,
-  inputGroupAddonVariants,
-  inputGroupButtonVariants,
-} from './InputGroup.styles';
-import type {
-  IInputGroupProps,
-  IInputGroupAddonProps,
-  IInputGroupButtonProps,
-  IInputGroupTextProps,
-  IInputGroupInputProps,
-  IInputGroupTextareaProps,
-} from './InputGroup.types';
-
-/**
- * InputGroup — container for composing inputs with addons and buttons.
- *
- * @example
- * ```tsx
- * <InputGroup>
- *   <InputGroupAddon align="inline-start">$</InputGroupAddon>
- *   <InputGroupInput placeholder="Amount" />
- * </InputGroup>
- * ```
- */
-function InputGroup({ className, slots, ...props }: IInputGroupProps) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(inputGroupStyles.root, slots?.root, className)}
-      {...props}
-    />
-  );
-}
-
-/** InputGroupAddon — decorative addon element within an input group. */
-function InputGroupAddon({
-  className,
-  align = 'inline-start',
-  ...props
-}: IInputGroupAddonProps) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest('button')) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector('input')?.focus();
-      }}
-      {...props}
-    />
-  );
-}
-
-/** InputGroupButton — button element within an input group. */
-function InputGroupButton({
-  className,
-  size = 'xs',
-  ...props
-}: IInputGroupButtonProps) {
-  const buttonSize =
-    size === 'xs'
-      ? 'sm'
-      : size === 'icon-xs' || size === 'icon-sm'
-        ? 'icon'
-        : 'default';
-
-  return (
-    <Button
-      type="button"
-      data-slot="input-group-button"
-      data-size={size}
-      size={buttonSize as any}
-      variant="ghost"
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...(props as any)}
-    />
-  );
-}
-
-/** InputGroupText — text element within an input group. */
-function InputGroupText({ className, ...props }: IInputGroupTextProps) {
-  return (
-    <span
-      className={cn(inputGroupStyles.text, className)}
-      {...props}
-    />
-  );
-}
-
-/** InputGroupInput — input element within an input group (no border/ring). */
-function InputGroupInput({ className, ...props }: IInputGroupInputProps) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(inputGroupStyles.input, className)}
-      {...props}
-    />
-  );
-}
-
-/** InputGroupTextarea — textarea element within an input group (no border/ring). */
-function InputGroupTextarea({
-  className,
-  ...props
-}: IInputGroupTextareaProps) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(inputGroupStyles.textarea, className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-  inputGroupAddonVariants,
-  inputGroupButtonVariants,
-};
-
-export type {
-  IInputGroupProps,
-  IInputGroupAddonProps,
-  IInputGroupButtonProps,
-  IInputGroupTextProps,
-  IInputGroupInputProps,
-  IInputGroupTextareaProps,
-} from './InputGroup.types';
-
-export type { InputGroupSlot } from './InputGroup.styles';

package/src/react-ui/ui/Label/Label.styles.ts

@@ -1,10 +0,0 @@
-import type { StyleSlots } from '@/core/types';
-
-type LabelSlot = 'root';
-
-const labelStyles: StyleSlots<LabelSlot> = {
-  root: 'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
-};
-
-export { labelStyles };
-export type { LabelSlot };

package/src/react-ui/ui/Label/Label.types.ts

@@ -1,9 +0,0 @@
-import type { SlotOverrides } from '@/core/types';
-import type { LabelSlot } from './Label.styles';
-
-/** Props for the Label component. */
-interface ILabelProps extends React.ComponentProps<'label'> {
-  slots?: SlotOverrides<LabelSlot>;
-}
-
-export type { ILabelProps };

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/react-ui/lib/utils';
-import { labelStyles } from './Label.styles';
-import type { ILabelProps } from './Label.types';
-
-/**
- * Label — accessible form label element.
- *
- * @example
- * ```tsx
- * <Label htmlFor="email">Email</Label>
- * ```
- */
-function Label({ className, slots, ...props }: ILabelProps) {
-  return (
-    <label
-      data-slot="label"
-      className={cn(labelStyles.root, slots?.root, className)}
-      {...props}
-    />
-  );
-}
-
-export { Label };
-export type { ILabelProps } from './Label.types';
-export type { LabelSlot } from './Label.styles';

package/src/react-ui/ui/Menu/Menu.styles.ts

@@ -1,71 +0,0 @@
-/**
- * Style slots and defaults for the Menu component.
- *
- * Each slot maps to a visual region of the Menu. Consumers override
- * individual slots via the `slots` prop without touching internals.
- *
- * @module @mks2508/mks-ui/react/ui/Menu/Menu.styles
- *
- * @example
- * ```tsx
- * import { menuStyles } from './Menu.styles';
- * // menuStyles.popup => default popup classes
- * ```
- */
-
-import type { StyleSlots } from '@/core/types';
-
-/**
- * Union of all visual regions (slots) in the Menu component tree.
- *
- * @example
- * ```typescript
- * const overrides: SlotOverrides<MenuSlot> = {
- *   popup: 'bg-zinc-900 border-cyan-500/30',
- *   item: 'hover:bg-white/5',
- * };
- * ```
- */
-export type MenuSlot =
-  | 'root'
-  | 'popup'
-  | 'trigger'
-  | 'item'
-  | 'checkboxItem'
-  | 'radioItem'
-  | 'group'
-  | 'groupLabel'
-  | 'separator'
-  | 'shortcut'
-  | 'arrow'
-  | 'highlight'
-  | 'submenuTrigger';
-
-/**
- * Default style map for every Menu slot.
- *
- * Base classes are intentionally minimal so consumers can fully
- * control the visual appearance through `slots` overrides.
- * No colors are hardcoded -- all visuals come from consumer styles.
- *
- * @example
- * ```typescript
- * import { menuStyles } from './Menu.styles';
- * cn(menuStyles.popup, slots?.popup, className);
- * ```
- */
-export const menuStyles: StyleSlots<MenuSlot> = {
-  root: '',
-  popup: '',
-  trigger: '',
-  item: '',
-  checkboxItem: '',
-  radioItem: '',
-  group: '',
-  groupLabel: '',
-  separator: '',
-  shortcut: '',
-  arrow: '',
-  highlight: '',
-  submenuTrigger: '',
-};