refactor(button): isIconButton changed to isIconOnly, ghost button group fixed

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

@@ -26,14 +26,14 @@ export type ContextType = {
   isDisabled?: ButtonProps["isDisabled"];
   disableAnimation?: ButtonProps["disableAnimation"];
   disableRipple?: ButtonProps["disableRipple"];
-  isIconButton?: ButtonProps["isIconButton"];
+  isIconOnly?: ButtonProps["isIconOnly"];
   fullWidth?: boolean;
 };
 
 export type UseButtonGroupProps = Props &
   Pick<
     ButtonProps,
-    "size" | "color" | "radius" | "variant" | "isIconButton" | "disableAnimation" | "disableRipple"
+    "size" | "color" | "radius" | "variant" | "isIconOnly" | "disableAnimation" | "disableRipple"
   >;
 
 export function useButtonGroup(originalProps: UseButtonGroupProps) {
@@ -50,7 +50,7 @@ export function useButtonGroup(originalProps: UseButtonGroupProps) {
     isDisabled = false,
     disableAnimation = false,
     disableRipple = false,
-    isIconButton = false,
+    isIconOnly = false,
     className,
     ...otherProps
   } = props;
@@ -74,7 +74,7 @@ export function useButtonGroup(originalProps: UseButtonGroupProps) {
       color,
       variant,
       radius,
-      isIconButton,
+      isIconOnly,
       isDisabled,
       disableAnimation,
       disableRipple,
@@ -86,7 +86,7 @@ export function useButtonGroup(originalProps: UseButtonGroupProps) {
       variant,
       radius,
       isDisabled,
-      isIconButton,
+      isIconOnly,
       disableAnimation,
       disableRipple,
       originalProps?.fullWidth,

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

@@ -63,7 +63,7 @@ export function useButton(props: UseButtonProps) {
     radius = groupContext?.radius ?? "lg",
     disableRipple = groupContext?.disableRipple ?? false,
     isDisabled = groupContext?.isDisabled ?? false,
-    isIconButton = groupContext?.isIconButton ?? false,
+    isIconOnly = groupContext?.isIconOnly ?? false,
     onPress,
     onClick,
     ...otherProps
@@ -89,7 +89,7 @@ export function useButton(props: UseButtonProps) {
         isInGroup,
         isFocusVisible,
         disableAnimation,
-        isIconButton,
+        isIconOnly,
         className,
       }),
     [
@@ -101,7 +101,7 @@ export function useButton(props: UseButtonProps) {
       isDisabled,
       isInGroup,
       isFocusVisible,
-      isIconButton,
+      isIconOnly,
       disableAnimation,
       className,
     ],

packages/components/button/stories/button.stories.tsx

@@ -105,7 +105,7 @@ WithIcons.args = {
 export const IconButton = Template.bind({});
 IconButton.args = {
   ...defaultProps,
-  isIconButton: true,
+  isIconOnly: true,
   children: <HeadphonesIcon className="w-5 h-5" />,
 };
 

packages/core/theme/src/components/button.ts

@@ -82,7 +82,7 @@ const button = tv({
     isInGroup: {
       true: "[&:not(:first-child):not(:last-child)]:rounded-none",
     },
-    isIconButton: {
+    isIconOnly: {
       true: "p-0 gap-0",
     },
     disableAnimation: {
@@ -334,35 +334,35 @@ const button = tv({
       radius: "full",
       class: "rounded-none  first:rounded-l-full last:rounded-r-full",
     },
-    // isInGroup / bordered
+    // isInGroup / bordered / ghost
     {
       isInGroup: true,
-      variant: "bordered",
+      variant: ["bordered", "ghost"],
       class: "[&:not(:first-child)]:border-l-0",
     },
-    // isIconButton / size
+    // isIconOnly / size
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xs",
       class: "w-6 h-6",
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "sm",
       class: "w-8 h-8",
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "md",
       class: "w-10 h-10",
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "lg",
       class: "w-12 h-12",
     },
     {
-      isIconButton: true,
+      isIconOnly: true,
       size: "xl",
       class: "w-14 h-14",
     },