@rahulapgm/skyblue-ui 0.1.0

package/src/chip.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { X } from "lucide-react";
+
+import { cn } from "./utils";
+
+type ChipVariant = "brand" | "neutral" | "success" | "warning" | "error" | "info";
+type ChipSize = "sm" | "md" | "lg";
+
+type SharedChipProps = {
+  children: ReactNode;
+  variant?: ChipVariant;
+  size?: ChipSize;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  onRemove?: () => void;
+  className?: string;
+};
+
+type ChipProps =
+  | (SharedChipProps & ButtonHTMLAttributes<HTMLButtonElement> & { onClick: () => void })
+  | (SharedChipProps & HTMLAttributes<HTMLSpanElement> & { onClick?: undefined });
+
+const chipBaseClasses = "inline-flex items-center gap-2 rounded-full border font-bold transition-colors";
+
+const chipVariantClasses: Record<ChipVariant, string> = {
+  brand:
+    "border-(--color-brand-primary-light) bg-(--color-brand-primary-light) text-(--color-brand-primary)",
+  neutral: "border-(--line-soft) bg-(--surface-card) text-(--foreground)",
+  success:
+    "border-(--color-status-success-light) bg-(--color-status-success-light) text-(--color-status-success)",
+  warning:
+    "border-(--color-status-warning-light) bg-(--color-status-warning-light) text-(--color-status-warning)",
+  error: "border-(--color-status-error-light) bg-(--color-status-error-light) text-(--color-status-error)",
+  info: "border-(--color-status-info-light) bg-(--color-status-info-light) text-(--color-status-info)",
+};
+
+const chipSizeClasses: Record<ChipSize, string> = {
+  sm: "min-h-9 px-3 type-caption",
+  md: "min-h-10 px-4 type-caption",
+  lg: "min-h-11 px-5 type-body",
+};
+
+export function Chip(props: ChipProps) {
+  const {
+    children,
+    variant = "neutral",
+    size = "md",
+    leadingIcon,
+    trailingIcon,
+    onRemove,
+    className,
+    ...rest
+  } = props;
+
+  const content = (
+    <>
+      {leadingIcon ? <span className="flex shrink-0 items-center">{leadingIcon}</span> : null}
+      <span>{children}</span>
+      {trailingIcon ? <span className="flex shrink-0 items-center">{trailingIcon}</span> : null}
+      {onRemove ? (
+        <button
+          type="button"
+          aria-label="Remove chip"
+          onClick={(event) => {
+            event.stopPropagation();
+            onRemove();
+          }}
+          className="ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-black/5 transition-colors hover:bg-black/10"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      ) : null}
+    </>
+  );
+
+  const classes = cn(chipBaseClasses, chipVariantClasses[variant], chipSizeClasses[size], className);
+
+  if ("onClick" in props && props.onClick) {
+    const buttonProps = rest as ButtonHTMLAttributes<HTMLButtonElement>;
+
+    return (
+      <button {...buttonProps} type={buttonProps.type ?? "button"} className={classes}>
+        {content}
+      </button>
+    );
+  }
+
+  const spanProps = rest as HTMLAttributes<HTMLSpanElement>;
+
+  return (
+    <span {...spanProps} className={classes}>
+      {content}
+    </span>
+  );
+}

package/src/cluster.tsx

@@ -0,0 +1,60 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type ClusterGap = "xs" | "sm" | "md" | "lg" | "xl";
+type ClusterAlign = "start" | "center" | "end" | "stretch";
+type ClusterJustify = "start" | "center" | "end" | "between";
+
+type ClusterProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  gap?: ClusterGap;
+  align?: ClusterAlign;
+  justify?: ClusterJustify;
+};
+
+const gapClasses: Record<ClusterGap, string> = {
+  xs: "gutter-cluster-xs",
+  sm: "gutter-cluster-sm",
+  md: "gutter-cluster-md",
+  lg: "gutter-cluster-lg",
+  xl: "gutter-grid-xl",
+};
+
+const alignClasses: Record<ClusterAlign, string> = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+};
+
+const justifyClasses: Record<ClusterJustify, string> = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+};
+
+export function Cluster({
+  children,
+  gap = "md",
+  align = "center",
+  justify = "start",
+  className,
+  ...props
+}: ClusterProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "flex flex-wrap",
+        gapClasses[gap],
+        alignClasses[align],
+        justifyClasses[justify],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/container.tsx

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "./utils";
+
+type ContainerSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "7xl" | "full";
+
+type ContainerProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+  size?: ContainerSize;
+  centered?: boolean;
+};
+
+const sizeClasses: Record<ContainerSize, string> = {
+  sm: "max-w-3xl",
+  md: "max-w-4xl",
+  lg: "max-w-5xl",
+  xl: "max-w-6xl",
+  "2xl": "max-w-[88rem]",
+  "3xl": "max-w-[96rem]",
+  "7xl": "max-w-7xl",
+  full: "max-w-full",
+};
+
+export function Container({
+  children,
+  size = "7xl",
+  centered = true,
+  className,
+  ...props
+}: ContainerProps) {
+  return (
+    <div
+      {...props}
+      className={cn("gutter-page w-full", centered && "mx-auto", sizeClasses[size], className)}
+    >
+      {children}
+    </div>
+  );
+}

package/src/datepicker.tsx

@@ -0,0 +1,59 @@
+import type { InputHTMLAttributes } from "react";
+import { CalendarDays } from "lucide-react";
+
+import { Label } from "./label";
+import { cn } from "./utils";
+
+type DatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+};
+
+export function DatePicker({
+  label,
+  helperText,
+  errorText,
+  className,
+  id,
+  required,
+  ...props
+}: DatePickerProps) {
+  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)",
+        )}
+      >
+        <CalendarDays className="h-4 w-4 text-(--ink-subtle)" />
+        <input
+          {...props}
+          id={inputId}
+          type="date"
+          required={required}
+          className={cn(
+            "type-body min-h-12 w-full bg-transparent text-(--foreground) outline-none",
+            className,
+          )}
+        />
+      </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/drawer.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useId, type ReactNode } from "react";
+import { X } from "lucide-react";
+
+import { Button } from "./button";
+import { cn } from "./utils";
+
+type DrawerSide = "left" | "right";
+
+type DrawerProps = {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  children: ReactNode;
+  side?: DrawerSide;
+  className?: string;
+};
+
+const sideClasses: Record<DrawerSide, string> = {
+  left: "left-0",
+  right: "right-0",
+};
+
+const panelMotion: Record<DrawerSide, { initial: { x: string }; exit: { x: string } }> = {
+  left: {
+    initial: { x: "-100%" },
+    exit: { x: "-100%" },
+  },
+  right: {
+    initial: { x: "100%" },
+    exit: { x: "100%" },
+  },
+};
+
+export function Drawer({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  side = "right",
+  className,
+}: DrawerProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+
+  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]);
+
+  return (
+    <AnimatePresence>
+      {open ? (
+        <motion.div
+          className="fixed inset-0 z-40"
+          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.aside
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            aria-describedby={description ? descriptionId : undefined}
+            initial={panelMotion[side].initial}
+            animate={{ x: 0 }}
+            exit={panelMotion[side].exit}
+            transition={{ duration: 0.28, ease: "easeOut" }}
+            className={cn(
+              "absolute top-0 h-full w-full max-w-xl overflow-y-auto border-(--line-soft) bg-(--surface-card) p-6 shadow-(--shadow-lg)",
+              sideClasses[side],
+              side === "left" ? "border-r" : "border-l",
+              className,
+            )}
+          >
+            <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 drawer"
+                className="min-h-10 px-3"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="mt-6">{children}</div>
+          </motion.aside>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}

package/src/dropdown.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { ChevronDown, Check } from "lucide-react";
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react";
+
+import { cn } from "./utils";
+
+export type DropdownOption = {
+  label: string;
+  value: string;
+  description?: string;
+  disabled?: boolean;
+};
+
+type DropdownProps = {
+  label?: string;
+  placeholder?: string;
+  options: DropdownOption[];
+  value?: string;
+  defaultValue?: string;
+  helperText?: string;
+  fullWidth?: boolean;
+  onValueChange?: (value: string) => void;
+  className?: string;
+};
+
+export function Dropdown({
+  label,
+  placeholder = "Select an option",
+  options,
+  value,
+  defaultValue,
+  helperText,
+  fullWidth = true,
+  onValueChange,
+  className,
+}: DropdownProps) {
+  const id = useId();
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const currentValue = value ?? internalValue;
+  const selectedOption = options.find((option) => option.value === currentValue);
+  const listboxId = `${id}-listbox`;
+  const selectedIndex = options.findIndex((option) => option.value === currentValue && !option.disabled);
+  const firstEnabledIndex = options.findIndex((option) => !option.disabled);
+  const initialActiveIndex =
+    selectedIndex >= 0 ? selectedIndex : firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
+  const safeActiveIndex = options[activeIndex] ? activeIndex : initialActiveIndex;
+
+  function findNextEnabledIndex(startIndex: number, direction: 1 | -1) {
+    if (!options.length) {
+      return 0;
+    }
+
+    let nextIndex = startIndex;
+
+    for (let count = 0; count < options.length; count += 1) {
+      nextIndex = (nextIndex + direction + options.length) % options.length;
+      if (!options[nextIndex]?.disabled) {
+        return nextIndex;
+      }
+    }
+
+    return startIndex;
+  }
+
+  function commitValue(nextValue: string) {
+    if (value === undefined) {
+      setInternalValue(nextValue);
+    }
+
+    onValueChange?.(nextValue);
+    setOpen(false);
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    if (!open && (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      setActiveIndex(initialActiveIndex);
+      setOpen(true);
+      return;
+    }
+
+    if (!open) {
+      return;
+    }
+
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((current) => findNextEnabledIndex(current, 1));
+    }
+
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((current) => findNextEnabledIndex(current, -1));
+    }
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const option = options[safeActiveIndex];
+      if (option && !option.disabled) {
+        commitValue(option.value);
+      }
+    }
+
+    if (event.key === "Tab") {
+      setOpen(false);
+    }
+  }
+
+  return (
+    <div ref={wrapperRef} className={cn("relative", fullWidth && "w-full", className)}>
+      {label ? (
+        <label htmlFor={id} className="type-caption mb-2 block text-(--foreground)">
+          {label}
+        </label>
+      ) : null}
+      <button
+        id={id}
+        type="button"
+        onClick={() => {
+          setActiveIndex(initialActiveIndex);
+          setOpen((current) => !current);
+        }}
+        onKeyDown={handleKeyDown}
+        className="flex min-h-12 w-full items-center justify-between rounded-2xl border border-(--line-soft) bg-(--surface-card) px-4 py-3 text-left shadow-(--shadow-sm) transition-colors hover:border-(--color-line-strong)"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-controls={listboxId}
+      >
+        <span className={cn("type-body", selectedOption ? "text-(--foreground)" : "text-(--ink-subtle)")}>
+          {selectedOption?.label ?? placeholder}
+        </span>
+        <ChevronDown
+          className={cn("h-4 w-4 text-(--ink-subtle) transition-transform", open && "rotate-180")}
+        />
+      </button>
+
+      {open ? (
+        <div className="absolute z-20 mt-2 w-full rounded-3xl border border-(--line-soft) bg-(--surface-card) p-2 shadow-(--shadow-lg)">
+          <div id={listboxId} role="listbox" aria-labelledby={id} className="space-y-1">
+            {options.map((option, index) => {
+              const selected = option.value === currentValue;
+
+              return (
+                <button
+                  key={option.value}
+                  id={`${id}-option-${option.value}`}
+                  type="button"
+                  role="option"
+                  aria-selected={selected}
+                  disabled={option.disabled}
+                  onMouseEnter={() => setActiveIndex(index)}
+                  onClick={() => commitValue(option.value)}
+                  className={cn(
+                    "flex w-full items-start justify-between rounded-2xl px-4 py-3 text-left transition-colors",
+                    index === safeActiveIndex ? "bg-(--color-surface-hover)" : "bg-transparent",
+                    option.disabled && "cursor-not-allowed opacity-50",
+                  )}
+                >
+                  <span>
+                    <span className="type-body block text-(--foreground)">{option.label}</span>
+                    {option.description ? (
+                      <span className="type-caption mt-1 block text-(--ink-subtle)">
+                        {option.description}
+                      </span>
+                    ) : null}
+                  </span>
+                  {selected ? <Check className="mt-1 h-4 w-4 text-(--color-brand-primary)" /> : null}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+
+      {helperText ? <p className="type-caption mt-2 text-(--ink-subtle)">{helperText}</p> : null}
+    </div>
+  );
+}

package/src/feature-card.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+
+import { Card } from "./card";
+import { cn } from "./utils";
+
+type FeatureCardProps = {
+  title: string;
+  description: string;
+  icon?: ReactNode;
+  eyebrow?: string;
+  className?: string;
+};
+
+export function FeatureCard({ title, description, icon, eyebrow, className }: FeatureCardProps) {
+  return (
+    <Card tone="glass" padding="md" className={cn("h-full", className)}>
+      <div className="flex items-start gap-4">
+        {icon ? (
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-(--color-brand-primary-light) text-(--color-brand-primary)">
+            {icon}
+          </div>
+        ) : null}
+
+        <div className="min-w-0 flex-1">
+          {eyebrow ? <p className="type-overline mb-1 text-(--color-brand-primary)">{eyebrow}</p> : null}
+          <h3 className="type-subheading text-(--foreground)">{title}</h3>
+        </div>
+      </div>
+
+      <p className="type-body mt-4 text-(--ink-muted)">{description}</p>
+    </Card>
+  );
+}

package/src/floating-button.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+
+import { Button, type ButtonSize, type ButtonVariant } from "./button";
+import { cn } from "./utils";
+
+type FloatingButtonProps = {
+  label: string;
+  icon?: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+  className?: string;
+};
+
+const positionClasses = {
+  "bottom-right": "bottom-6 right-6",
+  "bottom-left": "bottom-6 left-6",
+  "top-right": "right-6 top-6",
+  "top-left": "left-6 top-6",
+} as const;
+
+export function FloatingButton({
+  label,
+  icon,
+  href,
+  onClick,
+  variant = "primary",
+  size = "lg",
+  position = "bottom-right",
+  className,
+}: FloatingButtonProps) {
+  const classes = cn("fixed z-30 shadow-(--shadow-primary)", positionClasses[position], className);
+
+  if (href) {
+    return (
+      <Button href={href} variant={variant} size={size} className={classes}>
+        {icon}
+        {label}
+      </Button>
+    );
+  }
+
+  return (
+    <Button onClick={onClick} variant={variant} size={size} className={classes}>
+      {icon}
+      {label}
+    </Button>
+  );
+}