@nexub/react 6.0.0 → 6.2.0

package/dist/components/FormField/FormField.js

@@ -5,6 +5,7 @@ import { cn } from "../../utils/cn.js";
 import { Label } from "../Label/Label.js";
 import { HelperText } from "../HelperText/HelperText.js";
 import { FormError } from "../FormError/FormError.js";
+import { useForm } from "../Form/Form.js";
 const FormFieldContext = React.createContext(null);
 function useFormField() {
   const ctx = React.useContext(FormFieldContext);
@@ -13,9 +14,12 @@ function useFormField() {
   }
   return ctx;
 }
-const Root = React.forwardRef(function Root2({ id: idProp, name, invalid, required, disabled, className, children, ...props }, ref) {
+const Root = React.forwardRef(function Root2({ id: idProp, name, invalid: invalidProp, required, disabled, className, children, ...props }, ref) {
   const generatedId = React.useId();
   const id = idProp ?? generatedId;
+  const form = useForm();
+  const formError = name ? form?.errors[name] : void 0;
+  const invalid = invalidProp ?? (formError ? true : void 0);
   const value = React.useMemo(
     () => ({
       id,
@@ -24,9 +28,10 @@ const Root = React.forwardRef(function Root2({ id: idProp, name, invalid, requir
       required,
       disabled,
       descriptionId: `${id}-description`,
-      errorId: `${id}-error`
+      errorId: `${id}-error`,
+      formError
     }),
-    [id, name, invalid, required, disabled]
+    [id, name, invalid, required, disabled, formError]
   );
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props, children }) });
 });
@@ -79,9 +84,9 @@ function FieldError({
   children,
   ...props
 }) {
-  const { errorId, invalid } = useFormField();
+  const { errorId, invalid, formError } = useFormField();
   if (!invalid) return null;
-  return /* @__PURE__ */ jsx(FormError, { id: errorId, className, ...props, children });
+  return /* @__PURE__ */ jsx(FormError, { id: errorId, className, ...props, children: children ?? formError });
 }
 FieldError.displayName = "FormField.Error";
 const FormField = { Root, Label: FieldLabel, Control, Description, Error: FieldError };

package/dist/components/InlineEdit/InlineEdit.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+export interface InlineEditProps {
+    value: string;
+    /**
+     * Called with the new text on Enter or blur (only when it changed). Return a
+     * promise to keep the field open and busy until it settles; a rejection keeps
+     * it open and marks it invalid so the person can retry or press Escape.
+     */
+    onSave: (value: string) => void | Promise<unknown>;
+    /** Names the field: the input's label and "Edit ‹label›" on the button. */
+    label: string;
+    /** Shown when `value` is empty. */
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Text that turns into an input on click. Enter or blur saves, Escape reverts,
+ * and focus returns to the text afterwards.
+ */
+export declare function InlineEdit({ value, onSave, label, placeholder, disabled, className, }: InlineEditProps): React.JSX.Element;

package/dist/components/InlineEdit/InlineEdit.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { Input } from "../Input/Input.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
+function InlineEdit({
+  value,
+  onSave,
+  label,
+  placeholder,
+  disabled,
+  className
+}) {
+  const t = useNexubMessages();
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(value);
+  const [saving, setSaving] = React.useState(false);
+  const [failed, setFailed] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const returnFocus = React.useRef(false);
+  React.useEffect(() => {
+    if (!editing && returnFocus.current) {
+      returnFocus.current = false;
+      buttonRef.current?.focus();
+    }
+  }, [editing]);
+  const close = (refocus) => {
+    returnFocus.current = refocus;
+    setFailed(false);
+    setEditing(false);
+  };
+  const save = async (refocus) => {
+    if (saving) return;
+    if (draft === value) return close(refocus);
+    const result = onSave(draft);
+    if (!(result instanceof Promise)) return close(refocus);
+    setSaving(true);
+    try {
+      await result;
+      close(refocus);
+    } catch {
+      setFailed(true);
+    } finally {
+      setSaving(false);
+    }
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        autoFocus: true,
+        "aria-label": label,
+        value: draft,
+        invalid: failed,
+        "aria-busy": saving || void 0,
+        readOnly: saving,
+        wrapperClassName: className,
+        onChange: (e) => {
+          setDraft(e.target.value);
+          setFailed(false);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            void save(true);
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            close(true);
+          }
+        },
+        onBlur: () => {
+          if (!failed) void save(false);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: buttonRef,
+      type: "button",
+      disabled,
+      "aria-label": `${t.editField(label)}, ${value || placeholder || ""}`,
+      onClick: () => {
+        setDraft(value);
+        setEditing(true);
+      },
+      className: cn(
+        "-mx-2 inline-flex min-h-control-sm max-w-full items-center rounded-shape-control px-2 text-start",
+        "text-body-md text-[var(--color-on-surface)] hover:bg-[var(--color-surface-container-high)]",
+        "disabled:cursor-not-allowed disabled:hover:bg-transparent",
+        !value && "text-[var(--color-on-surface-muted)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "truncate", children: value || placeholder })
+    }
+  );
+}
+export {
+  InlineEdit
+};

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

@@ -0,0 +1,2 @@
+export { InlineEdit } from './InlineEdit.js';
+export type { InlineEditProps } from './InlineEdit.js';

package/dist/components/InlineEdit/index.js

@@ -0,0 +1,4 @@
+import { InlineEdit } from "./InlineEdit.js";
+export {
+  InlineEdit
+};

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type InputProps } from '../Input/Input.js';
+export interface TimePickerProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange' | 'step'> {
+    /** 24-hour `"HH:mm"`; the field shows 12 or 24 hours from the reader's locale. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Minutes between steps for the arrow keys and the picker. @default 1 */
+    minuteStep?: number;
+}
+/**
+ * A time field built on the native `<input type="time">`: locale-aware 12/24h,
+ * keyboard segments, the platform's picker on phones, and form submission.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "../Input/Input.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+const TimePicker = React.forwardRef(function TimePicker2({ value: valueProp, defaultValue, onValueChange, minuteStep = 1, ...props }, ref) {
+  const [value = "", setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? "",
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      type: "time",
+      step: minuteStep * 60,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      ...props
+    }
+  );
+});
+export {
+  TimePicker
+};

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

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker.js';
+export type { TimePickerProps } from './TimePicker.js';

package/dist/components/TimePicker/index.js

@@ -0,0 +1,4 @@
+import { TimePicker } from "./TimePicker.js";
+export {
+  TimePicker
+};

package/dist/hooks/useUnsavedChanges.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Asks the browser to confirm before the page unloads (reload, close, external
+ * link) while `dirty` is true. In-app navigation belongs to your router: block
+ * it there with the same flag.
+ */
+export declare function useUnsavedChanges(dirty: boolean): void;

package/dist/hooks/useUnsavedChanges.js

@@ -0,0 +1,15 @@
+"use client";
+import { useEffect } from "react";
+function useUnsavedChanges(dirty) {
+  useEffect(() => {
+    if (!dirty) return;
+    const onBeforeUnload = (event) => {
+      event.preventDefault();
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [dirty]);
+}
+export {
+  useUnsavedChanges
+};

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { useDisclosure } from './hooks/useDisclosure.js';
 export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect.js';
 export { useMediaQuery } from './hooks/useMediaQuery.js';
 export { useMergedRefs } from './hooks/useMergedRefs.js';
+export { useUnsavedChanges } from './hooks/useUnsavedChanges.js';
 export { usePointerSheen } from './hooks/usePointerSheen.js';
 export { PromptInput } from './components/PromptInput/index.js';
 export type { PromptInputProps, PromptInputMessages, PromptInputStatus } from './components/PromptInput/index.js';
@@ -213,6 +214,18 @@ export type { ErrorStateProps } from './components/ErrorState/index.js';
 export { FileUpload, fileAccepted } from './components/FileUpload/index.js';
 export type { FileUploadRootProps, FileUploadItemProps, FileRejection } from './components/FileUpload/index.js';
 export { OTPInput } from './components/OTPInput/index.js';
+export { Form, useForm } from './components/Form/index.js';
+export type { FormProps, FormErrorItem, FormErrors, FormContextValue } from './components/Form/index.js';
+export { Fieldset } from './components/Fieldset/index.js';
+export type { FieldsetProps } from './components/Fieldset/index.js';
+export { InlineEdit } from './components/InlineEdit/index.js';
+export type { InlineEditProps } from './components/InlineEdit/index.js';
+export { TimePicker } from './components/TimePicker/index.js';
+export type { TimePickerProps } from './components/TimePicker/index.js';
+export { DateTimePicker } from './components/DateTimePicker/index.js';
+export type { DateTimePickerProps } from './components/DateTimePicker/index.js';
+export { EventCalendar } from './components/EventCalendar/index.js';
+export type { EventCalendarProps, EventCalendarView, CalendarEvent, EventTone } from './components/EventCalendar/index.js';
 export type { OTPInputProps } from './components/OTPInput/index.js';
 export { DatePicker } from './components/DatePicker/index.js';
 export type { DatePickerProps } from './components/DatePicker/index.js';

package/dist/index.js

@@ -6,6 +6,7 @@ import { useDisclosure } from "./hooks/useDisclosure.js";
 import { useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
 import { useMediaQuery } from "./hooks/useMediaQuery.js";
 import { useMergedRefs } from "./hooks/useMergedRefs.js";
+import { useUnsavedChanges } from "./hooks/useUnsavedChanges.js";
 import { usePointerSheen } from "./hooks/usePointerSheen.js";
 import { PromptInput } from "./components/PromptInput/index.js";
 import { ThinkingIndicator } from "./components/ThinkingIndicator/index.js";
@@ -120,6 +121,12 @@ import { EmptyState, EmptyStatePreset } from "./components/EmptyState/index.js";
 import { ErrorState } from "./components/ErrorState/index.js";
 import { FileUpload, fileAccepted } from "./components/FileUpload/index.js";
 import { OTPInput } from "./components/OTPInput/index.js";
+import { Form, useForm } from "./components/Form/index.js";
+import { Fieldset } from "./components/Fieldset/index.js";
+import { InlineEdit } from "./components/InlineEdit/index.js";
+import { TimePicker } from "./components/TimePicker/index.js";
+import { DateTimePicker } from "./components/DateTimePicker/index.js";
+import { EventCalendar } from "./components/EventCalendar/index.js";
 import { DatePicker } from "./components/DatePicker/index.js";
 import { DateRangePicker } from "./components/DateRangePicker/index.js";
 import { todayIn } from "./components/DateRangePicker/index.js";
@@ -165,6 +172,7 @@ export {
   DataTable,
   DatePicker,
   DateRangePicker,
+  DateTimePicker,
   Dialog,
   DiffView,
   DonutChart,
@@ -173,8 +181,10 @@ export {
   EmptyState,
   EmptyStatePreset,
   ErrorState,
+  EventCalendar,
   EyebrowChip,
   Fade,
+  Fieldset,
   FileUpload,
   FilterBuilder,
   FilterChip,
@@ -182,6 +192,7 @@ export {
   Flex,
   Float,
   FloatingInput,
+  Form,
   FormError,
   FormField,
   Funnel,
@@ -193,6 +204,7 @@ export {
   HelperText,
   HoverCard,
   IconButton,
+  InlineEdit,
   Input,
   Kbd,
   KeyboardShortcut,
@@ -259,6 +271,7 @@ export {
   ThemeProvider,
   ThemeScript,
   ThinkingIndicator,
+  TimePicker,
   Toast,
   Toaster,
   Toggle,
@@ -312,6 +325,7 @@ export {
   transitionName,
   useControllableState,
   useDisclosure,
+  useForm,
   useIsomorphicLayoutEffect,
   useLocale,
   useMediaQuery,
@@ -321,5 +335,6 @@ export {
   usePrefersReducedMotion,
   useScopedSeed,
   useTheme,
-  useToastStore
+  useToastStore,
+  useUnsavedChanges
 };