@julien-wiegandt/open-ui 0.1.71 → 0.1.73

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

@@ -4,8 +4,8 @@ import { MarginProps, PaddingProps } from '../common/types';
 import { TextProps } from '../text';
 export type Icon = "bell" | "check" | "hamburger" | "heart" | "sync" | "sparkles" | "dots" | "send" | "copy";
 export type ButtonProps = {
-    color: Color;
-    variant: Variant;
+    color?: Color | string;
+    variant?: Variant;
     label?: string;
     starticon?: React.ReactNode | Icon;
     endicon?: React.ReactNode | Icon;
@@ -16,14 +16,15 @@ export type ButtonProps = {
     gap?: string | number;
     loading?: boolean;
     active?: boolean;
+    activeStyle?: React.CSSProperties;
     align?: "left" | "center" | "right";
     w?: string;
     h?: string;
     labelProps?: TextProps;
 } & MarginProps & PaddingProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const Button: React.ForwardRefExoticComponent<{
-    color: Color;
-    variant: Variant;
+    color?: Color | string;
+    variant?: Variant;
     label?: string;
     starticon?: React.ReactNode | Icon;
     endicon?: React.ReactNode | Icon;
@@ -34,6 +35,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
     gap?: string | number;
     loading?: boolean;
     active?: boolean;
+    activeStyle?: React.CSSProperties;
     align?: "left" | "center" | "right";
     w?: string;
     h?: string;

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

@@ -2,7 +2,7 @@ import { Color, Theme } from '../../theme/types';
 import { ButtonProps } from '.';
 import { TextProps } from '../text';
 export declare const getVariantStyle: ({ color, theme, }: {
-    color: Color;
+    color: Color | string;
     theme: Theme;
 }) => Record<string, any>;
 export declare const sizeMap: Record<NonNullable<ButtonProps["size"]>, {

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

@@ -3,7 +3,7 @@ import { default as React } from 'react';
 import { MarginProps, PaddingProps } from '../common/types';
 import { TextProps } from '../text';
 export type CheckboxProps = {
-    color: Color;
+    color?: Color | string;
     label?: string;
     checked?: boolean;
     defaultChecked?: boolean;
@@ -15,7 +15,7 @@ export type CheckboxProps = {
     labelPosition?: "left" | "right";
 } & MarginProps & PaddingProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange">;
 export declare const Checkbox: React.ForwardRefExoticComponent<{
-    color: Color;
+    color?: Color | string;
     label?: string;
     checked?: boolean;
     defaultChecked?: boolean;

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

@@ -1,8 +1,8 @@
 import { Color, Theme } from '../../theme/types';
 import { CheckboxProps } from '.';
 import { TextProps } from '../text';
-export declare const getCheckboxStyle: ({ color, theme }: {
-    color: Color;
+export declare const getCheckboxStyle: ({ color, theme, }: {
+    color: Color | string;
     theme: Theme;
 }) => {
     borderColor: string;

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

@@ -2,8 +2,8 @@ import { Color, Radius, Variant } from '../../theme/types';
 import { default as React } from 'react';
 import { MarginProps, PaddingProps } from '../common/types';
 export type ChipStyleProps = {
-    color: Color;
-    variant: Variant;
+    color?: Color | string;
+    variant?: Variant;
     size?: "sm" | "md" | "lg";
     bgcolor?: string;
     radius?: Radius;
@@ -20,8 +20,8 @@ export declare const Chip: React.ForwardRefExoticComponent<{
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
 } & {
-    color: Color;
-    variant: Variant;
+    color?: Color | string;
+    variant?: Variant;
     size?: "sm" | "md" | "lg";
     bgcolor?: string;
     radius?: Radius;

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

@@ -17,7 +17,7 @@ export type FlexProps = {
     minWidth?: string;
     minheight?: string;
     hoverstyle?: Styles<object>;
-} & MarginProps & PaddingProps & React.HTMLAttributes<HTMLDivElement>;
+} & MarginProps & PaddingProps & Omit<React.HTMLAttributes<HTMLDivElement>, "content">;
 export declare const Flex: import('react').ForwardRefExoticComponent<{
     elevation?: Elevation;
     direction?: FlexDirection;
@@ -30,4 +30,4 @@ export declare const Flex: import('react').ForwardRefExoticComponent<{
     minWidth?: string;
     minheight?: string;
     hoverstyle?: Styles<object>;
-} & MarginProps & PaddingProps & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+} & MarginProps & PaddingProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "content"> & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +1,13 @@
 import { Color } from '../../theme/types';
 import { MarginProps, PaddingProps } from '../common/types';
+import { TextProps } from '../text';
 export type InputProps = {
     error?: string;
     label?: string;
-    color?: Color;
+    color?: Color | string;
     required?: boolean;
+    labelProps?: TextProps;
+    containerStyle?: React.CSSProperties;
     w?: string;
     h?: string;
     errorStyle?: React.CSSProperties;
@@ -12,8 +15,10 @@ export type InputProps = {
 export declare const Input: import('react').ForwardRefExoticComponent<{
     error?: string;
     label?: string;
-    color?: Color;
+    color?: Color | string;
     required?: boolean;
+    labelProps?: TextProps;
+    containerStyle?: React.CSSProperties;
     w?: string;
     h?: string;
     errorStyle?: React.CSSProperties;

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

@@ -1,8 +1,10 @@
 import { default as React } from 'react';
+import { TitleProps } from '../title';
 export type ModalProps = {
     isOpen: boolean;
     fullScreen?: boolean;
     title?: React.ReactNode;
+    titleProps?: Omit<TitleProps, "children">;
     size?: "xs" | "s" | "m" | "l" | "xl";
     children?: React.ReactNode;
     footer?: React.ReactNode;
@@ -11,11 +13,13 @@ export type ModalProps = {
     closeOnClickOutside?: boolean;
     bodyStyle?: React.CSSProperties;
     close?: React.ReactNode;
+    closeStyle?: React.CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const Modal: React.ForwardRefExoticComponent<{
     isOpen: boolean;
     fullScreen?: boolean;
     title?: React.ReactNode;
+    titleProps?: Omit<TitleProps, "children">;
     size?: "xs" | "s" | "m" | "l" | "xl";
     children?: React.ReactNode;
     footer?: React.ReactNode;
@@ -24,4 +28,5 @@ export declare const Modal: React.ForwardRefExoticComponent<{
     closeOnClickOutside?: boolean;
     bodyStyle?: React.CSSProperties;
     close?: React.ReactNode;
+    closeStyle?: React.CSSProperties;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -2,7 +2,7 @@ import { Color, Radius } from '../../theme/types';
 import { default as React } from 'react';
 import { MarginProps, PaddingProps } from '../common/types';
 export type PopoverStyleProps = {
-    color: Color;
+    color: Color | string;
     content: React.ReactNode;
     children: React.ReactNode;
     visible?: boolean;
@@ -12,10 +12,10 @@ export type PopoverStyleProps = {
     bgcolor?: string;
     arrowcolor?: string;
     radius?: Radius;
-} & MarginProps & PaddingProps & React.HTMLAttributes<HTMLDivElement>;
+} & MarginProps & PaddingProps & Omit<React.HTMLAttributes<HTMLDivElement>, "content">;
 export type PopoverProps = {} & PopoverStyleProps;
 export declare const Popover: React.ForwardRefExoticComponent<{
-    color: Color;
+    color: Color | string;
     content: React.ReactNode;
     children: React.ReactNode;
     visible?: boolean;
@@ -25,4 +25,4 @@ export declare const Popover: React.ForwardRefExoticComponent<{
     bgcolor?: string;
     arrowcolor?: string;
     radius?: Radius;
-} & MarginProps & PaddingProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+} & MarginProps & PaddingProps & Omit<React.HTMLAttributes<HTMLDivElement>, "content"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -11,7 +11,7 @@ export declare const StyledPopover: import('styled-components/dist/types').IStyl
     minWidth?: string;
     minheight?: string;
     hoverstyle?: import('styled-components/dist/types').Styles<object>;
-} & import('../common/types').MarginProps & import('../common/types').PaddingProps & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>, Omit<PopoverStyleProps, "content" | "children" | "body">>> & string & Omit<import('react').ForwardRefExoticComponent<{
+} & import('../common/types').MarginProps & import('../common/types').PaddingProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "content"> & import('react').RefAttributes<HTMLDivElement>, Omit<PopoverStyleProps, "content" | "children" | "body">>> & string & Omit<import('react').ForwardRefExoticComponent<{
     elevation?: import('../..').Elevation;
     direction?: import('../flex').FlexDirection;
     gap?: string | number;
@@ -23,4 +23,4 @@ export declare const StyledPopover: import('styled-components/dist/types').IStyl
     minWidth?: string;
     minheight?: string;
     hoverstyle?: import('styled-components/dist/types').Styles<object>;
-} & import('../common/types').MarginProps & import('../common/types').PaddingProps & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+} & import('../common/types').MarginProps & import('../common/types').PaddingProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "content"> & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;

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

@@ -1,6 +1,6 @@
 import { Color } from '../../theme/types';
 export type ProgressBarProps = {
-    color: Color;
+    color: Color | string;
     value: number;
     animationDurationInSeconds?: number;
     h?: string;

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

@@ -1,3 +1,4 @@
+import { TextProps } from '../text';
 export type SelectOption = {
     key: string;
     label: string;
@@ -10,6 +11,7 @@ export type SelectProps = {
     onChange?: (value: SelectOption) => void;
     label?: string;
     required?: boolean;
+    labelProps?: TextProps;
     placeholder?: string;
     orientation?: "up" | "down";
     hideScrollbar?: boolean;
@@ -17,7 +19,7 @@ export type SelectProps = {
         option?: SelectOption;
         handleChange?: (option: SelectOption) => void;
     }) => React.ReactNode;
-    selectOptionStyle?: React.CSSProperties;
-    optionContainerStyle?: React.CSSProperties;
+    triggerStyle?: React.CSSProperties;
+    dropdownStyle?: React.CSSProperties;
 };
 export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,9 @@
+import { Color } from '../../theme/types';
 export type SkeletonProps = {
     width?: string;
     height?: string;
     radius?: string;
-    color?: string;
+    color?: Color | string;
     wrapperStyle?: React.CSSProperties;
     shimmerStyle?: React.CSSProperties;
 };

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

@@ -2,12 +2,12 @@ import { Color } from '../../theme/types';
 export type SwitchProps = {
     value?: boolean;
     size?: number;
-    color?: Color;
+    color?: Color | string;
     onChange?: (isOn: boolean) => void;
 } & Omit<React.SVGAttributes<SVGSVGElement>, "onChange">;
 export declare const Switch: import('react').ForwardRefExoticComponent<{
     value?: boolean;
     size?: number;
-    color?: Color;
+    color?: Color | string;
     onChange?: (isOn: boolean) => void;
 } & Omit<import('react').SVGAttributes<SVGSVGElement>, "onChange"> & import('react').RefAttributes<SVGSVGElement>>;

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

@@ -1,6 +1,8 @@
+import { Color } from '../../theme/types';
 import { MarginProps, PaddingProps } from '../common/types';
 export type TextProps = {
     weight?: "regular" | "medium" | "semibold" | "bold";
+    color?: Color | string;
     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;
@@ -12,6 +14,7 @@ export type TextProps = {
 } & MarginProps & PaddingProps & React.HTMLAttributes<HTMLParagraphElement>;
 export declare const Text: import('react').ForwardRefExoticComponent<{
     weight?: "regular" | "medium" | "semibold" | "bold";
+    color?: Color | string;
     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;

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

@@ -4,6 +4,7 @@ export declare const getFontSize: (size: TextProps["size"], breakpoint: Breakpoi
 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";
+    color?: import('../..').Color | string;
     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;

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

@@ -1,14 +1,25 @@
 import { Color } from '../../theme/types';
 import { MarginProps, PaddingProps } from '../common/types';
+import { TextProps } from '../text';
 export type TextAreaProps = {
-    color?: Color;
+    color?: Color | string;
     error?: string;
+    errorStyle?: React.CSSProperties;
+    label?: string;
+    required?: boolean;
+    labelProps?: TextProps;
+    containerStyle?: React.CSSProperties;
     w?: string;
     h?: string;
 } & MarginProps & PaddingProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 export declare const TextArea: import('react').ForwardRefExoticComponent<{
-    color?: Color;
+    color?: Color | string;
     error?: string;
+    errorStyle?: React.CSSProperties;
+    label?: string;
+    required?: boolean;
+    labelProps?: TextProps;
+    containerStyle?: React.CSSProperties;
     w?: string;
     h?: string;
 } & MarginProps & PaddingProps & import('react').TextareaHTMLAttributes<HTMLTextAreaElement> & import('react').RefAttributes<HTMLTextAreaElement>>;

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

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

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

@@ -2,6 +2,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";
+    color?: import('../..').Color | string;
 } & import('../common/types').MarginProps & import('../common/types').PaddingProps & import('react').HTMLAttributes<HTMLHeadingElement> & {
     breakpoint: Breakpoint;
 }>> & string;

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

@@ -6,7 +6,7 @@ import { FlexProps } from '../flex';
  */
 export type ToastProps = {
     id: string;
-    color?: Color;
+    color?: Color | string;
     title?: string;
     icon?: React.ReactNode;
     duration?: number;

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

@@ -11,7 +11,7 @@ export declare const StyledToast: import('styled-components/dist/types').IStyled
     minWidth?: string;
     minheight?: string;
     hoverstyle?: import('styled-components/dist/types').Styles<object>;
-} & import('../common/types').MarginProps & import('../common/types').PaddingProps & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>, Omit<ToastProps, "id">>> & string & Omit<import('react').ForwardRefExoticComponent<{
+} & import('../common/types').MarginProps & import('../common/types').PaddingProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "content"> & import('react').RefAttributes<HTMLDivElement>, Omit<ToastProps, "id">>> & string & Omit<import('react').ForwardRefExoticComponent<{
     elevation?: import('../..').Elevation;
     direction?: import('../flex').FlexDirection;
     gap?: string | number;
@@ -23,4 +23,4 @@ export declare const StyledToast: import('styled-components/dist/types').IStyled
     minWidth?: string;
     minheight?: string;
     hoverstyle?: import('styled-components/dist/types').Styles<object>;
-} & import('../common/types').MarginProps & import('../common/types').PaddingProps & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;
+} & import('../common/types').MarginProps & import('../common/types').PaddingProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "content"> & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;

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

@@ -0,0 +1,25 @@
+import { Color, Radius, Variant } from '../../theme/types';
+import { default as React } from 'react';
+import { MarginProps, PaddingProps } from '../common/types';
+export type TooltipProps = {
+    label: React.ReactNode;
+    children: React.ReactNode;
+    variant?: Variant;
+    color?: Color | string;
+    placement?: "left" | "right" | "top" | "bottom";
+    gap?: number;
+    bgcolor?: string;
+    radius?: Radius;
+    zIndex?: number;
+} & MarginProps & PaddingProps & React.HTMLAttributes<HTMLDivElement>;
+export declare const Tooltip: React.ForwardRefExoticComponent<{
+    label: React.ReactNode;
+    children: React.ReactNode;
+    variant?: Variant;
+    color?: Color | string;
+    placement?: "left" | "right" | "top" | "bottom";
+    gap?: number;
+    bgcolor?: string;
+    radius?: Radius;
+    zIndex?: number;
+} & MarginProps & PaddingProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,32 @@
+import { Color, Radius, Variant } from '../../theme/types';
+export type StyledTooltipProps = {
+    color: Color | string;
+    variant: Variant;
+    bgcolor?: string;
+    radius?: Radius;
+};
+export declare const StyledTooltip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<{
+    elevation?: import('../../theme/types').Elevation;
+    direction?: import('../flex').FlexDirection;
+    gap?: string | number;
+    align?: import('../flex').FlexAlign;
+    justify?: import('../flex').FlexJustify;
+    wrap?: import('../flex').FlexWrap;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minheight?: string;
+    hoverstyle?: import('styled-components/dist/types').Styles<object>;
+} & import('../common/types').MarginProps & import('../common/types').PaddingProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "content"> & import('react').RefAttributes<HTMLDivElement>, StyledTooltipProps>> & string & Omit<import('react').ForwardRefExoticComponent<{
+    elevation?: import('../../theme/types').Elevation;
+    direction?: import('../flex').FlexDirection;
+    gap?: string | number;
+    align?: import('../flex').FlexAlign;
+    justify?: import('../flex').FlexJustify;
+    wrap?: import('../flex').FlexWrap;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minheight?: string;
+    hoverstyle?: import('styled-components/dist/types').Styles<object>;
+} & import('../common/types').MarginProps & import('../common/types').PaddingProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "content"> & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;

package/dist/components/utils/get-recursive-bg-color.d.ts

@@ -0,0 +1 @@
+export declare const getRecursiveBgColor: (element: HTMLElement) => string;

package/dist/components/utils/resolve-color.d.ts

@@ -0,0 +1,9 @@
+import { Color, ColorPalette, Theme } from '../../theme/types';
+/**
+ * Resolve a `Color` token (e.g. "primary") or any raw color string
+ * (hex, rgb, hsl, …) to a `ColorPalette` object.
+ *
+ * - If `color` is one of the four theme tokens it reads from `theme.palette`.
+ * - Otherwise it generates a palette on the fly via `getPalette`.
+ */
+export declare function resolveColor(color: Color | string, theme: Theme): ColorPalette;

package/dist/hooks/use-component-theme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../theme/types';
+export declare const useComponentTheme: <T extends Record<string, any>>(componentName: keyof NonNullable<Theme["components"]>, props: T) => T;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components/button';
+export * from './components/checkbox';
 export * from './components/chip';
 export * from './components/divider';
 export * from './components/flex';