margo-ui 1.5.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.5.0",
+  "version": "2.0.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

@@ -11,7 +11,6 @@ import {
   buttonGridReverseClassName,
   buttonIconClassName,
   buttonLabelClassName,
-  buttonNotClickableClassName,
   buttonSlotClassName,
   buttonSurfaceClassName,
 } from "./style.js";
@@ -46,12 +45,11 @@ export const Button = <T extends ElementType = "button">({
         data-margo-open={open}
         data-margo-disabled={disabled}
         aria-disabled={disabled || undefined}
-        tabIndex={disabled || !clickable ? -1 : undefined}
+        inert={disabled || !clickable || undefined}
         onClick={handleClick}
         className={cn(
           buttonBaseClassName,
           active ? buttonActiveClassName : buttonSurfaceClassName,
-          !clickable && buttonNotClickableClassName,
           disabled && buttonDisabledClassName,
           className,
         )}

package/src/components/button/style.ts

@@ -1,15 +1,13 @@
 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
+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]`;
 
 export const buttonSurfaceClassName = "border-border bg-main";
 
-export const buttonActiveClassName = "margo-border-gradient-primary";
+export const buttonActiveClassName = "border-primary shadow-button";
 
-export const buttonNotClickableClassName = "pointer-events-none cursor-auto";
-
-export const buttonDisabledClassName = "pointer-events-none cursor-auto opacity-40";
+export const buttonDisabledClassName = "opacity-40";
 
 export const buttonIconClassName =
   "relative z-10 flex size-4 min-w-0 shrink-0 items-center justify-center [direction:ltr]";
@@ -18,7 +16,7 @@ export const buttonLabelClassName =
   "relative z-10 flex items-center text-sm whitespace-nowrap margo-text-box-trim lowercase [direction:ltr] px-0.5";
 
 export const buttonGridClassName =
-  "grid items-center gap-0 transition-[grid-template-columns,gap] duration-[180ms] ease-in-out";
+  "grid items-center gap-0 whitespace-nowrap 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-(--margo-button-gap)
 group-focus-visible/button:grid-cols-[1rem_1fr] group-focus-visible/button:gap-(--margo-button-gap)
@@ -28,5 +26,5 @@ export const buttonGridReverseClassName = `grid-cols-[auto_0rem] group-hover/but
 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
+export const buttonSlotClassName = `min-w-0 overflow-hidden whitespace-nowrap 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/button_micro/style.ts

@@ -1,6 +1,6 @@
 export const buttonMicroBaseClassName = `w-fit text-xs underline underline-offset-2 outline-none
-focus-visible:text-on-main`;
+focus-visible:text-on-main hover:text-on-main`;
 
-export const buttonMicroSurfaceClassName = "text-medium hover:text-on-main";
+export const buttonMicroSurfaceClassName = "text-medium";
 
 export const buttonMicroActiveClassName = "text-primary-darken";

package/src/components/card/style.ts

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

package/src/components/chip/style.ts

@@ -1,4 +1,4 @@
 export const chipBaseClassName =
-  "bg-secondary margo-text-box-trim flex items-center justify-center px-3 py-0.5 whitespace-nowrap lowercase flex-none leading-none rounded-md text-mc shadow-chip";
+  "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-md text-mc shadow-chip";
 
 export const chipActiveClassName = "bg-on-main text-main";

package/src/components/input/input.tsx

@@ -0,0 +1,33 @@
+import { MdSearch } from "react-icons/md";
+
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { inputActiveClassName, inputBaseClassName, inputIconClassName, inputTextClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { InputIconProps, InputProps, InputTextProps } from "./type.js";
+
+export const Input = <T extends ElementType = "div">({
+  active = false,
+  clickable = true,
+  className,
+  ...rest
+}: InputProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest, "div")}
+    data-margo-active={active}
+    inert={!clickable || undefined}
+    className={cn(inputBaseClassName, active && inputActiveClassName, className)}
+  />
+);
+
+Input.Icon = ({ icon = <MdSearch className="text-md" />, className }: InputIconProps) => (
+  <span data-margo-input-slot={true} className={cn(inputIconClassName, className)}>
+    {icon}
+  </span>
+);
+
+Input.Text = ({ className, ...rest }: InputTextProps) => (
+  <input {...rest} className={cn(inputTextClassName, className)} />
+);

package/src/components/input/style.ts

@@ -0,0 +1,13 @@
+export const inputBaseClassName = `group/input flex w-full cursor-text items-center gap-1 rounded-lg border-2 px-3 py-2 text-on-main
+text-sm select-none min-h-[2.5rem] bg-low
+border-transparent text-medium hover:border-on-main hover:text-on-main hover:shadow-input
+focus-within:border-primary focus-within:text-on-main
+has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-auto has-[input:disabled]:opacity-40`;
+
+export const inputActiveClassName = "border-primary";
+
+export const inputIconClassName = `ml-auto flex size-4 flex-none shrink-0 items-center justify-center first:ml-0
+[[data-margo-input-slot]+&]:ml-0`;
+
+export const inputTextClassName = `min-w-0 flex-1 truncate border-none bg-transparent text-left text-on-main outline-none
+placeholder:text-medium disabled:cursor-auto`;

package/src/components/input/type.ts

@@ -0,0 +1,16 @@
+import type { TagProps } from "react-renderable";
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+
+export type InputOwnProps = {
+  active?: boolean;
+  clickable?: boolean;
+};
+
+export type InputProps<T extends ElementType = "div"> = TagProps<T, InputOwnProps>;
+
+export type InputIconProps = {
+  icon?: ReactNode;
+  className?: string;
+};
+
+export type InputTextProps = ComponentPropsWithoutRef<"input">;

package/src/components/item/item.tsx

@@ -9,7 +9,6 @@ import {
   itemDisabledClassName,
   itemIconClassName,
   itemLabelClassName,
-  itemNotClickableClassName,
   itemSurfaceClassName,
 } from "./style.js";
 
@@ -44,12 +43,11 @@ export const Item = <T extends ElementType = "button">({
         data-margo-active={active}
         data-margo-disabled={disabled}
         aria-disabled={disabled || undefined}
-        tabIndex={disabled || !clickable ? -1 : undefined}
+        inert={disabled || !clickable || undefined}
         onClick={handleClick}
         className={cn(
           itemBaseClassName,
           active ? itemActiveClassName : itemSurfaceClassName,
-          !clickable && itemNotClickableClassName,
           disabled && itemDisabledClassName,
           className,
         )}

package/src/components/item/style.ts

@@ -1,16 +1,14 @@
 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
-origin-center bg-border/20 transition-transform duration-[160ms] ease-out active:scale-[0.98]`;
+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]`;
 
-export const itemSurfaceClassName = `border-transparent text-medium hover:border-border hover:text-on-main
+export const itemSurfaceClassName = `border-transparent text-medium hover:border-on-main hover:text-on-main
 hover:shadow-item focus-visible:shadow-item`;
 
-export const itemActiveClassName = "margo-border-gradient-primary text-on-main shadow-item";
+export const itemActiveClassName = "border-primary";
 
-export const itemNotClickableClassName = "pointer-events-none cursor-auto";
-
-export const itemDisabledClassName = "pointer-events-none cursor-auto opacity-40";
+export const itemDisabledClassName = "opacity-40";
 
 export const itemIconClassName = `ml-auto flex size-4 shrink-0 items-center justify-center first:ml-0
 [[data-margo-item-slot]+&]:ml-0`;

package/src/components/label/label.tsx

@@ -0,0 +1,15 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { labelBaseClassName, labelDisabledClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { LabelProps } from "./type.js";
+
+export const Label = <T extends ElementType = "label">({ disabled = false, className, ...rest }: LabelProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest, "label")}
+    data-margo-disabled={disabled}
+    className={cn(labelBaseClassName, disabled && labelDisabledClassName, className)}
+  />
+);

package/src/components/label/style.ts

@@ -0,0 +1,3 @@
+export const labelBaseClassName = "block text-mc uppercase tracking-widest text-medium truncate pl-3 mb-1";
+
+export const labelDisabledClassName = "opacity-40";

package/src/components/label/type.ts

@@ -0,0 +1,8 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type LabelOwnProps = {
+  disabled?: boolean;
+};
+
+export type LabelProps<T extends ElementType = "label"> = TagProps<T, LabelOwnProps>;

package/src/css/theme.css

@@ -6,6 +6,7 @@
   --breakpoint-900: 900px;
   --breakpoint-1080: 1080px;
   --breakpoint-1280: 1280px;
+  --breakpoint-1440: 1440px;
   --breakpoint-1920: 1920px;
 
   /* Fonts */
@@ -19,7 +20,8 @@
   --color-on-main: var(--margo-color-on-main);
   --color-primary: var(--margo-color-primary);
   --color-primary-darken: var(--margo-color-primary-darken);
-  --color-secondary: var(--margo-color-secondary);
+  --color-low: var(--margo-color-low);
+  --color-low-alpha: var(--margo-color-low-alpha);
   --color-medium: var(--margo-color-medium);
   --color-border: var(--margo-color-border);
 
@@ -27,6 +29,7 @@
   --shadow-card: var(--margo-shadow-card);
   --shadow-button: var(--margo-shadow-button);
   --shadow-item: var(--margo-shadow-item);
+  --shadow-input: var(--margo-shadow-input);
   --shadow-chip: var(--margo-shadow-chip);
 
   /* Durations */
@@ -84,5 +87,4 @@
   --text-8xl--line-height: 0.75;
   --text-9xl: var(--margo-font-size-9xl);
   --text-9xl--line-height: 0.75;
-
 }

package/src/css/utility.css

@@ -1,10 +1,3 @@
-@utility margo-border-gradient-primary {
-  border-color: transparent;
-  background:
-    linear-gradient(var(--margo-color-main), var(--margo-color-main)) padding-box,
-    linear-gradient(to bottom right, var(--margo-color-primary-darken), var(--margo-color-primary)) border-box;
-}
-
 @utility margo-text-box-trim {
   text-box: trim-start cap alphabetic;
 }

package/src/css/variables.css

@@ -38,8 +38,8 @@
 
   --margo-grid-max-width: 80rem;
   --margo-grid-padding: 1rem;
-  --margo-grid-gutter-x: 2rem;
-  --margo-grid-gutter-y: 2rem;
+  --margo-grid-gutter-x: clamp(0.5rem, 2.2vw, 2rem);
+  --margo-grid-gutter-x: clamp(0.5rem, 2.2vw, 2rem);
   --margo-grid-bleed: max(var(--margo-grid-padding), calc((100vw - var(--margo-grid-max-width)) / 2));
 }
 
@@ -48,17 +48,19 @@
 
   --margo-color-neutral: #ffffff;
   --margo-color-on-neutral: #000000;
-  --margo-color-main: #e7e7e7;
+  --margo-color-main: #edecec;
   --margo-color-on-main: #151515;
   --margo-color-primary: #57e550;
   --margo-color-primary-darken: #45b93f;
-  --margo-color-secondary: #d3d3d3;
+  --margo-color-low: color-mix(in srgb, var(--margo-color-on-main) 4%, var(--margo-color-main));
+  --margo-color-low-alpha: color-mix(in srgb, var(--margo-color-on-main) 4%, transparent);
   --margo-color-medium: #808080;
   --margo-color-border: #cecece;
 
   --margo-shadow-card: 0 8px 6px -4px rgb(220, 220, 220, 0.5);
-  --margo-shadow-button: 0px 2px 3px -1px rgb(220, 220, 220, 0.6);
-  --margo-shadow-item: 0px 2px 3px -1px rgb(220, 220, 220, 0.6);
+  --margo-shadow-button: 0 2px 3px -1px rgb(220, 220, 220, 0.6);
+  --margo-shadow-item: 0 3px 3px -3px rgba(139, 139, 139, 0.6);
+  --margo-shadow-input: 0 3px 3px -3px rgba(139, 139, 139, 0.6);
   --margo-shadow-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.6);
 
   --margo-code-surface: #fbfbfb;
@@ -84,13 +86,15 @@
   --margo-color-on-main: #eeeeee;
   --margo-color-primary: #57e550;
   --margo-color-primary-darken: #45b93f;
-  --margo-color-secondary: #2c2c2c;
+  --margo-color-low: color-mix(in srgb, var(--margo-color-on-main) 2.5%, var(--margo-color-main));
+  --margo-color-low-alpha: color-mix(in srgb, var(--margo-color-on-main) 2.5%, transparent);
   --margo-color-medium: #999999;
   --margo-color-border: #2c2c2c;
 
   --margo-shadow-card: 0 4px 12px -4px rgb(0, 0, 0, 0.5);
   --margo-shadow-button: 0 2px 6px -2px rgb(0, 0, 0, 0.5);
-  --margo-shadow-item: 0 2px 6px -2px rgb(0, 0, 0, 0.5);
+  --margo-shadow-item: 0 2px 3px -2px rgb(0, 0, 0, 0.5);
+  --margo-shadow-input: 0 2px 3px -2px rgb(0, 0, 0, 0.5);
   --margo-shadow-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.5);
 
   --margo-code-surface: #0d0d0d;

package/src/hoc/background_glow/background_glow.css

@@ -28,14 +28,14 @@
   transition: opacity 300ms ease-out;
 }
 
-.margo-background-glow:hover::before,
-.margo-background-glow:focus-within::before {
-  opacity: var(--margo-background-glow-opacity, 0.1);
-}
+@media (hover: hover) and (pointer: fine) {
+  .margo-background-glow:hover::before {
+    opacity: var(--margo-background-glow-opacity, 0.1);
+  }
 
-.margo-background-glow:hover::after,
-.margo-background-glow:focus-within::after {
-  opacity: var(--margo-background-glow-noise-opacity, 0.04);
+  .margo-background-glow:hover::after {
+    opacity: var(--margo-background-glow-noise-opacity, 0.04);
+  }
 }
 
 

package/src/hoc/background_glow/background_glow.tsx

@@ -10,6 +10,8 @@ import "./background_glow.css";
 
 export const BackgroundGlow = ({ children, tolerance = 1, opacity = 0.2, noise = 0.04 }: BackgroundGlowProps) => {
   const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
+    if (event.pointerType !== "mouse") return children.props.onPointerMove?.(event);
+
     const bounds = event.currentTarget.getBoundingClientRect();
     const spread = Math.max(bounds.width, bounds.height) * Math.min(Math.max(tolerance, 0), 1);
 

package/src/hoc/border_glow/border_glow.css

@@ -6,15 +6,16 @@
   opacity: 0;
   background: radial-gradient(
     var(--margo-border-glow-size, 480px) circle at var(--margo-border-glow-x, 70%) var(--margo-border-glow-y, 70%),
-    var(--color-primary-darken),
+    var(--color-primary),
     transparent 70%
   );
   transition: opacity 300ms ease-out;
 }
 
-.margo-border-glow:hover::before,
-.margo-border-glow:focus-within::before {
-  opacity: 1;
+@media (hover: hover) and (pointer: fine) {
+  .margo-border-glow:hover::before {
+    opacity: 1;
+  }
 }
 
 .margo-border-glow--ring::before {

package/src/hoc/border_glow/border_glow.tsx

@@ -10,6 +10,8 @@ import "./border_glow.css";
 
 export const BorderGlow = ({ children, position = "all", tolerance = 1 }: BorderGlowProps) => {
   const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
+    if (event.pointerType !== "mouse") return children.props.onPointerMove?.(event);
+
     const bounds = event.currentTarget.getBoundingClientRect();
     const x = event.clientX - bounds.left;
     const y = event.clientY - bounds.top;

package/src/index.ts

@@ -6,7 +6,9 @@ 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 { Label } from "./components/label/label.js";
 export { Layer } from "./components/layer/layer.js";
+export { Input } from "./components/input/input.js";
 export { Item } from "./components/item/item.js";
 export { NavigationBar } from "./components/navigation_bar/navigation_bar.js";
 export { ProgressBar } from "./components/progress_bar/progress_bar.js";
@@ -51,7 +53,9 @@ export type {
   HeaderTitleProps,
   HeaderTrailingProps,
 } from "./components/header/type.js";
+export type { LabelOwnProps, LabelProps } from "./components/label/type.js";
 export type { LayerProps } from "./components/layer/type.js";
+export type { InputIconProps, InputProps, InputTextProps } from "./components/input/type.js";
 export type { ItemIconProps, ItemLabelProps, ItemProps } from "./components/item/type.js";
 export type { NavigationBarProps } from "./components/navigation_bar/type.js";
 export type { ProgressBarMode, ProgressBarProps } from "./components/progress_bar/type.js";