UNPKG

@ark-ui/solid

Version:

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

205 lines (189 loc) 6.68 kB
import { createSplitProps } from "./6WEDGJKQ.jsx"; import { useEnvironmentContext } from "./HDGILMRT.jsx"; import { useLocaleContext } from "./HOPBYFHD.jsx"; import { runIfFn } from "./KGOB2IMX.jsx"; import { ark } from "./UFYZ7HLU.jsx"; import { createContext } from "./UZJJWJQM.jsx"; import { __export } from "./7IUG3E2V.jsx"; // src/components/date-input/use-date-input.ts import * as dateInput from "@zag-js/date-input"; import { normalizeProps, useMachine } from "@zag-js/solid"; import { createMemo, createUniqueId } from "solid-js"; var useDateInput = (props) => { const id = createUniqueId(); const locale = useLocaleContext(); const environment = useEnvironmentContext(); const machineProps = createMemo(() => ({ id, dir: locale().dir, locale: locale().locale, getRootNode: environment().getRootNode, ...runIfFn(props) })); const service = useMachine(dateInput.machine, machineProps); return createMemo(() => dateInput.connect(service, normalizeProps)); }; // src/components/date-input/use-date-input-context.ts var [DateInputProvider, useDateInputContext] = createContext({ hookName: "useDateInputContext", providerName: "<DateInputProvider />" }); // src/components/date-input/date-input-context.tsx var DateInputContext = (props) => props.children(useDateInputContext()); // src/components/date-input/date-input-label.tsx import { mergeProps } from "@zag-js/solid"; var DateInputLabel = (props) => { const api = useDateInputContext(); const mergedProps = mergeProps(() => api().getLabelProps(), props); return <ark.label {...mergedProps} />; }; // src/components/date-input/date-input-root.tsx import { mergeProps as mergeProps2 } from "@zag-js/solid"; var DateInputRoot = (props) => { const [useDateInputProps, localProps] = createSplitProps()(props, [ "disabled", "id", "ids", "invalid", "locale", "max", "min", "name", "form", "onFocusChange", "onPlaceholderChange", "onValueChange", "readOnly", "required", "selectionMode", "timeZone", "hideTimeZone", "translations", "value", "defaultValue", "hourCycle", "granularity", "shouldForceLeadingZeros", "allSegments", "formatter", "placeholderValue", "defaultPlaceholderValue", "format", "createCalendar", "isDateUnavailable" ]); const api = useDateInput(useDateInputProps); const mergedProps = mergeProps2(() => api().getRootProps(), localProps); return <DateInputProvider value={api}> <ark.div {...mergedProps} /> </DateInputProvider>; }; // src/components/date-input/date-input-root-provider.tsx import { mergeProps as mergeProps3 } from "@zag-js/solid"; var DateInputRootProvider = (props) => { const [{ value: dateInput2 }, localProps] = createSplitProps()(props, ["value"]); const mergedProps = mergeProps3(() => dateInput2().getRootProps(), localProps); return <DateInputProvider value={dateInput2}> <ark.div {...mergedProps} /> </DateInputProvider>; }; // src/components/date-input/date-input-segment.tsx import { mergeProps as mergeProps4 } from "@zag-js/solid"; import { createMemo as createMemo2 } from "solid-js"; // src/components/date-input/use-date-input-segment-group-props-context.ts var [DateInputSegmentGroupPropsProvider, useDateInputSegmentGroupPropsContext] = createContext({ hookName: "useDateInputSegmentGroupPropsContext", providerName: "<DateInput.SegmentGroup />", strict: true }); // src/components/date-input/date-input-segment.tsx var splitSegmentProps = createSplitProps(); var DateInputSegment = (props) => { const [segmentProps, localProps] = splitSegmentProps(props, ["segment"]); const segmentGroupProps = useDateInputSegmentGroupPropsContext(); const api = useDateInputContext(); const currentSegment = createMemo2(() => { const segments = api().getSegments(segmentGroupProps); return segments.find((s) => s.type === segmentProps.segment.type) ?? segmentProps.segment; }); const mergedProps = mergeProps4( () => api().getSegmentProps({ segment: currentSegment(), index: segmentGroupProps.index }), localProps ); return <ark.span {...mergedProps}>{currentSegment().text}</ark.span>; }; // src/components/date-input/date-input-segment-group.tsx import { mergeProps as mergeProps5 } from "@zag-js/solid"; var splitSegmentGroupProps = createSplitProps(); var DateInputSegmentGroup = (props) => { const api = useDateInputContext(); const [segmentGroupProps, localProps] = splitSegmentGroupProps(props, ["index"]); const mergedProps = mergeProps5(() => api().getSegmentGroupProps(segmentGroupProps), localProps); return <DateInputSegmentGroupPropsProvider value={segmentGroupProps}> <ark.div {...mergedProps} /> </DateInputSegmentGroupPropsProvider>; }; // src/components/date-input/date-input-hidden-input.tsx import { mergeProps as mergeProps6 } from "@zag-js/solid"; var splitHiddenInputProps = createSplitProps(); var DateInputHiddenInput = (props) => { const [hiddenInputProps, localProps] = splitHiddenInputProps(props, ["index", "name"]); const api = useDateInputContext(); const mergedProps = mergeProps6(() => api().getHiddenInputProps(hiddenInputProps), localProps); return <ark.input {...mergedProps} />; }; // src/components/date-input/date-input-control.tsx import { mergeProps as mergeProps7 } from "@zag-js/solid"; var DateInputControl = (props) => { const api = useDateInputContext(); const mergedProps = mergeProps7(() => api().getControlProps(), props); return <ark.div {...mergedProps} />; }; // src/components/date-input/date-input-segment-context.tsx import { Index } from "solid-js"; var DateInputSegmentContext = (props) => { const api = useDateInputContext(); const segmentGroupProps = useDateInputSegmentGroupPropsContext(); return <Index each={api().getSegments(segmentGroupProps)}>{(segment) => props.children(segment())}</Index>; }; // src/components/date-input/date-input.ts var date_input_exports = {}; __export(date_input_exports, { Context: () => DateInputContext, Control: () => DateInputControl, HiddenInput: () => DateInputHiddenInput, Label: () => DateInputLabel, Root: () => DateInputRoot, RootProvider: () => DateInputRootProvider, Segment: () => DateInputSegment, SegmentContext: () => DateInputSegmentContext, SegmentGroup: () => DateInputSegmentGroup }); export { useDateInput, useDateInputContext, DateInputContext, DateInputLabel, DateInputRoot, DateInputRootProvider, DateInputSegment, DateInputSegmentGroup, DateInputHiddenInput, DateInputControl, DateInputSegmentContext, date_input_exports };