@ornikar/bumper 3.11.0 → 3.12.0

package/dist/index-node-22.22.es.mjs

@@ -846,7 +846,7 @@ function Icon(props) {
   });
 }
 
-const context = createStyledContext({
+const context$1 = createStyledContext({
   size: 'large',
   type: 'secondary',
   isOnContrasted: false,
@@ -878,7 +878,7 @@ function ButtonIcon({
     type,
     disabled,
     isOnContrasted
-  } = context.useStyledContext();
+  } = context$1.useStyledContext();
   const color = getButtonContentColor(type, disabled, isOnContrasted);
   return /*#__PURE__*/jsx(Icon, {
     icon: icon,
@@ -971,7 +971,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, {
@@ -988,7 +988,7 @@ function ButtonText({
 
 const InternalButtonFrame = styled(HStack, {
   name: 'Button',
-  context,
+  context: context$1,
   role: 'button',
   alignItems: 'center',
   justifyContent: 'center',
@@ -1009,7 +1009,7 @@ const InternalButtonFrame = styled(HStack, {
       const {
         isOnContrasted,
         disabled
-      } = context.useStyledContext();
+      } = context$1.useStyledContext();
       const commonTypeStyle = {
         backgroundColor: `$button.bg.${type}${isOnContrasted ? '.onContrasted' : ''}.default`,
         hoverStyle: {
@@ -1135,7 +1135,7 @@ const Button = withStaticProperties(InternalButton, {
 
 const InternalIconButtonFrame = styled(InternalButton, {
   name: 'IconButton',
-  context,
+  context: context$1,
   variants: {
     size: {
       small: {
@@ -1163,6 +1163,144 @@ 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 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 {
+    label,
+    ...frameProps
+  } = useProps(props);
+  return /*#__PURE__*/jsx(InternalStickerFrame, {
+    ...frameProps,
+    children: /*#__PURE__*/jsx(InternalStickerLabel, {
+      children: label
+    })
+  });
+});
+function Sticker(props) {
+  return /*#__PURE__*/jsx(InternalSticker, {
+    ...props
+  });
+}
+
 function getValueForBreakpoint(breakpoint, {
   base,
   small,
@@ -1214,5 +1352,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-node-22.22.es.mjs.map