@usefragments/ui 1.6.0 → 2.0.0

package/dist/datepicker.cjs

@@ -30,6 +30,7 @@ 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) {
@@ -156,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"
           );
@@ -291,6 +292,11 @@ const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
     [selectedRangeProp, onRangeSelect]
   );
   const defaultPlaceholder = mode === "range" ? "Select date range" : "Pick a date";
+  const { labelId, helperId, errorId, hasError, errorMessage } = aria.useFormFieldIds("datepicker", {
+    label,
+    helperText,
+    error
+  });
   const contextValue = React__namespace.useMemo(
     () => ({
       mode,
@@ -310,7 +316,8 @@ const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
       setIsOpen: handleOpenChange,
       isControlledOpen,
       size,
-      name
+      name,
+      invalid: hasError
     }),
     [
       mode,
@@ -333,18 +340,14 @@ const DatePickerRoot = React__namespace.forwardRef(function DatePickerRoot2({
       handleOpenChange,
       isControlledOpen,
       size,
-      name
+      name,
+      hasError
     ]
   );
-  const { labelId, helperId, errorId, hasError, errorMessage } = aria.useFormFieldIds("datepicker", {
-    label,
-    helperText,
-    error
-  });
   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 }),
@@ -382,10 +385,20 @@ function DatePickerTrigger({
   } else if (ctx.mode === "range" && ((_a = ctx.selectedRange) == null ? void 0 : _a.from)) {
     displayText = ctx.formatRange(ctx.selectedRange);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Trigger, { ...htmlProps, type, className: classes, disabled: ctx.disabled, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: DatePicker_module.default.triggerIcon, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: displayText ? DatePicker_module.default.triggerValue : DatePicker_module.default.triggerPlaceholder, children: displayText ?? placeholderText })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    popover.Popover.Trigger,
+    {
+      ...htmlProps,
+      type,
+      className: classes,
+      disabled: ctx.disabled,
+      "aria-invalid": ctx.invalid || void 0,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: DatePicker_module.default.triggerIcon, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: displayText ? DatePicker_module.default.triggerValue : DatePicker_module.default.triggerPlaceholder, children: displayText ?? placeholderText })
+      ] })
+    }
+  );
 }
 function DatePickerContent({
   children,

package/dist/datepicker.js

@@ -6,6 +6,7 @@ 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",
@@ -115,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"
           );
@@ -250,6 +251,11 @@ const DatePickerRoot = React.forwardRef(function DatePickerRoot2({
     [selectedRangeProp, onRangeSelect]
   );
   const defaultPlaceholder = mode === "range" ? "Select date range" : "Pick a date";
+  const { labelId, helperId, errorId, hasError, errorMessage } = useFormFieldIds("datepicker", {
+    label,
+    helperText,
+    error
+  });
   const contextValue = React.useMemo(
     () => ({
       mode,
@@ -269,7 +275,8 @@ const DatePickerRoot = React.forwardRef(function DatePickerRoot2({
       setIsOpen: handleOpenChange,
       isControlledOpen,
       size,
-      name
+      name,
+      invalid: hasError
     }),
     [
       mode,
@@ -292,18 +299,14 @@ const DatePickerRoot = React.forwardRef(function DatePickerRoot2({
       handleOpenChange,
       isControlledOpen,
       size,
-      name
+      name,
+      hasError
     ]
   );
-  const { labelId, helperId, errorId, hasError, errorMessage } = useFormFieldIds("datepicker", {
-    label,
-    helperText,
-    error
-  });
   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 }),
@@ -341,10 +344,20 @@ function DatePickerTrigger({
   } else if (ctx.mode === "range" && ((_a = ctx.selectedRange) == null ? void 0 : _a.from)) {
     displayText = ctx.formatRange(ctx.selectedRange);
   }
-  return /* @__PURE__ */ jsx(Popover.Trigger, { ...htmlProps, type, className: classes, disabled: ctx.disabled, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
-    /* @__PURE__ */ jsx("span", { className: displayText ? styles.triggerValue : styles.triggerPlaceholder, children: displayText ?? placeholderText })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Popover.Trigger,
+    {
+      ...htmlProps,
+      type,
+      className: classes,
+      disabled: ctx.disabled,
+      "aria-invalid": ctx.invalid || void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
+        /* @__PURE__ */ jsx("span", { className: displayText ? styles.triggerValue : styles.triggerPlaceholder, children: displayText ?? placeholderText })
+      ] })
+    }
+  );
 }
 function DatePickerContent({
   children,

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;

package/dist/index.cjs

@@ -67,6 +67,7 @@ const index$V = require("./components/ThinkingIndicator/index.cjs");
 const chart = require("./chart.cjs");
 const fragmentsLogo = require("./assets/fragments-logo.cjs");
 const fragmentsWordmark = require("./assets/fragments-wordmark.cjs");
+const navGlyph = require("./assets/nav-glyph.cjs");
 const index$W = require("./components/NavigationMenu/index.cjs");
 const index$X = require("./components/Drawer/index.cjs");
 const index$Y = require("./components/Pagination/index.cjs");
@@ -77,6 +78,7 @@ const keyboardShortcuts = require("./utils/keyboard-shortcuts.cjs");
 const seedDerivation = require("./utils/seed-derivation.cjs");
 const themePresets = require("./utils/theme-presets.cjs");
 const index$y = require("./components/ThemeToggle/index.cjs");
+const ThemeButton = require("./components/ThemeToggle/ThemeButton.cjs");
 const context = require("./components/Theme/context.cjs");
 if (typeof window !== "undefined") {
   cssWarning.checkCssLoaded();
@@ -92,7 +94,6 @@ exports.CardHeader = index$3.CardHeader;
 exports.CardRoot = index$3.CardRoot;
 exports.CardTitle = index$3.CardTitle;
 exports.Switch = index$4.Switch;
-exports.Toggle = index$4.Switch;
 exports.Alert = index$5.Alert;
 exports.AlertAction = index$5.AlertAction;
 exports.AlertActions = index$5.AlertActions;
@@ -228,6 +229,8 @@ exports.useChartConfig = chart.useChartConfig;
 exports.FragmentsLogo = fragmentsLogo.FragmentsLogo;
 exports.fragmentsLogoSvg = fragmentsLogo.fragmentsLogoSvg;
 exports.FragmentsWordmark = fragmentsWordmark.FragmentsWordmark;
+exports.NAV_GLYPH_NAMES = navGlyph.NAV_GLYPH_NAMES;
+exports.NavGlyph = navGlyph.NavGlyph;
 exports.NavigationMenu = index$W.NavigationMenu;
 exports.NavigationMenuContent = index$W.NavigationMenuContent;
 exports.NavigationMenuIndicator = index$W.NavigationMenuIndicator;
@@ -252,7 +255,7 @@ exports.EditorToolbar = editor.EditorToolbar;
 exports.EditorToolbarButton = editor.EditorToolbarButton;
 exports.EditorToolbarGroup = editor.EditorToolbarGroup;
 exports.useEditorContext = editor.useEditorContext;
-exports.A11yVisuallyHidden = a11y.VisuallyHidden;
+exports.A11yVisuallyHidden = a11y.A11yVisuallyHidden;
 exports.handleArrowNavigation = a11y.handleArrowNavigation;
 exports.useAnnounce = a11y.useAnnounce;
 exports.useFocusTrap = a11y.useFocusTrap;
@@ -289,4 +292,5 @@ exports.PRESET_DEFINITIONS = themePresets.PRESET_DEFINITIONS;
 exports.generatePreset = themePresets.generatePreset;
 exports.seedsToTheme = themePresets.seedsToTheme;
 exports.ThemeToggle = index$y.ThemeToggle;
+exports.ThemeButton = ThemeButton.ThemeButton;
 exports.useTheme = context.useTheme;

package/dist/index.d.ts

@@ -3,8 +3,8 @@ export { Input, type InputProps } from "./components/Input";
 export { Textarea, type TextareaProps } from "./components/Textarea";
 export { Card, CardRoot, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardBodyProps, type CardFooterProps, } from "./components/Card";
 export { Switch, type SwitchProps } from "./components/Switch";
-export { Alert, AlertRoot, AlertIcon, AlertBody, AlertTitle, AlertContent, AlertActions, AlertAction, AlertClose, type AlertProps, type AlertSeverity, type AlertIconProps, type AlertBodyProps, type AlertTitleProps, type AlertContentProps, type AlertActionsProps, type AlertActionProps, type AlertCloseProps, } from "./components/Alert";
-export { Badge, type BadgeProps } from "./components/Badge";
+export { Alert, AlertRoot, AlertIcon, AlertBody, AlertTitle, AlertContent, AlertActions, AlertAction, AlertClose, type AlertProps, type AlertTone, type AlertIconProps, type AlertBodyProps, type AlertTitleProps, type AlertContentProps, type AlertActionsProps, type AlertActionProps, type AlertCloseProps, } from "./components/Alert";
+export { Badge, type BadgeProps, type BadgeTone, type BadgeVariant } from "./components/Badge";
 export { IconButton, type IconButtonProps } from "./components/IconButton";
 export { ComponentDefaultsProvider, useComponentDefaults, useResolvedControlSize, type ComponentDefaults, type ComponentDefaultsProviderProps, type ControlSize, } from "./components/ComponentDefaults";
 export { Avatar, type AvatarProps, type AvatarGroupProps, type AvatarSize, } from "./components/Avatar";
@@ -23,18 +23,18 @@ export { RadioGroup, type RadioGroupProps, type RadioItemProps } from "./compone
 export { Grid, type GridProps, type GridItemProps, type ResponsiveColumns, } from "./components/Grid";
 export { BentoGrid, type BentoGridProps, type BentoGridItemProps, type ResponsiveSpan, } from "./components/BentoGrid";
 export { Separator, type SeparatorProps } from "./components/Separator";
-export { Skeleton, type SkeletonProps, type SkeletonTextProps, type SkeletonVariant, type SkeletonSize, } from "./components/Skeleton";
-export { Loading, LoadingRoot, LoadingInline, LoadingScreen, type LoadingProps, type LoadingSize, type LoadingVariant, type LoadingInlineProps, type LoadingScreenProps, } from "./components/Loading";
+export { Skeleton, type SkeletonProps, type SkeletonTextProps, type SkeletonShape, type SkeletonSize, } from "./components/Skeleton";
+export { Loading, LoadingRoot, LoadingInline, LoadingScreen, type LoadingProps, type LoadingSize, type LoadingKind, type LoadingInlineProps, type LoadingScreenProps, } from "./components/Loading";
 export { Table, type TableProps, type TableRowProps, type TableCellProps, type TableHeaderCellProps, type TableCaptionProps, } from "./components/Table";
 export { DataTable, createColumns, type DataTableProps, type DataTableColumn, type ColumnDef, type ColumnAlign, type DataTableDensity, type SortingState, type RowSelectionState, type ExpandedState, } from "./components/DataTable";
 export { EmptyState, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, type EmptyStateProps, type EmptyStateIconProps, type EmptyStateTitleProps, type EmptyStateDescriptionProps, type EmptyStateActionsProps, } from "./components/EmptyState";
-export { Toast, ToastProvider, useToast, type ToastProps, type ToastProviderProps, type ToastData, type ToastVariant, type ToastPosition, } from "./components/Toast";
+export { Toast, ToastProvider, useToast, type ToastProps, type ToastProviderProps, type ToastData, type ToastTone, type ToastPosition, } from "./components/Toast";
 export { Field, type FieldProps, type FieldLabelProps, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldValidityProps, type FieldRequiredProps, } from "./components/Field";
 export { Fieldset, type FieldsetProps, type FieldsetLegendProps, type FieldsetDescriptionProps, } from "./components/Fieldset";
 export { Form, type FormActionsProps, type FormProps } from "./components/Form";
 export { Sidebar, SidebarProvider, useSidebar, useSidebarContext, // deprecated, use useSidebar instead
 type SidebarProviderProps, type SidebarProps, type SidebarHeaderProps, type SidebarNavProps, type SidebarSectionProps, type SidebarSectionActionProps, type SidebarItemProps, type SidebarSubItemProps, type SidebarFooterProps, type SidebarTriggerProps, type SidebarOverlayProps, type SidebarCollapseToggleProps, type SidebarRailProps, type SidebarMenuSkeletonProps, type SidebarCollapsible, } from "./components/Sidebar";
-export { Theme, ThemeProvider, ThemeToggle, useTheme, configureTheme, type ThemeProviderProps, type ThemeToggleProps, type ThemeMode, type UseThemeReturn, type ConfigureThemeOptions, type NeutralPalette, type DensityPreset, type RadiusStyle, } from "./components/Theme";
+export { Theme, ThemeProvider, ThemeToggle, ThemeButton, useTheme, configureTheme, type ThemeProviderProps, type ThemeToggleProps, type ThemeButtonProps, type ThemeMode, type UseThemeReturn, type ConfigureThemeOptions, type NeutralPalette, type RadiusStyle, } from "./components/Theme";
 export { Header, type HeaderProps, type HeaderBrandProps, type HeaderNavProps, type HeaderNavItemProps, type HeaderSearchProps, type HeaderActionsProps, type HeaderTriggerProps, type HeaderMobileNavProps, } from "./components/Header";
 export { AppShell, type AppShellProps, type AppShellLayout, type AppShellSlotVariant, type AppShellHeaderProps, type AppShellSidebarProps, type AppShellMainProps, type AppShellAsideProps, } from "./components/AppShell";
 export { Stack, type StackProps, type ResponsiveDirection, type ResponsiveGap, } from "./components/Stack";
@@ -61,18 +61,18 @@ export { VisuallyHidden, type VisuallyHiddenProps } from "./components/VisuallyH
 export { Markdown, type MarkdownProps } from "./components/Markdown";
 export { Message, MessageRoot, MessageContent, MessageActions, MessageTimestamp, MessageAvatar, useMessageContext, type MessageProps, type MessageRole, type MessageStatus, type MessageContentProps, type MessageActionsProps, type MessageTimestampProps, type MessageAvatarProps, } from "./components/Message";
 export { ConversationList, ConversationListRoot, DateSeparator, TypingIndicator, useConversationList, type ConversationListProps, type AutoScrollBehavior, type DateSeparatorProps, type TypingIndicatorProps, } from "./components/ConversationList";
-export { ThinkingIndicator, ThinkingIndicatorRoot, ThinkingSteps, ThinkingStep, useThinkingIndicatorContext, type ThinkingIndicatorProps, type ThinkingVariant, type ThinkingStep as ThinkingStepType, type StepStatus, type ThinkingStepsProps, type ThinkingStepProps, } from "./components/ThinkingIndicator";
+export { ThinkingIndicator, ThinkingIndicatorRoot, ThinkingSteps, ThinkingStep, useThinkingIndicatorContext, type ThinkingIndicatorProps, type ThinkingKind, type ThinkingStep as ThinkingStepType, type StepStatus, type ThinkingStepsProps, type ThinkingStepProps, } from "./components/ThinkingIndicator";
 export { Chart, ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, useChartConfig, type ChartConfig, type ChartContainerProps, type ChartTooltipContentProps, type ChartLegendContentProps, } from "./components/Chart";
 export { FragmentsLogo, fragmentsLogoSvg, type FragmentsLogoProps } from "./assets/fragments-logo";
 export { FragmentsWordmark, type FragmentsWordmarkProps } from "./assets/fragments-wordmark";
+export { NavGlyph, NAV_GLYPH_NAMES, type NavGlyphName, type NavGlyphProps, } from "./assets/nav-glyph";
 export { NavigationMenu, NavigationMenuRoot, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, NavigationMenuMobileContent, NavigationMenuMobileSection, type NavigationMenuProps, type NavigationMenuListProps, type NavigationMenuItemProps, type NavigationMenuTriggerProps, type NavigationMenuContentProps, type NavigationMenuLinkProps, type NavigationMenuIndicatorProps, type NavigationMenuViewportProps, type NavigationMenuMobileContentProps, type NavigationMenuMobileSectionProps, } from "./components/NavigationMenu";
 export { Drawer, type DrawerProps, type DrawerContentProps, type DrawerTriggerProps, type DrawerHeaderProps, type DrawerTitleProps, type DrawerDescriptionProps, type DrawerBodyProps, type DrawerFooterProps, type DrawerCloseProps, type DrawerSwipeAreaProps, } from "./components/Drawer";
 export { Pagination, type PaginationProps, type PaginationItemProps, } from "./components/Pagination";
 export { Command, type CommandProps, type CommandInputProps, type CommandListProps, type CommandItemProps, type CommandGroupProps, type CommandEmptyProps, type CommandSeparatorProps, } from "./components/Command";
 export { Editor, EditorRoot, EditorToolbar, EditorToolbarGroup, EditorToolbarButton, EditorSeparator, EditorStatusIndicator, EditorContentArea, EditorStatusBar, useEditorContext, type EditorProps, type EditorFormat, type EditorSaveStatus, type EditorMode, type EditorSize, type EditorToolbarProps, type EditorToolbarGroupProps, type EditorToolbarButtonProps, type EditorSeparatorProps, type EditorStatusIndicatorProps, type EditorContentProps, type EditorStatusBarProps, } from "./components/Editor";
-export { useId, useAnnounce, usePrefersReducedMotion, usePrefersContrast, useFocusTrap, handleArrowNavigation, VisuallyHidden as A11yVisuallyHidden, type VisuallyHiddenProps as A11yVisuallyHiddenProps, } from "./utils/a11y";
+export { useId, useAnnounce, usePrefersReducedMotion, usePrefersContrast, useFocusTrap, handleArrowNavigation, A11yVisuallyHidden, type A11yVisuallyHiddenProps, } from "./utils/a11y";
 export { KEYBOARD_SHORTCUTS, matchesShortcut, getShortcutLabel, findConflicts, getShortcuts, isEditableElement, configureShortcuts, getResolvedShortcut, resetShortcutOverrides, useKeyboardShortcut, type KeyboardShortcut, type ShortcutName, type UseKeyboardShortcutOptions, } from "./utils/keyboard-shortcuts";
 export { type SeedConfig, PALETTES, RADIUS_STYLES, PALETTE_SEMANTIC_COLORS, DEFAULT_SEEDS, getSemanticColors, deriveText, deriveSurfaces, deriveBorders, deriveShadows, deriveAccentHover, deriveAccentActive, deriveDarkAccent, deriveSemanticText, deriveSemanticBg, deriveSemanticHover, } from "./utils/seed-derivation";
 export { PRESETS, PRESET_DEFINITIONS, generatePreset, seedsToTheme, type ThemeConfig, type PresetDefinition, } from "./utils/theme-presets";
-export { Switch as Toggle, type SwitchProps as ToggleProps } from "./components/Switch";
 //# sourceMappingURL=index.d.ts.map