diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 1308f4c..d613ac4 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,10 +1,13 @@ # @wolves-league-ui/react -## 1.1.0 - -### Minor Changes +## 1.1.1 +### `Button` + - Adds `forwardRef` + - Changes from `cursor-pointer` to `cursor-default` -- - Removes `button` variant `tertiary` +## 1.1.0 +### `Button` + - Removes `button` variant `tertiary` - Adds `button` variants `highlight` and `link` - Adds `button` sizes `sm`, `md`, `lg` and `icon` - Adds `asChild` prop with RadixUI `Slot` diff --git a/packages/react/package.json b/packages/react/package.json index dd2277c..63b640f 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@wolves-league-ui/react", - "version": "1.1.0", + "version": "1.1.1", "main": "./dist/index.js", "module": "dist/index.mjs", "types": "./dist/index.d.ts", diff --git a/packages/react/src/components/Button.tsx b/packages/react/src/components/Button.tsx index fef944b..dbf1cc3 100644 --- a/packages/react/src/components/Button.tsx +++ b/packages/react/src/components/Button.tsx @@ -1,16 +1,16 @@ import { Slot } from '@radix-ui/react-slot'; -import { ComponentPropsWithoutRef } from 'react'; +import { ComponentPropsWithoutRef, forwardRef } from 'react'; import { VariantProps, tv } from 'tailwind-variants'; const button = tv({ - base: 'inline-flex gap-2 px-4 py-2 rounded-lg transition-all ease-in-out border border-transparent font-medium transform active:scale-95 disabled:text-gray400 disabled:border-dashed disabled:border-gray400 disabled:bg-transparent disabled:cursor-not-allowed', + base: 'inline-flex gap-2 px-4 py-2 rounded-lg transition-all ease-in-out border border-transparent font-medium transform cursor-default active:scale-95 disabled:text-gray400 disabled:border-dashed disabled:border-gray400 disabled:bg-transparent disabled:cursor-not-allowed', variants: { variant: { primary: 'bg-gray900 text-gray100 hover:bg-gray600', secondary: 'dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-wl700 border-gray900 text-gray900 hover:bg-gray900 hover:text-gray100', highlight: 'bg-wl700 text-white hover:bg-wl900', - link: 'underline-offset-4 hover:underline', + link: 'underline-offset-4 cursor-pointer hover:underline', }, size: { sm: 'text-sm', @@ -29,11 +29,15 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'>, VariantProps - {children} - - ); -} +export const Button = forwardRef( + ({ children, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'button'; + return ( + + {children} + + ); + }, +); + +Button.displayName = 'Button';