@protonradio/proton-ui 0.3.7 → 0.3.8

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 (7) hide show
  1. package/README.md +50 -50
  2. package/dist/icons.svg +10 -10
  3. package/dist/proton-ui.es.js +1 -1
  4. package/dist/proton-ui.es.js.map +1 -1
  5. package/dist/proton-ui.umd.js +3 -3
  6. package/dist/proton-ui.umd.js.map +1 -1
  7. package/package.json +65 -65
package/README.md CHANGED
@@ -1,50 +1,50 @@
1
- # Proton UI
2
-
3
- ![](./.readme.gif)
4
-
5
- ```
6
- npm run storybook
7
- ```
8
-
9
- ### Publishing Updates to NPM
10
-
11
- ```
12
- npm run build
13
- npm version <new_version> // increment version in package.json accordingly using semver
14
- npm publish
15
- ```
16
-
17
- ### Themes
18
-
19
- This library supports themes for the various applications that use it. Ideally, we would unify our app designs, but until then themes is a way to support different design patterns using the same api.
20
-
21
- #### Adding a Theme
22
-
23
- The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEMES` object following the pattern `[themeName]: [themeClassName]`.
24
-
25
- When applying to a project, you can import available themes using `THEMES` from this library and apply the theme an outer div on the application. See below for an example.
26
-
27
- ```jsx
28
- function MyApp({ Component, pageProps }) {
29
- return (
30
- <ThemeProvider theme={THEMES.DARK}>
31
- <Component {...pageProps} />
32
- </ThemeProvider>
33
- );
34
- }
35
- ```
36
-
37
- #### Styling for a theme
38
-
39
- To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
40
-
41
- For example, to apply a style to the dark theme, you can use the following css.
42
- ```css
43
- .proton-ui__theme--dark .myComponent {
44
- background-color: red;
45
- }
46
- ```
47
-
48
- ### Recommended Reading
49
-
50
- - https://www.gabe.pizza/notes-on-component-libraries/
1
+ # Proton UI
2
+
3
+ ![](./.readme.gif)
4
+
5
+ ```
6
+ npm run storybook
7
+ ```
8
+
9
+ ### Publishing Updates to NPM
10
+
11
+ ```
12
+ npm run build
13
+ npm version <new_version> // increment version in package.json accordingly using semver
14
+ npm publish
15
+ ```
16
+
17
+ ### Themes
18
+
19
+ This library supports themes for the various applications that use it. Ideally, we would unify our app designs, but until then themes is a way to support different design patterns using the same api.
20
+
21
+ #### Adding a Theme
22
+
23
+ The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEMES` object following the pattern `[themeName]: [themeClassName]`.
24
+
25
+ When applying to a project, you can import available themes using `THEMES` from this library and apply the theme an outer div on the application. See below for an example.
26
+
27
+ ```jsx
28
+ function MyApp({ Component, pageProps }) {
29
+ return (
30
+ <ThemeProvider theme={THEMES.DARK}>
31
+ <Component {...pageProps} />
32
+ </ThemeProvider>
33
+ );
34
+ }
35
+ ```
36
+
37
+ #### Styling for a theme
38
+
39
+ To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
40
+
41
+ For example, to apply a style to the dark theme, you can use the following css.
42
+ ```css
43
+ .proton-ui__theme--dark .myComponent {
44
+ background-color: red;
45
+ }
46
+ ```
47
+
48
+ ### Recommended Reading
49
+
50
+ - https://www.gabe.pizza/notes-on-component-libraries/
package/dist/icons.svg CHANGED
@@ -1,11 +1,11 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2
- <defs>
3
- <symbol id="external-link" viewBox="0 0 512 512">
4
- <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
5
- </symbol>
6
-
7
- <symbol id="caret-down" viewBox="0 0 512 512">
8
- <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
9
- </symbol>
10
- </defs>
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2
+ <defs>
3
+ <symbol id="external-link" viewBox="0 0 512 512">
4
+ <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
5
+ </symbol>
6
+
7
+ <symbol id="caret-down" viewBox="0 0 512 512">
8
+ <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
9
+ </symbol>
10
+ </defs>
11
11
  </svg>
package/dist/proton-ui.es.js CHANGED
@@ -8470,7 +8470,7 @@ mf.Option = function(e) {
8470
8470
  }
8471
8471
  );
8472
8472
  };
8473
- const $f = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgPGRlZnM+DQogICAgPHN5bWJvbCBpZD0iZXh0ZXJuYWwtbGluayIgdmlld0JveD0iMCAwIDUxMiA1MTIiPg0KICAgICAgPHBhdGggZD0iTTM4NCAyMjR2MTg0YTQwIDQwIDAgMDEtNDAgNDBIMTA0YTQwIDQwIDAgMDEtNDAtNDBWMTY4YTQwIDQwIDAgMDE0MC00MGgxNjcuNDhNMzM2IDY0aDExMnYxMTJNMjI0IDI4OEw0NDAgNzIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiLz4NCiAgICA8L3N5bWJvbD4NCg0KICAgIDxzeW1ib2wgaWQ9ImNhcmV0LWRvd24iIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4NCiAgICAgIDxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTIzMy40IDQwNi42YzEyLjUgMTIuNSAzMi44IDEyLjUgNDUuMyAwbDE5Mi0xOTJjMTIuNS0xMi41IDEyLjUtMzIuOCAwLTQ1LjNzLTMyLjgtMTIuNS00NS4zIDBMMjU2IDMzOC43TDg2LjYgMTY5LjRjLTEyLjUtMTIuNS0zMi44LTEyLjUtNDUuMyAwcy0xMi41IDMyLjggMCA0NS4zbDE5MiAxOTJ6Ii8+DQogICAgPC9zeW1ib2w+DQogIDwvZGVmcz4NCjwvc3ZnPg==";
8473
+ const $f = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICA8ZGVmcz4KICAgIDxzeW1ib2wgaWQ9ImV4dGVybmFsLWxpbmsiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICAgICAgPHBhdGggZD0iTTM4NCAyMjR2MTg0YTQwIDQwIDAgMDEtNDAgNDBIMTA0YTQwIDQwIDAgMDEtNDAtNDBWMTY4YTQwIDQwIDAgMDE0MC00MGgxNjcuNDhNMzM2IDY0aDExMnYxMTJNMjI0IDI4OEw0NDAgNzIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiLz4KICAgIDwvc3ltYm9sPgoKICAgIDxzeW1ib2wgaWQ9ImNhcmV0LWRvd24iIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICAgICAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjdMODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz4KICAgIDwvc3ltYm9sPgogIDwvZGVmcz4KPC9zdmc+";
8474
8474
  function yf(t) {
8475
8475
  let e = {
8476
8476
  height: t.size || void 0,