@mks2508/mks-ui 0.1.3 → 0.2.0

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/alert-dialog.tsx

@@ -1,177 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: AlertDialogPrimitive.Backdrop.Props) {
-  return (
-    <AlertDialogPrimitive.Backdrop
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  size = "default",
-  ...props
-}: AlertDialogPrimitive.Popup.Props & {
-  size?: "default" | "sm"
-}) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Popup
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  variant = "outline",
-  children,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Close> & {
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "success" | "warning"
-}) {
-  return (
-    <AlertDialogPrimitive.Close
-      data-slot="alert-dialog-cancel"
-      className={cn(className)}
-      {...props}
-    >
-      <Button variant={variant}>{children || "Cancel"}</Button>
-    </AlertDialogPrimitive.Close>
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-}

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",
-};