Item

npm install @kuzenbo/core

import { Item } from "@kuzenbo/core";

function Example() {
  return (
    <Item>
      <Item.Media>
        <Avatar />
      </Item.Media>
      <Item.Content>
        <Item.Title>Item Title</Item.Title>
        <Item.Description>Item description</Item.Description>
      </Item.Content>
      <Item.Actions>
        <Button size="sm">Action</Button>
      </Item.Actions>
    </Item>
  );
}

<Item>
  <Item.Content>
    <Item.Title>Basic Item</Item.Title>
  </Item.Content>
</Item>

<Item>
  <Item.Media>
    <Avatar>
      <Avatar.Image src="/avatar.jpg" />
      <Avatar.Fallback>JD</Avatar.Fallback>
    </Avatar>
  </Item.Media>
  <Item.Content>
    <Item.Title>John Doe</Item.Title>
    <Item.Description>Software Engineer</Item.Description>
  </Item.Content>
</Item>

<Item>
  <Item.Content>
    <Item.Title>Task Item</Item.Title>
    <Item.Description>Complete the documentation</Item.Description>
  </Item.Content>
  <Item.Actions>
    <Button variant="ghost" size="sm">Edit</Button>
    <Button variant="ghost" size="sm">Delete</Button>
  </Item.Actions>
</Item>

<div className="space-y-2">
  <Item variant="default">
    <Item.Content>
      <Item.Title>Default Variant</Item.Title>
    </Item.Content>
  </Item>
  <Item variant="outline">
    <Item.Content>
      <Item.Title>Outline Variant</Item.Title>
    </Item.Content>
  </Item>
  <Item variant="muted">
    <Item.Content>
      <Item.Title>Muted Variant</Item.Title>
    </Item.Content>
  </Item>
</div>

<div className="space-y-2">
  <Item size="xs">
    <Item.Content>
      <Item.Title>Extra Small</Item.Title>
    </Item.Content>
  </Item>
  <Item size="sm">
    <Item.Content>
      <Item.Title>Small</Item.Title>
    </Item.Content>
  </Item>
  <Item size="md">
    <Item.Content>
      <Item.Title>Medium</Item.Title>
    </Item.Content>
  </Item>
  <Item size="lg">
    <Item.Content>
      <Item.Title>Large</Item.Title>
    </Item.Content>
  </Item>
</div>

<Item>
  <Item.Header>
    <span className="text-xs text-muted-foreground">Posted 2 hours ago</span>
  </Item.Header>
  <Item.Content>
    <Item.Title>Article Title</Item.Title>
    <Item.Description>
      A brief description of the article content goes here.
    </Item.Description>
  </Item.Content>
  <Item.Footer>
    <Badge>Featured</Badge>
    <Badge variant="outline">Technology</Badge>
  </Item.Footer>
</Item>

<Item.Group>
  {items.map((item) => (
    <Item key={item.id}>
      <Item.Media>
        <Avatar>
          <Avatar.Fallback>{item.initials}</Avatar.Fallback>
        </Avatar>
      </Item.Media>
      <Item.Content>
        <Item.Title>{item.title}</Item.Title>
        <Item.Description>{item.description}</Item.Description>
      </Item.Content>
    </Item>
  ))}
</Item.Group>

<Item.Group>
  <Item>First Item</Item>
  <Item.Separator />
  <Item>Second Item</Item>
  <Item.Separator />
  <Item>Third Item</Item>
</Item.Group>