@snacky/ui 0.7.3 → 0.8.1

package/CHANGELOG.md

@@ -4,6 +4,70 @@ How `@snacky/ui` got to its current state. The README documents what the
 package *is*; this documents how it got there, including the mistakes, so the
 verification claims in the README can be taken at face value.
 
+## PointBalanceBanner's two halves now share the row equally (0.8.1)
+
+`.snacky-banner-point-balance__item` (the Points group and the Balance group
+either side of the hairline divider) never had a `flex` value, so each one
+just hugged its own content width and both packed against the left edge.
+That was invisible in the docs site's own Live Preview, which always renders
+this component inside a hardcoded `width: 312` wrapper matching Figma's exact
+frame size - the one width where there's barely any slack to expose the bug.
+It showed up once the component was dropped into a genuinely wider container
+(the Claude Design gallery's story card, auto-sized well past 312px): the
+divider landed right after the first group instead of at the midpoint, and
+the row's tinted, bordered background kept stretching to `width: 100%` with
+nothing in the empty half but its own surface colour.
+
+Figma's own auto-layout already has both item columns set to fill-container,
+splitting the row 50/50 around the divider - confirmed directly in Figma's
+dev-mode inspect view, not inferred. Added `flex: 1` to both items (`weight
+(1f)` in compose-ui), so each column now grows to take an equal share of
+whatever width the row fills, with its icon/label/value left-aligned inside
+that half. Verified by rendering the real package at 312px (Figma spec, where
+nothing changes visually - the two halves were already close to equal there),
+and at 400px (matching the gallery card's rough width): the divider sits at
+49.8-49.9% of the row's width in both cases, and a "LowBalance" sibling
+("0" / "Rp 0") now measures pixel-identical to "Default" at the same
+container width, which is exactly the sibling-mismatch problem `width: 100%`
+was introduced to solve in 0.7.1 in the first place.
+
+## VariantBadge renamed to InfoBadge, with an icon slot (0.8.0)
+
+The badge that renders `Variant: 75 Grams` turned out to have a second use in
+Figma: `Points: 20,000` in the Home header. Identical in every respect -
+32 tall, 8px padding, `bg-surface-highlight` on a `primary-500` stroke,
+`radius/field` - except for a leading icon.
+
+Two things came out of that. First, the name was wrong: `variant` described
+one use of the pattern, not the pattern, and a third use (`Berat: 500g`,
+`Stok: 12`) would have had nowhere to go. It is now `InfoBadge`, named for the
+shape of the information - a static, non-interactive `Label: Value` chip.
+Second, the icon is a slot rather than a second component, because nothing
+else differs between the two; Figma models them as `Property 2=variant` /
+`Property 2=points`, which is a naming axis, not a structural one.
+
+Worth recording as evidence, since "is this really a component?" keeps coming
+up in this repo: the points version was **not** a one-off. Searching the
+`Customer App - English` page's full node dump turned up seven copies of the
+same 116x32 structure - one named `Points info`, six named `Frame 1064` -
+hand-copied across different screens rather than instanced. That is the same
+shape as the `Stepper` case (19 hand-drawn copies under two frame names), and
+the same conclusion: a repeated hand-drawn pattern is a missing component, not
+app composition.
+
+`VariantBadge` and `VariantBadgeProps` still export as `@deprecated` aliases,
+so existing code keeps working.
+
+One inconsistency was caught while verifying: compose-ui tinted the icon slot
+`icon-brand` (per Figma) but react-ui did not, so anyone copying the
+documented snippet would have got `#333`. The playground was hiding it by
+passing an explicit colour that the docs never mention. The tint now lives in
+`.snacky-info-badge__icon` itself, and the playground passes no colour, so it
+exercises the same path a consumer gets.
+
+The 12x12 icon sits below the icon sizing scale (`size/icon/sm` is 16), so it
+stays a raw value on both platforms, with a comment saying why.
+
 ## ImagePlaceholder added, a non-Figma utility (0.7.0)
 
 Every image prop (`ProductCard.imageUrl`, `ProductImage.src`, `Avatar.src`,
@@ -154,3 +218,18 @@ unverified - see the README's Verification status.
   computed pixel values are unchanged (re-verified: still exactly 20px at
   Small, now genuinely resolving through `--size-icon-md` rather than a
   literal that happens to match it).
+- **Button's icon slot overlapped the label on any hug-width button (0.7.4).**
+  The icon is absolutely positioned (out of flow, per Figma's own "Slot Usage"
+  guideline), so it never reserved space for itself - the button's auto width
+  came from the label alone, and the icon rendered on top of it (`Add to cart`
+  read as the cart icon glyph covering the `A`, `dd to cart` visible after it).
+  Never caught before because no preview or story had ever passed an `icon`
+  prop to a real, narrow (hug-width) `Button` instance - confirmed directly
+  against Figma's "With Icon" example, which shows icon and label side by
+  side with a clear gap, never overlapping. Fixed by adding a
+  `.snacky-btn--with-icon` modifier that reserves exactly the icon's own
+  space (its `spacing-8` start inset + its size + a `gap-text-icon` gap) as
+  left padding, so the (still centered) label starts right after the icon
+  instead of on top of it. Ported the same fix to compose-ui's `SnackyButton`
+  (via `contentPadding`'s `start` value). Verified visually at both sizes: a
+  clean gap between icon and label, no overlap, `Add to cart` fully legible.

package/dist/index.cjs

@@ -39,6 +39,7 @@ __export(index_exports, {
   IconButton: () => IconButton,
   Illustration: () => Illustration,
   ImagePlaceholder: () => ImagePlaceholder,
+  InfoBadge: () => InfoBadge,
   NavBar: () => NavBar,
   NotificationBadge: () => NotificationBadge,
   NotificationListItem: () => NotificationListItem,
@@ -113,6 +114,7 @@ var Button = (0, import_react.forwardRef)(function Button2({ variant = "primary"
         `snacky-btn--${variant}`,
         size === "small" && "snacky-btn--small",
         danger && "snacky-btn--danger",
+        icon3 != null && "snacky-btn--with-icon",
         className
       ),
       ...rest,
@@ -844,9 +846,13 @@ function DiscountTag({ label, className }) {
 function SoldOutBadge({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx("snacky-soldout-badge", className), children: "Sold Out" });
 }
-function VariantBadge({ label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cx("snacky-variant-badge", className), children: label });
+function InfoBadge({ label, icon: icon3, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: cx("snacky-info-badge", className), children: [
+    icon3 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "snacky-info-badge__icon", children: icon3 }),
+    label
+  ] });
 }
+var VariantBadge = InfoBadge;
 
 // src/components/Callout/Callout.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -1312,6 +1318,7 @@ function ImagePlaceholder({ width, height, className }) {
   IconButton,
   Illustration,
   ImagePlaceholder,
+  InfoBadge,
   NavBar,
   NotificationBadge,
   NotificationListItem,