@snacky/ui 0.7.2 → 0.8.0

package/dist/index.d.ts

@@ -248,12 +248,28 @@ interface SoldOutBadgeProps {
 }
 /** Snacky Sold Out Badge - absolute overlay on a product image. Position it with your own layout. */
 declare function SoldOutBadge({ className }: SoldOutBadgeProps): react.JSX.Element;
-interface VariantBadgeProps {
+interface InfoBadgeProps {
+    /** The whole string, including its own prefix if it has one - Figma draws this as a single text node ("Variant: 75 Grams", "Points: 20,000"). */
     label: string;
+    /** Optional 12x12 leading icon. Its presence is the only structural difference between Figma's `Property 2=variant` and `Property 2=points`. */
+    icon?: ReactNode;
     className?: string;
 }
-/** Snacky Variant Badge - static, non-interactive label for the currently selected product variant. */
-declare function VariantBadge({ label, className }: VariantBadgeProps): react.JSX.Element;
+/**
+ * Snacky Info Badge - static, non-interactive `Label: Value` chip on the
+ * accent-highlighted style, for a single attribute of something: the selected
+ * product variant, a loyalty points total, and so on.
+ *
+ * Named for the shape of the information, not one use of it. It was
+ * `VariantBadge` until Figma grew a second use (`Points: 20,000` in the Home
+ * header), which was identical apart from the icon - so the icon became a slot
+ * rather than the pattern becoming a second component.
+ */
+declare function InfoBadge({ label, icon, className }: InfoBadgeProps): react.JSX.Element;
+/** @deprecated Renamed to {@link InfoBadge} in 0.8.0 - the same component, now with an optional `icon`. This alias will be removed in a future release. */
+declare const VariantBadge: typeof InfoBadge;
+/** @deprecated Renamed to {@link InfoBadgeProps} in 0.8.0. */
+type VariantBadgeProps = InfoBadgeProps;
 
 type CalloutVariant = 'received' | 'sent' | 'pending';
 interface CalloutProps {
@@ -655,4 +671,4 @@ declare const SnackyIcons: {
     solid: typeof solid;
 };
 
-export { Accordion, type AccordionProps, AddressResult, type AddressResultProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, type AvatarSize, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CopyField, type CopyFieldProps, DiscountTag, type DiscountTagProps, FilterChip, type FilterChipProps, FullWidthBanner, Header, type HeaderLeadingIcon, type HeaderProps, HeroBanner, IconButton, type IconButtonProps, type IconButtonVariant, type IconProps, Illustration, type IllustrationProps, type IllustrationVariant, type ImageBannerProps, ImagePlaceholder, type ImagePlaceholderProps, NavBar, type NavBarProps, type NavItem, NotificationBadge, type NotificationBadgeProps, NotificationListItem, type NotificationListItemProps, OrderListItem, type OrderListItemProps, type OrderStatus, OtpField, type OtpFieldProps, PointBalanceBanner, type PointBalanceBannerProps, ProductCard, type ProductCardDetailsProps, type ProductCardListProps, type ProductCardProps, ProductChip, type ProductChipProps, ProductImage, type ProductImageProps, type ProductImageUsage, RadioOption, type RadioOptionProps, SearchField, type SearchFieldProps, Section, type SectionProps, SnackyIcons, SoldOutBadge, type SoldOutBadgeProps, SquareBanner, type Step, type StepState, Stepper, type StepperProps, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };
+export { Accordion, type AccordionProps, AddressResult, type AddressResultProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, type AvatarSize, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CopyField, type CopyFieldProps, DiscountTag, type DiscountTagProps, FilterChip, type FilterChipProps, FullWidthBanner, Header, type HeaderLeadingIcon, type HeaderProps, HeroBanner, IconButton, type IconButtonProps, type IconButtonVariant, type IconProps, Illustration, type IllustrationProps, type IllustrationVariant, type ImageBannerProps, ImagePlaceholder, type ImagePlaceholderProps, InfoBadge, type InfoBadgeProps, NavBar, type NavBarProps, type NavItem, NotificationBadge, type NotificationBadgeProps, NotificationListItem, type NotificationListItemProps, OrderListItem, type OrderListItemProps, type OrderStatus, OtpField, type OtpFieldProps, PointBalanceBanner, type PointBalanceBannerProps, ProductCard, type ProductCardDetailsProps, type ProductCardListProps, type ProductCardProps, ProductChip, type ProductChipProps, ProductImage, type ProductImageProps, type ProductImageUsage, RadioOption, type RadioOptionProps, SearchField, type SearchFieldProps, Section, type SectionProps, SnackyIcons, SoldOutBadge, type SoldOutBadgeProps, SquareBanner, type Step, type StepState, Stepper, type StepperProps, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };

package/dist/index.js

@@ -53,6 +53,7 @@ var Button = forwardRef(function Button2({ variant = "primary", danger = false,
         `snacky-btn--${variant}`,
         size === "small" && "snacky-btn--small",
         danger && "snacky-btn--danger",
+        icon3 != null && "snacky-btn--with-icon",
         className
       ),
       ...rest,
@@ -784,9 +785,13 @@ function DiscountTag({ label, className }) {
 function SoldOutBadge({ className }) {
   return /* @__PURE__ */ jsx21("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
 }
-function VariantBadge({ label, className }) {
-  return /* @__PURE__ */ jsx21("span", { className: cx("snacky-variant-badge", className), children: label });
+function InfoBadge({ label, icon: icon3, className }) {
+  return /* @__PURE__ */ jsxs14("span", { className: cx("snacky-info-badge", className), children: [
+    icon3 && /* @__PURE__ */ jsx21("span", { className: "snacky-info-badge__icon", children: icon3 }),
+    label
+  ] });
 }
+var VariantBadge = InfoBadge;
 
 // src/components/Callout/Callout.tsx
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -1251,6 +1256,7 @@ export {
   IconButton,
   Illustration,
   ImagePlaceholder,
+  InfoBadge,
   NavBar,
   NotificationBadge,
   NotificationListItem,