@pittorica/sheet-react 0.8.2

package/dist/sheet.css.d.ts

@@ -0,0 +1,22 @@
+export declare const overlay: string;
+export declare const sheetRecipe: import('@vanilla-extract/recipes').RuntimeFn<{
+    side: {
+        bottom: string;
+        right: string;
+        left: string;
+    };
+    width: {
+        full: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+        xxlarge: string;
+    };
+}>;
+export declare const dragHandle: string;
+export declare const header: string;
+export declare const titleStyle: string;
+export declare const content: string;
+export declare const closeButton: string;
+//# sourceMappingURL=sheet.css.d.ts.map

package/dist/sheet.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.css.d.ts","sourceRoot":"","sources":["../src/sheet.css.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,OAAO,QAMlB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;EAgFtB,CAAC;AAEH,eAAO,MAAM,UAAU,QASrB,CAAC;AAEH,eAAO,MAAM,MAAM,QASjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAMrB,CAAC;AAEH,eAAO,MAAM,OAAO,QAOlB,CAAC;AAEH,eAAO,MAAM,WAAW,QAgBtB,CAAC"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pittorica/sheet-react",
+  "version": "0.8.2",
+  "private": false,
+  "author": {
+    "name": "Davide Di Criscito"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.js",
+  "dependencies": {
+    "@tabler/icons-react": "^3.36.1",
+    "@vanilla-extract/css": "^1.18.0",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "clsx": "^2.1.1",
+    "motion": "^12.29.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@pittorica/styles": "0.8.2"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  }
+}

package/src/Sheet.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect } from 'react';
+
+import { createPortal } from 'react-dom';
+
+import clsx from 'clsx';
+
+import { IconX } from '@tabler/icons-react';
+
+import { AnimatePresence, motion, type PanInfo } from 'motion/react';
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+
+import {
+  closeButton,
+  content,
+  dragHandle,
+  header,
+  overlay,
+  sheetRecipe,
+  titleStyle,
+} from './sheet.css.js';
+
+type SheetVariants = RecipeVariants<typeof sheetRecipe>;
+
+export type SheetProps = {
+  isOpen: boolean;
+  onClose: () => void;
+
+  side?: NonNullable<SheetVariants>['side'];
+
+  maxWidth?: NonNullable<SheetVariants>['width'];
+
+  /**
+   * Background color of the sheet.
+   */
+  color?: string;
+
+  /**
+   * Text color of the sheet content (including title and close button).
+   * Use this to ensure contrast when using a custom background color.
+   */
+  textColor?: string;
+
+  title?: React.ReactNode;
+  showHandle?: boolean;
+  children: React.ReactNode;
+  className?: string;
+};
+
+const sheetVariants = {
+  bottom: {
+    hidden: { y: '100%' },
+    visible: { y: 0 },
+  },
+  right: {
+    hidden: { x: '100%' },
+    visible: { x: 0 },
+  },
+  left: {
+    hidden: { x: '-100%' },
+    visible: { x: 0 },
+  },
+};
+
+export const Sheet: React.FC<SheetProps> = ({
+  isOpen,
+  onClose,
+  side = 'right',
+  maxWidth = 'full',
+  color,
+  textColor,
+  title,
+  showHandle = true,
+  children,
+  className,
+}) => {
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      globalThis.addEventListener('keydown', handleEsc);
+    }
+
+    return () => {
+      globalThis.removeEventListener('keydown', handleEsc);
+    };
+  }, [isOpen, onClose]);
+
+  const unlockScroll = () => {
+    document.body.style.overflow = '';
+  };
+
+  const handleDragEnd = (_: never, info: PanInfo) => {
+    if (info.offset.y > 100 || info.velocity.y > 500) {
+      onClose();
+    }
+  };
+
+  const appliedWidth = side === 'bottom' ? maxWidth : 'full';
+
+  return createPortal(
+    <AnimatePresence mode="wait" onExitComplete={unlockScroll}>
+      {isOpen && (
+        <>
+          <motion.div
+            className={overlay}
+            onClick={onClose}
+            aria-hidden="true"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+          />
+
+          <motion.div
+            className={clsx(
+              sheetRecipe({ side, width: appliedWidth }),
+              className
+            )}
+            style={{
+              backgroundColor: color,
+              color: textColor,
+            }}
+            role="dialog"
+            aria-modal="true"
+            variants={sheetVariants[side]}
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            transition={{
+              type: 'spring',
+              damping: 25,
+              stiffness: 300,
+              mass: 0.8,
+            }}
+            drag={side === 'bottom' ? 'y' : false}
+            dragConstraints={{ top: 0, bottom: 0 }}
+            dragElastic={{ top: 0, bottom: 0.2 }}
+            onDragEnd={handleDragEnd}
+          >
+            {side === 'bottom' && showHandle && <div className={dragHandle} />}
+
+            <div className={header}>
+              {title ? <h2 className={titleStyle}>{title}</h2> : <div />}
+              <button
+                className={closeButton}
+                onClick={onClose}
+                aria-label="Close sheet"
+              >
+                <IconX size={24} />
+              </button>
+            </div>
+
+            <div className={content}>{children}</div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>,
+    document.body
+  );
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './sheet.css.js';
+export * from './Sheet.js';

package/src/sheet.css.ts

@@ -0,0 +1,163 @@
+import { pitto } from '@pittorica/styles';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+const sizes = {
+  small: '40rem',
+  medium: '48rem',
+  large: '64rem',
+  xlarge: '80rem',
+  xxlarge: '96rem',
+};
+
+const zIndex = {
+  overlay: 10_000,
+  sheet: 10_001,
+};
+
+export const overlay = style({
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  zIndex: zIndex.overlay,
+  backdropFilter: 'blur(2px)',
+});
+
+export const sheetRecipe = recipe({
+  base: style({
+    position: 'fixed',
+    zIndex: zIndex.sheet,
+    display: 'flex',
+    flexDirection: 'column',
+    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.15)',
+    overflow: 'hidden',
+    maxHeight: '100dvh',
+    willChange: 'transform',
+    boxSizing: 'border-box',
+    backgroundColor: pitto.color.brand[900].color,
+    // Default text color from theme, ensuring inheritance works if not overridden
+    color: pitto.color.brand[900].onColor,
+  }),
+
+  variants: {
+    side: {
+      bottom: style({
+        bottom: 0,
+        left: 0,
+        right: 0,
+        maxHeight: '90vh',
+        borderTopLeftRadius: '28px',
+        borderTopRightRadius: '28px',
+      }),
+      right: style({
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        maxWidth: '400px',
+        borderTopLeftRadius: '28px',
+        borderBottomLeftRadius: '28px',
+      }),
+      left: style({
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: '100%',
+        maxWidth: '400px',
+        borderTopRightRadius: '28px',
+        borderBottomRightRadius: '28px',
+      }),
+    },
+
+    width: {
+      full: style({ width: '100%' }),
+      small: style({
+        width: '100%',
+        maxWidth: sizes.small,
+        marginInline: 'auto',
+      }),
+      medium: style({
+        width: '100%',
+        maxWidth: sizes.medium,
+        marginInline: 'auto',
+      }),
+      large: style({
+        width: '100%',
+        maxWidth: sizes.large,
+        marginInline: 'auto',
+      }),
+      xlarge: style({
+        width: '100%',
+        maxWidth: sizes.xlarge,
+        marginInline: 'auto',
+      }),
+      xxlarge: style({
+        width: '100%',
+        maxWidth: sizes.xxlarge,
+        marginInline: 'auto',
+      }),
+    },
+  },
+
+  defaultVariants: {
+    side: 'right',
+    width: 'full',
+  },
+});
+
+export const dragHandle = style({
+  width: '32px',
+  height: '4px',
+  backgroundColor: pitto.color.gray[300].color,
+  borderRadius: pitto.border.radius.full,
+  margin: '0 auto',
+  marginTop: pitto.spacing.medium,
+  marginBottom: pitto.spacing.small,
+  flexShrink: 0,
+});
+
+export const header = style({
+  paddingLeft: pitto.spacing.large,
+  paddingRight: pitto.spacing.large,
+  paddingTop: pitto.spacing.large,
+  paddingBottom: pitto.spacing.medium,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+});
+
+export const titleStyle = style({
+  fontFamily: pitto.font.family.sans,
+  fontSize: pitto.font.size.headline.small,
+  fontWeight: pitto.font.weight.medium,
+  margin: 0,
+  color: 'inherit',
+});
+
+export const content = style({
+  paddingLeft: pitto.spacing.small,
+  paddingRight: pitto.spacing.small,
+  paddingBottom: pitto.spacing.xlarge,
+  flex: 1,
+  overflowY: 'auto',
+  paddingTop: 0,
+});
+
+export const closeButton = style({
+  background: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  padding: pitto.spacing.small,
+  borderRadius: pitto.border.radius.full,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'inherit',
+  opacity: 0.7,
+  transition: 'background-color 0.2s, opacity 0.2s',
+  ':hover': {
+    backgroundColor: 'rgba(0,0,0, 0.05)', // Hover generico
+    opacity: 1,
+  },
+});

package/tsconfig.app.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,35 @@
+import path from 'node:path';
+
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import react from '@vitejs/plugin-react';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler']],
+      },
+    }),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+      rollupTypes: false,
+      outDir: 'dist',
+      tsconfigPath: './tsconfig.app.json',
+    }),
+  ],
+
+  build: {
+    lib: {
+      entry: path.resolve(import.meta.dirname, 'src/index.ts'),
+      name: '@pittorica/sheet-react',
+      formats: ['es', 'cjs'],
+      fileName: (format: string): string =>
+        `index.${format === 'es' ? 'js' : 'cjs'}`,
+    },
+    sourcemap: true,
+    minify: false,
+  },
+});