@heyramzi/ui 0.0.0-stage → 6.1.0

package/src/showcase/showcase-shell.css

@@ -0,0 +1,91 @@
+/* Chrome for ShowcaseShell.
+   Plain colocated CSS rather than a <style> block: a <style> becomes a
+   ?type=style&lang.css virtual module that Tailwind v4 mis-parses when this
+   package is consumed as source out of node_modules. Every selector is
+   namespaced under .sc-shell, because without a Svelte scope hash there is
+   nothing else keeping two components apart. */
+
+.sc-shell {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* Provenance beside a name: "shadcn" on a primitive taken as is, so the reader
+   knows a fix goes upstream and not into the kit. Lives here rather than in the
+   stage and the list because both draw it and neither owns it. */
+.sc-tag {
+  display: inline-block;
+  vertical-align: 0.1em;
+  padding: 0 0.375rem;
+  border: 1px solid color-mix(in oklab, var(--color-border, var(--border)) 90%, transparent);
+  border-radius: 999px;
+  font-size: 0.5625rem;
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-muted-foreground, var(--muted-foreground));
+  white-space: nowrap;
+}
+
+.sc-shell-controls {
+  position: sticky;
+  top: var(--showcase-nav-top, 0px);
+  z-index: 30;
+  padding: 0.75rem 0;
+  background: var(--color-background, var(--background));
+  border-bottom: 1px solid var(--color-border, var(--border));
+}
+
+.sc-shell-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  min-width: 0;
+}
+
+.sc-shell-rail-head {
+  padding: 1.25rem 0.75rem 0 0;
+}
+
+/* WHY the rail only exists above 60rem: below it there is not enough width for
+   both a 12rem index and a stage a component can be judged in, and the stage is
+   the point of the page. On a phone the section headings are the index. */
+@media (min-width: 60rem) {
+  .sc-shell-body {
+    grid-template-columns: 12.5rem minmax(0, 1fr);
+    gap: 2.5rem;
+  }
+
+  /* WHY no rule down the inside edge: the rail is only as tall as its own list,
+     so the rule stopped level with the last section and read as a stray bar
+     hanging in the middle of a page eighty stages long. The 2.5rem gutter and
+     the filled active row are what separate the index from the work. */
+  .sc-shell-rail {
+    position: sticky;
+    top: calc(var(--showcase-nav-top, 0px) + 3.25rem);
+    align-self: start;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 59.99rem) {
+  .sc-shell-rail {
+    display: none;
+  }
+}
+
+.sc-shell-main {
+  min-width: 0;
+  /* Numbering is a counter rather than a prop, so a stage added to a section
+     renumbers the page without the page being told about it. */
+  counter-reset: sc-stage;
+}
+
+.sc-shell-override {
+  padding-top: 1.25rem;
+  /* Search results are stages too, and they number from one. Without this the
+     counter is instantiated on the root and every result reads 01. */
+  counter-reset: sc-stage;
+}

package/src/showcase/stacked-section.css

@@ -0,0 +1,15 @@
+/* One demo per row, the rule ShowcaseSection states for `.sc-stack`: in a grid
+   of narrow cards a table gets the width of a button. The dashed rule is a
+   separator, not a card edge — these are entries in one list. */
+.sc-stacked {
+  display: flex;
+  flex-direction: column;
+}
+
+.sc-stacked > .sc-stage {
+  border-bottom: 1px dashed color-mix(in oklab, var(--color-border, var(--border)) 80%, transparent);
+}
+
+.sc-stacked > .sc-stage:last-child {
+  border-bottom: 0;
+}

package/src/showcase/success-check.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 48 48" fill="none"><path d="M14 25 L21 32 L34 16" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></svg>

package/src/showcase/types.ts

@@ -0,0 +1,29 @@
+/**
+ * A section of a component showcase, as the nav rail needs to know it.
+ */
+
+/*
+ * `demos` and `listed` are counted by the page, not derived here: only the page knows which of its components it has written a demo for.
+ */
+export interface ShowcaseSectionMeta {
+  /** Anchor id. Must match the `id` given to the matching ShowcaseSection. */
+  id: string;
+  /** Rail label, e.g. "Overlays". */
+  label: string;
+  /** How many components in the section render live. */
+  demos: number;
+  /** How many are listed by name only. */
+  listed: number;
+  /**
+   * The rail heading this section files under, e.g. "Kit" or "Primitives".
+   */
+
+  /*
+   * Consecutive sections sharing a group are drawn under one heading; a section with no group sits above the first heading.
+   */
+
+  /*
+   * Order comes from the array, so a group is a run rather than a key to sort by.
+   */
+  group?: string;
+}

package/src/svg-raw.d.ts

@@ -0,0 +1,7 @@
+/**
+ * An SVG's markup, inlined as a string at build time by the consumer's Vite.
+ */
+declare module "*.svg?raw" {
+  const content: string;
+  export default content;
+}

package/src/test-setup.ts

@@ -0,0 +1,34 @@
+// WHY a setup file and not a beforeAll: layerchart and svelte/motion call
+
+// matchMedia while their module evaluates, which happens on import, before any hook runs. jsdom ships none of these, and bits-ui and embla measure with them.
+class ObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return [];
+  }
+}
+
+globalThis.ResizeObserver ??= ObserverStub as unknown as typeof ResizeObserver;
+globalThis.IntersectionObserver ??= ObserverStub as unknown as typeof IntersectionObserver;
+
+globalThis.matchMedia ??= ((query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addEventListener() {},
+  removeEventListener() {},
+  addListener() {},
+  removeListener() {},
+  dispatchEvent: () => false,
+})) as typeof globalThis.matchMedia;
+
+// jsdom lays out nothing, so an SVG path has no length to give. The success
+// check reads one to set its dash offset.
+if (globalThis.SVGElement && !("getTotalLength" in globalThis.SVGElement.prototype)) {
+  Object.defineProperty(globalThis.SVGElement.prototype, "getTotalLength", {
+    value: () => 100,
+    configurable: true,
+  });
+}