margo-ui 1.3.5 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",

package/src/components/button/style.ts

@@ -1,6 +1,7 @@
 export const buttonBaseClassName = `group/button flex h-8 w-fit shrink-0 items-center px-2 rounded-lg border-2 text-on-main
 hover:border-on-main hover:text-on-main focus-visible:margo-border-gradient-primary
-focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main shadow-button`;
+focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main shadow-button
+select-none origin-center transition-transform duration-[160ms] ease-out active:scale-[0.95]`;
 
 export const buttonSurfaceClassName = "border-border bg-main";
 

package/src/components/item/style.ts

@@ -1,6 +1,7 @@
 export const itemBaseClassName = `group/item flex w-full cursor-pointer items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
 text-sm focus-visible:margo-border-gradient-primary focus-visible:outline select-none
-focus-visible:outline-offset-1 focus-visible:outline-on-main`;
+focus-visible:outline-offset-1 focus-visible:outline-on-main
+origin-center bg-border/20 transition-transform duration-[160ms] ease-out active:scale-[0.98]`;
 
 export const itemSurfaceClassName = `border-transparent text-medium hover:border-border hover:text-on-main
 hover:shadow-item focus-visible:shadow-item`;

package/src/css/variables.css

@@ -53,7 +53,7 @@
   --margo-color-primary: #57e550;
   --margo-color-primary-darken: #45b93f;
   --margo-color-secondary: #d3d3d3;
-  --margo-color-medium: #858585;
+  --margo-color-medium: #808080;
   --margo-color-border: #cecece;
 
   --margo-shadow-card: 0 8px 6px -4px rgb(220, 220, 220, 0.5);

package/src/hoc/ripple/ripple.tsx

@@ -13,14 +13,14 @@ import "./ripple.css";
 export const Ripple = ({ children, disabled = false, rippleClassName = "bg-primary-darken" }: RippleProps) => {
   const { endRipple, ripple, startRipple } = useRipple();
 
-  const handlePointerDown = (event: PointerEvent<HTMLElement>) => {
+  const handlePointerUp = (event: PointerEvent<HTMLElement>) => {
     if (!disabled) startRipple(event);
-    children.props.onPointerDown?.(event);
+    children.props.onPointerUp?.(event);
   };
 
   return cloneElement(children, {
     className: cn("relative overflow-hidden", children.props.className),
-    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerUp,
     children: (
       <>
         {children.props.children}

package/src/hoc/ripple/type.ts

@@ -3,7 +3,7 @@ import type { PointerEvent, PointerEventHandler, ReactElement, ReactNode } from
 export type RippleChildProps = {
   children?: ReactNode;
   className?: string;
-  onPointerDown?: PointerEventHandler<HTMLElement>;
+  onPointerUp?: PointerEventHandler<HTMLElement>;
 };
 
 export type RippleProps = {