diff --git a/apps/v4/content/docs/components/base/item.mdx b/apps/v4/content/docs/components/base/item.mdx index 878905fd95..a967cca4fa 100644 --- a/apps/v4/content/docs/components/base/item.mdx +++ b/apps/v4/content/docs/components/base/item.mdx @@ -1,20 +1,14 @@ --- title: Item -description: A versatile component that you can use to display any content. +description: A versatile component for displaying content with media, title, description, and actions. base: base component: true --- + + The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items. -You can pretty much achieve the same result with the `div` element and some classes, but **I've built this so many times** that I decided to create a component for it. Now I use it all the time. - - - ## Installation @@ -59,8 +53,6 @@ import { ItemActions, ItemContent, ItemDescription, - ItemFooter, - ItemHeader, ItemMedia, ItemTitle, } from "@/components/ui/item" @@ -68,14 +60,16 @@ import { ```tsx showLineNumbers - Item Header - + + + - Item - Item + Title + Description - - Item Footer + + + ``` @@ -85,96 +79,87 @@ Use `Field` if you need to display a form input such as a checkbox, input, radio If you only need to display content such as a title, description, and actions, use `Item`. -## Examples +## Variant -### Variants +Use the `variant` prop to change the visual style of the item. -### Size +## Size -The `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the `default` size for a standard item. +Use the `size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`. +## Examples + ### Icon - +Use `ItemMedia` with `variant="icon"` to display an icon. + + ### Avatar - +You can use `ItemMedia` with `variant="avatar"` to display an avatar. + + ### Image - +Use `ItemMedia` with `variant="image"` to display an image. + + ### Group +Use `ItemGroup` to group related items together. + ### Header +Use `ItemHeader` to add a header above the item content. + ### Link -To render an item as a link, use the `asChild` prop. The hover and focus states will be applied to the anchor element. +Use the `render` prop to render the item as a link. The hover and focus states will be applied to the anchor element. - + ```tsx showLineNumbers - - - - - Dashboard - Overview of your account and activity. - - - +}> + + + + + Dashboard + Overview of your account and activity. + ``` ### Dropdown - + ## API Reference @@ -185,57 +170,12 @@ The main component for displaying content with media, title, description, and ac | Prop | Type | Default | | --------- | ----------------------------------- | ----------- | | `variant` | `"default" \| "outline" \| "muted"` | `"default"` | -| `size` | `"default" \| "sm"` | `"default"` | -| `asChild` | `boolean` | `false` | - -```tsx - - - - Item - Item - - - -``` - -You can use the `asChild` prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component. - -```tsx showLineNumbers -import { - Item, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/components/ui/item" - -export function ItemLink() { - return ( - - - - - - - Dashboard - - Overview of your account and activity. - - - - - ) -} -``` +| `size` | `"default" \| "sm" \| "xs"` | `"default"` | +| `render` | `React.ReactElement` | | ### ItemGroup -The `ItemGroup` component is a container that groups related items together with consistent styling. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +A container that groups related items together with consistent styling. ```tsx @@ -246,11 +186,7 @@ The `ItemGroup` component is a container that groups related items together with ### ItemSeparator -The `ItemSeparator` component is a separator that separates items in the item group. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +A separator between items in a group. ```tsx @@ -262,12 +198,11 @@ The `ItemSeparator` component is a separator that separates items in the item gr ### ItemMedia -Use the `ItemMedia` component to display media content such as icons, images, or avatars. +Use `ItemMedia` to display media content such as icons, images, or avatars. -| Prop | Type | Default | -| ----------- | -------------------------------- | ----------- | -| `variant` | `"default" \| "icon" \| "image"` | `"default"` | -| `className` | `string` | | +| Prop | Type | Default | +| --------- | -------------------------------- | ----------- | +| `variant` | `"default" \| "icon" \| "image"` | `"default"` | ```tsx @@ -283,28 +218,18 @@ Use the `ItemMedia` component to display media content such as icons, images, or ### ItemContent -The `ItemContent` component wraps the title and description of the item. - -You can skip `ItemContent` if you only need a title. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Wraps the title and description of the item. ```tsx - Item - Item + Title + Description ``` ### ItemTitle -Use the `ItemTitle` component to display the title of the item. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Displays the title of the item. ```tsx Item Title @@ -312,11 +237,7 @@ Use the `ItemTitle` component to display the title of the item. ### ItemDescription -Use the `ItemDescription` component to display the description of the item. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Displays the description of the item. ```tsx Item description @@ -324,39 +245,32 @@ Use the `ItemDescription` component to display the description of the item. ### ItemActions -Use the `ItemActions` component to display action buttons or other interactive elements. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Container for action buttons or other interactive elements. ```tsx - ``` ### ItemHeader -Use the `ItemHeader` component to display a header in the item. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Displays a header above the item content. ```tsx -Item Header + + Header + ... + ``` ### ItemFooter -Use the `ItemFooter` component to display a footer in the item. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Displays a footer below the item content. ```tsx -Item Footer + + ... + Footer + ``` diff --git a/apps/v4/content/docs/components/radix/item.mdx b/apps/v4/content/docs/components/radix/item.mdx index d76ad5b5ea..1fe21ede5c 100644 --- a/apps/v4/content/docs/components/radix/item.mdx +++ b/apps/v4/content/docs/components/radix/item.mdx @@ -1,20 +1,14 @@ --- title: Item -description: A versatile component that you can use to display any content. +description: A versatile component for displaying content with media, title, description, and actions. base: radix component: true --- + + The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items. -You can pretty much achieve the same result with the `div` element and some classes, but **I've built this so many times** that I decided to create a component for it. Now I use it all the time. - - - ## Installation @@ -59,8 +53,6 @@ import { ItemActions, ItemContent, ItemDescription, - ItemFooter, - ItemHeader, ItemMedia, ItemTitle, } from "@/components/ui/item" @@ -68,14 +60,16 @@ import { ```tsx showLineNumbers - Item Header - + + + - Item - Item + Title + Description - - Item Footer + + + ``` @@ -85,96 +79,89 @@ Use `Field` if you need to display a form input such as a checkbox, input, radio If you only need to display content such as a title, description, and actions, use `Item`. -## Examples +## Variant -### Variants +Use the `variant` prop to change the visual style of the item. -### Size +## Size -The `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the `default` size for a standard item. +Use the `size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`. +## Examples + ### Icon - +Use `ItemMedia` with `variant="icon"` to display an icon. + + ### Avatar - +You can use `ItemMedia` with `variant="avatar"` to display an avatar. + + ### Image - +Use `ItemMedia` with `variant="image"` to display an image. + + ### Group +Use `ItemGroup` to group related items together. + ### Header +Use `ItemHeader` to add a header above the item content. + ### Link -To render an item as a link, use the `asChild` prop. The hover and focus states will be applied to the anchor element. +Use the `asChild` prop to render the item as a link. The hover and focus states will be applied to the anchor element. - + ```tsx showLineNumbers - + + + Dashboard Overview of your account and activity. - ``` ### Dropdown - + ## API Reference @@ -185,57 +172,12 @@ The main component for displaying content with media, title, description, and ac | Prop | Type | Default | | --------- | ----------------------------------- | ----------- | | `variant` | `"default" \| "outline" \| "muted"` | `"default"` | -| `size` | `"default" \| "sm"` | `"default"` | +| `size` | `"default" \| "sm" \| "xs"` | `"default"` | | `asChild` | `boolean` | `false` | -```tsx - - - - Item - Item - - - -``` - -You can use the `asChild` prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component. - -```tsx showLineNumbers -import { - Item, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/components/ui/item" - -export function ItemLink() { - return ( - - - - - - - Dashboard - - Overview of your account and activity. - - - - - ) -} -``` - ### ItemGroup -The `ItemGroup` component is a container that groups related items together with consistent styling. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +A container that groups related items together with consistent styling. ```tsx @@ -246,11 +188,7 @@ The `ItemGroup` component is a container that groups related items together with ### ItemSeparator -The `ItemSeparator` component is a separator that separates items in the item group. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +A separator between items in a group. ```tsx @@ -262,12 +200,11 @@ The `ItemSeparator` component is a separator that separates items in the item gr ### ItemMedia -Use the `ItemMedia` component to display media content such as icons, images, or avatars. +Use `ItemMedia` to display media content such as icons, images, or avatars. -| Prop | Type | Default | -| ----------- | -------------------------------- | ----------- | -| `variant` | `"default" \| "icon" \| "image"` | `"default"` | -| `className` | `string` | | +| Prop | Type | Default | +| --------- | -------------------------------- | ----------- | +| `variant` | `"default" \| "icon" \| "image"` | `"default"` | ```tsx @@ -283,28 +220,18 @@ Use the `ItemMedia` component to display media content such as icons, images, or ### ItemContent -The `ItemContent` component wraps the title and description of the item. - -You can skip `ItemContent` if you only need a title. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Wraps the title and description of the item. ```tsx - Item - Item + Title + Description ``` ### ItemTitle -Use the `ItemTitle` component to display the title of the item. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Displays the title of the item. ```tsx Item Title @@ -312,11 +239,7 @@ Use the `ItemTitle` component to display the title of the item. ### ItemDescription -Use the `ItemDescription` component to display the description of the item. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Displays the description of the item. ```tsx Item description @@ -324,39 +247,32 @@ Use the `ItemDescription` component to display the description of the item. ### ItemActions -Use the `ItemActions` component to display action buttons or other interactive elements. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Container for action buttons or other interactive elements. ```tsx - ``` ### ItemHeader -Use the `ItemHeader` component to display a header in the item. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Displays a header above the item content. ```tsx -Item Header + + Header + ... + ``` ### ItemFooter -Use the `ItemFooter` component to display a footer in the item. - -| Prop | Type | Default | -| ----------- | -------- | ------- | -| `className` | `string` | | +Displays a footer below the item content. ```tsx -Item Footer + + ... + Footer + ``` diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx index 99a5aab7bd..1d6b8547ba 100644 --- a/apps/v4/examples/__index__.tsx +++ b/apps/v4/examples/__index__.tsx @@ -3021,58 +3021,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-default-extra-small": { - name: "item-default-extra-small", - filePath: "examples/radix/item-default-extra-small.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-default-extra-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-default-extra-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-default-small": { - name: "item-default-small", - filePath: "examples/radix/item-default-small.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-default-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-default-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-default-with-image": { - name: "item-default-with-image", - filePath: "examples/radix/item-default-with-image.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-default-with-image") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-default-with-image" - return { default: mod.default || mod[exportName] } - }), - }, - "item-default": { - name: "item-default", - filePath: "examples/radix/item-default.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-default") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-default" - return { default: mod.default || mod[exportName] } - }), - }, "item-demo": { name: "item-demo", filePath: "examples/radix/item-demo.tsx", @@ -3099,19 +3047,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-footer-examples": { - name: "item-footer-examples", - filePath: "examples/radix/item-footer-examples.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-footer-examples") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-footer-examples" - return { default: mod.default || mod[exportName] } - }), - }, "item-group": { name: "item-group", filePath: "examples/radix/item-group.tsx", @@ -3125,32 +3060,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-header-and-footer-examples": { - name: "item-header-and-footer-examples", - filePath: "examples/radix/item-header-and-footer-examples.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-header-and-footer-examples") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-header-and-footer-examples" - return { default: mod.default || mod[exportName] } - }), - }, - "item-header-examples": { - name: "item-header-examples", - filePath: "examples/radix/item-header-examples.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-header-examples") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-header-examples" - return { default: mod.default || mod[exportName] } - }), - }, "item-header": { name: "item-header", filePath: "examples/radix/item-header.tsx", @@ -3190,45 +3099,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-link-default": { - name: "item-link-default", - filePath: "examples/radix/item-link-default.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-link-default") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-link-default" - return { default: mod.default || mod[exportName] } - }), - }, - "item-link-muted": { - name: "item-link-muted", - filePath: "examples/radix/item-link-muted.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-link-muted") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-link-muted" - return { default: mod.default || mod[exportName] } - }), - }, - "item-link-outline": { - name: "item-link-outline", - filePath: "examples/radix/item-link-outline.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-link-outline") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-link-outline" - return { default: mod.default || mod[exportName] } - }), - }, "item-link": { name: "item-link", filePath: "examples/radix/item-link.tsx", @@ -3242,149 +3112,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-muted-extra-small": { - name: "item-muted-extra-small", - filePath: "examples/radix/item-muted-extra-small.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-muted-extra-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-muted-extra-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-muted-small": { - name: "item-muted-small", - filePath: "examples/radix/item-muted-small.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-muted-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-muted-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-muted-with-image": { - name: "item-muted-with-image", - filePath: "examples/radix/item-muted-with-image.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-muted-with-image") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-muted-with-image" - return { default: mod.default || mod[exportName] } - }), - }, - "item-muted": { - name: "item-muted", - filePath: "examples/radix/item-muted.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-muted") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-muted" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-extra-small": { - name: "item-outline-extra-small", - filePath: "examples/radix/item-outline-extra-small.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-outline-extra-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-extra-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-small": { - name: "item-outline-small", - filePath: "examples/radix/item-outline-small.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-outline-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-with-image-extra-small": { - name: "item-outline-with-image-extra-small", - filePath: "examples/radix/item-outline-with-image-extra-small.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-outline-with-image-extra-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-with-image-extra-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-with-image-small": { - name: "item-outline-with-image-small", - filePath: "examples/radix/item-outline-with-image-small.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-outline-with-image-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-with-image-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-with-image": { - name: "item-outline-with-image", - filePath: "examples/radix/item-outline-with-image.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-outline-with-image") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-with-image" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline": { - name: "item-outline", - filePath: "examples/radix/item-outline.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-outline") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline" - return { default: mod.default || mod[exportName] } - }), - }, - "item-separator-example": { - name: "item-separator-example", - filePath: "examples/radix/item-separator-example.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/item-separator-example") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-separator-example" - return { default: mod.default || mod[exportName] } - }), - }, "item-size": { name: "item-size", filePath: "examples/radix/item-size.tsx", @@ -9356,58 +9083,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-default-extra-small": { - name: "item-default-extra-small", - filePath: "examples/base/item-default-extra-small.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-default-extra-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-default-extra-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-default-small": { - name: "item-default-small", - filePath: "examples/base/item-default-small.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-default-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-default-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-default-with-image": { - name: "item-default-with-image", - filePath: "examples/base/item-default-with-image.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-default-with-image") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-default-with-image" - return { default: mod.default || mod[exportName] } - }), - }, - "item-default": { - name: "item-default", - filePath: "examples/base/item-default.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-default") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-default" - return { default: mod.default || mod[exportName] } - }), - }, "item-demo": { name: "item-demo", filePath: "examples/base/item-demo.tsx", @@ -9434,32 +9109,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-footer-examples": { - name: "item-footer-examples", - filePath: "examples/base/item-footer-examples.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-footer-examples") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-footer-examples" - return { default: mod.default || mod[exportName] } - }), - }, - "item-group-default": { - name: "item-group-default", - filePath: "examples/base/item-group-default.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-group-default") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-group-default" - return { default: mod.default || mod[exportName] } - }), - }, "item-group": { name: "item-group", filePath: "examples/base/item-group.tsx", @@ -9473,32 +9122,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-header-and-footer-examples": { - name: "item-header-and-footer-examples", - filePath: "examples/base/item-header-and-footer-examples.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-header-and-footer-examples") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-header-and-footer-examples" - return { default: mod.default || mod[exportName] } - }), - }, - "item-header-examples": { - name: "item-header-examples", - filePath: "examples/base/item-header-examples.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-header-examples") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-header-examples" - return { default: mod.default || mod[exportName] } - }), - }, "item-header": { name: "item-header", filePath: "examples/base/item-header.tsx", @@ -9538,45 +9161,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-link-default": { - name: "item-link-default", - filePath: "examples/base/item-link-default.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-link-default") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-link-default" - return { default: mod.default || mod[exportName] } - }), - }, - "item-link-muted": { - name: "item-link-muted", - filePath: "examples/base/item-link-muted.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-link-muted") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-link-muted" - return { default: mod.default || mod[exportName] } - }), - }, - "item-link-outline": { - name: "item-link-outline", - filePath: "examples/base/item-link-outline.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-link-outline") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-link-outline" - return { default: mod.default || mod[exportName] } - }), - }, "item-link": { name: "item-link", filePath: "examples/base/item-link.tsx", @@ -9590,149 +9174,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "item-muted-extra-small": { - name: "item-muted-extra-small", - filePath: "examples/base/item-muted-extra-small.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-muted-extra-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-muted-extra-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-muted-small": { - name: "item-muted-small", - filePath: "examples/base/item-muted-small.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-muted-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-muted-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-muted-with-image": { - name: "item-muted-with-image", - filePath: "examples/base/item-muted-with-image.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-muted-with-image") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-muted-with-image" - return { default: mod.default || mod[exportName] } - }), - }, - "item-muted": { - name: "item-muted", - filePath: "examples/base/item-muted.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-muted") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-muted" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-extra-small": { - name: "item-outline-extra-small", - filePath: "examples/base/item-outline-extra-small.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-outline-extra-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-extra-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-small": { - name: "item-outline-small", - filePath: "examples/base/item-outline-small.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-outline-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-with-image-extra-small": { - name: "item-outline-with-image-extra-small", - filePath: "examples/base/item-outline-with-image-extra-small.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-outline-with-image-extra-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-with-image-extra-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-with-image-small": { - name: "item-outline-with-image-small", - filePath: "examples/base/item-outline-with-image-small.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-outline-with-image-small") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-with-image-small" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline-with-image": { - name: "item-outline-with-image", - filePath: "examples/base/item-outline-with-image.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-outline-with-image") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline-with-image" - return { default: mod.default || mod[exportName] } - }), - }, - "item-outline": { - name: "item-outline", - filePath: "examples/base/item-outline.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-outline") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-outline" - return { default: mod.default || mod[exportName] } - }), - }, - "item-separator-example": { - name: "item-separator-example", - filePath: "examples/base/item-separator-example.tsx", - component: React.lazy(async () => { - const mod = await import("./base/item-separator-example") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "item-separator-example" - return { default: mod.default || mod[exportName] } - }), - }, "item-size": { name: "item-size", filePath: "examples/base/item-size.tsx", diff --git a/apps/v4/examples/base/item-default-extra-small.tsx b/apps/v4/examples/base/item-default-extra-small.tsx deleted file mode 100644 index f8ad5e9163..0000000000 --- a/apps/v4/examples/base/item-default-extra-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemDefaultExtraSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-default-small.tsx b/apps/v4/examples/base/item-default-small.tsx deleted file mode 100644 index 88045dcdd0..0000000000 --- a/apps/v4/examples/base/item-default-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemDefaultSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-default-with-image.tsx b/apps/v4/examples/base/item-default-with-image.tsx deleted file mode 100644 index 76d5da1af6..0000000000 --- a/apps/v4/examples/base/item-default-with-image.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" - -export function ItemDefaultWithImage() { - return ( - <> - - - Project - - - Project Dashboard - - Overview of project settings and configuration. - - - - - - Document - - - Document - A document with metadata displayed. - - - - - - - - File - - - File Attachment - - Complete file with image, title, description, and action button. - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-default.tsx b/apps/v4/examples/base/item-default.tsx deleted file mode 100644 index 7845c54656..0000000000 --- a/apps/v4/examples/base/item-default.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemDefault() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-dropdown.tsx b/apps/v4/examples/base/item-dropdown.tsx index c911dbd62d..ce7e10fe03 100644 --- a/apps/v4/examples/base/item-dropdown.tsx +++ b/apps/v4/examples/base/item-dropdown.tsx @@ -38,36 +38,32 @@ const people = [ export function ItemDropdown() { return ( -
- - } - > - Select - - - - {people.map((person) => ( - - - - - - - {person.username.charAt(0)} - - - - - {person.username} - {person.email} - - - - ))} - - - -
+ + }> + Select + + + + {people.map((person) => ( + + + + + + {person.username.charAt(0)} + + + + {person.username} + + {person.email} + + + + + ))} + + + ) } diff --git a/apps/v4/examples/base/item-footer-examples.tsx b/apps/v4/examples/base/item-footer-examples.tsx deleted file mode 100644 index fd1bedb043..0000000000 --- a/apps/v4/examples/base/item-footer-examples.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemFooter, - ItemTitle, -} from "@/examples/base/ui/item" - -export function ItemFooterExamples() { - return ( - <> - - - Quarterly Report Q4 2024 - - Financial overview including revenue, expenses, and growth metrics - for the fourth quarter. - - - - - Last updated 2 hours ago - - - - - - User Research Findings - - Insights from interviews and surveys conducted with 50+ users across - different demographics. - - - - - Created by Sarah Chen - - - - - - Product Roadmap - - Planned features and improvements scheduled for the next three - months. - - - - 12 comments - - - - ) -} diff --git a/apps/v4/examples/base/item-group-default.tsx b/apps/v4/examples/base/item-group-default.tsx deleted file mode 100644 index be74af83bd..0000000000 --- a/apps/v4/examples/base/item-group-default.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemGroup, - ItemTitle, -} from "@/examples/base/ui/item" - -export function DefaultItemGroup() { - return ( - - - - Item 1 - First item in the group. - - - - - Item 2 - Second item in the group. - - - - - Item 3 - Third item in the group. - - - - ) -} diff --git a/apps/v4/examples/base/item-group.tsx b/apps/v4/examples/base/item-group.tsx index 1b3c8c894d..52552d36c0 100644 --- a/apps/v4/examples/base/item-group.tsx +++ b/apps/v4/examples/base/item-group.tsx @@ -33,31 +33,26 @@ const people = [ export function ItemGroupExample() { return ( -
- - {people.map((person, index) => ( - - - - - - {person.username.charAt(0)} - - - - {person.username} - {person.email} - - - - - - {index !== people.length - 1 && } - - ))} - -
+ + {people.map((person, index) => ( + + + + + {person.username.charAt(0)} + + + + {person.username} + {person.email} + + + + + + ))} + ) } diff --git a/apps/v4/examples/base/item-header-and-footer-examples.tsx b/apps/v4/examples/base/item-header-and-footer-examples.tsx deleted file mode 100644 index 4726b93707..0000000000 --- a/apps/v4/examples/base/item-header-and-footer-examples.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemFooter, - ItemHeader, - ItemTitle, -} from "@/examples/base/ui/item" - -export function ItemHeaderAndFooterExamples() { - return ( - <> - - - Team Project - - - Website Redesign - - Complete overhaul of the company website with modern design - principles and improved user experience. - - - - - Updated 5 minutes ago - - - - - - Client Work - - - Mobile App Development - - Building a cross-platform mobile application for iOS and Android - with React Native. - - - - - Status: In Progress - - - - - - Documentation - - - API Integration Guide - - Step-by-step instructions for integrating third-party APIs with - authentication and error handling. - - - - - Category: Technical • 3 attachments - - - - - ) -} diff --git a/apps/v4/examples/base/item-header-examples.tsx b/apps/v4/examples/base/item-header-examples.tsx deleted file mode 100644 index 72269ba70d..0000000000 --- a/apps/v4/examples/base/item-header-examples.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemHeader, - ItemTitle, -} from "@/examples/base/ui/item" - -export function ItemHeaderExamples() { - return ( - <> - - - Design System - - - Component Library - - A comprehensive collection of reusable UI components for building - consistent interfaces. - - - - - - Marketing - - - Campaign Analytics - - Track performance metrics and engagement rates across all marketing - channels. - - - - - - Engineering - - - API Documentation - - Complete reference guide for all available endpoints and - authentication methods. - - - - - ) -} diff --git a/apps/v4/examples/base/item-link-default.tsx b/apps/v4/examples/base/item-link-default.tsx deleted file mode 100644 index 5f2d6a77f1..0000000000 --- a/apps/v4/examples/base/item-link-default.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemGroup, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemLinkDefault() { - return ( - <> - - }> - - Title Only (Link) - - - }> - - Title + Description (Link) - - Clickable item with title and description. - - - - }> - - - - - Media + Title (Link) - - - }> - - - - - Media + Title + Description (Link) - - Complete link item with media, title, and description. - - - - }> - - With Actions (Link) - - Link item that also has action buttons. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-link-muted.tsx b/apps/v4/examples/base/item-link-muted.tsx deleted file mode 100644 index dd6a477a1e..0000000000 --- a/apps/v4/examples/base/item-link-muted.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemGroup, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemLinkMuted() { - return ( - <> - - }> - - Title Only (Link) - - - }> - - Title + Description (Link) - - Clickable item with title and description. - - - - }> - - - - - Media + Title (Link) - - - }> - - - - - Media + Title + Description (Link) - - Complete link item with media, title, and description. - - - - }> - - With Actions (Link) - - Link item that also has action buttons. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-link-outline.tsx b/apps/v4/examples/base/item-link-outline.tsx deleted file mode 100644 index c1497aa3a7..0000000000 --- a/apps/v4/examples/base/item-link-outline.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemGroup, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemLinkOutline() { - return ( - <> - - }> - - Title Only (Link) - - - }> - - Title + Description (Link) - - Clickable item with title and description. - - - - }> - - - - - Media + Title (Link) - - - }> - - - - - Media + Title + Description (Link) - - Complete link item with media, title, and description. - - - - }> - - With Actions (Link) - - Link item that also has action buttons. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-muted-extra-small.tsx b/apps/v4/examples/base/item-muted-extra-small.tsx deleted file mode 100644 index c0b0419a64..0000000000 --- a/apps/v4/examples/base/item-muted-extra-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemMutedExtraSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-muted-small.tsx b/apps/v4/examples/base/item-muted-small.tsx deleted file mode 100644 index 637eb7953b..0000000000 --- a/apps/v4/examples/base/item-muted-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemMutedSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-muted-with-image.tsx b/apps/v4/examples/base/item-muted-with-image.tsx deleted file mode 100644 index 02ff5f5971..0000000000 --- a/apps/v4/examples/base/item-muted-with-image.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" - -export function ItemMutedWithImage() { - return ( - <> - - - Project - - - Project Dashboard - - Overview of project settings and configuration. - - - - - - Document - - - Document - A document with metadata displayed. - - - - - - - - File - - - File Attachment - - Complete file with image, title, description, and action button. - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-muted.tsx b/apps/v4/examples/base/item-muted.tsx deleted file mode 100644 index 97ba1e935e..0000000000 --- a/apps/v4/examples/base/item-muted.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function MutedVariantItems() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-outline-extra-small.tsx b/apps/v4/examples/base/item-outline-extra-small.tsx deleted file mode 100644 index d318be868a..0000000000 --- a/apps/v4/examples/base/item-outline-extra-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemOutlineExtraSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-outline-small.tsx b/apps/v4/examples/base/item-outline-small.tsx deleted file mode 100644 index 50c0288284..0000000000 --- a/apps/v4/examples/base/item-outline-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemOutlineSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-outline-with-image-extra-small.tsx b/apps/v4/examples/base/item-outline-with-image-extra-small.tsx deleted file mode 100644 index 8c4ced6855..0000000000 --- a/apps/v4/examples/base/item-outline-with-image-extra-small.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" - -export function ItemOutlineWithImageExtraSmall() { - return ( - <> - - - Project - - - Project Dashboard - - - - - Document - - - Document - - - - - - - - File - - - File Attachment - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-outline-with-image-small.tsx b/apps/v4/examples/base/item-outline-with-image-small.tsx deleted file mode 100644 index c1cc687557..0000000000 --- a/apps/v4/examples/base/item-outline-with-image-small.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" - -export function ItemOutlineWithImageSmall() { - return ( - <> - - - Project - - - Project Dashboard - - Overview of project settings and configuration. - - - - - - Document - - - Document - A document with metadata displayed. - - - - - - - - File - - - File Attachment - - Complete file with image, title, description, and action button. - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-outline-with-image.tsx b/apps/v4/examples/base/item-outline-with-image.tsx deleted file mode 100644 index db47972bb8..0000000000 --- a/apps/v4/examples/base/item-outline-with-image.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" - -export function OutlineVariantItemsWithImage() { - return ( - <> - - - Project - - - Project Dashboard - - Overview of project settings and configuration. - - - - - - Document - - - Document - A document with metadata displayed. - - - - - - - - File - - - File Attachment - - Complete file with image, title, description, and action button. - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-outline.tsx b/apps/v4/examples/base/item-outline.tsx deleted file mode 100644 index cec7b20d26..0000000000 --- a/apps/v4/examples/base/item-outline.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Button } from "@/examples/base/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function OutlineVariantItems() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/base/item-separator-example.tsx b/apps/v4/examples/base/item-separator-example.tsx deleted file mode 100644 index 849ef29555..0000000000 --- a/apps/v4/examples/base/item-separator-example.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemGroup, - ItemMedia, - ItemSeparator, - ItemTitle, -} from "@/examples/base/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemSeparatorExample() { - return ( - - - - - - - Inbox - View all incoming messages. - - - - - - - - - Sent - View all sent messages. - - - - - - - - - Drafts - View all draft messages. - - - - - - - - - Archive - View archived messages. - - - - ) -} diff --git a/apps/v4/examples/base/item-size.tsx b/apps/v4/examples/base/item-size.tsx index ab67ab8db5..4d4c40976e 100644 --- a/apps/v4/examples/base/item-size.tsx +++ b/apps/v4/examples/base/item-size.tsx @@ -1,40 +1,43 @@ -import { Button } from "@/examples/base/ui/button" import { Item, - ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle, } from "@/examples/base/ui/item" -import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react" +import { InboxIcon } from "lucide-react" export function ItemSizeDemo() { return (
- - Basic Item - - A simple item with title and description. - - - - - - - }> - - + + - Your profile has been verified. + Default Size + + The standard size for most use cases. + + + + + + + + + Small Size + A compact size for dense layouts. + + + + + + + + Extra Small Size + The most compact size available. - - -
) diff --git a/apps/v4/examples/base/item-variant.tsx b/apps/v4/examples/base/item-variant.tsx index 8bcb7522cc..bbf1db4a78 100644 --- a/apps/v4/examples/base/item-variant.tsx +++ b/apps/v4/examples/base/item-variant.tsx @@ -1,53 +1,47 @@ -import { Button } from "@/examples/base/ui/button" import { Item, - ItemActions, ItemContent, ItemDescription, + ItemMedia, ItemTitle, } from "@/examples/base/ui/item" +import { InboxIcon } from "lucide-react" export function ItemVariant() { return ( -
+
+ + + Default Variant - Standard styling with subtle background and borders. + Transparent background with no border. - - - + + + Outline Variant - Outlined style with clear borders and transparent background. + Outlined style with a visible border. - - - + + + Muted Variant - Subdued appearance with muted colors for secondary content. + Muted background for secondary content. - - -
) diff --git a/apps/v4/examples/radix/item-default-extra-small.tsx b/apps/v4/examples/radix/item-default-extra-small.tsx deleted file mode 100644 index cfdfba4460..0000000000 --- a/apps/v4/examples/radix/item-default-extra-small.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemDefaultExtraSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - - - - Title + Description + Button - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - - - - - - - Media + Title + Description + Button - - - - - - - - Multiple Actions - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-default-small.tsx b/apps/v4/examples/radix/item-default-small.tsx deleted file mode 100644 index 5807822b45..0000000000 --- a/apps/v4/examples/radix/item-default-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemDefaultSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-default-with-image.tsx b/apps/v4/examples/radix/item-default-with-image.tsx deleted file mode 100644 index ca960d98db..0000000000 --- a/apps/v4/examples/radix/item-default-with-image.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" - -export function ItemDefaultWithImage() { - return ( - <> - - - Project - - - Project Dashboard - - Overview of project settings and configuration. - - - - - - Document - - - Document - A document with metadata displayed. - - - - - - - - File - - - File Attachment - - Complete file with image, title, description, and action button. - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-default.tsx b/apps/v4/examples/radix/item-default.tsx deleted file mode 100644 index 4647f92226..0000000000 --- a/apps/v4/examples/radix/item-default.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemDefault() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-dropdown.tsx b/apps/v4/examples/radix/item-dropdown.tsx index a13b2ac1c7..7223741e90 100644 --- a/apps/v4/examples/radix/item-dropdown.tsx +++ b/apps/v4/examples/radix/item-dropdown.tsx @@ -38,36 +38,34 @@ const people = [ export function ItemDropdown() { return ( -
- - - - - - - {people.map((person) => ( - - - - - - - {person.username.charAt(0)} - - - - - {person.username} - {person.email} - - - - ))} - - - -
+ + + + + + + {people.map((person) => ( + + + + + + {person.username.charAt(0)} + + + + {person.username} + + {person.email} + + + + + ))} + + + ) } diff --git a/apps/v4/examples/radix/item-footer-examples.tsx b/apps/v4/examples/radix/item-footer-examples.tsx deleted file mode 100644 index 9725a7376f..0000000000 --- a/apps/v4/examples/radix/item-footer-examples.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemFooter, - ItemTitle, -} from "@/examples/radix/ui/item" - -export function ItemFooterExamples() { - return ( - <> - - - Quarterly Report Q4 2024 - - Financial overview including revenue, expenses, and growth metrics - for the fourth quarter. - - - - - Last updated 2 hours ago - - - - - - User Research Findings - - Insights from interviews and surveys conducted with 50+ users across - different demographics. - - - - - Created by Sarah Chen - - - - - - Product Roadmap - - Planned features and improvements scheduled for the next three - months. - - - - 12 comments - - - - ) -} diff --git a/apps/v4/examples/radix/item-group.tsx b/apps/v4/examples/radix/item-group.tsx index 9db56535f4..b31c5c6ff4 100644 --- a/apps/v4/examples/radix/item-group.tsx +++ b/apps/v4/examples/radix/item-group.tsx @@ -33,31 +33,26 @@ const people = [ export function ItemGroupExample() { return ( -
- - {people.map((person, index) => ( - - - - - - {person.username.charAt(0)} - - - - {person.username} - {person.email} - - - - - - {index !== people.length - 1 && } - - ))} - -
+ + {people.map((person, index) => ( + + + + + {person.username.charAt(0)} + + + + {person.username} + {person.email} + + + + + + ))} + ) } diff --git a/apps/v4/examples/radix/item-header-and-footer-examples.tsx b/apps/v4/examples/radix/item-header-and-footer-examples.tsx deleted file mode 100644 index 62e7ae4757..0000000000 --- a/apps/v4/examples/radix/item-header-and-footer-examples.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemFooter, - ItemHeader, - ItemTitle, -} from "@/examples/radix/ui/item" - -export function ItemHeaderAndFooterExamples() { - return ( - <> - - - Team Project - - - Website Redesign - - Complete overhaul of the company website with modern design - principles and improved user experience. - - - - - Updated 5 minutes ago - - - - - - Client Work - - - Mobile App Development - - Building a cross-platform mobile application for iOS and Android - with React Native. - - - - - Status: In Progress - - - - - - Documentation - - - API Integration Guide - - Step-by-step instructions for integrating third-party APIs with - authentication and error handling. - - - - - Category: Technical • 3 attachments - - - - - ) -} diff --git a/apps/v4/examples/radix/item-header-examples.tsx b/apps/v4/examples/radix/item-header-examples.tsx deleted file mode 100644 index 3c159e323f..0000000000 --- a/apps/v4/examples/radix/item-header-examples.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemHeader, - ItemTitle, -} from "@/examples/radix/ui/item" - -export function ItemHeaderExamples() { - return ( - <> - - - Design System - - - Component Library - - A comprehensive collection of reusable UI components for building - consistent interfaces. - - - - - - Marketing - - - Campaign Analytics - - Track performance metrics and engagement rates across all marketing - channels. - - - - - - Engineering - - - API Documentation - - Complete reference guide for all available endpoints and - authentication methods. - - - - - ) -} diff --git a/apps/v4/examples/radix/item-link-default.tsx b/apps/v4/examples/radix/item-link-default.tsx deleted file mode 100644 index 55d8216bb3..0000000000 --- a/apps/v4/examples/radix/item-link-default.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemGroup, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemLinkDefault() { - return ( - - - - - Title Only (Link) - - - - - - - Title + Description (Link) - - Clickable item with title and description. - - - - - - - - - - - Media + Title (Link) - - - - - - - - - - Media + Title + Description (Link) - - Complete link item with media, title, and description. - - - - - - - - With Actions (Link) - - Link item that also has action buttons. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-link-muted.tsx b/apps/v4/examples/radix/item-link-muted.tsx deleted file mode 100644 index e7472c2f32..0000000000 --- a/apps/v4/examples/radix/item-link-muted.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemGroup, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemLinkMuted() { - return ( - - - - - Title Only (Link) - - - - - - - Title + Description (Link) - - Clickable item with title and description. - - - - - - - - - - - Media + Title (Link) - - - - - - - - - - Media + Title + Description (Link) - - Complete link item with media, title, and description. - - - - - - - - With Actions (Link) - - Link item that also has action buttons. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-link-outline.tsx b/apps/v4/examples/radix/item-link-outline.tsx deleted file mode 100644 index c675040844..0000000000 --- a/apps/v4/examples/radix/item-link-outline.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemGroup, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemLinkOutline() { - return ( - - - - - Title Only (Link) - - - - - - - Title + Description (Link) - - Clickable item with title and description. - - - - - - - - - - - Media + Title (Link) - - - - - - - - - - Media + Title + Description (Link) - - Complete link item with media, title, and description. - - - - - - - - With Actions (Link) - - Link item that also has action buttons. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-muted-extra-small.tsx b/apps/v4/examples/radix/item-muted-extra-small.tsx deleted file mode 100644 index d29e1d3dcd..0000000000 --- a/apps/v4/examples/radix/item-muted-extra-small.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemMutedExtraSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - - - - Title + Description + Button - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - - - - - - - Media + Title + Description + Button - - - - - - - - Multiple Actions - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-muted-small.tsx b/apps/v4/examples/radix/item-muted-small.tsx deleted file mode 100644 index 43fcd0d5fc..0000000000 --- a/apps/v4/examples/radix/item-muted-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemMutedSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-muted-with-image.tsx b/apps/v4/examples/radix/item-muted-with-image.tsx deleted file mode 100644 index ac6a7c7f4f..0000000000 --- a/apps/v4/examples/radix/item-muted-with-image.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" - -export function ItemMutedWithImage() { - return ( - <> - - - Project - - - Project Dashboard - - Overview of project settings and configuration. - - - - - - Document - - - Document - A document with metadata displayed. - - - - - - - - File - - - File Attachment - - Complete file with image, title, description, and action button. - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-muted.tsx b/apps/v4/examples/radix/item-muted.tsx deleted file mode 100644 index f32e1466d5..0000000000 --- a/apps/v4/examples/radix/item-muted.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function MutedVariantItems() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-outline-extra-small.tsx b/apps/v4/examples/radix/item-outline-extra-small.tsx deleted file mode 100644 index dff3636f85..0000000000 --- a/apps/v4/examples/radix/item-outline-extra-small.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemOutlineExtraSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - - - - Title + Description + Button - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - - - - - - - Media + Title + Description + Button - - - - - - - - Multiple Actions - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-outline-small.tsx b/apps/v4/examples/radix/item-outline-small.tsx deleted file mode 100644 index f9443228b1..0000000000 --- a/apps/v4/examples/radix/item-outline-small.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemOutlineSmall() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-outline-with-image-extra-small.tsx b/apps/v4/examples/radix/item-outline-with-image-extra-small.tsx deleted file mode 100644 index af8e13b90c..0000000000 --- a/apps/v4/examples/radix/item-outline-with-image-extra-small.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" - -export function ItemOutlineWithImageExtraSmall() { - return ( - <> - - - Project - - - Project Dashboard - - - - - Document - - - Document - - - - - - - - File - - - File Attachment - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-outline-with-image-small.tsx b/apps/v4/examples/radix/item-outline-with-image-small.tsx deleted file mode 100644 index 82a479096f..0000000000 --- a/apps/v4/examples/radix/item-outline-with-image-small.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" - -export function ItemOutlineWithImageSmall() { - return ( - <> - - - Project - - - Project Dashboard - - Overview of project settings and configuration. - - - - - - Document - - - Document - A document with metadata displayed. - - - - - - - - File - - - File Attachment - - Complete file with image, title, description, and action button. - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-outline-with-image.tsx b/apps/v4/examples/radix/item-outline-with-image.tsx deleted file mode 100644 index 513ee7c7a4..0000000000 --- a/apps/v4/examples/radix/item-outline-with-image.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Image from "next/image" -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" - -export function OutlineVariantItemsWithImage() { - return ( - <> - - - Project - - - Project Dashboard - - Overview of project settings and configuration. - - - - - - Document - - - Document - A document with metadata displayed. - - - - - - - - File - - - File Attachment - - Complete file with image, title, description, and action button. - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-outline.tsx b/apps/v4/examples/radix/item-outline.tsx deleted file mode 100644 index 6b5e03e480..0000000000 --- a/apps/v4/examples/radix/item-outline.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Button } from "@/examples/radix/ui/button" -import { - Item, - ItemActions, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function OutlineVariantItems() { - return ( - <> - - - Title Only - - - - - Title + Button - - - - - - - - Title + Description - - This is a description that provides additional context. - - - - - - Title + Description + Button - - This item includes a title, description, and action button. - - - - - - - - - - - - Media + Title - - - - - - - - Media + Title + Button - - - - - - - - - - - Media + Title + Description - - This item includes media, title, and description. - - - - - - - - - Media + Title + Description + Button - - Complete item with all components: media, title, description, and - button. - - - - - - - - - Multiple Actions - - Item with multiple action buttons in the actions area. - - - - - - - - - ) -} diff --git a/apps/v4/examples/radix/item-separator-example.tsx b/apps/v4/examples/radix/item-separator-example.tsx deleted file mode 100644 index fbf048b7bc..0000000000 --- a/apps/v4/examples/radix/item-separator-example.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemGroup, - ItemMedia, - ItemSeparator, - ItemTitle, -} from "@/examples/radix/ui/item" -import { InboxIcon } from "lucide-react" - -export function ItemSeparatorExample() { - return ( - - - - - - - Inbox - View all incoming messages. - - - - - - - - - Sent - View all sent messages. - - - - - - - - - Drafts - View all draft messages. - - - - - - - - - Archive - View archived messages. - - - - ) -} diff --git a/apps/v4/examples/radix/item-size.tsx b/apps/v4/examples/radix/item-size.tsx index 85be733c7f..4b9d2722b7 100644 --- a/apps/v4/examples/radix/item-size.tsx +++ b/apps/v4/examples/radix/item-size.tsx @@ -1,42 +1,43 @@ -import { Button } from "@/examples/radix/ui/button" import { Item, - ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle, } from "@/examples/radix/ui/item" -import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react" +import { InboxIcon } from "lucide-react" export function ItemSizeDemo() { return (
+ + + - Basic Item + Default Size - A simple item with title and description. + The standard size for most use cases. - - - - - - - - - - Your profile has been verified. - - - - - + + + + + + Small Size + A compact size for dense layouts. + + + + + + + + Extra Small Size + The most compact size available. +
) diff --git a/apps/v4/examples/radix/item-variant.tsx b/apps/v4/examples/radix/item-variant.tsx index 37e4b7ec99..6184d5d37f 100644 --- a/apps/v4/examples/radix/item-variant.tsx +++ b/apps/v4/examples/radix/item-variant.tsx @@ -1,53 +1,47 @@ -import { Button } from "@/examples/radix/ui/button" import { Item, - ItemActions, ItemContent, ItemDescription, + ItemMedia, ItemTitle, } from "@/examples/radix/ui/item" +import { InboxIcon } from "lucide-react" export function ItemVariant() { return ( -
+
+ + + Default Variant - Standard styling with subtle background and borders. + Transparent background with no border. - - - + + + Outline Variant - Outlined style with clear borders and transparent background. + Outlined style with a visible border. - - - + + + Muted Variant - Subdued appearance with muted colors for secondary content. + Muted background for secondary content. - - -
)