React
Changelog

@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)! - 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 (opens in a new tab) 6fd3d61 (opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - 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.6.1

Patch Changes

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 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

1.5.2

Patch Changes

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 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 (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

Patch Changes

1.4.4

Patch Changes

1.4.3

Patch Changes

1.4.2

Patch Changes

1.4.1

Patch Changes

1.4.0

Minor Changes

Patch Changes

1.4.0-canary.6

Patch Changes

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

1.4.0-canary.3

Patch Changes

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 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

Patch Changes

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>`;
  • #65 (opens in a new tab) df315431 (opens in a new tab) Thanks @sannajammeh (opens in a new tab)! - 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 (opens in a new tab)]:

    • @tw-classed/core@1.3.2

1.3.2-canary.1

Patch Changes

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 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

Patch Changes

1.3.0-canary.4

Patch Changes

1.3.0-canary.3

Patch Changes

1.3.0-canary.2

Patch Changes

1.3.0-canary.1

Patch Changes

1.3.0-canary.0

Minor Changes

1.2.5

Patch Changes

1.2.4

Patch Changes

1.2.3

Patch Changes

1.2.3-canary.1

Patch Changes

1.2.3-canary.0

Patch Changes

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

Patch Changes

1.2.0-canary.3

Patch Changes

1.2.0-canary.2

Patch Changes

1.2.0-canary.1

Patch Changes

1.2.0-canary.0

Minor Changes

1.1.1

Patch Changes

1.1.0

Minor Changes

Patch Changes

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