@kushagradhawan/kookie-ui 0.1.32 → 0.1.34

package/src/components/animations.css

@@ -1,92 +1,28 @@
-@keyframes rt-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  @keyframes rt-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 @keyframes rt-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+  from { opacity: 1; }
+  to { opacity: 0; }
 }
 
-@keyframes rt-slide-from-top {
-  from {
-    transform: translateY(4px) scale(0.97);
-  }
-  to {
-    transform: translateY(0) scale(1);
-  }
-}
+@keyframes rt-slide-from-top { from { transform: translateY(4px) scale(0.97); opacity: 0.5; } to { transform: translateY(0) scale(1); opacity: 1; } }
 
-@keyframes rt-slide-to-top {
-  from {
-    transform: translateY(0) scale(1);
-  }
-  to {
-    transform: translateY(4px) scale(0.97);
-  }
-}
+@keyframes rt-slide-to-top { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(4px) scale(0.97); opacity: 0.5; } }
 
-@keyframes rt-slide-from-bottom {
-  from {
-    transform: translateY(-4px) scale(0.97);
-  }
-  to {
-    transform: translateY(0) scale(1);
-  }
-}
+@keyframes rt-slide-from-bottom { from { transform: translateY(-4px) scale(0.97); opacity: 0.5; } to { transform: translateY(0) scale(1); opacity: 1; } }
 
-@keyframes rt-slide-to-bottom {
-  from {
-    transform: translateY(0) scale(1);
-  }
-  to {
-    transform: translateY(-4px) scale(0.97);
-  }
-}
+@keyframes rt-slide-to-bottom { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-4px) scale(0.97); opacity: 0.5; } }
 
-@keyframes rt-slide-from-left {
-  from {
-    transform: translateX(4px) scale(0.97);
-  }
-  to {
-    transform: translateX(0) scale(1);
-  }
-}
+@keyframes rt-slide-from-left { from { transform: translateX(4px) scale(0.97); opacity: 0.5; } to { transform: translateX(0) scale(1); opacity: 1; } }
 
-@keyframes rt-slide-to-left {
-  from {
-    transform: translateX(0) scale(1);
-  }
-  to {
-    transform: translateX(4px) scale(0.97);
-  }
-}
+@keyframes rt-slide-to-left { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(4px) scale(0.97); opacity: 0.5; } }
 
-@keyframes rt-slide-from-right {
-  from {
-    transform: translateX(-4px) scale(0.97);
-  }
-  to {
-    transform: translateX(0) scale(1);
-  }
-}
+@keyframes rt-slide-from-right { from { transform: translateX(-4px) scale(0.97); opacity: 0.5; } to { transform: translateX(0) scale(1); opacity: 1; } }
 
-@keyframes rt-slide-to-right {
-  from {
-    transform: translateX(0) scale(1);
-  }
-  to {
-    transform: translateX(-4px) scale(0.97);
-  }
-}
+@keyframes rt-slide-to-right { from { transform: translateX(0) scale(1); opacity: 1; } to { transform: translateX(-4px) scale(0.97); opacity: 0.5; } }
 
 @keyframes rt-tab-indicator-appear {
   0% {
@@ -104,10 +40,10 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .rt-PopperContent {
-    animation-timing-function: var(--ease-3);
+    animation-timing-function: var(--motion-spring-snappy);
 
     &:where([data-state='open']) {
-      animation-duration: var(--duration-2);
+      animation-duration: var(--motion-duration-small);
 
       /* Direction-aware animations (for dropdown menus with data-side) */
       &:where([data-side='top']) {
@@ -130,7 +66,7 @@
     }
 
     &:where([data-state='closed']) {
-      animation-duration: var(--duration-1);
+      animation-duration: var(--motion-duration-small);
 
       /* Direction-aware animations (for dropdown menus with data-side) */
       &:where([data-side='top']) {
@@ -155,6 +91,54 @@
 
   /* Tab indicator animations - only when motion is preferred */
   .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before {
-    animation: rt-tab-indicator-appear var(--duration-2) var(--ease-3);
+    animation: rt-tab-indicator-appear var(--motion-duration-small) var(--motion-spring-snappy);
   }
 }
+
+/* Dialog keyframes (centralized) */
+@keyframes rt-dialog-overlay-no-op {
+  from { opacity: 1; }
+  to { opacity: 1; }
+}
+@keyframes rt-dialog-content-show {
+  from { opacity: 0; transform: translateY(5px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0px) scale(1); }
+}
+@keyframes rt-dialog-content-hide {
+  from { opacity: 1; transform: translateY(0px) scale(1); }
+  to { opacity: 0; transform: translateY(5px) scale(0.99); }
+}
+
+/* Sheet keyframes (centralized, off-screen slide) */
+@keyframes rt-sheet-open-from-start {
+  from { transform: translate3d(calc(-1 * var(--sheet-slide-distance)), 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes rt-sheet-close-to-start {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(calc(-1 * var(--sheet-slide-distance)), 0, 0); }
+}
+@keyframes rt-sheet-open-from-end {
+  from { transform: translate3d(var(--sheet-slide-distance), 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes rt-sheet-close-to-end {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(var(--sheet-slide-distance), 0, 0); }
+}
+@keyframes rt-sheet-open-from-top {
+  from { transform: translate3d(0, calc(-1 * var(--sheet-slide-distance)), 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes rt-sheet-close-to-top {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(0, calc(-1 * var(--sheet-slide-distance)), 0); }
+}
+@keyframes rt-sheet-open-from-bottom {
+  from { transform: translate3d(0, var(--sheet-slide-distance), 0); }
+  to { transform: translate3d(0, 0, 0); }
+}
+@keyframes rt-sheet-close-to-bottom {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(0, var(--sheet-slide-distance), 0); }
+}

package/src/components/callout.css

@@ -79,7 +79,7 @@
       row-gap: var(--space-2);
       column-gap: var(--space-2);
       padding: var(--space-3);
-      border-radius: var(--radius-3);
+      border-radius: var(--radius-1);
       --callout-icon-height: var(--line-height-1);
       --callout-icon-size: var(--content-icon-size-1);
     }
@@ -87,7 +87,7 @@
       row-gap: var(--space-2);
       column-gap: var(--space-3);
       padding: var(--space-4);
-      border-radius: var(--radius-4);
+      border-radius: var(--radius-2);
       --callout-icon-height: var(--line-height-2);
       --callout-icon-size: var(--content-icon-size-2);
     }
@@ -95,7 +95,7 @@
       row-gap: var(--space-3);
       column-gap: var(--space-4);
       padding: var(--space-5);
-      border-radius: var(--radius-5);
+      border-radius: var(--radius-3);
       --callout-icon-height: var(--line-height-3);
       --callout-icon-size: var(--content-icon-size-3);
     }

package/src/components/chatbar.css

@@ -0,0 +1,214 @@
+/* Container */
+.rt-ChatbarField { 
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Defaults */
+.rt-ChatbarRoot {
+  --chatbar-attachment-thumb: var(--space-8);
+}
+
+/* Unstyled textarea (reset) */
+.rt-ChatbarInput {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  resize: none;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-align: start;
+  transition: height 150ms ease-out;
+}
+
+/* Main container - flex layout */
+.rt-ChatbarCard :where(.rt-ChatbarGrid) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+}
+
+/* Compact state - horizontal flex */
+.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarGrid) {
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* In compact mode, keep attachments on a dedicated row above inline content */
+.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarAttachmentsRow) {
+  flex-basis: 100%;
+  order: -1;
+}
+
+/* Textarea flex behavior */
+.rt-ChatbarTextarea {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Send button smooth transitions */
+.rt-ChatbarSend {
+  transition: opacity 150ms ease-in-out;
+}
+
+/* Row visibility and layout */
+.rt-ChatbarRoot:where([data-state="closed"]) :where(.rt-ChatbarRow) { display: none; }
+.rt-ChatbarRoot:where([data-state="open"]) :where(.rt-ChatbarRow) { 
+  display: block;
+  width: 100%;
+}
+
+/* Attachments row */
+.rt-ChatbarAttachmentsRow {
+  /* ScrollArea needs a defined width to enable scrolling */
+  width: 100%;
+}
+
+/* ScrollArea radius scaling */
+.rt-ChatbarScrollArea {
+  border-radius: var(--chatbar-attachments-radius);
+}
+
+/* Hide scrollbars completely */
+.rt-ChatbarScrollArea :where(.rt-ScrollAreaScrollbar) {
+  display: none;
+}
+
+/* Attachment tile now uses Card + Flex, no custom layout needed */
+
+.rt-ChatbarAttachmentPreview {
+  height: var(--chatbar-attachment-thumb);
+  width: var(--chatbar-attachment-thumb);
+  min-width: var(--chatbar-attachment-thumb);
+  flex-shrink: 0;
+  border-radius: var(--radius-1);
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--gray-a3);
+}
+
+.rt-ChatbarAttachmentImage { 
+  height: 100%; 
+  width: auto; 
+  object-fit: contain; 
+  max-width: none;
+}
+
+/* PaperclipIcon handles its own sizing via IconButton */
+
+.rt-ChatbarAttachment {
+  position: relative;
+}
+
+.rt-ChatbarAttachmentRemove {
+  position: absolute;
+  top: var(--chatbar-remove-offset);
+  right: var(--chatbar-remove-offset);
+}
+
+/* Text components handle styling, no custom classes needed */
+
+/* Container widths */
+.rt-ChatbarCard {
+  width: 100%;
+  transition: all var(--motion-duration-small) var(--motion-spring-snappy);
+}
+
+/* Dropzone states */
+.rt-ChatbarRoot {
+  transition: outline var(--motion-duration-small) var(--motion-spring-snappy);
+}
+
+/* Drop overlay */
+.rt-ChatbarDropOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--gray-a3);
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  animation: rt-fade-in var(--motion-duration-small) var(--motion-spring-snappy);
+}
+
+.rt-ChatbarDropContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--accent-11);
+}
+
+.rt-ChatbarDropIcon {
+  width: var(--space-6);
+  height: var(--space-6);
+}
+
+
+/* Inline slot positioning */
+.rt-ChatbarInlineStart,
+.rt-ChatbarInlineEnd {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* Row slot positioning */
+.rt-ChatbarRowStart {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.rt-ChatbarRowEnd {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* Size-based font sizing for chatbar */
+@breakpoints {
+  .rt-ChatbarRoot {
+    &:where(.rt-r-size-1) {
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      --chatbar-attachment-thumb: var(--space-8);
+      --chatbar-remove-offset: var(--space-1);
+      --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-1)));
+    }
+    &:where(.rt-r-size-2) {
+      font-size: var(--font-size-2);
+      line-height: var(--line-height-2);
+      --chatbar-attachment-thumb: var(--space-9);
+      --chatbar-remove-offset: var(--space-2);
+      --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-2)));
+    }
+    &:where(.rt-r-size-3) {
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-3);
+      --chatbar-attachment-thumb: var(--space-9);
+      --chatbar-remove-offset: var(--space-3);
+      --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-3)));
+    }
+  }
+}
+