@diegopluna/narvi 0.0.0-stage → 0.0.1

package/dist/components/command/CommandFooter.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Sx } from '../../internal/sx.js';
+export type CommandFooterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    sx?: Sx;
+    /** Hints for the keys, such as "↑↓ to move". */
+    children?: Snippet;
+};
+declare const CommandFooter: import("svelte").Component<CommandFooterProps, {}, "">;
+type CommandFooter = ReturnType<typeof CommandFooter>;
+export default CommandFooter;

package/dist/components/command/CommandGroup.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+	import { Command } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import type { Sx } from '../../internal/sx.js';
+
+	export type CommandGroupProps = Omit<Command.GroupProps, 'children' | 'child'> & {
+		/** The group's name, shown above its items. */
+		heading?: string;
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { heading, sx, children, ...rest }: CommandGroupProps = $props();
+</script>
+
+<Command.Group data-slot="command-group" {...rest} {...stylex.attrs(sx)}>
+	{#if heading}
+		<Command.GroupHeading {...stylex.attrs(layer.heading)}>{heading}</Command.GroupHeading>
+	{/if}
+	<Command.GroupItems>{@render children?.()}</Command.GroupItems>
+</Command.Group>

package/dist/components/command/CommandGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Command } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { Sx } from '../../internal/sx.js';
+export type CommandGroupProps = Omit<Command.GroupProps, 'children' | 'child'> & {
+    /** The group's name, shown above its items. */
+    heading?: string;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const CommandGroup: import("svelte").Component<CommandGroupProps, {}, "">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

package/dist/components/command/CommandInput.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+	import { Command } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import Glyph from '../../internal/Glyph.svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { command } from './styles.js';
+
+	export type CommandInputProps = Omit<Command.InputProps, 'child'> & { sx?: Sx };
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(''),
+		placeholder = 'Search for a command…',
+		sx,
+		class: className,
+		...rest
+	}: CommandInputProps = $props();
+</script>
+
+<!-- Focus stays here while the arrow keys move through the list -->
+<div {...stylex.attrs(command.search)}>
+	<Glyph name="search" />
+	<Command.Input
+		bind:value
+		{placeholder}
+		autocomplete="off"
+		spellcheck={false}
+		data-slot="command-input"
+		{...rest}
+		{...attrs([command.input, sx], className)}
+	/>
+</div>

package/dist/components/command/CommandInput.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Command } from 'bits-ui';
+import { type Sx } from '../../internal/sx.js';
+export type CommandInputProps = Omit<Command.InputProps, 'child'> & {
+    sx?: Sx;
+};
+declare const CommandInput: import("svelte").Component<CommandInputProps, {}, "value">;
+type CommandInput = ReturnType<typeof CommandInput>;
+export default CommandInput;

package/dist/components/command/CommandItem.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { Command } from 'bits-ui';
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import { layer } from '../../internal/layer.js';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import Kbd from '../kbd/Kbd.svelte';
+	import { command } from './styles.js';
+
+	export type CommandItemProps = Omit<Command.ItemProps, 'children' | 'child'> & {
+		/** A 16px icon before the label. */
+		icon?: Snippet;
+		/** A quieter note after the label, such as where a thread lives. */
+		detail?: string;
+		/** The keys that do the same from anywhere, such as "⌘N". */
+		shortcut?: string;
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		icon,
+		detail,
+		shortcut,
+		sx,
+		class: className,
+		children,
+		...rest
+	}: CommandItemProps = $props();
+</script>
+
+<Command.Item data-slot="command-item" {...rest} {...attrs([command.item, sx], className)}>
+	{#snippet child({ props })}
+		<div {...props}>
+			{#if icon}<span {...stylex.attrs(layer.icon)}>{@render icon()}</span>{/if}
+			<span {...stylex.attrs(layer.label)}>
+				{@render children?.()}
+				{#if detail}<span {...stylex.attrs(command.detail)}>&nbsp;· {detail}</span>{/if}
+			</span>
+			<span {...stylex.attrs(layer.trailing)}>
+				{#if shortcut}{shortcut}{/if}
+				<!-- Enter is the way to choose, shown only on the highlighted row -->
+				{#if props['data-selected'] !== undefined}<Kbd>↵</Kbd>{/if}
+			</span>
+		</div>
+	{/snippet}
+</Command.Item>

package/dist/components/command/CommandItem.svelte.d.ts

@@ -0,0 +1,16 @@
+import { Command } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type CommandItemProps = Omit<Command.ItemProps, 'children' | 'child'> & {
+    /** A 16px icon before the label. */
+    icon?: Snippet;
+    /** A quieter note after the label, such as where a thread lives. */
+    detail?: string;
+    /** The keys that do the same from anywhere, such as "⌘N". */
+    shortcut?: string;
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const CommandItem: import("svelte").Component<CommandItemProps, {}, "">;
+type CommandItem = ReturnType<typeof CommandItem>;
+export default CommandItem;

package/dist/components/command/CommandList.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+	import { Command } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { command } from './styles.js';
+
+	export type CommandListProps = Omit<Command.ListProps, 'children' | 'child'> & {
+		sx?: Sx;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { sx, class: className, children, ...rest }: CommandListProps = $props();
+</script>
+
+<Command.List data-slot="command-list" {...rest} {...attrs([command.list, sx], className)}>
+	<Command.Viewport>
+		{@render children?.()}
+	</Command.Viewport>
+</Command.List>

package/dist/components/command/CommandList.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Command } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type CommandListProps = Omit<Command.ListProps, 'children' | 'child'> & {
+    sx?: Sx;
+    children?: Snippet;
+};
+declare const CommandList: import("svelte").Component<CommandListProps, {}, "">;
+type CommandList = ReturnType<typeof CommandList>;
+export default CommandList;

package/dist/components/command/CommandRoot.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" module>
+	import { Command } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import { attrs, type Sx } from '../../internal/sx.js';
+	import { command } from './styles.js';
+
+	export type CommandRootProps = Omit<Command.RootProps, 'children' | 'child'> & {
+		sx?: Sx;
+		/** A Command.Input, a Command.List and, if you like, a Command.Footer. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	let { loop = true, sx, class: className, children, ...rest }: CommandRootProps = $props();
+</script>
+
+<Command.Root {loop} data-slot="command" {...rest} {...attrs([command.root, sx], className)}>
+	{@render children?.()}
+</Command.Root>

package/dist/components/command/CommandRoot.svelte.d.ts

@@ -0,0 +1,11 @@
+import { Command } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import { type Sx } from '../../internal/sx.js';
+export type CommandRootProps = Omit<Command.RootProps, 'children' | 'child'> & {
+    sx?: Sx;
+    /** A Command.Input, a Command.List and, if you like, a Command.Footer. */
+    children?: Snippet;
+};
+declare const CommandRoot: import("svelte").Component<CommandRootProps, {}, "">;
+type CommandRoot = ReturnType<typeof CommandRoot>;
+export default CommandRoot;

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

@@ -0,0 +1,20 @@
+import { Command } from 'bits-ui';
+import Dialog from './CommandDialog.svelte';
+import Empty from './CommandEmpty.svelte';
+import Footer from './CommandFooter.svelte';
+import Group from './CommandGroup.svelte';
+import Input from './CommandInput.svelte';
+import Item from './CommandItem.svelte';
+import List from './CommandList.svelte';
+import Root from './CommandRoot.svelte';
+declare const Separator: import("svelte").Component<Command.SeparatorProps, {}, "ref">;
+declare const Loading: import("svelte").Component<Command.LoadingProps, {}, "ref">;
+export { Dialog, Root, Input, List, Group, Item, Empty, Separator, Loading, Footer };
+export type { CommandDialogProps } from './CommandDialog.svelte';
+export type { CommandEmptyProps } from './CommandEmpty.svelte';
+export type { CommandFooterProps } from './CommandFooter.svelte';
+export type { CommandGroupProps } from './CommandGroup.svelte';
+export type { CommandInputProps } from './CommandInput.svelte';
+export type { CommandItemProps } from './CommandItem.svelte';
+export type { CommandListProps } from './CommandList.svelte';
+export type { CommandRootProps } from './CommandRoot.svelte';

package/dist/components/command/index.js

@@ -0,0 +1,12 @@
+import { Command } from 'bits-ui';
+import Dialog from './CommandDialog.svelte';
+import Empty from './CommandEmpty.svelte';
+import Footer from './CommandFooter.svelte';
+import Group from './CommandGroup.svelte';
+import Input from './CommandInput.svelte';
+import Item from './CommandItem.svelte';
+import List from './CommandList.svelte';
+import Root from './CommandRoot.svelte';
+const Separator = Command.Separator;
+const Loading = Command.Loading;
+export { Dialog, Root, Input, List, Group, Item, Empty, Separator, Loading, Footer };

package/dist/components/command/styles.d.ts

@@ -0,0 +1,117 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const command: Readonly<{
+    readonly root: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+    readonly search: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.625rem">;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderBottomWidth: stylex.StyleXClassNameFor<"borderBottomWidth", "1px">;
+        readonly borderBottomStyle: stylex.StyleXClassNameFor<"borderBottomStyle", "solid">;
+        readonly borderBottomColor: stylex.StyleXClassNameFor<"borderBottomColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly input: Readonly<{
+        readonly flexGrow: stylex.StyleXClassNameFor<"flexGrow", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly height: stylex.StyleXClassNameFor<"height", "3rem">;
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", "inherit">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "none">;
+        readonly '::placeholder': stylex.StyleXClassNameFor<"::placeholder", {
+            readonly color: stylex.StyleXVar<string>;
+            readonly opacity: 1;
+        }>;
+    }>;
+    readonly list: Readonly<{
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "min(24rem, 60dvh)">;
+        readonly overflowY: stylex.StyleXClassNameFor<"overflowY", "auto">;
+        readonly overscrollBehavior: stylex.StyleXClassNameFor<"overscrollBehavior", "contain">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", "0.375rem">;
+        readonly scrollbarWidth: stylex.StyleXClassNameFor<"scrollbarWidth", "thin">;
+        readonly scrollPaddingBlock: stylex.StyleXClassNameFor<"scrollPaddingBlock", "0.375rem">;
+    }>;
+    readonly item: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", "0.625rem">;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "2.375rem">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", "0.625rem">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
+        readonly userSelect: stylex.StyleXClassNameFor<"userSelect", "none">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly forcedColorAdjust: stylex.StyleXClassNameFor<"forcedColorAdjust", "none">;
+    }>;
+    readonly detail: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+    }>;
+    readonly empty: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly footer: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly flexShrink: stylex.StyleXClassNameFor<"flexShrink", 0>;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", "2.5rem">;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderTopWidth: stylex.StyleXClassNameFor<"borderTopWidth", "1px">;
+        readonly borderTopStyle: stylex.StyleXClassNameFor<"borderTopStyle", "solid">;
+        readonly borderTopColor: stylex.StyleXClassNameFor<"borderTopColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+    readonly dialog: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "fixed">;
+        readonly insetInline: stylex.StyleXClassNameFor<"insetInline", 0>;
+        readonly top: stylex.StyleXClassNameFor<"top", "min(14vh, 8rem)">;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 51>;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly width: stylex.StyleXClassNameFor<"width", "min(38rem, calc(100vw - 2rem))">;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "calc(100dvh - min(14vh, 8rem) - 2rem)">;
+        readonly marginInline: stylex.StyleXClassNameFor<"marginInline", "auto">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 0 0 1px ${stylex.StyleXVar<string>}, inset 0 1px 0 ${stylex.StyleXVar<string>}, 0 32px 80px -16px rgb(0 0 0 / 0.55)`>;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "solid">;
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0 | "1px">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", "CanvasText">;
+    }>;
+    readonly overlay: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "fixed">;
+        readonly inset: stylex.StyleXClassNameFor<"inset", 0>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 50>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(rgb(20 23 28 / 0.2), rgb(0 0 0 / 0.45))">;
+    }>;
+    readonly hidden: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+        readonly width: stylex.StyleXClassNameFor<"width", "1px">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1px">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly clipPath: stylex.StyleXClassNameFor<"clipPath", "inset(50%)">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+    }>;
+}>;

package/dist/components/command/styles.js

@@ -0,0 +1,121 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors, font, radius, space } from '../../tokens.stylex.js';
+const SELECTED = ':is([data-selected])';
+const FORCED = '@media (forced-colors: active)';
+export const command = stylex.create({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        color: colors.text,
+        fontFamily: font.body,
+        fontSize: font.sizeMd
+    },
+    search: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.625rem',
+        flexShrink: 0,
+        paddingInline: space.x4,
+        borderBottomWidth: '1px',
+        borderBottomStyle: 'solid',
+        borderBottomColor: colors.line,
+        color: colors.textSubtle
+    },
+    input: {
+        flexGrow: 1,
+        minWidth: 0,
+        height: '3rem',
+        margin: 0,
+        padding: 0,
+        borderWidth: 0,
+        backgroundColor: 'transparent',
+        color: colors.text,
+        fontFamily: 'inherit',
+        fontSize: font.sizeLg,
+        outlineStyle: 'none',
+        '::placeholder': { color: colors.textSubtle, opacity: 1 }
+    },
+    list: {
+        maxHeight: 'min(24rem, 60dvh)',
+        overflowY: 'auto',
+        overscrollBehavior: 'contain',
+        padding: '0.375rem',
+        scrollbarWidth: 'thin',
+        scrollPaddingBlock: '0.375rem'
+    },
+    item: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.625rem',
+        minHeight: '2.375rem',
+        paddingInline: '0.625rem',
+        borderRadius: radius.md,
+        color: colors.text,
+        cursor: 'default',
+        userSelect: 'none',
+        backgroundColor: {
+            default: 'transparent',
+            [SELECTED]: { default: colors.hover, [FORCED]: 'Highlight' }
+        },
+        forcedColorAdjust: 'none'
+    },
+    detail: {
+        color: colors.textSubtle,
+        fontSize: font.sizeSm,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    },
+    empty: {
+        paddingBlock: space.x8,
+        color: colors.textMuted,
+        textAlign: 'center'
+    },
+    footer: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: space.x4,
+        flexShrink: 0,
+        minHeight: '2.5rem',
+        paddingInline: space.x4,
+        borderTopWidth: '1px',
+        borderTopStyle: 'solid',
+        borderTopColor: colors.line,
+        color: colors.textSubtle,
+        fontSize: font.sizeXs
+    },
+    // The palette is opened many times a day, so it opens and closes at once
+    dialog: {
+        position: 'fixed',
+        insetInline: 0,
+        top: 'min(14vh, 8rem)',
+        zIndex: 51,
+        display: 'flex',
+        flexDirection: 'column',
+        width: 'min(38rem, calc(100vw - 2rem))',
+        maxHeight: 'calc(100dvh - min(14vh, 8rem) - 2rem)',
+        marginInline: 'auto',
+        overflow: 'hidden',
+        borderRadius: radius.frame,
+        backgroundColor: colors.bgRaised,
+        boxShadow: `inset 0 0 0 1px ${colors.lineStrong}, inset 0 1px 0 ${colors.highlight}, 0 32px 80px -16px rgb(0 0 0 / 0.55)`,
+        outlineStyle: 'solid',
+        outlineWidth: { default: 0, [FORCED]: '1px' },
+        outlineColor: 'CanvasText'
+    },
+    overlay: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: 50,
+        backgroundColor: 'light-dark(rgb(20 23 28 / 0.2), rgb(0 0 0 / 0.45))'
+    },
+    hidden: {
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        overflow: 'hidden',
+        clipPath: 'inset(50%)',
+        whiteSpace: 'nowrap'
+    }
+});

package/dist/components/composer/ComposerAttachButton.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	import * as stylex from '@stylexjs/stylex';
+	import type { Snippet } from 'svelte';
+	import Glyph from '../../internal/Glyph.svelte';
+	import type { Sx } from '../../internal/sx.js';
+	import { radius } from '../../tokens.stylex.js';
+	import Button, { type ButtonProps } from '../button/Button.svelte';
+	import { useComposer } from './context.js';
+
+	export type ComposerAttachButtonProps = Omit<
+		ButtonProps,
+		'children' | 'variant' | 'size' | 'iconOnly' | 'href' | 'ref' | 'sx' | 'onclick'
+	> & {
+		/** Accessible name. */
+		label?: string;
+		onclick?: (event: MouseEvent) => void;
+		sx?: Sx;
+		/** An icon of your own, in place of the paperclip. */
+		children?: Snippet;
+	};
+
+	const styles = stylex.create({
+		button: { borderRadius: `calc(${radius.xl} * 4 / 3)` }
+	});
+</script>
+
+<script lang="ts">
+	let {
+		label = 'Attach files',
+		disabled,
+		onclick,
+		sx,
+		children,
+		...rest
+	}: ComposerAttachButtonProps = $props();
+
+	const composer = useComposer('AttachButton');
+</script>
+
+<Button
+	variant="ghost"
+	size="sm"
+	iconOnly
+	aria-label={label}
+	disabled={disabled ?? composer.disabled}
+	data-slot="composer-attach"
+	{...rest}
+	sx={[styles.button, sx]}
+	onclick={(event: MouseEvent) => {
+		onclick?.(event);
+		if (!event.defaultPrevented) composer.browse();
+	}}
+>
+	{#if children}{@render children()}{:else}<Glyph name="paperclip" />{/if}
+</Button>

package/dist/components/composer/ComposerAttachButton.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { Sx } from '../../internal/sx.js';
+import { type ButtonProps } from '../button/Button.svelte';
+export type ComposerAttachButtonProps = Omit<ButtonProps, 'children' | 'variant' | 'size' | 'iconOnly' | 'href' | 'ref' | 'sx' | 'onclick'> & {
+    /** Accessible name. */
+    label?: string;
+    onclick?: (event: MouseEvent) => void;
+    sx?: Sx;
+    /** An icon of your own, in place of the paperclip. */
+    children?: Snippet;
+};
+declare const ComposerAttachButton: import("svelte").Component<ComposerAttachButtonProps, {}, "">;
+type ComposerAttachButton = ReturnType<typeof ComposerAttachButton>;
+export default ComposerAttachButton;