@julien-wiegandt/open-ui 0.1.0 → 0.1.2

package/dist/app.d.ts

@@ -1,2 +1,2 @@
-declare function App(): import("react/jsx-runtime").JSX.Element;
+declare const App: () => import("react/jsx-runtime").JSX.Element;
 export default App;

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

@@ -1,4 +1,32 @@
+import { Color } from '../../theme/types';
+import { default as React } from 'react';
+import { MarginProps, PaddingProps } from '../common/types';
+export type ButtonStyleProps = {
+    color: Color;
+    size?: "sm" | "md" | "lg";
+    bgcolor?: string;
+    bRadius?: string;
+    gap?: string | number;
+    loading?: boolean;
+    variant: "contained" | "outlined" | "text";
+    txtColor?: string;
+} & MarginProps & PaddingProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
 export type ButtonProps = {
-    children: React.ReactNode;
-};
-export declare const Button: ({ children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    label?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+} & ButtonStyleProps;
+export declare const Button: React.ForwardRefExoticComponent<{
+    label?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+} & {
+    color: Color;
+    size?: "sm" | "md" | "lg";
+    bgcolor?: string;
+    bRadius?: string;
+    gap?: string | number;
+    loading?: boolean;
+    variant: "contained" | "outlined" | "text";
+    txtColor?: string;
+} & MarginProps & PaddingProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,7 @@
+import { ButtonStyleProps } from '.';
+import { TextProps } from '../text';
+export declare const sizeMap: Record<NonNullable<ButtonStyleProps["size"]>, {
+    padding: string;
+    fontSize: TextProps["size"];
+}>;
+export declare const StyledButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonStyleProps>> & string;

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

@@ -0,0 +1,30 @@
+import { Color } from '../../theme/types';
+import { default as React } from 'react';
+import { MarginProps, PaddingProps } from '../common/types';
+export type ChipStyleProps = {
+    color: Color;
+    size?: "sm" | "md" | "lg";
+    bgcolor?: string;
+    bRadius?: string;
+    gap?: string | number;
+    variant: "contained" | "outlined" | "text";
+    fontColor?: string;
+} & MarginProps & PaddingProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ChipProps = {
+    label?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+} & ChipStyleProps;
+export declare const Chip: React.ForwardRefExoticComponent<{
+    label?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+} & {
+    color: Color;
+    size?: "sm" | "md" | "lg";
+    bgcolor?: string;
+    bRadius?: string;
+    gap?: string | number;
+    variant: "contained" | "outlined" | "text";
+    fontColor?: string;
+} & MarginProps & PaddingProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/chip/style.d.ts

@@ -0,0 +1,5 @@
+import { ChipStyleProps } from '.';
+export declare const sizeMap: Record<NonNullable<ChipStyleProps["size"]>, {
+    padding: string;
+}>;
+export declare const StyledChip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ChipStyleProps>> & string;

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

@@ -0,0 +1,5 @@
+import { MarginProps, PaddingProps } from './types';
+export declare const toRem: (value: number | string) => string;
+export declare const getMarginsCSS: (props: MarginProps) => string;
+export declare const getPaddingCSS: (props: PaddingProps) => string;
+export declare const getScrollbarCSS: () => string;

package/dist/components/common/types.d.ts

@@ -0,0 +1,18 @@
+export type MarginProps = {
+    m?: string | number;
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+};
+export type PaddingProps = {
+    p?: string | number;
+    pt?: string | number;
+    pr?: string | number;
+    pb?: string | number;
+    pl?: string | number;
+    px?: string | number;
+    py?: string | number;
+};

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

@@ -0,0 +1,6 @@
+export type DividerProps = {
+    horizontal?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const Divider: import('react').ForwardRefExoticComponent<{
+    horizontal?: boolean;
+} & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,32 @@
+import { Styles } from 'styled-components/dist/types';
+import { MarginProps, PaddingProps } from '../common/types';
+export type FlexDirection = "row" | "column";
+export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
+export type FlexJustify = "center" | "start" | "end" | "between" | "around" | "evenly";
+export type FlexAlign = "normal" | "center" | "start" | "end" | "stretch";
+export type FlexProps = {
+    elevation?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+    direction?: FlexDirection;
+    gap?: string | number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: FlexWrap;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minheight?: string;
+    hoverstyle?: Styles<object>;
+} & MarginProps & PaddingProps & React.HTMLAttributes<HTMLDivElement>;
+export declare const Flex: import('react').ForwardRefExoticComponent<{
+    elevation?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+    direction?: FlexDirection;
+    gap?: string | number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: FlexWrap;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minheight?: string;
+    hoverstyle?: Styles<object>;
+} & MarginProps & PaddingProps & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/flex/style.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '.';
+export declare const SlyledFlex: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FlexProps>> & string;

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { Styles } from 'styled-components/dist/types';
+export type ImageProps = {
+    hoverstyle?: Styles<object>;
+    pressstyle?: Styles<object>;
+    style?: React.CSSProperties;
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+export declare const Image: React.ForwardRefExoticComponent<{
+    hoverstyle?: Styles<object>;
+    pressstyle?: Styles<object>;
+    style?: React.CSSProperties;
+} & React.ImgHTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLImageElement>>;

package/dist/components/image/style.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledImage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+    hoverstyle?: import('styled-components/dist/types').Styles<object>;
+    pressstyle?: import('styled-components/dist/types').Styles<object>;
+    style?: React.CSSProperties;
+} & import('react').ImgHTMLAttributes<HTMLImageElement> & {
+    initstyle?: React.CSSProperties;
+}>> & string;

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

@@ -0,0 +1,14 @@
+export type ModalProps = {
+    isOpen: boolean;
+    fullScreen?: boolean;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const Modal: import('react').ForwardRefExoticComponent<{
+    isOpen: boolean;
+    fullScreen?: boolean;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+} & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/number-select/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export type NumberSelectProps = {
+    min: number;
+    max: number;
+    initialValue?: number;
+    onChange?: (value: number) => void;
+    label?: string;
+};
+export declare const NumberSelect: React.FC<NumberSelectProps>;

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,7 @@
+import { Color } from '../../theme/types';
+export type ProgressBarProps = {
+    color: Color;
+    value: number;
+    height?: string;
+};
+export declare const ProgressBar: ({ color, value, height }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export type SelectOption = {
+    key: string;
+    label: string;
+};
+export type SelectProps = {
+    options: Array<SelectOption>;
+    initialValue?: SelectOption;
+    onChange?: (value: SelectOption) => void;
+    label?: string;
+};
+export declare const Select: React.FC<SelectProps>;

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

@@ -0,0 +1,15 @@
+import { MarginProps, PaddingProps } from '../common/types';
+export type TextProps = {
+    weight?: "regular" | "medium" | "semibold" | "bold";
+    size?: "8" | "10" | "12" | "14" | "15" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96";
+    width?: string;
+    height?: string;
+    align?: "left" | "center" | "right";
+} & MarginProps & PaddingProps & React.HTMLAttributes<HTMLParagraphElement>;
+export declare const Text: import('react').ForwardRefExoticComponent<{
+    weight?: "regular" | "medium" | "semibold" | "bold";
+    size?: "8" | "10" | "12" | "14" | "15" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96";
+    width?: string;
+    height?: string;
+    align?: "left" | "center" | "right";
+} & MarginProps & PaddingProps & import('react').HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

package/dist/components/text/styled.d.ts

@@ -0,0 +1,13 @@
+import { Breakpoint } from '../../hooks/use-responsive';
+import { TextProps } from '.';
+export declare const getFontSize: (size: TextProps["size"], breakpoint: Breakpoint) => string;
+export declare const getFontWeight: (weight: TextProps["weight"]) => "400" | "500" | "600" | "700";
+export declare const StyledText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    weight?: "regular" | "medium" | "semibold" | "bold";
+    size?: "8" | "10" | "12" | "14" | "15" | "16" | "18" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96";
+    width?: string;
+    height?: string;
+    align?: "left" | "center" | "right";
+} & import('../common/types').MarginProps & import('../common/types').PaddingProps & import('react').HTMLAttributes<HTMLParagraphElement> & {
+    breakpoint: Breakpoint;
+}>> & string;

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

@@ -0,0 +1,11 @@
+import { MarginProps, PaddingProps } from '../common/types';
+export type TextAreaProps = {
+    error?: string;
+    w?: string;
+    h?: string;
+} & MarginProps & PaddingProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const TextArea: import('react').ForwardRefExoticComponent<{
+    error?: string;
+    w?: string;
+    h?: string;
+} & MarginProps & PaddingProps & import('react').TextareaHTMLAttributes<HTMLTextAreaElement> & import('react').RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,2 @@
+import { TextAreaProps } from '.';
+export declare const StyledTextArea: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, TextAreaProps>> & string;

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

@@ -0,0 +1,15 @@
+import { MarginProps, PaddingProps } from '../common/types';
+export type TextFieldProps = {
+    error?: string;
+    label?: string;
+    required?: boolean;
+    w?: string;
+    h?: string;
+} & MarginProps & PaddingProps & React.InputHTMLAttributes<HTMLInputElement>;
+export declare const TextField: import('react').ForwardRefExoticComponent<{
+    error?: string;
+    label?: string;
+    required?: boolean;
+    w?: string;
+    h?: string;
+} & MarginProps & PaddingProps & import('react').InputHTMLAttributes<HTMLInputElement> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/textfield/styled.d.ts

@@ -0,0 +1,2 @@
+import { TextFieldProps } from '.';
+export declare const StyledTextField: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TextFieldProps>> & string;

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

@@ -0,0 +1,6 @@
+import { MarginProps, PaddingProps } from '../common/types';
+export type TitleProps = {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    weight?: "regular" | "medium" | "semibold" | "bold";
+} & MarginProps & PaddingProps & React.HTMLAttributes<HTMLHeadingElement>;
+export declare const Title: ({ children, ...props }: TitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/title/style.d.ts

@@ -0,0 +1,7 @@
+import { Breakpoint } from '../../hooks/use-responsive';
+export declare const StyledTitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    weight?: "regular" | "medium" | "semibold" | "bold";
+} & import('../common/types').MarginProps & import('../common/types').PaddingProps & import('react').HTMLAttributes<HTMLHeadingElement> & {
+    breakpoint: Breakpoint;
+}>> & string;

package/dist/components/utils/get-color-variations.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Generates light and dark variations of a given hex color.
+ *
+ * @param {string} hex - The base hex color (e.g., "#3498db").
+ * @param {number} percentage - The percentage (0 to 1) to lighten or darken by. Defaults to 0.2 (20%).
+ * @returns {{light: string, dark: string}} An object with the light and dark hex color strings.
+ */
+export declare const getColorVariations: (hex: string, percentage?: number) => {
+    light: string;
+    dark: string;
+};

package/dist/components/utils/get-text-color-based-on-background.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../theme/types';
+export declare const getTextColorBasedOnBackground: (backgroundColor: string, theme: Theme) => string;

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

@@ -0,0 +1,12 @@
+export type Breakpoint = "sm" | "md" | "lg" | "xl";
+export declare const breakpoints: {
+    [key in Breakpoint]: number;
+};
+export declare const useResponsive: () => {
+    width: number | undefined;
+    breakpoint: Breakpoint;
+    isMobile: boolean;
+    isTablet: boolean;
+    isLaptop: boolean;
+    isDesktop: boolean;
+};

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export { Button } from './components/button';
 export type { ButtonProps } from './components/button';
+export { ProgressBar } from './components/progress-bar';
+export type { ProgressBarProps } from './components/progress-bar';