@grasp-labs/ds-react-components 0.18.0 → 0.20.0

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

@@ -0,0 +1,20 @@
+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;

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

@@ -1 +1,2 @@
 export * from './BaseButton';
+export * from './BaseButton.styles';

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

@@ -0,0 +1,10 @@
+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";
+};

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

@@ -0,0 +1 @@
+export declare const DEFAULT_MASK_PLACEHOLDER = "_";

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

@@ -4,8 +4,6 @@ type DayPickerClassNamesConfig = Pick<ComponentProps<typeof DayPicker>, "classNa
 export type DatePickerProps = {
     /** Label text displayed nex to the trigger button */
     labelText: string;
-    /** Text displayed in trigger button, when date is not selected */
-    placeholderText: string;
     /** Date displayed in trigger button, when date is selected */
     selectedDate: Date | null;
     /** Locale used to display texts of date-picker in correct language and present date with correct format */
@@ -20,8 +18,6 @@ export type DatePickerProps = {
     className?: string;
     /** Config for class names used to override default styles of calendar */
     dayPickerClassNames?: DayPickerClassNamesConfig;
-    /** Aria label added to the button, when date is selected */
-    nonEmptyButtonAriaLabel: string;
     /** Callback function called when the date is changed */
     onSelectedDateChange: (selectedDate: Date | null) => void;
 };
@@ -31,5 +27,5 @@ export type DatePickerProps = {
  * @param props - The props for the DatePicker component
  * @returns The rendered date-picker
  */
-export declare const DatePicker: ({ labelText, placeholderText, selectedDate, locale, minDate, maxDate, defaultMonth, className, dayPickerClassNames, nonEmptyButtonAriaLabel, onSelectedDateChange, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ labelText, selectedDate, locale, minDate, maxDate, defaultMonth, className, dayPickerClassNames, onSelectedDateChange, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,3 @@
+export declare const getDatePickerPlaceholder: (locale: string) => string;
+export declare const getDatePickerMask: (locale: string) => string;
+export declare const getDateFnsFormat: (locale: string) => string;

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

@@ -0,0 +1,15 @@
+export declare const DatePickerTextBox: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "children"> & {
+    prefixContent?: import('react').ReactNode;
+    suffixContent?: import('react').ReactNode;
+    error?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+    rootClassName?: string;
+    placeholder?: string;
+    ref?: React.Ref<HTMLInputElement>;
+    acceptOnly?: import('../baseTextBox').AcceptOnlyPattern | ((value: string) => string);
+} & {
+    onCalendarToggle: () => void;
+}, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'react';
+export type DropdownProps = {
+    /** Element that will trigger the dropdown, e.g. button */
+    triggerElement: JSX.Element;
+    /** Determines if dropdown is open, when passed - default open/close behavior of component is disabled */
+    isOpen?: boolean;
+    /** Optional className for popup, that allows to add custom styles */
+    popupClassName?: string;
+    /** Dropdown options, that will be shown when dropdown is open. */
+    children: JSX.Element | JSX.Element[];
+};
+/**
+ * A flexible Dropdown component
+ *
+ * @param props - The props for the Dropdown component
+ * @returns The rendered dropdown
+ */
+export declare const Dropdown: ({ triggerElement, popupClassName, children, ...props }: DropdownProps) => JSX.Element;

package/dist/components/dropdown/DropdownItem.d.ts

@@ -0,0 +1,7 @@
+export type DropdownItemProps = {
+    isDisabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: () => void;
+};
+export declare const DropdownItem: ({ isDisabled, className, children, onClick, }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export { Dropdown } from './Dropdown';
+export { DropdownItem } from './DropdownItem';
+export type { DropdownProps } from './Dropdown';

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

@@ -0,0 +1,21 @@
+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 VisualConfigProps = BaseButtonProps & {
+    variant?: Variant | "generic";
+};
+type PassedComponentProps<Props extends ElementType> = React.ComponentPropsWithoutRef<Props>;
+export type LinkProps<Component extends ElementType = "a"> = VisualConfigProps & {
+    as?: Component;
+} & Omit<PassedComponentProps<Component>, keyof VisualConfigProps | "as" | "className" | "children">;
+/**
+ * A foundational link component with configurable variants and color schemes.
+ * Provides consistent styling, behavior and children rendering.
+ *
+ * @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 {};

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

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

package/dist/components/passwordTextBox/PasswordTextBox.d.ts

@@ -0,0 +1,15 @@
+import { BaseTextBoxProps } from '../baseTextBox';
+export type PasswordTextBoxProps = Omit<BaseTextBoxProps, "type"> & {
+    /** Tooltip text shown when password is hidden (hovering over the show button) */
+    showPasswordLabel?: string;
+    /** Tooltip text shown when password is visible (hovering over the hide button) */
+    hidePasswordLabel?: string;
+};
+/**
+ * A password input field with visibility toggle button.
+ * Extends TextBox with eye icon to show/hide password and optional tooltip.
+ *
+ * @param props - The props for the PasswordTextBox component.
+ * @returns The rendered password input with toggle button.
+ */
+export declare const PasswordTextBox: ({ showPasswordLabel, hidePasswordLabel, disabled, ...props }: PasswordTextBoxProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { PasswordTextBox } from './PasswordTextBox';
+export type { PasswordTextBoxProps } from './PasswordTextBox';

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { PopoverPlacement } from '../popover';
+export type TooltipProps = {
+    /** The element that triggers the tooltip on hover */
+    children: ReactNode;
+    /** The text or content to display in the tooltip */
+    content: ReactNode;
+    /** Preferred placement of the tooltip */
+    placement?: PopoverPlacement;
+    /** Additional CSS classes for the tooltip content */
+    className?: string;
+};
+/**
+ * A tooltip component that displays contextual information on hover.
+ * Wraps Popover with automatic show/hide state management.
+ *
+ * @param props - The props for the Tooltip component.
+ * @returns The rendered tooltip with trigger element.
+ */
+export declare const Tooltip: ({ children, content, placement, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';

package/dist/icons/icons.d.ts

@@ -96,6 +96,18 @@ export declare const icons: {
         desc?: string;
         descId?: string;
     }>>;
+    readonly eye: import('react').LazyExoticComponent<import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>>;
+    readonly eyeOff: import('react').LazyExoticComponent<import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>>;
     readonly expandDown: import('react').LazyExoticComponent<import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
         title?: string;
         titleId?: string;
@@ -233,6 +245,8 @@ export declare const DetailsIcon: IconComponent;
 export declare const EarthIcon: IconComponent;
 export declare const ErrorFilledIcon: IconComponent;
 export declare const ErrorOutlinedIcon: IconComponent;
+export declare const EyeIcon: IconComponent;
+export declare const EyeOffIcon: IconComponent;
 export declare const ExpandDownIcon: IconComponent;
 export declare const ExpandRightIcon: IconComponent;
 export declare const ExpandIcon: IconComponent;