@alpaca-editor/core 1.0.4015 → 1.0.4017

package/dist/styles.css

@@ -24,14 +24,12 @@
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
-    --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-green-800: oklch(44.8% 0.119 151.328);
-    --color-green-900: oklch(39.3% 0.095 152.535);
     --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-teal-100: oklch(95.3% 0.051 180.801);
     --color-teal-400: oklch(77.7% 0.152 181.912);
@@ -420,9 +418,6 @@
   .mt-\[-20px\] {
     margin-top: -20px;
   }
-  .mt-\[9px\] {
-    margin-top: 9px;
-  }
   .mt-\[30px\] {
     margin-top: 30px;
   }
@@ -492,9 +487,6 @@
   .ml-\[-3px\] {
     margin-left: -3px;
   }
-  .ml-\[1px\] {
-    margin-left: 1px;
-  }
   .ml-auto {
     margin-left: auto;
   }
@@ -700,6 +692,9 @@
   .max-h-40 {
     max-height: calc(var(--spacing) * 40);
   }
+  .max-h-48 {
+    max-height: calc(var(--spacing) * 48);
+  }
   .max-h-60 {
     max-height: calc(var(--spacing) * 60);
   }
@@ -1115,6 +1110,9 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
   .grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
@@ -1642,9 +1640,6 @@
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
-  .bg-green-50 {
-    background-color: var(--color-green-50);
-  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -1924,6 +1919,9 @@
   .pt-5 {
     padding-top: calc(var(--spacing) * 5);
   }
+  .pr-0 {
+    padding-right: calc(var(--spacing) * 0);
+  }
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
@@ -2148,15 +2146,9 @@
   .text-green-600 {
     color: var(--color-green-600);
   }
-  .text-green-700 {
-    color: var(--color-green-700);
-  }
   .text-green-800 {
     color: var(--color-green-800);
   }
-  .text-green-900 {
-    color: var(--color-green-900);
-  }
   .text-indigo-800 {
     color: var(--color-indigo-800);
   }
@@ -2427,9 +2419,6 @@
     -webkit-user-select: text;
     user-select: text;
   }
-  .\[--cell-size\:--spacing\(8\)\] {
-    --cell-size: calc(var(--spacing) * 8);
-  }
   .\[animation-delay\:-0\.3s\] {
     animation-delay: -0.3s;
   }
@@ -3756,30 +3745,6 @@
       padding-left: calc(var(--spacing) * 5);
     }
   }
-  .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md {
-    &:first-child[data-selected=true] button {
-      border-top-left-radius: calc(var(--radius) - 2px);
-      border-bottom-left-radius: calc(var(--radius) - 2px);
-    }
-  }
-  .rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      :is(& *) {
-        &:is(.rdp-button_next>svg) {
-          rotate: 180deg;
-        }
-      }
-    }
-  }
-  .rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180 {
-    &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-      :is(& *) {
-        &:is(.rdp-button_previous>svg) {
-          rotate: 180deg;
-        }
-      }
-    }
-  }
   .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive {
     &[data-variant="destructive"] {
       :is(& > *) {
@@ -3789,12 +3754,6 @@
       }
     }
   }
-  .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md {
-    &:last-child[data-selected=true] button {
-      border-top-right-radius: calc(var(--radius) - 2px);
-      border-bottom-right-radius: calc(var(--radius) - 2px);
-    }
-  }
   .\[\&\:not\(\:first-child\)\]\:mt-4 {
     &:not(:first-child) {
       margin-top: calc(var(--spacing) * 4);
@@ -3822,16 +3781,6 @@
       color: var(--muted-foreground);
     }
   }
-  .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
-    [data-slot=card-content] & {
-      background-color: transparent;
-    }
-  }
-  .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
-    [data-slot=popover-content] & {
-      background-color: transparent;
-    }
-  }
   .\[a\&\]\:hover\:bg-accent {
     a& {
       &:hover {
@@ -3887,6 +3836,354 @@
     }
   }
 }
+.rdp-root {
+  --rdp-accent-color: blue;
+  --rdp-accent-background-color: #f0f0ff;
+  --rdp-day-height: 44px;
+  --rdp-day-width: 44px;
+  --rdp-day_button-border-radius: 100%;
+  --rdp-day_button-border: 2px solid transparent;
+  --rdp-day_button-height: 42px;
+  --rdp-day_button-width: 42px;
+  --rdp-selected-border: 2px solid var(--rdp-accent-color);
+  --rdp-disabled-opacity: 0.5;
+  --rdp-outside-opacity: 0.75;
+  --rdp-today-color: var(--rdp-accent-color);
+  --rdp-dropdown-gap: 0.5rem;
+  --rdp-months-gap: 2rem;
+  --rdp-nav_button-disabled-opacity: 0.5;
+  --rdp-nav_button-height: 2.25rem;
+  --rdp-nav_button-width: 2.25rem;
+  --rdp-nav-height: 2.75rem;
+  --rdp-range_middle-background-color: var(--rdp-accent-background-color);
+  --rdp-range_middle-color: inherit;
+  --rdp-range_start-color: white;
+  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);
+  --rdp-range_start-date-background-color: var(--rdp-accent-color);
+  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);
+  --rdp-range_end-color: white;
+  --rdp-range_end-date-background-color: var(--rdp-accent-color);
+  --rdp-week_number-border-radius: 100%;
+  --rdp-week_number-border: 2px solid transparent;
+  --rdp-week_number-height: var(--rdp-day-height);
+  --rdp-week_number-opacity: 0.75;
+  --rdp-week_number-width: var(--rdp-day-width);
+  --rdp-weeknumber-text-align: center;
+  --rdp-weekday-opacity: 0.75;
+  --rdp-weekday-padding: 0.5rem 0rem;
+  --rdp-weekday-text-align: center;
+  --rdp-gradient-direction: 90deg;
+  --rdp-animation_duration: 0.3s;
+  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rdp-root[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
+.rdp-root[data-broadcast-calendar="true"] {
+  --rdp-outside-opacity: unset;
+}
+.rdp-root {
+  position: relative;
+  box-sizing: border-box;
+}
+.rdp-root * {
+  box-sizing: border-box;
+}
+.rdp-day {
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  text-align: center;
+}
+.rdp-day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: var(--rdp-day_button-width);
+  height: var(--rdp-day_button-height);
+  border: var(--rdp-day_button-border);
+  border-radius: var(--rdp-day_button-border-radius);
+}
+.rdp-day_button:disabled {
+  cursor: revert;
+}
+.rdp-caption_label {
+  z-index: 1;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border: 0;
+}
+.rdp-dropdown:focus-visible ~ .rdp-caption_label {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+.rdp-button_next, .rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+  width: var(--rdp-nav_button-width);
+  height: var(--rdp-nav_button-height);
+}
+.rdp-button_next:disabled, .rdp-button_next[aria-disabled="true"], .rdp-button_previous:disabled, .rdp-button_previous[aria-disabled="true"] {
+  cursor: revert;
+  opacity: var(--rdp-nav_button-disabled-opacity);
+}
+.rdp-chevron {
+  display: inline-block;
+  fill: var(--rdp-accent-color);
+}
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+  transform-origin: 50%;
+}
+.rdp-dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+}
+.rdp-dropdown {
+  z-index: 2;
+  opacity: 0;
+  appearance: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  border: none;
+  line-height: inherit;
+}
+.rdp-dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+.rdp-month_caption {
+  display: flex;
+  align-content: center;
+  height: var(--rdp-nav-height);
+  font-weight: bold;
+  font-size: large;
+}
+.rdp-root[data-nav-layout="around"] .rdp-month, .rdp-root[data-nav-layout="after"] .rdp-month {
+  position: relative;
+}
+.rdp-root[data-nav-layout="around"] .rdp-month_caption {
+  justify-content: center;
+  margin-inline-start: var(--rdp-nav_button-width);
+  margin-inline-end: var(--rdp-nav_button-width);
+  position: relative;
+}
+.rdp-root[data-nav-layout="around"] .rdp-button_previous {
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  height: var(--rdp-nav-height);
+  display: inline-flex;
+}
+.rdp-root[data-nav-layout="around"] .rdp-button_next {
+  position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+  height: var(--rdp-nav-height);
+  display: inline-flex;
+  justify-content: center;
+}
+.rdp-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rdp-months-gap);
+  max-width: fit-content;
+}
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+.rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  height: var(--rdp-nav-height);
+}
+.rdp-weekday {
+  opacity: var(--rdp-weekday-opacity);
+  padding: var(--rdp-weekday-padding);
+  font-weight: 500;
+  font-size: smaller;
+  text-align: var(--rdp-weekday-text-align);
+  text-transform: var(--rdp-weekday-text-transform);
+}
+.rdp-week_number {
+  opacity: var(--rdp-week_number-opacity);
+  font-weight: 400;
+  font-size: small;
+  height: var(--rdp-week_number-height);
+  width: var(--rdp-week_number-width);
+  border: var(--rdp-week_number-border);
+  border-radius: var(--rdp-week_number-border-radius);
+  text-align: var(--rdp-weeknumber-text-align);
+}
+.rdp-today:not(.rdp-outside) {
+  color: var(--rdp-today-color);
+}
+.rdp-selected {
+  font-weight: bold;
+  font-size: large;
+}
+.rdp-selected .rdp-day_button {
+  border: var(--rdp-selected-border);
+}
+.rdp-outside {
+  opacity: var(--rdp-outside-opacity);
+}
+.rdp-disabled {
+  opacity: var(--rdp-disabled-opacity);
+}
+.rdp-hidden {
+  visibility: hidden;
+  color: var(--rdp-range_start-color);
+}
+.rdp-range_start {
+  background: var(--rdp-range_start-background);
+}
+.rdp-range_start .rdp-day_button {
+  background-color: var(--rdp-range_start-date-background-color);
+  color: var(--rdp-range_start-color);
+}
+.rdp-range_middle {
+  background-color: var(--rdp-range_middle-background-color);
+}
+.rdp-range_middle .rdp-day_button {
+  border-color: transparent;
+  border: unset;
+  border-radius: unset;
+  color: var(--rdp-range_middle-color);
+}
+.rdp-range_end {
+  background: var(--rdp-range_end-background);
+  color: var(--rdp-range_end-color);
+}
+.rdp-range_end .rdp-day_button {
+  color: var(--rdp-range_start-color);
+  background-color: var(--rdp-range_end-date-background-color);
+}
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+.rdp-focusable {
+  cursor: pointer;
+}
+@keyframes rdp-slide_in_left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes rdp-slide_in_right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes rdp-slide_out_left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+@keyframes rdp-slide_out_right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+.rdp-weeks_before_enter {
+  animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-weeks_before_exit {
+  animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-weeks_after_enter {
+  animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-weeks_after_exit {
+  animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
+  animation: rdp-slide_in_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
+  animation: rdp-slide_out_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
+  animation: rdp-slide_in_right var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
+  animation: rdp-slide_out_left var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+@keyframes rdp-fade_in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes rdp-fade_out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.rdp-caption_after_enter {
+  animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-caption_after_exit {
+  animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-caption_before_enter {
+  animation: rdp-fade_in var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
+.rdp-caption_before_exit {
+  animation: rdp-fade_out var(--rdp-animation_duration) var(--rdp-animation_timing) forwards;
+}
 * {
   font-family: var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/core",
-  "version": "1.0.4015",
+  "version": "1.0.4017",
   "publishConfig": {
     "access": "public"
   },

package/src/components/ui/calendar.tsx

@@ -28,12 +28,7 @@ function Calendar({
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
+      className={cn("bg-background group/calendar p-3", className)}
       captionLayout={captionLayout}
       formatters={{
         formatMonthDropdown: (date) =>
@@ -100,7 +95,7 @@ function Calendar({
           defaultClassNames.week_number,
         ),
         day: cn(
-          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          "relative w-full h-full p-0 text-center aspect-square",
           defaultClassNames.day,
         ),
         range_start: cn(
@@ -125,16 +120,6 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          );
-        },
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === "left") {
             return (
@@ -155,7 +140,6 @@ function Calendar({
             <ChevronDownIcon className={cn("size-4", className)} {...props} />
           );
         },
-        // DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>

package/src/components/ui/card.tsx

@@ -19,6 +19,7 @@ export function Card({
   footer,
   showFullscreenButton = false,
   onFullscreen,
+  headerActions,
 }: {
   children: React.ReactNode;
   icon: React.ReactNode;
@@ -32,6 +33,7 @@ export function Card({
   footer?: React.ReactNode;
   showFullscreenButton?: boolean;
   onFullscreen?: () => void;
+  headerActions?: React.ReactNode;
 }) {
   const [isExpanded, setIsExpanded] = useState(() => {
     if (defaultCollapsed === "yes") return false; // Starts collapsed
@@ -133,6 +135,9 @@ export function Card({
               </div>
             </div>
             <div className="flex items-center gap-2">
+              {/* Custom header actions */}
+              {headerActions}
+
               {/* Fullscreen button - only on mobile */}
               {showFullscreenButton && (
                 <button

package/src/components/ui/copy-button.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Copy } from "lucide-react";
 
@@ -21,6 +21,35 @@ export function CopyButton({
   const [showCopiedHint, setShowCopiedHint] = useState(false);
   const buttonRef = useRef<HTMLElement>(null);
 
+  // Add keyframes to document head once
+  useEffect(() => {
+    const styleId = "copy-button-animations";
+    if (document.getElementById(styleId)) return;
+
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      @keyframes shake {
+        0%, 100% { transform: translateX(-50%) rotate(0deg); }
+        10% { transform: translateX(-50%) rotate(-2deg) scale(1.05); }
+        20% { transform: translateX(-50%) rotate(2deg) scale(1.1); }
+        30% { transform: translateX(-50%) rotate(-2deg) scale(1.05); }
+        40% { transform: translateX(-50%) rotate(2deg) scale(1.1); }
+        50% { transform: translateX(-50%) rotate(-1deg) scale(1.02); }
+        60% { transform: translateX(-50%) rotate(1deg) scale(1.02); }
+        70% { transform: translateX(-50%) rotate(-1deg); }
+        80% { transform: translateX(-50%) rotate(1deg); }
+        90% { transform: translateX(-50%) rotate(0deg); }
+      }
+      @keyframes fadeOut {
+        0% { opacity: 1; }
+        70% { opacity: 1; }
+        100% { opacity: 0; }
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(textToCopy);
@@ -56,9 +85,9 @@ export function CopyButton({
         buttonRef.current &&
         createPortal(
           <div
-            className="pointer-events-none fixed z-[9999] animate-pulse rounded bg-gray-800 px-2 py-1 text-xs whitespace-nowrap text-white shadow-lg"
+            className="pointer-events-none fixed z-[9999] rounded bg-gray-800 px-2 py-1 text-xs whitespace-nowrap text-white shadow-lg"
             style={{
-              animation: "fadeOut 2s ease-out forwards",
+              animation: "shake 0.5s ease-in-out, fadeOut 2s ease-out forwards",
               left:
                 buttonRef.current.getBoundingClientRect().left +
                 buttonRef.current.offsetWidth / 2,