@protonradio/proton-ui 0.5.3 → 0.5.4

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

@@ -111,7 +111,7 @@ export declare const BRAND: {
     SECONDARY: string;
 };
 
-export declare function Button({ variant, href, onPress, type, isDisabled, dataTestId, children, }: ButtonProps): JSX_2.Element;
+export declare function Button({ variant, ...props }: ButtonProps): JSX_2.Element;
 
 export declare function ButtonGroup(props: ButtonGroupProps): JSX_2.Element;
 
@@ -151,36 +151,25 @@ declare interface ButtonGroupProps {
     children?: React.ReactNode;
 }
 
-/** Properties for the Button component
- * @interface ButtonProps
- */
 declare interface ButtonProps {
-    /** The button's visual aesthetic
-     * @param {ButtonVariant} variant
+    /**
+     * The button's visual aesthetic.
      */
     variant?: ButtonVariant;
-    /** Should the button be non-interactive?
-     * @param {boolean} isDisabled
+    /**
+     * Should the button be non-interactive?
      */
     isDisabled?: boolean;
-    /** The URL that the button should link to. Turns the element into an `a` tag
-     * @param {string} href
+    /**
+     * The URL that the button should link to. Turns the element into an `a` tag.
      */
     href?: string;
-    /** Called when the button is pressed (on release, not keydown)
-     * @param {(e: PressEvent) => void} onPress
+    /**
+     *  Called when the button is pressed (on release, not keydown).
      */
     onPress?: (e: PressEvent) => void;
-    /** The type of button
-     * @param {"button" | "submit" | "reset"} type
-     */
-    type?: "button" | "submit" | "reset";
-    /** The test ID for the button
-     * @param {string} dataTestId
-     */
-    dataTestId?: string;
-    /** The content to display within the button
-     * @param {React.ReactNode} children
+    /**
+     * The content to display within the button.
      */
     children?: React.ReactNode;
 }
@@ -280,6 +269,69 @@ export declare type RGBArray = [number, number, number];
 
 export { Row }
 
+export declare const SearchInput: default_2.FC<SearchInputProps>;
+
+/** Properties for the SearchInput component
+ * @interface SearchInputProps
+ */
+declare interface SearchInputProps {
+    /**
+     * The controlled value of the search input.
+     * If you provide a value, you should typically also provide an onChange handler to update it.
+     * @param {string} value
+     */
+    defaultValue?: string;
+    /**
+     * Should the browser's autocomplete be enabled?
+     * @param {boolean} autoComplete
+     */
+    autoComplete?: boolean;
+    /**
+     * The name attribute of the input element.
+     * @param {string} name
+     */
+    name?: string;
+    /**
+     * The placeholder text to display when the input is empty.
+     * @param {string} placeholder
+     */
+    placeholder?: string;
+    /**
+     * Should the clear button be shown when there is text?
+     * @param {boolean} isClearable
+     */
+    isClearable?: boolean;
+    /**
+     * Called when the clear button is clicked.
+     * @param {() => void} onClear
+     */
+    onClear?: () => void;
+    /**
+     * Called when the input value changes. Required when using the input as a controlled component.
+     * @param {(event: { target: { value: string } }) => void} onChange
+     */
+    onChange?: (event: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    /**
+     * URL search parameter key to sync the input value with.
+     * @param {string} urlSearchParam
+     */
+    urlSearchParam?: string;
+    /**
+     * Error state that changes the input's visual style.
+     * @param {React.ReactNode | string} error
+     */
+    error?: default_2.ReactNode | string;
+    /**
+     * Test ID for the component.
+     * @param {string} data-testid
+     */
+    "data-testid"?: string;
+}
+
 export { Section }
 
 export declare const Select: {