@jinaan/uikit 0.1.19 → 0.1.21

package/dist/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,OAAO,CAAC;AAKf,eAAO,MAAM,WAAW,6HAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,8HAAwB,CAAC;AAEjD,oEAAoE;AACpE,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,+BAQvD;AAED,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAClE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,kHAwBxB,CAAC;AAGH,eAAO,MAAM,aAAa,4LA+BzB,CAAC;AAGF,eAAO,MAAM,UAAU,yLAmBrB,CAAC;AAGH,eAAO,MAAM,WAAW,0LAStB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,OAAO,CAAC;AAKf,eAAO,MAAM,WAAW,6HAAwB,CAAC;AACjD,eAAO,MAAM,WAAW,8HAAwB,CAAC;AAEjD,oEAAoE;AACpE,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,+BAQvD;AAED,MAAM,WAAW,kBAAmB,SAAQ,wBAAwB,CAClE,OAAO,eAAe,CAAC,OAAO,CAC/B;IACC,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,kHAuBxB,CAAC;AAGH,eAAO,MAAM,aAAa,4LA+BzB,CAAC;AAGF,eAAO,MAAM,UAAU,yLAmBrB,CAAC;AAGH,eAAO,MAAM,WAAW,0LAStB,CAAC"}

package/package.json

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

package/src/button.tsx

@@ -122,14 +122,16 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 </span>
               ) : null}
             </span>
-            {loading && (
-              <span
-                className="pointer-events-none absolute inset-0 flex items-center justify-center animate-in fade-in-0 slide-in-from-top-2 duration-150"
-                aria-hidden
-              >
-                <Spinner className={cn("text-current", icon)} />
-              </span>
-            )}
+            <span
+              data-button-spinner
+              className={cn(
+                "pointer-events-none absolute inset-0 flex items-center justify-center transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none",
+                loading ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0",
+              )}
+              aria-hidden
+            >
+              <Spinner className={cn("text-current", icon)} />
+            </span>
           </span>
         )}
       </Comp>

package/src/dropdown-menu.tsx

@@ -1,5 +1,5 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CaretRight, Check } from "@phosphor-icons/react";
+import { CaretDown, CaretRight, Check } from "@phosphor-icons/react";
 import {
   createContext,
   forwardRef,
@@ -48,6 +48,22 @@ export const DropdownMenuTrigger = forwardRef<
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 
+export const DropdownMenuChevron = forwardRef<
+  SVGSVGElement,
+  ComponentPropsWithoutRef<typeof CaretDown>
+>(({ className, ...props }, ref) => (
+  <CaretDown
+    ref={ref}
+    aria-hidden
+    className={cn(
+      "ml-auto size-3.5 shrink-0 text-subtle transition-transform duration-200 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuChevron.displayName = "DropdownMenuChevron";
+
 export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 

package/src/select.tsx

@@ -41,10 +41,9 @@ export const SelectTrigger = forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex items-center justify-between gap-2 text-sm text-fg",
+      "group flex items-center justify-between gap-2 text-sm text-fg",
       "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
       "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-      "[&>span]:truncate",
       variant === "field" &&
         "h-(--control-h-md) w-full rounded-md border border-line bg-surface px-3 focus:border-primary focus:ring-2 focus:ring-focus/30",
       variant === "inline" &&
@@ -53,9 +52,9 @@ export const SelectTrigger = forwardRef<
     )}
     {...props}
   >
-    {children}
+    <span className="min-w-0 flex-1 truncate text-left">{children}</span>
     <SelectPrimitive.Icon asChild>
-      <CaretDown className="size-3.5 text-subtle" />
+      <CaretDown className="ml-auto size-3.5 shrink-0 text-subtle transition-transform duration-200 ease-out group-data-[state=open]:rotate-180 motion-reduce:transition-none" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));