@stackshift-ui/sheet 1.0.0-beta.1

package/dist/sheet.d.ts

@@ -0,0 +1,37 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as React from "react";
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare namespace Sheet {
+    var displayName: string;
+}
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetTrigger {
+    var displayName: string;
+}
+declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetClose {
+    var displayName: string;
+}
+declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetContent {
+    var displayName: string;
+}
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetHeader {
+    var displayName: string;
+}
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetFooter {
+    var displayName: string;
+}
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetTitle {
+    var displayName: string;
+}
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetDescription {
+    var displayName: string;
+}
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, };

package/dist/sheet.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";var z=Object.create;var l=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var X=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},m=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of H(t))!U.call(e,n)&&n!==a&&l(e,n,{get:()=>t[n],enumerable:!(r=F(t,n))||r.enumerable});return e};var q=(e,t,a)=>(a=e!=null?z(I(e)):{},m(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),A=e=>m(l({},"__esModule",{value:!0}),e);var B={};X(B,{Sheet:()=>v,SheetClose:()=>b,SheetContent:()=>T,SheetDescription:()=>k,SheetFooter:()=>w,SheetHeader:()=>D,SheetTitle:()=>O,SheetTrigger:()=>N});module.exports=A(B);var i=q(require("@radix-ui/react-dialog")),p=require("lucide-react"),o=require("@stackshift-ui/system"),s=require("react/jsx-runtime"),d="Sheet",c="SheetTrigger",h="SheetPortal",f="SheetClose",u="SheetOverlay",S="SheetContent",y="SheetHeader",C="SheetFooter",g="SheetTitle",P="SheetDescription";function v({...e}){let{[d]:t=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(t,{as:i.Root,"data-slot":"sheet",...e})}v.displayName=d;function N({...e}){let{[c]:t=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(t,{as:i.Trigger,"data-slot":"sheet-trigger",...e})}N.displayName=c;function b({...e}){let{[f]:t=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(t,{as:i.Close,"data-slot":"sheet-close",...e})}b.displayName=f;function x({...e}){let{[h]:t=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(t,{as:i.Portal,"data-slot":"sheet-portal",...e})}x.displayName=h;function R({className:e,...t}){let{[u]:a=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(a,{as:i.Overlay,"data-slot":"sheet-overlay",className:(0,o.cn)("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",e),...t})}R.displayName=u;function T({className:e,children:t,side:a="right",...r}){let{[S]:n=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsxs)(x,{children:[(0,s.jsx)(R,{}),(0,s.jsxs)(n,{as:i.Content,"data-slot":"sheet-content",className:(0,o.cn)("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",a==="right"&&"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",a==="left"&&"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",a==="top"&&"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",a==="bottom"&&"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",e),...r,children:[t,(0,s.jsxs)(i.Close,{className:"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",children:[(0,s.jsx)(p.XIcon,{className:"size-4"}),(0,s.jsx)("span",{className:"sr-only",children:"Close"})]})]})]})}T.displayName=S;function D({className:e,...t}){let{[y]:a=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(a,{"data-slot":"sheet-header",className:(0,o.cn)("flex flex-col gap-1.5 p-4",e),...t})}D.displayName=y;function w({className:e,...t}){let{[C]:a=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(a,{"data-slot":"sheet-footer",className:(0,o.cn)("mt-auto flex flex-col gap-2 p-4",e),...t})}w.displayName=C;function O({className:e,...t}){let{[g]:a=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(a,{as:i.Title,"data-slot":"sheet-title",className:(0,o.cn)("text-foreground font-semibold",e),...t})}O.displayName=g;function k({className:e,...t}){let{[P]:a=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,s.jsx)(a,{as:i.Description,"data-slot":"sheet-description",className:(0,o.cn)("text-muted-foreground text-sm",e),...t})}k.displayName=P;0&&(module.exports={Sheet,SheetClose,SheetContent,SheetDescription,SheetFooter,SheetHeader,SheetTitle,SheetTrigger});

package/dist/sheet.mjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";import{a,b,c,d,e,f,g,h}from"./chunk-P5DWHNX6.mjs";import"./chunk-3EYN2AKU.mjs";export{a as Sheet,c as SheetClose,d as SheetContent,h as SheetDescription,f as SheetFooter,e as SheetHeader,g as SheetTitle,b as SheetTrigger};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@stackshift-ui/sheet",
+  "description": "Extends the Dialog component to display content that complements the main content of the screen.",
+  "version": "1.0.0-beta.1",
+  "private": false,
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "src"
+  ],
+  "author": "WebriQ <info@webriq.com>",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.7.0",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "esbuild-plugin-rdi": "^0.0.0",
+    "esbuild-plugin-react18": "^0.2.5",
+    "esbuild-plugin-react18-css": "^0.0.4",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.2",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.1",
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.14",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0"
+  },
+  "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@types/react": "16.8 - 19",
+    "next": "10 - 14",
+    "react": "16.8 - 19",
+    "react-dom": "16.8 - 19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig-build.json",
+    "clean": "rm -rf dist",
+    "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run --coverage"
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./sheet";

package/src/setupTests.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+export { };
+

package/src/sheet.test.tsx

@@ -0,0 +1,45 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, test } from "vitest";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+
+describe.concurrent("sheet", () => {
+  afterEach(cleanup);
+
+  test("Dummy test - test if renders without errors", async ({ expect }) => {
+    const clx = "my-class";
+
+    const user = userEvent.setup();
+
+    const { unmount } = render(
+      <Sheet>
+        <SheetTrigger asChild data-testid="sheet-trigger">
+          <button>Open Sheet</button>
+        </SheetTrigger>
+        <SheetContent data-testid="sheet-container" className={clx}>
+          <SheetHeader>
+            <SheetTitle>Sheet Title</SheetTitle>
+            <SheetDescription>Sheet Description</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    const trigger = screen.getByTestId("sheet-trigger");
+    expect(trigger).toBeInTheDocument();
+
+    user.click(trigger);
+
+    const sheet = await screen.findByTestId("sheet-container");
+
+    expect(sheet).toBeInTheDocument();
+    unmount();
+  });
+});

package/src/sheet.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+
+const displayName = "Sheet";
+const displayNameTrigger = "SheetTrigger";
+const displayNamePortal = "SheetPortal";
+const displayNameClose = "SheetClose";
+const displayNameOverlay = "SheetOverlay";
+const displayNameContent = "SheetContent";
+const displayNameHeader = "SheetHeader";
+const displayNameFooter = "SheetFooter";
+const displayNameTitle = "SheetTitle";
+const displayNameDescription = "SheetDescription";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={SheetPrimitive.Root} data-slot="sheet" {...props} />;
+}
+Sheet.displayName = displayName;
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  const { [displayNameTrigger]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={SheetPrimitive.Trigger} data-slot="sheet-trigger" {...props} />;
+}
+SheetTrigger.displayName = displayNameTrigger;
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  const { [displayNameClose]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={SheetPrimitive.Close} data-slot="sheet-close" {...props} />;
+}
+SheetClose.displayName = displayNameClose;
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  const { [displayNamePortal]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return <Component as={SheetPrimitive.Portal} data-slot="sheet-portal" {...props} />;
+}
+SheetPortal.displayName = displayNamePortal;
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  const { [displayNameOverlay]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SheetPrimitive.Overlay}
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+SheetOverlay.displayName = displayNameOverlay;
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  const { [displayNameContent]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <Component
+        as={SheetPrimitive.Content}
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}>
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </Component>
+    </SheetPortal>
+  );
+}
+SheetContent.displayName = displayNameContent;
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  const { [displayNameHeader]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+SheetHeader.displayName = displayNameHeader;
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  const { [displayNameFooter]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+SheetFooter.displayName = displayNameFooter;
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  const { [displayNameTitle]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SheetPrimitive.Title}
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+SheetTitle.displayName = displayNameTitle;
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  const { [displayNameDescription]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  return (
+    <Component
+      as={SheetPrimitive.Description}
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+SheetDescription.displayName = displayNameDescription;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+};