basis-design 0.0.0-stage → 0.1.0

package/template/patterns/Composer.module.css

@@ -0,0 +1,184 @@
+.root {
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+  font-family: var(--font-sans);
+}
+
+.composer {
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+  padding: var(--space-3);
+  border: var(--input-border-width) solid var(--input-border-color);
+  border-radius: var(--radius-lg);
+  background: var(--input-bg);
+  box-shadow: var(--shadow-sm);
+  cursor: text;
+  transition: var(--input-transition);
+}
+
+.composer:hover:not([data-disabled], :focus-within) {
+  border-color: var(--input-border-color-hover);
+}
+
+.composer:focus-within,
+.composer[data-force="focus"] {
+  border-color: var(--color-focus-ring);
+  box-shadow:
+    var(--shadow-sm),
+    0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--color-focus-ring) 30%, transparent);
+}
+
+.composer[data-disabled] {
+  border-color: var(--color-border);
+  background: var(--color-disabled-bg);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.field {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(var(--composer-rows, 8) * 1lh + var(--space-1));
+  margin: 0;
+  padding: var(--space-1) var(--space-1) 0;
+  border: 0;
+  background: transparent;
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: var(--input-font-size);
+  line-height: var(--leading-normal);
+  overflow-y: auto;
+  resize: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.field::placeholder {
+  color: var(--color-text-subtle);
+}
+
+.field:disabled {
+  color: var(--color-disabled-text);
+  cursor: not-allowed;
+}
+
+.attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  cursor: default;
+}
+
+.attachment {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  max-width: 240px;
+  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
+  border: var(--border-thin) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-sunken);
+  color: var(--color-text);
+  font-size: var(--text-sm);
+}
+
+.fileIcon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+}
+
+.fileText {
+  display: grid;
+  min-width: 0;
+  line-height: var(--leading-snug);
+}
+
+.fileName {
+  overflow: hidden;
+  font-weight: var(--weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fileMeta {
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+}
+
+.attachment[data-uploading] .fileName {
+  color: var(--color-text-muted);
+}
+
+.remove {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.remove:hover:not(:disabled) {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.remove:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-focus-ring);
+  outline-offset: 1px;
+}
+
+.remove:disabled {
+  cursor: not-allowed;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.spacer {
+  flex: 1;
+}
+
+/* Square icon buttons; the attribute keeps this ahead of the button's own size rules. */
+.toolbar .iconButton[data-ds="button"] {
+  width: var(--button-height-sm);
+  padding-inline: 0;
+}
+
+.stop {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-xs);
+  background: currentColor;
+}
+
+.footer {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  line-height: var(--leading-snug);
+  text-align: center;
+}

package/template/patterns/Composer.specimen.tsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { Button } from "../components/index.ts";
+import { defineSpecimen } from "../components/specimen.ts";
+import { Composer, type ComposerAttachment, type ComposerProps } from "./Composer.tsx";
+import { Icon } from "./icons.tsx";
+
+const FILES: ComposerAttachment[] = [
+  { id: "a1", name: "churn-report-q3.pdf", meta: "PDF · 2.4 MB" },
+  { id: "a2", name: "survey-responses.csv", meta: "CSV · 380 KB" },
+];
+
+const LONG =
+  "Here is what I need for the board update on Thursday.\n\n" +
+  "1. A one-paragraph summary of why churn rose in September, using the attached report.\n" +
+  "2. The three customer quotes from the survey that explain it best.\n" +
+  "3. What we already changed in onboarding, and what we plan next quarter.\n" +
+  "4. One chart: monthly churn for the last twelve months, with the pricing change marked.\n\n" +
+  "Keep it under a page, plain language, no internal team names. If something in the data looks off, " +
+  "point it out instead of smoothing it over.";
+
+const mode = (
+  <Button variant="ghost" size="sm">
+    Balanced
+    <Icon name="chevron-down" size={12} />
+  </Button>
+);
+
+/** A composer that keeps its own text and attachments, so every state can be typed in and sent. */
+function Live({
+  text = "",
+  files = [],
+  ...rest
+}: Omit<ComposerProps, "value" | "attachments"> & { text?: string; files?: ComposerAttachment[] }) {
+  const [value, setValue] = useState(text);
+  const [attachments, setAttachments] = useState(files);
+  return (
+    <Composer
+      value={value}
+      onValueChange={setValue}
+      onSubmit={() => {
+        setValue("");
+        setAttachments([]);
+      }}
+      attachments={attachments}
+      onAttach={() =>
+        setAttachments((current) => [
+          ...current,
+          { id: `f${current.length + 1}`, name: `notes-${current.length + 1}.md`, meta: "Markdown · 4 KB" },
+        ])
+      }
+      onRemoveAttachment={(id) => setAttachments((current) => current.filter((file) => file.id !== id))}
+      tools={mode}
+      {...rest}
+    />
+  );
+}
+
+/** Stop ends the reply, after which the composer can send again. */
+function Replying() {
+  const [busy, setBusy] = useState(true);
+  return <Live busy={busy} onStop={() => setBusy(false)} placeholder="Reply…" />;
+}
+
+export default defineSpecimen({
+  id: "composer",
+  title: "Composer",
+  group: "Chat",
+  description:
+    "Where a message is written. The field grows with its content, Enter sends and Shift+Enter starts a new line. " +
+    "While a reply is on its way, Send becomes Stop.",
+  order: 74,
+  blocks: [
+    {
+      kind: "states",
+      states: [
+        { label: "empty", render: () => <Live placeholder="Ask anything about your workspace…" /> },
+        {
+          label: "written",
+          render: () => <Live text="Summarise the open support tickets from this week, grouped by product area." />,
+        },
+        {
+          label: "attachments",
+          render: () => (
+            <Live
+              text="What explains the rise in churn?"
+              files={[...FILES, { id: "a3", name: "interviews.docx", meta: "Uploading…", uploading: true }]}
+            />
+          ),
+        },
+        {
+          label: "replying",
+          render: Replying,
+        },
+        {
+          label: "focus",
+          render: () => <Live force="focus" footer="Answers can be wrong. Check anything important." />,
+        },
+        {
+          label: "disabled",
+          render: () => <Live disabled placeholder="You have used this month's messages. They renew on the 1st." />,
+        },
+        { label: "long content", render: () => <Live text={LONG} files={FILES} maxRows={6} /> },
+      ],
+    },
+  ],
+});

package/template/patterns/Composer.tsx

@@ -0,0 +1,183 @@
+import { useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from "react";
+import { Button, Spinner } from "../components/index.ts";
+import { Icon } from "./icons.tsx";
+import styles from "./Composer.module.css";
+
+export interface ComposerAttachment {
+  id: string;
+  name: string;
+  /** Type and size, such as "PDF · 2.4 MB". */
+  meta?: string;
+  /** Still uploading: shows a spinner and holds Send back until it is done. */
+  uploading?: boolean;
+}
+
+export interface ComposerProps {
+  /** The text, for a controlled composer. Leave it out and the composer keeps its own. */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** Enter or the Send button. A composer that keeps its own text clears it afterwards. */
+  onSubmit?: (text: string) => void;
+  placeholder?: string;
+  /** Accessible name of the text field; defaults to the placeholder. */
+  label?: string;
+  attachments?: ComposerAttachment[];
+  /** Shows the attach button. */
+  onAttach?: () => void;
+  onRemoveAttachment?: (id: string) => void;
+  /** A reply is on its way: Send becomes Stop (with `onStop`) and Enter no longer sends. */
+  busy?: boolean;
+  onStop?: () => void;
+  disabled?: boolean;
+  /** Controls at the start of the toolbar, such as a mode picker. */
+  tools?: ReactNode;
+  /** A line under the composer: a disclaimer, a limit or a hint. */
+  footer?: ReactNode;
+  /** Rows the field grows to before it scrolls. */
+  maxRows?: number;
+  autoFocus?: boolean;
+  /** Pins the focus ring, for the gallery. */
+  force?: "focus";
+}
+
+/** Where a message is written: a text field that grows with its content, attachments, and Send or Stop. */
+export function Composer({
+  value,
+  onValueChange,
+  onSubmit,
+  placeholder = "Write a message…",
+  label,
+  attachments = [],
+  onAttach,
+  onRemoveAttachment,
+  busy = false,
+  onStop,
+  disabled = false,
+  tools,
+  footer,
+  maxRows = 8,
+  autoFocus,
+  force,
+}: ComposerProps) {
+  const [own, setOwn] = useState("");
+  const text = value ?? own;
+  const field = useRef<HTMLTextAreaElement>(null);
+
+  // Grow with the content up to maxRows (capped in CSS), then scroll.
+  useLayoutEffect(() => {
+    const element = field.current;
+    if (!element) return;
+    element.style.height = "auto";
+    element.style.height = `${element.scrollHeight}px`;
+  }, [text, maxRows]);
+
+  const change = (next: string) => {
+    if (value === undefined) setOwn(next);
+    onValueChange?.(next);
+  };
+
+  const uploading = attachments.some((attachment) => attachment.uploading);
+  const canSend = !disabled && !busy && !uploading && (text.trim() !== "" || attachments.length > 0);
+
+  const submit = () => {
+    if (!canSend) return;
+    onSubmit?.(text);
+    if (value === undefined) setOwn("");
+  };
+
+  const keyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+    event.preventDefault();
+    submit();
+  };
+
+  return (
+    <div className={styles.root} data-ds="composer">
+      <div
+        className={styles.composer}
+        data-busy={busy || undefined}
+        data-disabled={disabled || undefined}
+        data-force={force}
+        style={{ "--composer-rows": maxRows } as CSSProperties}
+        onMouseDown={(event) => {
+          // A click on the padding or the empty toolbar puts the caret in the field.
+          if ((event.target as HTMLElement).closest("button, a, input, select, textarea, label, li")) return;
+          event.preventDefault();
+          field.current?.focus();
+        }}
+      >
+        {attachments.length > 0 && (
+          <ul className={styles.attachments} aria-label="Attachments">
+            {attachments.map((attachment) => (
+              <li key={attachment.id} className={styles.attachment} data-uploading={attachment.uploading || undefined}>
+                <span className={styles.fileIcon}>
+                  {attachment.uploading ? <Spinner size={14} /> : <Icon name="file" size={14} />}
+                </span>
+                <span className={styles.fileText}>
+                  <span className={styles.fileName}>{attachment.name}</span>
+                  {attachment.meta && <span className={styles.fileMeta}>{attachment.meta}</span>}
+                </span>
+                {onRemoveAttachment && (
+                  <button
+                    type="button"
+                    className={styles.remove}
+                    aria-label={`Remove ${attachment.name}`}
+                    disabled={disabled}
+                    onClick={() => onRemoveAttachment(attachment.id)}
+                  >
+                    <Icon name="close" size={12} />
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+        <textarea
+          ref={field}
+          className={styles.field}
+          rows={1}
+          value={text}
+          placeholder={placeholder}
+          aria-label={label ?? placeholder}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          onChange={(event) => change(event.target.value)}
+          onKeyDown={keyDown}
+        />
+        <div className={styles.toolbar}>
+          {onAttach && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className={styles.iconButton}
+              aria-label="Attach files"
+              disabled={disabled}
+              onClick={onAttach}
+            >
+              <Icon name="plus" />
+            </Button>
+          )}
+          {tools}
+          <span className={styles.spacer} />
+          {busy && onStop ? (
+            <Button variant="secondary" size="sm" className={styles.iconButton} aria-label="Stop" onClick={onStop}>
+              <span className={styles.stop} />
+            </Button>
+          ) : (
+            <Button
+              size="sm"
+              className={styles.iconButton}
+              aria-label="Send"
+              disabled={!canSend}
+              loading={busy}
+              onClick={submit}
+            >
+              <Icon name="arrow-up" />
+            </Button>
+          )}
+        </div>
+      </div>
+      {footer && <p className={styles.footer}>{footer}</p>}
+    </div>
+  );
+}

package/template/patterns/DataTable.module.css

@@ -0,0 +1,190 @@
+.frame {
+  --_cell-y: var(--space-3);
+  --_cell-x: var(--space-4);
+
+  overflow: hidden;
+  border: var(--card-border-width) solid var(--color-border);
+  border-radius: var(--card-radius);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+}
+
+.frame[data-density="compact"] {
+  --_cell-y: var(--space-2);
+  --_cell-x: var(--space-3);
+}
+
+.scroll {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  line-height: var(--leading-snug);
+}
+
+.caption {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.table th,
+.table td {
+  padding: var(--_cell-y) var(--_cell-x);
+  border-bottom: var(--border-thin) solid var(--color-border);
+  text-align: left;
+  vertical-align: middle;
+}
+
+.table th {
+  background: var(--color-surface-sunken);
+  color: var(--color-text-muted);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.table [data-align="end"] {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.table tbody tr {
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.table tbody tr:hover,
+.table tbody tr[data-force="hover"] {
+  background: color-mix(in srgb, var(--color-secondary) 60%, transparent);
+}
+
+.table tbody tr[data-selected] {
+  background: var(--color-primary-subtle);
+}
+
+.check {
+  width: 1%;
+  padding-right: 0 !important;
+}
+
+.sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  margin: -2px -4px;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+
+.sort svg {
+  opacity: 0.5;
+}
+
+.sort:hover,
+.sort[data-active] {
+  color: var(--color-text);
+}
+
+.sort[data-active] svg {
+  opacity: 1;
+}
+
+.sort:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.empty {
+  padding: var(--space-10) var(--_cell-x) !important;
+  color: var(--color-text-muted);
+  text-align: center !important;
+}
+
+.footer {
+  padding: var(--space-2) var(--_cell-x);
+  border-top: var(--border-thin) solid var(--color-border);
+}
+
+/* Pagination */
+
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  font-family: var(--font-sans);
+}
+
+.summary {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.pages {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  margin-left: auto;
+}
+
+.page {
+  display: grid;
+  place-items: center;
+  min-width: var(--button-height-sm);
+  height: var(--button-height-sm);
+  padding: 0 var(--space-2);
+  border: 0;
+  border-radius: var(--button-radius);
+  background: transparent;
+  color: var(--color-text-muted);
+  font: inherit;
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+
+.page:hover {
+  background: var(--color-secondary);
+  color: var(--color-text);
+}
+
+.page[aria-current="page"] {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
+  font-weight: var(--weight-semibold);
+}
+
+.page:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.gap {
+  min-width: 20px;
+  color: var(--color-text-subtle);
+  text-align: center;
+}