margo-ui 1.2.2 → 1.2.3

package/package.json

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

package/src/components/progress_bar/progress_bar.css

@@ -18,7 +18,7 @@
 
 .margo-progress-bar[data-mode="indeterminate"]::before {
   inset: 0 auto 0 0;
-  width: 40%;
+  width: 50%;
   animation: margo-progress-bar-indeterminate 800ms ease-in-out infinite;
 }
 

package/src/components/progress_bar/progress_bar.tsx

@@ -10,10 +10,10 @@ import "./progress_bar.css";
 
 export const ProgressBar = <T extends ElementType = "div">({
   animate = true,
-  className,
   mode = "indeterminate",
   style,
   value = 0,
+  className,
   ...rest
 }: ProgressBarProps<T>) => {
   const isDeterminate = mode === "determinate";

package/src/components/splash/splash.css

@@ -0,0 +1,19 @@
+@layer components {
+  [data-margo-splash] {
+    visibility: visible;
+    clip-path: circle(150% at 50% 50%);
+    transition:
+      clip-path 2500ms ease-out,
+      visibility 2500ms ease-out;
+  }
+
+  :root:not(:has([data-margo-splash-serve])) [data-margo-splash] {
+    visibility: hidden;
+    clip-path: circle(0% at 50% 50%);
+  }
+}
+
+:root:has([data-margo-splash-serve][data-margo-splash-instant]) [data-margo-splash] {
+  transition-duration: 0ms;
+  transition-delay: 0ms;
+}

package/src/components/splash/splash.tsx

@@ -0,0 +1,27 @@
+import { Tag } from "react-renderable";
+
+import type { ElementType } from "react";
+import type { SplashProps, SplashServeProps } from "./type.js";
+
+import { cn } from "../../utils/cn/cn.js";
+import "./splash.css";
+
+export const Splash = <T extends ElementType = "div">({ initial = true, className, ...rest }: SplashProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest)}
+    inert
+    aria-hidden={true}
+    role="presentation"
+    data-margo-splash=""
+    data-margo-splash-initial={initial}
+    className={cn(
+      "fixed inset-0 z-max",
+      className && "[clip-path:none] margo-splash-idle:[clip-path:none]",
+      className,
+    )}
+  />
+);
+
+Splash.Serve = ({ instant = false }: SplashServeProps) => (
+  <span hidden data-margo-splash-serve="" data-margo-splash-instant={instant || undefined} />
+);

package/src/components/splash/style.ts

@@ -0,0 +1 @@
+export const splashBaseClassName = "margo-splash";

package/src/components/splash/type.ts

@@ -0,0 +1,12 @@
+import type { ElementType } from "react";
+import type { TagProps } from "react-renderable";
+
+export type SplashOwnProps = {
+  initial?: boolean;
+};
+
+export type SplashProps<T extends ElementType = "div"> = TagProps<T, SplashOwnProps>;
+
+export type SplashServeProps = {
+  instant?: boolean;
+};

package/src/css/custom-variant.css

@@ -1 +1,2 @@
 @custom-variant dark (&:where(.dark, .dark *));
+@custom-variant margo-splash-idle (:root:not(:has([data-margo-splash-serve])) &);

package/src/hoc/border_glow/border_glow.css

@@ -5,7 +5,7 @@
   pointer-events: none;
   opacity: 0;
   background: radial-gradient(
-    480px circle at var(--margo-border-glow-x, 70%) var(--margo-border-glow-y, 70%),
+    var(--margo-border-glow-size, 480px) circle at var(--margo-border-glow-x, 70%) var(--margo-border-glow-y, 70%),
     var(--color-primary-darken),
     transparent 70%
   );

package/src/hoc/border_glow/border_glow.tsx

@@ -8,12 +8,14 @@ import type { BorderGlowProps } from "./type.js";
 
 import "./border_glow.css";
 
-export const BorderGlow = ({ children, position = "all" }: BorderGlowProps) => {
+export const BorderGlow = ({ children, position = "all", tolerance = 1 }: BorderGlowProps) => {
   const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
     const bounds = event.currentTarget.getBoundingClientRect();
     const x = event.clientX - bounds.left;
     const y = event.clientY - bounds.top;
+    const size = Math.max(bounds.width, bounds.height) * Math.min(Math.max(tolerance, 0), 1);
 
+    event.currentTarget.style.setProperty("--margo-border-glow-size", `${size}px`);
     event.currentTarget.style.setProperty("--margo-border-glow-x", `${position === "right" ? bounds.width - x : x}px`);
     event.currentTarget.style.setProperty("--margo-border-glow-y", `${position === "down" ? bounds.height - y : y}px`);
 

package/src/hoc/border_glow/type.ts

@@ -10,4 +10,5 @@ export type BorderGlowChildProps = {
 export type BorderGlowProps = {
   children: ReactElement<BorderGlowChildProps>;
   position?: BorderGlowPosition;
+  tolerance?: number;
 };

package/src/hoc/mask_gradient_y/mask_gradient_y.css

@@ -0,0 +1,17 @@
+.margo-mask-gradient-y {
+  --margo-mask-gradient-y-offset-top: 0px;
+  --margo-mask-gradient-y-offset-bottom: 0px;
+  --margo-mask-gradient-y-fade-top: 2rem;
+  --margo-mask-gradient-y-fade-bottom: 2rem;
+
+  --margo-mask-gradient-y-image: linear-gradient(
+    to bottom,
+    transparent var(--margo-mask-gradient-y-offset-top),
+    #000 calc(var(--margo-mask-gradient-y-offset-top) + var(--margo-mask-gradient-y-fade-top)),
+    #000 calc(100% - var(--margo-mask-gradient-y-offset-bottom) - var(--margo-mask-gradient-y-fade-bottom)),
+    transparent calc(100% - var(--margo-mask-gradient-y-offset-bottom))
+  );
+
+  -webkit-mask-image: var(--margo-mask-gradient-y-image);
+  mask-image: var(--margo-mask-gradient-y-image);
+}

package/src/hoc/mask_gradient_y/mask_gradient_y.tsx

@@ -0,0 +1,22 @@
+import { cloneElement } from "react";
+
+import { cn } from "../../utils/cn/cn.js";
+
+import type { CSSProperties } from "react";
+import type { MaskGradientYProps } from "./type.js";
+
+import "./mask_gradient_y.css";
+
+export const MaskGradientY = ({ children, fade, fadeTop, fadeBottom, offsetTop, offsetBottom }: MaskGradientYProps) => {
+  const style = {
+    "--margo-mask-gradient-y-offset-top": offsetTop,
+    "--margo-mask-gradient-y-offset-bottom": offsetBottom,
+    "--margo-mask-gradient-y-fade-top": fadeTop ?? fade,
+    "--margo-mask-gradient-y-fade-bottom": fadeBottom ?? fade,
+  } as CSSProperties;
+
+  return cloneElement(children, {
+    className: cn("margo-mask-gradient-y", children.props.className),
+    style: { ...style, ...children.props.style },
+  });
+};

package/src/hoc/mask_gradient_y/type.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties, ReactElement } from "react";
+
+export type MaskGradientYChildProps = {
+  className?: string;
+  style?: CSSProperties;
+};
+
+export type MaskGradientYProps = {
+  children: ReactElement<MaskGradientYChildProps>;
+  fade?: string;
+  fadeTop?: string;
+  fadeBottom?: string;
+  offsetTop?: string;
+  offsetBottom?: string;
+};

package/src/index.ts

@@ -3,11 +3,13 @@ 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 { Splash } from "./components/splash/splash.js";
 export { Spinner } from "./components/spinner/spinner.js";
 export { Tooltip } from "./components/tooltip/tooltip.js";
 
 export { BackgroundGlow } from "./hoc/background_glow/background_glow.js";
 export { BorderGlow } from "./hoc/border_glow/border_glow.js";
+export { MaskGradientY } from "./hoc/mask_gradient_y/mask_gradient_y.js";
 export { Ripple } from "./hoc/ripple/ripple.js";
 
 export { MetaColorScheme } from "./meta/meta_color_scheme/meta_color_scheme.js";
@@ -29,11 +31,13 @@ export type {
 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 { SplashProps, SplashServeProps } from "./components/splash/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";
 export type { BorderGlowPosition, BorderGlowProps } from "./hoc/border_glow/type.js";
+export type { MaskGradientYProps } from "./hoc/mask_gradient_y/type.js";
 export type { RippleProps } from "./hoc/ripple/type.js";
 
 export type { MargoTheme, MargoThemeClient } from "./utils/theme/type.js";