@emeraldemperaur/vector-sigma 1.3.1 → 1.4.0

package/lib/types/components/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export type AvatarDesign = 'avatar' | 'avatar-outline' | 'avatar-material' | 'avatar-neumorphic';
 export type AvatarShape = 'circle' | 'square' | 'rounded';
 export interface AvatarProps {
@@ -17,6 +17,7 @@ export interface AvatarProps {
     hintText?: string;
     hintUrl?: string;
     shape?: AvatarShape;
+    errorText?: ReactNode | string | null;
     size?: number;
     className?: string;
     style?: React.CSSProperties;

package/lib/types/components/button/button.d.ts

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import type { ButtonProps } from '@radix-ui/themes';
 export type ButtonDesign = 'button' | 'button-material' | 'button-outline' | 'button-neumorphic';
 import '../../styles/main.scss';
-interface DesignButtonProps extends ButtonProps {
+export interface DesignButtonProps extends ButtonProps {
     inputtype?: ButtonDesign;
     alias: string;
     inputLabel?: string;
     icon?: React.ReactNode;
     width: number;
     defaultValue?: string;
-    value: string;
+    value?: string;
     newRow?: boolean;
+    errorText?: ReactNode | string | null;
     placeholder?: string;
     readOnly?: boolean;
     isHinted?: boolean;
@@ -19,4 +20,3 @@ interface DesignButtonProps extends ButtonProps {
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 export declare const xButton: ({ inputtype, alias, readOnly, style, width, children, ...props }: DesignButtonProps) => React.JSX.Element;
-export {};

package/lib/types/components/checkbox/checkbox.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { InputOption } from 'utils/vinci';
 import '../../styles/main.scss';
 export type CheckBoxDesign = 'checkbox' | 'checkbox-material' | 'checkbox-outline' | 'checkbox-neumorphic';
-interface CheckboxGroup {
+export interface CheckboxGroup {
     inputtype?: CheckBoxDesign;
     alias: string;
     inputLabel?: string;
@@ -18,10 +18,10 @@ interface CheckboxGroup {
     hintText?: string;
     hintUrl?: string;
     inputoptions: InputOption[];
+    errorText?: ReactNode | string | null;
     direction?: 'row' | 'column';
     columns?: string;
     className?: string;
     style?: React.CSSProperties;
 }
 export declare const CheckboxGroup: ({ inputtype, alias, readOnly, width, placeholder, style, value, inputoptions, direction, columns, className, ...props }: CheckboxGroup) => React.JSX.Element;
-export {};

package/lib/types/components/conditional/conditional.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { InputOption } from "utils/vinci";
 import '../../styles/main.scss';
 export type ToggleTriggerDesign = 'conditionaltoggle' | 'conditionaltoggle-outline' | 'conditionaltoggle-material' | 'conditionaltoggle-neumorphic';
@@ -23,6 +23,7 @@ export interface ConditionalProps {
     toggledinputtype?: ToggleTriggerDesign | CheckboxTriggerDesign | SelectTriggerDesign;
     triggerValue?: any;
     inputoptions?: InputOption[];
+    errorText?: ReactNode | string | null;
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;

package/lib/types/components/datepicker/datepicker.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type DatePickerDesign = 'datepicker' | 'datepicker-material' | 'datepicker-outline' | 'datepicker-neumorphic';
-interface DatePickerProps {
+export interface DatePickerProps {
     inputtype?: DatePickerDesign;
     alias: string;
     inputLabel?: string;
@@ -17,8 +17,8 @@ interface DatePickerProps {
     hintUrl?: string;
     minvalue?: Date | string;
     maxvalue?: Date | string;
+    errorText?: ReactNode | string | null;
     className?: string;
     style?: React.CSSProperties;
 }
 export declare const DatePicker: ({ inputtype, alias, readOnly, width, placeholder, value, minvalue, maxvalue, className, style, ...props }: DatePickerProps) => React.JSX.Element;
-export {};

package/lib/types/components/daterangepicker/daterangepicker.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type DateRangePickerDesign = 'daterangepicker' | 'daterangepicker-material' | 'daterangepicker-outline' | 'daterangepicker-neumorphic';
-interface DateRangePickerProps {
+export interface DateRangePickerProps {
     inputtype?: DateRangePickerDesign;
     alias: string;
     inputLabel?: string;
@@ -17,8 +17,8 @@ interface DateRangePickerProps {
     hintUrl?: string;
     minvalue?: Date | string;
     maxvalue?: Date | string;
+    errorText?: ReactNode | string | null;
     className?: string;
     style?: React.CSSProperties;
 }
 export declare const DateRangePicker: ({ inputtype, alias, readOnly, width, placeholder, value, minvalue, maxvalue, className, style, ...props }: DateRangePickerProps) => React.JSX.Element;
-export {};

package/lib/types/components/datetimepicker/datetimepicker.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type DateTimePickerDesign = 'datetimepicker' | 'datetimepicker-material' | 'datetimepicker-outline' | 'datetimepicker-neumorphic';
-interface DateTimePickerProps {
+export interface DateTimePickerProps {
     inputtype?: DateTimePickerDesign;
     alias: string;
     inputLabel?: string;
@@ -17,8 +17,8 @@ interface DateTimePickerProps {
     hintUrl?: string;
     minvalue?: Date | string;
     maxvalue?: Date | string;
+    errorText?: ReactNode | string | null;
     className?: string;
     style?: React.CSSProperties;
 }
 export declare const DateTimePicker: ({ inputtype, alias, readOnly, width, placeholder, value, minvalue, maxvalue, className, style, ...props }: DateTimePickerProps) => React.JSX.Element;
-export {};

package/lib/types/components/dropdown/dropdown.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type DropDownDesign = 'dropdown' | 'dropdown-material' | 'dropdown-outline' | 'dropdown-neumorphic';
-interface DropDownProps {
+export interface DropDownProps {
     inputtype?: DropDownDesign;
     alias: string;
     inputLabel?: string;
@@ -16,6 +16,7 @@ interface DropDownProps {
     hintText?: string;
     hintUrl?: string;
     onValueChange?: (value: string) => void;
+    errorText?: ReactNode | string | null;
     inputoptions: {
         optionid: number | string;
         text: string;
@@ -29,4 +30,3 @@ interface DropDownProps {
     style?: React.CSSProperties;
 }
 export declare const Dropdown: ({ inputtype, alias, readOnly, width, placeholder, value, inputoptions, style, ...props }: DropDownProps) => React.JSX.Element;
-export {};

package/lib/types/components/file/file.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type FileInputDesign = 'fileinput' | 'fileinput-material' | 'fileinput-outline' | 'fileinput-neumorphic';
-interface FileInputProps {
+export interface FileInputProps {
     inputtype?: FileInputDesign;
     alias: string;
     inputLabel?: string;
     icon?: React.ReactNode;
     width: number;
-    defaultValue?: any[];
-    value: any[];
+    defaultValue?: any;
+    value?: any;
     newRow?: boolean;
     isEdit?: boolean;
     placeholder?: string;
@@ -18,7 +18,7 @@ interface FileInputProps {
     hintUrl?: string;
     preview?: boolean;
     className?: string;
+    errorText?: ReactNode | string | null;
     style?: React.CSSProperties;
 }
 export declare const File: ({ inputtype, alias, readOnly, width, placeholder, value, preview, className, style, ...props }: FileInputProps) => React.JSX.Element;
-export {};

package/lib/types/components/file/filemultiple.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type FileMultipleInputDesign = 'filemultiple' | 'filemultiple-material' | 'filemultiple-outline' | 'filemultiple-neumorphic';
 export interface FileMultipleInputProps {
@@ -7,8 +7,8 @@ export interface FileMultipleInputProps {
     inputLabel?: string;
     icon?: React.ReactNode;
     width: number;
-    defaultValue?: any[];
-    value: any[];
+    defaultValue?: any;
+    value?: any;
     newRow?: boolean;
     isEdit?: boolean;
     placeholder?: string;
@@ -17,6 +17,7 @@ export interface FileMultipleInputProps {
     hintText?: string;
     hintUrl?: string;
     preview?: boolean;
+    errorText?: ReactNode | string | null;
     className?: string;
     style?: React.CSSProperties;
 }

package/lib/types/components/icons/flagicon.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import * as Flags from "country-flag-icons/react/3x2";
 type CountryCode = keyof typeof Flags;
-interface FlagIconProps {
+export interface FlagIconProps {
     country: CountryCode | 'EU';
 }
 export declare const FlagIcon: ({ country }: FlagIconProps) => React.JSX.Element;

package/lib/types/components/input/input.d.ts

@@ -1,3 +1,27 @@
 import React, { ReactNode } from "react";
+import { TextField } from '@radix-ui/themes';
 import '../../styles/main.scss';
-export declare const Input: (alias: string, inputtype: "date" | "datetime-local" | "email" | "hidden" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week", onChange: React.ChangeEventHandler<HTMLInputElement, HTMLInputElement>, touched: object, errorText: ReactNode | string | null, inputLabel: string, width: number, defaultValue: string, value: string, newRow?: boolean, placeholder?: string, readOnly?: boolean, isHinted?: boolean, hintText?: string, hintUrl?: string) => React.JSX.Element;
+export type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export type InputDesign = "input" | "input-material" | "input-outline" | "input-neumorphic";
+export type xInputFieldProps = React.ComponentProps<typeof TextField.Root> & {
+    alias: string;
+    inputtype?: InputType;
+    inputLabel?: string;
+    width: number;
+    newRow?: boolean;
+    placeholder?: string;
+    readOnly?: boolean;
+    isHinted?: boolean;
+    hintText?: string;
+    hintUrl?: string;
+    icon?: React.ReactNode;
+    defaultValue?: string;
+    value: string;
+    errorText?: ReactNode | string | null;
+    className?: string;
+    style?: React.CSSProperties;
+    inputVariant?: InputDesign;
+    delimiter?: string;
+    format?: number[];
+};
+export declare const Input: ({ alias, inputtype, width, inputLabel, readOnly, placeholder, className, size, style, inputVariant, ...props }: xInputFieldProps) => React.JSX.Element;

package/lib/types/components/input/passwordInput.d.ts

@@ -1,3 +1,4 @@
-import React, { ReactNode } from "react";
+import React from "react";
+import { xInputFieldProps } from "./input";
 import '../../styles/main.scss';
-export declare const PasswordInput: (alias: string, onChange: React.ChangeEventHandler<HTMLInputElement, HTMLInputElement>, touched: object, errorText: ReactNode | string | null, inputLabel: string, width: number, defaultValue: string, value: string, newRow?: boolean, placeholder?: string, readOnly?: boolean, isHinted?: boolean, hintText?: string, hintUrl?: string) => React.JSX.Element;
+export declare const PasswordInput: ({ alias, inputLabel, width, readOnly, placeholder, inputVariant, size, className, ...props }: xInputFieldProps) => React.JSX.Element;

package/lib/types/components/input/phoneInput.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
+import { xInputFieldProps } from "./input";
 import '../../styles/main.scss';
-export declare const PhoneInput: (alias: string, inputLabel: string, width: number, newRow?: boolean, defaultValue?: string, value?: string, placeholder?: string, readOnly?: boolean, isHinted?: boolean, hintText?: string, hintUrl?: string) => React.JSX.Element;
+export declare const PhoneInput: ({ alias, inputLabel, width, placeholder, readOnly, inputVariant, size, className, ...props }: xInputFieldProps) => React.JSX.Element;

package/lib/types/components/input/uuidInput.d.ts

@@ -1,5 +1,23 @@
-import React from "react";
+import React, { ReactNode } from "react";
+import { TextField } from '@radix-ui/themes';
+import { InputDesign } from "./input";
 import '../../styles/main.scss';
 type startsWithUuid = `uuid${string}`;
-export declare const UUIDInput: (alias: string, type: startsWithUuid, inputLabel: string, width: number, defaultValue: string, delimiter?: string, format?: number[], newRow?: boolean, placeholder?: string, readOnly?: boolean, isHinted?: boolean, hintText?: string, hintUrl?: string) => React.JSX.Element;
+type UUIDInputProps = Omit<React.ComponentProps<typeof TextField.Root>, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
+    alias: string;
+    type: startsWithUuid;
+    inputLabel: string;
+    width: number;
+    newRow?: boolean;
+    delimiter?: string;
+    format?: number[];
+    isHinted?: boolean;
+    hintText?: string;
+    hintUrl?: string;
+    placeholder?: string;
+    errorText?: ReactNode | string | null;
+    className?: string;
+    inputVariant?: InputDesign;
+};
+export declare const UUIDInput: ({ alias, type, inputLabel, width, delimiter, format, placeholder, readOnly, inputVariant, size, className, ...props }: UUIDInputProps) => React.JSX.Element;
 export {};

package/lib/types/components/input/xCreditCardInput.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
+import { xInputFieldProps } from "./input";
 import '../../styles/main.scss';
-export declare const xCreditCardInput: (alias: string, inputLabel: string, width: number, defaultValue: string, newRow?: boolean, placeholder?: string, readOnly?: boolean, isHinted?: boolean, hintText?: string, hintUrl?: string) => React.JSX.Element;
+export declare const CreditCardInput: ({ alias, inputLabel, width, placeholder, readOnly, inputVariant, className, ...props }: xInputFieldProps) => React.JSX.Element;

package/lib/types/components/inputcurrency/inputcurrency.d.ts

@@ -1,4 +1,22 @@
 import React, { ReactNode } from "react";
 import { SupportedCurrency } from '../../utils/currencyconfig';
+import { InputDesign } from "components/input/input";
 import '../../styles/main.scss';
-export declare const CurrencyInput: (alias: string, inputtype: SupportedCurrency | "currency", onChange: React.ChangeEventHandler<HTMLInputElement, HTMLInputElement>, touched: object, errorText: ReactNode | string | null, inputLabel: string, width: number, defaultValue: string, value: string, newRow?: boolean, placeholder?: string, readOnly?: boolean, isHinted?: boolean, hintText?: string, hintUrl?: string) => React.JSX.Element;
+type CurrencyInputProps = {
+    alias: string;
+    inputtype?: SupportedCurrency | "currency";
+    inputLabel: string;
+    width: number;
+    newRow?: boolean;
+    defaultValue?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    isHinted?: boolean;
+    hintText?: string;
+    errorText?: ReactNode | string | null;
+    hintUrl?: string;
+    inputVariant?: InputDesign;
+    className?: string;
+};
+export declare const CurrencyInput: ({ alias, inputtype, inputLabel, width, defaultValue, placeholder, readOnly, inputVariant, className, ...props }: CurrencyInputProps) => React.JSX.Element;
+export {};

package/lib/types/components/inputcurrency/stockInput.d.ts

@@ -1,3 +1,20 @@
-import React from "react";
+import React, { ReactNode } from "react";
+import { InputDesign } from "components/input/input";
 import '../../styles/main.scss';
-export declare const StockInput: (alias: string, inputLabel: string, width: number, defaultValue: string, value: string, newRow?: boolean, placeholder?: string, readOnly?: boolean, isHinted?: boolean, hintText?: string, hintUrl?: string) => React.JSX.Element;
+type StockInputProps = {
+    alias: string;
+    inputLabel: string;
+    width: number;
+    defaultValue: string;
+    newRow?: boolean;
+    placeholder?: string;
+    readOnly?: boolean;
+    isHinted?: boolean;
+    hintText?: string;
+    hintUrl?: string;
+    errorText?: ReactNode | string | null;
+    inputVariant?: InputDesign;
+    className?: string;
+};
+export declare const StockInput: ({ alias, inputLabel, width, defaultValue, placeholder, readOnly, inputVariant, className, ...props }: StockInputProps) => React.JSX.Element;
+export {};

package/lib/types/components/radio/radio.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { InputOption } from 'utils/vinci';
 import '../../styles/main.scss';
 export type RadioDesign = 'radio' | 'radio-material' | 'radio-outline' | 'radio-neumorphic';
@@ -21,6 +21,7 @@ interface RadioGroupProps {
     direction?: 'row' | 'column';
     columns?: string;
     className?: string;
+    errorText?: ReactNode | string | null;
     style?: React.CSSProperties;
 }
 export declare const xRadioGroup: ({ inputtype, alias, readOnly, width, placeholder, style, value, inputoptions, direction, columns, className, ...props }: RadioGroupProps) => React.JSX.Element;

package/lib/types/components/select/select.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { InputOption } from "utils/vinci";
 import '../../styles/main.scss';
 export type OptionSelectDesign = 'select' | 'select-material' | 'select-outline' | 'select-neumorphic';
@@ -18,6 +18,7 @@ interface OptionSelectProps {
     hintUrl?: string;
     onValueChange?: (value: string) => void;
     inputoptions: InputOption[];
+    errorText?: ReactNode | string | null;
     className?: string;
     style?: React.CSSProperties;
 }

package/lib/types/components/selectmultiple/selectmultiple.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { InputOption } from "utils/vinci";
 import '../../styles/main.scss';
 export type MultipleSelectDesign = 'multiselect' | 'multiselect-material' | 'multiselect-outline' | 'multiselect-neumorphic';
@@ -18,6 +18,7 @@ interface MultipleSelectProps {
     hintText?: string;
     hintUrl?: string;
     inputoptions: InputOption[];
+    errorText?: ReactNode | string | null;
     className?: string;
     style?: React.CSSProperties;
 }

package/lib/types/components/slider/range.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type RangeDesign = 'range' | 'range-material' | 'range-outline' | 'range-neumorphic';
 interface RangeProps {
@@ -10,6 +10,7 @@ interface RangeProps {
     defaultValue?: string;
     value: string;
     newRow?: boolean;
+    errorText?: ReactNode | string | null;
     placeholder?: string;
     readOnly?: boolean;
     isHinted?: boolean;

package/lib/types/components/slider/slider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import '../../styles/main.scss';
 export type SliderDesign = 'slider' | 'slider-material' | 'slider-outline' | 'slider-neumorphic';
 interface SliderProps {
@@ -10,6 +10,7 @@ interface SliderProps {
     defaultValue?: string;
     value: string;
     newRow?: boolean;
+    errorText?: ReactNode | string | null;
     placeholder?: string;
     readOnly?: boolean;
     isHinted?: boolean;

package/lib/types/components/toggle/toggle.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ButtonProps } from '@radix-ui/themes';
+import '../../styles/main.scss';
 export type ToggleDesign = 'toggle' | 'toggle-material' | 'toggle-outline' | 'toggle-neumorphic';
 interface ToggleProps extends ButtonProps {
     inputtype?: ToggleDesign;

package/lib/types/components/xtitle/xtitle.d.ts

@@ -1,3 +1,15 @@
 import React from "react";
+import type { TextProps } from '@radix-ui/themes';
 import '../../styles/main.scss';
-export declare const xTitle: (alias: string, title: string, iconname: string, textColor: string | undefined, backgroundColor: string | undefined, fontFamily: string) => React.JSX.Element;
+type xTitleProps = TextProps & {
+    title: string;
+    iconname?: string;
+    width: number;
+    textColor?: string;
+    backgroundColor: string;
+    newRow?: boolean;
+    fontFamily?: string;
+    subTitle?: string;
+};
+export declare const xTitle: ({ title, iconname, textColor, backgroundColor, fontFamily, ...props }: xTitleProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emeraldemperaur/vector-sigma",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Dynamic Form Orchestrator: NPM Package",
   "repository": {
     "type": "git",
@@ -18,9 +18,7 @@
       "import": "./lib/index.esm.js",
       "require": "./lib/index.cjs",
       "types": "./lib/types/index.d.ts"
-    },
-    "./lib/styles.css": "./lib/styles.css",
-    "./styles.css": "./lib/styles.css"
+    }
   },
   "files": [
     "lib"

package/lib/styles.css

@@ -1 +0,0 @@
-@import "@radix-ui/themes/styles.css" layer(radix);@layer radix, custom;@layer custom{:root{--text-main-color:#333}.core-input-label{text-align:start}.core-input-label-error{color:#800020;font-family:Montserrat;font-size:.8rem;font-weight:500;letter-spacing:.13em;margin-bottom:13px}.core-input-section-ribbon{border-radius:0;margin-bottom:33px;margin-top:33px}.core-input-section-text{font-family:Montserrat!important;font-weight:400;letter-spacing:.33em;margin-left:13px;padding-bottom:3px;padding-top:3px;text-align:left}}