@snacky/ui 0.6.2 → 0.7.1

package/CHANGELOG.md

@@ -4,6 +4,28 @@ 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.
 
+## ImagePlaceholder added, a non-Figma utility (0.7.0)
+
+Every image prop (`ProductCard.imageUrl`, `ProductImage.src`, `Avatar.src`,
+the Banner family's `imageUrl`) has always been required, deliberately - this
+package ships no photography, so there was never anything to default to.
+That was correct as far as it went, but it left a real gap: a consumer with a
+genuinely empty state (a new product with no photo yet) had no sanctioned way
+to say so, and either left `src` empty (silently falling through to the
+browser's own broken-image icon) or invented their own placeholder, which is
+exactly the kind of gap that produced emoji fallbacks elsewhere in this
+project's history.
+
+`ImagePlaceholder` closes it: a neutral `bg-surface-variant` box with a
+generic "no image" glyph in `icon-disabled`. The glyph is hand-drawn
+(frame/circle/mountain outline), not one of `SnackyIcons` - it is decorative
+placeholder artwork, not a real icon prop, and the first instinct (reuse the
+package's own `camera` icon, reasoning "at least it's a real glyph") read as
+"take a photo" rather than "no image here" once someone actually looked at
+it. This is a standalone utility, not the 25th documented component - there
+is no Figma node for it, and the README says so explicitly rather than
+letting the count quietly drift.
+
 ## Icon set replaced with the real Figma artwork (0.3.0)
 
 The package originally shipped a hand-drawn "starter" icon set: roughly 30
@@ -104,3 +126,12 @@ unverified - see the README's Verification status.
   enough to wrap onto a second line got clipped instead of growing the banner.
   Changed to `min-height: 40px` and let the message text take `flex: 1` so it
   shrinks and wraps within the row instead of overflowing sideways.
+- **PointBalanceBanner's 0.6.2 fix corrected again (0.7.1).** Hugging content
+  was a correct read of Figma's own frame in isolation, but wrong once placed
+  next to a sibling with different content: the docs gallery's "Default" and
+  "LowBalance" stories sit side by side, and a low "0" / "Rp 0" collapsed to a
+  fraction of the other's width, visibly stranded inside its card. Back to
+  `width: 100%`, but `justify-content` stays at its flex-start default (not
+  `space-between`) - the original 0.6.2 bug was the groups spreading apart,
+  not the fill-width itself, so this keeps that part of the fix while
+  dropping the part that looked wrong once seen with real sibling content.

package/README.md

@@ -94,6 +94,32 @@ normally pass no colour. To tint one deliberately, use `color`:
 
 Names are listed under **What's here** below. `outline` has 42, `solid` has 11.
 
+### 4. Handle a missing image
+
+Every image slot (`ProductCard`'s `imageUrl`, `ProductImage`'s `src`,
+`Avatar`'s `src`, the Banner family's `imageUrl`) is a **required** prop, on
+purpose - this package ships no photography, so there is no fallback to fall
+back to. If you leave one out anyway, you get the browser's own broken-image
+icon, not anything from this design system.
+
+For a genuinely empty state (a new product with no photo yet, a user with no
+avatar), pass `ImagePlaceholder` explicitly instead of inventing your own:
+
+```tsx
+import { ImagePlaceholder, ProductCard } from '@snacky/ui';
+
+{photo ? (
+  <ProductCard imageUrl={photo} ... />
+) : (
+  <ImagePlaceholder width={152} height={128} />
+)}
+```
+
+It renders a neutral `bg-surface-variant` box with a generic "no image" glyph
+in `icon-disabled` - not a `SnackyIcons` icon, since this is decorative
+placeholder artwork rather than a real icon prop. Apply your own
+`className`/border radius to match whatever slot it fills.
+
 ## What's here
 
 All 24 documented components, each matching its `code.tsx` sample's prop
@@ -118,6 +144,9 @@ the same shell with different `children`, so you get two components rather
 than 22 near-duplicates. Their spacing varies per variant in Figma, so the
 shells ship sensible defaults and expect `children` to override it.
 
+Plus `ImagePlaceholder`, a standalone utility (see **Handle a missing image**
+above) - not one of the 24, there is no Figma node for it.
+
 ## Verification status
 
 Every component is diffed against `index.html`'s own Live Preview

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(index_exports, {
   HeroBanner: () => HeroBanner,
   IconButton: () => IconButton,
   Illustration: () => Illustration,
+  ImagePlaceholder: () => ImagePlaceholder,
   NavBar: () => NavBar,
   NotificationBadge: () => NotificationBadge,
   NotificationListItem: () => NotificationListItem,
@@ -1257,6 +1258,39 @@ function ProductCard(props) {
     }
   );
 }
+
+// src/components/ImagePlaceholder/ImagePlaceholder.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function ImagePlaceholder({ width, height, className }) {
+  const iconSize = Math.round(Math.min(width, height) * 0.32);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      className: cx("snacky-image-placeholder", className),
+      style: { width, height },
+      role: "img",
+      "aria-label": "No image",
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        "svg",
+        {
+          width: iconSize,
+          height: iconSize,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polyline", { points: "21 15 16 10 5 21" })
+          ]
+        }
+      )
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -1277,6 +1311,7 @@ function ProductCard(props) {
   HeroBanner,
   IconButton,
   Illustration,
+  ImagePlaceholder,
   NavBar,
   NotificationBadge,
   NotificationListItem,