@usefragments/ui 1.5.4 → 1.7.0

package/dist/datepicker.cjs

@@ -27,8 +27,10 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const popover = require("@base-ui/react/popover");
 const aria = require("./utils/aria.cjs");
+const popup = require("./recipes/popup.cjs");
 const index = require("./components/ComponentDefaults/index.cjs");
 const DatePicker_module = require("./components/DatePicker/DatePicker.module.scss.cjs");
+const env = require("./utils/env.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -155,7 +157,7 @@ function loadDayPickerDeps() {
         _DayFlag = rdp.DayFlag;
       } catch {
         _rdpFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (env.isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] DatePicker: react-day-picker is not installed. Install it with: npm install react-day-picker"
           );
@@ -343,7 +345,7 @@ const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
   const wrapperClasses = [DatePicker_module.default.wrapper, className].filter(Boolean).join(" ");
   const helperClasses = [DatePicker_module.default.helper, hasError && DatePicker_module.default.helperError].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: wrapperClasses, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: wrapperClasses, "data-invalid": hasError || void 0, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx("span", { id: labelId, className: DatePicker_module.default.label, children: label }),
       /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Root, { open: isOpen, onOpenChange: handleOpenChange, children }),
       helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { id: helperId, className: helperClasses, children: helperText }),
@@ -389,7 +391,7 @@ function DatePickerTrigger({
 function DatePickerContent({
   children,
   className,
-  sideOffset = 4,
+  sideOffset = popup.POPUP_OFFSET_PX,
   align = "start",
   ...htmlProps
 }) {

package/dist/datepicker.js

@@ -3,8 +3,10 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover } from "@base-ui/react/popover";
 import { useFormFieldIds } from "./utils/aria.js";
+import { POPUP_OFFSET_PX } from "./recipes/popup.js";
 import { useResolvedControlSize } from "./components/ComponentDefaults/index.js";
 import styles from "./components/DatePicker/DatePicker.module.scss.js";
+import { isDevelopmentBuild } from "./utils/env.js";
 function CalendarIcon() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -114,7 +116,7 @@ function loadDayPickerDeps() {
         _DayFlag = rdp.DayFlag;
       } catch {
         _rdpFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] DatePicker: react-day-picker is not installed. Install it with: npm install react-day-picker"
           );
@@ -302,7 +304,7 @@ const DatePickerRoot = React.forwardRef(function DatePickerRoot2({
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(" ");
   const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(DatePickerContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, children: [
+    /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, "data-invalid": hasError || void 0, children: [
       label && /* @__PURE__ */ jsx("span", { id: labelId, className: styles.label, children: label }),
       /* @__PURE__ */ jsx(Popover.Root, { open: isOpen, onOpenChange: handleOpenChange, children }),
       helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: helperClasses, children: helperText }),
@@ -348,7 +350,7 @@ function DatePickerTrigger({
 function DatePickerContent({
   children,
   className,
-  sideOffset = 4,
+  sideOffset = POPUP_OFFSET_PX,
   align = "start",
   ...htmlProps
 }) {

package/dist/editor.cjs

@@ -28,6 +28,7 @@ const React = require("react");
 const Editor_module = require("./components/Editor/Editor.module.scss.cjs");
 const react = require("@phosphor-icons/react");
 const keyboardShortcuts = require("./utils/keyboard-shortcuts.cjs");
+const env = require("./utils/env.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -66,7 +67,7 @@ function loadTipTapDeps() {
         _LinkExtension = linkExt.default ?? linkExt.Link ?? linkExt;
       } catch {
         _tiptapFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (env.isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] Editor: TipTap is not installed; falling back to markdown mode. Install it with: npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-link"
           );
@@ -93,19 +94,58 @@ function useTipTapDeps() {
 const FORMAT_META = {
   bold: { icon: react.TextB, label: "Bold", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_BOLD.label },
   italic: { icon: react.TextItalic, label: "Italic", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_ITALIC.label },
-  strikethrough: { icon: react.TextStrikethrough, label: "Strikethrough", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_STRIKETHROUGH.label },
+  strikethrough: {
+    icon: react.TextStrikethrough,
+    label: "Strikethrough",
+    shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_STRIKETHROUGH.label
+  },
   link: { icon: react.LinkSimple, label: "Link", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_LINK.label },
   code: { icon: react.Code, label: "Code", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_CODE.label },
-  bulletList: { icon: react.ListBullets, label: "Bullet list", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_BULLET_LIST.label },
-  orderedList: { icon: react.ListNumbers, label: "Ordered list", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_ORDERED_LIST.label },
-  heading1: { icon: react.TextHOne, label: "Heading 1", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_HEADING1.label },
-  heading2: { icon: react.TextHTwo, label: "Heading 2", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_HEADING2.label },
-  heading3: { icon: react.TextHThree, label: "Heading 3", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_HEADING3.label },
-  blockquote: { icon: react.Quotes, label: "Blockquote", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_BLOCKQUOTE.label },
-  undo: { icon: react.ArrowCounterClockwise, label: "Undo", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_UNDO.label },
+  bulletList: {
+    icon: react.ListBullets,
+    label: "Bullet list",
+    shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_BULLET_LIST.label
+  },
+  orderedList: {
+    icon: react.ListNumbers,
+    label: "Ordered list",
+    shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_ORDERED_LIST.label
+  },
+  heading1: {
+    icon: react.TextHOne,
+    label: "Heading 1",
+    shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_HEADING1.label
+  },
+  heading2: {
+    icon: react.TextHTwo,
+    label: "Heading 2",
+    shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_HEADING2.label
+  },
+  heading3: {
+    icon: react.TextHThree,
+    label: "Heading 3",
+    shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_HEADING3.label
+  },
+  blockquote: {
+    icon: react.Quotes,
+    label: "Blockquote",
+    shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_BLOCKQUOTE.label
+  },
+  undo: {
+    icon: react.ArrowCounterClockwise,
+    label: "Undo",
+    shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_UNDO.label
+  },
   redo: { icon: react.ArrowClockwise, label: "Redo", shortcut: keyboardShortcuts.KEYBOARD_SHORTCUTS.EDITOR_REDO.label }
 };
-const DEFAULT_FORMATS = ["bold", "italic", "strikethrough", "link", "code", "bulletList"];
+const DEFAULT_FORMATS = [
+  "bold",
+  "italic",
+  "strikethrough",
+  "link",
+  "code",
+  "bulletList"
+];
 const ACTION_FORMATS = /* @__PURE__ */ new Set(["undo", "redo"]);
 const DEFAULT_STATUS_LABELS = {
   idle: "",
@@ -256,11 +296,7 @@ function EditorImpl({
   ...htmlProps
 }) {
   const contentRef = React__namespace.useRef(null);
-  const [value, setValue] = useControllableState(
-    controlledValue,
-    defaultValue,
-    onValueChange
-  );
+  const [value, setValue] = useControllableState(controlledValue, defaultValue, onValueChange);
   const [saveStatus, setSaveStatus] = React__namespace.useState("idle");
   const mode = hasTipTap ? "rich" : "markdown";
   const tiptapEditor = hasTipTap ? (
@@ -492,7 +528,11 @@ function EditorToolbar({ children, className }) {
   const classes = [Editor_module.default.toolbar, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, role: "toolbar", "aria-label": "Editor formatting", children });
 }
-function EditorToolbarGroup({ children, "aria-label": ariaLabel, className }) {
+function EditorToolbarGroup({
+  children,
+  "aria-label": ariaLabel,
+  className
+}) {
   const classes = [Editor_module.default.toolbarGroup, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, role: "group", "aria-label": ariaLabel, children });
 }
@@ -520,11 +560,7 @@ function EditorToolbarButton({ format, className }) {
   };
   const iconOverride = toolbarIcons == null ? void 0 : toolbarIcons[format];
   const renderedOverride = typeof iconOverride === "function" ? iconOverride(iconState) : iconOverride;
-  const classes = [
-    Editor_module.default.toolbarButton,
-    active && Editor_module.default.toolbarButtonActive,
-    className
-  ].filter(Boolean).join(" ");
+  const classes = [Editor_module.default.toolbarButton, active && Editor_module.default.toolbarButtonActive, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -543,17 +579,17 @@ function EditorSeparator({ className }) {
   const classes = [Editor_module.default.separator, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, role: "separator", "aria-orientation": "vertical" });
 }
-function EditorStatusIndicator({ status: statusOverride, labels, className }) {
+function EditorStatusIndicator({
+  status: statusOverride,
+  labels,
+  className
+}) {
   const { saveStatus } = useEditorContext();
   const status = statusOverride ?? saveStatus;
   const mergedLabels = { ...DEFAULT_STATUS_LABELS, ...labels };
   const label = mergedLabels[status];
   if (!label) return null;
-  const classes = [
-    Editor_module.default.statusIndicator,
-    status === "error" && Editor_module.default.statusError,
-    className
-  ].filter(Boolean).join(" ");
+  const classes = [Editor_module.default.statusIndicator, status === "error" && Editor_module.default.statusError, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes, "aria-live": "polite", role: "status", children: label });
 }
 function EditorContentArea({ className }) {
@@ -578,7 +614,11 @@ function EditorContentArea({ className }) {
     }
   ) });
 }
-function EditorStatusBar({ showWordCount = true, showCharCount = true, className }) {
+function EditorStatusBar({
+  showWordCount = true,
+  showCharCount = true,
+  className
+}) {
   const { wordCount, charCount, maxLength } = useEditorContext();
   const classes = [Editor_module.default.statusBar, className].filter(Boolean).join(" ");
   const isOverLimit = maxLength !== void 0 && charCount > maxLength;

package/dist/editor.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import styles from "./components/Editor/Editor.module.scss.js";
 import { ArrowClockwise, ArrowCounterClockwise, Quotes, TextHThree, TextHTwo, TextHOne, ListNumbers, ListBullets, Code, LinkSimple, TextStrikethrough, TextItalic, TextB } from "@phosphor-icons/react";
 import { KEYBOARD_SHORTCUTS } from "./utils/keyboard-shortcuts.js";
+import { isDevelopmentBuild } from "./utils/env.js";
 let _useEditor = null;
 let _EditorContent = null;
 let _StarterKit = null;
@@ -25,7 +26,7 @@ function loadTipTapDeps() {
         _LinkExtension = linkExt.default ?? linkExt.Link ?? linkExt;
       } catch {
         _tiptapFailed = true;
-        if (process.env.NODE_ENV === "development") {
+        if (isDevelopmentBuild()) {
           console.warn(
             "[@usefragments/ui] Editor: TipTap is not installed; falling back to markdown mode. Install it with: npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-link"
           );
@@ -52,19 +53,58 @@ function useTipTapDeps() {
 const FORMAT_META = {
   bold: { icon: TextB, label: "Bold", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BOLD.label },
   italic: { icon: TextItalic, label: "Italic", shortcut: KEYBOARD_SHORTCUTS.EDITOR_ITALIC.label },
-  strikethrough: { icon: TextStrikethrough, label: "Strikethrough", shortcut: KEYBOARD_SHORTCUTS.EDITOR_STRIKETHROUGH.label },
+  strikethrough: {
+    icon: TextStrikethrough,
+    label: "Strikethrough",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_STRIKETHROUGH.label
+  },
   link: { icon: LinkSimple, label: "Link", shortcut: KEYBOARD_SHORTCUTS.EDITOR_LINK.label },
   code: { icon: Code, label: "Code", shortcut: KEYBOARD_SHORTCUTS.EDITOR_CODE.label },
-  bulletList: { icon: ListBullets, label: "Bullet list", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BULLET_LIST.label },
-  orderedList: { icon: ListNumbers, label: "Ordered list", shortcut: KEYBOARD_SHORTCUTS.EDITOR_ORDERED_LIST.label },
-  heading1: { icon: TextHOne, label: "Heading 1", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING1.label },
-  heading2: { icon: TextHTwo, label: "Heading 2", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING2.label },
-  heading3: { icon: TextHThree, label: "Heading 3", shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING3.label },
-  blockquote: { icon: Quotes, label: "Blockquote", shortcut: KEYBOARD_SHORTCUTS.EDITOR_BLOCKQUOTE.label },
-  undo: { icon: ArrowCounterClockwise, label: "Undo", shortcut: KEYBOARD_SHORTCUTS.EDITOR_UNDO.label },
+  bulletList: {
+    icon: ListBullets,
+    label: "Bullet list",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_BULLET_LIST.label
+  },
+  orderedList: {
+    icon: ListNumbers,
+    label: "Ordered list",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_ORDERED_LIST.label
+  },
+  heading1: {
+    icon: TextHOne,
+    label: "Heading 1",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING1.label
+  },
+  heading2: {
+    icon: TextHTwo,
+    label: "Heading 2",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING2.label
+  },
+  heading3: {
+    icon: TextHThree,
+    label: "Heading 3",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_HEADING3.label
+  },
+  blockquote: {
+    icon: Quotes,
+    label: "Blockquote",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_BLOCKQUOTE.label
+  },
+  undo: {
+    icon: ArrowCounterClockwise,
+    label: "Undo",
+    shortcut: KEYBOARD_SHORTCUTS.EDITOR_UNDO.label
+  },
   redo: { icon: ArrowClockwise, label: "Redo", shortcut: KEYBOARD_SHORTCUTS.EDITOR_REDO.label }
 };
-const DEFAULT_FORMATS = ["bold", "italic", "strikethrough", "link", "code", "bulletList"];
+const DEFAULT_FORMATS = [
+  "bold",
+  "italic",
+  "strikethrough",
+  "link",
+  "code",
+  "bulletList"
+];
 const ACTION_FORMATS = /* @__PURE__ */ new Set(["undo", "redo"]);
 const DEFAULT_STATUS_LABELS = {
   idle: "",
@@ -215,11 +255,7 @@ function EditorImpl({
   ...htmlProps
 }) {
   const contentRef = React.useRef(null);
-  const [value, setValue] = useControllableState(
-    controlledValue,
-    defaultValue,
-    onValueChange
-  );
+  const [value, setValue] = useControllableState(controlledValue, defaultValue, onValueChange);
   const [saveStatus, setSaveStatus] = React.useState("idle");
   const mode = hasTipTap ? "rich" : "markdown";
   const tiptapEditor = hasTipTap ? (
@@ -451,7 +487,11 @@ function EditorToolbar({ children, className }) {
   const classes = [styles.toolbar, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: classes, role: "toolbar", "aria-label": "Editor formatting", children });
 }
-function EditorToolbarGroup({ children, "aria-label": ariaLabel, className }) {
+function EditorToolbarGroup({
+  children,
+  "aria-label": ariaLabel,
+  className
+}) {
   const classes = [styles.toolbarGroup, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: classes, role: "group", "aria-label": ariaLabel, children });
 }
@@ -479,11 +519,7 @@ function EditorToolbarButton({ format, className }) {
   };
   const iconOverride = toolbarIcons == null ? void 0 : toolbarIcons[format];
   const renderedOverride = typeof iconOverride === "function" ? iconOverride(iconState) : iconOverride;
-  const classes = [
-    styles.toolbarButton,
-    active && styles.toolbarButtonActive,
-    className
-  ].filter(Boolean).join(" ");
+  const classes = [styles.toolbarButton, active && styles.toolbarButtonActive, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -502,17 +538,17 @@ function EditorSeparator({ className }) {
   const classes = [styles.separator, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: classes, role: "separator", "aria-orientation": "vertical" });
 }
-function EditorStatusIndicator({ status: statusOverride, labels, className }) {
+function EditorStatusIndicator({
+  status: statusOverride,
+  labels,
+  className
+}) {
   const { saveStatus } = useEditorContext();
   const status = statusOverride ?? saveStatus;
   const mergedLabels = { ...DEFAULT_STATUS_LABELS, ...labels };
   const label = mergedLabels[status];
   if (!label) return null;
-  const classes = [
-    styles.statusIndicator,
-    status === "error" && styles.statusError,
-    className
-  ].filter(Boolean).join(" ");
+  const classes = [styles.statusIndicator, status === "error" && styles.statusError, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("span", { className: classes, "aria-live": "polite", role: "status", children: label });
 }
 function EditorContentArea({ className }) {
@@ -537,7 +573,11 @@ function EditorContentArea({ className }) {
     }
   ) });
 }
-function EditorStatusBar({ showWordCount = true, showCharCount = true, className }) {
+function EditorStatusBar({
+  showWordCount = true,
+  showCharCount = true,
+  className
+}) {
   const { wordCount, charCount, maxLength } = useEditorContext();
   const classes = [styles.statusBar, className].filter(Boolean).join(" ");
   const isOverLimit = maxLength !== void 0 && charCount > maxLength;