feat(ButtonIcon): rename shape prop to rounded, update stories

src/plugins/components/button-icon/button-icon.component.ts

@@ -10,7 +10,7 @@ import * as variants from './button-icon.variants'
 export const ButtonIcon = ({
   size = 'md',
   loading,
-  shape = 'rounded',
+  rounded = 'sm',
   children,
   color = 'default',
   classes,
@@ -24,7 +24,7 @@ export const ButtonIcon = ({
         variants.size[size],
         variants.color[color],
         loading && 'nui-button-loading',
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         classes?.wrapper,
       ]
         .filter(Boolean)

src/plugins/components/button-icon/button-icon.config.ts

@@ -164,72 +164,6 @@ export const defaultConfig = {
   },
 }
 
-// export const defaultConfig = {
-//   text: 'sm',
-//   font: 'normal',
-//   duration: '300',
-//   buttonSmall: {
-//     size: '8',
-//     space: '1',
-//   },
-//   buttonMedium: {
-//     size: '10',
-//     space: '2',
-//   },
-//   buttonLarge: {
-//     size: '12',
-//     space: '3',
-//   },
-//   rounded: {
-//     smooth: 'md',
-//     curved: 'lg',
-//     full: 'full',
-//   },
-//   default: {
-//     bg: 'white',
-//     bgDark: 'muted-700',
-//     bgHover: 'muted-50',
-//     bgHoverDark: 'muted-600',
-//     text: 'muted-700',
-//     textDark: 'white',
-//     border: 'muted-300',
-//     borderDark: 'muted-600',
-//   },
-//   muted: {
-//     bg: 'muted-200',
-//     bgDark: 'muted-700',
-//     bgHover: 'muted-100',
-//     bgHoverDark: 'muted-600',
-//     text: 'muted-500',
-//     textDark: 'white',
-//   },
-//   primary: {
-//     border: 'primary-500',
-//     bgHover: 'primary-500/20',
-//     text: 'primary-500',
-//   },
-//   info: {
-//     border: 'info-500',
-//     bgHover: 'info-500/20',
-//     text: 'info-500',
-//   },
-//   success: {
-//     border: 'success-500',
-//     bgHover: 'success-500/20',
-//     text: 'success-500',
-//   },
-//   warning: {
-//     border: 'warning-500',
-//     bgHover: 'warning-500/20',
-//     text: 'warning-500',
-//   },
-//   danger: {
-//     border: 'danger-500',
-//     bgHover: 'danger-500/20',
-//     text: 'danger-500',
-//   },
-// }
-
 export type ButtonIconConfig = typeof defaultConfig
 export interface ButtonIconPluginConfig {
   [key]: ButtonIconConfig

src/plugins/components/button-icon/button-icon.doc.mdx

@@ -30,7 +30,7 @@ Icon buttons can have different sizes.
 
 <br />
 
-### Shape
+### Rounded
 
 Icon button shapes allow you to change the border radiuses.
 

src/plugins/components/button-icon/button-icon.stories.ts

@@ -35,9 +35,9 @@ const meta = {
       ],
       defaultValue: 'default',
     },
-    shape: {
+    rounded: {
       control: { type: 'select' },
-      options: ['straight', 'rounded', 'smooth', 'curved', 'full'],
+      options: ['none', 'sm', 'md', 'lg', 'full'],
       defaultValue: 'straight',
     },
     onClick: { action: 'onClick' },
@@ -56,7 +56,7 @@ export const Main: Story = {
     // set default values used for UI preview
     color: 'default',
     loading: false,
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -82,7 +82,7 @@ export const SizeSm: Story = {
   name: 'Size: sm',
   args: {
     size: 'sm',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -105,7 +105,7 @@ export const SizeMd: Story = {
   name: 'Size: md',
   args: {
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -128,7 +128,7 @@ export const SizeLg: Story = {
   name: 'Size: lg',
   args: {
     size: 'lg',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -149,11 +149,11 @@ export const SizeLg: Story = {
 }
 // #endregion
 
-// #region Shapes
+// #region Rounded
 export const Straight: Story = {
-  name: 'Shape: straight',
+  name: 'Rounded: none',
   args: {
-    shape: 'straight',
+    rounded: 'none',
     children: html`
       <svg
         class="h-4 w-4"
@@ -173,9 +173,9 @@ export const Straight: Story = {
   },
 }
 export const Rounded: Story = {
-  name: 'Shape: rounded',
+  name: 'Rounded: sm',
   args: {
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -195,9 +195,9 @@ export const Rounded: Story = {
   },
 }
 export const Smooth: Story = {
-  name: 'Shape: smooth',
+  name: 'Rounded: md',
   args: {
-    shape: 'smooth',
+    rounded: 'md',
     children: html`
       <svg
         class="h-4 w-4"
@@ -217,9 +217,9 @@ export const Smooth: Story = {
   },
 }
 export const Curved: Story = {
-  name: 'Shape: curved',
+  name: 'Rounded: lg',
   args: {
-    shape: 'curved',
+    rounded: 'lg',
     children: html`
       <svg
         class="h-4 w-4"
@@ -239,9 +239,9 @@ export const Curved: Story = {
   },
 }
 export const Full: Story = {
-  name: 'Shape: full',
+  name: 'Rounded: full',
   args: {
-    shape: 'full',
+    rounded: 'full',
     children: html`
       <svg
         class="h-4 w-4"
@@ -267,7 +267,7 @@ export const ColorDefault: Story = {
   name: 'Color: default',
   args: {
     color: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -291,7 +291,7 @@ export const ColorMuted: Story = {
   name: 'Color: muted',
   args: {
     color: 'muted',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -315,7 +315,7 @@ export const ColorPrimary: Story = {
   name: 'Color: primary',
   args: {
     color: 'primary',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -339,7 +339,7 @@ export const ColorInfo: Story = {
   name: 'Color: info',
   args: {
     color: 'info',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -363,7 +363,7 @@ export const ColorSuccess: Story = {
   name: 'Color: success',
   args: {
     color: 'success',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -387,7 +387,7 @@ export const ColorWarning: Story = {
   name: 'Color: warning',
   args: {
     color: 'warning',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -411,7 +411,7 @@ export const ColorDanger: Story = {
   name: 'Color: danger',
   args: {
     color: 'danger',
-    shape: 'rounded',
+    rounded: 'sm',
     children: html`
       <svg
         class="h-4 w-4"
@@ -437,7 +437,7 @@ export const SizeSmLoading: Story = {
   name: 'Size: sm',
   args: {
     size: 'sm',
-    shape: 'rounded',
+    rounded: 'sm',
     loading: true,
     children: html`
       <svg
@@ -461,7 +461,7 @@ export const SizeMdLoading: Story = {
   name: 'Size: md',
   args: {
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     loading: true,
     children: html`
       <svg
@@ -485,7 +485,7 @@ export const SizeLgLoading: Story = {
   name: 'Size: lg',
   args: {
     size: 'lg',
-    shape: 'rounded',
+    rounded: 'sm',
     loading: true,
     children: html`
       <svg
@@ -511,7 +511,7 @@ export const SizeLgLoading: Story = {
 export const StraightDisabled: Story = {
   name: 'Disabled: straight',
   args: {
-    shape: 'straight',
+    rounded: 'none',
     '?disabled': true,
     children: html`
       <svg
@@ -534,7 +534,7 @@ export const StraightDisabled: Story = {
 export const RoundedDisabled: Story = {
   name: 'Disabled: rounded',
   args: {
-    shape: 'rounded',
+    rounded: 'sm',
     '?disabled': true,
     children: html`
       <svg
@@ -557,7 +557,7 @@ export const RoundedDisabled: Story = {
 export const SmoothDisabled: Story = {
   name: 'Disabled: smooth',
   args: {
-    shape: 'smooth',
+    rounded: 'md',
     '?disabled': true,
     children: html`
       <svg
@@ -580,7 +580,7 @@ export const SmoothDisabled: Story = {
 export const CurvedDisabled: Story = {
   name: 'Disabled: curved',
   args: {
-    shape: 'curved',
+    rounded: 'lg',
     '?disabled': true,
     children: html`
       <svg
@@ -603,7 +603,7 @@ export const CurvedDisabled: Story = {
 export const FullDisabled: Story = {
   name: 'Disabled: full',
   args: {
-    shape: 'full',
+    rounded: 'full',
     '?disabled': true,
     children: html`
       <svg
@@ -629,7 +629,7 @@ export const FullDisabled: Story = {
 export const Slot: Story = {
   name: 'Slots: default slot',
   args: {
-    shape: 'full',
+    rounded: 'full',
     size: 'lg',
     children: html`
       ${Avatar({

src/plugins/components/button-icon/button-icon.types.ts

@@ -1,7 +1,7 @@
 import type { PropertyVariant } from '~/types/utils'
 
 export interface ButtonIconProps extends Record<string, unknown> {
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   color?:
     | 'default'
     | 'muted'

src/plugins/components/button-icon/button-icon.variants.ts

@@ -1,12 +1,12 @@
 import type { ButtonIconVariant } from './button-icon.types'
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-button-rounded',
-  smooth: 'nui-button-smooth',
-  curved: 'nui-button-curved',
+export const rounded = {
+  none: '',
+  sm: 'nui-button-rounded',
+  md: 'nui-button-smooth',
+  lg: 'nui-button-curved',
   full: 'nui-button-full',
-} as const satisfies ButtonIconVariant<'shape'>
+} as const satisfies ButtonIconVariant<'rounded'>
 
 export const size = {
   sm: 'nui-button-small',