@ark-ui/solid/dist/chunk/ZTLLHKHH.js

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

import { createSplitProps } from './ZMHI4GDJ.js';
import { useEnvironmentContext } from './3P5T77QU.js';
import { useLocaleContext } from './EM5SH6A3.js';
import { runIfFn } from './DT73WLR4.js';
import { ark } from './EPLBB4QN.js';
import { createContext } from './THN5C4U6.js';
import { __export } from './ESLJRKWD.js';
import * as dateInput from '@zag-js/date-input';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { Index, createMemo, createUniqueId } from 'solid-js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';

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());
var DateInputLabel = (props) => {
  const api = useDateInputContext();
  const mergedProps = mergeProps(() => api().getLabelProps(), props);
  return createComponent(ark.label, mergedProps);
};
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 = mergeProps(() => api().getRootProps(), localProps);
  return createComponent(DateInputProvider, {
    value: api,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var DateInputRootProvider = (props) => {
  const [{
    value: dateInput2
  }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps(() => dateInput2().getRootProps(), localProps);
  return createComponent(DateInputProvider, {
    value: dateInput2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};

// 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 = createMemo(() => {
    const segments = api().getSegments(segmentGroupProps);
    return segments.find((s) => s.type === segmentProps.segment.type) ?? segmentProps.segment;
  });
  const mergedProps = mergeProps(() => api().getSegmentProps({
    segment: currentSegment(),
    index: segmentGroupProps.index
  }), localProps);
  return createComponent(ark.span, mergeProps$1(mergedProps, {
    get children() {
      return currentSegment().text;
    }
  }));
};
var splitSegmentGroupProps = createSplitProps();
var DateInputSegmentGroup = (props) => {
  const api = useDateInputContext();
  const [segmentGroupProps, localProps] = splitSegmentGroupProps(props, ["index"]);
  const mergedProps = mergeProps(() => api().getSegmentGroupProps(segmentGroupProps), localProps);
  return createComponent(DateInputSegmentGroupPropsProvider, {
    value: segmentGroupProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var splitHiddenInputProps = createSplitProps();
var DateInputHiddenInput = (props) => {
  const [hiddenInputProps, localProps] = splitHiddenInputProps(props, ["index", "name"]);
  const api = useDateInputContext();
  const mergedProps = mergeProps(() => api().getHiddenInputProps(hiddenInputProps), localProps);
  return createComponent(ark.input, mergedProps);
};
var DateInputControl = (props) => {
  const api = useDateInputContext();
  const mergedProps = mergeProps(() => api().getControlProps(), props);
  return createComponent(ark.div, mergedProps);
};
var DateInputSegmentContext = (props) => {
  const api = useDateInputContext();
  const segmentGroupProps = useDateInputSegmentGroupPropsContext();
  return createComponent(Index, {
    get each() {
      return api().getSegments(segmentGroupProps);
    },
    children: (segment) => props.children(segment())
  });
};

// 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 { DateInputContext, DateInputControl, DateInputHiddenInput, DateInputLabel, DateInputRoot, DateInputRootProvider, DateInputSegment, DateInputSegmentContext, DateInputSegmentGroup, date_input_exports, useDateInput, useDateInputContext };