ruler-components 0.1.1 → 0.1.3

package/components/ui/allinput.tsx

@@ -1,210 +0,0 @@
-"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

@@ -1,179 +0,0 @@
-"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

@@ -1,52 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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,
-};