@protonradio/proton-ui 0.6.0 → 0.6.1

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

@@ -113,6 +113,109 @@ declare interface BannerProps extends BannerIconProps, default_2.HTMLAttributes<
 
 export declare type BannerVariant = "default" | "success" | "warning" | "danger";
 
+declare interface BaseInputProps {
+    /**
+     * onChange handler for the input
+     * @param {React.ChangeEvent<HTMLInputElement>} event
+     */
+    onChange?: (value: string) => void;
+    /**
+     * onKeyDown handler for the input
+     * @param {React.KeyboardEvent<HTMLInputElement>} event
+     */
+    onKeyDown?: (event: default_2.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Whether the input is disabled.
+     * @param {boolean} isDisabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the input be rounded?
+     * @param {boolean} isRounded
+     */
+    isRounded?: boolean;
+    /**
+     * Description text shown above the input.
+     * @param {React.ReactNode | string} description
+     */
+    description?: default_2.ReactNode | string;
+    /**
+     * Error state that changes the input's visual style and displays an error message.
+     * @param {React.ReactNode | string} error
+     */
+    error?: default_2.ReactNode | string;
+    /**
+     * Label for the input element.
+     * @note When a label is provided, the input will have extra padding, and the label will float above the text input when focused or filled.
+     * @param {string} label
+     */
+    label?: string;
+    /**
+     * Test ID for the component.
+     * @param {string} data-testid
+     */
+    "data-testid"?: string;
+    /**
+     * Content to display before the input. Typically used for icons.
+     * @param {React.ReactNode} prefix
+     */
+    prefix?: default_2.ReactNode;
+    /**
+     * Content to display after the input. Typically used for icons.
+     * @param {React.ReactNode} suffix
+     */
+    suffix?: default_2.ReactNode;
+    /**
+     * Should the browser's autocomplete be enabled?
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     * @param {boolean} autoComplete
+     */
+    autoComplete?: boolean;
+    /**
+     * Should the input be autofocused?
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autofocus
+     * @param {boolean} autoFocus
+     */
+    autoFocus?: boolean;
+    /**
+     * The name attribute of the input element.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/name
+     * @param {string} name
+     */
+    name?: string;
+    /**
+     * The placeholder text to display when the input is empty.
+     * @note Placeholder takes precedence over label, if both are provided.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder
+     * @param {string} placeholder
+     */
+    placeholder?: string;
+    /**
+     * The pattern attribute of the input element.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
+     * @param {string} pattern
+     */
+    pattern?: string;
+    /**
+     * The tab index of the input element.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+     * @param {number} tabIndex
+     */
+    tabIndex?: number;
+    /**
+     * The type attribute of the input element.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/type
+     * @param {string} type
+     */
+    type?: string;
+    /**
+     * The value of the input.
+     * @external https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+     * @param {string} value
+     */
+    value?: string;
+}
+
 export declare const BRAND: {
     PRIMARY: string;
     PRIMARY_LIGHT: string;
@@ -268,6 +371,11 @@ declare interface IconProps {
     color?: string;
 }
 
+/**
+ * A controlled and customizable input component with support for labels, prefixes, suffixes, and error states.
+ */
+export declare const Input: default_2.ForwardRefExoticComponent<BaseInputProps & default_2.RefAttributes<HTMLInputElement>>;
+
 /**
  * [isUrlExternal] - determine if passed absolute url is external to the current domain.
  */
@@ -317,6 +425,40 @@ export declare type RGBArray = [number, number, number];
 
 export { Row }
 
+/**
+ * A search input component with optional clear functionality and URL parameter sync.
+ */
+export declare const SearchInput: ({ name, placeholder, autoComplete, isClearable, isRounded, error, urlSearchParam, defaultValue, "data-testid": testId, onChange, onClear, }: SearchInputProps) => JSX_2.Element;
+
+declare interface SearchInputProps extends Omit<BaseInputProps, "prefix" | "suffix" | "value" | "onChange"> {
+    /**
+     * Should the clear button be shown when there is text?
+     * @param {boolean} isClearable
+     */
+    isClearable?: boolean;
+    /**
+     * Called when the input value changes.
+     * @note Required when using the input as a controlled component.
+     * @param {(value: string) => void} onChange
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when the clear button is clicked.
+     * @param {() => void} onClear
+     */
+    onClear?: () => void;
+    /**
+     * URL search parameter key to sync the input value with.
+     * @param {string} urlSearchParam
+     */
+    urlSearchParam?: string;
+    /**
+     * The initial value of the input.
+     * @param {string} defaultValue
+     */
+    defaultValue?: string;
+}
+
 export { Section }
 
 export declare const Select: {