@grasp-labs/ds-react-components 0.27.0 → 1.0.0

package/dist/components/baseButton/BaseButton.d.ts

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
-export type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: "contained" | "outlined" | "text";
-    color?: "primary" | "secondary" | "danger";
+import { Variant } from './BaseButton.styles';
+export type BaseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "prefix" | "suffix"> & {
+    variant?: Variant;
 };
 /**
  * A foundational button component with configurable variants and color schemes.
@@ -10,4 +10,4 @@ export type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
  * @param props - The props for the BaseButton component.
  * @returns The rendered button element.
  */
-export declare const BaseButton: ({ variant, color, className, children, ...props }: BaseButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseButton: ({ variant, className, children, ...props }: BaseButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/baseButton/BaseButton.styles.d.ts

@@ -1,20 +1,5 @@
-export type Variant = "contained" | "outlined" | "text";
-export type Color = "primary" | "secondary" | "danger";
-export declare const colorVariantClasses: {
-    readonly contained: {
-        readonly primary: "border-2 border-primary bg-primary text-contrast disabled:hover:bg-primary disabled:hover:text-contrast hover:bg-contrast hover:text-text ";
-        readonly secondary: "border-2 border-secondary bg-secondary text-text disabled:hover:bg-secondary disabled:hover:text-text hover:bg-contrast hover:text-text";
-        readonly danger: "border-2 border-error bg-error text-contrast disabled:hover:bg-error disabled:hover:text-contrast hover:bg-contrast hover:text-error";
-    };
-    readonly outlined: {
-        readonly primary: "border-2 border-primary bg-contrast text-text disabled:hover:bg-contrast disabled:hover:text-text hover:bg-primary hover:text-contrast";
-        readonly secondary: "border-2 border-secondary bg-contrast text-text disabled:hover:bg-contrast disabled:hover:text-text hover:bg-secondary hover:text-text";
-        readonly danger: "border-2 border-error bg-contrast text-error disabled:hover:bg-contrast disabled:hover:text-error hover:bg-error hover:text-contrast";
-    };
-    readonly text: {
-        readonly primary: "text-primary hover:text-primary-light";
-        readonly secondary: "text-text";
-        readonly danger: "text-error";
-    };
-};
-export declare function getBaseButtonClassName(variant: Variant, color: Color, className?: string): string;
+export type Variant = "primary" | "secondary" | "text" | "danger";
+export declare const baseClasses: "\n  inline-flex cursor-pointer items-center justify-center select-none transition-colors leading-none\n  focus-visible:outline-primary focus-visible:outline-1 focus-visible:outline-offset-1\n";
+export declare const variantClasses: Record<Variant, string>;
+export declare const disabledClasses: "\n  disabled:cursor-not-allowed disabled:opacity-50\n";
+export declare const getBaseButtonClassName: (variant: Variant, className?: string) => string;

package/dist/components/baseTextBox/BaseTextBox.d.ts

@@ -1,10 +1,10 @@
 import { InputHTMLAttributes, JSX, ReactNode } from 'react';
 export type AcceptOnlyPattern = "number" | "integer" | "alphanumeric" | "alpha" | "decimal";
-export type BaseTextBoxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children"> & {
+export type BaseTextBoxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "prefix" | "suffix"> & {
     /** Optional prefix element (e.g. icon, button) */
-    prefixContent?: ReactNode;
+    prefix?: ReactNode;
     /** Optional suffix element (e.g. icon, button) */
-    suffixContent?: ReactNode;
+    suffix?: ReactNode;
     /** Whether the textbox is in an error state */
     error?: boolean;
     /** Whether the textbox is disabled */
@@ -37,4 +37,4 @@ export type BaseTextBoxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "chil
  * @param ref - Ref forwarded to the native input element.
  * @returns {JSX.Element} The rendered BaseTextBox component.
  */
-export declare const BaseTextBox: ({ className, prefixContent, suffixContent, error, onChange, disabled, ref, id, name, rootClassName, type, acceptOnly, ...rest }: BaseTextBoxProps) => JSX.Element;
+export declare const BaseTextBox: ({ className, prefix, suffix, error, onChange, disabled, ref, id, name, rootClassName, type, acceptOnly, ...rest }: BaseTextBoxProps) => JSX.Element;

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

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { BaseButtonProps } from '../baseButton';
+export type ButtonSize = "small" | "medium";
 export type ButtonProps = BaseButtonProps & {
-    size?: "small" | "medium" | "large";
-    prefixContent?: ReactNode;
-    suffixContent?: ReactNode;
+    size?: ButtonSize;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
 };
 /**
  * A button component with size variants and optional prefix/suffix content.
@@ -12,4 +13,4 @@ export type ButtonProps = BaseButtonProps & {
  * @param props - The props for the Button component.
  * @returns The rendered button with optional prefix/suffix content.
  */
-export declare const Button: ({ size, className, children, prefixContent, suffixContent, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ size, className, children, prefix, suffix, variant, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/button/Button.styles.d.ts

@@ -1,10 +1,3 @@
-export declare const buttonSizeClasses: {
-    readonly small: "rounded-lg px-3 py-1 text-xs gap-1";
-    readonly medium: "rounded-xl px-5 py-2 text-xs gap-2";
-    readonly large: "rounded-xl px-7 py-3 text-sm gap-2";
-};
-export declare const buttonContentClasses: {
-    readonly small: "h-4";
-    readonly medium: "h-5";
-    readonly large: "h-5";
-};
+import { ButtonSize } from './Button';
+export declare const buttonBaseClasses: "[&>svg]:size-4";
+export declare const buttonSizeClasses: Record<ButtonSize, string>;

package/dist/components/datePicker/DatePickerTextBox.d.ts

@@ -1,6 +1,6 @@
-export declare const DatePickerTextBox: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "children"> & {
-    prefixContent?: import('react').ReactNode;
-    suffixContent?: import('react').ReactNode;
+export declare const DatePickerTextBox: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix" | "children"> & {
+    prefix?: import('react').ReactNode;
+    suffix?: import('react').ReactNode;
     error?: boolean;
     disabled?: boolean;
     id?: string;

package/dist/components/dialog/ConfirmationDialog.d.ts

@@ -13,9 +13,9 @@ export type ConfirmationDialogProps = Omit<DialogProps, "footerActions"> & {
     confirmLabel?: string;
     /** Label for the cancel button @default "Cancel" */
     cancelLabel?: string;
-    /** Props for the confirm button @default { variant: "contained", color: "primary" } */
+    /** Props for the confirm button @default { } */
     confirmButtonProps?: Omit<ButtonProps, "onClick" | "children">;
-    /** Props for the cancel button @default { variant: "outlined", color: "secondary" } */
+    /** Props for the cancel button @default { variant: "secondary" } */
     cancelButtonProps?: Omit<ButtonProps, "onClick" | "children">;
 };
 /**

package/dist/components/dynamicIcon/DynamicIcon.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IconName } from '../../icons/icons';
+import { IconName } from '../../icons/iconsLazy';
 import { IconProps } from '../../types/IconComponent';
 export type DynamicIconProps = IconProps & {
     name: IconName;

package/dist/components/iconButton/IconButton.d.ts

@@ -1,7 +1,7 @@
 import { ComponentType, SVGProps } from 'react';
 import { BaseButtonProps } from '../baseButton';
 export type IconButtonProps = Omit<BaseButtonProps, "children"> & {
-    size?: "small" | "medium" | "large";
+    size?: "small" | "medium";
     icon: ComponentType<SVGProps<SVGSVGElement>>;
     "aria-label"?: string;
 };

package/dist/components/iconButton/IconButton.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const baseClass: "[&>svg]:size-4 rounded-lg";
+export declare const iconClass: {
+    readonly small: "size-8";
+    readonly medium: "size-10";
+};

package/dist/components/link/Link.d.ts

@@ -2,7 +2,7 @@ import { ElementType } from 'react';
 import { Variant } from '../baseButton';
 import { Button } from '../button';
 import * as React from "react";
-type BaseButtonProps = Pick<React.ComponentProps<typeof Button>, "color" | "size" | "className" | "children" | "prefixContent" | "suffixContent">;
+type BaseButtonProps = Pick<React.ComponentProps<typeof Button>, "size" | "className" | "children" | "prefix" | "suffix">;
 type VisualConfigProps = BaseButtonProps & {
     variant?: Variant | "generic";
 };
@@ -17,5 +17,5 @@ export type LinkProps<Component extends ElementType = "a"> = VisualConfigProps &
  * @param props - The props for the Link component.
  * @returns The rendered link element.
  */
-export declare function Link<ComponentType extends ElementType = "a">({ as, variant, color, size, className, prefixContent, suffixContent, children, ...props }: LinkProps<ComponentType>): import("react/jsx-runtime").JSX.Element;
+export declare function Link<ComponentType extends ElementType = "a">({ as, variant, size, className, prefix, suffix, children, ...props }: LinkProps<ComponentType>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/multiSelect/MultiSelect.d.ts

@@ -3,8 +3,8 @@ import { BaseOption } from '../../types/BaseOption';
 export type MultiSelectProps<Option extends BaseOption> = {
     value: Option[];
     setValue: (value: Option[] | ((prevState: Option[]) => Option[])) => void;
-    prefixContent?: ReactElement;
-    suffixContent?: ReactElement;
+    prefix?: ReactElement;
+    suffix?: ReactElement;
     options: Option[];
     id?: string;
     error?: boolean;
@@ -25,4 +25,4 @@ export type MultiSelectProps<Option extends BaseOption> = {
  * @param props - The props for the MultiSelect component.
  * @returns The rendered multi-select dropdown with tag list.
  */
-export declare const MultiSelect: <Option extends BaseOption>({ value, setValue, options, id, error, prefixContent, suffixContent, disabled, emptyPlaceholder, addMorePlaceholder, toggleAriaLabel, noOptionsText, ref, maxHeight, listClassName, }: MultiSelectProps<Option>) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: <Option extends BaseOption>({ value, setValue, options, id, error, prefix, suffix, disabled, emptyPlaceholder, addMorePlaceholder, toggleAriaLabel, noOptionsText, ref, maxHeight, listClassName, }: MultiSelectProps<Option>) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,8 +4,8 @@ import { NoneOf } from '../../types/NoneOf';
 export type BaseSelectProps<Option> = {
     value: Option | null;
     setValue: (value: Option | null) => void;
-    prefixContent?: ReactElement;
-    suffixContent?: ReactElement;
+    prefix?: ReactElement;
+    suffix?: ReactElement;
     options: Option[];
     id?: string;
     error?: boolean;
@@ -37,4 +37,4 @@ export type SelectProps<Option extends BaseOption> = (BaseSelectProps<Option> &
  * @param props - The props for the Select component.
  * @returns The rendered select dropdown component.
  */
-export declare const Select: <Option extends BaseOption>({ value, setValue, options, id, prefixContent, suffixContent, error, disabled, placeholder, toggleAriaLabel, noOptionsText, ref, disableSearch, className, containerClassName, listClassName, maxHeight, onSearch, debounce, isLoading, loadingText, }: SelectProps<Option>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <Option extends BaseOption>({ value, setValue, options, id, prefix, suffix, error, disabled, placeholder, toggleAriaLabel, noOptionsText, ref, disableSearch, className, containerClassName, listClassName, maxHeight, onSearch, debounce, isLoading, loadingText, }: SelectProps<Option>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/toggleButton/ToggleButton.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { ToggleButtonColor } from './ToggleButtonTrack';
+export type ToggleButtonProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    /** Label shown when toggle is ON */
+    enabledLabel?: string;
+    /** Label shown when toggle is OFF */
+    disabledLabel?: string;
+    /** External label text */
+    label?: string;
+    /** Color scheme of the toggle */
+    color?: ToggleButtonColor;
+    /** Optional extra content (e.g. tooltip, icon) */
+    children?: ReactNode;
+    /** Ref for the input element */
+    ref?: React.Ref<HTMLInputElement>;
+};
+/**
+ * A toggle button component with optional inner text and external label.
+ * Supports multiple color schemes with smooth animations.
+ *
+ * @param props - The props for the ToggleButton component.
+ */
+export declare const ToggleButton: ({ value, enabledLabel, disabledLabel, label, checked, disabled, color, onChange, className, children, ref, id, name, ...rest }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/toggleButton/ToggleButtonTrack.d.ts

@@ -0,0 +1,23 @@
+export type ToggleButtonColor = "primary" | "error" | "warning" | "success";
+export type ToggleButtonTrackProps = {
+    /** Whether the toggle is checked/on */
+    checked?: boolean;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Color scheme of the toggle */
+    color?: ToggleButtonColor;
+    /** Label shown when toggle is ON (slides in from right when enabled) */
+    enabledLabel?: string;
+    /** Label shown when toggle is OFF (slides in from left when disabled) */
+    disabledLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+/**
+ * A visual track component for toggle button states.
+ * Renders the track, thumb, and optional inner text.
+ *
+ * @param props - The props for the ToggleButtonTrack component.
+ * @returns The rendered toggle track element.
+ */
+export declare const ToggleButtonTrack: ({ checked, disabled, color, enabledLabel, disabledLabel, className, }: ToggleButtonTrackProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { ToggleButton } from './ToggleButton';
+export type { ToggleButtonProps } from './ToggleButton';
+export { ToggleButtonTrack } from './ToggleButtonTrack';
+export type { ToggleButtonTrackProps, ToggleButtonColor, } from './ToggleButtonTrack';

package/dist/components/typography/Typography.d.ts

@@ -1,27 +1,19 @@
-import { default as React } from 'react';
+import { ReactNode } from 'react';
 export type TypographyProps = {
-    children: React.ReactNode;
-    bold?: boolean;
+    children: ReactNode;
     className?: string;
 };
-export declare const H1: ({ children, bold, className }: TypographyProps) => React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;
-export declare const H2: ({ children, bold, className }: TypographyProps) => React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;
-export declare const H3: ({ children, bold, className }: TypographyProps) => React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;
-export declare const H4: ({ children, bold, className }: TypographyProps) => React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;
-export declare const H5: ({ children, bold, className }: TypographyProps) => React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;
-export declare const H6: ({ children, bold, className }: TypographyProps) => React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;
-export declare const Label: ({ children, bold, className }: TypographyProps) => React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;
+export type BodyProps = TypographyProps & {
+    bold?: boolean;
+    small?: boolean;
+};
+export type LabelProps = TypographyProps & {
+    bold?: boolean;
+};
+export declare const H1: ({ className, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H2: ({ className, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H3: ({ className, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H4: ({ className, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const H5: ({ className, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: ({ bold, small, className, ...props }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Label: ({ bold, className, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-export { H1, H2, H3, H4, H5, H6, Label } from './Typography';
+export { H1, H2, H3, H4, H5, Body, Label } from './Typography';
 export type { TypographyProps } from './Typography';

package/dist/icons/iconsComponents.d.ts

@@ -0,0 +1,55 @@
+import { IconComponent } from '../types/IconComponent';
+export declare const AddressIcon: IconComponent;
+export declare const ArrowDownIcon: IconComponent;
+export declare const ArrowLeftIcon: IconComponent;
+export declare const ArrowRightIcon: IconComponent;
+export declare const ArrowUpIcon: IconComponent;
+export declare const BellIcon: IconComponent;
+export declare const CalendarIcon: IconComponent;
+export declare const CautionIcon: IconComponent;
+export declare const CheckIcon: IconComponent;
+export declare const ChevronDoubleLeftIcon: IconComponent;
+export declare const ChevronDoubleRightIcon: IconComponent;
+export declare const CircleIcon: IconComponent;
+export declare const ClockIcon: IconComponent;
+export declare const CloseIcon: IconComponent;
+export declare const CogWheelIcon: IconComponent;
+export declare const ConnectionIcon: IconComponent;
+export declare const CopyIcon: IconComponent;
+export declare const CorrectIcon: IconComponent;
+export declare const DashIcon: IconComponent;
+export declare const DashboardIcon: IconComponent;
+export declare const DatabaseIcon: IconComponent;
+export declare const DeleteIcon: IconComponent;
+export declare const DetailsIcon: IconComponent;
+export declare const DownIcon: IconComponent;
+export declare const DownloadIcon: IconComponent;
+export declare const EarthIcon: IconComponent;
+export declare const EditIcon: IconComponent;
+export declare const ErrorIcon: IconComponent;
+export declare const EyeIcon: IconComponent;
+export declare const FileIcon: IconComponent;
+export declare const EyeOffIcon: IconComponent;
+export declare const FilterIcon: IconComponent;
+export declare const HourglassIcon: IconComponent;
+export declare const IdeaIcon: IconComponent;
+export declare const InfoIcon: IconComponent;
+export declare const LeftBarIcon: IconComponent;
+export declare const LeftIcon: IconComponent;
+export declare const ListIcon: IconComponent;
+export declare const MoreIcon: IconComponent;
+export declare const NotepadIcon: IconComponent;
+export declare const NotesIcon: IconComponent;
+export declare const PlayIcon: IconComponent;
+export declare const PlusIcon: IconComponent;
+export declare const ProfileIcon: IconComponent;
+export declare const RecycleIcon: IconComponent;
+export declare const ReloadIcon: IconComponent;
+export declare const RightIcon: IconComponent;
+export declare const SaveIcon: IconComponent;
+export declare const SearchIcon: IconComponent;
+export declare const ServerIcon: IconComponent;
+export declare const SuccessIcon: IconComponent;
+export declare const TableIcon: IconComponent;
+export declare const UpIcon: IconComponent;
+export declare const WarningIcon: IconComponent;