@devopness/ui-react 2.150.1 → 2.151.0

package/dist/src/components/Forms/Input/Input.d.ts

@@ -0,0 +1,107 @@
+import { default as React } from 'react';
+import { ErrorMessageProps } from '../../Primitives/ErrorMessage';
+import { LabelProps } from '../../Primitives/Label';
+type SharedProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    /** React ref for direct DOM manipulation */
+    ref?: React.Ref<HTMLInputElement>;
+    /** Error message configuration */
+    error?: ErrorMessageProps['error'];
+    /** Props passed directly to Label component */
+    labelProps?: LabelProps;
+    /** Custom styling options for input text */
+    publicStyle?: {
+        /** Font style applied to input value */
+        fontStyleValue?: string;
+        /** Font style applied to placeholder */
+        fontStylePlaceholder?: string;
+    };
+    /**
+     * Props passed directly to input HTML element
+     *
+     * @override props, e.g: inputProps.type overrides props.type
+     *
+     * <Input type="text" inputProps={{type: 'number'}} /> // input type is number
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+};
+type InputProps = (SharedProps & {
+    /** HTML input type (text, number, email, etc) */
+    type: Exclude<React.HTMLInputTypeAttribute, 'number'>;
+}) | (SharedProps & {
+    /** HTML input type (text, number, email, etc) */
+    type: 'number';
+    /** Removes increment/decrement arrows from number inputs */
+    removeArrows?: boolean;
+});
+/**
+ * Allows users to enter and edit text
+ *
+ * @example
+ * ```
+ * <Input
+ *   type="text"
+ *   label={{ value: "Username" }}
+ *   placeholder="Enter username"
+ *   error={{ message: "This field is required" }}
+ *   publicStyle={{
+ *     fontStyleValue: "bold",
+ *     fontStylePlaceholder: "italic"
+ *   }}
+ * />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<(Omit<React.InputHTMLAttributes<HTMLInputElement> & {
+    /** React ref for direct DOM manipulation */
+    ref?: React.Ref<HTMLInputElement>;
+    /** Error message configuration */
+    error?: ErrorMessageProps["error"];
+    /** Props passed directly to Label component */
+    labelProps?: LabelProps;
+    /** Custom styling options for input text */
+    publicStyle?: {
+        /** Font style applied to input value */
+        fontStyleValue?: string;
+        /** Font style applied to placeholder */
+        fontStylePlaceholder?: string;
+    };
+    /**
+     * Props passed directly to input HTML element
+     *
+     * @override props, e.g: inputProps.type overrides props.type
+     *
+     * <Input type="text" inputProps={{type: 'number'}} /> // input type is number
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+} & {
+    /** HTML input type (text, number, email, etc) */
+    type: Exclude<React.HTMLInputTypeAttribute, "number">;
+}, "ref"> | Omit<React.InputHTMLAttributes<HTMLInputElement> & {
+    /** React ref for direct DOM manipulation */
+    ref?: React.Ref<HTMLInputElement>;
+    /** Error message configuration */
+    error?: ErrorMessageProps["error"];
+    /** Props passed directly to Label component */
+    labelProps?: LabelProps;
+    /** Custom styling options for input text */
+    publicStyle?: {
+        /** Font style applied to input value */
+        fontStyleValue?: string;
+        /** Font style applied to placeholder */
+        fontStylePlaceholder?: string;
+    };
+    /**
+     * Props passed directly to input HTML element
+     *
+     * @override props, e.g: inputProps.type overrides props.type
+     *
+     * <Input type="text" inputProps={{type: 'number'}} /> // input type is number
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+} & {
+    /** HTML input type (text, number, email, etc) */
+    type: "number";
+    /** Removes increment/decrement arrows from number inputs */
+    removeArrows?: boolean;
+}, "ref">) & React.RefAttributes<HTMLInputElement>>;
+export type { InputProps };
+export { Input };

package/dist/src/components/Forms/Input/Input.styled.d.ts

@@ -0,0 +1,14 @@
+type PropsStyled = {
+    disabled?: boolean;
+    hasError?: boolean;
+    type: string;
+    removeArrows?: boolean;
+    publicStyle?: {
+        fontStyleValue?: string;
+        fontStylePlaceholder?: string;
+    };
+    readOnly?: boolean;
+};
+declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const InputText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, PropsStyled>> & string;
+export { Container, InputText };

package/dist/src/components/Forms/Input/index.d.ts

@@ -0,0 +1 @@
+export * from './Input';

package/dist/src/components/Forms/index.d.ts

@@ -1 +1,2 @@
 export * from './Alert';
+export * from './Input';

package/dist/src/components/Primitives/Label/Label.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+type LabelProps = {
+    /** Main label text/node */
+    value: React.ReactNode;
+    /** Help text shown in tooltip */
+    helpValue?: string;
+    /**
+     * Indicates that the field is optional
+     * @default false
+     */
+    isOptional?: boolean;
+};
+/**
+ * A caption for an item in the UI, usually associated with a form control
+ *
+ * @example
+ * ```jsx
+ * // Basic label
+ * <Label value="Username" />
+ *
+ * // Label with help text and optional marker
+ * <Label
+ *   value="Description"
+ *   helpValue="A description of the item"
+ *   isOptional
+ * />
+ * ```
+ */
+declare const Label: ({ value, helpValue, isOptional }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export type { LabelProps };
+export { Label };

package/dist/src/components/Primitives/Label/Label.styled.d.ts

@@ -0,0 +1,4 @@
+declare const LabelElement: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+declare const ContentFlex: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const QuestionIcon: import('styled-components/dist/types').IStyledComponentBase<"web", any> & (string | (string & Omit<IconType, keyof import('react').Component<any, {}, any>>));
+export { LabelElement, ContentFlex, QuestionIcon };

package/dist/src/components/Primitives/Label/index.d.ts

@@ -0,0 +1 @@
+export * from './Label';

package/dist/src/components/Primitives/index.d.ts

@@ -5,3 +5,4 @@ export * from './Link';
 export * from './Tooltip';
 export * from './ErrorMessage';
 export * from './Pagination';
+export * from './Label';

package/dist/src/components/styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Removes browser default focus outlines to ensure clean base styling, allowing
+ * Devopness design system styles to be applied without conflicts.
+ *
+ * @example
+ * import { removeBlueMark } from './styles'
+ * import { styled } from 'styled-components'
+ * const Container = styled.div`
+ *   ${removeBlueMark}
+ * `
+ */
+declare const removeBlueMark: import('styled-components').RuleSet<object>;
+export { removeBlueMark };