@tw-classed/react
1.7.0
Minor Changes
-
#132 (opens in a new tab)
6fd3d61
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - AddgetVariantConfig()
utility tocore
&react
api's. This extracts the entire parsed variant config from a classed component, also supports nested variants from component composition.Usage:
const Button = classed("button", { variants: { color: { blue: "bg-blue-500", }, }, }); const { variants } = getVariantConfig(Button); variants.color.blue; // "bg-blue-500"
Patch Changes
-
#133 (opens in a new tab)
97130ec
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Ensure compatibility withexactOptionalPropertyTypes:true
in tsconfig.json -
Updated dependencies [
97130ec
(opens in a new tab),6fd3d61
(opens in a new tab)]:- @tw-classed/core@1.7.0
1.7.0-canary.0
Minor Changes
-
#132 (opens in a new tab)
6fd3d61
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - AddgetVariantConfig()
utility tocore
&react
api's. This extracts the entire parsed variant config from a classed component, also supports nested variants from component composition.Usage:
const Button = classed("button", { variants: { color: { blue: "bg-blue-500", }, }, }); const { variants } = getVariantConfig(Button); variants.color.blue; // "bg-blue-500"
Patch Changes
-
#133 (opens in a new tab)
97130ec
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Ensure compatibility withexactOptionalPropertyTypes:true
in tsconfig.json -
Updated dependencies [
97130ec
(opens in a new tab),6fd3d61
(opens in a new tab)]:- @tw-classed/core@1.7.0-canary.0
1.6.1
Patch Changes
- #127 (opens in a new tab)
50e69a7e
(opens in a new tab) Thanks @emmanuelchucks (opens in a new tab)! - add proper autocompletion for default props
1.6.0
Minor Changes
-
#125 (opens in a new tab)
e3b9d61e
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - - (Feat): Add support for defaultProps in React api Components can now have default props in the React apiconst Button = classed.button({ defaultProps: { someProp: "someValue", }, });
This change is considered unstable, for now defaultProps will not populate when using composition nor affect variants or classname generation.
- (Fix): Data attributes are now correctly generated for composition
Patch Changes
- Updated dependencies [
e3b9d61e
(opens in a new tab)]:- @tw-classed/core@1.6.0
1.5.2
Patch Changes
-
#119 (opens in a new tab)
67ec8d98
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - This release exports the default merger ascx
, adds additional test cases for cx & react props, bumps all packages to latest -
Updated dependencies [
67ec8d98
(opens in a new tab)]:- @tw-classed/core@1.5.2
1.5.1
Patch Changes
-
#114 (opens in a new tab)
52abded9
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Add support for array matching compound variants- Add support for matched variants to appear as dataAttributes
- Update dependencies
chore(core): update parser and types to support array compound variants
- Update parser to handle array compound variants
- Update types to handle array compound variants
feat(react): update types to support array compound variants
- Update types to handle array compound variants
test(core): add tests for array compound variants
- Add tests for array compound variants
test(compound.spec.tsx): add tests for array compound variants to improve test coverage
-
Updated dependencies [
52abded9
(opens in a new tab)]:- @tw-classed/core@1.5.1
1.5.0
Minor Changes
-
#105 (opens in a new tab)
233bddfd
(opens in a new tab) Thanks @Xiot (opens in a new tab)! - Adds support for matched variants to appear as dataAttributesExample
const Button = classed("button", { variants: { color: { blue: "bg-blue-100", red: "bg-red-100", }, }, defaultVariants: { color: "red", }, dataAttributes: ["color"], }); <Button color="blue" /> // Rendered html will be <button data-color="blue" /> <Button> // Rendered html will be <button data-color="red /> // From default variants
Patch Changes
-
#109 (opens in a new tab)
d46b615f
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Add documentation for Data attributes -
Updated dependencies [
233bddfd
(opens in a new tab)]:- @tw-classed/core@1.5.0
1.5.0-canary.1
Patch Changes
d46b615f
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Add documentation for Data attributes
1.5.0-canary.0
Minor Changes
-
#105 (opens in a new tab)
233bddfd
(opens in a new tab) Thanks @Xiot (opens in a new tab)! - Adds support for matched variants to appear as dataAttributesExample
const Button = classed("button", { variants: { color: { blue: "bg-blue-100", red: "bg-red-100", }, }, defaultVariants: { color: "red", }, dataAttributes: ["color"], }); <Button color="blue" /> // Rendered html will be <button data-color="blue" /> <Button> // Rendered html will be <button data-color="red /> // From default variants
Patch Changes
- Updated dependencies [
233bddfd
(opens in a new tab)]:- @tw-classed/core@1.5.0-canary.0
1.4.4
Patch Changes
- Updated dependencies [
f19df61f
(opens in a new tab)]:- @tw-classed/core@1.4.4
1.4.3
Patch Changes
- #96 (opens in a new tab)
714d2389
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fixes the merged className order from classed->component->variants to classed->variants->component
1.4.2
Patch Changes
1715d071
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Refactors displayName set in #a382966 to use .name and .displayName raw when set on parent component
1.4.1
Patch Changes
db2effb5
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Extend inherited components displayName if not classed component
1.4.0
Minor Changes
- #82 (opens in a new tab)
0f5f46fa
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Adds support forderiveClassed
&makeStrict
. Updated core internal typing for compatibility.
Patch Changes
-
#89 (opens in a new tab)
785bcaaa
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Adds support for compoundVariants to be inherit via the composition API.Example:
const Button = classed.button({ base: "bg-blue-500 text-white", variants: { size: { sm: "px-2 py-1 text-sm", md: "px-4 py-2 text-base", }, color: { red: "bg-red-500", green: "bg-green-500", }, }, compoundVariants: [ { size: "sm", color: "green" class: "super-special-class-modifyer" }, ], }); const GreenButton = classed(Button, { defaultVariants: { color: "green", // This now triggers the compoundVariant }, });
-
#89 (opens in a new tab)
fc48bf56
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Sets target to es2018 in tsconfig to allow bundling to newer syntax -
#89 (opens in a new tab)
d392ab1c
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Export Classed Proxy type due to TS error on pnpm -
#89 (opens in a new tab)
b183d8ab
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Reverse insert order of first element composition to allow overriding of defaultVariants & other variant properties when re-classing -
#89 (opens in a new tab)
81a77612
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fixes As prop usage inside a derived component's render method by implicitly requiringAs
generic.NOTE: Use only when manually setting
as
inside derive's render method. Otherwise, let the compiler infer theAs
generic.deriveClassed<Comp, Props, "div">((props, ref) => ( <BaseComp as="div" {...props} ref={ref} /> ));
-
Updated dependencies [
785bcaaa
(opens in a new tab),0f5f46fa
(opens in a new tab)]:- @tw-classed/core@1.4.0
1.4.0-canary.6
Patch Changes
fc48bf56
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Sets target to es2018 in tsconfig to allow bundling to newer syntax
1.4.0-canary.5
Patch Changes
-
785bcaaa
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Adds support for compoundVariants to be inherit via the composition API.Example:
const Button = classed.button({ base: "bg-blue-500 text-white", variants: { size: { sm: "px-2 py-1 text-sm", md: "px-4 py-2 text-base", }, color: { red: "bg-red-500", green: "bg-green-500", }, }, compoundVariants: [ { size: "sm", color: "green" class: "super-special-class-modifyer" }, ], }); const GreenButton = classed(Button, { defaultVariants: { color: "green", // This now triggers the compoundVariant }, });
-
Updated dependencies [
785bcaaa
(opens in a new tab)]:- @tw-classed/core@1.4.0-canary.5
1.4.0-canary.4
Patch Changes
b183d8ab
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Reverse insert order of first element composition to allow overriding of defaultVariants & other variant properties when re-classing
1.4.0-canary.3
Patch Changes
d392ab1c
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Export Classed Proxy type due to TS error on pnpm
1.4.0-canary.2
Patch Changes
-
81a77612
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fixes As prop usage inside a derived component's render method by implicitly requiringAs
generic.NOTE: Use only when manually setting
as
inside derive's render method. Otherwise, let the compiler infer theAs
generic.deriveClassed<Comp, Props, "div">((props, ref) => ( <BaseComp as="div" {...props} ref={ref} /> ));
1.4.0-canary.1
Minor Changes
- #82 (opens in a new tab)
0f5f46fa
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Adds support forderiveClassed
&makeStrict
. Updated core internal typing for compatibility.
Patch Changes
- Updated dependencies [
0f5f46fa
(opens in a new tab)]:- @tw-classed/core@1.4.0-canary.1
1.3.2
Patch Changes
-
#68 (opens in a new tab)
091ef6a4
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Adds support in core lib forclass
&className
when calling a class producer functionExample:
const button = classed("bg-blue-500"); // LitHTML html`<button class=${button({ class: "text-white" })}>Click me</button>`;
-
#65 (opens in a new tab)
df315431
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - This patch adds support for Typescriptinteroperability
between the@tw-classed/core
and@tw-classed/react
packages. This makes it possible to use the@tw-classed/core
in a framework agnostic design system and then use the@tw-classed/react
in a React application.// Design system import { classed } from "@tw-classed/core"; export const button = classed({ base: "bg-blue-500 text-white", variants: { size: { sm: "px-2 py-1 text-sm", md: "px-3 py-2 text-base", lg: "px-4 py-3 text-lg", }, }, }); // React application import { button } from "design-system"; import { classed } from "@tw-classed/react"; export const Button = classed.button(button); // Variants are automatically inferred
-
Updated dependencies [
091ef6a4
(opens in a new tab)]:- @tw-classed/core@1.3.2
1.3.2-canary.1
Patch Changes
-
091ef6a4
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Adds support in core lib forclass
&className
when calling a class producer functionExample:
const button = classed("bg-blue-500"); // LitHTML html`<button class=${button({ class: "text-white" })}>Click me</button>`;
-
Updated dependencies [
091ef6a4
(opens in a new tab)]:- @tw-classed/core@1.3.2-canary.1
1.3.2-canary.0
Patch Changes
-
#65 (opens in a new tab)
df315431
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - This patch adds support for Typescriptinteroperability
between the@tw-classed/core
and@tw-classed/react
packages. This makes it possible to use the@tw-classed/core
in a framework agnostic design system and then use the@tw-classed/react
in a React application.// Design system import { classed } from "@tw-classed/core"; export const button = classed({ base: "bg-blue-500 text-white", variants: { size: { sm: "px-2 py-1 text-sm", md: "px-3 py-2 text-base", lg: "px-4 py-3 text-lg", }, }, }); // React application import { button } from "design-system"; import { classed } from "@tw-classed/react"; export const Button = classed.button(button); // Variants are automatically inferred
1.3.1
Patch Changes
4ffde042
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Export ClassedConfig type
1.3.0
Minor Changes
- #52 (opens in a new tab)
47437bca
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Add createClassed API to extend the classed function with additional functionality. Currently only "merger" prop is supported
Patch Changes
-
#61 (opens in a new tab)
79be37a2
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - This release extends core to support the createClassed API, adds improvements to the documentation -
#61 (opens in a new tab)
29570c7e
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Export DerivedComponentType to handle as prop in derived components -
#61 (opens in a new tab)
e7596bb9
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fixes "This module is a CJS module" in node.js with type:"module" -
Updated dependencies [
79be37a2
(opens in a new tab),29570c7e
(opens in a new tab),f328e321
(opens in a new tab),e7596bb9
(opens in a new tab)]:- @tw-classed/core@1.3.0
1.3.0-canary.4
Patch Changes
-
e7596bb9
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fixes "This module is a CJS module" in node.js with type:"module" -
Updated dependencies [
e7596bb9
(opens in a new tab)]:- @tw-classed/core@1.3.0-canary.4
1.3.0-canary.3
Patch Changes
- Updated dependencies [
f328e321
(opens in a new tab)]:- @tw-classed/core@1.3.0-canary.3
1.3.0-canary.2
Patch Changes
-
29570c7e
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Export DerivedComponentType to handle as prop in derived components -
Updated dependencies [
29570c7e
(opens in a new tab)]:- @tw-classed/core@1.3.0-canary.2
1.3.0-canary.1
Patch Changes
-
79be37a2
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - This release extends core to support the createClassed API, adds improvements to the documentation -
Updated dependencies [
79be37a2
(opens in a new tab)]:- @tw-classed/core@1.3.0-canary.1
1.3.0-canary.0
Minor Changes
- #52 (opens in a new tab)
47437bca
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Add createClassed API to extend the classed function with additional functionality. Currently only "merger" prop is supported
1.2.5
Patch Changes
-
9d8f12f4
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Widen types of boolean variants -
Updated dependencies [
9d8f12f4
(opens in a new tab)]:- @tw-classed/core@1.2.5
1.2.4
Patch Changes
- Updated dependencies [
413c87d1
(opens in a new tab)]:- @tw-classed/core@1.2.4
1.2.3
Patch Changes
-
#39 (opens in a new tab)
55e8b2b8
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - ES2018 build spec, code refactor, readme updates -
#33 (opens in a new tab)
92617148
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fix numeric variants -
Updated dependencies [
55e8b2b8
(opens in a new tab),92617148
(opens in a new tab)]:- @tw-classed/core@1.2.3
1.2.3-canary.1
Patch Changes
-
55e8b2b8
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - ES2018 build spec, code refactor, readme updates -
Updated dependencies [
55e8b2b8
(opens in a new tab)]:- @tw-classed/core@1.2.3-canary.1
1.2.3-canary.0
Patch Changes
-
#33 (opens in a new tab)
92617148
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fix numeric variants -
Updated dependencies [
92617148
(opens in a new tab)]:- @tw-classed/core@1.2.3-canary.0
1.2.2
Patch Changes
-
#30 (opens in a new tab)
1cc8c2e6
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fix core require -
Updated dependencies [
1cc8c2e6
(opens in a new tab)]:- @tw-classed/core@1.2.2
1.2.1
Patch Changes
-
#27 (opens in a new tab)
c6d76b9e
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Fixes Reflect.has api bug -
Updated dependencies [
c6d76b9e
(opens in a new tab)]:- @tw-classed/core@1.2.1
1.2.0
Minor Changes
- #17 (opens in a new tab)
dd615ec4
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Added support for Proxy API i.eclassed.button(...args)
. Regular classed api is unchanged and will use the proxy API to call the main method
Patch Changes
-
#21 (opens in a new tab)
da54b916
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Document proxy API -
#19 (opens in a new tab)
2d24a386
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Switch core bundler to unbuild for bundleless exports -
#21 (opens in a new tab)
01c1a8b3
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Final Proxty API & base property -
Updated dependencies [
2d24a386
(opens in a new tab),01c1a8b3
(opens in a new tab)]:- @tw-classed/core@1.2.0
1.2.0-canary.3
Patch Changes
-
#21 (opens in a new tab)
01c1a8b3
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Final Proxty API & base property -
Updated dependencies [
01c1a8b3
(opens in a new tab)]:- @tw-classed/core@1.2.0-canary.3
1.2.0-canary.2
Patch Changes
-
#19 (opens in a new tab)
2d24a386
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Switch core bundler to unbuild for bundleless exports -
Updated dependencies [
2d24a386
(opens in a new tab)]:- @tw-classed/core@1.2.0-canary.2
1.2.0-canary.1
Patch Changes
da54b916
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Document proxy API
1.2.0-canary.0
Minor Changes
dd615ec4
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Added support for Proxy API i.eclassed.button(...args)
. Regular classed api is unchanged and will use the proxy API to call the main method
1.1.1
Patch Changes
- #15 (opens in a new tab)
cd2d9e28
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Removed use-client directive from ESM
1.1.0
Minor Changes
- #12 (opens in a new tab)
c6e1ae2
(opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Added full support for compoundVariants, base property in config object
Patch Changes
- Updated dependencies [
c6e1ae2
(opens in a new tab)]:- @tw-classed/core@1.1.0
1.0.0
Major Changes
- Final v1 release of all packages. Breaking from alpha: both core and react no longer export default and switched to classed.
Patch Changes
- Updated dependencies []:
- @tw-classed/core@1.0.0