margo-ui 1.2.3 → 1.3.0

package/src/hoc/background_glow/background_glow.tsx

@@ -1,17 +1,19 @@
 import { cloneElement } from "react";
 
 import { cn } from "../../utils/cn/cn.js";
-import { backgroundGlowBaseClassName, backgroundGlowSizeClassName } from "./style.js";
+import { backgroundGlowBaseClassName } from "./style.js";
 
-import type { PointerEvent } from "react";
+import type { CSSProperties, PointerEvent } from "react";
 import type { BackgroundGlowProps } from "./type.js";
 
 import "./background_glow.css";
 
-export const BackgroundGlow = ({ children, size = "md" }: BackgroundGlowProps) => {
+export const BackgroundGlow = ({ children, tolerance = 1, opacity = 0.2, noise = 0.04 }: BackgroundGlowProps) => {
   const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
     const bounds = event.currentTarget.getBoundingClientRect();
+    const spread = Math.max(bounds.width, bounds.height) * Math.min(Math.max(tolerance, 0), 1);
 
+    event.currentTarget.style.setProperty("--margo-background-glow-size", `${spread}px`);
     event.currentTarget.style.setProperty("--margo-background-glow-x", `${event.clientX - bounds.left}px`);
     event.currentTarget.style.setProperty("--margo-background-glow-y", `${event.clientY - bounds.top}px`);
 
@@ -19,7 +21,12 @@ export const BackgroundGlow = ({ children, size = "md" }: BackgroundGlowProps) =
   };
 
   return cloneElement(children, {
-    className: cn(backgroundGlowBaseClassName, backgroundGlowSizeClassName[size], children.props.className),
+    className: cn(backgroundGlowBaseClassName, children.props.className),
+    style: {
+      ...children.props.style,
+      "--margo-background-glow-opacity": opacity,
+      "--margo-background-glow-noise-opacity": noise,
+    } as CSSProperties,
     onPointerMove: handlePointerMove,
   });
 };

package/src/hoc/background_glow/style.ts

@@ -1,9 +1 @@
-import type { BackgroundGlowSize } from "./type.js";
-
 export const backgroundGlowBaseClassName = "relative isolate margo-background-glow";
-
-export const backgroundGlowSizeClassName: Record<BackgroundGlowSize, string> = {
-  sm: "margo-background-glow--size-sm",
-  md: "margo-background-glow--size-md",
-  lg: "margo-background-glow--size-lg",
-};

package/src/hoc/background_glow/type.ts

@@ -1,13 +1,14 @@
-import type { PointerEventHandler, ReactElement } from "react";
-
-export type BackgroundGlowSize = "sm" | "md" | "lg";
+import type { CSSProperties, PointerEventHandler, ReactElement } from "react";
 
 export type BackgroundGlowChildProps = {
   className?: string;
+  style?: CSSProperties;
   onPointerMove?: PointerEventHandler<HTMLElement>;
 };
 
 export type BackgroundGlowProps = {
   children: ReactElement<BackgroundGlowChildProps>;
-  size?: BackgroundGlowSize;
+  tolerance?: number;
+  opacity?: number;
+  noise?: number;
 };

package/src/hoc/mask_gradient_x/mask_gradient_x.css

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

package/src/hoc/mask_gradient_x/mask_gradient_x.tsx

@@ -0,0 +1,22 @@
+import { cloneElement } from "react";
+
+import { cn } from "../../utils/cn/cn.js";
+
+import type { CSSProperties } from "react";
+import type { MaskGradientXProps } from "./type.js";
+
+import "./mask_gradient_x.css";
+
+export const MaskGradientX = ({ children, fade, fadeLeft, fadeRight, offsetLeft, offsetRight }: MaskGradientXProps) => {
+  const style = {
+    "--margo-mask-gradient-x-offset-left": offsetLeft,
+    "--margo-mask-gradient-x-offset-right": offsetRight,
+    "--margo-mask-gradient-x-fade-left": fadeLeft ?? fade,
+    "--margo-mask-gradient-x-fade-right": fadeRight ?? fade,
+  } as CSSProperties;
+
+  return cloneElement(children, {
+    className: cn("margo-mask-gradient-x", children.props.className),
+    style: { ...style, ...children.props.style },
+  });
+};

package/src/hoc/mask_gradient_x/type.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties, ReactElement } from "react";
+
+export type MaskGradientXChildProps = {
+  className?: string;
+  style?: CSSProperties;
+};
+
+export type MaskGradientXProps = {
+  children: ReactElement<MaskGradientXChildProps>;
+  fade?: string;
+  fadeLeft?: string;
+  fadeRight?: string;
+  offsetLeft?: string;
+  offsetRight?: string;
+};

package/src/index.ts

@@ -1,14 +1,24 @@
 export { Blockquote } from "./components/blockquote/blockquote.js";
 export { Button } from "./components/button/button.js";
+export { ButtonMicro } from "./components/button_micro/button_micro.js";
 export { Card } from "./components/card/card.js";
 export { Chip } from "./components/chip/chip.js";
+export { Dialog } from "./components/dialog/dialog.js";
+export { Header } from "./components/header/header.js";
+export { Layer } from "./components/layer/layer.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";
+export { Table } from "./components/table/table.js";
 export { Splash } from "./components/splash/splash.js";
+export { Sheet } from "./components/sheet/sheet.js";
+export { Snippet } from "./components/snippet/snippet.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 { MaskGradientX } from "./hoc/mask_gradient_x/mask_gradient_x.js";
 export { MaskGradientY } from "./hoc/mask_gradient_y/mask_gradient_y.js";
 export { Ripple } from "./hoc/ripple/ripple.js";
 
@@ -28,15 +38,37 @@ export type {
   ButtonLabelProps,
   ButtonProps,
 } from "./components/button/type.js";
+export type { ButtonMicroProps } from "./components/button_micro/type.js";
 export type { CardProps } from "./components/card/type.js";
 export type { ChipProps } from "./components/chip/type.js";
+export type { DialogBodyProps, DialogFooterProps, DialogProps } from "./components/dialog/type.js";
+export type {
+  HeaderLeadingProps,
+  HeaderProps,
+  HeaderTitleProps,
+  HeaderTrailingProps,
+} from "./components/header/type.js";
+export type { LayerProps } from "./components/layer/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";
+export type {
+  TableBodyProps,
+  TableCellProps,
+  TableHeadCellProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+} from "./components/table/type.js";
 export type { SplashProps, SplashServeProps } from "./components/splash/type.js";
+export type { SheetBodyProps, SheetFooterProps, SheetProps, SheetSide } from "./components/sheet/type.js";
+export type { SnippetProps, SnippetToken, SnippetTokenType } from "./components/snippet/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 { BackgroundGlowProps } from "./hoc/background_glow/type.js";
 export type { BorderGlowPosition, BorderGlowProps } from "./hoc/border_glow/type.js";
+export type { MaskGradientXProps } from "./hoc/mask_gradient_x/type.js";
 export type { MaskGradientYProps } from "./hoc/mask_gradient_y/type.js";
 export type { RippleProps } from "./hoc/ripple/type.js";