ui-ingredients/dist/ColorPicker/createColorPicker.svelte.js

Headless component library for Svelte powered by zag

import * as colorPicker from '@zag-js/color-picker';
import { normalizeProps, useMachine } from '@zag-js/svelte';
import { getEnvironmentContext } from '../EnvironmentProvider/EnvironmentProviderContext.svelte.js';
import { getLocaleContext } from '../LocaleProvider/LocaleProviderContext.svelte.js';
import { parts } from './ColorPicker.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 () => {
        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',
                    },
                ];
            },
        };
    };
}