margo-ui 4.0.2 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "4.0.2",
+  "version": "5.0.1",
   "description": "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

@@ -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/css/custom-variant.css

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

package/src/index.ts

@@ -11,12 +11,10 @@ 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 { Popover } from "./components/popover/popover.js";
 export { ProgressBar } from "./components/progress_bar/progress_bar.js";
 export { Table } from "./components/table/table.js";
 export { Toggle } from "./components/toggle/toggle.js";
-export { Splash } from "./components/splash/splash.js";
 export { Select } from "./components/select/select.js";
 export { Sheet } from "./components/sheet/sheet.js";
 export { Spinner } from "./components/spinner/spinner.js";
@@ -62,7 +60,6 @@ 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 { PopoverAlign, PopoverAnchorProps, PopoverBodyProps, PopoverPosition, PopoverProps } from "./components/popover/type.js";
 export type { ProgressBarMode, ProgressBarProps } from "./components/progress_bar/type.js";
 export type {
@@ -73,7 +70,6 @@ export type {
   TableProps,
   TableRowProps,
 } from "./components/table/type.js";
-export type { SplashProps, SplashServeProps } from "./components/splash/type.js";
 export type { SelectOwnProps, SelectProps } from "./components/select/type.js";
 export type { SheetBodyProps, SheetFooterProps, SheetProps, SheetSide } from "./components/sheet/type.js";
 export type { SpinnerProps } from "./components/spinner/type.js";

package/src/components/navigation_bar/navigation_bar.css

@@ -1,21 +0,0 @@
-.margo-navigation-bar {
-  position: relative;
-  height: 100%;
-  width: var(--margo-navigation-bar-progress, 0%);
-  background: var(--margo-navigation-bar-fill);
-  transition: width 200ms ease-out;
-}
-
-.margo-navigation-bar::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: 6.25rem;
-  transform: rotate(3deg) translateY(-0.25rem);
-  opacity: 0.9;
-  box-shadow:
-    0 0 10px var(--margo-color-primary),
-    0 0 5px var(--margo-color-primary);
-}

package/src/components/navigation_bar/navigation_bar.tsx

@@ -1,70 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-import { Tag } from "react-renderable";
-
-import { cn } from "../../utils/cn/cn.js";
-import { navigationBarBaseClassName, navigationBarDefaultFill, navigationBarTrackClassName } from "./style.js";
-
-import type { CSSProperties, ElementType } from "react";
-import type { NavigationBarProps } from "./type.js";
-
-import "./navigation_bar.css";
-
-const TRICKLE_MS = 200;
-const TRICKLE_CEILING = 90;
-const TRICKLE_RATIO = 0.12;
-const START_PROGRESS = 8;
-const HOLD_MS = 300;
-const FADE_MS = 400;
-
-export const NavigationBar = <T extends ElementType = "div">({
-  loading = false,
-  fill = navigationBarDefaultFill,
-  className,
-  ...rest
-}: NavigationBarProps<T>) => {
-  const [progress, setProgress] = useState(0);
-  const [isVisible, setIsVisible] = useState(false);
-  const timeoutRef = useRef<number | undefined>(undefined);
-  const resetRef = useRef<number | undefined>(undefined);
-
-  useEffect(() => {
-    if (loading) {
-      window.clearTimeout(timeoutRef.current);
-      window.clearTimeout(resetRef.current);
-      setIsVisible(true);
-      setProgress(START_PROGRESS);
-
-      const interval = window.setInterval(
-        () => setProgress((current) => current + (TRICKLE_CEILING - current) * TRICKLE_RATIO),
-        TRICKLE_MS,
-      );
-
-      return () => window.clearInterval(interval);
-    }
-
-    setProgress((current) => (current > 0 ? 100 : 0));
-
-    timeoutRef.current = window.setTimeout(() => setIsVisible(false), HOLD_MS);
-    resetRef.current = window.setTimeout(() => setProgress(0), HOLD_MS + FADE_MS);
-
-    return () => {
-      window.clearTimeout(timeoutRef.current);
-      window.clearTimeout(resetRef.current);
-    };
-  }, [loading]);
-
-  return (
-    <Tag
-      {...Tag.forward<T>(rest)}
-      role="progressbar"
-      aria-hidden={!isVisible}
-      style={
-        { "--margo-navigation-bar-fill": fill, "--margo-navigation-bar-progress": `${progress}%` } as CSSProperties
-      }
-      className={cn(navigationBarBaseClassName, isVisible ? "opacity-100" : "opacity-0", className)}
-    >
-      <div className={navigationBarTrackClassName} />
-    </Tag>
-  );
-};

package/src/components/navigation_bar/style.ts

@@ -1,6 +0,0 @@
-export const navigationBarDefaultFill = "linear-gradient(to right, var(--margo-color-primary-darken), var(--margo-color-primary))";
-
-export const navigationBarBaseClassName =
-  "fixed inset-x-0 top-0 z-max h-0.5 pointer-events-none transition-opacity duration-200 ease-out";
-
-export const navigationBarTrackClassName = "margo-navigation-bar";

package/src/components/navigation_bar/type.ts

@@ -1,9 +0,0 @@
-import type { TagProps } from "react-renderable";
-import type { ElementType } from "react";
-
-export type NavigationBarOwnProps = {
-  loading?: boolean;
-  fill?: string;
-};
-
-export type NavigationBarProps<T extends ElementType = "div"> = TagProps<T, NavigationBarOwnProps>;

package/src/components/splash/splash.css

@@ -1,19 +0,0 @@
-@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

@@ -1,25 +0,0 @@
-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 { splashBaseClassName, splashOverrideClassName } from "./style.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(splashBaseClassName, className && splashOverrideClassName, className)}
-  />
-);
-
-Splash.Serve = ({ instant = false }: SplashServeProps) => (
-  <span hidden data-margo-splash-serve="" data-margo-splash-instant={instant || undefined} />
-);

package/src/components/splash/style.ts

@@ -1,3 +0,0 @@
-export const splashBaseClassName = "fixed inset-0 z-max";
-
-export const splashOverrideClassName = "[clip-path:none] margo-splash-idle:[clip-path:none]";

package/src/components/splash/type.ts

@@ -1,12 +0,0 @@
-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;
-};