@ornikar/bumper 3.11.0 → 3.12.0

package/dist/index.es.js

@@ -473,13 +473,13 @@ var Center = styled(View, {
   alignItems: 'center'
 });
 
-var _excluded = ["as"];
+var _excluded$1 = ["as"];
 /**
  * A polymorphic Pressable component that can render as any Tamagui primitive.
  */
 function Pressable(_ref) {
   var as = _ref.as,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded$1);
   var Component = styled(as !== null && as !== void 0 ? as : View, {
     name: 'Pressable',
     role: 'button',
@@ -823,7 +823,7 @@ function Icon(props) {
   return /*#__PURE__*/jsx(InternalIcon, _objectSpread({}, props));
 }
 
-var context = createStyledContext({
+var context$1 = createStyledContext({
   size: 'large',
   type: 'secondary',
   isOnContrasted: false,
@@ -850,7 +850,7 @@ function getButtonContentColor(type, disabled, isOnContrasted) {
 
 function ButtonIcon(_ref) {
   var icon = _ref.icon;
-  var _context$useStyledCon = context.useStyledContext(),
+  var _context$useStyledCon = context$1.useStyledContext(),
     type = _context$useStyledCon.type,
     disabled = _context$useStyledCon.disabled,
     isOnContrasted = _context$useStyledCon.isOnContrasted;
@@ -934,7 +934,7 @@ var Typography = {
 
 function ButtonText(_ref) {
   var children = _ref.children;
-  var _context$useStyledCon = context.useStyledContext(),
+  var _context$useStyledCon = context$1.useStyledContext(),
     type = _context$useStyledCon.type,
     size = _context$useStyledCon.size,
     disabled = _context$useStyledCon.disabled,
@@ -955,7 +955,7 @@ function ButtonText(_ref) {
 
 var InternalButtonFrame = styled(HStack, {
   name: 'Button',
-  context: context,
+  context: context$1,
   role: 'button',
   alignItems: 'center',
   justifyContent: 'center',
@@ -973,7 +973,7 @@ var InternalButtonFrame = styled(HStack, {
   },
   variants: {
     type: function (_type) {
-      var _context$useStyledCon = context.useStyledContext(),
+      var _context$useStyledCon = context$1.useStyledContext(),
         isOnContrasted = _context$useStyledCon.isOnContrasted,
         disabled = _context$useStyledCon.disabled;
       var commonTypeStyle = {
@@ -1096,7 +1096,7 @@ var Button = withStaticProperties(InternalButton, {
 
 var InternalIconButtonFrame = styled(InternalButton, {
   name: 'IconButton',
-  context: context,
+  context: context$1,
   variants: {
     size: {
       small: {
@@ -1122,6 +1122,138 @@ var IconButton = withStaticProperties(InternalIconButton, {
   Badge: ButtonBadge
 });
 
+var 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.
+ */
+var 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'
+  }
+};
+
+var TYPOGRAPHY_VARIANT_BY_SIZE = {
+  small: 'content-caps-xs',
+  medium: 'content-caps-m',
+  large: 'content-caps-l'
+};
+function InternalStickerLabel(_ref) {
+  var children = _ref.children;
+  var _context$useStyledCon = context.useStyledContext(),
+    color = _context$useStyledCon.color,
+    size = _context$useStyledCon.size,
+    disabled = _context$useStyledCon.disabled;
+  var 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
+  });
+}
+
+var _excluded = ["label"];
+var InternalStickerFrame = styled(View, {
+  name: 'Sticker',
+  context: 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: function (_color) {
+      var _context$useStyledCon = context.useStyledContext(),
+        disabled = _context$useStyledCon.disabled;
+      return {
+        backgroundColor: STICKER_COLORS[disabled ? 'disabled' : _color].background
+      };
+    }
+  },
+  defaultVariants: {
+    size: 'small',
+    color: 'green'
+  }
+});
+var InternalSticker = InternalStickerFrame.styleable(function (props) {
+  var _useProps = useProps(props),
+    label = _useProps.label,
+    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, _ref) {
   var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7;
   var base = _ref.base,
@@ -1173,5 +1305,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.es.js.map