@galyan/ui 0.0.1

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@repo/eslint-config/react-internal";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@galyan/ui",
+  "version": "0.0.1",
+  "description": "React UI Components with Galyan Design System",
+  "author": "Saksham Galyan",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Sakshamgalyan/Galyan-UI.git"
+  },
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*/index.ts"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "build": "tsup src/index.ts --dts --format esm,cjs",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/node": "^22.15.3",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "eslint": "^9.39.1",
+    "tsup": "^8.5.1",
+    "typescript": "5.9.2"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.28",
+    "@galyan/theme": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "^2.15.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/src/accordion/Accordion.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import './accordion.css';
+
+export interface AccordionItemDef {
+  id: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItemDef[];
+  /** 'single' = only one open at a time, 'multiple' = multiple can be open */
+  type?: 'single' | 'multiple';
+  defaultOpen?: string | string[];
+  flush?: boolean;
+  className?: string;
+}
+
+function AccordionPanel({ open, children }: { open: boolean; children: React.ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const height = open ? (ref.current?.scrollHeight ?? 0) : 0;
+
+  return (
+    <div
+      className="gy-accordion-panel"
+      style={{ height, transition: `height 250ms cubic-bezier(0.4, 0, 0.2, 1)`, overflow: 'hidden' }}
+      aria-hidden={!open}
+    >
+      <div ref={ref} className="gy-accordion-panel-inner">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function Accordion({ items, type = 'single', defaultOpen, flush = false, className = '' }: AccordionProps) {
+  const initOpen = defaultOpen
+    ? Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen]
+    : [];
+
+  const [openIds, setOpenIds] = useState<Set<string>>(new Set(initOpen));
+
+  const toggle = (id: string) => {
+    setOpenIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        if (type === 'single') next.clear();
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className={`gy-accordion ${className}`}>
+      {items.map((item) => {
+        const isOpen = openIds.has(item.id);
+        return (
+          <div
+            key={item.id}
+            className={`gy-accordion-item ${flush ? 'gy-accordion-item--flush' : ''}`}
+          >
+            <button
+              type="button"
+              className={`gy-accordion-trigger ${isOpen ? 'gy-accordion-trigger--open' : ''}`}
+              onClick={() => !item.disabled && toggle(item.id)}
+              aria-expanded={isOpen}
+              disabled={item.disabled}
+            >
+              <span className="gy-accordion-title">{item.title}</span>
+              <span className={`gy-accordion-icon ${isOpen ? 'gy-accordion-icon--open' : ''}`} aria-hidden="true">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <polyline points="4,6 8,10 12,6" />
+                </svg>
+              </span>
+            </button>
+            <AccordionPanel open={isOpen}>{item.content}</AccordionPanel>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/accordion/accordion.css

@@ -0,0 +1,78 @@
+/* ── Accordion ───────────────────────────────────────────────────────────── */
+.gy-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-1);
+  width: 100%;
+}
+
+.gy-accordion-item {
+  border: 1px solid var(--gy-border);
+  border-radius: var(--gy-radius-lg);
+  overflow: hidden;
+}
+
+.gy-accordion-item--flush {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+}
+
+.gy-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--gy-spacing-4) var(--gy-spacing-4);
+  background: var(--gy-surface);
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  gap: var(--gy-spacing-3);
+  transition: background-color var(--gy-duration-fast);
+}
+
+.gy-accordion-trigger:hover {
+  background: var(--gy-background-subtle);
+}
+
+.gy-accordion-trigger:focus-visible {
+  outline: 2px solid var(--gy-focus-outline);
+  outline-offset: -2px;
+}
+
+.gy-accordion-trigger--open {
+  background: var(--gy-background-subtle);
+}
+
+.gy-accordion-title {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text);
+  flex: 1;
+}
+
+.gy-accordion-icon {
+  flex-shrink: 0;
+  color: var(--gy-text-subtle);
+  transition: transform var(--gy-duration-normal) var(--gy-ease-spring);
+}
+
+.gy-accordion-icon--open {
+  transform: rotate(180deg);
+}
+
+.gy-accordion-panel {
+  overflow: hidden;
+  background: var(--gy-surface);
+}
+
+.gy-accordion-panel-inner {
+  padding: 0 var(--gy-spacing-4) var(--gy-spacing-4);
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text-muted);
+  line-height: var(--gy-line-height-relaxed);
+  border-top: 1px solid var(--gy-border);
+  padding-top: var(--gy-spacing-3);
+}

package/src/accordion/index.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionItemDef } from './Accordion';

package/src/animatednumber/AnimatedNumber.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface AnimatedNumberProps {
+  value: number;
+  duration?: number;
+  format?: (n: number) => string;
+  className?: string;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
+  easing?: 'linear' | 'easeOut' | 'easeInOut';
+}
+
+function easeOut(t: number) { return 1 - Math.pow(1 - t, 3); }
+function easeInOut(t: number) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
+
+export function AnimatedNumber({
+  value,
+  duration = 1000,
+  format,
+  className = '',
+  prefix = '',
+  suffix = '',
+  decimals = 0,
+  easing = 'easeOut',
+}: AnimatedNumberProps) {
+  const [displayed, setDisplayed] = useState(0);
+  const startRef = useRef(0);
+  const startTimeRef = useRef<number | null>(null);
+  const rafRef = useRef<number>(0);
+  const prevValueRef = useRef(0);
+
+  useEffect(() => {
+    startRef.current = prevValueRef.current;
+    startTimeRef.current = null;
+
+    const easeFn = easing === 'linear' ? (t: number) => t : easing === 'easeOut' ? easeOut : easeInOut;
+
+    const animate = (time: number) => {
+      if (!startTimeRef.current) startTimeRef.current = time;
+      const elapsed = time - startTimeRef.current;
+      const t = Math.min(elapsed / duration, 1);
+      const eased = easeFn(t);
+      const current = startRef.current + (value - startRef.current) * eased;
+      setDisplayed(current);
+
+      if (t < 1) {
+        rafRef.current = requestAnimationFrame(animate);
+      } else {
+        prevValueRef.current = value;
+      }
+    };
+
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(animate);
+
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [value, duration, easing]);
+
+  const formatted = format
+    ? format(displayed)
+    : displayed.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+  return (
+    <span className={`gy-animated-number ${className}`} aria-live="polite" aria-atomic="true">
+      {prefix}{formatted}{suffix}
+    </span>
+  );
+}

package/src/animatednumber/index.ts

@@ -0,0 +1,2 @@
+export { AnimatedNumber } from './AnimatedNumber';
+export type { AnimatedNumberProps } from './AnimatedNumber';

package/src/banner/Banner.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { useState } from 'react';
+import './banner.css';
+
+export type BannerVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export type BannerLayout = 'inline' | 'full';
+
+const icons: Record<BannerVariant, React.ReactNode> = {
+  info: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 3a1 1 0 110 2 1 1 0 010-2zm0 3a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 7z"/></svg>
+  ),
+  success: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm3.78 5.78a.75.75 0 00-1.06-1.06L7 9.44 5.28 7.72a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.06 0l4.25-4.25z"/></svg>
+  ),
+  warning: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1.5a.75.75 0 01.65.375l6 10.5A.75.75 0 0114 13.5H2a.75.75 0 01-.65-1.125l6-10.5A.75.75 0 018 1.5zm0 4a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 018 5.5zm0 6.5a1 1 0 110-2 1 1 0 010 2z"/></svg>
+  ),
+  danger: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 3a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 018 4zm0 7.5a1 1 0 110-2 1 1 0 010 2z"/></svg>
+  ),
+  neutral: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 3a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 018 4zm0 7.5a1 1 0 110-2 1 1 0 010 2z"/></svg>
+  ),
+};
+
+export interface BannerProps {
+  variant?: BannerVariant;
+  layout?: BannerLayout;
+  title?: string;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  className?: string;
+}
+
+export function Banner({
+  variant = 'info',
+  layout = 'inline',
+  title,
+  description,
+  icon,
+  dismissible = false,
+  onDismiss,
+  className = '',
+}: BannerProps) {
+  const [dismissed, setDismissed] = useState(false);
+
+  if (dismissed) return null;
+
+  const handleDismiss = () => {
+    setDismissed(true);
+    onDismiss?.();
+  };
+
+  return (
+    <div
+      className={[
+        'gy-banner',
+        `gy-banner--${variant}`,
+        `gy-banner--${layout}`,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      role="alert"
+    >
+      <span className="gy-banner__icon">{icon ?? icons[variant]}</span>
+      <div className="gy-banner__content">
+        {title && <div className="gy-banner__title">{title}</div>}
+        {description && <div className="gy-banner__description">{description}</div>}
+      </div>
+      {dismissible && (
+        <button className="gy-banner__close" onClick={handleDismiss} aria-label="Dismiss">
+          <svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <line x1="1" y1="1" x2="11" y2="11" />
+            <line x1="11" y1="1" x2="1" y2="11" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

package/src/banner/banner.css

@@ -0,0 +1,56 @@
+/* ── Banner ──────────────────────────────────────────────────────────────── */
+.gy-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gy-spacing-3);
+  padding: var(--gy-spacing-3) var(--gy-spacing-4);
+  border-radius: var(--gy-radius-lg);
+  border: 1px solid transparent;
+  position: relative;
+}
+
+.gy-banner--inline { border-radius: var(--gy-radius-lg); }
+.gy-banner--full   { border-radius: 0; }
+
+/* Status variants */
+.gy-banner--info    { background: var(--gy-info-subtle);    border-color: var(--gy-info-muted);    color: var(--gy-info-emphasis); }
+.gy-banner--success { background: var(--gy-success-subtle); border-color: var(--gy-success-muted); color: var(--gy-success-emphasis); }
+.gy-banner--warning { background: var(--gy-warning-subtle); border-color: var(--gy-warning-muted); color: var(--gy-warning-emphasis); }
+.gy-banner--danger  { background: var(--gy-danger-subtle);  border-color: var(--gy-danger-muted);  color: var(--gy-danger-emphasis); }
+.gy-banner--neutral { background: var(--gy-background-muted); border-color: var(--gy-border);       color: var(--gy-text-muted); }
+
+.gy-banner__icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.gy-banner__content { flex: 1; }
+
+.gy-banner__title {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-semibold);
+  line-height: 1.4;
+}
+
+.gy-banner__description {
+  font-size: var(--gy-font-size-sm);
+  line-height: 1.5;
+  opacity: 0.9;
+  margin-top: 2px;
+}
+
+.gy-banner__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--gy-radius-md);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--gy-duration-fast), background var(--gy-duration-fast);
+  color: inherit;
+}
+
+.gy-banner__close:hover { opacity: 1; background: rgba(0,0,0,0.08); }

package/src/banner/index.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner';
+export type { BannerProps, BannerVariant, BannerLayout } from './Banner';

package/src/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import React, { useState } from 'react';
+import './breadcrumb.css';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+  separator?: React.ReactNode;
+  maxItems?: number;
+  className?: string;
+}
+
+const DefaultSeparator = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="4,2 8,6 4,10" />
+  </svg>
+);
+
+export function Breadcrumb({
+  items,
+  separator = <DefaultSeparator />,
+  maxItems,
+  className = '',
+}: BreadcrumbProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  const shouldCollapse = maxItems && items.length > maxItems + 1 && !expanded;
+  const displayed: React.ReactNode[] = [];
+
+  if (shouldCollapse) {
+    // Always show first and last
+    const first = items[0]!;
+    const last = items[items.length - 1]!;
+
+    displayed.push(renderItem(first, false, separator));
+    displayed.push(
+      <li key="ellipsis" className="gy-breadcrumb-item">
+        <span className="gy-breadcrumb-separator">{separator}</span>
+        <button
+          className="gy-breadcrumb-ellipsis"
+          onClick={() => setExpanded(true)}
+          aria-label="Show more breadcrumbs"
+        >
+          •••
+        </button>
+      </li>
+    );
+    displayed.push(renderItem(last, true, separator));
+  } else {
+    items.forEach((item, i) => {
+      displayed.push(renderItem(item, i === items.length - 1, separator, i));
+    });
+  }
+
+  return (
+    <nav aria-label="Breadcrumb">
+      <ol className={`gy-breadcrumb ${className}`}>
+        {displayed}
+      </ol>
+    </nav>
+  );
+}
+
+function renderItem(
+  item: BreadcrumbItem,
+  isCurrent: boolean,
+  separator: React.ReactNode,
+  key?: number
+) {
+  return (
+    <li key={key ?? item.label} className="gy-breadcrumb-item">
+      {key !== 0 && key !== undefined && (
+        <span className="gy-breadcrumb-separator" aria-hidden="true">{separator}</span>
+      )}
+      {isCurrent ? (
+        <span className="gy-breadcrumb-current" aria-current="page">{item.label}</span>
+      ) : (
+        <a
+          className="gy-breadcrumb-link"
+          href={item.href ?? '#'}
+          onClick={item.onClick ? (e) => { e.preventDefault(); item.onClick?.(); } : undefined}
+        >
+          {item.label}
+        </a>
+      )}
+    </li>
+  );
+}

package/src/breadcrumb/breadcrumb.css

@@ -0,0 +1,58 @@
+/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
+.gy-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: var(--gy-font-size-sm);
+}
+
+.gy-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gy-spacing-1-5);
+}
+
+.gy-breadcrumb-link {
+  color: var(--gy-text-muted);
+  text-decoration: none;
+  transition: color var(--gy-duration-fast);
+  border-radius: var(--gy-radius-sm);
+  padding: 1px 2px;
+}
+
+.gy-breadcrumb-link:hover { color: var(--gy-primary); }
+
+.gy-breadcrumb-link:focus-visible {
+  outline: 2px solid var(--gy-focus-outline);
+  outline-offset: 2px;
+}
+
+.gy-breadcrumb-current {
+  color: var(--gy-text);
+  font-weight: var(--gy-font-weight-medium);
+}
+
+.gy-breadcrumb-separator {
+  color: var(--gy-text-subtle);
+  display: flex;
+  align-items: center;
+  user-select: none;
+  margin: 0 var(--gy-spacing-1);
+}
+
+.gy-breadcrumb-ellipsis {
+  color: var(--gy-text-subtle);
+  cursor: pointer;
+  padding: 1px var(--gy-spacing-1);
+  border-radius: var(--gy-radius-sm);
+  transition: color var(--gy-duration-fast), background var(--gy-duration-fast);
+}
+
+.gy-breadcrumb-ellipsis:hover {
+  color: var(--gy-text);
+  background: var(--gy-background-muted);
+}

package/src/breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';

package/src/button/Button.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React, { forwardRef, useCallback, useRef } from 'react';
+import './button.css';
+
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft' | 'link' | 'danger';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  fullWidth?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  /** Render as a different element (e.g. 'a' for links) */
+  as?: React.ElementType;
+  href?: string;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    variant = 'solid',
+    size = 'md',
+    loading = false,
+    fullWidth = false,
+    leftIcon,
+    rightIcon,
+    disabled,
+    children,
+    className = '',
+    onClick,
+    as: Component = 'button',
+    ...rest
+  },
+  ref
+) {
+  const rippleRef = useRef<HTMLSpanElement | null>(null);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      // Ripple effect
+      const btn = e.currentTarget;
+      const rect = btn.getBoundingClientRect();
+      const size = Math.max(rect.width, rect.height);
+      const x = e.clientX - rect.left - size / 2;
+      const y = e.clientY - rect.top - size / 2;
+
+      const ripple = document.createElement('span');
+      ripple.className = 'gy-btn__ripple';
+      ripple.style.width = ripple.style.height = `${size}px`;
+      ripple.style.left = `${x}px`;
+      ripple.style.top = `${y}px`;
+      btn.appendChild(ripple);
+      setTimeout(() => ripple.remove(), 600);
+
+      onClick?.(e);
+    },
+    [onClick]
+  );
+
+  const isDisabled = disabled || loading;
+  const iconOnly = !children && (leftIcon || rightIcon);
+
+  const classes = [
+    'gy-btn',
+    `gy-btn--${variant}`,
+    `gy-btn--${size}`,
+    fullWidth ? 'gy-btn--full' : '',
+    loading ? 'gy-btn--loading' : '',
+    iconOnly ? 'gy-btn--icon-only' : '',
+    isDisabled ? 'gy-btn--disabled' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <Component
+      ref={ref}
+      className={classes}
+      disabled={isDisabled}
+      onClick={handleClick}
+      aria-busy={loading}
+      {...rest}
+    >
+      {loading ? (
+        <span className="gy-btn__spinner" aria-hidden="true" />
+      ) : (
+        leftIcon && <span className="gy-btn__icon gy-btn__icon--left" aria-hidden="true">{leftIcon}</span>
+      )}
+      {children && <span>{children}</span>}
+      {!loading && rightIcon && (
+        <span className="gy-btn__icon gy-btn__icon--right" aria-hidden="true">{rightIcon}</span>
+      )}
+    </Component>
+  );
+});