@keepkit/ui 0.20.0 → 0.22.0

package/dist/styles/base.css

@@ -49,6 +49,8 @@
   --keep-icon-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17V5m0 0 4 4m-4-4L8 9M5 21h14'/%3E%3C/svg%3E");
   --keep-icon-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 14-5-5 5-5M4 9h9a7 7 0 0 1 7 7v4'/%3E%3C/svg%3E");
   --keep-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0ZM12 9v4M12 17h.01'/%3E%3C/svg%3E");
+  --keep-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 4 6 6-3 1-4 4-1 4-7-7 4-1 4-4Z'/%3E%3Cpath d='m9 15-5 5'/%3E%3C/svg%3E");
+  --keep-icon-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M5 6v14h14V6M9 10h6'/%3E%3Cpath d='M4 3h16v3H4z'/%3E%3C/svg%3E");
 }
 
 :where(.keep-theme, [data-keep-theme]) {
@@ -426,7 +428,11 @@
     [data-keep-action="close-dialog"],
     [data-keep-action="keep-local"],
     [data-keep-action="use-server"],
-    [data-keep-action="manual-merge"]
+    [data-keep-action="manual-merge"],
+    [data-keep-action="toggle-pin"],
+    [data-keep-action="toggle-archive"],
+    [data-keep-action="save-quick-edit"],
+    [data-keep-action="close-save-popover"]
   )::before {
   content: "";
   display: inline-block;
@@ -480,6 +486,18 @@
 :where(.keep-theme, [data-keep-theme]) [data-keep-action="undo"] {
   --keep-action-icon: var(--keep-icon-undo);
 }
+:where(.keep-theme, [data-keep-theme]) [data-keep-action="toggle-pin"] {
+  --keep-action-icon: var(--keep-icon-pin);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keep-action="toggle-archive"] {
+  --keep-action-icon: var(--keep-icon-archive);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keep-action="save-quick-edit"] {
+  --keep-action-icon: var(--keep-icon-check);
+}
+:where(.keep-theme, [data-keep-theme]) [data-keep-action="close-save-popover"] {
+  --keep-action-icon: var(--keep-icon-close);
+}
 
 :where(.keep-theme, [data-keep-theme]) [data-has-custom-icon="true"]::before {
   content: none;

package/dist/styles/collection.css

@@ -22,6 +22,15 @@
   flex: 1 1 12rem;
 }
 
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="collection-filter"] {
+  display: grid;
+  flex: 1 1 12rem;
+  gap: 0.375rem;
+  color: var(--keep-muted-foreground);
+  font-size: var(--keep-tag-size);
+  font-weight: 600;
+}
+
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="active-filters"] {
   display: flex;
   flex-wrap: wrap;
@@ -198,6 +207,88 @@
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), max-content));
 }
 
+:where(.keep-theme, [data-keep-theme]) [data-keep-card-part="collection-badge"] {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  min-height: 1.75rem;
+  border: 1px solid color-mix(in srgb, var(--keep-primary) 24%, var(--keep-border));
+  border-radius: 999px;
+  padding: 0.2rem 0.625rem;
+  background: color-mix(in srgb, var(--keep-primary) 7%, var(--keep-card));
+  color: var(--keep-primary);
+  font-size: var(--keep-tag-size);
+  font-weight: 650;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="save-popover"] {
+  position: relative;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-popover-panel="true"] {
+  position: absolute;
+  z-index: 30;
+  inset-block-start: calc(100% + 0.5rem);
+  inset-inline: 0;
+  display: grid;
+  gap: var(--keep-card-gap);
+  width: 100%;
+  border: 1px solid var(--keep-border);
+  border-radius: calc(var(--keep-radius) + 0.25rem);
+  padding: var(--keep-card-padding);
+  background: var(--keep-card);
+  color: var(--keep-card-foreground);
+  box-shadow:
+    0 4px 10px color-mix(in srgb, var(--keep-foreground) 10%, transparent),
+    0 20px 44px color-mix(in srgb, var(--keep-foreground) 14%, transparent);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-popover-title="true"] {
+  margin: 0;
+  font-size: var(--keep-title-size);
+  line-height: 1.35;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="quick-editor"] {
+  display: grid;
+  gap: var(--keep-card-gap);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="quick-editor"] label {
+  display: grid;
+  gap: 0.375rem;
+  color: var(--keep-muted-foreground);
+  font-size: var(--keep-tag-size);
+  font-weight: 600;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="quick-editor"] :is(input, select, textarea) {
+  width: 100%;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keepkit="quick-editor"] textarea {
+  min-height: 5.5rem;
+  resize: vertical;
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-editor-status="true"] {
+  margin: 0;
+  color: var(--keep-muted-foreground);
+  font-size: var(--keep-tag-size);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-editor-status="true"][data-state="saved"] {
+  color: var(--keep-success);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-editor-status="true"][data-state="error"] {
+  color: var(--keep-destructive);
+}
+
+:where(.keep-theme, [data-keep-theme]) [data-keep-action="close-save-popover"] {
+  justify-self: end;
+}
+
 :where(.keep-theme, [data-keep-theme]) [data-keepkit="card"]:hover {
   border-color: color-mix(in srgb, var(--keep-primary) 32%, var(--keep-border));
   box-shadow:
@@ -732,6 +823,20 @@
     flex-direction: column;
   }
   :where(.keep-theme, [data-keep-theme]) [data-keepkit="collection"] > :first-child > :is(input, select) {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  :where(.keep-theme, [data-keep-theme]) [data-keep-popover-panel="true"] {
+    position: fixed;
+    inset-block: auto 0;
+    inset-inline: 0;
     width: 100%;
+    max-height: min(85vh, 40rem);
+    overflow-y: auto;
+    border-radius: calc(var(--keep-radius) + 0.5rem) calc(var(--keep-radius) + 0.5rem) 0 0;
+    padding: calc(var(--keep-card-padding) * 1.25);
+  }
+  :where(.keep-theme, [data-keep-theme]) [data-keep-card-part="actions"] {
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keepkit/ui",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Headless, accessible React UI components for KeepKit.",
   "type": "module",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@keepkit/core": "0.20.0"
+    "@keepkit/core": "0.22.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",