@react-cupertino-ui/dialog 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,190 @@
+.react-cupertino-ui-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background: radial-gradient(circle at 20% 20%, rgba(90, 200, 250, 0.25), transparent 55%), rgba(4, 6, 12, var(--dialog-overlay-opacity, 0.65));
+  backdrop-filter: blur(var(--dialog-overlay-blur, 48px)) saturate(180%);
+  -webkit-backdrop-filter: blur(var(--dialog-overlay-blur, 48px)) saturate(180%);
+  animation: dialog-overlay-in 420ms ease forwards;
+}
+.react-cupertino-ui-dialog__overlay[data-state=closed] {
+  animation: dialog-overlay-out 260ms ease forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  .react-cupertino-ui-dialog__overlay {
+    animation-duration: 0.01ms;
+  }
+}
+
+.react-cupertino-ui-dialog__content {
+  --dialog-width: 28rem;
+  --dialog-radius: 28px;
+  --dialog-glass-blur: var(--glass-blur, 40px);
+  --dialog-glass-opacity: var(--glass-opacity, 0.72);
+  --dialog-accent: var(--color-blue, #0a84ff);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(var(--dialog-width), 100vw - 2.5rem);
+  max-height: calc(100vh - 3rem);
+  padding: clamp(1.8rem, 3vw, 2.6rem);
+  border-radius: var(--dialog-radius);
+  color: var(--foreground, #050505);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(250, 250, 252, 0.95);
+  box-shadow: 0 20px 55px rgba(9, 9, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 35px color-mix(in srgb, var(--dialog-accent), transparent 60%);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  animation: dialog-content-in 480ms cubic-bezier(0.19, 0.82, 0.22, 1.2) forwards;
+  transition-property: all;
+  transition-duration: 360ms;
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.react-cupertino-ui-dialog__content::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+}
+.react-cupertino-ui-dialog__content:focus {
+  outline: none;
+}
+.react-cupertino-ui-dialog__content:focus-visible {
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3), 0 20px 55px rgba(9, 9, 11, 0.25);
+}
+.react-cupertino-ui-dialog__content[data-state=closed] {
+  animation: dialog-content-out 280ms cubic-bezier(0.5, 0.15, 0.25, 1) forwards;
+}
+@media (max-width: 640px) {
+  .react-cupertino-ui-dialog__content {
+    padding: 1.6rem;
+    border-radius: 24px;
+  }
+}
+.react-cupertino-ui-dialog__content--glass {
+  background: rgba(255, 255, 255, var(--dialog-glass-opacity, 0.72));
+  backdrop-filter: blur(var(--dialog-glass-blur, 40px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--dialog-glass-blur, 40px)) 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-dialog__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;
+}
+@supports not (backdrop-filter: blur(2px)) {
+  .react-cupertino-ui-dialog__content {
+    background: rgba(255, 255, 255, 0.95);
+  }
+}
+.react-cupertino-ui-dialog__content--sm {
+  --dialog-width: 22rem;
+}
+.react-cupertino-ui-dialog__content--md {
+  --dialog-width: 28rem;
+}
+.react-cupertino-ui-dialog__content--lg {
+  --dialog-width: 34rem;
+}
+.react-cupertino-ui-dialog__content[data-tone=destructive] {
+  --dialog-accent: var(--color-red, #ff3b30);
+}
+.react-cupertino-ui-dialog__content[data-tone=success] {
+  --dialog-accent: var(--color-green, #34c759);
+}
+.react-cupertino-ui-dialog__content[data-tone=default] {
+  --dialog-accent: var(--color-blue, #0a84ff);
+}
+
+.react-cupertino-ui-dialog__header {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.react-cupertino-ui-dialog__title {
+  font-size: clamp(1.25rem, 1.3rem + 0.5vw, 1.65rem);
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--foreground, #050505);
+}
+
+.react-cupertino-ui-dialog__description {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: color-mix(in srgb, var(--foreground, #050505), transparent 35%);
+}
+
+.react-cupertino-ui-dialog__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+}
+@media (min-width: 480px) {
+  .react-cupertino-ui-dialog__footer {
+    flex-direction: row-reverse;
+  }
+}
+
+.react-cupertino-ui-dialog__button {
+  flex: 1;
+}
+
+@keyframes dialog-overlay-in {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0) saturate(120%);
+  }
+  to {
+    opacity: 1;
+    backdrop-filter: blur(var(--dialog-overlay-blur, 48px)) saturate(180%);
+  }
+}
+@keyframes dialog-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes dialog-content-in {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.96);
+  }
+  60% {
+    opacity: 1;
+    transform: translate(-50%, -50.5%) scale(1.01);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes dialog-content-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.96);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import "./index.scss";
+import glassTokens from "@react-cupertino-ui/shared/lib/constants/tokens/glass";
+import { type ButtonProps } from "@react-cupertino-ui/button";
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+type GlassBlur = keyof typeof glassTokens.blur;
+type DialogSize = "sm" | "md" | "lg";
+type DialogTone = "default" | "destructive" | "success";
+interface AlertDialogOverlayProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> {
+    blur?: GlassBlur;
+    overlayOpacity?: number;
+}
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
+    glass?: boolean;
+    blur?: GlassBlur;
+    intensity?: number;
+    size?: DialogSize;
+    tone?: DialogTone;
+}
+declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+type DialogButtonOptions = Partial<Pick<ButtonProps, "size" | "fullWidth" | "loading" | "icon">> & {
+    buttonVariant?: ButtonProps["variant"];
+    buttonClassName?: string;
+};
+interface AlertDialogActionProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>, DialogButtonOptions {
+}
+interface AlertDialogCancelProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>, DialogButtonOptions {
+}
+declare const AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/index.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import "./index.scss";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import glassTokens from "@react-cupertino-ui/shared/lib/constants/tokens/glass";
+import { Button } from "@react-cupertino-ui/button";
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef(({ className, blur = "lg", overlayOpacity = 0.65, style, ...props }, ref) => {
+    const clampedOpacity = Math.min(Math.max(overlayOpacity, 0), 1);
+    const overlayStyle = {
+        ...style,
+        "--dialog-overlay-blur": glassTokens.blur[blur],
+        "--dialog-overlay-opacity": clampedOpacity.toString(),
+    };
+    return (_jsx(AlertDialogPrimitive.Overlay, { ref: ref, className: cn("react-cupertino-ui-dialog__overlay", className), style: overlayStyle, ...props }));
+});
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, children, glass = true, blur = "lg", intensity, size = "md", tone = "default", style, ...props }, ref) => {
+    const cssVars = {
+        ...style,
+    };
+    if (glass) {
+        cssVars["--dialog-glass-blur"] = glassTokens.blur[blur];
+    }
+    if (typeof intensity === "number") {
+        const clamped = Math.min(Math.max(intensity, 0), 1);
+        cssVars["--dialog-glass-opacity"] = clamped.toString();
+    }
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn("react-cupertino-ui-dialog__content", glass && "react-cupertino-ui-dialog__content--glass", `react-cupertino-ui-dialog__content--${size}`, className), "data-tone": tone, "data-glass": glass ? "true" : undefined, style: cssVars, ...props, children: children })] }));
+});
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("react-cupertino-ui-dialog__header", className), ...props })));
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("react-cupertino-ui-dialog__footer", className), ...props })));
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, className: cn("react-cupertino-ui-dialog__title", className), ...props })));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, className: cn("react-cupertino-ui-dialog__description", className), ...props })));
+AlertDialogDescription.displayName =
+    AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, children, size = "default", fullWidth = true, loading = false, icon, buttonVariant = "glass", buttonClassName, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, asChild: true, ...props, children: _jsx(Button, { variant: buttonVariant, size: size, fullWidth: fullWidth, loading: loading, icon: icon, className: cn("react-cupertino-ui-dialog__button", buttonClassName, className), children: children }) })));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, children, size = "default", fullWidth = true, loading = false, icon, buttonVariant = "outline", buttonClassName, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, asChild: true, ...props, children: _jsx(Button, { variant: buttonVariant, size: size, fullWidth: fullWidth, loading: loading, icon: icon, className: cn("react-cupertino-ui-dialog__button", buttonClassName, className), children: children }) })));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/index.scss

@@ -0,0 +1,204 @@
+@use "@/styles/mixins/glass" as glass;
+@use "@/styles/mixins/animations" as motion;
+
+.react-cupertino-ui-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(90, 200, 250, 0.25), transparent 55%),
+    rgba(4, 6, 12, var(--dialog-overlay-opacity, 0.65));
+  backdrop-filter: blur(var(--dialog-overlay-blur, 48px)) saturate(180%);
+  -webkit-backdrop-filter: blur(var(--dialog-overlay-blur, 48px)) saturate(180%);
+  animation: dialog-overlay-in 420ms ease forwards;
+
+  &[data-state="closed"] {
+    animation: dialog-overlay-out 260ms ease forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0.01ms;
+  }
+}
+
+.react-cupertino-ui-dialog__content {
+  --dialog-width: 28rem;
+  --dialog-radius: 28px;
+  --dialog-glass-blur: var(--glass-blur, 40px);
+  --dialog-glass-opacity: var(--glass-opacity, 0.72);
+  --dialog-accent: var(--color-blue, #0a84ff);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(var(--dialog-width), calc(100vw - 2.5rem));
+  max-height: calc(100vh - 3rem);
+  padding: clamp(1.8rem, 3vw, 2.6rem);
+  border-radius: var(--dialog-radius);
+  color: var(--foreground, #050505);
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(250, 250, 252, 0.95);
+  box-shadow:
+    0 20px 55px rgba(9, 9, 11, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.35),
+    0 0 35px color-mix(in srgb, var(--dialog-accent), transparent 60%);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  animation: dialog-content-in 480ms cubic-bezier(0.19, 0.82, 0.22, 1.2)
+    forwards;
+  @include motion.spring-transition(all, 360ms);
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    box-shadow:
+      0 0 0 3px rgba(0, 122, 255, 0.3),
+      0 20px 55px rgba(9, 9, 11, 0.25);
+  }
+
+  &[data-state="closed"] {
+    animation: dialog-content-out 280ms cubic-bezier(0.5, 0.15, 0.25, 1)
+      forwards;
+  }
+
+  @media (max-width: 640px) {
+    padding: 1.6rem;
+    border-radius: 24px;
+  }
+
+  &--glass {
+    @include glass.glass-panel(
+      light,
+      var(--dialog-glass-blur, 40px),
+      var(--dialog-glass-opacity, 0.72)
+    );
+  }
+
+  @supports not ((backdrop-filter: blur(2px))) {
+    background: rgba(255, 255, 255, 0.95);
+  }
+
+  &--sm {
+    --dialog-width: 22rem;
+  }
+
+  &--md {
+    --dialog-width: 28rem;
+  }
+
+  &--lg {
+    --dialog-width: 34rem;
+  }
+
+  &[data-tone="destructive"] {
+    --dialog-accent: var(--color-red, #ff3b30);
+  }
+
+  &[data-tone="success"] {
+    --dialog-accent: var(--color-green, #34c759);
+  }
+
+  &[data-tone="default"] {
+    --dialog-accent: var(--color-blue, #0a84ff);
+  }
+}
+
+.react-cupertino-ui-dialog__header {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.react-cupertino-ui-dialog__title {
+  font-size: clamp(1.25rem, 1.3rem + 0.5vw, 1.65rem);
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--foreground, #050505);
+}
+
+.react-cupertino-ui-dialog__description {
+  font-size: 1rem;
+  line-height: 1.6;
+  color: color-mix(in srgb, var(--foreground, #050505), transparent 35%);
+}
+
+.react-cupertino-ui-dialog__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+
+  @media (min-width: 480px) {
+    flex-direction: row-reverse;
+  }
+}
+
+.react-cupertino-ui-dialog__button {
+  flex: 1;
+}
+
+@keyframes dialog-overlay-in {
+  from {
+    opacity: 0;
+    backdrop-filter: blur(0) saturate(120%);
+  }
+
+  to {
+    opacity: 1;
+    backdrop-filter: blur(var(--dialog-overlay-blur, 48px)) saturate(180%);
+  }
+}
+
+@keyframes dialog-overlay-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-content-in {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.96);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate(-50%, -50.5%) scale(1.01);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes dialog-content-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.96);
+  }
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@react-cupertino-ui/dialog",
+  "version": "1.0.0",
+  "description": "Dialog 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-alert-dialog": "^1.1.1",
+    "@react-cupertino-ui/button": "workspace:*",
+    "@react-cupertino-ui/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}