@sprawlify/svelte 0.0.43 → 0.0.44

package/dist/components/color-picker/color-picker-channel-slider-label.svelte.d.ts

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

package/dist/components/color-picker/color-picker-channel-slider-thumb.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerChannelSliderThumbBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerChannelSliderThumbProps
+    extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderThumbBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderThumbProps = $props()
+
+  const colorPicker = useColorPickerContext()
+
+  const channelProps = useColorPickerChannelPropsContext()
+  const formatProps = useColorPickerFormatPropsContext()
+  const channelSliderProps = $derived({ ...channelProps(), ...formatProps() })
+
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderThumbProps(channelSliderProps), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider-thumb.svelte.d.ts

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

package/dist/components/color-picker/color-picker-channel-slider-track.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerChannelSliderTrackBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerChannelSliderTrackProps
+    extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderTrackBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderTrackProps = $props()
+
+  const colorPicker = useColorPickerContext()
+
+  const channelProps = useColorPickerChannelPropsContext()
+  const formatProps = useColorPickerFormatPropsContext()
+  const channelSliderProps = $derived({ ...channelProps(), ...formatProps() })
+
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderTrackProps(channelSliderProps), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider-track.svelte.d.ts

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

package/dist/components/color-picker/color-picker-channel-slider-value-text.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps<'span'>, RefAttribute {}
+  export interface ColorPickerChannelSliderValueTextProps
+    extends Assign<HTMLProps<'span'>, ColorPickerChannelSliderValueTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useLocaleContext } from '../../providers'
+
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderValueTextProps = $props()
+
+  const locale = useLocaleContext()
+
+  const colorPicker = useColorPickerContext()
+  const channelProps = useColorPickerChannelPropsContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderValueTextProps(channelProps()), props))
+</script>
+
+<Sprawlify as="span" bind:ref {...mergedProps}>
+  {#if props.children}
+    {@render props.children()}
+  {:else}
+    {colorPicker().getChannelValueText(channelProps().channel, locale().locale)}
+  {/if}
+</Sprawlify>

package/dist/components/color-picker/color-picker-channel-slider-value-text.svelte.d.ts

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

package/dist/components/color-picker/color-picker-channel-slider.svelte

@@ -0,0 +1,31 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { ChannelProps } from '@sprawlify/primitives/machines/color-picker'
+
+  export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerChannelSliderProps extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { ColorPickerChannelPropsProvider } from './use-color-picker-channel-props-context'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerFormatPropsContext } from './use-color-picker-format-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerChannelSliderProps = $props()
+
+  const [channelProps, localProps] = $derived(createSplitProps<ChannelProps>()(props, ['channel', 'orientation']))
+
+  const colorPicker = useColorPickerContext()
+
+  const formatProps = useColorPickerFormatPropsContext()
+  const channelSliderProps = $derived({ ...channelProps, ...formatProps() })
+
+  const mergedProps = $derived(mergeProps(colorPicker().getChannelSliderProps(channelSliderProps), localProps))
+
+  ColorPickerChannelPropsProvider(() => channelProps)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-channel-slider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { ChannelProps } from '@sprawlify/primitives/machines/color-picker';
+export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface ColorPickerChannelSliderProps extends Assign<HTMLProps<'div'>, ColorPickerChannelSliderBaseProps> {
+}
+declare const ColorPickerChannelSlider: import("svelte").Component<ColorPickerChannelSliderProps, {}, "ref">;
+type ColorPickerChannelSlider = ReturnType<typeof ColorPickerChannelSlider>;
+export default ColorPickerChannelSlider;

package/dist/components/color-picker/color-picker-content.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerContentBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerContentProps extends Assign<HTMLProps<'div'>, ColorPickerContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { usePresenceContext } from '../presence'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerContentProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const presence = usePresenceContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getContentProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Sprawlify as="div" bind:ref {...mergedProps} {@attach setNode} />
+{/if}

package/dist/components/color-picker/color-picker-content.svelte.d.ts

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

package/dist/components/color-picker/color-picker-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseColorPickerContext } from './use-color-picker-context'
+
+  export interface ColorPickerContextProps {
+    render: Snippet<[UseColorPickerContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const { render }: ColorPickerContextProps = $props()
+
+  const context = useColorPickerContext()
+</script>
+
+{@render render(context)}

package/dist/components/color-picker/color-picker-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseColorPickerContext } from './use-color-picker-context';
+export interface ColorPickerContextProps {
+    render: Snippet<[UseColorPickerContext]>;
+}
+declare const ColorPickerContext: import("svelte").Component<ColorPickerContextProps, {}, "">;
+type ColorPickerContext = ReturnType<typeof ColorPickerContext>;
+export default ColorPickerContext;

package/dist/components/color-picker/color-picker-control.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerControlBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerControlProps extends Assign<HTMLProps<'div'>, ColorPickerControlBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerControlProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getControlProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-control.svelte.d.ts

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

package/dist/components/color-picker/color-picker-eye-dropper-trigger.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerEyeDropperTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface ColorPickerEyeDropperTriggerProps
+    extends Assign<HTMLProps<'button'>, ColorPickerEyeDropperTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerEyeDropperTriggerProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getEyeDropperTriggerProps(), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-eye-dropper-trigger.svelte.d.ts

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

package/dist/components/color-picker/color-picker-format-select.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerFormatSelectBaseProps extends PolymorphicProps<'select'>, RefAttribute {}
+  export interface ColorPickerFormatSelectProps extends Assign<HTMLProps<'select'>, ColorPickerFormatSelectBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerFormatSelectProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getFormatSelectProps(), props))
+</script>
+
+<Sprawlify as="select" bind:ref {...mergedProps} value={colorPicker().format}>
+  {#each ['rgba', 'hsla', 'hsba'] as format}
+    <option value={format}>{format}</option>
+  {/each}
+</Sprawlify>

package/dist/components/color-picker/color-picker-format-select.svelte.d.ts

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

package/dist/components/color-picker/color-picker-format-trigger.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerFormatTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
+  export interface ColorPickerFormatTriggerProps
+    extends Assign<HTMLProps<'button'>, ColorPickerFormatTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerFormatTriggerProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getFormatTriggerProps(), props))
+</script>
+
+<Sprawlify as="button" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-format-trigger.svelte.d.ts

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

package/dist/components/color-picker/color-picker-hidden-input.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerHiddenInputBaseProps extends PolymorphicProps<'input'>, RefAttribute {}
+  export interface ColorPickerHiddenInputProps extends Assign<HTMLProps<'input'>, ColorPickerHiddenInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useFieldContext } from '../field'
+
+  let { ref = $bindable(null), ...props }: ColorPickerHiddenInputProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getHiddenInputProps(), props))
+  const field = useFieldContext()
+</script>
+
+<Sprawlify as="input" bind:ref aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />

package/dist/components/color-picker/color-picker-hidden-input.svelte.d.ts

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

package/dist/components/color-picker/color-picker-label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerLabelBaseProps extends PolymorphicProps<'label'>, RefAttribute {}
+  export interface ColorPickerLabelProps extends Assign<HTMLProps<'label'>, ColorPickerLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerLabelProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getLabelProps(), props))
+</script>
+
+<Sprawlify as="label" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-label.svelte.d.ts

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

package/dist/components/color-picker/color-picker-positioner.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerPositionerBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerPositionerProps extends Assign<HTMLProps<'div'>, ColorPickerPositionerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { usePresenceContext } from '../presence'
+
+  let { ref = $bindable(null), ...props }: ColorPickerPositionerProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getPositionerProps(), props))
+
+  const presence = usePresenceContext()
+</script>
+
+{#if !presence().unmounted}
+  <Sprawlify as="div" bind:ref {...mergedProps} />
+{/if}

package/dist/components/color-picker/color-picker-positioner.svelte.d.ts

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

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

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UseColorPickerReturn } from './use-color-picker.svelte'
+
+  export interface ColorPickerRootProviderBaseProps extends PolymorphicProps<'div'>, UsePresenceProps, RefAttribute {
+    value: UseColorPickerReturn
+  }
+  export interface ColorPickerRootProviderProps extends Assign<HTMLProps<'div'>, ColorPickerRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { PresenceProvider, splitPresenceProps, usePresence, type UsePresenceProps } from '../presence'
+  import { ColorPickerProvider } from './use-color-picker-context'
+
+  let { ref = $bindable(null), value, ...props }: ColorPickerRootProviderProps = $props()
+
+  const [presenceProps, localProps] = $derived(splitPresenceProps(props))
+
+  const presence = usePresence(() => ({ present: value().open, ...presenceProps }))
+  const mergedProps = $derived(mergeProps(value().getRootProps(), localProps))
+
+  ColorPickerProvider(value)
+  PresenceProvider(presence)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

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

@@ -0,0 +1,11 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UseColorPickerReturn } from './use-color-picker.svelte';
+export interface ColorPickerRootProviderBaseProps extends PolymorphicProps<'div'>, UsePresenceProps, RefAttribute {
+    value: UseColorPickerReturn;
+}
+export interface ColorPickerRootProviderProps extends Assign<HTMLProps<'div'>, ColorPickerRootProviderBaseProps> {
+}
+import { type UsePresenceProps } from '../presence';
+declare const ColorPickerRootProvider: import("svelte").Component<ColorPickerRootProviderProps, {}, "ref">;
+type ColorPickerRootProvider = ReturnType<typeof ColorPickerRootProvider>;
+export default ColorPickerRootProvider;

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

@@ -0,0 +1,58 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseColorPickerProps } from './use-color-picker.svelte'
+
+  export interface ColorPickerRootBaseProps
+    extends UseColorPickerProps,
+      UsePresenceProps,
+      PolymorphicProps<'div'>,
+      RefAttribute {}
+  export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import type { Color } from '@sprawlify/primitives/color-utils'
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
+  import { splitColorPickerProps } from './split-color-picker-props.svelte'
+  import { ColorPickerProvider } from './use-color-picker-context'
+  import { useColorPicker } from './use-color-picker.svelte'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable<Color>(),
+    open = $bindable<boolean>(),
+    ...props
+  }: ColorPickerRootProps = $props()
+  const providedId = $props.id()
+
+  const [presenceProps, colorPickerProps] = $derived(splitPresenceProps(props))
+  const [useColorPickerProps, localProps] = $derived(splitColorPickerProps(colorPickerProps))
+
+  const machineProps = $derived<UseColorPickerProps>({
+    ...useColorPickerProps,
+    id: useColorPickerProps.id ?? providedId,
+    value,
+    open,
+    onValueChange(details) {
+      useColorPickerProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+    onOpenChange(details) {
+      useColorPickerProps.onOpenChange?.(details)
+      if (open !== undefined) open = details.open
+    },
+  })
+
+  const colorPicker = useColorPicker(() => machineProps)
+  const presence = usePresence(() => ({ ...presenceProps, present: presenceProps.present ?? colorPicker().open }))
+
+  const mergedProps = $derived(mergeProps(colorPicker().getRootProps(), localProps))
+
+  ColorPickerProvider(colorPicker)
+  PresenceProvider(presence)
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-root.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UsePresenceProps } from '../presence';
+import type { UseColorPickerProps } from './use-color-picker.svelte';
+export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {
+}
+declare const ColorPickerRoot: import("svelte").Component<ColorPickerRootProps, {}, "value" | "open" | "ref">;
+type ColorPickerRoot = ReturnType<typeof ColorPickerRoot>;
+export default ColorPickerRoot;

package/dist/components/color-picker/color-picker-swatch-group.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerSwatchGroupBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerSwatchGroupProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerSwatchGroupProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getSwatchGroupProps(), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />

package/dist/components/color-picker/color-picker-swatch-group.svelte.d.ts

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

package/dist/components/color-picker/color-picker-swatch-indicator.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface ColorPickerSwatchIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface ColorPickerSwatchIndicatorProps
+    extends Assign<HTMLProps<'div'>, ColorPickerSwatchIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '../../core'
+  import { Sprawlify } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerSwatchPropsContext } from './use-color-picker-swatch-props-context'
+
+  let { ref = $bindable(null), ...props }: ColorPickerSwatchIndicatorProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const swatchProps = useColorPickerSwatchPropsContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getSwatchIndicatorProps(swatchProps()), props))
+</script>
+
+<Sprawlify as="div" bind:ref {...mergedProps} />