@minidev.fun/ui 1.0.1

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

@@ -0,0 +1,223 @@
+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";
+
+type AlertDialogProps = AlertDialogPrimitive.Root.Props;
+
+/** Root container for alert dialog. Manages open state and accessibility. */
+function AlertDialog({ ...props }: AlertDialogProps) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+type AlertDialogTriggerProps = AlertDialogPrimitive.Trigger.Props;
+
+/** Button that opens the alert dialog. Use `render` prop to customize. */
+function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+type AlertDialogPortalProps = AlertDialogPrimitive.Portal.Props;
+
+/** Portal container for alert dialog content and overlay. */
+function AlertDialogPortal({ ...props }: AlertDialogPortalProps) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+type AlertDialogOverlayProps = AlertDialogPrimitive.Backdrop.Props;
+
+/** Semi-transparent backdrop overlay with frosted glass effect. */
+function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {
+  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}
+    />
+  );
+}
+
+type AlertDialogContentProps = AlertDialogPrimitive.Popup.Props & {
+  /** Dialog size variant. @default "default" */
+  size?: "default" | "sm";
+};
+
+/**
+ * Alert dialog content with automatic portal and backdrop.
+ * Centered, animated popup with two size variants.
+ */
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogContentProps) {
+  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-popover text-popover-foreground ring-border gap-6 rounded-5xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg 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>
+  );
+}
+
+type AlertDialogHeaderProps = React.ComponentProps<"div">;
+
+/** Header section for title, description, and optional media icon. */
+function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
+  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-6 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}
+    />
+  );
+}
+
+type AlertDialogFooterProps = React.ComponentProps<"div">;
+
+/** Footer section for action and cancel buttons. */
+function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "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}
+    />
+  );
+}
+
+type AlertDialogMediaProps = React.ComponentProps<"div">;
+
+/** Optional visual indicator icon container. Commonly used for warnings or errors. */
+function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogTitleProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Title
+>;
+
+/** Alert dialog title. Automatically announced by screen readers. */
+function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg 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}
+    />
+  );
+}
+
+type AlertDialogDescriptionProps = React.ComponentProps<
+  typeof AlertDialogPrimitive.Description
+>;
+
+/** Alert dialog description text. Supports links with automatic styling. */
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogDescriptionProps) {
+  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}
+    />
+  );
+}
+
+type AlertDialogActionProps = React.ComponentProps<typeof Button>;
+
+/** Primary action button. Inherits all Button variants. */
+function AlertDialogAction({ className, ...props }: AlertDialogActionProps) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+type AlertDialogCancelProps = AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">;
+
+/** Cancel button that closes the alert dialog. Defaults to outline variant. */
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogCancelProps) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  type AlertDialogProps,
+  type AlertDialogTriggerProps,
+  type AlertDialogPortalProps,
+  type AlertDialogOverlayProps,
+  type AlertDialogContentProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+  type AlertDialogMediaProps,
+  type AlertDialogTitleProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogActionProps,
+  type AlertDialogCancelProps,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-6xl border px-5 py-4 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+        success:
+          "text-success bg-card *:data-[slot=alert-description]:text-success/90 *:[svg]:text-current",
+        warning:
+          "text-warning bg-card *:data-[slot=alert-description]:text-warning/90 *:[svg]:text-current",
+        info: "text-info bg-card *:data-[slot=alert-description]:text-info/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+type AlertProps = React.ComponentProps<"div"> &
+  VariantProps<typeof alertVariants>;
+type AlertTitleProps = React.ComponentProps<"div">;
+type AlertDescriptionProps = React.ComponentProps<"div">;
+type AlertActionProps = React.ComponentProps<"div">;
+
+/**
+ * Alert component for displaying contextual messages with optional icons and actions.
+ * Supports multiple semantic variants for different message types.
+ */
+function Alert({ className, variant, ...props }: AlertProps) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Title heading for the alert. Automatically positions next to icon when present.
+ * Supports inline links with hover styling.
+ */
+function AlertTitle({ className, ...props }: AlertTitleProps) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Description content for the alert. Supports inline links and paragraph formatting.
+ * Uses muted foreground color that adapts to variant.
+ */
+function AlertDescription({ className, ...props }: AlertDescriptionProps) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Action area positioned in top-right of alert. Use for dismiss buttons or action CTAs.
+ */
+function AlertAction({ className, ...props }: AlertActionProps) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2.5 right-3", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  AlertAction,
+  alertVariants,
+  type AlertProps,
+  type AlertTitleProps,
+  type AlertDescriptionProps,
+  type AlertActionProps,
+};

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+
+type AspectRatioProps = React.ComponentProps<"div"> & {
+  /** Aspect ratio as width/height (e.g., 16/9, 1, 4/3) */
+  ratio: number;
+};
+
+/**
+ * Container that maintains a consistent aspect ratio.
+ * Automatically adjusts height based on width to preserve proportions.
+ */
+function AspectRatio({ ratio, className, ...props }: AspectRatioProps) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio, type AspectRatioProps };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+
+import { cn } from "@/lib/utils";
+
+type AvatarProps = AvatarPrimitive.Root.Props & {
+  /** Avatar size variant. @default "default" */
+  size?: "default" | "sm" | "lg";
+};
+
+type AvatarImageProps = AvatarPrimitive.Image.Props;
+
+type AvatarFallbackProps = AvatarPrimitive.Fallback.Props;
+
+type AvatarBadgeProps = React.ComponentProps<"span">;
+
+type AvatarGroupProps = React.ComponentProps<"div">;
+
+type AvatarGroupCountProps = React.ComponentProps<"div">;
+
+/**
+ * Avatar root component with size variants.
+ * Displays user profile images with automatic fallback support.
+ */
+function Avatar({ className, size = "default", ...props }: AvatarProps) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Avatar image element. Automatically shows fallback if image fails to load.
+ */
+function AvatarImage({ className, ...props }: AvatarImageProps) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "rounded-full aspect-square size-full object-cover",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Fallback content shown when image is unavailable.
+ * Typically displays user initials or an icon.
+ */
+function AvatarFallback({ className, ...props }: AvatarFallbackProps) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Badge positioned at bottom-right of avatar.
+ * Use for status indicators, verification badges, or notification dots.
+ */
+function AvatarBadge({ className, ...props }: AvatarBadgeProps) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Container for stacked avatars with ring borders.
+ * Used to show team members or collaborators.
+ */
+function AvatarGroup({ className, ...props }: AvatarGroupProps) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Counter badge showing additional hidden avatars in a group.
+ * Typically displays "+N" to indicate overflow count.
+ */
+function AvatarGroupCount({ className, ...props }: AvatarGroupCountProps) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+  type AvatarProps,
+  type AvatarImageProps,
+  type AvatarFallbackProps,
+  type AvatarBadgeProps,
+  type AvatarGroupProps,
+  type AvatarGroupCountProps,
+};

package/src/components/ui/badge.tsx

@@ -0,0 +1,67 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        success:
+          "bg-success/10 [a]:hover:bg-success/20 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 text-success dark:bg-success/20",
+        warning:
+          "bg-warning/10 [a]:hover:bg-warning/20 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 text-warning dark:bg-warning/20",
+        info: "bg-info/10 [a]:hover:bg-info/20 focus-visible:ring-info/20 dark:focus-visible:ring-info/40 text-info dark:bg-info/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+type BadgeProps = useRender.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants>;
+
+/**
+ * Badge component for displaying labels, counts, and status indicators.
+ *
+ * Supports multiple visual variants (default, outline, ghost, etc.) and semantic variants
+ * (success, warning, destructive, info). Icons can be added using `data-icon="inline-start"` or
+ * `data-icon="inline-end"` attributes on icon elements.
+ */
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: BadgeProps) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ className, variant })),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants, type BadgeProps };