@bezdenegsvarkinet/ui-library 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +73 -0
  2. package/dist/index.d.ts +17 -0
  3. package/dist/index.js +94 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/index.mjs +94 -0
  6. package/dist/index.mjs.map +1 -0
  7. package/dist/ui-library.css +361 -0
  8. package/dist/vite.svg +1 -0
  9. package/package.json +73 -0
package/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # React + TypeScript + Vite
2
+
3
+ This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
+
5
+ Currently, two official plugins are available:
6
+
7
+ - [@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
8
+ - [@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
9
+
10
+ ## React Compiler
11
+
12
+ 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).
13
+
14
+ ## Expanding the ESLint configuration
15
+
16
+ If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
17
+
18
+ ```js
19
+ export default defineConfig([
20
+ globalIgnores(['dist']),
21
+ {
22
+ files: ['**/*.{ts,tsx}'],
23
+ extends: [
24
+ // Other configs...
25
+
26
+ // Remove tseslint.configs.recommended and replace with this
27
+ tseslint.configs.recommendedTypeChecked,
28
+ // Alternatively, use this for stricter rules
29
+ tseslint.configs.strictTypeChecked,
30
+ // Optionally, add this for stylistic rules
31
+ tseslint.configs.stylisticTypeChecked,
32
+
33
+ // Other configs...
34
+ ],
35
+ languageOptions: {
36
+ parserOptions: {
37
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
38
+ tsconfigRootDir: import.meta.dirname,
39
+ },
40
+ // other options...
41
+ },
42
+ },
43
+ ])
44
+ ```
45
+
46
+ 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:
47
+
48
+ ```js
49
+ // eslint.config.js
50
+ import reactX from 'eslint-plugin-react-x'
51
+ import reactDom from 'eslint-plugin-react-dom'
52
+
53
+ export default defineConfig([
54
+ globalIgnores(['dist']),
55
+ {
56
+ files: ['**/*.{ts,tsx}'],
57
+ extends: [
58
+ // Other configs...
59
+ // Enable lint rules for React
60
+ reactX.configs['recommended-typescript'],
61
+ // Enable lint rules for React DOM
62
+ reactDom.configs.recommended,
63
+ ],
64
+ languageOptions: {
65
+ parserOptions: {
66
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
67
+ tsconfigRootDir: import.meta.dirname,
68
+ },
69
+ // other options...
70
+ },
71
+ },
72
+ ])
73
+ ```
package/dist/index.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { Button } from './stories/Button';
2
+ import { ButtonProps } from './stories/Button';
3
+ import { Header } from './stories/Header';
4
+ import { HeaderProps } from './stories/Header';
5
+ import { Page } from './stories/Page';
6
+
7
+ export { Button }
8
+
9
+ export { ButtonProps }
10
+
11
+ export { Header }
12
+
13
+ export { HeaderProps }
14
+
15
+ export { Page }
16
+
17
+ export { }
package/dist/index.js ADDED
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const react = require("react");
5
+ const Button = ({ primary = false, size = "medium", backgroundColor, label, ...props }) => {
6
+ const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
7
+ return /* @__PURE__ */ jsxRuntime.jsx(
8
+ "button",
9
+ {
10
+ type: "button",
11
+ className: ["storybook-button bg-red-500! text-blue-500!", `storybook-button--${size}`, mode].join(" "),
12
+ style: { backgroundColor },
13
+ ...props,
14
+ children: label
15
+ }
16
+ );
17
+ };
18
+ const Header = ({ user, onLogin, onLogout, onCreateAccount }) => /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "storybook-header bg-pink-400!", children: [
19
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
20
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "none", fillRule: "evenodd", children: [
21
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
22
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
23
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })
24
+ ] }) }),
25
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-green-500", children: "Acme" })
26
+ ] }),
27
+ /* @__PURE__ */ jsxRuntime.jsx("div", { children: user ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
28
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "welcome", children: [
29
+ "Welcome, ",
30
+ /* @__PURE__ */ jsxRuntime.jsx("b", { children: user.name }),
31
+ "!"
32
+ ] }),
33
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "small", onClick: onLogout, label: "Log out" })
34
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
35
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "small", onClick: onLogin, label: "Log in" }),
36
+ /* @__PURE__ */ jsxRuntime.jsx(Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })
37
+ ] }) })
38
+ ] }) });
39
+ const Page = () => {
40
+ const [user, setUser] = react.useState();
41
+ return /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
42
+ /* @__PURE__ */ jsxRuntime.jsx(
43
+ Header,
44
+ {
45
+ user,
46
+ onLogin: () => setUser({ name: "Jane Doe" }),
47
+ onLogout: () => setUser(void 0),
48
+ onCreateAccount: () => setUser({ name: "Jane Doe" })
49
+ }
50
+ ),
51
+ /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "storybook-page", children: [
52
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Pages in Storybook" }),
53
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
54
+ "We recommend building UIs with a",
55
+ " ",
56
+ /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "component-driven" }) }),
57
+ " ",
58
+ "process starting with atomic components and ending with pages."
59
+ ] }),
60
+ /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
61
+ /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
62
+ /* @__PURE__ */ jsxRuntime.jsx("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
63
+ /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
64
+ ] }),
65
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
66
+ "Get a guided tutorial on component-driven development at",
67
+ " ",
68
+ /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }),
69
+ ". Read more in the",
70
+ " ",
71
+ /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }),
72
+ "."
73
+ ] }),
74
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tip-wrapper", children: [
75
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tip", children: "Tip" }),
76
+ " Adjust the width of the canvas with the",
77
+ " ",
78
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.jsx(
79
+ "path",
80
+ {
81
+ d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
82
+ id: "a",
83
+ fill: "#999"
84
+ }
85
+ ) }) }),
86
+ "Viewports addon in the toolbar"
87
+ ] })
88
+ ] })
89
+ ] });
90
+ };
91
+ exports.Button = Button;
92
+ exports.Header = Header;
93
+ exports.Page = Page;
94
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/stories/Button.tsx","../src/stories/Header.tsx","../src/stories/Page.tsx"],"sourcesContent":["export interface ButtonProps {\n\t/** Is this the principal call to action on the page? */\n\tprimary?: boolean\n\t/** What background color to use */\n\tbackgroundColor?: string\n\t/** How large should the button be? */\n\tsize?: 'small' | 'medium' | 'large'\n\t/** Button contents */\n\tlabel: string\n\t/** Optional click handler */\n\tonClick?: () => void\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {\n\tconst mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'\n\treturn (\n\t\t<button\n\t\t\ttype='button'\n\t\t\tclassName={['storybook-button bg-red-500! text-blue-500!', `storybook-button--${size}`, mode].join(' ')}\n\t\t\tstyle={{ backgroundColor }}\n\t\t\t{...props}\n\t\t>\n\t\t\t{label}\n\t\t</button>\n\t)\n}","import { Button } from './Button'\n\ntype User = {\n\tname: string\n}\n\nexport interface HeaderProps {\n\tuser?: User\n\tonLogin?: () => void\n\tonLogout?: () => void\n\tonCreateAccount?: () => void\n}\n\nexport const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (\n\t<header>\n\t\t<div className='storybook-header bg-pink-400!'>\n\t\t\t<div>\n\t\t\t\t<svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t<path d='M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z' fill='#FFF' />\n\t\t\t\t\t\t<path d='M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z' fill='#555AB9' />\n\t\t\t\t\t\t<path d='M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z' fill='#91BAF8' />\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<h1 className={'text-green-500'}>Acme</h1>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t{user ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span className='welcome'>\n\t\t\t\t\t\t\tWelcome, <b>{user.name}</b>!\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<Button size='small' onClick={onLogout} label='Log out' />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button size='small' onClick={onLogin} label='Log in' />\n\t\t\t\t\t\t<Button primary size='small' onClick={onCreateAccount} label='Sign up' />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t</header>\n)","import { Header } from './Header'\nimport { FC, useState } from 'react'\n\ntype User = {\n\tname: string\n}\n\nexport const Page: FC = () => {\n\tconst [user, setUser] = useState<User>()\n\n\treturn (\n\t\t<article>\n\t\t\t<Header\n\t\t\t\tuser={user}\n\t\t\t\tonLogin={() => setUser({ name: 'Jane Doe' })}\n\t\t\t\tonLogout={() => setUser(undefined)}\n\t\t\t\tonCreateAccount={() => setUser({ name: 'Jane Doe' })}\n\t\t\t/>\n\n\t\t\t<section className='storybook-page'>\n\t\t\t\t<h2>Pages in Storybook</h2>\n\t\t\t\t<p>\n\t\t\t\t\tWe recommend building UIs with a{' '}\n\t\t\t\t\t<a href='https://componentdriven.org' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\t<strong>component-driven</strong>\n\t\t\t\t\t</a>{' '}\n\t\t\t\t\tprocess starting with atomic components and ending with pages.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tRender pages with mock data. This makes it easy to build and review page states without needing to navigate to\n\t\t\t\t\tthem in your app. Here are some handy patterns for managing page data in Storybook:\n\t\t\t\t</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tUse a higher-level connected component. Storybook helps you compose such data from the \"args\" of child\n\t\t\t\t\t\tcomponent stories\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tAssemble data in the page component from your services. You can mock these services out using Storybook.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>\n\t\t\t\t\tGet a guided tutorial on component-driven development at{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/tutorials/' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tStorybook tutorials\n\t\t\t\t\t</a>\n\t\t\t\t\t. Read more in the{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/docs' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tdocs\n\t\t\t\t\t</a>\n\t\t\t\t\t.\n\t\t\t\t</p>\n\t\t\t\t<div className='tip-wrapper'>\n\t\t\t\t\t<span className='tip'>Tip</span> Adjust the width of the canvas with the{' '}\n\t\t\t\t\t<svg width='10' height='10' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td='M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z'\n\t\t\t\t\t\t\t\tid='a'\n\t\t\t\t\t\t\t\tfill='#999'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</svg>\n\t\t\t\t\tViewports addon in the toolbar\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</article>\n\t)\n}"],"names":["jsx","jsxs","Fragment","useState"],"mappings":"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"}
package/dist/index.mjs ADDED
@@ -0,0 +1,94 @@
1
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
+ import { useState } from "react";
3
+ const Button = ({ primary = false, size = "medium", backgroundColor, label, ...props }) => {
4
+ const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
5
+ return /* @__PURE__ */ jsx(
6
+ "button",
7
+ {
8
+ type: "button",
9
+ className: ["storybook-button bg-red-500! text-blue-500!", `storybook-button--${size}`, mode].join(" "),
10
+ style: { backgroundColor },
11
+ ...props,
12
+ children: label
13
+ }
14
+ );
15
+ };
16
+ const Header = ({ user, onLogin, onLogout, onCreateAccount }) => /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs("div", { className: "storybook-header bg-pink-400!", children: [
17
+ /* @__PURE__ */ jsxs("div", { children: [
18
+ /* @__PURE__ */ jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs("g", { fill: "none", fillRule: "evenodd", children: [
19
+ /* @__PURE__ */ jsx("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
20
+ /* @__PURE__ */ jsx("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
21
+ /* @__PURE__ */ jsx("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })
22
+ ] }) }),
23
+ /* @__PURE__ */ jsx("h1", { className: "text-green-500", children: "Acme" })
24
+ ] }),
25
+ /* @__PURE__ */ jsx("div", { children: user ? /* @__PURE__ */ jsxs(Fragment, { children: [
26
+ /* @__PURE__ */ jsxs("span", { className: "welcome", children: [
27
+ "Welcome, ",
28
+ /* @__PURE__ */ jsx("b", { children: user.name }),
29
+ "!"
30
+ ] }),
31
+ /* @__PURE__ */ jsx(Button, { size: "small", onClick: onLogout, label: "Log out" })
32
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
33
+ /* @__PURE__ */ jsx(Button, { size: "small", onClick: onLogin, label: "Log in" }),
34
+ /* @__PURE__ */ jsx(Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })
35
+ ] }) })
36
+ ] }) });
37
+ const Page = () => {
38
+ const [user, setUser] = useState();
39
+ return /* @__PURE__ */ jsxs("article", { children: [
40
+ /* @__PURE__ */ jsx(
41
+ Header,
42
+ {
43
+ user,
44
+ onLogin: () => setUser({ name: "Jane Doe" }),
45
+ onLogout: () => setUser(void 0),
46
+ onCreateAccount: () => setUser({ name: "Jane Doe" })
47
+ }
48
+ ),
49
+ /* @__PURE__ */ jsxs("section", { className: "storybook-page", children: [
50
+ /* @__PURE__ */ jsx("h2", { children: "Pages in Storybook" }),
51
+ /* @__PURE__ */ jsxs("p", { children: [
52
+ "We recommend building UIs with a",
53
+ " ",
54
+ /* @__PURE__ */ jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx("strong", { children: "component-driven" }) }),
55
+ " ",
56
+ "process starting with atomic components and ending with pages."
57
+ ] }),
58
+ /* @__PURE__ */ jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }),
59
+ /* @__PURE__ */ jsxs("ul", { children: [
60
+ /* @__PURE__ */ jsx("li", { children: 'Use a higher-level connected component. Storybook helps you compose such data from the "args" of child component stories' }),
61
+ /* @__PURE__ */ jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })
62
+ ] }),
63
+ /* @__PURE__ */ jsxs("p", { children: [
64
+ "Get a guided tutorial on component-driven development at",
65
+ " ",
66
+ /* @__PURE__ */ jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }),
67
+ ". Read more in the",
68
+ " ",
69
+ /* @__PURE__ */ jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }),
70
+ "."
71
+ ] }),
72
+ /* @__PURE__ */ jsxs("div", { className: "tip-wrapper", children: [
73
+ /* @__PURE__ */ jsx("span", { className: "tip", children: "Tip" }),
74
+ " Adjust the width of the canvas with the",
75
+ " ",
76
+ /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx(
77
+ "path",
78
+ {
79
+ d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z",
80
+ id: "a",
81
+ fill: "#999"
82
+ }
83
+ ) }) }),
84
+ "Viewports addon in the toolbar"
85
+ ] })
86
+ ] })
87
+ ] });
88
+ };
89
+ export {
90
+ Button,
91
+ Header,
92
+ Page
93
+ };
94
+ //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["../src/stories/Button.tsx","../src/stories/Header.tsx","../src/stories/Page.tsx"],"sourcesContent":["export interface ButtonProps {\n\t/** Is this the principal call to action on the page? */\n\tprimary?: boolean\n\t/** What background color to use */\n\tbackgroundColor?: string\n\t/** How large should the button be? */\n\tsize?: 'small' | 'medium' | 'large'\n\t/** Button contents */\n\tlabel: string\n\t/** Optional click handler */\n\tonClick?: () => void\n}\n\n/** Primary UI component for user interaction */\nexport const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {\n\tconst mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'\n\treturn (\n\t\t<button\n\t\t\ttype='button'\n\t\t\tclassName={['storybook-button bg-red-500! text-blue-500!', `storybook-button--${size}`, mode].join(' ')}\n\t\t\tstyle={{ backgroundColor }}\n\t\t\t{...props}\n\t\t>\n\t\t\t{label}\n\t\t</button>\n\t)\n}","import { Button } from './Button'\n\ntype User = {\n\tname: string\n}\n\nexport interface HeaderProps {\n\tuser?: User\n\tonLogin?: () => void\n\tonLogout?: () => void\n\tonCreateAccount?: () => void\n}\n\nexport const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (\n\t<header>\n\t\t<div className='storybook-header bg-pink-400!'>\n\t\t\t<div>\n\t\t\t\t<svg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t<path d='M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z' fill='#FFF' />\n\t\t\t\t\t\t<path d='M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z' fill='#555AB9' />\n\t\t\t\t\t\t<path d='M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z' fill='#91BAF8' />\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t\t<h1 className={'text-green-500'}>Acme</h1>\n\t\t\t</div>\n\t\t\t<div>\n\t\t\t\t{user ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span className='welcome'>\n\t\t\t\t\t\t\tWelcome, <b>{user.name}</b>!\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<Button size='small' onClick={onLogout} label='Log out' />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Button size='small' onClick={onLogin} label='Log in' />\n\t\t\t\t\t\t<Button primary size='small' onClick={onCreateAccount} label='Sign up' />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t</header>\n)","import { Header } from './Header'\nimport { FC, useState } from 'react'\n\ntype User = {\n\tname: string\n}\n\nexport const Page: FC = () => {\n\tconst [user, setUser] = useState<User>()\n\n\treturn (\n\t\t<article>\n\t\t\t<Header\n\t\t\t\tuser={user}\n\t\t\t\tonLogin={() => setUser({ name: 'Jane Doe' })}\n\t\t\t\tonLogout={() => setUser(undefined)}\n\t\t\t\tonCreateAccount={() => setUser({ name: 'Jane Doe' })}\n\t\t\t/>\n\n\t\t\t<section className='storybook-page'>\n\t\t\t\t<h2>Pages in Storybook</h2>\n\t\t\t\t<p>\n\t\t\t\t\tWe recommend building UIs with a{' '}\n\t\t\t\t\t<a href='https://componentdriven.org' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\t<strong>component-driven</strong>\n\t\t\t\t\t</a>{' '}\n\t\t\t\t\tprocess starting with atomic components and ending with pages.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tRender pages with mock data. This makes it easy to build and review page states without needing to navigate to\n\t\t\t\t\tthem in your app. Here are some handy patterns for managing page data in Storybook:\n\t\t\t\t</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tUse a higher-level connected component. Storybook helps you compose such data from the \"args\" of child\n\t\t\t\t\t\tcomponent stories\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\tAssemble data in the page component from your services. You can mock these services out using Storybook.\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<p>\n\t\t\t\t\tGet a guided tutorial on component-driven development at{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/tutorials/' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tStorybook tutorials\n\t\t\t\t\t</a>\n\t\t\t\t\t. Read more in the{' '}\n\t\t\t\t\t<a href='https://storybook.js.org/docs' target='_blank' rel='noopener noreferrer'>\n\t\t\t\t\t\tdocs\n\t\t\t\t\t</a>\n\t\t\t\t\t.\n\t\t\t\t</p>\n\t\t\t\t<div className='tip-wrapper'>\n\t\t\t\t\t<span className='tip'>Tip</span> Adjust the width of the canvas with the{' '}\n\t\t\t\t\t<svg width='10' height='10' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'>\n\t\t\t\t\t\t<g fill='none' fillRule='evenodd'>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td='M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z'\n\t\t\t\t\t\t\t\tid='a'\n\t\t\t\t\t\t\t\tfill='#999'\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</g>\n\t\t\t\t\t</svg>\n\t\t\t\t\tViewports addon in the toolbar\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</article>\n\t)\n}"],"names":[],"mappings":";;AAcO,MAAM,SAAS,CAAC,EAAE,UAAU,OAAO,OAAO,UAAU,iBAAiB,OAAO,GAAG,YAAyB;AAC9G,QAAM,OAAO,UAAU,8BAA8B;AACrD,SACC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAW,CAAC,+CAA+C,qBAAqB,IAAI,IAAI,IAAI,EAAE,KAAK,GAAG;AAAA,MACtG,OAAO,EAAE,gBAAA;AAAA,MACR,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGJ;ACbO,MAAM,SAAS,CAAC,EAAE,MAAM,SAAS,UAAU,gBAAA,MACjD,oBAAC,UAAA,EACA,UAAA,qBAAC,OAAA,EAAI,WAAU,iCACd,UAAA;AAAA,EAAA,qBAAC,OAAA,EACA,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,OAAM,8BACrD,UAAA,qBAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WACvB,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,GAAE,qFAAoF,MAAK,QAAO;AAAA,MACxG,oBAAC,QAAA,EAAK,GAAE,oEAAmE,MAAK,WAAU;AAAA,MAC1F,oBAAC,QAAA,EAAK,GAAE,kEAAiE,MAAK,UAAA,CAAU;AAAA,IAAA,EAAA,CACzF,EAAA,CACD;AAAA,IACA,oBAAC,MAAA,EAAG,WAAW,kBAAkB,UAAA,OAAA,CAAI;AAAA,EAAA,GACtC;AAAA,EACA,oBAAC,OAAA,EACC,UAAA,OACA,qBAAA,UAAA,EACC,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,MAAA;AAAA,MAChB,oBAAC,KAAA,EAAG,UAAA,KAAK,KAAA,CAAK;AAAA,MAAI;AAAA,IAAA,GAC5B;AAAA,wBACC,QAAA,EAAO,MAAK,SAAQ,SAAS,UAAU,OAAM,UAAA,CAAU;AAAA,EAAA,EAAA,CACzD,IAEA,qBAAA,UAAA,EACC,UAAA;AAAA,IAAA,oBAAC,UAAO,MAAK,SAAQ,SAAS,SAAS,OAAM,UAAS;AAAA,IACtD,oBAAC,UAAO,SAAO,MAAC,MAAK,SAAQ,SAAS,iBAAiB,OAAM,UAAA,CAAU;AAAA,EAAA,EAAA,CACxE,EAAA,CAEF;AAAA,EAAA,CACD,EAAA,CACD;ACnCM,MAAM,OAAW,MAAM;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAA;AAExB,8BACE,WAAA,EACA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA,SAAS,MAAM,QAAQ,EAAE,MAAM,YAAY;AAAA,QAC3C,UAAU,MAAM,QAAQ,MAAS;AAAA,QACjC,iBAAiB,MAAM,QAAQ,EAAE,MAAM,YAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAGpD,qBAAC,WAAA,EAAQ,WAAU,kBAClB,UAAA;AAAA,MAAA,oBAAC,QAAG,UAAA,qBAAA,CAAkB;AAAA,2BACrB,KAAA,EAAE,UAAA;AAAA,QAAA;AAAA,QAC+B;AAAA,QACjC,oBAAC,KAAA,EAAE,MAAK,+BAA8B,QAAO,UAAS,KAAI,uBACzD,UAAA,oBAAC,UAAA,EAAO,UAAA,mBAAA,CAAgB,GACzB;AAAA,QAAK;AAAA,QAAI;AAAA,MAAA,GAEV;AAAA,MACA,oBAAC,OAAE,UAAA,qMAAA,CAGH;AAAA,2BACC,MAAA,EACA,UAAA;AAAA,QAAA,oBAAC,QAAG,UAAA,2HAAA,CAGJ;AAAA,QACA,oBAAC,QAAG,UAAA,2GAAA,CAEJ;AAAA,MAAA,GACD;AAAA,2BACC,KAAA,EAAE,UAAA;AAAA,QAAA;AAAA,QACuD;AAAA,QACzD,oBAAC,OAAE,MAAK,uCAAsC,QAAO,UAAS,KAAI,uBAAsB,UAAA,sBAAA,CAExF;AAAA,QAAI;AAAA,QACe;AAAA,QACnB,oBAAC,OAAE,MAAK,iCAAgC,QAAO,UAAS,KAAI,uBAAsB,UAAA,OAAA,CAElF;AAAA,QAAI;AAAA,MAAA,GAEL;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,eACd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,OAAM,UAAA,OAAG;AAAA,QAAO;AAAA,QAAyC;AAAA,QACzE,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,OAAM,8BACrD,UAAA,oBAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,GAAE;AAAA,YACF,IAAG;AAAA,YACH,MAAK;AAAA,UAAA;AAAA,QAAA,GAEP,EAAA,CACD;AAAA,QAAM;AAAA,MAAA,EAAA,CAEP;AAAA,IAAA,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}
package/dist/ui-library.css ADDED
@@ -0,0 +1,361 @@
1
+ /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
2
+ @layer properties {
3
+ @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4
+ *, :before, :after, ::backdrop {
5
+ --tw-rotate-x: initial;
6
+ --tw-rotate-y: initial;
7
+ --tw-rotate-z: initial;
8
+ --tw-skew-x: initial;
9
+ --tw-skew-y: initial;
10
+ --tw-border-style: solid;
11
+ }
12
+ }
13
+ }
14
+
15
+ @layer theme {
16
+ :root, :host {
17
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
18
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
19
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
20
+ "Courier New", monospace;
21
+ --color-red-500: oklch(63.7% .237 25.331);
22
+ --color-green-500: oklch(72.3% .219 149.579);
23
+ --color-blue-500: oklch(62.3% .214 259.815);
24
+ --color-pink-400: oklch(71.8% .202 349.761);
25
+ --default-font-family: var(--font-sans);
26
+ --default-mono-font-family: var(--font-mono);
27
+ }
28
+ }
29
+
30
+ @layer base {
31
+ *, :after, :before, ::backdrop {
32
+ box-sizing: border-box;
33
+ border: 0 solid;
34
+ margin: 0;
35
+ padding: 0;
36
+ }
37
+
38
+ ::file-selector-button {
39
+ box-sizing: border-box;
40
+ border: 0 solid;
41
+ margin: 0;
42
+ padding: 0;
43
+ }
44
+
45
+ html, :host {
46
+ -webkit-text-size-adjust: 100%;
47
+ tab-size: 4;
48
+ line-height: 1.5;
49
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
50
+ font-feature-settings: var(--default-font-feature-settings, normal);
51
+ font-variation-settings: var(--default-font-variation-settings, normal);
52
+ -webkit-tap-highlight-color: transparent;
53
+ }
54
+
55
+ hr {
56
+ height: 0;
57
+ color: inherit;
58
+ border-top-width: 1px;
59
+ }
60
+
61
+ abbr:where([title]) {
62
+ -webkit-text-decoration: underline dotted;
63
+ text-decoration: underline dotted;
64
+ }
65
+
66
+ h1, h2, h3, h4, h5, h6 {
67
+ font-size: inherit;
68
+ font-weight: inherit;
69
+ }
70
+
71
+ a {
72
+ color: inherit;
73
+ -webkit-text-decoration: inherit;
74
+ -webkit-text-decoration: inherit;
75
+ -webkit-text-decoration: inherit;
76
+ text-decoration: inherit;
77
+ }
78
+
79
+ b, strong {
80
+ font-weight: bolder;
81
+ }
82
+
83
+ code, kbd, samp, pre {
84
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
85
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
86
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
87
+ font-size: 1em;
88
+ }
89
+
90
+ small {
91
+ font-size: 80%;
92
+ }
93
+
94
+ sub, sup {
95
+ vertical-align: baseline;
96
+ font-size: 75%;
97
+ line-height: 0;
98
+ position: relative;
99
+ }
100
+
101
+ sub {
102
+ bottom: -.25em;
103
+ }
104
+
105
+ sup {
106
+ top: -.5em;
107
+ }
108
+
109
+ table {
110
+ text-indent: 0;
111
+ border-color: inherit;
112
+ border-collapse: collapse;
113
+ }
114
+
115
+ :-moz-focusring {
116
+ outline: auto;
117
+ }
118
+
119
+ progress {
120
+ vertical-align: baseline;
121
+ }
122
+
123
+ summary {
124
+ display: list-item;
125
+ }
126
+
127
+ ol, ul, menu {
128
+ list-style: none;
129
+ }
130
+
131
+ img, svg, video, canvas, audio, iframe, embed, object {
132
+ vertical-align: middle;
133
+ display: block;
134
+ }
135
+
136
+ img, video {
137
+ max-width: 100%;
138
+ height: auto;
139
+ }
140
+
141
+ button, input, select, optgroup, textarea {
142
+ font: inherit;
143
+ font-feature-settings: inherit;
144
+ font-variation-settings: inherit;
145
+ letter-spacing: inherit;
146
+ color: inherit;
147
+ opacity: 1;
148
+ background-color: #0000;
149
+ border-radius: 0;
150
+ }
151
+
152
+ ::file-selector-button {
153
+ font: inherit;
154
+ font-feature-settings: inherit;
155
+ font-variation-settings: inherit;
156
+ letter-spacing: inherit;
157
+ color: inherit;
158
+ opacity: 1;
159
+ background-color: #0000;
160
+ border-radius: 0;
161
+ }
162
+
163
+ :where(select:is([multiple], [size])) optgroup {
164
+ font-weight: bolder;
165
+ }
166
+
167
+ :where(select:is([multiple], [size])) optgroup option {
168
+ padding-inline-start: 20px;
169
+ }
170
+
171
+ ::file-selector-button {
172
+ margin-inline-end: 4px;
173
+ }
174
+
175
+ ::placeholder {
176
+ opacity: 1;
177
+ }
178
+
179
+ @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
180
+ ::placeholder {
181
+ color: currentColor;
182
+ }
183
+
184
+ @supports (color: color-mix(in lab, red, red)) {
185
+ ::placeholder {
186
+ color: color-mix(in oklab, currentcolor 50%, transparent);
187
+ }
188
+ }
189
+ }
190
+
191
+ textarea {
192
+ resize: vertical;
193
+ }
194
+
195
+ ::-webkit-search-decoration {
196
+ -webkit-appearance: none;
197
+ }
198
+
199
+ ::-webkit-date-and-time-value {
200
+ min-height: 1lh;
201
+ text-align: inherit;
202
+ }
203
+
204
+ ::-webkit-datetime-edit {
205
+ display: inline-flex;
206
+ }
207
+
208
+ ::-webkit-datetime-edit-fields-wrapper {
209
+ padding: 0;
210
+ }
211
+
212
+ ::-webkit-datetime-edit {
213
+ padding-block: 0;
214
+ }
215
+
216
+ ::-webkit-datetime-edit-year-field {
217
+ padding-block: 0;
218
+ }
219
+
220
+ ::-webkit-datetime-edit-month-field {
221
+ padding-block: 0;
222
+ }
223
+
224
+ ::-webkit-datetime-edit-day-field {
225
+ padding-block: 0;
226
+ }
227
+
228
+ ::-webkit-datetime-edit-hour-field {
229
+ padding-block: 0;
230
+ }
231
+
232
+ ::-webkit-datetime-edit-minute-field {
233
+ padding-block: 0;
234
+ }
235
+
236
+ ::-webkit-datetime-edit-second-field {
237
+ padding-block: 0;
238
+ }
239
+
240
+ ::-webkit-datetime-edit-millisecond-field {
241
+ padding-block: 0;
242
+ }
243
+
244
+ ::-webkit-datetime-edit-meridiem-field {
245
+ padding-block: 0;
246
+ }
247
+
248
+ ::-webkit-calendar-picker-indicator {
249
+ line-height: 1;
250
+ }
251
+
252
+ :-moz-ui-invalid {
253
+ box-shadow: none;
254
+ }
255
+
256
+ button, input:where([type="button"], [type="reset"], [type="submit"]) {
257
+ appearance: button;
258
+ }
259
+
260
+ ::file-selector-button {
261
+ appearance: button;
262
+ }
263
+
264
+ ::-webkit-inner-spin-button {
265
+ height: auto;
266
+ }
267
+
268
+ ::-webkit-outer-spin-button {
269
+ height: auto;
270
+ }
271
+
272
+ [hidden]:where(:not([hidden="until-found"])) {
273
+ display: none !important;
274
+ }
275
+ }
276
+
277
+ @layer components;
278
+
279
+ @layer utilities {
280
+ .fixed {
281
+ position: fixed;
282
+ }
283
+
284
+ .static {
285
+ position: static;
286
+ }
287
+
288
+ .contents {
289
+ display: contents;
290
+ }
291
+
292
+ .flex {
293
+ display: flex;
294
+ }
295
+
296
+ .inline-block {
297
+ display: inline-block;
298
+ }
299
+
300
+ .transform {
301
+ transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
302
+ }
303
+
304
+ .border {
305
+ border-style: var(--tw-border-style);
306
+ border-width: 1px;
307
+ }
308
+
309
+ .bg-pink-400\! {
310
+ background-color: var(--color-pink-400) !important;
311
+ }
312
+
313
+ .bg-red-500\! {
314
+ background-color: var(--color-red-500) !important;
315
+ }
316
+
317
+ .text-blue-500\! {
318
+ color: var(--color-blue-500) !important;
319
+ }
320
+
321
+ .text-green-500 {
322
+ color: var(--color-green-500);
323
+ }
324
+ }
325
+
326
+ :root {
327
+ --color-primary: #3b82f6;
328
+ --color-secondary: #64748b;
329
+ --font-base: system-ui, Avenir, Helvetica, Arial, sans-serif;
330
+ }
331
+
332
+ @property --tw-rotate-x {
333
+ syntax: "*";
334
+ inherits: false
335
+ }
336
+
337
+ @property --tw-rotate-y {
338
+ syntax: "*";
339
+ inherits: false
340
+ }
341
+
342
+ @property --tw-rotate-z {
343
+ syntax: "*";
344
+ inherits: false
345
+ }
346
+
347
+ @property --tw-skew-x {
348
+ syntax: "*";
349
+ inherits: false
350
+ }
351
+
352
+ @property --tw-skew-y {
353
+ syntax: "*";
354
+ inherits: false
355
+ }
356
+
357
+ @property --tw-border-style {
358
+ syntax: "*";
359
+ inherits: false;
360
+ initial-value: solid;
361
+ }
package/dist/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/package.json ADDED
@@ -0,0 +1,73 @@
1
+ {
2
+ "name": "@bezdenegsvarkinet/ui-library",
3
+ "private": false,
4
+ "version": "0.1.0",
5
+ "type": "module",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "sideEffects": [
10
+ "**/*.css"
11
+ ],
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "import": "./dist/index.mjs",
16
+ "require": "./dist/index.js"
17
+ },
18
+ "./styles.css": "./dist/index.css"
19
+ },
20
+ "publishConfig": {
21
+ "access": "public",
22
+ "registry": "https://registry.npmjs.org"
23
+ },
24
+ "scripts": {
25
+ "dev": "vite",
26
+ "build": "tsc --project tsconfig.build.json && vite build",
27
+ "lint": "eslint .",
28
+ "preview": "vite preview",
29
+ "storybook": "storybook dev -p 6006",
30
+ "build-storybook": "storybook build",
31
+ "chromatic": "chromatic --project-token=${CHROMATIC_PROJECT_TOKEN}",
32
+ "chromatic:ci": "chromatic --exit-zero-on-changes --project-token=${CHROMATIC_PROJECT_TOKEN}",
33
+ "changeset": "changeset",
34
+ "version-packages": "changeset version",
35
+ "changeset:publish": "changeset publish"
36
+ },
37
+ "peerDependencies": {
38
+ "react": "^18.0.0 || ^19.0.0",
39
+ "react-dom": "^18.0.0 || ^19.0.0",
40
+ "tailwindcss": "^4.2.1"
41
+ },
42
+ "dependencies": {
43
+ "@tailwindcss/vite": "^4.2.1"
44
+ },
45
+ "devDependencies": {
46
+ "@changesets/cli": "^2.29.8",
47
+ "@chromatic-com/storybook": "^5.0.1",
48
+ "@eslint/js": "^9.39.1",
49
+ "@storybook/addon-a11y": "^10.2.13",
50
+ "@storybook/addon-docs": "^10.2.13",
51
+ "@storybook/addon-vitest": "^10.2.13",
52
+ "@storybook/react-vite": "^10.2.13",
53
+ "@types/node": "^24.10.1",
54
+ "@types/react": "^19.2.7",
55
+ "@types/react-dom": "^19.2.3",
56
+ "@vitejs/plugin-react": "^5.1.1",
57
+ "@vitest/browser-playwright": "^4.0.18",
58
+ "@vitest/coverage-v8": "^4.0.18",
59
+ "chromatic": "^15.2.0",
60
+ "eslint": "^9.39.1",
61
+ "eslint-plugin-react-hooks": "^7.0.1",
62
+ "eslint-plugin-react-refresh": "^0.4.24",
63
+ "eslint-plugin-storybook": "^10.2.13",
64
+ "globals": "^16.5.0",
65
+ "playwright": "^1.58.2",
66
+ "storybook": "^10.2.13",
67
+ "typescript": "~5.9.3",
68
+ "typescript-eslint": "^8.48.0",
69
+ "vite": "^7.3.1",
70
+ "vite-plugin-dts": "^4.5.4",
71
+ "vitest": "^4.0.18"
72
+ }
73
+ }