Release v1.0.1#19
Merged
Merged
Conversation
RN's lineHeight is absolute DIPs with no unitless ratio form, so a web-style multiplier like 1.2 set a ~1px line box that clipped glyphs to nothing — Heading and Paragraph rendered invisible text. Resolve a sub-cutoff lineHeight as a ratio against the resolved fontSize in the native Text resolver, so any consumer using web habits renders correctly. Absolute values pass through unchanged. Fixes #17
Add a cross-platform useReducedMotion hook — matchMedia on web, AccessibilityInfo on native — and gate headless motion on it: the exit transition skips its exit phase and unmounts synchronously, and the native Toast fade-in is skipped. The hook is exported so consumers supplying their own animation CSS can read the same signal. Fixes #12
The core schema declares borderWidths and letterSpacings scales and several style props resolve against them, but the default light/dark themes shipped neither — so a $-ref like borderWidth="$borderWidths.thin" had nothing to resolve to on the default token set. Add both scales to the shared primitive layer and wire them into the default themes. Values are plain numbers so they resolve correctly on web and React Native alike. Fixes #13
Ship writing-direction support across both renderers. - core: `px`/`mx` now map to the logical `paddingInline`/`marginInline` instead of physical left/right, so they adapt to writing direction. Add logical props `ps`/`pe`/`ms`/`me`, `start`/`end` insets, and the long forms (`paddingInline*`, `marginInline*`, `insetInline*`). `pl`/`pr`/`ml`/`mr`/`left`/`right` stay physical as escape hatches. - Add a `<Direction>` provider + `useDirection()` hook on both renderers. Web renders a `dir` boundary (`display: contents`) and lets the browser flip logical CSS and `row` layouts. Native is context-only — `Box`/`Text` inject the Yoga `direction` style so logical props and `row` flip; with no provider it follows `I18nManager.isRTL`. Directional primitives need no change: flex `row` is already writing-direction-relative on both CSS and Yoga. Fixes #11 Fixes #16
Importing one @usemotif/icons glyph dragged in all of @usemotif/core plus the styled primitives — ~6.2 KB gzip for a single icon — because the glyphs imported Icon/Svg through the @usemotif/react barrel. Add a dedicated @usemotif/react/svg entry that exposes only Icon, Svg, and SVG_PRIMITIVES (which import zero engine code), and repoint the glyph generator and the hand-written extras at it. Regenerated all 1932 glyphs. A single-icon import is now ~556 B gzip; the tree-shaking budget drops from 7000 to 1500. The entry source is svg-entry.ts (not svg.ts) to avoid colliding with Svg.tsx on a case-insensitive filesystem; tsup's object-form entry maps it to dist/svg.js. Fixes #10
The Next.js guide never mentioned `transpilePackages`, yet the official example app sets it. Without it, developers following the guide hit `'use client'` / RSC build errors that the example silently avoids — notably in workspace/monorepo installs. Add it to the canonical `next.config.ts` block and a section explaining which packages to list and when it is required. Fixes #15
The package.json description claimed "SWC plugin wrapper", but the package contains no SWC plugin — it is a universal unplugin shim that runs the @usemotif/compiler-babel transform through @babel/core. Describe what the package actually is. The package is not renamed: it is published at 1.0.0 and referenced across the docs and the example app, so a rename is a breaking change out of proportion to this fix. The source JSDoc, README, and bundler docs already describe it accurately as a universal unplugin. Fixes #14
The prior wording still said "pairs with SWC toolchains", which keeps implying an SWC association the package does not have — it runs a Babel transform and is bundler-agnostic. Describe it by the bundlers it actually supports.
- changelog: add the v1.0.1 entry (#10–#17). - style-props reference: document the logical ps/pe/ms/me and start/end shorthands; note logical vs physical insets. - tokens reference: add the borderWidths and letterSpacings scales. - icons reference: document the @usemotif/react/svg tree-shakeable entry. - new reference pages: Direction / useDirection, and useReducedMotion. - animation recipe: cross-link useReducedMotion for headless motion.
The `@usemotif/headless — Tooltip only` budget was 11000, set on the assumption that Tooltip ≈ Dialog. It never was: an esbuild metafile diff confirms Tooltip pulls the exact same module set as Dialog (no Tooltip-only package), but is a larger component — ~11.2 KB gzip vs Dialog's ~10.6 KB. The budget had zero headroom and failed CI. Rebaseline to 12000 (~850 B headroom). No bloat and no regression — verified pre-existing and independent of the v1.0.1 changes. Closes #18
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Patch release bundling eight fixes from the open-issue triage (#10–#17). All 14 linked
@usemotif/*packages bump1.0.0→1.0.1.Each fix was developed on its own
fix/issue-*branch and merged intorelease/v1.0.1via--no-ff, so the history keeps a clear per-issue boundary.Fixes
<Heading>/<Paragraph>rendered invisible text — unitlesslineHeightis now resolved againstfontSizeuseReducedMotion()hook + reduced-motion handling in headless componentsborderWidthsandletterSpacingstoken scales<Direction>provider +useDirection()hook on both rendererspx/mxare now logical (paddingInline/marginInline); newps/pe/ms/me/start/endlogical props@usemotif/react/svgentry — a single-icon import drops ~6.2 KB → ~0.6 KB gziptranspilePackages@usemotif/compiler-swcpackage descriptionRelease chores
1.0.1with per-packageCHANGELOG.mdentries (done by hand —@changesets/climajors linked-group minors).Direction/useDirectionanduseReducedMotionreference pages, and updates to the style-props, tokens, and icons references.Test plan
verifypasses (typecheck, lint, format, build, test, size, treeshake)yarn test— full suite green (verified locally: 23/23 tasks)vorge build(verified locally: 170 pages)<Direction value="rtl">flips logical props on web and nativeKnown follow-up
@usemotif/headlessTooltip is ~150 B over its tree-shaking budget. Pre-existing, independent of this release; filed separately.