+ );
+};
diff --git a/packages/kubrick/src/Providers/index.ts b/packages/kubrick/src/Providers/index.ts
new file mode 100644
index 0000000..3964c12
--- /dev/null
+++ b/packages/kubrick/src/Providers/index.ts
@@ -0,0 +1 @@
+export * from './PreviewProvider';
diff --git a/packages/kubrick/src/index.ts b/packages/kubrick/src/index.ts
index f062ae3..f443a8a 100644
--- a/packages/kubrick/src/index.ts
+++ b/packages/kubrick/src/index.ts
@@ -10,6 +10,7 @@ export * from './IconLinkButton';
export * from './Link';
export * from './LinkButton';
export * from './Notice';
+export * from './Providers';
export * from './RadioGroup';
export * from './SearchField';
export * from './Select';
diff --git a/site/src/content/docs/components/box.mdx b/site/src/content/docs/components/box.mdx
index 413f73f..6f21650 100644
--- a/site/src/content/docs/components/box.mdx
+++ b/site/src/content/docs/components/box.mdx
@@ -69,10 +69,10 @@ You can also add a footer section to the box by adding the `footer` prop. Though
component="Box"
prefix="kubrick-Box-"
items={[
- [ 'root', 'The root element of the box.' ],
- [ 'header', 'The header section containing the title and toggle button.' ],
- [ 'title', 'The element that wraps the title of the box.' ],
- [ 'content', 'The content section of the box.' ],
- [ 'footer', 'The footer section of the box.' ],
+ ["root", "The root element of the box."],
+ ["header", "The header section containing the title and toggle button."],
+ ["title", "The element that wraps the title of the box."],
+ ["content", "The content section of the box."],
+ ["footer", "The footer section of the box."],
]}
/>
diff --git a/site/src/content/docs/components/button.mdx b/site/src/content/docs/components/button.mdx
index 99f93cb..a2dfa40 100644
--- a/site/src/content/docs/components/button.mdx
+++ b/site/src/content/docs/components/button.mdx
@@ -4,38 +4,50 @@ description: Learn how to use the Button component in your WordPress admin appli
---
import { Aside } from '@astrojs/starlight/components';
+import Lead from "../../templates/Lead.astro";
+import Table from "../../templates/Table.astro";
-The `Button` component represents the HTML `button` element to trigger an action or event with mouse, touch, or keyboard. It comes in different styles and sizes that you can choose from. You can also add icons or other type of content before or after the button label.
+
+The `Button` component is similar to the HTML `button` element, but with some additional features and flexibilities. You can use this component to allow users to trigger actions or events through clicks, touch, or keyboard input.
+
## Usage
-Import the `Button` component from the package:
+To use the component, import `Button` from the package:
```jsx
import { Button } from '@syntatis/kubrick';
```
-To use it in your application, you can add it the same as you would with a native HTML `button` element:
+You can then add it to your app just like a regular HTML `button` element:
```jsx
```
-Similar to the native HTML `button` element, the `Button` component will be rendered as the `button` type by default. You can change the type with the `type` prop, for example, to render it as a `submit` button:
+### Type
+
+By default, the `Button` component behaves like a standard HTML `button`. You can change the button type using the `type` prop, for example, to make it a `submit` button:
```jsx
```
-You can also make the button disabled by passing the `isDisabled` prop. This is useful when the button should not be clickable, for example, when the form is not valid or when the user does not have the right permission to perform the action.
+### Disabled
+
+To disable the button, use the `isDisabled` prop. This is helpful when the button shouldn't be clickable, such as when a form is incomplete or the user lacks permission to perform an action.
```jsx
```
+
+
### Variants
-The `Button` component comes with different variants that you can choose from. The default variant is `primary`, but you can change it to `link`, `link-danger`, and `secondary` to match the button appearance with its function.
+The `Button` component comes with different style variants, and can be customized using the `variant` prop. The default variant of the component is `primary`, but you can switch to `link`, `link-danger`, or `secondary` to suit the button's role.
```jsx
@@ -43,7 +55,7 @@ The `Button` component comes with different variants that you can choose from. T
### Sizes
-Aside of the variants, the `Button` component also comes with different sizes that you can choose from. You can change it to `small`, `large`, and `hero` to match the appareance with its significance or with the surrounding sizes.
+You can also choose from different button sizes. You can change it using the `size` prop to `small`, `large`, or `hero` following on the context or importance of the button.
```jsx
@@ -53,28 +65,22 @@ Aside of the variants, the `Button` component also comes with different sizes th
The `Button` components comes with `prefix` and `suffix` props to to allow you to add content before or after the button label. You can add any type of content, but typically you would use these props to add icons.
-Kubrick UI does not come with its own icon library. You can use any icon library you prefer, though we recommend using the [`@wordpress/icons`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-icons/) or [Dashicons](https://developer.wordpress.org/resource/dashicons/) to make your WordPress admin application remains consistent with the WordPress admin interface.
-
```jsx
-import { Icon } from '@wordpress/icons';
+import { Icon, edit } from '@wordpress/icons';
-}>
- Save Settings
+// Add an icon after the button label
+}>
+ Edit
-```
-
-#### Using Dashicons
-
-The Dashicons icons are integrated into the WordPress admin interface. You can use them in your WordPress admin application by adding the Dashicons class to the `span` element, for example:
-```jsx
-}>
- Save Settings
+// Add an icon before the button label
+}>
+ Edit
```
-
### Read-only
@@ -49,7 +56,9 @@ You can also set the input as read-only by passing the `isReadOnly` prop, which
```
### Description
@@ -65,14 +74,18 @@ Aside of the label, you can add a description to add more context to the user. Y
## Events
-The `Checkbox` component will emit an event when the check state changes as well as when the user interacts with the input. You can listen to this event by passing function to the following props:
+
-| Prop | Description |
-| --- | --- |
-| `onChange` | Triggered when the check state changes. |
-| `onFocusChange` | Triggered when the input receives or loses focus. |
+Let's assume you have a `Checkbox` component and a button within your app. You want to disable the button until the user check the checkbox.
-Let's assume we have an app with a checkbox and a button. Initially, the button is disabled. When the user checks the checkbox, the button will be enabled. You can do this by listening to the `onChange` event:
+You can achieve that by using the `onChange` prop to handle the check state change event and update the button state accordingly. The `onChange` prop will directly pass the new check state to the function as a boolean, so you can directly use it to update the state as shown in the example above, for example:
```jsx {10}
import { useState } from 'react';
@@ -92,16 +105,15 @@ function App() {
}
```
-The `onChange` prop will directly pass the new check state to the function as a boolean, so you can directly use it to update the state as shown in the example above.
-
## Styles
-The `Checkbox` component comes with a few static selectors, prefixed with `.kubrick-Checkbox-`, that you can use to select and customize the component and its elements.
-
-
-| Selector | Description |
-| --- | --- |
-| `root` | The root element of the checkbox. |
-| `label-content` | The element wrapping the label content. |
-| `description` | The element wrapping the description. |
-
+
diff --git a/site/src/content/docs/guides/icons.mdx b/site/src/content/docs/guides/icons.mdx
index 8695aae..99340af 100644
--- a/site/src/content/docs/guides/icons.mdx
+++ b/site/src/content/docs/guides/icons.mdx
@@ -1,4 +1,58 @@
---
title: Icons
-description: Learn how to to add icon in your WordPress admin application.
+description: Learn how to use and add icon in your WordPress admin application.
---
+
+import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Aside } from '@astrojs/starlight/components';
+
+Kubrick UI does not come with its own icon library. Although you can use any icon library you prefer, we recommend using the [`@wordpress/icons`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-icons/) or [Dashicons](https://developer.wordpress.org/resource/dashicons/) to make your WordPress admin app remains consistent with the WordPress admin interface.
+
+## Using `@wordpress/icons`
+
+First, install `@wordpress/icons` package as the app dependency:
+
+
+
+```bash
+npm i @wordpress/icons
+```
+
+
+```bash
+yarn add @wordpress/icons
+```
+
+
+```bash
+pnpm add @wordpress/icons
+```
+
+
+
+Then, import the `Icon` component and the icon you want to use.
+
+```jsx
+import { Button } from '@syntatis/kubrick';
+import { Icon, download } from '@wordpress/icons';
+
+function App () {
+ }>
+ Download
+
+}
+```
+
+## Using Dashicons
+
+The Dashicons is already included into the WordPress admin interface. You can use them in your WordPress admin app simply by adding the Dashicons class to the `span` element, for example:
+
+```jsx
+}>
+ Save Settings
+
+```
+
+
diff --git a/site/src/content/templates/Table.astro b/site/src/content/templates/Table.astro
index 5b7347f..b80c3c8 100644
--- a/site/src/content/templates/Table.astro
+++ b/site/src/content/templates/Table.astro
@@ -1,7 +1,4 @@
---
-/**
- * Types.
- */
export interface Props {
variant?: "classes" | "events";
component: string;
@@ -19,12 +16,27 @@ const headers = {
};
---
-
- The {component} component has static classes, prefixed with .{prefix}. You can use these static classes to select and customize the component and
- its elements.
-
+{
+ variant === "classes" && (
+
+ The {component} component has static classes, prefixed with{" "}
+ .{prefix}. You can use these static classes to select and
+ customize the component and its elements. Please refer to the{" "}
+ Styles Guides to learn more about using
+ static classes.
+
+ )
+}
+
+{
+ variant === "events" && (
+
+ The {component} component will emit some events on user
+ interactions. You can handle these events by passing a function as a
+ callback to the following props:
+