@react-cupertino-ui/action-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,182 @@
+.react-cupertino-ui-action-sheet__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.react-cupertino-ui-action-sheet__overlay[data-state=closed] {
+  animation: overlayHide 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.react-cupertino-ui-action-sheet__content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  outline: none;
+  max-width: 600px;
+  margin: 0 auto;
+  animation: contentShow 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.react-cupertino-ui-action-sheet__content[data-state=closed] {
+  animation: contentHide 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.react-cupertino-ui-action-sheet__group {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.react-cupertino-ui-action-sheet__header {
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(20px) saturate(180%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 14px 16px;
+  text-align: center;
+  border-top-left-radius: 14px;
+  border-top-right-radius: 14px;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-action-sheet__header {
+    background: rgba(30, 30, 30, 0.82);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}
+.react-cupertino-ui-action-sheet__header:only-child {
+  border-radius: 14px;
+  border-bottom: none;
+}
+.react-cupertino-ui-action-sheet__header + .react-cupertino-ui-action-sheet__action {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.react-cupertino-ui-action-sheet__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted-foreground);
+  margin: 0 0 4px;
+}
+.react-cupertino-ui-action-sheet__description {
+  font-size: 13px;
+  color: var(--muted-foreground);
+  margin: 0;
+}
+.react-cupertino-ui-action-sheet__action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 18px;
+  font-size: 20px;
+  color: var(--color-blue);
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(20px) saturate(180%);
+  border: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  user-select: none;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-action-sheet__action {
+    background: rgba(30, 30, 30, 0.82);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+}
+.react-cupertino-ui-action-sheet__action:first-child {
+  border-radius: 14px;
+  border-top: none;
+}
+.react-cupertino-ui-action-sheet__action:last-of-type {
+  border-bottom-left-radius: 14px;
+  border-bottom-right-radius: 14px;
+}
+.react-cupertino-ui-action-sheet__action:not(:last-of-type) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.react-cupertino-ui-action-sheet__action:active {
+  background: rgba(255, 255, 255, 0.6);
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-action-sheet__action:active {
+    background: rgba(50, 50, 50, 0.6);
+  }
+}
+.react-cupertino-ui-action-sheet__action.destructive {
+  color: var(--color-red);
+}
+.react-cupertino-ui-action-sheet__action .action-icon {
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+}
+.react-cupertino-ui-action-sheet__action .action-label {
+  font-weight: 400;
+}
+.react-cupertino-ui-action-sheet__cancel {
+  margin-top: 8px;
+  width: 100%;
+  padding: 18px;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--color-blue);
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 14px;
+  border: none;
+  cursor: pointer;
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-action-sheet__cancel {
+    background: rgba(44, 44, 46, 0.95);
+  }
+}
+.react-cupertino-ui-action-sheet__cancel:active {
+  background: rgba(255, 255, 255, 0.8);
+}
+@media (prefers-color-scheme: dark) {
+  .react-cupertino-ui-action-sheet__cancel:active {
+    background: rgba(50, 50, 50, 0.8);
+  }
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes overlayHide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import "./index.scss";
+declare const ActionSheetRoot: React.FC<DialogPrimitive.DialogProps>;
+declare const ActionSheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface ActionSheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    glass?: boolean;
+}
+declare const ActionSheetContent: React.ForwardRefExoticComponent<ActionSheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const ActionSheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ActionSheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface ActionSheetActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    destructive?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+    icon?: React.ReactNode;
+}
+declare const ActionSheetAction: React.ForwardRefExoticComponent<ActionSheetActionProps & React.RefAttributes<HTMLButtonElement>>;
+interface ActionSheetCancelProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+declare const ActionSheetCancel: React.ForwardRefExoticComponent<ActionSheetCancelProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ActionSheetHeader: ({ className, children }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export { ActionSheetRoot as ActionSheet, ActionSheetTrigger, ActionSheetContent, ActionSheetAction, ActionSheetCancel, ActionSheetTitle, ActionSheetDescription, ActionSheetHeader, };

package/dist/index.js

@@ -0,0 +1,28 @@
+"use client";
+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 ActionSheetRoot = DialogPrimitive.Root;
+const ActionSheetTrigger = DialogPrimitive.Trigger;
+const ActionSheetPortal = DialogPrimitive.Portal;
+const ActionSheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("react-cupertino-ui-action-sheet__overlay", className), ...props })));
+ActionSheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const ActionSheetContent = React.forwardRef(({ className, children, glass = true, ...props }, ref) => (_jsxs(ActionSheetPortal, { children: [_jsx(ActionSheetOverlay, {}), _jsx(DialogPrimitive.Content, { ref: ref, className: cn("react-cupertino-ui-action-sheet__content", glass && "glass", className), ...props, children: _jsx("div", { className: "react-cupertino-ui-action-sheet__group", children: children }) })] })));
+ActionSheetContent.displayName = DialogPrimitive.Content.displayName;
+const ActionSheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("react-cupertino-ui-action-sheet__title", className), ...props })));
+ActionSheetTitle.displayName = DialogPrimitive.Title.displayName;
+const ActionSheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("react-cupertino-ui-action-sheet__description", className), ...props })));
+ActionSheetDescription.displayName = DialogPrimitive.Description.displayName;
+const ActionSheetAction = React.forwardRef(({ className, destructive, disabled, onSelect, icon, children, ...props }, ref) => {
+    return (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", className: cn("react-cupertino-ui-action-sheet__action", destructive && "destructive", className), disabled: disabled, onClick: onSelect, ...props, children: [icon && _jsx("span", { className: "action-icon", children: icon }), _jsx("span", { className: "action-label", children: children })] }) }));
+});
+ActionSheetAction.displayName = "ActionSheetAction";
+const ActionSheetCancel = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx("button", { ref: ref, type: "button", className: cn("react-cupertino-ui-action-sheet__cancel", className), ...props, children: children }) }));
+});
+ActionSheetCancel.displayName = "ActionSheetCancel";
+// Helper component for Header/Message area
+const ActionSheetHeader = ({ className, children }) => (_jsx("div", { className: cn("react-cupertino-ui-action-sheet__header", className), children: children }));
+export { ActionSheetRoot as ActionSheet, ActionSheetTrigger, ActionSheetContent, ActionSheetAction, ActionSheetCancel, ActionSheetTitle, ActionSheetDescription, ActionSheetHeader, };

package/dist/index.scss

@@ -0,0 +1,184 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-action-sheet {
+  
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    
+    &[data-state="closed"] {
+        animation: overlayHide 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+  }
+
+  &__content {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 51;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    outline: none;
+    max-width: 600px;
+    margin: 0 auto;
+    
+    // Animation
+    animation: contentShow 300ms cubic-bezier(0.16, 1, 0.3, 1);
+    
+    &[data-state="closed"] {
+        animation: contentHide 300ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  
+  &__header {
+      background: rgba(255, 255, 255, 0.82);
+      backdrop-filter: blur(20px) saturate(180%);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      padding: 14px 16px;
+      text-align: center;
+      border-top-left-radius: 14px;
+      border-top-right-radius: 14px;
+      
+      @media (prefers-color-scheme: dark) {
+          background: rgba(30, 30, 30, 0.82);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      }
+      
+      &:only-child {
+        border-radius: 14px;
+        border-bottom: none;
+      }
+      
+      + .react-cupertino-ui-action-sheet__action {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+      }
+  }
+
+  &__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--muted-foreground);
+    margin: 0 0 4px;
+  }
+
+  &__description {
+    font-size: 13px;
+    color: var(--muted-foreground);
+    margin: 0;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 18px;
+    font-size: 20px;
+    color: var(--color-blue);
+    background: rgba(255, 255, 255, 0.82);
+    backdrop-filter: blur(20px) saturate(180%);
+    border: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: background-color 0.2s;
+    user-select: none;
+    
+    @media (prefers-color-scheme: dark) {
+        background: rgba(30, 30, 30, 0.82);
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    &:first-child {
+        border-radius: 14px;
+        border-top: none;
+    }
+    
+    &:last-of-type {
+        border-bottom-left-radius: 14px;
+        border-bottom-right-radius: 14px;
+    }
+    
+    &:not(:last-of-type) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    &:active {
+        background: rgba(255, 255, 255, 0.6);
+        @media (prefers-color-scheme: dark) {
+             background: rgba(50, 50, 50, 0.6);
+        }
+    }
+    
+    &.destructive {
+        color: var(--color-red);
+    }
+    
+    .action-icon {
+        margin-right: 10px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .action-label {
+        font-weight: 400;
+    }
+  }
+
+  &__cancel {
+    margin-top: 8px;
+    width: 100%;
+    padding: 18px;
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--color-blue);
+    background: rgba(255, 255, 255, 0.95); // More opaque
+    border-radius: 14px;
+    border: none;
+    cursor: pointer;
+    
+    @media (prefers-color-scheme: dark) {
+        background: rgba(44, 44, 46, 0.95);
+    }
+    
+    &:active {
+        background: rgba(255, 255, 255, 0.8);
+        @media (prefers-color-scheme: dark) {
+             background: rgba(50, 50, 50, 0.8);
+        }
+    }
+  }
+}
+
+@keyframes overlayShow {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes overlayHide {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes contentShow {
+  from { opacity: 0; transform: translateY(100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes contentHide {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(100%); }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-cupertino-ui/action-sheet",
+  "version": "1.0.0",
+  "description": "ActionSheet 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"
+  }
+}