@pup_roko/ui-kit 1.0.0

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+
+type ButtonProps = {
+    vitClass?: string;
+    svgUrl?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+declare const vitButton: ({ vitClass, svgUrl, disabled, children }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+type InputFilterProps = {
+    vitClass?: string;
+    svgUrl?: string;
+    disabled?: boolean;
+    maxLength?: number;
+};
+declare const vitInputFilter: ({ vitClass, svgUrl, disabled, maxLength }: InputFilterProps) => react_jsx_runtime.JSX.Element;
+
+type CardProps = {
+    vitClass?: string;
+    children: React.ReactNode;
+};
+declare const vitCard: ({ vitClass, children }: CardProps) => react_jsx_runtime.JSX.Element;
+
+type PillProps = {
+    children: React.ReactNode;
+    vitClass?: string;
+};
+declare const vitPill: ({ children, vitClass }: PillProps) => react_jsx_runtime.JSX.Element;
+
+type HeaderProps = {
+    children?: React$1.ReactNode;
+    vitClass?: string;
+};
+declare const vitHeader: ({ children, vitClass }: HeaderProps) => react_jsx_runtime.JSX.Element;
+
+type GreyScreenProps = {
+    children?: React.ReactNode;
+    vitClass?: string;
+    shown?: boolean;
+};
+declare const vitGreyScreen: ({ children, vitClass, shown }: GreyScreenProps) => false | react_jsx_runtime.JSX.Element;
+
+export { vitButton, vitCard, vitGreyScreen, vitHeader, vitInputFilter, vitPill };

package/dist/index.js

@@ -0,0 +1,2 @@
+import{jsxs as n,jsx as d,Fragment as o}from"react/jsx-runtime";function i(n,d){void 0===d&&(d={});var o=d.insertAt;if(n&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\nbutton {\n  border: none;\n  border-radius: 4px;\n  padding: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\nbutton:hover:not(:disabled) {\n  opacity: 0.8;\n}\nbutton:disabled {\n  background-color: #dddddd;\n  color: #888888;\n  cursor: not-allowed;\n}\nbutton img {\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  filter: brightness(100%) saturate(100%) invert(100%);\n  opacity: 0.8;\n}\nbutton :where(*) {\n  color: inherit;\n}');const r=({vitClass:o="",svgUrl:i="src/assets/images/health-cross.svg",disabled:r=!1,children:e=null})=>n("button",{className:`${o} ${r?"disabled":""}`,disabled:r,children:[d("img",{src:i,alt:"icon"}),e]});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.filter {\n  border: 1px solid #888888;\n  background-color: #dddddd;\n  opacity: 0.8;\n  border-radius: 16px;\n  padding: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n}\n.filter:hover:not(:disabled) {\n  opacity: 1;\n}\n.filter:disabled {\n  cursor: not-allowed;\n}\n.filter img {\n  width: 20px;\n  height: 20px;\n  margin-right: 4px;\n  filter: brightness(100%) saturate(100%) invert(100%);\n  opacity: 0.8;\n}\n.filter input {\n  border: none;\n  border-radius: 2px;\n  background-color: transparent;\n  padding: 4px;\n}\n.filter :where(*) {\n  color: inherit;\n}');const e=({vitClass:o="info",svgUrl:i="src/assets/images/looking-glass.svg",disabled:r,maxLength:e=100})=>n("div",{className:`filter ${o}`,children:[d("img",{src:i,alt:"icon"}),d("input",{type:"text",disabled:r,maxLength:e})]});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.card {\n  border: none;\n  border-radius: 16px;\n  padding: 16px;\n  display: flex;\n}\n.card :where(*) {\n  color: inherit;\n}');const a=({vitClass:n="info",children:i=d("div",{})})=>d(o,{children:d("article",{className:`card ${n}`,children:i})});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.pill {\n  display: flex;\n  width: fit-content;\n  font-size: 14px;\n  padding: 8px 16px;\n  border-radius: 24px;\n}');const t=({children:n,vitClass:o="info"})=>d("div",{className:`pill ${o}`,children:n});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px;\n}\n.header section {\n  display: flex;\n  gap: 16px;\n  justify-content: left;\n  width: 100%;\n}\n.header :where(*) {\n  color: inherit;\n}');const c=({children:n=d("div",{}),vitClass:i="info md"})=>d(o,{children:d("header",{className:`header ${i}`,children:d("section",{className:"body-container",children:n})})});i('* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\n  color: #222222;\n}\n\nh1, h2, h3, h4 {\n  font-family: "Georgia", serif;\n  font-weight: 600;\n  line-height: 1.2;\n  margin-bottom: 8px;\n}\n\nh1 {\n  font-size: 24px;\n}\n\nh2 {\n  font-size: 20px;\n}\n\nh3 {\n  font-size: 18px;\n}\n\nh4 {\n  font-size: 16px;\n}\n\np {\n  font-size: 14px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n\na {\n  color: #0099aa;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}\n\nstrong, b {\n  font-weight: 600;\n}\n\n.xs {\n  padding: 4px;\n}\n\n.sm {\n  padding: 8px;\n}\n\n.md {\n  padding: 16px;\n}\n\n.lg {\n  padding: 24px;\n}\n\n.xl {\n  padding: 32px;\n}\n\n.xxl {\n  padding: 48px;\n}\n\n.info {\n  color: #ffddff;\n  background-color: #770077;\n}\n\n.success {\n  color: #ddffdd;\n  background-color: #007700;\n}\n\n.warning {\n  color: #ffffdd;\n  background-color: #777700;\n}\n\n.alert {\n  color: #ffddaa;\n  background-color: #bb7700;\n}\n\n.error {\n  color: #ffdddd;\n  background-color: #770000;\n}\n\n.info-inverted {\n  color: #770077;\n  background-color: #ffddff;\n}\n\n.success-inverted {\n  color: #007700;\n  background-color: #ddffdd;\n}\n\n.warning-inverted {\n  color: #777700;\n  background-color: #ffffdd;\n}\n\n.alert-inverted {\n  color: #bb7700;\n  background-color: #ffddaa;\n}\n\n.error-inverted {\n  color: #770000;\n  background-color: #ffdddd;\n}\n\n.body-container {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0 8px;\n}\n@media screen and (max-width: 648px) {\n  .body-container {\n    max-width: 600px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 649px) and (max-width: 1024px) {\n  .body-container {\n    max-width: 900px;\n    padding: 0 8px;\n  }\n}\n@media screen and (min-width: 1025px) {\n  .body-container {\n    max-width: 1200px;\n    padding: 0 8px;\n  }\n}\n\n.grey-screen {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 20;\n}');const l=({children:n,vitClass:o,shown:i=!1})=>i&&d("div",{className:`grey-screen ${o}`,children:n});export{r as vitButton,a as vitCard,l as vitGreyScreen,c as vitHeader,e as vitInputFilter,t as vitPill};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Buttons/vit-button.tsx","../src/components/Inputs/vitInputFilter.tsx","../src/components/Cards/vit-card.tsx","../src/components/Pills/vit-pill.tsx","../src/components/Header/vitHeader.tsx","../src/components/GreyScreen/greyScreen.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null,null,null,null,null,null],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","vitButton","vitClass","svgUrl","disabled","children","_jsxs","className","_jsx","src","alt","vitInputFilter","maxLength","vitCard","_Fragment","vitPill","vitHeader","vitGreyScreen","shown"],"mappings":"gEAAA,SAASA,EAAYC,EAAKC,YACnBA,IAAiBA,EAAM,CAAA,GAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,GAnBW,CAqBzD,s4EChBA,MAAMe,EAAY,EACdC,WAAW,GACXC,SAAS,qCACTC,YAAW,EACXC,WAAW,QAGPC,EAAA,SAAA,CAAQC,UAAW,GAAGL,KAAYE,EAAW,WAAa,KAAMA,SAAUA,EAAQC,SAAA,CAC9EG,EAAA,MAAA,CAAKC,IAAKN,EAAQO,IAAI,SACpBL,+hFCTd,MAAMM,EAAiB,EACrBT,WAAW,OACXC,SAAS,sCACTC,WACAQ,YAAY,OAGRN,EAAA,MAAA,CAAKC,UAAW,UAAUL,IAAUG,SAAA,CAClCG,EAAA,MAAA,CAAKC,IAAKN,EAAQO,IAAI,SACtBF,EAAA,QAAA,CAAOd,KAAK,OAAOU,SAAUA,EAAUQ,UAAWA,mhECX1D,MAAMC,EAAU,EAAGX,WAAS,OAASG,WAAWG,EAAA,MAAA,CAAA,MAG5CA,EAAAM,EAAA,CAAAT,SACEG,EAAA,UAAA,CAASD,UAAW,QAAQL,IAAUG,SACnCA,ugECLT,MAAMU,EAAU,EAAGV,WAAUH,WAAW,UAEpCM,EAAA,MAAA,CAAKD,UAAW,QAAQL,IAAUG,SAC/BA,itECFP,MAAMW,EAAY,EAAEX,WAASG,EAAA,MAAA,IAAQN,WAAS,aAExCM,EAAAM,EAAA,CAAAT,SACEG,EAAA,SAAA,CAAQD,UAAW,UAAUL,IAAUG,SACrCG,aAASD,UAAU,iBAAgBF,SAChCA,gnECLb,MAAMY,EAAgB,EAAGZ,WAAUH,WAAUgB,SAAQ,KAEjDA,GACAV,EAAA,MAAA,CAAKD,UAAW,eAAeL,IAAUG,SACtCA","x_google_ignoreList":[0]}

package/dist/types/components/Buttons/vit-button.d.ts

@@ -0,0 +1,9 @@
+import './button.scss';
+type ButtonProps = {
+    vitClass?: string;
+    svgUrl?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+declare const vitButton: ({ vitClass, svgUrl, disabled, children }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { vitButton };

package/dist/types/components/Cards/vit-card.d.ts

@@ -0,0 +1,7 @@
+import './card.scss';
+type CardProps = {
+    vitClass?: string;
+    children: React.ReactNode;
+};
+declare const vitCard: ({ vitClass, children }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export { vitCard };

package/dist/types/components/GreyScreen/greyScreen.d.ts

@@ -0,0 +1,8 @@
+import './greyScreen.scss';
+type GreyScreenProps = {
+    children?: React.ReactNode;
+    vitClass?: string;
+    shown?: boolean;
+};
+declare const vitGreyScreen: ({ children, vitClass, shown }: GreyScreenProps) => false | import("react/jsx-runtime").JSX.Element;
+export { vitGreyScreen };

package/dist/types/components/Header/vitHeader.d.ts

@@ -0,0 +1,8 @@
+import './header.scss';
+import React from 'react';
+type HeaderProps = {
+    children?: React.ReactNode;
+    vitClass?: string;
+};
+declare const vitHeader: ({ children, vitClass }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export { vitHeader };

package/dist/types/components/Inputs/vitInputFilter.d.ts

@@ -0,0 +1,9 @@
+import './filter.scss';
+type InputFilterProps = {
+    vitClass?: string;
+    svgUrl?: string;
+    disabled?: boolean;
+    maxLength?: number;
+};
+declare const vitInputFilter: ({ vitClass, svgUrl, disabled, maxLength }: InputFilterProps) => import("react/jsx-runtime").JSX.Element;
+export { vitInputFilter };

package/dist/types/components/Pills/vit-pill.d.ts

@@ -0,0 +1,7 @@
+import './pill.scss';
+type PillProps = {
+    children: React.ReactNode;
+    vitClass?: string;
+};
+declare const vitPill: ({ children, vitClass }: PillProps) => import("react/jsx-runtime").JSX.Element;
+export { vitPill };

package/dist/types/components/index.d.ts

@@ -0,0 +1,6 @@
+export { vitButton } from './Buttons/vit-button';
+export { vitInputFilter } from './Inputs/vitInputFilter';
+export { vitCard } from './Cards/vit-card';
+export { vitPill } from './Pills/vit-pill';
+export { vitHeader } from './Header/vitHeader';
+export { vitGreyScreen } from './GreyScreen/greyScreen';

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@pup_roko/ui-kit",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "rollup -c --bundleConfigAsCjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.2.0",
+    "@storybook/addon-docs": "^10.2.0",
+    "@storybook/addon-vitest": "^10.2.0",
+    "@storybook/react-vite": "^10.2.0",
+    "@types/node": "^24.10.9",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.6",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "globals": "^16.5.0",
+    "playwright": "^1.57.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "rollup": "^4.57.1",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass-embedded": "^1.97.3",
+    "storybook": "^10.2.0",
+    "tslib": "^2.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}