@galyan/ui 0.0.1

package/src/button/button.css

@@ -0,0 +1,190 @@
+/* ── Button Component ─────────────────────────────────────────────────────── */
+.gy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gy-spacing-2);
+  font-family: var(--gy-font-sans);
+  font-weight: var(--gy-font-weight-medium);
+  letter-spacing: var(--gy-letter-spacing-wide);
+  border-radius: var(--gy-radius-lg);
+  border: 1.5px solid transparent;
+  cursor: pointer;
+  transition:
+    background-color var(--gy-duration-fast) var(--gy-ease-in-out),
+    border-color var(--gy-duration-fast) var(--gy-ease-in-out),
+    color var(--gy-duration-fast) var(--gy-ease-in-out),
+    box-shadow var(--gy-duration-fast) var(--gy-ease-in-out),
+    transform var(--gy-duration-fast) var(--gy-ease-out);
+  user-select: none;
+  white-space: nowrap;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.gy-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--gy-focus-ring);
+}
+
+.gy-btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+/* ── Sizes ────────────────────────────────────────────────────────────────── */
+.gy-btn--xs {
+  height: 1.75rem;
+  padding: 0 var(--gy-spacing-2);
+  font-size: var(--gy-font-size-xs);
+  border-radius: var(--gy-radius-md);
+}
+
+.gy-btn--sm {
+  height: 2rem;
+  padding: 0 var(--gy-spacing-3);
+  font-size: var(--gy-font-size-sm);
+}
+
+.gy-btn--md {
+  height: 2.5rem;
+  padding: 0 var(--gy-spacing-4);
+  font-size: var(--gy-font-size-sm);
+}
+
+.gy-btn--lg {
+  height: 2.75rem;
+  padding: 0 var(--gy-spacing-5);
+  font-size: var(--gy-font-size-md);
+}
+
+.gy-btn--xl {
+  height: 3.25rem;
+  padding: 0 var(--gy-spacing-6);
+  font-size: var(--gy-font-size-lg);
+}
+
+/* ── Variants ─────────────────────────────────────────────────────────────── */
+
+/* Solid */
+.gy-btn--solid {
+  background-color: var(--gy-primary);
+  border-color: var(--gy-primary);
+  color: var(--gy-primary-fg);
+}
+
+.gy-btn--solid:hover:not(:disabled) {
+  background-color: var(--gy-primary-hover);
+  border-color: var(--gy-primary-hover);
+}
+
+.gy-btn--solid:active:not(:disabled) {
+  background-color: var(--gy-primary-active);
+}
+
+/* Outline */
+.gy-btn--outline {
+  background-color: transparent;
+  border-color: var(--gy-primary);
+  color: var(--gy-primary);
+}
+
+.gy-btn--outline:hover:not(:disabled) {
+  background-color: var(--gy-primary-subtle);
+}
+
+/* Ghost */
+.gy-btn--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--gy-primary);
+}
+
+.gy-btn--ghost:hover:not(:disabled) {
+  background-color: var(--gy-primary-subtle);
+}
+
+/* Soft */
+.gy-btn--soft {
+  background-color: var(--gy-primary-subtle);
+  border-color: transparent;
+  color: var(--gy-primary-hover);
+}
+
+.gy-btn--soft:hover:not(:disabled) {
+  background-color: var(--gy-primary-muted);
+}
+
+/* Link */
+.gy-btn--link {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--gy-text-link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  height: auto;
+  padding: 0;
+}
+
+.gy-btn--link:hover:not(:disabled) {
+  color: var(--gy-text-link-hover);
+}
+
+/* Danger variant */
+.gy-btn--danger {
+  background-color: var(--gy-danger);
+  border-color: var(--gy-danger);
+  color: var(--gy-danger-fg);
+}
+
+.gy-btn--danger:hover:not(:disabled) {
+  background-color: var(--gy-danger-emphasis);
+  border-color: var(--gy-danger-emphasis);
+}
+
+/* ── Full width ──────────────────────────────────────────────────────────── */
+.gy-btn--full {
+  width: 100%;
+}
+
+/* ── Disabled ────────────────────────────────────────────────────────────── */
+.gy-btn:disabled,
+.gy-btn--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transform: none !important;
+}
+
+/* ── Loading ─────────────────────────────────────────────────────────────── */
+.gy-btn--loading {
+  cursor: wait;
+  pointer-events: none;
+}
+
+.gy-btn__spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: gy-spin var(--gy-duration-slower) linear infinite;
+  flex-shrink: 0;
+}
+
+/* ── Icon-only ──────────────────────────────────────────────────────────── */
+.gy-btn--icon-only.gy-btn--xs  { width: 1.75rem; padding: 0; }
+.gy-btn--icon-only.gy-btn--sm  { width: 2rem;    padding: 0; }
+.gy-btn--icon-only.gy-btn--md  { width: 2.5rem;  padding: 0; }
+.gy-btn--icon-only.gy-btn--lg  { width: 2.75rem; padding: 0; }
+.gy-btn--icon-only.gy-btn--xl  { width: 3.25rem; padding: 0; }
+
+/* ── Ripple effect ───────────────────────────────────────────────────────── */
+.gy-btn__ripple {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(0);
+  animation: gy-ripple 0.6s linear;
+  pointer-events: none;
+}

package/src/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';

package/src/button.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { ReactNode } from "react";
+
+interface ButtonProps {
+  children: ReactNode;
+  className?: string;
+  appName: string;
+}
+
+export const Button = ({ children, className, appName }: ButtonProps) => {
+  return (
+    <button
+      className={className}
+      onClick={() => alert(`Hello from your ${appName} app!`)}
+    >
+      {children}
+    </button>
+  );
+};

package/src/calendar/Calendar.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import React, { useState } from 'react';
+import './calendar.css';
+
+export interface CalendarProps {
+  mode?: 'single' | 'range';
+  value?: Date | [Date, Date];
+  onChange?: (date: Date | [Date, Date]) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const getDaysInMonth = (year: number, month: number) => new Date(year, month + 1, 0).getDate();
+const getFirstDay = (year: number, month: number) => new Date(year, month, 1).getDay();
+
+const isSameDay = (d1?: Date, d2?: Date) => {
+  if (!d1 || !d2) return false;
+  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+};
+
+const isBetween = (d: Date, start?: Date, end?: Date) => {
+  if (!start || !end) return false;
+  return d > start && d < end;
+};
+
+export function Calendar({ mode = 'single', value, onChange, minDate, maxDate, className = '', style }: CalendarProps) {
+  const [view, setView] = useState<'days' | 'months' | 'years'>('days');
+  const [current, setCurrent] = useState(() => {
+    if (Array.isArray(value)) return value[0] ?? new Date();
+    return value ?? new Date();
+  });
+  const [hoverDate, setHoverDate] = useState<Date | null>(null);
+
+  const [selStart, selEnd] = Array.isArray(value) ? value : [value, undefined];
+
+  const y = current.getFullYear();
+  const m = current.getMonth();
+
+  const prevMonth = () => setCurrent(new Date(y, m - 1, 1));
+  const nextMonth = () => setCurrent(new Date(y, m + 1, 1));
+  const prevYear = () => setCurrent(new Date(y - 1, m, 1));
+  const nextYear = () => setCurrent(new Date(y + 1, m, 1));
+  const prevDecade = () => setCurrent(new Date(y - 10, m, 1));
+  const nextDecade = () => setCurrent(new Date(y + 10, m, 1));
+
+  const daysInMonth = getDaysInMonth(y, m);
+  const firstDay = getFirstDay(y, m);
+  const daysInPrev = getDaysInMonth(y, m - 1);
+
+  const handleSelectDay = (date: Date) => {
+    if (mode === 'single') {
+      onChange?.(date);
+    } else {
+      if (!selStart || (selStart && selEnd)) {
+        onChange?.([date, date] as any); // Reset to start
+      } else {
+        const start = date < selStart ? date : selStart;
+        const end = date < selStart ? selStart : date;
+        onChange?.([start, end]);
+      }
+    }
+  };
+
+  const renderDays = () => {
+    const days = [];
+    const today = new Date();
+
+    // Prev month
+    for (let i = firstDay - 1; i >= 0; i--) {
+      const d = new Date(y, m - 1, daysInPrev - i);
+      days.push(<Day key={`prev-${i}`} date={d} outside />);
+    }
+    // Current month
+    for (let i = 1; i <= daysInMonth; i++) {
+      const d = new Date(y, m, i);
+      days.push(<Day key={`curr-${i}`} date={d} isToday={isSameDay(d, today)} />);
+    }
+    // Next month
+    const total = days.length;
+    for (let i = 1; i <= 42 - total; i++) {
+      const d = new Date(y, m + 1, i);
+      days.push(<Day key={`next-${i}`} date={d} outside />);
+    }
+
+    return days;
+  };
+
+  const Day = ({ date, outside, isToday }: { date: Date; outside?: boolean; isToday?: boolean }) => {
+    const disabled = (minDate && date < minDate) || (maxDate && date > maxDate);
+    const selected = isSameDay(date, selStart) || isSameDay(date, selEnd);
+    const inRange = mode === 'range' && isBetween(date, selStart, selEnd ?? hoverDate ?? undefined);
+    const isStart = mode === 'range' && isSameDay(date, selStart);
+    const isEnd = mode === 'range' && isSameDay(date, selEnd ?? hoverDate ?? undefined) && date > (selStart as Date);
+
+    const cls = [
+      'gy-calendar-day',
+      outside ? 'gy-calendar-day--outside' : '',
+      isToday ? 'gy-calendar-day--today' : '',
+      selected ? 'gy-calendar-day--selected' : '',
+      inRange ? 'gy-calendar-day--range-in' : '',
+      isStart && (selEnd ?? hoverDate) ? 'gy-calendar-day--range-start' : '',
+      isEnd ? 'gy-calendar-day--range-end' : '',
+      disabled ? 'gy-calendar-day--disabled' : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <button
+        type="button"
+        className={cls}
+        disabled={disabled}
+        onClick={() => handleSelectDay(date)}
+        onMouseEnter={() => mode === 'range' && selStart && !selEnd ? setHoverDate(date) : null}
+      >
+        {date.getDate()}
+      </button>
+    );
+  };
+
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  const monthName = current.toLocaleString('default', { month: 'long' });
+
+  return (
+    <div className={`gy-calendar ${className}`} style={style}>
+      {view === 'days' && (
+        <>
+          <div className="gy-calendar-header">
+            <button className="gy-calendar-nav" onClick={prevMonth}>‹</button>
+            <div className="gy-calendar-title" onClick={() => setView('months')}>
+              {monthName} {y}
+            </div>
+            <button className="gy-calendar-nav" onClick={nextMonth}>›</button>
+          </div>
+          <div className="gy-calendar-grid">
+            {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map((d) => (
+              <div key={d} className="gy-calendar-weekday">{d}</div>
+            ))}
+            {renderDays()}
+          </div>
+        </>
+      )}
+
+      {view === 'months' && (
+        <>
+          <div className="gy-calendar-header">
+            <button className="gy-calendar-nav" onClick={prevYear}>‹</button>
+            <div className="gy-calendar-title" onClick={() => setView('years')}>{y}</div>
+            <button className="gy-calendar-nav" onClick={nextYear}>›</button>
+          </div>
+          <div className="gy-calendar-picker-grid">
+            {months.map((mon, i) => (
+              <button
+                key={mon}
+                className={`gy-calendar-picker-item ${m === i ? 'gy-calendar-picker-item--selected' : ''}`}
+                onClick={() => { setCurrent(new Date(y, i, 1)); setView('days'); }}
+              >
+                {mon}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+
+      {view === 'years' && (
+        <>
+          <div className="gy-calendar-header">
+            <button className="gy-calendar-nav" onClick={prevDecade}>‹</button>
+            <div className="gy-calendar-title">{y - (y % 10)} - {y - (y % 10) + 9}</div>
+            <button className="gy-calendar-nav" onClick={nextDecade}>›</button>
+          </div>
+          <div className="gy-calendar-picker-grid">
+            {Array.from({ length: 12 }, (_, i) => y - (y % 10) - 1 + i).map((year) => (
+              <button
+                key={year}
+                className={`gy-calendar-picker-item ${y === year ? 'gy-calendar-picker-item--selected' : ''}`}
+                onClick={() => { setCurrent(new Date(year, m, 1)); setView('months'); }}
+              >
+                {year}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/calendar/calendar.css

@@ -0,0 +1,142 @@
+/* ── Calendar ────────────────────────────────────────────────────────────── */
+.gy-calendar {
+  display: inline-flex;
+  flex-direction: column;
+  background: var(--gy-surface);
+  border: 1px solid var(--gy-border);
+  border-radius: var(--gy-radius-xl);
+  padding: var(--gy-spacing-4);
+  width: 320px;
+}
+
+.gy-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--gy-spacing-4);
+}
+
+.gy-calendar-title {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text);
+  cursor: pointer;
+  padding: var(--gy-spacing-1) var(--gy-spacing-2);
+  border-radius: var(--gy-radius-md);
+  transition: background var(--gy-duration-fast);
+}
+
+.gy-calendar-title:hover {
+  background: var(--gy-background-muted);
+}
+
+.gy-calendar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--gy-radius-md);
+  background: none;
+  border: 1px solid transparent;
+  color: var(--gy-text-muted);
+  cursor: pointer;
+  transition: background var(--gy-duration-fast), color var(--gy-duration-fast);
+}
+
+.gy-calendar-nav:hover {
+  background: var(--gy-background-muted);
+  color: var(--gy-text);
+}
+
+/* Grid */
+.gy-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  text-align: center;
+}
+
+.gy-calendar-weekday {
+  font-size: var(--gy-font-size-xs);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text-subtle);
+  padding-bottom: var(--gy-spacing-2);
+}
+
+.gy-calendar-day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text);
+  background: none;
+  border: none;
+  border-radius: var(--gy-radius-full);
+  cursor: pointer;
+  transition: background var(--gy-duration-fast), color var(--gy-duration-fast);
+}
+
+.gy-calendar-day:hover:not(.gy-calendar-day--disabled):not(.gy-calendar-day--selected) {
+  background: var(--gy-background-muted);
+}
+
+.gy-calendar-day--outside {
+  color: var(--gy-text-subtle);
+  opacity: 0.5;
+}
+
+.gy-calendar-day--today {
+  color: var(--gy-primary);
+  font-weight: var(--gy-font-weight-bold);
+}
+
+.gy-calendar-day--selected {
+  background: var(--gy-primary);
+  color: var(--gy-primary-fg);
+  font-weight: var(--gy-font-weight-semibold);
+}
+
+.gy-calendar-day--range-in {
+  background: var(--gy-primary-subtle);
+  border-radius: 0;
+  color: var(--gy-text);
+}
+
+.gy-calendar-day--range-start {
+  border-radius: var(--gy-radius-full) 0 0 var(--gy-radius-full);
+}
+
+.gy-calendar-day--range-end {
+  border-radius: 0 var(--gy-radius-full) var(--gy-radius-full) 0;
+}
+
+.gy-calendar-day--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Month/Year Picker */
+.gy-calendar-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--gy-spacing-2);
+}
+
+.gy-calendar-picker-item {
+  padding: var(--gy-spacing-2) 0;
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text);
+  background: none;
+  border: none;
+  border-radius: var(--gy-radius-lg);
+  cursor: pointer;
+  transition: background var(--gy-duration-fast);
+}
+
+.gy-calendar-picker-item:hover { background: var(--gy-background-muted); }
+.gy-calendar-picker-item--selected {
+  background: var(--gy-primary);
+  color: var(--gy-primary-fg);
+}

package/src/calendar/index.ts

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

package/src/card/Card.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React from 'react';
+import './card.css';
+
+// ── Card ─────────────────────────────────────────────────────────────────────
+export type CardVariant = 'default' | 'elevated' | 'outlined' | 'filled';
+export type CardSize = 'sm' | 'md' | 'lg';
+
+export interface CardProps {
+  variant?: CardVariant;
+  size?: CardSize;
+  hoverable?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+  style?: React.CSSProperties;
+}
+
+export function Card({ variant = 'default', size = 'md', hoverable = false, className = '', children, onClick, style }: CardProps) {
+  return (
+    <div
+      className={[
+        'gy-card',
+        variant !== 'default' ? `gy-card--${variant}` : '',
+        size !== 'md' ? `gy-card--${size}` : '',
+        hoverable ? 'gy-card--hoverable' : '',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      onClick={onClick}
+      style={style}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ children, className = '' }: { children?: React.ReactNode; className?: string }) {
+  return <div className={`gy-card-header ${className}`}>{children}</div>;
+}
+
+export function CardBody({ children, size, className = '' }: { children?: React.ReactNode; size?: CardSize; className?: string }) {
+  return (
+    <div className={['gy-card-body', size ? `gy-card-body--${size}` : '', className].filter(Boolean).join(' ')}>
+      {children}
+    </div>
+  );
+}
+
+export function CardFooter({ children, className = '' }: { children?: React.ReactNode; className?: string }) {
+  return <div className={`gy-card-footer ${className}`}>{children}</div>;
+}
+
+// ── CardInfo ──────────────────────────────────────────────────────────────────
+export interface CardInfoProps {
+  title: string;
+  value: string | number;
+  icon?: React.ReactNode;
+  trend?: { value: number; label?: string };
+  footer?: string;
+  className?: string;
+}
+
+export function CardInfo({ title, value, icon, trend, footer, className = '' }: CardInfoProps) {
+  const isUp = trend ? trend.value >= 0 : null;
+  return (
+    <div className={`gy-card-info ${className}`}>
+      <div className="gy-card-info__header">
+        <span className="gy-card-info__title">{title}</span>
+        {icon && <span className="gy-card-info__icon">{icon}</span>}
+      </div>
+      <div className="gy-card-info__value">{value}</div>
+      {trend && (
+        <div>
+          <span className={`gy-card-info__trend gy-card-info__trend--${isUp ? 'up' : 'down'}`}>
+            {isUp ? '↑' : '↓'} {Math.abs(trend.value)}%
+            {trend.label && ` ${trend.label}`}
+          </span>
+        </div>
+      )}
+      {footer && <div className="gy-card-info__footer">{footer}</div>}
+    </div>
+  );
+}