@kinetixui/ui 0.1.0

package/src/components/footer.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Footer — a page footer shell: columns of nav links plus a bottom bar
+ * (copyright, legal, social). Compose `FooterColumn` / `FooterLink` /
+ * `FooterBottom` inside it.
+ */
+const Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => (
+    <footer ref={ref} className={cn("w-full border-t border-border bg-background px-6 py-10 font-sans", className)} {...props}>
+      {children}
+    </footer>
+  ),
+);
+Footer.displayName = "Footer";
+
+export interface FooterColumnProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode;
+}
+
+const FooterColumn = React.forwardRef<HTMLDivElement, FooterColumnProps>(
+  ({ className, title, children, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-3", className)} {...props}>
+      <p className="text-label-md font-medium text-foreground">{title}</p>
+      <div className="flex flex-col gap-2">{children}</div>
+    </div>
+  ),
+);
+FooterColumn.displayName = "FooterColumn";
+
+const FooterLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
+  ({ className, ...props }, ref) => (
+    <a
+      ref={ref}
+      className={cn(
+        "text-body-sm text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FooterLink.displayName = "FooterLink";
+
+const FooterBottom = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "mt-8 flex flex-wrap items-center justify-between gap-3 border-t border-border pt-6 text-body-sm text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FooterBottom.displayName = "FooterBottom";
+
+export { Footer, FooterColumn, FooterLink, FooterBottom };

package/src/components/form.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+import { cn } from "../lib/utils";
+import { Label } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = { name: TName };
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => (
+  <FormFieldContext.Provider value={{ name: props.name }}>
+    <Controller {...props} />
+  </FormFieldContext.Provider>
+);
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = { id: string };
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("grid gap-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+    return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />;
+  },
+);
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? "") : children;
+    if (!body) return null;
+    return (
+      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
+        {body}
+      </p>
+    );
+  },
+);
+FormMessage.displayName = "FormMessage";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/src/components/hover-card.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "../lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none font-sans",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/src/components/image.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import * as React from "react";
+import { ImageOff } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Image — a ratio-locked image with a muted placeholder while loading and a
+ * fallback on error (presets 1:1 / 3:2 / 4:3 / 3:4 / 3:1 / 16:9). Pass
+ * `ratio` as a preset string or a number (w / h).
+ */
+const RATIOS: Record<string, number> = {
+  "1:1": 1,
+  "3:2": 3 / 2,
+  "4:3": 4 / 3,
+  "3:4": 3 / 4,
+  "3:1": 3,
+  "16:9": 16 / 9,
+};
+
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  ratio?: keyof typeof RATIOS | number;
+  rounded?: boolean;
+  fallback?: React.ReactNode;
+}
+
+const Image = React.forwardRef<HTMLImageElement, ImageProps>(
+  ({ ratio = "1:1", rounded = true, fallback, className, alt = "", onLoad, onError, ...props }, forwardedRef) => {
+    const [status, setStatus] = React.useState<"loading" | "loaded" | "error">("loading");
+    const innerRef = React.useRef<HTMLImageElement | null>(null);
+    const setRef = React.useCallback(
+      (node: HTMLImageElement | null) => {
+        innerRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLImageElement | null>).current = node;
+      },
+      [forwardedRef],
+    );
+    const r = typeof ratio === "number" ? ratio : (RATIOS[ratio] ?? 1);
+
+    // A cached image can finish loading before React attaches onLoad (notably
+    // after hydration of a statically-rendered page) — reconcile on mount.
+    React.useEffect(() => {
+      const img = innerRef.current;
+      if (!img) return;
+      if (img.complete) setStatus(img.naturalWidth > 0 ? "loaded" : "error");
+    }, [props.src]);
+
+    return (
+      <div
+        className={cn(
+          "relative w-full overflow-hidden bg-muted",
+          rounded && "rounded-md",
+          className,
+        )}
+        style={{ aspectRatio: r }}
+      >
+        {status === "error" ? (
+          <div className="absolute inset-0 grid place-items-center text-muted-foreground">
+            {fallback ?? <ImageOff className="size-6" />}
+          </div>
+        ) : (
+          <img
+            ref={setRef}
+            alt={alt}
+            className={cn(
+              "size-full object-cover transition-opacity duration-300",
+              status === "loaded" ? "opacity-100" : "opacity-0",
+            )}
+            onLoad={(e) => {
+              setStatus("loaded");
+              onLoad?.(e);
+            }}
+            onError={(e) => {
+              setStatus("error");
+              onError?.(e);
+            }}
+            {...props}
+          />
+        )}
+      </div>
+    );
+  },
+);
+Image.displayName = "Image";
+
+export { Image };

package/src/components/inform.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Inform — a persistent, dismissible, intent-tinted inline notice with an
+ * optional action (information / warning / success / error / action).
+ * Distinct from `Alert` (border-only, static): Inform is filled, closable,
+ * and can carry a CTA.
+ */
+const informVariants = cva(
+  "flex items-start gap-2.5 rounded-md p-3 text-body-sm font-sans [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        information: "bg-info/10 text-info",
+        warning: "bg-warning/15 text-warning",
+        success: "bg-success/15 text-success",
+        error: "bg-destructive/10 text-destructive",
+        action: "bg-foreground text-background",
+      },
+    },
+    defaultVariants: { variant: "information" },
+  },
+);
+
+const ICON = {
+  information: Info,
+  warning: TriangleAlert,
+  success: CircleCheck,
+  error: CircleAlert,
+  action: Info,
+} as const;
+
+export interface InformProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof informVariants> {
+  hideIcon?: boolean;
+  onDismiss?: () => void;
+  /** optional CTA rendered below the message */
+  action?: { label: React.ReactNode; onClick?: () => void; icon?: React.ReactNode };
+}
+
+const Inform = React.forwardRef<HTMLDivElement, InformProps>(
+  ({ className, variant = "information", hideIcon, onDismiss, action, children, ...props }, ref) => {
+    const Icon = ICON[variant ?? "information"];
+    return (
+      <div ref={ref} role="status" className={cn(informVariants({ variant }), className)} {...props}>
+        {!hideIcon && <Icon />}
+        <div className="min-w-0 flex-1">
+          <p className="[&:not(:only-child)]:mb-2">{children}</p>
+          {action && (
+            <button
+              type="button"
+              onClick={action.onClick}
+              className="inline-flex items-center gap-1.5 text-label-md font-medium underline-offset-2 outline-none hover:underline focus-visible:underline [&>svg]:size-4"
+            >
+              {action.icon}
+              {action.label}
+            </button>
+          )}
+        </div>
+        {onDismiss && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            aria-label="Dismiss"
+            className="-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-current"
+          >
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+Inform.displayName = "Inform";
+
+export { Inform, informVariants };

package/src/components/input-group.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * InputGroup — a single bordered shell that hosts an input plus fixed add-ons
+ * (icon, text, dropdown, button) on either side. Matches the KinetixUI design
+ * source's "Fixed Add-on" pattern. Border / focus glow / invalid state apply to
+ * the whole group.
+ *
+ * <InputGroup>
+ *   <InputGroupText>https://</InputGroupText>
+ *   <InputGroupInput placeholder="kinetixui.com" />
+ * </InputGroup>
+ */
+const InputGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="input-group"
+      className={cn(
+        "flex w-full items-center overflow-hidden rounded-sm border border-input bg-background font-sans transition-colors",
+        "focus-within:border-primary focus-within:shadow-focus",
+        "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:shadow-focus-destructive",
+        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+InputGroup.displayName = "InputGroup";
+
+const InputGroupInput = React.forwardRef<
+  HTMLInputElement,
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">
+>(({ className, type = "text", ...props }, ref) => (
+  <input
+    ref={ref}
+    type={type}
+    data-slot="input-group-input"
+    className={cn(
+      "min-w-0 flex-1 bg-transparent px-3 py-3 text-body-md text-foreground",
+      "placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed",
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroupInput.displayName = "InputGroupInput";
+
+const addonVariants = cva("flex shrink-0 items-center gap-2 text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0", {
+  variants: { align: { start: "pl-3", end: "pr-3" } },
+  defaultVariants: { align: "start" },
+});
+
+const InputGroupAddon = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof addonVariants>
+>(({ className, align, ...props }, ref) => (
+  <div ref={ref} data-slot="input-group-addon" className={cn(addonVariants({ align }), className)} {...props} />
+));
+InputGroupAddon.displayName = "InputGroupAddon";
+
+const InputGroupText = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn("select-none whitespace-nowrap px-3 text-body-md text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+);
+InputGroupText.displayName = "InputGroupText";
+
+const InputGroupButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, type = "button", ...props }, ref) => (
+  <button
+    ref={ref}
+    type={type}
+    className={cn(
+      "flex h-full shrink-0 items-center gap-1.5 self-stretch border-l border-input bg-muted px-3 text-label-md text-foreground",
+      "outline-none transition-colors hover:bg-accent focus-visible:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+      "[&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+InputGroupButton.displayName = "InputGroupButton";
+
+export { InputGroup, InputGroupInput, InputGroupAddon, InputGroupText, InputGroupButton };

package/src/components/input-otp.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center", className)} {...props} />,
+);
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+  ({ ...props }, ref) => (
+    <div ref={ref} role="separator" {...props}>
+      <Minus className="size-4" />
+    </div>
+  ),
+);
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/src/components/input.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Input — generated from Figma "KinetixUI" › UI Components ›
+ * 01. Form Inputs › Input (node 54855:13836).
+ *
+ * Figma component property: state = Default | Focus | Error | Disabled.
+ * Focus is the CSS `:focus-visible` pseudo-class and Disabled is the native
+ * attribute; the `state` prop force-pins one for docs / snapshots, and
+ * `state="Error"` sets `aria-invalid`. Focus uses the `--shadow-focus` token.
+ *
+ * Figma's component bundles a label + helper text; those live in the `Field`
+ * composition (their colour tracks the control's state). This is the bare
+ * control. Tokens: border `--input`, focus `--ring`, error `--destructive`,
+ * radius `--radius-sm` (Figma `input` = 4px), padding `--spacing-3`,
+ * text = Body Medium (14 / 20, +0.25).
+ */
+const inputVariants = cva(
+  [
+    "flex w-full border border-input bg-background px-3 py-3",
+    "font-sans text-[14px] leading-5 tracking-[0.25px] text-foreground",
+    "placeholder:text-muted-foreground",
+    "outline-none transition-colors",
+    "focus-visible:border-primary focus-visible:shadow-focus",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive",
+  ],
+  {
+    variants: {
+      state: {
+        Default: "",
+        Focus: "border-primary shadow-focus",
+        Error: "border-destructive",
+        Disabled: "opacity-50 pointer-events-none",
+      },
+      /** corner style — matches the design source's Corners property */
+      corners: {
+        sharp: "rounded-none",
+        default: "rounded-sm",
+        rounded: "rounded-md",
+        pill: "rounded-full px-4",
+      },
+    },
+    defaultVariants: { state: "Default", corners: "default" },
+  },
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+    VariantProps<typeof inputVariants> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, state, corners, type = "text", disabled, "aria-invalid": ariaInvalid, ...props }, ref) => (
+    <input
+      ref={ref}
+      type={type}
+      data-slot="input"
+      data-state={state ? state.toLowerCase() : undefined}
+      aria-invalid={ariaInvalid ?? (state === "Error" || undefined)}
+      disabled={disabled || state === "Disabled"}
+      className={cn(inputVariants({ state, corners }), className)}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input, inputVariants };

package/src/components/label.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none font-sans peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };