tabler-react-2 0.1.85 → 0.1.86

package/dist/provider/tabler.js

@@ -0,0 +1,75 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TablerProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var generateCSSVariables = function generateCSSVariables(theme) {
+  return theme ? Object.entries(theme).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return "--tblr-".concat(key, ": ").concat(value, ";");
+  }).join("\n") : "";
+};
+var TablerProvider = exports.TablerProvider = function TablerProvider(_ref3) {
+  var children = _ref3.children,
+    _ref3$colorScheme = _ref3.colorScheme,
+    colorScheme = _ref3$colorScheme === void 0 ? "light" : _ref3$colorScheme,
+    _ref3$theme = _ref3.theme,
+    themeColors = _ref3$theme === void 0 ? {} : _ref3$theme;
+  (0, _react.useEffect)(function () {
+    var script1 = document.createElement("script");
+    script1.src = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js";
+    script1.async = true;
+    var link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css";
+    var script2 = document.createElement("script");
+    script2.textContent = "window.USE_FALLBACK_ANCHOR = true;";
+    document.head.appendChild(link);
+    document.head.appendChild(script1);
+    document.head.appendChild(script2);
+    return function () {
+      document.head.removeChild(link);
+      document.head.removeChild(script1);
+      document.head.removeChild(script2);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (colorScheme === "dark") {
+      document.body.classList.add("theme-dark");
+    } else {
+      document.body.classList.remove("theme-dark");
+    }
+  }, [colorScheme]);
+  (0, _react.useEffect)(function () {
+    var styleTag = document.createElement("style");
+    styleTag.innerHTML = "\n      :root {\n        ".concat(generateCSSVariables(themeColors || {}), "\n      }\n    ");
+    document.head.appendChild(styleTag);
+    return function () {
+      document.head.removeChild(styleTag);
+    };
+  }, [themeColors]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
+};
+TablerProvider.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  colorScheme: _propTypes["default"].oneOf(["light", "dark"]),
+  themeColors: _propTypes["default"].shape({
+    light: _propTypes["default"].object,
+    dark: _propTypes["default"].object
+  })
+};

package/dist/ribbon/index.js

@@ -38,7 +38,7 @@ var Ribbon = exports.Ribbon = function Ribbon(_ref2) {
     _ref2$content = _ref2.content,
     content = _ref2$content === void 0 ? /*#__PURE__*/_react["default"].createElement(IconStar, null) : _ref2$content,
     shape = _ref2.shape;
-  var color = passedColor || passedVariant || "primary";
+  var color = passedVariant || passedColor || "primary";
   return /*#__PURE__*/_react["default"].createElement("div", null, children, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("ribbon", "ribbon-".concat(position), "bg-".concat(color), shape && "ribbon-".concat(shape))
   }, content));

package/docs/package.json

@@ -21,7 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "0.1.83"
+    "tabler-react-2": "0.1.85"
   },
   "devDependencies": {},
   "keywords": [

package/docs/src/components/LoadableTabler.jsx

@@ -153,3 +153,6 @@ export const Typography = {
   U,
   Special,
 };
+export const TablerProvider = loadable(() =>
+  import("tabler-react-2").then((mod) => mod.TablerProvider)
+);

package/docs/src/config/sidebar.yml

@@ -28,6 +28,8 @@
       link: "/components/modals"
     - label: "Ribbons"
       link: "/components/ribbons"
+    - label: "Spinners"
+      link: "/components/spinners"
 - label: "Utilities"
   items:
     - label: "Colors"

package/docs/src/docs/components/ribbons.mdx

@@ -4,6 +4,7 @@ title: Ribbons
 
 import { Ribbon, Card } from "../../components/LoadableTabler";
 import { Excerpt } from "../../components/Excerpt.jsx";
+import { IconAerialLift } from "@tabler/icons-react";
 
 You can assign a ribbon to a card to display a small badge.
 
@@ -19,7 +20,7 @@ import { Ribbon } from "tabler-react-2";
 
 | Prop       | Required | Type                       | Default | Description                                         |
 | ---------- | -------- | -------------------------- | ------- | --------------------------------------------------- |
-| `variant`  | No       | [Color](/utilities/colors) |         | The color variant of the ribbon.                    |
+| `variant`  | No       | [Color](/utilities/colors) | primary | The color variant of the ribbon.                    |
 | `color`    | No       | [Color](/utilities/colors) |         | The color variant of the ribbon. Alias of `variant` |
 | `content`  | No       | React.ReactNode            |         | The content to display in the ribbon.               |
 | `position` | No       | String                     |         | The position of the ribbon.                         |
@@ -30,19 +31,21 @@ The `Ribbon` component is used to display a ribbon.
 
 <Excerpt>
   <Card style={{ minWidth: 150, maxWidth: 250 }}>
-    <Ribbon>Ribbon</Ribbon>
+    Ribbon
+    <Ribbon />
   </Card>
 </Excerpt>
 
 ```jsx
 <Card>
-  <Ribbon>Ribbon</Ribbon>
+  Ribbon
+  <Ribbon />
 </Card>
 ```
 
 ## Variants
 
-You can pass a `color` prop to the `Ribbon` component to change the color of the ribbon.
+You can pass a `variant` prop to the `Ribbon` component to change the color of the ribbon.
 
 <Excerpt f>
   {[
@@ -57,16 +60,88 @@ You can pass a `color` prop to the `Ribbon` component to change the color of the
     "purple",
   ].map((color) => (
     <Card key={color} style={{ minWidth: 150, maxWidth: 250 }}>
-      <Ribbon variant={color}>{color}</Ribbon>
+      {color}
+      <Ribbon variant={color} />
     </Card>
   ))}
 </Excerpt>
 
 ```jsx
 <Card>
-  <Ribbon variant="primary">primary</Ribbon>
+primary
+  <Ribbon variant="primary" />
 </Card>
 <Card>
-  <Ribbon variant="secondary">secondary</Ribbon>
+secondary
+  <Ribbon variant="secondary" />
+</Card>
+```
+
+## Positions
+
+You can pass a `position` prop to the `Ribbon` component to change the position of the ribbon.
+
+<Excerpt f>
+  {["top", "start", "end"].map((pos) => (
+    <Card
+      key={pos}
+      style={{ minWidth: 150, maxWidth: 250, textAlign: "center" }}
+    >
+      <Ribbon position={pos}>{pos}</Ribbon>
+    </Card>
+  ))}
+</Excerpt>
+
+```jsx
+<Card>
+  <Ribbon position="top">top</Ribbon>
+</Card>
+<Card>
+  <Ribbon position="start">start</Ribbon>
+</Card>
+<Card>
+  <Ribbon position="end">end</Ribbon>
+</Card>
+```
+
+## Shapes
+
+You can pass a `shape` prop to the `Ribbon` component to change the shape of the ribbon.
+
+<Excerpt f>
+  <Card style={{ minWidth: 150, maxWidth: 250 }}>
+    <span>Bookmark</span>
+    <Ribbon shape="bookmark" />
+  </Card>
+  <Card style={{ minWidth: 150, maxWidth: 250 }}>
+    <span>Normal</span>
+    <Ribbon />
+  </Card>
+</Excerpt>
+
+```jsx
+<Card>
+  <span>Ribbon</span>
+  <Ribbon shape="bookmark" />
+</Card>
+<Card>
+  <span>Ribbon</span>
+  <Ribbon />
+</Card>
+```
+
+## Custom Content
+
+You can pass a `content` prop to the `Ribbon` component to change the content of the ribbon.
+
+<Excerpt>
+  <Card style={{ minWidth: 150, maxWidth: 250 }}>
+    <Ribbon content={<IconAerialLift />}>Ribbon</Ribbon>
+  </Card>
+</Excerpt>
+
+```jsx
+<Card>
+  <Ribbon content={<IconAerialLift />}>Ribbon</Ribbon>
 </Card>
 ```

package/docs/src/docs/components/spinners.mdx

@@ -0,0 +1,76 @@
+---
+title: Spinners
+---
+
+import { Spinner } from "../../components/LoadableTabler";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+Spinners are used to indicate that something is loading.
+
+## Signature
+
+```jsx
+import { Spinner } from "tabler-react-2";
+
+<Spinner {...props}>{children}</Spinner>;
+```
+
+### Props
+
+| Prop      | Required | Type                       | Default | Description                                        |
+| --------- | -------- | -------------------------- | ------- | -------------------------------------------------- |
+| `size`    | No       | [`sm` \| `lg`]             | `lg`    | The size of the spinner.                           |
+| `color`   | No       | [Color](/utilities/colors) |         | The color variant of the spinner.                  |
+| `variant` | No       | String                     |         | The color variant of the spinner. Alias of `color` |
+
+## Basic Usage
+
+The `Spinner` component is used to display a spinner.
+
+<Excerpt>
+  <Spinner />
+</Excerpt>
+
+```jsx
+<Spinner />
+```
+
+## Sizes
+
+You can pass a `size` prop to the `Spinner` component to change the size of the spinner.
+
+<Excerpt f>
+  {["sm", "lg"].map((size) => (
+    <Spinner key={size} size={size} />
+  ))}
+</Excerpt>
+
+```jsx
+<Spinner size="sm" />
+<Spinner size="lg" />
+```
+
+## Variant
+
+You can pass a `color` prop to the `Spinner` component to change the color of the spinner.
+
+<Excerpt f>
+  {[
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "info",
+    "light",
+    "dark",
+    "purple",
+  ].map((color) => (
+    <Spinner key={color} variant={color} />
+  ))}
+</Excerpt>
+
+```jsx
+<Spinner variant="primary" />
+<Spinner variant="secondary" />
+```

package/docs/src/docs/getting-started.mdx

@@ -1,79 +1,34 @@
 ---
-title: 'Getting started'
-description: Learn how to get started with Rocket Docs.
+title: "Getting started"
+description: Learn how to get started with Tabler React 2
 ---
 
-> Rocket Docs is ready for Gatsby v5. New projects will use the new version!
+Welcome to Tabler React 2! This guide will help you get started with the library and its components.
 
-The best way to start is by using our starter:
+## Installation
 
-```bash
-npx gatsby new rocketdocs https://github.com/jpedroschmitz/gatsby-starter-rocketdocs
-```
-
-But, if you prefer, you can install and configure manually.
-
-#### Using Yarn:
+To install Tabler React 2, you can use npm or yarn.
 
 ```bash
-yarn add @rocketseat/gatsby-theme-docs
+npm install tabler-react-2 @tabler/icons-react
 ```
 
-#### Using NPM:
-
 ```bash
-npm i @rocketseat/gatsby-theme-docs
+yarn add tabler-react-2 @tabler/icons-react
 ```
 
-## Theme Options
-
-| Key           | Default | Required | Description                                                                                                                                                            |
-| ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| basePath      | /       | No       | Root url for all docs                                                                                                                                                  |
-| configPath    | config  | No       | Location of config files                                                                                                                                               |
-| docsPath      | docs    | No       | The site description for SEO and social (FB, Twitter) tags                                                                                                             |
-| homePath      | -       | No       | Location of home file                                                                                                                                                  |
-| githubUrl     | -       | -        | Deprecated in favor of `repositoryUrl`                                                                                                                                 |
-| repositoryUrl | -       | No       | The complete URL of your repository (supports GitHub, GitLab and Bitbucket). Example: `https://github/jpedroschmitz/rocketdocs`                                        |
-| baseDir       | -       | No       | If your Gatsby site does not live in the root of your project directory/git repo, pass the subdirectory name here (ex: `docs`)                                         |
-| withMdx       | true    | No       | If necessary, you can add your own MDX options to the theme. To do so, make sure you turn this option to false and include `gatsby-plugin-mdx` on your `gatsby-config` |
-| branch        | main    | No       | Default branch of the repository                                                                                                                                       |
+## Usage
 
-<br />
+To use Tabler React 2, you need to wrap your application with the `TablerProvider` component. This component provides the necessary CSS and JavaScript files for Tabler React 2.
 
-> Note: When adding a BitBucket link on the `repositoryUrl` option, don't add the `src/<branch>` to it.
-> Example of correct link: <br /> `https://bitbucket.org/jpedroschmitz/rocketdocs`
+```jsx
+import { TablerProvider } from "tabler-react-2";
 
-## Example usage
-
-```js title=gatsby-config.js
-module.exports = {
-  siteMetadata: {
-    siteTitle: `@rocketseat/gatsby-theme-docs`,
-    defaultTitle: `@rocketseat/gatsby-theme-docs`,
-    siteTitleShort: `gatsby-theme-docs`,
-    siteDescription: `Out of the box Gatsby Theme for creating documentation websites easily and quickly`,
-    siteUrl: `https://rocketdocs.netlify.app`,
-    siteAuthor: `@jpedroschmitz`,
-    siteImage: `/banner.png`,
-    siteLanguage: `en`,
-    themeColor: `#8257E6`,
-    basePath: `/`,
-  },
-  plugins: [
-    {
-      resolve: `@rocketseat/gatsby-theme-docs`,
-      options: {
-        basePath: `/`,
-        configPath: `src/config`,
-        docsPath: `src/docs`,
-        homePath: `src/home`,
-        repositoryUrl: `https://github.com/jpedroschmitz/rocketdocs`,
-        baseDir: `examples/gatsby-theme-docs`,
-      },
-    },
-  ],
-};
+function App() {
+  return (
+    <TablerProvider>
+      <YourApp />
+    </TablerProvider>
+  );
+}
 ```
-
-Once you have installed the dependencies you will need to create the [navigation](/usage/navigation) and [documentation](/usage/creating-docs) files.

package/docs/src/docs/themes.mdx

@@ -0,0 +1,28 @@
+---
+title: "Themes"
+---
+
+import { TablerProvider } from "../components/LoadableTabler";
+import { Excerpt } from "../components/Excerpt.jsx";
+
+Tabler React 2 provides a light and dark theme. You can use the `TablerProvider` component to set the theme.
+
+## Light theme
+
+The light theme is the default theme. It provides a light and dark theme.
+
+<Excerpt>
+  <TablerProvider>
+    <div style={{ padding: 20 }}>
+      <h1>Hello, world!</h1>
+    </div>
+  </TablerProvider>
+</Excerpt>
+
+```jsx
+<TablerProvider>
+  <div style={{ padding: 20 }}>
+    <h1>Hello, world!</h1>
+  </div>
+</TablerProvider>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.85",
+  "version": "0.1.86",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {