margo-ui 1.1.1 → 1.2.1

package/package.json

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

package/src/components/blockquote/blockquote.tsx

@@ -0,0 +1,11 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { blockquoteBaseClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { BlockquoteProps } from "./type.js";
+
+export const Blockquote = <T extends ElementType = "blockquote">({ className, ...rest }: BlockquoteProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "blockquote")} className={cn(blockquoteBaseClassName, className)} />
+);

package/src/components/blockquote/style.ts

@@ -0,0 +1 @@
+export const blockquoteBaseClassName = "border-l-2 border-primary-darken py-0.5 pl-4";

package/src/components/blockquote/type.ts

@@ -0,0 +1,4 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type BlockquoteProps<T extends ElementType = "blockquote"> = TagProps<T>;

package/src/components/button/button.tsx

@@ -21,14 +21,18 @@ export const Button = <T extends ElementType = "button">({
   clickable = true,
   active = false,
   open = false,
-  blurOnClick = true,
+  onClickBlur,
   className,
   onClick,
   ...rest
 }: ButtonProps<T>) => {
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     onClick?.(event);
-    if (blurOnClick && event.detail > 0) setTimeout(() => event.currentTarget.blur(), 150);
+    if (typeof onClickBlur === "function") {
+      const target = event.currentTarget;
+      onClickBlur(event);
+      setTimeout(() => target.blur(), 150);
+    }
   };
 
   return (

package/src/components/button/style.ts

@@ -1,6 +1,6 @@
 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`;
+focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-on-main shadow-button`;
 
 export const buttonSurfaceClassName = "border-border bg-main";
 
@@ -10,7 +10,7 @@ export const buttonIconClassName =
   "relative z-10 flex size-4 min-w-0 shrink-0 items-center justify-center [direction:ltr]";
 
 export const buttonLabelClassName =
-  "relative z-10 flex items-center text-sm whitespace-nowrap lowercase [direction:ltr] px-0.5";
+  "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";

package/src/components/button/type.ts

@@ -7,8 +7,8 @@ export type ButtonOwnProps = {
   clickable?: boolean;
   active?: boolean;
   open?: boolean;
-  blurOnClick?: boolean;
   onClick?: MouseEventHandler<HTMLElement>;
+  onClickBlur?: MouseEventHandler<HTMLElement>;
 };
 
 export type ButtonProps<T extends ElementType = "button"> = TagProps<T, ButtonOwnProps>;

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";
+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
 focus-visible:outline-on-main`;

package/src/components/chip/style.ts

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

package/src/components/progress_bar/progress_bar.css

@@ -0,0 +1,33 @@
+.margo-progress-bar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(
+    --margo-progress-bar-fill,
+    linear-gradient(to right, var(--color-primary-darken), var(--color-primary))
+  );
+}
+
+.margo-progress-bar[data-mode="determinate"]::before {
+  clip-path: inset(0 calc(100% - var(--margo-progress-bar-value, 0%)) 0 0);
+}
+
+.margo-progress-bar[data-mode="determinate"][data-animate="true"]::before {
+  transition: clip-path 300ms ease-out;
+}
+
+.margo-progress-bar[data-mode="indeterminate"]::before {
+  inset: 0 auto 0 0;
+  width: 40%;
+  animation: margo-progress-bar-indeterminate 800ms ease-in-out infinite;
+}
+
+@keyframes margo-progress-bar-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(250%);
+  }
+}

package/src/components/progress_bar/progress_bar.tsx

@@ -0,0 +1,35 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { progressBarBaseClassName } from "./style.js";
+
+import type { CSSProperties, ElementType } from "react";
+import type { ProgressBarProps } from "./type.js";
+
+import "./progress_bar.css";
+
+export const ProgressBar = <T extends ElementType = "div">({
+  animate = true,
+  className,
+  mode = "indeterminate",
+  style,
+  value = 0,
+  ...rest
+}: ProgressBarProps<T>) => {
+  const isDeterminate = mode === "determinate";
+  const progress = Math.min(100, Math.max(0, value));
+
+  return (
+    <Tag
+      {...Tag.forward<T>(rest)}
+      role="progressbar"
+      aria-valuemin={isDeterminate ? 0 : undefined}
+      aria-valuemax={isDeterminate ? 100 : undefined}
+      aria-valuenow={isDeterminate ? progress : undefined}
+      data-mode={mode}
+      data-animate={animate}
+      style={{ ...style, "--margo-progress-bar-value": `${progress}%` } as CSSProperties}
+      className={cn(progressBarBaseClassName, className)}
+    />
+  );
+};

package/src/components/progress_bar/style.ts

@@ -0,0 +1 @@
+export const progressBarBaseClassName = "margo-progress-bar relative h-0.5 overflow-hidden";

package/src/components/progress_bar/type.ts

@@ -0,0 +1,12 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type ProgressBarMode = "determinate" | "indeterminate";
+
+export type ProgressBarOwnProps = {
+  animate?: boolean;
+  mode?: ProgressBarMode;
+  value?: number;
+};
+
+export type ProgressBarProps<T extends ElementType = "div"> = TagProps<T, ProgressBarOwnProps>;

package/src/components/spinner/spinner.tsx

@@ -0,0 +1,21 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { spinnerBaseClassName, spinnerIconClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { SpinnerProps } from "./type.js";
+
+export const Spinner = <T extends ElementType = "span">({ className, label = "Loading", ...rest }: SpinnerProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest, "span")}
+    role="status"
+    aria-label={label}
+    className={cn(spinnerBaseClassName, className)}
+  >
+    <svg viewBox="0 0 24 24" aria-hidden className={spinnerIconClassName}>
+      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
+      <path d="M12 3a9 9 0 0 1 9 9" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="3" />
+    </svg>
+  </Tag>
+);

package/src/components/spinner/style.ts

@@ -0,0 +1,3 @@
+export const spinnerBaseClassName = "inline-flex size-4 animate-spin";
+
+export const spinnerIconClassName = "size-full";

package/src/components/spinner/type.ts

@@ -0,0 +1,8 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type SpinnerOwnProps = {
+  label?: string;
+};
+
+export type SpinnerProps<T extends ElementType = "span"> = Omit<TagProps<T, SpinnerOwnProps>, "aria-label">;

package/src/css/theme.css

@@ -23,6 +23,11 @@
   --color-medium: var(--margo-color-medium);
   --color-border: var(--margo-color-border);
 
+  /* Shadows */
+  --shadow-card: var(--margo-shadow-card);
+  --shadow-button: var(--margo-shadow-button);
+  --shadow-chip: var(--margo-shadow-chip);
+
   /* Border widths */
   --border-width-2: var(--margo-border-width-2);
 

package/src/css/utility.css

@@ -4,3 +4,7 @@
     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

@@ -32,32 +32,38 @@
   --margo-border-width-2: 1.5px;
 }
 
-/* Colors Theme Light */
 :root {
   color-scheme: light;
 
   --margo-color-neutral: #ffffff;
   --margo-color-on-neutral: #000000;
-  --margo-color-main: #e9e9e9;
-  --margo-color-on-main: #222222;
-  --margo-color-primary: #2c4ee7;
-  --margo-color-primary-darken: #1b24a5;
+  --margo-color-main: #f6f6f6;
+  --margo-color-on-main: #151515;
+  --margo-color-primary: #57e550;
+  --margo-color-primary-darken: #45b93f;
   --margo-color-secondary: #d3d3d3;
   --margo-color-medium: #7e7e7e;
-  --margo-color-border: #d3d3d3;
+  --margo-color-border: #cfcfcf;
+
+  --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-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.6);
 }
 
-/* Colors Theme Dark */
 .dark {
   color-scheme: dark;
 
   --margo-color-neutral: #000000;
   --margo-color-on-neutral: #ffffff;
-  --margo-color-main: #141414;
-  --margo-color-on-main: #f9f9f9;
-  --margo-color-primary: #f5cb77;
-  --margo-color-primary-darken: #ad9055;
+  --margo-color-main: #151515;
+  --margo-color-on-main: #eeeeee;
+  --margo-color-primary: #57e550;
+  --margo-color-primary-darken: #45b93f;
   --margo-color-secondary: #2c2c2c;
   --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-chip: 0 1px 3px -1px rgb(0, 0, 0, 0.5);
 }

package/src/index.ts

@@ -1,6 +1,9 @@
+export { Blockquote } from "./components/blockquote/blockquote.js";
 export { Button } from "./components/button/button.js";
 export { Card } from "./components/card/card.js";
 export { Chip } from "./components/chip/chip.js";
+export { ProgressBar } from "./components/progress_bar/progress_bar.js";
+export { Spinner } from "./components/spinner/spinner.js";
 export { Tooltip } from "./components/tooltip/tooltip.js";
 
 export { BackgroundGlow } from "./hoc/background_glow/background_glow.js";
@@ -14,6 +17,8 @@ export { useMargoTheme } from "./hooks/use_theme.js";
 export { cn } from "./utils/cn/cn.js";
 export { margoTheme, margoThemeClient } from "./utils/theme/theme.js";
 
+export type { BlockquoteProps } from "./components/blockquote/type.js";
+
 export type {
   ButtonIconLabelProps,
   ButtonIconLabelSide,
@@ -23,6 +28,8 @@ export type {
 } from "./components/button/type.js";
 export type { CardProps } from "./components/card/type.js";
 export type { ChipProps } from "./components/chip/type.js";
+export type { ProgressBarMode, ProgressBarProps } from "./components/progress_bar/type.js";
+export type { SpinnerProps } from "./components/spinner/type.js";
 export type { TooltipPosition, TooltipProps } from "./components/tooltip/type.js";
 
 export type { BackgroundGlowProps, BackgroundGlowSize } from "./hoc/background_glow/type.js";