@mks2508/mks-ui 0.1.3 → 0.2.0

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

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

@@ -1,125 +0,0 @@
-import type { VariantProps } from "class-variance-authority";
-
-/**
- * Estados del componente Button.
- *
- * @interface IButtonState
- */
-export interface IButtonState {
-  /** Indica si el botón está deshabilitado */
-  disabled: boolean;
-  /** Indica si el botón está siendo presionado */
-  pressed: boolean;
-}
-
-/**
- * Props para el componente Button basado en Base UI.
- *
- * @interface IButtonProps
- * @extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style">
- * @extends VariantProps<typeof import("./button.styles").buttonVariants>
- *
- * @example
- * ```tsx
- * // Button por defecto
- * <Button>Click me</Button>
- *
- * // Button con variante destructiva
- * <Button variant="destructive">Delete</Button>
- *
- * // Button con variante success
- * <Button variant="success">Saved</Button>
- *
- * // Button deshabilitado pero enfocable
- * <Button disabled focusableWhenDisabled>Loading...</Button>
- *
- * // Button renderizado como div
- * <Button render={<div />} nativeButton={false}>
- *   Custom content
- * </Button>
- *
- * // Button con asChild (composición)
- * <Button asChild>
- *   <a href="/link">Link Button</a>
- * </Button>
- *
- * // Button con clase basada en estado
- * <Button className={(state) => state.pressed ? "scale-95" : ""}>
- *   Pressable
- * </Button>
- * ```
- */
-export interface IButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "style">,
-    VariantProps<typeof import("./button.styles").buttonVariants> {
-  /**
-   * Si el botón debe ser enfocable cuando está deshabilitado.
-   * Útil para mantener el foco durante estados de carga.
-   *
-   * @default false
-   */
-  focusableWhenDisabled?: boolean;
-
-  /**
-   * Si el componente renderiza un elemento `<button>` nativo al reemplazarlo
-   * mediante la prop `render`. Establecer en `false` si el elemento renderizado
-   * no es un botón (por ejemplo, un `<div>`).
-   *
-   * @default true
-   */
-  nativeButton?: boolean;
-
-  /**
-   * Permite componer el botón con otro elemento (patrón asChild).
-   * El componente hijo recibirá todas las props y event handlers del botón.
-   *
-   * @default false
-   */
-  asChild?: boolean;
-
-  /**
-   * Permite reemplazar el elemento HTML del componente con una etiqueta diferente
-   * o componerlo con otro componente. Ignorado si `asChild` es true.
-   *
-   * Puede ser un `ReactElement` o una función que retorne el elemento a renderizar.
-   */
-  render?:
-    | React.ReactElement
-    | ((props: React.HTMLProps<HTMLElement>, state: IButtonState) => React.ReactElement);
-
-  /**
-   * Clase CSS aplicada al elemento, o una función que retorna una clase
-   * basada en el estado del componente.
-   */
-  className?: string | ((state: IButtonState) => string | undefined);
-
-  /**
-   * Estilos CSS aplicados al elemento, o una función que retorna estilos
-   * basados en el estado del componente.
-   */
-  style?:
-    | React.CSSProperties
-    | ((state: IButtonState) => React.CSSProperties | undefined);
-}
-
-/**
- * Variantes disponibles para el componente Button.
- *
- * @type ButtonVariant
- */
-export type ButtonVariant =
-  | "default"
-  | "secondary"
-  | "destructive"
-  | "outline"
-  | "ghost"
-  | "link"
-  | "success"
-  | "warning";
-
-/**
- * Tamaños disponibles para el componente Button.
- *
- * @type ButtonSize
- */
-export type ButtonSize = "default" | "sm" | "lg" | "icon";

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

@@ -1,7 +0,0 @@
-/**
- * Button component barrel export
- *
- * @module @mks2508/mks-ui/components/ui/button
- */
-
-export * from "./button";

package/src/components/ui/card.tsx

@@ -1,108 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const cardVariants = cva(
-  "flex flex-col gap-6 rounded-xl border transition-all",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground py-6 shadow-sm",
-        "glass": "bg-card/70 backdrop-blur-md border-border shadow-[0_4px_20px_rgba(0,0,0,0.19)]",
-        "glass-accent": "bg-card/70 backdrop-blur-md border-border-primary shadow-[0_4px_20px_rgba(212,12,103,0.25)]",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Card({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
-  return (
-    <div
-      data-slot="card"
-      data-variant={variant}
-      className={cn(cardVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-  cardVariants,
-}