@paubox/ui 0.1.0

package/lib/AlertBar/AlertBar.d.ts

@@ -0,0 +1,15 @@
+export interface AlertBarProps {
+    title: string;
+    text?: string;
+    type?: 'info' | 'warning' | 'success' | 'error';
+    size?: 'small' | 'large';
+}
+export declare const AlertBar: {
+    (props: AlertBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        type: string;
+        text: string;
+        size: string;
+    };
+};
+export default AlertBar;

package/lib/Button/BaseButton.d.ts

@@ -0,0 +1,13 @@
+export interface BaseButtonProps {
+    color: 'primary' | 'secondary' | 'danger';
+    disabled?: boolean;
+    size?: 'large' | 'small';
+    round?: boolean;
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+declare const BaseButton: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & BaseButtonProps, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export default BaseButton;

package/lib/Button/Button.d.ts

@@ -0,0 +1,9 @@
+import { BaseButtonProps } from './BaseButton';
+import { default as React } from 'react';
+
+export interface ButtonProps extends Omit<BaseButtonProps, 'round'> {
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/lib/Dropdown/Dropdown.d.ts

@@ -0,0 +1,19 @@
+export interface DropdownProps {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    children: React.ReactNode;
+    right?: number;
+    left?: number;
+    top?: number;
+    bottom?: number;
+}
+export declare const Dropdown: {
+    ({ children, open, setOpen, ...rest }: DropdownProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        right: number;
+        left: number;
+        top: number;
+        bottom: number;
+    };
+};
+export default Dropdown;

package/lib/Dropdown/DropdownOption.d.ts

@@ -0,0 +1,15 @@
+export interface DropdownOptionProps {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+}
+declare const DropdownOption: {
+    ({ label, href, onClick, icon, }: DropdownOptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        href: undefined;
+        onClick: undefined;
+        icon: undefined;
+    };
+};
+export default DropdownOption;

package/lib/Inputs/Input.d.ts

@@ -0,0 +1,16 @@
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    sz?: 'sm' | 'lg';
+    error?: boolean;
+    leftIcon?: React.ElementType;
+    rightIcon?: React.ElementType;
+}
+export declare const Input: {
+    ({ leftIcon: LeftIcon, rightIcon: RightIcon, ...props }: InputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        sz: string;
+        error: boolean;
+        leftIcon: undefined;
+        rightIcon: undefined;
+    };
+};
+export default Input;

package/lib/Inputs/MultiSelect.d.ts

@@ -0,0 +1,23 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+export interface MultiSelectProps extends React.InputHTMLAttributes<HTMLSelectElement> {
+    sz?: 'sm' | 'lg';
+    error?: boolean;
+    leftIcon?: React.ElementType;
+    rightIcon?: React.ElementType;
+    options: MultiSelectOption[];
+}
+export declare const InputWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MultiSelect: {
+    (props: MultiSelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        sz: string;
+        error: boolean;
+    };
+};
+export default MultiSelect;

package/lib/Inputs/Search.d.ts

@@ -0,0 +1,14 @@
+export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    sz?: 'sm' | 'lg';
+    loading: boolean;
+    setLoading: (value: boolean) => void;
+    setSearchValue: (value: string) => void;
+}
+export declare const loadingWheelStyle: import('@emotion/react').SerializedStyles;
+export declare const Search: {
+    (props: SearchProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        sz: string;
+    };
+};
+export default Search;

package/lib/Inputs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Input';
+export * from './MultiSelect';
+export * from './Search';

package/lib/Tooltip/Tooltip.d.ts

@@ -0,0 +1,12 @@
+export interface TooltipProps {
+    y?: 'top' | 'bottom' | 'center';
+    x?: 'left' | 'right' | 'center';
+    size?: 'small' | 'large';
+    children: React.ReactNode;
+    content: string;
+}
+export interface TooltipWrapperProps extends Omit<TooltipProps, 'content' | 'children'> {
+    hover: boolean;
+}
+export declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/lib/Typography/Typography.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { SerializedStyles } from '@emotion/react';
+
+export type TypographyProps = {
+    variant: 'headline100Regular' | 'headline100Semibold' | 'headline200Regular' | 'headline200Semibold' | 'headline300Regular' | 'headline300Semibold' | 'paragraph100Regular' | 'paragraph100Semibold' | 'paragraph200Regular' | 'paragraph200Semibold' | 'paragraph300Regular' | 'paragraph300Medium' | 'paragraph300Semibold' | 'paragraph300Bold' | 'button100Medium' | 'button200Medium' | 'label100Regular' | 'label100Medium' | 'label100Semibold' | 'label200Regular' | 'label200Medium' | 'label200Semibold';
+    /**
+     * The color of the text. This can be any css color string or one of the following:
+     *
+     * `primary` `secondary`
+     */
+    color?: 'primary' | 'secondary' | string;
+    css?: SerializedStyles;
+    as?: keyof React.JSX.IntrinsicElements;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const Typography: React.FC<TypographyProps>;
+export default Typography;

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@paubox/ui",
+  "author": "Paubox, Inc.",
+  "description": "Paubox Component Library",
+  "version": "0.1.0",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./index.mjs"
+      },
+      "require": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
+    }
+  }
+}

package/theme/baseTypography.d.ts

@@ -0,0 +1,31 @@
+export declare const BASE_FONT_SIZE = 16;
+export declare const headline100FontSize = 24;
+export declare const headline100LineHeight = 30;
+export declare const headline100LetterSpacing = -0.5;
+export declare const headline200FontSize = 22;
+export declare const headline200LineHeight = 28;
+export declare const headline200LetterSpacing = -0.5;
+export declare const headline300FontSize = 20;
+export declare const headline300LineHeight = 24;
+export declare const headline300LetterSpacing = -0.5;
+export declare const paragraph100FontSize = 16;
+export declare const paragraph100LineHeight = 24;
+export declare const paragraph100LetterSpacing = 0;
+export declare const paragraph200FontSize = 14;
+export declare const paragraph200LineHeight = 20;
+export declare const paragraph200LetterSpacing = 0;
+export declare const paragraph300FontSize = 12;
+export declare const paragraph300LineHeight = 16;
+export declare const paragraph300LetterSpacing = 0;
+export declare const button100FontSize = 16;
+export declare const button100LineHeight = 16;
+export declare const button100LetterSpacing: number;
+export declare const button200FontSize = 12;
+export declare const button200LineHeight = 12;
+export declare const button200LetterSpacing: number;
+export declare const label100FontSize = 16;
+export declare const label100LineHeight = 16;
+export declare const label100LetterSpacing: number;
+export declare const label200FontSize = 14;
+export declare const label200LineHeight = 16;
+export declare const label200LetterSpacing: number;

package/theme/colors.d.ts

@@ -0,0 +1,89 @@
+export declare const textPrimary = "#1D2433";
+export declare const textSecondary = "#1D2433CC";
+export declare const textPrimaryWhite = "#FFFFFF";
+export declare const textPrimaryDisabled = "#545D78";
+export declare const textPrimaryIconDisabled = "#0000004D";
+export declare const textDanger = "#E02D3C";
+export declare const textDangerHover = "##E34553";
+export declare const textDangerPressed = "#E02D3C";
+export declare const neutral100 = "#F2F2F2";
+export declare const neutral200 = "#E3E3E3";
+export declare const neutral300 = "#C9C9C9";
+export declare const neutral400 = "#B3B3B3";
+export declare const neutral500 = "#757575";
+export declare const neutral600 = "#4D4D4D";
+export declare const neutral700 = "#333333";
+export declare const neutral800 = "#1A1A1A";
+export declare const neutral900 = "#000000";
+export declare const primary100 = "#E8EFFF";
+export declare const primary200 = "#D4E2FF";
+export declare const primary300 = "#94B6FF";
+export declare const primary400 = "#6193FF";
+export declare const primary500 = "#2E70FF";
+export declare const primary600 = "#0247DC";
+export declare const primary700 = "#003AB8";
+export declare const primary800 = "#003099";
+export declare const primary900 = "#002066";
+export declare const secondary100 = "#FFF8E4";
+export declare const secondary200 = "#FFF1C7";
+export declare const secondary300 = "#FFE394";
+export declare const secondary400 = "#FFD761";
+export declare const secondary500 = "#FFCA2F";
+export declare const secondary600 = "#FBBB00";
+export declare const secondary700 = "#CC9800";
+export declare const secondary800 = "#997200";
+export declare const secondary900 = "#664C00";
+export declare const secondaryCharts1100 = "#F6FFE5";
+export declare const secondaryCharts1200 = "#ECFFC7";
+export declare const secondaryCharts1300 = "#D8FA99";
+export declare const secondaryCharts1400 = "#C4F36D";
+export declare const secondaryCharts1500 = "#B1EF3E";
+export declare const secondaryCharts1600 = "#97DB18";
+export declare const secondaryCharts1700 = "#7EB715";
+export declare const secondaryCharts1800 = "#5F8A0F";
+export declare const secondaryCharts1900 = "#3E5B0B";
+export declare const secondaryCharts2100 = "#E5FBFF";
+export declare const secondaryCharts2200 = "#C7F7FF";
+export declare const secondaryCharts2300 = "#94EEFF";
+export declare const secondaryCharts2400 = "#61E6FF";
+export declare const secondaryCharts2500 = "#2EDEFF";
+export declare const secondaryCharts2600 = "#09C5E8";
+export declare const secondaryCharts2700 = "#07A7C5";
+export declare const secondaryCharts2800 = "#067D93";
+export declare const secondaryCharts2900 = "#045462";
+export declare const secondaryCharts3100 = "#F6E9FB";
+export declare const secondaryCharts3200 = "#EBCFF7";
+export declare const secondaryCharts3300 = "#D9A4EF";
+export declare const secondaryCharts3400 = "#C975EB";
+export declare const secondaryCharts3500 = "#B352DA";
+export declare const secondaryCharts3600 = "#8603BC";
+export declare const secondaryCharts3700 = "#660F8A";
+export declare const secondaryCharts3800 = "#480264";
+export declare const secondaryCharts3900 = "#36014B";
+export declare const success100 = "#ECFDF8";
+export declare const success200 = "#D1FAEC";
+export declare const success300 = "#A5F3D9";
+export declare const success400 = "#6EE7BF";
+export declare const success500 = "#36D39F";
+export declare const success600 = "#0EA472";
+export declare const success700 = "#08875D";
+export declare const success800 = "#04724D";
+export declare const success900 = "#066042";
+export declare const warning100 = "#FFF8E4";
+export declare const warning200 = "#FFF0C7";
+export declare const warning300 = "#FFE394";
+export declare const warning400 = "#FFD761";
+export declare const warning500 = "#FFCA2F";
+export declare const warning600 = "#FBBB00";
+export declare const warning700 = "#CC9800";
+export declare const warning800 = "#CC9800";
+export declare const warning900 = "#CCCCCC";
+export declare const danger100 = "#FEF1F2";
+export declare const danger200 = "#FEE1E3";
+export declare const danger300 = "#FEC8CC";
+export declare const danger400 = "#FCA6AD";
+export declare const danger500 = "#F8727D";
+export declare const danger600 = "#EF4352";
+export declare const danger700 = "#E02D3C";
+export declare const danger800 = "#BA2532";
+export declare const danger900 = "#981B25";

package/theme/elevation.d.ts

@@ -0,0 +1,4 @@
+export declare const elevation100: import('@emotion/react').SerializedStyles;
+export declare const elevation200: import('@emotion/react').SerializedStyles;
+export declare const elevation300: import('@emotion/react').SerializedStyles;
+export declare const elevation400: import('@emotion/react').SerializedStyles;

package/theme/index.d.ts

@@ -0,0 +1,4 @@
+export * as colors from './colors';
+export * as baseTypography from './baseTypography';
+export * as typography from './typography';
+export * as elevation from './elevation';

package/theme/typography.d.ts

@@ -0,0 +1,22 @@
+export declare const $headline100Regular: import('@emotion/react').SerializedStyles;
+export declare const $headline100Semibold: import('@emotion/react').SerializedStyles;
+export declare const $headline200Regular: import('@emotion/react').SerializedStyles;
+export declare const $headline200Semibold: import('@emotion/react').SerializedStyles;
+export declare const $headline300Regular: import('@emotion/react').SerializedStyles;
+export declare const $headline300Semibold: import('@emotion/react').SerializedStyles;
+export declare const $paragraph100Regular: import('@emotion/react').SerializedStyles;
+export declare const $paragraph100Semibold: import('@emotion/react').SerializedStyles;
+export declare const $paragraph200Regular: import('@emotion/react').SerializedStyles;
+export declare const $paragraph200Semibold: import('@emotion/react').SerializedStyles;
+export declare const $paragraph300Regular: import('@emotion/react').SerializedStyles;
+export declare const $paragraph300Medium: import('@emotion/react').SerializedStyles;
+export declare const $paragraph300Semibold: import('@emotion/react').SerializedStyles;
+export declare const $paragraph300Bold: import('@emotion/react').SerializedStyles;
+export declare const $button100Medium: import('@emotion/react').SerializedStyles;
+export declare const $button200Medium: import('@emotion/react').SerializedStyles;
+export declare const $label100Regular: import('@emotion/react').SerializedStyles;
+export declare const $label100Medium: import('@emotion/react').SerializedStyles;
+export declare const $label100Semibold: import('@emotion/react').SerializedStyles;
+export declare const $label200Regular: import('@emotion/react').SerializedStyles;
+export declare const $label200Medium: import('@emotion/react').SerializedStyles;
+export declare const $label200Semibold: import('@emotion/react').SerializedStyles;