@sprawlify/svelte 0.0.45 → 0.0.46

package/dist/components/accordion/accordion-root-provider.svelte

@@ -23,7 +23,9 @@
   const [renderStrategyProps, localProps] = $derived(splitRenderStrategyProps(props))
   const mergedProps = $derived(mergeProps(value().getRootProps(), localProps))
 
-  AccordionProvider(value)
+  $effect(() => {
+    AccordionProvider(value)
+  })
   RenderStrategyPropsProvider(() => renderStrategyProps)
 </script>
 

package/dist/components/angle-slider/angle-slider-root-provider.svelte

@@ -18,7 +18,9 @@
   let { ref = $bindable(null), value: angleSlider, ...localProps }: AngleSliderRootProviderProps = $props()
   const mergedProps = $derived(mergeProps(angleSlider().getRootProps(), localProps))
 
-  AngleSliderProvider(angleSlider)
+  $effect(() => {
+    AngleSliderProvider(angleSlider)
+  })
 </script>
 
 <Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/bottom-sheet/bottom-sheet-root-provider.svelte

@@ -28,7 +28,9 @@
 
   const presence = usePresence(() => presenceMachineProps)
 
-  BottomSheetProvider(value)
+  $effect(() => {
+    BottomSheetProvider(value)
+  })
   RenderStrategyPropsProvider(() => renderStrategyProps)
   PresenceProvider(presence)
 </script>

package/dist/components/carousel/carousel-anatomy.d.ts

@@ -1 +1 @@
-export declare const carouselAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"root" | "item" | "control" | "indicator" | "nextTrigger" | "prevTrigger" | "itemGroup" | "indicatorGroup" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;
+export declare const carouselAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"root" | "item" | "control" | "indicator" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "autoplayTrigger" | "progressText" | "autoplayIndicator">;

package/dist/components/carousel/carousel-root-provider.svelte

@@ -16,7 +16,9 @@
   let { ref = $bindable(null), value, ...props }: CarouselRootProviderProps = $props()
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
-  CarouselProvider(value)
+  $effect(() => {
+    CarouselProvider(value)
+  })
 </script>
 
 <Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/checkbox/checkbox-group-provider.svelte

@@ -18,7 +18,9 @@
 
   const mergedProps = $derived(mergeProps({ role: 'group', ...checkboxAnatomy.build().group.attrs }, props))
 
-  CheckboxGroupContextProvider(value)
+  $effect(() => {
+    CheckboxGroupContextProvider(value)
+  })
 </script>
 
 <Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/checkbox/checkbox-root-provider.svelte

@@ -17,7 +17,9 @@
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
-  CheckboxProvider(value)
+  $effect(() => {
+    CheckboxProvider(value)
+  })
 </script>
 
 <Sprawlify as="label" bind:ref {...mergedProps} />

package/dist/components/clipboard/clipboard-root-provider.svelte

@@ -17,7 +17,9 @@
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
-  ClipboardProvider(value)
+  $effect(() => {
+    ClipboardProvider(value)
+  })
 </script>
 
 <Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/collapsible/collapsible-root-provider.svelte

@@ -18,7 +18,9 @@
   let { ref = $bindable(null), value, ...props }: CollapsibleRootProviderProps = $props()
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 
-  CollapsibleProvider(value)
+  $effect(() => {
+    CollapsibleProvider(value)
+  })
 </script>
 
 <Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-anatomy.d.ts

@@ -1 +1 @@
-export declare const colorPickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "area" | "view" | "root" | "content" | "trigger" | "control" | "valueText" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+export declare const colorPickerAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "area" | "view" | "root" | "content" | "trigger" | "control" | "valueText" | "positioner" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;

package/dist/components/color-picker/color-picker-root-provider.svelte

@@ -21,7 +21,9 @@
   const presence = usePresence(() => ({ present: value().open, ...presenceProps }))
   const mergedProps = $derived(mergeProps(value().getRootProps(), localProps))
 
-  ColorPickerProvider(value)
+  $effect(() => {
+    ColorPickerProvider(value)
+  })
   PresenceProvider(presence)
 </script>
 

package/dist/components/combobox/combobox-anatomy.d.ts

@@ -1 +1 @@
-export declare const comboboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "content" | "trigger" | "list" | "item" | "control" | "itemGroup" | "positioner" | "itemIndicator" | "itemText" | "clearTrigger" | "itemGroupLabel" | "empty">;
+export declare const comboboxAnatomy: import("@sprawlify/primitives/anatomy").AnatomyInstance<"label" | "input" | "root" | "content" | "trigger" | "list" | "item" | "control" | "itemGroup" | "positioner" | "clearTrigger" | "itemIndicator" | "itemText" | "itemGroupLabel" | "empty">;

package/dist/components/combobox/combobox-root-provider.svelte

@@ -2,7 +2,7 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { Snippet } from 'svelte'
   import type { CollectionItem } from '../collection/index.js'
-  import type { UsePresenceProps } from '../presence/use-presence.svelte.js'
+  import type { UsePresenceProps } from '../presence/use-presence.svelte'
   import type { UseComboboxReturn } from './use-combobox.svelte.js'
 
   interface RootProviderProps<T extends CollectionItem> {
@@ -36,7 +36,9 @@
   const presence = usePresence(() => mergeProps({ present: value().open }, presenceProps))
   const mergedProps = $derived(mergeProps(value().getRootProps(), otherProps))
 
-  ComboboxProvider(value)
+  $effect(() => {
+    ComboboxProvider(value)
+  })
   PresenceProvider(presence)
 </script>
 

package/dist/components/combobox/combobox-root-provider.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { Snippet } from 'svelte';
 import type { CollectionItem } from '../collection/index.js';
-import type { UsePresenceProps } from '../presence/use-presence.svelte.js';
+import type { UsePresenceProps } from '../presence/use-presence.svelte';
 import type { UseComboboxReturn } from './use-combobox.svelte.js';
 interface RootProviderProps<T extends CollectionItem> {
     value: UseComboboxReturn<T>;

package/dist/components/date-picker/date-picker-root-provider.svelte

@@ -27,7 +27,9 @@
   const presence = usePresence(() => ({ present: value().open, ...presenceProps }))
   const mergedProps = $derived(mergeProps(value().getRootProps(), localProps))
 
-  DatePickerProvider(value)
+  $effect(() => {
+    DatePickerProvider(value)
+  })
   PresenceProvider(presence)
 </script>
 

package/dist/components/date-picker/date-picker-root.svelte

@@ -57,6 +57,7 @@
       'onOpenChange',
       'onValueChange',
       'onViewChange',
+      "onVisibleRangeChange",
       'open',
       'outsideDaySelectable',
       'parse',

package/dist/components/dialog/dialog-root-provider.svelte

@@ -28,7 +28,9 @@
 
   const presence = usePresence(() => presenceMachineProps)
 
-  DialogProvider(value)
+  $effect(() => {
+    DialogProvider(value)
+  })
   RenderStrategyPropsProvider(() => renderStrategyProps)
   PresenceProvider(presence)
 </script>

package/dist/components/editable/editable-root-provider.svelte

@@ -15,7 +15,9 @@
 
   let { ref = $bindable(null), value, ...props }: EditableRootProviderProps = $props()
 
-  EditableProvider(value)
+  $effect(() => {
+    EditableProvider(value)
+  })
 
   const mergedProps = $derived(mergeProps(value().getRootProps(), props))
 </script>

package/dist/components/file-upload/file-upload-anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as fileUploadAnatomy } from '@sprawlify/primitives/machines/file-upload';

package/dist/components/file-upload/file-upload-anatomy.js

@@ -0,0 +1 @@
+export { anatomy as fileUploadAnatomy } from '@sprawlify/primitives/machines/file-upload';

package/dist/components/file-upload/file-upload-clear-trigger.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadClearTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface FileUploadClearTriggerProps extends Assign<HTMLProps<'button'>, FileUploadClearTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadClearTriggerProps = $props()
+  const fileUpload = useFileUploadContext()
+  const mergedProps = $derived(mergeProps(fileUpload().getClearTriggerProps(), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-clear-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadClearTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
+}
+export interface FileUploadClearTriggerProps extends Assign<HTMLProps<'button'>, FileUploadClearTriggerBaseProps> {
+}
+declare const FileUploadClearTrigger: import("svelte").Component<FileUploadClearTriggerProps, {}, "ref">;
+type FileUploadClearTrigger = ReturnType<typeof FileUploadClearTrigger>;
+export default FileUploadClearTrigger;

package/dist/components/file-upload/file-upload-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseFileUploadContext } from './use-file-upload-context'
+
+  export interface FileUploadContextProps {
+    render?: Snippet<[UseFileUploadContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useFileUploadContext } from './use-file-upload-context'
+
+  const { render }: FileUploadContextProps = $props()
+
+  const context = useFileUploadContext()
+</script>
+
+{@render render?.(context)}

package/dist/components/file-upload/file-upload-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseFileUploadContext } from './use-file-upload-context';
+export interface FileUploadContextProps {
+    render?: Snippet<[UseFileUploadContext]>;
+}
+declare const FileUploadContext: import("svelte").Component<FileUploadContextProps, {}, "">;
+type FileUploadContext = ReturnType<typeof FileUploadContext>;
+export default FileUploadContext;

package/dist/components/file-upload/file-upload-dropzone.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { DropzoneProps } from '@sprawlify/primitives/machines/file-upload'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadDropzoneBaseProps extends PolymorphicProps<'div'>, DropzoneProps, RefAttribute {}
+  export interface FileUploadDropzoneProps extends Assign<HTMLProps<'div'>, FileUploadDropzoneBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadDropzoneProps = $props()
+  const fileUpload = useFileUploadContext()
+
+  const [dropzoneProps, localProps] = $derived(createSplitProps<DropzoneProps>()(props, ['disableClick']))
+
+  const mergedProps = $derived(mergeProps(fileUpload().getDropzoneProps(dropzoneProps), localProps))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-dropzone.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DropzoneProps } from '@sprawlify/primitives/machines/file-upload';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadDropzoneBaseProps extends PolymorphicProps<'div'>, DropzoneProps, RefAttribute {
+}
+export interface FileUploadDropzoneProps extends Assign<HTMLProps<'div'>, FileUploadDropzoneBaseProps> {
+}
+declare const FileUploadDropzone: import("svelte").Component<FileUploadDropzoneProps, {}, "ref">;
+type FileUploadDropzone = ReturnType<typeof FileUploadDropzone>;
+export default FileUploadDropzone;

package/dist/components/file-upload/file-upload-hidden-input.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
+  export interface FileUploadHiddenInputProps extends Assign<HTMLProps<'input'>, FileUploadHiddenInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadHiddenInputProps = $props()
+  const fileUpload = useFileUploadContext()
+  const mergedProps = $derived(mergeProps(fileUpload().getHiddenInputProps(), props))
+</script>
+
+<Sprawlify as="input" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-hidden-input.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {
+}
+export interface FileUploadHiddenInputProps extends Assign<HTMLProps<'input'>, FileUploadHiddenInputBaseProps> {
+}
+declare const FileUploadHiddenInput: import("svelte").Component<FileUploadHiddenInputProps, {}, "ref">;
+type FileUploadHiddenInput = ReturnType<typeof FileUploadHiddenInput>;
+export default FileUploadHiddenInput;

package/dist/components/file-upload/file-upload-item-delete-trigger.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadItemDeleteTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface FileUploadItemDeleteTriggerProps
+    extends Assign<HTMLProps<'button'>, FileUploadItemDeleteTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+  import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadItemDeleteTriggerProps = $props()
+  const fileUpload = useFileUploadContext()
+  const itemProps = useFileUploadItemPropsContext()
+  const mergedProps = $derived(mergeProps(fileUpload().getItemDeleteTriggerProps(itemProps()), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-item-delete-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadItemDeleteTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {
+}
+export interface FileUploadItemDeleteTriggerProps extends Assign<HTMLProps<'button'>, FileUploadItemDeleteTriggerBaseProps> {
+}
+declare const FileUploadItemDeleteTrigger: import("svelte").Component<FileUploadItemDeleteTriggerProps, {}, "ref">;
+type FileUploadItemDeleteTrigger = ReturnType<typeof FileUploadItemDeleteTrigger>;
+export default FileUploadItemDeleteTrigger;

package/dist/components/file-upload/file-upload-item-group.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { ItemGroupProps } from '@sprawlify/primitives/machines/file-upload'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute, ItemGroupProps {}
+  export interface FileUploadItemGroupProps extends Assign<HTMLProps<'div'>, FileUploadItemGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+  import { FileUploadItemGroupPropsProvider } from './use-file-upload-item-group-props-context'
+  import { createSplitProps } from '../../utils/create-split-props'
+
+  let { ref = $bindable(null), ...props }: FileUploadItemGroupProps = $props()
+  const fileUpload = useFileUploadContext()
+
+  const [itemGroupProps, localProps] = $derived(createSplitProps<ItemGroupProps>()(props, ['type']))
+  const mergedProps = $derived(mergeProps(fileUpload().getItemGroupProps(itemGroupProps), localProps))
+
+  FileUploadItemGroupPropsProvider(() => itemGroupProps)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-item-group.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ItemGroupProps } from '@sprawlify/primitives/machines/file-upload';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadItemGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute, ItemGroupProps {
+}
+export interface FileUploadItemGroupProps extends Assign<HTMLProps<'div'>, FileUploadItemGroupBaseProps> {
+}
+declare const FileUploadItemGroup: import("svelte").Component<FileUploadItemGroupProps, {}, "ref">;
+type FileUploadItemGroup = ReturnType<typeof FileUploadItemGroup>;
+export default FileUploadItemGroup;

package/dist/components/file-upload/file-upload-item-name.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadItemNameBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface FileUploadItemNameProps extends Assign<HTMLProps<'div'>, FileUploadItemNameBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+  import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadItemNameProps = $props()
+  const fileUpload = useFileUploadContext()
+  const itemProps = useFileUploadItemPropsContext()
+  const mergedProps = $derived(mergeProps(fileUpload().getItemNameProps(itemProps()), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps}>
+  {#if props.children}
+    {@render props.children?.()}
+  {:else}
+    {itemProps().file.name}
+  {/if}
+</Sprawlify>

package/dist/components/file-upload/file-upload-item-name.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadItemNameBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface FileUploadItemNameProps extends Assign<HTMLProps<'div'>, FileUploadItemNameBaseProps> {
+}
+declare const FileUploadItemName: import("svelte").Component<FileUploadItemNameProps, {}, "ref">;
+type FileUploadItemName = ReturnType<typeof FileUploadItemName>;
+export default FileUploadItemName;

package/dist/components/file-upload/file-upload-item-preview-image.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadItemPreviewImageBaseProps extends PolymorphicProps<'img'>, RefAttribute {}
+  export interface FileUploadItemPreviewImageProps
+    extends Assign<HTMLProps<'img'>, FileUploadItemPreviewImageBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+  import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadItemPreviewImageProps = $props()
+
+  let url = $state('')
+  const fileUpload = useFileUploadContext()
+  const itemProps = useFileUploadItemPropsContext()
+
+  $effect(() => {
+    return fileUpload().createFileUrl(itemProps().file, (nextUrl) => {
+      url = nextUrl
+    })
+  })
+
+  const mergedProps = $derived(mergeProps(fileUpload().getItemPreviewImageProps({ ...itemProps(), url }), props))
+</script>
+
+{#if url}
+  <Sprawlify as="img" bind:ref {...mergedProps} />
+{/if}

package/dist/components/file-upload/file-upload-item-preview-image.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadItemPreviewImageBaseProps extends PolymorphicProps<'img'>, RefAttribute {
+}
+export interface FileUploadItemPreviewImageProps extends Assign<HTMLProps<'img'>, FileUploadItemPreviewImageBaseProps> {
+}
+declare const FileUploadItemPreviewImage: import("svelte").Component<FileUploadItemPreviewImageProps, {}, "ref">;
+type FileUploadItemPreviewImage = ReturnType<typeof FileUploadItemPreviewImage>;
+export default FileUploadItemPreviewImage;

package/dist/components/file-upload/file-upload-item-preview.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadItemPreviewBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+    type?: string
+  }
+  export interface FileUploadItemPreviewProps extends Assign<HTMLProps<'div'>, FileUploadItemPreviewBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+  import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
+
+  let { ref = $bindable(null), type, ...props }: FileUploadItemPreviewProps = $props()
+  const fileUpload = useFileUploadContext()
+  const itemProps = useFileUploadItemPropsContext()
+  const mergedProps = $derived(mergeProps(fileUpload().getItemPreviewProps(itemProps()), props))
+
+  const shouldRender = $derived(itemProps().file.type.match(type ?? '.*'))
+</script>
+
+{#if shouldRender}
+  <Sprawlify as="div" bind:ref {...mergedProps} />
+{/if}

package/dist/components/file-upload/file-upload-item-preview.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadItemPreviewBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+    type?: string;
+}
+export interface FileUploadItemPreviewProps extends Assign<HTMLProps<'div'>, FileUploadItemPreviewBaseProps> {
+}
+declare const FileUploadItemPreview: import("svelte").Component<FileUploadItemPreviewProps, {}, "ref">;
+type FileUploadItemPreview = ReturnType<typeof FileUploadItemPreview>;
+export default FileUploadItemPreview;

package/dist/components/file-upload/file-upload-item-size-text.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadItemSizeTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface FileUploadItemSizeTextProps extends Assign<HTMLProps<'div'>, FileUploadItemSizeTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+  import { useFileUploadItemPropsContext } from './use-file-upload-item-props-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadItemSizeTextProps = $props()
+  const fileUpload = useFileUploadContext()
+  const itemProps = useFileUploadItemPropsContext()
+  const mergedProps = $derived(mergeProps(fileUpload().getItemSizeTextProps(itemProps()), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps}>
+  {#if props.children}
+    {@render props.children?.()}
+  {:else}
+    {fileUpload().getFileSize(itemProps().file)}
+  {/if}
+</Sprawlify>

package/dist/components/file-upload/file-upload-item-size-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface FileUploadItemSizeTextBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface FileUploadItemSizeTextProps extends Assign<HTMLProps<'div'>, FileUploadItemSizeTextBaseProps> {
+}
+declare const FileUploadItemSizeText: import("svelte").Component<FileUploadItemSizeTextProps, {}, "ref">;
+type FileUploadItemSizeText = ReturnType<typeof FileUploadItemSizeText>;
+export default FileUploadItemSizeText;

package/dist/components/file-upload/file-upload-item.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { ItemProps } from '@sprawlify/primitives/machines/file-upload'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  type ItemBaseProps = Omit<ItemProps, 'type'>
+
+  export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps<'li'>, RefAttribute {}
+  export interface FileUploadItemProps extends Assign<HTMLProps<'li'>, FileUploadItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+  import { FileUploadItemPropsProvider } from './use-file-upload-item-props-context'
+  import { useFileUploadItemGroupPropsContext } from './use-file-upload-item-group-props-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadItemProps = $props()
+  const fileUpload = useFileUploadContext()
+
+  const [itemProps, localProps] = $derived(createSplitProps<ItemBaseProps>()(props, ['file']))
+
+  const itemGroupProps = useFileUploadItemGroupPropsContext()
+  const itemPropsWithType = $derived({ ...itemProps, type: itemGroupProps().type })
+
+  const mergedProps = $derived(mergeProps(fileUpload().getItemProps(itemPropsWithType), localProps))
+
+  FileUploadItemPropsProvider(() => itemPropsWithType)
+</script>
+
+<Sprawlify as="li" bind:ref {...mergedProps} />

package/dist/components/file-upload/file-upload-item.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ItemProps } from '@sprawlify/primitives/machines/file-upload';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+type ItemBaseProps = Omit<ItemProps, 'type'>;
+export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps<'li'>, RefAttribute {
+}
+export interface FileUploadItemProps extends Assign<HTMLProps<'li'>, FileUploadItemBaseProps> {
+}
+declare const FileUploadItem: import("svelte").Component<FileUploadItemProps, {}, "ref">;
+type FileUploadItem = ReturnType<typeof FileUploadItem>;
+export default FileUploadItem;

package/dist/components/file-upload/file-upload-label.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface FileUploadLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
+  export interface FileUploadLabelProps extends Assign<HTMLProps<'label'>, FileUploadLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useFileUploadContext } from './use-file-upload-context'
+
+  let { ref = $bindable(null), ...props }: FileUploadLabelProps = $props()
+  const fileUpload = useFileUploadContext()
+  const mergedProps = $derived(mergeProps(fileUpload().getLabelProps(), props))
+</script>
+
+<Sprawlify as="label" bind:ref {...mergedProps} />