@trypattern/sdk 0.1.29 → 0.1.30

package/dist/components/Card.d.ts

@@ -11,7 +11,9 @@ type CardProps = {
     to?: AppPath;
     href?: string;
     onClick?: () => void;
+    hover?: 'zoom' | 'outline';
+    isPressable?: boolean;
     style?: Placement;
 };
-export declare function Card({ children, surface, padding, paddingBlock, to, href, onClick, style }: CardProps): import("react").JSX.Element;
+export declare function Card({ children, surface, padding, paddingBlock, to, href, onClick, hover, isPressable, style }: CardProps): import("react").JSX.Element;
 export {};

package/dist/components/Card.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as BaseButton } from '@base-ui/react/button';
 import * as stylex from '@stylexjs/stylex';
 import { Link as RouterLink } from 'react-router';
-import { colors, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { borders, breakpoints, colors, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
-export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, to, href, onClick, style }) {
+export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, to, href, onClick, hover, isPressable = false, style }) {
     const isInteractive = to !== undefined || href !== undefined || onClick !== undefined;
-    const className = stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], isInteractive && styles.interactive, isInteractive && focusRing.visible, style).className;
+    const className = stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], isInteractive && styles.interactive, isInteractive && focusRing.visible, isInteractive && hover === 'zoom' && stylex.defaultMarker(), isInteractive && hover === 'outline' && styles.outline, isInteractive && isPressable && styles.pressable, style).className;
     const report = (event) => {
         interact({
             primitive: 'Card',
@@ -40,6 +40,30 @@ const styles = stylex.create({
         textAlign: 'start',
         textDecoration: 'none',
         outlineOffset: 0
+    },
+    outline: {
+        boxShadow: {
+            default: shadows.default,
+            [breakpoints.canHover]: {
+                default: shadows.default,
+                ':hover': `0 0 0 ${borders.thin} ${colors.borderStrong}`
+            }
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'box-shadow, transform'
+    },
+    pressable: {
+        transform: {
+            default: null,
+            ':active': {
+                default: 'scale(0.98)',
+                [breakpoints.reducedMotion]: 'none'
+            }
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'box-shadow, transform'
     }
 });
 const surfaces = stylex.create({

package/dist/components/Image.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
 import { useState } from 'react';
 import { imageSources, transformsOn } from "../media.js";
-import { colors, motion } from "../theme/tokens.stylex.js";
+import { breakpoints, colors, motion } from "../theme/tokens.stylex.js";
 export function Image({ image, sizes, priority = false, aspect, style }) {
     const key = image?.key ?? null;
     const [seen, setSeen] = useState({
@@ -30,7 +30,7 @@ export function Image({ image, sizes, priority = false, aspect, style }) {
                     }
                 }, alt: image.alt, width: sources.width, height: sources.height, loading: priority ? 'eager' : 'lazy', decoding: priority ? 'auto' : 'async', fetchPriority: priority ? 'high' : 'auto', sizes: sizes, srcSet: sources.srcSet, src: sources.src, onLoad: () => setSeen((current) => current.key === key && current.status === 'shown'
                     ? current
-                    : { key, status: 'fading' }), onError: () => setSeen({ key, status: 'failed' }), ...stylex.props(styles.image, status === 'fading' && styles.fading, status === 'shown' && styles.shown) })] }));
+                    : { key, status: 'fading' }), onError: () => setSeen({ key, status: 'failed' }), ...stylex.props(styles.image, styles.zoomable, status === 'fading' && styles.fading, status === 'shown' && styles.shown) })] }));
 }
 const MISSING_ASPECT = 4 / 3;
 function servedWithTransforms() {
@@ -68,9 +68,24 @@ const styles = stylex.create({
         opacity: 1,
         transitionTimingFunction: motion.easeOut,
         transitionDuration: motion.base,
-        transitionProperty: 'opacity'
+        transitionProperty: 'opacity, transform'
     },
     shown: {
         opacity: 1
+    },
+    zoomable: {
+        transform: {
+            default: null,
+            [breakpoints.canHover]: {
+                default: null,
+                [stylex.when.ancestor(':hover')]: {
+                    default: 'scale(1.04)',
+                    [breakpoints.reducedMotion]: 'none'
+                }
+            }
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.slide,
+        transitionProperty: 'transform'
     }
 });

package/dist/theme/tokens.stylex.d.ts

@@ -1,6 +1,7 @@
 import * as stylex from '@stylexjs/stylex';
 export declare const breakpoints: {
     compact: string;
+    canHover: string;
     reducedMotion: string;
     coarsePointer: string;
 };

package/dist/theme/tokens.stylex.js

@@ -1,6 +1,7 @@
 import * as stylex from '@stylexjs/stylex';
 export const breakpoints = stylex.defineConsts({
     compact: '@media (max-width: 767px)',
+    canHover: '@media (hover: hover)',
     reducedMotion: '@media (prefers-reduced-motion: reduce)',
     coarsePointer: '@media (pointer: coarse)'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trypattern/sdk",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "type": "module",
   "files": [
     "dist",