@keepkit/ui 0.12.0 → 0.14.0

package/dist/styles/base.css

@@ -0,0 +1,240 @@
+:root {
+  --keep-background: var(--background, #ffffff);
+  --keep-foreground: var(--foreground, #0f172a);
+  --keep-card: var(--card, var(--keep-background));
+  --keep-card-foreground: var(--card-foreground, var(--keep-foreground));
+  --keep-muted: var(--muted, #f1f5f9);
+  --keep-muted-foreground: var(--muted-foreground, #64748b);
+  --keep-border: var(--border, #cbd5e1);
+  --keep-input: var(--input, var(--keep-border));
+  --keep-primary: var(--keep-accent, var(--primary, #2563eb));
+  --keep-primary-foreground: var(--primary-foreground, #ffffff);
+  --keep-destructive: var(--destructive, #b91c1c);
+  --keep-destructive-foreground: var(--destructive-foreground, #ffffff);
+  --keep-ring: var(--ring, var(--keep-primary));
+  --keep-accent: var(--primary, #2563eb);
+  --keep-radius: var(--radius, 0.5rem);
+  --keep-card-padding: 1rem;
+  --keep-card-gap: 0.75rem;
+  --keep-thumbnail-size: 5rem;
+  --keep-title-size: 1rem;
+  --keep-button-size: 2.75rem;
+  --keep-tag-size: 0.8125rem;
+  --keep-list-columns: 1;
+  --keep-grid-columns: 3;
+  --keep-compact-columns: 4;
+  --keep-mobile-columns: 1;
+  --keep-list-gap: var(--keep-card-gap);
+}
+
+:where(.keep-theme, [data-keep-theme]) {
+  box-sizing: border-box;
+  color: var(--keep-foreground);
+  background-color: var(--keep-background);
+}
+
+:where(.keep-theme, [data-keep-theme]) *,
+:where(.keep-theme, [data-keep-theme]) *::before,
+:where(.keep-theme, [data-keep-theme]) *::after {
+  box-sizing: inherit;
+}
+
+:where(.keep-theme, [data-keep-theme]) :is(button, a, input, select, textarea):focus-visible {
+  outline: 2px solid var(--keep-ring);
+  outline-offset: 2px;
+}
+
+:where(.keep-theme, [data-keep-theme]) :is(button, a) {
+  min-height: var(--keep-button-size);
+}
+
+:where(.keep-theme, [data-keep-theme]) :is(input, select, textarea) {
+  min-height: var(--keep-button-size);
+  border: 1px solid var(--keep-input);
+  border-radius: var(--keep-radius);
+  padding: 0.5rem 0.75rem;
+  background: var(--keep-background);
+  color: var(--keep-foreground);
+  font: inherit;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit] button:not([data-keepkit="button"]) {
+  min-height: var(--keep-button-size);
+  border: 1px solid var(--keep-border);
+  border-radius: var(--keep-radius);
+  padding: 0.5rem 0.75rem;
+  background: var(--keep-muted);
+  color: var(--keep-foreground);
+  cursor: pointer;
+  font: inherit;
+}
+
+:where(.keep-theme, [data-keep-theme]) :is(button, input, select, textarea)[data-keepkit] {
+  min-height: var(--keep-button-size);
+  border: 1px solid var(--keep-border);
+  border-radius: var(--keep-radius);
+  padding: 0.5rem 0.75rem;
+  background: var(--keep-muted);
+  color: var(--keep-foreground);
+  font: inherit;
+}
+
+:where(.keep-theme, [data-keep-theme])[data-mode="dark"],
+:where(.keep-theme, [data-keep-theme]).keep-theme--dark,
+:where(.keep-theme, [data-keep-theme]).dark,
+.dark :where(.keep-theme, [data-keep-theme]) {
+  --keep-background: var(--background, #0f172a);
+  --keep-foreground: var(--foreground, #e2e8f0);
+  --keep-card: var(--card, #1e293b);
+  --keep-card-foreground: var(--card-foreground, var(--keep-foreground));
+  --keep-muted: var(--muted, #1e293b);
+  --keep-muted-foreground: var(--muted-foreground, #94a3b8);
+  --keep-border: var(--border, #475569);
+  --keep-input: var(--input, var(--keep-border));
+  --keep-primary: var(--keep-accent, var(--primary, #93c5fd));
+  --keep-primary-foreground: var(--primary-foreground, #172554);
+  --keep-destructive: var(--destructive, #fca5a5);
+  --keep-destructive-foreground: var(--destructive-foreground, #450a0a);
+  --keep-ring: var(--ring, var(--keep-primary));
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(.keep-theme, [data-keep-theme])[data-mode="system"] {
+    --keep-background: var(--background, #0f172a);
+    --keep-foreground: var(--foreground, #e2e8f0);
+    --keep-card: var(--card, #1e293b);
+    --keep-card-foreground: var(--card-foreground, var(--keep-foreground));
+    --keep-muted: var(--muted, #1e293b);
+    --keep-muted-foreground: var(--muted-foreground, #94a3b8);
+    --keep-border: var(--border, #475569);
+    --keep-input: var(--input, var(--keep-border));
+    --keep-primary: var(--keep-accent, var(--primary, #93c5fd));
+    --keep-primary-foreground: var(--primary-foreground, #172554);
+    --keep-destructive: var(--destructive, #fca5a5);
+    --keep-destructive-foreground: var(--destructive-foreground, #450a0a);
+    --keep-ring: var(--ring, var(--keep-primary));
+  }
+}
+
+:where(.keep-theme, [data-keep-theme]).keep-theme--compact,
+:where(.keep-theme, [data-keep-theme])[data-density="compact"] {
+  --keep-card-padding: 0.625rem;
+  --keep-card-gap: 0.5rem;
+  --keep-thumbnail-size: 4rem;
+  --keep-title-size: 0.9375rem;
+  --keep-tag-size: 0.75rem;
+}
+
+:where(.keep-theme, [data-keep-theme])[data-density="spacious"] {
+  --keep-card-padding: 1.25rem;
+  --keep-card-gap: 1rem;
+}
+
+:where(.keep-theme, [data-keep-theme]).keep-theme--minimal {
+  --keep-card-padding: 0.5rem;
+  --keep-card-gap: 0.5rem;
+  --keep-border: transparent;
+  --keep-radius: 0.25rem;
+}
+
+:where(.keep-theme, [data-keep-theme]).keep-theme--rounded,
+:where(.keep-theme, [data-keep-theme])[data-radius="large"] {
+  --keep-radius: 1rem;
+}
+:where(.keep-theme, [data-keep-theme])[data-radius="none"] {
+  --keep-radius: 0;
+}
+:where(.keep-theme, [data-keep-theme])[data-radius="small"] {
+  --keep-radius: 0.25rem;
+}
+:where(.keep-theme, [data-keep-theme])[data-radius="medium"] {
+  --keep-radius: 0.5rem;
+}
+:where(.keep-theme, [data-keep-theme])[data-radius="full"] {
+  --keep-radius: 999px;
+}
+
+:where(.keep-theme, [data-keep-theme]).keep-theme--high-contrast,
+:where(.keep-theme, [data-keep-theme])[data-high-contrast="true"] {
+  --keep-foreground: #000000;
+  --keep-background: #ffffff;
+  --keep-card: #ffffff;
+  --keep-muted-foreground: #1f2937;
+  --keep-border: #000000;
+  --keep-primary: #0037b3;
+  --keep-primary-foreground: #ffffff;
+  --keep-destructive: #a40000;
+  --keep-ring: #000000;
+}
+
+:where(.keep-theme, [data-keep-theme])[data-reduced-motion="true"] *,
+:where(.keep-theme, [data-keep-theme])[data-reduced-motion="true"] *::before,
+:where(.keep-theme, [data-keep-theme])[data-reduced-motion="true"] *::after {
+  animation: none;
+  scroll-behavior: auto;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.keep-theme, [data-keep-theme]) *,
+  :where(.keep-theme, [data-keep-theme]) *::before,
+  :where(.keep-theme, [data-keep-theme]) *::after {
+    animation: none;
+    scroll-behavior: auto;
+    transition: none;
+  }
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-state="saved"]::after {
+  content: "✓";
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-state="saved"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-state="saved"] {
+  animation: keepkit-save-pop 180ms ease-out;
+}
+:where(.keep-theme, [data-keep-theme]) [data-state="unsaved"] {
+  border-color: var(--keep-border);
+}
+:where(.keep-theme, [data-keep-theme]) [data-loading="true"] {
+  cursor: progress;
+  opacity: 0.72;
+}
+:where(.keep-theme, [data-keep-theme]) [data-disabled="true"],
+:where(.keep-theme, [data-keep-theme]) [aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+:where(.keep-theme, [data-keep-theme]) [data-state="error"],
+:where(.keep-theme, [data-keep-theme]) [data-state="expired"],
+:where(.keep-theme, [data-keep-theme]) [data-state="removed"],
+:where(.keep-theme, [data-keep-theme]) [data-status="expired"],
+:where(.keep-theme, [data-keep-theme]) [data-status="removed"],
+:where(.keep-theme, [data-keep-theme]) [data-status="deleted"] {
+  color: var(--keep-destructive);
+}
+:where(.keep-theme, [data-keep-theme]) [data-item-status="expired"] {
+  border-style: dashed;
+}
+:where(.keep-theme, [data-keep-theme]) [data-item-status="removed"],
+:where(.keep-theme, [data-keep-theme]) [data-item-status="restricted"] {
+  filter: grayscale(1);
+}
+:where(.keep-theme, [data-keep-theme]) [data-state="empty"] {
+  border-style: dashed;
+}
+:where(.keep-theme, [data-keep-theme]) [data-state="selected"],
+:where(.keep-theme, [data-keep-theme]) [data-state="checked"] {
+  outline: 2px solid var(--keep-ring);
+  outline-offset: -2px;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="bulk-actions"][data-state="selected"] {
+  border: 1px solid var(--keep-ring);
+  background: var(--keep-muted);
+}
+
+@keyframes keepkit-save-pop {
+  50% {
+    transform: scale(1.025);
+  }
+}

package/dist/styles/button.css

@@ -0,0 +1,64 @@
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"] {
+  display: inline-flex;
+  min-width: var(--keep-button-size);
+  min-height: var(--keep-button-size);
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border: 1px solid var(--keep-primary);
+  border-radius: var(--keep-radius);
+  padding: 0.5rem 0.75rem;
+  background: var(--keep-primary);
+  color: var(--keep-primary-foreground);
+  cursor: pointer;
+  font: inherit;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+@keyframes keepkit-save-complete {
+  0% {
+    transform: scale(0.96);
+  }
+  65% {
+    transform: scale(1.04);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-state="saved"] {
+  animation: keepkit-save-complete 220ms ease-out;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-icon-only="true"] {
+  border-radius: 999px;
+  padding: 0.5rem;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"]:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(0.94);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"]:active:not(:disabled):not([aria-disabled="true"]) {
+  transform: translateY(1px);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-state="saved"] {
+  background: var(--keep-card);
+  color: var(--keep-primary);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-state="error"] {
+  border-color: var(--keep-destructive);
+  background: var(--keep-destructive);
+  color: var(--keep-destructive-foreground);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="button"][data-loading="true"] {
+  pointer-events: none;
+}

package/dist/styles/collection.css

@@ -0,0 +1,160 @@
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="collection"] {
+  display: grid;
+  gap: var(--keep-card-gap);
+  color: var(--keep-foreground);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="collection"] > :first-child {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--keep-card-gap);
+  align-items: center;
+}
+
+:where(.keep-theme, [data-keep-theme])
+  :is([data-keepkit="layout"], [data-keepkit="list"] > ul, [data-keepkit="list"] > [data-layout]) {
+  display: grid;
+  grid-template-columns: repeat(var(--keep-list-columns), minmax(0, 1fr));
+  gap: var(--keep-list-gap);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="list"] > ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:where(.keep-theme, [data-keep-theme])
+  :is(
+    [data-keepkit="layout"][data-layout="grid"],
+    [data-keepkit="list"] > ul[data-layout="grid"],
+    [data-keepkit="list"] > [data-layout="grid"]
+  ) {
+  --keep-list-columns: var(--keep-grid-columns);
+}
+
+:where(.keep-theme, [data-keep-theme])
+  :is(
+    [data-keepkit="layout"][data-layout="compact"],
+    [data-keepkit="list"] > ul[data-layout="compact"],
+    [data-keepkit="list"] > [data-layout="compact"]
+  ) {
+  --keep-list-columns: var(--keep-compact-columns);
+  --keep-list-gap: 0.5rem;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] {
+  display: grid;
+  position: relative;
+  gap: var(--keep-card-gap);
+  min-width: 0;
+  border: 1px solid var(--keep-border);
+  border-radius: var(--keep-radius);
+  padding: var(--keep-card-padding);
+  background: var(--keep-card);
+  color: var(--keep-card-foreground);
+  transition:
+    opacity 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"]:hover {
+  box-shadow: 0 2px 12px color-mix(in srgb, var(--keep-foreground) 12%, transparent);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] img {
+  width: var(--keep-thumbnail-size);
+  height: var(--keep-thumbnail-size);
+  border-radius: calc(var(--keep-radius) - 2px);
+  object-fit: cover;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] h3 {
+  margin: 0;
+  font-size: var(--keep-title-size);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] > [data-keepkit="button"] {
+  position: absolute;
+  top: var(--keep-card-gap);
+  right: var(--keep-card-gap);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] > [data-card-meta] {
+  color: var(--keep-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="expired"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="removed"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="restricted"] {
+  opacity: 0.72;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="removed"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-item-status="restricted"] {
+  animation: keepkit-card-fade-out 180ms ease-out;
+}
+
+@keyframes keepkit-card-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.56;
+  }
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"][data-loading="true"] {
+  opacity: 0.7;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] ul[aria-label] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--keep-tag-size);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="card"] ul[aria-label] li {
+  border-radius: 999px;
+  padding: 0.125rem 0.5rem;
+  background: var(--keep-muted);
+  color: var(--keep-muted-foreground);
+}
+
+@media (max-width: 48rem) {
+  :where(.keep-theme, [data-keep-theme])
+    :is(
+      [data-keepkit="layout"][data-layout="grid"],
+      [data-keepkit="layout"][data-layout="compact"],
+      [data-keepkit="list"] > ul[data-layout="grid"],
+      [data-keepkit="list"] > ul[data-layout="compact"],
+      [data-keepkit="list"] > [data-layout="grid"],
+      [data-keepkit="list"] > [data-layout="compact"]
+    ) {
+    --keep-list-columns: 2;
+  }
+}
+
+@media (max-width: 32rem) {
+  :where(.keep-theme, [data-keep-theme]) {
+    --keep-list-columns: var(--keep-mobile-columns);
+    --keep-thumbnail-size: 4rem;
+  }
+  :where(.keep-theme, [data-keep-theme])
+    :is(
+      [data-keepkit="layout"][data-layout="grid"],
+      [data-keepkit="layout"][data-layout="compact"],
+      [data-keepkit="list"] > ul[data-layout="grid"],
+      [data-keepkit="list"] > ul[data-layout="compact"],
+      [data-keepkit="list"] > [data-layout="grid"],
+      [data-keepkit="list"] > [data-layout="compact"]
+    ) {
+    --keep-list-columns: var(--keep-mobile-columns);
+  }
+}

package/dist/styles/sync.css

@@ -0,0 +1,146 @@
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="stale-notice"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="backup"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo"] {
+  border: 1px solid var(--keep-border);
+  border-radius: var(--keep-radius);
+  padding: var(--keep-card-padding);
+  background: var(--keep-card);
+  color: var(--keep-card-foreground);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"] {
+  display: inline-flex;
+  border-radius: 999px;
+  padding: 0.125rem 0.5rem;
+  background: var(--keep-muted);
+  font-size: var(--keep-tag-size);
+  font-weight: 600;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="available"] {
+  color: var(--keep-primary);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="expired"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="removed"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-status="deleted"] {
+  border-color: var(--keep-destructive);
+  color: var(--keep-destructive);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="expired"]::before {
+  content: "⚠";
+  margin-inline-end: 0.25rem;
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="expired"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="removed"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="status-badge"][data-item-status="restricted"] {
+  border-color: var(--keep-destructive);
+  color: var(--keep-destructive);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="stale-notice"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"] {
+  display: grid;
+  gap: var(--keep-card-gap);
+}
+
+@keyframes keepkit-sync-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="syncing"]::before {
+  content: "↻";
+  display: inline-block;
+  width: 1.25rem;
+  animation: keepkit-sync-spin 900ms linear infinite;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="error"]::before,
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"][data-state="error"]::before {
+  content: "!";
+  font-weight: 800;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="undo"] {
+  animation: keepkit-undo-in 160ms ease-out;
+}
+
+@keyframes keepkit-undo-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.25rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="error"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-status"][data-state="conflict"],
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"][data-state="error"] {
+  border-color: var(--keep-destructive);
+  color: var(--keep-destructive);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] {
+  max-width: 40rem;
+  margin: 1rem auto;
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] header,
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] article,
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-recovery="backup"] {
+  display: grid;
+  gap: var(--keep-card-gap);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-preview] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--keep-card-gap);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-version] {
+  min-width: 0;
+  border: 1px solid var(--keep-border);
+  border-radius: var(--keep-radius);
+  padding: var(--keep-card-padding);
+  background: var(--keep-background);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-version] dl {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-version] dt {
+  color: var(--keep-muted-foreground);
+  font-size: 0.8125rem;
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-version] dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] header {
+  grid-template-columns: 1fr auto;
+  align-items: start;
+}
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="backup"] input[type="file"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@media (max-width: 40rem) {
+  :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] header {
+    grid-template-columns: 1fr;
+  }
+  :where(.keep-theme, [data-keep-theme]) [data-keepkit="sync-recovery"] [data-conflict-preview] {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/tailwind.css

@@ -0,0 +1,22 @@
+@import "./theme.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--keep-background);
+  --color-foreground: var(--keep-foreground);
+  --color-card: var(--keep-card);
+  --color-card-foreground: var(--keep-card-foreground);
+  --color-muted: var(--keep-muted);
+  --color-muted-foreground: var(--keep-muted-foreground);
+  --color-border: var(--keep-border);
+  --color-input: var(--keep-input);
+  --color-primary: var(--keep-primary);
+  --color-primary-foreground: var(--keep-primary-foreground);
+  --color-destructive: var(--keep-destructive);
+  --color-destructive-foreground: var(--keep-destructive-foreground);
+  --color-ring: var(--keep-ring);
+  --radius-sm: calc(var(--keep-radius) - 4px);
+  --radius-md: calc(var(--keep-radius) - 2px);
+  --radius-lg: var(--keep-radius);
+}

package/dist/tailwind.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Tailwind v4 theme aliases. Import `@keepkit/ui/tailwind.css` in the CSS entry
+ * point, then use these names when a JavaScript theme map is more convenient.
+ */
+declare const keepKitTheme: {
+    readonly colors: {
+        readonly background: "var(--keep-background)";
+        readonly foreground: "var(--keep-foreground)";
+        readonly card: "var(--keep-card)";
+        readonly "card-foreground": "var(--keep-card-foreground)";
+        readonly muted: "var(--keep-muted)";
+        readonly "muted-foreground": "var(--keep-muted-foreground)";
+        readonly border: "var(--keep-border)";
+        readonly input: "var(--keep-input)";
+        readonly primary: "var(--keep-primary)";
+        readonly "primary-foreground": "var(--keep-primary-foreground)";
+        readonly destructive: "var(--keep-destructive)";
+        readonly "destructive-foreground": "var(--keep-destructive-foreground)";
+        readonly ring: "var(--keep-ring)";
+    };
+    readonly borderRadius: {
+        readonly sm: "calc(var(--keep-radius) - 4px)";
+        readonly md: "calc(var(--keep-radius) - 2px)";
+        readonly lg: "var(--keep-radius)";
+    };
+    readonly spacing: {
+        readonly card: "var(--keep-card-padding)";
+        readonly gap: "var(--keep-card-gap)";
+    };
+};
+type KeepKitTheme = typeof keepKitTheme;
+
+export { type KeepKitTheme, keepKitTheme };

package/dist/tailwind.js

@@ -0,0 +1,31 @@
+// src/tailwind.ts
+var keepKitTheme = {
+  colors: {
+    background: "var(--keep-background)",
+    foreground: "var(--keep-foreground)",
+    card: "var(--keep-card)",
+    "card-foreground": "var(--keep-card-foreground)",
+    muted: "var(--keep-muted)",
+    "muted-foreground": "var(--keep-muted-foreground)",
+    border: "var(--keep-border)",
+    input: "var(--keep-input)",
+    primary: "var(--keep-primary)",
+    "primary-foreground": "var(--keep-primary-foreground)",
+    destructive: "var(--keep-destructive)",
+    "destructive-foreground": "var(--keep-destructive-foreground)",
+    ring: "var(--keep-ring)"
+  },
+  borderRadius: {
+    sm: "calc(var(--keep-radius) - 4px)",
+    md: "calc(var(--keep-radius) - 2px)",
+    lg: "var(--keep-radius)"
+  },
+  spacing: {
+    card: "var(--keep-card-padding)",
+    gap: "var(--keep-card-gap)"
+  }
+};
+export {
+  keepKitTheme
+};
+//# sourceMappingURL=tailwind.js.map