@jinaan/uikit 0.1.31 → 0.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.31",
+  "version": "0.1.34",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -778,7 +778,7 @@ export function DataTable<T>({
           </span>
           <div className="flex items-center gap-2">
             <Select value={String(pageSize)} onValueChange={(v) => setPageSize(Number(v))}>
-              <SelectTrigger aria-label="Rows per page" className="w-27.5">
+              <SelectTrigger aria-label="Rows per page" className="w-27.5" variant="inline">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>

package/src/dialog.tsx

@@ -263,6 +263,11 @@ export interface DialogContentProps
   placement?: "center" | "top";
   /** Top edge offset for top placement. Defaults to 11dvh. */
   topOffset?: string;
+  /**
+   * Entry/exit motion. `auto` flies from the caller when one is known, while
+   * `command` uses the compact spring used by command palettes.
+   */
+  motion?: "auto" | "command";
 }
 
 function dialogTopFallback(offset: string): string {
@@ -279,6 +284,7 @@ export const DialogContent = forwardRef<
       children,
       placement = "center",
       topOffset = "11dvh",
+      motion = "auto",
       style,
       onEscapeKeyDown,
       onPointerDownOutside,
@@ -299,7 +305,7 @@ export const DialogContent = forwardRef<
     const setRef = useCallback(
       (node: HTMLDivElement | null) => {
         contentRef.current = node;
-        if (node) startDialogMotion(node);
+        if (node && motion === "auto") startDialogMotion(node);
         if (typeof ref === "function") {
           ref(node);
           return;
@@ -308,7 +314,7 @@ export const DialogContent = forwardRef<
           (ref as { current: HTMLDivElement | null }).current = node;
         }
       },
-      [ref],
+      [motion, ref],
     );
 
     return (
@@ -339,6 +345,7 @@ export const DialogContent = forwardRef<
               "dialog-content pointer-events-auto relative flex max-h-[min(85vh,44rem)] w-full max-w-[22.4rem] flex-col gap-0 overflow-hidden will-change-[transform,opacity]",
               "rounded-2xl border border-(--dialog-shell-border) bg-(--dialog-shell-bg) pb-3 shadow-(--dialog-shell-shadow) sm:pb-4",
               top && "dialog-anchor-top",
+              motion === "command" && "dialog-command-motion",
               closing && "dialog-closing",
               "focus:outline-none",
               className,

package/styles.css

@@ -480,6 +480,75 @@
   will-change: transform, opacity;
 }
 
+/*
+ * Command-palette motion: the panel springs from a smaller, slightly
+ * up-and-left pose. Kept separate from the caller-flight so command dialogs
+ * do not visibly travel from the trigger.
+ */
+@keyframes dialog-command-in {
+  from {
+    opacity: 1;
+    transform: translate(-27.4%, -6.3%) scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+}
+
+@keyframes dialog-command-out {
+  from {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-26.6%, -11.1%) scale(0.85);
+  }
+}
+
+.dialog-command-motion {
+  transform-origin: center;
+  animation: dialog-command-in 500ms
+    linear(
+      0 0%,
+      0.1495 6.25%,
+      0.3955 12.5%,
+      0.6061 18.75%,
+      0.7562 25%,
+      0.8542 31.25%,
+      0.9148 37.5%,
+      0.9512 43.75%,
+      0.9724 50%,
+      0.9846 56.25%,
+      0.9914 62.5%,
+      0.9953 68.75%,
+      0.9974 75%,
+      0.9986 81.25%,
+      0.9992 87.5%,
+      1 93.75%,
+      1 100%
+    )
+    both;
+  backface-visibility: hidden;
+  will-change: transform;
+}
+
+.dialog-command-motion.dialog-closing {
+  animation: dialog-command-out 250ms
+    linear(
+      0 0%,
+      0.4615 14.2857%,
+      0.8176 28.5714%,
+      0.9471 42.8571%,
+      0.9858 57.1429%,
+      0.9964 71.4286%,
+      0.9991 85.7143%,
+      1 100%
+    )
+    both;
+}
+
 .dialog-noise {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
   background-size: 160px 160px;