@artsy/palette-mobile 13.2.36 → 13.2.37

package/dist/elements/Chip/Chip.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+export interface ChipProps {
+    title: string;
+    subtitle?: string;
+    image?: string;
+    onPress?: () => void;
+}
+export declare const Chip: FC<ChipProps>;

package/dist/elements/Chip/Chip.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAnimationState, View } from "moti";
+import { useColor, useSpace } from "../../utils/hooks";
+import { Flex } from "../Flex";
+import { Image } from "../Image";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const Chip = ({ image, title, subtitle, onPress }) => {
+    const color = useColor();
+    const space = useSpace();
+    const animatedState = useAnimationState({
+        from: { backgroundColor: color("black10") },
+        to: { backgroundColor: color("black5") },
+    });
+    const handleOnPressIn = () => {
+        animatedState.transitionTo("from");
+    };
+    const handleOnPressOut = () => {
+        animatedState.transitionTo("to");
+    };
+    return (_jsx(Touchable, { onPress: onPress, onPressIn: handleOnPressIn, onPressOut: handleOnPressOut, noFeedback: true, children: _jsxs(Flex, { flexDirection: "row", minWidth: 200, height: 70, overflow: "hidden", borderRadius: 5, children: [!!image && _jsx(Image, { src: image, width: 70, height: 70 }), _jsxs(View, { state: animatedState, style: {
+                        flex: 1,
+                        padding: space(1),
+                        justifyContent: "center",
+                    }, children: [!!subtitle && (_jsx(Text, { variant: "xs", color: "black60", selectable: false, children: subtitle })), _jsx(Text, { variant: "sm-display", selectable: false, children: title })] })] }) }));
+};

package/dist/elements/Chip/Chip.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Chip").ChipProps>;
+};
+export default _default;
+export declare const Variations: () => JSX.Element;

package/dist/elements/Chip/Chip.stories.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert } from "react-native";
+import { Chip } from "./Chip";
+import { Flex } from "../Flex";
+export default {
+    title: "Chip",
+    component: Chip,
+};
+export const Variations = () => {
+    return (_jsxs(Flex, { p: 2, justifyContent: "center", alignItems: "center", gap: 20, children: [_jsx(Chip, { title: "Only title" }), _jsx(Chip, { title: "Title and subtitle", subtitle: "Subtitle" }), _jsx(Chip, { title: "Title and image", image: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }), _jsx(Chip, { title: "Title, subtitle and image", subtitle: "Cow image", image: "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg" }), _jsx(Chip, { title: "Press me", subtitle: "Pressing alerts something", onPress: () => Alert.alert("Pressed") })] }));
+};

package/dist/elements/Chip/index.d.ts

@@ -0,0 +1 @@
+export * from "./Chip";

package/dist/elements/Chip/index.js

@@ -0,0 +1 @@
+export * from "./Chip";

package/dist/elements/index.d.ts

@@ -7,6 +7,7 @@ export * from "./BorderBox";
 export * from "./Box";
 export * from "./Button";
 export * from "./Checkbox";
+export * from "./Chip";
 export * from "./ClassTheme";
 export * from "./Collapse";
 export * from "./CollapsibleMenuItem";

package/dist/elements/index.js

@@ -7,6 +7,7 @@ export * from "./BorderBox";
 export * from "./Box";
 export * from "./Button";
 export * from "./Checkbox";
+export * from "./Chip";
 export * from "./ClassTheme";
 export * from "./Collapse";
 export * from "./CollapsibleMenuItem";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.2.36",
+  "version": "13.2.37",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082 --terminal terminal",