@rahulapgm/skyblue-ui 0.1.0

package/src/grid.tsx

@@ -0,0 +1,94 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+type GridGap = "xs" | "sm" | "md" | "lg" | "xl";
+
+type GridProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  cols?: GridColumns;
+  sm?: GridColumns;
+  md?: GridColumns;
+  lg?: GridColumns;
+  xl?: GridColumns;
+  gap?: GridGap;
+};
+
+const columnClasses: Record<GridColumns, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  12: "grid-cols-12",
+};
+
+const smColumnClasses: Record<GridColumns, string> = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6",
+  12: "sm:grid-cols-12",
+};
+
+const mdColumnClasses: Record<GridColumns, string> = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6",
+  12: "md:grid-cols-12",
+};
+
+const lgColumnClasses: Record<GridColumns, string> = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  12: "lg:grid-cols-12",
+};
+
+const xlColumnClasses: Record<GridColumns, string> = {
+  1: "xl:grid-cols-1",
+  2: "xl:grid-cols-2",
+  3: "xl:grid-cols-3",
+  4: "xl:grid-cols-4",
+  5: "xl:grid-cols-5",
+  6: "xl:grid-cols-6",
+  12: "xl:grid-cols-12",
+};
+
+const gapClasses: Record<GridGap, string> = {
+  xs: "gutter-grid-xs",
+  sm: "gutter-grid-sm",
+  md: "gutter-grid-md",
+  lg: "gutter-grid-lg",
+  xl: "gutter-grid-xl",
+};
+
+export function Grid({ children, cols = 1, sm, md, lg, xl, gap = "md", className, ...props }: GridProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "grid",
+        columnClasses[cols],
+        gapClasses[gap],
+        sm && smColumnClasses[sm],
+        md && mdColumnClasses[md],
+        lg && lgColumnClasses[lg],
+        xl && xlColumnClasses[xl],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/hero-banner.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Card } from "./card";
+import { cn } from "./utils";
+
+type HeroBannerAction = {
+  label: string;
+  variant?: "primary" | "secondary" | "tertiary" | "destructive";
+  href?: string;
+  onClick?: () => void;
+  ariaLabel?: string;
+};
+
+type HeroBannerProps = {
+  eyebrow?: string;
+  title: string;
+  description: string;
+  media?: ReactNode;
+  actions?: HeroBannerAction[];
+  highlights?: ReactNode;
+  className?: string;
+};
+
+export function HeroBanner({
+  eyebrow,
+  title,
+  description,
+  media,
+  actions,
+  highlights,
+  className,
+}: HeroBannerProps) {
+  return (
+    <Card
+      tone="glass"
+      padding="xl"
+      className={cn("overflow-hidden rounded-[calc(var(--radius-xl)+8px)]", className)}
+    >
+      <div className="grid items-center gap-8 lg:grid-cols-[1fr_0.9fr]">
+        <div>
+          {eyebrow ? <Badge tone="brand">{eyebrow}</Badge> : null}
+          <h1
+            className="type-display mt-4 max-w-3xl"
+            style={{ letterSpacing: "var(--global-letter-spacing)" }}
+          >
+            {title}
+          </h1>
+          <p className="type-block mt-4 max-w-2xl text-(--ink-muted)">{description}</p>
+          {actions?.length ? (
+            <div className="mt-6 flex flex-wrap gap-3">
+              {actions.map((action) =>
+                action.href ? (
+                  <Button
+                    key={`${action.href}-${action.label}`}
+                    href={action.href}
+                    ariaLabel={action.ariaLabel}
+                    variant={action.variant ?? "primary"}
+                  >
+                    {action.label}
+                  </Button>
+                ) : (
+                  <Button
+                    key={action.label}
+                    onClick={action.onClick}
+                    aria-label={action.ariaLabel}
+                    variant={action.variant ?? "primary"}
+                  >
+                    {action.label}
+                  </Button>
+                ),
+              )}
+            </div>
+          ) : null}
+          {highlights ? <div className="mt-6">{highlights}</div> : null}
+        </div>
+        {media ? <div>{media}</div> : null}
+      </div>
+    </Card>
+  );
+}

package/src/icon-button.tsx

@@ -0,0 +1,78 @@
+import Link from "next/link";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { buttonBaseClasses, buttonVariantClasses, type ButtonVariant } from "./button";
+import { cn } from "./utils";
+
+type IconButtonSize = "sm" | "md" | "lg";
+type IconButtonVariant = ButtonVariant | "ghost";
+
+type SharedIconButtonProps = {
+  icon: ReactNode;
+  ariaLabel: string;
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  className?: string;
+};
+
+type IconButtonProps =
+  | (SharedIconButtonProps &
+      ButtonHTMLAttributes<HTMLButtonElement> & {
+        href?: undefined;
+      })
+  | (SharedIconButtonProps & {
+      href: string;
+    });
+
+const iconButtonVariantClasses: Record<IconButtonVariant, string> = {
+  ...buttonVariantClasses,
+  ghost: "bg-transparent text-(--foreground) shadow-none hover:bg-(--color-surface-hover)",
+};
+
+const iconButtonSizeClasses: Record<IconButtonSize, string> = {
+  sm: "h-10 w-10",
+  md: "h-12 w-12",
+  lg: "h-14 w-14",
+};
+
+export function IconButton(props: IconButtonProps) {
+  const { icon, ariaLabel, variant = "tertiary", size = "md", className } = props;
+
+  const classes = cn(
+    buttonBaseClasses,
+    "rounded-full p-0",
+    iconButtonVariantClasses[variant],
+    iconButtonSizeClasses[size],
+    className,
+  );
+
+  if ("href" in props && props.href) {
+    return (
+      <Link href={props.href} aria-label={ariaLabel} className={classes}>
+        {icon}
+      </Link>
+    );
+  }
+
+  const {
+    type = "button",
+    ariaLabel: omittedAriaLabel,
+    icon: omittedIcon,
+    variant: omittedVariant,
+    size: omittedSize,
+    className: omittedClassName,
+    ...buttonProps
+  } = props as Extract<IconButtonProps, { href?: undefined }>;
+
+  void omittedAriaLabel;
+  void omittedIcon;
+  void omittedVariant;
+  void omittedSize;
+  void omittedClassName;
+
+  return (
+    <button {...buttonProps} type={type} aria-label={ariaLabel} className={classes}>
+      {icon}
+    </button>
+  );
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+export * from "./badge";
+export * from "./button";
+export * from "./card";
+export * from "./checkbox";
+export * from "./cluster";
+export * from "./container";
+export * from "./datepicker";
+export * from "./feature-card";
+export * from "./floating-button";
+export * from "./grid";
+export * from "./hero-banner";
+export * from "./icon-button";
+export * from "./input";
+export * from "./label";
+export * from "./loader";
+export * from "./message-box";
+export * from "./metric";
+export * from "./navigation";
+export * from "./radio";
+export * from "./progress";
+export * from "./result";
+export * from "./section";
+export * from "./select";
+export * from "./skeleton";
+export * from "./stat-card";
+export * from "./stack";
+export * from "./table";
+export * from "./textarea";
+export * from "./timeline";
+export * from "./utils";
+export * from "./phone-number-input";
+export * from "./steps";

package/src/input.tsx

@@ -0,0 +1,62 @@
+import type { InputHTMLAttributes } from "react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  leadingSlot?: React.ReactNode;
+  trailingSlot?: React.ReactNode;
+};
+
+export function Input({
+  label,
+  helperText,
+  errorText,
+  leadingSlot,
+  trailingSlot,
+  className,
+  id,
+  required,
+  ...props
+}: InputProps) {
+  const inputId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const hasError = Boolean(errorText);
+
+  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)",
+        )}
+      >
+        {leadingSlot}
+        <input
+          {...props}
+          id={inputId}
+          required={required}
+          className={cn(
+            "type-body min-h-12 w-full bg-transparent text-(--foreground) outline-none placeholder:text-(--ink-subtle)",
+            className,
+          )}
+        />
+        {trailingSlot}
+      </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/label.tsx

@@ -0,0 +1,20 @@
+import type { LabelHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+  children: ReactNode;
+  requiredMark?: boolean;
+};
+
+export function Label({ children, requiredMark = false, className, ...props }: LabelProps) {
+  return (
+    <label
+      {...props}
+      className={cn("type-title inline-flex items-center gap-1 text-(--foreground)", className)}
+    >
+      <span>{children}</span>
+      {requiredMark ? <span className="text-(--color-status-error)">*</span> : null}
+    </label>
+  );
+}

package/src/loader.tsx

@@ -0,0 +1,90 @@
+import { LoaderCircle } from "lucide-react";
+
+import { cn } from "./utils";
+
+type LoaderSize = "sm" | "md" | "lg";
+type LoaderTone = "brand" | "neutral" | "inverse";
+
+type LoaderProps = {
+  label?: string | null;
+  size?: LoaderSize;
+  tone?: LoaderTone;
+  className?: string;
+};
+
+const sizeClasses: Record<LoaderSize, string> = {
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8",
+};
+
+const toneClasses: Record<LoaderTone, string> = {
+  brand: "text-(--color-brand-primary)",
+  neutral: "text-(--ink-muted)",
+  inverse: "text-white",
+};
+
+export function Loader({ label = "Loading", size = "md", tone = "brand", className }: LoaderProps) {
+  return (
+    <span className={cn("inline-flex items-center gap-2", className)} role="status" aria-live="polite">
+      <LoaderCircle className={cn("animate-spin", sizeClasses[size], toneClasses[tone])} />
+      {label ? <span className="type-caption text-(--ink-muted)">{label}</span> : null}
+    </span>
+  );
+}
+
+type PageLoaderOverlayProps = {
+  label?: string;
+  description?: string;
+  className?: string;
+};
+
+type BlockLoaderOverlayProps = {
+  label?: string;
+  description?: string;
+  className?: string;
+};
+
+export function PageLoaderOverlay({ label = "Loading", description, className }: PageLoaderOverlayProps) {
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-100 flex items-center justify-center bg-white/70 backdrop-blur-sm",
+        className,
+      )}
+      role="status"
+      aria-live="polite"
+      aria-label={label}
+    >
+      <div className="flex min-w-60 max-w-sm flex-col items-center gap-3 rounded-lg border border-(--line-soft) bg-(--surface-card) px-6 py-5 text-center shadow-(--shadow-lg)">
+        <LoaderCircle className={cn("animate-spin", sizeClasses.lg, toneClasses.brand)} />
+        <p className="type-title text-(--foreground)">{label}</p>
+        {description ? <p className="type-body text-(--ink-muted)">{description}</p> : null}
+      </div>
+    </div>
+  );
+}
+
+export function BlockLoaderOverlay({
+  label = "Loading",
+  description,
+  className,
+}: BlockLoaderOverlayProps) {
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 z-20 flex items-center justify-center rounded-[inherit] bg-white/72 p-4 backdrop-blur-sm",
+        className,
+      )}
+      role="status"
+      aria-live="polite"
+      aria-label={label}
+    >
+      <div className="flex min-w-56 max-w-xs flex-col items-center gap-3 rounded-2xl border border-(--line-soft) bg-(--surface-card) px-5 py-4 text-center shadow-(--shadow-md)">
+        <LoaderCircle className={cn("animate-spin", sizeClasses.md, toneClasses.brand)} />
+        <p className="type-title text-(--foreground)">{label}</p>
+        {description ? <p className="type-body text-(--ink-muted)">{description}</p> : null}
+      </div>
+    </div>
+  );
+}

package/src/menu.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+
+import { Button, type ButtonSize, type ButtonVariant } from "./button";
+import { cn } from "./utils";
+
+export type MenuItem = {
+  label: string;
+  description?: string;
+  onSelect?: () => void;
+  disabled?: boolean;
+  tone?: "default" | "destructive";
+};
+
+type MenuProps = {
+  label: string;
+  items: MenuItem[];
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+};
+
+export function Menu({ label, items, variant = "tertiary", size = "sm", className }: MenuProps) {
+  const id = useId();
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className={cn("relative inline-flex", className)}>
+      <Button
+        variant={variant}
+        size={size}
+        onClick={() => setOpen((current) => !current)}
+        aria-label={label}
+      >
+        {label}
+        <ChevronDown className={cn("h-4 w-4 transition-transform", open && "rotate-180")} />
+      </Button>
+
+      {open ? (
+        <div
+          id={`${id}-menu`}
+          role="menu"
+          className="absolute right-0 top-full z-30 mt-2 min-w-60 rounded-xl border border-(--line-soft) bg-(--surface-card) p-2 shadow-(--shadow-lg)"
+        >
+          {items.map((item) => (
+            <button
+              key={item.label}
+              type="button"
+              role="menuitem"
+              disabled={item.disabled}
+              onClick={() => {
+                if (item.disabled) {
+                  return;
+                }
+
+                item.onSelect?.();
+                setOpen(false);
+              }}
+              className={cn(
+                "block w-full rounded-2xl px-4 py-3 text-left transition-colors hover:bg-(--color-surface-hover)",
+                item.disabled && "cursor-not-allowed opacity-50",
+                item.tone === "destructive" ? "text-(--color-status-error)" : "text-(--foreground)",
+              )}
+            >
+              <span className="type-body block">{item.label}</span>
+              {item.description ? (
+                <span className="type-caption mt-1 block text-(--ink-subtle)">{item.description}</span>
+              ) : null}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/message-box.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { CircleAlert, CircleCheckBig, Info, TriangleAlert } from "lucide-react";
+
+import { cn } from "./utils";
+
+type MessageTone = "info" | "success" | "warning" | "error";
+
+type MessageBoxProps = {
+  tone?: MessageTone;
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  className?: string;
+};
+
+const toneClasses: Record<MessageTone, string> = {
+  info: "border-(--color-status-info-light) bg-(--color-status-info-light)/60",
+  success: "border-(--color-status-success-light) bg-(--color-status-success-light)/70",
+  warning: "border-(--color-status-warning-light) bg-(--color-status-warning-light)/80",
+  error: "border-(--color-status-error-light) bg-(--color-status-error-light)/70",
+};
+
+const toneIcons: Record<MessageTone, ReactNode> = {
+  info: <Info className="h-5 w-5 text-(--color-status-info)" />,
+  success: <CircleCheckBig className="h-5 w-5 text-(--color-status-success)" />,
+  warning: <TriangleAlert className="h-5 w-5 text-(--color-status-warning)" />,
+  error: <CircleAlert className="h-5 w-5 text-(--color-status-error)" />,
+};
+
+export function MessageBox({ tone = "info", title, description, actions, className }: MessageBoxProps) {
+  return (
+    <div
+      className={cn("rounded-xl border p-4 shadow-(--shadow-sm)", toneClasses[tone], className)}
+      role="alert"
+    >
+      <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-2 text-(--ink-muted)">{description}</p> : null}
+          {actions ? <div className="mt-3 flex flex-wrap gap-3">{actions}</div> : null}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/metric.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type MetricTone = "default" | "brand" | "success" | "warning";
+
+type MetricProps = {
+  label: string;
+  value: ReactNode;
+  change?: string;
+  icon?: ReactNode;
+  tone?: MetricTone;
+  className?: string;
+};
+
+const toneClasses: Record<MetricTone, string> = {
+  default: "text-(--foreground)",
+  brand: "text-(--color-brand-primary)",
+  success: "text-(--color-status-success)",
+  warning: "text-(--color-status-warning)",
+};
+
+export function Metric({ label, value, change, icon, tone = "default", className }: MetricProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-(--line-soft) bg-(--surface-card) p-5 shadow-(--shadow-sm)",
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="type-caption text-(--ink-subtle)">{label}</p>
+          <p className={cn("mt-2 text-3xl font-extrabold", toneClasses[tone])}>{value}</p>
+          {change ? <p className="type-caption mt-2 text-(--ink-muted)">{change}</p> : null}
+        </div>
+        {icon ? <div className={cn("text-xl", toneClasses[tone])}>{icon}</div> : null}
+      </div>
+    </div>
+  );
+}