@protonradio/proton-ui 0.10.13 → 0.10.14

package/README.md

@@ -1,73 +1,73 @@
-# Proton UI
-
-![](./.readme.gif)
-
-```
-npm run storybook
-```
-
-### Publishing Updates to NPM
-
-```
-npm run build
-npm version <new_version>  // increment version in package.json accordingly using semver
-npm publish
-```
-
-### Themes
-
-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.
-
-#### Adding a Theme
-
-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]`.
-
-#### Styling for a theme
-
-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.
-
-For example, to apply a style to the dark theme, you can use the following css.
-```css
-.proton-ui__theme--dark .myComponent {
-  background-color: red;
-}
-```
-
-### Implementing in your application
-
-#### Prerequisites
-
-1. Ensure you have access to Proton's `proton-ui` npm package
-2. Login to npm using `npm login`
-
-#### Install
-
-```
-npm install @protonradio/proton-ui --save
-```
-
-#### Import the styles
-Then import the styles into your main.css file.
-
-```css
-@import "@protonradio/proton-ui/styles";
-```
-
-#### Setup the theme provider
-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.
-
-```jsx
-import { ThemeProvider, THEMES } from "@protonradio/proton-ui";
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <ThemeProvider theme={THEMES.DARK}>
-      <Component {...pageProps} />
-    </ThemeProvider>
-  );
-}
-```
-
-### Recommended Reading
-
-- https://www.gabe.pizza/notes-on-component-libraries/
+# Proton UI
+
+![](./.readme.gif)
+
+```
+npm run storybook
+```
+
+### Publishing Updates to NPM
+
+```
+npm run build
+npm version <new_version>  // increment version in package.json accordingly using semver
+npm publish
+```
+
+### Themes
+
+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.
+
+#### Adding a Theme
+
+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]`.
+
+#### Styling for a theme
+
+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.
+
+For example, to apply a style to the dark theme, you can use the following css.
+```css
+.proton-ui__theme--dark .myComponent {
+  background-color: red;
+}
+```
+
+### Implementing in your application
+
+#### Prerequisites
+
+1. Ensure you have access to Proton's `proton-ui` npm package
+2. Login to npm using `npm login`
+
+#### Install
+
+```
+npm install @protonradio/proton-ui --save
+```
+
+#### Import the styles
+Then import the styles into your main.css file.
+
+```css
+@import "@protonradio/proton-ui/styles";
+```
+
+#### Setup the theme provider
+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.
+
+```jsx
+import { ThemeProvider, THEMES } from "@protonradio/proton-ui";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={THEMES.DARK}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+```
+
+### Recommended Reading
+
+- https://www.gabe.pizza/notes-on-component-libraries/

package/dist/constants.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./palettes-BZQ9UVED.js"),o={DARK:"dark",CUSTOM_DARK:"custom-dark",LIGHT:"light"},e=["bottom","bottom left","bottom right","bottom start","bottom end","top","top left","top right","top start","top end","left","left top","left bottom","start","start top","start bottom","right","right top","right bottom","end","end top","end bottom"],r={SMALL:576,MEDIUM:768,LARGE:992,X_LARGE:1200};exports.COLORS=t.colors;exports.DARK_MODE=t.DARK_MODE;exports.DEFAULT_BLACK_BACKGROUND=t.DEFAULT_BLACK_BACKGROUND;exports.DEFAULT_WHITE_BACKGROUND=t.DEFAULT_WHITE_BACKGROUND;exports.LIGHT_MODE=t.LIGHT_MODE;exports.BREAKPOINTS=r;exports.THEMES=o;exports.placements=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./palettes-BX86v-qb.js"),o={DARK:"dark",CUSTOM_DARK:"custom-dark",LIGHT:"light"},e=["bottom","bottom left","bottom right","bottom start","bottom end","top","top left","top right","top start","top end","left","left top","left bottom","start","start top","start bottom","right","right top","right bottom","end","end top","end bottom"],r={SMALL:576,MEDIUM:768,LARGE:992,X_LARGE:1200};exports.COLORS=t.colors;exports.DARK_MODE=t.DARK_MODE;exports.DEFAULT_BLACK_BACKGROUND=t.DEFAULT_BLACK_BACKGROUND;exports.DEFAULT_WHITE_BACKGROUND=t.DEFAULT_WHITE_BACKGROUND;exports.LIGHT_MODE=t.LIGHT_MODE;exports.BREAKPOINTS=r;exports.THEMES=o;exports.placements=e;
 //# sourceMappingURL=constants.cjs.js.map

package/dist/constants.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs.js","sources":["../src/constants/index.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\r\n\r\nexport * as COLORS from \"./colors\";\r\n\r\nexport * from \"./palettes\";\r\n\r\nexport const THEMES = {\r\n  DARK: \"dark\",\r\n  CUSTOM_DARK: \"custom-dark\",\r\n  LIGHT: \"light\",\r\n} as const;\r\n\r\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\r\n\r\nexport const placements: Placement[] = [\r\n  \"bottom\",\r\n  \"bottom left\",\r\n  \"bottom right\",\r\n  \"bottom start\",\r\n  \"bottom end\",\r\n  \"top\",\r\n  \"top left\",\r\n  \"top right\",\r\n  \"top start\",\r\n  \"top end\",\r\n  \"left\",\r\n  \"left top\",\r\n  \"left bottom\",\r\n  \"start\",\r\n  \"start top\",\r\n  \"start bottom\",\r\n  \"right\",\r\n  \"right top\",\r\n  \"right bottom\",\r\n  \"end\",\r\n  \"end top\",\r\n  \"end bottom\",\r\n];\r\n\r\nexport const BREAKPOINTS = {\r\n  SMALL: 576,\r\n  MEDIUM: 768,\r\n  LARGE: 992,\r\n  X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\n"],"names":["THEMES","placements","BREAKPOINTS"],"mappings":"0HAMaA,EAAS,CACpB,KAAM,OACN,YAAa,cACb,MAAO,OACT,EAIaC,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF,EAEaC,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}
+{"version":3,"file":"constants.cjs.js","sources":["../src/constants/index.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\n\nexport * as COLORS from \"./colors\";\n\nexport * from \"./palettes\";\n\nexport const THEMES = {\n  DARK: \"dark\",\n  CUSTOM_DARK: \"custom-dark\",\n  LIGHT: \"light\",\n} as const;\n\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\n\nexport const placements: Placement[] = [\n  \"bottom\",\n  \"bottom left\",\n  \"bottom right\",\n  \"bottom start\",\n  \"bottom end\",\n  \"top\",\n  \"top left\",\n  \"top right\",\n  \"top start\",\n  \"top end\",\n  \"left\",\n  \"left top\",\n  \"left bottom\",\n  \"start\",\n  \"start top\",\n  \"start bottom\",\n  \"right\",\n  \"right top\",\n  \"right bottom\",\n  \"end\",\n  \"end top\",\n  \"end bottom\",\n];\n\nexport const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["THEMES","placements","BREAKPOINTS"],"mappings":"0HAMaA,EAAS,CACpB,KAAM,OACN,YAAa,cACb,MAAO,OACT,EAIaC,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF,EAEaC,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}

package/dist/constants.d.ts

@@ -61,9 +61,9 @@ declare const DARK_SECONDARY: {
     SECONDARY_SUPER_LIGHT: string;
 };
 
-export declare const DEFAULT_BLACK_BACKGROUND = "rgba(18, 18, 18, 1)";
+export declare const DEFAULT_BLACK_BACKGROUND = "#121212";
 
-export declare const DEFAULT_WHITE_BACKGROUND = "rgba(255, 255, 255, 1)";
+export declare const DEFAULT_WHITE_BACKGROUND = "#ffffff";
 
 declare const GRAYSCALE: {
     GRAY_SUPER_DARK: string;

package/dist/constants.es.js

@@ -1,4 +1,4 @@
-import { c as e, b as m, a as p, D as A, L as D } from "./palettes-BDp2VnQU.mjs";
+import { c as e, b as m, a as p, D as A, L as D } from "./palettes-BgYtmc18.mjs";
 const t = {
   DARK: "dark",
   CUSTOM_DARK: "custom-dark",

package/dist/constants.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.es.js","sources":["../src/constants/index.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\r\n\r\nexport * as COLORS from \"./colors\";\r\n\r\nexport * from \"./palettes\";\r\n\r\nexport const THEMES = {\r\n  DARK: \"dark\",\r\n  CUSTOM_DARK: \"custom-dark\",\r\n  LIGHT: \"light\",\r\n} as const;\r\n\r\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\r\n\r\nexport const placements: Placement[] = [\r\n  \"bottom\",\r\n  \"bottom left\",\r\n  \"bottom right\",\r\n  \"bottom start\",\r\n  \"bottom end\",\r\n  \"top\",\r\n  \"top left\",\r\n  \"top right\",\r\n  \"top start\",\r\n  \"top end\",\r\n  \"left\",\r\n  \"left top\",\r\n  \"left bottom\",\r\n  \"start\",\r\n  \"start top\",\r\n  \"start bottom\",\r\n  \"right\",\r\n  \"right top\",\r\n  \"right bottom\",\r\n  \"end\",\r\n  \"end top\",\r\n  \"end bottom\",\r\n];\r\n\r\nexport const BREAKPOINTS = {\r\n  SMALL: 576,\r\n  MEDIUM: 768,\r\n  LARGE: 992,\r\n  X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\n"],"names":["THEMES","placements","BREAKPOINTS"],"mappings":";AAMO,MAAMA,IAAS;AAAA,EACpB,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AACT,GAIaC,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}
+{"version":3,"file":"constants.es.js","sources":["../src/constants/index.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\n\nexport * as COLORS from \"./colors\";\n\nexport * from \"./palettes\";\n\nexport const THEMES = {\n  DARK: \"dark\",\n  CUSTOM_DARK: \"custom-dark\",\n  LIGHT: \"light\",\n} as const;\n\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\n\nexport const placements: Placement[] = [\n  \"bottom\",\n  \"bottom left\",\n  \"bottom right\",\n  \"bottom start\",\n  \"bottom end\",\n  \"top\",\n  \"top left\",\n  \"top right\",\n  \"top start\",\n  \"top end\",\n  \"left\",\n  \"left top\",\n  \"left bottom\",\n  \"start\",\n  \"start top\",\n  \"start bottom\",\n  \"right\",\n  \"right top\",\n  \"right bottom\",\n  \"end\",\n  \"end top\",\n  \"end bottom\",\n];\n\nexport const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["THEMES","placements","BREAKPOINTS"],"mappings":";AAMO,MAAMA,IAAS;AAAA,EACpB,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AACT,GAIaC,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/icons.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <symbol id="external-link" viewBox="0 0 512 512">
-      <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"/>
-    </symbol>
-
-    <symbol id="caret-down" viewBox="0 0 512 512">
-      <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"/>
-    </symbol>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <symbol id="external-link" viewBox="0 0 512 512">
+      <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"/>
+    </symbol>
+
+    <symbol id="caret-down" viewBox="0 0 512 512">
+      <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"/>
+    </symbol>
+  </defs>
 </svg>