@artsy/palette-mobile 19.15.1 → 20.0.0--canary.399.4691.0

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

@@ -1,7 +1,9 @@
-import { AvatarProps } from "./Avatar";
-declare const _default: {
-    title: string;
-    component: ({ src, initials, size, blurhash }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default _default;
-export declare function Variants(): import("react/jsx-runtime").JSX.Element;
+import { Avatar } from "./Avatar";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta<typeof Avatar>;
+export default meta;
+type AvatarStory = StoryObj<typeof Avatar>;
+export declare const Default: AvatarStory;
+export declare const WithImage: AvatarStory;
+export declare const WithInitials: AvatarStory;
+export declare const Variants: AvatarStory;

package/dist/elements/Avatar/Avatar.stories.js

@@ -1,11 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar } from "./Avatar";
 import { List, Row } from "../../storybook/helpers";
-export default {
+const meta = {
     title: "Avatar",
     component: Avatar,
+    argTypes: {
+        size: {
+            control: { type: "select" },
+            options: ["xxs", "xs", "sm", "md"],
+            description: "The size of the Avatar",
+        },
+        initials: {
+            control: { type: "text" },
+            description: "If an image is missing, show initials instead",
+        },
+        src: {
+            control: { type: "text" },
+            description: "URL of the avatar image",
+        },
+        blurhash: {
+            control: { type: "text" },
+            description: "Blurhash string for the image placeholder",
+        },
+    },
 };
+export default meta;
 const sizes = ["md", "sm", "xs", "xxs"];
-export function Variants() {
-    return (_jsxs(List, { children: [_jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { initials: "A", size: s }, s))) }), _jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { initials: "AA", size: s }, s))) }), _jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { src: "https://placekitten.com/300/300", size: s }, s))) })] }));
-}
+export const Default = {
+    args: {
+        initials: "AB",
+        size: "md",
+    },
+    render: (args) => _jsx(Avatar, { ...args }),
+};
+export const WithImage = {
+    args: {
+        src: "https://placekitten.com/300/300",
+        size: "md",
+    },
+    render: (args) => _jsx(Avatar, { ...args }),
+};
+export const WithInitials = {
+    args: {
+        initials: "JD",
+        size: "md",
+    },
+    render: (args) => _jsx(Avatar, { ...args }),
+};
+export const Variants = {
+    render: () => (_jsxs(List, { children: [_jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { initials: "A", size: s }, s))) }), _jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { initials: "AA", size: s }, s))) }), _jsx(Row, { children: sizes.map((s) => (_jsx(Avatar, { src: "https://placekitten.com/300/300", size: s }, s))) })] })),
+};

package/dist/elements/BorderBox/BorderBox.d.ts

@@ -8,4 +8,6 @@ export interface BorderBoxProps extends FlexProps, BorderProps, SpaceProps<Spaci
  * A `View` or `div` (depending on the platform) that has a common border
  * and padding set by default
  */
-export declare const BorderBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").BoxProps & import("react").RefAttributes<import("react-native").View>>, any, BorderBoxProps, never>;
+export declare const BorderBox: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<Omit<import("..").BoxProps & import("react").RefAttributes<import("react-native").View>, "ref"> & {
+    ref?: import("react").Ref<import("react-native").View>;
+}, BorderBoxProps>>;

package/dist/elements/Box/Box.d.ts

@@ -12,5 +12,5 @@ export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit
 /**
  * Box is just a `View` with common styled-system props.
  */
-export declare const Box: import("styled-components").StyledComponent<typeof View, any, BoxProps, never>;
+export declare const Box: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<ViewProps & import("react").RefAttributes<View>, BoxProps>>;
 export {};

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

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 declare const _default: {
     title: string;
-    component: import("styled-components").StyledComponent<typeof View, any, import("./Box").BoxProps, never>;
+    component: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps & import("react").RefAttributes<View>, import("./Box").BoxProps>>;
 };
 export default _default;
 export declare const Styled: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Checkbox/Checkbox.d.ts

@@ -16,5 +16,5 @@ interface CheckMarkProps {
     size: number;
 }
 export declare const CheckMark: ({ size }: CheckMarkProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DisabledMark: import("styled-components").StyledComponent<({ size }: CheckMarkProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const DisabledMark: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<CheckMarkProps, never>>;
 export {};

package/dist/elements/Input/helpers.d.ts

@@ -39,5 +39,5 @@ export declare const getInputState: ({ isFocused, value, }: {
 export declare const getInputVariant: ({ disabled, hasError, }: {
     disabled: boolean;
     hasError: boolean;
-}) => "disabled" | "error" | "default";
+}) => "disabled" | "default" | "error";
 export {};

package/dist/elements/Pill/Pill.d.ts

@@ -1,6 +1,6 @@
 import { IconProps } from "@artsy/icons/native";
 import { MotiPressableProps } from "moti/interactions";
-import { FlattenInterpolation } from "styled-components";
+import { RuleSet } from "styled-components";
 import { FlexProps } from "../Flex";
 export declare const PILL_VARIANT_NAMES: readonly ["badge", "default", "dotted", "filter", "profile", "search", "onboarding", "link"];
 export type PillState = "default" | "selected" | "disabled";
@@ -18,5 +18,5 @@ export type PillProps = (FlexProps & {
     src?: string;
 });
 export declare const Pill: React.FC<PillProps>;
-declare const PILL_VARIANTS: Record<PillVariant, Record<PillState, FlattenInterpolation<any>>>;
+declare const PILL_VARIANTS: Record<PillVariant, Record<PillState, RuleSet>>;
 export {};

package/dist/elements/Radio/RadioButton.d.ts

@@ -22,5 +22,5 @@ interface RadioDotProps {
     size: number;
 }
 export declare const RadioDot: ({ size }: RadioDotProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DisabledDot: import("styled-components").StyledComponent<({ size }: RadioDotProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const DisabledDot: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<RadioDotProps, never>>;
 export {};

package/dist/elements/Separator/Separator.d.ts

@@ -4,4 +4,4 @@ export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps {
 /**
  * A horizontal divider whose width and spacing can be adjusted
  */
-export declare const Separator: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, SeparatorProps, never>;
+export declare const Separator: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, SeparatorProps>, SeparatorProps>>;

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: import("styled-components").StyledComponent<typeof import("react-native").View, import("styled-components").DefaultTheme, import("./Separator").SeparatorProps, never>;
+    component: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, import("./Separator").SeparatorProps>, import("./Separator").SeparatorProps>>;
 };
 export default _default;
 export declare const Styled: () => import("react/jsx-runtime").JSX.Element;

package/dist/elements/Separator/ShadowSeparator.d.ts

@@ -1 +1,3 @@
-export declare const ShadowSeparator: import("styled-components").StyledComponent<typeof import("react-native").View, any, import("./Separator").SeparatorProps, never>;
+export declare const ShadowSeparator: import("styled-components/native/dist/types").IStyledComponentBase<"native", import("styled-components/native/dist/types").FastOmit<Omit<import("styled-components/native/dist/types").FastOmit<import("styled-components/native/dist/types").Substitute<import("styled-components/native/dist/types").Substitute<import("react-native").ViewProps, import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>>, import("./Separator").SeparatorProps>, keyof import("./Separator").SeparatorProps> & import("./Separator").SeparatorProps, "ref"> & {
+    ref?: import("react").Ref<import("react-native").View>;
+}, never>>;

package/dist/storybook/decorators.js

@@ -5,7 +5,8 @@ import { Appearance } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Theme } from "../Theme";
 import { Flex } from "../elements/Flex";
-import { LinkText, Text } from "../elements/Text";
+import { Pill } from "../elements/Pill";
+import { Text } from "../elements/Text";
 import { ScreenDimensionsProvider } from "../utils/hooks";
 export const withTheme = (story) => (_jsxs(Theme, { theme: "v3light", children: [_jsx(Text, { color: "red", children: "aaww" }), story()] }));
 const DARK_MODE_STORAGE_KEY = "dark-mode-mode";
@@ -38,5 +39,5 @@ export const useDarkModeSwitcher = (story) => {
     };
     const isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
     const theme = isDarkMode ? "v3dark" : "v3light";
-    return (_jsx(ScreenDimensionsProvider, { children: _jsx(SafeAreaProvider, { children: _jsx(Theme, { theme: theme, children: _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", children: [_jsxs(Text, { color: "orange", children: ["Dark mode: ", mode, " ", mode === "system" && "(" + systemMode + ")"] }), _jsx(LinkText, { color: "orange", onPress: () => setMode("light"), children: "light" }), _jsx(LinkText, { color: "orange", onPress: () => setMode("dark"), children: "dark" }), _jsx(LinkText, { color: "orange", onPress: () => setMode("system"), children: "system" })] }), story()] }) }) }) }));
+    return (_jsx(ScreenDimensionsProvider, { children: _jsx(SafeAreaProvider, { children: _jsx(Theme, { theme: theme, children: _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", py: 1, backgroundColor: "mono5", children: [_jsx(Text, { color: "mono100", children: "Dark mode" }), _jsxs(Flex, { flexDirection: "row", gap: 1, children: [_jsx(Pill, { variant: "default", selected: mode === "light", onPress: () => setMode("light"), children: "Light" }), _jsx(Pill, { variant: "default", selected: mode === "dark", onPress: () => setMode("dark"), children: "Dark" }), _jsx(Pill, { variant: "default", selected: mode === "system", onPress: () => setMode("system"), children: "System" })] })] }), _jsx(Flex, { p: 2, children: story() })] }) }) }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "19.15.1",
+  "version": "20.0.0--canary.399.4691.0",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "expo run:android --port 8082",
@@ -38,7 +38,6 @@
     "@artsy/palette-tokens": "7.0.0",
     "@d11/react-native-fast-image": "8.12.0",
     "@shopify/flash-list": "^1.8.3",
-    "@styled-system/core": "^5.1.2",
     "@styled-system/theme-get": "^5.1.2",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
@@ -79,7 +78,11 @@
     "@babel/runtime": "^7.25.0",
     "@gorhom/bottom-sheet": "^4.6.4",
     "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/datetimepicker": "8.0.1",
+    "@react-native-community/slider": "4.5.2",
     "@react-native/eslint-config": "0.76.9",
+    "@storybook/addon-ondevice-actions": "^8.3.5",
+    "@storybook/addon-ondevice-controls": "^8.3.5",
     "@storybook/react-native": "^8.6.2",
     "@testing-library/react-native": "13.2.0",
     "@types/events": "^3.0.0",
@@ -87,10 +90,7 @@
     "@types/lodash": "4.14.191",
     "@types/react": "~19.0.10",
     "@types/react-test-renderer": "19.0.0",
-    "@types/styled-components": "^5.1.26",
-    "@types/styled-components-react-native": "^5.2.1",
     "@types/styled-system": "^5.1.16",
-    "@types/styled-system__core": "^5.1.3",
     "@types/styled-system__theme-get": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
@@ -133,7 +133,7 @@
     "react-native-svg": "15.12.0",
     "react-test-renderer": "19.0.0",
     "rimraf": "4.1.2",
-    "styled-components": "5.3.6",
+    "styled-components": "6.1.19",
     "typescript": "5.8.3"
   },
   "resolutions": {