@mks2508/mks-ui 0.1.4 → 0.2.0

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

package/src/components/ui/checkbox.tsx

@@ -1,9 +0,0 @@
-/**
- * Checkbox component - Animate UI primitive re-export.
- *
- * Animated checkbox with indicator transition.
- *
- * @module @mks2508/mks-ui/components/ui/checkbox
- */
-
-export * from '@/components/animate-ui/primitives/base/checkbox';

package/src/components/ui/combobox.tsx

@@ -1,293 +0,0 @@
-import * as React from "react"
-import { Combobox as ComboboxPrimitive } from "@base-ui/react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/components/ui/input-group"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { ArrowDown01Icon, Cancel01Icon, Tick02Icon } from "@hugeicons/core-free-icons"
-
-const Combobox = ComboboxPrimitive.Root
-
-function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
-}
-
-function ComboboxTrigger({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Trigger.Props) {
-  return (
-    <ComboboxPrimitive.Trigger
-      data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
-      {...props}
-    >
-      {children}
-      <HugeiconsIcon icon={ArrowDown01Icon} strokeWidth={2} className="text-muted-foreground size-4 pointer-events-none" />
-    </ComboboxPrimitive.Trigger>
-  )
-}
-
-function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
-  return (
-    <ComboboxPrimitive.Clear
-      data-slot="combobox-clear"
-      // TODO: Restore when Button component is available
-      // render={<InputGroupButton variant="ghost" size="icon-xs" />}
-      render={<InputGroupButton size="icon-xs" />}
-      className={cn(className)}
-      {...props}
-    >
-      <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} className="pointer-events-none" />
-    </ComboboxPrimitive.Clear>
-  )
-}
-
-function ComboboxInput({
-  className,
-  children,
-  disabled = false,
-  showTrigger = true,
-  showClear = false,
-  ...props
-}: ComboboxPrimitive.Input.Props & {
-  showTrigger?: boolean
-  showClear?: boolean
-}) {
-  return (
-    <InputGroup className={cn("w-auto", className)}>
-      <ComboboxPrimitive.Input
-        render={<InputGroupInput disabled={disabled} />}
-        {...props}
-      />
-      <InputGroupAddon align="inline-end">
-        {showTrigger && (
-          <InputGroupButton
-            size="icon-xs"
-            data-slot="input-group-button"
-            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
-            disabled={disabled}
-          >
-            <ComboboxTrigger />
-          </InputGroupButton>
-        )}
-        {showClear && <ComboboxClear disabled={disabled} />}
-      </InputGroupAddon>
-      {children}
-    </InputGroup>
-  )
-}
-
-function ComboboxContent({
-  className,
-  side = "bottom",
-  sideOffset = 6,
-  align = "start",
-  alignOffset = 0,
-  anchor,
-  ...props
-}: ComboboxPrimitive.Popup.Props &
-  Pick<
-    ComboboxPrimitive.Positioner.Props,
-    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
-  >) {
-  return (
-    <ComboboxPrimitive.Portal>
-      <ComboboxPrimitive.Positioner
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        anchor={anchor}
-        className="isolate z-50"
-      >
-        <ComboboxPrimitive.Popup
-          data-slot="combobox-content"
-          data-chips={!!anchor}
-          className={cn("bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className )}
-          {...props}
-        />
-      </ComboboxPrimitive.Positioner>
-    </ComboboxPrimitive.Portal>
-  )
-}
-
-function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
-  return (
-    <ComboboxPrimitive.List
-      data-slot="combobox-list"
-      className={cn(
-        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Item.Props) {
-  return (
-    <ComboboxPrimitive.Item
-      data-slot="combobox-item"
-      className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ComboboxPrimitive.ItemIndicator
-        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
-      >
-        <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} className="pointer-events-none" />
-      </ComboboxPrimitive.ItemIndicator>
-    </ComboboxPrimitive.Item>
-  )
-}
-
-function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
-  return (
-    <ComboboxPrimitive.Group
-      data-slot="combobox-group"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxLabel({
-  className,
-  ...props
-}: ComboboxPrimitive.GroupLabel.Props) {
-  return (
-    <ComboboxPrimitive.GroupLabel
-      data-slot="combobox-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  )
-}
-
-function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
-  return (
-    <ComboboxPrimitive.Empty
-      data-slot="combobox-empty"
-      className={cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxSeparator({
-  className,
-  ...props
-}: ComboboxPrimitive.Separator.Props) {
-  return (
-    <ComboboxPrimitive.Separator
-      data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxChips({
-  className,
-  ...props
-}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
-  ComboboxPrimitive.Chips.Props) {
-  return (
-    <ComboboxPrimitive.Chips
-      data-slot="combobox-chips"
-      className={cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxChip({
-  className,
-  children,
-  showRemove = true,
-  ...props
-}: ComboboxPrimitive.Chip.Props & {
-  showRemove?: boolean
-}) {
-  return (
-    <ComboboxPrimitive.Chip
-      data-slot="combobox-chip"
-      className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {showRemove && (
-        <ComboboxPrimitive.ChipRemove
-          render={<Button variant="ghost" size="sm" className="h-5 w-5 p-0" />}
-          className="-ml-1 opacity-50 hover:opacity-100"
-          data-slot="combobox-chip-remove"
-        >
-          <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} className="pointer-events-none" />
-        </ComboboxPrimitive.ChipRemove>
-      )}
-    </ComboboxPrimitive.Chip>
-  )
-}
-
-function ComboboxChipsInput({
-  className,
-  ...props
-}: ComboboxPrimitive.Input.Props) {
-  return (
-    <ComboboxPrimitive.Input
-      data-slot="combobox-chip-input"
-      className={cn(
-        "min-w-16 flex-1 outline-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function useComboboxAnchor() {
-  return React.useRef<HTMLDivElement | null>(null)
-}
-
-export {
-  Combobox,
-  ComboboxInput,
-  ComboboxContent,
-  ComboboxList,
-  ComboboxItem,
-  ComboboxGroup,
-  ComboboxLabel,
-  ComboboxCollection,
-  ComboboxEmpty,
-  ComboboxSeparator,
-  ComboboxChips,
-  ComboboxChip,
-  ComboboxChipsInput,
-  ComboboxTrigger,
-  ComboboxValue,
-  useComboboxAnchor,
-}

package/src/components/ui/corner-bracket.tsx

@@ -1,85 +0,0 @@
-/**
- * Corner Bracket Component
- *
- * Corner bracket decoration for industrial/technical styling.
- *
- * @module @mks2508/mks-ui/components/ui
- */
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const bracketVariants = cva(
-	'absolute pointer-events-none',
-	{
-		variants: {
-			position: {
-				tl: 'top-0 left-0',
-				tr: 'top-0 right-0',
-				bl: 'bottom-0 left-0',
-				br: 'bottom-0 right-0',
-			},
-			variant: {
-				default: 'stroke-primary/50',
-				accent: 'stroke-primary/66',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-		},
-	}
-);
-
-export interface ICornerBracketProps
-	extends Omit<React.SVGProps<SVGSVGElement>, 'variant'>,
-		VariantProps<typeof bracketVariants> {
-	size?: number;
-}
-
-const PATHS = {
-	tl: 'M 0 20 L 0 5 A 5 5 0 0 1 5 0 L 20 0',
-	tr: 'M 0 0 L 15 0 A 5 5 0 0 1 20 5 L 20 20',
-	bl: 'M 0 0 L 0 15 A 5 5 0 0 0 5 20 L 20 20',
-	br: 'M 20 0 L 5 0 A 5 5 0 0 0 0 5 L 0 20',
-} as const;
-
-/**
- * Corner bracket decoration for industrial/technical UI styling.
- *
- * @param position - Corner position: 'tl' (top-left), 'tr' (top-right), 'bl' (bottom-left), 'br' (bottom-right)
- * @param variant - Visual style: 'default' or 'accent'
- * @param size - Bracket size in pixels (default: 20)
- *
- * @example
- * ```tsx
- * <div className="relative p-4">
- *   <CornerBracket position="tl" />
- *   <CornerBracket position="br" />
- *   Content here
- * </div>
- * ```
- */
-export function CornerBracket({
-	className,
-	position,
-	variant,
-	size = 20,
-	...props
-}: ICornerBracketProps) {
-	return (
-		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 20 20"
-			fill="none"
-			className={cn(bracketVariants({ position, variant }), className)}
-			{...props}
-		>
-			<path
-				d={PATHS[position || 'tl']}
-				strokeWidth={1.5}
-				strokeLinecap="round"
-			/>
-		</svg>
-	);
-}

package/src/components/ui/counting-number.tsx

@@ -1,9 +0,0 @@
-/**
- * CountingNumber component - Animate UI primitive re-export.
- *
- * Animated number display with counting/interpolation effect.
- *
- * @module @mks2508/mks-ui/components/ui/counting-number
- */
-
-export * from '@/components/animate-ui/primitives/texts/counting-number';

package/src/components/ui/dialog.tsx

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