@nori-ui/core 1.1.0 → 1.2.0

package/dist/components/DatePicker/index.d.cts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CalendarDate } from '@internationalized/date';
+
+type DatePickerProps = {
+    value?: CalendarDate | null;
+    defaultValue?: CalendarDate | null;
+    onChange?: (date: CalendarDate | null) => void;
+    /** BCP 47 locale; defaults from NoriProvider's i18n context. */
+    locale?: string;
+    /** Min/max selectable date. */
+    minValue?: CalendarDate;
+    maxValue?: CalendarDate;
+    /** Custom unavailable predicate. */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** First day of week override (0=Sun, 1=Mon, ...). Defaults from locale. */
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Placeholder text shown when no value. */
+    placeholder?: string;
+    /** Disable the whole picker. */
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    testID?: string;
+    className?: string;
+};
+type DateRangeValue = {
+    start: CalendarDate | null;
+    end: CalendarDate | null;
+};
+type DatePickerRangeProps = {
+    value?: DateRangeValue;
+    defaultValue?: DateRangeValue;
+    onChange?: (range: DateRangeValue) => void;
+    locale?: string;
+    minValue?: CalendarDate;
+    maxValue?: CalendarDate;
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    testID?: string;
+    className?: string;
+};
+declare const DatePicker: (({ value, defaultValue, onChange, locale: localeProp, minValue, maxValue, isDateUnavailable, firstDayOfWeek, placeholder, disabled, id, name: _name, className, testID, ...ariaProps }: DatePickerProps) => react_jsx_runtime.JSX.Element) & {
+    Range: ({ value, defaultValue, onChange, locale: localeProp, minValue, maxValue, isDateUnavailable, firstDayOfWeek, placeholder, disabled, id, name: _name, className, testID, ...ariaProps }: DatePickerRangeProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { DatePicker, type DatePickerProps, type DatePickerRangeProps, type DateRangeValue };

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CalendarDate } from '@internationalized/date';
+
+type DatePickerProps = {
+    value?: CalendarDate | null;
+    defaultValue?: CalendarDate | null;
+    onChange?: (date: CalendarDate | null) => void;
+    /** BCP 47 locale; defaults from NoriProvider's i18n context. */
+    locale?: string;
+    /** Min/max selectable date. */
+    minValue?: CalendarDate;
+    maxValue?: CalendarDate;
+    /** Custom unavailable predicate. */
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    /** First day of week override (0=Sun, 1=Mon, ...). Defaults from locale. */
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Placeholder text shown when no value. */
+    placeholder?: string;
+    /** Disable the whole picker. */
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    testID?: string;
+    className?: string;
+};
+type DateRangeValue = {
+    start: CalendarDate | null;
+    end: CalendarDate | null;
+};
+type DatePickerRangeProps = {
+    value?: DateRangeValue;
+    defaultValue?: DateRangeValue;
+    onChange?: (range: DateRangeValue) => void;
+    locale?: string;
+    minValue?: CalendarDate;
+    maxValue?: CalendarDate;
+    isDateUnavailable?: (date: CalendarDate) => boolean;
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    testID?: string;
+    className?: string;
+};
+declare const DatePicker: (({ value, defaultValue, onChange, locale: localeProp, minValue, maxValue, isDateUnavailable, firstDayOfWeek, placeholder, disabled, id, name: _name, className, testID, ...ariaProps }: DatePickerProps) => react_jsx_runtime.JSX.Element) & {
+    Range: ({ value, defaultValue, onChange, locale: localeProp, minValue, maxValue, isDateUnavailable, firstDayOfWeek, placeholder, disabled, id, name: _name, className, testID, ...ariaProps }: DatePickerRangeProps) => react_jsx_runtime.JSX.Element;
+};
+
+export { DatePicker, type DatePickerProps, type DatePickerRangeProps, type DateRangeValue };

package/dist/components/DatePicker/index.js

@@ -0,0 +1,14 @@
+export { DatePicker } from '../../chunk-XBNVKPJN.js';
+import '../../chunk-7D2BHQ6M.js';
+import '../../chunk-HZKXPN6B.js';
+import '../../chunk-UJ5KFRDE.js';
+import '../../chunk-MJ4AGXS7.js';
+import '../../chunk-6PO2IWB3.js';
+import '../../chunk-7Z4NMNX6.js';
+import '../../chunk-ZIBNLXIV.js';
+import '../../chunk-CHXHRJNZ.js';
+import '../../chunk-5A2QOOVN.js';
+import '../../chunk-R5JMDDCB.js';
+import '../../chunk-WCQVDF3K.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/index.cjs

@@ -6590,6 +6590,334 @@ var Checkbox = /* @__PURE__ */ __name(({
     }
   );
 }, "Checkbox");
+function formatDate(date$1, locale) {
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date$1.toDate(date.getLocalTimeZone()));
+  } catch {
+    return `${date$1.year}-${String(date$1.month).padStart(2, "0")}-${String(date$1.day).padStart(2, "0")}`;
+  }
+}
+__name(formatDate, "formatDate");
+function CalendarIcon({ size = 16, color = "currentColor" }) {
+  const colors = useThemeColors();
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" })
+      }
+    );
+  }
+  const resolvedColor = color === "currentColor" ? colors.semantic.text.muted : color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { fontSize: size, lineHeight: size, color: resolvedColor },
+      children: "\u{1F4C5}"
+    }
+  );
+}
+__name(CalendarIcon, "CalendarIcon");
+function buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek) {
+  const out = {};
+  if (minValue !== void 0) {
+    out.minValue = minValue;
+  }
+  if (maxValue !== void 0) {
+    out.maxValue = maxValue;
+  }
+  if (isDateUnavailable !== void 0) {
+    out.isDateUnavailable = isDateUnavailable;
+  }
+  if (firstDayOfWeek !== void 0) {
+    out.firstDayOfWeek = firstDayOfWeek;
+  }
+  return out;
+}
+__name(buildCalendarOptional, "buildCalendarOptional");
+function buildTriggerAriaProps(ariaProps) {
+  const out = {};
+  if (ariaProps["aria-labelledby"] !== void 0) {
+    out["aria-labelledby"] = ariaProps["aria-labelledby"];
+  }
+  if (ariaProps["aria-describedby"] !== void 0) {
+    out["aria-describedby"] = ariaProps["aria-describedby"];
+  }
+  if (ariaProps["aria-invalid"] !== void 0) {
+    out["aria-invalid"] = ariaProps["aria-invalid"];
+  }
+  if (ariaProps["aria-required"] !== void 0) {
+    out["aria-required"] = ariaProps["aria-required"];
+  }
+  return out;
+}
+__name(buildTriggerAriaProps, "buildTriggerAriaProps");
+var DatePickerRoot = /* @__PURE__ */ __name(({
+  value,
+  defaultValue: defaultValue2,
+  onChange,
+  locale: localeProp,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  firstDayOfWeek,
+  placeholder,
+  disabled = false,
+  id,
+  name: _name,
+  className,
+  testID,
+  ...ariaProps
+}) => {
+  const providerLocale = useLocale();
+  const locale = localeProp ?? providerLocale;
+  const [open, setOpen] = React.useState(false);
+  const isControlled = value !== void 0;
+  const [inner, setInner] = React.useState(defaultValue2 ?? null);
+  const current = isControlled ? value ?? null : inner;
+  const handleChange = React.useCallback(
+    (date) => {
+      if (!isControlled) {
+        setInner(date);
+      }
+      onChange?.(date);
+      setOpen(false);
+    },
+    [isControlled, onChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!disabled) {
+        setOpen(next);
+      }
+    },
+    [disabled]
+  );
+  const displayValue = current ? formatDate(current, locale) : null;
+  const calendarOptional = buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek);
+  const triggerAriaProps = buildTriggerAriaProps(ariaProps);
+  const colors = useThemeColors();
+  const hasError = ariaProps["aria-invalid"] === true || ariaProps["aria-invalid"] === "true";
+  const pressableStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: px(colors.radius.md),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    backgroundColor: colors.semantic.background.elevated,
+    borderColor: hasError ? colors.color.danger : colors.semantic.border.default,
+    opacity: disabled ? 0.6 : 1
+  };
+  const textStyle = {
+    flex: 1,
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.md),
+    color: displayValue ? colors.semantic.text.default : colors.semantic.text.muted
+  };
+  const triggerExtraProps = {
+    role: "combobox",
+    accessibilityRole: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    ...triggerAriaProps
+  };
+  if (id !== void 0) {
+    triggerExtraProps.id = id;
+    triggerExtraProps.nativeID = id;
+  }
+  if (testID !== void 0) {
+    triggerExtraProps.testID = testID;
+  }
+  if (hasError) {
+    triggerExtraProps["aria-invalid"] = true;
+  }
+  if (ariaProps["aria-required"]) {
+    triggerExtraProps["aria-required"] = true;
+  }
+  if (disabled) {
+    triggerExtraProps["aria-disabled"] = true;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        onPress: disabled ? void 0 : () => setOpen(!open),
+        disabled,
+        className: cn(
+          "flex-row items-center rounded-md border px-3 py-2",
+          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
+          disabled ? "opacity-60" : void 0,
+          className
+        ),
+        style: pressableStyle,
+        ...triggerExtraProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, numberOfLines: 1, children: displayValue ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: px(colors.spacing["2"]) }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 16, color: colors.semantic.text.muted }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { "aria-label": "Date picker", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        mode: "single",
+        value: current,
+        onChange: (date) => {
+          handleChange(date);
+        },
+        locale,
+        ...calendarOptional
+      }
+    ) })
+  ] });
+}, "DatePickerRoot");
+var DatePickerRange = /* @__PURE__ */ __name(({
+  value,
+  defaultValue: defaultValue2,
+  onChange,
+  locale: localeProp,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  firstDayOfWeek,
+  placeholder,
+  disabled = false,
+  id,
+  name: _name,
+  className,
+  testID,
+  ...ariaProps
+}) => {
+  const providerLocale = useLocale();
+  const locale = localeProp ?? providerLocale;
+  const [open, setOpen] = React.useState(false);
+  const isControlled = value !== void 0;
+  const [inner, setInner] = React.useState(defaultValue2 ?? { start: null, end: null });
+  const current = isControlled ? value ?? { start: null, end: null } : inner;
+  const calendarValue = current.start !== null ? { start: current.start, end: current.end } : null;
+  const handleChange = React.useCallback(
+    (calRange) => {
+      const next = {
+        start: calRange?.start ?? null,
+        end: calRange?.end ?? null
+      };
+      if (!isControlled) {
+        setInner(next);
+      }
+      onChange?.(next);
+      if (next.start !== null && next.end !== null) {
+        setOpen(false);
+      }
+    },
+    [isControlled, onChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!disabled) {
+        setOpen(next);
+      }
+    },
+    [disabled]
+  );
+  let displayValue = null;
+  if (current.start !== null) {
+    const startStr = formatDate(current.start, locale);
+    const endStr = current.end !== null ? formatDate(current.end, locale) : "";
+    displayValue = `${startStr} \u2013 ${endStr}`;
+  }
+  const calendarOptional = buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek);
+  const triggerAriaProps = buildTriggerAriaProps(ariaProps);
+  const colors = useThemeColors();
+  const hasError = ariaProps["aria-invalid"] === true || ariaProps["aria-invalid"] === "true";
+  const pressableStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: px(colors.radius.md),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    backgroundColor: colors.semantic.background.elevated,
+    borderColor: hasError ? colors.color.danger : colors.semantic.border.default,
+    opacity: disabled ? 0.6 : 1
+  };
+  const textStyle = {
+    flex: 1,
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.md),
+    color: displayValue ? colors.semantic.text.default : colors.semantic.text.muted
+  };
+  const triggerExtraProps = {
+    role: "combobox",
+    accessibilityRole: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    ...triggerAriaProps
+  };
+  if (id !== void 0) {
+    triggerExtraProps.id = id;
+    triggerExtraProps.nativeID = id;
+  }
+  if (testID !== void 0) {
+    triggerExtraProps.testID = testID;
+  }
+  if (hasError) {
+    triggerExtraProps["aria-invalid"] = true;
+  }
+  if (ariaProps["aria-required"]) {
+    triggerExtraProps["aria-required"] = true;
+  }
+  if (disabled) {
+    triggerExtraProps["aria-disabled"] = true;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        onPress: disabled ? void 0 : () => setOpen(!open),
+        disabled,
+        className: cn(
+          "flex-row items-center rounded-md border px-3 py-2",
+          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
+          disabled ? "opacity-60" : void 0,
+          className
+        ),
+        style: pressableStyle,
+        ...triggerExtraProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, numberOfLines: 1, children: displayValue ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: px(colors.spacing["2"]) }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 16, color: colors.semantic.text.muted }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { "aria-label": "Date range picker", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        mode: "range",
+        value: calendarValue,
+        onChange: (range2) => {
+          handleChange(range2);
+        },
+        locale,
+        ...calendarOptional
+      }
+    ) })
+  ] });
+}, "DatePickerRange");
+var DatePicker = Object.assign(DatePickerRoot, {
+  Range: DatePickerRange
+});
 var DialogContext = React.createContext(null);
 var useDialogContext = /* @__PURE__ */ __name((label) => {
   const ctx = React.useContext(DialogContext);
@@ -12133,6 +12461,7 @@ exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Field = Field;
 exports.FloatButton = FloatButton;