tabler-react-2 0.1.76 → 0.1.78

package/docs/src/docs/components/badges.mdx

@@ -0,0 +1,190 @@
+---
+title: Badges
+---
+
+import { Badge } from "tabler-react-2";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+Badges are used to display a small label.
+
+## Signature
+
+```jsx
+import { Badge } from "tabler-react-2";
+
+<Badge {...props}>{children}</Badge>;
+```
+
+### Props
+
+| Prop      | Required | Type                       | Default | Description                           |
+| --------- | -------- | -------------------------- | ------- | ------------------------------------- |
+| `color`   | No       | [Color](/utilities/colors) |         | The color of the badge.               |
+| `outline` | No       | Boolean                    |         | Whether the badge should be outlined. |
+| `soft`    | No       | Boolean                    |         | Whether the badge should be soft.     |
+
+## Basic Usage
+
+The `Badge` component is used to display a badge.
+
+<Excerpt>
+  <Badge>Badge</Badge>
+</Excerpt>
+
+```jsx
+<Badge>Badge</Badge>
+```
+
+## Colors
+
+Badges can be colored using the `color` prop. The `color` prop accepts a string value of any [color](/utilities/colors).
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {[
+      "primary",
+      "secondary",
+      "success",
+      "danger",
+      "warning",
+      "info",
+      "dark",
+      "blue",
+      "azure",
+      "indigo",
+      "purple",
+      "pink",
+      "red",
+      "orange",
+      "yellow",
+      "lime",
+      "green",
+      "teal",
+      "cyan",
+    ].map((color) => (
+      <Badge key={color} color={color}>
+        {color}
+      </Badge>
+    ))}
+  </div>
+</Excerpt>
+
+```jsx
+<Badge color="primary">primary</Badge>
+<Badge color="secondary">secondary</Badge>
+<Badge color="success">success</Badge>
+<Badge color="danger">danger</Badge>
+<Badge color="warning">warning</Badge>
+<Badge color="info">info</Badge>
+<Badge color="dark">dark</Badge>
+<Badge color="blue">blue</Badge>
+<Badge color="azure">azure</Badge>
+<Badge color="indigo">indigo</Badge>
+```
+
+## Outline
+
+Badges can be outlined using the `outline` prop. The `outline` prop accepts a boolean value.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {["primary", "secondary", "success", "danger", "warning", "info"].map(
+      (color) => (
+        <Badge key={color} color={color} outline>
+          {color}
+        </Badge>
+      )
+    )}
+  </div>
+</Excerpt>
+
+```jsx
+<Badge color="primary" outline>primary</Badge>
+<Badge color="secondary" outline>secondary</Badge>
+<Badge color="success" outline>success</Badge>
+<Badge color="danger" outline>danger</Badge>
+<Badge color="warning" outline>warning</Badge>
+<Badge color="info" outline>info</Badge>
+```
+
+## Soft
+
+Badges can be soft using the `soft` prop. The `soft` prop accepts a boolean value.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {["primary", "secondary", "success", "danger", "warning", "info"].map(
+      (color) => (
+        <Badge key={color} color={color} soft>
+          {color}
+        </Badge>
+      )
+    )}
+  </div>
+</Excerpt>
+
+```jsx
+<Badge color="primary" soft>primary</Badge>
+<Badge color="secondary" soft>secondary</Badge>
+<Badge color="success" soft>success</Badge>
+<Badge color="danger" soft>danger</Badge>
+<Badge color="warning" soft>warning</Badge>
+<Badge color="info" soft>info</Badge>
+```
+
+## Soft + Outline
+
+Badges can be soft and outlined using the `soft` and `outline` props. The `soft` and `outline` props accept a boolean value.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {["primary", "secondary", "success", "danger", "warning", "info"].map(
+      (color) => (
+        <Badge key={color} color={color} soft outline>
+          {color}
+        </Badge>
+      )
+    )}
+  </div>
+</Excerpt>
+
+```jsx
+<Badge color="primary" soft outline>primary</Badge>
+<Badge color="secondary" soft outline>secondary</Badge>
+<Badge color="success" soft outline>success</Badge>
+<Badge color="danger" soft outline>danger</Badge>
+<Badge color="warning" soft outline>warning</Badge>
+<Badge color="info" soft outline>info</Badge>
+```

package/docs/src/docs/components/cards.mdx

@@ -0,0 +1,245 @@
+---
+title: Cards
+---
+
+import { Excerpt } from "../../components/Excerpt.jsx";
+import { Card } from "tabler-react-2";
+
+Cards are used to group related content and tasks. They can be used to display information, tasks, or actions.
+
+## Signature
+
+```jsx
+import { Card } from "tabler-react-2";
+
+<Card {...props}>{children}</Card>;
+```
+
+### Props
+
+| Prop         | Required | Type               | Default | Description                                                  |
+| ------------ | -------- | ------------------ | ------- | ------------------------------------------------------------ |
+| `children`   | No       | node               |         | The content inside the card.                                 |
+| `size`       | No       | [`sm`, `md`, `lg`] |         | The size of the card.                                        |
+| `title`      | No       | String             |         | The title shown in a top cell of the card.                   |
+| `variant`    | No       | String             |         | The color variant of the card.                               |
+| `variantPos` | No       | [`top`, `side`]    | `top`   | The position of the colored bar.                             |
+| `stacked`    | No       | Boolean            | false   | Whether there should be a second card placed below the card. |
+| `tabs`       | No       | `TabList`          |         | A list of tabs to be shown in the card.                      |
+
+## Basic Usage
+
+The `Card` component wraps a div with some default styles.
+
+<Excerpt>
+  <Card>
+    <p>Card content</p>
+  </Card>
+</Excerpt>
+
+```jsx
+<Card>
+  <p>Card content</p>
+</Card>
+```
+
+## Title
+
+The `title` prop can be used to add a title to the card. The title is rendered as a heading element.
+
+<Excerpt>
+  <Card title="Card Title">
+    <p>Card content</p>
+  </Card>
+</Excerpt>
+
+```jsx
+<Card title="Card Title">
+  <p>Card content</p>
+</Card>
+```
+
+## Sizes
+
+Cards can be sized using the `size` prop. The `size` prop accepts a string value of `sm`, `md`, or `lg`.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+          alignItems: "center",
+
+    }}
+
+>
+
+    {["sm", "md", "lg"].map((size) => (
+      <Card key={size} size={size} style={{ maxWidth: 250, minWidth: 150 }}>
+        {size} card
+      </Card>
+    ))}
+
+  </div>
+</Excerpt>
+
+```jsx
+<Card size="sm">
+  <p>Small card</p>
+</Card>
+<Card size="md">
+  <p>Medium card</p>
+</Card>
+<Card size="lg">
+  <p>Large card</p>
+</Card>
+```
+
+## Colors
+
+Cards can be colored using the `variant` prop. The `variant` prop accepts a string value of any [color](/utilities/colors).
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {[
+      "primary",
+      "secondary",
+      "success",
+      "danger",
+      "warning",
+      "info",
+      "light",
+      "dark",
+      "blue",
+      "orange",
+      "cyan",
+      "twitter",
+    ].map((variant) => (
+      <Card
+        key={variant}
+        variant={variant}
+        size="sm"
+        style={{ maxWidth: 250, minWidth: 150 }}
+      >
+        {variant} card
+      </Card>
+    ))}
+  </div>
+</Excerpt>
+
+```jsx
+<Card variant="primary">
+  <p>Card content</p>
+</Card>
+```
+
+### Variant Position
+
+You can change the position of the colored bar by passing the `variantPos` prop. The `variantPos` prop accepts a string value of `top` or `side`.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    {["top", "side"].map((pos) => (
+      <Card
+        key={pos}
+        variant="danger"
+        variantPos={pos}
+        size="sm"
+        style={{ maxWidth: 250, minWidth: 150 }}
+      >
+        {pos} card
+      </Card>
+    ))}
+  </div>
+</Excerpt>
+
+```jsx
+<Card variant="danger" variantPos="side">
+  <p>side card</p>
+</Card>
+```
+
+## Stacked Cards
+
+You can pass a `stacked` prop to the `Card` component to create the effect of a stacked card. This is useful for signifying a list of cards.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      alignItems: "center",
+    }}
+  >
+    <Card stacked>
+      <p>Stacked Card</p>
+    </Card>
+  </div>
+</Excerpt>
+
+```jsx
+<Card stacked>
+  <p>Stacked Card</p>
+</Card>
+```
+
+_Note: Stacked cards do not support size props._
+
+## Tabs
+
+The `Card` component can be used to display tabs. The `tabs` prop accepts a `TabList` type (see below).
+
+<Excerpt>
+  <div>
+    <Card
+      size="md"
+      variantPos="top"
+      tabs={[
+        { title: "Tab 1", content: <p>Content of Tab 1</p> },
+        { title: "Tab 2", content: <p>Content of Tab 2</p> },
+      ]}
+    />
+  </div>
+</Excerpt>
+
+```jsx
+<Card
+  size="md"
+  variantPos="top"
+  tabs={[
+    { title: "Tab 1", content: <p>Content of Tab 1</p> },
+    { title: "Tab 2", content: <p>Content of Tab 2</p> },
+  ]}
+/>
+```
+
+### TabList
+
+The `TabList` type is used to define the tabs for a `Card` component. The `TabList` type inherits from `Array` and expects each object to have a `title` and `content` property.
+
+```ts
+type TabList = Array<{
+  title: string;
+  content: React.ReactNode;
+}>;
+```

package/docs/src/docs/components/hr.mdx

@@ -0,0 +1,68 @@
+---
+title: Horizontal Rule
+---
+
+import { Excerpt } from "../../components/Excerpt.jsx";
+import { Util } from "tabler-react-2";
+
+Horizontal rules are used to separate content in a layout.
+
+## Signature
+
+```jsx
+import { Util } from "tabler-react-2";
+
+<Util.Hr {...props} />;
+```
+
+<blockquote>
+<p>
+**Tip:** You can destructure the `Util` component to bring individual components into scope. For example:
+
+```jsx
+import { Util } from "tabler-react-2";
+const { Hr } = Util;
+
+export default () => (
+  <>
+    <Hr />
+  </>
+);
+```
+
+</p>
+</blockquote>
+
+### Props
+
+| Prop   | Required | Type     | Default | Description                                 |
+| ------ | -------- | -------- | ------- | ------------------------------------------- |
+| `text` | No       | `string` |         | The text to display in the horizontal rule. |
+
+## Basic Usage
+
+The `Hr` component is used to create a horizontal rule.
+
+<Excerpt>
+  <div style={{ minWidth: 200 }}>
+    <Util.Hr />
+  </div>
+</Excerpt>
+
+```jsx
+<Hr />
+```
+
+## Text
+
+You can pass a `text` prop to the `Hr` component to display text in the horizontal rule.
+
+<Excerpt>
+  <div style={{ minWidth: 200 }}>
+    <Util.Hr text="Hello world" />
+  </div>
+</Excerpt>
+
+```jsx
+<Hr text="Hello world" />
+```

package/docs/src/docs/components/typography.mdx

@@ -0,0 +1,173 @@
+---
+title: Typography
+---
+
+import { Typography, Card } from "tabler-react-2";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+# Typography
+
+```jsx
+import { Typography } from "tabler-react-2";
+```
+
+Typography is provided by the `Typography` component and includes provisions for headings, body text, special text, and more.
+
+<blockquote>
+<p>
+**Tip:** You can destructure the `Typography` component to bring individual components into scope. For example:
+
+```jsx
+import { Typography } from "tabler-react-2";
+const { H1, Text } = Typography;
+
+export default () => (
+  <>
+    <H1>Heading 1</H1>
+    <Text>Body text</Text>
+  </>
+);
+```
+
+</p>
+</blockquote>
+
+## Headings
+
+Headings are provided by the `H1`, `H2`, `H3`, `H4`, `H5`, and `H6` components. These map to their semantic HTML counterparts and include styles for the appropriate font size and weight as well as legibility enhancements.
+
+<Excerpt height={300}>
+  <Typography.H1>Heading 1</Typography.H1>
+  <Typography.H2>Heading 2</Typography.H2>
+  <Typography.H3>Heading 3</Typography.H3>
+  <Typography.H4>Heading 4</Typography.H4>
+  <Typography.H5>Heading 5</Typography.H5>
+  <Typography.H6>Heading 6</Typography.H6>
+</Excerpt>
+
+```jsx
+<Typography.H1>Heading 1</Typography.H1>
+<Typography.H2>Heading 2</Typography.H2>
+<Typography.H3>Heading 3</Typography.H3>
+<Typography.H4>Heading 4</Typography.H4>
+<Typography.H5>Heading 5</Typography.H5>
+<Typography.H6>Heading 6</Typography.H6>
+```
+
+## Body text
+
+Body text is provided by the `Text` component. It is enhanced by the `Strong` (or `B`), `I`, and `U` components for basic styling.
+
+<Excerpt>
+  <Typography.Text>
+    The <Typography.Strong>quick</Typography.Strong> brown{" "}
+    <Typography.B>fox</Typography.B> jumps
+    <Typography.I>over</Typography.I> the <Typography.U>lazy</Typography.U> dog.
+  </Typography.Text>
+</Excerpt>
+
+```jsx
+<Typography.Text>
+  The <Typography.Strong>quick</Typography.Strong> brown{" "}
+  <Typography.B>fox</Typography.B> jumps
+  <Typography.I>over</Typography.I> the <Typography.U>lazy</Typography.U> dog.
+</Typography.Text>
+```
+
+`Strong` and `B` are aliases for the same component. They both compile down to `<strong>`. They do not have any differences other than the aliasing.
+
+### Removing bottom margin
+
+All body text elements have a bottom margin. You can override this by passing the `mb-0` class:
+
+```jsx
+<Typography.Text mb-0>
+  The quick brown fox jumps over the lazy dog.
+</Typography.Text>
+```
+
+This class works on all elements in Tabler, but is most commonly used on `Typography.Text`. See the [margins](/utilities/margins) documentation page for more information.
+
+## Special text
+
+Special text is provided by the `Typography.Special.*` components.
+
+<Excerpt>
+  <div style={{ display: "flex", flexDirection: "row", gap: 100 }}>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        flex: 0,
+        alignItems: "flex-start",
+      }}
+    >
+      <Typography.Special.Abbr>Abbreviation</Typography.Special.Abbr>
+      <Typography.Special.Cite>Citation</Typography.Special.Cite>
+      <Typography.Special.Del>Deleted</Typography.Special.Del>
+      <Typography.Special.Em>Emphasis</Typography.Special.Em>
+      <Typography.Special.Ins>Inserted</Typography.Special.Ins>
+      <Typography.Special.S>Strikethrough</Typography.Special.S>
+      <Typography.Special.Samp>Sample</Typography.Special.Samp>
+    </div>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        flex: 0,
+        alignItems: "flex-start",
+      }}
+    >
+      <Typography.Special.Var>Variable</Typography.Special.Var>
+      <span
+        style={{
+          wordBreak: "keep-all",
+          whiteSpace: "nowrap",
+        }}
+      >
+        <Typography.Special.Time>18:00</Typography.Special.Time>{" "}
+        <span> (Time)</span>
+      </span>
+      <span
+        style={{
+          wordBreak: "keep-all",
+          whiteSpace: "nowrap",
+        }}
+      >
+        <Typography.Special.Sub>Subscript</Typography.Special.Sub>{" "}
+        <span> (Sub)</span>
+      </span>
+      <span
+        style={{
+          wordBreak: "keep-all",
+          whiteSpace: "nowrap",
+        }}
+      >
+        <Typography.Special.Sup>Superscript</Typography.Special.Sup>{" "}
+        <span> (Sup)</span>
+      </span>
+      <Typography.Special.Kbd>Keyboard</Typography.Special.Kbd>
+      <Typography.Special.Mark>Highlight</Typography.Special.Mark>
+      <Typography.Special.Code>Code</Typography.Special.Code>
+    </div>
+  </div>
+</Excerpt>
+
+```jsx
+<Typography.Special.Abbr>Abbreviation</Typography.Special.Abbr>
+<Typography.Special.Cite>Citation</Typography.Special.Cite>
+<Typography.Special.Del>Deleted</Typography.Special.Del>
+<Typography.Special.Em>Emphasis</Typography.Special.Em>
+<Typography.Special.Ins>Inserted</Typography.Special.Ins>
+<Typography.Special.S>Strikethrough</Typography.Special.S>
+<Typography.Special.Samp>Sample</Typography.Special.Samp>
+<Typography.Special.Var>Variable</Typography.Special.Var>
+<Typography.Special.Time>18:00</Typography.Special.Time>
+<Typography.Special.Sub>Subscript</Typography.Special.Sub>
+<Typography.Special.Sup>Superscript</Typography.Special.Sup>
+<Typography.Special.Kbd>Keyboard</Typography.Special.Kbd>
+<Typography.Special.Mark>Highlight</Typography.Special.Mark>
+<Typography.Special.Code>Code</Typography.Special.Code>
+```

package/docs/src/docs/faq.mdx

@@ -0,0 +1,35 @@
+---
+title: Frequently Asked Questions
+description: Frequently asked questions about the theme.
+disableTableOfContents: true
+---
+
+## Will be included search or dark mode?
+
+This theme is a great and complete option to build simple documentation websites.
+We don't plan anymore to include search, dark mode or i18n to the project.
+
+Remember that if necessary, you can change colors and include a default
+dark theme. To do so, check this [doc](/usage/shadowing#changing-theme-colors).
+
+## How can I deploy my website?
+
+To deploy this project, we recommend you take a look at this extensive documentation
+hosted on [Gatsby website](https://www.gatsbyjs.com/docs/deploying-and-hosting/). It
+includes deploy tutorials for many services, like [Vercel](https://vercel.com/),
+[Netlify](https://www.netlify.com/), [GitHub Pages](https://pages.github.com/) and others.
+
+## What are good examples of the theme usage?
+
+- [Botmation](https://botmation.dev)
+- [Capmonster.cloud for Python](https://capmonster-python.alperenn.com/)
+- [ESPHome Devices](https://devices.esphome.io/)
+- [Label U](https://opendatalab.github.io/labelU-Kit/)
+- [React Observing](https://react-observing.web.app/)
+- [RudderStack Docs](https://rudderstack.com/docs/)
+- [Unform](https://unform.dev)
+- [Use Pandas](https://www.usepandas.com/)
+- [golangci-lint](https://golangci-lint.run/)
+- [use-cloudinary](https://use-cloudinary.netlify.app/)
+
+ps: are you using this project? Submit a PR to add it to the [list](https://github.com/jpedroschmitz/rocketdocs/blob/main/examples/gatsby-theme-docs/src/docs/faq.mdx#what-are-good-examples-of-the-theme-usage).