@db-vincent/components 0.0.0-stage → 0.1.1

package/src/astro/Chip.astro

@@ -0,0 +1,135 @@
+---
+import Icon from "./Icon.astro";
+import "../styles/chip.css";
+
+/**
+ * Chip. Renders a span by default. `interactive` renders a toggle button with
+ * aria-pressed; `removable` adds a separate remove button with its own label.
+ */
+interface Props {
+  interactive?: boolean;
+  selected?: boolean;
+  removable?: boolean;
+  disabled?: boolean;
+  removeLabel?: string;
+  href?: string;
+  size?: "sm" | "md";
+  class?: string;
+}
+
+const {
+  interactive = false,
+  selected = false,
+  removable = false,
+  disabled = false,
+  removeLabel,
+  href,
+  size = "md",
+  class: className,
+} = Astro.props;
+
+// The remove button names the item it removes ("Remove 4K"), not just "Remove".
+// The slot HTML is already entity-escaped and Astro escapes the attribute
+// again, so decode before it reaches aria-label.
+const ENTITIES: Record<string, string> = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+};
+const decode = (html: string) =>
+  html.replace(
+    /&(?:#(\d+)|#x([0-9a-f]+)|([a-z]+));/gi,
+    (match, dec, hex, name) => {
+      if (name) return ENTITIES[name.toLowerCase()] ?? match;
+      const code = Number.parseInt(dec ?? hex, dec ? 10 : 16);
+      return code <= 0x10ffff ? String.fromCodePoint(code) : match;
+    },
+  );
+const text = decode(
+  (await Astro.slots.render("default")).replace(/<[^>]+>/g, ""),
+).trim();
+const removeName = removeLabel ?? (text ? `Remove ${text}` : "Remove");
+
+const classes = [
+  "ds-chip",
+  size === "sm" && "ds-chip--sm",
+  selected && "is-selected",
+  disabled && "is-disabled",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+---
+
+{removable ? (
+  <span class={classes}>
+    <slot />
+    <button
+      class="ds-chip__remove"
+      type="button"
+      aria-label={removeName}
+      disabled={disabled}
+      data-chip-remove
+    >
+      <Icon name="x" size={14} />
+    </button>
+  </span>
+) : href ? (
+  <a class={classes} href={href}>
+    <slot />
+  </a>
+) : interactive ? (
+  <button
+    class={classes}
+    type="button"
+    aria-pressed={selected ? "true" : "false"}
+    disabled={disabled}
+    data-chip-toggle
+  >
+    <Icon name="check" size={14} class="ds-chip__check" />
+    <slot />
+  </button>
+) : (
+  <span class={classes}>
+    <slot />
+  </span>
+)}
+
+<script>
+  document.addEventListener("click", (event) => {
+    const target = event.target as HTMLElement;
+    const remove = target.closest<HTMLButtonElement>("[data-chip-remove]");
+    if (remove) {
+      const chip = remove.closest<HTMLElement>(".ds-chip");
+      if (!chip) return;
+      const focusable = (el: Element | null) =>
+        el?.matches("[data-chip-toggle]")
+          ? (el as HTMLElement)
+          : el?.querySelector<HTMLElement>(
+              "[data-chip-remove], [data-chip-toggle]",
+            );
+      const target =
+        focusable(chip.nextElementSibling) ??
+        focusable(chip.previousElementSibling);
+      const fallback = chip.parentElement;
+      chip.remove();
+      if (target) {
+        target.focus();
+      } else if (fallback) {
+        fallback.tabIndex = -1;
+        fallback.focus();
+      }
+      return;
+    }
+
+    const toggle = target.closest<HTMLButtonElement>("[data-chip-toggle]");
+    if (!toggle || toggle.disabled) return;
+    toggle.setAttribute(
+      "aria-pressed",
+      toggle.getAttribute("aria-pressed") === "true" ? "false" : "true",
+    );
+  });
+</script>

package/src/astro/CodeBlock.astro

@@ -0,0 +1,17 @@
+---
+import "../styles/code.css";
+
+/** Code sample. Renders the exact source passed in; no highlighting tricks. */
+interface Props {
+  code?: string;
+  label?: string;
+  class?: string;
+}
+
+const { code, label, class: className } = Astro.props;
+---
+
+<figure class:list={["ds-code", className]}>
+  {label && <figcaption class="ds-code__label">{label}</figcaption>}
+  <pre class="ds-code__pre"><code>{code ?? <slot />}</code></pre>
+</figure>

package/src/astro/Drawer.astro

@@ -0,0 +1,30 @@
+---
+import Modal from "./Modal.astro";
+
+/**
+ * Side drawer: a Modal anchored to the `start` or `end` edge (or `bottom`).
+ * Same native <dialog> behaviour, styles and script as Modal; this wrapper only
+ * changes the defaults.
+ */
+interface Props {
+  id: string;
+  title: string;
+  description?: string;
+  triggerLabel?: string;
+  triggerVariant?: "primary" | "secondary" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  placement?: "start" | "end" | "bottom";
+  class?: string;
+}
+
+const {
+  triggerLabel = "Open drawer",
+  placement = "end",
+  ...rest
+} = Astro.props;
+---
+
+<Modal {...rest} triggerLabel={triggerLabel} placement={placement}>
+  <slot />
+  <slot name="footer" slot="footer" />
+</Modal>

package/src/astro/EmptyState.astro

@@ -0,0 +1,45 @@
+---
+import Icon from "./Icon.astro";
+import Skeleton from "./Skeleton.astro";
+import "../styles/empty.css";
+
+/**
+ * Empty state. Says what is missing, why it matters, and the next action.
+ * `dashed` frames the region; `skeleton` previews the shape of the content
+ * that will replace it.
+ */
+interface Props {
+  icon?: string;
+  title: string;
+  message: string;
+  dashed?: boolean;
+  skeleton?: boolean;
+  class?: string;
+}
+
+const {
+  icon = "inbox",
+  title,
+  message,
+  dashed = false,
+  skeleton = false,
+  class: className,
+} = Astro.props;
+---
+
+<div class:list={["ds-empty", dashed && "ds-empty--dashed", className]}>
+  <span class="ds-empty__icon" aria-hidden="true">
+    <Icon name={icon} size={24} />
+  </span>
+  {skeleton && (
+    <div class="ds-empty__skeleton" aria-hidden="true">
+      <Skeleton variant="heading" />
+      <Skeleton lines={2} />
+    </div>
+  )}
+  <h3 class="ds-empty__title">{title}</h3>
+  <p class="ds-empty__body">{message}</p>
+  <div class="ds-empty__actions">
+    <slot />
+  </div>
+</div>

package/src/astro/Example.astro

@@ -0,0 +1,37 @@
+---
+import CodeBlock from "./CodeBlock.astro";
+import "../styles/example.css";
+
+/**
+ * A live example and the exact source that produced it. Every specimen in the
+ * explorer goes through this component so no demo can drift from its code.
+ */
+interface Props {
+  title: string;
+  code: string;
+  description?: string;
+  flush?: boolean;
+  class?: string;
+}
+
+const {
+  title,
+  code,
+  description,
+  flush = false,
+  class: className,
+} = Astro.props;
+---
+
+<figure class:list={["ds-example", className]}>
+  <figcaption class="ds-example__caption">
+    <span class="ds-example__title">{title}</span>
+    {description && <span class="ds-example__description">{description}</span>}
+  </figcaption>
+  <div
+    class:list={["ds-example__preview", flush && "ds-example__preview--flush"]}
+  >
+    <slot />
+  </div>
+  <CodeBlock label="Astro" code={code} />
+</figure>

package/src/astro/Grid.astro

@@ -0,0 +1,56 @@
+---
+import "../styles/grid.css";
+
+interface Props {
+  columns?: number;
+  phoneColumns?: number;
+  gap?: "sm" | "md" | "lg";
+  auto?: boolean;
+  masonry?: boolean;
+  minItem?: string;
+  container?: boolean;
+  as?: string;
+  class?: string;
+}
+
+const {
+  columns = 12,
+  phoneColumns = 1,
+  gap = "md",
+  auto = false,
+  masonry = false,
+  minItem = "16rem",
+  container = false,
+  as: Tag = "div",
+  class: className,
+} = Astro.props;
+
+const safeLength = (v: string | undefined, fallback?: string) =>
+  v && /^\d+(\.\d+)?(rem|em|px|%|ch|vw|vh)$/.test(v) ? v : fallback;
+const safeInt = (n: number, fallback: number) =>
+  Number.isFinite(n) ? Math.max(1, Math.floor(n)) : fallback;
+const cols = safeInt(columns, 12);
+const phoneCols = safeInt(phoneColumns, 1);
+const style = `--grid-columns:${cols};--grid-columns-phone:${phoneCols};--grid-min:${safeLength(minItem, "16rem")};--grid-masonry-columns:${cols}`;
+const classes = [
+  "ds-grid",
+  gap !== "md" && `ds-grid--gap-${gap}`,
+  auto && "ds-grid--auto",
+  masonry && "ds-grid--masonry",
+  className,
+]
+  .filter(Boolean)
+  .join(" ");
+---
+
+{container ? (
+  <div class="ds-grid__container">
+    <Tag class={classes} style={style}>
+      <slot />
+    </Tag>
+  </div>
+) : (
+  <Tag class={classes} style={style}>
+    <slot />
+  </Tag>
+)}

package/src/astro/GridItem.astro

@@ -0,0 +1,25 @@
+---
+import "../styles/grid.css";
+
+interface Props {
+  span?: number;
+  phoneSpan?: number;
+  as?: string;
+  class?: string;
+}
+
+const {
+  span = 1,
+  phoneSpan = 1,
+  as: Tag = "div",
+  class: className,
+} = Astro.props;
+
+const safeInt = (n: number, fallback: number) =>
+  Number.isFinite(n) ? Math.max(1, Math.floor(n)) : fallback;
+const style = `--grid-item-span:${safeInt(span, 1)};--grid-item-span-phone:${safeInt(phoneSpan, 1)}`;
+---
+
+<Tag class:list={["ds-grid__item", className]} style={style}>
+  <slot />
+</Tag>

package/src/astro/Icon.astro

@@ -0,0 +1,52 @@
+---
+/**
+ * Functional icon set. Decorative by default (aria-hidden). Pass `label` only
+ * when the icon is the entire accessible name, e.g. an icon-only button.
+ * Icons are 24×24, stroke-based, and inherit the current text color.
+ */
+import { ICONS } from "../data/icons";
+
+interface Props {
+  name: string;
+  size?: number | string;
+  stroke?: number;
+  label?: string;
+  class?: string;
+}
+
+const { name, size = 16, stroke, label, class: className } = Astro.props;
+
+/* Three sizes carry the whole interface: 14 (inline with small text and
+   inside compact controls), 16 (default), 20 (status and dialog chrome).
+   24 is reserved for empty states. The stroke is derived from the size so
+   every icon renders at the same optical weight (about 1.2-1.5px). */
+const px = typeof size === "number" ? size : Number.parseFloat(size) || 16;
+const OPTICAL_STROKE: Record<number, number> = {
+  14: 2,
+  16: 1.75,
+  20: 1.6,
+  24: 1.5,
+};
+const strokeWidth = stroke ?? OPTICAL_STROKE[px] ?? (px <= 14 ? 2 : 1.6);
+
+const paths = ICONS[name];
+if (!paths) {
+  throw new Error(`Icon: unknown name "${name}".`);
+}
+---
+
+<svg
+  class:list={["ds-icon", className]}
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width={strokeWidth}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  role={label ? "img" : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : "true"}
+  set:html={paths}
+/>

package/src/astro/Menu.astro

@@ -0,0 +1,151 @@
+---
+import Button from "./Button.astro";
+import MenuItem from "./MenuItem.astro";
+import "../styles/popover.css";
+import "../styles/menu.css";
+
+/**
+ * Menu: a trigger button and a list of commands in a native popover. Opens
+ * with Enter, Space or the arrow keys; arrows, Home, End and typing move
+ * between items; Escape closes and returns focus to the trigger; Tab closes.
+ * Picking an item fires `ds-menu-select` on the root with `detail.value`
+ * (and `detail.checked` for checkbox and radio items), then closes.
+ *
+ *   <Menu triggerLabel="Actions" items={[
+ *     { value: "restart", label: "Restart" },
+ *     { type: "separator" },
+ *     { value: "delete", label: "Delete", danger: true },
+ *   ]} />
+ */
+interface Item {
+  value: string;
+  label: string;
+  icon?: string;
+  /** Renders a link instead of a button. */
+  href?: string;
+  disabled?: boolean;
+  danger?: boolean;
+}
+
+interface CheckItem {
+  type: "checkbox";
+  value: string;
+  label: string;
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+interface RadioItem {
+  type: "radio";
+  value: string;
+  label: string;
+  checked?: boolean;
+  disabled?: boolean;
+}
+
+interface Separator {
+  type: "separator";
+}
+
+interface Group {
+  type: "group";
+  label: string;
+  items: (Item | CheckItem | RadioItem)[];
+}
+
+type Entry = Item | CheckItem | RadioItem | Separator | Group;
+
+interface Props {
+  items: Entry[];
+  /** Trigger text, or its accessible name when `triggerIcon` is set. */
+  triggerLabel?: string;
+  /** Icon-only trigger, for example "more-horizontal". */
+  triggerIcon?: string;
+  triggerVariant?: "primary" | "secondary" | "ghost" | "danger";
+  placement?: "top" | "bottom" | "start" | "end";
+  id?: string;
+  class?: string;
+}
+
+const {
+  items,
+  triggerLabel = "Actions",
+  triggerIcon,
+  triggerVariant = "secondary",
+  placement = "bottom",
+  id,
+  class: className,
+} = Astro.props;
+
+const rootId = id ?? `menu-${Math.random().toString(36).slice(2, 9)}`;
+const surfaceId = `${rootId}-surface`;
+const triggerId = `${rootId}-trigger`;
+
+const isGroup = (entry: Entry): entry is Group =>
+  "type" in entry && entry.type === "group";
+const isSeparator = (entry: Entry): entry is Separator =>
+  "type" in entry && entry.type === "separator";
+---
+
+<span class="ds-anchor" id={rootId} data-ds-menu>
+  <Button
+    id={triggerId}
+    variant={triggerVariant}
+    type="button"
+    popovertarget={surfaceId}
+    aria-haspopup="menu"
+    aria-expanded="false"
+    aria-controls={surfaceId}
+    iconOnly={Boolean(triggerIcon)}
+    ariaLabel={triggerIcon ? triggerLabel : undefined}
+    icon={triggerIcon ?? "chevron-down"}
+    iconPosition="end"
+  >
+    {!triggerIcon && triggerLabel}
+  </Button>
+  <div
+    class:list={[
+      "ds-popover",
+      "ds-menu",
+      `ds-popover--${placement}`,
+      className,
+    ]}
+    id={surfaceId}
+    popover="auto"
+    role="menu"
+    tabindex="-1"
+    aria-labelledby={triggerId}
+  >
+    {items.map((entry, index) =>
+      isSeparator(entry) ? (
+        <div class="ds-menu__separator" role="separator" />
+      ) : isGroup(entry) ? (
+        <div role="group" aria-labelledby={`${rootId}-group-${index}`}>
+          <div class="ds-menu__label" id={`${rootId}-group-${index}`}>
+            {entry.label}
+          </div>
+          {entry.items.map((item) => (
+            <MenuItem {...item} />
+          ))}
+        </div>
+      ) : (
+        <MenuItem {...entry} />
+      ),
+    )}
+  </div>
+</span>
+
+<script>
+  import { mountMenu } from "../scripts/menu";
+
+  const bind = () => {
+    document.querySelectorAll<HTMLElement>("[data-ds-menu]").forEach((root) => {
+      if (root.dataset.dsBound) return;
+      root.dataset.dsBound = "true";
+      mountMenu(root);
+    });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>

package/src/astro/MenuItem.astro

@@ -0,0 +1,57 @@
+---
+import Icon from "./Icon.astro";
+
+/** One row of a Menu. Internal: use Menu with an `items` array. */
+interface Props {
+  type?: "item" | "checkbox" | "radio";
+  value: string;
+  label: string;
+  icon?: string;
+  href?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  danger?: boolean;
+}
+
+const {
+  type = "item",
+  value,
+  label,
+  icon,
+  href,
+  checked = false,
+  disabled = false,
+  danger = false,
+} = Astro.props;
+
+const role =
+  type === "checkbox"
+    ? "menuitemcheckbox"
+    : type === "radio"
+      ? "menuitemradio"
+      : "menuitem";
+const Tag = href && type === "item" ? "a" : "button";
+---
+
+<Tag
+  class:list={["ds-menu__item", danger && "ds-menu__item--danger"]}
+  role={role}
+  tabindex="-1"
+  type={Tag === "button" ? "button" : undefined}
+  href={Tag === "a" && !disabled ? href : undefined}
+  aria-checked={type === "item" ? undefined : String(checked)}
+  aria-disabled={disabled ? "true" : undefined}
+  data-value={value}
+>
+  {type !== "item" && (
+    <span class="ds-menu__indicator" aria-hidden="true">
+      <Icon name="check" size={16} />
+    </span>
+  )}
+  {icon && (
+    <span class="ds-menu__icon" aria-hidden="true">
+      <Icon name={icon} size={16} />
+    </span>
+  )}
+  {label}
+</Tag>