@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/chunk-PKVKFZW7.js

@@ -0,0 +1,446 @@
+import {
+  TimePicker2 as TimePicker,
+  TimePickerIndicator
+} from "./chunk-3OQPAZTF.js";
+import {
+  withTime
+} from "./chunk-3MRCSXGT.js";
+import {
+  Tabs
+} from "./chunk-HM6M6SIP.js";
+import {
+  BottomSheet2 as BottomSheet
+} from "./chunk-KTI3GCFM.js";
+import {
+  Calendar
+} from "./chunk-BLDMKFIG.js";
+import {
+  startOfDay
+} from "./chunk-SHFUQVLX.js";
+import {
+  selectRecipe
+} from "./chunk-E4FWGZH2.js";
+import {
+  useControllableState
+} from "./chunk-F6W3JQ7K.js";
+import {
+  PressableFeedback
+} from "./chunk-XZ42OWKC.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  IconContext
+} from "./chunk-JN6IRT2M.js";
+import {
+  createSlotContext
+} from "./chunk-TTZOIXKE.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/date-time-picker/date-time-picker.tsx
+import { useCallback, useMemo } from "react";
+import { StyleSheet } from "react-native";
+
+// src/components/date-time-picker/date-time-picker.context.ts
+var [DateTimePickerProvider, useDateTimePicker] = createSlotContext("DateTimePicker");
+
+// src/components/date-time-picker/date-time-picker.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_FORMAT = {
+  dateStyle: "medium",
+  timeStyle: "short"
+};
+function DateTimePicker({
+  children,
+  variant,
+  size = "md",
+  radius,
+  color,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  step: controlledStep,
+  defaultStep = "date",
+  onStepChange,
+  hourCycle,
+  minuteStep = 1,
+  minValue,
+  maxValue,
+  locale,
+  formatOptions = DEFAULT_FORMAT,
+  closeOnSelect = true,
+  isDisabled = false,
+  isInvalid = false
+}) {
+  const theme = useXAUITheme();
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [isOpen, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [step, setStep] = useControllableState({
+    value: controlledStep,
+    defaultValue: defaultStep,
+    onChange: onStepChange
+  });
+  const selection = {
+    variant,
+    size,
+    radius,
+    isOpen: isOpen ? "true" : void 0,
+    isInvalid: isInvalid ? "true" : void 0
+  };
+  const field = selectRecipe.resolve({
+    theme,
+    selection,
+    states: { disabled: isDisabled }
+  });
+  const fieldPressed = selectRecipe.resolve({
+    theme,
+    selection,
+    states: { pressed: true }
+  });
+  const tint = color ? selectRecipe.tint({ theme, color, selection }) : void 0;
+  const onPickDate = useCallback(
+    (day) => {
+      const start = startOfDay(day);
+      setValue(
+        value === void 0 ? start : withTime(start, {
+          hours: value.getHours(),
+          minutes: value.getMinutes(),
+          seconds: 0
+        })
+      );
+      setStep("time");
+    },
+    [setStep, setValue, value]
+  );
+  const onPickTime = useCallback(
+    (moment) => {
+      setValue(moment);
+      if (closeOnSelect) setOpen(false);
+    },
+    [closeOnSelect, setOpen, setValue]
+  );
+  const toggle = useCallback(() => {
+    if (isDisabled) return;
+    setOpen(!isOpen);
+    setStep("date");
+  }, [isDisabled, isOpen, setOpen, setStep]);
+  const text = useMemo(
+    () => value === void 0 ? void 0 : new Intl.DateTimeFormat(locale, formatOptions).format(value),
+    [value, locale, formatOptions]
+  );
+  const dateText = useMemo(
+    () => value === void 0 ? void 0 : new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(value),
+    [value, locale]
+  );
+  const timeText = useMemo(
+    () => value === void 0 ? void 0 : new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(value),
+    [value, locale]
+  );
+  const glyph = useMemo(() => {
+    const flat = StyleSheet.flatten([field.indicator, tint?.indicator]);
+    return {
+      size: flat.fontSize,
+      color: typeof flat.color === "string" ? flat.color : void 0
+    };
+  }, [field.indicator, tint]);
+  const context = useMemo(
+    () => ({
+      triggerStyle: [field.trigger, tint?.trigger],
+      triggerPressedStyle: fieldPressed.trigger,
+      valueStyle: [field.value, tint?.value],
+      placeholderStyle: tint ? [
+        field.placeholder,
+        { color: StyleSheet.flatten([tint.value]).color }
+      ] : field.placeholder,
+      glyph,
+      value,
+      text,
+      dateText,
+      timeText,
+      step,
+      setStep,
+      onPickDate,
+      onPickTime,
+      calendar: {
+        variant: void 0,
+        size,
+        color,
+        minValue,
+        maxValue,
+        locale
+      },
+      clock: { size, color, hourCycle, minuteStep, locale },
+      isOpen,
+      setOpen,
+      toggle,
+      isDisabled,
+      isInvalid
+    }),
+    [
+      field,
+      fieldPressed,
+      tint,
+      glyph,
+      value,
+      text,
+      dateText,
+      timeText,
+      step,
+      setStep,
+      onPickDate,
+      onPickTime,
+      size,
+      color,
+      minValue,
+      maxValue,
+      locale,
+      hourCycle,
+      minuteStep,
+      isOpen,
+      setOpen,
+      toggle,
+      isDisabled,
+      isInvalid
+    ]
+  );
+  return /* @__PURE__ */ jsx(DateTimePickerProvider, { value: context, children });
+}
+DateTimePicker.displayName = "XAUI.DateTimePicker.Root";
+
+// src/components/date-time-picker/date-time-picker-steps.tsx
+import { forwardRef } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var STEPS = ["date", "time"];
+var DateTimePickerSteps = forwardRef(function DateTimePickerSteps2({ labels, style, ...props }, ref) {
+  const { step, setStep, dateText, timeText, isDisabled } = useDateTimePicker();
+  const theme = useXAUITheme();
+  const shown = {
+    date: dateText,
+    time: timeText
+  };
+  return /* @__PURE__ */ jsx2(
+    Tabs,
+    {
+      ref,
+      value: step,
+      onValueChange: (next) => setStep(next),
+      isDisabled,
+      ...props,
+      style: [{ marginBottom: theme.spacing(2) }, style],
+      children: /* @__PURE__ */ jsxs(Tabs.List, { style: { alignSelf: "center" }, children: [
+        /* @__PURE__ */ jsx2(Tabs.Indicator, {}),
+        STEPS.map((name) => /* @__PURE__ */ jsx2(Tabs.Trigger, { value: name, children: shown[name] ?? labels?.[name] ?? name }, name))
+      ] })
+    }
+  );
+});
+DateTimePickerSteps.displayName = "XAUI.DateTimePicker.Steps";
+
+// src/components/date-time-picker/date-time-picker-sheet.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DateTimePickerSheet({
+  children,
+  stepLabels,
+  previousLabel,
+  nextLabel,
+  ...props
+}) {
+  const picker = useDateTimePicker();
+  return /* @__PURE__ */ jsxs2(BottomSheet, { isOpen: picker.isOpen, onOpenChange: picker.setOpen, ...props, children: [
+    /* @__PURE__ */ jsx3(BottomSheet.Overlay, {}),
+    /* @__PURE__ */ jsx3(BottomSheet.Content, { children: /* @__PURE__ */ jsx3(DateTimePickerProvider, { value: picker, children: children ?? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3(BottomSheet.Handle, {}),
+      /* @__PURE__ */ jsx3(DateTimePickerSteps, { labels: stepLabels }),
+      picker.step === "date" ? /* @__PURE__ */ jsx3(
+        DateTimePickerCalendar,
+        {
+          previousLabel,
+          nextLabel
+        }
+      ) : /* @__PURE__ */ jsx3(DateTimePickerClock, {})
+    ] }) }) })
+  ] });
+}
+DateTimePickerSheet.displayName = "XAUI.DateTimePicker.Sheet";
+function DateTimePickerCalendar({
+  previousLabel,
+  nextLabel,
+  ...props
+}) {
+  const { value, onPickDate, calendar } = useDateTimePicker();
+  return /* @__PURE__ */ jsxs2(
+    Calendar,
+    {
+      size: calendar.size,
+      color: calendar.color,
+      locale: calendar.locale,
+      minValue: calendar.minValue,
+      maxValue: calendar.maxValue,
+      value,
+      onValueChange: onPickDate,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs2(Calendar.Header, { children: [
+          /* @__PURE__ */ jsx3(Calendar.PreviousButton, { accessibilityLabel: previousLabel }),
+          /* @__PURE__ */ jsx3(Calendar.Title, {}),
+          /* @__PURE__ */ jsx3(Calendar.NextButton, { accessibilityLabel: nextLabel })
+        ] }),
+        /* @__PURE__ */ jsx3(Calendar.Weekdays, {}),
+        /* @__PURE__ */ jsx3(Calendar.Grid, {})
+      ]
+    }
+  );
+}
+DateTimePickerCalendar.displayName = "XAUI.DateTimePicker.Calendar";
+function DateTimePickerClock(props) {
+  const { value, onPickTime, clock } = useDateTimePicker();
+  return /* @__PURE__ */ jsxs2(
+    TimePicker,
+    {
+      size: clock.size,
+      color: clock.color,
+      locale: clock.locale,
+      hourCycle: clock.hourCycle,
+      minuteStep: clock.minuteStep,
+      value,
+      onValueChange: onPickTime,
+      closeOnSelect: false,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3(TimePicker.Display, { style: { alignSelf: "center" } }),
+        /* @__PURE__ */ jsx3(TimePicker.Clock, { style: { alignSelf: "center" } })
+      ]
+    }
+  );
+}
+DateTimePickerClock.displayName = "XAUI.DateTimePicker.Clock";
+
+// src/components/date-time-picker/date-time-picker-indicator.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function DateTimePickerIndicator(props) {
+  const { glyph } = useDateTimePicker();
+  return /* @__PURE__ */ jsx4(IconContext.Provider, { value: glyph, children: /* @__PURE__ */ jsx4(TimePickerIndicator, { ...props }) });
+}
+DateTimePickerIndicator.displayName = "XAUI.DateTimePicker.Indicator";
+
+// src/components/date-time-picker/date-time-picker-trigger.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DateTimePickerTrigger = forwardRef2(
+  function DateTimePickerTrigger2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onPressIn,
+    onPressOut,
+    onPress,
+    ...props
+  }, ref) {
+    const {
+      triggerStyle,
+      triggerPressedStyle,
+      glyph,
+      isOpen,
+      isDisabled,
+      isInvalid,
+      toggle
+    } = useDateTimePicker();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+    return /* @__PURE__ */ jsx5(IconContext.Provider, { value: glyph, children: /* @__PURE__ */ jsx5(
+      PressableFeedback,
+      {
+        ref,
+        isPressed,
+        asChild,
+        accessibilityRole,
+        accessibilityState: {
+          expanded: isOpen,
+          disabled: isDisabled,
+          ...accessibilityState
+        },
+        "aria-invalid": isInvalid || void 0,
+        isDisabled,
+        ...rest,
+        style: [
+          isPressed ? triggerPressedStyle : triggerStyle,
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: (event) => {
+          onPress?.(event);
+          toggle();
+        },
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    ) });
+  }
+);
+DateTimePickerTrigger.displayName = "XAUI.DateTimePicker.Trigger";
+
+// src/components/date-time-picker/date-time-picker-value.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DateTimePickerValue = forwardRef3(
+  function DateTimePickerValue2({ children, placeholder, style, ...props }, ref) {
+    const { text, valueStyle, placeholderStyle } = useDateTimePicker();
+    const [styleProps, rest] = useStyleProps(props);
+    const isEmpty = children === void 0 && text === void 0;
+    return /* @__PURE__ */ jsx6(
+      Text,
+      {
+        ref,
+        numberOfLines: 1,
+        ...rest,
+        style: [isEmpty ? placeholderStyle : valueStyle, styleProps, style],
+        children: children ?? text ?? placeholder
+      }
+    );
+  }
+);
+DateTimePickerValue.displayName = "XAUI.DateTimePicker.Value";
+
+// src/components/date-time-picker/index.ts
+var DateTimePicker2 = Object.assign(DateTimePicker, {
+  Trigger: DateTimePickerTrigger,
+  Value: DateTimePickerValue,
+  Indicator: DateTimePickerIndicator,
+  Sheet: DateTimePickerSheet,
+  Steps: DateTimePickerSteps,
+  Calendar: DateTimePickerCalendar,
+  Clock: DateTimePickerClock
+});
+
+export {
+  useDateTimePicker,
+  DateTimePicker,
+  DateTimePickerSteps,
+  DateTimePickerSheet,
+  DateTimePickerCalendar,
+  DateTimePickerClock,
+  DateTimePickerIndicator,
+  DateTimePickerTrigger,
+  DateTimePickerValue,
+  DateTimePicker2
+};