margo-ui 1.3.5 → 1.5.0

package/README.md

@@ -1,6 +1,6 @@
 # margo-ui
 
-A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.
+React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.
 
 Package: [npmjs.com/package/margo-ui](https://www.npmjs.com/package/margo-ui)
 

package/package.json

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

package/src/components/button/button.tsx

@@ -77,7 +77,7 @@ Button.IconLabel = ({
   className,
 }: ButtonIconLabelProps) => (
   <span
-    style={{ "--button-gap": gap } as CSSProperties}
+    style={{ "--margo-button-gap": gap } as CSSProperties}
     className={cn(
       buttonGridClassName,
       side === "start" && "[direction:rtl]",

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";
 
@@ -19,13 +20,13 @@ export const buttonLabelClassName =
 export const buttonGridClassName =
   "grid items-center gap-0 transition-[grid-template-columns,gap] duration-[180ms] ease-in-out";
 
-export const buttonGridForwardClassName = `grid-cols-[1rem_0fr] group-hover/button:grid-cols-[1rem_1fr] group-hover/button:gap-(--button-gap)
-group-focus-visible/button:grid-cols-[1rem_1fr] group-focus-visible/button:gap-(--button-gap)
-group-data-[margo-open=true]/button:grid-cols-[1rem_1fr] group-data-[margo-open=true]/button:gap-(--button-gap)`;
+export const buttonGridForwardClassName = `grid-cols-[1rem_0fr] group-hover/button:grid-cols-[1rem_1fr] group-hover/button:gap-(--margo-button-gap)
+group-focus-visible/button:grid-cols-[1rem_1fr] group-focus-visible/button:gap-(--margo-button-gap)
+group-data-[margo-open=true]/button:grid-cols-[1rem_1fr] group-data-[margo-open=true]/button:gap-(--margo-button-gap)`;
 
-export const buttonGridReverseClassName = `grid-cols-[auto_0rem] group-hover/button:grid-cols-[auto_1rem] group-hover/button:gap-(--button-gap)
-group-focus-visible/button:grid-cols-[auto_1rem] group-focus-visible/button:gap-(--button-gap)
-group-data-[margo-open=true]/button:grid-cols-[auto_1rem] group-data-[margo-open=true]/button:gap-(--button-gap)`;
+export const buttonGridReverseClassName = `grid-cols-[auto_0rem] group-hover/button:grid-cols-[auto_1rem] group-hover/button:gap-(--margo-button-gap)
+group-focus-visible/button:grid-cols-[auto_1rem] group-focus-visible/button:gap-(--margo-button-gap)
+group-data-[margo-open=true]/button:grid-cols-[auto_1rem] group-data-[margo-open=true]/button:gap-(--margo-button-gap)`;
 
 export const buttonSlotClassName = `min-w-0 overflow-hidden opacity-0 transition-opacity duration-[180ms] ease-in
 group-hover/button:opacity-100 group-focus-visible/button:opacity-100 group-data-[margo-open=true]/button:opacity-100`;

package/src/components/code/code.tsx

@@ -0,0 +1,16 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { codeBaseClassName, codeFilledClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { CodeProps } from "./type.js";
+
+export const Code = <T extends ElementType = "code">({ filled = false, className, children, ...rest }: CodeProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest, "code")}
+    className={cn(codeBaseClassName, filled && codeFilledClassName, className)}
+  >
+    {children}
+  </Tag>
+);

package/src/components/code/style.ts

@@ -0,0 +1,3 @@
+export const codeBaseClassName = "font-mono text-xs text-medium";
+
+export const codeFilledClassName = "rounded-sm bg-neutral/60 px-1 py-0.5 text-on-main/90";

package/src/components/code/type.ts

@@ -0,0 +1,8 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type CodeOwnProps = {
+  filled?: boolean;
+};
+
+export type CodeProps<T extends ElementType = "code"> = TagProps<T, CodeOwnProps>;

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/components/spinner/spinner.tsx

@@ -8,9 +8,9 @@ import type { SpinnerProps } from "./type.js";
 
 export const Spinner = <T extends ElementType = "span">({ className, label = "Loading", ...rest }: SpinnerProps<T>) => (
   <Tag
+    aria-label={label}
     {...Tag.forward<T>(rest, "span")}
     role="status"
-    aria-label={label}
     className={cn(spinnerBaseClassName, className)}
   >
     <svg viewBox="0 0 24 24" aria-hidden className={spinnerIconClassName}>

package/src/components/spinner/type.ts

@@ -5,4 +5,4 @@ export type SpinnerOwnProps = {
   label?: string;
 };
 
-export type SpinnerProps<T extends ElementType = "span"> = Omit<TagProps<T, SpinnerOwnProps>, "aria-label">;
+export type SpinnerProps<T extends ElementType = "span"> = TagProps<T, SpinnerOwnProps>;

package/src/components/table/style.ts

@@ -1,4 +1,4 @@
-export const tableWrapperClassName = "w-full overflow-x-auto rounded-lg border-2 border-border";
+export const tableWrapperClassName = "w-full overflow-x-auto overscroll-x-none rounded-lg border-2 border-border";
 
 export const tableBaseClassName = "w-full border-collapse text-xs text-on-main";
 

package/src/components/tooltip/type.ts

@@ -11,7 +11,4 @@ export type TooltipOwnProps = {
   children?: ReactNode;
 };
 
-export type TooltipProps<T extends ElementType = "div"> = Omit<
-  TagProps<T, TooltipOwnProps>,
-  "aria-label"
->;
+export type TooltipProps<T extends ElementType = "div"> = TagProps<T, TooltipOwnProps>;

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 = {

package/src/index.ts

@@ -3,6 +3,7 @@ export { Button } from "./components/button/button.js";
 export { ButtonMicro } from "./components/button_micro/button_micro.js";
 export { Card } from "./components/card/card.js";
 export { Chip } from "./components/chip/chip.js";
+export { Code } from "./components/code/code.js";
 export { Dialog } from "./components/dialog/dialog.js";
 export { Header } from "./components/header/header.js";
 export { Layer } from "./components/layer/layer.js";
@@ -42,6 +43,7 @@ export type {
 export type { ButtonMicroProps } from "./components/button_micro/type.js";
 export type { CardProps } from "./components/card/type.js";
 export type { ChipProps } from "./components/chip/type.js";
+export type { CodeOwnProps, CodeProps } from "./components/code/type.js";
 export type { DialogBodyProps, DialogFooterProps, DialogProps } from "./components/dialog/type.js";
 export type {
   HeaderLeadingProps,