@db-vincent/components 0.0.0-stage → 0.1.0

package/src/astro/Grid.astro

@@ -0,0 +1,50 @@
+---
+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 style = `--grid-columns:${columns};--grid-columns-phone:${phoneColumns};--grid-min:${minItem};--grid-masonry-columns:${columns}`;
+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,23 @@
+---
+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 style = `--grid-item-span:${span};--grid-item-span-phone:${phoneSpan}`;
+---
+
+<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/Modal.astro

@@ -0,0 +1,117 @@
+---
+import Icon from "./Icon.astro";
+import Button from "./Button.astro";
+import "../styles/modal.css";
+
+/**
+ * Modal dialog on native <dialog>. Native showModal() supplies the focus trap,
+ * Escape handling and inert background. The trigger is wired with ARIA; focus
+ * returns to the trigger on close automatically.
+ */
+interface Props {
+  id: string;
+  title: string;
+  description?: string;
+  triggerLabel?: string;
+  triggerVariant?: "primary" | "secondary" | "ghost" | "danger";
+  size?: "sm" | "md" | "lg";
+  variant?: "dialog" | "sheet";
+  class?: string;
+}
+
+const {
+  id,
+  title,
+  description,
+  triggerLabel = "Open dialog",
+  triggerVariant = "secondary",
+  size = "md",
+  variant = "dialog",
+  class: className,
+} = Astro.props;
+
+const titleId = `${id}-title`;
+const descriptionId = description ? `${id}-description` : undefined;
+---
+
+<Button
+  variant={triggerVariant}
+  type="button"
+  data-modal-open={id}
+  aria-haspopup="dialog"
+>
+  {triggerLabel}
+</Button>
+
+<dialog
+  class:list={[
+    "ds-modal",
+    size !== "md" && `ds-modal--${size}`,
+    variant === "sheet" && "ds-modal--sheet",
+    className,
+  ]}
+  id={id}
+  aria-labelledby={titleId}
+  aria-describedby={descriptionId}
+>
+  <div class="ds-modal__header">
+    <div>
+      <h2 class="ds-modal__title" id={titleId}>
+        {title}
+      </h2>
+      {description && (
+        <p class="ds-modal__description" id={descriptionId}>
+          {description}
+        </p>
+      )}
+    </div>
+    <form method="dialog">
+      <button class="ds-modal__close" type="submit" aria-label="Close dialog">
+        <Icon name="x" size={20} />
+      </button>
+    </form>
+  </div>
+  <div class="ds-modal__body">
+    <slot />
+  </div>
+  <slot name="footer" />
+</dialog>
+
+<script>
+  const bind = () => {
+    document
+      .querySelectorAll<HTMLElement>("[data-modal-open]")
+      .forEach((trigger) => {
+        if (trigger.dataset.bound) return;
+        trigger.dataset.bound = "true";
+        const id = trigger.dataset.modalOpen;
+        const dialog = id
+          ? (document.getElementById(id) as HTMLDialogElement | null)
+          : null;
+        if (!dialog) return;
+        trigger.addEventListener("click", () => {
+          dialog.showModal();
+          // Land on an explicit [autofocus], else the first footer action
+          // (Cancel in a destructive dialog), never on the close icon.
+          dialog
+            .querySelector<HTMLElement>(
+              "[autofocus], .ds-modal__footer button, .ds-modal__footer a",
+            )
+            ?.focus();
+        });
+        dialog.addEventListener("click", (event) => {
+          if (event.target !== dialog) return;
+          const rect = dialog.getBoundingClientRect();
+          const inside =
+            event.clientX >= rect.left &&
+            event.clientX <= rect.right &&
+            event.clientY >= rect.top &&
+            event.clientY <= rect.bottom;
+          if (!inside) dialog.close();
+        });
+      });
+  };
+
+  bind();
+  document.addEventListener("astro:page-load", bind);
+</script>