@rahulapgm/skyblue-ui 0.1.0

package/src/tabs.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useId, useState, type KeyboardEvent } from "react";
+
+import { Badge } from "./badge";
+import { cn } from "./utils";
+
+export type TabItem = {
+  label: string;
+  value: string;
+  content: React.ReactNode;
+  badge?: React.ReactNode;
+};
+
+type TabsProps = {
+  items: TabItem[];
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+};
+
+export function Tabs({ items, defaultValue, value, onValueChange, className }: TabsProps) {
+  const baseId = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue ?? items[0]?.value ?? "");
+  const activeValue = value ?? internalValue;
+  const activeItem = items.find((item) => item.value === activeValue) ?? items[0];
+
+  function handleChange(nextValue: string) {
+    if (value === undefined) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue);
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>, index: number) {
+    if (!items.length) {
+      return;
+    }
+
+    let nextIndex = index;
+
+    if (event.key === "ArrowRight") {
+      nextIndex = (index + 1) % items.length;
+    } else if (event.key === "ArrowLeft") {
+      nextIndex = (index - 1 + items.length) % items.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = items.length - 1;
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+    handleChange(items[nextIndex].value);
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      <div
+        role="tablist"
+        aria-label="Content tabs"
+        className="inline-flex flex-wrap gap-2 rounded-full border border-(--line-soft) bg-(--surface-card) p-1 shadow-(--shadow-sm)"
+      >
+        {items.map((item, index) => (
+          <button
+            key={item.value}
+            type="button"
+            onClick={() => handleChange(item.value)}
+            onKeyDown={(event) => handleKeyDown(event, index)}
+            id={`${baseId}-tab-${item.value}`}
+            role="tab"
+            aria-selected={item.value === activeValue}
+            aria-controls={`${baseId}-panel-${item.value}`}
+            tabIndex={item.value === activeValue ? 0 : -1}
+            className={cn(
+              "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-extrabold transition-colors",
+              item.value === activeValue
+                ? "bg-(--color-brand-primary) text-white"
+                : "text-(--ink-muted) hover:bg-(--color-surface-hover)",
+            )}
+          >
+            <span>{item.label}</span>
+            {item.badge ? <Badge size="sm">{item.badge}</Badge> : null}
+          </button>
+        ))}
+      </div>
+      {activeItem ? (
+        <div
+          id={`${baseId}-panel-${activeItem.value}`}
+          role="tabpanel"
+          aria-labelledby={`${baseId}-tab-${activeItem.value}`}
+        >
+          {activeItem.content}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/textarea.tsx

@@ -0,0 +1,52 @@
+import type { TextareaHTMLAttributes } from "react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+};
+
+export function Textarea({
+  label,
+  helperText,
+  errorText,
+  className,
+  id,
+  required,
+  rows = 5,
+  ...props
+}: TextareaProps) {
+  const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const hasError = Boolean(errorText);
+
+  return (
+    <div className="w-full">
+      {label ? (
+        <Label htmlFor={textareaId} requiredMark={required} className="mb-2 block">
+          {label}
+        </Label>
+      ) : null}
+      <textarea
+        {...props}
+        id={textareaId}
+        required={required}
+        rows={rows}
+        className={cn(
+          "type-body min-h-32 w-full rounded-2xl border bg-(--surface-card) px-4 py-3 text-(--foreground) shadow-(--shadow-sm) outline-none transition-colors placeholder:text-(--ink-subtle)",
+          hasError
+            ? "border-(--color-status-error)"
+            : "border-(--line-soft) hover:border-(--color-line-strong)",
+          className,
+        )}
+      />
+      {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/timeline.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+
+import { Badge } from "./badge";
+import { cn } from "./utils";
+
+type TimelineStatus = "completed" | "current" | "upcoming";
+
+export type TimelineItem = {
+  title: string;
+  description?: string;
+  meta?: ReactNode;
+  status?: TimelineStatus;
+};
+
+type TimelineProps = {
+  items: TimelineItem[];
+  className?: string;
+};
+
+const dotClasses: Record<TimelineStatus, string> = {
+  completed: "bg-(--color-status-success)",
+  current: "bg-(--color-brand-primary) ring-4 ring-(--color-brand-primary-light)",
+  upcoming: "bg-(--color-line-strong)",
+};
+
+export function Timeline({ items, className }: TimelineProps) {
+  return (
+    <div className={cn("space-y-4", className)}>
+      {items.map((item, index) => {
+        const status = item.status ?? "upcoming";
+
+        return (
+          <div key={`${item.title}-${index}`} className="flex gap-4">
+            <div className="flex w-6 flex-col items-center">
+              <span className={cn("mt-1 h-3 w-3 rounded-full", dotClasses[status])} />
+              {index < items.length - 1 ? (
+                <span className="mt-2 h-full min-h-10 w-px bg-(--line-soft)" />
+              ) : null}
+            </div>
+            <div className="flex-1 rounded-2xl border border-(--line-soft) bg-(--surface-card) p-4 shadow-(--shadow-sm)">
+              <div className="flex flex-wrap items-center gap-3">
+                <h3 className="type-title">{item.title}</h3>
+                <Badge
+                  tone={status === "completed" ? "success" : status === "current" ? "brand" : "neutral"}
+                  size="sm"
+                >
+                  {status}
+                </Badge>
+              </div>
+              {item.description ? (
+                <p className="type-body mt-2 text-(--ink-muted)">{item.description}</p>
+              ) : null}
+              {item.meta ? <div className="mt-3">{item.meta}</div> : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/toast.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+  type ReactNode,
+} from "react";
+import { CheckCircle2, Info, OctagonAlert, TriangleAlert, X } from "lucide-react";
+
+import { cn } from "./utils";
+
+type ToastTone = "success" | "info" | "warning" | "error";
+
+type ToastItem = {
+  id: string;
+  title: string;
+  description?: string;
+  tone: ToastTone;
+};
+
+type ToastContextValue = {
+  showToast: (toast: Omit<ToastItem, "id">) => void;
+  dismissToast: (id: string) => void;
+};
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const toneClasses: Record<ToastTone, string> = {
+  success: "border-(--color-status-success-light) bg-(--surface-card) text-(--foreground)",
+  info: "border-(--color-status-info-light) bg-(--surface-card) text-(--foreground)",
+  warning: "border-(--color-status-warning-light) bg-(--surface-card) text-(--foreground)",
+  error: "border-(--color-status-error-light) bg-(--surface-card) text-(--foreground)",
+};
+
+const toneIcons = {
+  success: <CheckCircle2 className="h-5 w-5 text-(--color-status-success)" />,
+  info: <Info className="h-5 w-5 text-(--color-status-info)" />,
+  warning: <TriangleAlert className="h-5 w-5 text-(--color-status-warning)" />,
+  error: <OctagonAlert className="h-5 w-5 text-(--color-status-error)" />,
+} as const;
+
+function createToastId() {
+  if (typeof globalThis.crypto?.randomUUID === "function") {
+    return globalThis.crypto.randomUUID();
+  }
+
+  return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+export function ToastProvider({ children }: PropsWithChildren) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const value = useMemo<ToastContextValue>(
+    () => ({
+      showToast: (toast) => {
+        const id = createToastId();
+        setToasts((current) => [...current, { ...toast, id }]);
+        window.setTimeout(() => {
+          setToasts((current) => current.filter((item) => item.id !== id));
+        }, 3500);
+      },
+      dismissToast: (id) => {
+        setToasts((current) => current.filter((item) => item.id !== id));
+      },
+    }),
+    [],
+  );
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <ToastViewport toasts={toasts} onDismiss={value.dismissToast} />
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const context = useContext(ToastContext);
+
+  if (!context) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+
+  return context;
+}
+
+type ToastViewportProps = {
+  toasts: ToastItem[];
+  onDismiss: (id: string) => void;
+};
+
+function ToastViewport({ toasts, onDismiss }: ToastViewportProps) {
+  return (
+    <div className="pointer-events-none fixed bottom-6 left-6 right-6 z-50 flex flex-col gap-3 sm:left-auto sm:w-full sm:max-w-sm">
+      <AnimatePresence initial={false}>
+        {toasts.map((toast) => (
+          <Toast key={toast.id} {...toast} onDismiss={() => onDismiss(toast.id)} />
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+type ToastProps = ToastItem & {
+  onDismiss?: () => void;
+  action?: ReactNode;
+};
+
+export function Toast({ title, description, tone, onDismiss, action }: ToastProps) {
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, y: 18, scale: 0.96 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      exit={{ opacity: 0, x: 24, scale: 0.96 }}
+      transition={{ duration: 0.22, ease: "easeOut" }}
+      className={cn("pointer-events-auto rounded-lg border p-4 shadow-(--shadow-lg)", toneClasses[tone])}
+      role="status"
+    >
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5">{toneIcons[tone]}</div>
+        <div className="min-w-0 flex-1">
+          <p className="type-title">{title}</p>
+          {description ? <p className="type-body mt-1 text-(--ink-muted)">{description}</p> : null}
+          {action ? <div className="mt-3">{action}</div> : null}
+        </div>
+        {onDismiss ? (
+          <button
+            type="button"
+            onClick={onDismiss}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-full text-(--ink-subtle) transition-colors hover:bg-(--color-surface-hover)"
+            aria-label="Dismiss toast"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        ) : null}
+      </div>
+    </motion.div>
+  );
+}

package/src/tooltip.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState, type FocusEvent, type ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type TooltipSide = "top" | "right" | "bottom" | "left";
+
+type TooltipProps = {
+  content: ReactNode;
+  children: ReactNode;
+  side?: TooltipSide;
+  className?: string;
+};
+
+const sideClasses: Record<TooltipSide, string> = {
+  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
+  right: "left-full top-1/2 ml-2 -translate-y-1/2",
+  bottom: "left-1/2 top-full mt-2 -translate-x-1/2",
+  left: "right-full top-1/2 mr-2 -translate-y-1/2",
+};
+
+export function Tooltip({ content, children, side = "top", className }: TooltipProps) {
+  const [open, setOpen] = useState(false);
+
+  function handleFocus(event: FocusEvent<HTMLSpanElement>) {
+    const focusTarget = event.target;
+
+    if (focusTarget instanceof HTMLElement && focusTarget.matches(":focus-visible")) {
+      setOpen(true);
+    }
+  }
+
+  return (
+    <span
+      className={cn("relative inline-flex", className)}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onFocusCapture={handleFocus}
+      onBlurCapture={() => setOpen(false)}
+      onPointerDownCapture={() => setOpen(false)}
+    >
+      {children}
+      <span
+        role="tooltip"
+        className={cn(
+          "type-caption pointer-events-none absolute z-2147483647 whitespace-nowrap rounded-2xl bg-(--color-bg-dark) px-3 py-2 font-bold text-white shadow-(--shadow-lg) transition-opacity",
+          open ? "visible opacity-100" : "invisible opacity-0",
+          sideClasses[side],
+        )}
+      >
+        {content}
+      </span>
+    </span>
+  );
+}

package/src/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}