@galyan/ui 0.0.1 → 0.0.2

package/package.json

@@ -1,43 +1,74 @@
 {
   "name": "@galyan/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React UI Components with Galyan Design System",
   "author": "Saksham Galyan",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+
   "repository": {
     "type": "git",
-    "url": "https://github.com/Sakshamgalyan/Galyan-UI.git"
+    "url": "git+https://github.com/Sakshamgalyan/Galyan-UI.git"
   },
-  "license": "MIT",
-  "private": false,
-  "type": "module",
+
+  "homepage": "https://github.com/Sakshamgalyan/Galyan-UI",
+
+  "bugs": {
+    "url": "https://github.com/Sakshamgalyan/Galyan-UI/issues"
+  },
+
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+
   "exports": {
-    ".": "./src/index.ts",
-    "./*": "./src/*/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+
+  "sideEffects": [
+    "*.css"
+  ],
+
+  "publishConfig": {
+    "access": "public"
   },
+
   "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
     "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",
+    "@galyan/theme": "^0.0.1",
     "recharts": "^2.15.3"
   },
+
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
+  },
+
+  "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"
   }
-}
+}

package/.turbo/turbo-build.log

@@ -1,20 +0,0 @@
-
-> @galyan/ui@0.0.1 build C:\Project\easyLife\galyan\packages\ui
-> tsup src/index.ts --dts --format esm,cjs
-
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.5.1
-CLI Target: es2022
-ESM Build start
-CJS Build start
-CJS dist\index.cjs 98.06 KB
-CJS dist\index.css 59.93 KB
-CJS ⚡️ Build success in 401ms
-ESM dist\index.css 59.93 KB
-ESM dist\index.js  86.43 KB
-ESM ⚡️ Build success in 403ms
-DTS Build start
-DTS ⚡️ Build success in 4423ms
-DTS dist\index.d.ts  17.81 KB
-DTS dist\index.d.cts 17.81 KB

package/eslint.config.mjs

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

package/src/accordion/Accordion.tsx

@@ -1,88 +0,0 @@
-'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

@@ -1,78 +0,0 @@
-/* ── 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

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

package/src/animatednumber/AnimatedNumber.tsx

@@ -1,71 +0,0 @@
-'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

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

package/src/banner/Banner.tsx

@@ -1,84 +0,0 @@
-'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

@@ -1,56 +0,0 @@
-/* ── 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

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

package/src/breadcrumb/Breadcrumb.tsx

@@ -1,94 +0,0 @@
-'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

@@ -1,58 +0,0 @@
-/* ── 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

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