@endfield-ui/react 0.0.0-stage → 0.2.0

package/src/components/file-upload/FileUpload.tsx

@@ -0,0 +1,425 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type DragEvent,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+import { StatusDanger } from "../../icons/StatusDanger";
+import { Upload } from "../../icons/Upload";
+import { cn } from "../../lib/cn";
+import { decor } from "../../lib/decor";
+import { formatFileSize, matchesAccept, sameFile } from "../../lib/file";
+import { focusRingWithin } from "../../lib/focus-ring";
+import { mergeRefs } from "../../lib/merge-refs";
+import { useFieldControl } from "../field/Field";
+import { FileItem } from "./FileItem";
+
+export type FileUploadSize = "sm" | "md";
+
+/** 没收的原因：类型不对、太大、个数超了 */
+export type FileRejectReason = "type" | "size" | "count";
+export type FileRejection = { file: File; reason: FileRejectReason };
+
+/** 文件列表的名称、没收时的那几句话 */
+export type FileUploadLabels = {
+  /** 文件列表的可访问名称 */
+  list: string;
+  /** 选了几个：读屏的播报 */
+  selected: (count: number) => string;
+  /** 没收了几个：那一行说明的开头 */
+  rejected: (count: number) => string;
+  type: string;
+  size: (limit: string) => string;
+  count: (max: number) => string;
+};
+
+const defaultLabels: FileUploadLabels = {
+  list: "已选的文件",
+  selected: (count) => (count === 0 ? "没有文件" : `已选 ${count} 个文件`),
+  rejected: (count) => `${count} 个文件没有加进来`,
+  type: "类型不对",
+  size: (limit) => `超过 ${limit}`,
+  count: (max) => `超出个数上限（最多 ${max} 个）`,
+};
+
+export type FileUploadProps = {
+  /** 受控的值 */
+  value?: File[];
+  /** 非受控时的初始值 */
+  defaultValue?: File[];
+  onValueChange?: (files: File[]) => void;
+  /** 可以选几个。不开时新选的替掉原来的 */
+  multiple?: boolean;
+  /** 收哪些类型，写法和原生的一样：`.pdf,image/*` */
+  accept?: string;
+  /** 单个文件最大多少字节 */
+  maxSize?: number;
+  /** 最多几个（`multiple` 时） */
+  maxFiles?: number;
+  /** 有文件没收：拿到每个文件和原因 */
+  onReject?: (rejections: FileRejection[]) => void;
+  /** 表单字段名：列表里的文件随表单提交 */
+  name?: string;
+  /** 投放区的第一行字，后面跟着 `browseLabel` */
+  title?: ReactNode;
+  /** 带下划线的那几个字 */
+  browseLabel?: ReactNode;
+  /** 文件拖到上面时换成的字 */
+  dropLabel?: ReactNode;
+  /** 第二行：把限制写清楚——"PDF 或图片，单个不超过 10 MB" */
+  description?: ReactNode;
+  /** `md` 两行，默认；`sm` 是 40px 高的一行 */
+  size?: FileUploadSize;
+  /** 错误态。放在 `Field` 里时跟随它的 `error` */
+  invalid?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  /**
+   * 自己画每个文件的那一行：选了就要传、要显示进度时用，返回一个带 `status` 的 `FileItem`。
+   * 不传就是一行不带状态的 `FileItem`
+   */
+  renderFile?: (
+    file: File,
+    actions: { remove: () => void; index: number },
+  ) => ReactNode;
+  /** 移除钮的可访问名称，拿到的是文件名。默认"移除某某" */
+  removeLabel?: (name: string) => string;
+  /** 文件列表的名称、没收时的那几句话，换哪句传哪句 */
+  labels?: Partial<FileUploadLabels>;
+  id?: string;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  /** 给最外面那一层 */
+  className?: string;
+  /** 给里面的 `<input type="file">` */
+  ref?: Ref<HTMLInputElement>;
+};
+
+const zoneSize: Record<FileUploadSize, string> = {
+  sm: "min-h-10 flex-wrap gap-x-3 px-3 py-2 text-sm",
+  md: "gap-3 px-4 py-4",
+};
+
+/** 拖进来的东西里的文件；文件夹不收 */
+function droppedFiles(transfer: DataTransfer): File[] {
+  const items = [...(transfer.items ?? [])];
+  if (items.length === 0) return [...transfer.files];
+  return items.flatMap((item) => {
+    if (item.kind !== "file") return [];
+    if (item.webkitGetAsEntry?.()?.isDirectory) return [];
+    return item.getAsFile() ?? [];
+  });
+}
+
+/**
+ * 文件上传：选文件，或者把文件拖进来。它只管"选"和"列"——发请求、算进度是使用方的事。
+ *
+ * 里面是一个真的 `<input type="file">`，铺满整个投放区：点哪儿都是打开系统的文件框。
+ * 每个文件上传都要有标签：放进 `Field`，或者自己传 `aria-label`。
+ */
+export function FileUpload({
+  value,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  accept,
+  maxSize,
+  maxFiles,
+  onReject,
+  name,
+  title = "把文件拖到这里，或者",
+  browseLabel = "选择文件",
+  dropLabel = "松开，放进来",
+  description,
+  size = "md",
+  invalid: invalidProp,
+  disabled: disabledProp,
+  required: requiredProp,
+  renderFile,
+  removeLabel = (fileName) => `移除${fileName}`,
+  labels: labelsProp,
+  id: idProp,
+  "aria-label": ariaLabel,
+  "aria-describedby": describedByProp,
+  className,
+  ref,
+}: FileUploadProps) {
+  const { id, disabled, required, invalid, ...field } = useFieldControl({
+    id: idProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    invalid: invalidProp,
+    "aria-describedby": describedByProp,
+  });
+  const labels = { ...defaultLabels, ...labelsProp };
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  const [files, setFiles] = useControllableState<File[]>({
+    value,
+    defaultValue: defaultValue ?? [],
+    onChange: onValueChange,
+  });
+  const [rejections, setRejections] = useState<FileRejection[]>([]);
+  const [dragging, setDragging] = useState(false);
+  // dragenter / dragleave 在每个子元素上都会来一次：数着，归零才算真的离开
+  const depth = useRef(0);
+  // 每加一次、删一次就把列表写回原生输入框一次（值没变也要写：它里面可能是刚被没收的那几个）
+  const [revision, setRevision] = useState(0);
+
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input || typeof DataTransfer === "undefined") return;
+    try {
+      const transfer = new DataTransfer();
+      for (const file of files) transfer.items.add(file);
+      input.files = transfer.files;
+    } catch {
+      // 写不回去的环境里（很老的浏览器）表单提交的是最后一次选的，列表照常显示
+    }
+  }, [files, revision]);
+
+  // 移除之后焦点落到哪：等这一次渲染完
+  const pendingFocus = useRef<number | null>(null);
+  useEffect(() => {
+    const index = pendingFocus.current;
+    if (index === null) return;
+    pendingFocus.current = null;
+    const buttons =
+      listRef.current?.querySelectorAll<HTMLElement>("[data-file-remove]") ??
+      [];
+    const target = buttons[Math.min(index, buttons.length - 1)];
+    if (target) target.focus();
+    else inputRef.current?.focus();
+  });
+
+  const add = (incoming: readonly File[]) => {
+    const rejected: FileRejection[] = [];
+    let next = multiple ? [...files] : [];
+    for (const file of incoming) {
+      if (!matchesAccept(file, accept)) {
+        rejected.push({ file, reason: "type" });
+      } else if (maxSize !== undefined && file.size > maxSize) {
+        rejected.push({ file, reason: "size" });
+      } else if (!multiple) {
+        // 只收一个：第一个合格的替掉原来的，再多的算超了
+        if (next.length === 0) next = [file];
+        else rejected.push({ file, reason: "count" });
+      } else if (next.some((existing) => sameFile(existing, file))) {
+        // 同一个文件不重复加，也不算错
+      } else if (maxFiles !== undefined && next.length >= maxFiles) {
+        rejected.push({ file, reason: "count" });
+      } else {
+        next.push(file);
+      }
+    }
+    // 只收一个、这次又一个合格的都没有：原来的留着
+    if (!multiple && next.length === 0) next = files;
+
+    const changed =
+      next.length !== files.length ||
+      next.some((file, index) => file !== files[index]);
+    if (changed) setFiles(next);
+    setRejections(rejected);
+    setRevision((current) => current + 1);
+    if (rejected.length > 0) onReject?.(rejected);
+  };
+
+  const remove = (index: number) => {
+    pendingFocus.current = index;
+    setFiles(files.filter((_, position) => position !== index));
+    setRejections([]);
+    setRevision((current) => current + 1);
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    add([...(event.target.files ?? [])]);
+  };
+
+  const hasFiles = (event: DragEvent) =>
+    [...event.dataTransfer.types].includes("Files");
+
+  const handleDragEnter = (event: DragEvent) => {
+    if (disabled || !hasFiles(event)) return;
+    depth.current += 1;
+    setDragging(true);
+  };
+  const handleDragLeave = (event: DragEvent) => {
+    if (disabled || !hasFiles(event)) return;
+    depth.current = Math.max(depth.current - 1, 0);
+    if (depth.current === 0) setDragging(false);
+  };
+  const handleDragOver = (event: DragEvent) => {
+    // 不拦下来浏览器不让放；禁用时也拦，免得整页跳去打开这个文件
+    if (hasFiles(event)) event.preventDefault();
+  };
+  const handleDrop = (event: DragEvent) => {
+    if (!hasFiles(event)) return;
+    event.preventDefault();
+    depth.current = 0;
+    setDragging(false);
+    if (!disabled) add(droppedFiles(event.dataTransfer));
+  };
+
+  const reasonText = ({ reason }: FileRejection) => {
+    if (reason === "type") return labels.type;
+    if (reason === "size") return labels.size(formatFileSize(maxSize ?? 0));
+    return labels.count(multiple ? (maxFiles ?? 0) : 1);
+  };
+
+  return (
+    <div
+      data-size={size}
+      data-invalid={invalid ? "" : undefined}
+      className={cn("flex min-w-0 flex-col gap-2 text-ink", className)}
+    >
+      <div
+        data-dropzone=""
+        data-dragging={dragging ? "" : undefined}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        className={cn(
+          "relative flex items-center border bg-surface-sunken",
+          "transition-colors duration-(--duration-fast) ease-standard",
+          focusRingWithin,
+          zoneSize[size],
+          dragging
+            ? // 文件拖到上面：线变成实线
+              "border-solid border-ink"
+            : [
+                "border-dashed",
+                disabled
+                  ? "cursor-not-allowed border-line text-ink-disabled"
+                  : invalid
+                    ? "border-danger"
+                    : "border-line-strong hover:border-ink-secondary",
+              ],
+        )}
+      >
+        <Upload
+          size={size === "sm" ? 20 : 24}
+          className={cn(
+            "shrink-0",
+            disabled ? "text-ink-disabled" : "text-ink-secondary",
+          )}
+        />
+        <span
+          className={cn(
+            "flex min-w-0",
+            size === "sm"
+              ? "flex-1 flex-wrap items-baseline gap-x-3"
+              : "flex-col gap-0.5",
+          )}
+        >
+          <span className="font-medium">
+            {dragging ? (
+              dropLabel
+            ) : (
+              <>
+                {title}
+                <span className="ml-1 underline underline-offset-4">
+                  {browseLabel}
+                </span>
+              </>
+            )}
+          </span>
+          {description && (
+            <span
+              className={cn(
+                "text-sm",
+                disabled ? "text-ink-disabled" : "text-ink-secondary",
+              )}
+            >
+              {description}
+            </span>
+          )}
+        </span>
+
+        {/* 拖到上面时的取景角：正在瞄准 */}
+        {dragging && (
+          <span
+            aria-hidden="true"
+            data-brackets=""
+            className={cn(
+              decor,
+              "corner-brackets absolute inset-1.5 [--bracket-offset:0px]",
+            )}
+          />
+        )}
+
+        {/* 真的文件输入框，看不见，铺满投放区：点哪儿都是它 */}
+        <input
+          ref={mergeRefs(inputRef, ref)}
+          id={id}
+          type="file"
+          name={name}
+          multiple={multiple}
+          accept={accept}
+          disabled={disabled}
+          required={required}
+          aria-label={ariaLabel}
+          aria-invalid={invalid || undefined}
+          aria-describedby={field["aria-describedby"]}
+          // 不要浏览器自带的那句"未选择任何文件"的提示
+          title=""
+          onChange={handleChange}
+          // 禁用时让开：拖放的事件要落到投放区上，由它拦下
+          className="absolute inset-0 size-full cursor-[inherit] opacity-0 outline-none disabled:pointer-events-none"
+        />
+      </div>
+
+      {/* 这一行是播报给读屏的状态区，元素本身要一直在 */}
+      <div aria-live="polite" data-rejections="">
+        {rejections.length > 0 && (
+          <p className="flex items-start gap-1.5 text-sm text-danger">
+            <StatusDanger size={16} className="mt-0.5 shrink-0" />
+            <span className="min-w-0 wrap-anywhere">
+              {`${labels.rejected(rejections.length)}：${rejections
+                .map(
+                  (rejection) =>
+                    `${rejection.file.name} ${reasonText(rejection)}`,
+                )
+                .join("；")}`}
+            </span>
+          </p>
+        )}
+      </div>
+
+      {files.length > 0 && (
+        <ul
+          ref={listRef}
+          aria-label={labels.list}
+          className="flex flex-col gap-1"
+        >
+          {files.map((file, index) => {
+            const actions = { remove: () => remove(index), index };
+            return (
+              <li key={`${file.name}-${file.size}-${file.lastModified}`}>
+                {renderFile ? (
+                  renderFile(file, actions)
+                ) : (
+                  <FileItem
+                    name={file.name}
+                    size={file.size}
+                    disabled={disabled}
+                    removeLabel={removeLabel(file.name)}
+                    onRemove={actions.remove}
+                  />
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <span aria-live="polite" className="sr-only">
+        {labels.selected(files.length)}
+      </span>
+    </div>
+  );
+}

package/src/components/file-upload/index.ts

@@ -0,0 +1,9 @@
+export { FileItem, type FileItemProps, type FileItemStatus } from "./FileItem";
+export {
+  FileUpload,
+  type FileRejection,
+  type FileRejectReason,
+  type FileUploadLabels,
+  type FileUploadProps,
+  type FileUploadSize,
+} from "./FileUpload";

package/src/components/flyout-bar/FlyoutBar.tsx

@@ -0,0 +1,158 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type {
+  ComponentProps,
+  MouseEvent,
+  ReactElement,
+  ReactNode,
+} from "react";
+import { usePortalScope } from "../../hooks/usePortalScope";
+import { cn } from "../../lib/cn";
+import { defined } from "../../lib/defined";
+import { focusRingInset } from "../../lib/focus-ring";
+import type { LinkRender } from "../link-element/LinkElement";
+
+export type FlyoutBarSide = "right" | "left";
+
+export type FlyoutBarProps = {
+  /**
+   * 触发按钮，通常是 `<IconButton variant="inverse">`。
+   * 它的名称（`aria-label`）同时是这一条的名称，读屏打开时会读出来
+   */
+  trigger: ReactElement<Record<string, unknown>>;
+  /** 展开在触发按钮的哪一侧，放不下时自动翻到另一侧。默认 `right` */
+  side?: FlyoutBarSide;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** 给横条本身 */
+  className?: string;
+  /** `FlyoutBarItem` */
+  children: ReactNode;
+};
+
+/**
+ * 展开条：从一个图标按钮旁边拉开的一条横排操作，比如分享的几个去处。
+ * 语义和键盘都是横向的菜单——左右方向键移动、回车选择、`Esc` 关闭。
+ * 选项多于六个、或者要文字才看得懂时，用 `DropdownMenu`。
+ */
+export function FlyoutBar({
+  trigger,
+  side = "right",
+  open,
+  defaultOpen,
+  onOpenChange,
+  className,
+  children,
+}: FlyoutBarProps) {
+  const { anchorRef, portalRef } = usePortalScope();
+
+  return (
+    <BaseMenu.Root
+      orientation="horizontal"
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange && ((next) => onOpenChange(next))}
+    >
+      <BaseMenu.Trigger ref={anchorRef} render={trigger} />
+      <BaseMenu.Portal ref={portalRef}>
+        <BaseMenu.Positioner
+          side={side}
+          align="center"
+          className="z-(--z-overlay) outline-none"
+        >
+          <BaseMenu.Popup
+            // 固定的深色：里面的图标和焦点环都按深色底取值
+            data-theme="dark"
+            className={cn(
+              "flex h-(--anchor-height) min-h-10 items-stretch border border-line bg-surface-raised text-ink-secondary shadow-sm outline-none",
+              // 黄色竖条始终贴着触发按钮：翻到另一侧时跟着换边
+              "data-[side=left]:border-r-4 data-[side=left]:border-r-action data-[side=right]:border-l-4 data-[side=right]:border-l-action",
+              // 从触发按钮一侧拉开。用裁切而不是缩放——缩放会把图标压扁。
+              // 负的 inset 给阴影留出位置
+              "[clip-path:inset(-12px)] transition-[clip-path] duration-(--duration-base) ease-exit",
+              "data-[side=right]:data-ending-style:[clip-path:inset(-12px_100%_-12px_-12px)] data-[side=right]:data-starting-style:[clip-path:inset(-12px_100%_-12px_-12px)]",
+              "data-[side=left]:data-ending-style:[clip-path:inset(-12px_-12px_-12px_100%)] data-[side=left]:data-starting-style:[clip-path:inset(-12px_-12px_-12px_100%)]",
+              className,
+            )}
+          >
+            {children}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  );
+}
+
+type ItemOwnProps = {
+  /** 只有图标时必须给：它是这一项的名称 */
+  "aria-label"?: string;
+  disabled?: boolean;
+  /** 点了之后是否关掉。操作项默认关，链接项默认不关 */
+  closeOnClick?: boolean;
+  /** 传了就渲染成链接 */
+  href?: string;
+  target?: string;
+  rel?: string;
+  /** 用这个元素代替 `<a>`（路由库的链接组件）。传了就按链接处理 */
+  render?: LinkRender;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+};
+
+export type FlyoutBarItemProps = ItemOwnProps &
+  Omit<ComponentProps<"div">, keyof ItemOwnProps | "id" | "style">;
+
+const itemClass = cn(
+  "flex min-w-10 cursor-default items-center justify-center gap-2 px-2.5 text-sm select-none",
+  "transition-colors duration-(--duration-fast) ease-standard",
+  "data-disabled:text-ink-disabled data-highlighted:text-ink",
+  "[&_svg]:size-5 [&_svg]:shrink-0",
+  focusRingInset,
+);
+
+/** 展开条里的一项：子元素是图标，可以再带文字；传 `href` 就是一个链接。 */
+export function FlyoutBarItem({
+  "aria-label": ariaLabel,
+  disabled,
+  closeOnClick,
+  href,
+  target,
+  rel,
+  render,
+  onClick,
+  className,
+  children,
+  ...props
+}: FlyoutBarItemProps) {
+  const classes = cn(itemClass, className);
+
+  if (href !== undefined || render !== undefined) {
+    return (
+      <BaseMenu.LinkItem
+        render={render}
+        {...defined({ href, target, rel })}
+        aria-label={ariaLabel}
+        // 只有图标时没有文字可供"按字母跳转"，用名称代替
+        label={ariaLabel}
+        closeOnClick={closeOnClick}
+        onClick={onClick}
+        className={classes}
+      >
+        {children}
+      </BaseMenu.LinkItem>
+    );
+  }
+
+  return (
+    <BaseMenu.Item
+      {...props}
+      aria-label={ariaLabel}
+      label={ariaLabel}
+      disabled={disabled}
+      closeOnClick={closeOnClick}
+      onClick={onClick}
+      className={classes}
+    >
+      {children}
+    </BaseMenu.Item>
+  );
+}

package/src/components/flyout-bar/index.ts

@@ -0,0 +1,7 @@
+export {
+  FlyoutBar,
+  FlyoutBarItem,
+  type FlyoutBarItemProps,
+  type FlyoutBarProps,
+  type FlyoutBarSide,
+} from "./FlyoutBar";

package/src/components/ghost-text/GhostText.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps } from "react";
+import { cn } from "../../lib/cn";
+import { decor } from "../../lib/decor";
+
+export type GhostTextVariant = "hatch" | "outline" | "solid";
+
+export type GhostTextProps = ComponentProps<"span"> & {
+  /**
+   * - `hatch` 字形透明，用细斜纹填充。版块分隔、背景，默认；
+   * - `outline` 字形透明，只有一圈浅色描边。章节编号、完成态的庆祝词；
+   * - `solid` 纯墨色，越过容器边界被截断。
+   */
+  variant?: GhostTextVariant;
+};
+
+const variantClass: Record<GhostTextVariant, string> = {
+  hatch: "ghost-hatch",
+  outline: "ghost-outline",
+  solid: "text-ink",
+};
+
+/**
+ * 镂空巨字：版面背景层里的一个词或一个编号，不是标题。
+ * 它只管长相与隐藏：放在哪、被谁裁切由使用方定——通常是绝对定位在一个
+ * `relative overflow-clip` 的版块里。字号默认是 `text-ghost`，用 `className` 换。
+ *
+ * 内容要短，写与版块相关的真实词语；一个版块一个；窄屏上往往直接去掉更好。
+ */
+export function GhostText({
+  variant = "hatch",
+  className,
+  ...props
+}: GhostTextProps) {
+  return (
+    <span
+      {...props}
+      aria-hidden="true"
+      data-variant={variant}
+      className={cn(
+        decor,
+        "block font-display text-ghost font-extrabold whitespace-nowrap uppercase",
+        variantClass[variant],
+        className,
+      )}
+    />
+  );
+}

package/src/components/ghost-text/index.ts

@@ -0,0 +1,5 @@
+export {
+  GhostText,
+  type GhostTextProps,
+  type GhostTextVariant,
+} from "./GhostText";

package/src/components/hatch/Hatch.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from "react";
+import { cn } from "../../lib/cn";
+import { decor } from "../../lib/decor";
+
+export type HatchDensity = "fine" | "mid" | "bold";
+
+export type HatchProps = Omit<ComponentProps<"div">, "children"> & {
+  /**
+   * - `bold` 粗而淡的斜带（墨色 5%），跟随主题。条带状的表面：工具条、标题栏，默认；
+   * - `mid` 比底色亮一档的斜带，压在深色控件上，不随主题变；
+   * - `fine` 很细的墨色斜带，填未探索的区域、需要"留空"的格子。
+   */
+  density?: HatchDensity;
+};
+
+const densityClass: Record<HatchDensity, string> = {
+  bold: "hatch",
+  mid: "hatch hatch-mid",
+  fine: "hatch hatch-fine",
+};
+
+/**
+ * 一块 45° 斜纹，纯装饰。尺寸、位置、底色都由 `className` 给。
+ * 把它限制在条带和控件上：不要铺满整个页面，也不要压在正文下面。
+ */
+export function Hatch({ density = "bold", className, ...props }: HatchProps) {
+  return (
+    <div
+      {...props}
+      aria-hidden="true"
+      data-density={density}
+      className={cn(decor, densityClass[density], className)}
+    />
+  );
+}

package/src/components/hatch/index.ts

@@ -0,0 +1 @@
+export { Hatch, type HatchDensity, type HatchProps } from "./Hatch";