TW-Classed

Changelog

Release history for TW-Classed React

@tw-classed/react

1.8.1

Patch Changes

1.8.0

Minor Changes

1.7.0

Minor Changes

  • #132 6fd3d61 Thanks @sannajammeh! - Add getVariantConfig() utility to core & 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

1.7.0-canary.0

Minor Changes

  • #132 6fd3d61 Thanks @sannajammeh! - Add getVariantConfig() utility to core & 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 97130ec Thanks @sannajammeh! - Ensure compatibility with exactOptionalPropertyTypes:true in tsconfig.json

  • Updated dependencies [97130ec, 6fd3d61]:

    • @tw-classed/core@1.7.0-canary.0

1.6.1

Patch Changes

1.6.0

Minor Changes

  • #125 e3b9d61e Thanks @sannajammeh! - - (Feat): Add support for defaultProps in React api Components can now have default props in the React api

    const 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]:
    • @tw-classed/core@1.6.0

1.5.2

Patch Changes

  • #119 67ec8d98 Thanks @sannajammeh! - This release exports the default merger as cx, adds additional test cases for cx & react props, bumps all packages to latest

  • Updated dependencies [67ec8d98]:

    • @tw-classed/core@1.5.2

1.5.1

Patch Changes

  • #114 52abded9 Thanks @sannajammeh! - 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]:

    • @tw-classed/core@1.5.1

1.5.0

Minor Changes

  • #105 233bddfd Thanks @Xiot! - 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

Patch Changes

1.5.0-canary.1

Patch Changes

1.5.0-canary.0

Minor Changes

  • #105 233bddfd Thanks @Xiot! - 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

Patch Changes

  • Updated dependencies [233bddfd]:
    • @tw-classed/core@1.5.0-canary.0

1.4.4

Patch Changes

  • Updated dependencies [f19df61f]:
    • @tw-classed/core@1.4.4

1.4.3

Patch Changes

  • #96 714d2389 Thanks @sannajammeh! - Fixes the merged className order from classed->component->variants to classed->variants->component

1.4.2

Patch Changes

  • 1715d071 Thanks @sannajammeh! - Refactors displayName set in #a382966 to use .name and .displayName raw when set on parent component

1.4.1

Patch Changes

1.4.0

Minor Changes

  • #82 0f5f46fa Thanks @sannajammeh! - Adds support for deriveClassed & makeStrict. Updated core internal typing for compatibility.

Patch Changes

  • #89 785bcaaa Thanks @sannajammeh! - 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 fc48bf56 Thanks @sannajammeh! - Sets target to es2018 in tsconfig to allow bundling to newer syntax

  • #89 d392ab1c Thanks @sannajammeh! - Export Classed Proxy type due to TS error on pnpm

  • #89 b183d8ab Thanks @sannajammeh! - Reverse insert order of first element composition to allow overriding of defaultVariants & other variant properties when re-classing

  • #89 81a77612 Thanks @sannajammeh! - Fixes As prop usage inside a derived component's render method by implicitly requiring As generic.

    NOTE: Use only when manually setting as inside derive's render method. Otherwise, let the compiler infer the As generic.

    deriveClassed<Comp, Props, "div">((props, ref) => (
  <BaseComp as="div" {...props} ref={ref} />
));

  • Updated dependencies [785bcaaa, 0f5f46fa]:

    • @tw-classed/core@1.4.0

1.4.0-canary.6

Patch Changes

  • fc48bf56 Thanks @sannajammeh! - Sets target to es2018 in tsconfig to allow bundling to newer syntax

1.4.0-canary.5

Patch Changes

  • 785bcaaa Thanks @sannajammeh! - 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]:

    • @tw-classed/core@1.4.0-canary.5

1.4.0-canary.4

Patch Changes

  • b183d8ab Thanks @sannajammeh! - 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

1.4.0-canary.2

Patch Changes

  • 81a77612 Thanks @sannajammeh! - Fixes As prop usage inside a derived component's render method by implicitly requiring As generic.

    NOTE: Use only when manually setting as inside derive's render method. Otherwise, let the compiler infer the As generic.

    deriveClassed<Comp, Props, "div">((props, ref) => (
  <BaseComp as="div" {...props} ref={ref} />
));

1.4.0-canary.1

Minor Changes

  • #82 0f5f46fa Thanks @sannajammeh! - Adds support for deriveClassed & makeStrict. Updated core internal typing for compatibility.

Patch Changes

  • Updated dependencies [0f5f46fa]:
    • @tw-classed/core@1.4.0-canary.1

1.3.2

Patch Changes

  • #68 091ef6a4 Thanks @sannajammeh! - 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>`;

  • #65 df315431 Thanks @sannajammeh! - This patch adds support for Typescript interoperability 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]:

    • @tw-classed/core@1.3.2

1.3.2-canary.1

Patch Changes

  • 091ef6a4 Thanks @sannajammeh! - 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>`;

  • Updated dependencies [091ef6a4]:

    • @tw-classed/core@1.3.2-canary.1

1.3.2-canary.0

Patch Changes

  • #65 df315431 Thanks @sannajammeh! - This patch adds support for Typescript interoperability 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

1.3.0

Minor Changes

  • #52 47437bca Thanks @sannajammeh! - Add createClassed API to extend the classed function with additional functionality. Currently only "merger" prop is supported

Patch Changes

1.3.0-canary.4

Patch Changes

  • e7596bb9 Thanks @sannajammeh! - Fixes "This module is a CJS module" in node.js with type:"module"

  • Updated dependencies [e7596bb9]:

    • @tw-classed/core@1.3.0-canary.4

1.3.0-canary.3

Patch Changes

  • Updated dependencies [f328e321]:
    • @tw-classed/core@1.3.0-canary.3

1.3.0-canary.2

Patch Changes

  • 29570c7e Thanks @sannajammeh! - Export DerivedComponentType to handle as prop in derived components

  • Updated dependencies [29570c7e]:

    • @tw-classed/core@1.3.0-canary.2

1.3.0-canary.1

Patch Changes

  • 79be37a2 Thanks @sannajammeh! - This release extends core to support the createClassed API, adds improvements to the documentation

  • Updated dependencies [79be37a2]:

    • @tw-classed/core@1.3.0-canary.1

1.3.0-canary.0

Minor Changes

  • #52 47437bca Thanks @sannajammeh! - Add createClassed API to extend the classed function with additional functionality. Currently only "merger" prop is supported

1.2.5

Patch Changes

1.2.4

Patch Changes

  • Updated dependencies [413c87d1]:
    • @tw-classed/core@1.2.4

1.2.3

Patch Changes

1.2.3-canary.1

Patch Changes

  • 55e8b2b8 Thanks @sannajammeh! - ES2018 build spec, code refactor, readme updates

  • Updated dependencies [55e8b2b8]:

    • @tw-classed/core@1.2.3-canary.1

1.2.3-canary.0

Patch Changes

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

  • #17 dd615ec4 Thanks @sannajammeh! - Added support for Proxy API i.e classed.button(...args). Regular classed api is unchanged and will use the proxy API to call the main method

Patch Changes

1.2.0-canary.3

Patch Changes

1.2.0-canary.2

Patch Changes

  • #19 2d24a386 Thanks @sannajammeh! - Switch core bundler to unbuild for bundleless exports

  • Updated dependencies [2d24a386]:

    • @tw-classed/core@1.2.0-canary.2

1.2.0-canary.1

Patch Changes

1.2.0-canary.0

Minor Changes

  • dd615ec4 Thanks @sannajammeh! - Added support for Proxy API i.e classed.button(...args). Regular classed api is unchanged and will use the proxy API to call the main method

1.1.1

Patch Changes

1.1.0

Minor Changes

Patch Changes

  • Updated dependencies [c6e1ae2]:
    • @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

On this page

@tw-classed/react1.8.1Patch Changes1.8.0Minor Changes1.7.0Minor ChangesPatch Changes1.7.0-canary.0Minor ChangesPatch Changes1.6.1Patch Changes1.6.0Minor ChangesPatch Changes1.5.2Patch Changes1.5.1Patch Changes1.5.0Minor ChangesExamplePatch Changes1.5.0-canary.1Patch Changes1.5.0-canary.0Minor ChangesExamplePatch Changes1.4.4Patch Changes1.4.3Patch Changes1.4.2Patch Changes1.4.1Patch Changes1.4.0Minor ChangesPatch Changes1.4.0-canary.6Patch Changes1.4.0-canary.5Patch Changes1.4.0-canary.4Patch Changes1.4.0-canary.3Patch Changes1.4.0-canary.2Patch Changes1.4.0-canary.1Minor ChangesPatch Changes1.3.2Patch Changes1.3.2-canary.1Patch Changes1.3.2-canary.0Patch Changes1.3.1Patch Changes1.3.0Minor ChangesPatch Changes1.3.0-canary.4Patch Changes1.3.0-canary.3Patch Changes1.3.0-canary.2Patch Changes1.3.0-canary.1Patch Changes1.3.0-canary.0Minor Changes1.2.5Patch Changes1.2.4Patch Changes1.2.3Patch Changes1.2.3-canary.1Patch Changes1.2.3-canary.0Patch Changes1.2.2Patch Changes1.2.1Patch Changes1.2.0Minor ChangesPatch Changes1.2.0-canary.3Patch Changes1.2.0-canary.2Patch Changes1.2.0-canary.1Patch Changes1.2.0-canary.0Minor Changes1.1.1Patch Changes1.1.0Minor ChangesPatch Changes1.0.0Major ChangesPatch Changes