ui-ingredients/dist/color-picker/create-color-picker.svelte.js

Headless component library for Svelte powered by zag

import * as colorPicker from '@zag-js/color-picker';
import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
import { getEnvironmentContext } from '../environment-provider/environment-provider-context.svelte.js';
import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
import { parts } from './color-picker-anatomy.js';
export function createColorPicker(props) {
    const locale = getLocaleContext();
    const environment = getEnvironmentContext();
    const service = useMachine(colorPicker.machine, () => ({
        dir: locale?.dir,
        getRootNode: environment?.getRootNode,
        ...props,
    }));
    return reflect(() => {
        const api = colorPicker.connect(service, normalizeProps);
        return {
            ...api,
            getViewProps(viewProps) {
                return {
                    id: `colorPicker:${props.id}:view`,
                    hidden: viewProps.format !== api.format,
                    'data-format': api.format,
                    ...parts.view.attrs,
                };
            },
            getFormats() {
                return [
                    {
                        label: 'RGBA',
                        value: 'rgba',
                    },
                    {
                        label: 'HSLA',
                        value: 'hsla',
                    },
                    {
                        label: 'HSBA',
                        value: 'hsba',
                    },
                ];
            },
        };
    });
}