willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,355 @@
+.willa-timeline {
+  box-sizing: border-box;
+  width: 100%;
+  color: var(--willa-timeline-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-timeline-header {
+  display: grid;
+  gap: 0.36rem;
+  margin-bottom: 1rem;
+}
+
+.willa-timeline-title {
+  margin: 0;
+  color: var(--willa-timeline-title);
+  font-family: var(--willa-title-font);
+  font-size: 1rem;
+  font-weight: 680;
+  line-height: 1.36;
+  letter-spacing: 0;
+}
+
+.willa-timeline-description {
+  margin: 0;
+  color: var(--willa-timeline-muted);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.willa-timeline-list {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.willa-timeline-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 2rem minmax(0, 1fr);
+  column-gap: 0.76rem;
+  min-width: 0;
+}
+
+.willa-timeline--has-time .willa-timeline-item {
+  grid-template-columns: minmax(4.8rem, max-content) 2rem minmax(0, 1fr);
+  column-gap: 0.72rem;
+}
+
+.willa-timeline-item:not(:last-child) {
+  padding-bottom: 0.9rem;
+}
+
+.willa-timeline-rail {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+}
+
+.willa-timeline-rail::after {
+  content: "";
+  position: absolute;
+  top: 0.15rem;
+  bottom: -0.9rem;
+  left: 50%;
+  width: 1px;
+  background: var(--willa-timeline-line);
+  transform: translateX(-50%);
+}
+
+.willa-timeline-rail--with-marker::after {
+  top: 2.15rem;
+}
+
+.willa-timeline-item:last-child .willa-timeline-rail::after {
+  display: none;
+}
+
+.willa-timeline-marker {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.9rem;
+  height: 1.9rem;
+  border: 1px solid var(--willa-timeline-marker-border);
+  border-radius: 50%;
+  background: var(--willa-timeline-marker-bg);
+  color: var(--willa-timeline-marker-text);
+}
+
+.willa-timeline-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  font-size: 0.95rem;
+  line-height: 1;
+}
+
+.willa-timeline-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-timeline-card {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  box-sizing: border-box;
+  padding: 1rem 1.12rem;
+  border: 1px solid var(--willa-timeline-card-border);
+  border-radius: 0.72rem;
+  background: var(--willa-timeline-card-bg);
+}
+
+.willa-timeline-item--interactive {
+  cursor: pointer;
+}
+
+.willa-timeline-item--interactive .willa-timeline-card {
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.willa-timeline-item--interactive:hover .willa-timeline-card {
+  border-color: var(--willa-timeline-card-border-hover);
+  background: var(--willa-timeline-card-bg-hover);
+}
+
+.willa-timeline-item--interactive:focus-visible {
+  outline: none;
+}
+
+.willa-timeline-item--interactive:focus-visible .willa-timeline-card {
+  border-color: var(--willa-timeline-focus-border);
+  box-shadow: 0 0 0 3px var(--willa-timeline-focus-ring);
+}
+
+.willa-timeline-main {
+  display: grid;
+  min-width: 0;
+  gap: 0.5rem;
+}
+
+.willa-timeline-heading {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 0.7rem;
+}
+
+.willa-timeline-item-title {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--willa-timeline-title);
+  font-size: 0.94rem;
+  font-weight: 660;
+  line-height: 1.42;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-timeline-time {
+  align-self: start;
+  justify-self: end;
+  max-width: 8.4rem;
+  min-width: 0;
+  margin-top: 0.3rem;
+  overflow: hidden;
+  padding: 0.18rem 0.46rem;
+  border-radius: 0.42rem;
+  background: var(--willa-timeline-time-bg);
+  color: var(--willa-timeline-time-text);
+  font-family: var(--willa-code-font);
+  font-size: 0.8rem;
+  font-weight: 680;
+  line-height: 1.35;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-timeline-item-description {
+  margin: 0;
+  color: var(--willa-timeline-text);
+  font-size: 0.9rem;
+  line-height: 1.62;
+}
+
+.willa-timeline-content {
+  min-width: 0;
+  color: var(--willa-timeline-text);
+  font-size: 0.9rem;
+  line-height: 1.64;
+}
+
+.willa-timeline-content > :first-child {
+  margin-top: 0;
+}
+
+.willa-timeline-content > :last-child {
+  margin-bottom: 0;
+}
+
+.willa-timeline-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-top: 0.08rem;
+  color: var(--willa-timeline-muted);
+  font-size: 0.8rem;
+  line-height: 1.5;
+}
+
+.willa-timeline-action {
+  flex: none;
+}
+
+.willa-timeline--sm .willa-timeline-item {
+  grid-template-columns: 1.65rem minmax(0, 1fr);
+  column-gap: 0.62rem;
+}
+
+.willa-timeline--has-time.willa-timeline--sm .willa-timeline-item {
+  grid-template-columns: minmax(4.2rem, max-content) 1.65rem minmax(0, 1fr);
+  column-gap: 0.58rem;
+}
+
+.willa-timeline--sm .willa-timeline-marker {
+  width: 1.55rem;
+  height: 1.55rem;
+}
+
+.willa-timeline--sm .willa-timeline-rail::after {
+  top: 0.12rem;
+}
+
+.willa-timeline--sm .willa-timeline-rail--with-marker::after {
+  top: 1.82rem;
+}
+
+.willa-timeline--sm .willa-timeline-card {
+  padding: 0.82rem 0.92rem;
+  border-radius: 0.58rem;
+}
+
+.willa-timeline--sm .willa-timeline-time {
+  max-width: 7.4rem;
+  margin-top: 0.16rem;
+  padding: 0.14rem 0.38rem;
+  font-size: 0.73rem;
+}
+
+.willa-timeline--sm .willa-timeline-item-title,
+.willa-timeline--sm .willa-timeline-item-description,
+.willa-timeline--sm .willa-timeline-content {
+  font-size: 0.84rem;
+}
+
+.willa-timeline--compact .willa-timeline-card {
+  padding-top: 0.1rem;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+.willa-timeline--compact .willa-timeline-item:not(:last-child) {
+  padding-bottom: 0.82rem;
+}
+
+.willa-timeline-item--info {
+  --willa-timeline-marker-bg: var(--willa-timeline-info-bg);
+  --willa-timeline-marker-border: var(--willa-timeline-info-border);
+  --willa-timeline-marker-text: var(--willa-timeline-info-text);
+}
+
+.willa-timeline-item--success {
+  --willa-timeline-marker-bg: var(--willa-timeline-success-bg);
+  --willa-timeline-marker-border: var(--willa-timeline-success-border);
+  --willa-timeline-marker-text: var(--willa-timeline-success-text);
+}
+
+.willa-timeline-item--warning {
+  --willa-timeline-marker-bg: var(--willa-timeline-warning-bg);
+  --willa-timeline-marker-border: var(--willa-timeline-warning-border);
+  --willa-timeline-marker-text: var(--willa-timeline-warning-text);
+}
+
+.willa-timeline-item--danger {
+  --willa-timeline-marker-bg: var(--willa-timeline-danger-bg);
+  --willa-timeline-marker-border: var(--willa-timeline-danger-border);
+  --willa-timeline-marker-text: var(--willa-timeline-danger-text);
+}
+
+@media (max-width: 767px) {
+  .willa-timeline-item,
+  .willa-timeline--sm .willa-timeline-item,
+  .willa-timeline--has-time .willa-timeline-item,
+  .willa-timeline--has-time.willa-timeline--sm .willa-timeline-item {
+    grid-template-columns: 1.65rem minmax(0, 1fr);
+    column-gap: 0.62rem;
+  }
+
+  .willa-timeline-time {
+    grid-column: 2;
+    grid-row: 1;
+    justify-self: start;
+    max-width: 100%;
+    margin-top: 0;
+    margin-bottom: 0.44rem;
+    text-align: left;
+  }
+
+  .willa-timeline-rail {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+  }
+
+  .willa-timeline-card {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .willa-timeline-card {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .willa-timeline-heading {
+    display: grid;
+    justify-content: stretch;
+    gap: 0.26rem;
+  }
+
+  .willa-timeline-time {
+    white-space: normal;
+  }
+
+  .willa-timeline-action {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,153 @@
+import {
+  type ComponentPropsWithoutRef,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+
+export type TimelineSize = "sm" | "md";
+export type TimelineVariant = "default" | "compact";
+export type TimelineTone =
+  | "default"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+
+export type TimelineItem = {
+  id?: string | number;
+  title: ReactNode;
+  time?: ReactNode;
+  description?: ReactNode;
+  content?: ReactNode;
+  meta?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+  tone?: TimelineTone;
+  className?: string;
+  onClick?: (
+    event: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>,
+  ) => void;
+};
+
+export type TimelineProps = Omit<
+  ComponentPropsWithoutRef<"section">,
+  "title"
+> & {
+  items: Array<TimelineItem>;
+  title?: ReactNode;
+  description?: ReactNode;
+  size?: TimelineSize;
+  variant?: TimelineVariant;
+};
+
+export function Timeline(props: TimelineProps) {
+  const {
+    items,
+    title,
+    description,
+    size = "md",
+    variant = "default",
+    className,
+    ...timelineProps
+  } = props;
+  const hasTime = items.some((item) => Boolean(item.time));
+
+  return (
+    <section
+      {...timelineProps}
+      className={classNames(
+        "willa-timeline",
+        `willa-timeline--${size}`,
+        `willa-timeline--${variant}`,
+        hasTime && "willa-timeline--has-time",
+        className,
+      )}
+    >
+      {title || description ? (
+        <header className="willa-timeline-header">
+          {title ? <h3 className="willa-timeline-title">{title}</h3> : null}
+          {description ? (
+            <p className="willa-timeline-description">{description}</p>
+          ) : null}
+        </header>
+      ) : null}
+      <ol className="willa-timeline-list">
+        {items.map((item, index) => (
+          <TimelineEntry
+            key={item.id ?? `timeline-item-${index}`}
+            item={item}
+          />
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+const TimelineEntry = ({ item }: { item: TimelineItem }) => {
+  const tone = item.tone ?? "default";
+  const isInteractive = Boolean(item.onClick);
+  const hasIcon = Boolean(item.icon);
+
+  return (
+    <li
+      className={classNames(
+        "willa-timeline-item",
+        `willa-timeline-item--${tone}`,
+        isInteractive && "willa-timeline-item--interactive",
+        item.className,
+      )}
+      role={isInteractive ? "button" : undefined}
+      tabIndex={isInteractive ? 0 : undefined}
+      onClick={item.onClick}
+      onKeyDown={(event) => {
+        if (!item.onClick) return;
+        if (event.key !== "Enter" && event.key !== " ") return;
+
+        event.preventDefault();
+        item.onClick(event);
+      }}
+    >
+      {item.time ? (
+        <time className="willa-timeline-time">{item.time}</time>
+      ) : null}
+      <span
+        className={classNames(
+          "willa-timeline-rail",
+          hasIcon && "willa-timeline-rail--with-marker",
+        )}
+        aria-hidden="true"
+      >
+        {hasIcon ? (
+          <span className="willa-timeline-marker">
+            <span className="willa-timeline-icon">{item.icon}</span>
+          </span>
+        ) : null}
+      </span>
+      <article className="willa-timeline-card">
+        <div className="willa-timeline-main">
+          <div className="willa-timeline-heading">
+            <h4 className="willa-timeline-item-title">{item.title}</h4>
+          </div>
+          {item.description ? (
+            <p className="willa-timeline-item-description">
+              {item.description}
+            </p>
+          ) : null}
+          {item.content ? (
+            <div className="willa-timeline-content">{item.content}</div>
+          ) : null}
+          {item.meta ? (
+            <div className="willa-timeline-meta">{item.meta}</div>
+          ) : null}
+        </div>
+        {item.action ? (
+          <div className="willa-timeline-action">{item.action}</div>
+        ) : null}
+      </article>
+    </li>
+  );
+};
+
+Timeline.displayName = "Timeline";

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

@@ -0,0 +1,226 @@
+.willa-toast-viewport {
+  position: fixed;
+  z-index: var(--willa-layer-toast, 1250);
+  display: grid;
+  gap: 0.58rem;
+  box-sizing: border-box;
+  width: min(23rem, calc(100vw - 2rem));
+  max-width: calc(100vw - 2rem);
+  padding: 0;
+  pointer-events: none;
+  font-family: var(--willa-body-font);
+}
+
+.willa-toast-viewport--top-left {
+  top: 1rem;
+  left: 1rem;
+}
+
+.willa-toast-viewport--top-center {
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.willa-toast-viewport--top-right {
+  top: 1rem;
+  right: 1rem;
+}
+
+.willa-toast-viewport--bottom-left {
+  bottom: 1rem;
+  left: 1rem;
+}
+
+.willa-toast-viewport--bottom-center {
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.willa-toast-viewport--bottom-right {
+  right: 1rem;
+  bottom: 1rem;
+}
+
+.willa-toast {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  gap: 0.68rem;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 3.12rem;
+  padding: 0.72rem 0.68rem 0.72rem 0.72rem;
+  border: 1px solid var(--willa-toast-tone-border);
+  border-radius: 8px;
+  background: var(--willa-toast-tone-card-bg);
+  box-shadow: var(--willa-toast-shadow);
+  color: var(--willa-toast-text);
+  pointer-events: auto;
+  animation: willa-toast-enter 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.willa-toast-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.72rem;
+  height: 1.72rem;
+  border-radius: 0.46rem;
+  background: var(--willa-toast-tone-bg);
+  color: var(--willa-toast-tone);
+}
+
+.willa-toast-icon svg,
+.willa-toast-close svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.willa-toast-content {
+  display: grid;
+  min-width: 0;
+  gap: 0.18rem;
+}
+
+.willa-toast-title {
+  color: var(--willa-toast-title);
+  font-size: 0.9rem;
+  font-weight: 560;
+  line-height: 1.34;
+}
+
+.willa-toast-description {
+  color: var(--willa-toast-description);
+  font-size: 0.8rem;
+  line-height: 1.48;
+}
+
+.willa-toast-action,
+.willa-toast-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.7rem;
+  border: 1px solid transparent;
+  border-radius: 0.42rem;
+  background: transparent;
+  color: var(--willa-toast-action-text);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.82rem;
+  line-height: 1;
+  white-space: nowrap;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease;
+}
+
+.willa-toast-action {
+  border-color: var(--willa-toast-action-border);
+  background: var(--willa-toast-action-bg);
+  padding: 0 0.56rem;
+}
+
+.willa-toast-close {
+  width: 1.7rem;
+  padding: 0;
+  color: var(--willa-toast-close-text);
+}
+
+.willa-toast-action:hover {
+  border-color: var(--willa-toast-action-border-hover);
+  background: var(--willa-toast-action-bg-hover);
+  color: var(--willa-toast-control-text-hover);
+}
+
+.willa-toast-close:hover {
+  border-color: var(--willa-toast-control-border-hover);
+  background: var(--willa-toast-control-bg-hover);
+  color: var(--willa-toast-control-text-hover);
+}
+
+.willa-toast-action:focus-visible,
+.willa-toast-close:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-toast--info {
+  --willa-toast-tone: var(--willa-toast-info);
+  --willa-toast-tone-bg: var(--willa-toast-info-bg);
+  --willa-toast-tone-border: var(--willa-toast-info-border);
+  --willa-toast-tone-card-bg: var(--willa-toast-info-card-bg);
+}
+
+.willa-toast--success {
+  --willa-toast-tone: var(--willa-toast-success);
+  --willa-toast-tone-bg: var(--willa-toast-success-bg);
+  --willa-toast-tone-border: var(--willa-toast-success-border);
+  --willa-toast-tone-card-bg: var(--willa-toast-success-card-bg);
+}
+
+.willa-toast--warning {
+  --willa-toast-tone: var(--willa-toast-warning);
+  --willa-toast-tone-bg: var(--willa-toast-warning-bg);
+  --willa-toast-tone-border: var(--willa-toast-warning-border);
+  --willa-toast-tone-card-bg: var(--willa-toast-warning-card-bg);
+}
+
+.willa-toast--error {
+  --willa-toast-tone: var(--willa-toast-error);
+  --willa-toast-tone-bg: var(--willa-toast-error-bg);
+  --willa-toast-tone-border: var(--willa-toast-error-border);
+  --willa-toast-tone-card-bg: var(--willa-toast-error-card-bg);
+}
+
+@keyframes willa-toast-enter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -0.35rem, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-toast-viewport {
+    right: 0.75rem;
+    left: 0.75rem;
+    width: auto;
+    max-width: none;
+    transform: none;
+  }
+
+  .willa-toast-viewport--top-left,
+  .willa-toast-viewport--top-center,
+  .willa-toast-viewport--top-right {
+    top: 0.75rem;
+  }
+
+  .willa-toast-viewport--bottom-left,
+  .willa-toast-viewport--bottom-center,
+  .willa-toast-viewport--bottom-right {
+    bottom: 0.75rem;
+  }
+
+  .willa-toast {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .willa-toast-action {
+    grid-column: 2 / 3;
+    justify-self: start;
+    margin-top: 0.1rem;
+    padding: 0 0.52rem;
+  }
+
+  .willa-toast-close {
+    grid-column: 3 / 4;
+    grid-row: 1 / 2;
+  }
+}