willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/SourceCard/index.css

@@ -0,0 +1,177 @@
+.willa-source-card {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 0.72rem;
+  border: 1px solid var(--willa-source-card-border);
+  border-radius: 0.9rem;
+  background: var(--willa-source-card-bg);
+  box-shadow: var(--willa-source-card-shadow);
+  color: var(--willa-source-card-text);
+  font-family: var(--willa-body-font);
+  text-align: left;
+  text-decoration: none;
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+
+.willa-source-card--sm {
+  gap: 0.58rem;
+  border-radius: 0.78rem;
+  padding: 0.62rem;
+}
+
+.willa-source-card--md {
+  padding: 0.78rem;
+}
+
+.willa-source-card--solid {
+  background: var(--willa-source-card-solid-bg);
+}
+
+.willa-source-card--interactive {
+  appearance: none;
+  cursor: pointer;
+}
+
+.willa-source-card--interactive:hover {
+  border-color: var(--willa-source-card-border-hover);
+  box-shadow: var(--willa-source-card-shadow-hover);
+  transform: translateY(-1px);
+}
+
+.willa-source-card--interactive:focus-visible {
+  outline: 2px solid var(--willa-source-card-ring);
+  outline-offset: 2px;
+}
+
+.willa-source-card--selected {
+  border-color: var(--willa-source-card-selected-border);
+  background: var(--willa-source-card-selected-bg);
+}
+
+.willa-source-card-mark {
+  display: inline-grid;
+  box-sizing: border-box;
+  width: 2rem;
+  height: 2rem;
+  flex: none;
+  place-items: center;
+  border: 1px solid var(--willa-source-card-mark-border);
+  border-radius: 0.68rem;
+  background: var(--willa-source-card-mark-bg);
+  color: var(--willa-source-card-mark-text);
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.willa-source-card-mark svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.willa-source-card-body {
+  display: grid;
+  min-width: 0;
+  gap: 0.34rem;
+}
+
+.willa-source-card-header {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.7rem;
+}
+
+.willa-source-card-title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--willa-source-card-title);
+  font-size: 0.92rem;
+  font-weight: 650;
+  line-height: 1.42;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-source-card-meta {
+  flex: none;
+  color: var(--willa-source-card-muted);
+  font-size: 0.74rem;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.willa-source-card-description {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--willa-source-card-text);
+  font-size: 0.82rem;
+  line-height: 1.56;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.willa-source-card-footer {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.42rem;
+  color: var(--willa-source-card-muted);
+  font-size: 0.76rem;
+  line-height: 1.4;
+}
+
+.willa-source-card-source,
+.willa-source-card-url {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-source-card-source {
+  flex: none;
+  color: var(--willa-source-card-source);
+  font-weight: 600;
+}
+
+.willa-source-card-url {
+  flex: 1 1 auto;
+}
+
+@media (max-width: 767px) {
+  .willa-source-card {
+    gap: 0.6rem;
+  }
+
+  .willa-source-card--md {
+    padding: 0.68rem;
+  }
+
+  .willa-source-card-mark {
+    width: 1.8rem;
+    height: 1.8rem;
+    border-radius: 0.62rem;
+  }
+
+  .willa-source-card-header {
+    display: grid;
+    gap: 0.2rem;
+  }
+
+  .willa-source-card-title {
+    white-space: normal;
+  }
+
+  .willa-source-card-meta {
+    white-space: normal;
+  }
+}

package/packages/willa-content/src/components/SourceCard/index.tsx

@@ -0,0 +1,108 @@
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import classNames from "classnames";
+
+export type SourceCardSize = "sm" | "md";
+export type SourceCardVariant = "default" | "solid";
+
+export type SourceCardProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  source?: ReactNode;
+  url?: string;
+  meta?: ReactNode;
+  icon?: ReactNode;
+  index?: ReactNode;
+  href?: string;
+  target?: string;
+  selected?: boolean;
+  size?: SourceCardSize;
+  variant?: SourceCardVariant;
+  onOpen?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+} & Omit<ComponentPropsWithoutRef<"article">, "children" | "title" | "onClick">;
+
+export function SourceCard({
+  title,
+  description,
+  source,
+  url,
+  meta,
+  icon,
+  index,
+  href,
+  target,
+  selected = false,
+  size = "md",
+  variant = "default",
+  onOpen,
+  className,
+  ...props
+}: SourceCardProps) {
+  const content = (
+    <>
+      <span className="willa-source-card-mark" aria-hidden="true">
+        {icon ?? index ?? "S"}
+      </span>
+      <span className="willa-source-card-body">
+        <span className="willa-source-card-header">
+          <span className="willa-source-card-title">{title}</span>
+          {meta ? <span className="willa-source-card-meta">{meta}</span> : null}
+        </span>
+        {description ? (
+          <span className="willa-source-card-description">{description}</span>
+        ) : null}
+        {source || url ? (
+          <span className="willa-source-card-footer">
+            {source ? (
+              <span className="willa-source-card-source">{source}</span>
+            ) : null}
+            {url ? <span className="willa-source-card-url">{url}</span> : null}
+          </span>
+        ) : null}
+      </span>
+    </>
+  );
+  const rootClassName = classNames(
+    "willa-source-card",
+    `willa-source-card--${size}`,
+    `willa-source-card--${variant}`,
+    selected && "willa-source-card--selected",
+    (href || onOpen) && "willa-source-card--interactive",
+    className,
+  );
+
+  if (href) {
+    return (
+      <a
+        {...props}
+        className={rootClassName}
+        href={href}
+        target={target}
+        rel={target === "_blank" ? "noreferrer" : undefined}
+        onClick={onOpen}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  if (onOpen) {
+    return (
+      <button
+        {...props}
+        className={rootClassName}
+        type="button"
+        onClick={onOpen}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <article {...props} className={rootClassName}>
+      {content}
+    </article>
+  );
+}
+
+SourceCard.displayName = "SourceCard";

package/packages/willa-content/src/components/Spinner/index.css

@@ -0,0 +1,124 @@
+.willa-spinner {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  color: var(--willa-spinner-color);
+  font-family: var(--willa-body-font);
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.willa-spinner--inline {
+  flex-direction: row;
+}
+
+.willa-spinner--block {
+  flex-direction: column;
+}
+
+.willa-spinner--xs {
+  gap: 0.32rem;
+  font-size: 0.72rem;
+}
+
+.willa-spinner--sm {
+  gap: 0.4rem;
+  font-size: 0.82rem;
+}
+
+.willa-spinner--md {
+  gap: 0.48rem;
+  font-size: 0.92rem;
+}
+
+.willa-spinner--lg {
+  gap: 0.58rem;
+  font-size: 1rem;
+}
+
+.willa-spinner-indicator {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  border: var(--willa-spinner-stroke-width) solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  opacity: 0.9;
+  animation: willa-spinner-rotate 720ms linear infinite;
+}
+
+.willa-spinner--xs .willa-spinner-indicator {
+  width: 0.82rem;
+  height: 0.82rem;
+  --willa-spinner-stroke-width: 1.5px;
+}
+
+.willa-spinner--sm .willa-spinner-indicator {
+  width: 1rem;
+  height: 1rem;
+  --willa-spinner-stroke-width: 2px;
+}
+
+.willa-spinner--md .willa-spinner-indicator {
+  width: 1.22rem;
+  height: 1.22rem;
+  --willa-spinner-stroke-width: 2px;
+}
+
+.willa-spinner--lg .willa-spinner-indicator {
+  width: 1.55rem;
+  height: 1.55rem;
+  --willa-spinner-stroke-width: 2.5px;
+}
+
+.willa-spinner--default {
+  --willa-spinner-color: var(--willa-spinner-default);
+}
+
+.willa-spinner--neutral {
+  --willa-spinner-color: var(--willa-spinner-neutral);
+}
+
+.willa-spinner--success {
+  --willa-spinner-color: var(--willa-spinner-success);
+}
+
+.willa-spinner--warning {
+  --willa-spinner-color: var(--willa-spinner-warning);
+}
+
+.willa-spinner--danger {
+  --willa-spinner-color: var(--willa-spinner-danger);
+}
+
+.willa-spinner-label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--willa-spinner-label);
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-spinner-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes willa-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .willa-spinner-indicator {
+    animation-duration: 1.4s;
+  }
+}

package/packages/willa-content/src/components/Spinner/index.tsx

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+export type SpinnerSize = "xs" | "sm" | "md" | "lg";
+export type SpinnerTone =
+  | "default"
+  | "neutral"
+  | "success"
+  | "warning"
+  | "danger";
+export type SpinnerLabelPosition = "inline" | "block";
+
+export type SpinnerProps = {
+  label?: ReactNode;
+  size?: SpinnerSize;
+  tone?: SpinnerTone;
+  labelPosition?: SpinnerLabelPosition;
+  className?: string;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+
+export function Spinner(props: SpinnerProps) {
+  const {
+    label = "加载中",
+    size = "md",
+    tone = "default",
+    labelPosition = "inline",
+    className,
+    ...spinnerProps
+  } = props;
+  const hasVisibleLabel = label !== undefined && label !== null && label !== "";
+
+  return (
+    <span
+      {...spinnerProps}
+      className={classNames(
+        "willa-spinner",
+        `willa-spinner--${size}`,
+        `willa-spinner--${tone}`,
+        `willa-spinner--${labelPosition}`,
+        className,
+      )}
+      role="status"
+      aria-live="polite"
+    >
+      <span className="willa-spinner-indicator" aria-hidden="true" />
+      {hasVisibleLabel ? (
+        <span className="willa-spinner-label">{label}</span>
+      ) : (
+        <span className="willa-spinner-sr-only">加载中</span>
+      )}
+    </span>
+  );
+}
+
+Spinner.displayName = "Spinner";

package/packages/willa-content/src/components/Statistic/index.css

@@ -0,0 +1,135 @@
+.willa-statistic {
+  display: grid;
+  gap: 0.65rem;
+  min-width: 0;
+  color: var(--willa-statistic-text);
+  background: var(--willa-statistic-bg);
+  border: 1px solid var(--willa-statistic-border);
+  border-radius: 0.75rem;
+}
+
+.willa-statistic--sm {
+  padding: 0.75rem;
+}
+
+.willa-statistic--md {
+  padding: 0.95rem;
+}
+
+.willa-statistic--lg {
+  padding: 1.1rem;
+}
+
+.willa-statistic__header {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.willa-statistic__icon {
+  display: inline-grid;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--willa-statistic-accent);
+  background: var(--willa-statistic-accent-bg);
+  border-radius: 0.4rem;
+}
+
+.willa-statistic__label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--willa-statistic-muted);
+  font-size: 0.82rem;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-statistic__value {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  min-width: 0;
+  color: var(--willa-statistic-title);
+}
+
+.willa-statistic__number {
+  overflow: hidden;
+  font-size: 1.75rem;
+  font-weight: 780;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-statistic--sm .willa-statistic__number {
+  font-size: 1.3rem;
+}
+
+.willa-statistic--lg .willa-statistic__number {
+  font-size: 2.2rem;
+}
+
+.willa-statistic__prefix,
+.willa-statistic__suffix {
+  color: var(--willa-statistic-muted);
+  font-size: 0.86rem;
+  font-weight: 650;
+}
+
+.willa-statistic__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.5rem;
+  align-items: center;
+  color: var(--willa-statistic-muted);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.willa-statistic__trend {
+  font-weight: 700;
+}
+
+.willa-statistic__trend--up {
+  color: var(--willa-statistic-success);
+}
+
+.willa-statistic__trend--down {
+  color: var(--willa-statistic-danger);
+}
+
+.willa-statistic__trend--neutral {
+  color: var(--willa-statistic-muted);
+}
+
+.willa-statistic--info,
+.willa-statistic--success,
+.willa-statistic--warning,
+.willa-statistic--danger {
+  --willa-statistic-accent: var(--willa-statistic-tone-accent);
+  --willa-statistic-accent-bg: var(--willa-statistic-tone-bg);
+}
+
+.willa-statistic--info {
+  --willa-statistic-tone-accent: var(--willa-statistic-info);
+  --willa-statistic-tone-bg: var(--willa-statistic-info-bg);
+}
+
+.willa-statistic--success {
+  --willa-statistic-tone-accent: var(--willa-statistic-success);
+  --willa-statistic-tone-bg: var(--willa-statistic-success-bg);
+}
+
+.willa-statistic--warning {
+  --willa-statistic-tone-accent: var(--willa-statistic-warning);
+  --willa-statistic-tone-bg: var(--willa-statistic-warning-bg);
+}
+
+.willa-statistic--danger {
+  --willa-statistic-tone-accent: var(--willa-statistic-danger);
+  --willa-statistic-tone-bg: var(--willa-statistic-danger-bg);
+}

package/packages/willa-content/src/components/Statistic/index.tsx

@@ -0,0 +1,90 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import classNames from "classnames";
+
+export type StatisticTone =
+  | "default"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+export type StatisticSize = "sm" | "md" | "lg";
+export type StatisticTrend = "up" | "down" | "neutral";
+
+export type StatisticProps = {
+  label: ReactNode;
+  value: ReactNode;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  description?: ReactNode;
+  trend?: StatisticTrend;
+  trendLabel?: ReactNode;
+  icon?: ReactNode;
+  tone?: StatisticTone;
+  size?: StatisticSize;
+} & Omit<ComponentPropsWithoutRef<"div">, "children">;
+
+export function Statistic(props: StatisticProps) {
+  const {
+    label,
+    value,
+    prefix,
+    suffix,
+    description,
+    trend = "neutral",
+    trendLabel,
+    icon,
+    tone = "default",
+    size = "md",
+    className,
+    ...divProps
+  } = props;
+
+  return (
+    <div
+      {...divProps}
+      className={classNames(
+        "willa-statistic",
+        `willa-statistic--${tone}`,
+        `willa-statistic--${size}`,
+        className,
+      )}
+    >
+      <div className="willa-statistic__header">
+        {icon ? (
+          <span className="willa-statistic__icon" aria-hidden="true">
+            {icon}
+          </span>
+        ) : null}
+        <span className="willa-statistic__label">{label}</span>
+      </div>
+      <div className="willa-statistic__value">
+        {prefix ? (
+          <span className="willa-statistic__prefix">{prefix}</span>
+        ) : null}
+        <span className="willa-statistic__number">{value}</span>
+        {suffix ? (
+          <span className="willa-statistic__suffix">{suffix}</span>
+        ) : null}
+      </div>
+      {description || trendLabel ? (
+        <div className="willa-statistic__meta">
+          {trendLabel ? (
+            <span
+              className={classNames(
+                "willa-statistic__trend",
+                `willa-statistic__trend--${trend}`,
+              )}
+            >
+              {trendLabel}
+            </span>
+          ) : null}
+          {description ? (
+            <span className="willa-statistic__description">{description}</span>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+Statistic.displayName = "Statistic";