@react-cupertino-ui/bottom-sheet 1.0.0

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024 Anderson Lima
+
+This project is inspired by Apple's design principles but is not affiliated with, endorsed, or sponsored by Apple Inc.
+
+
+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/dist/index.css

@@ -0,0 +1,105 @@
+.react-cupertino-ui-bottom-sheet__overlay {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, rgba(6, 8, 12, 0.65), transparent 20%);
+  backdrop-filter: blur(24px) saturate(140%);
+  -webkit-backdrop-filter: blur(24px) saturate(140%);
+  animation: bottom-sheet-overlay-fade 200ms ease forwards;
+}
+
+.react-cupertino-ui-bottom-sheet__content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0 auto;
+  width: min(640px, 100%);
+  border-radius: 32px 32px 0 0;
+  padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: inherit;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12), 0 -24px 60px rgba(0, 0, 0, 0.18);
+  height: calc(var(--bottom-sheet-height, 0.6) * 100vh);
+  max-height: calc(100vh - 1rem);
+  transform: translate3d(0, calc(var(--bottom-sheet-offset, 0) * 100vh), 0);
+  transition: height 380ms cubic-bezier(0.2, 0.8, 0.4, 1), transform 260ms cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 260ms ease, background 260ms ease;
+  outline: none;
+  overflow: hidden;
+}
+.react-cupertino-ui-bottom-sheet__content.glass {
+  background: rgba(255, 255, 255, var(--glass-opacity, 0.7));
+  backdrop-filter: blur(var(--glass-blur, 46px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--glass-blur, 46px)) saturate(var(--glass-saturation, 180%));
+  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
+  box-shadow: var(--glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  position: relative;
+  overflow: hidden;
+}
+.react-cupertino-ui-bottom-sheet__content.glass::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight, linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 55%));
+  border-radius: inherit;
+  opacity: var(--glass-highlight-opacity, 0.95);
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+.react-cupertino-ui-bottom-sheet__content.is-dragging {
+  transition: none;
+  cursor: grabbing;
+}
+@media (prefers-reduced-motion: reduce) {
+  .react-cupertino-ui-bottom-sheet__content {
+    transition: none;
+  }
+}
+
+.react-cupertino-ui-bottom-sheet__handle {
+  width: 72px;
+  height: 6px;
+  border-radius: 999px;
+  border: none;
+  background: color-mix(in srgb, rgba(15, 15, 15, 0.35), rgba(255, 255, 255, 0.6));
+  margin: 0 auto 0.5rem;
+  cursor: grab;
+  position: relative;
+  isolation: isolate;
+}
+.react-cupertino-ui-bottom-sheet__handle:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
+}
+.react-cupertino-ui-bottom-sheet__handle:active {
+  cursor: grabbing;
+}
+
+.react-cupertino-ui-bottom-sheet__body {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 1rem;
+  mask-image: linear-gradient(180deg, transparent, #000 10%);
+}
+
+.react-cupertino-ui-bottom-sheet__title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.react-cupertino-ui-bottom-sheet__description {
+  font-size: 0.95rem;
+  color: color-mix(in srgb, currentColor, transparent 30%);
+}
+
+@keyframes bottom-sheet-overlay-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import "./index.scss";
+export declare const BottomSheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const BottomSheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const BottomSheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+export declare const BottomSheet: ({ children, open, defaultOpen, onOpenChange, ...props }: DialogPrimitive.DialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const BottomSheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface BottomSheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    snapPoints?: number[];
+    initialSnap?: number;
+    handle?: boolean;
+    glass?: boolean;
+    onSnapChange?: (value: number, index: number) => void;
+}
+declare const BottomSheetContent: React.ForwardRefExoticComponent<BottomSheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const BottomSheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const BottomSheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { BottomSheetOverlay, BottomSheetContent, BottomSheetTitle, BottomSheetDescription, };

package/dist/index.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const DEFAULT_SNAP_POINTS = [0.25, 0.5, 0.9];
+const BottomSheetContext = React.createContext(null);
+export const BottomSheetTrigger = DialogPrimitive.Trigger;
+export const BottomSheetClose = DialogPrimitive.Close;
+export const BottomSheetPortal = DialogPrimitive.Portal;
+export const BottomSheet = ({ children, open, defaultOpen, onOpenChange, ...props }) => {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false);
+    const isControlled = open !== undefined;
+    const currentOpen = isControlled ? open : internalOpen;
+    const handleOpenChange = React.useCallback((next) => {
+        if (!isControlled) {
+            setInternalOpen(next);
+        }
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const requestClose = React.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+    const contextValue = React.useMemo(() => ({ requestClose }), [requestClose]);
+    return (_jsx(DialogPrimitive.Root, { open: currentOpen, onOpenChange: handleOpenChange, ...props, children: _jsx(BottomSheetContext.Provider, { value: contextValue, children: children }) }));
+};
+const BottomSheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("react-cupertino-ui-bottom-sheet__overlay", className), ...props })));
+BottomSheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const clampRatio = (value) => Math.min(1, Math.max(0, value));
+const useBottomSheetContext = () => React.useContext(BottomSheetContext);
+const BottomSheetContent = React.forwardRef(({ className, children, snapPoints, initialSnap, handle = true, glass = true, onSnapChange, ...props }, ref) => {
+    const context = useBottomSheetContext();
+    const sanitizedSnapPoints = React.useMemo(() => {
+        const points = (snapPoints && snapPoints.length ? snapPoints : DEFAULT_SNAP_POINTS)
+            .map((point) => clampRatio(point))
+            .filter((point) => point > 0)
+            .sort((a, b) => a - b);
+        return points.length ? points : DEFAULT_SNAP_POINTS;
+    }, [snapPoints]);
+    const getNearestSnapIndex = React.useCallback((value) => {
+        let nearestIndex = 0;
+        sanitizedSnapPoints.forEach((point, index) => {
+            const currentDiff = Math.abs(point - value);
+            const bestDiff = Math.abs(sanitizedSnapPoints[nearestIndex] - value);
+            if (currentDiff < bestDiff) {
+                nearestIndex = index;
+            }
+        });
+        return nearestIndex;
+    }, [sanitizedSnapPoints]);
+    const initialIndex = React.useMemo(() => {
+        if (typeof initialSnap === "number") {
+            return getNearestSnapIndex(clampRatio(initialSnap));
+        }
+        return sanitizedSnapPoints.length - 1;
+    }, [getNearestSnapIndex, initialSnap, sanitizedSnapPoints.length]);
+    const [currentSnapIndex, setCurrentSnapIndex] = React.useState(initialIndex);
+    const [dragOffset, setDragOffset] = React.useState(0);
+    const [isDragging, setIsDragging] = React.useState(false);
+    React.useEffect(() => {
+        setCurrentSnapIndex(initialIndex);
+    }, [initialIndex]);
+    React.useEffect(() => {
+        const value = sanitizedSnapPoints[currentSnapIndex];
+        if (typeof value === "number") {
+            onSnapChange?.(value, currentSnapIndex);
+        }
+    }, [currentSnapIndex, onSnapChange, sanitizedSnapPoints]);
+    const handlePointerDown = React.useCallback((event) => {
+        if (event.button && event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        const startY = event.clientY;
+        const baseSnap = sanitizedSnapPoints[currentSnapIndex] ?? sanitizedSnapPoints[0];
+        setIsDragging(true);
+        const handleMove = (moveEvent) => {
+            const delta = moveEvent.clientY - startY;
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 1;
+            setDragOffset(delta / viewportHeight);
+        };
+        const cleanup = () => {
+            setIsDragging(false);
+            setDragOffset(0);
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleUp);
+            window.removeEventListener("pointercancel", handleUp);
+        };
+        const handleUp = (upEvent) => {
+            const delta = upEvent.clientY - startY;
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 1;
+            const offset = delta / viewportHeight;
+            finishDrag(baseSnap, offset);
+            cleanup();
+        };
+        const finishDrag = (startSnap, offsetRatio) => {
+            const smallestSnap = sanitizedSnapPoints[0] ?? 0.25;
+            const nextRatio = clampRatio(startSnap - offsetRatio);
+            if (nextRatio <= smallestSnap * 0.5) {
+                context?.requestClose?.();
+                return;
+            }
+            const targetIndex = getNearestSnapIndex(nextRatio);
+            setCurrentSnapIndex(targetIndex);
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+        window.addEventListener("pointercancel", handleUp);
+    }, [context, currentSnapIndex, getNearestSnapIndex, sanitizedSnapPoints]);
+    const resolvedSnap = sanitizedSnapPoints[currentSnapIndex] ?? sanitizedSnapPoints[0];
+    const heightRatio = clampRatio(resolvedSnap - dragOffset);
+    const downwardDrag = dragOffset > 0 ? Math.min(dragOffset, 1) : 0;
+    const style = {
+        "--bottom-sheet-height": heightRatio.toString(),
+        "--bottom-sheet-offset": downwardDrag.toString(),
+    };
+    return (_jsxs(BottomSheetPortal, { forceMount: true, children: [_jsx(BottomSheetOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("react-cupertino-ui-bottom-sheet__content", glass && "glass", isDragging && "is-dragging", className), "data-dragging": isDragging ? "true" : undefined, "data-snap-index": currentSnapIndex, style: style, ...props, children: [handle && (_jsx("button", { type: "button", className: "react-cupertino-ui-bottom-sheet__handle", "aria-label": "Ajustar painel", onPointerDown: handlePointerDown })), _jsx("div", { className: "react-cupertino-ui-bottom-sheet__body", onPointerDown: handle ? undefined : handlePointerDown, children: children })] })] }));
+});
+BottomSheetContent.displayName = DialogPrimitive.Content.displayName;
+const BottomSheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("react-cupertino-ui-bottom-sheet__title", className), ...props })));
+BottomSheetTitle.displayName = DialogPrimitive.Title.displayName;
+const BottomSheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("react-cupertino-ui-bottom-sheet__description", className), ...props })));
+BottomSheetDescription.displayName = DialogPrimitive.Description.displayName;
+export { BottomSheetOverlay, BottomSheetContent, BottomSheetTitle, BottomSheetDescription, };

package/dist/index.scss

@@ -0,0 +1,99 @@
+@use "@/styles/mixins/glass" as glass;
+@use "@/styles/mixins/animations" as motion;
+
+.react-cupertino-ui-bottom-sheet__overlay {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, rgba(6, 8, 12, 0.65), transparent 20%);
+  backdrop-filter: blur(24px) saturate(140%);
+  -webkit-backdrop-filter: blur(24px) saturate(140%);
+  animation: bottom-sheet-overlay-fade 200ms ease forwards;
+}
+
+.react-cupertino-ui-bottom-sheet__content {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0 auto;
+  width: min(640px, 100%);
+  border-radius: 32px 32px 0 0;
+  padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: inherit;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12), 0 -24px 60px rgba(0, 0, 0, 0.18);
+  height: calc(var(--bottom-sheet-height, 0.6) * 100vh);
+  max-height: calc(100vh - 1rem);
+  transform: translate3d(0, calc(var(--bottom-sheet-offset, 0) * 100vh), 0);
+  transition:
+    height 380ms cubic-bezier(0.2, 0.8, 0.4, 1),
+    transform 260ms cubic-bezier(0.2, 0.8, 0.4, 1),
+    box-shadow 260ms ease,
+    background 260ms ease;
+  outline: none;
+  overflow: hidden;
+
+  &.glass {
+    @include glass.glass-panel(light, var(--glass-blur, 46px));
+  }
+
+  &.is-dragging {
+    transition: none;
+    cursor: grabbing;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.react-cupertino-ui-bottom-sheet__handle {
+  width: 72px;
+  height: 6px;
+  border-radius: 999px;
+  border: none;
+  background: color-mix(in srgb, rgba(15, 15, 15, 0.35), rgba(255, 255, 255, 0.6));
+  margin: 0 auto 0.5rem;
+  cursor: grab;
+  position: relative;
+  isolation: isolate;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.react-cupertino-ui-bottom-sheet__body {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 1rem;
+  mask-image: linear-gradient(180deg, transparent, #000 10%);
+}
+
+.react-cupertino-ui-bottom-sheet__title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.react-cupertino-ui-bottom-sheet__description {
+  font-size: 0.95rem;
+  color: color-mix(in srgb, currentColor, transparent 30%);
+}
+
+@keyframes bottom-sheet-overlay-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-cupertino-ui/bottom-sheet",
+  "version": "1.0.0",
+  "description": "BottomSheet component from React Cupertino UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./dist/**/*.scss"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:styles",
+    "build:styles": "node ../../../scripts/build-styles.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@react-cupertino-ui/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}