diff --git a/docs/content/docs/components/alert.mdx b/docs/content/docs/components/alert.mdx index 34eed4b..2be726d 100644 --- a/docs/content/docs/components/alert.mdx +++ b/docs/content/docs/components/alert.mdx @@ -1,4 +1,194 @@ --- title: Alert description: Displays a callout for user attention. ---- \ No newline at end of file +--- + +## Imports + +- **Alert**: The main component to display a list of accordion items. +- **AlertTitle**: The title component to display the title of the accordion item. +- **AlertDescription**: The content component to show the hidden content of the accordion. + +## Usage + + + + Alert default + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + +```jsx +import * as React from 'react' +import { Alert, AlertTitle, AlertDescription } from '@openlite/ui' + +function App() { + return ( + + + Success + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + ) +} +``` + +## Examples + +### Primary + + + + Primary + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + +```jsx +import * as React from 'react' +import { Alert, AlertTitle, AlertDescription } from '@openlite/ui' + +function App() { + return ( + + + Primary + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + ) +} +``` + +### Success + + + + Success + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + +```jsx +import * as React from 'react' +import { Alert, AlertTitle, AlertDescription } from '@openlite/ui' + +function App() { + return ( + + + Success + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + ) +} +``` + +### Warn + + + + Warning + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + +```jsx +import * as React from 'react' +import { Alert, AlertTitle, AlertDescription } from '@openlite/ui' + +function App() { + return ( + + + Warning + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + ) +} +``` + +### Error + + + + Error + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + +```jsx +import * as React from 'react' +import { Alert, AlertTitle, AlertDescription } from '@openlite/ui' + +function App() { + return ( + + + Error + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + ) +} +``` + +### Rounded + + + + Primary + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + +```jsx +import * as React from 'react' +import { Alert, AlertTitle, AlertDescription } from '@openlite/ui' + +function App() { + return ( + + Primary + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, + voluptatum? + + + ) +} +``` + +## API + +### Alert Props + +| Props | Type | Description | +| --- | --- | --- | +| `variant` | `'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The variant of the alert. | +| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg'` | The rounded of the alert. | diff --git a/docs/content/docs/components/aspect-ratio.mdx b/docs/content/docs/components/aspect-ratio.mdx index 02c2b37..a7d315f 100644 --- a/docs/content/docs/components/aspect-ratio.mdx +++ b/docs/content/docs/components/aspect-ratio.mdx @@ -1,4 +1,37 @@ --- title: Aspect Ratio description: Maintain the aspect ratio of an element. ---- \ No newline at end of file +--- + +## Imports + +- **AspectRatio**: The main component to display a list of accordion items. + +## Usage +
+ + Aspect Ratio + +
+ +```jsx +import * as React from 'react' +import { AspectRatio } from '@openlite/ui' + +function App() { + return ( + + Aspect Ratio + + ) +} +``` + +## API + +### AspectRatio Props + +| Props | Type | Description | +| --- | --- | --- | +| `ratio` | `string` \| `number` \| `AspectRatioObject` | The ratio of the aspect ratio. | diff --git a/docs/content/docs/components/avatar.mdx b/docs/content/docs/components/avatar.mdx index 0bc7e37..4b52506 100644 --- a/docs/content/docs/components/avatar.mdx +++ b/docs/content/docs/components/avatar.mdx @@ -1,4 +1,63 @@ --- title: Avatar description: An avatar is a graphical representation of a user or the user's character. ---- \ No newline at end of file +--- + +## Imports + +- **Avatar**: The main component to display a list of accordion items. +- **AvatarImage**: The image component to display the image of the avatar. +- **AvatarFallback**: The fallback component to display the fallback of the avatar. + +## Usage + + + + + CN + + +```jsx +import * as React from 'react' +import { Avatar, AvatarImage, AvatarFallback } from '@openlite/ui' + +function App() { + return ( + + + GE + + ) +} +``` + +## Examples + +### Size + + + + GE + + +```jsx +import * as React from 'react' +import { Avatar, AvatarImage, AvatarFallback } from '@openlite/ui' + +function App() { + return ( + + + GE + + ) +} +``` + +## API + +### Avatar Props + +| Props | Type | Description | +| --- | --- | --- | +| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | The size of the avatar. | diff --git a/docs/content/docs/components/badge.mdx b/docs/content/docs/components/badge.mdx index 6a3f09e..3c846e4 100644 --- a/docs/content/docs/components/badge.mdx +++ b/docs/content/docs/components/badge.mdx @@ -1,4 +1,133 @@ --- title: Badge description: A small status descriptor for UI elements. ---- \ No newline at end of file +--- + +## Imports + +- **Badge**: The main component to display a list of accordion items. + +## Usage + + + Default + + +```jsx +import * as React from 'react' +import { Badge } from '@openlite/ui' + +function App() { + return ( + + Default + + ) +} +``` + +## Examples + +### Primary + + + Primary + + +```jsx +import * as React from 'react' +import { Badge } from '@openlite/ui' + +function App() { + return ( + + Primary + + ) +} +``` + +### Success + + + Success + + +```jsx +import * as React from 'react' +import { Badge } from '@openlite/ui' + +function App() { + return ( + + Success + + ) +} +``` + +### Warn + + + Warn + + +```jsx +import * as React from 'react' +import { Badge } from '@openlite/ui' + +function App() { + return ( + + Warn + + ) +} +``` + +### Error + + + Error + + +```jsx +import * as React from 'react' +import { Badge } from '@openlite/ui' + +function App() { + return ( + + Error + + ) +} +``` + +### Rounded + + + Rounded + + +```jsx +import * as React from 'react' +import { Badge } from '@openlite/ui' + +function App() { + return ( + + Rounded + + ) +} +``` + +## API + +### Badge Props + +| Props | Type | Description | +| --- | --- | --- | +| `variant` | `'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The variant of the badge. | +| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg'` | The rounded of the badge. | diff --git a/docs/content/docs/components/breadcrumb.mdx b/docs/content/docs/components/breadcrumb.mdx index 54f28d9..57a398c 100644 --- a/docs/content/docs/components/breadcrumb.mdx +++ b/docs/content/docs/components/breadcrumb.mdx @@ -1,4 +1,77 @@ --- title: Breadcrumb description: A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application. ---- \ No newline at end of file +--- + +## Imports + +- **Breadcrumb**: The main component to display a list of accordion items. +- **BreadcrumbList**: The list component to display the list of breadcrumb items. +- **BreadcrumbItem**: The item component to display the breadcrumb item. +- **BreadcrumbLink**: The link component to display the breadcrumb link. +- **BreadcrumbPage**: The page component to display the breadcrumb page. +- **BreadcrumbSeparator**: The separator component to display the breadcrumb separator. +- **BreadcrumbEllipsis**: The ellipsis component to display the breadcrumb ellipsis. + +## Usage + + + + + + Home + + + + + Library + + + + + Data + + + + + Bootstrap + + + + + +```jsx +import * as React from 'react' +import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from '@openlite/ui' + +function App() { + return ( + + + + + Home + + + + + Library + + + + + Data + + + + + Bootstrap + + + + + ) +} +``` + +## Examples diff --git a/docs/content/docs/components/button.mdx b/docs/content/docs/components/button.mdx index 3a4d56a..4be208e 100644 --- a/docs/content/docs/components/button.mdx +++ b/docs/content/docs/components/button.mdx @@ -1,4 +1,245 @@ --- title: Button description: A button is a user interface element that provides a way for users to interact with an application or a website. ---- \ No newline at end of file +--- + +## Imports + +- **Button**: The main component to display a list of accordion items. + +## Usage + + + +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( + + ) +} +``` + +## Examples + +### Primary + + + +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( + + ) +} +``` + +### Success + + + +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( + + ) +} +``` + +### Warn + + + +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( + + ) +} +``` + +### Error + + + +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( + + ) +} +``` + + +### Ghost + + + +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( + + ) +} +``` + +### Outline + +
+ + + + + +
+ +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( +
+ + + + + +
+ ) +} +``` + +### Size + +
+ + + + +
+ +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( +
+ + + + +
+ ) +} +``` + +### Rounded + + + +```jsx +import * as React from 'react' +import { Button } from '@openlite/ui' + +function App() { + return ( + + ) +} +``` + +## API + +### Button Props + +| Props | Type | Description | +| --- | --- | --- | +| `variant` | `'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The variant of the button. | +| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg'` | The rounded of the button. | +| `outline` | `'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The outline of the button. | +| `size` | `'sm' \| 'md' \| 'lg' \| 'icon'` | The size of the button. | +| `ripple` | `boolean` | The ripple of the button. | +| `rippleColor` | `'ligth' \| 'dark'` | The ripple color of the button. | \ No newline at end of file diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx index 0627aa3..4e85581 100644 --- a/docs/mdx-components.tsx +++ b/docs/mdx-components.tsx @@ -12,12 +12,13 @@ import { import type { ReactNode } from 'react' import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup' import { cn } from '@openlite/ui/tailwind' -import { Button } from '@openlite/ui' +import { Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button } from '@openlite/ui' export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...defaultComponents, Button, + AspectRatio, Popup, PopupContent, PopupTrigger, @@ -27,7 +28,21 @@ export function useMDXComponents(components: MDXComponents): MDXComponents { ), Tabs, + Alert, + Avatar, + AvatarImage, + AvatarFallback, + AlertDescription, + AlertTitle, Tab, + Badge, + Breadcrumb, + BreadcrumbList, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbPage, + BreadcrumbSeparator, + BreadcrumbEllipsis, Callout, TypeTable, Accordion, diff --git a/eslint.config.mjs b/eslint.config.mjs index 4b12396..ffa95ea 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -3,4 +3,5 @@ import eslint from '@antfu/eslint-config' export default eslint({ formatters: true, typescript: true, + markdown: true, }) diff --git a/src/components/elements/alert/alert-description.tsx b/src/components/elements/alert/alert-description.tsx index 980b5f0..671d582 100644 --- a/src/components/elements/alert/alert-description.tsx +++ b/src/components/elements/alert/alert-description.tsx @@ -5,10 +5,10 @@ import { alertDescription, cn } from '@/tailwind' export interface Comp extends HTMLParagraphElement {} export interface Props extends React.HTMLAttributes, VariantProps {} -const AlertDescription = React.forwardRef(({ className, size, ...props }, ref) => ( +const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
)) diff --git a/src/components/elements/alert/alert-title.tsx b/src/components/elements/alert/alert-title.tsx index daf58d9..e93db83 100644 --- a/src/components/elements/alert/alert-title.tsx +++ b/src/components/elements/alert/alert-title.tsx @@ -5,10 +5,10 @@ import { alertTitle, cn } from '@/tailwind' export interface Comp extends HTMLParagraphElement {} export interface Props extends React.HTMLAttributes, VariantProps {} -const AlertTitle = React.forwardRef(({ className, size, ...props }, ref) => ( +const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
)) diff --git a/src/plugins/components/alert.ts b/src/plugins/components/alert.ts index 9c32530..ed4c6a5 100644 --- a/src/plugins/components/alert.ts +++ b/src/plugins/components/alert.ts @@ -42,18 +42,7 @@ export const alert = cva('relative w-full p-4 [&>svg~*]:pl-8 [&>svg+div]:transla * // alert title elements * */ -export const alertTitle = cva('mb-2 font-semibold leading-none tracking-tight', { - variants: { - size: { - sm: 'text-small', - md: 'text-medium', - lg: 'text-large', - }, - }, - defaultVariants: { - size: 'md', - }, -}) +export const alertTitle = cva('mb-2 font-semibold leading-none tracking-tight') /** * Alert wrapper **Class Variants** component @@ -65,15 +54,4 @@ export const alertTitle = cva('mb-2 font-semibold leading-none tracking-tight', * // alert description elements * */ -export const alertDescription = cva('[&_p]:leading-relaxed', { - variants: { - size: { - sm: 'text-small', - md: 'text-medium', - lg: 'text-large', - }, - }, - defaultVariants: { - size: 'sm', - }, -}) +export const alertDescription = cva('[&_p]:leading-relaxed')