@shortwind/catalog 0.1.0-beta.13 → 0.1.0-beta.14

package/dist/registry/stat.css

@@ -0,0 +1,30 @@
+/* shortwind: stat@0.0.1 sha:445f1f7abfebc0b1 */
+
+/* @guide
+   A dashboard metric tile. @stat is the container; inside it @stat-label names
+   the metric, @stat-value is the big number, and @stat-trend is the delta.
+   Colour the trend with the tone system — set data-tone on @stat-trend
+   (success for up, danger for down): `<span class="@stat-trend"
+   data-tone="success">`. Same --tone-fg mechanism as @badge; define tones once
+   in CSS (init scaffolds them).
+*/
+
+/* Metric tile container. */
+@recipe stat {
+  flex flex-col gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground
+}
+
+/* Metric name. */
+@recipe stat-label {
+  text-sm font-medium text-muted-foreground
+}
+
+/* The metric's primary value. */
+@recipe stat-value {
+  text-2xl font-semibold tracking-tight text-foreground tabular-nums
+}
+
+/* Trend delta — tone-aware; set data-tone (success up / danger down). */
+@recipe stat-trend {
+  inline-flex items-center gap-1 text-xs font-medium text-[var(--tone-fg,var(--muted-foreground))]
+}

package/dist/registry/stat@0.0.1.css

@@ -0,0 +1,30 @@
+/* shortwind: stat@0.0.1 sha:445f1f7abfebc0b1 */
+
+/* @guide
+   A dashboard metric tile. @stat is the container; inside it @stat-label names
+   the metric, @stat-value is the big number, and @stat-trend is the delta.
+   Colour the trend with the tone system — set data-tone on @stat-trend
+   (success for up, danger for down): `<span class="@stat-trend"
+   data-tone="success">`. Same --tone-fg mechanism as @badge; define tones once
+   in CSS (init scaffolds them).
+*/
+
+/* Metric tile container. */
+@recipe stat {
+  flex flex-col gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground
+}
+
+/* Metric name. */
+@recipe stat-label {
+  text-sm font-medium text-muted-foreground
+}
+
+/* The metric's primary value. */
+@recipe stat-value {
+  text-2xl font-semibold tracking-tight text-foreground tabular-nums
+}
+
+/* Trend delta — tone-aware; set data-tone (success up / danger down). */
+@recipe stat-trend {
+  inline-flex items-center gap-1 text-xs font-medium text-[var(--tone-fg,var(--muted-foreground))]
+}

package/dist/registry/switch/CHANGELOG.md

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

package/dist/registry/switch.css

@@ -0,0 +1,19 @@
+/* shortwind: switch@0.0.1 sha:54fa33bb72839799 */
+
+/* @guide
+   A toggle switch. @switch is the track, @switch-thumb is the sliding knob
+   inside it. The on/off state is data-driven — set data-checked on BOTH the
+   track and the thumb (`<button class="@switch" data-checked><span
+   class="@switch-thumb" data-checked /></button>`). For a checkbox/radio reach
+   for the form family instead.
+*/
+
+/* Toggle track. Add data-checked when on. */
+@recipe switch {
+  peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors data-[checked]:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50
+}
+
+/* Sliding knob. Add data-checked to slide it on. */
+@recipe switch-thumb {
+  pointer-events-none block h-4 w-4 translate-x-0 rounded-full bg-background shadow-sm transition-transform data-[checked]:translate-x-4
+}

package/dist/registry/switch@0.0.1.css

@@ -0,0 +1,19 @@
+/* shortwind: switch@0.0.1 sha:54fa33bb72839799 */
+
+/* @guide
+   A toggle switch. @switch is the track, @switch-thumb is the sliding knob
+   inside it. The on/off state is data-driven — set data-checked on BOTH the
+   track and the thumb (`<button class="@switch" data-checked><span
+   class="@switch-thumb" data-checked /></button>`). For a checkbox/radio reach
+   for the form family instead.
+*/
+
+/* Toggle track. Add data-checked when on. */
+@recipe switch {
+  peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-colors data-[checked]:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50
+}
+
+/* Sliding knob. Add data-checked to slide it on. */
+@recipe switch-thumb {
+  pointer-events-none block h-4 w-4 translate-x-0 rounded-full bg-background shadow-sm transition-transform data-[checked]:translate-x-4
+}