@shortwind/catalog 0.1.0-beta.3

package/dist/registry/media/CHANGELOG.md

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

package/dist/registry/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/media@0.0.1.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/navigation/CHANGELOG.md

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

package/dist/registry/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/navigation@0.0.1.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/presets.json

@@ -0,0 +1,6 @@
+{
+  "starter": ["card", "button", "layout", "text", "form"],
+  "app": ["card", "button", "layout", "text", "form", "badge", "table", "dialog", "list", "navigation", "feedback", "tooltip"],
+  "content": ["card", "button", "layout", "text", "form", "badge", "code", "list", "media", "empty"],
+  "all": "*"
+}

package/dist/registry/progress/CHANGELOG.md

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

package/dist/registry/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/progress@0.0.1.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/badge.css

@@ -0,0 +1,44 @@
+/* shortwind: badge@0.0.1 sha:8548b9a7305a0a59 */
+
+/* @guide
+   @badge is the neutral default; tone variants @badge-success/warning/danger/
+   info carry their own color; @badge-outline is unfilled. One tone per badge.
+   @badge-base is a color-less shell for building custom tones — not for direct
+   use.
+*/
+
+/* Badge shell — shape, sizing, focus ring. No bg/text/border color so
+   variants can supply their own tone without conflicts. */
+@recipe badge-base {
+  inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+}
+
+/* Default neutral badge. */
+@recipe badge {
+  inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground
+}
+
+/* Success tone badge. */
+@recipe badge-success {
+  inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200
+}
+
+/* Warning tone badge. */
+@recipe badge-warning {
+  inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900 dark:text-amber-200
+}
+
+/* Danger tone badge. */
+@recipe badge-danger {
+  inline-flex items-center gap-1 rounded-full bg-destructive/15 px-2 py-0.5 text-xs font-medium text-destructive
+}
+
+/* Info tone badge. */
+@recipe badge-info {
+  inline-flex items-center gap-1 rounded-full bg-primary/15 px-2 py-0.5 text-xs font-medium text-primary
+}
+
+/* Outline badge — no fill. */
+@recipe badge-outline {
+  inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs font-medium text-foreground
+}

package/dist/registry/recipes/button.css

@@ -0,0 +1,74 @@
+/* shortwind: button@0.0.1 sha:777fa510c4ab4aeb */
+
+/* @guide
+   Name order is @btn-<intent>[-<size>]: intent first (primary/secondary/ghost/
+   danger/outline), size second (sm/lg; omit for default). One intent per
+   button — never combine @btn-primary with @btn-danger. @btn-ghost is text-only,
+   @btn-outline is bordered with no fill, @btn-icon is a square icon button.
+   @btn-base is the shared shell; don't use it on its own.
+*/
+
+/* Shared button base — sizing, focus ring, disabled state. */
+@recipe btn-base {
+  inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50
+}
+
+/* Primary call-to-action button. */
+@recipe btn-primary {
+  @btn-base bg-primary text-primary-foreground hover:bg-primary/90
+}
+
+/* Small primary button. */
+@recipe btn-primary-sm {
+  @btn-primary px-3 py-1.5 text-xs
+}
+
+/* Large primary button. */
+@recipe btn-primary-lg {
+  @btn-primary px-6 py-3 text-base
+}
+
+/* Secondary button — bordered surface tone. */
+@recipe btn-secondary {
+  @btn-base border border-border bg-secondary text-secondary-foreground hover:bg-secondary/80
+}
+
+/* Small secondary button. */
+@recipe btn-secondary-sm {
+  @btn-secondary px-3 py-1.5 text-xs
+}
+
+/* Large secondary button. */
+@recipe btn-secondary-lg {
+  @btn-secondary px-6 py-3 text-base
+}
+
+/* Ghost button — text only, no background. */
+@recipe btn-ghost {
+  @btn-base text-foreground hover:bg-muted
+}
+
+/* Small ghost button. */
+@recipe btn-ghost-sm {
+  @btn-ghost px-3 py-1.5 text-xs
+}
+
+/* Large ghost button. */
+@recipe btn-ghost-lg {
+  @btn-ghost px-6 py-3 text-base
+}
+
+/* Destructive button. */
+@recipe btn-danger {
+  @btn-base bg-destructive text-destructive-foreground hover:bg-destructive/90
+}
+
+/* Outline button — bordered without fill. */
+@recipe btn-outline {
+  @btn-base border border-primary text-primary hover:bg-primary/10
+}
+
+/* Square icon-only button. */
+@recipe btn-icon {
+  inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50
+}

package/dist/registry/recipes/card.css

@@ -0,0 +1,43 @@
+/* shortwind: card@0.0.1 sha:4813cef10cd21824 */
+
+/* @guide
+   Pick exactly one container: @card (default), @card-elevated (raised shadow),
+   @card-flat (no border), or @card-interactive (clickable hover/focus) — don't
+   stack two container variants on one element. Lay out the inside with
+   @card-header / @card-body / @card-footer.
+*/
+
+/* Default content card with border, padding, and surface color. */
+@recipe card {
+  rounded-lg border border-border bg-card text-card-foreground p-4
+}
+
+/* Card with raised shadow for emphasis. */
+@recipe card-elevated {
+  @card shadow-md
+}
+
+/* Card without border, on a muted surface. */
+@recipe card-flat {
+  rounded-lg bg-muted text-foreground p-4
+}
+
+/* Clickable card with hover and focus-visible states. */
+@recipe card-interactive {
+  @card cursor-pointer transition-shadow hover:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring
+}
+
+/* Card header region with bottom divider. */
+@recipe card-header {
+  mb-3 border-b border-border pb-3
+}
+
+/* Card body region. */
+@recipe card-body {
+  py-1
+}
+
+/* Card footer with top divider and right-aligned actions. */
+@recipe card-footer {
+  mt-3 flex items-center justify-end gap-2 border-t border-border pt-3
+}

package/dist/registry/recipes/code.css

@@ -0,0 +1,22 @@
+/* shortwind: code@0.0.1 sha:cc8d2b0bedb5b453 */
+
+/* @guide
+   @code-inline for a code span inside prose, @code-block for a multi-line
+   preformatted block, @kbd for a keyboard-shortcut hint. Pick by context, not
+   by size.
+*/
+
+/* Inline code span. */
+@recipe code-inline {
+  rounded bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground
+}
+
+/* Block of preformatted code. */
+@recipe code-block {
+  overflow-x-auto rounded-md border border-border bg-muted p-4 font-mono text-sm leading-6 text-foreground
+}
+
+/* Keyboard shortcut hint. */
+@recipe kbd {
+  inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground shadow-sm
+}

package/dist/registry/recipes/dialog.css

@@ -0,0 +1,33 @@
+/* shortwind: dialog@0.0.1 sha:b4dbf853e99fce75 */
+
+/* @guide
+   A modal is three layers: @dialog-overlay (dimmed backdrop), @dialog (the
+   centering wrapper), and @dialog-content (the panel). Structure the panel with
+   @dialog-header and @dialog-footer. Don't put content styling on @dialog
+   itself — it's only the positioner.
+*/
+
+/* Modal dialog wrapper — covers the viewport, centers content. */
+@recipe dialog {
+  fixed inset-0 z-50 flex items-center justify-center p-4
+}
+
+/* Dimmed overlay behind the dialog. */
+@recipe dialog-overlay {
+  fixed inset-0 z-40 bg-black/50
+}
+
+/* Dialog content panel. */
+@recipe dialog-content {
+  relative z-50 w-full max-w-md rounded-lg border border-border bg-popover text-popover-foreground p-6 shadow-xl
+}
+
+/* Dialog header region with title. */
+@recipe dialog-header {
+  mb-4 flex flex-col gap-1
+}
+
+/* Dialog footer with right-aligned actions. */
+@recipe dialog-footer {
+  mt-6 flex items-center justify-end gap-2
+}

package/dist/registry/recipes/empty.css

@@ -0,0 +1,27 @@
+/* shortwind: empty@0.0.1 sha:003168e1b4a395c5 */
+
+/* @guide
+   @empty is the container for a no-data state; fill it with @empty-icon,
+   @empty-title, and @empty-description. These are slots for that pattern — use
+   @heading-* / @body from the text family for ordinary copy.
+*/
+
+/* Empty-state container. */
+@recipe empty {
+  flex flex-col items-center justify-center gap-3 rounded-md border border-dashed border-border p-8 text-center
+}
+
+/* Empty-state icon slot. */
+@recipe empty-icon {
+  flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground
+}
+
+/* Empty-state title text. */
+@recipe empty-title {
+  text-base font-semibold text-foreground
+}
+
+/* Empty-state supporting description. */
+@recipe empty-description {
+  max-w-sm text-sm text-muted-foreground
+}

package/dist/registry/recipes/feedback.css

@@ -0,0 +1,47 @@
+/* shortwind: feedback@0.0.1 sha:818868f6af179bcf */
+
+/* @guide
+   Inline messages use @alert (neutral) or a tone variant @alert-success/
+   warning/danger/info — one tone each. @callout is a left-accent inline note,
+   @toast is a floating notification, @banner spans the full viewport width.
+*/
+
+/* Default informational alert. */
+@recipe alert {
+  flex items-start gap-3 rounded-md border border-border bg-card p-4 text-sm text-card-foreground
+}
+
+/* Success alert. */
+@recipe alert-success {
+  flex items-start gap-3 rounded-md border border-green-200 bg-green-50 p-4 text-sm text-green-900 dark:border-green-900 dark:bg-green-950 dark:text-green-100
+}
+
+/* Warning alert. */
+@recipe alert-warning {
+  flex items-start gap-3 rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100
+}
+
+/* Danger alert. */
+@recipe alert-danger {
+  flex items-start gap-3 rounded-md border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive
+}
+
+/* Informational alert. */
+@recipe alert-info {
+  flex items-start gap-3 rounded-md border border-primary/30 bg-primary/10 p-4 text-sm text-primary
+}
+
+/* Inline callout — flush left edge accent. */
+@recipe callout {
+  border-l-4 border-primary bg-primary/10 p-4 text-sm text-foreground
+}
+
+/* Floating toast notification. */
+@recipe toast {
+  pointer-events-auto flex items-start gap-3 rounded-md border border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg
+}
+
+/* Full-width banner spanning the viewport. */
+@recipe banner {
+  w-full bg-primary px-4 py-2 text-center text-sm font-medium text-primary-foreground
+}

package/dist/registry/recipes/form.css

@@ -0,0 +1,67 @@
+/* shortwind: form@0.0.1 sha:bc12a9cc520a2d85 */
+
+/* @guide
+   Wrap each label+control+message in @field (use @field-error for the invalid
+   state); group related fields with @fieldset. Controls are bare: @input,
+   @textarea, @select, @checkbox, @radio, plus @input-error for invalid text
+   and @input-shell for the transparent shadcn-style shell. Helper text is
+   @help. There is no @form-group (use @field), @form-input (use @input),
+   @form-helper (use @help) or @form-checkbox (use @checkbox); the field label
+   recipe is @label, in the text family.
+*/
+
+/* Text input field. */
+@recipe input {
+  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50
+}
+
+/* shadcn/dinachi-style input shell — transparent background, h-9, file/
+   placeholder/selection/aria-invalid/focus-visible states baked in. */
+@recipe input-shell {
+  flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40
+}
+
+/* Input in error state. */
+@recipe input-error {
+  @input border-destructive focus:border-destructive focus:outline-destructive
+}
+
+/* Multi-line textarea. */
+@recipe textarea {
+  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50
+}
+
+/* Native select control. */
+@recipe select {
+  block w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground focus:border-ring focus:outline-2 focus:outline-offset-2 focus:outline-ring disabled:cursor-not-allowed disabled:opacity-50
+}
+
+/* Checkbox input. */
+@recipe checkbox {
+  h-4 w-4 rounded border-input text-primary focus:outline-2 focus:outline-offset-2 focus:outline-ring
+}
+
+/* Radio input. */
+@recipe radio {
+  h-4 w-4 border-input text-primary focus:outline-2 focus:outline-offset-2 focus:outline-ring
+}
+
+/* Form field wrapper — label + input + help/error. */
+@recipe field {
+  flex flex-col gap-1.5
+}
+
+/* Form field in error state. */
+@recipe field-error {
+  flex flex-col gap-1.5
+}
+
+/* Grouped form section with optional legend. */
+@recipe fieldset {
+  flex flex-col gap-4 rounded-md border border-border p-4
+}
+
+/* Field-level helper text. */
+@recipe help {
+  text-xs text-muted-foreground
+}

package/dist/registry/recipes/icon.css

@@ -0,0 +1,27 @@
+/* shortwind: icon@0.0.1 sha:fab3b2d3a0c089fb */
+
+/* @guide
+   Size an icon with @icon-sm/md/lg (16/20/24px) — these set width and height
+   only; add @icon-muted for secondary color. They're for SVG/icon elements, not
+   to be confused with @btn-icon (the icon button in the button family).
+*/
+
+/* Small icon — 16px. */
+@recipe icon-sm {
+  h-4 w-4 shrink-0
+}
+
+/* Default icon size — 20px. */
+@recipe icon-md {
+  h-5 w-5 shrink-0
+}
+
+/* Large icon — 24px. */
+@recipe icon-lg {
+  h-6 w-6 shrink-0
+}
+
+/* Icon with muted color. */
+@recipe icon-muted {
+  text-muted-foreground
+}