@locus-ui/components 0.0.12 → 0.0.13

package/dist/index.d.mts

@@ -21,6 +21,11 @@ type StringPropDef = {
     className?: string;
     cssProperty?: string;
 };
+type NumberPropDef = {
+    type: "number";
+    default?: number;
+    required?: boolean;
+};
 type ReactNodePropDef<T = React.ReactNode> = {
     type: "reactNode";
     required?: boolean;
@@ -40,6 +45,7 @@ type EnumOrStringPropDef<T extends string> = {
     required?: boolean;
     className?: string;
     dataAttr?: string;
+    transform?: (value: string) => string;
 };
 type ValueOrArrayPropDef<T> = {
     type: "value | array";
@@ -51,11 +57,11 @@ type FunctionPropDef<T extends (...args: any[]) => any = (...args: any[]) => any
     type: "function";
     required?: boolean;
 };
-type BasePropDef<T = any> = BooleanPropDef | StringPropDef | ReactNodePropDef<T> | EnumPropDef<T> | EnumOrStringPropDef<T & string> | ValueOrArrayPropDef<T> | FunctionPropDef<T & ((...args: any[]) => any)>;
+type BasePropDef<T = any> = BooleanPropDef | StringPropDef | NumberPropDef | ReactNodePropDef<T> | EnumPropDef<T> | EnumOrStringPropDef<T & string> | ValueOrArrayPropDef<T> | FunctionPropDef<T & ((...args: any[]) => any)>;
 type ResponsivePropDef<T = any> = BasePropDef<T> & {
     responsive: true;
 };
-type GetPropDefType<Def> = Def extends BooleanPropDef ? Def extends ResponsivePropDef ? Responsive<boolean> : boolean : Def extends StringPropDef ? Def extends ResponsivePropDef ? Responsive<string> : string : Def extends ReactNodePropDef<infer Type> ? Type : Def extends FunctionPropDef<infer Fn> ? Fn : Def extends EnumOrStringPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type extends string> ? Responsive<Union<string, Type>> : Union<string, Type> : Def extends ValueOrArrayPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type> ? Responsive<Type | Type[]> : Type | Type[] : Def extends EnumPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type : never;
+type GetPropDefType<Def> = Def extends BooleanPropDef ? Def extends ResponsivePropDef ? Responsive<boolean> : boolean : Def extends StringPropDef ? Def extends ResponsivePropDef ? Responsive<string> : string : Def extends NumberPropDef ? Def extends ResponsivePropDef ? Responsive<number> : number : Def extends ReactNodePropDef<infer Type> ? Type : Def extends FunctionPropDef<infer Fn> ? Fn : Def extends EnumOrStringPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type extends string> ? Responsive<Union<string, Type>> : Union<string, Type> : Def extends ValueOrArrayPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type> ? Responsive<Type | Type[]> : Type | Type[] : Def extends EnumPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type : never;
 type GetPropDefTypes<P> = {
     [K in keyof P]?: GetPropDefType<P[K]>;
 };
@@ -72,17 +78,36 @@ declare const AlignPropDef: {
 };
 type AlignProp = GetPropDefTypes<typeof AlignPropDef>;
 
+/**
+ * Parses a color string (hex, rgb, or raw r,g,b) into a raw "r, g, b" string
+ * suitable for use with CSS rgba().
+ *
+ * Supported formats:
+ * - Hex: "#7BEB34", "#7beb34", "#abc"
+ * - RGB function: "rgb(125, 235, 52)"
+ * - Raw: "125, 235, 52"
+ *
+ * Returns the original string unchanged if parsing fails.
+ */
+declare function parseColor(value: string): string;
+
 declare const ColorPropDef: {
     /**
      * Sets the color of the component.
      *
+     * Uses predefined theme colors ("primary", "secondary", etc.) or accepts custom color values in hex, rgb, or raw rgb formats.
+     *
      * @example color="primary" // primary color
+     * @example color="#7BEB34" // hex color
+     * @example color="rgb(125, 235, 52)" // rgb color
+     * @example color="125, 235, 52" // raw rgb values
      */
     color: {
         type: "enum | string";
         values: readonly ["primary", "secondary", "tertiary", "accent", "success", "warning", "danger", "info"];
         dataAttr: string;
         className: string;
+        transform: typeof parseColor;
     };
 };
 type ColorProp = GetPropDefTypes<typeof ColorPropDef>;
@@ -650,6 +675,13 @@ type StrictChildren<AllowedChildProps> = {
 type WithStrictChildren<Props extends {
     children?: React$1.ReactNode;
 }, AllowedChildProps> = Omit<Props, "children"> & StrictChildren<AllowedChildProps>;
+/**
+ * Like WithStrictChildren, but children are optional.
+ * When provided, children are still restricted to the allowed types.
+ */
+type WithOptionalStrictChildren<Props extends {
+    children?: React$1.ReactNode;
+}, AllowedChildProps> = Omit<Props, "children"> & Partial<StrictChildren<AllowedChildProps>>;
 
 declare const AccordionRootPropsDefs: {
     /**
@@ -900,6 +932,24 @@ declare const Container: React$1.ForwardRefExoticComponent<{} & {
     direction?: "row" | "column" | undefined;
 } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
+interface PanelExternalProps extends MarginProps, PaddingProps, SpacingProp, RadiusProps, RoundnessProp {
+}
+/**
+ * A versatile container used to provide layout and styling capabilities.
+ */
+declare const Panel: React$1.ForwardRefExoticComponent<GetPropDefTypes<{
+    readonly variant: {
+        type: "enum";
+        values: readonly ["solid", "outlined", "muted"];
+        dataAttr: string;
+    };
+    readonly blur: {
+        type: "string";
+        default: string;
+        cssProperty: string;
+    };
+}> & PanelExternalProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const variants: readonly ["clear", "shadow", "blurred"];
 type PortalBackdropInternalProps = {
     /**
@@ -1014,6 +1064,61 @@ declare const Portal: {
     Backdrop: React$1.ForwardRefExoticComponent<AllPortalBackdropProps & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<HTMLDivElement>>;
 };
 
+declare const ProgressBarFillPropsDefs: {
+    /**
+     * The value of the progress bar (filled state).
+     * Should be a number between 0 and 1 representing the percentage of completion.
+     */
+    readonly value: {
+        type: "number";
+    };
+};
+type ProgressBarFillInternalProps = GetPropDefTypes<typeof ProgressBarFillPropsDefs>;
+
+interface AllProgressBarFillProps extends ProgressBarFillInternalProps, ColorProp, MarginProps, SizeProp {
+}
+/**
+ * A ProgressBarFill.
+ */
+type ProgressBarFillProps = AllProgressBarFillProps & HTMLAttributes<HTMLDivElement>;
+
+declare const ProgressBarRootPropsDefs: {
+    /**
+     * Sets the variant style of the progress bar ("solid", "outlined", or "muted").
+     */
+    readonly variant: {
+        type: "enum";
+        values: readonly ["solid", "outlined", "muted"];
+        dataAttr: string;
+    };
+    /**
+     * The value of the progress bar (filled state).
+     * Should be a number between 0 and 1 representing the percentage of completion.
+     */
+    readonly value: {
+        type: "number";
+    };
+};
+type ProgressBarRootInternalProps = GetPropDefTypes<typeof ProgressBarRootPropsDefs>;
+
+interface AllProgressBarRootProps extends ProgressBarRootInternalProps, ColorProp, MarginProps, SizeProp {
+}
+type ProgressBarRootProps = AllProgressBarRootProps & WithOptionalStrictChildren<HTMLAttributes<HTMLDivElement>, ProgressBarFillProps>;
+
+/**
+ * A Progress Bar component to display single or stacked progress bars.
+ */
+declare const ProgressBar: React$1.FC<ProgressBarRootProps> & {
+    /**
+     * The root component for the Progress Bar.
+     */
+    Root: React$1.FC<ProgressBarRootProps>;
+    /**
+     * The fill component for the Progress Bar, representing the filled portion.
+     */
+    Fill: React$1.FC<ProgressBarFillProps>;
+};
+
 interface SelectSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 
@@ -1248,6 +1353,10 @@ interface ThemeContextValue extends ThemeChangeHandlers {
 }
 declare function useTheme(): ThemeContextValue;
 
-declare function ThemeControl(): react_jsx_runtime.JSX.Element;
+declare const ThemeControlPosition: readonly ["tl", "top", "tr", "left", "center", "right", "bl", "bottom", "br"];
+interface ThemeControlProps {
+    position?: (typeof ThemeControlPosition)[number];
+}
+declare function ThemeControl({ position }: ThemeControlProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, Badge, Box, Button, Checkbox, Container, Portal, Select, Separator, Text, Theme, type ThemeAppearance, ThemeControl, type ThemeRadius, type ThemeRoundness, type ThemeSpacing, useTheme };
+export { Accordion, Badge, Box, Button, Checkbox, Container, Panel, Portal, ProgressBar, Select, Separator, Text, Theme, type ThemeAppearance, ThemeControl, type ThemeRadius, type ThemeRoundness, type ThemeSpacing, useTheme };

package/dist/index.d.ts

@@ -21,6 +21,11 @@ type StringPropDef = {
     className?: string;
     cssProperty?: string;
 };
+type NumberPropDef = {
+    type: "number";
+    default?: number;
+    required?: boolean;
+};
 type ReactNodePropDef<T = React.ReactNode> = {
     type: "reactNode";
     required?: boolean;
@@ -40,6 +45,7 @@ type EnumOrStringPropDef<T extends string> = {
     required?: boolean;
     className?: string;
     dataAttr?: string;
+    transform?: (value: string) => string;
 };
 type ValueOrArrayPropDef<T> = {
     type: "value | array";
@@ -51,11 +57,11 @@ type FunctionPropDef<T extends (...args: any[]) => any = (...args: any[]) => any
     type: "function";
     required?: boolean;
 };
-type BasePropDef<T = any> = BooleanPropDef | StringPropDef | ReactNodePropDef<T> | EnumPropDef<T> | EnumOrStringPropDef<T & string> | ValueOrArrayPropDef<T> | FunctionPropDef<T & ((...args: any[]) => any)>;
+type BasePropDef<T = any> = BooleanPropDef | StringPropDef | NumberPropDef | ReactNodePropDef<T> | EnumPropDef<T> | EnumOrStringPropDef<T & string> | ValueOrArrayPropDef<T> | FunctionPropDef<T & ((...args: any[]) => any)>;
 type ResponsivePropDef<T = any> = BasePropDef<T> & {
     responsive: true;
 };
-type GetPropDefType<Def> = Def extends BooleanPropDef ? Def extends ResponsivePropDef ? Responsive<boolean> : boolean : Def extends StringPropDef ? Def extends ResponsivePropDef ? Responsive<string> : string : Def extends ReactNodePropDef<infer Type> ? Type : Def extends FunctionPropDef<infer Fn> ? Fn : Def extends EnumOrStringPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type extends string> ? Responsive<Union<string, Type>> : Union<string, Type> : Def extends ValueOrArrayPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type> ? Responsive<Type | Type[]> : Type | Type[] : Def extends EnumPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type : never;
+type GetPropDefType<Def> = Def extends BooleanPropDef ? Def extends ResponsivePropDef ? Responsive<boolean> : boolean : Def extends StringPropDef ? Def extends ResponsivePropDef ? Responsive<string> : string : Def extends NumberPropDef ? Def extends ResponsivePropDef ? Responsive<number> : number : Def extends ReactNodePropDef<infer Type> ? Type : Def extends FunctionPropDef<infer Fn> ? Fn : Def extends EnumOrStringPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type extends string> ? Responsive<Union<string, Type>> : Union<string, Type> : Def extends ValueOrArrayPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type> ? Responsive<Type | Type[]> : Type | Type[] : Def extends EnumPropDef<infer Type> ? Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type : never;
 type GetPropDefTypes<P> = {
     [K in keyof P]?: GetPropDefType<P[K]>;
 };
@@ -72,17 +78,36 @@ declare const AlignPropDef: {
 };
 type AlignProp = GetPropDefTypes<typeof AlignPropDef>;
 
+/**
+ * Parses a color string (hex, rgb, or raw r,g,b) into a raw "r, g, b" string
+ * suitable for use with CSS rgba().
+ *
+ * Supported formats:
+ * - Hex: "#7BEB34", "#7beb34", "#abc"
+ * - RGB function: "rgb(125, 235, 52)"
+ * - Raw: "125, 235, 52"
+ *
+ * Returns the original string unchanged if parsing fails.
+ */
+declare function parseColor(value: string): string;
+
 declare const ColorPropDef: {
     /**
      * Sets the color of the component.
      *
+     * Uses predefined theme colors ("primary", "secondary", etc.) or accepts custom color values in hex, rgb, or raw rgb formats.
+     *
      * @example color="primary" // primary color
+     * @example color="#7BEB34" // hex color
+     * @example color="rgb(125, 235, 52)" // rgb color
+     * @example color="125, 235, 52" // raw rgb values
      */
     color: {
         type: "enum | string";
         values: readonly ["primary", "secondary", "tertiary", "accent", "success", "warning", "danger", "info"];
         dataAttr: string;
         className: string;
+        transform: typeof parseColor;
     };
 };
 type ColorProp = GetPropDefTypes<typeof ColorPropDef>;
@@ -650,6 +675,13 @@ type StrictChildren<AllowedChildProps> = {
 type WithStrictChildren<Props extends {
     children?: React$1.ReactNode;
 }, AllowedChildProps> = Omit<Props, "children"> & StrictChildren<AllowedChildProps>;
+/**
+ * Like WithStrictChildren, but children are optional.
+ * When provided, children are still restricted to the allowed types.
+ */
+type WithOptionalStrictChildren<Props extends {
+    children?: React$1.ReactNode;
+}, AllowedChildProps> = Omit<Props, "children"> & Partial<StrictChildren<AllowedChildProps>>;
 
 declare const AccordionRootPropsDefs: {
     /**
@@ -900,6 +932,24 @@ declare const Container: React$1.ForwardRefExoticComponent<{} & {
     direction?: "row" | "column" | undefined;
 } & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
+interface PanelExternalProps extends MarginProps, PaddingProps, SpacingProp, RadiusProps, RoundnessProp {
+}
+/**
+ * A versatile container used to provide layout and styling capabilities.
+ */
+declare const Panel: React$1.ForwardRefExoticComponent<GetPropDefTypes<{
+    readonly variant: {
+        type: "enum";
+        values: readonly ["solid", "outlined", "muted"];
+        dataAttr: string;
+    };
+    readonly blur: {
+        type: "string";
+        default: string;
+        cssProperty: string;
+    };
+}> & PanelExternalProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const variants: readonly ["clear", "shadow", "blurred"];
 type PortalBackdropInternalProps = {
     /**
@@ -1014,6 +1064,61 @@ declare const Portal: {
     Backdrop: React$1.ForwardRefExoticComponent<AllPortalBackdropProps & Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & React$1.RefAttributes<HTMLDivElement>>;
 };
 
+declare const ProgressBarFillPropsDefs: {
+    /**
+     * The value of the progress bar (filled state).
+     * Should be a number between 0 and 1 representing the percentage of completion.
+     */
+    readonly value: {
+        type: "number";
+    };
+};
+type ProgressBarFillInternalProps = GetPropDefTypes<typeof ProgressBarFillPropsDefs>;
+
+interface AllProgressBarFillProps extends ProgressBarFillInternalProps, ColorProp, MarginProps, SizeProp {
+}
+/**
+ * A ProgressBarFill.
+ */
+type ProgressBarFillProps = AllProgressBarFillProps & HTMLAttributes<HTMLDivElement>;
+
+declare const ProgressBarRootPropsDefs: {
+    /**
+     * Sets the variant style of the progress bar ("solid", "outlined", or "muted").
+     */
+    readonly variant: {
+        type: "enum";
+        values: readonly ["solid", "outlined", "muted"];
+        dataAttr: string;
+    };
+    /**
+     * The value of the progress bar (filled state).
+     * Should be a number between 0 and 1 representing the percentage of completion.
+     */
+    readonly value: {
+        type: "number";
+    };
+};
+type ProgressBarRootInternalProps = GetPropDefTypes<typeof ProgressBarRootPropsDefs>;
+
+interface AllProgressBarRootProps extends ProgressBarRootInternalProps, ColorProp, MarginProps, SizeProp {
+}
+type ProgressBarRootProps = AllProgressBarRootProps & WithOptionalStrictChildren<HTMLAttributes<HTMLDivElement>, ProgressBarFillProps>;
+
+/**
+ * A Progress Bar component to display single or stacked progress bars.
+ */
+declare const ProgressBar: React$1.FC<ProgressBarRootProps> & {
+    /**
+     * The root component for the Progress Bar.
+     */
+    Root: React$1.FC<ProgressBarRootProps>;
+    /**
+     * The fill component for the Progress Bar, representing the filled portion.
+     */
+    Fill: React$1.FC<ProgressBarFillProps>;
+};
+
 interface SelectSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 
@@ -1248,6 +1353,10 @@ interface ThemeContextValue extends ThemeChangeHandlers {
 }
 declare function useTheme(): ThemeContextValue;
 
-declare function ThemeControl(): react_jsx_runtime.JSX.Element;
+declare const ThemeControlPosition: readonly ["tl", "top", "tr", "left", "center", "right", "bl", "bottom", "br"];
+interface ThemeControlProps {
+    position?: (typeof ThemeControlPosition)[number];
+}
+declare function ThemeControl({ position }: ThemeControlProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, Badge, Box, Button, Checkbox, Container, Portal, Select, Separator, Text, Theme, type ThemeAppearance, ThemeControl, type ThemeRadius, type ThemeRoundness, type ThemeSpacing, useTheme };
+export { Accordion, Badge, Box, Button, Checkbox, Container, Panel, Portal, ProgressBar, Select, Separator, Text, Theme, type ThemeAppearance, ThemeControl, type ThemeRadius, type ThemeRoundness, type ThemeSpacing, useTheme };