feat: expose a class name utility that can be consumed

packages/react/package.json

@@ -31,10 +31,11 @@
   "dependencies": {
     "@giantnodes/theme": "workspace:*",
     "@react-aria/utils": "^3.24.1",
-    "clsx": "^2.1.1",
+    "class-variance-authority": "^0.7.0",
     "next-themes": "^0.3.0",
     "react-aria": "^3.33.1",
     "react-aria-components": "^1.2.1",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss-react-aria-components": "^1.1.3"
   },
   "devDependencies": {

packages/react/src/components/form/FormFeedback.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import React from 'react'
-import clsx from 'clsx'
 
 import type * as Polymophic from '~/utilities/polymorphic'
 import { useFormGroupContext } from '~/components/form/use-form-group.hook'
+import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'span'
 
@@ -37,7 +37,7 @@ const Component: ComponentType = React.forwardRef(
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({
         className: context?.slots.feedback({
-          class: clsx(className, { hidden: type !== context.feedback }),
+          class: cn(className, { hidden: type !== context.feedback }),
           status: context.status,
         }),
         ...rest,

packages/react/src/components/input/Input.tsx

@@ -3,12 +3,12 @@
 import type { InputVariantProps } from '@giantnodes/theme'
 import type { InputProps } from 'react-aria-components'
 import React from 'react'
-import clsx from 'clsx'
 import { Input } from 'react-aria-components'
 
 import type * as Polymophic from '~/utilities/polymorphic'
 import { useFormGroupContext } from '~/components/form/use-form-group.hook'
 import { useInput, useInputContext } from '~/components/input/use-input.hook'
+import { cn } from '~/utilities'
 
 const __ELEMENT_TYPE__ = 'input'
 
@@ -47,7 +47,7 @@ const Component: ComponentType = React.forwardRef(
         name: group?.name,
         onChange: group?.onChange,
         onBlur: group?.onBlur,
-        className: slots.input({ className: clsx(className) }),
+        className: slots.input({ className: cn(className) }),
         ...group?.fieldProps,
         ...rest,
       }),

packages/react/src/utilities/class-name.ts

@@ -0,0 +1,4 @@
+import { cx } from 'class-variance-authority'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: Parameters<typeof cx>) => twMerge(cx(inputs))

packages/react/src/utilities/index.ts

@@ -1 +1,2 @@
+export * from '~/utilities/class-name'
 export * from '~/utilities/types'