@nextui-org/react 1.0.1-alpha.30 → 1.0.1-alpha.34

package/README.md

@@ -17,52 +17,44 @@
   </a>
 </p>
 
-## Browser support
+## Getting Started
 
-Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE11+
+Visit <a aria-label="nextui learn" href="https://nextui.org/learn">https://nextui.org/guide</a> to get started with NextUI.
 
-## Supporting through Patreon
+## Documentation
 
-Any additional information goes here
+Visit [https://nextui.org/docs](https://nextui.org/docs) to view the full documentation.
 
-## Introduction
+## Quick Start
 
-A brief description of what this project does and who it's for
-
-## Support
-
-If you feel awesome and want to support us in a small way, please consider starring and sharing the repo! This helps us getting known and grow the community. 🙏
-
-## Installation
-
-Install my-project with npm
+1. Installation: Inside your React project directory, install NextUI by running either of the following:
 
 ```bash
-  npm install my-project
-  cd my-project
+yarn add @nextui-org/react
+# or
+npm i @nextui-org/react
 ```
 
-## Components
+2. Setup: For NextUI to work correctly, you need to set up the CssBaseline at the root of your application.
 
-You can also view all developed components in [Storybook](https://linktodocumentation)
+Go to the root of your application and do this:
 
-- [Component 1](https://linktodocumentation)
-- [Component 2](https://linktodocumentation)
-- [Component 3](https://linktodocumentation)
-- [Component 4](https://linktodocumentation)
-- [Component 5](https://linktodocumentation)
-- [Component 6](https://linktodocumentation)
-- [Component 7](https://linktodocumentation)
-- [Component 8](https://linktodocumentation)
+```jsx
+import { CssBaseline } from '@nextui-org/react';
 
-## Usage/Examples
+const Application = () => (
+  <>
+    <CssBaseline /> // ---> Normalize styles
+    <AppComponent /> // ---> Your App Component
+  </>
+);
+```
 
-```javascript
-import Component from 'my-project';
+3. Using NextUI components: Once NextUI is installed you can use any of the components as follows.
 
-function App() {
-  return <Component />;
-}
+```jsx
+import { Button } from '@next-ui/react';
+const Component = () => <Button>Click me</Button>;
 ```
 
 ## Contributing
@@ -73,13 +65,6 @@ See `CONTRIBUTING.md` for ways to get started.
 
 Please adhere to this project's `CODE_OF_CONDUCT`.
 
-## Related
-
-Here are some related projects
-
-- [Vuesax](https://github.com/matiassingers/awesome-readme)
-- [Geist UI](https://github.com/matiassingers/awesome-readme)
-
 ## License
 
 [MIT](https://choosealicense.com/licenses/mit/)

package/dist/components/button/button-group.d.ts

@@ -11,7 +11,7 @@ interface Props {
     animated?: boolean;
     rounded?: boolean;
     ghost?: boolean;
-    weight?: NormalWeights;
+    borderWeight?: NormalWeights;
     size?: NormalSizes;
     color?: NormalColors;
     className?: string;
@@ -27,7 +27,7 @@ declare const defaultProps: {
     animated: boolean;
     rounded: boolean;
     ghost: boolean;
-    weight: "light" | "normal" | "bold";
+    borderWeight: "light" | "normal" | "bold" | undefined;
     size: "mini" | "small" | "medium" | "large" | "xlarge";
     color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient";
     className: string;
@@ -45,9 +45,9 @@ declare const _default: React.ComponentType<Partial<{
     animated: boolean;
     rounded: boolean;
     ghost: boolean;
-    weight: "light" | "normal" | "bold";
+    borderWeight: "light" | "normal" | "bold" | undefined;
     size: "mini" | "small" | "medium" | "large" | "xlarge";
     color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient";
     className: string;
-}> & Omit<ButtonGroupProps, "light" | "className" | "animated" | "color" | "vertical" | "bordered" | "size" | "auto" | "weight" | "flat" | "disabled" | "rounded" | "shadow" | "ghost">>;
+}> & Omit<ButtonGroupProps, "light" | "className" | "animated" | "color" | "vertical" | "bordered" | "size" | "auto" | "flat" | "disabled" | "rounded" | "shadow" | "ghost" | "borderWeight">>;
 export default _default;

package/dist/components/button/button.d.ts

@@ -14,7 +14,7 @@ export interface Props {
     disabled?: boolean;
     bordered?: boolean;
     ghost?: boolean;
-    weight?: NormalWeights;
+    borderWeight?: NormalWeights;
     loaderType?: NormalLoaders;
     htmlType?: React.ButtonHTMLAttributes<unknown>['type'];
     icon?: React.ReactNode;
@@ -28,7 +28,7 @@ declare const defaultProps: {
     size: "mini" | "small" | "medium" | "large" | "xlarge";
     htmlType: "button" | "reset" | "submit" | undefined;
     loaderType: "default" | "gradient" | "points" | "points-opacity" | "spinner";
-    weight: "light" | "normal" | "bold";
+    borderWeight: "light" | "normal" | "bold" | undefined;
     flat: boolean;
     light: boolean;
     loading: boolean;

package/dist/components/button/styles.d.ts

@@ -35,6 +35,5 @@ export declare const getButtonColors: (palette: NextUIThemesPalette, props: Butt
 export declare const getLoadingSize: (size: NormalSizes) => NormalSizes;
 export declare const getLoadingBackground: (palette: NextUIThemesPalette, color: NormalColors | string) => string | null;
 export declare const getButtonCursor: (disabled: boolean, loading: boolean) => ButtonCursorGroup;
-export declare const getButtonRadius: (size: NormalSizes, rounded?: boolean | undefined) => string;
 export declare const getButtonSize: (size: "mini" | "small" | "medium" | "large" | "xlarge" | undefined, auto: boolean) => ButtonSizeGroup;
 export declare const getButtonDripColor: (palette: NextUIThemesPalette, props: ButtonProps) => string;

package/dist/components/index.d.ts

@@ -19,3 +19,4 @@ export { default as Code } from './code';
 export { default as Container } from './container';
 export { default as Snippet } from './snippet';
 export { default as Tooltip } from './tooltip';
+export { default as Input } from './input';

package/dist/components/input/clear-icon.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface Props {
+    width?: number;
+    height?: number;
+    size?: number;
+    fill?: string;
+}
+declare const _default: React.ComponentType<Partial<{
+    width: number;
+    height: number;
+}> & Omit<Props, "height" | "width">>;
+export default _default;

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+import Input from './input';
+export default Input;

package/dist/components/input/input-block-label.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SimpleColors } from '../../utils/prop-types';
+export interface InputBlockLabelLabel {
+    label: string;
+    htmlFor: string;
+    color?: string;
+    animated?: boolean;
+    bordered?: boolean;
+    selfValue?: string;
+    hasLeftContent?: boolean;
+    asPlaceholder?: boolean;
+    status?: SimpleColors;
+    placeholderColor?: string;
+    heightRatio?: string | undefined;
+    hover?: boolean;
+}
+declare const MemoInputBlockLabel: React.NamedExoticComponent<InputBlockLabelLabel>;
+export default MemoInputBlockLabel;

package/dist/components/input/input-content.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ContentPosition, SimpleColors } from '../../utils/prop-types';
+export interface InputContentProps {
+    content: React.ReactNode;
+    ratio: string;
+    clickable: boolean;
+    onClick: (key: ContentPosition, e: React.MouseEvent<HTMLDivElement>) => void;
+    applyStyles?: boolean;
+    isLeft?: boolean;
+    hover?: boolean;
+    status?: SimpleColors;
+}
+declare const MemoContentIcon: React.NamedExoticComponent<InputContentProps>;
+export default MemoContentIcon;

package/dist/components/input/input-icon-clear.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SimpleColors } from '../../utils/prop-types';
+interface Props {
+    visible: boolean;
+    hasContentRight?: boolean;
+    status?: SimpleColors;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    heightRatio?: string | undefined;
+    disabled?: boolean;
+}
+declare const MemoInputIconClear: React.NamedExoticComponent<Props>;
+export default MemoInputIconClear;

package/dist/components/input/input-label.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SimpleColors } from '../../utils/prop-types';
+export interface InputLabelProps {
+    fontSize: string;
+    status?: SimpleColors;
+    bgColor?: string;
+    color?: string;
+    radius?: string;
+    isRight?: boolean;
+    bordered?: boolean;
+    underlined?: boolean;
+    borderWeight?: string;
+}
+declare const MemoInputLabel: React.NamedExoticComponent<React.PropsWithChildren<InputLabelProps>>;
+export default MemoInputLabel;

package/dist/components/input/input-password.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Props } from './input-props';
+interface PasswordProps extends Props {
+    hideToggle?: boolean;
+    visibleIcon?: React.ReactNode;
+    hiddenIcon?: React.ReactNode;
+}
+declare const passwordDefaultProps: {
+    hideToggle: boolean;
+    visibleIcon: JSX.Element;
+    hiddenIcon: JSX.Element;
+    disabled: boolean;
+    bordered: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    rounded: boolean;
+    animated: boolean;
+    underlined: boolean;
+    shadow: boolean;
+    contentClickable: boolean;
+    contentRightStyling: boolean;
+    contentLeftStyling: boolean;
+    required: boolean;
+    width: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    status: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    borderWeight: "light" | "normal" | "bold";
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+};
+declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>;
+export declare type InputPasswordProps = PasswordProps & typeof passwordDefaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    hideToggle: boolean;
+    visibleIcon: JSX.Element;
+    hiddenIcon: JSX.Element;
+    disabled: boolean;
+    bordered: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    rounded: boolean;
+    animated: boolean;
+    underlined: boolean;
+    shadow: boolean;
+    contentClickable: boolean;
+    contentRightStyling: boolean;
+    contentLeftStyling: boolean;
+    required: boolean;
+    width: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    status: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    borderWeight: "light" | "normal" | "bold";
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+}> & Omit<PasswordProps & {
+    hideToggle: boolean;
+    visibleIcon: JSX.Element;
+    hiddenIcon: JSX.Element;
+    disabled: boolean;
+    bordered: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    rounded: boolean;
+    animated: boolean;
+    underlined: boolean;
+    shadow: boolean;
+    contentClickable: boolean;
+    contentRightStyling: boolean;
+    contentLeftStyling: boolean;
+    required: boolean;
+    width: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    status: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    borderWeight: "light" | "normal" | "bold";
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+} & NativeAttrs & React.RefAttributes<HTMLInputElement>, "className" | "animated" | "placeholder" | "color" | "status" | "bordered" | "size" | "width" | "disabled" | "rounded" | "autoComplete" | "readOnly" | "required" | "initialValue" | "shadow" | "borderWeight" | "underlined" | "hideToggle" | "visibleIcon" | "hiddenIcon" | "contentClickable" | "contentRightStyling" | "contentLeftStyling" | "clearable">>;
+export default _default;

package/dist/components/input/input-props.d.ts

@@ -0,0 +1,62 @@
+import { NormalWeights } from './../../utils/prop-types';
+import React from 'react';
+import { NormalSizes, SimpleColors, ContentPosition } from '../../utils/prop-types';
+export interface Props {
+    value?: string;
+    initialValue?: string;
+    placeholder?: string;
+    size?: NormalSizes;
+    color?: SimpleColors;
+    status?: SimpleColors;
+    readOnly?: boolean;
+    shadow?: boolean;
+    animated?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    helperText?: string;
+    labelPlaceholder?: string;
+    labelLeft?: string;
+    labelRight?: string;
+    contentLeft?: React.ReactNode;
+    contentRight?: React.ReactNode;
+    contentClickable?: boolean;
+    contentRightStyling?: boolean;
+    contentLeftStyling?: boolean;
+    rounded?: boolean;
+    bordered?: boolean;
+    underlined?: boolean;
+    borderWeight?: NormalWeights;
+    width?: string;
+    className?: string;
+    clearable?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onClearClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onContentClick?: (key: ContentPosition, e: React.MouseEvent<HTMLDivElement>) => void;
+    autoComplete?: string;
+}
+export declare const defaultProps: {
+    disabled: boolean;
+    bordered: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    rounded: boolean;
+    animated: boolean;
+    underlined: boolean;
+    shadow: boolean;
+    contentClickable: boolean;
+    contentRightStyling: boolean;
+    contentLeftStyling: boolean;
+    required: boolean;
+    width: string;
+    size: "mini" | "small" | "medium" | "large" | "xlarge";
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    status: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    borderWeight: "light" | "normal" | "bold";
+    autoComplete: string;
+    className: string;
+    placeholder: string;
+    initialValue: string;
+};

package/dist/components/input/input.d.ts

@@ -0,0 +1,13 @@
+import React, { PropsWithoutRef, RefAttributes } from 'react';
+import Textarea from '../textarea/textarea';
+import InputPassword from './input-password';
+import { Props, defaultProps } from './input-props';
+declare type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
+export declare type InputProps = Props & typeof defaultProps & NativeAttrs;
+declare type InputComponent<T, P = {}> = React.ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> & {
+    Textarea: typeof Textarea;
+    Password: typeof InputPassword;
+};
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs;
+declare const _default: InputComponent<HTMLInputElement, ComponentProps>;
+export default _default;

package/dist/components/input/password-icon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    visible: boolean;
+}
+declare const MemoPasswordIcon: React.NamedExoticComponent<Props>;
+export default MemoPasswordIcon;

package/dist/components/input/styles.d.ts

@@ -0,0 +1,17 @@
+import { NextUIThemes, NextUIThemesPalette } from '../../theme/index';
+export declare type InputSize = {
+    heightRatio: string;
+    fontSize: string;
+};
+export declare const getSizes: (size?: "mini" | "small" | "medium" | "large" | "xlarge" | undefined) => InputSize;
+export declare type InputColor = {
+    bgColor: string;
+    color: string;
+    placeholderColor: string;
+    helperColor: string;
+    borderColor: string;
+    hoverBorder: string;
+    shadowColor: string;
+};
+export declare const getShadowColor: (palette: NextUIThemesPalette, color?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | undefined) => string;
+export declare const getColors: (theme: NextUIThemes, color?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | undefined, status?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | undefined) => InputColor;

package/dist/components/snippet/snippet.d.ts

@@ -7,6 +7,9 @@ interface Props {
     filled?: boolean;
     width?: string;
     bordered?: boolean;
+    showTooltip?: boolean;
+    tooltipCopyText?: string;
+    tooltipCopiedText?: string;
     copy?: CopyTypes;
     type?: SnippetTypes;
     className?: string;
@@ -14,11 +17,14 @@ interface Props {
 declare const defaultProps: {
     filled: boolean;
     bordered: boolean;
+    showTooltip: boolean;
     symbol: string;
     toastText: string;
     width: string;
     copy: "default" | "slient" | "prevent";
     type: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "invert";
+    tooltipCopyText: string;
+    tooltipCopiedText: string;
     className: string;
 };
 declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -26,11 +32,14 @@ export declare type SnippetProps = Props & typeof defaultProps & NativeAttrs;
 declare const _default: React.ComponentType<Partial<{
     filled: boolean;
     bordered: boolean;
+    showTooltip: boolean;
     symbol: string;
     toastText: string;
     width: string;
     copy: "default" | "slient" | "prevent";
     type: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "invert";
+    tooltipCopyText: string;
+    tooltipCopiedText: string;
     className: string;
-}> & Omit<SnippetProps, "symbol" | "type" | "className" | "copy" | "bordered" | "width" | "filled" | "toastText">>;
+}> & Omit<SnippetProps, "symbol" | "type" | "className" | "copy" | "bordered" | "width" | "filled" | "toastText" | "showTooltip" | "tooltipCopyText" | "tooltipCopiedText">>;
 export default _default;

package/dist/components/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import Textarea from './textarea';
+export default Textarea;

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { SimpleColors } from '../../utils/prop-types';
+interface Props {
+    value?: string;
+    initialValue?: string;
+    placeholder?: string;
+    color?: SimpleColors;
+    width?: string;
+    minHeight?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    className?: string;
+}
+declare const defaultProps: {
+    initialValue: string;
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    width: string;
+    minHeight: string;
+    disabled: boolean;
+    readOnly: boolean;
+    className: string;
+};
+declare type NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props>;
+export declare type TextareaProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    initialValue: string;
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    width: string;
+    minHeight: string;
+    disabled: boolean;
+    readOnly: boolean;
+    className: string;
+}> & Omit<Props & {
+    initialValue: string;
+    color: "default" | "primary" | "secondary" | "success" | "warning" | "error";
+    width: string;
+    minHeight: string;
+    disabled: boolean;
+    readOnly: boolean;
+    className: string;
+} & NativeAttrs & React.RefAttributes<HTMLTextAreaElement>, "className" | "color" | "width" | "disabled" | "readOnly" | "initialValue" | "minHeight">>;
+export default _default;

package/dist/components/tooltip/tooltip.d.ts

@@ -52,5 +52,5 @@ declare const _default: React.ComponentType<Partial<{
     className: string;
     portalClassName: string;
     onVisibleChange: TooltipOnVisibleChange;
-}> & Omit<React.PropsWithChildren<TooltipProps>, "className" | "color" | "textColor" | "rounded" | "shadow" | "offset" | "position" | "hideArrow" | "initialVisible" | "trigger" | "enterDelay" | "leaveDelay" | "portalClassName" | "onVisibleChange">>;
+}> & Omit<React.PropsWithChildren<TooltipProps>, "className" | "color" | "textColor" | "rounded" | "shadow" | "offset" | "position" | "initialVisible" | "hideArrow" | "trigger" | "enterDelay" | "leaveDelay" | "portalClassName" | "onVisibleChange">>;
 export default _default;

package/dist/hooks/index.d.ts

@@ -7,3 +7,4 @@ export { default as useSSR } from './use-ssr';
 export { default as useBodyScroll } from './use-body-scroll';
 export { default as useClickAway } from './use-click-away';
 export { default as useClickAnywhere } from './use-click-anywhere';
+export { default as useInput } from './use-input';

package/dist/hooks/use-input.d.ts

@@ -0,0 +1,13 @@
+import React, { Dispatch, MutableRefObject, SetStateAction } from 'react';
+export declare type BindingsChangeTarget = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string;
+declare const useInput: (initialValue: string) => {
+    value: string;
+    setValue: Dispatch<SetStateAction<string>>;
+    currentRef: MutableRefObject<string>;
+    reset: () => void;
+    bindings: {
+        value: string;
+        onChange: (event: BindingsChangeTarget) => void;
+    };
+};
+export default useInput;