docs: document dialog, input and label components

docs/content/docs/components/card.mdx

@@ -15,8 +15,8 @@ description: A card is a flexible and extensible content container.
 ## Usage
 
 <Card className="max-w-sm">
- <div className="w-full flex justify-center items-center bg-default-50 rounded-t-lg h-60">
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
+ <div className="w-full flex justify-center items-center bg-default-50 rounded-t-lg h-64 overflow-hidden">
+ <img src="/example-sebastian.jpeg" className='object-cover' />
  </div>
  <CardHeader>
  <CardTitle className="[&>p]:m-0 p-0 m-0 !text-4xl">
@@ -69,8 +69,8 @@ function App() {
 ### Card with horizontal orientation
 
 <Card orientation="horizontal">
- <div className="max-w-sm w-2/5 flex justify-center items-center bg-default-50 rounded-l-lg h-64">
- <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
+ <div className="max-w-sm w-2/5 flex justify-center items-center rounded-l-lg h-64 overflow-hidden">
+ <img src="/example-sebastian.jpeg" className='object-cover h-full' />
  </div>
  <div className='w-3/5'>
  <CardHeader>

docs/content/docs/components/dialog.mdx

@@ -1,4 +1,103 @@
 ---
 title: Dialog
 description: A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.
----
+---
+
+# Imports
+
+- **Dialog**: The main component to display a dialog.
+- **DialogOverlay**: The overlay component to display a dialog.
+- **DialogPortal**: The portal component to display a dialog.
+- **DialogClose**: The close button component to close a dialog.
+- **DialogDescription**: The description component to display a dialog.
+- **DialogTitle**: The title component to display a dialog.
+- **DialogTrigger**: The trigger component to display a dialog.
+- **DialogHeader**: The header component to display a dialog.
+- **DialogContent**: The content component to display a dialog.
+- **DialogFooter**: The footer component to display a dialog.
+
+## Usage
+
+<Dialog>
+ <div className='flex justify-center'>
+ <DialogTrigger asChild>
+ <Button outline="default" >Edit Profile</Button>
+ </DialogTrigger>
+ </div>
+ <DialogContent className="sm:max-w-[425px]">
+ <DialogHeader>
+ <DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle>
+ <DialogDescription className="font-light">
+ say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something
+ </DialogDescription>
+ </DialogHeader>
+ <div className='flex flex-col gap-1'>
+ <Label htmlFor="name">
+ Name
+ </Label>
+ <Input
+ id="name"
+ defaultValue="Sebastian Garcias"
+ className="col-span-3"
+ />
+ </div>
+ <div className='flex flex-col gap-1'>
+ <Label htmlFor="username">
+ Username
+ </Label>
+ <Input
+ id="username"
+ defaultValue="@Sebasjs"
+ className="col-span-3"
+ />
+ </div>
+ <DialogFooter>
+ <Button type="submit">Confirm</Button>
+ </DialogFooter>
+ </DialogContent>
+</Dialog>
+
+```jsx
+import { Dialog, DialogOverlay, DialogPortal, DialogClose, DialogDescription, DialogTitle, DialogTrigger, DialogHeader, DialogContent, DialogFooter,} from '@openlite/ui'
+
+function App() {
+ return(
+ <Dialog>
+ <DialogTrigger asChild>
+ <Button outline="default" >Edit Profile</Button>
+ </DialogTrigger>
+ <DialogContent className="sm:max-w-[425px]">
+ <DialogHeader>
+ <DialogTitle className="font-bold text-3xl">Lorem ipsum </DialogTitle>
+ <DialogDescription className="font-light">
+ say somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay somethingsay something
+ </DialogDescription>
+ </DialogHeader>
+ <div className='flex flex-col gap-1'>
+ <Label htmlFor="name">
+ Name
+ </Label>
+ <Input
+ id="name"
+ defaultValue="Sebastian Garcias"
+ className="col-span-3"
+ />
+ </div>
+ <div className='flex flex-col gap-1'>
+ <Label htmlFor="username">
+ Username
+ </Label>
+ <Input
+ id="username"
+ defaultValue="@Sebasjs"
+ className="col-span-3"
+ />
+ </div>
+ <DialogFooter>
+ <Button type="submit">Confirm</Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+}
+```

docs/content/docs/components/input.mdx

@@ -1,4 +1,81 @@
 ---
 title: Input
 description: An input is a field used to elicit a response from a user.
----
+---
+
+# Import
+
+- **Input**: The main component to display an input.
+
+## Usage
+
+<Input placeholder="Email" />
+
+```jsx
+import {Input} from '@openlite/ui'
+
+function App() {
+ return(
+ <Input placeholder="Email" />
+ )
+}
+```
+
+## Examples
+
+### Rounded
+
+<div className='grid grid-cols-2 gap-4'>
+ <Input rounded="none" placeholder="Email" />
+ <Input rounded="sm" placeholder="Email" />
+ <Input rounded="md" placeholder="Email" />
+ <Input rounded="lg" placeholder="Email" />
+</div>
+
+```jsx
+import {Input} from '@openlite/ui'
+
+function App() {
+ return(
+ <>
+ <Input rounded="none" placeholder="Email" />
+ <Input rounded="sm" placeholder="Email" />
+ <Input rounded="md" placeholder="Email" />
+ <Input rounded="lg" placeholder="Email" />
+ </>
+ )
+}
+```
+
+### Border
+
+<div className='grid grid-cols-2 gap-4'>
+ <Input border="none" placeholder="Email" />
+ <Input border="sm" placeholder="Email" />
+ <Input border="md" placeholder="Email" />
+ <Input border="lg" placeholder="Email" />
+</div>
+
+```jsx
+import {Input} from '@openlite/ui'
+
+function App() {
+ return(
+ <>
+ <Input border="none" placeholder="Email" />
+ <Input border="sm" placeholder="Email" />
+ <Input border="md" placeholder="Email" />
+ <Input border="lg" placeholder="Email" />
+ </>
+ )
+}
+```
+
+## API
+
+### Input Props
+
+| Props | Type | Description |
+| ----- | ---- | ----------- |
+| rounded | `'none' \| 'sm' \| 'md' \| 'lg' ` | The rounded of the input. |
+| border | `'none' \| 'sm' \| 'md' \| 'lg' ` | The border of the input. |

docs/content/docs/components/label.mdx

@@ -1,4 +1,83 @@
 ---
 title: Label
 description: A label is a small piece of UI that communicates the status of an element.
----
+---
+
+# Import
+
+- **Label**: The main component to display a label.
+
+## Usage
+
+<Label>Label</Label>
+
+```jsx
+import {Label} from '@openlite/ui'
+
+function App() {
+ return(
+ <Label>Label</Label>
+ )
+}
+```
+
+## Examples
+
+### Variants
+
+<div className='flex gap-4 flex-wrap'>
+ <Label variant="none">Label none</Label>
+ <Label variant="default">Label default</Label>
+ <Label variant="primary">Label primary</Label>
+ <Label variant="success">Label success</Label>
+ <Label variant="warn">Label warn</Label>
+ <Label variant="error">Label error</Label>
+</div>
+
+```jsx
+import {Label} from '@openlite/ui'
+
+function App() {
+ return(
+ <>
+ <Label variant="none">Label none</Label>
+ <Label variant="default">Label default</Label>
+ <Label variant="primary">Label primary</Label>
+ <Label variant="success">Label success</Label>
+ <Label variant="warn">Label warn</Label>
+ <Label variant="error">Label error</Label>
+ </>
+ )
+}
+```
+
+### Size
+
+<div className='flex gap-4'>
+ <Label size="sm">Label</Label>
+ <Label size="md">Label</Label>
+ <Label size="lg">Label</Label>
+</div>
+
+```jsx
+import {Label} from '@openlite/ui'
+
+function App() {
+ return(
+ <>
+ <Label size="sm">Label</Label>
+ <Label size="md">Label</Label>
+ <Label size="lg">Label</Label>
+ </>
+ )
+}
+```
+
+## API
+
+### Label Props
+
+| Props | Type | Description |
+| ----- | ---- | ----------- |
+| variant | `'none' \| 'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The variant of the label. |
+| size | `'sm' \| 'md' \| 'lg'` | The size of the label. |

docs/mdx-components.tsx

@@ -13,7 +13,7 @@ import type { ReactNode } from 'react'
 import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup'
 import { cn } from '@openlite/ui/tailwind'
 
-import { AccordionContent, AccordionItem, AccordionTrigger, Accordion as AccordionUi, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox } from '@openlite/ui'
+import { AccordionContent, AccordionItem, AccordionTrigger, Accordion as AccordionUi, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label } from '@openlite/ui'
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
@@ -55,6 +55,18 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
  CardDescription,
  CardFooter,
  Checkbox,
+ Dialog,
+ DialogOverlay,
+ DialogPortal,
+ DialogClose,
+ DialogDescription,
+ DialogTitle,
+ DialogTrigger,
+ DialogHeader,
+ DialogContent,
+ DialogFooter,
+ Input,
+ Label,
  Callout,
  TypeTable,
  Accordion,

src/plugins/components/label.ts

@@ -11,13 +11,13 @@ import { cva } from 'class-variance-authority'
  * </Label>
  */
 export const label = cva(
- 'text-small font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+ 'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
  {
  variants: {
  size: {
- sm: 'text-small',
- md: 'text-medium',
- lg: 'text-large',
+ sm: 'text-sm',
+ md: 'text-md',
+ lg: 'text-lg',
  },
  variant: {
  none: 'text-foreground/70',