@rahulapgm/skyblue-ui 0.1.0

package/src/result.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+import { Ban, CheckCircle2, CircleAlert, Inbox, Info } from "lucide-react";
+
+import { Card } from "./card";
+import { cn } from "./utils";
+
+type ResultStatus = "success" | "info" | "warning" | "error" | "empty";
+
+type ResultProps = {
+  status?: ResultStatus;
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+};
+
+const defaultIcons: Record<ResultStatus, ReactNode> = {
+  success: <CheckCircle2 className="h-8 w-8 text-(--color-status-success)" />,
+  info: <Info className="h-8 w-8 text-(--color-status-info)" />,
+  warning: <CircleAlert className="h-8 w-8 text-(--color-status-warning)" />,
+  error: <Ban className="h-8 w-8 text-(--color-status-error)" />,
+  empty: <Inbox className="h-8 w-8 text-(--ink-subtle)" />,
+};
+
+export function Result({ status = "info", title, description, icon, actions, className }: ResultProps) {
+  return (
+    <Card
+      tone="surface"
+      padding="lg"
+      className={cn("flex flex-col items-start gap-4 text-left", className)}
+    >
+      <div className="flex h-14 w-14 items-center justify-center rounded-3xl bg-(--color-surface-muted)">
+        {icon ?? defaultIcons[status]}
+      </div>
+      <div>
+        <h3 className="type-subheading">{title}</h3>
+        {description ? <p className="type-body mt-2 text-(--ink-muted)">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex flex-wrap gap-3">{actions}</div> : null}
+    </Card>
+  );
+}

package/src/section.tsx

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type SectionSpacing = "sm" | "md" | "lg" | "xl";
+
+type SectionProps = HTMLAttributes<HTMLElement> & {
+  children: ReactNode;
+  as?: "section" | "div" | "main";
+  spacing?: SectionSpacing;
+  contained?: boolean;
+};
+
+const spacingClasses: Record<SectionSpacing, string> = {
+  sm: "gutter-section-sm",
+  md: "gutter-section-md",
+  lg: "gutter-section-lg",
+  xl: "gutter-section-xl",
+};
+
+export function Section({
+  children,
+  as = "section",
+  spacing = "lg",
+  contained = false,
+  className,
+  ...props
+}: SectionProps) {
+  const Component = as;
+
+  return (
+    <Component {...props} className={cn(spacingClasses[spacing], contained && "gutter-page", className)}>
+      {children}
+    </Component>
+  );
+}

package/src/select.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode, SelectHTMLAttributes } from "react";
+import { ChevronDown } from "lucide-react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type SelectOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> & {
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  options: SelectOption[];
+  placeholder?: string;
+  leadingSlot?: ReactNode;
+};
+
+export function Select({
+  label,
+  helperText,
+  errorText,
+  options,
+  placeholder,
+  leadingSlot,
+  className,
+  id,
+  required,
+  ...props
+}: SelectProps) {
+  const selectId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const hasError = Boolean(errorText);
+
+  return (
+    <div className="w-full">
+      {label ? (
+        <Label htmlFor={selectId} 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}
+        <select
+          {...props}
+          id={selectId}
+          required={required}
+          className={cn(
+            "type-body min-h-12 w-full appearance-none bg-transparent text-(--foreground) outline-none",
+            className,
+          )}
+        >
+          {placeholder ? <option value="">{placeholder}</option> : null}
+          {options.map((option) => (
+            <option key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <ChevronDown className="h-4 w-4 text-(--ink-subtle)" />
+      </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/skeleton.tsx

@@ -0,0 +1,17 @@
+import { cn } from "./utils";
+
+type SkeletonProps = {
+  className?: string;
+  rounded?: "sm" | "md" | "lg" | "full";
+};
+
+const roundedClasses = {
+  sm: "rounded-md",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  full: "rounded-full",
+} as const;
+
+export function Skeleton({ className, rounded = "md" }: SkeletonProps) {
+  return <div aria-hidden="true" className={cn("skeleton-shimmer", roundedClasses[rounded], className)} />;
+}

package/src/stack.tsx

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type StackGap = "xs" | "sm" | "md" | "lg" | "xl";
+type StackAlign = "start" | "center" | "end" | "stretch";
+
+type StackProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  gap?: StackGap;
+  align?: StackAlign;
+};
+
+const gapClasses: Record<StackGap, string> = {
+  xs: "gutter-grid-xs",
+  sm: "gutter-grid-sm",
+  md: "gutter-grid-md",
+  lg: "gutter-grid-lg",
+  xl: "gutter-grid-xl",
+};
+
+const alignClasses: Record<StackAlign, string> = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+};
+
+export function Stack({ children, gap = "md", align = "stretch", className, ...props }: StackProps) {
+  return (
+    <div {...props} className={cn("flex flex-col", gapClasses[gap], alignClasses[align], className)}>
+      {children}
+    </div>
+  );
+}

package/src/stat-card.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+
+import { Badge } from "./badge";
+import { Card } from "./card";
+import { cn } from "./utils";
+
+type StatCardProps = {
+  label: string;
+  value: ReactNode;
+  change?: string;
+  tone?: "default" | "brand" | "success" | "warning";
+  icon?: ReactNode;
+  size?: "sm" | "md";
+  className?: string;
+};
+
+const toneClasses = {
+  default: "text-(--foreground)",
+  brand: "text-(--color-brand-primary)",
+  success: "text-(--color-status-success)",
+  warning: "text-(--color-status-warning)",
+} as const;
+
+export function StatCard({
+  label,
+  value,
+  change,
+  tone = "default",
+  icon,
+  size = "md",
+  className,
+}: StatCardProps) {
+  return (
+    <Card
+      className={cn("min-w-0 overflow-hidden", size === "sm" ? "min-h-42" : "min-h-49", className)}
+      tone="surface"
+      padding="md"
+    >
+      <div className="flex items-start justify-between gap-3 sm:gap-4">
+        <div className="min-w-0 flex-1">
+          <p className="type-caption text-(--ink-subtle)">{label}</p>
+          <p
+            className={cn(
+              "mt-2 whitespace-normal text-balance font-extrabold leading-[0.95]",
+              size === "sm"
+                ? "text-[1.5rem] sm:text-[1.75rem]"
+                : "text-[1.625rem] sm:text-[2rem] lg:text-[2.25rem]",
+              toneClasses[tone],
+            )}
+          >
+            {value}
+          </p>
+        </div>
+        {icon ? (
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-(--color-brand-primary-light) text-(--color-brand-primary) sm:h-11 sm:w-11">
+            {icon}
+          </div>
+        ) : null}
+      </div>
+      {change ? (
+        <div className="mt-3 sm:mt-4">
+          <Badge tone={tone === "success" ? "success" : tone === "warning" ? "warning" : "info"} size="sm">
+            {change}
+          </Badge>
+        </div>
+      ) : null}
+    </Card>
+  );
+}

package/src/steps.tsx

@@ -0,0 +1,115 @@
+import { Fragment } from "react";
+import { ArrowDown, ArrowRight } from "lucide-react";
+
+import { Badge } from "./badge";
+import { cn } from "./utils";
+
+export type StepItem = {
+  title: string;
+  description?: string;
+};
+
+type StepsProps = {
+  items: StepItem[];
+  current: number;
+  className?: string;
+};
+
+const statusLabels = {
+  completed: "Completed",
+  current: "Ongoing",
+  upcoming: "Upcoming",
+} as const;
+
+function getConnectorClass(stepNumber: number, current: number) {
+  if (stepNumber < current - 1) {
+    return "bg-(--color-status-success)";
+  }
+
+  if (stepNumber === current - 1) {
+    return "bg-(--color-brand-primary)";
+  }
+
+  return "bg-(--line-soft)";
+}
+
+function getConnectorIconClass(stepNumber: number, current: number) {
+  if (stepNumber < current - 1) {
+    return "text-(--color-status-success)";
+  }
+
+  if (stepNumber === current - 1) {
+    return "text-(--color-brand-primary)";
+  }
+
+  return "text-(--ink-subtle)";
+}
+
+export function Steps({ items, current, className }: StepsProps) {
+  return (
+    <div role="list" className={cn("w-full overflow-hidden", className)}>
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-stretch xl:gap-5">
+        {items.map((item, index) => {
+          const status = index + 1 < current ? "completed" : index + 1 === current ? "current" : "upcoming";
+
+          return (
+            <Fragment key={item.title}>
+              <div className="min-w-0 flex-1">
+                <div
+                  aria-current={status === "current" ? "step" : undefined}
+                  className={cn(
+                    "relative min-w-0 rounded-3xl border px-5 py-5 shadow-(--shadow-sm) sm:px-6 sm:py-6",
+                    status === "completed" &&
+                      "border-(--color-status-success-light) bg-(--color-status-success-light)/45",
+                    status === "current" &&
+                      "border-(--color-brand-primary-light) bg-(--color-brand-primary-light)/5 ring-2 ring-(--color-brand-primary-light)/80",
+                    status === "upcoming" && "border-(--line-soft) bg-(--surface-card)",
+                  )}
+                  role="listitem"
+                >
+                  <div className="absolute right-3 top-2">
+                    <Badge
+                      tone={status === "completed" ? "success" : status === "current" ? "brand" : "neutral"}
+                      size="sm"
+                    >
+                      {statusLabels[status]}
+                    </Badge>
+                  </div>
+                  <div className="flex items-start gap-4 sm:gap-5">
+                    <div className="min-w-0 flex-1">
+                      <h3 className="mt-1 pr-28 text-base font-extrabold leading-tight text-(--foreground) sm:pr-32 sm:text-lg">
+                        {item.title}
+                      </h3>
+                      {item.description ? (
+                        <p className="mt-2 max-w-[22ch] text-sm font-semibold leading-6 text-(--ink-muted)">
+                          {item.description}
+                        </p>
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {index < items.length - 1 ? (
+                <div className="flex justify-center py-1 xl:w-20 xl:flex-none xl:items-center xl:py-0">
+                  <div className="flex flex-col items-center gap-2 xl:w-full xl:flex-row xl:gap-2">
+                    <span className={cn("h-8 w-px xl:hidden", getConnectorClass(index + 1, current))} />
+                    <ArrowDown
+                      className={cn("h-4 w-4 xl:hidden", getConnectorIconClass(index + 1, current))}
+                    />
+                    <span
+                      className={cn("hidden h-px flex-1 xl:block", getConnectorClass(index + 1, current))}
+                    />
+                    <ArrowRight
+                      className={cn("hidden h-4 w-4 xl:block", getConnectorIconClass(index + 1, current))}
+                    />
+                  </div>
+                </div>
+              ) : null}
+            </Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/swatch.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+import { cn } from "./utils";
+
+type SwatchProps = {
+  name: string;
+  value: string;
+  description?: string;
+  shape?: "square" | "circle";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+};
+
+const previewSizeClasses = {
+  sm: "h-10 w-10",
+  md: "h-14 w-14",
+  lg: "h-20 w-20",
+} as const;
+
+export function Swatch({
+  name,
+  value,
+  description,
+  shape = "square",
+  size = "md",
+  className,
+}: SwatchProps) {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <div
+      className={cn(
+        "surface-glass flex items-center gap-4 rounded-3xl border border-(--line-soft) p-4 shadow-(--shadow-sm)",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "shrink-0 border border-(--line-soft) shadow-(--shadow-sm)",
+          previewSizeClasses[size],
+          shape === "circle" ? "rounded-full" : "rounded-2xl",
+        )}
+        style={{ backgroundColor: value }}
+        aria-hidden
+      />
+      <div className="min-w-0 flex-1">
+        <p className="type-title">{name}</p>
+        <p className="type-caption mt-1 text-(--ink-subtle)">{value}</p>
+        {description ? <p className="type-body mt-2 text-(--ink-muted)">{description}</p> : null}
+      </div>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-(--line-soft) bg-(--surface-card) text-(--ink-muted) transition-colors hover:bg-(--color-surface-hover)"
+        aria-label={`Copy ${name} color value`}
+      >
+        {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+      </button>
+    </div>
+  );
+}

package/src/switch.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import type { InputHTMLAttributes } from "react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label: string;
+  description?: string;
+};
+
+export function Switch({
+  label,
+  description,
+  className,
+  id,
+  checked,
+  defaultChecked,
+  ...props
+}: SwitchProps) {
+  const switchId = id ?? label.toLowerCase().replace(/\s+/g, "-");
+  const isChecked = checked ?? defaultChecked;
+
+  return (
+    <label
+      htmlFor={switchId}
+      className={cn(
+        "flex cursor-pointer items-center justify-between gap-4 rounded-2xl border border-(--line-soft) bg-(--surface-card) p-4 shadow-(--shadow-sm)",
+        className,
+      )}
+    >
+      <span>
+        <Label htmlFor={switchId}>{label}</Label>
+        {description ? (
+          <span suppressHydrationWarning className="type-body mt-1 block text-(--ink-subtle)">
+            {description}
+          </span>
+        ) : null}
+      </span>
+      <span className="relative inline-flex h-7 w-12 shrink-0 items-center">
+        <input
+          {...props}
+          id={switchId}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          type="checkbox"
+          className="peer sr-only"
+        />
+        <span className="absolute inset-0 rounded-full bg-(--color-line-strong) transition-colors peer-checked:bg-(--color-brand-primary)" />
+        <span
+          className={cn(
+            "absolute left-1 h-5 w-5 rounded-full bg-white shadow-(--shadow-sm) transition-transform peer-checked:translate-x-5",
+            isChecked && "translate-x-5",
+          )}
+        />
+      </span>
+    </label>
+  );
+}

package/src/table.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+
+import { cn } from "./utils";
+
+export type TableColumn<T> = {
+  key: string;
+  header: ReactNode;
+  align?: "left" | "center" | "right";
+  width?: string;
+  render: (row: T, rowIndex: number) => ReactNode;
+};
+
+type TableProps<T> = {
+  columns: Array<TableColumn<T>>;
+  rows: T[];
+  rowKey: (row: T, rowIndex: number) => string;
+  emptyState?: ReactNode;
+  className?: string;
+};
+
+const alignClasses = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+} as const;
+
+export function Table<T>({
+  columns,
+  rows,
+  rowKey,
+  emptyState = "No records found.",
+  className,
+}: TableProps<T>) {
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-xl border border-(--line-soft) bg-(--surface-card) shadow-(--shadow-sm)",
+        className,
+      )}
+    >
+      <div className="overflow-x-auto">
+        <table className="min-w-full border-collapse">
+          <thead className="bg-(--color-surface-muted)">
+            <tr>
+              {columns.map((column) => (
+                <th
+                  key={column.key}
+                  className={cn(
+                    "type-overline px-4 py-3 text-(--ink-subtle)",
+                    alignClasses[column.align ?? "left"],
+                  )}
+                  style={column.width ? { width: column.width } : undefined}
+                >
+                  {column.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length ? (
+              rows.map((row, rowIndex) => (
+                <tr key={rowKey(row, rowIndex)} className="border-t border-(--line-soft)">
+                  {columns.map((column) => (
+                    <td
+                      key={column.key}
+                      className={cn(
+                        "type-body px-4 py-4 align-top text-(--foreground)",
+                        alignClasses[column.align ?? "left"],
+                      )}
+                    >
+                      {column.render(row, rowIndex)}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={columns.length} className="type-body px-4 py-10 text-center text-(--ink-subtle)">
+                  {emptyState}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}