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

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

import { splitPresenceProps, usePresence, PresenceProvider, usePresenceContext } from './FW6EZLZL.js';
import { composeRefs } from './ROP6QZQ7.js';
import { datePickerAnatomy } from './6HVSV6OM.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './5QLLQM7E.js';
import { useLocaleContext } from './RVOPDSQY.js';
import { runIfFn } from './DT73WLR4.js';
import { createContext } from './THN5C4U6.js';
import { __export } from './ESLJRKWD.js';
import * as datePicker from '@zag-js/date-picker';
export { parse } from '@zag-js/date-picker';
import { createComponent, mergeProps as mergeProps$1, template, insert, effect } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { Index, createMemo, createUniqueId, Show } from 'solid-js';
import { uniq } from '@zag-js/utils';

// src/components/date-picker/use-date-picker-context.ts
var [DatePickerProvider, useDatePickerContext] = createContext({
  hookName: "useDatePickerContext",
  providerName: "<DatePickerProvider />"
});

// src/components/date-picker/date-picker-clear-trigger.tsx
var DatePickerClearTrigger = (props) => {
  const api = useDatePickerContext();
  const mergedProps = mergeProps(() => api().getClearTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var DatePickerContent = (props) => {
  const api = useDatePickerContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
  return createComponent(Show, {
    get when() {
      return !presenceApi().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(presenceApi().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};

// src/components/date-picker/date-picker-context.tsx
var DatePickerContext = (props) => props.children(useDatePickerContext());
var DatePickerControl = (props) => {
  const api = useDatePickerContext();
  const mergedProps = mergeProps(() => api().getControlProps(), props);
  return createComponent(ark.div, mergedProps);
};
var DatePickerInput = (props) => {
  const [inputProps, localProps] = createSplitProps()(props, ["index", "fixOnBlur"]);
  const datePicker2 = useDatePickerContext();
  const mergedProps = mergeProps(() => datePicker2().getInputProps(inputProps), localProps);
  return createComponent(ark.input, mergedProps);
};
var DatePickerLabel = (props) => {
  const api = useDatePickerContext();
  const mergedProps = mergeProps(() => api().getLabelProps(), props);
  return createComponent(ark.label, mergedProps);
};
var _tmpl$ = /* @__PURE__ */ template(`<option>`);
var DatePickerMonthSelect = (props) => {
  const datePicker2 = useDatePickerContext();
  const mergedProps = mergeProps(() => datePicker2().getMonthSelectProps(), props);
  return createComponent(ark.select, mergeProps$1(mergedProps, {
    get children() {
      return createComponent(Index, {
        get each() {
          return datePicker2().getMonths();
        },
        children: (month) => (() => {
          var _el$ = _tmpl$();
          insert(_el$, () => month().label);
          effect(() => _el$.value = month().value);
          return _el$;
        })()
      });
    }
  }));
};

// src/components/date-picker/use-date-picker-view-props-context.ts
var [DatePickerViewProvider, useDatePickerViewContext] = createContext({
  hookName: "useDatePickerViewContext",
  providerName: "<DatePickerViewProvider />",
  strict: false,
  defaultValue: { view: "day" }
});

// src/components/date-picker/date-picker-next-trigger.tsx
var DatePickerNextTrigger = (props) => {
  const api = useDatePickerContext();
  const viewProps = useDatePickerViewContext();
  const mergedProps = mergeProps(() => api().getNextTriggerProps(viewProps), props);
  return createComponent(ark.button, mergedProps);
};
var DatePickerPositioner = (props) => {
  const api = useDatePickerContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps(() => api().getPositionerProps(), props);
  return createComponent(Show, {
    get when() {
      return !presenceApi().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var DatePickerPresetTrigger = (props) => {
  const [presetTriggerProps, localProps] = createSplitProps()(props, ["value"]);
  const api = useDatePickerContext();
  const mergedProps = mergeProps(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
  return createComponent(ark.button, mergedProps);
};
var DatePickerPrevTrigger = (props) => {
  const api = useDatePickerContext();
  const viewProps = useDatePickerViewContext();
  const mergedProps = mergeProps(() => api().getPrevTriggerProps(viewProps), props);
  return createComponent(ark.button, mergedProps);
};
var DatePickerRangeText = (props) => {
  const api = useDatePickerContext();
  const mergedProps = mergeProps(() => api().getRangeTextProps(), props);
  const visibleRangeText = createMemo(() => {
    const {
      start,
      end
    } = api().visibleRangeText;
    return uniq([start, end]).filter(Boolean).join(" - ");
  });
  return createComponent(ark.div, mergeProps$1(mergedProps, {
    get children() {
      return visibleRangeText();
    }
  }));
};
var useDatePicker = (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(datePicker.machine, machineProps);
  return createMemo(() => datePicker.connect(service, normalizeProps));
};

// src/components/date-picker/date-picker-root.tsx
var DatePickerRoot = (props) => {
  const [presenceProps, datePickerProps] = splitPresenceProps(props);
  const [useDatePickerProps, localProps] = createSplitProps()(datePickerProps, ["closeOnSelect", "defaultFocusedValue", "defaultOpen", "defaultValue", "defaultView", "disabled", "fixedWeeks", "focusedValue", "format", "id", "ids", "inline", "invalid", "isDateUnavailable", "locale", "max", "maxView", "min", "minView", "name", "numOfMonths", "onFocusChange", "onOpenChange", "onValueChange", "onViewChange", "open", "outsideDaySelectable", "parse", "placeholder", "positioning", "readOnly", "required", "selectionMode", "startOfWeek", "timeZone", "translations", "value", "view"]);
  const api = useDatePicker(useDatePickerProps);
  const apiPresence = usePresence(mergeProps(presenceProps, () => ({
    present: api().open
  })));
  const mergedProps = mergeProps(() => api().getRootProps(), localProps);
  return createComponent(DatePickerProvider, {
    value: api,
    get children() {
      return createComponent(PresenceProvider, {
        value: apiPresence,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};
var DatePickerRootProvider = (props) => {
  const [presenceProps, datePickerProps] = splitPresenceProps(props);
  const [{
    value: datePicker2
  }, localProps] = createSplitProps()(datePickerProps, ["value"]);
  const presence = usePresence(mergeProps(presenceProps, () => ({
    present: datePicker2().open
  })));
  const mergedProps = mergeProps(() => datePicker2().getRootProps(), localProps);
  return createComponent(DatePickerProvider, {
    value: datePicker2,
    get children() {
      return createComponent(PresenceProvider, {
        value: presence,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};

// src/components/date-picker/use-date-picker-table-props-context.ts
var [DatePickerTableProvider, useDatePickerTableContext] = createContext({
  hookName: "useDatePickerTableContext",
  providerName: "<DatePickerTableProvider />"
});

// src/components/date-picker/date-picker-table.tsx
var DatePickerTable = (props) => {
  const [columnProps, localProps] = createSplitProps()(props, ["columns"]);
  const api = useDatePickerContext();
  const viewProps = useDatePickerViewContext();
  const id = createUniqueId();
  const tableProps = mergeProps(() => ({
    columns: columnProps.columns,
    id
  }), viewProps);
  const mergedProps = mergeProps(() => api().getTableProps(tableProps), localProps);
  return createComponent(DatePickerTableProvider, {
    value: tableProps,
    get children() {
      return createComponent(ark.table, mergedProps);
    }
  });
};
var DatePickerTableBody = (props) => {
  const api = useDatePickerContext();
  const tableProps = useDatePickerTableContext();
  const mergedProps = mergeProps(() => api().getTableBodyProps(tableProps), props);
  return createComponent(ark.tbody, mergedProps);
};

// src/components/date-picker/use-date-picker-table-cell-props-context.ts
var [DatePickerTableCellProvider, useDatePickerTableCellContext] = createContext({
  hookName: "useDatePickerTableCellContext",
  providerName: "<DatePickerTableCellProvider />"
});

// src/components/date-picker/date-picker-table-cell.tsx
var DatePickerTableCell = (props) => {
  const [cellProps, localProps] = createSplitProps()(props, ["disabled", "value", "visibleRange", "columns"]);
  const api = useDatePickerContext();
  const viewProps = useDatePickerViewContext();
  const tableCellProps = createMemo(() => {
    const viewMap = {
      day: api().getDayTableCellProps,
      month: api().getMonthTableCellProps,
      year: api().getYearTableCellProps
    };
    const viewFn = viewMap[viewProps.view];
    return viewFn(cellProps);
  });
  const mergedProps = mergeProps(tableCellProps, localProps);
  return createComponent(DatePickerTableCellProvider, {
    value: cellProps,
    get children() {
      return createComponent(ark.td, mergedProps);
    }
  });
};
var DatePickerTableCellTrigger = (props) => {
  const api = useDatePickerContext();
  const cellProps = useDatePickerTableCellContext();
  const viewProps = useDatePickerViewContext();
  const triggerProps = createMemo(() => {
    const viewMap = {
      day: api().getDayTableCellTriggerProps,
      month: api().getMonthTableCellTriggerProps,
      year: api().getYearTableCellTriggerProps
    };
    const viewFn = viewMap[viewProps.view];
    return viewFn(cellProps);
  });
  const mergedProps = mergeProps(triggerProps, props);
  return createComponent(ark.div, mergedProps);
};
var DatePickerTableHead = (props) => {
  const api = useDatePickerContext();
  const tableProps = useDatePickerTableContext();
  const mergedProps = mergeProps(() => api().getTableHeadProps(tableProps), props);
  return createComponent(ark.thead, mergedProps);
};
var DatePickerTableHeader = (props) => {
  const api = useDatePickerContext();
  const tableProps = useDatePickerTableContext();
  const mergedProps = mergeProps(() => api().getTableHeaderProps(tableProps), props);
  return createComponent(ark.th, mergedProps);
};
var DatePickerTableRow = (props) => {
  const api = useDatePickerContext();
  const tableProps = useDatePickerTableContext();
  const mergedProps = mergeProps(() => api().getTableRowProps(tableProps), props);
  return createComponent(ark.tr, mergedProps);
};
var DatePickerTrigger = (props) => {
  const api = useDatePickerContext();
  const mergedProps = mergeProps(() => api().getTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var DatePickerView = (props) => {
  const [viewProps, localProps] = createSplitProps()(props, ["view"]);
  const api = useDatePickerContext();
  const mergedProps = mergeProps(() => datePickerAnatomy.build().view.attrs, localProps);
  return createComponent(DatePickerViewProvider, {
    value: viewProps,
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        get hidden() {
          return api().view !== viewProps.view;
        }
      }));
    }
  });
};
var DatePickerViewControl = (props) => {
  const api = useDatePickerContext();
  const viewProps = useDatePickerViewContext();
  const mergedProps = mergeProps(() => api().getViewControlProps(viewProps), props);
  return createComponent(ark.div, mergedProps);
};
var DatePickerViewTrigger = (props) => {
  const api = useDatePickerContext();
  const viewProps = useDatePickerViewContext();
  const mergedProps = mergeProps(() => api().getViewTriggerProps(viewProps), props);
  return createComponent(ark.button, mergedProps);
};
var _tmpl$2 = /* @__PURE__ */ template(`<option>`);
var DatePickerYearSelect = (props) => {
  const datePicker2 = useDatePickerContext();
  const mergedProps = mergeProps(() => datePicker2().getYearSelectProps(), props);
  return createComponent(ark.select, mergeProps$1(mergedProps, {
    get children() {
      return createComponent(Index, {
        get each() {
          return datePicker2().getYears();
        },
        children: (year) => (() => {
          var _el$ = _tmpl$2();
          insert(_el$, () => year().label);
          effect(() => _el$.value = year().value);
          return _el$;
        })()
      });
    }
  }));
};

// src/components/date-picker/date-picker.ts
var date_picker_exports = {};
__export(date_picker_exports, {
  ClearTrigger: () => DatePickerClearTrigger,
  Content: () => DatePickerContent,
  Context: () => DatePickerContext,
  Control: () => DatePickerControl,
  Input: () => DatePickerInput,
  Label: () => DatePickerLabel,
  MonthSelect: () => DatePickerMonthSelect,
  NextTrigger: () => DatePickerNextTrigger,
  Positioner: () => DatePickerPositioner,
  PresetTrigger: () => DatePickerPresetTrigger,
  PrevTrigger: () => DatePickerPrevTrigger,
  RangeText: () => DatePickerRangeText,
  Root: () => DatePickerRoot,
  RootProvider: () => DatePickerRootProvider,
  Table: () => DatePickerTable,
  TableBody: () => DatePickerTableBody,
  TableCell: () => DatePickerTableCell,
  TableCellTrigger: () => DatePickerTableCellTrigger,
  TableHead: () => DatePickerTableHead,
  TableHeader: () => DatePickerTableHeader,
  TableRow: () => DatePickerTableRow,
  Trigger: () => DatePickerTrigger,
  View: () => DatePickerView,
  ViewControl: () => DatePickerViewControl,
  ViewTrigger: () => DatePickerViewTrigger,
  YearSelect: () => DatePickerYearSelect
});

export { DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerRootProvider, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, date_picker_exports, useDatePicker, useDatePickerContext };