@clasing/ui 0.1.22 → 0.1.24

package/README.md

@@ -3,3 +3,36 @@
 UI library for Clasing react/nextjs projects
 
 ## Initiliazing the project
+
+- Ensure you have pnpm installed.
+- run `pnpm install` and then `pnpm storybook`
+
+## Installation Guide inside a React project
+
+This guide will help you to install ClasingUI in your React project.
+
+### Step 1: Install the package
+
+To install the packages, you need to run the following command: `npm install @clasing/ui`, `yarn add @clasing/ui` or `pnpm add @clasing/ui`
+
+### Step 2: Initial configuration
+
+#### If you are not using TailwindCSS
+
+If you are not using TailwindCSS in your project, you need to add the following line to your `index.tsx`, `layout.tsx` or root file: `import "@clasing/ui/styles"`
+
+#### If you are using TailwindCSS
+
+If you are using TailwindCSS in your project, you need to add the following line to your `tailwind.config.js` file (have in account that you should have the initial config of TailwindCSS):
+
+- At `content` array, add `./node_modules/@clasing/ui/dist/index.umd.js`
+- At `presets` array, add `require('@clasing/ui/tailwind.config.js')`
+- Add the following line to your `index.tsx`, `layout.tsx` or root file: `import "@clasing/ui/styles"`
+
+### Step 3: Using the components
+
+Now you can use the components in your project. You can import the components like this: `import { Button } from "@clasing/ui"`
+
+## Contributing
+
+Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import { ClassProp } from 'class-variance-authority/types';
 import { default as default_2 } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -55,14 +53,23 @@ declare const cardStyles: (props?: ({
     shadow?: "none" | "sm" | "xs" | "md" | "lg" | "xl" | "2xl" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+declare interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    helperText?: string;
+    error?: string;
+    touched?: boolean;
+}
+
 declare type DropdownOption<T> = {
     label: string;
     value: T;
 };
 
-export declare const DropdownSelect: ForwardRefExoticComponent<DropdownSelectProps<any> & RefAttributes<HTMLInputElement>>;
+export declare const DropdownSelect: ForwardRefExoticComponent<DropdownSelectProps<any> & RefAttributes<HTMLDivElement>>;
 
-declare interface DropdownSelectProps<T> extends React.SelectHTMLAttributes<HTMLInputElement> {
+declare interface DropdownSelectProps<T> extends React.SelectHTMLAttributes<HTMLDivElement> {
     label?: string;
     helperText?: string;
     error?: string;
@@ -136,6 +143,7 @@ declare interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     helperText?: string;
     error?: string;
     touched?: boolean;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
     iconName?: {
         name: TablerIconName;
         stroke?: number;
@@ -163,6 +171,10 @@ declare interface ITextProps extends React.HTMLAttributes<HTMLSpanElement>, Vari
     className?: string;
 }
 
+declare interface ITooltipProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tooltipStyles> {
+    content: string;
+}
+
 export declare const Modal: ({ className, children, isOpen, setIsOpen, }: ModalProps) => JSX_2.Element;
 
 declare interface ModalProps {
@@ -172,6 +184,11 @@ declare interface ModalProps {
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+declare interface OutsideClickHandlerProps {
+    ref: React.RefObject<HTMLElement>;
+    handler: () => void;
+}
+
 export declare const Popover: ({ children, trigger, open, placement, closeOnAction, }: IPopoverProps) => JSX_2.Element;
 
 declare type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
@@ -196,4 +213,16 @@ declare const textStyles: (props?: ({
     weight?: "bold" | "light" | "regular" | "semibold" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Tooltip: ForwardRefExoticComponent<ITooltipProps & RefAttributes<HTMLSpanElement>>;
+
+declare const tooltipStyles: (props?: ({
+    shadow?: "none" | "sm" | "xs" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    placement?: "top" | "bottom" | "left" | "right" | null | undefined;
+    delay?: 0 | 200 | 75 | 100 | 150 | 300 | 500 | null | undefined;
+    closeDelay?: 0 | 200 | 75 | 100 | 150 | 300 | 500 | null | undefined;
+    rounded?: "full" | "sm" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const useOutsideClick: ({ ref, handler }: OutsideClickHandlerProps) => void;
+
 export { }