@grasp-labs/ds-react-components 0.17.0 → 0.19.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/{menu/Menu.d.ts → sidebar/Sidebar.d.ts}

@@ -1,43 +1,43 @@
 import { JSX, ReactElement, ReactNode } from 'react';
 /**
- * Represents a single route in the menu.
+ * Represents a single route in the sidebar.
  */
-export type MenuRoute = {
+export type SidebarRoute = {
     /** Unique path of the route, used as key and for navigation */
     path: string;
-    /** Display title of the menu item */
+    /** Display title of the sidebar item */
     title: string;
     /** Optional icon element to render next to the title */
     icon?: ReactNode;
     /** Nested children entries for submenus */
-    children?: MenuRoute[];
+    children?: SidebarRoute[];
     /** Permissions required to display this route */
     permissions?: string[];
-    /** Whether this route should be hidden from the menu */
-    hideMenu?: boolean;
+    /** Whether this route should be hidden from the sidebar */
+    isHidden?: boolean;
 };
 /**
- * Props for the `Menu` component.
+ * Props for the `Sidebar` component.
  */
-export type MenuProps = {
-    /** React element to display as the menu logo (e.g. an SVG component or img element) */
+export type SidebarProps = {
+    /** React element to display as the sidebar logo (e.g. an SVG component or img element) */
     logo: ReactElement;
     /** Content to display in the footer */
     footerContent: React.ReactNode;
-    /** Array of routes to display in the menu */
-    routes: MenuRoute[];
+    /** Array of routes to display in the sidebar */
+    routes: SidebarRoute[];
     /** Current user permissions used to filter routes */
     permissions?: string[];
     /** Optional additional class names for styling */
     className?: string;
 };
 /**
- * `Menu` is a vertical navigation component that displays a header with a logo,
+ * `Sidebar` is a vertical navigation component that displays a header with a logo,
  * a list of navigable entries (filtered by permissions), and a footer.
  *
  * @example
  * ```tsx
- * <Menu
+ * <Sidebar
  *   logo={<MyLogo />}
  *   footerContent="© 2025 My Company"
  *   routes={[
@@ -48,4 +48,4 @@ export type MenuProps = {
  * />
  * ```
  */
-export declare const Menu: ({ logo, footerContent, routes, permissions, className, }: MenuProps) => JSX.Element;
+export declare const Sidebar: ({ logo, footerContent, routes, permissions, className, }: SidebarProps) => JSX.Element;

package/dist/components/{menu/MenuEntry.d.ts → sidebar/SidebarEntry.d.ts}

@@ -1,33 +1,33 @@
 import { JSX, ReactNode } from 'react';
 /**
- * Represents a child route/entry in the menu hierarchy.
+ * Represents a child route/entry in the sidebar hierarchy.
  */
-export type MenuChild = {
+export type SidebarChild = {
     /** Unique path of the child entry (if navigable) */
     path?: string;
-    /** Display title of the menu item */
+    /** Display title of the sidebar item */
     title: string;
-    /** Optional icon for the menu item */
+    /** Optional icon for the sidebar item */
     icon?: ReactNode;
     /** Nested children for submenus */
-    children?: MenuChild[];
+    children?: SidebarChild[];
     /** Required permissions for the entry */
     permissions?: string[];
-    /** Whether this entry should be hidden from the menu */
-    hideMenu?: boolean;
+    /** Whether this entry should be hidden from the sidebar */
+    isHidden?: boolean;
 };
 /**
- * Props for the `MenuEntry` component.
+ * Props for the `SidebarEntry` component.
  */
-export type MenuEntryProps = {
+export type SidebarEntryProps = {
     /** Icon to display before the title */
     icon?: ReactNode;
-    /** Title text of the menu item */
+    /** Title text of the sidebar item */
     title: string;
     /** Path used for navigation when clicked (ignored if it has children) */
     path?: string;
-    /** Nested children menu entries */
-    childrenEntries?: MenuChild[];
+    /** Nested children sidebar entries */
+    childrenEntries?: SidebarChild[];
     /** Current user permissions for filtering children */
     permissions?: string[];
     /** The currently active path to highlight the entry */
@@ -40,15 +40,15 @@ export type MenuEntryProps = {
     depth?: number;
 };
 /**
- * `MenuEntry` renders a single menu item.
+ * `SidebarEntry` renders a single sidebar item.
  *
  * - If the entry has children, it can expand/collapse to reveal them.
  * - If it has a `path`, clicking navigates to that path via `onNavigate`.
- * - Entries are filtered by `permissions` and `hideMenu` before rendering.
+ * - Entries are filtered by `permissions` and `isHidden` before rendering.
  *
  * @example
  * ```tsx
- * <MenuEntry
+ * <SidebarEntry
  *   title="Settings"
  *   path="/settings"
  *   icon={<SettingsIcon />}
@@ -56,7 +56,7 @@ export type MenuEntryProps = {
  *   onNavigate={(path) => console.log("Navigate to:", path)}
  * />
  *
- * <MenuEntry
+ * <SidebarEntry
  *   title="Admin"
  *   icon={<AdminIcon />}
  *   childrenEntries={[
@@ -69,5 +69,5 @@ export type MenuEntryProps = {
  * />
  * ```
  */
-declare const MenuEntry: ({ icon, title, path, childrenEntries, permissions, className, activePath, onNavigate, depth, }: MenuEntryProps) => JSX.Element;
-export default MenuEntry;
+declare const SidebarEntry: ({ icon, title, path, childrenEntries, permissions, className, activePath, onNavigate, depth, }: SidebarEntryProps) => JSX.Element;
+export default SidebarEntry;

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

@@ -0,0 +1,11 @@
+/**
+ * Barrel exports for the Sidebar system.
+ * Allows importing the main Sidebar component.
+ *
+ * @example
+ * ```tsx
+ * import { Sidebar } from "@/components/Sidebar";
+ * ```
+ */
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarRoute } from './Sidebar';