@snacky/ui 0.10.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +61 -0
- package/README.md +4 -3
- package/dist/index.cjs +138 -111
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +22 -2
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +29 -5
- package/dist/index.d.ts +29 -5
- package/dist/index.js +103 -77
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,67 @@ How `@snacky/ui` got to its current state. The README documents what the
|
|
|
4
4
|
package *is*; this documents how it got there, including the mistakes, so the
|
|
5
5
|
verification claims in the README can be taken at face value.
|
|
6
6
|
|
|
7
|
+
## The solid address icon (0.12.0)
|
|
8
|
+
|
|
9
|
+
`SnackyIcons.solid.address` is new: the filled map marker, added to Figma's
|
|
10
|
+
`Icon-solid` set as `general/pin` (UIcons `fi-sr-marker`), 16x16, with its fill
|
|
11
|
+
bound to `icon/icon-brand`. The solid set is 13 icons now.
|
|
12
|
+
|
|
13
|
+
It ships as `address` rather than `pin` because a solid icon here takes the name
|
|
14
|
+
of its outline twin, and this is the same marker shape as the existing
|
|
15
|
+
`SnackyIcons.outline.address`. That is the rule the rest of the set already
|
|
16
|
+
follows (Figma's `riwayat` is `history`, `Fav` is `heart`), and it means an
|
|
17
|
+
active/inactive pair is always `outline.x` and `solid.x` with no lookup table.
|
|
18
|
+
It is 16px where its outline twin is 24; `heart` has the same kind of mismatch
|
|
19
|
+
(20 solid, 24 outline), and each icon still defaults to its own authored size.
|
|
20
|
+
|
|
21
|
+
compose-ui ships the same icon as `SnackyIcons.Solid.Address` in
|
|
22
|
+
`compose-v2.2.0`, plus one helper it was missing:
|
|
23
|
+
`SnackyTypographyToken.toTextStyle(color, fontFamily)`. compose-ui's type tokens
|
|
24
|
+
are raw values rather than `TextStyle`s (the package ships no font), and nothing
|
|
25
|
+
turned one into the other, so every component built the style by hand and 58 of
|
|
26
|
+
the docs site's Kotlin samples could not compile: 24 called a `toTextStyle()`
|
|
27
|
+
that did not exist, and the rest used flat names like
|
|
28
|
+
`SnackyTypography.smallRegular` that never did either. Those samples now use
|
|
29
|
+
`SnackyTypography.Small.regular.toTextStyle()`. The React samples had the same
|
|
30
|
+
flat-name problem (`typography.smallRegular`, 43 places) against an export that
|
|
31
|
+
is nested (`typography.small.regular`), and are fixed the same way. Additive on
|
|
32
|
+
both sides.
|
|
33
|
+
|
|
34
|
+
## PageIndicator, and a semantic role for indicator dots (0.11.0)
|
|
35
|
+
|
|
36
|
+
`PageIndicator` is the dot row under a carousel: 8x8 dots, a 28x8 pill for the
|
|
37
|
+
current page, `gap/cell` apart, so the row stays 8 tall whichever page is
|
|
38
|
+
showing. It reports position rather than changing it, so the dots are
|
|
39
|
+
`aria-hidden` with no click target and the row carries a single label ("Page 2
|
|
40
|
+
of 3" by default). Make the carousel itself operable and let this follow it.
|
|
41
|
+
|
|
42
|
+
The component is small; the reason it exists is the two tokens under it.
|
|
43
|
+
`--bg-indicator-active` and `--bg-indicator-inactive` are new semantic roles,
|
|
44
|
+
referencing `--color-amber-500` and `--color-neutral-200`. Adding a role rather
|
|
45
|
+
than reusing one needs a reason, and there were two. Figma drew the dots as raw
|
|
46
|
+
hex, one of them `#dadada`, a grey in no ramp at all. And `Stepper` was already
|
|
47
|
+
borrowing: its done dot painted `--icon-brand`, an icon token used as a shape
|
|
48
|
+
fill, and its pending dot `--bg-action-disabled`, which says a step the order
|
|
49
|
+
has not reached yet is a control you cannot use. Two components needing
|
|
50
|
+
"reached" versus "not yet", both saying something false, is what a missing role
|
|
51
|
+
looks like. Stepper now uses the pair, and its rendered colours are unchanged
|
|
52
|
+
(`#f8b732` and `#cccccc`, exactly as before).
|
|
53
|
+
|
|
54
|
+
Worth knowing if you theme the system: `--bg-indicator-inactive` and
|
|
55
|
+
`--bg-action-disabled` resolve to the same grey today but are free to diverge,
|
|
56
|
+
which is the point. Override the indicator one to restyle carousels and
|
|
57
|
+
progress dots without touching disabled controls.
|
|
58
|
+
|
|
59
|
+
compose-ui ships the same as `compose-v2.1.0`: `SnackyPageIndicator`, the
|
|
60
|
+
`SnackyColor.bgIndicatorActive`/`bgIndicatorInactive` pair, and the same Stepper
|
|
61
|
+
change. Both are additive, so neither release breaks anything.
|
|
62
|
+
|
|
63
|
+
Two README corrections came along: compose-ui still claimed
|
|
64
|
+
`SnackyPointBalanceBanner` paints the `primary-500` primitive, which stopped
|
|
65
|
+
being true when its binding was fixed against Figma in 0.10.0, and both READMEs
|
|
66
|
+
still counted 11 solid icons rather than 12.
|
|
67
|
+
|
|
7
68
|
## Brand ramp renamed to amber, components re-checked against Figma (0.10.0)
|
|
8
69
|
|
|
9
70
|
**Breaking: the brand primitive ramp is now `amber`.** It was the only
|
package/README.md
CHANGED
|
@@ -121,19 +121,20 @@ placeholder artwork rather than a real icon prop. Apply your own
|
|
|
121
121
|
|
|
122
122
|
## What's here
|
|
123
123
|
|
|
124
|
-
All
|
|
124
|
+
All 25 documented components, matching the real Figma-sourced spec values
|
|
125
125
|
(padding, colors, radius, states - all sourced directly from the design
|
|
126
126
|
tokens, not eyeballed):
|
|
127
127
|
|
|
128
128
|
Button, IconButton/UploadButton, Input family (TextField, SearchField,
|
|
129
129
|
OtpField, CopyField, ChatInput, AddressResult), Chips (ProductChip/FilterChip),
|
|
130
|
-
RadioOption, Checkbox, Toggle, NavBar, TabRow, Header,
|
|
130
|
+
RadioOption, Checkbox, Toggle, NavBar, TabRow, Header, PageIndicator, Banner
|
|
131
|
+
family, Badge family,
|
|
131
132
|
Callout, List (OrderListItem/NotificationListItem), Accordion, BottomSheet
|
|
132
133
|
(the shared Modal shell), Section (the shared content-block shell), Avatar,
|
|
133
134
|
Illustration, ProductImage, ProductCard.
|
|
134
135
|
|
|
135
136
|
Plus the icon set, as `SnackyIcons.outline.*` and `SnackyIcons.solid.*` (42
|
|
136
|
-
Outline,
|
|
137
|
+
Outline, 13 Solid). Two things to know: they are **filled** shapes rather than
|
|
137
138
|
stroked paths, so there is no `strokeWidth` to set, and the set is **not
|
|
138
139
|
uniform** - each icon is authored at 16, 20 or 24px and defaults to its own
|
|
139
140
|
natural size, so pass `width`/`height` if you need them to match.
|