margo-ui 1.2.4 → 1.3.1

package/README.md

@@ -28,7 +28,7 @@ The package is published as TypeScript source: your bundler compiles it, exactly
 
 ## Approach
 
-- **Tokens, not props.** Every visual decision is a `--margo-` custom property, mirrored into Tailwind's theme. Theming means redeclaring variables, never overriding classes.
+- **Tokens first.** Colours, type and elevation are `--margo-` custom properties, mirrored into Tailwind's theme: redeclaring them themes the kit. Per-instance overrides go through `className`, merged over the defaults.
 - **CSS first.** Effects live on pseudo-elements; JavaScript only writes coordinates. Most components hold no state.
 - **Polymorphic.** `as` chooses the rendered element, and the remaining props are typed against it.
 - **Composed, not configured.** Components expose parts to mount rather than booleans to set.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.2.4",
+  "version": "1.3.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/button_micro/button_micro.tsx

@@ -0,0 +1,37 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { buttonMicroActiveClassName, buttonMicroBaseClassName, buttonMicroSurfaceClassName } from "./style.js";
+
+import type { ElementType, MouseEvent } from "react";
+import type { ButtonMicroProps } from "./type.js";
+
+export const ButtonMicro = <T extends ElementType = "button">({
+  active = false,
+  onClickBlur,
+  onClick,
+  className,
+  ...rest
+}: ButtonMicroProps<T>) => {
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    onClick?.(event);
+    if (typeof onClickBlur === "function") {
+      const target = event.currentTarget;
+      onClickBlur(event);
+      setTimeout(() => target.blur(), 150);
+    }
+  };
+
+  return (
+    <Tag
+      {...Tag.forward<T>(rest, "button")}
+      data-margo-active={active}
+      onClick={handleClick}
+      className={cn(
+        buttonMicroBaseClassName,
+        active ? buttonMicroActiveClassName : buttonMicroSurfaceClassName,
+        className,
+      )}
+    />
+  );
+};

package/src/components/button_micro/style.ts

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

package/src/components/button_micro/type.ts

@@ -0,0 +1,10 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType, MouseEventHandler } from "react";
+
+export type ButtonMicroOwnProps = {
+  active?: boolean;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onClickBlur?: MouseEventHandler<HTMLElement>;
+};
+
+export type ButtonMicroProps<T extends ElementType = "button"> = TagProps<T, ButtonMicroOwnProps>;

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,25 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { dialogBaseClassName, dialogBodyClassName, dialogFooterClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { DialogBodyProps, DialogFooterProps, DialogProps } from "./type.js";
+
+export const Dialog = <T extends ElementType = "div">({ className, children, ...rest }: DialogProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(dialogBaseClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Dialog.Body = <T extends ElementType = "div">({ className, children, ...rest }: DialogBodyProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(dialogBodyClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Dialog.Footer = <T extends ElementType = "div">({ className, children, ...rest }: DialogFooterProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(dialogFooterClassName, className)}>
+    {children}
+  </Tag>
+);

package/src/components/dialog/style.ts

@@ -0,0 +1,6 @@
+export const dialogBaseClassName = `flex m-4 max-h-[calc(100%-2rem)] w-[calc(100%-2rem)] flex-col overflow-hidden
+rounded-lg border-2 border-border bg-main text-on-main shadow-sm`;
+
+export const dialogBodyClassName = "min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm";
+
+export const dialogFooterClassName = "flex items-center justify-end gap-2 border-t-2 border-border px-5 py-4";

package/src/components/dialog/type.ts

@@ -0,0 +1,8 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type DialogProps<T extends ElementType = "div"> = TagProps<T>;
+
+export type DialogBodyProps<T extends ElementType = "div"> = TagProps<T>;
+
+export type DialogFooterProps<T extends ElementType = "div"> = TagProps<T>;

package/src/components/header/header.tsx

@@ -0,0 +1,36 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import {
+  headerBaseClassName,
+  headerLeadingClassName,
+  headerTitleClassName,
+  headerTrailingClassName,
+} from "./style.js";
+
+import type { ElementType } from "react";
+import type { HeaderLeadingProps, HeaderProps, HeaderTitleProps, HeaderTrailingProps } from "./type.js";
+
+export const Header = <T extends ElementType = "header">({ className, children, ...rest }: HeaderProps<T>) => (
+  <Tag {...Tag.forward<T>(rest, "header")} className={cn(headerBaseClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Header.Leading = ({ children, className }: HeaderLeadingProps) => (
+  <span data-margo-header-slot={true} className={cn(headerLeadingClassName, className)}>
+    {children}
+  </span>
+);
+
+Header.Title = ({ title, id, className }: HeaderTitleProps) => (
+  <span data-margo-header-slot={true} id={id} className={cn(headerTitleClassName, className)}>
+    {title}
+  </span>
+);
+
+Header.Trailing = ({ children, className }: HeaderTrailingProps) => (
+  <span data-margo-header-slot={true} className={cn(headerTrailingClassName, className)}>
+    {children}
+  </span>
+);

package/src/components/header/style.ts

@@ -0,0 +1,8 @@
+export const headerBaseClassName = "flex w-full items-center gap-3 px-5 py-4 shadow-sm";
+
+export const headerLeadingClassName = "flex shrink-0 items-center gap-2";
+
+export const headerTitleClassName = "min-w-0 flex-1 line-clamp-2 text-md font-semibold text-on-main";
+
+export const headerTrailingClassName = `ml-auto flex shrink-0 items-center gap-2
+[[data-margo-header-slot]+&]:ml-0`;

package/src/components/header/type.ts

@@ -0,0 +1,20 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType, ReactNode } from "react";
+
+export type HeaderProps<T extends ElementType = "header"> = TagProps<T>;
+
+export type HeaderLeadingProps = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export type HeaderTitleProps = {
+  title: ReactNode;
+  id?: string;
+  className?: string;
+};
+
+export type HeaderTrailingProps = {
+  children?: ReactNode;
+  className?: string;
+};

package/src/components/item/style.ts

@@ -7,7 +7,7 @@ hover:shadow-item focus-visible:shadow-item`;
 
 export const itemActiveClassName = "margo-border-gradient-primary text-on-main shadow-item";
 
-export const itemIconClassName = `ml-auto flex size-4 shrink-0 items-center justify-center
+export const itemIconClassName = `ml-auto flex size-4 shrink-0 items-center justify-center first:ml-0
 [[data-margo-item-slot]+&]:ml-0`;
 
 export const itemLabelClassName = "min-w-0 truncate text-left";

package/src/components/layer/layer.css

@@ -0,0 +1,51 @@
+.margo-layer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--margo-layer-z-index);
+  transition:
+    visibility var(--margo-layer-duration) var(--margo-layer-easing),
+    overlay var(--margo-layer-duration) var(--margo-layer-easing) allow-discrete,
+    display var(--margo-layer-duration) var(--margo-layer-easing) allow-discrete;
+}
+
+.margo-layer:not([open]) {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.margo-layer > *:not([data-margo-travel]) {
+  opacity: 0;
+  transition: opacity var(--margo-layer-duration) var(--margo-layer-easing);
+}
+
+.margo-layer[open] > *:not([data-margo-travel]) {
+  opacity: 1;
+}
+
+@starting-style {
+  .margo-layer[open] > *:not([data-margo-travel]) {
+    opacity: 0;
+  }
+}
+
+.margo-layer::backdrop {
+  opacity: 0;
+  transition:
+    opacity var(--margo-layer-duration) var(--margo-layer-easing),
+    overlay var(--margo-layer-duration) var(--margo-layer-easing) allow-discrete,
+    display var(--margo-layer-duration) var(--margo-layer-easing) allow-discrete;
+}
+
+.margo-layer[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  .margo-layer[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+html:has(.margo-layer[open]) {
+  overflow: clip;
+}

package/src/components/layer/layer.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+
+import { cn } from "../../utils/cn/cn.js";
+import { layerBaseClassName } from "./style.js";
+
+import type { MouseEvent, SyntheticEvent } from "react";
+import type { LayerProps } from "./type.js";
+
+import "./layer.css";
+
+export const Layer = ({ open = false, onClose, dismissible = true, className, children, ...rest }: LayerProps) => {
+  const layerRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const layer = layerRef.current;
+
+    if (!layer) return;
+    if (open && !layer.open) layer.showModal();
+    if (!open && layer.open) layer.close();
+  }, [open]);
+
+  const handleClick = (event: MouseEvent<HTMLDialogElement>) => {
+    if (!dismissible || event.target !== event.currentTarget) return;
+
+    onClose?.();
+  };
+
+  const handleCancel = (event: SyntheticEvent<HTMLDialogElement>) => {
+    event.preventDefault();
+    onClose?.();
+  };
+
+  return (
+    <dialog
+      {...rest}
+      ref={layerRef}
+      onCancel={handleCancel}
+      onClick={handleClick}
+      className={cn(layerBaseClassName, className)}
+    >
+      {children}
+    </dialog>
+  );
+};

package/src/components/layer/style.ts

@@ -0,0 +1,2 @@
+export const layerBaseClassName = `margo-layer m-0 grid h-dvh max-h-none w-dvw max-w-none place-items-center
+overflow-clip bg-transparent p-0 text-on-main outline-none backdrop:bg-black/50 backdrop:backdrop-blur-xs`;

package/src/components/layer/type.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export type LayerProps = Omit<ComponentPropsWithoutRef<"dialog">, "onClose" | "open"> & {
+  open?: boolean;
+  onClose?: () => void;
+  dismissible?: boolean;
+  children?: ReactNode;
+};

package/src/components/navigation_bar/navigation_bar.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { Tag } from "react-renderable";
 
 import { cn } from "../../utils/cn/cn.js";
-import { navigationBarDefaultFill, navigationBarBaseClassName, navigationBarTrackClassName } from "./style.js";
+import { navigationBarBaseClassName, navigationBarDefaultFill, navigationBarTrackClassName } from "./style.js";
 
 import type { CSSProperties, ElementType } from "react";
 import type { NavigationBarProps } from "./type.js";
@@ -14,7 +14,8 @@ const TRICKLE_MS = 200;
 const TRICKLE_CEILING = 90;
 const TRICKLE_RATIO = 0.12;
 const START_PROGRESS = 8;
-const FADE_MS = 250;
+const HOLD_MS = 300;
+const FADE_MS = 400;
 
 export const NavigationBar = <T extends ElementType = "div">({
   loading = false,
@@ -25,10 +26,12 @@ export const NavigationBar = <T extends ElementType = "div">({
   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);
 
@@ -41,12 +44,14 @@ export const NavigationBar = <T extends ElementType = "div">({
     }
 
     setProgress((current) => (current > 0 ? 100 : 0));
-    timeoutRef.current = window.setTimeout(() => {
-      setIsVisible(false);
-      setProgress(0);
-    }, FADE_MS);
 
-    return () => window.clearTimeout(timeoutRef.current);
+    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 (
@@ -54,7 +59,9 @@ export const NavigationBar = <T extends ElementType = "div">({
       {...Tag.forward<T>(rest)}
       role="progressbar"
       aria-hidden={!isVisible}
-      style={{ "--margo-navigation-bar-fill": fill, "--margo-navigation-bar-progress": `${progress}%` } as CSSProperties}
+      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} />

package/src/components/sheet/sheet.css

@@ -0,0 +1,41 @@
+.margo-sheet {
+  transition: translate var(--margo-layer-duration) var(--margo-layer-easing);
+}
+
+.margo-sheet[data-margo-side="start"] {
+  translate: -100% 0;
+}
+
+.margo-sheet[data-margo-side="end"] {
+  translate: 100% 0;
+}
+
+.margo-sheet[data-margo-side="top"] {
+  translate: 0 -100%;
+}
+
+.margo-sheet[data-margo-side="bottom"] {
+  translate: 0 100%;
+}
+
+dialog[open] .margo-sheet {
+  translate: 0 0;
+}
+
+@starting-style {
+  dialog[open] .margo-sheet[data-margo-side="start"] {
+    translate: -100% 0;
+  }
+
+  dialog[open] .margo-sheet[data-margo-side="end"] {
+    translate: 100% 0;
+  }
+
+  dialog[open] .margo-sheet[data-margo-side="top"] {
+    translate: 0 -100%;
+  }
+
+  dialog[open] .margo-sheet[data-margo-side="bottom"] {
+    translate: 0 100%;
+  }
+}

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,32 @@
+import { Tag } from "react-renderable";
+
+import { cn } from "../../utils/cn/cn.js";
+import { sheetBaseClassName, sheetBodyClassName, sheetFooterClassName, sheetSideClassName } from "./style.js";
+
+import type { ElementType } from "react";
+import type { SheetBodyProps, SheetFooterProps, SheetProps } from "./type.js";
+
+import "./sheet.css";
+
+export const Sheet = <T extends ElementType = "div">({ side = "end", className, children, ...rest }: SheetProps<T>) => (
+  <Tag
+    {...Tag.forward<T>(rest)}
+    data-margo-side={side}
+    data-margo-travel={true}
+    className={cn(sheetBaseClassName, sheetSideClassName[side], className)}
+  >
+    {children}
+  </Tag>
+);
+
+Sheet.Body = <T extends ElementType = "div">({ className, children, ...rest }: SheetBodyProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(sheetBodyClassName, className)}>
+    {children}
+  </Tag>
+);
+
+Sheet.Footer = <T extends ElementType = "div">({ className, children, ...rest }: SheetFooterProps<T>) => (
+  <Tag {...Tag.forward<T>(rest)} className={cn(sheetFooterClassName, className)}>
+    {children}
+  </Tag>
+);

package/src/components/sheet/style.ts

@@ -0,0 +1,14 @@
+import type { SheetSide } from "./type.js";
+
+export const sheetBaseClassName = "margo-sheet flex flex-col overflow-hidden border-border bg-main text-on-main";
+
+export const sheetSideClassName: Record<SheetSide, string> = {
+  start: "h-full w-[85%] max-w-[26rem] justify-self-start self-stretch border-r-2",
+  end: "h-full w-[85%] max-w-[26rem] justify-self-end self-stretch border-l-2",
+  top: "h-auto max-h-[40%] w-full self-start justify-self-stretch border-b-2",
+  bottom: "h-auto max-h-[40%] w-full self-end justify-self-stretch border-t-2",
+};
+
+export const sheetBodyClassName = "min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm";
+
+export const sheetFooterClassName = "flex items-center justify-end gap-2 border-t-2 border-border px-5 py-4";

package/src/components/sheet/type.ts

@@ -0,0 +1,14 @@
+import type { TagProps } from "react-renderable";
+import type { ElementType } from "react";
+
+export type SheetSide = "start" | "end" | "top" | "bottom";
+
+export type SheetOwnProps = {
+  side?: SheetSide;
+};
+
+export type SheetProps<T extends ElementType = "div"> = TagProps<T, SheetOwnProps>;
+
+export type SheetBodyProps<T extends ElementType = "div"> = TagProps<T>;
+
+export type SheetFooterProps<T extends ElementType = "div"> = TagProps<T>;

package/src/css/theme.css

@@ -29,6 +29,14 @@
   --shadow-item: var(--margo-shadow-item);
   --shadow-chip: var(--margo-shadow-chip);
 
+  /* Durations */
+  --duration-layer: var(--margo-layer-duration);
+  --ease-layer: var(--margo-layer-easing);
+
+  /* Layers */
+  --z-index-layer: var(--margo-layer-z-index);
+  --z-index-max: var(--margo-max-z-index);
+
   /* Border widths */
   --border-width-2: var(--margo-border-width-2);
 

package/src/css/variables.css

@@ -31,6 +31,11 @@
 
   --margo-border-width-2: 1.5px;
 
+  --margo-layer-duration: 750ms;
+  --margo-layer-easing: cubic-bezier(0.32, 0.72, 0, 1);
+  --margo-layer-z-index: 100;
+  --margo-max-z-index: 9999;
+
   --margo-grid-max-width: 80rem;
   --margo-grid-padding: 1rem;
   --margo-grid-gutter-x: 2rem;
@@ -101,3 +106,9 @@
   --margo-code-type: #79c0ff;
   --margo-code-punct: #8b949e;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --margo-layer-duration: 1ms;
+  }
+}

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,18 +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";
 
@@ -32,8 +38,17 @@ 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";
@@ -46,12 +61,14 @@ export type {
   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 } 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";