@rahulapgm/skyblue-ui 0.1.0

package/src/modal.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useId, type ReactNode } from "react";
+import { X } from "lucide-react";
+import { createPortal } from "react-dom";
+
+import { Button } from "./button";
+import { Card } from "./card";
+import { cn } from "./utils";
+
+type ModalProps = {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+};
+
+export function Modal({ open, onClose, title, description, children, footer, className }: ModalProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const mounted = typeof document !== "undefined";
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onClose]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return createPortal(
+    <AnimatePresence>
+      {open ? (
+        <motion.div
+          className="fixed inset-0 z-[60] flex items-center justify-center p-4 md:p-6"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2, ease: "easeOut" }}
+        >
+          <motion.div className="absolute inset-0 bg-[rgba(11,26,42,0.48)]" onClick={onClose} aria-hidden />
+          <motion.div
+            initial={{ opacity: 0, y: 20, scale: 0.96 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 12, scale: 0.98 }}
+            transition={{ duration: 0.24, ease: "easeOut" }}
+            className={cn("relative z-10 w-full max-w-2xl", className)}
+          >
+            <Card
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={titleId}
+              aria-describedby={description ? descriptionId : undefined}
+              className="flex max-h-[calc(100vh-2rem)] w-full flex-col overflow-hidden md:max-h-[calc(100vh-3rem)]"
+              tone="surface"
+              padding="lg"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <h2 id={titleId} className="type-subheading">
+                    {title}
+                  </h2>
+                  {description ? (
+                    <p id={descriptionId} className="type-body mt-2 text-(--ink-muted)">
+                      {description}
+                    </p>
+                  ) : null}
+                </div>
+                <Button
+                  onClick={onClose}
+                  variant="tertiary"
+                  size="sm"
+                  aria-label="Close modal"
+                  className="min-h-10 px-3"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="mt-6 min-h-0 overflow-y-auto pr-1">{children}</div>
+              {footer ? <div className="mt-6 flex flex-wrap justify-end gap-3">{footer}</div> : null}
+            </Card>
+          </motion.div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>,
+    document.body,
+  );
+}

package/src/navigation.tsx

@@ -0,0 +1,147 @@
+import Link from "next/link";
+import type { ComponentType, MouseEventHandler, ReactNode } from "react";
+import { ChevronRight } from "lucide-react";
+
+import { cn } from "./utils";
+
+export type NavigationItem = {
+  label: string;
+  href: string;
+  icon?: ComponentType<{ className?: string }>;
+  active?: boolean;
+  badge?: ReactNode;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+
+type NavigationBarProps = {
+  items: NavigationItem[];
+  brand?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+};
+
+type NavigationRailProps = {
+  items: NavigationItem[];
+  footer?: ReactNode;
+  className?: string;
+};
+
+type BreadcrumbItem = {
+  label: string;
+  href?: string;
+};
+
+type BreadcrumbsProps = {
+  items: BreadcrumbItem[];
+  className?: string;
+};
+
+export function NavigationBar({ items, brand, actions, className }: NavigationBarProps) {
+  return (
+    <nav
+      className={cn(
+        "surface-glass flex items-center justify-between gap-6 rounded-xl border border-(--line-soft) px-5 py-4 shadow-(--shadow-sm)",
+        className,
+      )}
+    >
+      <div className="flex items-center gap-6">
+        {brand}
+        {items.length > 0 ? (
+          <div className="hidden items-center gap-2 md:flex">
+            {items.map((item, index) => {
+              const Icon = item.icon;
+
+              return (
+                <Link
+                  key={`${item.href}-${item.label}-${index}`}
+                  href={item.href}
+                  onClick={item.onClick}
+                  className={cn(
+                    "type-body inline-flex items-center gap-2 rounded-full px-4 py-2 font-bold transition-colors",
+                    item.active
+                      ? "bg-(--color-brand-primary-light) text-(--color-brand-primary)"
+                      : "text-(--ink-muted) hover:bg-(--color-surface-hover)",
+                  )}
+                >
+                  {Icon ? <Icon className="h-4 w-4" /> : null}
+                  <span>{item.label}</span>
+                  {item.badge ? (
+                    <span className="type-caption rounded-full bg-(--surface-card) px-2 py-0.5 text-(--foreground)">
+                      {item.badge}
+                    </span>
+                  ) : null}
+                </Link>
+              );
+            })}
+          </div>
+        ) : null}
+      </div>
+      {actions}
+    </nav>
+  );
+}
+
+export function NavigationRail({ items, footer, className }: NavigationRailProps) {
+  return (
+    <aside
+      className={cn(
+        "surface-glass flex w-full max-w-70 flex-col rounded-xl border border-(--line-soft) p-4 shadow-(--shadow-sm)",
+        className,
+      )}
+    >
+      <div className="space-y-2">
+        {items.map((item, index) => {
+          const Icon = item.icon;
+
+          return (
+            <Link
+              key={`${item.href}-${item.label}-${index}`}
+              href={item.href}
+              onClick={item.onClick}
+              className={cn(
+                "type-body flex items-center justify-between rounded-2xl px-4 py-3 font-bold transition-colors",
+                item.active
+                  ? "bg-(--color-brand-primary-light) text-(--color-brand-primary)"
+                  : "text-(--ink-muted) hover:bg-(--color-surface-hover)",
+              )}
+            >
+              <span className="flex items-center gap-3">
+                {Icon ? <Icon className="h-4 w-4" /> : null}
+                {item.label}
+              </span>
+              {item.badge ? (
+                <span className="type-caption rounded-full bg-(--surface-card) px-2 py-0.5 text-(--foreground)">
+                  {item.badge}
+                </span>
+              ) : null}
+            </Link>
+          );
+        })}
+      </div>
+      {footer ? <div className="mt-4 border-t border-(--line-soft) pt-4">{footer}</div> : null}
+    </aside>
+  );
+}
+
+export function Breadcrumbs({ items, className }: BreadcrumbsProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={cn("flex items-center gap-2", className)}>
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <div key={`${item.label}-${index}`} className="flex items-center gap-2">
+            {item.href && !isLast ? (
+              <Link href={item.href} className="type-caption text-(--ink-subtle) hover:text-(--foreground)">
+                {item.label}
+              </Link>
+            ) : (
+              <span className="type-caption text-(--foreground)">{item.label}</span>
+            )}
+            {!isLast ? <ChevronRight className="h-4 w-4 text-(--ink-subtle)" /> : null}
+          </div>
+        );
+      })}
+    </nav>
+  );
+}

package/src/number-input.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { Minus, Plus } from "lucide-react";
+import { useId, useState } from "react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type NumberInputProps = {
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+  onValueChange?: (value: number) => void;
+};
+
+function clamp(value: number, min?: number, max?: number) {
+  let nextValue = value;
+
+  if (min !== undefined) {
+    nextValue = Math.max(nextValue, min);
+  }
+
+  if (max !== undefined) {
+    nextValue = Math.min(nextValue, max);
+  }
+
+  return nextValue;
+}
+
+export function NumberInput({
+  label,
+  helperText,
+  errorText,
+  value,
+  defaultValue = 0,
+  min,
+  max,
+  step = 1,
+  placeholder,
+  required = false,
+  disabled = false,
+  id,
+  className,
+  onValueChange,
+}: NumberInputProps) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  const hasError = Boolean(errorText);
+
+  function commitValue(nextValue: number) {
+    const safeValue = clamp(nextValue, min, max);
+
+    if (value === undefined) {
+      setInternalValue(safeValue);
+    }
+
+    onValueChange?.(safeValue);
+  }
+
+  return (
+    <div className="w-full">
+      {label ? (
+        <Label htmlFor={inputId} requiredMark={required} className="mb-2 block">
+          {label}
+        </Label>
+      ) : null}
+      <div
+        className={cn(
+          "flex min-h-12 items-center rounded-2xl border bg-(--surface-card) shadow-(--shadow-sm) transition-colors",
+          hasError
+            ? "border-(--color-status-error)"
+            : "border-(--line-soft) hover:border-(--color-line-strong)",
+          className,
+        )}
+      >
+        <button
+          type="button"
+          onClick={() => commitValue(currentValue - step)}
+          disabled={disabled || (min !== undefined && currentValue <= min)}
+          className="inline-flex h-12 w-12 items-center justify-center rounded-l-2xl text-(--foreground) transition-colors hover:bg-(--color-surface-hover) disabled:cursor-not-allowed disabled:opacity-50"
+          aria-label="Decrease value"
+        >
+          <Minus className="h-4 w-4" />
+        </button>
+        <input
+          id={inputId}
+          type="number"
+          value={currentValue}
+          min={min}
+          max={max}
+          step={step}
+          placeholder={placeholder}
+          required={required}
+          disabled={disabled}
+          onChange={(event) => commitValue(Number(event.target.value))}
+          className="type-body min-h-12 w-full bg-transparent px-3 text-center text-(--foreground) outline-none disabled:cursor-not-allowed"
+        />
+        <button
+          type="button"
+          onClick={() => commitValue(currentValue + step)}
+          disabled={disabled || (max !== undefined && currentValue >= max)}
+          className="inline-flex h-12 w-12 items-center justify-center rounded-r-2xl text-(--foreground) transition-colors hover:bg-(--color-surface-hover) disabled:cursor-not-allowed disabled:opacity-50"
+          aria-label="Increase value"
+        >
+          <Plus className="h-4 w-4" />
+        </button>
+      </div>
+      {errorText ? (
+        <p className="type-caption mt-2 text-(--color-status-error)">{errorText}</p>
+      ) : helperText ? (
+        <p className="type-caption mt-2 text-(--ink-subtle)">{helperText}</p>
+      ) : null}
+    </div>
+  );
+}

package/src/pagination.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { Button } from "./button";
+import { cn } from "./utils";
+
+type PaginationProps = {
+  pageCount: number;
+  currentPage?: number;
+  defaultPage?: number;
+  onPageChange?: (page: number) => void;
+  siblingCount?: number;
+  className?: string;
+};
+
+type PageItem = number | "ellipsis";
+
+function createPageItems(pageCount: number, currentPage: number, siblingCount: number) {
+  if (pageCount <= 1) {
+    return [1];
+  }
+
+  const items: PageItem[] = [1];
+  const startPage = Math.max(2, currentPage - siblingCount);
+  const endPage = Math.min(pageCount - 1, currentPage + siblingCount);
+
+  if (startPage > 2) {
+    items.push("ellipsis");
+  }
+
+  for (let page = startPage; page <= endPage; page += 1) {
+    items.push(page);
+  }
+
+  if (endPage < pageCount - 1) {
+    items.push("ellipsis");
+  }
+
+  if (pageCount > 1) {
+    items.push(pageCount);
+  }
+
+  return items;
+}
+
+export function Pagination({
+  pageCount,
+  currentPage = 1,
+  onPageChange,
+  siblingCount = 1,
+  className,
+}: PaginationProps) {
+  const safePageCount = Math.max(pageCount, 1);
+  const safeCurrentPage = Math.min(Math.max(currentPage, 1), safePageCount);
+  const items = createPageItems(safePageCount, safeCurrentPage, siblingCount);
+
+  return (
+    <nav className={cn("flex items-center gap-2", className)} aria-label="Pagination">
+      <Button
+        variant="tertiary"
+        size="sm"
+        onClick={() => onPageChange?.(safeCurrentPage - 1)}
+        disabled={safeCurrentPage <= 1}
+        aria-label="Previous page"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+
+      {items.map((item, index) =>
+        item === "ellipsis" ? (
+          <span
+            key={`ellipsis-${index}`}
+            className="inline-flex min-h-10 min-w-10 items-center justify-center text-(--ink-subtle)"
+          >
+            <MoreHorizontal className="h-4 w-4" />
+          </span>
+        ) : (
+          <Button
+            key={item}
+            variant={item === safeCurrentPage ? "primary" : "tertiary"}
+            size="sm"
+            onClick={() => onPageChange?.(item)}
+            aria-label={`Go to page ${item}`}
+          >
+            {item}
+          </Button>
+        ),
+      )}
+
+      <Button
+        variant="tertiary"
+        size="sm"
+        onClick={() => onPageChange?.(safeCurrentPage + 1)}
+        disabled={safeCurrentPage >= safePageCount}
+        aria-label="Next page"
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </nav>
+  );
+}

package/src/phone-number-input.tsx

@@ -0,0 +1,95 @@
+import type { InputHTMLAttributes } from "react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type PhoneNumberInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "inputMode" | "pattern" | "value" | "defaultValue" | "onChange"
+> & {
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+
+const INDIA_PHONE_PREFIX = "+91";
+
+function normalizeDigits(value: string | undefined) {
+  const digits = (value ?? "").replace(/\D/g, "");
+
+  if (digits.startsWith("91") && digits.length > 10) {
+    return digits.slice(2, 12);
+  }
+
+  return digits.slice(0, 10);
+}
+
+export function PhoneNumberInput({
+  label,
+  helperText,
+  errorText,
+  className,
+  id,
+  required,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "9876543210",
+  ...props
+}: PhoneNumberInputProps) {
+  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const hasError = Boolean(errorText);
+  const resolvedValue = value !== undefined ? normalizeDigits(value) : undefined;
+  const resolvedDefaultValue = defaultValue !== undefined ? normalizeDigits(defaultValue) : undefined;
+
+  return (
+    <div className="w-full">
+      {label ? (
+        <Label htmlFor={inputId} requiredMark={required} className="mb-2 block">
+          {label}
+        </Label>
+      ) : null}
+      <div
+        className={cn(
+          "flex min-h-12 items-center gap-3 rounded-2xl border bg-(--surface-card) px-4 shadow-(--shadow-sm) transition-colors",
+          hasError
+            ? "border-(--color-status-error)"
+            : "border-(--line-soft) hover:border-(--color-line-strong)",
+        )}
+      >
+        <span className="type-body shrink-0 text-(--foreground)">{INDIA_PHONE_PREFIX}</span>
+        <span className="h-6 w-px bg-(--line-soft)" aria-hidden="true" />
+        <input
+          {...props}
+          id={inputId}
+          required={required}
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          autoComplete="tel-national"
+          maxLength={10}
+          value={resolvedValue}
+          defaultValue={resolvedDefaultValue}
+          placeholder={placeholder}
+          onChange={(event) => {
+            const nextDigits = normalizeDigits(event.target.value);
+            event.target.value = nextDigits;
+            onValueChange?.(nextDigits);
+          }}
+          className={cn(
+            "type-body min-h-12 w-full bg-transparent text-(--foreground) outline-none placeholder:text-(--ink-subtle)",
+            className,
+          )}
+        />
+      </div>
+      {errorText ? (
+        <p className="type-body mt-2 text-(--color-status-error)">{errorText}</p>
+      ) : helperText ? (
+        <p className="type-body mt-2 text-(--ink-subtle)">{helperText}</p>
+      ) : null}
+    </div>
+  );
+}

package/src/progress.tsx

@@ -0,0 +1,65 @@
+import { cn } from "./utils";
+
+type ProgressTone = "brand" | "success" | "warning" | "error";
+type ProgressSize = "sm" | "md" | "lg";
+
+type ProgressProps = {
+  value: number;
+  max?: number;
+  label?: string;
+  showValue?: boolean;
+  tone?: ProgressTone;
+  size?: ProgressSize;
+  className?: string;
+};
+
+const toneClasses: Record<ProgressTone, string> = {
+  brand: "bg-(--color-brand-primary)",
+  success: "bg-(--color-status-success)",
+  warning: "bg-(--color-status-warning)",
+  error: "bg-(--color-status-error)",
+};
+
+const sizeClasses: Record<ProgressSize, string> = {
+  sm: "h-2",
+  md: "h-3",
+  lg: "h-4",
+};
+
+export function Progress({
+  value,
+  max = 100,
+  label,
+  showValue = true,
+  tone = "brand",
+  size = "md",
+  className,
+}: ProgressProps) {
+  const safeMax = Math.max(max, 1);
+  const clampedValue = Math.min(Math.max(value, 0), safeMax);
+  const percentage = Math.round((clampedValue / safeMax) * 100);
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {label || showValue ? (
+        <div className="flex items-center justify-between gap-3">
+          {label ? <p className="type-caption text-(--foreground)">{label}</p> : <span />}
+          {showValue ? <span className="type-caption text-(--ink-subtle)">{percentage}%</span> : null}
+        </div>
+      ) : null}
+      <div
+        className={cn("overflow-hidden rounded-full bg-(--color-surface-muted)", sizeClasses[size])}
+        role="progressbar"
+        aria-label={label}
+        aria-valuemin={0}
+        aria-valuemax={safeMax}
+        aria-valuenow={clampedValue}
+      >
+        <div
+          className={cn("h-full rounded-full transition-[width] duration-300 ease-out", toneClasses[tone])}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/radio.tsx

@@ -0,0 +1,36 @@
+import type { InputHTMLAttributes } from "react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label: string;
+  description?: string;
+};
+
+export function Radio({ label, description, className, id, ...props }: RadioProps) {
+  const radioId = id ?? label.toLowerCase().replace(/\s+/g, "-");
+
+  return (
+    <label
+      htmlFor={radioId}
+      className={cn(
+        "flex cursor-pointer items-start gap-3 rounded-2xl border border-(--line-soft) bg-(--surface-card) p-4 shadow-(--shadow-sm)",
+        className,
+      )}
+    >
+      <input
+        {...props}
+        id={radioId}
+        type="radio"
+        className="mt-1 h-4 w-4 border-(--color-line-strong) accent-(--color-brand-primary)"
+      />
+      <span>
+        <Label htmlFor={radioId}>{label}</Label>
+        {description ? (
+          <span className="type-caption mt-1 block text-(--ink-subtle)">{description}</span>
+        ) : null}
+      </span>
+    </label>
+  );
+}