@oxy.so/bloom 3.1.0 → 3.2.0

package/README.md

@@ -153,6 +153,8 @@ Every palette is generated from a single seed colour by a dependency free colour
 
 Bloom publishes 168 subpath exports. Importing from the subpath rather than the root keeps a bundle to what it actually renders.
 
+Icons go one step further: every glyph is its own subpath, `@oxy.so/bloom/icons/<RiName>`. Metro does not tree-shake, so the flat `@oxy.so/bloom/icons` barrel ships all 461 glyphs to any app that names one — see [icons](./docs/icons.mdx) for the measurement and when to reach for which import. The barrel keeps working unchanged — it stays an exact `exports` key, and an exact key beats a pattern everywhere.
+
 | Group | Exports |
 |---|---|
 | Providers and theme | `provider`, `theme`, `theme-toggle`, `color-presets`, `preset-vars`, `design-tokens`, `tailwind-preset`, `styles`, `control-surface`, `hooks` |

package/docs/icons.mdx

@@ -1,6 +1,6 @@
 ---
 title: Icons
-description: Remix Icon, one component per glyph — how to import it, how apps migrate off the retired Bloom set, and why a wrong name is invisible to the compiler.
+description: Remix Icon, one component per glyph — how to import one glyph instead of all 461, how apps migrate off the retired Bloom set, and why a wrong name is invisible to the compiler.
 order: 66
 ---
 
@@ -17,6 +17,59 @@ import { RiNotification3Line as BellIcon } from '@oxy.so/bloom/icons';
 <BellIcon size="lg" fill={colors.text} />
 ```
 
+## Import one glyph, ship one glyph
+
+**Metro does not tree-shake.** `@oxy.so/bloom/icons` is a flat barrel over all
+461 glyphs, so an app that names one icon through it bundles all 461 — the
+import is a static graph edge to every one of them, and nothing downstream
+removes what the app never renders.
+
+Every glyph is therefore *also* its own subpath. The module name is the export
+name, so there is nothing new to look up:
+
+```tsx
+import { RiNotification3Line as BellIcon } from '@oxy.so/bloom/icons/RiNotification3Line';
+```
+
+Measured on a Metro bundle (`--platform ios --dev false --minify true`) built
+from two entry points that name the same 12 `Ri*` icons — the set CrowdSource's
+apps import — and differ in nothing else:
+
+| | from the barrel | by subpath |
+|---|---|---|
+| glyph modules in the bundle | 461 | 12 |
+| bytes in those modules | 318,869 | 7,406 |
+| whole bundle | 3,324,898 | 2,959,073 |
+
+**365,825 bytes, 11.0% of the bundle.** 311,463 of those are the 449 glyphs the
+app never draws; the remaining 54,362 are the two barrel modules themselves
+(`icons/index.ts`, and the 461-line `icons/remix/index.ts`) and Metro's
+per-module dependency arrays. The same shape was what pushed one app's
+JavaScript budget over by 119 KiB between Bloom 2.0.0 (338 icons) and 3.1.0
+(463): the barrel grows with the icon set whether or not an app uses any of it.
+
+### The barrel still works, and stays supported
+
+`@oxy.so/bloom/icons` is an **exact** `exports` key and the per-glyph entry is a
+**pattern** (`./icons/Ri*`); an exact key beats a pattern in every resolver that
+implements `exports`, so no existing import moves and nothing needs migrating.
+Reach for the barrel when a file genuinely wants many glyphs — a `Foundations`
+story, or the icon picker — and for the subpath everywhere else.
+
+Both shapes resolve the same four ways Bloom is consumed, verified against a
+fixture rather than assumed: Metro (the `react-native` condition, which takes
+`src/`), an ESM bundler, Node's `require`, and `tsc` under `node16`, `bundler`
+**and** the legacy `node` resolution. That last one reads `typesVersions`
+instead of `exports`, which is why the package now ships one; before it did,
+*no* Bloom subpath typechecked under `moduleResolution: "node"`.
+
+One thing the pattern deliberately cannot express: `@oxy.so/bloom/icons/index`.
+The `Ri` sits in the pattern rather than in the `*`, because a bare `./icons/*`
+would also match `index` — and the built `icons/remix/index.js` exists while
+`src/icons/remix/` holds an `index.ts` and no `index.tsx`, so that specifier
+would resolve for every consumer *except* Metro, the one that reads `src/`.
+Use `@oxy.so/bloom/icons` for the barrel.
+
 ## The naming is `Ri<Subject><Line|Fill>`
 
 The name on remixicon.com is the import: `arrow-right-s-line` is
@@ -145,14 +198,16 @@ release blocker once got filed against the tab bar.
 It is the only gate on this class of bug, and it deliberately does **not** strip
 comments, because the comments are the surface under test.
 
-## Two import shapes are correct, one is not
+## Three import shapes are correct, one is not
 
 ```tsx
+import { RiHome5Line } from '@oxy.so/bloom/icons/RiHome5Line'; // ✅ one glyph, one module
 import * as Icons from '@oxy.so/bloom/icons';   // ✅ the subpath, as a namespace
 import { Icons } from '@oxy.so/bloom';          // ✅ the root barrel's namespace
 ```
 
-The third shape — importing `Icons` as a *named* export from the **subpath** —
+The first is the one to reach for; the other two pull the whole set in (above).
+The fourth shape — importing `Icons` as a *named* export from the **subpath** —
 is `undefined` at runtime. The subpath exports the components flat; the `Icons`
 name is assembled by the root barrel (`export * as Icons from './icons'`), so
 there is no such named export to destructure.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -1012,6 +1012,20 @@
         "default": "./lib/commonjs/icons/index.js"
       }
     },
+    "./icons/Ri*": {
+      "react-native": {
+        "types": "./lib/typescript/module/icons/remix/Ri*.d.ts",
+        "default": "./src/icons/remix/Ri*.tsx"
+      },
+      "import": {
+        "types": "./lib/typescript/module/icons/remix/Ri*.d.ts",
+        "default": "./lib/module/icons/remix/Ri*.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/icons/remix/Ri*.d.ts",
+        "default": "./lib/commonjs/icons/remix/Ri*.js"
+      }
+    },
     "./typography": {
       "react-native": {
         "types": "./lib/typescript/module/typography/index.d.ts",
@@ -2783,5 +2797,510 @@
     "defu": "6.1.7",
     "handlebars": "4.7.9",
     "lodash": "4.18.1"
+  },
+  "typesVersions": {
+    "*": {
+      "provider": [
+        "./lib/typescript/module/provider/index.d.ts"
+      ],
+      "surfaces": [
+        "./lib/typescript/module/surfaces/index.d.ts"
+      ],
+      "image-resolver": [
+        "./lib/typescript/module/image-resolver/index.d.ts"
+      ],
+      "image-aspect-ratio-cache": [
+        "./lib/typescript/module/image-aspect-ratio-cache/index.d.ts"
+      ],
+      "theme": [
+        "./lib/typescript/module/theme/index.d.ts"
+      ],
+      "color-presets": [
+        "./lib/typescript/module/theme/color-presets.d.ts"
+      ],
+      "preset-vars": [
+        "./lib/typescript/module/theme/preset-vars.d.ts"
+      ],
+      "design-tokens": [
+        "./lib/typescript/module/design-tokens/index.d.ts"
+      ],
+      "tailwind-preset": [
+        "./lib/typescript/module/design-tokens/tailwind-preset.d.ts"
+      ],
+      "portal": [
+        "./lib/typescript/module/portal/index.d.ts"
+      ],
+      "connection-status": [
+        "./lib/typescript/module/connection-status/index.d.ts"
+      ],
+      "overlay": [
+        "./lib/typescript/module/overlay/index.d.ts"
+      ],
+      "dialog": [
+        "./lib/typescript/module/dialog/index.d.ts"
+      ],
+      "button": [
+        "./lib/typescript/module/button/index.d.ts"
+      ],
+      "button-group": [
+        "./lib/typescript/module/button-group/index.d.ts"
+      ],
+      "control-surface": [
+        "./lib/typescript/module/control-surface/index.d.ts"
+      ],
+      "layout": [
+        "./lib/typescript/module/layout/index.d.ts"
+      ],
+      "fab": [
+        "./lib/typescript/module/fab/index.d.ts"
+      ],
+      "frosted-icon-button": [
+        "./lib/typescript/module/frosted-icon-button/index.d.ts"
+      ],
+      "divider": [
+        "./lib/typescript/module/divider/index.d.ts"
+      ],
+      "breadcrumb": [
+        "./lib/typescript/module/breadcrumb/index.d.ts"
+      ],
+      "pagination": [
+        "./lib/typescript/module/pagination/index.d.ts"
+      ],
+      "agent-limits-card": [
+        "./lib/typescript/module/agent-limits-card/index.d.ts"
+      ],
+      "carousel": [
+        "./lib/typescript/module/carousel/index.d.ts"
+      ],
+      "file-upload": [
+        "./lib/typescript/module/file-upload/index.d.ts"
+      ],
+      "social-button": [
+        "./lib/typescript/module/social-button/index.d.ts"
+      ],
+      "notification": [
+        "./lib/typescript/module/notification/index.d.ts"
+      ],
+      "announcement": [
+        "./lib/typescript/module/announcement/index.d.ts"
+      ],
+      "data-table": [
+        "./lib/typescript/module/data-table/index.d.ts"
+      ],
+      "chart-cards": [
+        "./lib/typescript/module/chart-cards/index.d.ts"
+      ],
+      "calendar": [
+        "./lib/typescript/module/calendar/index.d.ts"
+      ],
+      "stat-cards": [
+        "./lib/typescript/module/stat-cards/index.d.ts"
+      ],
+      "recent-hires-card": [
+        "./lib/typescript/module/recent-hires-card/index.d.ts"
+      ],
+      "ai-profile-card": [
+        "./lib/typescript/module/ai-profile-card/index.d.ts"
+      ],
+      "important-alerts-card": [
+        "./lib/typescript/module/important-alerts-card/index.d.ts"
+      ],
+      "patient-info-card": [
+        "./lib/typescript/module/patient-info-card/index.d.ts"
+      ],
+      "sidebar": [
+        "./lib/typescript/module/sidebar/index.d.ts"
+      ],
+      "app-shell": [
+        "./lib/typescript/module/app-shell/index.d.ts"
+      ],
+      "page-header": [
+        "./lib/typescript/module/page-header/index.d.ts"
+      ],
+      "notification-center": [
+        "./lib/typescript/module/notification-center/index.d.ts"
+      ],
+      "theme-toggle": [
+        "./lib/typescript/module/theme-toggle/index.d.ts"
+      ],
+      "settings-modal": [
+        "./lib/typescript/module/settings-modal/index.d.ts"
+      ],
+      "auth-card": [
+        "./lib/typescript/module/auth-card/index.d.ts"
+      ],
+      "agent-thinking": [
+        "./lib/typescript/module/agent-thinking/index.d.ts"
+      ],
+      "agent-log": [
+        "./lib/typescript/module/agent-log/index.d.ts"
+      ],
+      "agent-progress": [
+        "./lib/typescript/module/agent-progress/index.d.ts"
+      ],
+      "composer-loader": [
+        "./lib/typescript/module/composer-loader/index.d.ts"
+      ],
+      "composer-panel": [
+        "./lib/typescript/module/composer-panel/index.d.ts"
+      ],
+      "questionnaire": [
+        "./lib/typescript/module/questionnaire/index.d.ts"
+      ],
+      "web-search": [
+        "./lib/typescript/module/web-search/index.d.ts"
+      ],
+      "task-list": [
+        "./lib/typescript/module/task-list/index.d.ts"
+      ],
+      "agent-chat": [
+        "./lib/typescript/module/agent-chat/index.d.ts"
+      ],
+      "ai-chat": [
+        "./lib/typescript/module/ai-chat/index.d.ts"
+      ],
+      "radio-indicator": [
+        "./lib/typescript/module/radio-indicator/index.d.ts"
+      ],
+      "radio": [
+        "./lib/typescript/module/radio/index.d.ts"
+      ],
+      "error-boundary": [
+        "./lib/typescript/module/error-boundary/index.d.ts"
+      ],
+      "avatar": [
+        "./lib/typescript/module/avatar/index.d.ts"
+      ],
+      "avatar-group": [
+        "./lib/typescript/module/avatar-group/index.d.ts"
+      ],
+      "user-hover-card": [
+        "./lib/typescript/module/user-hover-card/index.d.ts"
+      ],
+      "loading": [
+        "./lib/typescript/module/loading/index.d.ts"
+      ],
+      "switch": [
+        "./lib/typescript/module/switch/index.d.ts"
+      ],
+      "toast": [
+        "./lib/typescript/module/toast/index.d.ts"
+      ],
+      "styles": [
+        "./lib/typescript/module/styles/index.d.ts"
+      ],
+      "hooks": [
+        "./lib/typescript/module/hooks/index.d.ts"
+      ],
+      "icons": [
+        "./lib/typescript/module/icons/index.d.ts"
+      ],
+      "icons/Ri*": [
+        "./lib/typescript/module/icons/remix/Ri*.d.ts"
+      ],
+      "typography": [
+        "./lib/typescript/module/typography/index.d.ts"
+      ],
+      "skeleton": [
+        "./lib/typescript/module/skeleton/index.d.ts"
+      ],
+      "grid": [
+        "./lib/typescript/module/grid/index.d.ts"
+      ],
+      "fill": [
+        "./lib/typescript/module/fill/index.d.ts"
+      ],
+      "media-inset-border": [
+        "./lib/typescript/module/media-inset-border/index.d.ts"
+      ],
+      "zoomable-media-gallery": [
+        "./lib/typescript/module/zoomable-media-gallery/index.d.ts"
+      ],
+      "zoomable-image-gallery": [
+        "./lib/typescript/module/zoomable-media-gallery/index.d.ts"
+      ],
+      "media-flight": [
+        "./lib/typescript/module/media-flight/index.d.ts"
+      ],
+      "teleport": [
+        "./lib/typescript/module/teleport/index.d.ts"
+      ],
+      "pressable-scale": [
+        "./lib/typescript/module/pressable-scale/index.d.ts"
+      ],
+      "subtle-hover": [
+        "./lib/typescript/module/subtle-hover/index.d.ts"
+      ],
+      "motion": [
+        "./lib/typescript/module/motion/index.d.ts"
+      ],
+      "animated-check": [
+        "./lib/typescript/module/animated-check/index.d.ts"
+      ],
+      "icon-circle": [
+        "./lib/typescript/module/icon-circle/index.d.ts"
+      ],
+      "connection-dots": [
+        "./lib/typescript/module/connection-dots/index.d.ts"
+      ],
+      "composition-bar": [
+        "./lib/typescript/module/composition-bar/index.d.ts"
+      ],
+      "dot-grid-meter": [
+        "./lib/typescript/module/dot-grid-meter/index.d.ts"
+      ],
+      "stat-bar": [
+        "./lib/typescript/module/stat-bar/index.d.ts"
+      ],
+      "activity-heatmap": [
+        "./lib/typescript/module/activity-heatmap/index.d.ts"
+      ],
+      "text-field": [
+        "./lib/typescript/module/text-field/index.d.ts"
+      ],
+      "segmented-control": [
+        "./lib/typescript/module/segmented-control/index.d.ts"
+      ],
+      "textarea": [
+        "./lib/typescript/module/textarea/index.d.ts"
+      ],
+      "input-otp": [
+        "./lib/typescript/module/input-otp/index.d.ts"
+      ],
+      "phone-input": [
+        "./lib/typescript/module/phone-input/index.d.ts"
+      ],
+      "table": [
+        "./lib/typescript/module/table/index.d.ts"
+      ],
+      "date-picker": [
+        "./lib/typescript/module/date-picker/index.d.ts"
+      ],
+      "search": [
+        "./lib/typescript/module/search/index.d.ts"
+      ],
+      "admonition": [
+        "./lib/typescript/module/admonition/index.d.ts"
+      ],
+      "dropdown-menu": [
+        "./lib/typescript/module/dropdown-menu/index.d.ts"
+      ],
+      "tooltip": [
+        "./lib/typescript/module/tooltip/index.d.ts"
+      ],
+      "select": [
+        "./lib/typescript/module/select/index.d.ts"
+      ],
+      "bottom-sheet": [
+        "./lib/typescript/module/bottom-sheet/index.d.ts"
+      ],
+      "context-menu": [
+        "./lib/typescript/module/context-menu/index.d.ts"
+      ],
+      "menubar": [
+        "./lib/typescript/module/menubar/index.d.ts"
+      ],
+      "popover": [
+        "./lib/typescript/module/popover/index.d.ts"
+      ],
+      "hover-card": [
+        "./lib/typescript/module/hover-card/index.d.ts"
+      ],
+      "aspect-ratio": [
+        "./lib/typescript/module/aspect-ratio/index.d.ts"
+      ],
+      "alert-dialog": [
+        "./lib/typescript/module/alert-dialog/index.d.ts"
+      ],
+      "command": [
+        "./lib/typescript/module/command/index.d.ts"
+      ],
+      "label": [
+        "./lib/typescript/module/label/index.d.ts"
+      ],
+      "kbd": [
+        "./lib/typescript/module/kbd/index.d.ts"
+      ],
+      "item": [
+        "./lib/typescript/module/item/index.d.ts"
+      ],
+      "field": [
+        "./lib/typescript/module/field/index.d.ts"
+      ],
+      "input-group": [
+        "./lib/typescript/module/input-group/index.d.ts"
+      ],
+      "slider": [
+        "./lib/typescript/module/slider/index.d.ts"
+      ],
+      "stepper": [
+        "./lib/typescript/module/stepper/index.d.ts"
+      ],
+      "rating": [
+        "./lib/typescript/module/rating/index.d.ts"
+      ],
+      "media-controls": [
+        "./lib/typescript/module/media-controls/index.d.ts"
+      ],
+      "chat-indicators": [
+        "./lib/typescript/module/chat-indicators/index.d.ts"
+      ],
+      "call-ui": [
+        "./lib/typescript/module/call-ui/index.d.ts"
+      ],
+      "chat-people": [
+        "./lib/typescript/module/chat-people/index.d.ts"
+      ],
+      "chat-screen": [
+        "./lib/typescript/module/chat-screen/index.d.ts"
+      ],
+      "chat-composer": [
+        "./lib/typescript/module/chat-composer/index.d.ts"
+      ],
+      "message-media": [
+        "./lib/typescript/module/message-media/index.d.ts"
+      ],
+      "message-bubble": [
+        "./lib/typescript/module/message-bubble/index.d.ts"
+      ],
+      "chat-list": [
+        "./lib/typescript/module/chat-list/index.d.ts"
+      ],
+      "creator-studio": [
+        "./lib/typescript/module/creator-studio/index.d.ts"
+      ],
+      "media-card": [
+        "./lib/typescript/module/media-card/index.d.ts"
+      ],
+      "media-shelf": [
+        "./lib/typescript/module/media-shelf/index.d.ts"
+      ],
+      "queue-panel": [
+        "./lib/typescript/module/queue-panel/index.d.ts"
+      ],
+      "lyrics": [
+        "./lib/typescript/module/lyrics/index.d.ts"
+      ],
+      "music-library": [
+        "./lib/typescript/module/music-library/index.d.ts"
+      ],
+      "media-player": [
+        "./lib/typescript/module/media-player/index.d.ts"
+      ],
+      "media-header": [
+        "./lib/typescript/module/media-header/index.d.ts"
+      ],
+      "track-list": [
+        "./lib/typescript/module/track-list/index.d.ts"
+      ],
+      "stay-filters": [
+        "./lib/typescript/module/stay-filters/index.d.ts"
+      ],
+      "stay-search": [
+        "./lib/typescript/module/stay-search/index.d.ts"
+      ],
+      "home-search": [
+        "./lib/typescript/module/home-search/index.d.ts"
+      ],
+      "listing-details": [
+        "./lib/typescript/module/listing-details/index.d.ts"
+      ],
+      "property-insights": [
+        "./lib/typescript/module/property-insights/index.d.ts"
+      ],
+      "booking": [
+        "./lib/typescript/module/booking/index.d.ts"
+      ],
+      "listing-actions": [
+        "./lib/typescript/module/listing-actions/index.d.ts"
+      ],
+      "listing-card": [
+        "./lib/typescript/module/listing-card/index.d.ts"
+      ],
+      "offering-badge": [
+        "./lib/typescript/module/offering-badge/index.d.ts"
+      ],
+      "category-bar": [
+        "./lib/typescript/module/category-bar/index.d.ts"
+      ],
+      "map-marker": [
+        "./lib/typescript/module/map-marker/index.d.ts"
+      ],
+      "tenancy": [
+        "./lib/typescript/module/tenancy/index.d.ts"
+      ],
+      "eviction": [
+        "./lib/typescript/module/eviction/index.d.ts"
+      ],
+      "place-reviews": [
+        "./lib/typescript/module/place-reviews/index.d.ts"
+      ],
+      "wizard": [
+        "./lib/typescript/module/wizard/index.d.ts"
+      ],
+      "sortable-media": [
+        "./lib/typescript/module/sortable-media/index.d.ts"
+      ],
+      "listing-editor": [
+        "./lib/typescript/module/listing-editor/index.d.ts"
+      ],
+      "card": [
+        "./lib/typescript/module/card/index.d.ts"
+      ],
+      "badge": [
+        "./lib/typescript/module/badge/index.d.ts"
+      ],
+      "chip": [
+        "./lib/typescript/module/chip/index.d.ts"
+      ],
+      "tabs": [
+        "./lib/typescript/module/tabs/index.d.ts"
+      ],
+      "tabs/expo-router": [
+        "./lib/typescript/module/tabs/expo-router/index.d.ts"
+      ],
+      "checkbox": [
+        "./lib/typescript/module/checkbox/index.d.ts"
+      ],
+      "accordion": [
+        "./lib/typescript/module/accordion/index.d.ts"
+      ],
+      "settings-list": [
+        "./lib/typescript/module/settings-list/index.d.ts"
+      ],
+      "link-preview": [
+        "./lib/typescript/module/link-preview/index.d.ts"
+      ],
+      "code": [
+        "./lib/typescript/module/code/index.d.ts"
+      ],
+      "fonts": [
+        "./lib/typescript/module/fonts/index.d.ts"
+      ],
+      "scroll": [
+        "./lib/typescript/module/scroll/index.d.ts"
+      ],
+      "scroll/expo-router": [
+        "./lib/typescript/module/scroll/expo-router/index.d.ts"
+      ],
+      "content-panel": [
+        "./lib/typescript/module/content-panel/index.d.ts"
+      ],
+      "list": [
+        "./lib/typescript/module/list/index.d.ts"
+      ],
+      "rail": [
+        "./lib/typescript/module/rail/index.d.ts"
+      ],
+      "tab-bar": [
+        "./lib/typescript/module/tab-bar/index.d.ts"
+      ],
+      "tab-bar/expo-router": [
+        "./lib/typescript/module/tab-bar/expo-router/index.d.ts"
+      ],
+      "progressive-blur": [
+        "./lib/typescript/module/progressive-blur/index.d.ts"
+      ]
+    }
   }
 }