@nucleux/sheet 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @nucleux/sheet
+
+Sheet — a slide-over drawer panel — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+## Install
+
+```bash
+pnpm add @nucleux/sheet @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Sheet, SheetHeader, SheetTitle, SheetBody, SheetFooter } from "@nucleux/sheet";
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,183 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var lucideReact = require('lucide-react');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var SheetContext = React__namespace.createContext(null);
+var sideClasses = {
+  right: "inset-y-0 right-0 h-full w-full max-w-sm border-l",
+  left: "inset-y-0 left-0 h-full w-full max-w-sm border-r",
+  top: "inset-x-0 top-0 w-full border-b",
+  bottom: "inset-x-0 bottom-0 w-full border-t"
+};
+function Sheet({
+  open,
+  onOpenChange,
+  side = "right",
+  children,
+  className,
+  dismissible = true
+}) {
+  const baseId = React__namespace.useId();
+  const panelRef = React__namespace.useRef(null);
+  const close = React__namespace.useCallback(() => onOpenChange(false), [onOpenChange]);
+  React__namespace.useEffect(() => {
+    if (!open || !dismissible) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, dismissible, close]);
+  React__namespace.useEffect(() => {
+    if (open) panelRef.current?.focus();
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetContext.Provider,
+    {
+      value: { titleId: `${baseId}-title`, descriptionId: `${baseId}-desc`, onClose: close },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0 bg-foreground/50 animate-nx-fade-in",
+            onClick: dismissible ? close : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": `${baseId}-title`,
+            "aria-describedby": `${baseId}-desc`,
+            tabIndex: -1,
+            className: utils.cn(
+              "absolute flex flex-col border-border bg-background shadow-lg outline-none animate-nx-fade-in",
+              sideClasses[side],
+              className
+            ),
+            children
+          }
+        )
+      ] })
+    }
+  );
+}
+var SheetHeader = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React__namespace.useContext(SheetContext);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn("flex items-center justify-between gap-4 border-b border-border p-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close",
+              onClick: ctx?.onClose,
+              className: "shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetTitle = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const ctx = React__namespace.useContext(SheetContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        ref,
+        id: ctx?.titleId,
+        className: utils.cn("text-sm font-semibold text-foreground", className),
+        ...props
+      }
+    );
+  }
+);
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  const ctx = React__namespace.useContext(SheetContext);
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ref, id: ctx?.descriptionId, className: utils.cn("text-sm text-muted-foreground", className), ...props });
+});
+SheetDescription.displayName = "SheetDescription";
+var SheetBody = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("min-h-0 flex-1 overflow-y-auto p-4", className), ...props })
+);
+SheetBody.displayName = "SheetBody";
+var SheetFooter = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils.cn("flex items-center justify-end gap-2 border-t border-border p-4", className),
+      ...props
+    }
+  )
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetClose = React__namespace.forwardRef(
+  ({ onClick, type = "button", ...props }, ref) => {
+    const ctx = React__namespace.useContext(SheetContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type,
+        onClick: (e) => {
+          onClick?.(e);
+          ctx?.onClose();
+        },
+        ...props
+      }
+    );
+  }
+);
+SheetClose.displayName = "SheetClose";
+
+exports.Sheet = Sheet;
+exports.SheetBody = SheetBody;
+exports.SheetClose = SheetClose;
+exports.SheetDescription = SheetDescription;
+exports.SheetFooter = SheetFooter;
+exports.SheetHeader = SheetHeader;
+exports.SheetTitle = SheetTitle;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","jsxs","cn","X"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\n\ninterface SheetContextValue {\n  titleId: string;\n  descriptionId: string;\n  onClose: () => void;\n}\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nexport type SheetSide = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst sideClasses: Record<SheetSide, string> = {\n  right: \"inset-y-0 right-0 h-full w-full max-w-sm border-l\",\n  left: \"inset-y-0 left-0 h-full w-full max-w-sm border-r\",\n  top: \"inset-x-0 top-0 w-full border-b\",\n  bottom: \"inset-x-0 bottom-0 w-full border-t\",\n};\n\nexport interface SheetProps {\n  /** Whether the sheet is open. */\n  open: boolean;\n  /** Called when the sheet requests to close (overlay click / Escape / close button). */\n  onOpenChange: (open: boolean) => void;\n  /** Which edge the sheet slides in from. */\n  side?: SheetSide;\n  /** Panel content — compose SheetHeader/Title/Description/Body/Footer. */\n  children: React.ReactNode;\n  /** Class overrides for the panel. */\n  className?: string;\n  /** Disable closing on overlay click / Escape. */\n  dismissible?: boolean;\n}\n\n/**\n * A slide-over drawer anchored to a screen edge. Controlled via `open` /\n * `onOpenChange`; closes on overlay click, Escape, or {@link SheetClose}.\n */\nexport function Sheet({\n  open,\n  onOpenChange,\n  side = \"right\",\n  children,\n  className,\n  dismissible = true,\n}: SheetProps) {\n  const baseId = React.useId();\n  const panelRef = React.useRef<HTMLDivElement>(null);\n  const close = React.useCallback(() => onOpenChange(false), [onOpenChange]);\n\n  React.useEffect(() => {\n    if (!open || !dismissible) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") close();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, dismissible, close]);\n\n  React.useEffect(() => {\n    if (open) panelRef.current?.focus();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <SheetContext.Provider\n      value={{ titleId: `${baseId}-title`, descriptionId: `${baseId}-desc`, onClose: close }}\n    >\n      <div className=\"fixed inset-0 z-50\">\n        <div\n          aria-hidden\n          className=\"absolute inset-0 bg-foreground/50 animate-nx-fade-in\"\n          onClick={dismissible ? close : undefined}\n        />\n        <div\n          ref={panelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={`${baseId}-title`}\n          aria-describedby={`${baseId}-desc`}\n          tabIndex={-1}\n          className={cn(\n            \"absolute flex flex-col border-border bg-background shadow-lg outline-none animate-nx-fade-in\",\n            sideClasses[side],\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </SheetContext.Provider>\n  );\n}\n\nexport const SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    const ctx = React.useContext(SheetContext);\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex items-center justify-between gap-4 border-b border-border p-4\", className)}\n        {...props}\n      >\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        <button\n          type=\"button\"\n          aria-label=\"Close\"\n          onClick={ctx?.onClose}\n          className=\"shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      </div>\n    );\n  },\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nexport const SheetTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => {\n    const ctx = React.useContext(SheetContext);\n    return (\n      <h2\n        ref={ref}\n        id={ctx?.titleId}\n        className={cn(\"text-sm font-semibold text-foreground\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSheetTitle.displayName = \"SheetTitle\";\n\nexport const SheetDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const ctx = React.useContext(SheetContext);\n  return (\n    <p ref={ref} id={ctx?.descriptionId} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n  );\n});\nSheetDescription.displayName = \"SheetDescription\";\n\nexport const SheetBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"min-h-0 flex-1 overflow-y-auto p-4\", className)} {...props} />\n  ),\n);\nSheetBody.displayName = \"SheetBody\";\n\nexport const SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center justify-end gap-2 border-t border-border p-4\", className)}\n      {...props}\n    />\n  ),\n);\nSheetFooter.displayName = \"SheetFooter\";\n\n/** A button that closes the enclosing Sheet. */\nexport const SheetClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(\n  ({ onClick, type = \"button\", ...props }, ref) => {\n    const ctx = React.useContext(SheetContext);\n    return (\n      <button\n        ref={ref}\n        type={type}\n        onClick={(e) => {\n          onClick?.(e);\n          ctx?.onClose();\n        }}\n        {...props}\n      />\n    );\n  },\n);\nSheetClose.displayName = \"SheetClose\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+type SheetSide = "right" | "left" | "top" | "bottom";
+interface SheetProps {
+    /** Whether the sheet is open. */
+    open: boolean;
+    /** Called when the sheet requests to close (overlay click / Escape / close button). */
+    onOpenChange: (open: boolean) => void;
+    /** Which edge the sheet slides in from. */
+    side?: SheetSide;
+    /** Panel content — compose SheetHeader/Title/Description/Body/Footer. */
+    children: React.ReactNode;
+    /** Class overrides for the panel. */
+    className?: string;
+    /** Disable closing on overlay click / Escape. */
+    dismissible?: boolean;
+}
+/**
+ * A slide-over drawer anchored to a screen edge. Controlled via `open` /
+ * `onOpenChange`; closes on overlay click, Escape, or {@link SheetClose}.
+ */
+declare function Sheet({ open, onOpenChange, side, children, className, dismissible, }: SheetProps): React.JSX.Element | null;
+declare const SheetHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SheetBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** A button that closes the enclosing Sheet. */
+declare const SheetClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Sheet, SheetBody, SheetClose, SheetDescription, SheetFooter, SheetHeader, type SheetProps, type SheetSide, SheetTitle };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+type SheetSide = "right" | "left" | "top" | "bottom";
+interface SheetProps {
+    /** Whether the sheet is open. */
+    open: boolean;
+    /** Called when the sheet requests to close (overlay click / Escape / close button). */
+    onOpenChange: (open: boolean) => void;
+    /** Which edge the sheet slides in from. */
+    side?: SheetSide;
+    /** Panel content — compose SheetHeader/Title/Description/Body/Footer. */
+    children: React.ReactNode;
+    /** Class overrides for the panel. */
+    className?: string;
+    /** Disable closing on overlay click / Escape. */
+    dismissible?: boolean;
+}
+/**
+ * A slide-over drawer anchored to a screen edge. Controlled via `open` /
+ * `onOpenChange`; closes on overlay click, Escape, or {@link SheetClose}.
+ */
+declare function Sheet({ open, onOpenChange, side, children, className, dismissible, }: SheetProps): React.JSX.Element | null;
+declare const SheetHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SheetBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** A button that closes the enclosing Sheet. */
+declare const SheetClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Sheet, SheetBody, SheetClose, SheetDescription, SheetFooter, SheetHeader, type SheetProps, type SheetSide, SheetTitle };

package/dist/index.js

@@ -0,0 +1,155 @@
+"use client";
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { cn } from '@nucleux/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var SheetContext = React.createContext(null);
+var sideClasses = {
+  right: "inset-y-0 right-0 h-full w-full max-w-sm border-l",
+  left: "inset-y-0 left-0 h-full w-full max-w-sm border-r",
+  top: "inset-x-0 top-0 w-full border-b",
+  bottom: "inset-x-0 bottom-0 w-full border-t"
+};
+function Sheet({
+  open,
+  onOpenChange,
+  side = "right",
+  children,
+  className,
+  dismissible = true
+}) {
+  const baseId = React.useId();
+  const panelRef = React.useRef(null);
+  const close = React.useCallback(() => onOpenChange(false), [onOpenChange]);
+  React.useEffect(() => {
+    if (!open || !dismissible) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, dismissible, close]);
+  React.useEffect(() => {
+    if (open) panelRef.current?.focus();
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    SheetContext.Provider,
+    {
+      value: { titleId: `${baseId}-title`, descriptionId: `${baseId}-desc`, onClose: close },
+      children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0 bg-foreground/50 animate-nx-fade-in",
+            onClick: dismissible ? close : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": `${baseId}-title`,
+            "aria-describedby": `${baseId}-desc`,
+            tabIndex: -1,
+            className: cn(
+              "absolute flex flex-col border-border bg-background shadow-lg outline-none animate-nx-fade-in",
+              sideClasses[side],
+              className
+            ),
+            children
+          }
+        )
+      ] })
+    }
+  );
+}
+var SheetHeader = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React.useContext(SheetContext);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex items-center justify-between gap-4 border-b border-border p-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close",
+              onClick: ctx?.onClose,
+              className: "shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetTitle = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const ctx = React.useContext(SheetContext);
+    return /* @__PURE__ */ jsx(
+      "h2",
+      {
+        ref,
+        id: ctx?.titleId,
+        className: cn("text-sm font-semibold text-foreground", className),
+        ...props
+      }
+    );
+  }
+);
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const ctx = React.useContext(SheetContext);
+  return /* @__PURE__ */ jsx("p", { ref, id: ctx?.descriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
+});
+SheetDescription.displayName = "SheetDescription";
+var SheetBody = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("min-h-0 flex-1 overflow-y-auto p-4", className), ...props })
+);
+SheetBody.displayName = "SheetBody";
+var SheetFooter = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center justify-end gap-2 border-t border-border p-4", className),
+      ...props
+    }
+  )
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetClose = React.forwardRef(
+  ({ onClick, type = "button", ...props }, ref) => {
+    const ctx = React.useContext(SheetContext);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        onClick: (e) => {
+          onClick?.(e);
+          ctx?.onClose();
+        },
+        ...props
+      }
+    );
+  }
+);
+SheetClose.displayName = "SheetClose";
+
+export { Sheet, SheetBody, SheetClose, SheetDescription, SheetFooter, SheetHeader, SheetTitle };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\n\ninterface SheetContextValue {\n  titleId: string;\n  descriptionId: string;\n  onClose: () => void;\n}\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nexport type SheetSide = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst sideClasses: Record<SheetSide, string> = {\n  right: \"inset-y-0 right-0 h-full w-full max-w-sm border-l\",\n  left: \"inset-y-0 left-0 h-full w-full max-w-sm border-r\",\n  top: \"inset-x-0 top-0 w-full border-b\",\n  bottom: \"inset-x-0 bottom-0 w-full border-t\",\n};\n\nexport interface SheetProps {\n  /** Whether the sheet is open. */\n  open: boolean;\n  /** Called when the sheet requests to close (overlay click / Escape / close button). */\n  onOpenChange: (open: boolean) => void;\n  /** Which edge the sheet slides in from. */\n  side?: SheetSide;\n  /** Panel content — compose SheetHeader/Title/Description/Body/Footer. */\n  children: React.ReactNode;\n  /** Class overrides for the panel. */\n  className?: string;\n  /** Disable closing on overlay click / Escape. */\n  dismissible?: boolean;\n}\n\n/**\n * A slide-over drawer anchored to a screen edge. Controlled via `open` /\n * `onOpenChange`; closes on overlay click, Escape, or {@link SheetClose}.\n */\nexport function Sheet({\n  open,\n  onOpenChange,\n  side = \"right\",\n  children,\n  className,\n  dismissible = true,\n}: SheetProps) {\n  const baseId = React.useId();\n  const panelRef = React.useRef<HTMLDivElement>(null);\n  const close = React.useCallback(() => onOpenChange(false), [onOpenChange]);\n\n  React.useEffect(() => {\n    if (!open || !dismissible) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") close();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, dismissible, close]);\n\n  React.useEffect(() => {\n    if (open) panelRef.current?.focus();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <SheetContext.Provider\n      value={{ titleId: `${baseId}-title`, descriptionId: `${baseId}-desc`, onClose: close }}\n    >\n      <div className=\"fixed inset-0 z-50\">\n        <div\n          aria-hidden\n          className=\"absolute inset-0 bg-foreground/50 animate-nx-fade-in\"\n          onClick={dismissible ? close : undefined}\n        />\n        <div\n          ref={panelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={`${baseId}-title`}\n          aria-describedby={`${baseId}-desc`}\n          tabIndex={-1}\n          className={cn(\n            \"absolute flex flex-col border-border bg-background shadow-lg outline-none animate-nx-fade-in\",\n            sideClasses[side],\n            className,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    </SheetContext.Provider>\n  );\n}\n\nexport const SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    const ctx = React.useContext(SheetContext);\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex items-center justify-between gap-4 border-b border-border p-4\", className)}\n        {...props}\n      >\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        <button\n          type=\"button\"\n          aria-label=\"Close\"\n          onClick={ctx?.onClose}\n          className=\"shrink-0 rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      </div>\n    );\n  },\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nexport const SheetTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, ...props }, ref) => {\n    const ctx = React.useContext(SheetContext);\n    return (\n      <h2\n        ref={ref}\n        id={ctx?.titleId}\n        className={cn(\"text-sm font-semibold text-foreground\", className)}\n        {...props}\n      />\n    );\n  },\n);\nSheetTitle.displayName = \"SheetTitle\";\n\nexport const SheetDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const ctx = React.useContext(SheetContext);\n  return (\n    <p ref={ref} id={ctx?.descriptionId} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n  );\n});\nSheetDescription.displayName = \"SheetDescription\";\n\nexport const SheetBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"min-h-0 flex-1 overflow-y-auto p-4\", className)} {...props} />\n  ),\n);\nSheetBody.displayName = \"SheetBody\";\n\nexport const SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center justify-end gap-2 border-t border-border p-4\", className)}\n      {...props}\n    />\n  ),\n);\nSheetFooter.displayName = \"SheetFooter\";\n\n/** A button that closes the enclosing Sheet. */\nexport const SheetClose = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(\n  ({ onClick, type = \"button\", ...props }, ref) => {\n    const ctx = React.useContext(SheetContext);\n    return (\n      <button\n        ref={ref}\n        type={type}\n        onClick={(e) => {\n          onClick?.(e);\n          ctx?.onClose();\n        }}\n        {...props}\n      />\n    );\n  },\n);\nSheetClose.displayName = \"SheetClose\";\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@nucleux/sheet",
+  "version": "0.1.1",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Sheet — a slide-over drawer panel — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "sheet",
+    "drawer"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "lucide-react": "^0.469.0",
+    "@nucleux/utils": "0.1.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/sheet"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
+}