@storybook/addon-ondevice-backgrounds/dist/Swatch.js

A react-native storybook addon to show different backgrounds for your preview

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_theming_1 = require("@storybook/react-native-theming");
const PressableSwatch = react_native_theming_1.styled.TouchableOpacity(({ theme }) => ({
    marginBottom: 10,
    borderWidth: 1,
    borderColor: theme.appBorderColor,
    borderRadius: 6,
    backgroundColor: theme.background.content,
    paddingVertical: 4,
    paddingHorizontal: 4,
}));
const ColorSwatch = react_native_theming_1.styled.View(({ color, theme }) => ({
    height: 40,
    width: '100%',
    borderRadius: 4,
    backgroundColor: color,
    borderColor: theme.appBorderColor,
    borderWidth: 1,
}));
const ValueContainer = react_native_theming_1.styled.View(() => ({
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 4,
    paddingBottom: 0,
}));
const NameText = react_native_theming_1.styled.Text(({ theme }) => ({
    fontSize: theme.typography.size.s2,
    color: theme.color.defaultText,
    fontWeight: theme.typography.weight.bold,
}));
const ValueText = react_native_theming_1.styled.Text(({ theme }) => ({
    fontSize: theme.typography.size.s2,
    color: theme.color.defaultText,
}));
const Swatch = ({ name, value, setBackground }) => ((0, jsx_runtime_1.jsxs)(PressableSwatch, { onPress: () => setBackground(value), children: [(0, jsx_runtime_1.jsx)(ColorSwatch, { color: value }), (0, jsx_runtime_1.jsxs)(ValueContainer, { children: [(0, jsx_runtime_1.jsx)(NameText, { children: name }), (0, jsx_runtime_1.jsx)(ValueText, { children: value })] })] }));
exports.default = Swatch;