feat(Item): shape concept

Author: tenphi

.changeset/add-item-shape-prop.md

@@ -0,0 +1,6 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add `shape` prop to Item component with three values: `card`, `button` (default), and `sharp` to control border radius styling.
+

.changeset/selfish-tomatoes-eat.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Rename `type` prop in ListBox to `shape`.

src/components/content/Item/Item.docs.mdx

@@ -67,6 +67,9 @@ The `mods` property accepts the following modifiers:
 | with-description-block | `boolean` | Applied when description placement is "block" |
 | checkbox | `boolean` | Applied when using checkbox icon (icon="checkbox") |
 | selected | `boolean` | Applied when isSelected is true |
+| shape-card | `boolean` | Applied when shape is "card" |
+| shape-button | `boolean` | Applied when shape is "button" |
+| shape-sharp | `boolean` | Applied when shape is "sharp" |
 
 ## Variants
 
@@ -96,6 +99,12 @@ The `mods` property accepts the following modifiers:
 - `xlarge` - Extra large size for emphasized items
 - `inline` - Inline size that adapts to content
 
+### Shapes
+
+- `card` - Card shape with larger border radius (`1cr`)
+- `button` - Button shape with default border radius (default)
+- `sharp` - Sharp corners with no border radius (`0`)
+
 ## Examples
 
 ### Basic Usage
@@ -144,6 +153,10 @@ The `mods` property accepts the following modifiers:
 </Item>
 ```
 
+### With Different Shapes
+
+<Story of={ItemStories.DifferentShapes} />
+
 ### With Actions
 
 Item supports inline actions that appear on the right side. Use the `Item.Action` compound component for consistent styling:

src/components/content/Item/Item.stories.tsx

@@ -73,6 +73,14 @@ export default {
         defaultValue: { summary: 'medium' },
       },
     },
+    shape: {
+      options: ['card', 'button', 'sharp'],
+      control: { type: 'radio' },
+      description: 'Shape of the item border radius',
+      table: {
+        defaultValue: { summary: 'button' },
+      },
+    },
   },
 };
 
@@ -1990,3 +1998,84 @@ DynamicAutoTooltip.parameters = {
     },
   },
 };
+
+export const DifferentShapes: StoryFn<CubeItemProps> = (args) => (
+  <Space gap="2x" flow="column" placeItems="start">
+    <Title level={5}>Card Shape</Title>
+    <Item
+      {...args}
+      styles={DEFAULT_STYLES}
+      type="outline"
+      shape="card"
+      icon={<IconUser />}
+    >
+      Card shape with larger border radius
+    </Item>
+
+    <Title level={5}>Button Shape (Default)</Title>
+    <Item
+      {...args}
+      styles={DEFAULT_STYLES}
+      type="outline"
+      shape="button"
+      icon={<IconUser />}
+    >
+      Button shape with default border radius
+    </Item>
+
+    <Title level={5}>Sharp Shape</Title>
+    <Item
+      {...args}
+      styles={DEFAULT_STYLES}
+      type="outline"
+      shape="sharp"
+      icon={<IconUser />}
+    >
+      Sharp shape with no border radius
+    </Item>
+
+    <Title level={5}>All Shapes Comparison</Title>
+    <Space gap="1x" flow="column" placeItems="start">
+      <Item
+        {...args}
+        styles={DEFAULT_STYLES}
+        type="outline"
+        shape="card"
+        icon={<IconCoin />}
+      >
+        Card shape
+      </Item>
+      <Item
+        {...args}
+        styles={DEFAULT_STYLES}
+        type="outline"
+        shape="button"
+        icon={<IconCoin />}
+      >
+        Button shape
+      </Item>
+      <Item
+        {...args}
+        styles={DEFAULT_STYLES}
+        type="outline"
+        shape="sharp"
+        icon={<IconCoin />}
+      >
+        Sharp shape
+      </Item>
+    </Space>
+  </Space>
+);
+
+DifferentShapes.args = {
+  width: '300px',
+};
+
+DifferentShapes.parameters = {
+  docs: {
+    description: {
+      story:
+        'Demonstrates the three shape variants: `card` (larger border radius), `button` (default border radius), and `sharp` (no border radius). Use card for card-like interfaces, button for interactive elements, and sharp for minimal or technical interfaces.',
+    },
+  },
+};

src/components/content/Item/Item.tsx

@@ -145,6 +145,14 @@ export interface CubeItemProps extends BaseProps, ContainerStyleProps {
    * When true, adds button modifier to the component styling.
    */
   isButton?: boolean;
+  /**
+   * Shape of the item's border radius.
+   * - `card` - Card shape with larger border radius (`1cr`)
+   * - `button` - Button shape with default border radius (default)
+   * - `sharp` - Sharp corners with no border radius (`0`)
+   * @default "button"
+   */
+  shape?: 'card' | 'button' | 'sharp';
   /**
    * @private
    * Default tooltip placement for the item.
@@ -230,7 +238,9 @@ const ItemElement = tasty({
     margin: 0,
     radius: {
       '': true,
-      card: '1cr',
+      'shape-card': '1cr',
+      'shape-button': true,
+      'shape-sharp': '0',
     },
     height: {
       '': 'min $size',
@@ -692,6 +702,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
     isCard = false,
     actions,
     isButton = false,
+    shape = 'button',
     defaultTooltipPlacement = 'top',
     ...rest
   } = props;
@@ -785,6 +796,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
       loading: isLoading,
       card: isCard === true,
       button: isButton === true,
+      [`shape-${shape}`]: true,
       ...mods,
     };
   }, [
@@ -799,6 +811,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
     isLoading,
     isCard,
     isButton,
+    shape,
     actions,
     mods,
   ]);
@@ -850,6 +863,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
           data-size={typeof size === 'number' ? undefined : size}
           data-type={type}
           data-theme={theme}
+          data-shape={shape}
           aria-disabled={finalIsDisabled}
           aria-selected={isSelected}
           mods={mods}
@@ -914,6 +928,7 @@ const Item = <T extends HTMLElement = HTMLDivElement>(
       actions,
       size,
       style,
+      shape,
     ],
   );
 

src/components/fields/ListBox/ListBox.docs.mdx

@@ -128,7 +128,7 @@ The `mods` property accepts the following modifiers you can override:
 
 ### Visual Styling
 
-**type** (`'card' | 'plain' | 'popover'`, default: `'card'`)
+**shape** (`'card' | 'plain' | 'popover'`, default: `'card'`)
 - Controls the visual styling of the ListBox container
 - `card`: Standard card styling with border and margin (default)
 - `plain`: No border, no margin, no radius - suitable for embedded use
@@ -525,25 +525,25 @@ const [selectedKey, setSelectedKey] = useState('apple');
 </ListBox>
 ```
 
-### Visual Type Variants
+### Visual Shape Variants
 
-<Story of={ListBoxStories.TypeVariants} />
+<Story of={ListBoxStories.DifferentShapes} />
 
 ```jsx
-{/* Card type (default) - with border and margin */}
-<ListBox type="card" label="Select a fruit" selectionMode="single">
+{/* Card shape (default) - with border and margin */}
+<ListBox shape="card" label="Select a fruit" selectionMode="single">
   <ListBox.Item key="apple">Apple</ListBox.Item>
   <ListBox.Item key="banana">Banana</ListBox.Item>
 </ListBox>
 
-{/* Plain type - no border, no margin, no radius */}
-<ListBox type="plain" label="Select a fruit" selectionMode="single">
+{/* Plain shape - no border, no margin, no radius */}
+<ListBox shape="plain" label="Select a fruit" selectionMode="single">
   <ListBox.Item key="apple">Apple</ListBox.Item>
   <ListBox.Item key="banana">Banana</ListBox.Item>
 </ListBox>
 
-{/* Popover type - no border, but keeps margin and radius */}
-<ListBox type="popover" label="Select a fruit" selectionMode="single">
+{/* Popover shape - no border, but keeps margin and radius */}
+<ListBox shape="popover" label="Select a fruit" selectionMode="single">
   <ListBox.Item key="apple">Apple</ListBox.Item>
   <ListBox.Item key="banana">Banana</ListBox.Item>
 </ListBox>