@mks2508/mks-ui 0.1.4 → 0.2.1

package/src/components/animate-ui/primitives/base/tooltip.tsx

@@ -1,209 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Tooltip as TooltipPrimitive } from '@base-ui-components/react/tooltip';
-import {
-  AnimatePresence,
-  motion,
-  useMotionValue,
-  useSpring,
-  type HTMLMotionProps,
-  type MotionValue,
-  type SpringOptions,
-} from 'motion/react';
-
-import { getStrictContext } from '@/lib/get-strict-context';
-import { useControlledState } from '@/hooks/use-controlled-state';
-
-type TooltipContextType = {
-  isOpen: boolean;
-  setIsOpen: TooltipProps['onOpenChange'];
-  x: MotionValue<number>;
-  y: MotionValue<number>;
-  followCursor?: boolean | 'x' | 'y';
-  followCursorSpringOptions?: SpringOptions;
-};
-
-const [LocalTooltipProvider, useTooltip] =
-  getStrictContext<TooltipContextType>('TooltipContext');
-
-type TooltipProviderProps = React.ComponentProps<
-  typeof TooltipPrimitive.Provider
->;
-
-function TooltipProvider(props: TooltipProviderProps) {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />;
-}
-
-type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {
-  followCursor?: boolean | 'x' | 'y';
-  followCursorSpringOptions?: SpringOptions;
-};
-
-function Tooltip({
-  followCursor = false,
-  followCursorSpringOptions = { stiffness: 200, damping: 17 },
-  ...props
-}: TooltipProps) {
-  const [isOpen, setIsOpen] = useControlledState({
-    value: props?.open,
-    defaultValue: props?.defaultOpen,
-    onChange: props?.onOpenChange,
-  });
-  const x = useMotionValue(0);
-  const y = useMotionValue(0);
-
-  return (
-    <LocalTooltipProvider
-      value={{
-        isOpen,
-        setIsOpen,
-        x,
-        y,
-        followCursor,
-        followCursorSpringOptions,
-      }}
-    >
-      <TooltipPrimitive.Root
-        data-slot="tooltip"
-        {...props}
-        onOpenChange={setIsOpen}
-      />
-    </LocalTooltipProvider>
-  );
-}
-
-type TooltipTriggerProps = React.ComponentProps<
-  typeof TooltipPrimitive.Trigger
->;
-
-function TooltipTrigger({ onMouseMove, ...props }: TooltipTriggerProps) {
-  const { x, y, followCursor } = useTooltip();
-
-  const handleMouseMove = (
-    event: Parameters<NonNullable<TooltipTriggerProps['onMouseMove']>>[0],
-  ) => {
-    onMouseMove?.(event);
-
-    const target = event.currentTarget.getBoundingClientRect();
-
-    if (followCursor === 'x' || followCursor === true) {
-      const eventOffsetX = event.clientX - target.left;
-      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;
-      x.set(offsetXFromCenter);
-    }
-
-    if (followCursor === 'y' || followCursor === true) {
-      const eventOffsetY = event.clientY - target.top;
-      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;
-      y.set(offsetYFromCenter);
-    }
-  };
-
-  return (
-    <TooltipPrimitive.Trigger
-      data-slot="tooltip-trigger"
-      onMouseMove={handleMouseMove}
-      {...props}
-    />
-  );
-}
-
-type TooltipPortalProps = Omit<
-  React.ComponentProps<typeof TooltipPrimitive.Portal>,
-  'keepMounted'
->;
-
-function TooltipPortal(props: TooltipPortalProps) {
-  const { isOpen } = useTooltip();
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <TooltipPrimitive.Portal
-          keepMounted
-          data-slot="tooltip-portal"
-          {...props}
-        />
-      )}
-    </AnimatePresence>
-  );
-}
-
-type TooltipPositionerProps = React.ComponentProps<
-  typeof TooltipPrimitive.Positioner
->;
-
-function TooltipPositioner(props: TooltipPositionerProps) {
-  return (
-    <TooltipPrimitive.Positioner data-slot="tooltip-positioner" {...props} />
-  );
-}
-
-type TooltipPopupProps = Omit<
-  React.ComponentProps<typeof TooltipPrimitive.Popup>,
-  'render'
-> &
-  HTMLMotionProps<'div'>;
-
-function TooltipPopup({
-  transition = { type: 'spring', stiffness: 300, damping: 25 },
-  style,
-  ...props
-}: TooltipPopupProps) {
-  const { x, y, followCursor, followCursorSpringOptions } = useTooltip();
-  const translateX = useSpring(x, followCursorSpringOptions);
-  const translateY = useSpring(y, followCursorSpringOptions);
-
-  return (
-    <TooltipPrimitive.Popup
-      render={
-        <motion.div
-          key="tooltip-popup"
-          data-slot="tooltip-popup"
-          initial={{ opacity: 0, scale: 0.5 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{ opacity: 0, scale: 0.5 }}
-          transition={transition}
-          style={{
-            x:
-              followCursor === 'x' || followCursor === true
-                ? translateX
-                : undefined,
-            y:
-              followCursor === 'y' || followCursor === true
-                ? translateY
-                : undefined,
-            ...style,
-          }}
-          {...props}
-        />
-      }
-    />
-  );
-}
-
-type TooltipArrowProps = React.ComponentProps<typeof TooltipPrimitive.Arrow>;
-
-function TooltipArrow(props: TooltipArrowProps) {
-  return <TooltipPrimitive.Arrow data-slot="tooltip-arrow" {...props} />;
-}
-
-export {
-  TooltipProvider,
-  Tooltip,
-  TooltipTrigger,
-  TooltipPortal,
-  TooltipPositioner,
-  TooltipPopup,
-  TooltipArrow,
-  useTooltip,
-  type TooltipProviderProps,
-  type TooltipProps,
-  type TooltipTriggerProps,
-  type TooltipPortalProps,
-  type TooltipPositionerProps,
-  type TooltipPopupProps,
-  type TooltipArrowProps,
-  type TooltipContextType,
-};

package/src/components/ui/accordion.tsx

@@ -1,9 +0,0 @@
-/**
- * Accordion component - Animate UI primitive re-export.
- *
- * Animated accordion with smooth expand/collapse transitions.
- *
- * @module @mks2508/mks-ui/components/ui/accordion
- */
-
-export * from '@/components/animate-ui/primitives/base/accordion';

package/src/components/ui/alert-dialog.tsx

@@ -1,9 +0,0 @@
-/**
- * AlertDialog component - Animate UI primitive re-export.
- *
- * Animated alert dialog with backdrop and motion transitions.
- *
- * @module @mks2508/mks-ui/components/ui/alert-dialog
- */
-
-export * from '@/components/animate-ui/primitives/base/alert-dialog';

package/src/components/ui/auto-height.tsx

@@ -1,9 +0,0 @@
-/**
- * AutoHeight effect - Animate UI primitive re-export.
- *
- * Smooth height auto-resize animation for dynamic content.
- *
- * @module @mks2508/mks-ui/components/ui/auto-height
- */
-
-export * from '@/components/animate-ui/primitives/effects/auto-height';

package/src/components/ui/badge/badge.styles.ts

@@ -1,46 +0,0 @@
-import { cva } from "class-variance-authority";
-
-/**
- * Variantes de estilo para el componente Badge usando CVA (Class Variance Authority).
- *
- * Define las combinaciones de variantes visuales soportadas:
- * - variant: default, secondary, destructive, outline
- * - size: default, sm, lg
- *
- * @see {@link https://cva.style/docs/getting-started/variants}
- */
-export const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-      size: {
-        default: "h-6 px-2.5 py-0.5",
-        sm: "h-5 px-2 text-[10px]",
-        lg: "h-7 px-3 text-sm",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-/**
- * Estilos estáticos para el componente Badge.
- *
- * Útil cuando se necesitan clases específicas fuera del sistema de variantes.
- */
-export const badgeStyles = {
-  base: "inline-flex items-center justify-center rounded-full border font-semibold transition-colors",
-  focus: "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-};

package/src/components/ui/badge/badge.tsx

@@ -1,52 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-import { badgeVariants } from "./badge.styles";
-import type { IBadgeProps } from "./badge.types";
-
-/**
- * Componente Badge para mostrar etiquetas de estado, categorías o indicadores.
- *
- * El Badge es un componente visual que muestra información contextual como
- * estados, categorías, contadores o etiquetas. Soporta múltiples variantes
- * de color y tamaños.
- *
- * @param props - Props del componente incluyendo variantes de estilo
- * @returns Elemento div renderizado como badge
- *
- * @example
- * ```tsx
- * import { Badge } from "@/components/ui/badge";
- *
- * function Example() {
- *   return (
- *     <div className="flex gap-2">
- *       <Badge>Default</Badge>
- *       <Badge variant="secondary">Secondary</Badge>
- *       <Badge variant="destructive">Destructive</Badge>
- *       <Badge variant="outline">Outline</Badge>
- *       <Badge size="sm">Small</Badge>
- *       <Badge size="lg">Large</Badge>
- *     </div>
- *   );
- * }
- * ```
- *
- * @see {@link IBadgeProps}
- * @see {@link badgeVariants}
- */
-function Badge({ className, variant, size, ...props }: IBadgeProps) {
-  return (
-    <div
-      data-slot="badge"
-      data-variant={variant}
-      data-size={size}
-      className={cn(badgeVariants({ variant, size }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge };
-export { badgeVariants } from "./badge.styles";
-export type { IBadgeProps, BadgeVariant, BadgeSize } from "./badge.types";

package/src/components/ui/badge/badge.types.ts

@@ -1,41 +0,0 @@
-import type { VariantProps } from "class-variance-authority";
-
-/**
- * Props para el componente Badge.
- *
- * @interface IBadgeProps
- * @extends React.HTMLAttributes<HTMLDivElement>
- * @extends VariantProps<typeof badgeVariants>
- *
- * @example
- * ```tsx
- * // Badge por defecto
- * <Badge>Nuevo</Badge>
- *
- * // Badge con variante destructiva
- * <Badge variant="destructive">Error</Badge>
- *
- * // Badge con tamaño pequeño
- * <Badge size="sm">Mini</Badge>
- *
- * // Badge con variante outline
- * <Badge variant="outline">Borrador</Badge>
- * ```
- */
-export interface IBadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof import("./badge.styles").badgeVariants> {}
-
-/**
- * Variantes disponibles para el componente Badge.
- *
- * @type BadgeVariant
- */
-export type BadgeVariant = "default" | "secondary" | "destructive" | "outline";
-
-/**
- * Tamaños disponibles para el componente Badge.
- *
- * @type BadgeSize
- */
-export type BadgeSize = "default" | "sm" | "lg";

package/src/components/ui/badge/index.ts

@@ -1,8 +0,0 @@
-/**
- * Badge component barrel export
- *
- * @module @mks2508/mks-ui/components/ui/badge
- */
-
-export { Badge, badgeVariants } from "./badge";
-export type { IBadgeProps, BadgeVariant, BadgeSize } from "./badge.types";

package/src/components/ui/button/button.styles.ts

@@ -1,66 +0,0 @@
-import { cva } from "class-variance-authority";
-
-/**
- * Variantes de estilo para el componente Button usando CVA (Class Variance Authority).
- *
- * Define las combinaciones de variantes visuales soportadas:
- * - variant: default, secondary, destructive, outline, ghost, link, success, warning
- * - size: default, sm, lg, icon
- *
- * @see {@link https://cva.style/docs/getting-started/variants}
- */
-export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 active:scale-[0.98]",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-        success:
-          "bg-emerald-600 text-white hover:bg-emerald-700 focus-visible:ring-emerald-600",
-        warning:
-          "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-500",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3 text-xs",
-        lg: "h-11 rounded-md px-8 text-base",
-        icon: "h-10 w-10 p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-/**
- * Estilos estáticos para el componente Button.
- *
- * Útil cuando se necesitan clases específicas fuera del sistema de variantes.
- */
-export const buttonStyles = {
-  base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-all",
-  focus:
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-  disabled: "disabled:pointer-events-none disabled:opacity-50",
-  icon: "[&_svg]:pointer-events-none [&_svg]:shrink-0",
-  pressed: "active:scale-[0.98]",
-};
-
-/**
- * Clases para estados específicos del botón.
- */
-export const buttonStateStyles = {
-  pressed: "scale-[0.98]",
-  disabled: "opacity-50 pointer-events-none",
-};

package/src/components/ui/button/button.tsx

@@ -1,209 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants, buttonStateStyles } from "./button.styles";
-import type { IButtonProps, IButtonState } from "./button.types";
-
-/**
- * Slot component para el patrón asChild.
- * Permite componer el botón con otro elemento pasando todas las props y handlers.
- */
-function Slot({
-  children,
-  ...props
-}: React.HTMLAttributes<HTMLElement> & { children: React.ReactElement }) {
-  const child = React.Children.only(children) as React.ReactElement<{ className?: string; style?: React.CSSProperties }>;
-  return React.cloneElement(child, {
-    ...props,
-    ...child.props,
-    className: cn(props.className, child.props.className),
-    style: { ...props.style, ...child.props.style },
-  });
-}
-
-/**
- * Componente Button basado en Base UI.
- *
- * Un componente de botón que puede renderizarse como otra etiqueta
- * o mantenerse enfocable cuando está deshabilitado.
- *
- * Características:
- * - Soporte para múltiples variantes de estilo (default, secondary, destructive, outline, ghost, link, success, warning)
- * - Múltiples tamaños (default, sm, lg, icon)
- * - Patrón asChild para composición con otros elementos
- * - Renderizado flexible con la prop `render`
- * - Estados accesibles (disabled, pressed)
- * - Clases y estilos dinámicos basados en estado
- *
- * @param props - Props del componente incluyendo variantes de estilo y comportamiento
- * @returns Elemento button renderizado (o elemento personalizado si se usa `asChild` o `render`)
- *
- * @example
- * ```tsx
- * import { Button } from "@/components/ui/button";
- *
- * function Example() {
- *   return (
- *     <div className="flex gap-2">
- *       <Button>Default</Button>
- *       <Button variant="secondary">Secondary</Button>
- *       <Button variant="destructive">Delete</Button>
- *       <Button variant="success">Saved</Button>
- *       <Button variant="warning">Warning</Button>
- *       <Button variant="outline">Outline</Button>
- *       <Button variant="ghost">Ghost</Button>
- *       <Button variant="link">Link</Button>
- *       <Button size="sm">Small</Button>
- *       <Button size="lg">Large</Button>
- *       <Button size="icon">
- *         <Icon />
- *       </Button>
- *       <Button disabled>Disabled</Button>
- *       <Button disabled focusableWhenDisabled>
- *         Loading...
- *       </Button>
- *       <Button asChild>
- *         <a href="/link">Link Button</a>
- *       </Button>
- *     </div>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Button con renderizado personalizado
- * <Button render={<div />} nativeButton={false}>
- *   Custom container
- * </Button>
- *
- * // Button con clases dinámicas basadas en estado
- * <Button
- *   className={(state) =>
- *     cn(
- *       "transition-transform",
- *       state.pressed && "scale-95"
- *     )
- *   }
- * >
- *   Press me
- * </Button>
- * ```
- *
- * @see {@link IButtonProps}
- * @see {@link buttonVariants}
- * @see {@link https://base-ui.com/react/components/button}
- */
-function Button({
-  className,
-  variant,
-  size,
-  focusableWhenDisabled,
-  nativeButton,
-  asChild = false,
-  render,
-  style,
-  children,
-  disabled,
-  onPointerDown,
-  onPointerUp,
-  onPointerLeave,
-  ...props
-}: IButtonProps) {
-  const [pressed, setPressed] = React.useState(false);
-
-  const handlePointerDown = React.useCallback(
-    (e: React.PointerEvent<HTMLButtonElement>) => {
-      setPressed(true);
-      onPointerDown?.(e);
-    },
-    [onPointerDown]
-  );
-
-  const handlePointerUp = React.useCallback(
-    (e: React.PointerEvent<HTMLButtonElement>) => {
-      setPressed(false);
-      onPointerUp?.(e);
-    },
-    [onPointerUp]
-  );
-
-  const handlePointerLeave = React.useCallback(
-    (e: React.PointerEvent<HTMLButtonElement>) => {
-      setPressed(false);
-      onPointerLeave?.(e);
-    },
-    [onPointerLeave]
-  );
-
-  const state: IButtonState = {
-    disabled: disabled ?? false,
-    pressed,
-  };
-
-  const baseClassName = cn(
-    buttonVariants({ variant, size }),
-    typeof className === "function" ? className(state) : className,
-    pressed && buttonStateStyles.pressed
-  );
-
-  const baseStyle =
-    typeof style === "function" ? style(state) : style;
-
-  // Si asChild está activo, usamos el patrón Slot
-  if (asChild && React.isValidElement(children)) {
-    return (
-      <ButtonPrimitive
-        data-slot="button"
-        data-variant={variant}
-        data-size={size}
-        data-pressed={pressed}
-        disabled={disabled}
-        focusableWhenDisabled={focusableWhenDisabled}
-        className={baseClassName}
-        style={baseStyle}
-        onPointerDown={handlePointerDown}
-        onPointerUp={handlePointerUp}
-        onPointerLeave={handlePointerLeave}
-        {...props}
-      >
-        <Slot className={baseClassName} style={baseStyle}>
-          {children}
-        </Slot>
-      </ButtonPrimitive>
-    );
-  }
-
-  return (
-    <ButtonPrimitive
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      data-pressed={pressed}
-      disabled={disabled}
-      focusableWhenDisabled={focusableWhenDisabled}
-      nativeButton={nativeButton}
-      render={render as any}
-      className={baseClassName}
-      style={baseStyle}
-      onPointerDown={handlePointerDown}
-      onPointerUp={handlePointerUp}
-      onPointerLeave={handlePointerLeave}
-      {...props}
-    >
-      {children}
-    </ButtonPrimitive>
-  );
-}
-
-export { Button };
-export { buttonVariants, buttonStateStyles } from "./button.styles";
-export type {
-  IButtonProps,
-  IButtonState,
-  ButtonVariant,
-  ButtonSize,
-} from "./button.types";