Components
diff --git a/www/content/docs/components/data-display/table.mdx b/www/content/docs/components/data-display/table.mdx
new file mode 100644
index 00000000..02e9201f
--- /dev/null
+++ b/www/content/docs/components/data-display/table.mdx
@@ -0,0 +1,193 @@
+---
+title: Table
+description: A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.
+links:
+ - label: Radix docs
+ href: https://www.radix-ui.com/primitives/docs/components/aspect-ratio
+ - label: Report an issue
+ href: https://github.com/mehdibha/dotUI/issues/new/choose
+ - label: Edit this page
+ href: https://github.com/mehdibha/dotUI/tree/main/content/components/layout/aspect-ratio.mdx?plain=1
+---
+
+
+
+## Installation
+
+```package-install
+npx dotui-cli@latest add table
+```
+
+## Anatomy
+
+A table consists of a container element, with columns and rows of cells containing data inside. The cells within a table may contain focusable elements or plain text content.
+
+```tsx
+import {
+ TableRoot,
+ TableHeader,
+ TableColumn,
+ TableBody,
+ TableRow,
+ TableCell,
+} from "@/components/core/table";
+
+
+
+ #
+ Name
+ Email
+
+
+
+ 1
+ Mehdi BHA
+ hello@mehdibha.com
+
+
+ 2
+ Devon Govett
+ devon@govett.com
+
+
+ 3
+ Theo Browne
+ theo@ping.gg
+
+
+ ;
+```
+
+## Variants
+
+Use the `variant` prop to change the appearance of the Table.
+
+
+
+## Dynamic collections
+
+The first example have shown static collections, where the data is hard coded. Dynamic collections, as shown below, can be used when the table data comes from an external data source such as an API, or updates over time. In the example below, both the columns and the rows are provided to the table via a render function. You can also make the columns static and only the rows dynamic.
+
+
+
+## Selection
+
+### Selection mode
+
+By default, Table doesn't allow row selection but this can be enabled using the `selectionMode` prop.
+
+
+
+### Uncontrolled selection
+
+Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the value of the selected keys must match the `id` prop of the row.
+
+
+
+### Controlled selection
+
+To programmatically control row selection, use the `selectedKeys` prop paired with the onSelectionChange callback. The `id` prop from the selected rows will be passed into the callback when the row is pressed, allowing you to update state accordingly.
+
+
+
+### Selection variant
+
+Use the `selectionVariant` prop to change the appearance of the selected rows.
+
+
+
+### Disallow empty selection
+
+Table also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the Table selected at all times. In this mode, if a single row is selected and the user presses it, it will not be deselected.
+
+
+
+### Selection Behavior
+
+You can control how multiple selection should behave in the collection using the `selectionBehavior` prop.
+
+
+
+## Row options
+
+### Action
+
+Table supports row actions via the `onRowAction` prop
+
+
+
+Rows may also have a row action specified by directly applying `onAction` on the Row itself. This may be especially convenient in static collections.
+
+
+
+### Link
+
+Table rows may also be links to another page or website. This can be achieved by passing the href prop to the `
` component.
+
+
+ 1
+ Mehdi BHA
+ hello@mehdibha.com
+
+```
+
+In dynamic collections, it may be more convenient to use the `disabledKeys` prop at the Table level instead of `isDisabled` on individual rows.
+
+` | - | A list of row keys to disable. |
+| `selectionMode` | `'none'\| 'single'\| 'multiple'` | - | The type of selection that is allowed in the collection. |
+| `disallowEmptySelection` | `boolean` | - | Whether the collection allows empty selection. |
+| `selectedKeys` | `'all' \| Iterable` | - | The currently selected keys in the collection (controlled). |
+| `defaultSelectedKeys` | `'all' \| Iterable` | - | The initial selected keys in the collection (uncontrolled). |
+| `sortDescriptor` | `SortDescriptor` | - | The current sorted column and direction. |
+| `className` | `string \| (values: TableRenderProps & {defaultClassName: string \| undefined}) => string` | - | The CSS className for the element. A function may be provided to compute the class based on component state. |
+| `style` | `CSSProperties \| (values: TableRenderProps & {defaultStyle: CSSProperties}) => CSSProperties` | - | The inline style for the element. A function may be provided to compute the style based on component state. |
+
+| Event | Type | Description |
+| ------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `onRowAction` | `(key: Key) => void` | Handler that is called when a user performs an action on the row. |
+| `onSelectionChange` | `(key: Selection) => void` | Handler that is called when the selection changes. |
+| `onSortChange` | `(descriptor: SortDescriptor) => any` | Handler that is called when the sorted column or direction changes. |
+| `onScroll` | `(e: UIEvent) => void` | Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). |
diff --git a/www/content/docs/components/date-and-time/calendar.mdx b/www/content/docs/components/date-and-time/calendar.mdx
new file mode 100644
index 00000000..63883d03
--- /dev/null
+++ b/www/content/docs/components/date-and-time/calendar.mdx
@@ -0,0 +1,289 @@
+---
+title: Calendar
+description: A component that allows users to select a single date.
+links:
+ - label: Aria docs
+ href: https://react-spectrum.adobe.com/react-aria/Calendar.html
+ - label: "@internationalized/date"
+ href: https://react-spectrum.adobe.com/internationalized/date/index.html
+ - label: Report an issue
+ href: https://github.com/mehdibha/dotUI/issues/new/choose
+ - label: Edit this page
+ href: https://github.com/mehdibha/dotUI/tree/main/content/components/date-and-time/calendar.mdx?plain=1
+---
+
+
+
+
+
+
+
+
+
+
+ {(day) => {day} }
+
+
+ {(date) =>
+
+ ;
+```
+
+### Best practices
+
+- An `aria-label` must be provided to the `Calendar` for accessibility. If it is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
+
+## Uncontrolled
+
+An initial, uncontrolled value can be provided to the `Calendar` using the `defaultValue` prop.
+
+(parseDate('2025-01-01'))
+return
+ isWeekend(date, locale) ||
+ disabledRanges.some(
+ (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+ {(day) => {day} }
+
+
+ {(date) =>
+
+ `}
+/>
+
+## API Reference
+
+| Prop | Type | Default | Description |
+| --------------------- | ----------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `visibleMonths` | `number` | `1` | The number of months to display at once. Up to 3 months are supported. |
+| `minValue` | `DateValue` | - | The minimum allowed date that a user may select. |
+| `maxValue` | `DateValue` | - | The maximum allowed date that a user may select. |
+| `isDateUnavailable` | `(date: DateValue) => boolean` | - | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
+| `isDisabled` | `boolean` | `false` | Whether the calendar is disabled. |
+| `isReadOnly` | `boolean` | `false` | Whether the calendar value is immutable. |
+| `autoFocus` | `boolean` | `false` | Whether to automatically focus the calendar when it mounts. |
+| `focusedValue` | `DateValue` | - | Controls the currently focused date within the calendar. |
+| `defaultFocusedValue` | `DateValue` | - | The date that is focused when the calendar first mounts (uncountrolled). |
+| `isInvalid` | `boolean` | - | Whether the current selection is invalid according to application logic. |
+| `pageBehavior` | `'single' \| 'visible'` | `'visible'` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
+| `value` | `DateValue \| null` | - | The current value (controlled). |
+| `defaultValue` | `DateValue \| null` | - | The default value (uncontrolled). |
+| `children` | `ReactNode \| (values: CalendarRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode` | - | The children of the component. A function may be provided to alter the children based on component state. |
+| `className` | `string` | - | The CSS className for the element. |
+| `style` | `CSSProperties \| (values: CalendarRenderProps & {defaultStyle: CSSProperties}) => CSSProperties` | - | The inline style for the element. A function may be provided to compute the style based on component state. |
+
+| Event | Type | Description |
+| --------------- | --------------------------------------------- | ----------------------------------------------------- |
+| `onFocusChange` | `(date: CalendarDate) => void` | Handler that is called when the focused date changes. |
+| `onChange` | `(value: MappedDateValue) => void` | Handler that is called when the value changes. |
+
+## Accessibility
+
+### Keyboard interactions
+
+| Key | Description |
+| --------------- | ------------------------------------------------------------- |
+| `Tab` | Moves focus to the next focusable item in the calendar. |
+| `Shift+Tab` | Moves focus to the previous focusable item in the calendar. |
+| `ArrowRight` | Moves focus to the next day. |
+| `ArrowLeft` | Moves focus to the previous day. |
+| `ArrowDown` | Moves focus to the same day of the week in the next week. |
+| `ArrowUp` | Moves focus to the same day of the week in the previous week. |
+| `Space` `Enter` | Selects the focused date. |
diff --git a/www/content/docs/components/dates/date-field.mdx b/www/content/docs/components/date-and-time/date-field.mdx
similarity index 86%
rename from www/content/docs/components/dates/date-field.mdx
rename to www/content/docs/components/date-and-time/date-field.mdx
index bee6ccb5..a3ae112e 100644
--- a/www/content/docs/components/dates/date-field.mdx
+++ b/www/content/docs/components/date-and-time/date-field.mdx
@@ -1,52 +1,66 @@
---
title: Date Field
description: A date field allows users to enter and edit date and time values using a keyboard.
-thumbnail:
- image: /previews/components/core/date-field.jpeg
- video: /previews/components/core/date-field.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/DateField.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/DateField.html#props
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
- label: Edit this page
href: https://github.com/mehdibha/dotUI/tree/main/content/components/dates/date-field.mdx?plain=1
---
-
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add date-field
```
-
-
-
-
- Install the following dependencies:
+## Usage
- ```package-install
- react-aria-components
- ```
+Use a `DateField` to allow users to enter and edit time values using a keyboard.
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
+```tsx
+import { DateField } from "@/components/core/date-field";
-
-
+
+ Event date
+ Please select your event date.
+ ;
+```
+
+## Uncontrolled
+
+An initial, uncontrolled value can be provided to the `DateField` using the `defaultValue` prop.
+
+
Meeting time
-
- {(segment) =>
-
+ Please select a time between 9 AM and 5 PM.
`}
/>
diff --git a/www/content/docs/components/dates/date-picker.mdx b/www/content/docs/components/date-and-time/date-picker.mdx
similarity index 91%
rename from www/content/docs/components/dates/date-picker.mdx
rename to www/content/docs/components/date-and-time/date-picker.mdx
index 6e54e612..f8feeb2b 100644
--- a/www/content/docs/components/dates/date-picker.mdx
+++ b/www/content/docs/components/date-and-time/date-picker.mdx
@@ -1,9 +1,6 @@
---
title: Date Picker
description: DatePicker combine a DateField and a Calendar overlay to allow users to enter or select a date and time value.
-thumbnail:
- image: /previews/components/core/date-picker.jpeg
- video: /previews/components/core/date-picker.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/DatePicker.html
@@ -15,35 +12,14 @@ links:
href: https://github.com/mehdibha/dotUI/tree/main/content/components/dates/date-picker.mdx?plain=1
---
-
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add date-picker
```
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
## Usage
Use a `DatePicker` to allow users to enter and edit time values.
@@ -55,7 +31,7 @@ Use a `DatePicker` to allow users to enter and edit time values.
A visual label can be provided for the `DatePicker` using the label prop or a hidden `label` using `aria-label` prop.
Meeting date
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add date-range-picker
```
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
## Usage
Use a `DateRangePicker` to allow users to enter and edit time values.
@@ -49,7 +25,7 @@ Use a `DateRangePicker` to allow users to enter and edit time values.
A visual label can be provided for the `DateRangePicker` using the label prop or a hidden label using `aria-label` prop.
Meeting date
+
+
+
+
+
+
+
+
+ {(day) => {day} }
+
+
+ {(date) =>
+
+ ;
+```
+
+### Best practices
+
+- An `aria-label` must be provided to the `RangeCalendar` for accessibility. If it is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
+
+## Uncontrolled
+
+An initial, uncontrolled value can be provided to the `RangeCalendar` using the `defaultValue` prop.
+
+({
+ start: parseDate("2020-02-03"),
+ end: parseDate("2020-02-12"),
+ });
+ return
+ disabledRanges.some(
+ (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
+ );
+
+ return (
+
+ disabledRanges.some(
+ (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
+ );
+ return (
+ 7;
+ return (
+
+
+
+
+
+
+
+
+
+ {(day) => {day} }
+
+
+ {(date) =>
+
+ `}
+/>
+
+## API Reference
+
+| Prop | Type | Default | Description |
+| --------------------- | ---------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `visibleMonths` | `number` | `1` | The number of months to display at once. Up to 3 months are supported. |
+| `minValue` | `DateValue` | - | The minimum allowed date that a user may select. |
+| `maxValue` | `DateValue` | - | The maximum allowed date that a user may select. |
+| `isDateUnavailable` | `(date: DateValue) => boolean` | - | Callback that is called for each date of the range calendar. If it returns true, then the date is unavailable. |
+| `isDisabled` | `boolean` | `false` | Whether the range calendar is disabled. |
+| `isReadOnly` | `boolean` | `false` | Whether the range calendar value is immutable. |
+| `autoFocus` | `boolean` | `false` | Whether to automatically focus the range calendar when it mounts. |
+| `focusedValue` | `DateValue` | - | Controls the currently focused date within the range calendar. |
+| `defaultFocusedValue` | `DateValue` | - | The date that is focused when the range calendar first mounts (uncountrolled). |
+| `isInvalid` | `boolean` | - | Whether the current selection is invalid according to application logic. |
+| `pageBehavior` | `'single' \| 'visible'` | `'visible'` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
+| `value` | `RangeValue \| null` | - | The current value (controlled). |
+| `defaultValue` | `RangeValue \| null` | - | The default value (uncontrolled). |
+| `children` | `ReactNode \| (values: RangeCalendarRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode` | - | The children of the component. A function may be provided to alter the children based on component state. |
+| `className` | `string` | - | The CSS className for the element. |
+| `style` | `CSSProperties \| (values: RangeCalendarRenderProps & {defaultStyle: CSSProperties}) => CSSProperties` | - | The inline style for the element. A function may be provided to compute the style based on component state. |
+
+| Event | Type | Description |
+| --------------- | --------------------------------------------------------- | ----------------------------------------------------- |
+| `onFocusChange` | `(date: CalendarDate) => void` | Handler that is called when the focused date changes. |
+| `onChange` | `(value: RangeValue>) => void` | Handler that is called when the value changes. |
+
+## Accessibility
+
+### Keyboard interactions
+
+| Key | Description |
+| --------------- | ----------------------------------------------------------------- |
+| `Tab` | Moves focus to the next focusable item in the range calendar. |
+| `Shift+Tab` | Moves focus to the previous focusable item in the range calendar. |
+| `ArrowRight` | Moves focus to the next day. |
+| `ArrowLeft` | Moves focus to the previous day. |
+| `ArrowDown` | Moves focus to the same day of the week in the next week. |
+| `ArrowUp` | Moves focus to the same day of the week in the previous week. |
+| `Space` `Enter` | Selects the focused date. |
diff --git a/www/content/docs/components/dates/time-field.mdx b/www/content/docs/components/date-and-time/time-field.mdx
similarity index 83%
rename from www/content/docs/components/dates/time-field.mdx
rename to www/content/docs/components/date-and-time/time-field.mdx
index 1a3f2433..8f246949 100644
--- a/www/content/docs/components/dates/time-field.mdx
+++ b/www/content/docs/components/date-and-time/time-field.mdx
@@ -1,52 +1,69 @@
---
title: Time Field
description: TimeFields allow users to enter and edit time values using a keyboard.
-thumbnail:
- image: /previews/components/core/time-field.jpeg
- video: /previews/components/core/time-field.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/TimeField.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/TimeField.html#props
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
- label: Edit this page
href: https://github.com/mehdibha/dotUI/tree/main/content/components/dates/time-field.mdx?plain=1
---
-
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add time-field
```
-
-
-
-
- Install the following dependencies:
+## Usage
- ```package-install
- react-aria-components
- ```
+Use a `TimeField` to allow users to enter and edit time values using a keyboard.
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
+```tsx
+import { TimeField } from "@/components/core/time-field";
-
-
+
+ Meeting time
+ Please select a time between 9 AM and 5 PM.
+ ;
+```
-Use a `TimeField` to allow users to enter and edit time values using a keyboard.
+## Uncontrolled
+
+An initial, uncontrolled value can be provided to the `TimeField` using the `defaultValue` prop.
+
+
Meeting time
-
- {(segment) =>
-
+ Please select a time between 9 AM and 5 PM.
+
-
-
- ```package-install
-npx dotui-cli@latest add calendar
-```
-
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
-## Usage
-
-Use `Calendar` to allow users to select a single date.
-
-## Options
-
-### Label
-
-An `aria-label` must be provided to the Calendar for accessibility. If it is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
-
-
- isWeekend(date, locale) ||
- disabledRanges.some(
- (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
- );
-
- return (
- ) => void` | Handler that is called when the value changes. |
-
-## Accessibility
-
-### Keyboard interactions
-
-| Key | Description |
-| --------------- | ------------------------------------------------------------- |
-| `Tab` | Moves focus to the next focusable item in the calendar. |
-| `Shift+Tab` | Moves focus to the previous focusable item in the calendar. |
-| `ArrowRight` | Moves focus to the next day. |
-| `ArrowLeft` | Moves focus to the previous day. |
-| `ArrowDown` | Moves focus to the same day of the week in the next week. |
-| `ArrowUp` | Moves focus to the same day of the week in the previous week. |
-| `Space` `Enter` | Selects the focused date. |
diff --git a/www/content/docs/components/dates/range-calendar.mdx b/www/content/docs/components/dates/range-calendar.mdx
deleted file mode 100644
index 7f0a202a..00000000
--- a/www/content/docs/components/dates/range-calendar.mdx
+++ /dev/null
@@ -1,283 +0,0 @@
----
-title: Range Calendar
-description: A component that allows users to select a range of dates.
-thumbnail:
- image: /previews/components/core/range-calendar.jpeg
- video: /previews/components/core/range-calendar.mp4
-links:
- - label: Aria docs
- href: https://react-spectrum.adobe.com/react-aria/RangeCalendar.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#props
- - label: Report an issue
- href: https://github.com/mehdibha/dotUI/issues/new/choose
- - label: Edit this page
- href: https://github.com/mehdibha/dotUI/tree/main/content/components/dates/range-calendar.mdx?plain=1
----
-
-
-
-
- ```package-install
-npx dotui-cli@latest add range-calendar
-```
-
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
-## Usage
-
-Use `RangeCalendar` to allow users to select a contiguous or non-contiguous range of dates.
-
-## Options
-
-### Label
-
-An `aria-label` must be provided to the `RangeCalendar` for accessibility. If it is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
-
- 7;
- return (
-
- disabledRanges.some(
- (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
- );
-
- return (
-
- disabledRanges.some(
- (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
- );
- return (
- ({
- start: today(getLocalTimeZone()),
- end: today(getLocalTimeZone()).add({ weeks: 1 }),
- });
- return
-
-
-
-
-
-
-
-
- {(day) => {day} }
-
-
- {(date) => (
-
- {({ formattedDate }) => {formattedDate} }
-
- )}
-
-
- `}
-/>
-
-## API Reference
-
-| Prop | Type | Default | Description |
-| --------------------- | ---------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `visibleMonths` | `number` | `1` | The number of months to display at once. Up to 3 months are supported. |
-| `minValue` | `DateValue` | - | The minimum allowed date that a user may select. |
-| `maxValue` | `DateValue` | - | The maximum allowed date that a user may select. |
-| `isDateUnavailable` | `(date: DateValue) => boolean` | - | Callback that is called for each date of the range calendar. If it returns true, then the date is unavailable. |
-| `isDisabled` | `boolean` | `false` | Whether the range calendar is disabled. |
-| `isReadOnly` | `boolean` | `false` | Whether the range calendar value is immutable. |
-| `autoFocus` | `boolean` | `false` | Whether to automatically focus the range calendar when it mounts. |
-| `focusedValue` | `DateValue` | - | Controls the currently focused date within the range calendar. |
-| `defaultFocusedValue` | `DateValue` | - | The date that is focused when the range calendar first mounts (uncountrolled). |
-| `isInvalid` | `boolean` | - | Whether the current selection is invalid according to application logic. |
-| `pageBehavior` | `'single' \| 'visible'` | `'visible'` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
-| `value` | `RangeValue \| null` | - | The current value (controlled). |
-| `defaultValue` | `RangeValue \| null` | - | The default value (uncontrolled). |
-| `children` | `ReactNode \| (values: RangeCalendarRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode` | - | The children of the component. A function may be provided to alter the children based on component state. |
-| `className` | `string` | - | The CSS className for the element. |
-| `style` | `CSSProperties \| (values: RangeCalendarRenderProps & {defaultStyle: CSSProperties}) => CSSProperties` | - | The inline style for the element. A function may be provided to compute the style based on component state. |
-
-| Event | Type | Description |
-| --------------- | --------------------------------------------------------- | ----------------------------------------------------- |
-| `onFocusChange` | `(date: CalendarDate) => void` | Handler that is called when the focused date changes. |
-| `onChange` | `(value: RangeValue>) => void` | Handler that is called when the value changes. |
-
-## Accessibility
-
-### Keyboard interactions
-
-| Key | Description |
-| --------------- | ----------------------------------------------------------------- |
-| `Tab` | Moves focus to the next focusable item in the range calendar. |
-| `Shift+Tab` | Moves focus to the previous focusable item in the range calendar. |
-| `ArrowRight` | Moves focus to the next day. |
-| `ArrowLeft` | Moves focus to the previous day. |
-| `ArrowDown` | Moves focus to the same day of the week in the next week. |
-| `ArrowUp` | Moves focus to the same day of the week in the previous week. |
-| `Space` `Enter` | Selects the focused date. |
diff --git a/www/content/docs/components/drag-and-drop/drop-zone.mdx b/www/content/docs/components/drag-and-drop/drop-zone.mdx
index d20de22d..36de76a7 100644
--- a/www/content/docs/components/drag-and-drop/drop-zone.mdx
+++ b/www/content/docs/components/drag-and-drop/drop-zone.mdx
@@ -1,14 +1,9 @@
---
title: Dropzone
description: A drop zone is an area into which one or multiple objects can be dragged and dropped.
-thumbnail:
- image: /previews/components/core/drop-zone.jpeg
- video: /previews/components/core/drop-zone.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/DropZone.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/DropZone.html#props
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
- label: Edit this page
@@ -16,45 +11,22 @@ links:
---
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add drop-zone
```
-
-
-
-
- Install the following dependencies:
+## Label
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
-## Options
-
-### Label
-
-A visual label can be provided for the `DropZone` using the `` component, or a hidden label using `aria-label` prop.
+A visual label can be provided for the `DropZone` using the `` component, or a hidden label using `aria-label` prop.
`}
/>
-### Disabled
+## Events
-Use the `isDisabled` prop to disable the drop zone.
+DropZone supports user interactions via mouse, keyboard, and touch. You can handle all of these via the `onDrop` prop. In addition, the `onDropEnter`, `onDropMove`, and `onDropExit` events are fired as the user interacts with the dropzone.
- Drag and drop files here
+ name="drop-zone/events"
+ preview={` {
+ {/* handle drop event */}
+ }}
+ >
+ Droppable
`}
/>
-## Examples
+## File trigger
-### File trigger
+To allow the selection of files from the user's device, pass FileTrigger as a child of DropZone.
Drag and drop files here
+ Drag and drop files here
Select files
`}
/>
+## Visual feedback
+
+A dropzone displays visual feedback to the user when a drag hovers over the drop target by passing the `getDropOperation` function. If a drop target only supports data of specific types (e.g. images, videos, text, etc.), then it should implement the `getDropOperation` prop and return `"cancel"` for types that aren't supported. This will prevent visual feedback indicating that the drop target accepts the dragged data when this is not true.
+
+ (types.has("image/png") ? "copy" : "cancel")}
+ >
+ {dropped ? "Successful drop!" : "Drop files here"}
+ `}
+/>
+
+## Options
+
+### Disabled
+
+Use the `isDisabled` prop to disable the drop zone.
+
+
+ Drag and drop files here
+ `}
+/>
+
## API Reference
+### DropZone
+
| Prop | Type | Default | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
| `getDropOperation` | `(types: DragTypes, allowedOperations: DropOperation[]) => DropOperation` | - | A function returning the drop operation to be performed when items matching the given types are dropped on the drop target. |
diff --git a/www/content/docs/components/feedback/alert.mdx b/www/content/docs/components/feedback/alert.mdx
index e75c24c5..0b4a692b 100644
--- a/www/content/docs/components/feedback/alert.mdx
+++ b/www/content/docs/components/feedback/alert.mdx
@@ -1,8 +1,6 @@
---
title: Alert
description: Displays a callout for user attention.
-thumbnail:
- image: /previews/components/core/alert.jpeg
links:
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
@@ -11,42 +9,33 @@ links:
---
You can add components to your app using the cli.`}
+ name="alert/default"
+ preview={`You can add components to your app using the cli. `}
+ fullWidth
+ resizable
/>
## Installation
-
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add alert
```
-
-
-
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
## Examples
### Variants
-Use the `variant` and `fill` props to change the visual style of the alert.
+Use the `variant` prop to change the visual style of the alert.
- You can add components to your app using the cli.
- `}
+ name="alert/variants"
+ preview={`
Enter your payment method to complete your purchase.
`}
+ fullWidth
+ resizable
/>
### Custom icon
@@ -74,8 +67,10 @@ Pass children to the alert to add content.
Use the `icon` prop to add a custom icon to the alert. An explicit `null` value can be used to remove the default icon.
Upgrade}
>
@@ -98,7 +93,7 @@ Use the `action` prop to add an action to the alert.
If you need to customize things further, you can drop down the composition pattern.
@@ -117,7 +112,7 @@ If you need to customize things further, you can drop down the composition patte
Alert accepts all HTML `div` element props and the following:
-| Prop | Type | Default | Description |
-| --------- | ---------------------------------------------------------- | ----------- | ------------------------------------------ |
-| `variant` | `'default' \| 'success \| 'warning' \| 'danger \| 'info' ` | `'default'` | The visual style of the alert. |
-| `fill` | `boolean` | `false` | Weather the visual style should be filled. |
+| Prop | Type | Default | Description |
+| --------- | ------------------------------------------------------------ | ----------- | ------------------------------------------ |
+| `variant` | `'default' \| 'success' \| 'warning' \| 'danger' \| 'info' ` | `'default'` | The visual style of the alert. |
+| `fill` | `boolean` | `false` | Weather the visual style should be filled. |
diff --git a/www/content/docs/components/feedback/meta.json b/www/content/docs/components/feedback/meta.json
index 2460acc1..df8dbe29 100644
--- a/www/content/docs/components/feedback/meta.json
+++ b/www/content/docs/components/feedback/meta.json
@@ -1,3 +1,3 @@
{
- "pages": ["alert", "progress", "skeleton"]
+ "pages": ["alert", "progress-bar"]
}
\ No newline at end of file
diff --git a/www/content/docs/components/feedback/progress-bar.mdx b/www/content/docs/components/feedback/progress-bar.mdx
new file mode 100644
index 00000000..7d8b2640
--- /dev/null
+++ b/www/content/docs/components/feedback/progress-bar.mdx
@@ -0,0 +1,187 @@
+---
+title: Progress Bar
+description: Progress bar show either determinate or indeterminate progress of an operation over time.
+links:
+ - label: Aria docs
+ href: https://react-spectrum.adobe.com/react-aria/ProgressBar.html
+ - label: Report an issue
+ href: https://github.com/mehdibha/dotUI/issues/new/choose
+ - label: Edit this page
+ href: https://github.com/mehdibha/dotUI/tree/main/content/components/feedback/progress.mdx?plain=1
+---
+
+
`}
+/>
+
+## Installation
+
+```package-install
+npx dotui-cli@latest add progress
+```
+
+## Anatomy
+
+```tsx
+import { ProgressBar } from "@/components/core/progress-bar";
+
+
;
+```
+
+```tsx
+import { Label } from "@/components/core/field";
+import {
+ ProgressBarRoot,
+ ProgressBarValueLabel,
+ ProgressBarIndicator,
+} from "@/components/core/progress-bar";
+
+
+
+ ;
+```
+
+## Visual options
+
+### Variant
+
+Use the `variant` prop to control the visual style of the `Progress`. The default variant is `"default"`.
+
+
+
+
+
+
`}
+/>
+
+### Size
+
+Use the `size` prop to control the size of the `Progress`. The default variant is `"md"`.
+
+
+
+
`}
+/>
+
+## Labelling
+
+### Label
+
+A visual label can be provided using the `label` prop, or a hidden label using `aria-label` prop.
+
+
+
`}
+/>
+
+### Value label
+
+Set the `showValueLabel` prop to `true` to display the current value of the progress bar.
+
+
`}
+/>
+
+### Format options
+
+Values are formatted as a percentage by default, but this can be modified by using the `formatOptions` prop to specify a different format.
+
+
`}
+/>
+
+### Custom value label
+
+The `valueLabel` prop allows the formatted value to be replaced with a custom string.
+
+
`}
+/>
+
+## Value
+
+### Value scale
+
+A custom value scale can be used by setting the `minValue` and `maxValue` props.
+
+
`}
+/>
+
+### Indeterminate
+
+The `isIndeterminate` prop can be used to represent an interdeterminate operation.
+
+
`}
+/>
+
+### Duration
+
+Use the `duration` prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation.
+
+
`}
+/>
+
+## Composition
+
+If you need to customize things further, you can drop down to the composition level.
+
+
+ Progress
+
-
-
- ```package-install
-npx dotui-cli@latest add progress
-```
-
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
-## Usage
-
-Use `Progress` to show the completion progress of a task. It can represent either determinate or indeterminate progress.
-
-### Best pratices
-
-When possible, use a determinate progress indicator.
- Progress
-
@@ -20,25 +19,10 @@ thumbnail:
## Installation
-
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add skeleton
```
-
-
-
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
## Usage
Use the `Skeleton` component to show a placeholder while content is loading.
@@ -50,7 +34,7 @@ Use the `Skeleton` component to show a placeholder while content is loading.
If you do not pass a fixed size, skeleton will take the size of the children.
Button
`}
@@ -61,7 +45,7 @@ If you do not pass a fixed size, skeleton will take the size of the children.
Use the `show` prop to show/hide the skeleton.
Button
@@ -77,7 +61,7 @@ Use the `show` prop to show/hide the skeleton.
{/* prettier-ignore-start */}
("idle");
const apiCall = () => {
{/* Simulate API call */}
@@ -102,7 +86,7 @@ Use the `show` prop to show/hide the skeleton.
If you do not pass a fixed size, it will be calculated automatically.
Button `}
/>
diff --git a/www/content/docs/components/inputs/checkbox-group.mdx b/www/content/docs/components/forms-and-inputs/checkbox-group.mdx
similarity index 88%
rename from www/content/docs/components/inputs/checkbox-group.mdx
rename to www/content/docs/components/forms-and-inputs/checkbox-group.mdx
index d1405e1a..9aa08789 100644
--- a/www/content/docs/components/inputs/checkbox-group.mdx
+++ b/www/content/docs/components/forms-and-inputs/checkbox-group.mdx
@@ -1,14 +1,9 @@
---
title: Checkbox Group
description: A checkbox group allows a user to select multiple items from a list of options.
-thumbnail:
- image: /previews/components/core/checkbox-group.jpeg
- video: /previews/components/core/checkbox-group.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html#props
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
- label: Edit this page
@@ -16,7 +11,7 @@ links:
---
Next.js
Remix
@@ -26,34 +21,37 @@ links:
## Installation
-
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add checkbox-group
```
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
+## Usage
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
+Use `CheckboxGroup` to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
-
-
+```tsx
+import { Checkbox } from "@/components/core/checkbox";
+import { CheckboxGroup } from "@/components/core/checkbox-group";
-## Usage
+
+ Next.js
+ Remix
+ Gatsby
+ ;
+```
-Use `CheckboxGroup` to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
+```tsx
+import { Checkbox } from "@/components/core/checkbox";
+import { CheckboxGroup } from "@/components/core/checkbox-group";
+import { Label } from "@/components/core/field";
+
+
+ React frameworks
+ Next.js
+ Remix
+ Gatsby
+ ;
+```
### Best practices
@@ -67,7 +65,7 @@ Use `CheckboxGroup` to allow users to select multiple items from a list of indiv
Use the `variant` prop to control the visual style of the `CheckBoxGroup`.
Next.js
Remix
@@ -80,7 +78,7 @@ Use the `variant` prop to control the visual style of the `CheckBoxGroup`.
A visual label can be provided for the `CheckboxGroup` using the `label` prop or a hidden label using `aria-label` prop.
Next.js
Remix
@@ -96,7 +94,7 @@ A visual label can be provided for the `CheckboxGroup` using the `label` prop or
A description can be supplied to a `CheckboxGroup` via the `description` prop. The description is always visible unless the `isInvalid` prop is `true` and an error message is provided.
`}
/>
-### Contextual help
-
-A `ContextualHelp` element may be placed next to the label to provide additional information or help about a CheckboxGroup.
-
-Next.js
- Remix
- Gatsby
- `}
-/>
-
### Error message
-An error message can be supplied to a CheckboxGroup, which will be displayed when the `validationState` is `“invalid”`.
+An error message can be supplied to a CheckboxGroup, which will be displayed when the `isInvalid` prop is set to `true`.
Next.js
Remix
@@ -143,7 +124,7 @@ An error message can be supplied to a CheckboxGroup, which will be displayed whe
Use the `isDisabled` prop to disable the CheckboxGroup.
Next.js
Remix
@@ -156,7 +137,7 @@ Use the `isDisabled` prop to disable the CheckboxGroup.
The `isReadOnly` boolean prop makes the CheckboxGroup's text content immutable. Unlike isDisabled, the CheckboxGroup remains focusable and the contents can still be copied.
Next.js
Remix
@@ -170,7 +151,7 @@ Use the `isRequired` prop to mark the CheckboxGroup as required.
Use the `necessityIndicator` prop to control the visual style of the required state.
Next.js
Remix
@@ -194,7 +175,7 @@ Use the `necessityIndicator` prop to control the visual style of the required st
The `defaultValue` prop can be used to set the default state.
Next.js
Remix
@@ -207,7 +188,7 @@ The `defaultValue` prop can be used to set the default state.
Use the `value` and `onChange` props to control the value of the input.
@@ -223,7 +204,7 @@ Use the `value` and `onChange` props to control the value of the input.
If you need to customize things further, you can drop down to the composition level.
React frameworks
You can pick any frameworks.
diff --git a/www/content/docs/components/inputs/checkbox.mdx b/www/content/docs/components/forms-and-inputs/checkbox.mdx
similarity index 91%
rename from www/content/docs/components/inputs/checkbox.mdx
rename to www/content/docs/components/forms-and-inputs/checkbox.mdx
index 40b6765f..d0da9c80 100644
--- a/www/content/docs/components/inputs/checkbox.mdx
+++ b/www/content/docs/components/forms-and-inputs/checkbox.mdx
@@ -1,14 +1,9 @@
---
title: Checkbox
description: Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
-thumbnail:
- image: /previews/components/core/checkbox.jpeg
- video: /previews/components/core/checkbox.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/Checkbox.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/Checkbox.html#props
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
- label: Edit this page
@@ -16,49 +11,52 @@ links:
---
I accept the
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add checkbox
```
-
-
-
-
- Install the following dependencies:
+## Usage
- ```package-install
- react-aria-components
- ```
+Use `Checkbox` to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
+```tsx
+import { Checkbox } from "@/components/core/checkbox";
-
-
+I accept the terms and conditions ;
+```
-## Usage
+```tsx
+import { CheckboxRoot, CheckboxIndicator } from "@/components/core/checkbox";
-Use `checkbox` to allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
+
+ I accept the terms and conditions
+ ;
+```
## Options
-### Variant
+### Variants
Use the `variant` prop to control the visual style of the checkbox.
I accept the terms and conditions`}
+/>
+
+### Appearance
+
+You can make the checkbox appear as a card using the `appearance` prop.
+
+I accept the terms and conditions`}
/>
@@ -67,7 +65,7 @@ Use the `variant` prop to control the visual style of the checkbox.
A checkbox can be in an indeterminate state, controlled using the `isIndeterminate` prop.
Select all`}
/>
@@ -76,7 +74,7 @@ A checkbox can be in an indeterminate state, controlled using the `isIndetermina
Use the `isDisabled` prop to disable the checkbox.
I accept the terms and conditions`}
/>
@@ -85,16 +83,28 @@ Use the `isDisabled` prop to disable the checkbox.
The `isReadOnly` prop makes the selection immutable. Unlike isDisabled, the Checkbox remains focusable.
I accept the terms and conditions`}
/>
+## Composition
+
+If you need to customize things further, you can drop down to the composition level.
+
+
+ I agree to the terms and conditions
+ I accept the terms and conditions`}
/>
@@ -103,7 +113,7 @@ The `defaultSelected` prop can be used to set the default state.
Use the `isSelected` and `onChange` props to control the value of the input.
diff --git a/www/content/docs/components/forms-and-inputs/form.mdx b/www/content/docs/components/forms-and-inputs/form.mdx
new file mode 100644
index 00000000..6027b600
--- /dev/null
+++ b/www/content/docs/components/forms-and-inputs/form.mdx
@@ -0,0 +1,100 @@
+---
+title: Form
+description: Forms allow users to enter and submit data, and provide them with feedback along the way.
+links:
+ - label: Aria docs
+ href: https://react-spectrum.adobe.com/react-aria/Form.html
+ - label: React Hook Form docs
+ href: https://react-hook-form.com/
+ - label: Report an issue
+ href: https://github.com/mehdibha/dotUI/issues/new/choose
+ - label: Edit this page
+ href: https://github.com/mehdibha/dotUI/tree/main/content/components/buttons/toggle-button-group.mdx?plain=1
+---
+
+) => {
+ /* Handle form submission */
+ };
+
+ return (
+
+ );`}
+/>
+
+## Installation
+
+```package-install
+npx dotui-cli@latest add form
+```
+
+## React Aria
+
+### Label & help text
+
+Accessible forms start with clear, descriptive labels for each field. All dotUI form components support labeling using the Label component or the `label` prop, which is automatically associated with the field via the id and for attributes on your behalf.
+
+In addition, the components support help text, which associates additional context with a field such as a description or error message. The label and help text are announced by assistive technology such as screen readers when the user focuses the field.
+
+```tsx
+import {TextField, Label, Input, Text} from 'react-aria-components';
+
+
+ Password
+ Password must be at least 8 characters.
+ c
+```
+
+### Built-in validation
+
+All React Aria form components integrate with native HTML [constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation). This allows you to define constraints on each field such as required, minimum and maximum values, text formats such as email addresses, and even custom regular expression patterns. These constraints are checked by the browser when the user commits changes to the value (e.g. on blur) or submits the form.
+
+) => {
+ /* Handle form submission */
+ };
+
+ return (
+
+ );
+};
+```
+
+### Example
+
+
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add number-field
```
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
## Usage
Use a `NumberField` to allow a user to enter a number.
@@ -58,7 +34,7 @@ Use a `NumberField` to allow a user to enter a number.
The NumberField value can be formatted by using the `formatOptions` prop. formatOptions is compatible with the option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) and is applied based on the current locale.
Quantity
diff --git a/www/content/docs/components/inputs/radio-group.mdx b/www/content/docs/components/forms-and-inputs/radio-group.mdx
similarity index 91%
rename from www/content/docs/components/inputs/radio-group.mdx
rename to www/content/docs/components/forms-and-inputs/radio-group.mdx
index b1a824ef..d1455f32 100644
--- a/www/content/docs/components/inputs/radio-group.mdx
+++ b/www/content/docs/components/forms-and-inputs/radio-group.mdx
@@ -1,14 +1,9 @@
---
title: Radio Group
description: A radio group allows a user to select a single item from a list of mutually exclusive options.
-thumbnail:
- image: /previews/components/core/radio-group.jpeg
- video: /previews/components/core/radio-group.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/RadioGroup.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/RadioGroup.html#props
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
- label: Edit this page
@@ -16,7 +11,7 @@ links:
---
Small
Medium
@@ -26,34 +21,49 @@ links:
## Installation
-
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add radio-group
```
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
+## Usage
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
+Use radio group to allow users to select a single option from a short list of related options.
-
-
+```tsx
+import { RadioGroup, Radio } from "@/components/core/radio-group";
-## Usage
+
+ Small
+ Medium
+ Large
+ ;
+```
-Use radio group to allow users to select a single option from a short list of related options.
+```tsx
+import { Label, Description } from "@/components/core/field";
+import {
+ RadioGroupRoot,
+ RadioRoot,
+ RadioIndicator,
+} from "@/components/core/radio-group";
+
+
+ Size
+
+ Next.js
+
+
+ Next.js
+
+
+ ..
+
+ Select a product size.
+ ;
+```
## Options
@@ -62,7 +72,7 @@ Use radio group to allow users to select a single option from a short list of re
RadioGroups are vertically oriented by default. The `orientation` prop can be used to change the orientation to `'horizontal'`.
@@ -103,7 +113,7 @@ Use the `variant` prop to control the visual style of the radio buttons.
A visual label can be provided for the radio group using the `label` prop or a hidden label using `aria-label` prop.
Small
Medium
@@ -121,7 +131,7 @@ A visual label can be provided for the radio group using the `label` prop or a h
A description can be supplied to a radio group via the `description` prop. The description is always visible unless the `isInvalid` prop is `true` and an error message is provided.
Small
Medium
@@ -129,30 +139,12 @@ A description can be supplied to a radio group via the `description` prop. The d
`}
/>
-### Contextual help
-
-A ContextualHelp element may be placed next to the label to provide additional information or help about a CheckboxGroup.
-
-Small
- Medium
- Large
- `}
-/>
-
### Error message
An `errorMessage` can be supplied to a `RadioGroup`, which will be displayed when the `isInvalid` prop is set to `true`.
Small
Medium
@@ -188,7 +180,7 @@ Use the `isDisabled` prop to disable the `RadioGroup` or a single `Radio`.
The `isReadOnly` prop makes the selection immutable. Unlike isDisabled, the RadioGroup remains focusable.
Small
Medium
@@ -202,7 +194,7 @@ Use the `isRequired` prop to mark the radio group as required.
Use the `necessityIndicator` prop to control the visual style of the required state.
Small
Large
@@ -226,7 +218,7 @@ Use the `necessityIndicator` prop to control the visual style of the required st
The `defaultValue` prop can be used to set the default state.
Small
Medium
@@ -239,7 +231,7 @@ The `defaultValue` prop can be used to set the default state.
Use the `value` and `onChange` props to control the value of the radio group.
setSize(value)}>
@@ -255,7 +247,7 @@ Use the `value` and `onChange` props to control the value of the radio group.
If you need to customize things further, you can drop down to the composition level.
Size
Please select a size.
diff --git a/www/content/docs/components/forms-and-inputs/search-field.mdx b/www/content/docs/components/forms-and-inputs/search-field.mdx
new file mode 100644
index 00000000..590d5ffa
--- /dev/null
+++ b/www/content/docs/components/forms-and-inputs/search-field.mdx
@@ -0,0 +1,216 @@
+---
+title: SearchField
+description: SearchField is a text field designed for searches.
+links:
+ - label: Aria docs
+ href: https://react-spectrum.adobe.com/react-aria/SearchField.html
+ - label: Report an issue
+ href: https://github.com/mehdibha/dotUI/issues/new/choose
+ - label: Edit this page
+ href: https://github.com/mehdibha/dotUI/tree/main/content/components/inputs/search-field.mdx?plain=1
+---
+
+
+ Email
+
+
+
+
+ Enter your search query.
+ ;
+```
+
+## Options
+
+### Label
+
+A visual label can be provided for the `SearchField` using the `label` prop or a hidden label using `aria-label` prop.
+
+
+ Search
+ Enter your search query.
+ `}
+/>
+
+## API Reference
+
+| Prop | Type | Default | Description |
+| -------------------- | -------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label` | `ReactNode` | - | The content to display as the label. |
+| `description` | `ReactNode` | - | A description for the field. Provides a hint such as specific requirements for what to choose. |
+| `errorMessage` | `ReactNode \| (v: ValidationResult) => ReactNode` | - | An error message for the field. |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | The size of the input. |
+| `isInvalid` | `boolean` | - | Whether the value is invalid. |
+| `isDisabled` | `boolean` | - | Whether the input is disabled. |
+| `isReadOnly` | `boolean` | - | Whether the input can be selected but not changed by the user. |
+| `isRequired` | `boolean` | - | Whether user input is required on the input before form submission. |
+| `validate` | `(value: string) => ValidationError \| true \| null \| undefined` | - | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
+| `autoFocus` | `boolean` | - | Whether the element should receive focus on render. |
+| `value` | `string` | - | The current value (controlled). |
+| `defaultValue` | `string` | - | The default value (uncontrolled). |
+| `autoComplete` | `string` | - | Describes the type of autocomplete functionality the input should provide if any. |
+| `maxLength` | `number` | - | The maximum number of characters supported by the input. |
+| `minLength` | `number` | - | The minimum number of characters required by the input. |
+| `pattern` | `string` | - | Regex pattern that the value of the input must match to be valid. |
+| `type` | `'text' \| 'search' \| 'url' \| 'tel' \| 'email' \| 'password' \| string & {}` | - | The type of input to render. |
+| `inputMode` | `'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'` | - | Hints at the type of data that might be entered by the user while editing the element or its contents. |
+| `name` | `string` | - | The name of the input element, used when submitting an HTML form. |
+| `validationBehavior` | `'native' \| 'aria'` | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
+| `children` | `ReactNode \| (values: SearchFieldRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode` | - | The children of the component. A function may be provided to alter the children based on component state. |
+| `className` | `string` | - | The CSS className for the element. |
+| `style` | `CSSProperties \| (values: SearchFieldRenderProps & {defaultStyle: CSSProperties}) => CSSProperties` | - | The inline style for the element. A function may be provided to compute the style based on component state. |
+
+| Event | Type | Description |
+| --------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `onSubmit` | `(value: string) => void` | Handler that is called when the SearchField is submitted. |
+| `onClear` | `() => void` | Handler that is called when the clear button is pressed. |
+| `onFocus` | `(e: FocusEvent) => void` | Handler that is called when the element receives focus. |
+| `onBlur` | `(e: FocusEvent) => void` | Handler that is called when the element loses focus. |
+| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
+| `onKeyDown` | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. |
+| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |
+| `onChange` | `(value: T) => void` | Handler that is called when the value changes. |
+| `onCopy` | `ClipboardEventHandler` | Handler that is called when the user copies text. |
+| `onCut` | `ClipboardEventHandler` | Handler that is called when the user cuts text. |
+| `onPaste` | `ClipboardEventHandler` | Handler that is called when the user pastes text. |
+| `onCompositionStart` | `CompositionEventHandler` | Handler that is called when a text composition system starts a new text composition session. |
+| `onCompositionEnd` | `CompositionEventHandler` | Handler that is called when a text composition system completes or cancels the current text composition session. |
+| `onCompositionUpdate` | `CompositionEventHandler` | Handler that is called when a new character is received in the current text composition session. |
+| `onSelect` | `ReactEventHandler` | Handler that is called when text in the input is selected. |
+| `onBeforeInput` | `FormEventHandler` | Handler that is called when the input value is about to be modified. |
+| `onInput` | `FormEventHandler` | Handler that is called when the input value is modified. |
+
+| Data attribute | Description |
+| ----------------- | ----------------------------------- |
+| `[data-empty]` | Whether the search field is empty. |
+| `[data-disabled]` | Whether the text field is disabled. |
+| `[data-invalid]` | Whether the text field is invalid. |
diff --git a/www/content/docs/components/inputs/slider.mdx b/www/content/docs/components/forms-and-inputs/slider.mdx
similarity index 87%
rename from www/content/docs/components/inputs/slider.mdx
rename to www/content/docs/components/forms-and-inputs/slider.mdx
index e3400481..65d28fd4 100644
--- a/www/content/docs/components/inputs/slider.mdx
+++ b/www/content/docs/components/forms-and-inputs/slider.mdx
@@ -1,14 +1,9 @@
---
title: Slider
description: An input where the user selects a value from within a given range.
-thumbnail:
- image: /previews/components/core/slider.jpeg
- video: /previews/components/core/slider.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/Slider.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/Slider.html#props
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
- label: Edit this page
@@ -16,36 +11,50 @@ links:
---
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add slider
```
-
-
-
-
- Install the following dependencies:
+## Usage
- ```package-install
- react-aria-components @react-aria/utils
- ```
+Use slider to allow users to select a value from within a given range.
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
+```tsx
+import { Slider } from "@/components/core/slider";
-
-
+
+ Opacity
+
+
+ Adjust the background opacity.
+ ;
+```
## Options
@@ -54,7 +63,7 @@ npx dotui-cli@latest add slider
Use the `size` prop to control the size of the slider. The default variant is `"md"`.
-
- Volume
-
-
Volume
setValue(value as number)} />;`}
/>
diff --git a/www/content/docs/components/inputs/switch.mdx b/www/content/docs/components/forms-and-inputs/switch.mdx
similarity index 88%
rename from www/content/docs/components/inputs/switch.mdx
rename to www/content/docs/components/forms-and-inputs/switch.mdx
index f735e9df..5aedef9f 100644
--- a/www/content/docs/components/inputs/switch.mdx
+++ b/www/content/docs/components/forms-and-inputs/switch.mdx
@@ -1,14 +1,9 @@
---
title: Switch
description: Switches allow users to turn an individual option on or off.
-thumbnail:
- image: /previews/components/core/switch.jpeg
- video: /previews/components/core/switch.mp4
links:
- label: Aria docs
href: https://react-spectrum.adobe.com/react-aria/Switch.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/Switch.html#props
- label: Report an issue
href: https://github.com/mehdibha/dotUI/issues/new/choose
- label: Edit this page
@@ -16,50 +11,56 @@ links:
---
Focus mode`}
/>
## Installation
-
-
-
- ```package-install
+```package-install
npx dotui-cli@latest add switch
```
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
## Usage
Use switch for communicating activation (e.g. on/off states), while checkboxes are best used for communicating selection (e.g. multiple table rows).
Switches, unlike checkboxes, can't have an error state.
+```tsx
+import { Switch } from "@/components/core/switch";
+
+Focus mode ;
+```
+
+```tsx
+import {
+ SwitchRoot,
+ SwitchIndicator,
+ SwitchThumb,
+} from "@/components/core/switch";
+
+
+
+
+ Focus mode
+ ;
+```
+
## Options
+### Variant
+
+Use the `variant` prop to control the visual style of the switch.
+
+Focus mode
Focus Mode`}
/>
## Uncontrolled
-The `defaultValue` prop can be used to set the default state.
+The `defaultSelected` prop can be used to set the default state.
Airplane Mode`}
/>
@@ -98,7 +99,7 @@ The `defaultValue` prop can be used to set the default state.
Use the `isSelected` and `onChange` props to control the value of the input.
@@ -107,6 +108,19 @@ Use the `isSelected` and `onChange` props to control the value of the input.
)`}
/>
+## Composition
+
+If you need to customize things further, you can drop down to the composition level.
+
+
+
+
+ `}
+/>
+
## API Reference
| Prop | Type | Default | Description |
diff --git a/www/content/docs/components/forms-and-inputs/text-area.mdx b/www/content/docs/components/forms-and-inputs/text-area.mdx
new file mode 100644
index 00000000..beff2a9a
--- /dev/null
+++ b/www/content/docs/components/forms-and-inputs/text-area.mdx
@@ -0,0 +1,218 @@
+---
+title: TextArea
+description: TextArea is a multiline text input.
+links:
+ - label: Aria docs
+ href: https://react-spectrum.adobe.com/react-aria/TextArea.html
+ - label: Report an issue
+ href: https://github.com/mehdibha/dotUI/issues/new/choose
+ - label: Edit this page
+ href: https://github.com/mehdibha/dotUI/tree/main/content/components/inputs/text-area.mdx?plain=1
+---
+
+
+ Email
+
+
+ Enter your email.
+ ;
+```
+
+## Options
+
+### Label
+
+A visual label can be provided for the `TextArea` using the label prop or a hidden label using `aria-label` prop.
+
+ {
+ setInputValue(text);
+ }}
+ />
+ );`}
+/>
+
+## Composition
+
+If you need to customize things further, you can drop down to the composition level.
+
+
+ Comment
+
+
+ Enter your comment.
+ `}
+/>
+
+## API Reference
+
+| Prop | Type | Default | Description |
+| -------------------- | ------------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label` | `ReactNode` | | The content to display as the label. |
+| `description` | `ReactNode` | | A description for the field. Provides a hint such as specific requirements for what to choose. |
+| `errorMessage` | `ReactNode \| (v: ValidationResult) => ReactNode` | | An error message for the field. |
+| `prefix` | `ReactNode` | - | A visual to display before the input. |
+| `suffix` | `ReactNode` | - | A visual to display after the input. |
+| `isInvalid` | `boolean` | - | Whether the value is invalid. |
+| `isDisabled` | `boolean` | - | Whether the input is disabled. |
+| `isReadOnly` | `boolean` | - | Whether the input can be selected but not changed by the user. |
+| `isRequired` | `boolean` | - | Whether user input is required on the input before form submission. |
+| `validate` | `(value: string) => ValidationError \| true \| null \| undefined` | - | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
+| `autoFocus` | `boolean` | - | Whether the element should receive focus on render. |
+| `value` | `string` | - | The current value (controlled). |
+| `defaultValue` | `string` | - | The default value (uncontrolled). |
+| `autoComplete` | `string` | - | Describes the type of autocomplete functionality the input should provide if any. |
+| `maxLength` | `number` | - | The maximum number of characters supported by the input. |
+| `minLength` | `number` | - | The minimum number of characters required by the input. |
+| `pattern` | `string` | - | Regex pattern that the value of the input must match to be valid. |
+| `type` | `'text' \| 'search' \| 'url' \| 'tel' \| 'email' \| 'password' \| string & {}` | - | The type of input to render. |
+| `inputMode` | `'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'` | - | Hints at the type of data that might be entered by the user while editing the element or its contents. |
+| `name` | `string` | - | The name of the input element, used when submitting an HTML form. |
+| `validationBehavior` | `'native' \| 'aria'` | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
+| `children` | `ReactNode \| (values: TextFieldRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode` | - | The children of the component. A function may be provided to alter the children based on component state. |
+| `className` | `string` | - | The CSS className for the element. |
+| `style` | `CSSProperties \| (values: TextFieldRenderProps & {defaultStyle: CSSProperties}) => CSSProperties` | - | The inline style for the element. A function may be provided to compute the style based on component state. |
+
+| Event | Type | Description |
+| --------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `onFocus` | `(e: FocusEvent) => void` | Handler that is called when the element receives focus. |
+| `onBlur` | `(e: FocusEvent) => void` | Handler that is called when the element loses focus. |
+| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
+| `onKeyDown` | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. |
+| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |
+| `onChange` | `(value: T) => void` | Handler that is called when the value changes. |
+| `onCopy` | `ClipboardEventHandler` | Handler that is called when the user copies text. |
+| `onCut` | `ClipboardEventHandler` | Handler that is called when the user cuts text. |
+| `onPaste` | `ClipboardEventHandler` | Handler that is called when the user pastes text. |
+| `onCompositionStart` | `CompositionEventHandler` | Handler that is called when a text composition system starts a new text composition session. |
+| `onCompositionEnd` | `CompositionEventHandler` | Handler that is called when a text composition system completes or cancels the current text composition session. |
+| `onCompositionUpdate` | `CompositionEventHandler` | Handler that is called when a new character is received in the current text composition session. |
+| `onSelect` | `ReactEventHandler` | Handler that is called when text in the input is selected. |
+| `onBeforeInput` | `FormEventHandler` | Handler that is called when the input value is about to be modified. |
+| `onInput` | `FormEventHandler` | Handler that is called when the input value is modified. |
+
+| Data attribute | Description |
+| ----------------- | ------------------------------------ |
+| `[data-disabled]` | Whether the text field is disabled. |
+| `[data-invalid]` | Whether the text field is invalid. |
+| `[data-readonly]` | Whether the text field is read only. |
+| `[data-required]` | Whether the text field is required. |
diff --git a/www/content/docs/components/forms-and-inputs/text-field.mdx b/www/content/docs/components/forms-and-inputs/text-field.mdx
new file mode 100644
index 00000000..b8683299
--- /dev/null
+++ b/www/content/docs/components/forms-and-inputs/text-field.mdx
@@ -0,0 +1,224 @@
+---
+title: TextField
+description: TextField allows a user to enter a plain text value with a keyboard.
+links:
+ - label: Aria docs
+ href: https://react-spectrum.adobe.com/react-aria/TextField.html
+ - label: Report an issue
+ href: https://github.com/mehdibha/dotUI/issues/new/choose
+ - label: Edit this page
+ href: https://github.com/mehdibha/dotUI/tree/main/content/components/inputs/text-field.mdx?plain=1
+---
+
+
+ Email
+ Enter your email.
+ ;
+```
+
+## Options
+
+### Label
+
+A visual label can be provided for the `TextField` using the label prop, or a hidden label using `aria-label` prop.
+
+https://} />
+@dotui.org} />
+ {
+ setInputValue(text);
+ }}
+ />
+ );`}
+/>
+
+## Composition
+
+If you need to customize things further, you can drop down to the composition level.
+
+
+ Email
+ Enter your email.
+ `}
+/>
+
+## API Reference
+
+| Prop | Type | Default | Description |
+| -------------------- | ------------------------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label` | `ReactNode` | | The content to display as the label. |
+| `description` | `ReactNode` | | A description for the field. Provides a hint such as specific requirements for what to choose. |
+| `errorMessage` | `ReactNode \| (v: ValidationResult) => ReactNode` | | An error message for the field. |
+| `prefix` | `ReactNode` | - | A visual to display before the input. |
+| `suffix` | `ReactNode` | - | A visual to display after the input. |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | The size of the input. |
+| `isInvalid` | `boolean` | - | Whether the value is invalid. |
+| `isDisabled` | `boolean` | - | Whether the input is disabled. |
+| `isReadOnly` | `boolean` | - | Whether the input can be selected but not changed by the user. |
+| `isRequired` | `boolean` | - | Whether user input is required on the input before form submission. |
+| `validate` | `(value: string) => ValidationError \| true \| null \| undefined` | - | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
+| `autoFocus` | `boolean` | - | Whether the element should receive focus on render. |
+| `value` | `string` | - | The current value (controlled). |
+| `defaultValue` | `string` | - | The default value (uncontrolled). |
+| `autoComplete` | `string` | - | Describes the type of autocomplete functionality the input should provide if any. |
+| `maxLength` | `number` | - | The maximum number of characters supported by the input. |
+| `minLength` | `number` | - | The minimum number of characters required by the input. |
+| `pattern` | `string` | - | Regex pattern that the value of the input must match to be valid. |
+| `type` | `'text' \| 'search' \| 'url' \| 'tel' \| 'email' \| 'password' \| string & {}` | - | The type of input to render. |
+| `inputMode` | `'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search'` | - | Hints at the type of data that might be entered by the user while editing the element or its contents. |
+| `name` | `string` | - | The name of the input element, used when submitting an HTML form. |
+| `validationBehavior` | `'native' \| 'aria'` | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
+| `children` | `ReactNode \| (values: TextFieldRenderProps & {defaultChildren: ReactNode \| undefined}) => ReactNode` | - | The children of the component. A function may be provided to alter the children based on component state. |
+| `className` | `string` | - | The CSS className for the element. |
+| `style` | `CSSProperties \| (values: TextFieldRenderProps & {defaultStyle: CSSProperties}) => CSSProperties` | - | The inline style for the element. A function may be provided to compute the style based on component state. |
+
+| Event | Type | Description |
+| --------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `onFocus` | `(e: FocusEvent) => void` | Handler that is called when the element receives focus. |
+| `onBlur` | `(e: FocusEvent) => void` | Handler that is called when the element loses focus. |
+| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
+| `onKeyDown` | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. |
+| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |
+| `onChange` | `(value: T) => void` | Handler that is called when the value changes. |
+| `onCopy` | `ClipboardEventHandler` | Handler that is called when the user copies text. |
+| `onCut` | `ClipboardEventHandler` | Handler that is called when the user cuts text. |
+| `onPaste` | `ClipboardEventHandler` | Handler that is called when the user pastes text. |
+| `onCompositionStart` | `CompositionEventHandler` | Handler that is called when a text composition system starts a new text composition session. |
+| `onCompositionEnd` | `CompositionEventHandler` | Handler that is called when a text composition system completes or cancels the current text composition session. |
+| `onCompositionUpdate` | `CompositionEventHandler` | Handler that is called when a new character is received in the current text composition session. |
+| `onSelect` | `ReactEventHandler` | Handler that is called when text in the input is selected. |
+| `onBeforeInput` | `FormEventHandler` | Handler that is called when the input value is about to be modified. |
+| `onInput` | `FormEventHandler` | Handler that is called when the input value is modified. |
+
+| Data attribute | Description |
+| ----------------- | ------------------------------------ |
+| `[data-disabled]` | Whether the text field is disabled. |
+| `[data-invalid]` | Whether the text field is invalid. |
+| `[data-readonly]` | Whether the text field is read only. |
+| `[data-required]` | Whether the text field is required. |
diff --git a/www/content/docs/components/inputs/meta.json b/www/content/docs/components/inputs/meta.json
deleted file mode 100644
index 9ba54530..00000000
--- a/www/content/docs/components/inputs/meta.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "pages": [
- "text-field",
- "text-area",
- "search-field",
- "number-field",
- "checkbox",
- "checkbox-group",
- "radio-group",
- "switch",
- "slider"
- ]
-}
\ No newline at end of file
diff --git a/www/content/docs/components/inputs/search-field.mdx b/www/content/docs/components/inputs/search-field.mdx
deleted file mode 100644
index d417a3ee..00000000
--- a/www/content/docs/components/inputs/search-field.mdx
+++ /dev/null
@@ -1,249 +0,0 @@
----
-title: SearchField
-description: SearchField is a text field designed for searches.
-thumbnail:
- image: /previews/components/core/search-field.jpeg
- video: /previews/components/core/search-field.mp4
-links:
- - label: Aria docs
- href: https://react-spectrum.adobe.com/react-aria/SearchField.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/SearchField.html#props
- - label: Report an issue
- href: https://github.com/mehdibha/dotUI/issues/new/choose
- - label: Edit this page
- href: https://github.com/mehdibha/dotUI/tree/main/content/components/inputs/search-field.mdx?plain=1
----
-
-
-
-
- ```package-install
-npx dotui-cli@latest add search-field
-```
-
-
-
-
-
- Install the following dependencies:
-
- ```package-install
- react-aria-components
- ```
-
- Copy and paste the following code into your project.
- Update the import paths to match your project setup.
-
-
-
-
-
-## Usage
-
-Use a `SearchField` to allow a user to enter and clear a search query.
-
-## Options
-
-### Size
-
-Use the `size` prop to control the size of the `SearchField`. The default size is `"md"`.
-
-
- Search
- Enter your search query.
- `}
-/>
-
-## API Reference
-
-| Prop | Type | Default | Description |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | The size of the input. |
-| `prefix` | `React.ReactNode` | `) => void` | Handler that is called when the element receives focus. |
-| `onBlur` | `(e: FocusEvent) => void` | Handler that is called when the element loses focus. |
-| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
-| `onKeyDown` | `(e: KeyboardEvent) => void` | Handler that is called when a key is pressed. |
-| `onKeyUp` | `(e: KeyboardEvent) => void` | Handler that is called when a key is released. |
-| `onChange` | `(value: T) => void` | Handler that is called when the value changes. |
-| `onCopy` | `ClipboardEventHandler` | Handler that is called when the user copies text. |
-| `onCut` | `ClipboardEventHandler` | Handler that is called when the user cuts text. |
-| `onPaste` | `ClipboardEventHandler` | Handler that is called when the user pastes text. |
-| `onCompositionStart` | `CompositionEventHandler` | Handler that is called when a text composition system starts a new text composition session. |
-| `onCompositionEnd` | `CompositionEventHandler` | Handler that is called when a text composition system completes or cancels the current text composition session. |
-| `onCompositionUpdate` | `CompositionEventHandler` | Handler that is called when a new character is received in the current text composition session. |
-| `onSelect` | `ReactEventHandler` | Handler that is called when text in the input is selected. |
-| `onBeforeInput` | `FormEventHandler` | Handler that is called when the input value is about to be modified. |
-| `onInput` | `FormEventHandler` | Handler that is called when the input value is modified. |
-
-| Data attribute | Description |
-| ----------------- | ----------------------------------- |
-| `[data-empty]` | Whether the search field is empty. |
-| `[data-disabled]` | Whether the text field is disabled. |
-| `[data-invalid]` | Whether the text field is invalid. |
diff --git a/www/content/docs/components/inputs/text-area.mdx b/www/content/docs/components/inputs/text-area.mdx
deleted file mode 100644
index 7eed562c..00000000
--- a/www/content/docs/components/inputs/text-area.mdx
+++ /dev/null
@@ -1,246 +0,0 @@
----
-title: TextArea
-description: TextArea is a multiline text input.
-thumbnail:
- image: /previews/components/core/text-area.jpeg
- video: /previews/components/core/text-area.mp4
-links:
- - label: Aria docs
- href: https://react-spectrum.adobe.com/react-aria/TextArea.html
- - label: Aria API Reference
- href: https://react-spectrum.adobe.com/react-aria/TextArea.html#props
- - label: Report an issue
- href: https://github.com/mehdibha/dotUI/issues/new/choose
- - label: Edit this page
- href: https://github.com/mehdibha/dotUI/tree/main/content/components/inputs/text-area.mdx?plain=1
----
-
-
-
-
- ```package-install
-npx dotui-cli@latest add text-area
-```
-
-
-
-
-
- 
-
- 
+
+> Each time a component library gets popular, all apps start looking the... same.
+
+# dotUI
+
+
+Build your component library with a unique style.
+
+
+
+## Requirements
+
+* React 19
+* Tailwind CSS 4.0
+* Typescript
+
+## FAQ
+
+### What's different from shadcn-ui
+
+shadcn-ui gives you a starting point to create your component library, but this starting point is the same for everyone.