refactor: remove unnecessary className passing to tv and make naming consistent

packages/components/autocomplete/src/use-autocomplete.ts

@@ -385,9 +385,8 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
         ...variantProps,
         isClearable,
         disableAnimation,
-        className,
       }),
-    [objectToDeps(variantProps), isClearable, disableAnimation, className],
+    [objectToDeps(variantProps), isClearable, disableAnimation],
   );
 
   const getBaseProps: PropGetter = () => ({

packages/components/breadcrumbs/src/use-breadcrumbs.ts

@@ -150,9 +150,8 @@ export function useBreadcrumbs(originalProps: UseBreadcrumbsProps) {
     () =>
       breadcrumbs({
         ...variantProps,
-        className,
       }),
-    [objectToDeps(variantProps), className],
+    [objectToDeps(variantProps)],
   );
 
   const baseStyles = clsx(classNames?.base, className);

packages/components/button/src/button.tsx

@@ -11,7 +11,6 @@ const Button = forwardRef<"button", ButtonProps>((props, ref) => {
     Component,
     domRef,
     children,
-    styles,
     spinnerSize,
     spinner = <Spinner color="current" size={spinnerSize} />,
     spinnerPlacement,
@@ -25,7 +24,7 @@ const Button = forwardRef<"button", ButtonProps>((props, ref) => {
   } = useButton({...props, ref});
 
   return (
-    <Component ref={domRef} className={styles} {...getButtonProps()}>
+    <Component ref={domRef} {...getButtonProps()}>
       {startContent}
       {isLoading && spinnerPlacement === "start" && spinner}
       {isLoading && isIconOnly ? null : children}

packages/components/button/src/use-button.ts

@@ -176,6 +176,7 @@ export function useButton(props: UseButtonProps) {
         }),
         filterDOMProps(props),
       ),
+      className: styles,
     }),
     [
       isLoading,
@@ -189,6 +190,7 @@ export function useButton(props: UseButtonProps) {
       focusProps,
       hoverProps,
       otherProps,
+      styles,
     ],
   );
 

packages/components/code/src/use-code.ts

@@ -21,7 +21,7 @@ export function useCode(originalProps: UseCodeProps) {
 
   const Component = as || "code";
 
-  const classNames = useMemo(
+  const styles = useMemo(
     () =>
       code({
         ...variantProps,
@@ -32,7 +32,7 @@ export function useCode(originalProps: UseCodeProps) {
 
   const getCodeProps: PropGetter = () => {
     return {
-      className: classNames,
+      className: styles,
       ...otherProps,
     };
   };

packages/components/date-input/src/use-date-input.ts

@@ -210,9 +210,8 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
         ...variantProps,
         disableAnimation,
         labelPlacement,
-        className,
       }),
-    [objectToDeps(variantProps), disableAnimation, labelPlacement, className],
+    [objectToDeps(variantProps), disableAnimation, labelPlacement],
   );
 
   const getLabelProps: PropGetter = (props) => {

packages/components/date-input/src/use-time-input.ts

@@ -152,9 +152,8 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
         ...variantProps,
         disableAnimation,
         labelPlacement,
-        className,
       }),
-    [objectToDeps(variantProps), labelPlacement, disableAnimation, className],
+    [objectToDeps(variantProps), labelPlacement, disableAnimation],
   );
 
   const getLabelProps: PropGetter = (props) => {

packages/components/date-picker/src/use-date-range-picker.ts

@@ -278,9 +278,8 @@ export function useDateRangePicker<T extends DateValue>({
       dateInput({
         ...variantProps,
         labelPlacement,
-        className,
       }),
-    [objectToDeps(variantProps), className],
+    [objectToDeps(variantProps)],
   );
 
   const getStartDateInputProps = (props: DOMAttributes = {}) => {

packages/components/dropdown/src/use-dropdown.ts

@@ -124,7 +124,7 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
     menuTriggerRef,
   );
 
-  const classNames = useMemo(
+  const styles = useMemo(
     () =>
       dropdown({
         className,
@@ -156,7 +156,7 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
       classNames: {
         ...classNamesProp,
         ...props.classNames,
-        content: clsx(classNames, classNamesProp?.content, props.className),
+        content: clsx(styles, classNamesProp?.content, props.className),
       },
       shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
         ? popoverProps.shouldCloseOnInteractOutside
@@ -195,7 +195,6 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
     Component,
     menuRef,
     menuProps,
-    classNames,
     closeOnSelect,
     onClose: state.close,
     autoFocus: state.focusStrategy || true,
@@ -206,13 +205,10 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
   };
 }
 
-// export type UseDropdownReturn = ReturnType<typeof useDropdown>;
-
 export type UseDropdownReturn = {
   Component: string | React.ElementType;
   menuRef: React.RefObject<HTMLUListElement>;
   menuProps: any;
-  classNames: string;
   closeOnSelect: boolean;
   onClose: () => void;
   autoFocus: any;

packages/components/link/src/use-link.ts

@@ -98,7 +98,7 @@ export function useLink(originalProps: UseLinkProps) {
     otherProps.target = otherProps.target ?? "_blank";
   }
 
-  const classNames = useMemo(
+  const styles = useMemo(
     () =>
       link({
         ...variantProps,
@@ -111,13 +111,13 @@ export function useLink(originalProps: UseLinkProps) {
   const getLinkProps: PropGetter = useCallback(() => {
     return {
       ref: domRef,
-      className: classNames,
+      className: styles,
       "data-focus": dataAttr(isFocused),
       "data-disabled": dataAttr(originalProps.isDisabled),
       "data-focus-visible": dataAttr(isFocusVisible),
       ...mergeProps(focusProps, linkProps, otherProps),
     };
-  }, [classNames, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);
+  }, [styles, isFocused, isFocusVisible, focusProps, linkProps, otherProps]);
 
   return {Component, children, anchorIcon, showAnchorIcon, getLinkProps};
 }

packages/components/listbox/src/use-listbox.ts

@@ -131,7 +131,7 @@ export function useListbox<T extends object>(props: UseListboxProps<T>) {
 
   const {listBoxProps} = useAriaListbox({...props, onAction}, state, domRef);
 
-  const slots = useMemo(() => listbox({className}), [className]);
+  const slots = useMemo(() => listbox(), []);
 
   const baseStyles = clsx(classNames?.base, className);
 

packages/components/select/src/use-select.ts

@@ -381,9 +381,8 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
         isInvalid,
         labelPlacement,
         disableAnimation,
-        className,
       }),
-    [objectToDeps(variantProps), isInvalid, labelPlacement, disableAnimation, className],
+    [objectToDeps(variantProps), isInvalid, labelPlacement, disableAnimation],
   );
 
   // scroll the listbox to the selected item

packages/components/slider/src/use-slider.ts

@@ -244,9 +244,8 @@ export function useSlider(originalProps: UseSliderProps) {
         disableAnimation,
         hasSingleThumb,
         isVertical,
-        className,
       }),
-    [objectToDeps(variantProps), isVertical, disableAnimation, hasSingleThumb, hasMarks, className],
+    [objectToDeps(variantProps), isVertical, disableAnimation, hasSingleThumb, hasMarks],
   );
 
   const [startOffset, endOffset] = [

packages/components/tabs/src/use-tabs.ts

@@ -124,11 +124,10 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
     () =>
       tabs({
         ...variantProps,
-        className,
         disableAnimation,
         ...(isVertical ? {placement: "start"} : {}),
       }),
-    [objectToDeps(variantProps), className, disableAnimation, isVertical],
+    [objectToDeps(variantProps), disableAnimation, isVertical],
   );
 
   const baseStyles = clsx(classNames?.base, className);