@rahulapgm/skyblue-ui 0.1.0

package/README.md

@@ -0,0 +1,25 @@
+# Skyblue UI
+
+React UI components published as `@rahulapgm/skyblue-ui`.
+
+## Local Development
+
+```sh
+npm install
+npm run dev
+```
+
+## Build
+
+```sh
+npm run typecheck
+npm run build
+```
+
+## Publish
+
+```sh
+npm publish
+```
+
+The package is configured for public npm publishing.

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@rahulapgm/skyblue-ui",
+  "version": "0.1.0",
+  "description": "Skyblue UI components for GetOttam web experiences.",
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*.tsx",
+    "./utils": "./src/utils.ts"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/*.tsx src/utils.ts --format esm,cjs --dts --clean --external react --external react-dom --external next --external framer-motion --external lucide-react",
+    "build:preview": "vite build",
+    "dev": "vite --host 0.0.0.0",
+    "preview": "vite preview --host 0.0.0.0",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.7.0",
+    "next": "^16.2.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.25",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@tailwindcss/vite": "^4.1.17",
+    "@vitejs/plugin-react": "^5.1.1",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.7.0",
+    "next": "16.2.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwindcss": "^4.1.17",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
+  }
+}

package/src/animation.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { motion, useReducedMotion, type HTMLMotionProps } from "framer-motion";
+import type { ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type RevealFrom = "up" | "down" | "left" | "right";
+
+type RevealProps = HTMLMotionProps<"div"> & {
+  children: ReactNode;
+  delay?: number;
+  duration?: number;
+  amount?: number;
+  once?: boolean;
+  from?: RevealFrom;
+};
+
+type FloatProps = HTMLMotionProps<"div"> & {
+  children?: ReactNode;
+  x?: number[];
+  y?: number[];
+  scale?: number[];
+  duration?: number;
+  ease?: "easeInOut" | "easeIn" | "easeOut" | "linear";
+};
+
+function getRevealInitial(from: RevealFrom) {
+  if (from === "left") {
+    return { opacity: 0, x: -24 };
+  }
+
+  if (from === "right") {
+    return { opacity: 0, x: 24 };
+  }
+
+  if (from === "down") {
+    return { opacity: 0, y: -20 };
+  }
+
+  return { opacity: 0, y: 20 };
+}
+
+function getRevealVisible(from: RevealFrom) {
+  if (from === "left" || from === "right") {
+    return { opacity: 1, x: 0 };
+  }
+
+  return { opacity: 1, y: 0 };
+}
+
+export function Reveal({
+  children,
+  className,
+  delay = 0,
+  duration = 0.6,
+  amount = 0.18,
+  once = true,
+  from = "up",
+  ...props
+}: RevealProps) {
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      {...props}
+      initial={prefersReducedMotion ? false : getRevealInitial(from)}
+      whileInView={prefersReducedMotion ? undefined : getRevealVisible(from)}
+      viewport={{ once, amount }}
+      transition={prefersReducedMotion ? { duration: 0 } : { duration, delay, ease: "easeOut" }}
+      className={cn(className)}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function Float({
+  children,
+  className,
+  x,
+  y = [0, 16, 0],
+  scale,
+  duration = 5,
+  ease = "easeInOut",
+  ...props
+}: FloatProps) {
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      {...props}
+      animate={
+        prefersReducedMotion
+          ? { opacity: 1 }
+          : {
+              ...(x ? { x } : {}),
+              ...(y ? { y } : {}),
+              ...(scale ? { scale } : {}),
+            }
+      }
+      transition={
+        prefersReducedMotion
+          ? { duration: 0 }
+          : {
+              duration,
+              repeat: Infinity,
+              repeatType: "mirror",
+              ease,
+            }
+      }
+      className={cn(className)}
+    >
+      {children}
+    </motion.div>
+  );
+}

package/src/autocomplete.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { Search, X } from "lucide-react";
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+
+import { Label } from "./label";
+import { Loader } from "./loader";
+import { cn } from "./utils";
+
+export type BasicAutocompleteOption = {
+  label: string;
+  value: string;
+  description?: string;
+  keywords?: readonly string[];
+};
+
+type AutocompleteProps<TOption> = {
+  label?: string;
+  value: string;
+  options: readonly TOption[];
+  onValueChange: (value: string) => void;
+  onSelect: (option: TOption) => void | Promise<void>;
+  getOptionKey: (option: TOption) => string;
+  getOptionLabel: (option: TOption) => string;
+  getOptionDescription?: (option: TOption) => string | null | undefined;
+  placeholder?: string;
+  emptyText?: string;
+  helperText?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  minimumQueryLength?: number;
+  className?: string;
+  inputClassName?: string;
+  listClassName?: string;
+  renderOption?: (option: TOption, state: { active: boolean }) => ReactNode;
+  onClear?: () => void;
+};
+
+export function Autocomplete<TOption>({
+  label,
+  value,
+  options,
+  onValueChange,
+  onSelect,
+  getOptionKey,
+  getOptionLabel,
+  getOptionDescription,
+  placeholder = "Search",
+  emptyText = "No matches found",
+  helperText,
+  loading = false,
+  disabled = false,
+  required = false,
+  minimumQueryLength = 0,
+  className,
+  inputClassName,
+  listClassName,
+  renderOption,
+  onClear,
+}: AutocompleteProps<TOption>) {
+  const id = useId();
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [hasFocus, setHasFocus] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+  const listboxId = `${id}-listbox`;
+  const trimmedValue = value.trim();
+  const canShowDropdown = trimmedValue.length >= minimumQueryLength;
+  const open = !dismissed && hasFocus && !disabled && canShowDropdown;
+
+  useEffect(() => {
+    function handlePointerDown(event: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setHasFocus(false);
+        setDismissed(true);
+      }
+    }
+
+    document.addEventListener("mousedown", handlePointerDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+    };
+  }, []);
+
+  const safeActiveIndex = useMemo(() => {
+    if (!options.length) {
+      return 0;
+    }
+
+    return Math.min(activeIndex, options.length - 1);
+  }, [activeIndex, options.length]);
+
+  function closeDropdown() {
+    setHasFocus(false);
+    setDismissed(true);
+    setActiveIndex(0);
+    inputRef.current?.blur();
+  }
+
+  async function handleSelect(option: TOption) {
+    await onSelect(option);
+    closeDropdown();
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (!open && event.key === "ArrowDown" && canShowDropdown) {
+      event.preventDefault();
+      setDismissed(false);
+      return;
+    }
+
+    if (!open) {
+      return;
+    }
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((current) => (current + 1) % Math.max(options.length, 1));
+      return;
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((current) => (current - 1 + Math.max(options.length, 1)) % Math.max(options.length, 1));
+      return;
+    }
+
+    if (event.key === "Enter" && options[safeActiveIndex]) {
+      event.preventDefault();
+      void handleSelect(options[safeActiveIndex]);
+      return;
+    }
+
+    if (event.key === "Escape" || event.key === "Tab") {
+      setHasFocus(false);
+      setDismissed(true);
+    }
+  }
+
+  return (
+    <div ref={wrapperRef} className={cn("relative w-full", className)}>
+      {label ? (
+        <Label htmlFor={id} requiredMark={required} className="mb-2 block">
+          {label}
+        </Label>
+      ) : null}
+
+      <div className="flex min-h-12 items-center gap-3 rounded-[1rem] border border-(--line-soft) bg-(--surface-card) px-4 shadow-(--shadow-sm)">
+        <Search className="h-4 w-4 text-(--ink-subtle)" />
+        <input
+          ref={inputRef}
+          id={id}
+          value={value}
+          disabled={disabled}
+          onChange={(event) => {
+            onValueChange(event.target.value);
+            setHasFocus(true);
+            setDismissed(false);
+            setActiveIndex(0);
+          }}
+          onFocus={() => {
+            setHasFocus(true);
+            setDismissed(false);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          autoComplete="off"
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listboxId}
+          aria-autocomplete="list"
+          aria-activedescendant={
+            open && options[safeActiveIndex] ? `${id}-option-${getOptionKey(options[safeActiveIndex])}` : undefined
+          }
+          className={cn(
+            "type-body min-h-12 w-full bg-transparent text-(--foreground) outline-none placeholder:text-(--ink-subtle)",
+            inputClassName,
+          )}
+        />
+        {loading ? <Loader label={null} size="sm" className="gap-0" /> : null}
+        {!loading && value ? (
+          <button
+            type="button"
+            onClick={() => {
+              onValueChange("");
+              onClear?.();
+              setActiveIndex(0);
+              setDismissed(false);
+            }}
+            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="Clear search"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        ) : null}
+      </div>
+
+      {helperText ? <p className="type-caption mt-2 text-(--ink-subtle)">{helperText}</p> : null}
+
+      {open && canShowDropdown ? (
+        <div
+          id={listboxId}
+          role="listbox"
+          aria-labelledby={id}
+          className={cn(
+            "absolute z-20 mt-2 w-full rounded-[1.2rem] border border-(--line-soft) bg-(--surface-card) p-1.5 shadow-(--shadow-lg)",
+            listClassName,
+          )}
+        >
+          {options.length > 0 ? (
+            <div className="space-y-1">
+              {options.map((option, index) => {
+                const optionKey = getOptionKey(option);
+                const active = safeActiveIndex === index;
+
+                return (
+                  <button
+                    key={optionKey}
+                    id={`${id}-option-${optionKey}`}
+                    type="button"
+                    role="option"
+                    aria-selected={active}
+                    onMouseDown={(event) => {
+                      event.preventDefault();
+                    }}
+                    onMouseEnter={() => setActiveIndex(index)}
+                    onClick={() => {
+                      void handleSelect(option);
+                    }}
+                    className={cn(
+                      "block w-full rounded-[0.95rem] px-3.5 py-2.5 text-left transition-colors",
+                      active ? "bg-(--color-surface-hover)" : "bg-transparent hover:bg-(--color-surface-hover)",
+                    )}
+                  >
+                    {renderOption ? (
+                      renderOption(option, { active })
+                    ) : (
+                      <>
+                        <span className="type-body block font-medium text-(--foreground)">{getOptionLabel(option)}</span>
+                        {getOptionDescription?.(option) ? (
+                          <span className="type-caption mt-1 block text-(--ink-subtle)">
+                            {getOptionDescription(option)}
+                          </span>
+                        ) : null}
+                      </>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          ) : !loading ? (
+            <div className="px-4 py-3">
+              <p className="type-caption text-(--ink-subtle)">{emptyText}</p>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/badge.tsx

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type BadgeTone = "brand" | "neutral" | "success" | "warning" | "error" | "info";
+type BadgeSize = "sm" | "md";
+
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+  children: ReactNode;
+  tone?: BadgeTone;
+  size?: BadgeSize;
+};
+
+const toneClasses: Record<BadgeTone, string> = {
+  brand: "bg-(--color-brand-primary-light) text-(--color-brand-primary)",
+  neutral: "bg-(--surface-chip) text-(--ink-muted)",
+  success: "bg-(--color-status-success-light) text-(--color-status-success)",
+  warning: "bg-(--color-status-warning-light) text-(--color-status-warning)",
+  error: "bg-(--color-status-error-light) text-(--color-status-error)",
+  info: "bg-(--color-status-info-light) text-(--color-status-info)",
+};
+
+const sizeClasses: Record<BadgeSize, string> = {
+  sm: "px-2.5 py-1 type-caption",
+  md: "px-3 py-1.5 type-caption",
+};
+
+export function Badge({ children, tone = "neutral", size = "md", className, ...props }: BadgeProps) {
+  return (
+    <span
+      {...props}
+      className={cn(
+        "inline-flex items-center rounded-full font-extrabold",
+        toneClasses[tone],
+        sizeClasses[size],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/src/button.tsx

@@ -0,0 +1,88 @@
+import Link from "next/link";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg";
+
+type SharedButtonProps = {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  fullWidth?: boolean;
+};
+
+type ButtonProps =
+  | (SharedButtonProps &
+      ButtonHTMLAttributes<HTMLButtonElement> & {
+        href?: undefined;
+      })
+  | (SharedButtonProps & {
+      href: string;
+      ariaLabel?: string;
+    });
+
+export const buttonBaseClasses =
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-2xl font-extrabold no-underline transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:translate-y-0 disabled:opacity-50";
+
+export const buttonVariantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-(--color-brand-primary) !text-(--color-fg-inverse) visited:!text-(--color-fg-inverse) hover:!text-(--color-fg-inverse) active:!text-(--color-fg-inverse) shadow-(--shadow-primary) hover:bg-(--color-brand-primary-hover) active:bg-(--color-brand-primary-active) focus-visible:ring-(--color-brand-primary-light)",
+  secondary:
+    "border border-(--color-brand-secondary) bg-(--color-brand-secondary) !text-(--color-fg-inverse) visited:!text-(--color-fg-inverse) hover:!text-(--color-fg-inverse) active:!text-(--color-fg-inverse) shadow-(--shadow-md) hover:bg-(--color-brand-secondary-light) active:border-(--color-bg-dark) active:bg-(--color-bg-dark) focus-visible:ring-(--color-brand-primary-light)",
+  tertiary:
+    "border border-(--color-brand-secondary) bg-(--surface-card) !text-(--color-brand-secondary) visited:!text-(--color-brand-secondary) hover:!text-(--color-brand-secondary) active:!text-(--color-brand-secondary) shadow-(--shadow-sm) hover:bg-(--color-surface-muted) focus-visible:ring-(--color-brand-primary-light)",
+  destructive:
+    "bg-[#ff3131] !text-(--color-fg-inverse) visited:!text-(--color-fg-inverse) hover:!text-(--color-fg-inverse) active:!text-(--color-fg-inverse) shadow-(--shadow-md) hover:bg-[#e62b2b] active:bg-[#cc2525] focus-visible:ring-(--color-status-error-light)",
+};
+
+export const buttonSizeClasses: Record<ButtonSize, string> = {
+  sm: "min-h-10 px-4 type-body",
+  md: "min-h-12 px-5 type-body",
+  lg: "min-h-14 px-7 type-title",
+};
+
+export function Button(props: ButtonProps) {
+  const { children, variant = "primary", size = "md", className, fullWidth = false } = props;
+
+  const classes = cn(
+    buttonBaseClasses,
+    buttonVariantClasses[variant],
+    buttonSizeClasses[size],
+    fullWidth && "w-full",
+    className,
+  );
+
+  if ("href" in props && props.href) {
+    const { href, ariaLabel } = props;
+
+    return (
+      <Link href={href} aria-label={ariaLabel} className={classes}>
+        {children}
+      </Link>
+    );
+  }
+
+  const { type = "button", ...buttonProps } = props as Extract<ButtonProps, { href?: undefined }>;
+  const {
+    children: _children,
+    variant: _variant,
+    size: _size,
+    className: _className,
+    fullWidth: _fullWidth,
+    ...nativeButtonProps
+  } = buttonProps;
+  void _children;
+  void _variant;
+  void _size;
+  void _className;
+  void _fullWidth;
+
+  return (
+    <button {...nativeButtonProps} type={type} className={classes}>
+      {children}
+    </button>
+  );
+}

package/src/card.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type CardTone = "surface" | "glass" | "muted" | "dark";
+type CardPadding = "sm" | "md" | "lg" | "xl";
+
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  tone?: CardTone;
+  padding?: CardPadding;
+};
+
+const toneClasses: Record<CardTone, string> = {
+  surface: "bg-(--surface-card) border border-(--line-soft) shadow-(--shadow-md)",
+  glass: "surface-glass border border-(--line-soft) shadow-(--shadow-md)",
+  muted: "bg-(--color-surface-muted) border border-(--line-soft) shadow-(--shadow-sm)",
+  dark: "bg-(--color-bg-dark) border border-white/10 text-(--color-fg-inverse) shadow-(--shadow-lg)",
+};
+
+const paddingClasses: Record<CardPadding, string> = {
+  sm: "gutter-card-sm",
+  md: "gutter-card-md",
+  lg: "gutter-card-lg",
+  xl: "gutter-card-xl",
+};
+
+export function Card({ children, tone = "surface", padding = "md", className, ...props }: CardProps) {
+  return (
+    <div
+      {...props}
+      className={cn("rounded-xl", toneClasses[tone], paddingClasses[padding], className)}
+    >
+      {children}
+    </div>
+  );
+}

package/src/checkbox.tsx

@@ -0,0 +1,36 @@
+import type { InputHTMLAttributes } from "react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label: string;
+  description?: string;
+};
+
+export function Checkbox({ label, description, className, id, ...props }: CheckboxProps) {
+  const checkboxId = id ?? label.toLowerCase().replace(/\s+/g, "-");
+
+  return (
+    <label
+      htmlFor={checkboxId}
+      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={checkboxId}
+        type="checkbox"
+        className="mt-1 h-4 w-4 rounded border-(--color-line-strong) accent-(--color-brand-primary)"
+      />
+      <span>
+        <Label htmlFor={checkboxId}>{label}</Label>
+        {description ? (
+          <span className="type-caption mt-1 block text-(--ink-subtle)">{description}</span>
+        ) : null}
+      </span>
+    </label>
+  );
+}