@react-cupertino-ui/card 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,156 @@
+.react-cupertino-ui-card {
+  --card-glass-blur: var(--glass-blur, 32px);
+  --card-glass-opacity: var(--glass-opacity, 0.7);
+  --card-padding-block: 1.75rem;
+  --card-padding-inline: 1.5rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.75rem;
+  padding: var(--card-padding-block) var(--card-padding-inline);
+  border-radius: 1.5rem;
+  border: 1px solid rgba(10, 10, 10, 0.04);
+  background: rgba(250, 250, 252, 0.9);
+  color: var(--foreground, #0a0a0a);
+  isolation: isolate;
+  overflow: hidden;
+  box-shadow: 0 1px 1px rgba(15, 15, 15, 0.06), 0 16px 40px rgba(15, 15, 15, 0.08);
+  transition-property: all;
+  transition-duration: var(--card-transition-duration, 320ms);
+  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.react-cupertino-ui-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: var(--card-background-image);
+  background-size: cover;
+  background-position: center;
+  opacity: 0;
+  transition: opacity 320ms ease, filter 320ms ease;
+  z-index: 0;
+  mix-blend-mode: multiply;
+}
+.react-cupertino-ui-card > * {
+  position: relative;
+  z-index: 1;
+}
+.react-cupertino-ui-card:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35), 0 10px 50px rgba(10, 10, 10, 0.18);
+}
+.react-cupertino-ui-card:focus {
+  outline: none;
+}
+@media (hover: hover) {
+  .react-cupertino-ui-card[data-interactive=true]:hover {
+    transform: translateY(-6px) scale(1.01);
+    box-shadow: 0 8px 18px rgba(9, 9, 9, 0.08), 0 30px 60px rgba(9, 9, 9, 0.15);
+  }
+}
+.react-cupertino-ui-card[data-interactive=true]:focus-visible {
+  transform: translateY(-2px) scale(1.005);
+}
+.react-cupertino-ui-card[data-has-background=true]::after {
+  opacity: 0.55;
+  filter: saturate(120%) contrast(105%);
+}
+.react-cupertino-ui-card[data-has-background=true]::before {
+  mix-blend-mode: screen;
+}
+.react-cupertino-ui-card.react-cupertino-ui-card--glass {
+  background: rgba(255, 255, 255, var(--card-glass-opacity));
+  backdrop-filter: blur(var(--card-glass-blur)) saturate(var(--glass-saturation, 180%));
+  -webkit-backdrop-filter: blur(var(--card-glass-blur)) 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-card.react-cupertino-ui-card--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-card.react-cupertino-ui-card--glass {
+    background: rgba(255, 255, 255, 0.92);
+  }
+}
+.react-cupertino-ui-card.react-cupertino-ui-card--media {
+  color: color-mix(in srgb, white 92%, rgba(0, 0, 0, 0.95));
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+}
+.react-cupertino-ui-card.react-cupertino-ui-card--media .react-cupertino-ui-card__muted,
+.react-cupertino-ui-card.react-cupertino-ui-card--media p,
+.react-cupertino-ui-card.react-cupertino-ui-card--media span {
+  color: color-mix(in srgb, white 88%, rgba(0, 0, 0, 0.5));
+}
+.react-cupertino-ui-card.variant-glass {
+  border: 1px solid rgba(255, 255, 255, 0.25);
+}
+.react-cupertino-ui-card.variant-default {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 246, 248, 0.96));
+  border: 1px solid rgba(12, 12, 12, 0.08);
+  box-shadow: 0 10px 35px rgba(15, 15, 15, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.45);
+}
+.react-cupertino-ui-card.variant-solid {
+  background: linear-gradient(140deg, #0a84ff 0%, #30d158 45%, #5ac8fa 100%);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  box-shadow: 0 20px 40px rgba(10, 132, 255, 0.3);
+}
+.react-cupertino-ui-card.variant-outline {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  color: var(--foreground, #0a0a0a);
+}
+.react-cupertino-ui-card.variant-secondary {
+  background: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+.react-cupertino-ui-card.variant-destructive {
+  background: color-mix(in srgb, var(--color-red, #ff3b30), white 15%);
+  color: white;
+  box-shadow: 0 25px 45px rgba(255, 59, 48, 0.35);
+}
+.react-cupertino-ui-card.variant-ghost {
+  background: transparent;
+  border-color: transparent;
+}
+.react-cupertino-ui-card.variant-link {
+  background: transparent;
+  border-color: transparent;
+  color: var(--color-blue, #0a84ff);
+  padding: 0;
+}
+.react-cupertino-ui-card.size-default {
+  --card-padding-block: 1.75rem;
+  --card-padding-inline: 1.5rem;
+  border-radius: 1.5rem;
+}
+.react-cupertino-ui-card.size-sm {
+  --card-padding-block: 1.25rem;
+  --card-padding-inline: 1.25rem;
+  border-radius: 1.25rem;
+}
+.react-cupertino-ui-card.size-lg {
+  --card-padding-block: 2rem;
+  --card-padding-inline: 2rem;
+  border-radius: 1.75rem;
+}
+.react-cupertino-ui-card.size-icon {
+  --card-padding-block: 1rem;
+  --card-padding-inline: 1rem;
+  align-items: center;
+  justify-content: center;
+  min-height: 5rem;
+  min-width: 5rem;
+}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import glassTokens from "@react-cupertino-ui/shared/lib/constants/tokens/glass";
+import "./index.scss";
+type GlassBlur = keyof typeof glassTokens.blur;
+export interface CardProps extends BaseProps<HTMLDivElement>, React.HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+    /**
+     * Enables the Liquid Glass visual treatment regardless of the variant prop.
+     */
+    glass?: boolean;
+    /**
+     * Controls the blur radius applied to the glass surface.
+     */
+    blur?: GlassBlur;
+    /**
+     * Adjusts surface opacity for the glass panel (0 - transparent, 1 - solid).
+     */
+    intensity?: number;
+    /**
+     * Optional background image that appears behind the glass overlay.
+     */
+    backgroundImage?: string;
+    /**
+     * Enables hover/focus elevation interactions.
+     */
+    interactive?: boolean;
+}
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };
+export default Card;

package/dist/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import { BaseVariants } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import glassTokens from "@react-cupertino-ui/shared/lib/constants/tokens/glass";
+import "./index.scss";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
+CardFooter.displayName = "CardFooter";
+const Card = React.forwardRef(({ className, variant, size, asChild = false, glass = true, blur = "md", intensity, backgroundImage, interactive = true, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    const cssVars = {
+        ...style,
+    };
+    if (blur && glass) {
+        cssVars["--card-glass-blur"] = glassTokens.blur[blur];
+    }
+    if (typeof intensity === "number") {
+        const clamped = Math.min(Math.max(intensity, 0), 1);
+        cssVars["--card-glass-opacity"] = clamped.toString();
+    }
+    if (backgroundImage) {
+        const trimmed = backgroundImage.trim();
+        const isCssFunction = /^(url|linear-gradient|radial-gradient|conic-gradient)\(/i.test(trimmed);
+        cssVars["--card-background-image"] = isCssFunction
+            ? trimmed
+            : `url(${backgroundImage})`;
+    }
+    const resolvedVariant = variant ?? (glass ? "glass" : undefined);
+    const classes = BaseVariants("react-cupertino-ui-card", {
+        variant: resolvedVariant,
+        size,
+        className: cn(glass && "react-cupertino-ui-card--glass", backgroundImage && "react-cupertino-ui-card--media", className),
+    }, {
+        defaultVariants: {
+            variant: glass ? "glass" : "default",
+        },
+    });
+    return (_jsx(Comp, { ref: ref, className: cn(classes), style: cssVars, "data-glass": glass ? "true" : undefined, "data-interactive": interactive ? "true" : undefined, "data-has-background": backgroundImage ? "true" : undefined, ...props }));
+});
+Card.displayName = "Card";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };
+export default Card;

package/dist/index.scss

@@ -0,0 +1,174 @@
+@use "@/styles/mixins/glass" as glass;
+@use "@/styles/mixins/animations" as motion;
+
+.react-cupertino-ui-card {
+  --card-glass-blur: var(--glass-blur, 32px);
+  --card-glass-opacity: var(--glass-opacity, 0.7);
+  --card-padding-block: 1.75rem;
+  --card-padding-inline: 1.5rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 0.75rem;
+  padding: var(--card-padding-block) var(--card-padding-inline);
+  border-radius: 1.5rem;
+  border: 1px solid rgba(10, 10, 10, 0.04);
+  background: rgba(250, 250, 252, 0.9);
+  color: var(--foreground, #0a0a0a);
+  isolation: isolate;
+  overflow: hidden;
+  box-shadow:
+    0 1px 1px rgba(15, 15, 15, 0.06),
+    0 16px 40px rgba(15, 15, 15, 0.08);
+  @include motion.spring-transition(all, var(--card-transition-duration, 320ms));
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--card-background-image);
+    background-size: cover;
+    background-position: center;
+    opacity: 0;
+    transition: opacity 320ms ease, filter 320ms ease;
+    z-index: 0;
+    mix-blend-mode: multiply;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35),
+      0 10px 50px rgba(10, 10, 10, 0.18);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &[data-interactive="true"] {
+    @media (hover: hover) {
+      &:hover {
+        transform: translateY(-6px) scale(1.01);
+        box-shadow:
+          0 8px 18px rgba(9, 9, 9, 0.08),
+          0 30px 60px rgba(9, 9, 9, 0.15);
+      }
+    }
+
+    &:focus-visible {
+      transform: translateY(-2px) scale(1.005);
+    }
+  }
+
+  &[data-has-background="true"] {
+    &::after {
+      opacity: 0.55;
+      filter: saturate(120%) contrast(105%);
+    }
+
+    &::before {
+      mix-blend-mode: screen;
+    }
+  }
+
+  &.react-cupertino-ui-card--glass {
+    @include glass.glass-panel(light, var(--card-glass-blur), var(--card-glass-opacity));
+
+    @supports not ((backdrop-filter: blur(2px))) {
+      background: rgba(255, 255, 255, 0.92);
+    }
+  }
+
+  &.react-cupertino-ui-card--media {
+    color: color-mix(in srgb, white 92%, rgba(0, 0, 0, 0.95));
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+
+    .react-cupertino-ui-card__muted,
+    p,
+    span {
+      color: color-mix(in srgb, white 88%, rgba(0, 0, 0, 0.5));
+    }
+  }
+
+  &.variant-glass {
+    border: 1px solid rgba(255, 255, 255, 0.25);
+  }
+
+  &.variant-default {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 246, 248, 0.96));
+    border: 1px solid rgba(12, 12, 12, 0.08);
+    box-shadow:
+      0 10px 35px rgba(15, 15, 15, 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.45);
+  }
+
+  &.variant-solid {
+    background: linear-gradient(140deg, #0a84ff 0%, #30d158 45%, #5ac8fa 100%);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    box-shadow: 0 20px 40px rgba(10, 132, 255, 0.3);
+  }
+
+  &.variant-outline {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    color: var(--foreground, #0a0a0a);
+  }
+
+  &.variant-secondary {
+    background: rgba(0, 0, 0, 0.04);
+    border-color: rgba(0, 0, 0, 0.08);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+  }
+
+  &.variant-destructive {
+    background: color-mix(in srgb, var(--color-red, #ff3b30), white 15%);
+    color: white;
+    box-shadow: 0 25px 45px rgba(255, 59, 48, 0.35);
+  }
+
+  &.variant-ghost {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  &.variant-link {
+    background: transparent;
+    border-color: transparent;
+    color: var(--color-blue, #0a84ff);
+    padding: 0;
+  }
+
+  &.size-default {
+    --card-padding-block: 1.75rem;
+    --card-padding-inline: 1.5rem;
+    border-radius: 1.5rem;
+  }
+
+  &.size-sm {
+    --card-padding-block: 1.25rem;
+    --card-padding-inline: 1.25rem;
+    border-radius: 1.25rem;
+  }
+
+  &.size-lg {
+    --card-padding-block: 2rem;
+    --card-padding-inline: 2rem;
+    border-radius: 1.75rem;
+  }
+
+  &.size-icon {
+    --card-padding-block: 1rem;
+    --card-padding-inline: 1rem;
+    align-items: center;
+    justify-content: center;
+    min-height: 5rem;
+    min-width: 5rem;
+  }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-cupertino-ui/card",
+  "version": "1.0.0",
+  "description": "Card 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-slot": "^1.1.0",
+    "@react-cupertino-ui/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}