@react-cupertino-ui/alert 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,155 @@
+.react-cupertino-ui-alert {
+  --alert-accent: var(--color-blue, #0a84ff);
+  --alert-foreground: color-mix(in srgb, #050505, var(--color-foreground, #0b0b0f) 60%);
+  --alert-muted: color-mix(in srgb, var(--alert-foreground), rgba(255, 255, 255, 0.1) 65%);
+  --alert-border: color-mix(in srgb, var(--alert-accent), transparent 70%);
+  --alert-glass-opacity: 0.75;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.85rem;
+  width: 100%;
+  padding: 1rem 1.25rem;
+  padding-right: 2.75rem;
+  border-radius: 24px;
+  border: 1px solid var(--alert-border);
+  color: var(--alert-foreground);
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 18px 38px rgba(11, 11, 11, 0.12);
+  isolation: isolate;
+  transition-property: background-color;
+  transition-duration: var(--spring-duration, 450ms);
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.react-cupertino-ui-alert.is-glass {
+  background: rgba(255, 255, 255, var(--alert-glass-opacity));
+  backdrop-filter: blur(var(--glass-blur, 40px)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--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-alert.is-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-alert.is-glass {
+    background: color-mix(in srgb, var(--alert-accent), white 95%);
+  }
+}
+.react-cupertino-ui-alert:not(.is-glass) {
+  background: color-mix(in srgb, var(--alert-accent), white 92%);
+  box-shadow: 0 25px 60px rgba(10, 10, 10, 0.12);
+}
+.react-cupertino-ui-alert__icon {
+  position: relative;
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--alert-accent);
+  background: color-mix(in srgb, var(--alert-accent), transparent 80%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 25px rgba(0, 0, 0, 0.12);
+}
+.react-cupertino-ui-alert__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+.react-cupertino-ui-alert__title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: var(--alert-foreground);
+}
+.react-cupertino-ui-alert__description {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.45;
+  color: var(--alert-muted);
+}
+.react-cupertino-ui-alert__actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-top: 0.75rem;
+}
+.react-cupertino-ui-alert__actions.layout-inline {
+  justify-content: flex-start;
+}
+.react-cupertino-ui-alert__actions.layout-stacked {
+  flex-direction: column;
+  width: 100%;
+}
+.react-cupertino-ui-alert__action {
+  --button-height: 2.3rem;
+  font-size: 0.9rem;
+  width: fit-content;
+}
+.react-cupertino-ui-alert__action:only-child {
+  margin-inline-end: 0;
+}
+.react-cupertino-ui-alert__action .react-cupertino-ui-button__label {
+  font-weight: 600;
+}
+.react-cupertino-ui-alert__dismiss {
+  position: absolute;
+  top: 0.6rem;
+  right: 0.6rem;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--alert-accent);
+  background: color-mix(in srgb, var(--alert-accent), white 85%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition-property: transform;
+  transition-duration: var(--spring-duration, 500ms);
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.react-cupertino-ui-alert__dismiss:hover {
+  transform: scale(1.05);
+}
+.react-cupertino-ui-alert__dismiss:active {
+  transform: scale(0.95);
+}
+.react-cupertino-ui-alert.tone-neutral {
+  --alert-accent: #8e8e93;
+  --alert-foreground: #1c1c1e;
+  --alert-muted: color-mix(in srgb, var(--alert-foreground), white 35%);
+}
+.react-cupertino-ui-alert.tone-info {
+  --alert-accent: var(--color-blue, #0a84ff);
+}
+.react-cupertino-ui-alert.tone-success {
+  --alert-accent: #34c759;
+  --alert-foreground: #033c1f;
+  --alert-muted: color-mix(in srgb, #033c1f, white 35%);
+}
+.react-cupertino-ui-alert.tone-warning {
+  --alert-accent: #ff9f0a;
+  --alert-foreground: #3d2100;
+}
+.react-cupertino-ui-alert.tone-destructive {
+  --alert-accent: #ff453a;
+  --alert-foreground: #400805;
+}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import { type ButtonProps } from "@react-cupertino-ui/button";
+import "./index.scss";
+export type AlertTone = "neutral" | "info" | "success" | "warning" | "destructive";
+export interface AlertActionItem extends Partial<Pick<ButtonProps, "variant" | "loading" | "fullWidth" | "disabled" | "icon" | "onClick" | "className" | "type">> {
+    key?: React.Key;
+    label: React.ReactNode;
+}
+export interface AlertProps extends Omit<BaseProps<HTMLDivElement>, "variant" | "size" | "asChild">, Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    tone?: AlertTone;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode | null;
+    glass?: boolean;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    actions?: AlertActionItem[];
+    actionsLayout?: "inline" | "stacked";
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertTriangle, CheckCircle2, Info, ShieldAlert, MinusCircle, X, } from "lucide-react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import { Button } from "@react-cupertino-ui/button";
+import "./index.scss";
+const toneIcons = {
+    neutral: MinusCircle,
+    info: Info,
+    success: CheckCircle2,
+    warning: AlertTriangle,
+    destructive: ShieldAlert,
+};
+const toneLiveRegion = {
+    neutral: "polite",
+    info: "polite",
+    success: "polite",
+    warning: "assertive",
+    destructive: "assertive",
+};
+const Alert = React.forwardRef((props, ref) => {
+    const { className, tone = "info", title, description, icon, glass = true, dismissible = false, onDismiss, actions, actionsLayout = "inline", children, role, ["aria-live"]: ariaLiveProp, ["aria-atomic"]: ariaAtomicProp, ...rest } = props;
+    const [isVisible, setIsVisible] = React.useState(true);
+    const IconComponent = toneIcons[tone];
+    const resolvedIcon = icon === null ? null : icon ?? (IconComponent ? _jsx(IconComponent, { "aria-hidden": "true" }) : null);
+    const resolvedRole = role ?? "alert";
+    const ariaLive = ariaLiveProp ?? toneLiveRegion[tone];
+    const ariaAtomic = ariaAtomicProp ?? true;
+    const classes = cn("react-cupertino-ui-alert", `tone-${tone}`, glass && "is-glass", actions?.length && "has-actions", className);
+    const handleDismiss = () => {
+        if (!dismissible) {
+            return;
+        }
+        setIsVisible(false);
+        onDismiss?.();
+    };
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsxs("div", { ref: ref, role: resolvedRole, "aria-live": ariaLive, "aria-atomic": ariaAtomic, "data-tone": tone, "data-glass": glass ? "true" : undefined, "data-actions": actions?.length ? "true" : undefined, className: classes, ...rest, children: [resolvedIcon && _jsx("span", { className: "react-cupertino-ui-alert__icon", children: resolvedIcon }), _jsxs("div", { className: "react-cupertino-ui-alert__body", children: [title && _jsx("p", { className: "react-cupertino-ui-alert__title", children: title }), description && (_jsx("div", { className: "react-cupertino-ui-alert__description", children: description })), children, actions?.length ? (_jsx("div", { className: cn("react-cupertino-ui-alert__actions", `layout-${actionsLayout}`), "data-layout": actionsLayout, children: actions.map((action, index) => {
+                            const { key, label, className: actionClassName, fullWidth, ...buttonProps } = action;
+                            return (_jsx(Button, { size: "sm", fullWidth: typeof fullWidth === "boolean" ? fullWidth : actionsLayout === "stacked", className: cn("react-cupertino-ui-alert__action", actionClassName), ...buttonProps, children: label }, key ?? index));
+                        }) })) : null] }), dismissible && (_jsx("button", { type: "button", className: "react-cupertino-ui-alert__dismiss", "aria-label": "Dismiss alert", onClick: handleDismiss, children: _jsx(X, { "aria-hidden": "true" }) }))] }));
+});
+Alert.displayName = "Alert";
+export { Alert };

package/dist/index.scss

@@ -0,0 +1,162 @@
+@use "@/styles/mixins/glass" as glass;
+@use "@/styles/mixins/animations" as motion;
+
+.react-cupertino-ui-alert {
+  --alert-accent: var(--color-blue, #0a84ff);
+  --alert-foreground: color-mix(in srgb, #050505, var(--color-foreground, #0b0b0f) 60%);
+  --alert-muted: color-mix(in srgb, var(--alert-foreground), rgba(255, 255, 255, 0.1) 65%);
+  --alert-border: color-mix(in srgb, var(--alert-accent), transparent 70%);
+  --alert-glass-opacity: 0.75;
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.85rem;
+  width: 100%;
+  padding: 1rem 1.25rem;
+  padding-right: 2.75rem;
+  border-radius: 24px;
+  border: 1px solid var(--alert-border);
+  color: var(--alert-foreground);
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 18px 38px rgba(11, 11, 11, 0.12);
+  isolation: isolate;
+  @include motion.spring-transition(
+    background-color, var(--spring-duration, 450ms)
+  );
+
+  &.is-glass {
+    @include glass.glass-panel(light, var(--glass-blur, 40px), var(--alert-glass-opacity));
+
+    @supports not ((backdrop-filter: blur(2px))) {
+      background: color-mix(in srgb, var(--alert-accent), white 95%);
+    }
+  }
+
+  &:not(.is-glass) {
+    background: color-mix(in srgb, var(--alert-accent), white 92%);
+    box-shadow: 0 25px 60px rgba(10, 10, 10, 0.12);
+  }
+
+  &__icon {
+    position: relative;
+    flex-shrink: 0;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--alert-accent);
+    background: color-mix(in srgb, var(--alert-accent), transparent 80%);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.9),
+      0 10px 25px rgba(0, 0, 0, 0.12);
+  }
+
+  &__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    min-width: 0;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    color: var(--alert-foreground);
+  }
+
+  &__description {
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.45;
+    color: var(--alert-muted);
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.75rem;
+
+    &.layout-inline {
+      justify-content: flex-start;
+    }
+
+    &.layout-stacked {
+      flex-direction: column;
+      width: 100%;
+    }
+  }
+
+  &__action {
+    --button-height: 2.3rem;
+    font-size: 0.9rem;
+    width: fit-content;
+
+    &:only-child {
+      margin-inline-end: 0;
+    }
+
+    .react-cupertino-ui-button__label {
+      font-weight: 600;
+    }
+  }
+
+  &__dismiss {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.6rem;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--alert-accent);
+    background: color-mix(in srgb, var(--alert-accent), white 85%);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    @include motion.spring-transition(transform);
+
+    &:hover {
+      transform: scale(1.05);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  &.tone-neutral {
+    --alert-accent: #8e8e93;
+    --alert-foreground: #1c1c1e;
+    --alert-muted: color-mix(in srgb, var(--alert-foreground), white 35%);
+  }
+
+  &.tone-info {
+    --alert-accent: var(--color-blue, #0a84ff);
+  }
+
+  &.tone-success {
+    --alert-accent: #34c759;
+    --alert-foreground: #033c1f;
+    --alert-muted: color-mix(in srgb, #033c1f, white 35%);
+  }
+
+  &.tone-warning {
+    --alert-accent: #ff9f0a;
+    --alert-foreground: #3d2100;
+  }
+
+  &.tone-destructive {
+    --alert-accent: #ff453a;
+    --alert-foreground: #400805;
+  }
+}

package/package.json

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