styleframe 3.3.0 → 3.5.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.
Files changed (2) hide show
  1. package/CHANGELOG.md +173 -0
  2. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,178 @@
1
1
  # styleframe
2
2
 
3
+ ## 3.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#196](https://github.com/styleframe-dev/styleframe/pull/196) [`5a37154`](https://github.com/styleframe-dev/styleframe/commit/5a37154540057d115a834961b708a77cbf032783) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Dropdown recipe with item, separator, label, arrow, tests, and documentation
8
+ - Add `useDropdownRecipe` container recipe with 3 colors (light, dark, neutral), 3 visual styles (solid, soft, subtle), and 3 sizes (sm, md, lg) — uses `@z-index.dropdown` for surface stacking
9
+ - Add `useDropdownItemRecipe` for clickable menu options with hover, focus, active, and disabled states across all color × variant combinations
10
+ - Add `useDropdownSeparatorRecipe` for visual dividers between item groups (color axis only)
11
+ - Add `useDropdownLabelRecipe` for uppercase muted group headings (color and size axes)
12
+ - Add `useDropdownArrowRecipe` using the CSS border-triangle technique — points upward by default to sit above the panel, registers an `@dropdown.arrow.size` variable (default `6px`)
13
+ - Add Dropdown documentation page with usage examples, anatomy, accessibility guidance (menu/menuitem/separator roles, keyboard navigation, roving tabindex), API reference, and FAQ
14
+
15
+ - [#198](https://github.com/styleframe-dev/styleframe/pull/198) [`eabf9f4`](https://github.com/styleframe-dev/styleframe/commit/eabf9f4150cddc240065e72d38d3c01042fb140c) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add fluid typography to the default design tokens preset
16
+ - Add `useFluidClamp` to compose a `clamp()`-style fluid value between a min/max pair using a viewport-driven breakpoint reference
17
+ - Add `useFluidViewportDesignTokens` registering `fluid.breakpoint`, `fluid.min`, and `fluid.max` viewport variables that drive the clamp interpolation
18
+ - Add `useFluidFontSizeDesignTokens` registering `font-size.min/max` (with `xs`–`xl` multipliers off the type scale) and resolving `font-size.{xs..xl}` to fluid clamp values
19
+ - Wire fluid font sizing into `useDesignTokensPreset` so the default preset ships fluid type out of the box
20
+ - Add `fluidFontSize` and `fluidViewport` value helpers and documentation for the new fluid composables and the presets reference page
21
+
22
+ - [#195](https://github.com/styleframe-dev/styleframe/pull/195) [`73a4c55`](https://github.com/styleframe-dev/styleframe/commit/73a4c551a403fcda250b108fb93c9ab7394b27c2) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add HamburgerMenu recipe with toggle button, animations, tests, and documentation
23
+ - Add `useHamburgerMenuRecipe` icon-toggle button recipe with 3 colors (light, dark, neutral), 3 sizes (sm, md, lg), 7 open-state animations (close, arrow-{up,down,left,right}, minus, plus), and a boolean `active` axis
24
+ - Inner bars rendered via `.hamburger-menu-inner` + `::before`/`::after` pseudo-elements; per-size dimensions and per-animation transforms registered via `setup(s)` callback
25
+ - Add HamburgerMenu Storybook stories with all-variants and all-sizes preview grids, plus per-color, per-size, per-animation, and disabled/active stories
26
+ - Add HamburgerMenu documentation page with usage examples, accessibility guidance (`aria-expanded`, `aria-label`), API reference, and best practices
27
+
28
+ - [#189](https://github.com/styleframe-dev/styleframe/pull/189) [`689f02b`](https://github.com/styleframe-dev/styleframe/commit/689f02bd98262c4ee7b35b92ca537ac0e50af013) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Input recipe with prefix/suffix and prepend/append slots
29
+ - Add `useInputRecipe` wrapper recipe with 3 colors (light, dark, neutral), 3 variants (default, soft, ghost), 3 sizes, and `invalid`/`disabled`/`readonly` boolean state axes; the wrapper owns the visual field and inherits typography into a nested `<input class="input-field">` styled via setup callback
30
+ - Add `useInputPrefixRecipe` and `useInputSuffixRecipe` for inline addons rendered inside the field, beside the text
31
+ - Add `useInputPrependRecipe` and `useInputAppendRecipe` as transparent slot containers for external addons (Buttons, dropdowns, plain text) — content brings its own visual language
32
+ - Add `useInputGroupRecipe` as a pure layout coordinator that flattens border-radius and collapses border-width at the seams where prepend/append meet the input, using `:has()` selectors
33
+
34
+ - [`ef662ae`](https://github.com/styleframe-dev/styleframe/commit/ef662ae696acf138a14c246b4b6f7a65ebae53c1) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add Spinner recipe with circle, text, overlay, tests, and documentation
35
+ - Add `useSpinnerRecipe` container recipe with 4 colors (primary, light, dark, neutral) and 4 sizes (auto, sm, md, lg)
36
+ - Add `useSpinnerCircleRecipe` with SVG stroke-dasharray animation and keyframes
37
+ - Add `useSpinnerTextRecipe` for centered label overlay on the spinner
38
+ - Add `useSpinnerOverlayRecipe` for fixed/absolute backdrop
39
+ - Add Spinner documentation page with usage examples, API reference, and FAQ
40
+
41
+ - [#198](https://github.com/styleframe-dev/styleframe/pull/198) [`eabf9f4`](https://github.com/styleframe-dev/styleframe/commit/eabf9f4150cddc240065e72d38d3c01042fb140c) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Enable `fluidFontSize` by default in `useDesignTokensPreset`
42
+ - Calling `useDesignTokensPreset(s)` with no config now emits the fluid
43
+ font-size scale (`clamp()`-based `font-size.*`, `font-size.min/max`,
44
+ `scale.min/max`, and per-power scale variables). Previously, fluid was
45
+ opt-in via `fluidFontSize: true`.
46
+ - Pass `fluidFontSize: false` to fall back to the static `fontSize` domain.
47
+ - Custom `fontSize: { ... }` config is silently ignored when fluid is
48
+ active. Migration: add `fluidFontSize: false` alongside any custom
49
+ `fontSize` config you want to keep applying.
50
+ - Domain dependencies are now validated up front. Setting `fluidViewport:
51
+ false` or `scale: false` while leaving `fluidFontSize` enabled throws a
52
+ configuration error — both are required for the fluid scale to function.
53
+ Migration: add `fluidFontSize: false` whenever you disable `fluidViewport`
54
+ or `scale`.
55
+ - Internally, domains can now declare `enabled` predicates and a `requires`
56
+ list of config keys that must not be `false`. The preset uses this to gate
57
+ the fluid `scale` and `font-size` domains generically rather than via
58
+ ad-hoc checks inside each composable.
59
+
60
+ - [#198](https://github.com/styleframe-dev/styleframe/pull/198) [`eabf9f4`](https://github.com/styleframe-dev/styleframe/commit/eabf9f4150cddc240065e72d38d3c01042fb140c) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Accept `{ min, max }` objects in fluid range APIs
61
+
62
+ `useFluidClamp` and the per-step `values` of `useFluidFontSizeDesignTokens`
63
+ now accept ranges as either `[min, max]` tuples or `{ min, max }` objects.
64
+ The `fluidFontSize.values` config in `useDesignTokensPreset` accepts both
65
+ forms as well. Existing tuple call sites are unaffected.
66
+
67
+ ## 3.4.0
68
+
69
+ ### Minor Changes
70
+
71
+ - [#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
72
+ - Add `useButtonGroupRecipe` with orientation (`horizontal`, `vertical`) and block (`true`, `false`) variants
73
+ - Use compound variant `className` with RSCSS modifiers (`-horizontal`, `-vertical`, `-block`) to emit helper classes
74
+ - Use `setup` callback to register nested selectors for joined-button effects (border-radius and border removal on inner children)
75
+ - Add ButtonGroup storybook component, grid preview, and stories
76
+
77
+ - [#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
78
+ - Add `useCardRecipe` with size (`sm`, `md`, `lg`), variant (`elevated`, `outline`, `filled`, `ghost`), and color variants including light, dark, and neutral
79
+ - Add border style utility support (`solid`, `dashed`, `dotted`, `double`, `hidden`, `none`) with responsive and state modifier capabilities
80
+ - Normalize light/dark color variants across Badge, Button, and Callout recipes using `text-inverted` token
81
+ - Add Card storybook components, grid previews, and stories
82
+
83
+ - [#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
84
+ - Add `useChipRecipe` wrapper recipe with relative positioning context
85
+ - Add `useChipIndicatorRecipe` with 9 colors, 2 variants (solid/soft), 5 sizes, 4 corner positions, and inset mode
86
+ - Wire `useTransformUtility` into `useUtilitiesPreset`
87
+ - Convert min/max width/height utilities to spacing multiplier utilities for consistency
88
+ - Add Chip documentation page with usage examples, API reference, and FAQ
89
+
90
+ - [#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
91
+ - Add `light`, `dark`, and `neutral` color variants to `useBadgeRecipe` with compound variants for solid, outline, soft, and subtle styles
92
+ - Add `light`, `dark`, and `neutral` color variants to `useButtonRecipe` with compound variants for solid, outline, soft, subtle, ghost, and link styles
93
+ - Update storybook Badge and Button components, grid previews, and stories to document the new colors
94
+
95
+ - [#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
96
+ - Add `useModalRecipe` with size (`sm`, `md`, `lg`), variant (`solid`, `soft`, `subtle`), and color (`light`, `dark`, `neutral`) variants matching the Card recipe structure
97
+ - Add `useModalHeaderRecipe` and `useModalFooterRecipe` with separator border compound variants and setup functions for `:first-child`/`:last-child` border collapse
98
+ - Add `useModalBodyRecipe` with size-based padding and gap, no compound variants
99
+ - Add `useModalOverlayRecipe` with fixed-position full-screen backdrop (`rgba(0, 0, 0, 0.75)`) and centered flex layout
100
+ - Add Modal storybook components, grid previews, and stories with interactive open/close and fullscreen example
101
+ - Add Modal documentation page
102
+
103
+ - [#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
104
+ - Add `useNavRecipe` and `useNavItemRecipe` multi-part recipes with size (xs–xl), color, and variant (pills, underline, default) support
105
+ - Add `useListStyleUtility` shorthand utility for the `list-style` CSS property
106
+ - Add Nav storybook components, grid previews, and stories
107
+
108
+ - [#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
109
+ - Add `usePlaceholderRecipe` as a base-only recipe (no variants) with a dashed border, hatch background pattern, and automatic dark mode support
110
+ - Add Placeholder documentation page with usage examples, API reference, and FAQ
111
+
112
+ - [#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
113
+ - Add `usePopoverRecipe` with size (`sm`, `md`, `lg`), variant (`solid`, `soft`, `subtle`), and color (`light`, `dark`, `neutral`) variants
114
+ - Add `usePopoverHeaderRecipe` and `usePopoverFooterRecipe` with border collapsing via `:first-child`/`:last-child` selectors
115
+ - Add `usePopoverBodyRecipe` for content area styling
116
+ - Add `usePopoverArrowRecipe` with CSS border triangle implementation using `@popover.arrow.size` variable and `&:after` pseudo-element for border/fill separation
117
+ - Add Popover storybook components, grid previews, and stories
118
+ - Add complete documentation page covering usage, anatomy, accessibility, and API reference
119
+
120
+ - [#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
121
+ - 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)
122
+ - Register 8 keyframes automatically (4 horizontal + 4 vertical) via setup callback
123
+ - Add Progress documentation page with usage examples, API reference, and FAQ
124
+
125
+ - [#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
126
+ - Add `useSkeletonRecipe` with size (`xs`, `sm`, `md`, `lg`, `xl`) and rounded (`true`, `false`) variants, pulse animation, and dark mode support
127
+ - Add granular animation utilities: `useAnimationNameUtility`, `useAnimationDurationUtility`, `useAnimationTimingFunctionUtility`, `useAnimationIterationCountUtility`
128
+ - Switch `useWidthUtility` and `useHeightUtility` to `createUseSpacingUtility` for `@N` multiplier support
129
+ - Add compound keyframe selector support in core engine (e.g. `"0%, 100%"`)
130
+ - Add Skeleton storybook component, grid previews, and stories
131
+ - Add Skeleton documentation page
132
+
133
+ - [#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
134
+ - Add `useTooltipRecipe` with size (`sm`, `md`, `lg`), variant (`solid`, `soft`, `subtle`), and color (`light`, `dark`, `neutral`) variants
135
+ - Add `useTooltipArrowRecipe` with CSS border triangle implementation using `@tooltip.arrow.size` variable and `&:after` pseudo-element for border/fill separation
136
+ - Add `useTransformUtility` for arbitrary `transform` CSS property values
137
+ - Add Tooltip storybook components, grid previews, and stories including freeform rich content example
138
+
139
+ - [#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
140
+ - Add independent `borderTop` and `borderBottom` to each card part (header, body, footer) with compound variants per color×variant
141
+ - Add `:first-child` / `:last-child` collapse selectors to header and footer recipes to remove duplicate borders at card edges
142
+ - Extend `createUseRecipe` with an optional `setup` callback for registering selectors alongside recipes
143
+ - Add `color` and `variant` props to `CardBody` component
144
+
145
+ - [#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
146
+ - Add optional `className` field to compound variants, appended to output when conditions match
147
+ - Make `css` optional on compound variants, allowing className-only compound variants
148
+
149
+ - [#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
150
+ - When a variant defines both `true` and `false` keys, the runtime now accepts boolean `true`/`false` values in addition to string `"true"`/`"false"`
151
+ - Generated `.d.ts` type declarations include `| boolean` in the type union for boolean variants
152
+
153
+ - [#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
154
+ - Rename `useAlertRecipe` to `useCalloutRecipe` with updated recipe name from `alert` to `callout`
155
+ - Add `CalloutContent`, `CalloutTitle`, and `CalloutDescription` sub-components for better composability
156
+ - Move storybook grid preview components into `preview/` subdirectories for cleaner organization
157
+ - Add Callout documentation page
158
+
159
+ - [#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
160
+ - Rename `danger` color token to `error` in default color values and border color values
161
+ - Update all recipes (badge, button, callout) to use `error` instead of `danger` in color variants
162
+ - Update all documentation, storybook stories, and playground examples
163
+
164
+ ### Patch Changes
165
+
166
+ - [#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
167
+ - Remove `vite-plugin-node` which was injecting dead code (rfdc deep-clone, Buffer utilities) into dist bundles
168
+ - Replace with native Vite library mode and explicit `rollupOptions.external` for peer dependencies and Node.js builtins
169
+ - Scanner dist: 23.21 kB → 11.18 kB (52% smaller), Loader dist: 43.83 kB → 4.10 kB (91% smaller)
170
+
171
+ - 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)]:
172
+ - @styleframe/core@3.3.0
173
+ - @styleframe/loader@3.0.1
174
+ - @styleframe/transpiler@3.2.0
175
+
3
176
  ## 3.3.0
4
177
 
5
178
  ### Minor Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "styleframe",
3
- "version": "3.3.0",
3
+ "version": "3.5.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.2.0",
93
- "@styleframe/loader": "^3.0.0",
94
- "@styleframe/transpiler": "^3.1.0"
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.2.0",
101
- "@styleframe/loader": "^3.0.0",
102
- "@styleframe/transpiler": "^3.1.0",
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",