@ornikar/bumper 3.11.0 → 3.12.0

package/dist/index-metro.es.ios.js

@@ -476,7 +476,7 @@ const Center = styled(View, {
   alignItems: 'center'
 });
 
-const _excluded = ["as"];
+const _excluded$1 = ["as"];
 /**
  * A polymorphic Pressable component that can render as any Tamagui primitive.
  */
@@ -484,7 +484,7 @@ function Pressable(_ref) {
   let {
       as
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded$1);
   const Component = styled(as !== null && as !== void 0 ? as : View, {
     name: 'Pressable',
     role: 'button',
@@ -834,7 +834,7 @@ function Icon(props) {
   return /*#__PURE__*/jsx(InternalIcon, _objectSpread({}, props));
 }
 
-const context = createStyledContext({
+const context$1 = createStyledContext({
   size: 'large',
   type: 'secondary',
   isOnContrasted: false,
@@ -866,7 +866,7 @@ function ButtonIcon({
     type,
     disabled,
     isOnContrasted
-  } = context.useStyledContext();
+  } = context$1.useStyledContext();
   const color = getButtonContentColor(type, disabled, isOnContrasted);
   return /*#__PURE__*/jsx(Icon, {
     icon: icon,
@@ -953,7 +953,7 @@ function ButtonText({
     size,
     disabled,
     isOnContrasted
-  } = context.useStyledContext();
+  } = context$1.useStyledContext();
   const color = getButtonContentColor(type, disabled, isOnContrasted);
   return /*#__PURE__*/jsxs(VStack, {
     children: [/*#__PURE__*/jsx(Typography.Text, {
@@ -970,7 +970,7 @@ function ButtonText({
 
 const InternalButtonFrame = styled(HStack, {
   name: 'Button',
-  context,
+  context: context$1,
   role: 'button',
   alignItems: 'center',
   justifyContent: 'center',
@@ -991,7 +991,7 @@ const InternalButtonFrame = styled(HStack, {
       const {
         isOnContrasted,
         disabled
-      } = context.useStyledContext();
+      } = context$1.useStyledContext();
       const commonTypeStyle = {
         backgroundColor: `$button.bg.${type}${isOnContrasted ? '.onContrasted' : ''}.default`,
         hoverStyle: {
@@ -1112,7 +1112,7 @@ const Button = withStaticProperties(InternalButton, {
 
 const InternalIconButtonFrame = styled(InternalButton, {
   name: 'IconButton',
-  context,
+  context: context$1,
   variants: {
     size: {
       small: {
@@ -1138,6 +1138,143 @@ const IconButton = withStaticProperties(InternalIconButton, {
   Badge: ButtonBadge
 });
 
+const context = createStyledContext({
+  color: 'green',
+  size: 'small',
+  disabled: false
+});
+
+/* eslint-disable @ornikar/kitt/prefer-semantic-tokens --
+ * Sticker intentionally exposes 12 palette-level decorative colors agreed with design.
+ */
+const STICKER_COLORS = {
+  green: {
+    background: '$palette.rainbow.green-grass',
+    text: '$palette.rainbow.green-apple'
+  },
+  greenDark: {
+    background: '$palette.rainbow.green-pine',
+    text: '$palette.rainbow.blue-sky'
+  },
+  blue: {
+    background: '$palette.rainbow.blue-sky',
+    text: '$palette.rainbow.green-pine'
+  },
+  blueDark: {
+    background: '$palette.rainbow.blue-electric',
+    text: '$palette.beige.3'
+  },
+  red: {
+    background: '$palette.rainbow.brick',
+    text: '$palette.rainbow.sun'
+  },
+  orange: {
+    background: '$palette.rainbow.orange',
+    text: '$palette.beige.2'
+  },
+  pink: {
+    background: '$palette.rainbow.pink',
+    text: '$palette.rainbow.brick'
+  },
+  gold: {
+    background: '$palette.rainbow.gold',
+    text: '$palette.beige.1'
+  },
+  cream: {
+    background: '$palette.beige.1',
+    text: '$palette.rainbow.brick'
+  },
+  linen: {
+    background: '$palette.beige.3',
+    text: '$palette.deepPurple.8'
+  },
+  lightning: {
+    background: '$palette.lightning.5',
+    text: '$palette.lightning.9'
+  },
+  lightningDark: {
+    background: '$palette.lightning.9',
+    text: '$palette.lightning.5'
+  },
+  disabled: {
+    background: '$bg.disabled.hi',
+    text: '$content.disabled.onContrasted'
+  }
+};
+
+const TYPOGRAPHY_VARIANT_BY_SIZE = {
+  small: 'content-caps-xs',
+  medium: 'content-caps-m',
+  large: 'content-caps-l'
+};
+function InternalStickerLabel({
+  children
+}) {
+  const {
+    color,
+    size,
+    disabled
+  } = context.useStyledContext();
+  const textColor = STICKER_COLORS[disabled ? 'disabled' : color].text;
+  return /*#__PURE__*/jsx(InternalTypography, {
+    variant: TYPOGRAPHY_VARIANT_BY_SIZE[size],
+    color: textColor,
+    numberOfLines: 1,
+    ellipsizeMode: "tail",
+    children: children
+  });
+}
+
+const _excluded = ["label"];
+const InternalStickerFrame = styled(View, {
+  name: 'Sticker',
+  context,
+  alignSelf: 'flex-start',
+  maxWidth: '100%',
+  padding: '$space.4',
+  variants: {
+    label: {},
+    size: {
+      small: {
+        borderRadius: '$radius.s'
+      },
+      medium: {
+        borderRadius: '$radius.m'
+      },
+      large: {
+        borderRadius: '$radius.m'
+      }
+    },
+    color: color => {
+      const {
+        disabled
+      } = context.useStyledContext();
+      return {
+        backgroundColor: STICKER_COLORS[disabled ? 'disabled' : color].background
+      };
+    }
+  },
+  defaultVariants: {
+    size: 'small',
+    color: 'green'
+  }
+});
+const InternalSticker = InternalStickerFrame.styleable(props => {
+  const _useProps = useProps(props),
+    {
+      label
+    } = _useProps,
+    frameProps = _objectWithoutProperties(_useProps, _excluded);
+  return /*#__PURE__*/jsx(InternalStickerFrame, _objectSpread(_objectSpread({}, frameProps), {}, {
+    children: /*#__PURE__*/jsx(InternalStickerLabel, {
+      children: label
+    })
+  }));
+});
+function Sticker(props) {
+  return /*#__PURE__*/jsx(InternalSticker, _objectSpread({}, props));
+}
+
 function getValueForBreakpoint(breakpoint, {
   base,
   small,
@@ -1190,5 +1327,5 @@ function SwitchBreakpoints(values) {
   return getValueForBreakpoint(breakpoint, values);
 }
 
-export { Badge, BumperProvider, Button, Center, HStack, IconButton, Loader, Pressable, SwitchBreakpoints, Typography, VStack, getValueForBreakpoint, useBreakpointValue, useCurrentBreakpointName };
+export { Badge, BumperProvider, Button, Center, HStack, IconButton, Loader, Pressable, Sticker, SwitchBreakpoints, Typography, VStack, getValueForBreakpoint, useBreakpointValue, useCurrentBreakpointName };
 //# sourceMappingURL=index-metro.es.ios.js.map