marclayui 0.0.0-stage → 0.3.0

package/src/components/alert/alert.css

@@ -0,0 +1,86 @@
+/* MarclayUI — Alert */
+.mcl-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+  padding: 22px 24px;
+  border-radius: calc(var(--mcl-radius-lg) - 6px);
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-out-sm);
+}
+.mcl-alert-icon {
+  width: 40px;
+  height: 40px;
+  flex: none;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-in-sm);
+  font-weight: 800;
+  font-size: 16px;
+  font-style: normal;
+}
+.mcl-alert-success .mcl-alert-icon {
+  color: var(--mcl-success);
+}
+.mcl-alert-danger .mcl-alert-icon {
+  color: var(--mcl-danger);
+}
+.mcl-alert-warning .mcl-alert-icon {
+  color: var(--mcl-warning);
+}
+.mcl-alert-info .mcl-alert-icon {
+  color: var(--mcl-info);
+}
+[data-theme="dark"] .mcl-alert-success .mcl-alert-icon {
+  color: var(--mcl-success-2);
+}
+[data-theme="dark"] .mcl-alert-danger .mcl-alert-icon {
+  color: var(--mcl-danger-2);
+}
+[data-theme="dark"] .mcl-alert-warning .mcl-alert-icon {
+  color: var(--mcl-warning-2);
+}
+[data-theme="dark"] .mcl-alert-info .mcl-alert-icon {
+  color: var(--mcl-info-2);
+}
+.mcl-alert-content {
+  flex: 1;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--mcl-muted);
+}
+.mcl-alert-title {
+  margin: 0 0 2px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--mcl-ink);
+}
+.mcl-alert-content > :last-child {
+  margin-bottom: 0;
+}
+.mcl-alert-close {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  border: 0;
+  border-radius: 12px;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-out-xs);
+  color: var(--mcl-muted);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+.mcl-alert-close:active {
+  box-shadow: var(--mcl-in-xs);
+}
+.mcl-alert-close:focus-visible {
+  outline: none;
+  box-shadow: var(--mcl-out-xs), 0 0 0 2.5px var(--mcl-ring);
+}

package/src/components/alert/alert.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+export type AlertVariant = "success" | "danger" | "warning" | "info";
+
+const DEFAULT_ICONS: Record<AlertVariant, string> = {
+  success: "✓",
+  danger: "✕",
+  warning: "!",
+  info: "i",
+};
+
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  variant?: AlertVariant;
+  title?: React.ReactNode;
+  /** Overrides the variant's default glyph. */
+  icon?: React.ReactNode;
+  onClose?: () => void;
+}
+
+export function Alert({
+  variant = "info",
+  title,
+  icon,
+  onClose,
+  className = "",
+  children,
+  ...rest
+}: AlertProps) {
+  return (
+    <div className={`mcl-alert mcl-alert-${variant} ${className}`.trim()} role="alert" {...rest}>
+      <span className="mcl-alert-icon" aria-hidden="true">
+        {icon ?? DEFAULT_ICONS[variant]}
+      </span>
+      <div className="mcl-alert-content">
+        {title && <p className="mcl-alert-title">{title}</p>}
+        {children}
+      </div>
+      {onClose && (
+        <button type="button" className="mcl-alert-close" onClick={onClose} aria-label="Dismiss">
+          ✕
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/avatar/avatar.css

@@ -0,0 +1,75 @@
+/* MarclayUI — Avatar */
+.mcl-avatar {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  flex: none;
+  border-radius: var(--mcl-avatar-radius, 44%);
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-out-sm);
+  display: inline-grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--mcl-primary);
+  letter-spacing: 0.02em;
+  overflow: visible;
+}
+.mcl-avatar-img {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+.mcl-avatar-gradient {
+  background: linear-gradient(145deg, var(--mcl-primary-2), var(--mcl-primary));
+  color: var(--mcl-primary-ink);
+}
+.mcl-avatar-xs {
+  width: 28px;
+  height: 28px;
+  font-size: 10.5px;
+}
+.mcl-avatar-sm {
+  width: 36px;
+  height: 36px;
+  font-size: 13px;
+}
+.mcl-avatar-lg {
+  width: 64px;
+  height: 64px;
+  font-size: 21px;
+}
+.mcl-avatar-xl {
+  width: 88px;
+  height: 88px;
+  font-size: 29px;
+}
+.mcl-avatar-status {
+  position: absolute;
+  right: 0;
+  bottom: 1px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px var(--mcl-bg);
+}
+.mcl-avatar-status-online {
+  background: var(--mcl-success);
+}
+.mcl-avatar-status-offline {
+  background: var(--mcl-muted);
+}
+.mcl-avatar-status-busy {
+  background: var(--mcl-danger);
+}
+.mcl-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.mcl-avatar-group > .mcl-avatar {
+  box-shadow: var(--mcl-out-xs);
+}
+.mcl-avatar-group > .mcl-avatar + .mcl-avatar {
+  margin-left: -12px;
+}

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "offline" | "busy";
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+  src?: string;
+  alt?: string;
+  /** Used to derive initials when no src is given. */
+  name?: string;
+  size?: AvatarSize;
+  status?: AvatarStatus;
+  /** Filled clay gradient look. */
+  gradient?: boolean;
+}
+
+function initialsOf(name: string): string {
+  const parts = name.trim().split(/\s+/).slice(0, 2);
+  return parts.map((p) => p[0]?.toUpperCase() ?? "").join("");
+}
+
+export function Avatar({
+  src,
+  alt,
+  name,
+  size = "md",
+  status,
+  gradient = false,
+  className = "",
+  children,
+  ...rest
+}: AvatarProps) {
+  const label = alt ?? (name ? `${name}'s avatar` : "avatar");
+  return (
+    <span
+      className={`mcl-avatar mcl-avatar-${size}${gradient ? " mcl-avatar-gradient" : ""} ${className}`.trim()}
+      role="img"
+      aria-label={label}
+      {...rest}
+    >
+      {src ? (
+        <img src={src} alt="" className="mcl-avatar-img" loading="lazy" decoding="async" />
+      ) : (
+        (children ?? initialsOf(name ?? "??") ?? "")
+      )}
+      {status && <span className={`mcl-avatar-status mcl-avatar-status-${status}`} aria-hidden="true" />}
+    </span>
+  );
+}
+
+export type AvatarGroupProps = React.HTMLAttributes<HTMLSpanElement>;
+
+export function AvatarGroup({ className = "", children, ...rest }: AvatarGroupProps) {
+  return (
+    <span className={`mcl-avatar-group ${className}`.trim()} {...rest}>
+      {children}
+    </span>
+  );
+}

package/src/components/badge/badge.css

@@ -0,0 +1,106 @@
+/* MarclayUI — Badge / Chip
+   Soft badges = tinted TEXT on an inset well:
+     • light mode: base tone (primary/success/danger/info) or the deepened
+       tone for pale tones (secondary/accent/warning)
+     • dark mode: the bright -2 tone for every variant
+   Solid badges = gradient fill with the -ink text (text ON the tone). */
+.mcl-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1.4;
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-in-xs);
+  color: var(--mcl-ink);
+}
+.mcl-badge-primary {
+  color: var(--mcl-primary);
+}
+.mcl-badge-secondary {
+  color: var(--mcl-secondary-deep);
+}
+.mcl-badge-accent {
+  color: var(--mcl-accent-deep);
+}
+.mcl-badge-warning {
+  color: var(--mcl-warning-deep);
+}
+.mcl-badge-success {
+  color: var(--mcl-success);
+}
+.mcl-badge-danger {
+  color: var(--mcl-danger);
+}
+.mcl-badge-info {
+  color: var(--mcl-info);
+}
+
+/* dark mode: everything reads from the brighter -2 tones */
+[data-theme="dark"] .mcl-badge-primary {
+  color: var(--mcl-primary-2);
+}
+[data-theme="dark"] .mcl-badge-secondary {
+  color: var(--mcl-secondary-2);
+}
+[data-theme="dark"] .mcl-badge-accent {
+  color: var(--mcl-accent-2);
+}
+[data-theme="dark"] .mcl-badge-warning {
+  color: var(--mcl-warning-2);
+}
+[data-theme="dark"] .mcl-badge-success {
+  color: var(--mcl-success-2);
+}
+[data-theme="dark"] .mcl-badge-danger {
+  color: var(--mcl-danger-2);
+}
+[data-theme="dark"] .mcl-badge-info {
+  color: var(--mcl-info-2);
+}
+
+.mcl-badge-solid,
+.mcl-badge-solid.mcl-badge-neutral {
+  background: var(--mcl-bg);
+  color: var(--mcl-ink);
+  box-shadow: var(--mcl-out-xs), var(--mcl-in-xs);
+}
+.mcl-badge-solid.mcl-badge-primary {
+  background: linear-gradient(145deg, var(--mcl-primary-2), var(--mcl-primary));
+  color: var(--mcl-primary-ink);
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-p);
+}
+.mcl-badge-solid.mcl-badge-secondary {
+  background: linear-gradient(145deg, var(--mcl-secondary-2), var(--mcl-secondary));
+  color: var(--mcl-secondary-ink);
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-s);
+}
+.mcl-badge-solid.mcl-badge-accent {
+  background: linear-gradient(145deg, var(--mcl-accent-2), var(--mcl-accent));
+  color: var(--mcl-accent-ink);
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-a);
+}
+.mcl-badge-solid.mcl-badge-warning {
+  background: linear-gradient(145deg, var(--mcl-warning-2), var(--mcl-warning));
+  color: var(--mcl-warning-ink);
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-w);
+}
+.mcl-badge-solid.mcl-badge-success {
+  background: linear-gradient(145deg, var(--mcl-success-2), var(--mcl-success));
+  color: var(--mcl-success-ink);
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-c);
+}
+.mcl-badge-solid.mcl-badge-danger {
+  background: linear-gradient(145deg, var(--mcl-danger-2), var(--mcl-danger));
+  color: var(--mcl-danger-ink);
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-d);
+}
+.mcl-badge-solid.mcl-badge-info {
+  background: linear-gradient(145deg, var(--mcl-info-2), var(--mcl-info));
+  color: var(--mcl-info-ink);
+  box-shadow: var(--mcl-out-xs), var(--mcl-clay-i);
+}

package/src/components/badge/badge.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export type BadgeVariant =
+  | "primary"
+  | "secondary"
+  | "accent"
+  | "success"
+  | "danger"
+  | "warning"
+  | "info"
+  | "neutral";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  /** Solid = filled clay gradient; soft (default) = inset well with colored text. */
+  solid?: boolean;
+}
+
+export function Badge({ variant = "neutral", solid = false, className = "", ...rest }: BadgeProps) {
+  return (
+    <span
+      className={`mcl-badge mcl-badge-${variant}${solid ? " mcl-badge-solid" : ""} ${className}`.trim()}
+      {...rest}
+    />
+  );
+}

package/src/components/button/button.css

@@ -0,0 +1,118 @@
+/* MarclayUI — Button */
+.mcl-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 15px 34px;
+  border: 0;
+  border-radius: var(--mcl-radius);
+  background: var(--mcl-bg);
+  color: var(--mcl-ink);
+  box-shadow: var(--mcl-out-sm);
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 15px;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: box-shadow 0.2s, transform 0.2s, filter 0.2s;
+}
+.mcl-btn:hover {
+  transform: translateY(-2px);
+}
+.mcl-btn:active {
+  box-shadow: var(--mcl-in-sm);
+  transform: none;
+}
+.mcl-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+}
+.mcl-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--mcl-out-sm), 0 0 0 2.5px var(--mcl-ring);
+}
+
+.mcl-btn-sm {
+  padding: 10px 22px;
+  font-size: 13.5px;
+  border-radius: calc(var(--mcl-radius) - 4px);
+}
+.mcl-btn-lg {
+  padding: 18px 42px;
+  font-size: 16.5px;
+  border-radius: calc(var(--mcl-radius) + 4px);
+}
+.mcl-btn-block {
+  display: flex;
+  width: 100%;
+}
+
+.mcl-btn-primary {
+  background: linear-gradient(145deg, var(--mcl-primary-2), var(--mcl-primary));
+  color: var(--mcl-primary-ink);
+  box-shadow: 8px 8px 16px var(--mcl-sd), -6px -6px 14px var(--mcl-sl), var(--mcl-clay-p);
+}
+.mcl-btn-primary:active {
+  box-shadow: var(--mcl-in-sm);
+}
+.mcl-btn-secondary {
+  background: linear-gradient(145deg, var(--mcl-secondary-2), var(--mcl-secondary));
+  color: var(--mcl-secondary-ink);
+  box-shadow: 8px 8px 16px var(--mcl-sd), -6px -6px 14px var(--mcl-sl), var(--mcl-clay-s);
+}
+.mcl-btn-secondary:active {
+  box-shadow: var(--mcl-in-sm);
+}
+.mcl-btn-accent {
+  background: linear-gradient(145deg, var(--mcl-accent-2), var(--mcl-accent));
+  color: var(--mcl-accent-ink);
+  box-shadow: 8px 8px 16px var(--mcl-sd), -6px -6px 14px var(--mcl-sl), var(--mcl-clay-a);
+}
+.mcl-btn-accent:active {
+  box-shadow: var(--mcl-in-sm);
+}
+.mcl-btn-danger {
+  background: linear-gradient(145deg, var(--mcl-danger-2), var(--mcl-danger));
+  color: var(--mcl-danger-ink);
+  box-shadow: 8px 8px 16px var(--mcl-sd), -6px -6px 14px var(--mcl-sl), var(--mcl-clay-d);
+}
+.mcl-btn-danger:active {
+  box-shadow: var(--mcl-in-sm);
+}
+.mcl-btn-ghost {
+  background: transparent;
+  box-shadow: none;
+  color: var(--mcl-primary);
+}
+.mcl-btn-ghost:hover {
+  background: var(--mcl-bg);
+  box-shadow: var(--mcl-out-xs);
+}
+.mcl-btn-ghost:active {
+  box-shadow: var(--mcl-in-xs);
+}
+
+.mcl-btn-loading {
+  pointer-events: none;
+}
+.mcl-btn-spinner {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  border-radius: 50%;
+  border: 2.5px solid currentColor;
+  border-top-color: transparent;
+  opacity: 0.9;
+  animation: mcl-spin 0.7s linear infinite;
+}
+@keyframes mcl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/button/button.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+export type ButtonVariant = "primary" | "secondary" | "accent" | "soft" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Shows a spinner and blocks interaction. */
+  loading?: boolean;
+  /** Stretch to fill the container width. */
+  block?: boolean;
+  /** Renders an anchor with button styling — use with Next `<Link>` styling or plain routes. */
+  href?: string;
+}
+
+export const Button = React.forwardRef<HTMLAnchorElement & HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      variant = "soft",
+      size = "md",
+      loading = false,
+      block = false,
+      className = "",
+      disabled,
+      children,
+      type = "button",
+      href,
+      ...rest
+    },
+    ref
+  ) {
+    const cls = [
+      "mcl-btn",
+      `mcl-btn-${variant}`,
+      `mcl-btn-${size}`,
+      block ? "mcl-btn-block" : "",
+      loading ? "mcl-btn-loading" : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    if (href) {
+      return (
+        <a
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          href={href}
+          className={cls}
+          aria-disabled={disabled || undefined}
+          {...(rest as unknown as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+        >
+          {loading && <span className="mcl-btn-spinner" aria-hidden="true" />}
+          <span className="mcl-btn-label">{children}</span>
+        </a>
+      );
+    }
+
+    return (
+      <button
+        ref={ref as React.Ref<HTMLButtonElement>}
+        type={type}
+        className={cls}
+        disabled={disabled || loading}
+        {...rest}
+      >
+        {loading && <span className="mcl-btn-spinner" aria-hidden="true" />}
+        <span className="mcl-btn-label">{children}</span>
+      </button>
+    );
+  }
+);
+
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/** Segmented control: renders children Buttons as flat segments inside an
+ *  inset clay well — the active variant keeps its gradient. */
+export function ButtonGroup({ children, className = "", ...rest }: ButtonGroupProps) {
+  return (
+    <div className={`mcl-btn-group ${className}`.trim()} role="group" {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/components/card/card.css

@@ -0,0 +1,41 @@
+/* MarclayUI — Card */
+.mcl-card {
+  background: var(--mcl-bg);
+  border-radius: var(--mcl-radius-lg);
+  box-shadow: var(--mcl-out);
+  padding: 30px;
+  transition: transform 0.25s;
+}
+.mcl-card-hover:hover {
+  transform: translateY(-5px);
+}
+.mcl-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 1px 0 var(--mcl-hair);
+}
+.mcl-card-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--mcl-ink);
+}
+.mcl-card-body {
+  color: var(--mcl-muted);
+  font-weight: 500;
+  font-size: 14.5px;
+}
+.mcl-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  padding-top: 16px;
+  box-shadow: 0 -1px 0 var(--mcl-hair);
+}

package/src/components/card/card.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Lifts on hover — nice for clickable cards. */
+  hover?: boolean;
+}
+
+export function Card({ hover = false, className = "", ...rest }: CardProps) {
+  return <div className={`mcl-card${hover ? " mcl-card-hover" : ""} ${className}`.trim()} {...rest} />;
+}
+
+export function CardHeader({ className = "", ...rest }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={`mcl-card-header ${className}`.trim()} {...rest} />;
+}
+
+export function CardTitle({ className = "", ...rest }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={`mcl-card-title ${className}`.trim()} {...rest} />;
+}
+
+export function CardBody({ className = "", ...rest }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={`mcl-card-body ${className}`.trim()} {...rest} />;
+}
+
+export function CardFooter({ className = "", ...rest }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={`mcl-card-footer ${className}`.trim()} {...rest} />;
+}