@protonradio/proton-ui 0.5.0 → 0.5.2

package/README.md

@@ -1,50 +1,50 @@
-# 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]`.
-
-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
-function MyApp({ Component, pageProps }) {
-  return (
-    <ThemeProvider theme={THEMES.DARK}>
-      <Component {...pageProps} />
-    </ThemeProvider>
-  );
-}
-```
-
-#### 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;
-}
-```
-
-### 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]`.
+
+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
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={THEMES.DARK}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+```
+
+#### 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;
+}
+```
+
+### Recommended Reading
+
+- https://www.gabe.pizza/notes-on-component-libraries/

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>

package/dist/proton-ui.es.d.ts

@@ -402,7 +402,7 @@ export declare function TooltipTrigger({ children, delay, closeDelay, isDisabled
 
 export declare interface TooltipTriggerProps extends TooltipProps, TooltipTriggerComponentProps {
     children: React.ReactNode;
-    content: string;
+    content: string | React.ReactNode;
     disableTriggerClick?: boolean;
 }
 

package/dist/proton-ui.es.js

@@ -9267,7 +9267,7 @@ const P4 = {
   tooltipProps: n,
   "data-testid": r
 }) => {
-  const { className: l } = mn(), i = n ? /* @__PURE__ */ T.jsx(n4, { delay: 50, closeDelay: 0, ...n, children: t }) : t;
+  const { className: l } = mn(), i = n ? /* @__PURE__ */ T.jsx(n4, { delay: 50, closeDelay: 75, ...n, children: t }) : t;
   if (e) {
     const o = la(e);
     return /* @__PURE__ */ T.jsx(