styleframe 3.3.0 → 3.4.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 +109 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,114 @@
|
|
|
1
1
|
# styleframe
|
|
2
2
|
|
|
3
|
+
## 3.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#165](https://github.com/styleframe-dev/styleframe/pull/165) [`5ef9019`](https://github.com/styleframe-dev/styleframe/commit/5ef9019fd0121cf95bd4e7373dbd55028f25b6d0) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add ButtonGroup recipe for grouping buttons with joined borders
|
|
8
|
+
- Add `useButtonGroupRecipe` with orientation (`horizontal`, `vertical`) and block (`true`, `false`) variants
|
|
9
|
+
- Use compound variant `className` with RSCSS modifiers (`-horizontal`, `-vertical`, `-block`) to emit helper classes
|
|
10
|
+
- Use `setup` callback to register nested selectors for joined-button effects (border-radius and border removal on inner children)
|
|
11
|
+
- Add ButtonGroup storybook component, grid preview, and stories
|
|
12
|
+
|
|
13
|
+
- [#162](https://github.com/styleframe-dev/styleframe/pull/162) [`990ed33`](https://github.com/styleframe-dev/styleframe/commit/990ed33078b61ddf1cd025ce358862d103e0ea84) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Card recipe with border style utility improvements
|
|
14
|
+
- Add `useCardRecipe` with size (`sm`, `md`, `lg`), variant (`elevated`, `outline`, `filled`, `ghost`), and color variants including light, dark, and neutral
|
|
15
|
+
- Add border style utility support (`solid`, `dashed`, `dotted`, `double`, `hidden`, `none`) with responsive and state modifier capabilities
|
|
16
|
+
- Normalize light/dark color variants across Badge, Button, and Callout recipes using `text-inverted` token
|
|
17
|
+
- Add Card storybook components, grid previews, and stories
|
|
18
|
+
|
|
19
|
+
- [#180](https://github.com/styleframe-dev/styleframe/pull/180) [`d2c1ed6`](https://github.com/styleframe-dev/styleframe/commit/d2c1ed65b1a268647e4789a20341d8da61fb9f74) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Chip recipe with indicator, tests, and documentation
|
|
20
|
+
- Add `useChipRecipe` wrapper recipe with relative positioning context
|
|
21
|
+
- Add `useChipIndicatorRecipe` with 9 colors, 2 variants (solid/soft), 5 sizes, 4 corner positions, and inset mode
|
|
22
|
+
- Wire `useTransformUtility` into `useUtilitiesPreset`
|
|
23
|
+
- Convert min/max width/height utilities to spacing multiplier utilities for consistency
|
|
24
|
+
- Add Chip documentation page with usage examples, API reference, and FAQ
|
|
25
|
+
|
|
26
|
+
- [#160](https://github.com/styleframe-dev/styleframe/pull/160) [`cb053e0`](https://github.com/styleframe-dev/styleframe/commit/cb053e0135fef47161537516c53e3fc0e8b238cb) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add light, dark, and neutral colors to Badge and Button recipes
|
|
27
|
+
- Add `light`, `dark`, and `neutral` color variants to `useBadgeRecipe` with compound variants for solid, outline, soft, and subtle styles
|
|
28
|
+
- Add `light`, `dark`, and `neutral` color variants to `useButtonRecipe` with compound variants for solid, outline, soft, subtle, ghost, and link styles
|
|
29
|
+
- Update storybook Badge and Button components, grid previews, and stories to document the new colors
|
|
30
|
+
|
|
31
|
+
- [#171](https://github.com/styleframe-dev/styleframe/pull/171) [`6f6a360`](https://github.com/styleframe-dev/styleframe/commit/6f6a360b838188eae8244353351e8b458792c95d) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Modal recipe with overlay, header, body, and footer parts
|
|
32
|
+
- Add `useModalRecipe` with size (`sm`, `md`, `lg`), variant (`solid`, `soft`, `subtle`), and color (`light`, `dark`, `neutral`) variants matching the Card recipe structure
|
|
33
|
+
- Add `useModalHeaderRecipe` and `useModalFooterRecipe` with separator border compound variants and setup functions for `:first-child`/`:last-child` border collapse
|
|
34
|
+
- Add `useModalBodyRecipe` with size-based padding and gap, no compound variants
|
|
35
|
+
- Add `useModalOverlayRecipe` with fixed-position full-screen backdrop (`rgba(0, 0, 0, 0.75)`) and centered flex layout
|
|
36
|
+
- Add Modal storybook components, grid previews, and stories with interactive open/close and fullscreen example
|
|
37
|
+
- Add Modal documentation page
|
|
38
|
+
|
|
39
|
+
- [#168](https://github.com/styleframe-dev/styleframe/pull/168) [`0250281`](https://github.com/styleframe-dev/styleframe/commit/02502814c4ec5fba342d7dd20a72180635caf7d8) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Nav recipe with list-style utility
|
|
40
|
+
- Add `useNavRecipe` and `useNavItemRecipe` multi-part recipes with size (xs–xl), color, and variant (pills, underline, default) support
|
|
41
|
+
- Add `useListStyleUtility` shorthand utility for the `list-style` CSS property
|
|
42
|
+
- Add Nav storybook components, grid previews, and stories
|
|
43
|
+
|
|
44
|
+
- [#176](https://github.com/styleframe-dev/styleframe/pull/176) [`cccd1cd`](https://github.com/styleframe-dev/styleframe/commit/cccd1cdab769a7fb8d3cbfb4620ad2926099f0fc) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Placeholder recipe with dashed border and CSS hatch pattern
|
|
45
|
+
- Add `usePlaceholderRecipe` as a base-only recipe (no variants) with a dashed border, hatch background pattern, and automatic dark mode support
|
|
46
|
+
- Add Placeholder documentation page with usage examples, API reference, and FAQ
|
|
47
|
+
|
|
48
|
+
- [#179](https://github.com/styleframe-dev/styleframe/pull/179) [`8eadb4b`](https://github.com/styleframe-dev/styleframe/commit/8eadb4b8e6200b962f114d8bf48578eb17e85d95) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Popover recipe with composable sub-recipes and documentation
|
|
49
|
+
- Add `usePopoverRecipe` with size (`sm`, `md`, `lg`), variant (`solid`, `soft`, `subtle`), and color (`light`, `dark`, `neutral`) variants
|
|
50
|
+
- Add `usePopoverHeaderRecipe` and `usePopoverFooterRecipe` with border collapsing via `:first-child`/`:last-child` selectors
|
|
51
|
+
- Add `usePopoverBodyRecipe` for content area styling
|
|
52
|
+
- Add `usePopoverArrowRecipe` with CSS border triangle implementation using `@popover.arrow.size` variable and `&:after` pseudo-element for border/fill separation
|
|
53
|
+
- Add Popover storybook components, grid previews, and stories
|
|
54
|
+
- Add complete documentation page covering usage, anatomy, accessibility, and API reference
|
|
55
|
+
|
|
56
|
+
- [#178](https://github.com/styleframe-dev/styleframe/pull/178) [`2bcd961`](https://github.com/styleframe-dev/styleframe/commit/2bcd961d109c1a3c647a777256b81b2ce3d50d5a) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Progress recipe with orientation, inverted, and indeterminate animation support
|
|
57
|
+
- Add `useProgressRecipe` (track) and `useProgressBarRecipe` (bar) with 9 bar colors, 3 track colors, 5 sizes, horizontal/vertical orientation, inverted fill direction, and 4 indeterminate animations (carousel, carousel-inverse, swing, elastic)
|
|
58
|
+
- Register 8 keyframes automatically (4 horizontal + 4 vertical) via setup callback
|
|
59
|
+
- Add Progress documentation page with usage examples, API reference, and FAQ
|
|
60
|
+
|
|
61
|
+
- [#175](https://github.com/styleframe-dev/styleframe/pull/175) [`b506ea5`](https://github.com/styleframe-dev/styleframe/commit/b506ea5c3c36fa24fea19a69ee3fef7035397dda) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Skeleton recipe with pulse animation and supporting utilities
|
|
62
|
+
- Add `useSkeletonRecipe` with size (`xs`, `sm`, `md`, `lg`, `xl`) and rounded (`true`, `false`) variants, pulse animation, and dark mode support
|
|
63
|
+
- Add granular animation utilities: `useAnimationNameUtility`, `useAnimationDurationUtility`, `useAnimationTimingFunctionUtility`, `useAnimationIterationCountUtility`
|
|
64
|
+
- Switch `useWidthUtility` and `useHeightUtility` to `createUseSpacingUtility` for `@N` multiplier support
|
|
65
|
+
- Add compound keyframe selector support in core engine (e.g. `"0%, 100%"`)
|
|
66
|
+
- Add Skeleton storybook component, grid previews, and stories
|
|
67
|
+
- Add Skeleton documentation page
|
|
68
|
+
|
|
69
|
+
- [#172](https://github.com/styleframe-dev/styleframe/pull/172) [`7620771`](https://github.com/styleframe-dev/styleframe/commit/7620771ede3b1e6e9a2f14cf20e845af1078635e) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Tooltip recipe with arrow sub-recipe and transform utility
|
|
70
|
+
- Add `useTooltipRecipe` with size (`sm`, `md`, `lg`), variant (`solid`, `soft`, `subtle`), and color (`light`, `dark`, `neutral`) variants
|
|
71
|
+
- Add `useTooltipArrowRecipe` with CSS border triangle implementation using `@tooltip.arrow.size` variable and `&:after` pseudo-element for border/fill separation
|
|
72
|
+
- Add `useTransformUtility` for arbitrary `transform` CSS property values
|
|
73
|
+
- Add Tooltip storybook components, grid previews, and stories including freeform rich content example
|
|
74
|
+
|
|
75
|
+
- [#163](https://github.com/styleframe-dev/styleframe/pull/163) [`1a7dc77`](https://github.com/styleframe-dev/styleframe/commit/1a7dc77600b6c9766ed69bf00338a225f5188b12) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add per-part borders with adjacency collapsing to Card recipe
|
|
76
|
+
- Add independent `borderTop` and `borderBottom` to each card part (header, body, footer) with compound variants per color×variant
|
|
77
|
+
- Add `:first-child` / `:last-child` collapse selectors to header and footer recipes to remove duplicate borders at card edges
|
|
78
|
+
- Extend `createUseRecipe` with an optional `setup` callback for registering selectors alongside recipes
|
|
79
|
+
- Add `color` and `variant` props to `CardBody` component
|
|
80
|
+
|
|
81
|
+
- [#164](https://github.com/styleframe-dev/styleframe/pull/164) [`efd99f7`](https://github.com/styleframe-dev/styleframe/commit/efd99f70a30f9a42c6e1793ed777b1565fb47a82) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add className support for compound variants in recipes
|
|
82
|
+
- Add optional `className` field to compound variants, appended to output when conditions match
|
|
83
|
+
- Make `css` optional on compound variants, allowing className-only compound variants
|
|
84
|
+
|
|
85
|
+
- [#167](https://github.com/styleframe-dev/styleframe/pull/167) [`179c90d`](https://github.com/styleframe-dev/styleframe/commit/179c90d9f73dadbbeb9159ab9fbd7287ceba1f20) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add boolean support for recipe variant props
|
|
86
|
+
- When a variant defines both `true` and `false` keys, the runtime now accepts boolean `true`/`false` values in addition to string `"true"`/`"false"`
|
|
87
|
+
- Generated `.d.ts` type declarations include `| boolean` in the type union for boolean variants
|
|
88
|
+
|
|
89
|
+
- [#158](https://github.com/styleframe-dev/styleframe/pull/158) [`90f1862`](https://github.com/styleframe-dev/styleframe/commit/90f1862e12596943fb739b7cf98e2dfc8c47ff6d) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Rename Alert recipe to Callout recipe
|
|
90
|
+
- Rename `useAlertRecipe` to `useCalloutRecipe` with updated recipe name from `alert` to `callout`
|
|
91
|
+
- Add `CalloutContent`, `CalloutTitle`, and `CalloutDescription` sub-components for better composability
|
|
92
|
+
- Move storybook grid preview components into `preview/` subdirectories for cleaner organization
|
|
93
|
+
- Add Callout documentation page
|
|
94
|
+
|
|
95
|
+
- [#166](https://github.com/styleframe-dev/styleframe/pull/166) [`ff13980`](https://github.com/styleframe-dev/styleframe/commit/ff139805c9839da9b4d4511099e7838f7e159ba7) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Rename `danger` semantic color to `error` across the design system
|
|
96
|
+
- Rename `danger` color token to `error` in default color values and border color values
|
|
97
|
+
- Update all recipes (badge, button, callout) to use `error` instead of `danger` in color variants
|
|
98
|
+
- Update all documentation, storybook stories, and playground examples
|
|
99
|
+
|
|
100
|
+
### Patch Changes
|
|
101
|
+
|
|
102
|
+
- [#181](https://github.com/styleframe-dev/styleframe/pull/181) [`e77988d`](https://github.com/styleframe-dev/styleframe/commit/e77988dda7f019d3a32f5e0cb7ba44930aee6a6d) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Remove vite-plugin-node and externalize peer deps in scanner/loader builds
|
|
103
|
+
- Remove `vite-plugin-node` which was injecting dead code (rfdc deep-clone, Buffer utilities) into dist bundles
|
|
104
|
+
- Replace with native Vite library mode and explicit `rollupOptions.external` for peer dependencies and Node.js builtins
|
|
105
|
+
- Scanner dist: 23.21 kB → 11.18 kB (52% smaller), Loader dist: 43.83 kB → 4.10 kB (91% smaller)
|
|
106
|
+
|
|
107
|
+
- Updated dependencies [[`b506ea5`](https://github.com/styleframe-dev/styleframe/commit/b506ea5c3c36fa24fea19a69ee3fef7035397dda), [`efd99f7`](https://github.com/styleframe-dev/styleframe/commit/efd99f70a30f9a42c6e1793ed777b1565fb47a82), [`e77988d`](https://github.com/styleframe-dev/styleframe/commit/e77988dda7f019d3a32f5e0cb7ba44930aee6a6d), [`179c90d`](https://github.com/styleframe-dev/styleframe/commit/179c90d9f73dadbbeb9159ab9fbd7287ceba1f20)]:
|
|
108
|
+
- @styleframe/core@3.3.0
|
|
109
|
+
- @styleframe/loader@3.0.1
|
|
110
|
+
- @styleframe/transpiler@3.2.0
|
|
111
|
+
|
|
3
112
|
## 3.3.0
|
|
4
113
|
|
|
5
114
|
### Minor Changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "styleframe",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"bin": {
|
|
5
5
|
"styleframe": "./dist/cli.cjs"
|
|
6
6
|
},
|
|
@@ -89,17 +89,17 @@
|
|
|
89
89
|
},
|
|
90
90
|
"peerDependencies": {
|
|
91
91
|
"@styleframe/plugin": "^3.2.0",
|
|
92
|
-
"@styleframe/core": "^3.
|
|
93
|
-
"@styleframe/loader": "^3.0.
|
|
94
|
-
"@styleframe/transpiler": "^3.
|
|
92
|
+
"@styleframe/core": "^3.3.0",
|
|
93
|
+
"@styleframe/loader": "^3.0.1",
|
|
94
|
+
"@styleframe/transpiler": "^3.2.0"
|
|
95
95
|
},
|
|
96
96
|
"devDependencies": {
|
|
97
97
|
"@styleframe/config-typescript": "^3.0.0",
|
|
98
98
|
"@styleframe/cli": "^3.0.0",
|
|
99
99
|
"@styleframe/plugin": "^3.2.0",
|
|
100
|
-
"@styleframe/core": "^3.
|
|
101
|
-
"@styleframe/loader": "^3.0.
|
|
102
|
-
"@styleframe/transpiler": "^3.
|
|
100
|
+
"@styleframe/core": "^3.3.0",
|
|
101
|
+
"@styleframe/loader": "^3.0.1",
|
|
102
|
+
"@styleframe/transpiler": "^3.2.0",
|
|
103
103
|
"@types/node": "^22.15.17",
|
|
104
104
|
"@vitest/coverage-v8": "^3.2.4",
|
|
105
105
|
"bumpp": "^10.1.0",
|