@baseline-ui/core 0.59.0 → 0.60.0

package/dist/components/Editor/Editor.types.d.ts

@@ -0,0 +1,159 @@
+import type { StylingProps } from "../../utils";
+import type { ActionIconButtonProps } from "../ActionIconButton";
+import type { AvatarProps } from "../Avatar";
+import type { IconProps } from "../Icon";
+import type { ToggleIconButtonProps } from "../ToggleIconButton";
+import type { AriaLabelingProps } from "@react-types/shared";
+import type React from "react";
+export interface MentionableUser {
+    id: string;
+    name: string;
+    displayName: string;
+    avatar?: AvatarProps;
+    description?: string;
+}
+export interface EditorHandle {
+    setCaretPosition: (index: number) => void;
+    focus: () => void;
+}
+export interface EditorProps extends StylingProps, AriaLabelingProps {
+    /**
+     * The function to be called when `Enter` key is pressed or Save button is
+     * clicked.
+     */
+    onSave?: (value: string) => void;
+    /**
+     * The function to be called when Cancel button is clicked. If not provided,
+     * the Cancel button will not be rendered.
+     */
+    onCancel?: () => void;
+    /** The default value of the editor. */
+    defaultValue?: string;
+    /** The value of the editor. */
+    value?: string;
+    /**
+     * The function to be called when the value of the editor changes.
+     *
+     * @param value
+     */
+    onChange?: (value: string) => void;
+    /** Whether the editor is disabled. This includes both input and save button. */
+    isDisabled?: boolean;
+    /** Whether saving it disabled. Ths disables only save button. */
+    isSaveDisabled?: boolean;
+    /**
+     * Indicates whether rich text is enabled or not.
+     *
+     * @default false
+     */
+    enableRichText?: boolean;
+    /** The placeholder text to be displayed when the editor is empty. */
+    placeholder?: string;
+    /**
+     * The variant of the editor.
+     *
+     * @default default
+     */
+    variant?: "default" | "minimal";
+    /** Whether the editor is inline or not. */
+    isInline?: boolean;
+    /** Specifies whether spell checking is enabled or disabled. */
+    spellCheck?: boolean;
+    /**
+     * Optional property that represents the ARIA label for the submit button.
+     * This property is used to provide an accessible label for the button, which
+     * is read by screen readers to assist visually impaired users.
+     *
+     * @default Save
+     */
+    submitButtonAriaLabel?: string;
+    /**
+     * The React node representing the icon to be displayed on the submit button.
+     *
+     * @default ArrowUpCircleFilledIcon
+     */
+    submitButtonIcon?: React.FC<IconProps>;
+    /**
+     * Optional property that represents the ARIA label for the cancel button.
+     *
+     * @default Cancel
+     */
+    cancelButtonAriaLabel?: string;
+    /**
+     * The name of the avatar. The avatar is visible when `variant` is set to
+     * `minimal` and `enableRichText` is set to `false`.
+     */
+    avatarName?: string;
+    /**
+     * The ARIA label for the editable content. In case of rich text, this label
+     * is used to provide an accessible label for the contenteditable element,
+     * which is read by screen readers to assist visually impaired users. In case
+     * of plain text, this label is used to provide an accessible label for the
+     * textarea element.
+     *
+     * @default Editing Area
+     */
+    editableContentAriaLabel?: string;
+    /**
+     * An optional array of mentionable users. Mention feature is only available
+     * when `enableRichText` is set to `true` and this prop is provided.
+     *
+     * ```tsx
+     * type MentionableUser = {
+     *   id: string;
+     *   name: string;
+     *   displayName: string;
+     *   avatar?: AvatarProps;
+     *   description?: string;
+     * };
+     * ```
+     */
+    mentionableUsers?: MentionableUser[];
+    /**
+     * The maximum number of mentionable users to be displayed in the suggestions.
+     * This prop is only used when `mentionableUsers` is provided.
+     *
+     * @default 10
+     */
+    maxMentionableUsersSuggestions?: number;
+    /** Footer button represents the buttons that are displayed in the footer. */
+    footerButtons?: ({
+        type: "action";
+        props: Omit<ActionIconButtonProps, "size" | "variant">;
+    } | {
+        type: "toggle";
+        props: Omit<ToggleIconButtonProps, "size" | "variant">;
+    })[];
+    /** The imperative handle for manipulating editor. */
+    editorHandle?: React.RefObject<EditorHandle>;
+    /**
+     * Whether to clear the editor value when the editor is saved.
+     *
+     * @default false
+     */
+    clearOnSave?: boolean;
+    /**
+     * Whether to clear the editor value when the cancel button is clicked.
+     *
+     * @default false
+     */
+    clearOnCancel?: boolean;
+    /**
+     * Whether to autofocus the editor when it is mounted, optionally positioning
+     * the caret at the start or end of the text.
+     *
+     * - `false` or `undefined`: No auto-focus (default)
+     * - `true`: Focus on mount, caret at default position
+     * - `"start"`: Focus on mount, caret at position 0
+     * - `"end"`: Focus on mount, caret at end of text
+     *
+     * @default false
+     */
+    autoFocus?: boolean | "start" | "end";
+    /**
+     * Whether to save the editor value when `Enter` key is pressed.
+     *
+     * @default false
+     */
+    saveOnEnter?: boolean;
+}

package/dist/components/Editor/EditorToolbar.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export declare const MarkToolbarButton: React.FC<MarkToolbarButtonProps>;
+interface MarkToolbarButtonProps {
+    nodeType: string;
+    icon: React.FC;
+    ariaLabel?: string;
+    isDisabled?: boolean;
+}
+export declare const ColorToolbarButton: React.FC<ColorToolbarButtonProps>;
+interface ColorToolbarButtonProps {
+    nodeType: "backgroundColor" | "color";
+    "aria-label"?: string;
+    isDisabled?: boolean;
+}
+export {};

package/dist/components/Editor/HelpDialog.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const HelpDialog: React.FC<{
+    onClose: () => void;
+    isOpen: boolean;
+}>;

package/dist/components/Editor/RichEditor.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { ListBoxProps } from "../ListBox";
+import type { EditorProps, MentionableUser } from "./Editor.types";
+import type { PlateEditor } from "platejs/react";
+export declare const DEFAULT_CONTENT: {
+    type: "p";
+    children: {
+        text: string;
+    }[];
+}[];
+export declare const MentionContext: React.Context<{
+    items: MentionableUser[];
+    containerRef: React.RefObject<HTMLElement>;
+    maxMentionableUsersSuggestions?: number;
+}>;
+export declare const RichEditor: React.ForwardRefExoticComponent<{
+    containerRef: React.RefObject<HTMLElement>;
+    onHelpDialogOpenRequest: () => void;
+    editorRef?: React.RefObject<PlateEditor>;
+    onSave: () => void;
+} & Pick<EditorProps, "style" | "isDisabled" | "defaultValue" | "autoFocus" | "spellCheck" | "onChange" | "value" | "placeholder" | "isInline" | "editableContentAriaLabel" | "mentionableUsers" | "maxMentionableUsersSuggestions" | "editorHandle" | "saveOnEnter"> & React.RefAttributes<{
+    startMention: () => void;
+}>>;
+export declare const MentionOption: ListBoxProps["renderOption"];

package/dist/components/Editor/elements/AddLink.d.ts

@@ -0,0 +1,10 @@
+import { type PlateElementProps } from "platejs/react";
+import React from "react";
+export declare const AddLink: React.FC<{
+    isDisabled?: boolean;
+}>;
+export declare const AddLinkContent: React.FC<{
+    defaultValue?: string;
+    close?: () => void;
+}>;
+export declare function LinkElement({ className, children, ...props }: PlateElementProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Editor/elements/Mention.d.ts

@@ -0,0 +1,46 @@
+import React, { type Key } from "react";
+import type { TElement } from "platejs";
+import type { PlateEditor } from "platejs/react";
+export declare const MentionInputContentElement: React.ForwardRefExoticComponent<{
+    onCancel?: (reason: string, value: string) => void;
+    onSelectionChange?: (key: Key | null) => void;
+    element: TElement;
+    editor: PlateEditor;
+} & React.RefAttributes<HTMLInputElement>>;
+export declare const MentionInputElement: React.ForwardRefExoticComponent<Omit<Omit<any, "ref"> & import("platejs").BasePluginContext<import("platejs").PluginConfig> & {
+    editor: PlateEditor;
+    plugin: import("platejs/react").EditorPlatePlugin<import("platejs").PluginConfig>;
+} & {
+    ref?: any;
+} & import("platejs").RenderElementProps<TElement> & {
+    attributes: import("platejs").UnknownObject;
+    path: import("platejs").Path;
+} & {
+    className?: string;
+    style?: React.CSSProperties;
+} & {
+    editor: PlateEditor;
+    element: TElement;
+}, "ref"> & React.RefAttributes<HTMLElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | SVGSymbolElement | SVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSetElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement | HTMLTableDataCellElement | HTMLTableHeaderCellElement | HTMLParamElement | HTMLWebViewElement | React.Component<any, any, any>>>;
+export declare const MentionElement: React.ForwardRefExoticComponent<Omit<Omit<any, "ref"> & import("platejs").BasePluginContext<import("platejs").PluginConfig> & {
+    editor: PlateEditor;
+    plugin: import("platejs/react").EditorPlatePlugin<import("platejs").PluginConfig>;
+} & {
+    ref?: any;
+} & import("platejs").RenderElementProps<TElement> & {
+    attributes: import("platejs").UnknownObject;
+    path: import("platejs").Path;
+} & {
+    className?: string;
+    style?: React.CSSProperties;
+} & {
+    onClick?: (...args: any[]) => void;
+}, "ref"> & React.RefAttributes<HTMLElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | SVGSymbolElement | SVGElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGFilterElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSetElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement | HTMLTableDataCellElement | HTMLTableHeaderCellElement | HTMLParamElement | HTMLWebViewElement | React.Component<any, any, any>>>;
+export declare const withTriggerCombobox: ({ editor, tf: { insertText }, }: {
+    editor: PlateEditor;
+    tf: any;
+}) => {
+    transforms: {
+        insertText(text: string, options?: any): void;
+    };
+};

package/dist/components/Editor/elements/Paragraph.d.ts

@@ -0,0 +1,2 @@
+import type { PlateElementProps } from "platejs/react";
+export declare function ParagraphElement({ className, children, ...props }: PlateElementProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Editor/elements/PlainEditor.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { EditorProps } from "../Editor.types";
+export declare const PlainEditor: React.ForwardRefExoticComponent<PlainEditorProps & React.RefAttributes<{
+    clear: () => void;
+}>>;
+interface PlainEditorProps extends Omit<EditorProps, "onSave" | "clearOnSave" | "isSaveDisabled"> {
+    onSave: () => void;
+    textBoxRef: React.RefObject<HTMLTextAreaElement>;
+    isMinimal?: boolean;
+}
+export {};

package/dist/components/Editor/index.d.ts

@@ -0,0 +1,2 @@
+export { Editor } from "./Editor";
+export type { EditorProps, EditorHandle } from "./Editor.types";

package/dist/components/Editor/utils.d.ts

@@ -0,0 +1,93 @@
+import { LinkPlugin } from "@platejs/link/react";
+import { MentionPlugin } from "@platejs/mention/react";
+import { ParagraphPlugin } from "platejs/react";
+import type { TElement, TText } from "platejs";
+import type { PlateEditor } from "platejs/react";
+import type React from "react";
+interface MentionNode extends TElement {
+    displayName: string;
+    value: string;
+    type: typeof MentionPlugin.key;
+}
+interface LinkNode extends TElement {
+    url: string;
+    type: typeof LinkPlugin.key;
+}
+interface ParagraphNode extends TElement {
+    type: typeof ParagraphPlugin.key;
+}
+interface TextNode extends TText {
+    text: string;
+    bold?: string;
+    italic?: string;
+    underline?: boolean;
+    color?: string;
+    backgroundColor?: string;
+}
+export type PlateNode = MentionNode | LinkNode | ParagraphNode | TextNode;
+export declare function serialize(nodes?: PlateNode[] | PlateNode): string;
+/**
+ * Converts a CSS string into an object.
+ *
+ * @param css - The CSS string to convert.
+ * @returns A CSS object.
+ */
+export declare function cssStringToObject(css: string): Record<string, string>;
+export declare function deserialize(el: string): any;
+export declare function getUrl(editor: PlateEditor): string | undefined;
+export declare function insertMentionInput(editor: PlateEditor): void;
+export declare const plugins: (import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"mention", {
+    insertSpaceAfterMention?: boolean;
+} & import("@platejs/combobox").TriggerComboboxPluginOptions, {}, {
+    insert: {
+        mention: (options: {
+            search: string;
+            value: any;
+            key?: any;
+        }) => void;
+    };
+}, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"p", {}, {}, {}, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"a", {
+    allowedSchemes?: string[];
+    dangerouslySkipSanitization?: boolean;
+    defaultLinkAttributes?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    forceSubmit?: boolean;
+    keepSelectedTextOnPaste?: boolean;
+    rangeBeforeOptions?: import("platejs").EditorBeforeOptions;
+    triggerFloatingLinkHotkeys?: string[] | string;
+    getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;
+    getUrlHref?: (url: string) => string | undefined;
+    isUrl?: (text: string) => boolean;
+    transformInput?: (url: string) => string | undefined;
+} & {
+    isEditing: boolean;
+    mode: import("@platejs/link/react").FloatingLinkMode;
+    mouseDown: boolean;
+    newTab: boolean;
+    openEditorId: string | null;
+    text: string;
+    updated: boolean;
+    url: string;
+    triggerFloatingLinkHotkeys?: string;
+}, {
+    floatingLink: {
+        hide: () => void;
+        reset: () => void;
+        show: (mode: import("@platejs/link/react").FloatingLinkMode, editorId: string) => void;
+    };
+    link: {
+        getAttributes: import("platejs").OmitFirst<(editor: import("platejs").SlateEditor, link: import("platejs").TLinkElement) => Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "target"> & import("platejs").UnknownObject>;
+    };
+}, {}, {
+    isOpen?: (editorId: string) => boolean;
+}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"bold", {}, {}, Record<"bold", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"italic", {}, {}, Record<"italic", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"underline", {}, {}, Record<"underline", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"color", {}, {}, Record<"color", {
+    addMark: (value: string) => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"backgroundColor", {}, {}, Record<"backgroundColor", {
+    addMark: (value: string) => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"mention_input", {}, {}, {}, {}>>)[];
+export {};

package/dist/components/FileUpload/FileUpload.css.d.ts

@@ -0,0 +1,69 @@
+/**
+ * # ================================
+ *
+ * File Upload Root
+ */
+export declare const fileUploadCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        default: {
+            width: "100%";
+            backgroundColor: `var(--${string})`;
+        };
+        inline: {
+            border: `1px dashed var(--${string})`;
+            borderRadius: `var(--${string})`;
+        };
+    };
+    hoveredOrFocusedOrActive: {
+        true: {
+            outline: "none";
+        };
+    };
+    disabled: {
+        true: {
+            pointerEvents: "none";
+            backgroundColor: "unset";
+        };
+    };
+}>;
+/**
+ * # ================================
+ *
+ * File Upload Icon
+ */
+export declare const fileUploadIconCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            color: `var(--${string})`;
+        };
+    };
+}>;
+/**
+ * # ================================
+ *
+ * File Upload Label
+ */
+export declare const fileUploadLabelCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            color: `var(--${string})`;
+        };
+    };
+    hovered: {
+        true: {
+            textDecoration: "underline";
+        };
+    };
+}>;
+/**
+ * # ================================
+ *
+ * File Upload Description
+ */
+export declare const fileUploadDescriptionCn: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            color: `var(--${string})`;
+        };
+    };
+}>;

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { FileUploadProps } from "./FileUpload.types";
+export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/FileUpload/FileUpload.types.d.ts

@@ -0,0 +1,38 @@
+import type { StylingProps } from "../../utils";
+import type { IconProps } from "../Icon";
+import type React from "react";
+export interface SharedFileUploadProps extends StylingProps {
+    /** Whether the component is inlined. */
+    variant?: "default" | "inline";
+    /** Whether the component is disabled. */
+    isDisabled?: boolean;
+    /** The label to display. */
+    label: string;
+    /** The description to display. */
+    description?: string;
+    /**
+     * The pattern to match the file name against. This is a regular expression,
+     * and will be matched against the entire file name.
+     */
+    accept?: string;
+    /** The name of the input. */
+    name?: string;
+    /** The callback function that is fired when the value changes. */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The callback function that is fired when the value changes and the value is
+     * valid.
+     */
+    onValueChange?: (files: File[]) => void;
+    /**
+     * Identifies the element (or elements) that provide a detailed, extended
+     * description for the object.
+     */
+    "aria-describedby"?: string;
+}
+export interface FileUploadProps extends SharedFileUploadProps {
+    /** The Icon to display. */
+    icon?: React.FC<IconProps>;
+    /** Whether to allow multiple files to be uploaded. */
+    multiple?: boolean;
+}

package/dist/components/FileUpload/hooks/useFileUpload.d.ts

@@ -0,0 +1,22 @@
+import type React from "react";
+import type { DetailedHTMLProps } from "react";
+import type { DropItem } from "react-aria";
+export declare function useFileUpload({ isDisabled, onValueChange, onChange, name, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, accept, multiple, }: FileUploadProps): {
+    inputProps: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    labelProps: DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+    descriptionProps: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+};
+interface FileUploadProps {
+    isDisabled?: boolean;
+    onValueChange?: (files: File[]) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
+    "aria-describedby"?: string;
+    "aria-label"?: string;
+    accept?: string;
+    multiple?: boolean;
+}
+export declare function onDropOrPaste({ items }: {
+    items: DropItem[];
+}): Promise<File[]>;
+export {};

package/dist/components/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from "./FileUpload";
+export { type FileUploadProps } from "./FileUpload.types";

package/dist/components/FrameProvider/FrameProvider.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { FrameProviderProps } from "./FrameProvider.types";
+/**
+ * Returns the current container dimensions from the FrameProvider context.
+ * Values update reactively when the container resizes.
+ */
+export declare function useFrameDimensions(): {
+    width: number | undefined;
+    height: number | undefined;
+};
+export declare const FrameContext: React.Context<{
+    container: HTMLElement | null;
+    portalContainer: HTMLElement | null;
+    shouldContainOverlays: boolean;
+    isContainerPositioned: boolean;
+    containerWidth: number | undefined;
+    containerHeight: number | undefined;
+    shouldUseContainerAsBoundary: boolean;
+}>;
+export declare const FrameProvider: React.FC<FrameProviderProps>;

package/dist/components/FrameProvider/FrameProvider.types.d.ts

@@ -0,0 +1,40 @@
+import type { BlockProps } from "../../utils";
+import type React from "react";
+export interface FrameProviderProps extends BlockProps {
+    /** The children of the FrameProvider */
+    children: React.ReactNode;
+    /** The container inside which all the overlays should be confined to */
+    container?: HTMLElement | null;
+    /** The container inside which all the portals should be confined to */
+    portalContainer?: HTMLElement | null;
+    /**
+     * Whether the container should contain the overlays. Here's what happens when
+     * the value is set to `"auto"`:
+     *
+     * - On mobile, the overlays will be positioned relative to the window.
+     * - On desktop or tablet, the overlays will be positioned relative to the
+     *   container.
+     *
+     * When the value is set to `"always"`, the overlays will be positioned
+     * relative to the container on all devices.
+     *
+     * When the value is set to `"never"`, the overlays will be positioned
+     * relative to the window on all devices.
+     *
+     * @default "auto"
+     */
+    shouldContainOverlays?: "always" | "auto" | "never";
+    /**
+     * Whether the container should be used as the boundary for popovers and
+     * menus.
+     *
+     * When the value is set to `true`, the popovers and menus will be positioned
+     * relative to the container on all devices.
+     *
+     * When the value is set to `false`, the popovers and menus will be positioned
+     * relative to the window on all devices.
+     *
+     * @default false
+     */
+    shouldUseContainerAsBoundary?: boolean;
+}

package/dist/components/FrameProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { FrameProvider, useFrameDimensions } from "./FrameProvider";
+export { type FrameProviderProps } from "./FrameProvider.types";