@usefragments/ui 1.3.0 → 1.3.2

package/dist/components/Slider/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/Slider/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Field } from "@base-ui/react/field";

package/dist/components/TableOfContents/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/TableOfContents/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./TableOfContents.module.scss.js";

package/dist/components/Tabs/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/Tabs/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";

package/dist/components/Theme/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/Theme/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ComponentDefaultsProvider, useResolvedControlSize } from "../ComponentDefaults/index.js";

package/dist/components/ThinkingIndicator/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/ThinkingIndicator/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./ThinkingIndicator.module.scss.js";

package/dist/components/Toast/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/Toast/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./Toast.module.scss.js";

package/dist/components/Toggle/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/Toggle/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Switch as Switch$1 } from "@base-ui/react/switch";

package/dist/components/ToggleGroup/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/ToggleGroup/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useResolvedControlSize } from "../ComponentDefaults/index.js";

package/dist/components/Tooltip/index.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/components/Tooltip/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";

package/dist/data-table-virtual.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/data-table-virtual.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";

package/dist/data-table.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/data-table.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createElement } from "react";

package/dist/datepicker.cjs

@@ -1,10 +1,9 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const popover = require("@base-ui/react/popover");
-const reactDayPicker = require("react-day-picker");
-const dateFns = require("date-fns");
 const aria = require("./utils/aria.cjs");
 const index = require("./components/ComponentDefaults/index.cjs");
 const DatePicker_module = require("./components/DatePicker/DatePicker.module.scss.cjs");
@@ -92,13 +91,23 @@ function useDatePickerContext() {
   }
   return context;
 }
+const longDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "long",
+  day: "numeric",
+  year: "numeric"
+});
+const mediumDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "2-digit",
+  year: "numeric"
+});
 function defaultFormatDate(date) {
-  return dateFns.format(date, "PPP");
+  return longDateFormatter.format(date);
 }
 function defaultFormatRange(range) {
   if (!range.from) return "";
-  if (!range.to) return dateFns.format(range.from, "LLL dd, y");
-  return `${dateFns.format(range.from, "LLL dd, y")} - ${dateFns.format(range.to, "LLL dd, y")}`;
+  if (!range.to) return mediumDateFormatter.format(range.from);
+  return `${mediumDateFormatter.format(range.from)} - ${mediumDateFormatter.format(range.to)}`;
 }
 function formatDateForHiddenInput(date) {
   if (!date) return "";
@@ -107,32 +116,54 @@ function formatDateForHiddenInput(date) {
   const day = String(date.getDate()).padStart(2, "0");
   return `${year}-${month}-${day}`;
 }
+let _DayPicker = null;
+let _UI = null;
+let _SelectionState = null;
+let _DayFlag = null;
+let _rdpLoaded = false;
+let _rdpFailed = false;
+function loadDayPickerDeps() {
+  if (_rdpLoaded) return;
+  _rdpLoaded = true;
+  try {
+    const rdp = require("react-day-picker");
+    _DayPicker = rdp.DayPicker;
+    _UI = rdp.UI;
+    _SelectionState = rdp.SelectionState;
+    _DayFlag = rdp.DayFlag;
+  } catch {
+    _rdpFailed = true;
+  }
+}
 function getCalendarClassNames() {
+  const UI = _UI;
+  const SelectionState = _SelectionState;
+  const DayFlag = _DayFlag;
   return {
-    [reactDayPicker.UI.Root]: DatePicker_module.default.calendar,
-    [reactDayPicker.UI.Months]: DatePicker_module.default.months,
-    [reactDayPicker.UI.Month]: DatePicker_module.default.month,
-    [reactDayPicker.UI.MonthCaption]: DatePicker_module.default.monthCaption,
-    [reactDayPicker.UI.CaptionLabel]: DatePicker_module.default.captionLabel,
-    [reactDayPicker.UI.Nav]: DatePicker_module.default.nav,
-    [reactDayPicker.UI.PreviousMonthButton]: DatePicker_module.default.navButton,
-    [reactDayPicker.UI.NextMonthButton]: DatePicker_module.default.navButton,
-    [reactDayPicker.UI.MonthGrid]: DatePicker_module.default.monthGrid,
-    [reactDayPicker.UI.Weekdays]: DatePicker_module.default.weekdays,
-    [reactDayPicker.UI.Weekday]: DatePicker_module.default.weekday,
-    [reactDayPicker.UI.Weeks]: DatePicker_module.default.weeks,
-    [reactDayPicker.UI.Week]: DatePicker_module.default.week,
-    [reactDayPicker.UI.Day]: DatePicker_module.default.day,
-    [reactDayPicker.UI.DayButton]: DatePicker_module.default.dayButton,
-    [reactDayPicker.UI.Chevron]: DatePicker_module.default.chevron,
-    [reactDayPicker.SelectionState.selected]: DatePicker_module.default.selected,
-    [reactDayPicker.SelectionState.range_start]: DatePicker_module.default.rangeStart,
-    [reactDayPicker.SelectionState.range_middle]: DatePicker_module.default.rangeMiddle,
-    [reactDayPicker.SelectionState.range_end]: DatePicker_module.default.rangeEnd,
-    [reactDayPicker.DayFlag.today]: DatePicker_module.default.today,
-    [reactDayPicker.DayFlag.outside]: DatePicker_module.default.outside,
-    [reactDayPicker.DayFlag.disabled]: DatePicker_module.default.disabled,
-    [reactDayPicker.DayFlag.focused]: DatePicker_module.default.focused
+    [UI.Root]: DatePicker_module.default.calendar,
+    [UI.Months]: DatePicker_module.default.months,
+    [UI.Month]: DatePicker_module.default.month,
+    [UI.MonthCaption]: DatePicker_module.default.monthCaption,
+    [UI.CaptionLabel]: DatePicker_module.default.captionLabel,
+    [UI.Nav]: DatePicker_module.default.nav,
+    [UI.PreviousMonthButton]: DatePicker_module.default.navButton,
+    [UI.NextMonthButton]: DatePicker_module.default.navButton,
+    [UI.MonthGrid]: DatePicker_module.default.monthGrid,
+    [UI.Weekdays]: DatePicker_module.default.weekdays,
+    [UI.Weekday]: DatePicker_module.default.weekday,
+    [UI.Weeks]: DatePicker_module.default.weeks,
+    [UI.Week]: DatePicker_module.default.week,
+    [UI.Day]: DatePicker_module.default.day,
+    [UI.DayButton]: DatePicker_module.default.dayButton,
+    [UI.Chevron]: DatePicker_module.default.chevron,
+    [SelectionState.selected]: DatePicker_module.default.selected,
+    [SelectionState.range_start]: DatePicker_module.default.rangeStart,
+    [SelectionState.range_middle]: DatePicker_module.default.rangeMiddle,
+    [SelectionState.range_end]: DatePicker_module.default.rangeEnd,
+    [DayFlag.today]: DatePicker_module.default.today,
+    [DayFlag.outside]: DatePicker_module.default.outside,
+    [DayFlag.disabled]: DatePicker_module.default.disabled,
+    [DayFlag.focused]: DatePicker_module.default.focused
   };
 }
 const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
@@ -339,12 +370,18 @@ function DatePickerCalendar({
     }),
     []
   );
+  loadDayPickerDeps();
+  if (_rdpFailed || !_DayPicker || !_UI) {
+    return null;
+  }
+  const DayPicker = _DayPicker;
+  const UI = _UI;
   const calendarClassNames = getCalendarClassNames();
-  const calendarClasses = className ? { ...calendarClassNames, [reactDayPicker.UI.Root]: [DatePicker_module.default.calendar, className].join(" ") } : calendarClassNames;
+  const calendarClasses = className ? { ...calendarClassNames, [UI.Root]: [DatePicker_module.default.calendar, className].join(" ") } : calendarClassNames;
   if (ctx.mode === "range") {
     const rangeSelected = ctx.selectedRange ? { from: ctx.selectedRange.from ?? void 0, to: ctx.selectedRange.to ?? void 0 } : void 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      reactDayPicker.DayPicker,
+      DayPicker,
       {
         mode: "range",
         selected: rangeSelected,
@@ -364,7 +401,7 @@ function DatePickerCalendar({
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactDayPicker.DayPicker,
+    DayPicker,
     {
       mode: "single",
       selected: ctx.selected ?? void 0,

package/dist/datepicker.js

@@ -1,8 +1,7 @@
+"use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover } from "@base-ui/react/popover";
-import { UI, DayPicker, DayFlag, SelectionState } from "react-day-picker";
-import { format } from "date-fns";
 import { useFormFieldIds } from "./utils/aria.js";
 import { useResolvedControlSize } from "./components/ComponentDefaults/index.js";
 import styles from "./components/DatePicker/DatePicker.module.scss.js";
@@ -73,13 +72,23 @@ function useDatePickerContext() {
   }
   return context;
 }
+const longDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "long",
+  day: "numeric",
+  year: "numeric"
+});
+const mediumDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "2-digit",
+  year: "numeric"
+});
 function defaultFormatDate(date) {
-  return format(date, "PPP");
+  return longDateFormatter.format(date);
 }
 function defaultFormatRange(range) {
   if (!range.from) return "";
-  if (!range.to) return format(range.from, "LLL dd, y");
-  return `${format(range.from, "LLL dd, y")} - ${format(range.to, "LLL dd, y")}`;
+  if (!range.to) return mediumDateFormatter.format(range.from);
+  return `${mediumDateFormatter.format(range.from)} - ${mediumDateFormatter.format(range.to)}`;
 }
 function formatDateForHiddenInput(date) {
   if (!date) return "";
@@ -88,7 +97,29 @@ function formatDateForHiddenInput(date) {
   const day = String(date.getDate()).padStart(2, "0");
   return `${year}-${month}-${day}`;
 }
+let _DayPicker = null;
+let _UI = null;
+let _SelectionState = null;
+let _DayFlag = null;
+let _rdpLoaded = false;
+let _rdpFailed = false;
+function loadDayPickerDeps() {
+  if (_rdpLoaded) return;
+  _rdpLoaded = true;
+  try {
+    const rdp = require("react-day-picker");
+    _DayPicker = rdp.DayPicker;
+    _UI = rdp.UI;
+    _SelectionState = rdp.SelectionState;
+    _DayFlag = rdp.DayFlag;
+  } catch {
+    _rdpFailed = true;
+  }
+}
 function getCalendarClassNames() {
+  const UI = _UI;
+  const SelectionState = _SelectionState;
+  const DayFlag = _DayFlag;
   return {
     [UI.Root]: styles.calendar,
     [UI.Months]: styles.months,
@@ -320,6 +351,12 @@ function DatePickerCalendar({
     }),
     []
   );
+  loadDayPickerDeps();
+  if (_rdpFailed || !_DayPicker || !_UI) {
+    return null;
+  }
+  const DayPicker = _DayPicker;
+  const UI = _UI;
   const calendarClassNames = getCalendarClassNames();
   const calendarClasses = className ? { ...calendarClassNames, [UI.Root]: [styles.calendar, className].join(" ") } : calendarClassNames;
   if (ctx.mode === "range") {

package/dist/editor.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/editor.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./components/Editor/Editor.module.scss.js";

package/dist/markdown.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/markdown.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./components/Markdown/Markdown.module.scss.js";

package/dist/table.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/table.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import styles from "./components/Table/Table.module.scss.js";

package/dist/utils/a11y.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");

package/dist/utils/a11y.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 let idCounter = 0;

package/dist/utils/keyboard-shortcuts.cjs

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");

package/dist/utils/keyboard-shortcuts.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useEffect } from "react";
 const KEYBOARD_SHORTCUTS = {
   // ----- Sidebar -----

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefragments/ui",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -233,6 +233,7 @@
     "react-colorful": "^5.6.1",
     "react-day-picker": "^9.0.0",
     "react-dom": "^19.0.0",
+    "rollup-plugin-preserve-directives": "0.4.0",
     "sass": "^1.83.0",
     "shiki": "^3.0.0",
     "storybook": "^8",
@@ -261,7 +262,7 @@
   ],
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "vite build && tsc -p tsconfig.build.json",
+    "build": "vite build && node ./scripts/emit-complete-styles.mjs && tsc -p tsconfig.build.json",
     "lint": "eslint src",
     "test": "vitest run",
     "build-storybook": "storybook build",

package/src/components/DatePicker/index.tsx

@@ -2,8 +2,6 @@
 
 import * as React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
-import { DayFlag, DayPicker, SelectionState, UI } from "react-day-picker";
-import { format as formatDateWithPattern } from "date-fns";
 import { useFormFieldIds, type FormFieldProps } from "../../utils/aria";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import styles from "./DatePicker.module.scss";
@@ -186,15 +184,30 @@ function useDatePickerContext() {
 // ============================================
 // Default formatters
 // ============================================
+//
+// Zero-dependency `Intl.DateTimeFormat` so the default trigger label needs no
+// optional peer. `date-fns` remains an optional peer only for consumers who pass
+// their own `formatDate`/`formatRange`; the default path never imports it, so a
+// bundler that pulls DatePicker into the graph does not fail on a missing peer.
+const longDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "long",
+  day: "numeric",
+  year: "numeric",
+});
+const mediumDateFormatter = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "2-digit",
+  year: "numeric",
+});
 
 function defaultFormatDate(date: Date): string {
-  return formatDateWithPattern(date, "PPP");
+  return longDateFormatter.format(date);
 }
 
 function defaultFormatRange(range: DateRange): string {
   if (!range.from) return "";
-  if (!range.to) return formatDateWithPattern(range.from, "LLL dd, y");
-  return `${formatDateWithPattern(range.from, "LLL dd, y")} - ${formatDateWithPattern(range.to, "LLL dd, y")}`;
+  if (!range.to) return mediumDateFormatter.format(range.from);
+  return `${mediumDateFormatter.format(range.from)} - ${mediumDateFormatter.format(range.to)}`;
 }
 
 function formatDateForHiddenInput(date?: Date): string {
@@ -205,11 +218,48 @@ function formatDateForHiddenInput(date?: Date): string {
   return `${year}-${month}-${day}`;
 }
 
+// ============================================
+// Lazy-loaded dependency (react-day-picker)
+// ============================================
+//
+// Loaded on demand via require() so the barrel never statically references the
+// optional `react-day-picker` peer. Importing anything else from
+// @usefragments/ui must not drag the calendar (or its transitive `date-fns`
+// dependency) into a consumer's build graph. Mirrors the Chart/recharts pattern.
+
+type DayPickerComponent = React.ComponentType<Record<string, unknown>>;
+type RdpEnum = Record<string, string>;
+
+let _DayPicker: DayPickerComponent | null = null;
+let _UI: RdpEnum | null = null;
+let _SelectionState: RdpEnum | null = null;
+let _DayFlag: RdpEnum | null = null;
+let _rdpLoaded = false;
+let _rdpFailed = false;
+
+function loadDayPickerDeps(): void {
+  if (_rdpLoaded) return;
+  _rdpLoaded = true;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const rdp = require("react-day-picker");
+    _DayPicker = rdp.DayPicker as DayPickerComponent;
+    _UI = rdp.UI as RdpEnum;
+    _SelectionState = rdp.SelectionState as RdpEnum;
+    _DayFlag = rdp.DayFlag as RdpEnum;
+  } catch {
+    _rdpFailed = true;
+  }
+}
+
 // ============================================
 // ClassNames mapping (built lazily)
 // ============================================
 
 function getCalendarClassNames() {
+  const UI = _UI!;
+  const SelectionState = _SelectionState!;
+  const DayFlag = _DayFlag!;
   return {
     [UI.Root]: styles.calendar,
     [UI.Months]: styles.months,
@@ -517,6 +567,15 @@ function DatePickerCalendar({
     []
   );
 
+  loadDayPickerDeps();
+  if (_rdpFailed || !_DayPicker || !_UI) {
+    // react-day-picker is an optional peer: render nothing rather than crash
+    // when a consumer mounts <DatePicker> without installing the calendar dep.
+    return null;
+  }
+  const DayPicker = _DayPicker;
+  const UI = _UI;
+
   const calendarClassNames = getCalendarClassNames();
 
   const calendarClasses = className