@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
117 lines (111 loc) • 4.77 kB
JavaScript
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import * as angleSlider from '@zag-js/angle-slider';
export { anatomy } from '@zag-js/angle-slider';
import { createUniqueId, createMemo } from 'solid-js';
// src/components/angle-slider/use-angle-slider-context.ts
var [AngleSliderProvider, useAngleSliderContext] = createContext({
hookName: "useAngleSliderContext",
providerName: "<AngleSliderProvider />"
});
// src/components/angle-slider/angle-slider-context.tsx
var AngleSliderContext = (props) => props.children(useAngleSliderContext());
var AngleSliderControl = (props) => {
const api = useAngleSliderContext();
const mergedProps = mergeProps(() => api().getControlProps(), props);
return createComponent(ark.div, mergedProps);
};
var AngleSliderHiddenInput = (props) => {
const api = useAngleSliderContext();
const mergedProps = mergeProps(() => api().getHiddenInputProps(), props);
return createComponent(ark.input, mergedProps);
};
var AngleSliderLabel = (props) => {
const api = useAngleSliderContext();
const mergedProps = mergeProps(() => api().getLabelProps(), props);
return createComponent(ark.label, mergedProps);
};
var AngleSliderMarker = (props) => {
const [markerProps, localProps] = createSplitProps()(props, ["value"]);
const api = useAngleSliderContext();
const mergedProps = mergeProps(() => api().getMarkerProps(markerProps), localProps);
return createComponent(ark.div, mergedProps);
};
var AngleSliderMarkerGroup = (props) => {
const api = useAngleSliderContext();
const mergedProps = mergeProps(() => api().getMarkerGroupProps(), props);
return createComponent(ark.div, mergedProps);
};
var useAngleSlider = (props) => {
const id = createUniqueId();
const locale = useLocaleContext();
const environment = useEnvironmentContext();
const machineProps = createMemo(() => ({
id,
dir: locale().dir,
getRootNode: environment().getRootNode,
...runIfFn(props)
}));
const service = useMachine(angleSlider.machine, machineProps);
return createMemo(() => angleSlider.connect(service, normalizeProps));
};
// src/components/angle-slider/angle-slider-root.tsx
var AngleSliderRoot = (props) => {
const [useAngleSliderProps, localProps] = createSplitProps()(props, ["id", "ids", "name", "invalid", "readOnly", "disabled", "onValueChangeEnd", "onValueChange", "defaultValue", "value", "step"]);
const angleSlider2 = useAngleSlider(useAngleSliderProps);
const mergedProps = mergeProps(() => angleSlider2().getRootProps(), localProps);
return createComponent(AngleSliderProvider, {
value: angleSlider2,
get children() {
return createComponent(ark.div, mergedProps);
}
});
};
var AngleSliderRootProvider = (props) => {
const [rootProps, localProps] = createSplitProps()(props, ["value"]);
const mergedProps = mergeProps(() => rootProps.value().getRootProps(), localProps);
return createComponent(AngleSliderProvider, {
get value() {
return rootProps.value;
},
get children() {
return createComponent(ark.div, mergedProps);
}
});
};
var AngleSliderThumb = (props) => {
const api = useAngleSliderContext();
const mergedProps = mergeProps(() => api().getThumbProps(), props);
return createComponent(ark.div, mergedProps);
};
var AngleSliderValueText = (props) => {
const api = useAngleSliderContext();
const mergedProps = mergeProps(() => api().getValueTextProps(), props);
return createComponent(ark.div, mergeProps$1(mergedProps, {
get children() {
return props.children || api().valueAsDegree;
}
}));
};
// src/components/angle-slider/angle-slider.ts
var angle_slider_exports = {};
__export(angle_slider_exports, {
Context: () => AngleSliderContext,
Control: () => AngleSliderControl,
HiddenInput: () => AngleSliderHiddenInput,
Label: () => AngleSliderLabel,
Marker: () => AngleSliderMarker,
MarkerGroup: () => AngleSliderMarkerGroup,
Root: () => AngleSliderRoot,
RootProvider: () => AngleSliderRootProvider,
Thumb: () => AngleSliderThumb,
ValueText: () => AngleSliderValueText
});
export { AngleSliderContext, AngleSliderControl, AngleSliderHiddenInput, AngleSliderLabel, AngleSliderMarker, AngleSliderMarkerGroup, AngleSliderRoot, AngleSliderRootProvider, AngleSliderThumb, AngleSliderValueText, angle_slider_exports, useAngleSlider, useAngleSliderContext };