@react-cupertino-ui/quick-action 0.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,165 @@
+.react-cupertino-ui-quick-action {
+  --quick-action-radius: 26px;
+  --quick-action-surface: rgba(255, 255, 255, 0.82);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1rem;
+  width: 100%;
+  border: none;
+  border-radius: var(--quick-action-radius);
+  padding: 1rem 1.1rem;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  color: inherit;
+  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 240ms ease, background 240ms ease;
+  -webkit-tap-highlight-color: transparent;
+  isolation: isolate;
+}
+.react-cupertino-ui-quick-action.glass {
+  background: rgba(255, 255, 255, 0.72);
+  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-quick-action.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-quick-action.glass {
+  box-shadow: 0 20px 50px rgba(15, 15, 15, 0.15);
+}
+.react-cupertino-ui-quick-action.layout-horizontal {
+  flex-direction: row;
+}
+.react-cupertino-ui-quick-action.layout-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+.react-cupertino-ui-quick-action.layout-vertical .react-cupertino-ui-quick-action__media {
+  width: auto;
+  height: auto;
+}
+.react-cupertino-ui-quick-action.layout-vertical .react-cupertino-ui-quick-action__cta {
+  align-self: flex-end;
+}
+.react-cupertino-ui-quick-action.align-center {
+  align-items: center;
+}
+.react-cupertino-ui-quick-action:hover:not(.is-disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 24px 60px rgba(15, 15, 15, 0.18);
+}
+.react-cupertino-ui-quick-action:active:not(.is-disabled) {
+  transform: scale(0.98);
+}
+.react-cupertino-ui-quick-action.is-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.react-cupertino-ui-quick-action__media {
+  width: 52px;
+  height: 52px;
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--color-blue, #0a84ff), transparent 35%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+.react-cupertino-ui-quick-action__media .icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+}
+.react-cupertino-ui-quick-action__media .badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 0.35rem;
+  border-radius: 11px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  background: rgba(255, 255, 255, 0.95);
+  color: #0a84ff;
+  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.2);
+}
+.react-cupertino-ui-quick-action__body {
+  flex: 1;
+  min-width: 0;
+}
+.react-cupertino-ui-quick-action__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.react-cupertino-ui-quick-action__header .title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: hsl(var(--foreground, 240 10% 3.9%));
+}
+.react-cupertino-ui-quick-action__header .subtitle {
+  display: block;
+  font-size: 0.85rem;
+  color: color-mix(in srgb, currentColor, transparent 35%);
+  margin-top: 0.1rem;
+}
+.react-cupertino-ui-quick-action__header .metric {
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 0.15rem 0.55rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.06);
+  color: inherit;
+}
+.react-cupertino-ui-quick-action__cta {
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.65);
+  box-shadow: 0 10px 20px rgba(15, 15, 15, 0.12);
+}
+.react-cupertino-ui-quick-action .helper {
+  margin: 0.25rem 0 0;
+  font-size: 0.85rem;
+  color: color-mix(in srgb, currentColor, transparent 40%);
+}
+.react-cupertino-ui-quick-action.tone-success .react-cupertino-ui-quick-action__media {
+  background: color-mix(in srgb, var(--color-green, #34c759), transparent 30%);
+}
+.react-cupertino-ui-quick-action.tone-warning .react-cupertino-ui-quick-action__media {
+  background: color-mix(in srgb, #ff9f0a, transparent 35%);
+}
+.react-cupertino-ui-quick-action.tone-danger .react-cupertino-ui-quick-action__media {
+  background: color-mix(in srgb, var(--color-red, #ff3b30), transparent 30%);
+}
+.react-cupertino-ui-quick-action.tone-indigo .react-cupertino-ui-quick-action__media {
+  background: color-mix(in srgb, #7c3aed, transparent 25%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .react-cupertino-ui-quick-action {
+    transition: none;
+  }
+}

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 "./index.scss";
+export type QuickActionTone = "default" | "success" | "warning" | "danger" | "indigo";
+export type QuickActionLayout = "vertical" | "horizontal";
+export interface QuickActionProps extends Omit<BaseProps<HTMLButtonElement>, "children" | "asChild"> {
+    title: string;
+    subtitle?: string;
+    icon?: React.ReactNode;
+    metric?: string;
+    badge?: string;
+    tone?: QuickActionTone;
+    layout?: QuickActionLayout;
+    glass?: boolean;
+    disabled?: boolean;
+    align?: "start" | "center";
+    helperText?: string;
+    onSelect?: () => void;
+    rightSlot?: React.ReactNode;
+}
+declare const QuickAction: React.ForwardRefExoticComponent<QuickActionProps & React.RefAttributes<HTMLButtonElement>>;
+export { QuickAction };

package/dist/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const QuickAction = React.forwardRef((props, ref) => {
+    const { title, subtitle, icon, metric, badge, tone = "default", layout = "vertical", glass = true, disabled = false, align = "start", helperText, onSelect, rightSlot, className, ...rest } = props;
+    const handleClick = (event) => {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        onSelect?.();
+    };
+    return (_jsxs("button", { ref: ref, type: "button", className: cn("react-cupertino-ui-quick-action", glass && "glass", `tone-${tone}`, `layout-${layout}`, `align-${align}`, disabled && "is-disabled", className), "data-disabled": disabled ? "true" : undefined, onClick: handleClick, disabled: disabled, ...rest, children: [_jsxs("div", { className: "react-cupertino-ui-quick-action__media", "aria-hidden": "true", children: [icon ? _jsx("span", { className: "icon-slot", children: icon }) : null, badge ? _jsx("span", { className: "badge", children: badge }) : null] }), _jsxs("div", { className: "react-cupertino-ui-quick-action__body", children: [_jsxs("div", { className: "react-cupertino-ui-quick-action__header", children: [_jsxs("div", { children: [_jsx("span", { className: "title", children: title }), subtitle ? _jsx("span", { className: "subtitle", children: subtitle }) : null] }), metric ? _jsx("span", { className: "metric", children: metric }) : null] }), helperText ? _jsx("p", { className: "helper", children: helperText }) : null] }), _jsx("div", { className: "react-cupertino-ui-quick-action__cta", "aria-hidden": "true", children: rightSlot ?? _jsx(ArrowRight, { size: 16 }) })] }));
+});
+QuickAction.displayName = "QuickAction";
+export { QuickAction };

package/dist/index.scss

@@ -0,0 +1,183 @@
+@use "@/styles/mixins/glass" as glass;
+
+.react-cupertino-ui-quick-action {
+  --quick-action-radius: 26px;
+  --quick-action-surface: rgba(255, 255, 255, 0.82);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1rem;
+  width: 100%;
+  border: none;
+  border-radius: var(--quick-action-radius);
+  padding: 1rem 1.1rem;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  color: inherit;
+  transition:
+    transform 240ms cubic-bezier(0.2, 0.8, 0.4, 1),
+    box-shadow 240ms ease,
+    background 240ms ease;
+  -webkit-tap-highlight-color: transparent;
+  isolation: isolate;
+
+  &.glass {
+    @include glass.glass-panel(light, var(--glass-blur, 40px), 0.72);
+    box-shadow: 0 20px 50px rgba(15, 15, 15, 0.15);
+  }
+
+  &.layout-horizontal {
+    flex-direction: row;
+  }
+
+  &.layout-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+
+    .react-cupertino-ui-quick-action__media {
+      width: auto;
+      height: auto;
+    }
+
+    .react-cupertino-ui-quick-action__cta {
+      align-self: flex-end;
+    }
+  }
+
+  &.align-center {
+    align-items: center;
+  }
+
+  &:hover:not(.is-disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 24px 60px rgba(15, 15, 15, 0.18);
+  }
+
+  &:active:not(.is-disabled) {
+    transform: scale(0.98);
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &__media {
+    width: 52px;
+    height: 52px;
+    border-radius: 18px;
+    background: color-mix(in srgb, var(--color-blue, #0a84ff), transparent 35%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+
+    .icon-slot {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+    }
+
+    .badge {
+      position: absolute;
+      bottom: -2px;
+      right: -2px;
+      min-width: 18px;
+      height: 18px;
+      padding: 0 0.35rem;
+      border-radius: 11px;
+      font-size: 0.68rem;
+      font-weight: 700;
+      background: rgba(255, 255, 255, 0.95);
+      color: #0a84ff;
+      box-shadow: 0 4px 12px rgba(15, 15, 15, 0.2);
+    }
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+
+    .title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: hsl(var(--foreground, 240 10% 3.9%));
+    }
+
+    .subtitle {
+      display: block;
+      font-size: 0.85rem;
+      color: color-mix(in srgb, currentColor, transparent 35%);
+      margin-top: 0.1rem;
+    }
+
+    .metric {
+      font-size: 0.85rem;
+      font-weight: 600;
+      padding: 0.15rem 0.55rem;
+      border-radius: 999px;
+      background: rgba(0, 0, 0, 0.06);
+      color: inherit;
+    }
+  }
+
+  &__cta {
+    width: 36px;
+    height: 36px;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.65);
+    box-shadow: 0 10px 20px rgba(15, 15, 15, 0.12);
+  }
+
+  .helper {
+    margin: 0.25rem 0 0;
+    font-size: 0.85rem;
+    color: color-mix(in srgb, currentColor, transparent 40%);
+  }
+
+  &.tone-success {
+    .react-cupertino-ui-quick-action__media {
+      background: color-mix(in srgb, var(--color-green, #34c759), transparent 30%);
+    }
+  }
+
+  &.tone-warning {
+    .react-cupertino-ui-quick-action__media {
+      background: color-mix(in srgb, #ff9f0a, transparent 35%);
+    }
+  }
+
+  &.tone-danger {
+    .react-cupertino-ui-quick-action__media {
+      background: color-mix(in srgb, var(--color-red, #ff3b30), transparent 30%);
+    }
+  }
+
+  &.tone-indigo {
+    .react-cupertino-ui-quick-action__media {
+      background: color-mix(in srgb, #7c3aed, transparent 25%);
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .react-cupertino-ui-quick-action {
+    transition: none;
+  }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-cupertino-ui/quick-action",
+  "version": "0.0.0",
+  "description": "QuickAction tiles inspired by iOS quick actions",
+  "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/shared": "0.0.0",
+    "lucide-react": "^0.417.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "a6b07a7a8a0ab6f4c80884b6fb9d5eb16ee6da1d",
+  "publishConfig": {
+    "access": "public"
+  }
+}