@dxlbnl/ui 0.1.0

package/dist/components/cards/ProductCard.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements'
+  import Card from './Card.svelte'
+  import Stack from '../layout/Stack.svelte'
+  import Spread from '../layout/Spread.svelte'
+  import Inline from '../layout/Inline.svelte'
+  import Led from '../primitives/Led.svelte'
+  import Text from '../primitives/Text.svelte'
+  import Heading from '../primitives/Heading.svelte'
+
+  type StockStatus = 'in-stock' | 'coming-soon' | 'low-stock' | 'out-of-stock'
+
+  interface Props extends HTMLAnchorAttributes {
+    /** HTML element to render as. @default 'a' */
+    as?: string
+    /** Product SKU code, shown in the card header. */
+    sku: string
+    /** Product display name. */
+    name: string
+    /** Short product description. */
+    description: string
+    /** Formatted price string (e.g. `'€200'`). */
+    price?: string
+    /** Inventory status — drives the LED colour and CTA label. @default 'out-of-stock' */
+    status?: StockStatus
+    /** Override the generated CTA label. */
+    ctaLabel?: string
+    [key: string]: unknown
+  }
+
+  let {
+    as = 'a',
+    sku,
+    name,
+    description,
+    price,
+    status = 'out-of-stock',
+    ctaLabel,
+    ...rest
+  }: Props = $props()
+
+  const ledColor = $derived(
+    status === 'in-stock' ? 'ok' : status === 'out-of-stock' ? 'off' : 'amber'
+  )
+
+  const stockLabel = $derived(
+    status === 'in-stock'
+      ? 'In Stock'
+      : status === 'coming-soon'
+        ? 'Coming Soon'
+        : status === 'low-stock'
+          ? 'Low Stock'
+          : 'Out of Stock'
+  )
+
+  const resolvedCtaLabel = $derived(
+    ctaLabel ??
+      (status === 'in-stock' || status === 'low-stock'
+        ? 'BUY NOW'
+        : status === 'coming-soon'
+          ? 'PRE-ORDER'
+          : 'VIEW DETAILS')
+  )
+</script>
+
+<Card as={as} class="product-card" {...rest}>
+  <div class="card-img">
+    <Text variant="mono" color="faint">{sku} · PRODUCT</Text>
+  </div>
+  <div class="card-body">
+    <Stack gap="xs">
+      <Text variant="eyebrow">{sku}</Text>
+      <Heading level={3} size="lg">{name}</Heading>
+      <Text variant="mono" case="none" color="dim" class="card-desc">{description}</Text>
+      <div class="card-footer-row">
+        <Spread>
+          {#if price}
+            <Inline gap="xs" align="baseline">
+              <Text variant="mono" color="amber" size="md">{price}</Text>
+              <Text variant="mono" color="faint" size="xs" case="lower">incl. VAT</Text>
+            </Inline>
+          {/if}
+          <Inline gap="xs">
+            <Led color={ledColor} aria-hidden="true" />
+            <Text variant="mono" size="xs">{stockLabel}</Text>
+          </Inline>
+        </Spread>
+      </div>
+    </Stack>
+  </div>
+  <div class="card-cta">
+    <Spread>
+      <Text variant="mono">{resolvedCtaLabel}</Text>
+      <span aria-hidden="true">→</span>
+    </Spread>
+  </div>
+</Card>
+
+<style>
+  .card-body {
+    padding: 12px 14px 10px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-footer-row {
+    align-items: baseline;
+    margin-top: auto;
+    padding-top: 8px;
+    display: flex;
+    justify-content: space-between;
+    gap: var(--u2);
+  }
+
+  /* :global needed — .product-card is on Card's root, invisible to Svelte's scoped CSS analysis */
+  :global(.product-card) {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .card-img {
+    aspect-ratio: 14 / 9;
+    background: repeating-linear-gradient(
+      135deg,
+      var(--bg-sunken) 0 10px,
+      var(--bg-elev) 10px 20px
+    );
+    border-bottom: 1px solid var(--rule);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.card-desc) {
+    line-height: 1.4;
+  }
+
+  .card-cta {
+    border-top: 1px solid var(--rule);
+    padding: 10px 14px;
+    transition: background var(--transition), color var(--transition);
+  }
+
+  :global(.product-card):hover .card-cta {
+    background: var(--amber);
+    color: var(--bg);
+  }
+</style>

package/dist/components/cards/ProductCard.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type StockStatus = 'in-stock' | 'coming-soon' | 'low-stock' | 'out-of-stock';
+interface Props extends HTMLAnchorAttributes {
+    /** HTML element to render as. @default 'a' */
+    as?: string;
+    /** Product SKU code, shown in the card header. */
+    sku: string;
+    /** Product display name. */
+    name: string;
+    /** Short product description. */
+    description: string;
+    /** Formatted price string (e.g. `'€200'`). */
+    price?: string;
+    /** Inventory status — drives the LED colour and CTA label. @default 'out-of-stock' */
+    status?: StockStatus;
+    /** Override the generated CTA label. */
+    ctaLabel?: string;
+    [key: string]: unknown;
+}
+declare const ProductCard: import("svelte").Component<Props, {}, "">;
+type ProductCard = ReturnType<typeof ProductCard>;
+export default ProductCard;

package/dist/components/cards/ProjectCard.stories.svelte

@@ -0,0 +1,88 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import ProjectCard from "./ProjectCard.svelte";
+
+  const { Story } = defineMeta({
+    title: "Cards/ProjectCard",
+    component: ProjectCard,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Open Source" args={{ href: "#zod-fixture", slug: "zod-fixture", title: "zod-fixture", description: "Creating fixtures based on zod schemas automatically.", tags: ["TypeScript", "Open Source"], ctaLabel: "OPEN SOURCE" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // renders as <a> by default
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+
+    // title renders as h3
+    const heading = canvas.getByText("zod-fixture");
+    await expect(heading).toBeVisible();
+
+    // tags render as TagPill spans with tag text
+    const tsTag = canvas.getByText("TypeScript");
+    await expect(tsTag).toBeVisible();
+    const osTag = canvas.getByText("Open Source");
+    await expect(osTag).toBeVisible();
+
+    // footer renders ctaLabel
+    const cta = canvas.getByText(/OPEN SOURCE/);
+    await expect(cta).toBeVisible();
+
+    // .card-img hatch gradient present and aspect-ratio is 14/9
+    const cardImg = canvasElement.querySelector(".card-img") as HTMLElement;
+    const imgBg = getComputedStyle(cardImg).backgroundImage;
+    await expect(imgBg).not.toBe("none");
+    await expect(getComputedStyle(cardImg).aspectRatio).toBe("14 / 9");
+  }} />
+
+<Story name="No Tags" args={{ href: "#private-share", slug: "private-share", title: "Private Share", description: "Private file sharing utility." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Card renders without error
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+
+    // title heading is visible
+    const heading = canvas.getByText("Private Share");
+    await expect(heading).toBeVisible();
+
+    // no .card-tags element rendered (or it has no children) when tags is empty
+    const cardTags = canvasElement.querySelector(".card-tags");
+    await expect(cardTags).toBeNull();
+  }} />
+
+<Story name="As Div" args={{ as: "div", slug: "zod-fixture", title: "zod-fixture", description: "Creating fixtures based on zod schemas automatically.", tags: ["TypeScript", "Open Source"], ctaLabel: "OPEN SOURCE" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root.tagName).toBe("DIV");
+    await expect(root).toBeVisible();
+  }} />
+
+<Story name="Many Tags" args={{ href: "#many-tags", slug: "many-tags", title: "Many Tags Project", description: "A project with many technology tags.", tags: ["TypeScript", "Open Source", "SvelteKit", "Rust", "Embedded", "Hardware"] }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("TypeScript")).toBeVisible();
+    await expect(canvas.getByText("Open Source")).toBeVisible();
+    await expect(canvas.getByText("SvelteKit")).toBeVisible();
+    await expect(canvas.getByText("Rust")).toBeVisible();
+    await expect(canvas.getByText("Embedded")).toBeVisible();
+    await expect(canvas.getByText("Hardware")).toBeVisible();
+    await expect(canvasElement.querySelector(".card-tags")).not.toBeNull();
+    await expect(canvasElement.querySelectorAll(".card-tags span").length).toBeGreaterThanOrEqual(6);
+  }} />
+
+<Story name="No Description" args={{ href: "#no-desc", slug: "no-desc", title: "No Description Project", description: "" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvasElement.firstElementChild;
+    await expect(root).toBeVisible();
+    await expect(canvas.getByText("No Description Project")).toBeVisible();
+    const desc = canvasElement.querySelector(".card-desc");
+    await expect(desc).not.toBeNull();
+    await expect(desc!.textContent!.trim()).toBe("");
+  }} />

package/dist/components/cards/ProjectCard.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ProjectCard from "./ProjectCard.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ProjectCard: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProjectCard = InstanceType<typeof ProjectCard>;
+export default ProjectCard;

package/dist/components/cards/ProjectCard.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import Card from './Card.svelte'
+  import TagPill from '../primitives/TagPill.svelte'
+  import Stack from '../layout/Stack.svelte'
+  import Spread from '../layout/Spread.svelte'
+  import Inline from '../layout/Inline.svelte'
+  import Text from '../primitives/Text.svelte'
+  import Heading from '../primitives/Heading.svelte'
+
+  interface Props {
+    /** HTML element to render as. @default 'a' */
+    as?: string
+    /** Project slug, shown in the card header. */
+    slug: string
+    /** Project display title. */
+    title: string
+    /** Short project description. */
+    description: string
+    /** Tag labels rendered as TagPills. @default [] */
+    tags?: string[]
+    /** CTA label in the card footer. @default 'VIEW PROJECT' */
+    ctaLabel?: string
+    children?: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    as = 'a',
+    slug,
+    title,
+    description,
+    tags = [],
+    ctaLabel = 'VIEW PROJECT',
+    ...rest
+  }: Props = $props()
+</script>
+
+<Card as={as} class="project-card" {...rest}>
+  <div class="card-img">
+    <Text variant="eyebrow">{slug.toUpperCase()} · PROJECT</Text>
+  </div>
+  <div class="card-body">
+    <Stack gap="xs">
+      {#if tags.length > 0}
+        <Inline gap="xs" class="card-tags">
+          {#each tags as tag}
+            <TagPill>{tag}</TagPill>
+          {/each}
+        </Inline>
+      {/if}
+      <Heading level={3} size="lg">{title}</Heading>
+      <p class="card-desc">{description}</p>
+    </Stack>
+  </div>
+  <div class="card-cta">
+    <Spread>
+      <Text variant="mono">{ctaLabel}</Text>
+      <span aria-hidden="true">→</span>
+    </Spread>
+  </div>
+</Card>
+
+<style>
+  .card-body {
+    padding: 12px 14px 10px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :global(.project-card) {
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  .card-img {
+    aspect-ratio: 14 / 9;
+    background: repeating-linear-gradient(
+      135deg,
+      var(--bg-sunken) 0 10px,
+      var(--bg-elev) 10px 20px
+    );
+    border-bottom: 1px solid var(--rule);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .card-desc {
+    font-family: var(--mono);
+    font-size: var(--t-mono);
+    color: var(--ink-dim);
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  .card-cta {
+    border-top: 1px solid var(--rule);
+    padding: 10px 14px;
+    transition: background var(--transition), color var(--transition);
+  }
+
+  :global(.project-card):hover .card-cta {
+    background: var(--amber);
+    color: var(--bg);
+  }
+</style>

package/dist/components/cards/ProjectCard.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** HTML element to render as. @default 'a' */
+    as?: string;
+    /** Project slug, shown in the card header. */
+    slug: string;
+    /** Project display title. */
+    title: string;
+    /** Short project description. */
+    description: string;
+    /** Tag labels rendered as TagPills. @default [] */
+    tags?: string[];
+    /** CTA label in the card footer. @default 'VIEW PROJECT' */
+    ctaLabel?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const ProjectCard: import("svelte").Component<Props, {}, "">;
+type ProjectCard = ReturnType<typeof ProjectCard>;
+export default ProjectCard;

package/dist/components/cards/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Card } from './Card.svelte';
+export { default as ProductCard } from './ProductCard.svelte';
+export { default as ProjectCard } from './ProjectCard.svelte';
+export { default as NoteCard } from './NoteCard.svelte';

package/dist/components/cards/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from './Card.svelte';
+export { default as ProductCard } from './ProductCard.svelte';
+export { default as ProjectCard } from './ProjectCard.svelte';
+export { default as NoteCard } from './NoteCard.svelte';