ruler-components 0.1.0

package/components/ui/allinput.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import React, { useState } from "react";
+import { Search, Eye, EyeOff, Check, type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+const fieldText =
+  "text-sm text-zinc-900 outline-none transition-all duration-150 placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500";
+
+const fieldSurface =
+  "border-zinc-200 hover:border-zinc-300 focus:border-zinc-900 focus:ring-4 focus:ring-zinc-900/5 dark:border-zinc-800 dark:hover:border-zinc-700 dark:focus:border-zinc-400 dark:focus:ring-zinc-300/10";
+
+export const InputStandard = ({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => (
+  <input
+    {...props}
+    className={cn("w-full rounded-xl border bg-white px-4 py-2.5 dark:bg-zinc-900", fieldText, fieldSurface, className)}
+  />
+);
+
+export const InputFilled = ({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => (
+  <input
+    {...props}
+    className={cn(
+      "w-full rounded-xl border border-transparent bg-zinc-100 px-4 py-3 hover:bg-zinc-200/70 focus:border-zinc-900 focus:bg-white focus:ring-4 focus:ring-zinc-900/5 dark:bg-zinc-800 dark:hover:bg-zinc-700/70 dark:focus:border-zinc-400 dark:focus:bg-zinc-900 dark:focus:ring-zinc-300/10",
+      fieldText,
+      className,
+    )}
+  />
+);
+
+export const InputUnderline = ({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => (
+  <div className="group relative">
+    <input
+      {...props}
+      className={cn(
+        "w-full border-b border-zinc-200 bg-transparent py-2 focus:border-zinc-900 dark:border-zinc-700 dark:focus:border-white",
+        fieldText,
+        className,
+      )}
+    />
+    <div className="absolute bottom-0 left-0 h-[2px] w-0 bg-zinc-900 transition-all duration-300 group-focus-within:w-full dark:bg-white" />
+  </div>
+);
+
+export const InputFloating = ({
+  label,
+  className,
+  ...props
+}: { label: string } & React.InputHTMLAttributes<HTMLInputElement>) => {
+  const [value, setValue] = useState("");
+  const filled = Boolean(value || props.defaultValue);
+
+  return (
+    <div className="relative pt-4">
+      <input
+        {...props}
+        onChange={(e) => {
+          setValue(e.target.value);
+          props.onChange?.(e);
+        }}
+        className={cn(
+          "peer w-full border-b-2 border-zinc-200 bg-transparent py-2 focus:border-zinc-900 dark:border-zinc-700 dark:focus:border-white",
+          fieldText,
+          className,
+        )}
+      />
+      <label
+        className={cn(
+          "absolute left-0 transition-all duration-200",
+          filled
+            ? "-top-1 text-xs font-bold text-zinc-900 dark:text-white"
+            : "top-5 text-sm text-zinc-400 peer-focus:-top-1 peer-focus:text-xs peer-focus:font-bold peer-focus:text-zinc-900 dark:peer-focus:text-white",
+        )}
+      >
+        {label}
+      </label>
+    </div>
+  );
+};
+
+export const InputSearch = ({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => (
+  <div className="group relative">
+    <Search
+      size={16}
+      className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400 transition-colors group-focus-within:text-zinc-900 dark:group-focus-within:text-white"
+    />
+    <input
+      {...props}
+      type="text"
+      className={cn(
+        "w-full rounded-full border bg-zinc-50 py-2.5 pl-11 pr-4 focus:bg-white dark:bg-zinc-900 dark:focus:bg-zinc-950",
+        fieldText,
+        fieldSurface,
+        className,
+      )}
+    />
+  </div>
+);
+
+export const InputPassword = ({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>) => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className="relative">
+      <input
+        {...props}
+        type={show ? "text" : "password"}
+        className={cn("w-full rounded-xl border bg-white px-4 py-2.5 pr-11 dark:bg-zinc-900", fieldText, fieldSurface, className)}
+      />
+      <button
+        type="button"
+        onClick={() => setShow(!show)}
+        aria-label={show ? "Hide password" : "Show password"}
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 transition-colors hover:text-zinc-900 dark:hover:text-white"
+      >
+        {show ? <EyeOff size={18} /> : <Eye size={18} />}
+      </button>
+    </div>
+  );
+};
+
+export const InputAddon = ({
+  prefix,
+  suffix,
+  className,
+  ...props
+}: { prefix?: string; suffix?: string } & React.InputHTMLAttributes<HTMLInputElement>) => (
+  <div
+    className={cn(
+      "flex w-full overflow-hidden rounded-xl border border-zinc-200 bg-white transition-all focus-within:border-zinc-900 focus-within:ring-4 focus-within:ring-zinc-900/5 dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:border-zinc-400 dark:focus-within:ring-zinc-300/10",
+      className,
+    )}
+  >
+    {prefix && (
+      <span className="flex items-center border-r border-zinc-200 bg-zinc-50 px-3 text-sm font-medium text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400">
+        {prefix}
+      </span>
+    )}
+    <input {...props} className={cn("flex-1 bg-transparent px-4 py-2.5", fieldText)} />
+    {suffix && (
+      <span className="flex items-center border-l border-zinc-200 bg-zinc-50 px-3 text-sm font-medium text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400">
+        {suffix}
+      </span>
+    )}
+  </div>
+);
+
+export const InputIcon = ({
+  icon: Icon,
+  position = "left",
+  className,
+  ...props
+}: { icon: LucideIcon; position?: "left" | "right" } & React.InputHTMLAttributes<HTMLInputElement>) => (
+  <div className="relative">
+    <div
+      className={cn(
+        "pointer-events-none absolute top-1/2 -translate-y-1/2 text-zinc-400",
+        position === "left" ? "left-3.5" : "right-3.5",
+      )}
+    >
+      <Icon size={18} strokeWidth={1.5} />
+    </div>
+    <input
+      {...props}
+      className={cn(
+        "w-full rounded-xl border bg-white py-2.5 shadow-sm dark:bg-zinc-900",
+        position === "left" ? "pl-10 pr-4" : "pl-4 pr-10",
+        fieldText,
+        fieldSurface,
+        className,
+      )}
+    />
+  </div>
+);
+
+export const InputOTP = () => (
+  <div className="flex gap-2.5">
+    {[1, 2, 3, 4].map((i) => (
+      <input
+        key={i}
+        maxLength={1}
+        aria-label={`Digit ${i}`}
+        className="h-12 w-12 rounded-xl border-2 border-zinc-200 bg-white text-center text-lg font-bold text-zinc-900 outline-none transition-all focus:border-zinc-900 focus:ring-4 focus:ring-zinc-900/5 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:focus:border-zinc-400 dark:focus:ring-zinc-300/10"
+      />
+    ))}
+  </div>
+);
+
+export const InputAutocomplete = ({
+  suggestions,
+  className,
+  ...props
+}: { suggestions: string[] } & React.InputHTMLAttributes<HTMLInputElement>) => (
+  <div className="relative">
+    <input
+      {...props}
+      className={cn("w-full rounded-xl border bg-white px-4 py-2.5 dark:bg-zinc-900", fieldText, fieldSurface, className)}
+    />
+    <div className="absolute top-[calc(100%+0.5rem)] z-50 w-full rounded-xl border border-zinc-200 bg-white p-1 shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
+      {suggestions.map((s) => (
+        <div
+          key={s}
+          className="flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50 dark:text-zinc-200 dark:hover:bg-zinc-800"
+        >
+          {s} <Check size={14} className="text-zinc-400" />
+        </div>
+      ))}
+    </div>
+  </div>
+);

package/components/ui/avatar.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const AVATAR_GRADIENTS = [
+  "from-violet-500 to-indigo-600",
+  "from-sky-500 to-blue-600",
+  "from-emerald-500 to-teal-600",
+  "from-amber-500 to-orange-500",
+  "from-rose-500 to-pink-600",
+  "from-fuchsia-500 to-purple-600",
+  "from-cyan-500 to-blue-500",
+  "from-lime-500 to-emerald-600",
+];
+
+const avatarVariants = cva(
+  [
+    "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full",
+    "ring-1 ring-zinc-900/5 shadow-sm shadow-zinc-900/10",
+    "dark:ring-white/10 dark:shadow-black/30",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8 text-[10px]",
+        md: "h-10 w-10 text-xs",
+        lg: "h-12 w-12 text-sm",
+        xl: "h-16 w-16 text-base",
+      },
+      variant: {
+        default: "",
+        outline: "ring-2 ring-white dark:ring-zinc-950",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  },
+);
+
+const statusVariants = cva(
+  [
+    "absolute rounded-full ring-2 ring-white dark:ring-zinc-950",
+    "shadow-sm",
+  ],
+  {
+    variants: {
+      status: {
+        online: "bg-emerald-500",
+        offline: "bg-zinc-400 dark:bg-zinc-500",
+        busy: "bg-amber-500",
+      },
+      size: {
+        sm: "bottom-0 right-0 h-2 w-2",
+        md: "bottom-0 right-0 h-2.5 w-2.5",
+        lg: "bottom-0.5 right-0.5 h-2.5 w-2.5",
+        xl: "bottom-1 right-1 h-3 w-3",
+      },
+    },
+  },
+);
+
+function getInitials(name: string) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+
+function getGradientFromName(name: string) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i += 1) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_GRADIENTS[Math.abs(hash) % AVATAR_GRADIENTS.length];
+}
+
+export interface AvatarProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof avatarVariants> {
+  src?: string;
+  alt?: string;
+  name?: string;
+  status?: "online" | "offline" | "busy" | null;
+}
+
+const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+  ({ className, size, variant, src, alt, name, status, children, ...props }, ref) => {
+    const [imageError, setImageError] = React.useState(false);
+    const showImage = src && !imageError;
+    const fallbackText = name ? getInitials(name) : children;
+    const gradient = name ? getGradientFromName(name) : "from-zinc-400 to-zinc-500";
+
+    return (
+      <span
+        ref={ref}
+        className={cn(avatarVariants({ size, variant }), className)}
+        {...props}
+      >
+        {showImage ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={src}
+            alt={alt ?? name ?? "Avatar"}
+            className="h-full w-full object-cover"
+            onError={() => setImageError(true)}
+          />
+        ) : (
+          <span
+            className={cn(
+              "flex h-full w-full items-center justify-center bg-gradient-to-br font-semibold uppercase tracking-tight text-white",
+              gradient,
+            )}
+          >
+            {fallbackText ?? "?"}
+          </span>
+        )}
+        {status && (
+          <span
+            className={cn(statusVariants({ status, size }))}
+            aria-hidden
+          />
+        )}
+      </span>
+    );
+  },
+);
+Avatar.displayName = "Avatar";
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  max?: number;
+  size?: VariantProps<typeof avatarVariants>["size"];
+}
+
+function AvatarGroup({
+  className,
+  max = 5,
+  size = "md",
+  children,
+  ...props
+}: AvatarGroupProps) {
+  const avatars = React.Children.toArray(children).filter(React.isValidElement);
+  const visible = avatars.slice(0, max);
+  const remaining = avatars.length - visible.length;
+
+  return (
+    <div className={cn("flex items-center", className)} {...props}>
+      {visible.map((child, index) => (
+        <div
+          key={index}
+          className={cn(
+            "relative transition-transform duration-200 hover:z-10 hover:scale-110",
+            index > 0 && "-ml-3",
+          )}
+        >
+          {child}
+        </div>
+      ))}
+      {remaining > 0 && (
+        <span
+          className={cn(
+            "-ml-3",
+            avatarVariants({ variant: "outline", size }),
+            "bg-zinc-100 text-zinc-600 ring-2 ring-white dark:bg-zinc-800 dark:text-zinc-200 dark:ring-zinc-950",
+          )}
+        >
+          <span className="flex h-full w-full items-center justify-center text-[10px] font-semibold">
+            +{remaining}
+          </span>
+        </span>
+      )}
+    </div>
+  );
+}
+
+export { Avatar, AvatarGroup, avatarVariants, getInitials, getGradientFromName };

package/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-md font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200",
+        info: "bg-[#0070BA]/10 text-[#0070BA] dark:bg-[#0070BA]/20 dark:text-[#4DA3E0]",
+        success:
+          "bg-[#28A745]/10 text-[#28A745] dark:bg-[#28A745]/20 dark:text-[#5CC975]",
+        warning:
+          "bg-[#E58E00]/10 text-[#E58E00] dark:bg-[#E58E00]/20 dark:text-[#F5B84A]",
+        error:
+          "bg-[#D93025]/10 text-[#D93025] dark:bg-[#D93025]/20 dark:text-[#F06B62]",
+        outline:
+          "border border-zinc-200 bg-transparent text-zinc-700 dark:border-zinc-700 dark:text-zinc-300",
+      },
+      size: {
+        sm: "px-1.5 py-0.5 text-[10px]",
+        md: "px-2 py-0.5 text-[11px]",
+        lg: "px-2.5 py-1 text-xs",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(badgeVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };

package/components/ui/button.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const buttonVariants = cva(
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-xl",
+    "text-sm font-medium tracking-tight",
+    "transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900/15 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
+    "active:scale-[0.97] active:transition-[transform] active:duration-100",
+    "disabled:pointer-events-none disabled:opacity-40 disabled:shadow-none disabled:active:scale-100",
+    "dark:focus-visible:ring-white/20 dark:focus-visible:ring-offset-zinc-950",
+    "select-none",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-zinc-900 text-white",
+          "shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)]",
+          "hover:bg-zinc-800 hover:-translate-y-0.5",
+          "hover:shadow-[0_2px_4px_rgba(0,0,0,0.06),0_8px_20px_rgba(0,0,0,0.12)]",
+          "dark:bg-zinc-100 dark:text-zinc-900",
+          "dark:shadow-[0_1px_2px_rgba(255,255,255,0.06),0_4px_16px_rgba(0,0,0,0.35)]",
+          "dark:hover:bg-white dark:hover:shadow-[0_2px_8px_rgba(0,0,0,0.25),0_8px_24px_rgba(0,0,0,0.2)]",
+        ],
+        white: [
+          "border border-zinc-200/80 bg-white text-zinc-900",
+          "shadow-[0_1px_2px_rgba(0,0,0,0.04),0_4px_12px_rgba(0,0,0,0.06)]",
+          "hover:border-zinc-300 hover:bg-zinc-50 hover:-translate-y-0.5",
+          "hover:shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_20px_rgba(0,0,0,0.1)]",
+        ],
+        outline: [
+          "border border-zinc-200 bg-white/70 text-zinc-700 backdrop-blur-sm",
+          "shadow-[0_1px_2px_rgba(0,0,0,0.03)]",
+          "hover:border-zinc-300 hover:bg-white hover:text-zinc-900 hover:-translate-y-0.5",
+          "hover:shadow-[0_2px_8px_rgba(0,0,0,0.06)]",
+          "dark:border-zinc-700 dark:bg-zinc-900/40 dark:text-zinc-200 dark:shadow-none",
+          "dark:hover:border-zinc-500 dark:hover:bg-zinc-800/80 dark:hover:text-white",
+        ],
+        ghost: [
+          "text-zinc-600",
+          "hover:bg-zinc-100/90 hover:text-zinc-900",
+          "dark:text-zinc-400 dark:hover:bg-zinc-800/70 dark:hover:text-zinc-100",
+        ],
+      },
+      size: {
+        sm: "h-8 gap-1.5 rounded-lg px-3.5 text-xs",
+        md: "h-10 px-4",
+        lg: "h-11 px-5 text-[15px]",
+      },
+    },
+    defaultVariants: { variant: "primary", size: "md" },
+  },
+);
+
+export interface ButtonProps
+  extends React.ComponentPropsWithoutRef<"button">,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(buttonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { buttonVariants };

package/components/ui/card.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const cardVariants = cva(
+  "rounded-2xl border bg-white text-zinc-900 transition-all duration-200 dark:bg-zinc-900 dark:text-zinc-100",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-zinc-200/70 shadow-[0_2px_8px_rgba(0,0,0,0.06)] dark:border-zinc-800/80 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)]",
+        outline: "border-zinc-200 shadow-none dark:border-zinc-800",
+        elevated:
+          "border-zinc-200 shadow-[0_8px_30px_rgba(0,0,0,0.08)] dark:border-zinc-800 dark:shadow-[0_8px_30px_rgba(0,0,0,0.35)]",
+        interactive:
+          "cursor-pointer border-zinc-200/70 shadow-[0_2px_8px_rgba(0,0,0,0.06)] hover:-translate-y-0.5 hover:border-zinc-300 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:border-zinc-800/80 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)] dark:hover:border-zinc-700 dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)]",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant }), className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col gap-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("text-base font-semibold leading-none tracking-tight text-zinc-900 dark:text-white", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm leading-relaxed text-zinc-500 dark:text-zinc-400", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("px-6 pb-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex items-center gap-2 border-t border-zinc-100 bg-zinc-50/60 px-6 py-4 dark:border-zinc-800 dark:bg-zinc-800/30",
+      className,
+    )}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  cardVariants,
+};