@minidev.fun/ui 1.0.1

package/src/components/ui/field.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+
+type FieldSetProps = React.ComponentProps<"fieldset">;
+
+/**
+ * Container for grouping related fields, provides semantic fieldset/legend structure.
+ * Use with FieldLegend for proper form semantics.
+ */
+function FieldSet({ className, ...props }: FieldSetProps) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type FieldLegendProps = React.ComponentProps<"legend"> & {
+  /** Visual style variant for the legend. @default "legend" */
+  variant?: "legend" | "label";
+};
+
+/**
+ * Legend for FieldSet, available in two visual styles.
+ * Use "legend" for section headers, "label" for form-like appearance.
+ */
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: FieldLegendProps) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type FieldGroupProps = React.ComponentProps<"div">;
+
+/**
+ * Container for multiple fields, provides consistent spacing and container queries.
+ * Use for grouping related fields without semantic fieldset.
+ */
+function FieldGroup({ className, ...props }: FieldGroupProps) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const fieldVariants = cva(
+  "data-[invalid=true]:text-destructive gap-3 group/field flex w-full",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+);
+
+type FieldProps = React.ComponentProps<"div"> &
+  VariantProps<typeof fieldVariants>;
+
+/**
+ * Base field wrapper with support for multiple orientation layouts.
+ * Supports vertical, horizontal, and responsive layouts. Use data-invalid attribute for error states.
+ */
+function Field({ className, orientation = "vertical", ...props }: FieldProps) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+type FieldContentProps = React.ComponentProps<"div">;
+
+/**
+ * Container for field input and helper elements (description, error).
+ * Groups the input control with its associated help text.
+ */
+function FieldContent({ className, ...props }: FieldContentProps) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "gap-1 group/field-content flex flex-1 flex-col leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type FieldLabelProps = React.ComponentProps<typeof Label>;
+
+/**
+ * Label for field input, extends the Label component with field-specific styling.
+ * Supports disabled state and nested field patterns.
+ */
+function FieldLabel({ className, ...props }: FieldLabelProps) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type FieldTitleProps = React.ComponentProps<"div">;
+
+/**
+ * Title text for fields with embedded controls (checkboxes, switches).
+ * Use inside FieldLabel alongside the control.
+ */
+function FieldTitle({ className, ...props }: FieldTitleProps) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type FieldDescriptionProps = React.ComponentProps<"p">;
+
+/**
+ * Helper text providing additional context for the field.
+ * Automatically styled for placement after inputs.
+ */
+function FieldDescription({ className, ...props }: FieldDescriptionProps) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type FieldSeparatorProps = React.ComponentProps<"div"> & {
+  /** Optional label text to display on the separator line. */
+  children?: React.ReactNode;
+};
+
+/**
+ * Visual separator between field groups, optionally with label text.
+ * Use to organize sections within forms.
+ */
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: FieldSeparatorProps) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative",
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  );
+}
+
+type FieldErrorProps = React.ComponentProps<"div"> & {
+  /** Array of error objects with message property. Automatically deduplicates. */
+  errors?: Array<{ message?: string } | undefined>;
+};
+
+/**
+ * Error message display for fields. Accepts errors array or children.
+ * Automatically deduplicates multiple errors and displays as list.
+ */
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: FieldErrorProps) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+
+    if (!errors?.length) {
+      return null;
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ];
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    );
+  }, [children, errors]);
+
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  );
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+  type FieldProps,
+  type FieldLabelProps,
+  type FieldDescriptionProps,
+  type FieldErrorProps,
+  type FieldGroupProps,
+  type FieldLegendProps,
+  type FieldSeparatorProps,
+  type FieldSetProps,
+  type FieldContentProps,
+  type FieldTitleProps,
+};

package/src/components/ui/hover-card.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+
+import { cn } from "@/lib/utils";
+
+type HoverCardProps = PreviewCardPrimitive.Root.Props;
+
+/**
+ * HoverCard root container - manages state and hover interactions.
+ * Wrap trigger and content with this component.
+ */
+function HoverCard({ ...props }: HoverCardProps) {
+  return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+type HoverCardTriggerProps = PreviewCardPrimitive.Trigger.Props;
+
+/**
+ * Element that triggers the hover card on hover.
+ * Use `render` prop to customize the trigger element.
+ */
+function HoverCardTrigger({ ...props }: HoverCardTriggerProps) {
+  return (
+    <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  );
+}
+
+type HoverCardContentProps = PreviewCardPrimitive.Popup.Props &
+  Pick<
+    PreviewCardPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >;
+
+/**
+ * HoverCard content container with automatic portal, positioning, and animations.
+ * Supports positioning on all sides with alignment options.
+ */
+function HoverCardContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 4,
+  ...props
+}: HoverCardContentProps) {
+  return (
+    <PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot="hover-card-content"
+          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 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 bg-popover text-popover-foreground w-64 rounded-5xl p-4 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden",
+            className,
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
+
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+  type HoverCardProps,
+  type HoverCardTriggerProps,
+  type HoverCardContentProps,
+};

package/src/components/ui/input-group.tsx

@@ -0,0 +1,199 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+type InputGroupProps = React.ComponentProps<"div">;
+
+/**
+ * Container for input with addons (icons, text, buttons) at start/end.
+ * Manages focus ring, validation states, and addon alignment.
+ */
+function InputGroup({ className, ...props }: InputGroupProps) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-lg border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first",
+        "inline-end":
+          "pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last",
+        "block-start":
+          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+        "block-end":
+          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+type InputGroupAddonProps = React.ComponentProps<"div"> &
+  VariantProps<typeof inputGroupAddonVariants>;
+
+/**
+ * Addon container for icons, text, or buttons at input start/end.
+ * Clicking the addon focuses the input (unless clicking a button).
+ */
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: InputGroupAddonProps) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  "gap-2 text-sm shadow-none flex items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+
+type InputGroupButtonProps = Omit<
+  React.ComponentProps<typeof Button>,
+  "size" | "type"
+> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    /** Button type. @default "button" */
+    type?: "button" | "submit" | "reset";
+  };
+
+/**
+ * Button sized for use within InputGroupAddon.
+ * Defaults to ghost variant and extra-small size.
+ */
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: InputGroupButtonProps) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+type InputGroupTextProps = React.ComponentProps<"span">;
+
+/**
+ * Text label/prefix/suffix for use within InputGroupAddon.
+ * Commonly used for URL schemes (https://), units (USD, MB), or format indicators (@, /).
+ */
+function InputGroupText({ className, ...props }: InputGroupTextProps) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type InputGroupInputProps = React.ComponentProps<"input">;
+
+/**
+ * Input styled for use within InputGroup.
+ * Removes border/shadow/ring to integrate with group container styling.
+ */
+function InputGroupInput({ className, ...props }: InputGroupInputProps) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type InputGroupTextareaProps = React.ComponentProps<"textarea">;
+
+/**
+ * Textarea styled for use within InputGroup.
+ * Removes border/shadow/ring to integrate with group container styling.
+ */
+function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+  inputGroupAddonVariants,
+  inputGroupButtonVariants,
+  type InputGroupProps,
+  type InputGroupAddonProps,
+  type InputGroupButtonProps,
+  type InputGroupTextProps,
+  type InputGroupInputProps,
+  type InputGroupTextareaProps,
+};

package/src/components/ui/input-otp.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+
+import { cn } from "@/lib/utils";
+import { MinusIcon } from "lucide-react";
+
+type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
+  /** Additional class names for the container element. */
+  containerClassName?: string;
+};
+
+/**
+ * One-time password input with individual character slots.
+ * Built on input-otp library with styled slots and separators.
+ */
+function InputOTP({ className, containerClassName, ...props }: InputOTPProps) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "cn-input-otp flex items-center has-disabled:opacity-50",
+        containerClassName,
+      )}
+      spellCheck={false}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  );
+}
+
+type InputOTPGroupProps = React.ComponentProps<"div">;
+
+/**
+ * Groups multiple InputOTPSlot components together.
+ * Supports error state via aria-invalid.
+ */
+function InputOTPGroup({ className, ...props }: InputOTPGroupProps) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn(
+        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type InputOTPSlotProps = React.ComponentProps<"div"> & {
+  /** Zero-based index of this slot in the OTP sequence. */
+  index: number;
+};
+
+/**
+ * Individual character slot for OTP input.
+ * Displays current character, active state, and animated caret.
+ */
+function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-xl first:border-l last:rounded-r-xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+type InputOTPSeparatorProps = React.ComponentProps<"div">;
+
+/**
+ * Visual separator between InputOTPGroup components.
+ * Renders a minus icon by default.
+ */
+function InputOTPSeparator({ ...props }: InputOTPSeparatorProps) {
+  return (
+    <div
+      data-slot="input-otp-separator"
+      className="[&_svg:not([class*='size-'])]:size-4 flex items-center"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon />
+    </div>
+  );
+}
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+  type InputOTPProps,
+  type InputOTPGroupProps,
+  type InputOTPSlotProps,
+  type InputOTPSeparatorProps,
+};