@mks2508/mks-ui 0.1.4 → 0.2.0

package/src/components/animate-ui/primitives/texts/counting-number.tsx

@@ -1,119 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useMotionValue, useSpring, type SpringOptions } from 'motion/react';
-
-import {
-  useIsInView,
-  type UseIsInViewOptions,
-} from '@/hooks/use-is-in-view';
-
-type CountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
-  number: number;
-  fromNumber?: number;
-  padStart?: boolean;
-  decimalSeparator?: string;
-  decimalPlaces?: number;
-  transition?: SpringOptions;
-  delay?: number;
-  initiallyStable?: boolean;
-} & UseIsInViewOptions;
-
-function CountingNumber({
-  ref,
-  number,
-  fromNumber = 0,
-  padStart = false,
-  inView = false,
-  inViewMargin = '0px',
-  inViewOnce = true,
-  decimalSeparator = '.',
-  transition = { stiffness: 90, damping: 50 },
-  decimalPlaces = 0,
-  delay = 0,
-  initiallyStable = false,
-  ...props
-}: CountingNumberProps) {
-  const { ref: localRef, isInView } = useIsInView(
-    ref as React.Ref<HTMLElement>,
-    {
-      inView,
-      inViewOnce,
-      inViewMargin,
-    },
-  );
-
-  const numberStr = number.toString();
-  const decimals =
-    typeof decimalPlaces === 'number'
-      ? decimalPlaces
-      : numberStr.includes('.')
-        ? (numberStr.split('.')[1]?.length ?? 0)
-        : 0;
-
-  const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
-  const springVal = useSpring(motionVal, transition);
-
-  React.useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      if (isInView) motionVal.set(number);
-    }, delay);
-
-    return () => clearTimeout(timeoutId);
-  }, [isInView, number, motionVal, delay]);
-
-  React.useEffect(() => {
-    const unsubscribe = springVal.on('change', (latest) => {
-      if (localRef.current) {
-        let formatted =
-          decimals > 0
-            ? latest.toFixed(decimals)
-            : Math.round(latest).toString();
-
-        if (decimals > 0) {
-          formatted = formatted.replace('.', decimalSeparator);
-        }
-
-        if (padStart) {
-          const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-          const [intPart, fracPart] = formatted.split(decimalSeparator);
-          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';
-          formatted = fracPart
-            ? `${paddedInt}${decimalSeparator}${fracPart}`
-            : paddedInt;
-        }
-
-        localRef.current.textContent = formatted;
-      }
-    });
-    return () => unsubscribe();
-  }, [springVal, decimals, padStart, number, decimalSeparator, localRef]);
-
-  const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-
-  const formatValue = (val: number) => {
-    let out = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();
-    if (decimals > 0) out = out.replace('.', decimalSeparator);
-    if (padStart) {
-      const [intPart, fracPart] = out.split(decimalSeparator);
-      const paddedInt = (intPart ?? '').padStart(finalIntLength, '0');
-      out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
-    }
-    return out;
-  };
-
-  const zeroText = padStart
-    ? '0'.padStart(finalIntLength, '0') +
-      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')
-    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');
-
-  const initialText = initiallyStable ? formatValue(number) : zeroText;
-
-  return (
-    <span ref={localRef} data-slot="counting-number" {...props}>
-      {initialText}
-    </span>
-  );
-}
-
-export { CountingNumber, type CountingNumberProps };

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