willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,154 @@
+import { useId, type KeyboardEvent, type ReactNode } from "react";
+import classNames from "classnames";
+import { useSingleSelection } from "#content/internal/useSingleSelection";
+
+export type TabsItem = {
+  value: string;
+  label: ReactNode;
+  children: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+};
+
+export type TabsSize = "sm" | "md";
+
+export type TabsProps = {
+  items: Array<TabsItem>;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  size?: TabsSize;
+  ariaLabel?: string;
+  className?: string;
+};
+
+export function Tabs(props: TabsProps) {
+  const {
+    items,
+    value,
+    defaultValue,
+    onValueChange,
+    size = "md",
+    ariaLabel = "Tabs",
+    className,
+  } = props;
+  const id = useId();
+  const { enabledItems, selectedItem, selectValue } = useSingleSelection({
+    items,
+    value,
+    defaultValue,
+    onValueChange,
+  });
+
+  const focusTab = (container: HTMLDivElement, nextValue: string) => {
+    const nextIndex = items.findIndex((item) => item.value === nextValue);
+    if (nextIndex < 0) return;
+
+    container
+      .querySelector<HTMLButtonElement>(
+        `[data-willa-tabs-index="${String(nextIndex)}"]`,
+      )
+      ?.focus();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!enabledItems.length || !selectedItem) return;
+
+    const currentIndex = enabledItems.findIndex(
+      (item) => item.value === selectedItem.value,
+    );
+    const lastIndex = enabledItems.length - 1;
+    const nextIndex = currentIndex === lastIndex ? 0 : currentIndex + 1;
+    const previousIndex = currentIndex <= 0 ? lastIndex : currentIndex - 1;
+
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      const nextItem = enabledItems[nextIndex];
+      selectValue(nextItem.value);
+      focusTab(event.currentTarget, nextItem.value);
+    }
+
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      const previousItem = enabledItems[previousIndex];
+      selectValue(previousItem.value);
+      focusTab(event.currentTarget, previousItem.value);
+    }
+
+    if (event.key === "Home") {
+      event.preventDefault();
+      selectValue(enabledItems[0].value);
+      focusTab(event.currentTarget, enabledItems[0].value);
+    }
+
+    if (event.key === "End") {
+      event.preventDefault();
+      selectValue(enabledItems[lastIndex].value);
+      focusTab(event.currentTarget, enabledItems[lastIndex].value);
+    }
+  };
+
+  if (!items.length || !selectedItem) return null;
+
+  return (
+    <div className={classNames("willa-tabs", `willa-tabs--${size}`, className)}>
+      <div
+        className="willa-tabs-list"
+        role="tablist"
+        aria-label={ariaLabel}
+        onKeyDown={handleKeyDown}
+      >
+        {items.map((item, index) => {
+          const selected = item.value === selectedItem.value;
+          const tabId = getTabId(id, index);
+          const panelId = getPanelId(id, index);
+
+          return (
+            <button
+              key={item.value}
+              type="button"
+              id={tabId}
+              className="willa-tabs-tab"
+              role="tab"
+              aria-selected={selected}
+              aria-controls={panelId}
+              disabled={item.disabled}
+              tabIndex={selected ? 0 : -1}
+              data-willa-tabs-index={index}
+              onClick={() => selectValue(item.value)}
+            >
+              {item.icon ? (
+                <span className="willa-tabs-tab-icon" aria-hidden="true">
+                  {item.icon}
+                </span>
+              ) : null}
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {items.map((item, index) => {
+        const selected = item.value === selectedItem.value;
+
+        return (
+          <div
+            key={item.value}
+            id={getPanelId(id, index)}
+            className="willa-tabs-panel"
+            role="tabpanel"
+            aria-labelledby={getTabId(id, index)}
+            hidden={!selected}
+          >
+            {item.children}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const getTabId = (id: string, index: number) => `${id}-tab-${index}`;
+const getPanelId = (id: string, index: number) => `${id}-panel-${index}`;
+
+Tabs.displayName = "Tabs";

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

@@ -0,0 +1,171 @@
+.willa-tag {
+  --willa-tag-bg: var(--willa-tag-neutral-bg);
+  --willa-tag-border: var(--willa-tag-neutral-border);
+  --willa-tag-text: var(--willa-tag-neutral-text);
+  --willa-tag-solid-bg: var(--willa-tag-neutral-solid-bg);
+  --willa-tag-solid-text: var(--willa-tag-neutral-solid-text);
+
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  border: 1px solid transparent;
+  background: var(--willa-tag-bg);
+  color: var(--willa-tag-text);
+  font-family: var(--willa-body-font);
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.2;
+  vertical-align: middle;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.willa-tag--sm {
+  min-height: 1.5rem;
+  gap: 0.22rem;
+  padding: 0.16rem 0.42rem;
+  font-size: 0.78rem;
+}
+
+.willa-tag--md {
+  min-height: 1.82rem;
+  gap: 0.28rem;
+  padding: 0.22rem 0.54rem;
+  font-size: 0.88rem;
+}
+
+.willa-tag--rounded {
+  border-radius: 0.52rem;
+}
+
+.willa-tag--pill {
+  border-radius: 999px;
+}
+
+.willa-tag--outline {
+  border-color: var(--willa-tag-border);
+  background: transparent;
+}
+
+.willa-tag--solid {
+  border-color: transparent;
+  background: var(--willa-tag-solid-bg);
+  color: var(--willa-tag-solid-text);
+}
+
+.willa-tag--info {
+  --willa-tag-bg: var(--willa-tag-info-bg);
+  --willa-tag-border: var(--willa-tag-info-border);
+  --willa-tag-text: var(--willa-tag-info-text);
+  --willa-tag-solid-bg: var(--willa-tag-info-solid-bg);
+  --willa-tag-solid-text: var(--willa-tag-info-solid-text);
+}
+
+.willa-tag--success {
+  --willa-tag-bg: var(--willa-tag-success-bg);
+  --willa-tag-border: var(--willa-tag-success-border);
+  --willa-tag-text: var(--willa-tag-success-text);
+  --willa-tag-solid-bg: var(--willa-tag-success-solid-bg);
+  --willa-tag-solid-text: var(--willa-tag-success-solid-text);
+}
+
+.willa-tag--warning {
+  --willa-tag-bg: var(--willa-tag-warning-bg);
+  --willa-tag-border: var(--willa-tag-warning-border);
+  --willa-tag-text: var(--willa-tag-warning-text);
+  --willa-tag-solid-bg: var(--willa-tag-warning-solid-bg);
+  --willa-tag-solid-text: var(--willa-tag-warning-solid-text);
+}
+
+.willa-tag--danger {
+  --willa-tag-bg: var(--willa-tag-danger-bg);
+  --willa-tag-border: var(--willa-tag-danger-border);
+  --willa-tag-text: var(--willa-tag-danger-text);
+  --willa-tag-solid-bg: var(--willa-tag-danger-solid-bg);
+  --willa-tag-solid-text: var(--willa-tag-danger-solid-text);
+}
+
+.willa-tag--selected {
+  border-color: var(--willa-tag-selected-border);
+  background: var(--willa-tag-selected-bg);
+  color: var(--willa-tag-selected-text);
+  box-shadow: inset 0 0 0 1px var(--willa-tag-selected-shadow);
+}
+
+.willa-tag--interactive {
+  cursor: pointer;
+}
+
+.willa-tag-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.willa-tag-icon {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  color: currentColor;
+}
+
+.willa-tag-icon svg {
+  display: block;
+  width: 0.92em;
+  height: 0.92em;
+}
+
+.willa-tag-close {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 1rem;
+  height: 1rem;
+  margin-inline-end: -0.18rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  opacity: 0.68;
+  padding: 0;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    opacity 160ms ease;
+}
+
+.willa-tag--sm .willa-tag-close {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.willa-tag-close:hover:not(:disabled),
+.willa-tag-close:focus-visible {
+  background: var(--willa-tag-close-bg-hover);
+  opacity: 1;
+}
+
+.willa-tag-close:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 1px;
+}
+
+.willa-tag-close:disabled {
+  cursor: not-allowed;
+  opacity: 0.36;
+}
+
+.willa-tag-close svg {
+  width: 0.72rem;
+  height: 0.72rem;
+}

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

@@ -0,0 +1,91 @@
+import classNames from "classnames";
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+
+export type TagVariant = "soft" | "outline" | "solid";
+export type TagTone = "neutral" | "info" | "success" | "warning" | "danger";
+export type TagSize = "sm" | "md";
+export type TagShape = "rounded" | "pill";
+
+export type TagCloseOptions = {
+  ariaLabel?: string;
+  disabled?: boolean;
+  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+
+export type TagProps = Omit<ComponentPropsWithoutRef<"span">, "children"> & {
+  variant?: TagVariant;
+  tone?: TagTone;
+  size?: TagSize;
+  shape?: TagShape;
+  icon?: ReactNode;
+  trailingIcon?: ReactNode;
+  selected?: boolean;
+  close?: boolean | TagCloseOptions;
+  children?: ReactNode;
+};
+
+export function Tag(props: TagProps) {
+  const {
+    variant = "soft",
+    tone = "neutral",
+    size = "md",
+    shape = "rounded",
+    icon,
+    trailingIcon,
+    selected = false,
+    close = false,
+    children,
+    className,
+    onClick,
+    ...rootProps
+  } = props;
+  const closeOptions = typeof close === "object" ? close : null;
+  const isClosable = Boolean(close);
+  const closeAriaLabel = closeOptions?.ariaLabel ?? "移除标签";
+
+  const handleCloseClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    closeOptions?.onClose?.(event);
+  };
+
+  return (
+    <span
+      {...rootProps}
+      className={classNames(
+        "willa-tag",
+        `willa-tag--${variant}`,
+        `willa-tag--${tone}`,
+        `willa-tag--${size}`,
+        `willa-tag--${shape}`,
+        selected && "willa-tag--selected",
+        isClosable && "willa-tag--closable",
+        onClick && "willa-tag--interactive",
+        className,
+      )}
+      data-selected={selected ? "" : null}
+      onClick={onClick}
+    >
+      {icon ? <span className="willa-tag-icon">{icon}</span> : null}
+      {children ? <span className="willa-tag-label">{children}</span> : null}
+      {trailingIcon ? (
+        <span className="willa-tag-icon willa-tag-icon--trailing">
+          {trailingIcon}
+        </span>
+      ) : null}
+      {isClosable ? (
+        <button
+          type="button"
+          className="willa-tag-close"
+          aria-label={closeAriaLabel}
+          disabled={closeOptions?.disabled}
+          onClick={handleCloseClick}
+        >
+          <Cross2Icon />
+        </button>
+      ) : null}
+    </span>
+  );
+}
+
+Tag.displayName = "Tag";