@shortwind/catalog 0.1.0-beta.10

package/dist/registry/recipes/layout.css

@@ -0,0 +1,70 @@
+/* shortwind: layout@0.0.1 sha:48a2a7b6e1a5d7ad */
+
+/* @guide
+   Composition primitives. @stack-* stacks children vertically (flex-col);
+   @row* lays them out horizontally (flex-row). Choose the gap with the size
+   suffix (xs/sm/md/lg on stacks). Use @grid-2/3/4 only for true multi-column
+   grids, @center to center on both axes, @full to fill the parent. Common
+   slips: there is no @flex-row (use @row) or @flex-col (use a @stack-*), and
+   the grids are @grid-3, not @grid-cols-3.
+*/
+
+/* Vertical stack with extra-small gap. */
+@recipe stack-xs {
+  flex flex-col gap-1
+}
+
+/* Vertical stack with small gap. */
+@recipe stack-sm {
+  flex flex-col gap-2
+}
+
+/* Vertical stack with medium gap. */
+@recipe stack-md {
+  flex flex-col gap-4
+}
+
+/* Vertical stack with large gap. */
+@recipe stack-lg {
+  flex flex-col gap-8
+}
+
+/* Horizontal row with default gap and centered items. */
+@recipe row {
+  flex flex-row items-center gap-2
+}
+
+/* Horizontal row with space between children. */
+@recipe row-between {
+  flex flex-row items-center justify-between gap-2
+}
+
+/* Horizontal row aligned to the end. */
+@recipe row-end {
+  flex flex-row items-center justify-end gap-2
+}
+
+/* Two-column responsive grid. */
+@recipe grid-2 {
+  grid grid-cols-1 gap-4 sm:grid-cols-2
+}
+
+/* Three-column responsive grid. */
+@recipe grid-3 {
+  grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3
+}
+
+/* Four-column responsive grid. */
+@recipe grid-4 {
+  grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4
+}
+
+/* Center content horizontally and vertically. */
+@recipe center {
+  flex items-center justify-center
+}
+
+/* Fill the available width and height. */
+@recipe full {
+  h-full w-full
+}

package/dist/registry/recipes/list.css

@@ -0,0 +1,37 @@
+/* shortwind: list@0.0.1 sha:f662887791fabb8d */
+
+/* @guide
+   @list wraps a stack of @list-item rows; use @list-bordered for divided rows.
+   Definition lists are separate: @dl with @dt (term) and @dd (description).
+   For site navigation reach for the navigation family (@nav), not @list.
+*/
+
+/* Vertical list with default gap. */
+@recipe list {
+  flex flex-col gap-1
+}
+
+/* Single list item. */
+@recipe list-item {
+  flex items-center gap-2 rounded-md px-3 py-2 text-sm text-foreground
+}
+
+/* List with dividing borders between items. */
+@recipe list-bordered {
+  divide-y divide-border rounded-md border border-border
+}
+
+/* Definition list container. */
+@recipe dl {
+  grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-4
+}
+
+/* Definition term. */
+@recipe dt {
+  text-sm font-medium text-muted-foreground
+}
+
+/* Definition description. */
+@recipe dd {
+  text-sm text-foreground sm:col-span-2
+}

package/dist/registry/recipes/media.css

@@ -0,0 +1,37 @@
+/* shortwind: media@0.0.1 sha:dfc85633101b0637 */
+
+/* @guide
+   @avatar (with @avatar-sm/lg) is a round user image; @thumb is a small square
+   thumbnail. For responsive embeds use @aspect-square or @aspect-video. Avatars
+   are circular by default — don't restyle the radius.
+*/
+
+/* User/profile avatar. */
+@recipe avatar {
+  inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-muted text-sm font-medium text-muted-foreground
+}
+
+/* Small avatar. */
+@recipe avatar-sm {
+  @avatar h-6 w-6 text-xs
+}
+
+/* Large avatar. */
+@recipe avatar-lg {
+  @avatar h-14 w-14 text-base
+}
+
+/* Small image thumbnail. */
+@recipe thumb {
+  h-16 w-16 rounded-md object-cover
+}
+
+/* 1:1 aspect-ratio wrapper. */
+@recipe aspect-square {
+  aspect-square w-full overflow-hidden rounded-md
+}
+
+/* 16:9 aspect-ratio wrapper. */
+@recipe aspect-video {
+  aspect-video w-full overflow-hidden rounded-md
+}

package/dist/registry/recipes/navigation.css

@@ -0,0 +1,38 @@
+/* shortwind: navigation@0.0.1 sha:73150057219b648a */
+
+/* @guide
+   @nav is the container; links are @nav-link with @nav-link-active for the
+   current page. Tabs mirror that pair: @tab and @tab-active. Use @breadcrumb
+   for trail navigation. Active and inactive are separate recipes — swap the
+   whole class rather than combining them.
+*/
+
+/* Top-level nav container. */
+@recipe nav {
+  flex items-center gap-1
+}
+
+/* Inactive nav link with hover/focus states. */
+@recipe nav-link {
+  inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}
+
+/* Active nav link. */
+@recipe nav-link-active {
+  inline-flex items-center gap-2 rounded-md bg-muted px-3 py-1.5 text-sm font-medium text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}
+
+/* Breadcrumb trail container. */
+@recipe breadcrumb {
+  flex items-center gap-1.5 text-sm text-muted-foreground
+}
+
+/* Inactive tab control. */
+@recipe tab {
+  inline-flex items-center gap-2 border-b-2 border-transparent px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}
+
+/* Active tab control. */
+@recipe tab-active {
+  inline-flex items-center gap-2 border-b-2 border-primary px-3 py-2 text-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}

package/dist/registry/recipes/progress.css

@@ -0,0 +1,22 @@
+/* shortwind: progress@0.0.1 sha:37210e32d2cd555f */
+
+/* @guide
+   A bar is two pieces: @progress-track (the background) wrapping @progress-bar
+   (the fill). For an indeterminate state use @spinner instead — it's a
+   standalone loader, not a bar.
+*/
+
+/* Progress bar track (background). */
+@recipe progress-track {
+  h-2 w-full overflow-hidden rounded-full bg-muted
+}
+
+/* Progress bar fill. */
+@recipe progress-bar {
+  h-full rounded-full bg-primary transition-all
+}
+
+/* Indeterminate loading spinner. */
+@recipe spinner {
+  inline-block h-4 w-4 animate-spin rounded-full border-2 border-border border-t-primary
+}

package/dist/registry/recipes/skeleton.css

@@ -0,0 +1,22 @@
+/* shortwind: skeleton@0.0.1 sha:cd2db5c1c48b16d3 */
+
+/* @guide
+   Match the skeleton to the shape it stands in for: @skeleton (block),
+   @skeleton-text (a text line), @skeleton-circle (avatar/icon). Size block and
+   text skeletons with raw width/height utilities.
+*/
+
+/* Default rectangular skeleton placeholder. */
+@recipe skeleton {
+  animate-pulse rounded-md bg-muted
+}
+
+/* Single-line text skeleton. */
+@recipe skeleton-text {
+  h-4 w-full animate-pulse rounded bg-muted
+}
+
+/* Circular skeleton (avatar/icon). */
+@recipe skeleton-circle {
+  h-10 w-10 animate-pulse rounded-full bg-muted
+}

package/dist/registry/recipes/surface.css

@@ -0,0 +1,45 @@
+/* shortwind: surface@0.0.2 sha:31716e4cbe81f93f */
+
+/* @guide
+   @surface / @surface-muted / @surface-accent set a background+foreground pair
+   for a region — one per section. @wrapper (or @wrapper-tight for prose)
+   centers and width-caps content; there is no @wrapper-lg, set a different cap
+   with max-w-* yourself. (Note: @container is reserved for Tailwind's
+   container-query utility, so the content wrapper is @wrapper.) @divider-h and
+   @divider-v are hairline rules.
+*/
+
+/* Default page/section surface. */
+@recipe surface {
+  bg-background text-foreground
+}
+
+/* Muted surface — secondary background. */
+@recipe surface-muted {
+  bg-muted text-foreground
+}
+
+/* Accent surface — soft brand background. */
+@recipe surface-accent {
+  bg-accent text-accent-foreground
+}
+
+/* Centered content wrapper with a max width. */
+@recipe wrapper {
+  mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8
+}
+
+/* Narrow content wrapper for prose. */
+@recipe wrapper-tight {
+  mx-auto w-full max-w-3xl px-4 sm:px-6
+}
+
+/* Horizontal divider line. */
+@recipe divider-h {
+  shrink-0 h-px w-full bg-border
+}
+
+/* Vertical divider line. */
+@recipe divider-v {
+  shrink-0 h-full w-px bg-border
+}

package/dist/registry/recipes/table.css

@@ -0,0 +1,37 @@
+/* shortwind: table@0.0.1 sha:4f3295935b2a647c */
+
+/* @guide
+   Wrap the table in @table-container for horizontal overflow, then put @table
+   (or @table-zebra for striped rows) on the <table>. Cells are @th (header) and
+   @td (body); add @tr-hover to a <tr> for row highlighting.
+*/
+
+/* Scroll container for a wide table — keeps overflow horizontal. */
+@recipe table-container {
+  w-full overflow-x-auto rounded-md border border-border
+}
+
+/* Data table base. */
+@recipe table {
+  w-full border-collapse text-left text-sm text-foreground
+}
+
+/* Table header cell. */
+@recipe th {
+  border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground
+}
+
+/* Table body cell. */
+@recipe td {
+  border-b border-border px-3 py-2
+}
+
+/* Row hover state. */
+@recipe tr-hover {
+  transition-colors hover:bg-muted
+}
+
+/* Table with zebra striping on alternating rows. */
+@recipe table-zebra {
+  w-full border-collapse text-left text-sm text-foreground [&_tbody_tr:nth-child(odd)]:bg-muted
+}

package/dist/registry/recipes/text.css

@@ -0,0 +1,59 @@
+/* shortwind: text@0.0.1 sha:9c5d7ed7b1e3ef5a */
+
+/* @guide
+   Headings are sized by weight, not HTML level: @heading-xl/lg/md/sm — there
+   is no @h1..@h6. Body copy: @body (default), @lead (intro paragraphs), @muted
+   (secondary), @caption (fine print). Use @label for form labels and @link for
+   inline links. Don't append a -text suffix: it's @body not @body-text, @muted
+   not @muted-text, @link not @link-text.
+*/
+
+/* Top-level page heading. */
+@recipe heading-xl {
+  text-4xl font-bold tracking-tight text-foreground
+}
+
+/* Large section heading. */
+@recipe heading-lg {
+  text-2xl font-semibold tracking-tight text-foreground
+}
+
+/* Medium heading. */
+@recipe heading-md {
+  text-xl font-semibold text-foreground
+}
+
+/* Small heading. */
+@recipe heading-sm {
+  text-base font-semibold text-foreground
+}
+
+/* Default body text. */
+@recipe body {
+  text-sm leading-6 text-foreground
+}
+
+/* Lead paragraph — larger body copy for hero/intro sections. */
+@recipe lead {
+  text-lg leading-relaxed text-muted-foreground
+}
+
+/* Muted secondary text. */
+@recipe muted {
+  text-sm text-muted-foreground
+}
+
+/* Form label text. */
+@recipe label {
+  text-sm font-medium text-foreground
+}
+
+/* Caption — small supporting text. */
+@recipe caption {
+  text-xs text-muted-foreground
+}
+
+/* Inline link with hover/focus states. */
+@recipe link {
+  text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}

package/dist/registry/recipes/tooltip.css

@@ -0,0 +1,11 @@
+/* shortwind: tooltip@0.0.1 sha:1be3af4165357dcd */
+
+/* @guide
+   @tooltip is the floating label bubble — it styles appearance only, so pair it
+   with your own positioning.
+*/
+
+/* Floating tooltip bubble. */
+@recipe tooltip {
+  pointer-events-none z-50 rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background shadow-md
+}

package/dist/registry/skeleton/CHANGELOG.md

@@ -0,0 +1,5 @@
+# skeleton
+
+## 0.0.1
+
+Initial release.

package/dist/registry/skeleton.css

@@ -0,0 +1,22 @@
+/* shortwind: skeleton@0.0.1 sha:cd2db5c1c48b16d3 */
+
+/* @guide
+   Match the skeleton to the shape it stands in for: @skeleton (block),
+   @skeleton-text (a text line), @skeleton-circle (avatar/icon). Size block and
+   text skeletons with raw width/height utilities.
+*/
+
+/* Default rectangular skeleton placeholder. */
+@recipe skeleton {
+  animate-pulse rounded-md bg-muted
+}
+
+/* Single-line text skeleton. */
+@recipe skeleton-text {
+  h-4 w-full animate-pulse rounded bg-muted
+}
+
+/* Circular skeleton (avatar/icon). */
+@recipe skeleton-circle {
+  h-10 w-10 animate-pulse rounded-full bg-muted
+}

package/dist/registry/skeleton@0.0.1.css

@@ -0,0 +1,22 @@
+/* shortwind: skeleton@0.0.1 sha:cd2db5c1c48b16d3 */
+
+/* @guide
+   Match the skeleton to the shape it stands in for: @skeleton (block),
+   @skeleton-text (a text line), @skeleton-circle (avatar/icon). Size block and
+   text skeletons with raw width/height utilities.
+*/
+
+/* Default rectangular skeleton placeholder. */
+@recipe skeleton {
+  animate-pulse rounded-md bg-muted
+}
+
+/* Single-line text skeleton. */
+@recipe skeleton-text {
+  h-4 w-full animate-pulse rounded bg-muted
+}
+
+/* Circular skeleton (avatar/icon). */
+@recipe skeleton-circle {
+  h-10 w-10 animate-pulse rounded-full bg-muted
+}

package/dist/registry/surface/CHANGELOG.md

@@ -0,0 +1,5 @@
+# surface
+
+## 0.0.2
+
+Initial release.

package/dist/registry/surface.css

@@ -0,0 +1,45 @@
+/* shortwind: surface@0.0.2 sha:31716e4cbe81f93f */
+
+/* @guide
+   @surface / @surface-muted / @surface-accent set a background+foreground pair
+   for a region — one per section. @wrapper (or @wrapper-tight for prose)
+   centers and width-caps content; there is no @wrapper-lg, set a different cap
+   with max-w-* yourself. (Note: @container is reserved for Tailwind's
+   container-query utility, so the content wrapper is @wrapper.) @divider-h and
+   @divider-v are hairline rules.
+*/
+
+/* Default page/section surface. */
+@recipe surface {
+  bg-background text-foreground
+}
+
+/* Muted surface — secondary background. */
+@recipe surface-muted {
+  bg-muted text-foreground
+}
+
+/* Accent surface — soft brand background. */
+@recipe surface-accent {
+  bg-accent text-accent-foreground
+}
+
+/* Centered content wrapper with a max width. */
+@recipe wrapper {
+  mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8
+}
+
+/* Narrow content wrapper for prose. */
+@recipe wrapper-tight {
+  mx-auto w-full max-w-3xl px-4 sm:px-6
+}
+
+/* Horizontal divider line. */
+@recipe divider-h {
+  shrink-0 h-px w-full bg-border
+}
+
+/* Vertical divider line. */
+@recipe divider-v {
+  shrink-0 h-full w-px bg-border
+}

package/dist/registry/surface@0.0.2.css

@@ -0,0 +1,45 @@
+/* shortwind: surface@0.0.2 sha:31716e4cbe81f93f */
+
+/* @guide
+   @surface / @surface-muted / @surface-accent set a background+foreground pair
+   for a region — one per section. @wrapper (or @wrapper-tight for prose)
+   centers and width-caps content; there is no @wrapper-lg, set a different cap
+   with max-w-* yourself. (Note: @container is reserved for Tailwind's
+   container-query utility, so the content wrapper is @wrapper.) @divider-h and
+   @divider-v are hairline rules.
+*/
+
+/* Default page/section surface. */
+@recipe surface {
+  bg-background text-foreground
+}
+
+/* Muted surface — secondary background. */
+@recipe surface-muted {
+  bg-muted text-foreground
+}
+
+/* Accent surface — soft brand background. */
+@recipe surface-accent {
+  bg-accent text-accent-foreground
+}
+
+/* Centered content wrapper with a max width. */
+@recipe wrapper {
+  mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8
+}
+
+/* Narrow content wrapper for prose. */
+@recipe wrapper-tight {
+  mx-auto w-full max-w-3xl px-4 sm:px-6
+}
+
+/* Horizontal divider line. */
+@recipe divider-h {
+  shrink-0 h-px w-full bg-border
+}
+
+/* Vertical divider line. */
+@recipe divider-v {
+  shrink-0 h-full w-px bg-border
+}

package/dist/registry/table/CHANGELOG.md

@@ -0,0 +1,5 @@
+# table
+
+## 0.0.1
+
+Initial release.

package/dist/registry/table.css

@@ -0,0 +1,37 @@
+/* shortwind: table@0.0.1 sha:4f3295935b2a647c */
+
+/* @guide
+   Wrap the table in @table-container for horizontal overflow, then put @table
+   (or @table-zebra for striped rows) on the <table>. Cells are @th (header) and
+   @td (body); add @tr-hover to a <tr> for row highlighting.
+*/
+
+/* Scroll container for a wide table — keeps overflow horizontal. */
+@recipe table-container {
+  w-full overflow-x-auto rounded-md border border-border
+}
+
+/* Data table base. */
+@recipe table {
+  w-full border-collapse text-left text-sm text-foreground
+}
+
+/* Table header cell. */
+@recipe th {
+  border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground
+}
+
+/* Table body cell. */
+@recipe td {
+  border-b border-border px-3 py-2
+}
+
+/* Row hover state. */
+@recipe tr-hover {
+  transition-colors hover:bg-muted
+}
+
+/* Table with zebra striping on alternating rows. */
+@recipe table-zebra {
+  w-full border-collapse text-left text-sm text-foreground [&_tbody_tr:nth-child(odd)]:bg-muted
+}

package/dist/registry/table@0.0.1.css

@@ -0,0 +1,37 @@
+/* shortwind: table@0.0.1 sha:4f3295935b2a647c */
+
+/* @guide
+   Wrap the table in @table-container for horizontal overflow, then put @table
+   (or @table-zebra for striped rows) on the <table>. Cells are @th (header) and
+   @td (body); add @tr-hover to a <tr> for row highlighting.
+*/
+
+/* Scroll container for a wide table — keeps overflow horizontal. */
+@recipe table-container {
+  w-full overflow-x-auto rounded-md border border-border
+}
+
+/* Data table base. */
+@recipe table {
+  w-full border-collapse text-left text-sm text-foreground
+}
+
+/* Table header cell. */
+@recipe th {
+  border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground
+}
+
+/* Table body cell. */
+@recipe td {
+  border-b border-border px-3 py-2
+}
+
+/* Row hover state. */
+@recipe tr-hover {
+  transition-colors hover:bg-muted
+}
+
+/* Table with zebra striping on alternating rows. */
+@recipe table-zebra {
+  w-full border-collapse text-left text-sm text-foreground [&_tbody_tr:nth-child(odd)]:bg-muted
+}

package/dist/registry/text/CHANGELOG.md

@@ -0,0 +1,5 @@
+# text
+
+## 0.0.1
+
+Initial release.

package/dist/registry/text.css

@@ -0,0 +1,59 @@
+/* shortwind: text@0.0.1 sha:9c5d7ed7b1e3ef5a */
+
+/* @guide
+   Headings are sized by weight, not HTML level: @heading-xl/lg/md/sm — there
+   is no @h1..@h6. Body copy: @body (default), @lead (intro paragraphs), @muted
+   (secondary), @caption (fine print). Use @label for form labels and @link for
+   inline links. Don't append a -text suffix: it's @body not @body-text, @muted
+   not @muted-text, @link not @link-text.
+*/
+
+/* Top-level page heading. */
+@recipe heading-xl {
+  text-4xl font-bold tracking-tight text-foreground
+}
+
+/* Large section heading. */
+@recipe heading-lg {
+  text-2xl font-semibold tracking-tight text-foreground
+}
+
+/* Medium heading. */
+@recipe heading-md {
+  text-xl font-semibold text-foreground
+}
+
+/* Small heading. */
+@recipe heading-sm {
+  text-base font-semibold text-foreground
+}
+
+/* Default body text. */
+@recipe body {
+  text-sm leading-6 text-foreground
+}
+
+/* Lead paragraph — larger body copy for hero/intro sections. */
+@recipe lead {
+  text-lg leading-relaxed text-muted-foreground
+}
+
+/* Muted secondary text. */
+@recipe muted {
+  text-sm text-muted-foreground
+}
+
+/* Form label text. */
+@recipe label {
+  text-sm font-medium text-foreground
+}
+
+/* Caption — small supporting text. */
+@recipe caption {
+  text-xs text-muted-foreground
+}
+
+/* Inline link with hover/focus states. */
+@recipe link {
+  text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}