margo-ui 5.0.0 → 5.1.0

package/package.json

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

package/src/components/button/button.tsx

@@ -45,6 +45,7 @@ export const Button = <T extends ElementType = "button">({
         data-margo-open={open}
         data-margo-disabled={disabled}
         aria-disabled={disabled || undefined}
+        data-active={active || undefined}
         inert={disabled || !clickable || undefined}
         onClick={handleClick}
         className={cn(

package/src/components/button/style.ts

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

package/src/components/card/style.ts

@@ -1,4 +1,4 @@
-export const cardBaseClassName = "rounded-margo-1 border-margo border-border bg-main p-5 text-on-main shadow-card";
+export const cardBaseClassName = "rounded-margo-base border-margo border-border bg-main p-5 text-on-main shadow-card";
 
 export const cardFocusClassName = `focus:border-primary focus-visible:outline focus-visible:outline-offset-1
 focus-visible:outline-on-main`;

package/src/components/checkbox/style.ts

@@ -1,4 +1,4 @@
-export const checkboxBaseClassName = `margo-checkbox size-5 flex-none cursor-pointer rounded-margo-3/4 border-margo border-border
+export const checkboxBaseClassName = `margo-checkbox size-5 flex-none cursor-pointer rounded-margo-sm border-margo border-border
 bg-main p-1 text-on-main enabled:hover:border-on-main focus-visible:border-primary focus-visible:outline
 focus-visible:outline-offset-1 focus-visible:outline-on-main checked:border-primary indeterminate:border-primary
 select-none origin-center transition-transform duration-[120ms] ease-out active:scale-[0.92] disabled:cursor-auto

package/src/components/chip/style.ts

@@ -1,5 +1,5 @@
 export const chipBaseClassName = `bg-on-main/8 margo-text-box-trim flex items-center justify-center px-3 py-0.5
-whitespace-nowrap lowercase flex-none leading-none rounded-margo-3/4 text-mc shadow-chip
+whitespace-nowrap lowercase flex-none leading-none rounded-margo-sm text-mc shadow-chip
 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main`;
 
 export const chipActiveClassName = "bg-on-main text-main";

package/src/components/code/style.ts

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

package/src/components/dialog/style.ts

@@ -1,5 +1,5 @@
 export const dialogBaseClassName = `flex m-4 max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] flex-col overflow-hidden
-rounded-margo-1 border-margo border-border bg-main text-on-main shadow-sm`;
+rounded-margo-base border-margo border-border bg-main text-on-main shadow-sm`;
 
 export const dialogBodyClassName = "min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm";
 

package/src/components/input/style.ts

@@ -1,4 +1,4 @@
-export const inputBaseClassName = `group/input flex h-10 w-full cursor-text items-center rounded-margo-1 border-margo text-on-main
+export const inputBaseClassName = `group/input flex h-10 w-full cursor-text items-center rounded-margo-base border-margo text-on-main
 text-sm select-none bg-low
 border-transparent text-medium hover:border-on-main hover:text-on-main hover:shadow-item
 focus-within:border-primary focus-within:text-on-main

package/src/components/item/style.ts

@@ -1,4 +1,4 @@
-export const itemBaseClassName = `group/item flex w-full cursor-pointer items-center gap-1 rounded-margo-1 border-margo px-3 py-2 text-on-main
+export const itemBaseClassName = `group/item flex w-full cursor-pointer items-center gap-1 rounded-margo-base border-margo px-3 py-2 text-on-main
 text-sm focus-visible:border-primary focus-visible:outline select-none
 focus-visible:outline-offset-1 min-h-[2.5rem] hover:border-on-main focus-visible:outline-on-main
 origin-center bg-low transition-transform duration-[160ms] ease-out active:scale-[0.98]`;

package/src/components/popover/style.ts

@@ -3,7 +3,7 @@ import type { PopoverAlign, PopoverPosition } from "./type.js";
 export const popoverAnchorClassName = "relative inline-block size-fit";
 
 export const popoverBaseClassName = `margo-popover absolute z-20 m-0 flex w-max max-w-[calc(100vw-2rem)] flex-col
-overflow-clip rounded-margo-1 border-margo border-border bg-main text-on-main shadow-card outline-none`;
+overflow-clip rounded-margo-base border-margo border-border bg-main text-on-main shadow-card outline-none`;
 
 export const popoverBodyClassName = `flex min-h-0 max-h-56 flex-col gap-1
 overflow-y-auto overscroll-contain w-64 p-2 text-sm`;

package/src/components/progress_bar/progress_bar.css

@@ -11,12 +11,14 @@
 
 .margo-progress-bar[data-margo-mode="determinate"][data-margo-animate="true"]::before {
   transition: clip-path 300ms ease-out;
+  transition-delay: var(--margo-progress-bar-delay, 0ms);
 }
 
 .margo-progress-bar[data-margo-mode="indeterminate"]::before {
   inset: 0 auto 0 0;
   width: 50%;
   animation: margo-progress-bar-indeterminate 800ms ease-in-out infinite;
+  animation-delay: var(--margo-progress-bar-delay, 0ms);
 }
 
 @keyframes margo-progress-bar-indeterminate {

package/src/components/progress_bar/progress_bar.tsx

@@ -10,6 +10,7 @@ import "./progress_bar.css";
 
 export const ProgressBar = <T extends ElementType = "div">({
   animate = true,
+  delay,
   fill = progressBarDefaultFill,
   mode = "indeterminate",
   style,
@@ -30,7 +31,14 @@ export const ProgressBar = <T extends ElementType = "div">({
       data-margo-mode={mode}
       data-margo-animate={animate}
       style={
-        { ...style, "--margo-progress-bar-fill": fill, "--margo-progress-bar-value": `${progress}%` } as CSSProperties
+        {
+          ...style,
+          "--margo-progress-bar-fill": fill,
+          "--margo-progress-bar-value": `${progress}%`,
+          ...(delay != null && {
+            "--margo-progress-bar-delay": typeof delay === "number" ? `${delay}ms` : delay,
+          }),
+        } as CSSProperties
       }
       className={cn(progressBarBaseClassName, className)}
     />

package/src/components/progress_bar/type.ts

@@ -5,6 +5,7 @@ export type ProgressBarMode = "determinate" | "indeterminate";
 
 export type ProgressBarOwnProps = {
   animate?: boolean;
+  delay?: number | string;
   fill?: string;
   mode?: ProgressBarMode;
   value?: number;

package/src/components/select/style.ts

@@ -1,4 +1,4 @@
-export const selectBaseClassName = `group/select relative flex h-10 w-full items-center rounded-margo-1
+export const selectBaseClassName = `group/select relative flex h-10 w-full items-center rounded-margo-base
 border-margo border-transparent bg-low text-sm text-medium select-none
 hover:border-on-main hover:text-on-main hover:shadow-item
 focus-within:border-primary focus-within:text-on-main
@@ -6,7 +6,7 @@ has-[select:disabled]:pointer-events-none has-[select:disabled]:opacity-40`;
 
 export const selectActiveClassName = "border-primary";
 
-export const selectControlClassName = `h-full min-w-0 flex-1 cursor-pointer appearance-none truncate rounded-margo-1
+export const selectControlClassName = `h-full min-w-0 flex-1 cursor-pointer appearance-none truncate rounded-margo-base
 bg-transparent pl-3 text-left text-on-main outline-none disabled:cursor-auto
 has-[option[value='']:checked]:text-medium
 [&>option]:bg-main [&>option]:text-on-main

package/src/components/table/style.ts

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

package/src/components/tooltip/style.ts

@@ -2,7 +2,7 @@ import type { TooltipPosition } from "./type.js";
 
 export const tooltipAnchorClassName = "group relative inline-block size-fit";
 
-export const tooltipBubbleClassName = `pointer-events-none absolute z-10 rounded-margo-1/2 bg-on-main px-2 py-0.5 text-xs text-main lowercase
+export const tooltipBubbleClassName = `pointer-events-none absolute z-10 rounded-margo-xs bg-on-main px-2 py-0.5 text-xs text-main lowercase
 whitespace-nowrap opacity-0`;
 
 export const tooltipTransitionClassName = "transition-opacity duration-[250ms] ease-in-out";

package/src/css/theme.css

@@ -40,9 +40,10 @@
   --z-index-max: var(--margo-max-z-index);
 
   /* Radii */
-  --radius-margo-1: var(--margo-radius);
-  --radius-margo-3\/4: calc(var(--margo-radius) * 3 / 4);
-  --radius-margo-1\/2: calc(var(--margo-radius) / 2);
+  --radius-margo-mc: calc(var(--margo-radius) / 4);
+  --radius-margo-xs: calc(var(--margo-radius) / 2);
+  --radius-margo-sm: calc(var(--margo-radius) * 3 / 4);
+  --radius-margo-base: var(--margo-radius);
 
   /* Border widths */
   --border-width-margo: var(--margo-border);
@@ -60,35 +61,42 @@
 
   /* Font sizes */
   --text-mc: var(--margo-font-size-mc);
-  --text-mc--line-height: 1.5;
   --text-xs: var(--margo-font-size-xs);
-  --text-xs--line-height: 1.5;
+  --text-xs--line-height: initial;
   --text-sm: var(--margo-font-size-sm);
-  --text-sm--line-height: 1.5;
+  --text-sm--line-height: initial;
   --text-base: var(--margo-font-size-base);
-  --text-base--line-height: 1.25;
+  --text-base--line-height: initial;
   --text-md: var(--margo-font-size-md);
-  --text-md--line-height: 1.25;
   --text-lg: var(--margo-font-size-lg);
-  --text-lg--line-height: 1.25;
+  --text-lg--line-height: initial;
   --text-2lg: var(--margo-font-size-2lg);
-  --text-2lg--line-height: 1;
   --text-xl: var(--margo-font-size-xl);
-  --text-xl--line-height: 1;
+  --text-xl--line-height: initial;
   --text-2xl: var(--margo-font-size-2xl);
-  --text-2xl--line-height: 0.75;
+  --text-2xl--line-height: initial;
   --text-3xl: var(--margo-font-size-3xl);
-  --text-3xl--line-height: 0.75;
+  --text-3xl--line-height: initial;
   --text-4xl: var(--margo-font-size-4xl);
-  --text-4xl--line-height: 0.75;
+  --text-4xl--line-height: initial;
   --text-5xl: var(--margo-font-size-5xl);
-  --text-5xl--line-height: 0.75;
+  --text-5xl--line-height: initial;
   --text-6xl: var(--margo-font-size-6xl);
-  --text-6xl--line-height: 0.75;
+  --text-6xl--line-height: initial;
   --text-7xl: var(--margo-font-size-7xl);
-  --text-7xl--line-height: 0.75;
+  --text-7xl--line-height: initial;
   --text-8xl: var(--margo-font-size-8xl);
-  --text-8xl--line-height: 0.75;
+  --text-8xl--line-height: initial;
   --text-9xl: var(--margo-font-size-9xl);
-  --text-9xl--line-height: 0.75;
+  --text-9xl--line-height: initial;
+
+  /* Line heights */
+  --leading-mc: calc(var(--margo-line-height) / 6);
+  --leading-xs: calc(var(--margo-line-height) / 3);
+  --leading-sm: calc(var(--margo-line-height) / 2);
+  --leading-md: calc(var(--margo-line-height) * 2 / 3);
+  --leading-lg: calc(var(--margo-line-height) * 5 / 6);
+  --leading-base: var(--margo-line-height);
+  --leading-xl: calc(var(--margo-line-height) * 7 / 6);
+  --leading-2xl: calc(var(--margo-line-height) * 4 / 3);
 }

package/src/css/variables.css

@@ -29,6 +29,8 @@
   --margo-font-weight-extrabold: 800;
   --margo-font-weight-black: 900;
 
+  --margo-line-height: 1.5;
+
   --margo-radius: 0.5rem;
 
   --margo-border: 1.5px;

package/src/utils/cn/cn.ts

@@ -7,7 +7,7 @@ const isNumber = (value: string) => /^\d+$/.test(value);
 
 const isColumnLine = (value: string) => value === "full" || value === "content" || isNumber(value);
 
-const isMargoStep = (value: string) => /^margo-\d+(\/\d+)?$/.test(value);
+const isMargoRadiusStep = (value: string) => /^margo-(mc|xs|sm|base)$/.test(value);
 
 const BORDER_SIDES = ["", "x", "y", "s", "e", "t", "r", "b", "l"] as const;
 const RADIUS_CORNERS = ["", "s", "e", "t", "r", "b", "l", "ss", "se", "ee", "es", "tl", "tr", "br", "bl"] as const;
@@ -22,7 +22,7 @@ const borderWidthGroups = Object.fromEntries(
 const radiusGroups = Object.fromEntries(
   RADIUS_CORNERS.map((corner) => [
     corner ? `rounded-${corner}` : "rounded",
-    [{ [corner ? `rounded-${corner}` : "rounded"]: [isMargoStep] }],
+    [{ [corner ? `rounded-${corner}` : "rounded"]: [isMargoRadiusStep] }],
   ]),
 );