@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
486 lines (446 loc) • 17.2 kB
JSX
import {
datePickerAnatomy
} from "./6UXNGS66.jsx";
import {
PresenceProvider,
splitPresenceProps,
usePresence,
usePresenceContext
} from "./2P5Y3YCK.jsx";
import {
composeRefs
} from "./PT2CJE3O.jsx";
import {
createSplitProps
} from "./6WEDGJKQ.jsx";
import {
ark
} from "./UFYZ7HLU.jsx";
import {
useEnvironmentContext
} from "./CGW54HAQ.jsx";
import {
useLocaleContext
} from "./JFOWNFC7.jsx";
import {
runIfFn
} from "./KGOB2IMX.jsx";
import {
createContext
} from "./UZJJWJQM.jsx";
import {
__export
} from "./7IUG3E2V.jsx";
// src/components/date-picker/index.tsx
import { parse } from "@zag-js/date-picker";
// src/components/date-picker/date-picker-clear-trigger.tsx
import { mergeProps } from "@zag-js/solid";
// 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 <ark.button {...mergedProps} />;
};
// src/components/date-picker/date-picker-content.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
import { Show } from "solid-js";
var DatePickerContent = (props) => {
const api = useDatePickerContext();
const presenceApi = usePresenceContext();
const mergedProps = mergeProps2(
() => api().getContentProps(),
() => presenceApi().presenceProps,
props
);
return <Show when={!presenceApi().unmounted}>
<ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} />
</Show>;
};
// src/components/date-picker/date-picker-context.tsx
var DatePickerContext = (props) => props.children(useDatePickerContext());
// src/components/date-picker/date-picker-control.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var DatePickerControl = (props) => {
const api = useDatePickerContext();
const mergedProps = mergeProps3(() => api().getControlProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/date-picker/date-picker-input.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var DatePickerInput = (props) => {
const [inputProps, localProps] = createSplitProps()(props, ["index", "fixOnBlur"]);
const datePicker2 = useDatePickerContext();
const mergedProps = mergeProps4(() => datePicker2().getInputProps(inputProps), localProps);
return <ark.input {...mergedProps} />;
};
// src/components/date-picker/date-picker-label.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var DatePickerLabel = (props) => {
const api = useDatePickerContext();
const mergedProps = mergeProps5(() => api().getLabelProps(), props);
return <ark.label {...mergedProps} />;
};
// src/components/date-picker/date-picker-month-select.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
import { Index } from "solid-js";
var DatePickerMonthSelect = (props) => {
const datePicker2 = useDatePickerContext();
const mergedProps = mergeProps6(() => datePicker2().getMonthSelectProps(), props);
return <ark.select {...mergedProps}>
<Index each={datePicker2().getMonths()}>{(month) => <option value={month().value}>{month().label}</option>}</Index>
</ark.select>;
};
// src/components/date-picker/date-picker-next-trigger.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
// 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 = mergeProps7(() => api().getNextTriggerProps(viewProps), props);
return <ark.button {...mergedProps} />;
};
// src/components/date-picker/date-picker-positioner.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";
import { Show as Show2 } from "solid-js";
var DatePickerPositioner = (props) => {
const api = useDatePickerContext();
const presenceApi = usePresenceContext();
const mergedProps = mergeProps8(() => api().getPositionerProps(), props);
return <Show2 when={!presenceApi().unmounted}>
<ark.div {...mergedProps} />
</Show2>;
};
// src/components/date-picker/date-picker-preset-trigger.tsx
import { mergeProps as mergeProps9 } from "@zag-js/solid";
var DatePickerPresetTrigger = (props) => {
const [presetTriggerProps, localProps] = createSplitProps()(props, ["value"]);
const api = useDatePickerContext();
const mergedProps = mergeProps9(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
return <ark.button {...mergedProps} />;
};
// src/components/date-picker/date-picker-prev-trigger.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
var DatePickerPrevTrigger = (props) => {
const api = useDatePickerContext();
const viewProps = useDatePickerViewContext();
const mergedProps = mergeProps10(() => api().getPrevTriggerProps(viewProps), props);
return <ark.button {...mergedProps} />;
};
// src/components/date-picker/date-picker-range-text.tsx
import { mergeProps as mergeProps11 } from "@zag-js/solid";
import { uniq } from "@zag-js/utils";
import { createMemo } from "solid-js";
var DatePickerRangeText = (props) => {
const api = useDatePickerContext();
const mergedProps = mergeProps11(() => api().getRangeTextProps(), props);
const visibleRangeText = createMemo(() => {
const { start, end } = api().visibleRangeText;
return uniq([start, end]).filter(Boolean).join(" - ");
});
return <ark.div {...mergedProps}>{visibleRangeText()}</ark.div>;
};
// src/components/date-picker/date-picker-root.tsx
import { mergeProps as mergeProps12 } from "@zag-js/solid";
// src/components/date-picker/use-date-picker.ts
import * as datePicker from "@zag-js/date-picker";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo as createMemo2, createUniqueId } from "solid-js";
var useDatePicker = (props) => {
const id = createUniqueId();
const locale = useLocaleContext();
const environment = useEnvironmentContext();
const machineProps = createMemo2(() => ({
id,
dir: locale().dir,
locale: locale().locale,
getRootNode: environment().getRootNode,
...runIfFn(props)
}));
const service = useMachine(datePicker.machine, machineProps);
return createMemo2(() => 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(mergeProps12(presenceProps, () => ({ present: api().open })));
const mergedProps = mergeProps12(() => api().getRootProps(), localProps);
return <DatePickerProvider value={api}>
<PresenceProvider value={apiPresence}>
<ark.div {...mergedProps} />
</PresenceProvider>
</DatePickerProvider>;
};
// src/components/date-picker/date-picker-root-provider.tsx
import { mergeProps as mergeProps13 } from "@zag-js/solid";
var DatePickerRootProvider = (props) => {
const [presenceProps, datePickerProps] = splitPresenceProps(props);
const [{ value: datePicker2 }, localProps] = createSplitProps()(datePickerProps, ["value"]);
const presence = usePresence(mergeProps13(presenceProps, () => ({ present: datePicker2().open })));
const mergedProps = mergeProps13(() => datePicker2().getRootProps(), localProps);
return <DatePickerProvider value={datePicker2}>
<PresenceProvider value={presence}>
<ark.div {...mergedProps} />
</PresenceProvider>
</DatePickerProvider>;
};
// src/components/date-picker/date-picker-table.tsx
import { mergeProps as mergeProps14 } from "@zag-js/solid";
import { createUniqueId as createUniqueId2 } from "solid-js";
// 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 = createUniqueId2();
const tableProps = mergeProps14(() => ({ columns: columnProps.columns, id }), viewProps);
const mergedProps = mergeProps14(() => api().getTableProps(tableProps), localProps);
return <DatePickerTableProvider value={tableProps}>
<ark.table {...mergedProps} />
</DatePickerTableProvider>;
};
// src/components/date-picker/date-picker-table-body.tsx
import { mergeProps as mergeProps15 } from "@zag-js/solid";
var DatePickerTableBody = (props) => {
const api = useDatePickerContext();
const tableProps = useDatePickerTableContext();
const mergedProps = mergeProps15(() => api().getTableBodyProps(tableProps), props);
return <ark.tbody {...mergedProps} />;
};
// src/components/date-picker/date-picker-table-cell.tsx
import { mergeProps as mergeProps16 } from "@zag-js/solid";
import { createMemo as createMemo3 } from "solid-js";
// 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 = createMemo3(() => {
const viewMap = {
day: api().getDayTableCellProps,
month: api().getMonthTableCellProps,
year: api().getYearTableCellProps
};
const viewFn = viewMap[viewProps.view];
return viewFn(cellProps);
});
const mergedProps = mergeProps16(tableCellProps, localProps);
return <DatePickerTableCellProvider value={cellProps}>
<ark.td {...mergedProps} />
</DatePickerTableCellProvider>;
};
// src/components/date-picker/date-picker-table-cell-trigger.tsx
import { mergeProps as mergeProps17 } from "@zag-js/solid";
import { createMemo as createMemo4 } from "solid-js";
var DatePickerTableCellTrigger = (props) => {
const api = useDatePickerContext();
const cellProps = useDatePickerTableCellContext();
const viewProps = useDatePickerViewContext();
const triggerProps = createMemo4(() => {
const viewMap = {
day: api().getDayTableCellTriggerProps,
month: api().getMonthTableCellTriggerProps,
year: api().getYearTableCellTriggerProps
};
const viewFn = viewMap[viewProps.view];
return viewFn(cellProps);
});
const mergedProps = mergeProps17(triggerProps, props);
return <ark.div {...mergedProps} />;
};
// src/components/date-picker/date-picker-table-head.tsx
import { mergeProps as mergeProps18 } from "@zag-js/solid";
var DatePickerTableHead = (props) => {
const api = useDatePickerContext();
const tableProps = useDatePickerTableContext();
const mergedProps = mergeProps18(() => api().getTableHeadProps(tableProps), props);
return <ark.thead {...mergedProps} />;
};
// src/components/date-picker/date-picker-table-header.tsx
import { mergeProps as mergeProps19 } from "@zag-js/solid";
var DatePickerTableHeader = (props) => {
const api = useDatePickerContext();
const tableProps = useDatePickerTableContext();
const mergedProps = mergeProps19(() => api().getTableHeaderProps(tableProps), props);
return <ark.th {...mergedProps} />;
};
// src/components/date-picker/date-picker-table-row.tsx
import { mergeProps as mergeProps20 } from "@zag-js/solid";
var DatePickerTableRow = (props) => {
const api = useDatePickerContext();
const tableProps = useDatePickerTableContext();
const mergedProps = mergeProps20(() => api().getTableRowProps(tableProps), props);
return <ark.tr {...mergedProps} />;
};
// src/components/date-picker/date-picker-trigger.tsx
import { mergeProps as mergeProps21 } from "@zag-js/solid";
var DatePickerTrigger = (props) => {
const api = useDatePickerContext();
const mergedProps = mergeProps21(() => api().getTriggerProps(), props);
return <ark.button {...mergedProps} />;
};
// src/components/date-picker/date-picker-view.tsx
import { mergeProps as mergeProps22 } from "@zag-js/solid";
var DatePickerView = (props) => {
const [viewProps, localProps] = createSplitProps()(props, ["view"]);
const api = useDatePickerContext();
const mergedProps = mergeProps22(() => datePickerAnatomy.build().view.attrs, localProps);
return <DatePickerViewProvider value={viewProps}>
<ark.div {...mergedProps} hidden={api().view !== viewProps.view} />
</DatePickerViewProvider>;
};
// src/components/date-picker/date-picker-view-control.tsx
import { mergeProps as mergeProps23 } from "@zag-js/solid";
var DatePickerViewControl = (props) => {
const api = useDatePickerContext();
const viewProps = useDatePickerViewContext();
const mergedProps = mergeProps23(() => api().getViewControlProps(viewProps), props);
return <ark.div {...mergedProps} />;
};
// src/components/date-picker/date-picker-view-trigger.tsx
import { mergeProps as mergeProps24 } from "@zag-js/solid";
var DatePickerViewTrigger = (props) => {
const api = useDatePickerContext();
const viewProps = useDatePickerViewContext();
const mergedProps = mergeProps24(() => api().getViewTriggerProps(viewProps), props);
return <ark.button {...mergedProps} />;
};
// src/components/date-picker/date-picker-year-select.tsx
import { mergeProps as mergeProps25 } from "@zag-js/solid";
import { Index as Index2 } from "solid-js";
var DatePickerYearSelect = (props) => {
const datePicker2 = useDatePickerContext();
const mergedProps = mergeProps25(() => datePicker2().getYearSelectProps(), props);
return <ark.select {...mergedProps}>
<Index2 each={datePicker2().getYears()}>{(year) => <option value={year().value}>{year().label}</option>}</Index2>
</ark.select>;
};
// 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 {
useDatePickerContext,
DatePickerClearTrigger,
DatePickerContent,
DatePickerContext,
DatePickerControl,
DatePickerInput,
DatePickerLabel,
DatePickerMonthSelect,
DatePickerNextTrigger,
DatePickerPositioner,
DatePickerPresetTrigger,
DatePickerPrevTrigger,
DatePickerRangeText,
useDatePicker,
DatePickerRoot,
DatePickerRootProvider,
DatePickerTable,
DatePickerTableBody,
DatePickerTableCell,
DatePickerTableCellTrigger,
DatePickerTableHead,
DatePickerTableHeader,
DatePickerTableRow,
DatePickerTrigger,
DatePickerView,
DatePickerViewControl,
DatePickerViewTrigger,
DatePickerYearSelect,
date_picker_exports,
parse
};