@tw-classed/core

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 as cx, adds additional test cases for cx & react props, bumps all packages to latest

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

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 dataAttributes

Example

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

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 dataAttributes

Example

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

1.4.4

Patch Changes

#101 (opens in a new tab) f19df61f (opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Improve performance for core lib, carries over to React

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 for deriveClassed & 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
  },
});

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
  },
});

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 for deriveClassed & makeStrict. Updated core internal typing for compatibility.

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 for class & className when calling a class producer function

Example:
```
const button = classed("bg-blue-500");
 
// LitHTML
html`<button class=${button({ class: "text-white" })}>Click me</button>`;
```

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 for class & className when calling a class producer function

Example:
```
const button = classed("bg-blue-500");
 
// LitHTML
html`<button class=${button({ class: "text-white" })}>Click me</button>`;
```

1.3.0

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) f328e321 (opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Switch to SWC powered bunchee bundler
#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"

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"

1.3.0-canary.3

Patch Changes

f328e321 (opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - Switch to SWC powered bunchee bundler

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

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