@fragments-sdk/ui 0.13.0 → 0.14.0

package/dist/components/Drawer/index.cjs

@@ -1,8 +1,32 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const dialog = require("@base-ui/react/dialog");
 const Drawer_module = require("./Drawer.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function getAsChildElement(children, componentName) {
+  if (!React__namespace.isValidElement(children)) {
+    throw new Error(`${componentName} with asChild requires a single valid React element child.`);
+  }
+  return children;
+}
 function CloseIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -49,7 +73,8 @@ function DrawerTrigger({
   ...htmlProps
 }) {
   if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { ...htmlProps, className, render: children, children: null });
+    const child = getAsChildElement(children, "Drawer.Trigger");
+    return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { ...htmlProps, className, render: child, children: null });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Trigger, { ...htmlProps, className, children });
 }
@@ -58,6 +83,7 @@ function DrawerContent({
   side = "right",
   size = "md",
   backdrop = true,
+  initialFocus = true,
   className,
   ...htmlProps
 }) {
@@ -69,7 +95,7 @@ function DrawerContent({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
     backdrop && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { className: Drawer_module.default.backdrop }),
-    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Popup, { initialFocus: true, ...htmlProps, "data-side": side, className: popupClasses, children })
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Popup, { initialFocus, ...htmlProps, "data-side": side, className: popupClasses, children })
   ] });
 }
 function DrawerHeader({ children, className, ...htmlProps }) {
@@ -106,13 +132,14 @@ function DrawerClose({ children, asChild, className, ...htmlProps }) {
     );
   }
   if (asChild) {
+    const child = getAsChildElement(children, "Drawer.Close");
     return /* @__PURE__ */ jsxRuntime.jsx(
       dialog.Dialog.Close,
       {
         ...htmlProps,
         "data-drawer-close": true,
         className,
-        render: children,
+        render: child,
         children: null
       }
     );

package/dist/components/Drawer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport styles from './Drawer.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Slide-in panel for navigation, forms, or supplementary content.\n * @see https://usefragments.com/components/drawer\n */\nexport interface DrawerProps {\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the drawer blocks interaction with the rest of the page.\n   * @default true */\n  modal?: boolean;\n}\n\nexport interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Which edge the drawer slides from.\n   * @default \"right\" */\n  side?: 'left' | 'right' | 'top' | 'bottom';\n  /** Drawer width (for left/right) or height (for top/bottom).\n   * @default \"md\"\n   * @see https://usefragments.com/components/drawer#sizes */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  /** Whether to show the backdrop overlay (default: true). Set to false for non-modal bottom panels. */\n  backdrop?: boolean;\n}\n\nexport interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  asChild?: boolean;\n}\n\n// ============================================\n// Close Icon\n// ============================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction DrawerRoot({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = true,\n}: DrawerProps) {\n  return (\n    <BaseDialog.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      {children}\n    </BaseDialog.Root>\n  );\n}\n\nfunction DrawerTrigger({\n  children,\n  asChild,\n  className,\n  ...htmlProps\n}: DrawerTriggerProps) {\n  if (asChild) {\n    return (\n      <BaseDialog.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>\n        {null}\n      </BaseDialog.Trigger>\n    );\n  }\n\n  return (\n    <BaseDialog.Trigger {...htmlProps} className={className}>\n      {children}\n    </BaseDialog.Trigger>\n  );\n}\n\nfunction DrawerContent({\n  children,\n  side = 'right',\n  size = 'md',\n  backdrop = true,\n  className,\n  ...htmlProps\n}: DrawerContentProps) {\n  const popupClasses = [\n    styles.popup,\n    styles[`side-${side}`],\n    styles[`size-${size}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <BaseDialog.Portal>\n      {backdrop && <BaseDialog.Backdrop className={styles.backdrop} />}\n      <BaseDialog.Popup initialFocus {...htmlProps} data-side={side} className={popupClasses}>\n        {children}\n      </BaseDialog.Popup>\n    </BaseDialog.Portal>\n  );\n}\n\nfunction DrawerHeader({ children, className, ...htmlProps }: DrawerHeaderProps) {\n  const classes = [styles.header, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerTitle({ children, className, ...htmlProps }: DrawerTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <BaseDialog.Title {...htmlProps} className={classes}>{children}</BaseDialog.Title>;\n}\n\nfunction DrawerDescription({ children, className, ...htmlProps }: DrawerDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return (\n    <BaseDialog.Description {...htmlProps} className={classes}>\n      {children}\n    </BaseDialog.Description>\n  );\n}\n\nfunction DrawerBody({ children, className, ...htmlProps }: DrawerBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerFooter({ children, className, ...htmlProps }: DrawerFooterProps) {\n  const classes = [styles.footer, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerClose({ children, asChild, className, ...htmlProps }: DrawerCloseProps) {\n  if (!children) {\n    return (\n      <BaseDialog.Close\n        {...htmlProps}\n        data-drawer-close\n        aria-label=\"Close drawer\"\n        className={[styles.close, className].filter(Boolean).join(' ')}\n      >\n        <CloseIcon />\n      </BaseDialog.Close>\n    );\n  }\n\n  if (asChild) {\n    return (\n      <BaseDialog.Close\n        {...htmlProps}\n        data-drawer-close\n        className={className}\n        render={children as React.ReactElement}\n      >\n        {null}\n      </BaseDialog.Close>\n    );\n  }\n\n  return (\n    <BaseDialog.Close {...htmlProps} data-drawer-close className={className}>\n      {children}\n    </BaseDialog.Close>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Trigger: DrawerTrigger,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Close: DrawerClose,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  DrawerRoot,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerBody,\n  DrawerFooter,\n  DrawerClose,\n};\n"],"names":["jsxs","jsx","BaseDialog","styles"],"mappings":";;;;;AA0EA,SAAS,YAAY;AACnB,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAAC,2BAAAA,IAAC,QAAA,EAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAA,CAAK;AAAA,QACpCA,2BAAAA,IAAC,UAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;AAMA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAAgB;AACd,SACEA,2BAAAA;AAAAA,IAACC,OAAAA,OAAW;AAAA,IAAX;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,MAAI,SAAS;AACX,WACED,+BAACC,OAAAA,OAAW,SAAX,EAAoB,GAAG,WAAW,WAAsB,QAAQ,UAC9D,UAAA,KAAA,CACH;AAAA,EAEJ;AAEA,wCACGA,OAAAA,OAAW,SAAX,EAAoB,GAAG,WAAW,WAChC,UACH;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,eAAe;AAAA,IACnBC,cAAAA,QAAO;AAAA,IACPA,cAAAA,QAAO,QAAQ,IAAI,EAAE;AAAA,IACrBA,cAAAA,QAAO,QAAQ,IAAI,EAAE;AAAA,IACrB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACEH,gCAACE,OAAAA,OAAW,QAAX,EACE,UAAA;AAAA,IAAA,2CAAaA,cAAW,UAAX,EAAoB,WAAWC,cAAAA,QAAO,UAAU;AAAA,IAC9DF,2BAAAA,IAACC,OAAAA,OAAW,OAAX,EAAiB,cAAY,MAAE,GAAG,WAAW,aAAW,MAAM,WAAW,cACvE,SAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,WAAW,GAAG,aAAgC;AAC9E,QAAM,UAAU,CAACC,cAAAA,QAAO,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACnE,wCAAQ,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3D;AAEA,SAAS,YAAY,EAAE,UAAU,WAAW,GAAG,aAA+B;AAC5E,QAAM,UAAU,CAACA,cAAAA,QAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClE,SAAOF,2BAAAA,IAACC,OAAAA,OAAW,OAAX,EAAkB,GAAG,WAAW,WAAW,SAAU,UAAS;AACxE;AAEA,SAAS,kBAAkB,EAAE,UAAU,WAAW,GAAG,aAAqC;AACxF,QAAM,UAAU,CAACC,cAAAA,QAAO,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACxE,SACEF,2BAAAA,IAACC,OAAAA,OAAW,aAAX,EAAwB,GAAG,WAAW,WAAW,SAC/C,UACH;AAEJ;AAEA,SAAS,WAAW,EAAE,UAAU,WAAW,GAAG,aAA8B;AAC1E,QAAM,UAAU,CAACC,cAAAA,QAAO,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjE,wCAAQ,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3D;AAEA,SAAS,aAAa,EAAE,UAAU,WAAW,GAAG,aAAgC;AAC9E,QAAM,UAAU,CAACA,cAAAA,QAAO,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACnE,wCAAQ,OAAA,EAAK,GAAG,WAAW,WAAW,SAAU,UAAS;AAC3D;AAEA,SAAS,YAAY,EAAE,UAAU,SAAS,WAAW,GAAG,aAA+B;AACrF,MAAI,CAAC,UAAU;AACb,WACEF,2BAAAA;AAAAA,MAACC,OAAAA,OAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,qBAAiB;AAAA,QACjB,cAAW;AAAA,QACX,WAAW,CAACC,sBAAO,OAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAE7D,yCAAC,WAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AAEA,MAAI,SAAS;AACX,WACEF,2BAAAA;AAAAA,MAACC,OAAAA,OAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,qBAAiB;AAAA,QACjB;AAAA,QACA,QAAQ;AAAA,QAEP,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,SACED,2BAAAA,IAACC,cAAW,OAAX,EAAkB,GAAG,WAAW,qBAAiB,MAAC,WAChD,UACH;AAEJ;AAMO,MAAM,SAAS,OAAO,OAAO,YAAY;AAAA,EAC9C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT,CAAC;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport styles from './Drawer.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Slide-in panel for navigation, forms, or supplementary content.\n * @see https://usefragments.com/components/drawer\n */\nexport interface DrawerProps {\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the drawer blocks interaction with the rest of the page.\n   * @default true */\n  modal?: boolean;\n}\n\nexport interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Which edge the drawer slides from.\n   * @default \"right\" */\n  side?: 'left' | 'right' | 'top' | 'bottom';\n  /** Drawer width (for left/right) or height (for top/bottom).\n   * @default \"md\"\n   * @see https://usefragments.com/components/drawer#sizes */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  /** Whether to show the backdrop overlay (default: true). Set to false for non-modal bottom panels. */\n  backdrop?: boolean;\n  /** Whether to autofocus an element on open (default: true) */\n  initialFocus?: boolean;\n}\n\nexport interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  asChild?: boolean;\n}\n\nfunction getAsChildElement(children: React.ReactNode, componentName: string): React.ReactElement {\n  if (!React.isValidElement(children)) {\n    throw new Error(`${componentName} with asChild requires a single valid React element child.`);\n  }\n  return children;\n}\n\n// ============================================\n// Close Icon\n// ============================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction DrawerRoot({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = true,\n}: DrawerProps) {\n  return (\n    <BaseDialog.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      {children}\n    </BaseDialog.Root>\n  );\n}\n\nfunction DrawerTrigger({\n  children,\n  asChild,\n  className,\n  ...htmlProps\n}: DrawerTriggerProps) {\n  if (asChild) {\n    const child = getAsChildElement(children, 'Drawer.Trigger');\n    return (\n      <BaseDialog.Trigger {...htmlProps} className={className} render={child}>\n        {null}\n      </BaseDialog.Trigger>\n    );\n  }\n\n  return (\n    <BaseDialog.Trigger {...htmlProps} className={className}>\n      {children}\n    </BaseDialog.Trigger>\n  );\n}\n\nfunction DrawerContent({\n  children,\n  side = 'right',\n  size = 'md',\n  backdrop = true,\n  initialFocus = true,\n  className,\n  ...htmlProps\n}: DrawerContentProps) {\n  const popupClasses = [\n    styles.popup,\n    styles[`side-${side}`],\n    styles[`size-${size}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <BaseDialog.Portal>\n      {backdrop && <BaseDialog.Backdrop className={styles.backdrop} />}\n      <BaseDialog.Popup initialFocus={initialFocus} {...htmlProps} data-side={side} className={popupClasses}>\n        {children}\n      </BaseDialog.Popup>\n    </BaseDialog.Portal>\n  );\n}\n\nfunction DrawerHeader({ children, className, ...htmlProps }: DrawerHeaderProps) {\n  const classes = [styles.header, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerTitle({ children, className, ...htmlProps }: DrawerTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <BaseDialog.Title {...htmlProps} className={classes}>{children}</BaseDialog.Title>;\n}\n\nfunction DrawerDescription({ children, className, ...htmlProps }: DrawerDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return (\n    <BaseDialog.Description {...htmlProps} className={classes}>\n      {children}\n    </BaseDialog.Description>\n  );\n}\n\nfunction DrawerBody({ children, className, ...htmlProps }: DrawerBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerFooter({ children, className, ...htmlProps }: DrawerFooterProps) {\n  const classes = [styles.footer, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerClose({ children, asChild, className, ...htmlProps }: DrawerCloseProps) {\n  if (!children) {\n    return (\n      <BaseDialog.Close\n        {...htmlProps}\n        data-drawer-close\n        aria-label=\"Close drawer\"\n        className={[styles.close, className].filter(Boolean).join(' ')}\n      >\n        <CloseIcon />\n      </BaseDialog.Close>\n    );\n  }\n\n  if (asChild) {\n    const child = getAsChildElement(children, 'Drawer.Close');\n    return (\n      <BaseDialog.Close\n        {...htmlProps}\n        data-drawer-close\n        className={className}\n        render={child}\n      >\n        {null}\n      </BaseDialog.Close>\n    );\n  }\n\n  return (\n    <BaseDialog.Close {...htmlProps} data-drawer-close className={className}>\n      {children}\n    </BaseDialog.Close>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Trigger: DrawerTrigger,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Close: DrawerClose,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  DrawerRoot,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerBody,\n  DrawerFooter,\n  DrawerClose,\n};\n"],"names":["React","jsxs","jsx","BaseDialog","styles"],"mappings":"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"}

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

@@ -26,6 +26,8 @@ export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement>
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     /** Whether to show the backdrop overlay (default: true). Set to false for non-modal bottom panels. */
     backdrop?: boolean;
+    /** Whether to autofocus an element on open (default: true) */
+    initialFocus?: boolean;
 }
 export interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
@@ -52,7 +54,7 @@ export interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonE
 }
 declare function DrawerRoot({ children, open, defaultOpen, onOpenChange, modal, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 declare function DrawerTrigger({ children, asChild, className, ...htmlProps }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare function DrawerContent({ children, side, size, backdrop, className, ...htmlProps }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ children, side, size, backdrop, initialFocus, className, ...htmlProps }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
 declare function DrawerHeader({ children, className, ...htmlProps }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare function DrawerTitle({ children, className, ...htmlProps }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
 declare function DrawerDescription({ children, className, ...htmlProps }: DrawerDescriptionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Drawer/index.js

@@ -1,6 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import styles from "./Drawer.module.scss.js";
+function getAsChildElement(children, componentName) {
+  if (!React.isValidElement(children)) {
+    throw new Error(`${componentName} with asChild requires a single valid React element child.`);
+  }
+  return children;
+}
 function CloseIcon() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -47,7 +54,8 @@ function DrawerTrigger({
   ...htmlProps
 }) {
   if (asChild) {
-    return /* @__PURE__ */ jsx(Dialog.Trigger, { ...htmlProps, className, render: children, children: null });
+    const child = getAsChildElement(children, "Drawer.Trigger");
+    return /* @__PURE__ */ jsx(Dialog.Trigger, { ...htmlProps, className, render: child, children: null });
   }
   return /* @__PURE__ */ jsx(Dialog.Trigger, { ...htmlProps, className, children });
 }
@@ -56,6 +64,7 @@ function DrawerContent({
   side = "right",
   size = "md",
   backdrop = true,
+  initialFocus = true,
   className,
   ...htmlProps
 }) {
@@ -67,7 +76,7 @@ function DrawerContent({
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
     backdrop && /* @__PURE__ */ jsx(Dialog.Backdrop, { className: styles.backdrop }),
-    /* @__PURE__ */ jsx(Dialog.Popup, { initialFocus: true, ...htmlProps, "data-side": side, className: popupClasses, children })
+    /* @__PURE__ */ jsx(Dialog.Popup, { initialFocus, ...htmlProps, "data-side": side, className: popupClasses, children })
   ] });
 }
 function DrawerHeader({ children, className, ...htmlProps }) {
@@ -104,13 +113,14 @@ function DrawerClose({ children, asChild, className, ...htmlProps }) {
     );
   }
   if (asChild) {
+    const child = getAsChildElement(children, "Drawer.Close");
     return /* @__PURE__ */ jsx(
       Dialog.Close,
       {
         ...htmlProps,
         "data-drawer-close": true,
         className,
-        render: children,
+        render: child,
         children: null
       }
     );

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport styles from './Drawer.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Slide-in panel for navigation, forms, or supplementary content.\n * @see https://usefragments.com/components/drawer\n */\nexport interface DrawerProps {\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the drawer blocks interaction with the rest of the page.\n   * @default true */\n  modal?: boolean;\n}\n\nexport interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Which edge the drawer slides from.\n   * @default \"right\" */\n  side?: 'left' | 'right' | 'top' | 'bottom';\n  /** Drawer width (for left/right) or height (for top/bottom).\n   * @default \"md\"\n   * @see https://usefragments.com/components/drawer#sizes */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  /** Whether to show the backdrop overlay (default: true). Set to false for non-modal bottom panels. */\n  backdrop?: boolean;\n}\n\nexport interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  asChild?: boolean;\n}\n\n// ============================================\n// Close Icon\n// ============================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction DrawerRoot({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = true,\n}: DrawerProps) {\n  return (\n    <BaseDialog.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      {children}\n    </BaseDialog.Root>\n  );\n}\n\nfunction DrawerTrigger({\n  children,\n  asChild,\n  className,\n  ...htmlProps\n}: DrawerTriggerProps) {\n  if (asChild) {\n    return (\n      <BaseDialog.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>\n        {null}\n      </BaseDialog.Trigger>\n    );\n  }\n\n  return (\n    <BaseDialog.Trigger {...htmlProps} className={className}>\n      {children}\n    </BaseDialog.Trigger>\n  );\n}\n\nfunction DrawerContent({\n  children,\n  side = 'right',\n  size = 'md',\n  backdrop = true,\n  className,\n  ...htmlProps\n}: DrawerContentProps) {\n  const popupClasses = [\n    styles.popup,\n    styles[`side-${side}`],\n    styles[`size-${size}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <BaseDialog.Portal>\n      {backdrop && <BaseDialog.Backdrop className={styles.backdrop} />}\n      <BaseDialog.Popup initialFocus {...htmlProps} data-side={side} className={popupClasses}>\n        {children}\n      </BaseDialog.Popup>\n    </BaseDialog.Portal>\n  );\n}\n\nfunction DrawerHeader({ children, className, ...htmlProps }: DrawerHeaderProps) {\n  const classes = [styles.header, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerTitle({ children, className, ...htmlProps }: DrawerTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <BaseDialog.Title {...htmlProps} className={classes}>{children}</BaseDialog.Title>;\n}\n\nfunction DrawerDescription({ children, className, ...htmlProps }: DrawerDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return (\n    <BaseDialog.Description {...htmlProps} className={classes}>\n      {children}\n    </BaseDialog.Description>\n  );\n}\n\nfunction DrawerBody({ children, className, ...htmlProps }: DrawerBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerFooter({ children, className, ...htmlProps }: DrawerFooterProps) {\n  const classes = [styles.footer, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerClose({ children, asChild, className, ...htmlProps }: DrawerCloseProps) {\n  if (!children) {\n    return (\n      <BaseDialog.Close\n        {...htmlProps}\n        data-drawer-close\n        aria-label=\"Close drawer\"\n        className={[styles.close, className].filter(Boolean).join(' ')}\n      >\n        <CloseIcon />\n      </BaseDialog.Close>\n    );\n  }\n\n  if (asChild) {\n    return (\n      <BaseDialog.Close\n        {...htmlProps}\n        data-drawer-close\n        className={className}\n        render={children as React.ReactElement}\n      >\n        {null}\n      </BaseDialog.Close>\n    );\n  }\n\n  return (\n    <BaseDialog.Close {...htmlProps} data-drawer-close className={className}>\n      {children}\n    </BaseDialog.Close>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Trigger: DrawerTrigger,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Close: DrawerClose,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  DrawerRoot,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerBody,\n  DrawerFooter,\n  DrawerClose,\n};\n"],"names":["BaseDialog"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport styles from './Drawer.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * Slide-in panel for navigation, forms, or supplementary content.\n * @see https://usefragments.com/components/drawer\n */\nexport interface DrawerProps {\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state */\n  defaultOpen?: boolean;\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Whether the drawer blocks interaction with the rest of the page.\n   * @default true */\n  modal?: boolean;\n}\n\nexport interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Which edge the drawer slides from.\n   * @default \"right\" */\n  side?: 'left' | 'right' | 'top' | 'bottom';\n  /** Drawer width (for left/right) or height (for top/bottom).\n   * @default \"md\"\n   * @see https://usefragments.com/components/drawer#sizes */\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  /** Whether to show the backdrop overlay (default: true). Set to false for non-modal bottom panels. */\n  backdrop?: boolean;\n  /** Whether to autofocus an element on open (default: true) */\n  initialFocus?: boolean;\n}\n\nexport interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerDescriptionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\nexport interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children?: React.ReactNode;\n  asChild?: boolean;\n}\n\nfunction getAsChildElement(children: React.ReactNode, componentName: string): React.ReactElement {\n  if (!React.isValidElement(children)) {\n    throw new Error(`${componentName} with asChild requires a single valid React element child.`);\n  }\n  return children;\n}\n\n// ============================================\n// Close Icon\n// ============================================\n\nfunction CloseIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction DrawerRoot({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal = true,\n}: DrawerProps) {\n  return (\n    <BaseDialog.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      modal={modal}\n    >\n      {children}\n    </BaseDialog.Root>\n  );\n}\n\nfunction DrawerTrigger({\n  children,\n  asChild,\n  className,\n  ...htmlProps\n}: DrawerTriggerProps) {\n  if (asChild) {\n    const child = getAsChildElement(children, 'Drawer.Trigger');\n    return (\n      <BaseDialog.Trigger {...htmlProps} className={className} render={child}>\n        {null}\n      </BaseDialog.Trigger>\n    );\n  }\n\n  return (\n    <BaseDialog.Trigger {...htmlProps} className={className}>\n      {children}\n    </BaseDialog.Trigger>\n  );\n}\n\nfunction DrawerContent({\n  children,\n  side = 'right',\n  size = 'md',\n  backdrop = true,\n  initialFocus = true,\n  className,\n  ...htmlProps\n}: DrawerContentProps) {\n  const popupClasses = [\n    styles.popup,\n    styles[`side-${side}`],\n    styles[`size-${size}`],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <BaseDialog.Portal>\n      {backdrop && <BaseDialog.Backdrop className={styles.backdrop} />}\n      <BaseDialog.Popup initialFocus={initialFocus} {...htmlProps} data-side={side} className={popupClasses}>\n        {children}\n      </BaseDialog.Popup>\n    </BaseDialog.Portal>\n  );\n}\n\nfunction DrawerHeader({ children, className, ...htmlProps }: DrawerHeaderProps) {\n  const classes = [styles.header, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerTitle({ children, className, ...htmlProps }: DrawerTitleProps) {\n  const classes = [styles.title, className].filter(Boolean).join(' ');\n  return <BaseDialog.Title {...htmlProps} className={classes}>{children}</BaseDialog.Title>;\n}\n\nfunction DrawerDescription({ children, className, ...htmlProps }: DrawerDescriptionProps) {\n  const classes = [styles.description, className].filter(Boolean).join(' ');\n  return (\n    <BaseDialog.Description {...htmlProps} className={classes}>\n      {children}\n    </BaseDialog.Description>\n  );\n}\n\nfunction DrawerBody({ children, className, ...htmlProps }: DrawerBodyProps) {\n  const classes = [styles.body, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerFooter({ children, className, ...htmlProps }: DrawerFooterProps) {\n  const classes = [styles.footer, className].filter(Boolean).join(' ');\n  return <div {...htmlProps} className={classes}>{children}</div>;\n}\n\nfunction DrawerClose({ children, asChild, className, ...htmlProps }: DrawerCloseProps) {\n  if (!children) {\n    return (\n      <BaseDialog.Close\n        {...htmlProps}\n        data-drawer-close\n        aria-label=\"Close drawer\"\n        className={[styles.close, className].filter(Boolean).join(' ')}\n      >\n        <CloseIcon />\n      </BaseDialog.Close>\n    );\n  }\n\n  if (asChild) {\n    const child = getAsChildElement(children, 'Drawer.Close');\n    return (\n      <BaseDialog.Close\n        {...htmlProps}\n        data-drawer-close\n        className={className}\n        render={child}\n      >\n        {null}\n      </BaseDialog.Close>\n    );\n  }\n\n  return (\n    <BaseDialog.Close {...htmlProps} data-drawer-close className={className}>\n      {children}\n    </BaseDialog.Close>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Drawer = Object.assign(DrawerRoot, {\n  Trigger: DrawerTrigger,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Close: DrawerClose,\n});\n\n// Re-export individual components for tree-shaking\nexport {\n  DrawerRoot,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerBody,\n  DrawerFooter,\n  DrawerClose,\n};\n"],"names":["BaseDialog"],"mappings":"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"}

package/dist/components/Editor/Editor.module.scss.cjs

@@ -1,22 +1,22 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const editor = "_editor_49q64_1";
-const contentTextarea = "_contentTextarea_49q64_18";
-const content = "_content_49q64_18";
-const toolbar = "_toolbar_49q64_37";
-const toolbarGroup = "_toolbarGroup_49q64_48";
-const toolbarButton = "_toolbarButton_49q64_54";
-const toolbarButtonActive = "_toolbarButtonActive_49q64_105";
-const separator = "_separator_49q64_113";
-const statusIndicator = "_statusIndicator_49q64_121";
-const statusError = "_statusError_49q64_134";
-const contentRich = "_contentRich_49q64_144";
-const statusBar = "_statusBar_49q64_267";
-const statusBarLeft = "_statusBarLeft_49q64_277";
-const statusBarRight = "_statusBarRight_49q64_283";
-const statusBarItem = "_statusBarItem_49q64_290";
-const statusBarItemWarning = "_statusBarItemWarning_49q64_297";
-const statusBarItemError = "_statusBarItemError_49q64_302";
+const editor = "_editor_1duc2_1";
+const contentTextarea = "_contentTextarea_1duc2_18";
+const content = "_content_1duc2_18";
+const toolbar = "_toolbar_1duc2_37";
+const toolbarGroup = "_toolbarGroup_1duc2_48";
+const toolbarButton = "_toolbarButton_1duc2_54";
+const toolbarButtonActive = "_toolbarButtonActive_1duc2_105";
+const separator = "_separator_1duc2_113";
+const statusIndicator = "_statusIndicator_1duc2_121";
+const statusError = "_statusError_1duc2_134";
+const contentRich = "_contentRich_1duc2_144";
+const statusBar = "_statusBar_1duc2_267";
+const statusBarLeft = "_statusBarLeft_1duc2_277";
+const statusBarRight = "_statusBarRight_1duc2_283";
+const statusBarItem = "_statusBarItem_1duc2_290";
+const statusBarItemWarning = "_statusBarItemWarning_1duc2_297";
+const statusBarItemError = "_statusBarItemError_1duc2_302";
 const styles = {
   editor,
   contentTextarea,

package/dist/components/Editor/Editor.module.scss.js

@@ -1,20 +1,20 @@
-const editor = "_editor_49q64_1";
-const contentTextarea = "_contentTextarea_49q64_18";
-const content = "_content_49q64_18";
-const toolbar = "_toolbar_49q64_37";
-const toolbarGroup = "_toolbarGroup_49q64_48";
-const toolbarButton = "_toolbarButton_49q64_54";
-const toolbarButtonActive = "_toolbarButtonActive_49q64_105";
-const separator = "_separator_49q64_113";
-const statusIndicator = "_statusIndicator_49q64_121";
-const statusError = "_statusError_49q64_134";
-const contentRich = "_contentRich_49q64_144";
-const statusBar = "_statusBar_49q64_267";
-const statusBarLeft = "_statusBarLeft_49q64_277";
-const statusBarRight = "_statusBarRight_49q64_283";
-const statusBarItem = "_statusBarItem_49q64_290";
-const statusBarItemWarning = "_statusBarItemWarning_49q64_297";
-const statusBarItemError = "_statusBarItemError_49q64_302";
+const editor = "_editor_1duc2_1";
+const contentTextarea = "_contentTextarea_1duc2_18";
+const content = "_content_1duc2_18";
+const toolbar = "_toolbar_1duc2_37";
+const toolbarGroup = "_toolbarGroup_1duc2_48";
+const toolbarButton = "_toolbarButton_1duc2_54";
+const toolbarButtonActive = "_toolbarButtonActive_1duc2_105";
+const separator = "_separator_1duc2_113";
+const statusIndicator = "_statusIndicator_1duc2_121";
+const statusError = "_statusError_1duc2_134";
+const contentRich = "_contentRich_1duc2_144";
+const statusBar = "_statusBar_1duc2_267";
+const statusBarLeft = "_statusBarLeft_1duc2_277";
+const statusBarRight = "_statusBarRight_1duc2_283";
+const statusBarItem = "_statusBarItem_1duc2_290";
+const statusBarItemWarning = "_statusBarItemWarning_1duc2_297";
+const statusBarItemError = "_statusBarItemError_1duc2_302";
 const styles = {
   editor,
   contentTextarea,

package/dist/components/Editor/index.cjs

@@ -199,6 +199,7 @@ function EditorRoot({
   autoSaveInterval = 3e4,
   size = "md",
   maxLength,
+  toolbarIcons,
   className,
   ...htmlProps
 }) {
@@ -237,7 +238,7 @@ function EditorRoot({
           "aria-multiline": "true"
         }
       },
-      content: defaultValue || controlledValue || "",
+      content: controlledValue !== void 0 ? controlledValue : defaultValue,
       editable: !disabled && !readOnly,
       onUpdate: ({ editor: e }) => {
         const html = e.getHTML();
@@ -260,16 +261,29 @@ function EditorRoot({
   }, [tiptapEditor, disabled, readOnly]);
   React__namespace.useEffect(() => {
     if (!onAutoSave || !value) return;
+    let cancelled = false;
     const timer = setTimeout(() => {
       setSaveStatus("saving");
       try {
-        onAutoSave(value);
-        setSaveStatus("saved");
+        Promise.resolve(onAutoSave(value)).then(() => {
+          if (!cancelled) {
+            setSaveStatus("saved");
+          }
+        }).catch(() => {
+          if (!cancelled) {
+            setSaveStatus("error");
+          }
+        });
       } catch {
-        setSaveStatus("error");
+        if (!cancelled) {
+          setSaveStatus("error");
+        }
       }
     }, autoSaveInterval);
-    return () => clearTimeout(timer);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
   }, [value, onAutoSave, autoSaveInterval]);
   const toggleFormat = React__namespace.useCallback(
     (format) => {
@@ -393,6 +407,7 @@ function EditorRoot({
     mode,
     size,
     maxLength,
+    toolbarIcons,
     wordCount,
     charCount,
     toggleFormat,
@@ -432,7 +447,7 @@ function EditorToolbarGroup({ children, "aria-label": ariaLabel, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, role: "group", "aria-label": ariaLabel, children });
 }
 function EditorToolbarButton({ format, className }) {
-  const { toggleFormat, isFormatActive, disabled, readOnly, editor, mode } = useEditorContext();
+  const { toggleFormat, isFormatActive, disabled, readOnly, editor, mode, toolbarIcons } = useEditorContext();
   const meta = FORMAT_META[format];
   const isAction = ACTION_FORMATS.has(format);
   const active = isAction ? false : isFormatActive(format);
@@ -445,6 +460,16 @@ function EditorToolbarButton({ format, className }) {
       isDisabled = format === "undo" ? !editor.can().undo() : !editor.can().redo();
     }
   }
+  const iconState = {
+    format,
+    active,
+    disabled,
+    readOnly,
+    isDisabled,
+    mode
+  };
+  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,
@@ -460,7 +485,7 @@ function EditorToolbarButton({ format, className }) {
       "aria-label": meta.label,
       title: `${meta.label} (${meta.shortcut})`,
       ...isAction ? {} : { "aria-pressed": active },
-      children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 16, weight: active ? "bold" : "regular" })
+      children: iconOverride !== void 0 ? renderedOverride : /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 16, weight: active ? "bold" : "regular" })
     }
   );
 }