@foxui/core 0.4.0

package/dist/components/number-input/NumberInput.svelte

@@ -0,0 +1,201 @@
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import { type VariantProps, tv } from 'tailwind-variants';
+	import { cn } from '../../utils';
+
+	export const numberInputVariants = tv({
+		base: 'group flex w-full max-w-44 touch-manipulation items-stretch justify-between rounded-2xl ring focus-within:ring-2',
+		variants: {
+			variant: {
+				primary:
+					'bg-accent-500/5 focus-within:ring-accent-400 dark:focus-within:ring-accent-600 text-accent-500 ring-accent-500/20 dark:ring-accent-500/20',
+				secondary: ''
+			},
+			size: {
+				default: 'text-base font-medium max-w-32',
+				sm: 'text-sm',
+				lg: 'text-3xl font-semibold max-w-44'
+			}
+		},
+		defaultVariants: {
+			variant: 'primary',
+			size: 'default'
+		}
+	});
+
+	export const numberInputButtonVariants = tv({
+		base: 'button-number-input flex cursor-pointer items-center pr-[.5em] pl-[.5em] transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+		variants: {
+			variant: {
+				primary:
+					'hover:text-accent-600 dark:hover:text-accent-400 disabled:hover:text-accent-500 dark:disabled:hover:text-accent-500',
+				secondary:
+					'hover:text-base-600 dark:hover:text-base-400 disabled:hover:text-base-500 dark:disabled:hover:text-base-500'
+			}
+		}
+	});
+
+	export const numberInputInputVariants = tv({
+		base: 'number-input w-full [appearance:textfield] border-0 bg-transparent text-center font-[inherit] font-semibold text-transparent outline-none [-moz-appearance:_textfield] focus-visible:ring-0 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+		variants: {
+			variant: {
+				primary: '',
+				secondary: ''
+			},
+			size: {
+				default: 'p-1',
+				sm: '',
+				lg: 'p-2'
+			}
+		}
+	});
+	export type NumberInputVariant = VariantProps<typeof numberInputVariants>['variant'];
+	export type NumberInputSize = VariantProps<typeof numberInputVariants>['size'];
+
+	export type NumberInputProps = WithElementRef<
+		WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>
+	> & {
+		variant?: NumberInputVariant;
+		size?: NumberInputSize;
+		min?: number;
+		value?: number;
+		max?: number;
+		defaultValue?: number;
+		class?: string;
+		step?: number;
+		inputRef?: HTMLInputElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import NumberFlow from '@number-flow/svelte';
+	import type { WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		min = 0,
+		value = $bindable(50),
+		max = 999,
+		defaultValue = 0,
+		step = 1,
+		class: className,
+		ref = $bindable(null),
+		inputRef = $bindable(null),
+		tabindex = undefined,
+		variant = 'primary',
+		size = 'default',
+		...restProps
+	}: NumberInputProps = $props();
+
+	let animated = $state(true);
+	let showCaret = $state(true);
+
+	function handleInput() {
+		if (!inputRef) return;
+		animated = false;
+		let next = value;
+		if (inputRef.value === '') {
+			next = defaultValue;
+		} else {
+			const num = parseInt(inputRef.value);
+			if (!isNaN(num) && min <= num && num <= max) next = num;
+		}
+		inputRef.value = String(next);
+		value = next;
+	}
+
+	function handlePointerDown(event: PointerEvent, diff: number) {
+		animated = true;
+		if (event.pointerType === 'mouse') {
+			event?.preventDefault();
+			inputRef?.focus();
+		}
+		const newVal = Math.min(Math.max(value + diff, min), max);
+		value = newVal;
+	}
+</script>
+
+<div class={cn(numberInputVariants({ variant, size }), className)} bind:this={ref} {...restProps}>
+	<button
+		aria-hidden="true"
+		tabindex={-1}
+		class={numberInputButtonVariants({ variant })}
+		disabled={min != null && value <= min}
+		onpointerdown={(event) => handlePointerDown(event, -step)}
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="3.5"
+			stroke="currentColor"
+			class="size-4"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
+		</svg>
+	</button>
+	<div
+		class="relative grid w-full items-center justify-items-center text-center [grid-template-areas:'overlap'] *:[grid-area:overlap]"
+	>
+		<input
+			class={cn(
+				numberInputInputVariants({ variant, size }),
+				showCaret ? 'caret-accent-500' : 'caret-transparent'
+			)}
+			style="font-kerning: none"
+			type="number"
+			{min}
+			step="1"
+			autocomplete="off"
+			inputmode="numeric"
+			{max}
+			{value}
+			oninput={handleInput}
+			bind:this={inputRef}
+			{tabindex}
+		/>
+		<NumberFlow
+			{value}
+			locales="en-US"
+			format={{ useGrouping: false }}
+			aria-hidden="true"
+			{animated}
+			on:animationsstart={() => (showCaret = false)}
+			on:animationsfinish={() => (showCaret = true)}
+			class="number-flow pointer-events-none"
+			willChange
+		/>
+	</div>
+	<button
+		aria-hidden="true"
+		tabindex="-1"
+		class={numberInputButtonVariants({ variant })}
+		disabled={max != null && value >= max}
+		onpointerdown={(event) => handlePointerDown(event, step)}
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="3.5"
+			stroke="currentColor"
+			class="size-4"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+		</svg>
+	</button>
+</div>
+
+<noscript>
+	<style>
+		.button-number-input {
+			display: none;
+		}
+		.number-input {
+			color: var(--color-accent-500);
+		}
+		.number-flow {
+			display: none;
+		}
+	</style>
+</noscript>

package/dist/components/number-input/NumberInput.svelte.d.ts

@@ -0,0 +1,98 @@
+import type { WithElementRef } from 'bits-ui';
+import { type VariantProps } from 'tailwind-variants';
+export declare const numberInputVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "group flex w-full max-w-44 touch-manipulation items-stretch justify-between rounded-2xl ring focus-within:ring-2", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "group flex w-full max-w-44 touch-manipulation items-stretch justify-between rounded-2xl ring focus-within:ring-2", unknown, unknown, undefined>>;
+export declare const numberInputButtonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "button-number-input flex cursor-pointer items-center pr-[.5em] pl-[.5em] transition-colors disabled:cursor-not-allowed disabled:opacity-50", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "button-number-input flex cursor-pointer items-center pr-[.5em] pl-[.5em] transition-colors disabled:cursor-not-allowed disabled:opacity-50", unknown, unknown, undefined>>;
+export declare const numberInputInputVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "number-input w-full [appearance:textfield] border-0 bg-transparent text-center font-[inherit] font-semibold text-transparent outline-none [-moz-appearance:_textfield] focus-visible:ring-0 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "number-input w-full [appearance:textfield] border-0 bg-transparent text-center font-[inherit] font-semibold text-transparent outline-none [-moz-appearance:_textfield] focus-visible:ring-0 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", unknown, unknown, undefined>>;
+export type NumberInputVariant = VariantProps<typeof numberInputVariants>['variant'];
+export type NumberInputSize = VariantProps<typeof numberInputVariants>['size'];
+export type NumberInputProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLDivElement>>> & {
+    variant?: NumberInputVariant;
+    size?: NumberInputSize;
+    min?: number;
+    value?: number;
+    max?: number;
+    defaultValue?: number;
+    class?: string;
+    step?: number;
+    inputRef?: HTMLInputElement | null;
+};
+import type { WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "ref" | "value" | "inputRef">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/number-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NumberInput } from './NumberInput.svelte';
+export type { NumberInputProps, NumberInputVariant, NumberInputSize } from './NumberInput.svelte';

package/dist/components/number-input/index.js

@@ -0,0 +1 @@
+export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/paragraph/Paragraph.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	class={cn('text-base-700 dark:text-base-200 text-sm font-medium', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/dist/components/paragraph/Paragraph.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const Paragraph: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
+type Paragraph = ReturnType<typeof Paragraph>;
+export default Paragraph;

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

@@ -0,0 +1,2 @@
+import Paragraph from './Paragraph.svelte';
+export { Paragraph };

package/dist/components/paragraph/index.js

@@ -0,0 +1,2 @@
+import Paragraph from './Paragraph.svelte';
+export { Paragraph };

package/dist/components/popover/Popover.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+	const Root = PopoverPrimitive.Root;
+	const Trigger = PopoverPrimitive.Trigger;
+
+	export type PopoverProps = PopoverPrimitive.RootProps & {
+		triggerProps?: PopoverPrimitive.TriggerProps;
+		text?: string;
+
+		triggerText?: string;
+		triggerClasses?: string;
+		triggerVariant?: ButtonVariant;
+		triggerSize?: ButtonSize;
+
+		triggerRef?: HTMLButtonElement | null;
+	} & PopoverPrimitive.ContentProps &
+		PopoverPrimitive.TriggerProps;
+</script>
+
+<script lang="ts">
+	import { buttonVariants, type ButtonSize, type ButtonVariant } from '../button';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { PopoverContent } from '.';
+	import { cn } from '../../utils';
+
+	let {
+		open = $bindable(false),
+		onOpenChange,
+		children,
+
+		triggerText,
+		triggerClasses = '',
+		triggerVariant = 'primary',
+		triggerSize = 'default',
+		triggerRef = $bindable(null),
+
+		side = 'top',
+		sideOffset = 10,
+
+		child: myChild,
+		class: className,
+		...restProps
+	}: PopoverProps = $props();
+</script>
+
+<Root bind:open {onOpenChange}>
+	{#if myChild}
+		<Trigger class={triggerClasses} bind:ref={triggerRef}>
+			{#snippet child({ props })}
+				{@render myChild?.({ props })}
+			{/snippet}
+		</Trigger>
+	{:else}
+		<Trigger
+			class={cn(buttonVariants({ variant: triggerVariant, size: triggerSize }), triggerClasses)}
+			bind:ref={triggerRef}
+		>
+			{triggerText}
+		</Trigger>
+	{/if}
+	<PopoverContent {side} {sideOffset} class={className} {...restProps}>
+		{@render children?.()}
+	</PopoverContent>
+</Root>

package/dist/components/popover/Popover.svelte.d.ts

@@ -0,0 +1,14 @@
+export type PopoverProps = PopoverPrimitive.RootProps & {
+    triggerProps?: PopoverPrimitive.TriggerProps;
+    text?: string;
+    triggerText?: string;
+    triggerClasses?: string;
+    triggerVariant?: ButtonVariant;
+    triggerSize?: ButtonSize;
+    triggerRef?: HTMLButtonElement | null;
+} & PopoverPrimitive.ContentProps & PopoverPrimitive.TriggerProps;
+import { type ButtonSize, type ButtonVariant } from '../button';
+import { Popover as PopoverPrimitive } from 'bits-ui';
+declare const Popover: import("svelte").Component<PopoverProps, {}, "open" | "triggerRef">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

@@ -0,0 +1,8 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+declare const Root: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+declare const Trigger: import("svelte").Component<PopoverPrimitive.TriggerProps, {}, "ref">;
+declare const Close: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
+export { Root as PopoverRoot, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose };
+export { default as Popover } from './Popover.svelte';
+export type { PopoverProps } from './Popover.svelte';

package/dist/components/popover/index.js

@@ -0,0 +1,7 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import Content from './popover-content.svelte';
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+export { Root as PopoverRoot, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose };
+export { default as Popover } from './Popover.svelte';

package/dist/components/popover/popover-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = 'center',
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{align}
+		class={cn(
+			'bg-base-100/70 dark:bg-base-900/50 backdrop-blur-xl border-base-200 dark:border-base-800 text-base-900 dark:text-base-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-2xl border p-4 shadow-md outline-none',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>

package/dist/components/popover/popover-content.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+type $$ComponentProps = PopoverPrimitive.ContentProps & {
+    portalProps?: PopoverPrimitive.PortalProps;
+};
+declare const PopoverContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

package/dist/components/prose/Prose.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" module>
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+	import { cn } from '../../utils';
+
+	export const proseVariants = tv({
+		base: 'prose dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-pre:rounded-2xl w-full max-w-none',
+		variants: {
+			size: {
+				default: 'prose-sm',
+				md: 'prose-base',
+				lg: 'prose-lg',
+				xl: 'prose-xl',
+				'2xl': 'prose-2xl'
+			}
+		},
+		defaultVariants: {
+			size: 'default'
+		}
+	});
+
+	export type ProseSize = VariantProps<typeof proseVariants>['size'];
+
+	export type ProseProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		size?: ProseSize;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		ref = $bindable(null),
+		class: className,
+		size = 'default',
+		...restProps
+	}: ProseProps = $props();
+</script>
+
+<div bind:this={ref} class={cn(proseVariants({ size }), className)} {...restProps}>
+	{@render children?.()}
+</div>
+
+<!-- TODO: this is not actually used right now, we have to fix that -->
+<style>
+	.prose-base-colors {
+		--tw-prose-body: var(--color-base-700);
+		--tw-prose-headings: var(--color-base-900);
+		--tw-prose-lead: var(--color-base-600);
+		--tw-prose-links: var(--color-base-900);
+		--tw-prose-bold: var(--color-base-900);
+		--tw-prose-counters: var(--color-base-500);
+		--tw-prose-bullets: var(--color-base-300);
+		--tw-prose-hr: var(--color-base-200);
+		--tw-prose-quotes: var(--color-base-900);
+		--tw-prose-quote-borders: var(--color-base-200);
+		--tw-prose-captions: var(--color-base-500);
+		--tw-prose-kbd: var(--color-base-900);
+		--tw-prose-kbd-shadows: var(--color-base-900);
+		--tw-prose-code: var(--color-base-900);
+		--tw-prose-pre-code: var(--color-base-200);
+		--tw-prose-pre-bg: var(--color-base-800);
+		--tw-prose-th-borders: var(--color-base-300);
+		--tw-prose-td-borders: var(--color-base-200);
+
+
+		--tw-prose-invert-body: var(--color-base-300);
+		--tw-prose-invert-headings: var(--color-white);
+		--tw-prose-invert-lead: var(--color-base-400);
+		--tw-prose-invert-links: var(--color-white);
+		--tw-prose-invert-bold: var(--color-white);
+		--tw-prose-invert-counters: var(--color-base-400);
+		--tw-prose-invert-bullets: var(--color-base-600);
+		--tw-prose-invert-hr: var(--color-base-700);
+		--tw-prose-invert-quotes: var(--color-base-100);
+		--tw-prose-invert-quote-borders: var(--color-base-700);
+		--tw-prose-invert-captions: var(--color-base-400);
+		--tw-prose-invert-kbd: var(--color-white);
+		--tw-prose-invert-kbd-shadows: var(--color-white);
+		--tw-prose-invert-code: var(--color-white);
+		--tw-prose-invert-pre-code: var(--color-base-300);
+		--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+		--tw-prose-invert-th-borders: var(--color-base-600);
+		--tw-prose-invert-td-borders: var(--color-base-700);
+	}
+
+	.prose-base-colors-dark {
+		--tw-prose-invert-body: var(--color-base-300);
+		--tw-prose-invert-headings: var(--color-white);
+		--tw-prose-invert-lead: var(--color-base-400);
+		--tw-prose-invert-links: var(--color-white);
+		--tw-prose-invert-bold: var(--color-white);
+		--tw-prose-invert-counters: var(--color-base-400);
+		--tw-prose-invert-bullets: var(--color-base-600);
+		--tw-prose-invert-hr: var(--color-base-700);
+		--tw-prose-invert-quotes: var(--color-base-100);
+		--tw-prose-invert-quote-borders: var(--color-base-700);
+		--tw-prose-invert-captions: var(--color-base-400);
+		--tw-prose-invert-kbd: var(--color-white);
+		--tw-prose-invert-kbd-shadows: var(--color-white);
+		--tw-prose-invert-code: var(--color-white);
+		--tw-prose-invert-pre-code: var(--color-base-300);
+		--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+		--tw-prose-invert-th-borders: var(--color-base-600);
+		--tw-prose-invert-td-borders: var(--color-base-700);
+	}
+</style>

package/dist/components/prose/Prose.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type VariantProps } from 'tailwind-variants';
+export declare const proseVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+}, undefined, "prose dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-pre:rounded-2xl w-full max-w-none", {
+    size: {
+        default: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+}, undefined, "prose dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-pre:rounded-2xl w-full max-w-none", unknown, unknown, undefined>>;
+export type ProseSize = VariantProps<typeof proseVariants>['size'];
+export type ProseProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    size?: ProseSize;
+};
+declare const Prose: import("svelte").Component<ProseProps, {}, "ref">;
+type Prose = ReturnType<typeof Prose>;
+export default Prose;

package/dist/components/prose/ProseCopyButton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { AddCopyCodeButtons } from "../copy-code-button";
+	import Prose from "./Prose.svelte";
+	import type { Snippet } from "svelte";
+
+	let { children, class: className }: { children: Snippet; class?: string } = $props();
+</script>
+<Prose class={className}>
+	{@render children?.()}
+</Prose>
+
+<AddCopyCodeButtons />

package/dist/components/prose/ProseCopyButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    class?: string;
+};
+declare const ProseCopyButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProseCopyButton = ReturnType<typeof ProseCopyButton>;
+export default ProseCopyButton;

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

@@ -0,0 +1,4 @@
+export { default as Prose } from './Prose.svelte';
+export type { ProseProps } from './Prose.svelte';
+export { proseVariants } from './Prose.svelte';
+export type { ProseSize } from './Prose.svelte';

package/dist/components/prose/index.js

@@ -0,0 +1,2 @@
+export { default as Prose } from './Prose.svelte';
+export { proseVariants } from './Prose.svelte';

package/dist/components/scroll-area/BodyScrollArea.svelte

@@ -0,0 +1,3 @@
+<script lang="ts">
+	import './style.css';
+</script>

package/dist/components/scroll-area/BodyScrollArea.svelte.d.ts

@@ -0,0 +1,19 @@
+import './style.css';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BodyScrollArea: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BodyScrollArea = InstanceType<typeof BodyScrollArea>;
+export default BodyScrollArea;