tabler-react-2 0.1.76 → 0.1.77

package/docs/src/docs/utilities/colors.mdx

@@ -0,0 +1,114 @@
+---
+title: Colors
+---
+
+import { ColorSwatch } from "../../components/ColorSwatch.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+## Color Usage
+
+Colors are used by providing a class to an element you wish to color. The classname is comprised of `[fg|bg]-[colorName]`. For example, to color an element with a background of the `primary` color, you would use the class `bg-primary`, and to color an element with the text color of the `primary` color, you would use the class `text-primary`.
+
+## Color Palette
+
+### Semantic Colors
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="primary" fg="white" />
+    <ColorSwatch colorName="secondary" fg="white" />
+    <ColorSwatch colorName="success" fg="white" />
+    <ColorSwatch colorName="danger" fg="white" />
+    <ColorSwatch colorName="warning" fg="white" />
+    <ColorSwatch colorName="info" fg="white" />
+    <ColorSwatch colorName="light" fg="black" />
+    <ColorSwatch colorName="dark" fg="white" />
+  </div>
+</Excerpt>
+
+### Bold Colors
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="blue" fg="white" />
+    <ColorSwatch colorName="azure" fg="white" />
+    <ColorSwatch colorName="indigo" fg="white" />
+    <ColorSwatch colorName="purple" fg="white" />
+    <ColorSwatch colorName="pink" fg="white" />
+    <ColorSwatch colorName="red" fg="white" />
+    <ColorSwatch colorName="orange" fg="white" />
+    <ColorSwatch colorName="yellow" fg="white" />
+    <ColorSwatch colorName="lime" fg="white" />
+    <ColorSwatch colorName="green" fg="white" />
+    <ColorSwatch colorName="teal" fg="white" />
+    <ColorSwatch colorName="cyan" fg="white" />
+  </div>
+</Excerpt>
+
+### Light Colors
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="blue-lt" fg="black" />
+    <ColorSwatch colorName="azure-lt" fg="black" />
+    <ColorSwatch colorName="indigo-lt" fg="black" />
+    <ColorSwatch colorName="purple-lt" fg="black" />
+    <ColorSwatch colorName="pink-lt" fg="black" />
+    <ColorSwatch colorName="red-lt" fg="black" />
+    <ColorSwatch colorName="orange-lt" fg="black" />
+    <ColorSwatch colorName="yellow-lt" fg="black" />
+    <ColorSwatch colorName="lime-lt" fg="black" />
+    <ColorSwatch colorName="green-lt" fg="black" />
+    <ColorSwatch colorName="teal-lt" fg="black" />
+    <ColorSwatch colorName="cyan-lt" fg="black" />
+  </div>
+</Excerpt>
+
+### Grays
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="gray-50" fg="black" />
+    <ColorSwatch colorName="gray-100" fg="black" />
+    <ColorSwatch colorName="gray-200" fg="black" />
+    <ColorSwatch colorName="gray-300" fg="black" />
+    <ColorSwatch colorName="gray-400" fg="black" />
+    <ColorSwatch colorName="gray-500" fg="black" />
+    <ColorSwatch colorName="gray-600" fg="black" />
+    <ColorSwatch colorName="gray-700" fg="black" />
+    <ColorSwatch colorName="gray-800" fg="black" />
+    <ColorSwatch colorName="gray-900" fg="black" />
+  </div>
+</Excerpt>
+
+### Brand Colors
+
+<Excerpt>
+  <div
+    style={{ display: "flex", flexDirection: "row", gap: 10, flexWrap: "wrap" }}
+  >
+    <ColorSwatch colorName="facebook" fg="white" />
+    <ColorSwatch colorName="twitter" fg="white" />
+    <ColorSwatch colorName="linkedin" fg="white" />
+    <ColorSwatch colorName="google" fg="white" />
+    <ColorSwatch colorName="youtube" fg="white" />
+    <ColorSwatch colorName="vimeo" fg="white" />
+    <ColorSwatch colorName="dribbble" fg="white" />
+    <ColorSwatch colorName="github" fg="white" />
+    <ColorSwatch colorName="instagram" fg="white" />
+    <ColorSwatch colorName="pinterest" fg="white" />
+    <ColorSwatch colorName="vk" fg="white" />
+    <ColorSwatch colorName="rss" fg="white" />
+    <ColorSwatch colorName="flickr" fg="white" />
+    <ColorSwatch colorName="bitbucket" fg="white" />
+    <ColorSwatch colorName="tabler" fg="white" />
+  </div>
+</Excerpt>

package/docs/src/docs/utilities/margins.mdx

@@ -0,0 +1,90 @@
+---
+title: Margins
+---
+
+import { Margin } from "../../components/Margin.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+# Margin utilities
+
+Margin utilities are provided by the `m[direction]-[0-6]` classes.
+
+<Excerpt>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      marginBottom: 10,
+    }}
+  >
+    <Margin className="m-auto" />
+    <Margin className="m-0" />
+    <Margin className="m-1" />
+    <Margin className="m-2" />
+    <Margin className="m-3" />
+    <Margin className="m-4" />
+    <Margin className="m-5" />
+  </div>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      marginBottom: 10,
+    }}
+  >
+    <Margin className="mt-auto" />
+    <Margin className="mt-0" />
+    <Margin className="mt-1" />
+    <Margin className="mt-2" />
+    <Margin className="mt-3" />
+    <Margin className="mt-4" />
+    <Margin className="mt-5" />
+  </div>
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "row",
+      gap: 10,
+      flexWrap: "wrap",
+      justifyContent: "center",
+      alignItems: "center",
+      marginBottom: 10,
+    }}
+  >
+    <Margin className="mb-auto" />
+    <Margin className="mb-0" />
+    <Margin className="mb-1" />
+    <Margin className="mb-2" />
+    <Margin className="mb-3" />
+    <Margin className="mb-4" />
+    <Margin className="mb-5" />
+  </div>
+</Excerpt>
+
+## Margin directions
+
+The margin utilities can be applied to the following directions:
+
+- `mt-*` = `margin-top`
+- `mb-*` = `margin-bottom`
+- `m-*` = `margin`
+
+## Margin sizes
+
+The margin utilities can be applied to the following sizes:
+
+- `0` = `0`
+- `1` = `.25rem`
+- `2` = `.5rem`
+- `3` = `1rem`
+- `4` = `2rem`
+- `5` = `4rem`
+- `auto` = `auto`

package/docs/src/home/index.mdx

@@ -0,0 +1,23 @@
+# Introduction
+
+Rocket Docs is a complete and awesome Gatsby Theme for documentation websites. We've
+developed it to be easy to use and customize. Forget about other
+things and focus on what matters: **writing docs.**
+
+## Features
+
+- ⚛️ Ready for Gatsby v5;
+- 📝 MDX for docs;
+- 🛣 Yaml-based sidebar navigation;
+- 📱 Responsive and mobile friendly;
+- 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;
+- 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).
+- 📈 Google Analytics support;
+- 📄 Custom docs schema;
+- 🖱 Table of Contents;
+- ⚡️ Offline Support & WebApp Manifest;
+- and much more 🔥
+
+<br />
+
+[Get started now!](/getting-started)

package/docs/src/pages/404.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+import Layout from '@rocketseat/gatsby-theme-docs/src/components/Layout';
+import Seo from '@rocketseat/gatsby-theme-docs/src/components/SEO';
+
+export default function NotFound() {
+  return (
+    <Layout title="Page not found!">
+      <Seo title="404: Not found" />
+      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+      <p>
+        If you&#39;d like to go back to homepage, <Link to="/">click here</Link>
+        .
+      </p>
+    </Layout>
+  );
+}

package/docs/src/yamlFiles/letters.yml

@@ -0,0 +1,3 @@
+- character: a
+- character: b
+- character: c