@stella-source/stellasource-dsl 0.0.30 → 0.1.1

package/dist/cjs/types/components/IconButton/IconButton.stories.d.ts

@@ -1,5 +1,5 @@
 import { IconButtonProps } from "./types";
-import { ButtonVariant } from "../Button/types";
+import { StellaButtonVariant } from "../StellaButton/types";
 declare const _default: {
     title: string;
     component: ({ iconName, onClick, disabled, variant, isLoading, ariaLabel, className, id, htmlProps, size, }: IconButtonProps) => import("react").JSX.Element;
@@ -7,7 +7,7 @@ declare const _default: {
     parameters: {};
     argTypes: {
         variant: {
-            options: ButtonVariant[];
+            options: StellaButtonVariant[];
             control: {
                 type: string;
             };

package/dist/cjs/types/components/IconButton/styles.d.ts

@@ -1,3 +1,3 @@
-import { ButtonComponentStyles } from "../Button/styles";
+import { ButtonComponentStyles } from "../StellaButton/styles";
 declare const IconButtonComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, keyof ButtonComponentStyles> & ButtonComponentStyles, ButtonComponentStyles>> & string;
 export { IconButtonComponent };

package/dist/cjs/types/components/IconButton/types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import { ButtonVariant } from "../Button/types";
+import { StellaButtonVariant } from "../StellaButton/types";
 import { StellaIconDefinition } from "../StellaIcon/types";
 export interface IconButtonProps {
     iconName: `${StellaIconDefinition}`;
@@ -10,6 +10,6 @@ export interface IconButtonProps {
     className?: string;
     isLoading?: boolean;
     disabled?: boolean;
-    variant?: `${ButtonVariant}`;
+    variant?: `${StellaButtonVariant}`;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
 }

package/dist/cjs/types/components/StellaButton/StellaButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StellaButtonProps } from "./types";
+declare const StellaButton: ({ disabled, variant, label, startIcon, endIcon, isLoading, className, id, htmlProps, onClick, }: StellaButtonProps) => React.JSX.Element;
+export default StellaButton;

package/dist/{esm/types/components/Button/Button.stories.d.ts → cjs/types/components/StellaButton/StellaButton.stories.d.ts}

@@ -1,31 +1,31 @@
-import { ButtonVariant } from "./types";
-import { ButtonIcons, ButtonProps } from "./types";
+import { StellaButtonVariant } from "./types";
+import { StellaButtonIcons, StellaButtonProps } from "./types";
 declare const _default: {
     title: string;
-    component: ({ disabled, variant, label, startIcon, endIcon, isLoading, className, id, htmlProps, onClick, }: ButtonProps) => import("react").JSX.Element;
+    component: ({ disabled, variant, label, startIcon, endIcon, isLoading, className, id, htmlProps, onClick, }: StellaButtonProps) => import("react").JSX.Element;
     tags: string[];
     parameters: {};
     argTypes: {
         variant: {
-            options: ButtonVariant[];
+            options: StellaButtonVariant[];
             control: {
                 type: string;
             };
         };
         startIcon: {
-            options: (ButtonIcons | undefined)[];
+            options: (StellaButtonIcons | undefined)[];
             control: {
                 type: string;
             };
         };
         endIcon: {
-            options: (ButtonIcons | undefined)[];
+            options: (StellaButtonIcons | undefined)[];
             control: {
                 type: string;
             };
         };
     };
-    args: ButtonProps;
+    args: StellaButtonProps;
 };
 export default _default;
 export declare const Button: {};

package/dist/{esm/types/components/Button → cjs/types/components/StellaButton}/styles.d.ts

@@ -1,7 +1,7 @@
-import { ButtonVariant } from "./types";
+import { StellaButtonVariant } from "./types";
 export interface ButtonComponentStyles {
-    $variant: `${ButtonVariant}`;
-    $isLoading: boolean;
+    $variant: `${StellaButtonVariant}`;
+    $isLoading?: boolean;
 }
 declare const ButtonComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, ButtonComponentStyles>> & string;
 export { ButtonComponent };

package/dist/{esm/types/components/Button → cjs/types/components/StellaButton}/types.d.ts

@@ -1,22 +1,22 @@
 import { HTMLAttributes } from "react";
-export declare enum ButtonIcons {
+export declare enum StellaButtonIcons {
     ADD = "add",
     CHEVRON_DOWN = "chevron-down"
 }
-export declare enum ButtonVariant {
+export declare enum StellaButtonVariant {
     PRIMARY = "primary",
     SECONDARY = "secondary",
     TERTIARY = "tertiary"
 }
-export interface ButtonProps {
+export interface StellaButtonProps {
     label: string;
     onClick: () => void;
     id?: string;
     className?: string;
     isLoading?: boolean;
-    startIcon?: `${ButtonIcons}`;
-    endIcon?: `${ButtonIcons}`;
+    startIcon?: `${StellaButtonIcons}`;
+    endIcon?: `${StellaButtonIcons}`;
     disabled?: boolean;
-    variant?: `${ButtonVariant}`;
+    variant?: `${StellaButtonVariant}`;
     htmlProps?: HTMLAttributes<HTMLButtonElement>;
 }

package/dist/cjs/types/components/StellaIcon/types.d.ts

@@ -1,4 +1,4 @@
-export type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette";
+export type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette" | "eye" | "eye-slash";
 export interface StellaIconProps {
     iconName: StellaIconDefinition;
     size?: number;

package/dist/cjs/types/components/TextField/NumberInput/NumberInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { NumberInputProps } from "./types";
+declare const NumberInput: ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, isTruncated, helperTextAffectLayout, hideLabel, disabled, isLoading, hasError, thousandSeparator, decimalPlaces, ariaDescribedBy, }: NumberInputProps) => React.JSX.Element;
+export default NumberInput;

package/dist/cjs/types/components/TextField/NumberInput/NumberInput.stories.d.ts

@@ -0,0 +1,6 @@
+import NumberInputComponent from "./NumberInput";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta<typeof NumberInputComponent>;
+export default meta;
+type Story = StoryObj<typeof NumberInputComponent>;
+export declare const NumberInput: Story;

package/dist/cjs/types/components/TextField/NumberInput/types.d.ts

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from "react";
+import { StellaIconDefinition } from "../../StellaIcon/types";
+import { TextFieldAlignments, TextFieldLeftCategory, TextFieldRightCategory } from "../types";
+export interface NumberInputProps {
+    id: string;
+    label: string;
+    onChange: (val: string) => void;
+    onBlur?: (val: string) => void;
+    onFocus?: (val: string) => void;
+    hideLabel?: boolean;
+    value?: number | string;
+    className?: string;
+    placeholder?: string;
+    isRequired?: boolean;
+    /** passing in disabled + value creates a readOnly look */
+    disabled?: boolean;
+    maxLength?: number;
+    tooltipText?: string;
+    isLoading?: boolean;
+    helperText?: string;
+    helperTextAffectLayout?: boolean;
+    isTruncated?: boolean;
+    endIcon?: `${StellaIconDefinition}`;
+    hasError?: boolean;
+    textAlign?: `${TextFieldAlignments}`;
+    leftCategory?: `${TextFieldLeftCategory}`;
+    rightCategory?: `${TextFieldRightCategory}`;
+    thousandSeparator?: boolean;
+    decimalPlaces?: number;
+    /** for any extra text elements that need to be associated */
+    ariaDescribedBy?: string;
+    htmlProps?: HTMLAttributes<HTMLInputElement>;
+}

package/dist/cjs/types/components/TextField/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PasswordInputProps } from "./types";
+declare const PasswordInput: ({ id, className, htmlProps, label, placeholder, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign, isHidden, helperTextAffectLayout, hideLabel, disabled, hasError, ariaDescribedBy, }: PasswordInputProps) => React.JSX.Element;
+export default PasswordInput;

package/dist/cjs/types/components/TextField/PasswordInput/PasswordInput.stories.d.ts

@@ -0,0 +1,6 @@
+import PasswordInputComponent from "./PasswordInput";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta<typeof PasswordInputComponent>;
+export default meta;
+type Story = StoryObj<typeof PasswordInputComponent>;
+export declare const PasswordInput: Story;

package/dist/cjs/types/components/TextField/PasswordInput/styles.d.ts

@@ -0,0 +1,2 @@
+declare const CustomIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../../IconButton/types").IconButtonProps, never>> & string & Omit<({ iconName, onClick, disabled, variant, isLoading, ariaLabel, className, id, htmlProps, size, }: import("../../IconButton/types").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export { CustomIconButton };

package/dist/cjs/types/components/TextField/PasswordInput/types.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from "react";
+import { TextFieldAlignments } from "../types";
+export interface PasswordInputProps {
+    id: string;
+    label: string;
+    onChange: (val: string) => void;
+    onBlur?: (val: string) => void;
+    onFocus?: (val: string) => void;
+    hideLabel?: boolean;
+    value?: number | string;
+    className?: string;
+    placeholder?: string;
+    isRequired?: boolean;
+    /** passing in disabled + value creates a readOnly look */
+    disabled?: boolean;
+    maxLength?: number;
+    tooltipText?: string;
+    helperText?: string;
+    isHidden?: boolean;
+    helperTextAffectLayout?: boolean;
+    hasError?: boolean;
+    textAlign?: `${TextFieldAlignments}`;
+    /** for any extra text elements that need to be associated */
+    ariaDescribedBy?: string;
+    htmlProps?: HTMLAttributes<HTMLInputElement>;
+}

package/dist/cjs/types/components/TextField/TextFieldContainer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TextFieldContainerProps } from "./types";
+declare const TextFieldContainer: ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout, disabled, hideLabel, isLoading, hasError, isRequired, }: TextFieldContainerProps) => React.JSX.Element;
+export default TextFieldContainer;

package/dist/cjs/types/components/TextField/TextInput/TextInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TextInputProps } from "./types";
+declare const TextInput: ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder, textAlign, helperTextAffectLayout, hideLabel, disabled, hasError, isLoading, ariaDescribedBy, }: TextInputProps) => React.JSX.Element;
+export default TextInput;

package/dist/cjs/types/components/TextField/TextInput/TextInput.stories.d.ts

@@ -0,0 +1,6 @@
+import TextInputComponent from "./TextInput";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta<typeof TextInputComponent>;
+export default meta;
+type Story = StoryObj<typeof TextInputComponent>;
+export declare const TextInput: Story;

package/dist/cjs/types/components/TextField/TextInput/types.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from "react";
+import { TextFieldAlignments } from "../types";
+import { StellaIconDefinition } from "../../StellaIcon/types";
+export interface TextInputProps {
+    id: string;
+    label: string;
+    onChange: (val: string) => void;
+    onBlur?: (val: string) => void;
+    onFocus?: (val: string) => void;
+    hideLabel?: boolean;
+    isLoading?: boolean;
+    value?: number | string;
+    className?: string;
+    placeholder?: string;
+    isRequired?: boolean;
+    endIcon?: `${StellaIconDefinition}`;
+    /** passing in disabled + value creates a readOnly look */
+    disabled?: boolean;
+    maxLength?: number;
+    tooltipText?: string;
+    helperText?: string;
+    helperTextAffectLayout?: boolean;
+    hasError?: boolean;
+    textAlign?: `${TextFieldAlignments}`;
+    /** for any extra text elements that need to be associated */
+    ariaDescribedBy?: string;
+    htmlProps?: HTMLAttributes<HTMLInputElement>;
+}

package/dist/cjs/types/components/TextField/styles.d.ts

@@ -1,11 +1,17 @@
 interface TextFieldInputProps {
     $textAlign?: "left" | "center" | "right";
-    $isTruncated: boolean;
+    $isTruncated?: boolean;
+    $isDisabled?: boolean;
+    $isLoading?: boolean;
+}
+interface TextFieldWrapperProps {
+    $isDisabled?: boolean;
+    $hasError?: boolean;
+    $isLoading?: boolean;
 }
 declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const TextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const TextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, TextFieldWrapperProps>> & string;
 declare const TextFieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TextFieldInputProps>> & string;
 declare const Category: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-declare const CustomLoader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Loader/types").LoaderProps, never>> & string & Omit<({ size, dataTestId, color, className, id, }: import("../Loader/types").LoaderProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-declare const EndIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../StellaIcon/types").StellaIconProps, never>> & string & Omit<({ iconName, size, color, className, id, dataTestId, }: import("../StellaIcon/types").StellaIconProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export { Wrapper, TextFieldWrapper, TextFieldInput, Category, CustomLoader, EndIcon, };
+declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { Wrapper, TextFieldWrapper, TextFieldInput, Category, IconContainer };

package/dist/cjs/types/components/TextField/types.d.ts

@@ -1,4 +1,3 @@
-import { HTMLAttributes } from "react";
 import { StellaIconDefinition } from "../StellaIcon/types";
 export declare enum TextFieldAlignments {
     LEFT = "left",
@@ -20,69 +19,21 @@ export declare enum TextFieldRightCategory {
     MINUTES = "min",
     HOURS = "hr"
 }
-export declare enum TextFieldType {
-    TEXT = "text",
-    NUMBER = "number",
-    PASSWORD = "password"
-}
-export declare enum TextFieldPasswordStrength {
-    WEAK = "weak",
-    MEDIUM = "medium",
-    STRONG = "strong"
-}
-interface TextFieldPasswordProps {
-    type: `${TextFieldType.PASSWORD}`;
-    endIcon?: never;
-    leftCategory?: never;
-    rightCategory?: never;
-    isTruncated?: never;
-    textAlign?: never;
-}
-interface TextFieldNumberProps {
-    type: `${TextFieldType.NUMBER}`;
-    leftCategory?: `${TextFieldLeftCategory}`;
-    rightCategory?: `${TextFieldRightCategory}`;
-    isTruncated?: boolean;
-    textAlign?: `${TextFieldAlignments}`;
-    maxLength?: never;
-    maxValue?: number;
-    minValue?: number;
-    thousandSeparator?: boolean;
-    decimalPlaces?: number;
-}
-interface TextFieldTextProps {
-    type: `${TextFieldType.TEXT}`;
-    endIcon?: `${StellaIconDefinition}`;
-    leftCategory?: `${TextFieldLeftCategory}`;
-    rightCategory?: `${TextFieldRightCategory}`;
-    isTruncated?: boolean;
-    textAlign?: `${TextFieldAlignments}`;
-    maxLength?: number;
-}
-export interface TextFieldBaseProps {
+export interface TextFieldContainerProps {
+    children: React.ReactNode;
     id: string;
-    className?: string;
     label: string;
-    placeholder?: string;
-    type?: `${TextFieldType}`;
-    onChange: () => void;
-    onBlur: () => void;
-    isRequired: boolean;
-    disabled: boolean;
-    maxLength: number;
-    tooltipText: string;
-    isLoading: boolean;
+    hideLabel?: boolean;
+    disabled?: boolean;
+    dataTestId?: string;
+    rightCategory?: `${TextFieldRightCategory}`;
+    leftCategory?: `${TextFieldLeftCategory}`;
+    tooltipText?: string;
+    isRequired?: boolean;
     helperText?: string;
     helperTextAffectLayout?: boolean;
-    isTruncated: boolean;
-    endIcon: `${StellaIconDefinition}`;
-    hasError: boolean;
-    textAlign?: `${TextFieldAlignments}`;
-    leftCategory?: `${TextFieldLeftCategory}`;
-    rightCategory?: `${TextFieldRightCategory}`;
-    ariaDescribedBy?: string;
-    readOnly?: boolean;
-    htmlProps?: HTMLAttributes<HTMLInputElement>;
+    isLoading?: boolean;
+    endIcon?: `${StellaIconDefinition}`;
+    hasError?: boolean;
+    className?: string;
 }
-export type TextFieldProps = TextFieldBaseProps & (TextFieldPasswordProps | TextFieldNumberProps | TextFieldTextProps);
-export {};

package/dist/cjs/types/components/Tooltip/Tooltip.stories.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { TooltipIconType, StellaTooltipProps } from "./types";
+import { TooltipIconType, TooltipProps } from "./types";
 declare const _default: {
     title: string;
-    component: ({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: import("./types").TooltipProps) => React.JSX.Element;
+    component: ({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: TooltipProps) => React.JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -15,7 +15,7 @@ declare const _default: {
             };
         };
     };
-    args: StellaTooltipProps;
+    args: TooltipProps;
 };
 export default _default;
 export declare const Tooltip: {

package/dist/cjs/types/index.d.ts

@@ -1,15 +1,18 @@
 /** Components */
 import Label from "./components/Label/Label";
-import Button from "./components/Button/Button";
+import StellaButton from "./components/StellaButton/StellaButton";
 import Loader from "./components/Loader/Loader";
 import HelperText from "./components/HelperText/HelperText";
 import Tooltip from "./components/Tooltip/Tooltip";
 import StellaIcon from "./components/StellaIcon/StellaIcon";
 import IconButton from "./components/IconButton/IconButton";
+import TextInput from "./components/TextField/TextInput/TextInput";
+import PasswordInput from "./components/TextField/PasswordInput/PasswordInput";
+import NumberInput from "./components/TextField/NumberInput/NumberInput";
 /** Types */
-import { ButtonVariant } from "./components/Button/types";
+import { StellaButtonVariant } from "./components/StellaButton/types";
 /** Tokens */
 import { Styles } from "./shared/tokens";
 import "./shared/tokens/tokens.css";
 export type { StellaIconDefinition } from "./components/StellaIcon/types";
-export { Label, Button, IconButton, Loader, HelperText, Tooltip, StellaIcon, ButtonVariant, Styles, };
+export { Label, StellaButton, IconButton, Loader, HelperText, Tooltip, StellaIcon, TextInput, PasswordInput, NumberInput, StellaButtonVariant, Styles, };

package/dist/cjs/types/shared/utils/numberHelpers.d.ts

@@ -0,0 +1 @@
+export declare const formatDynamicNumbersWithCommas: (num: number | string, decimalPlaces: number) => string;

package/dist/cjs/types/shared/utils/testing.d.ts

@@ -1,6 +1,7 @@
+import React from "react";
 import { queries } from "@testing-library/react";
 import { Options } from "@testing-library/user-event";
-declare const setup: (jsx: JSX.Element, setupOptions?: Options) => {
+declare const setup: (jsx: React.JSX.Element, setupOptions?: Options) => {
     container: HTMLElement;
     baseElement: HTMLElement;
     debug: (baseElement?: ReactDOMClient.Container | any | Array<ReactDOMClient.Container | any> | undefined, maxLength?: number | undefined, options?: import("pretty-format").OptionsReceived | undefined) => void;