@tmlmobilidade/ui 0.0.4

package/dist/index.d.ts

@@ -0,0 +1,379 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, SegmentedControlProps as SegmentedControlProps$1, TextInputProps as TextInputProps$1, PasswordInputProps as PasswordInputProps$1, TextareaProps, ComboboxProps, BadgeProps as BadgeProps$1, TooltipProps as TooltipProps$1, SwitchProps as SwitchProps$1, SliderProps as SliderProps$1, ActionIconProps as ActionIconProps$1, MenuProps as MenuProps$1, MenuTargetProps as MenuTargetProps$1, MenuDropdownProps as MenuDropdownProps$1, MenuItemProps as MenuItemProps$1, MenuDividerProps as MenuDividerProps$1, MenuLabelProps as MenuLabelProps$1 } from '@mantine/core';
+import React$1 from 'react';
+export * from '@mantine/hooks';
+
+interface ButtonProps extends ButtonProps$1 {
+    icon?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+    onClick?: () => void;
+    target?: string;
+    type?: 'button' | 'reset' | 'submit';
+    variant?: 'primary' | 'secondary' | 'muted' | 'danger' | 'info' | 'success' | 'warning' | 'active';
+    textTransform?: 'capitalize' | 'lowercase' | 'uppercase' | 'none';
+}
+declare function Component$4({ className, icon, children, onClick, target, type, variant, disabled, textTransform, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type CheckboxProps = CheckboxProps$1;
+declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface SegmentedControlProps extends SegmentedControlProps$1 {
+}
+declare function SegmentedControl({ ...props }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+
+interface TextInputProps extends TextInputProps$1 {
+    tooltip?: string;
+    validation?: RegExp;
+}
+declare function Component$3({ error, validation, value, classNames, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
+
+interface PasswordInputProps extends PasswordInputProps$1 {
+    tooltip?: string;
+    validation?: RegExp;
+}
+declare function Component$2({ error, validation, value, classNames, ...props }: PasswordInputProps): react_jsx_runtime.JSX.Element;
+
+interface TextAreaProps extends TextareaProps {
+}
+declare function Component$1({ classNames, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
+
+interface Props$2 extends ComboboxProps {
+    multiple?: boolean;
+    searchable?: boolean;
+    autoComplete?: boolean;
+    onChange?: (value: string | string[]) => void;
+    value?: string | string[];
+    clearable?: boolean;
+    data: string[];
+    label?: string;
+    description?: string;
+}
+declare function Component({ multiple, searchable, autoComplete, onChange, data, clearable, label, description, ...props }: Props$2): react_jsx_runtime.JSX.Element;
+
+interface BadgeProps extends BadgeProps$1 {
+    icon?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+    type?: 'tag' | 'pill';
+    variant?: 'primary' | 'secondary' | 'muted' | 'danger' | 'info' | 'success' | 'warning' | 'active' | 'disabled';
+    filled?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+declare function Badge({ className, icon, children, variant, filled, fullWidth, disabled, type, size, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type TooltipProps = TooltipProps$1;
+declare function Tooltip({ children, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps extends SwitchProps$1 {
+}
+declare function Switch({ classNames, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface SliderProps extends SliderProps$1 {
+}
+declare function Slider({ classNames, ...props }: SliderProps): react_jsx_runtime.JSX.Element;
+
+interface ActionIconProps extends Omit<ActionIconProps$1, 'size'> {
+    disabled?: boolean;
+    variant?: 'primary' | 'secondary' | 'muted' | 'danger' | 'info' | 'success' | 'warning' | 'active';
+}
+declare function ActionIcon({ children, className, disabled, variant, ...props }: ActionIconProps): react_jsx_runtime.JSX.Element;
+
+type MenuProps = MenuProps$1;
+type MenuTargetProps = MenuTargetProps$1;
+type MenuDropdownProps = MenuDropdownProps$1;
+type MenuItemProps = MenuItemProps$1;
+type MenuDividerProps = MenuDividerProps$1;
+type MenuLabelProps = MenuLabelProps$1;
+declare function Menu(props: MenuProps): react_jsx_runtime.JSX.Element;
+declare namespace Menu {
+    var Target: (props: MenuTargetProps) => react_jsx_runtime.JSX.Element;
+    var Dropdown: (props: MenuDropdownProps) => react_jsx_runtime.JSX.Element;
+    var Item: (props: MenuItemProps) => react_jsx_runtime.JSX.Element;
+    var Divider: (props: MenuDividerProps) => react_jsx_runtime.JSX.Element;
+    var Label: (props: MenuLabelProps) => react_jsx_runtime.JSX.Element;
+}
+
+interface Props$1 extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 'a' | 'aab' | 'ab' | 'abb' | 'abc' | 'abcd';
+    hAlign?: 'center' | 'end' | 'start';
+    vAlign?: 'center' | 'end' | 'start';
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+declare function Grid({ children, className, columns, hAlign, vAlign, gap, ...props }: Props$1): react_jsx_runtime.JSX.Element;
+
+interface SectionProps {
+    children: React$1.ReactNode;
+    title: string;
+    description?: string;
+    icon?: React$1.ReactNode;
+    titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+declare function Section({ title, description, icon, children, titleAs, }: SectionProps): react_jsx_runtime.JSX.Element;
+
+interface SpacerProps {
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    orientation: 'vertical' | 'horizontal';
+    className?: string;
+}
+declare function Spacer({ size, orientation, className }: SpacerProps): react_jsx_runtime.JSX.Element;
+
+interface SurfaceClassNames {
+    root?: string;
+    surface?: string;
+    divider?: string;
+}
+interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    classNames?: SurfaceClassNames;
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    gap?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'start' | 'center' | 'end';
+    flexDirection?: 'column' | 'row';
+    divider?: boolean;
+    variant?: 'default' | 'primary' | 'secondary';
+}
+declare function Surface({ children, classNames, borderRadius, padding, gap, divider, flexDirection, variant, justifyContent, alignItems, ...props }: SurfaceProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarItemProps {
+    href: string;
+    icon: React.ReactNode;
+    label: string;
+    permission?: {
+        action: string;
+        scope: string;
+    };
+}
+interface SidebarProps {
+    items: SidebarItemProps[];
+    classNames?: {
+        container?: string;
+        navWrapper?: string;
+        navButton?: string;
+    };
+}
+declare function Sidebar({ items, classNames }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableColumn<T> {
+    /**
+     * Column accessor.
+     * You can use dot-notation for nested objects property drilling.
+     * (i.e. `department.name` or `department.company.name`)
+     */
+    accessor: keyof T | (string & {});
+    /**
+     * Whether the column is hidden.
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Custom cell data render function.
+     * Accepts the current record and its index in `records` as arguments and returns a React node
+     * (remember that a string is a valid React node too).
+     *
+     * Will override the default render function for this column.
+     */
+    render?: (record: T) => React.ReactNode;
+    /**
+     * Whether the column is sortable.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * The key to be used for sorting.
+     * If not provided, the column accessor will be used.
+     */
+    sortKey?: string;
+    /**
+     * Optional column header title.
+     * If not present, one will be generated by "humanizing" the provided column accessor.
+     * (i.e. `firstName` -> `First name`; `user.firstName` -> `User first name`)
+     */
+    title?: React.ReactNode | string;
+}
+interface DataTableColumnProps<T = Record<string, unknown>> {
+    /**
+     * The columns to be displayed in the table.
+     */
+    columns: DataTableColumn<T>[];
+}
+interface DataTableHeaderProps<T = Record<string, unknown>> {
+    /**
+     * The columns to be displayed in the table header.
+     */
+    columns: DataTableColumn<T>[];
+}
+interface DataTableProps<T> {
+    /**
+     * The classnames to be applied to the table.
+     */
+    classnames?: Partial<Record<'body' | 'cell' | 'footer' | 'header' | 'root' | 'row' | 'table' | 'tableWrapper', string>>;
+    /**
+     * The column configuration for the table.
+     */
+    columns: DataTableColumn<T>[];
+    /**
+     * The maximum height of the table in pixels.
+     * @default 100%
+     */
+    maxHeight?: number;
+    /**
+     * The data to be displayed in the table.
+     */
+    records: T[];
+    /**
+     * Whether the table should have a search input.
+     * @default false
+     */
+    search?: DataTableSearchProps<T>;
+    /**
+     * The title of the table.
+     */
+    title?: string;
+}
+interface DataTableRowProps<T = Record<string, unknown>> {
+    /**
+     * The column configuration for the row.
+     */
+    columns: DataTableColumn<T>[];
+    /**
+     * The data record for the row.
+     */
+    record: T;
+}
+interface DataTableSearchProps<T> {
+    /**
+     * The list of accessors to be used for searching.
+     */
+    accessors: (keyof T | (string & {}))[];
+    /**
+     * Whether the search functionality is enabled.
+     */
+    hidden?: boolean;
+    /**
+     * The icon to be displayed in the search input.
+     * @default <SearchIcon />
+     */
+    icon?: React.ReactNode;
+    /**
+     * Callback function to handle search input changes.
+     * @param value - The new search input value.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder text for the search input.
+     */
+    placeholder?: string;
+    /**
+     * The current value of the search input.
+     */
+    value?: string;
+}
+interface DataTableTitleProps<T> {
+    /**
+     * The search configuration for the table.
+     */
+    search?: DataTableSearchProps<T>;
+    /**
+     * The title of the table.
+     */
+    title?: string;
+}
+
+declare function DataTable<T>({ records, ...props }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+declare const THEMES: readonly ["ocean", "park", "path", "pool", "royal", "street"];
+type ThemeContextType = {
+    theme: typeof THEMES[number];
+    setTheme: (theme: typeof THEMES[number]) => void;
+};
+interface Props {
+    children: React.ReactNode;
+    initialTheme?: typeof THEMES[number];
+}
+declare function ThemeProvider({ children, initialTheme }: Props): react_jsx_runtime.JSX.Element;
+
+declare function useTheme(): ThemeContextType;
+
+interface ThemeSwitcherProps {
+    onThemeChange?: (theme: string) => void;
+}
+declare function ThemeSwitcher({ onThemeChange }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Use to show children only when light theme is active. Hidden otherwise.
+ * @param {ReactNode} children The content to display in light theme.
+ * @returns {JSX.Element} The rendered ThemeLight component.
+ */
+declare function ThemeLight({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Use to show children only when dark theme is active. Hidden otherwise.
+ * @param {ReactNode} children The content to display in dark theme.
+ * @returns {JSX.Element} The rendered ThemeDark component.
+ */
+declare function ThemeDark({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * ThemeSwitch component to automatically toggle children components between dark and light themes.
+ * @param {ReactNode} dark The content to display in dark theme.
+ * @param {ReactNode} light The content to display in light theme.
+ * @returns {JSX.Element} The rendered ThemeSwitch component.
+ */
+declare function Themer({ dark, light }: {
+    dark: React.ReactNode;
+    light: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+interface LoginFormProps {
+    /**
+     * Optional title for the login form.
+     */
+    title: string;
+    /**
+     * Optional description for the login form.
+     */
+    description: string;
+    /**
+     * Optional label for the login button.
+     * @default "Login"
+     */
+    buttonLabel?: string;
+    /**
+     * Optional icon to be rendered next to the button label.
+     * @default <IconArrowRight size={20} />
+     */
+    buttonIcon?: React.ReactNode;
+    /**
+     * Optional React node to be rendered as footer links in the form.
+     */
+    footerLinks?: React.ReactNode[];
+    /**
+     * The URL to be used for the login request.
+     */
+    authUrl: string;
+    /**
+     * Optional class names for various elements within the LoginForm component.
+     */
+    classNames?: {
+        root?: string;
+        header?: string;
+        headerContent?: string;
+        headerTitle?: string;
+        headerDescription?: string;
+        headerImage?: string;
+        form?: string;
+        formFooter?: string;
+        formFooterLinks?: string;
+        formButton?: string;
+    };
+}
+declare function LoginForm({ authUrl, classNames, footerLinks, title, description, buttonLabel, buttonIcon, }: LoginFormProps): react_jsx_runtime.JSX.Element;
+
+declare function useScreenSize(): "mobile" | "tablet" | "desktop" | undefined;
+
+export { ActionIcon, Badge, Component$4 as Button, Checkbox, Component as Combobox, DataTable, type DataTableColumn, type DataTableColumnProps, type DataTableHeaderProps, type DataTableProps, type DataTableRowProps, type DataTableSearchProps, type DataTableTitleProps, Grid, LoginForm, Menu, Component$2 as PasswordInput, Section, SegmentedControl, Sidebar, Slider, Spacer, Surface, Switch, Component$1 as TextArea, Component$3 as TextInput, ThemeDark, ThemeLight, ThemeProvider, ThemeSwitcher, Themer, Tooltip, useScreenSize, useTheme };