willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,215 @@
+.willa-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  border: 1px solid transparent;
+  border-radius: 0.55rem;
+  font-family: var(--willa-body-font);
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 180ms ease,
+    border-color 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.willa-button:hover {
+  transform: translateY(-1px);
+}
+
+.willa-button:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-button:disabled,
+.willa-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.52;
+  transform: none;
+}
+
+.willa-button--loading {
+  cursor: wait;
+}
+
+.willa-button--pressed,
+.willa-button--pressed:hover {
+  border-color: var(--willa-button-pressed-border);
+  background: var(--willa-button-pressed-bg);
+  color: var(--willa-button-pressed-text);
+  box-shadow: var(--willa-button-pressed-shadow);
+}
+
+.willa-button--sm {
+  gap: 0.4rem;
+  min-height: 2rem;
+  padding: 0.42rem 0.7rem;
+  font-size: 0.78rem;
+}
+
+.willa-button--md {
+  gap: 0.48rem;
+  min-height: 2.38rem;
+  padding: 0.58rem 0.92rem;
+  font-size: 0.94rem;
+}
+
+.willa-button--lg {
+  gap: 0.54rem;
+  min-height: 2.8rem;
+  padding: 0.74rem 1.14rem;
+  font-size: 1.08rem;
+}
+
+.willa-button--solid {
+  background: var(--willa-button-custom-bg, var(--willa-button-solid-bg));
+  color: var(--willa-button-custom-text, var(--willa-button-solid-text));
+  box-shadow: var(--willa-button-solid-shadow);
+}
+
+.willa-button--solid:hover {
+  background: var(--willa-button-custom-bg, var(--willa-button-solid-bg-hover));
+  color: var(--willa-button-custom-text, var(--willa-button-solid-text));
+  box-shadow: var(--willa-button-solid-shadow-hover);
+}
+
+.willa-button--soft {
+  background: var(--willa-button-custom-bg, var(--willa-button-soft-bg));
+  color: var(--willa-button-custom-text, var(--willa-button-soft-text));
+}
+
+.willa-button--soft:hover {
+  background: var(--willa-button-custom-bg, var(--willa-button-soft-bg-hover));
+  color: var(--willa-button-custom-text, var(--willa-button-soft-text));
+}
+
+.willa-button--outline {
+  border-color: var(--willa-button-outline-border);
+  background: var(--willa-button-custom-bg, transparent);
+  color: var(--willa-button-custom-text, var(--willa-button-outline-text));
+}
+
+.willa-button--outline:hover {
+  border-color: var(--willa-button-outline-border-hover);
+  background: var(
+    --willa-button-custom-bg,
+    var(--willa-button-outline-bg-hover)
+  );
+  color: var(--willa-button-custom-text, var(--willa-button-outline-text));
+}
+
+.willa-button--ghost {
+  background: var(--willa-button-custom-bg, transparent);
+  color: var(--willa-button-custom-text, var(--willa-button-ghost-text));
+}
+
+.willa-button--ghost:hover {
+  background: var(--willa-button-custom-bg, var(--willa-button-ghost-bg-hover));
+  color: var(--willa-button-custom-text, var(--willa-button-ghost-text));
+}
+
+.willa-button--link {
+  min-height: auto;
+  padding-right: 0;
+  padding-left: 0;
+  border-color: transparent;
+  background: var(--willa-button-custom-bg, transparent);
+  color: var(--willa-button-custom-text, var(--willa-button-link-text));
+  box-shadow: none;
+}
+
+.willa-button--link:hover {
+  background: var(--willa-button-custom-bg, transparent);
+  color: var(--willa-button-custom-text, var(--willa-button-link-text-hover));
+  box-shadow: none;
+}
+
+.willa-button--link.willa-button--pressed,
+.willa-button--link.willa-button--pressed:hover {
+  border-color: transparent;
+  background: transparent;
+  color: var(--willa-button-pressed-text);
+  box-shadow: none;
+}
+
+.willa-button--copied,
+.willa-button--copied:hover {
+  border-color: var(--willa-button-copied-border);
+  background: var(--willa-button-copied-bg);
+  color: var(--willa-button-copied-text);
+  box-shadow: none;
+}
+
+.willa-button-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.willa-button-icon {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.willa-button-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-button-spinner {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  flex: none;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  opacity: 0.78;
+  animation: willa-button-spin 720ms linear infinite;
+}
+
+@keyframes willa-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (hover: none) {
+  .willa-button:hover {
+    transform: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-button {
+    touch-action: manipulation;
+  }
+
+  .willa-button--sm {
+    min-height: 2.25rem;
+    padding-inline: 0.76rem;
+  }
+
+  .willa-button--md {
+    min-height: 2.5rem;
+  }
+
+  .willa-button--lg {
+    min-height: 2.88rem;
+  }
+}

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

@@ -0,0 +1,295 @@
+import {
+  type AnchorHTMLAttributes,
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+import { flattenText, useCopyToClipboard } from "@willa-ui/shared";
+import {
+  handleActionClick,
+  resolveActionAriaPressed,
+} from "#content/internal/buttonActionUtils";
+
+export type ButtonVariant = "solid" | "soft" | "outline" | "ghost" | "link";
+export type ButtonSize = "sm" | "md" | "lg";
+
+type ButtonBaseProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  icon?: ReactNode;
+  trailingIcon?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+  loadingText?: ReactNode;
+  pressed?: boolean;
+  backgroundColor?: string;
+  textColor?: string;
+  copyText?: boolean | string;
+  copiedDuration?: number;
+  onCopyText?: (text: string) => void;
+};
+
+type ButtonAnchorProps = ButtonBaseProps & {
+  href: string;
+} & Omit<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof ButtonBaseProps | "href"
+  >;
+
+type ButtonNativeProps = ButtonBaseProps & {
+  href?: undefined;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+} & Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    keyof ButtonBaseProps | "type"
+  >;
+
+export type ButtonProps = ButtonAnchorProps | ButtonNativeProps;
+
+export function Button(props: ButtonProps) {
+  const { copied, copy } = useCopyToClipboard();
+
+  if (isButtonAnchorProps(props)) {
+    const {
+      variant = "solid",
+      size = "md",
+      icon,
+      trailingIcon,
+      className,
+      children,
+      disabled = false,
+      loading = false,
+      loadingText,
+      pressed,
+      backgroundColor,
+      textColor,
+      copyText,
+      copiedDuration = 300,
+      onCopyText,
+      onClick,
+      href,
+      target,
+      rel,
+      style,
+      ...anchorProps
+    } = props;
+
+    const resolvedRel = target === "_blank" && !rel ? "noreferrer" : rel;
+    const effectiveDisabled = disabled || loading;
+    const resolvedCopyText = resolveCopyText(copyText, children);
+    const buttonStyle = getButtonStyle({
+      backgroundColor,
+      textColor,
+      style,
+    });
+
+    return (
+      <a
+        {...anchorProps}
+        className={getButtonClassName({
+          variant,
+          size,
+          copied,
+          loading,
+          pressed,
+          className,
+        })}
+        style={buttonStyle}
+        href={effectiveDisabled ? undefined : href}
+        target={target}
+        rel={resolvedRel}
+        aria-busy={loading || undefined}
+        aria-disabled={effectiveDisabled || undefined}
+        aria-pressed={resolveActionAriaPressed(
+          anchorProps["aria-pressed"],
+          pressed,
+        )}
+        tabIndex={effectiveDisabled ? -1 : anchorProps.tabIndex}
+        onClick={(event) => {
+          handleActionClick(event, {
+            copyText: resolvedCopyText,
+            copiedDuration,
+            disabled: effectiveDisabled,
+            onClick,
+            onCopyText,
+            preventDefaultForCopy: true,
+            copy,
+          });
+        }}
+      >
+        {renderButtonContent({
+          icon,
+          trailingIcon,
+          children,
+          loading,
+          loadingText,
+        })}
+      </a>
+    );
+  }
+
+  const {
+    variant = "solid",
+    size = "md",
+    icon,
+    trailingIcon,
+    className,
+    children,
+    disabled,
+    loading = false,
+    loadingText,
+    pressed,
+    backgroundColor,
+    textColor,
+    copyText,
+    copiedDuration = 300,
+    onCopyText,
+    onClick,
+    style,
+    type = "button",
+    ...buttonProps
+  } = props;
+  const effectiveDisabled = disabled || loading;
+  const resolvedCopyText = resolveCopyText(copyText, children);
+  const buttonStyle = getButtonStyle({ backgroundColor, textColor, style });
+
+  return (
+    <button
+      {...buttonProps}
+      className={getButtonClassName({
+        variant,
+        size,
+        copied,
+        loading,
+        pressed,
+        className,
+      })}
+      style={buttonStyle}
+      aria-busy={loading || undefined}
+      aria-pressed={resolveActionAriaPressed(
+        buttonProps["aria-pressed"],
+        pressed,
+      )}
+      disabled={effectiveDisabled}
+      type={type}
+      onClick={(event) => {
+        handleActionClick(event, {
+          copyText: resolvedCopyText,
+          copiedDuration,
+          disabled: effectiveDisabled,
+          onClick,
+          onCopyText,
+          preventDefaultForCopy: false,
+          copy,
+        });
+      }}
+    >
+      {renderButtonContent({
+        icon,
+        trailingIcon,
+        children,
+        loading,
+        loadingText,
+      })}
+    </button>
+  );
+}
+
+const getButtonClassName = (options: {
+  variant: ButtonVariant;
+  size: ButtonSize;
+  copied: boolean;
+  loading: boolean;
+  pressed?: boolean;
+  className?: string;
+}) => {
+  return classNames(
+    "willa-button",
+    `willa-button--${options.variant}`,
+    `willa-button--${options.size}`,
+    options.copied && "willa-button--copied",
+    options.loading && "willa-button--loading",
+    options.pressed && "willa-button--pressed",
+    options.className,
+  );
+};
+
+type ButtonStyle = CSSProperties & {
+  "--willa-button-custom-bg"?: string;
+  "--willa-button-custom-text"?: string;
+};
+
+const getButtonStyle = (options: {
+  backgroundColor?: string;
+  textColor?: string;
+  style?: CSSProperties;
+}) => {
+  if (!options.backgroundColor && !options.textColor) return options.style;
+
+  const style: ButtonStyle = { ...options.style };
+
+  if (options.backgroundColor) {
+    style["--willa-button-custom-bg"] = options.backgroundColor;
+  }
+
+  if (options.textColor) {
+    style["--willa-button-custom-text"] = options.textColor;
+  }
+
+  return style;
+};
+
+const isButtonAnchorProps = (
+  props: ButtonProps,
+): props is ButtonAnchorProps => {
+  return typeof props.href === "string";
+};
+
+const resolveCopyText = (
+  copyText: boolean | string | undefined,
+  children: ReactNode,
+) => {
+  if (copyText === true) return flattenText(children).trim();
+  if (typeof copyText === "string") return copyText;
+  return "";
+};
+
+const renderButtonContent = (options: {
+  icon?: ReactNode;
+  trailingIcon?: ReactNode;
+  children?: ReactNode;
+  loading: boolean;
+  loadingText?: ReactNode;
+}) => {
+  const children =
+    options.loading && options.loadingText !== undefined
+      ? options.loadingText
+      : options.children;
+
+  return (
+    <>
+      {options.loading ? (
+        <span
+          className="willa-button-spinner"
+          aria-hidden="true"
+          role="presentation"
+        />
+      ) : options.icon ? (
+        <span className="willa-button-icon" aria-hidden="true">
+          {options.icon}
+        </span>
+      ) : null}
+      {children ? <span className="willa-button-label">{children}</span> : null}
+      {options.trailingIcon ? (
+        <span className="willa-button-icon" aria-hidden="true">
+          {options.trailingIcon}
+        </span>
+      ) : null}
+    </>
+  );
+};
+
+Button.displayName = "Button";

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

@@ -0,0 +1,102 @@
+.willa-callout {
+  --willa-callout-accent: var(--willa-callout-note-accent);
+  --willa-callout-bg: var(--willa-callout-note-bg);
+  --willa-callout-border: var(--willa-callout-note-border);
+  --willa-callout-icon-bg: var(--willa-callout-note-icon-bg);
+
+  margin: 1.32rem 0;
+  padding: 0.92rem 1rem;
+  border: 1px solid var(--willa-callout-border);
+  border-radius: 8px;
+  background: var(--willa-callout-bg);
+}
+
+.willa-callout-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.64rem;
+  margin-bottom: 0.3rem;
+}
+
+.willa-callout-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 1.68rem;
+  height: 1.68rem;
+  border-radius: 999px;
+  background: var(--willa-callout-icon-bg);
+  color: var(--willa-callout-accent);
+  box-shadow: inset 0 0 0 1px var(--willa-callout-border);
+}
+
+.willa-callout-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.willa-callout-title {
+  display: flex;
+  min-height: 1.68rem;
+  align-items: center;
+  color: var(--willa-text-strong);
+  font-family: var(--willa-body-font);
+  font-size: 0.9rem;
+  font-weight: 560;
+  line-height: 1.32;
+}
+
+.willa-callout-body,
+.willa-callout-body .willa-prose-p,
+.willa-callout-body .willa-prose-ul,
+.willa-callout-body .willa-prose-ol,
+.willa-callout-body .willa-prose-li {
+  color: var(--willa-text-soft);
+  font-size: 0.92rem;
+  line-height: 1.66;
+  text-shadow: none;
+}
+
+.willa-callout-body > :last-child,
+.willa-callout-body .willa-prose-p:last-child,
+.willa-callout-body .willa-prose-ul:last-child,
+.willa-callout-body .willa-prose-ol:last-child,
+.willa-callout-body .willa-prose-quote:last-child {
+  margin-bottom: 0;
+}
+
+.willa-callout--tip {
+  --willa-callout-accent: var(--willa-callout-tip-accent);
+  --willa-callout-bg: var(--willa-callout-tip-bg);
+  --willa-callout-border: var(--willa-callout-tip-border);
+  --willa-callout-icon-bg: var(--willa-callout-tip-icon-bg);
+}
+
+.willa-callout--warning {
+  --willa-callout-accent: var(--willa-callout-warning-accent);
+  --willa-callout-bg: var(--willa-callout-warning-bg);
+  --willa-callout-border: var(--willa-callout-warning-border);
+  --willa-callout-icon-bg: var(--willa-callout-warning-icon-bg);
+}
+
+.willa-callout--success {
+  --willa-callout-accent: var(--willa-callout-success-accent);
+  --willa-callout-bg: var(--willa-callout-success-bg);
+  --willa-callout-border: var(--willa-callout-success-border);
+  --willa-callout-icon-bg: var(--willa-callout-success-icon-bg);
+}
+
+.willa-callout--error {
+  --willa-callout-accent: var(--willa-callout-error-accent);
+  --willa-callout-bg: var(--willa-callout-error-bg);
+  --willa-callout-border: var(--willa-callout-error-border);
+  --willa-callout-icon-bg: var(--willa-callout-error-icon-bg);
+}
+
+@media (max-width: 767px) {
+  .willa-callout {
+    margin: 1.2rem 0;
+    padding: 0.82rem 0.86rem;
+  }
+}

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

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import classNames from "classnames";
+import {
+  CheckIcon,
+  Cross2Icon,
+  ExclamationTriangleIcon,
+  MagicWandIcon,
+  ReaderIcon,
+} from "@radix-ui/react-icons";
+
+export type CalloutTone = "note" | "tip" | "warning" | "success" | "error";
+
+export type CalloutProps = {
+  tone?: CalloutTone;
+  title?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+};
+
+const toneTitleMap: Record<CalloutTone, string> = {
+  note: "说明",
+  tip: "提示",
+  warning: "注意",
+  success: "完成",
+  error: "错误",
+};
+
+const toneIconMap: Record<CalloutTone, ReactNode> = {
+  note: <ReaderIcon />,
+  tip: <MagicWandIcon />,
+  warning: <ExclamationTriangleIcon />,
+  success: <CheckIcon />,
+  error: <Cross2Icon />,
+};
+
+export function Callout(props: CalloutProps) {
+  const { tone = "note", title, icon, className, children } = props;
+  const resolvedTitle = title ?? toneTitleMap[tone];
+  const resolvedIcon = icon ?? toneIconMap[tone];
+
+  return (
+    <aside
+      className={classNames(
+        "willa-callout",
+        `willa-callout--${tone}`,
+        className,
+      )}
+    >
+      <div className="willa-callout-header">
+        <span className="willa-callout-icon">{resolvedIcon}</span>
+        {resolvedTitle ? (
+          <div className="willa-callout-title">{resolvedTitle}</div>
+        ) : null}
+      </div>
+      <div className="willa-callout-body">{children}</div>
+    </aside>
+  );
+}
+
+Callout.displayName = "Callout";