Project Init

This commit is contained in:
Muluhabt
2026-05-29 15:23:46 +03:00
commit 2fbc557aac
67387 changed files with 6063341 additions and 0 deletions

View File

@@ -0,0 +1,23 @@
import { GetStylesApi } from '../../core';
import type { AccordionFactory } from './Accordion';
import { AccordionChevronPosition, AccordionHeadingOrder } from './Accordion.types';
interface AccordionContext {
loop: boolean | undefined;
transitionDuration: number | undefined;
disableChevronRotation: boolean | undefined;
chevronPosition: AccordionChevronPosition | undefined;
order: AccordionHeadingOrder | undefined;
chevron: React.ReactNode;
onChange: (value: string) => void;
isItemActive: (value: string) => boolean;
getControlId: (value: string) => string;
getRegionId: (value: string) => string;
getStyles: GetStylesApi<AccordionFactory>;
variant: string | undefined;
unstyled: boolean | undefined;
}
export declare const AccordionProvider: ({ children, value }: {
value: AccordionContext;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useAccordionContext: () => AccordionContext;
export {};

View File

@@ -0,0 +1,69 @@
import { BoxProps, ElementProps, ExtendComponent, Factory, MantineRadius, MantineThemeComponent, StylesApiProps } from '../../core';
import { AccordionChevronPosition, AccordionHeadingOrder, AccordionValue } from './Accordion.types';
import { AccordionChevron } from './AccordionChevron';
export type AccordionStylesNames = 'root' | 'content' | 'item' | 'panel' | 'icon' | 'chevron' | 'label' | 'itemTitle' | 'control';
export type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';
export type AccordionCssVariables = {
root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius';
};
export interface AccordionProps<Multiple extends boolean = false> extends BoxProps, StylesApiProps<AccordionFactory>, ElementProps<'div', 'value' | 'defaultValue' | 'onChange'> {
/** If set, multiple items can be opened at the same time */
multiple?: Multiple;
/** Controlled component value */
value?: AccordionValue<Multiple>;
/** Uncontrolled component default value */
defaultValue?: AccordionValue<Multiple>;
/** Called when value changes, payload type depends on `multiple` prop */
onChange?: (value: AccordionValue<Multiple>) => void;
/** If set, arrow keys loop though items (first to last and last to first) @default `true` */
loop?: boolean;
/** Transition duration in ms @default `200` */
transitionDuration?: number;
/** If set, chevron rotation is disabled */
disableChevronRotation?: boolean;
/** Position of the chevron relative to the item label @default `right` */
chevronPosition?: AccordionChevronPosition;
/** Size of the chevron icon container @default `auto` */
chevronSize?: number | string;
/** Size of the default chevron icon. Ignored when `chevron` prop is set. @default `16` */
chevronIconSize?: number | string;
/** Heading order, has no effect on visuals */
order?: AccordionHeadingOrder;
/** Custom chevron icon */
chevron?: React.ReactNode;
/** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default `theme.defaultRadius` */
radius?: MantineRadius;
}
export type AccordionFactory = Factory<{
props: AccordionProps;
ref: HTMLDivElement;
stylesNames: AccordionStylesNames;
vars: AccordionCssVariables;
variant: AccordionVariant;
}>;
export declare function Accordion<Multiple extends boolean = false>(_props: AccordionProps<Multiple>): import("react/jsx-runtime").JSX.Element;
export declare namespace Accordion {
var extend: (c: ExtendComponent<AccordionFactory>) => MantineThemeComponent;
var withProps: (props: Partial<AccordionProps<false>>) => AccordionProps<false>;
var classes: any;
var displayName: string;
var Item: import("../..").MantineComponent<{
props: import(".").AccordionItemProps;
ref: HTMLDivElement;
stylesNames: import("./AccordionItem/AccordionItem").AccordionItemStylesNames;
compound: true;
}>;
var Panel: import("../..").MantineComponent<{
props: import(".").AccordionPanelProps;
ref: HTMLDivElement;
stylesNames: import("./AccordionPanel/AccordionPanel").AccordionPanelStylesNames;
compound: true;
}>;
var Control: import("../..").MantineComponent<{
props: import(".").AccordionControlProps;
ref: HTMLButtonElement;
stylesNames: import("./AccordionControl/AccordionControl").AccordionControlStylesNames;
compound: true;
}>;
var Chevron: typeof AccordionChevron;
}

View File

@@ -0,0 +1,3 @@
export type AccordionValue<Multiple extends boolean> = Multiple extends true ? string[] : string | null;
export type AccordionHeadingOrder = 2 | 3 | 4 | 5 | 6;
export type AccordionChevronPosition = 'left' | 'right';

View File

@@ -0,0 +1,8 @@
export interface AccordionChevronProps extends React.ComponentPropsWithoutRef<'svg'> {
/** Controls `width` and `height` of the icon, `16` by default */
size?: number | string;
}
export declare function AccordionChevron({ style, size, ...others }: AccordionChevronProps): import("react/jsx-runtime").JSX.Element;
export declare namespace AccordionChevron {
var displayName: string;
}

View File

@@ -0,0 +1,24 @@
import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
export type AccordionControlStylesNames = 'control' | 'chevron' | 'label' | 'itemTitle' | 'icon';
export interface AccordionControlProps extends BoxProps, CompoundStylesApiProps<AccordionControlFactory>, ElementProps<'button'> {
/** Sets `disabled` attribute, prevents interactions */
disabled?: boolean;
/** Custom chevron icon */
chevron?: React.ReactNode;
/** Control label */
children?: React.ReactNode;
/** Icon displayed next to the label */
icon?: React.ReactNode;
}
export type AccordionControlFactory = Factory<{
props: AccordionControlProps;
ref: HTMLButtonElement;
stylesNames: AccordionControlStylesNames;
compound: true;
}>;
export declare const AccordionControl: import("../../..").MantineComponent<{
props: AccordionControlProps;
ref: HTMLButtonElement;
stylesNames: AccordionControlStylesNames;
compound: true;
}>;

View File

@@ -0,0 +1,8 @@
interface AccordionItemContext {
value: string;
}
export declare const AccordionItemProvider: ({ children, value }: {
value: AccordionItemContext;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useAccordionItemContext: () => AccordionItemContext;
export {};

View File

@@ -0,0 +1,18 @@
import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
export type AccordionItemStylesNames = 'item';
export interface AccordionItemProps extends BoxProps, CompoundStylesApiProps<AccordionItemFactory>, ElementProps<'div'> {
/** Value that is used to manage the accordion state */
value: string;
}
export type AccordionItemFactory = Factory<{
props: AccordionItemProps;
ref: HTMLDivElement;
stylesNames: AccordionItemStylesNames;
compound: true;
}>;
export declare const AccordionItem: import("../../..").MantineComponent<{
props: AccordionItemProps;
ref: HTMLDivElement;
stylesNames: AccordionItemStylesNames;
compound: true;
}>;

View File

@@ -0,0 +1,18 @@
import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
export type AccordionPanelStylesNames = 'panel' | 'content';
export interface AccordionPanelProps extends BoxProps, CompoundStylesApiProps<AccordionPanelFactory>, ElementProps<'div'> {
/** Called when the panel animation completes */
onTransitionEnd?: () => void;
}
export type AccordionPanelFactory = Factory<{
props: AccordionPanelProps;
ref: HTMLDivElement;
stylesNames: AccordionPanelStylesNames;
compound: true;
}>;
export declare const AccordionPanel: import("../../..").MantineComponent<{
props: AccordionPanelProps;
ref: HTMLDivElement;
stylesNames: AccordionPanelStylesNames;
compound: true;
}>;

View File

@@ -0,0 +1,11 @@
export { Accordion } from './Accordion';
export { AccordionChevron } from './AccordionChevron';
export { AccordionItem } from './AccordionItem/AccordionItem';
export { AccordionPanel } from './AccordionPanel/AccordionPanel';
export { AccordionControl } from './AccordionControl/AccordionControl';
export type { AccordionProps, AccordionStylesNames, AccordionCssVariables, AccordionFactory, AccordionVariant, } from './Accordion';
export type { AccordionControlProps } from './AccordionControl/AccordionControl';
export type { AccordionItemProps } from './AccordionItem/AccordionItem';
export type { AccordionPanelProps } from './AccordionPanel/AccordionPanel';
export type { AccordionChevronProps } from './AccordionChevron';
export type { AccordionValue, AccordionHeadingOrder } from './Accordion.types';

View File

@@ -0,0 +1,88 @@
import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
import { LoaderProps } from '../Loader';
import { ActionIconGroup } from './ActionIconGroup/ActionIconGroup';
import { ActionIconGroupSection } from './ActionIconGroupSection/ActionIconGroupSection';
export type ActionIconVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient';
export type ActionIconStylesNames = 'root' | 'loader' | 'icon';
export type ActionIconCssVariables = {
root: '--ai-radius' | '--ai-size' | '--ai-bg' | '--ai-hover' | '--ai-hover-color' | '--ai-color' | '--ai-bd';
};
export interface ActionIconProps extends BoxProps, StylesApiProps<ActionIconFactory> {
'data-disabled'?: boolean;
__staticSelector?: string;
/** If set, `Loader` component is displayed instead of the `children` */
loading?: boolean;
/** Props passed down to the `Loader` component. Ignored when `loading` prop is not set. */
loaderProps?: LoaderProps;
/** Controls width and height of the button. Numbers are converted to rem. @default `'md'`. */
size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;
/** Key of `theme.colors` or any valid CSS color. @default `theme.primaryColor`. */
color?: MantineColor;
/** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Gradient values used with `variant="gradient"`. @default `theme.defaultGradient`. */
gradient?: MantineGradient;
/** Sets `disabled` attribute, prevents interactions */
disabled?: boolean;
/** Icon element */
children?: React.ReactNode;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
}
export type ActionIconFactory = PolymorphicFactory<{
props: ActionIconProps;
defaultComponent: 'button';
defaultRef: HTMLButtonElement;
stylesNames: ActionIconStylesNames;
variant: ActionIconVariant;
vars: ActionIconCssVariables;
staticComponents: {
Group: typeof ActionIconGroup;
GroupSection: typeof ActionIconGroupSection;
};
}>;
export declare const ActionIcon: (<C = "button">(props: import("../..").PolymorphicComponentProps<C, ActionIconProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ActionIconProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof ActionIconProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (ActionIconProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: ActionIconProps;
defaultComponent: "button";
defaultRef: HTMLButtonElement;
stylesNames: ActionIconStylesNames;
variant: ActionIconVariant;
vars: ActionIconCssVariables;
staticComponents: {
Group: typeof ActionIconGroup;
GroupSection: typeof ActionIconGroupSection;
};
}> & import("../..").ComponentClasses<{
props: ActionIconProps;
defaultComponent: "button";
defaultRef: HTMLButtonElement;
stylesNames: ActionIconStylesNames;
variant: ActionIconVariant;
vars: ActionIconCssVariables;
staticComponents: {
Group: typeof ActionIconGroup;
GroupSection: typeof ActionIconGroupSection;
};
}> & import("../..").PolymorphicComponentWithProps<{
props: ActionIconProps;
defaultComponent: "button";
defaultRef: HTMLButtonElement;
stylesNames: ActionIconStylesNames;
variant: ActionIconVariant;
vars: ActionIconCssVariables;
staticComponents: {
Group: typeof ActionIconGroup;
GroupSection: typeof ActionIconGroupSection;
};
}> & {
Group: typeof ActionIconGroup;
GroupSection: typeof ActionIconGroupSection;
};

View File

@@ -0,0 +1,25 @@
import { BoxProps, Factory, StylesApiProps } from '../../../core';
export type ActionIconGroupStylesNames = 'group';
export type ActionIconGroupCssVariables = {
group: '--ai-border-width';
};
export interface ActionIconGroupProps extends BoxProps, StylesApiProps<ActionIconGroupFactory> {
/** `ActionIcon` and `ActionIcon.GroupSection` components only */
children?: React.ReactNode;
/** Group orientation @default `'horizontal'` */
orientation?: 'horizontal' | 'vertical';
/** `border-width` of the child components. @default `1` */
borderWidth?: number | string;
}
export type ActionIconGroupFactory = Factory<{
props: ActionIconGroupProps;
ref: HTMLDivElement;
stylesNames: ActionIconGroupStylesNames;
vars: ActionIconGroupCssVariables;
}>;
export declare const ActionIconGroup: import("../../..").MantineComponent<{
props: ActionIconGroupProps;
ref: HTMLDivElement;
stylesNames: ActionIconGroupStylesNames;
vars: ActionIconGroupCssVariables;
}>;

View File

@@ -0,0 +1,30 @@
import { BoxProps, ElementProps, Factory, MantineGradient, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
import type { ActionIconVariant } from '../ActionIcon';
export type ActionIconGroupSectionStylesNames = 'groupSection';
export type ActionIconGroupSectionCssVariables = {
groupSection: '--section-radius' | '--section-bg' | '--section-color' | '--section-bd' | '--section-height' | '--section-padding-x' | '--section-fz';
};
export interface ActionIconGroupSectionProps extends BoxProps, StylesApiProps<ActionIconGroupSectionFactory>, ElementProps<'div'> {
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Gradient values used with `variant="gradient"`. @default `theme.defaultGradient` */
gradient?: MantineGradient;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
/** Controls section `height`, `font-size` and horizontal `padding` @default `'sm'` */
size?: MantineSize | (string & {}) | number;
}
export type ActionIconGroupSectionFactory = Factory<{
props: ActionIconGroupSectionProps;
ref: HTMLDivElement;
stylesNames: ActionIconGroupSectionStylesNames;
vars: ActionIconGroupSectionCssVariables;
variant: ActionIconVariant;
}>;
export declare const ActionIconGroupSection: import("../../..").MantineComponent<{
props: ActionIconGroupSectionProps;
ref: HTMLDivElement;
stylesNames: ActionIconGroupSectionStylesNames;
vars: ActionIconGroupSectionCssVariables;
variant: ActionIconVariant;
}>;

View File

@@ -0,0 +1,6 @@
export { ActionIcon } from './ActionIcon';
export { ActionIconGroup } from './ActionIconGroup/ActionIconGroup';
export { ActionIconGroupSection } from './ActionIconGroupSection/ActionIconGroupSection';
export type { ActionIconProps, ActionIconStylesNames, ActionIconFactory, ActionIconCssVariables, ActionIconVariant, } from './ActionIcon';
export type { ActionIconGroupProps, ActionIconGroupCssVariables, ActionIconGroupStylesNames, ActionIconGroupFactory, } from './ActionIconGroup/ActionIconGroup';
export type { ActionIconGroupSectionProps, ActionIconGroupSectionCssVariables, ActionIconGroupSectionStylesNames, ActionIconGroupSectionFactory, } from './ActionIconGroupSection/ActionIconGroupSection';

View File

@@ -0,0 +1,36 @@
import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../core';
import { BasePortalProps } from '../Portal';
export type AffixStylesNames = 'root';
export type AffixCssVariables = {
root: '--affix-z-index' | '--affix-top' | '--affix-left' | '--affix-bottom' | '--affix-right';
};
export interface AffixPosition {
top?: MantineSize | (string & {}) | number;
left?: MantineSize | (string & {}) | number;
bottom?: MantineSize | (string & {}) | number;
right?: MantineSize | (string & {}) | number;
}
export interface AffixBaseProps {
/** Root element `z-index` property @default `200` */
zIndex?: React.CSSProperties['zIndex'];
/** Determines whether the component is rendered within `Portal` @default `true` */
withinPortal?: boolean;
/** Props passed down to the `Portal` component. Ignored when `withinPortal` is `false`. */
portalProps?: BasePortalProps;
/** Affix position on screen @default `{ bottom: 0, right: 0 }` */
position?: AffixPosition;
}
export interface AffixProps extends BoxProps, AffixBaseProps, StylesApiProps<AffixFactory>, ElementProps<'div'> {
}
export type AffixFactory = Factory<{
props: AffixProps;
ref: HTMLDivElement;
stylesNames: AffixStylesNames;
vars: AffixCssVariables;
}>;
export declare const Affix: import("../..").MantineComponent<{
props: AffixProps;
ref: HTMLDivElement;
stylesNames: AffixStylesNames;
vars: AffixCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { Affix } from './Affix';
export type { AffixCssVariables, AffixFactory, AffixProps, AffixStylesNames, AffixBaseProps, AffixPosition, } from './Affix';

View File

@@ -0,0 +1,38 @@
import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
export type AlertStylesNames = 'root' | 'body' | 'label' | 'title' | 'icon' | 'wrapper' | 'message' | 'closeButton';
export type AlertVariant = 'filled' | 'light' | 'outline' | 'default' | 'transparent' | 'white';
export type AlertCssVariables = {
root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
};
export interface AlertProps extends BoxProps, StylesApiProps<AlertFactory>, ElementProps<'div', 'title'> {
/** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor` */
color?: MantineColor;
/** Alert title */
title?: React.ReactNode;
/** Icon displayed next to the title */
icon?: React.ReactNode;
/** Determines whether close button should be displayed @default `false` */
withCloseButton?: boolean;
/** Called when the close button is clicked */
onClose?: () => void;
/** Close button `aria-label` */
closeButtonLabel?: string;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
}
export type AlertFactory = Factory<{
props: AlertProps;
ref: HTMLDivElement;
stylesNames: AlertStylesNames;
vars: AlertCssVariables;
variant: AlertVariant;
}>;
export declare const Alert: import("../..").MantineComponent<{
props: AlertProps;
ref: HTMLDivElement;
stylesNames: AlertStylesNames;
vars: AlertCssVariables;
variant: AlertVariant;
}>;

View File

@@ -0,0 +1,2 @@
export { Alert } from './Alert';
export type { AlertProps, AlertStylesNames, AlertCssVariables, AlertFactory, AlertVariant, } from './Alert';

View File

@@ -0,0 +1,47 @@
import { PolymorphicFactory } from '../../core';
import { TextCssVariables, TextProps, TextStylesNames, TextVariant } from '../Text';
export type AnchorStylesNames = TextStylesNames;
export type AnchorVariant = TextVariant;
export type AnchorCssVariables = TextCssVariables;
export interface AnchorProps extends Omit<TextProps, 'span'> {
/** Defines when `text-decoration: underline` styles are applied. @default `hover` */
underline?: 'always' | 'hover' | 'not-hover' | 'never';
}
export type AnchorFactory = PolymorphicFactory<{
props: AnchorProps;
defaultComponent: 'a';
defaultRef: HTMLAnchorElement;
stylesNames: AnchorStylesNames;
vars: AnchorCssVariables;
variant: AnchorVariant;
}>;
export declare const Anchor: (<C = "a">(props: import("../..").PolymorphicComponentProps<C, AnchorProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(AnchorProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof AnchorProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (AnchorProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: AnchorProps;
defaultComponent: "a";
defaultRef: HTMLAnchorElement;
stylesNames: AnchorStylesNames;
vars: AnchorCssVariables;
variant: AnchorVariant;
}> & import("../..").ComponentClasses<{
props: AnchorProps;
defaultComponent: "a";
defaultRef: HTMLAnchorElement;
stylesNames: AnchorStylesNames;
vars: AnchorCssVariables;
variant: AnchorVariant;
}> & import("../..").PolymorphicComponentWithProps<{
props: AnchorProps;
defaultComponent: "a";
defaultRef: HTMLAnchorElement;
stylesNames: AnchorStylesNames;
vars: AnchorCssVariables;
variant: AnchorVariant;
}> & Record<string, never>;

View File

@@ -0,0 +1,2 @@
export { Anchor } from './Anchor';
export type { AnchorCssVariables, AnchorFactory, AnchorProps, AnchorStylesNames, AnchorVariant, } from './Anchor';

View File

@@ -0,0 +1,54 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
export type AngleSliderStylesNames = 'root' | 'thumb' | 'label' | 'marks' | 'mark';
export type AngleSliderCssVariables = {
root: '--slider-size' | '--thumb-size';
};
export interface AngleSliderProps extends BoxProps, StylesApiProps<AngleSliderFactory>, ElementProps<'div', 'onChange'> {
/** Step between values @default `1` */
step?: number;
/** Controlled component value */
value?: number;
/** Uncontrolled component default value */
defaultValue?: number;
/** Called on value change */
onChange?: (value: number) => void;
/** Called after the selection is finished */
onChangeEnd?: (value: number) => void;
/** Called in `onMouseDown` and `onTouchStart` */
onScrubStart?: () => void;
/** Called in `onMouseUp` and `onTouchEnd` */
onScrubEnd?: () => void;
/** If set, the label is displayed inside the slider @default `true` */
withLabel?: boolean;
/** Array of marks displayed on the slider */
marks?: {
value: number;
label?: string;
}[];
/** Slider size in px @default `60px` */
size?: number;
/** Size of the thumb in px. Calculated based on the `size` value by default. */
thumbSize?: number;
/** A function to format label based on the current value */
formatLabel?: (value: number) => React.ReactNode;
/** Sets `data-disabled` attribute, disables interactions */
disabled?: boolean;
/** If set, the selection is allowed only from the given marks array @default `false` */
restrictToMarks?: boolean;
/** Props passed down to the hidden input */
hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
/** Hidden input name, use with uncontrolled component */
name?: string;
}
export type AngleSliderFactory = Factory<{
props: AngleSliderProps;
ref: HTMLDivElement;
stylesNames: AngleSliderStylesNames;
vars: AngleSliderCssVariables;
}>;
export declare const AngleSlider: import("../..").MantineComponent<{
props: AngleSliderProps;
ref: HTMLDivElement;
stylesNames: AngleSliderStylesNames;
vars: AngleSliderCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { AngleSlider } from './AngleSlider';
export type { AngleSliderCssVariables, AngleSliderFactory, AngleSliderProps, AngleSliderStylesNames, } from './AngleSlider';

View File

@@ -0,0 +1,14 @@
import { GetStylesApi } from '../../core';
import type { AppShellFactory } from './AppShell';
export interface AppShellContext {
getStyles: GetStylesApi<AppShellFactory>;
withBorder: boolean | undefined;
zIndex: string | number | undefined;
disabled: boolean | undefined;
offsetScrollbars: boolean | undefined;
mode: 'fixed' | 'static';
}
export declare const AppShellProvider: ({ children, value }: {
value: AppShellContext;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useAppShellContext: () => AppShellContext;

View File

@@ -0,0 +1,68 @@
import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
import { AppShellAsideConfiguration, AppShellFooterConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellResponsiveSize } from './AppShell.types';
import { AppShellAside } from './AppShellAside/AppShellAside';
import { AppShellFooter } from './AppShellFooter/AppShellFooter';
import { AppShellHeader } from './AppShellHeader/AppShellHeader';
import { AppShellMain } from './AppShellMain/AppShellMain';
import { AppShellNavbar } from './AppShellNavbar/AppShellNavbar';
import { AppShellSection } from './AppShellSection/AppShellSection';
export type AppShellStylesNames = 'root' | 'navbar' | 'main' | 'header' | 'footer' | 'aside' | 'section';
export type AppShellCssVariables = {
root: '--app-shell-transition-duration' | '--app-shell-transition-timing-function';
};
export interface AppShellProps extends BoxProps, StylesApiProps<AppShellFactory>, ElementProps<'div'> {
/** If set, the associated components have a border @default `true` */
withBorder?: boolean;
/** Padding of the main section. Important: use `padding` prop instead of `p`. @default `0` */
padding?: MantineSpacing | AppShellResponsiveSize;
/** `Navbar` configuration, controls width, breakpoints and collapsed state. Required if you use `Navbar` component. */
navbar?: AppShellNavbarConfiguration;
/** `Aside` configuration, controls width, breakpoints and collapsed state. Required if you use `Aside` component. */
aside?: AppShellAsideConfiguration;
/** `Header` configuration, controls height, offset and collapsed state. Required if you use `Header` component. */
header?: AppShellHeaderConfiguration;
/** `Footer` configuration, controls height, offset and collapsed state. Required if you use `Footer` component. */
footer?: AppShellFooterConfiguration;
/** Duration of all transitions in ms @default `200` */
transitionDuration?: number;
/** Timing function of all transitions @default `ease` */
transitionTimingFunction?: React.CSSProperties['transitionTimingFunction'];
/** `z-index` of all associated elements @default `100` */
zIndex?: string | number;
/** Determines how `Navbar`/`Aside` are arranged relative to `Header`/`Footer` */
layout?: 'default' | 'alt';
/** If set, `Navbar`, `Aside`, `Header` and `Footer` components are hidden */
disabled?: boolean;
/** If set, `Header` and `Footer` components include styles to offset scrollbars. Based on `react-remove-scroll`. @default `true` */
offsetScrollbars?: boolean;
/** Determines positioning mode of all sections @default 'fixed' */
mode?: 'fixed' | 'static';
}
export type AppShellFactory = Factory<{
props: AppShellProps;
ref: HTMLDivElement;
stylesNames: AppShellStylesNames;
vars: AppShellCssVariables;
staticComponents: {
Navbar: typeof AppShellNavbar;
Header: typeof AppShellHeader;
Main: typeof AppShellMain;
Aside: typeof AppShellAside;
Footer: typeof AppShellFooter;
Section: typeof AppShellSection;
};
}>;
export declare const AppShell: import("../..").MantineComponent<{
props: AppShellProps;
ref: HTMLDivElement;
stylesNames: AppShellStylesNames;
vars: AppShellCssVariables;
staticComponents: {
Navbar: typeof AppShellNavbar;
Header: typeof AppShellHeader;
Main: typeof AppShellMain;
Aside: typeof AppShellAside;
Footer: typeof AppShellFooter;
Section: typeof AppShellSection;
};
}>;

View File

@@ -0,0 +1,44 @@
import type { MantineBreakpoint } from '../../core';
export interface AppShellCompoundProps {
/** If set, component haves a border, overrides `withBorder` prop on `AppShell` component */
withBorder?: boolean;
/** Sets `z-index`. Inherited from the `AppShell` by default. */
zIndex?: React.CSSProperties['zIndex'];
}
export type AppShellSize = number | (string & {});
export interface AppShellResponsiveSize {
base?: AppShellSize;
xs?: AppShellSize;
sm?: AppShellSize;
md?: AppShellSize;
lg?: AppShellSize;
xl?: AppShellSize;
[key: string]: AppShellSize | undefined;
}
export type AppShellMode = 'fixed' | 'static';
export interface AppShellNavbarConfiguration {
width: AppShellSize | AppShellResponsiveSize;
breakpoint: MantineBreakpoint | (string & {}) | number;
collapsed?: {
desktop?: boolean;
mobile?: boolean;
};
}
export interface AppShellAsideConfiguration {
width: AppShellSize | AppShellResponsiveSize;
breakpoint: MantineBreakpoint | (string & {}) | number;
collapsed?: {
desktop?: boolean;
mobile?: boolean;
};
}
export interface AppShellHeaderConfiguration {
height: AppShellSize | AppShellResponsiveSize;
collapsed?: boolean;
offset?: boolean;
}
export interface AppShellFooterConfiguration {
height: AppShellSize | AppShellResponsiveSize;
collapsed?: boolean;
offset?: boolean;
}

View File

@@ -0,0 +1,15 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../../core';
import { AppShellCompoundProps } from '../AppShell.types';
export type AppShellAsideStylesNames = 'aside';
export interface AppShellAsideProps extends BoxProps, AppShellCompoundProps, StylesApiProps<AppShellAsideFactory>, ElementProps<'aside'> {
}
export type AppShellAsideFactory = Factory<{
props: AppShellAsideProps;
ref: HTMLElement;
stylesNames: AppShellAsideStylesNames;
}>;
export declare const AppShellAside: import("../../..").MantineComponent<{
props: AppShellAsideProps;
ref: HTMLElement;
stylesNames: AppShellAsideStylesNames;
}>;

View File

@@ -0,0 +1,15 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../../core';
import { AppShellCompoundProps } from '../AppShell.types';
export type AppShellFooterStylesNames = 'footer';
export interface AppShellFooterProps extends BoxProps, AppShellCompoundProps, StylesApiProps<AppShellFooterFactory>, ElementProps<'footer'> {
}
export type AppShellFooterFactory = Factory<{
props: AppShellFooterProps;
ref: HTMLElement;
stylesNames: AppShellFooterStylesNames;
}>;
export declare const AppShellFooter: import("../../..").MantineComponent<{
props: AppShellFooterProps;
ref: HTMLElement;
stylesNames: AppShellFooterStylesNames;
}>;

View File

@@ -0,0 +1,15 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../../core';
import type { AppShellCompoundProps } from '../AppShell.types';
export type AppShellHeaderStylesNames = 'header';
export interface AppShellHeaderProps extends BoxProps, AppShellCompoundProps, StylesApiProps<AppShellHeaderFactory>, ElementProps<'header'> {
}
export type AppShellHeaderFactory = Factory<{
props: AppShellHeaderProps;
ref: HTMLElement;
stylesNames: AppShellHeaderStylesNames;
}>;
export declare const AppShellHeader: import("../../..").MantineComponent<{
props: AppShellHeaderProps;
ref: HTMLElement;
stylesNames: AppShellHeaderStylesNames;
}>;

View File

@@ -0,0 +1,16 @@
import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
export type AppShellMainStylesNames = 'main';
export interface AppShellMainProps extends BoxProps, CompoundStylesApiProps<AppShellMainFactory>, ElementProps<'main'> {
}
export type AppShellMainFactory = Factory<{
props: AppShellMainProps;
ref: HTMLElement;
stylesNames: AppShellMainStylesNames;
compound: true;
}>;
export declare const AppShellMain: import("../../..").MantineComponent<{
props: AppShellMainProps;
ref: HTMLElement;
stylesNames: AppShellMainStylesNames;
compound: true;
}>;

View File

@@ -0,0 +1,12 @@
import type { AppShellProps } from '../AppShell';
interface AppShellMediaStylesProps {
navbar: AppShellProps['navbar'] | undefined;
header: AppShellProps['header'] | undefined;
aside: AppShellProps['aside'] | undefined;
footer: AppShellProps['footer'] | undefined;
padding: AppShellProps['padding'] | undefined;
mode: 'fixed' | 'static';
selector?: string;
}
export declare function AppShellMediaStyles({ navbar, header, aside, footer, padding, mode, selector, }: AppShellMediaStylesProps): import("react/jsx-runtime").JSX.Element;
export {};

View File

@@ -0,0 +1,13 @@
import { MantineTheme } from '../../../../core';
import type { AppShellProps } from '../../AppShell';
import type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';
interface AssignAsideVariablesInput {
baseStyles: CSSVariables;
minMediaStyles: MediaQueryVariables;
maxMediaStyles: MediaQueryVariables;
aside: AppShellProps['aside'] | undefined;
theme: MantineTheme;
mode: 'fixed' | 'static';
}
export declare function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, aside, theme, mode, }: AssignAsideVariablesInput): void;
export {};

View File

@@ -0,0 +1,10 @@
import type { AppShellProps } from '../../AppShell';
import type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';
interface AssignFooterVariablesInput {
baseStyles: CSSVariables;
minMediaStyles: MediaQueryVariables;
footer: AppShellProps['footer'] | undefined;
mode: 'fixed' | 'static';
}
export declare function assignFooterVariables({ baseStyles, minMediaStyles, footer, mode, }: AssignFooterVariablesInput): void;
export {};

View File

@@ -0,0 +1,10 @@
import type { AppShellProps } from '../../AppShell';
import type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';
interface AssignHeaderVariablesInput {
baseStyles: CSSVariables;
minMediaStyles: MediaQueryVariables;
header: AppShellProps['header'] | undefined;
mode: 'fixed' | 'static';
}
export declare function assignHeaderVariables({ baseStyles, minMediaStyles, header, mode, }: AssignHeaderVariablesInput): void;
export {};

View File

@@ -0,0 +1,13 @@
import { MantineTheme } from '../../../../core';
import type { AppShellProps } from '../../AppShell';
import type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';
interface AssignNavbarVariablesInput {
baseStyles: CSSVariables;
minMediaStyles: MediaQueryVariables;
maxMediaStyles: MediaQueryVariables;
navbar: AppShellProps['navbar'] | undefined;
theme: MantineTheme;
mode: 'fixed' | 'static';
}
export declare function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, navbar, theme, mode, }: AssignNavbarVariablesInput): void;
export {};

View File

@@ -0,0 +1,9 @@
import type { AppShellProps } from '../../AppShell';
import type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';
interface AssignPaddingVariablesInput {
baseStyles: CSSVariables;
minMediaStyles: MediaQueryVariables;
padding: AppShellProps['padding'] | undefined;
}
export declare function assignPaddingVariables({ padding, baseStyles, minMediaStyles, }: AssignPaddingVariablesInput): void;
export {};

View File

@@ -0,0 +1,2 @@
import type { AppShellResponsiveSize, AppShellSize } from '../../AppShell.types';
export declare function getBaseSize(size: AppShellSize | AppShellResponsiveSize): AppShellSize | undefined;

View File

@@ -0,0 +1 @@
export declare function getPaddingValue(padding: string | number | undefined): string | undefined;

View File

@@ -0,0 +1,21 @@
import { MantineTheme } from '../../../../core';
import type { AppShellProps } from '../../AppShell';
export type CSSVariables = Record<`--${string}`, string | undefined>;
export type MediaQueryVariables = Record<string, Record<`--${string}`, string | undefined>>;
interface GetVariablesInput {
navbar: AppShellProps['navbar'] | undefined;
header: AppShellProps['header'] | undefined;
footer: AppShellProps['footer'] | undefined;
aside: AppShellProps['aside'] | undefined;
padding: AppShellProps['padding'] | undefined;
theme: MantineTheme;
mode: 'fixed' | 'static';
}
export declare function getVariables({ navbar, header, footer, aside, padding, theme, mode, }: GetVariablesInput): {
baseStyles: CSSVariables;
media: {
query: string;
styles: Record<`--${string}`, string | undefined>;
}[];
};
export {};

View File

@@ -0,0 +1,2 @@
import type { AppShellResponsiveSize, AppShellSize } from '../../AppShell.types';
export declare function isPrimitiveSize(size: AppShellSize | AppShellResponsiveSize | undefined): size is AppShellSize | AppShellResponsiveSize;

View File

@@ -0,0 +1,2 @@
import type { AppShellResponsiveSize, AppShellSize } from '../../AppShell.types';
export declare function isResponsiveSize(size: AppShellSize | AppShellResponsiveSize | undefined): size is AppShellResponsiveSize;

View File

@@ -0,0 +1,15 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../../core';
import type { AppShellCompoundProps } from '../AppShell.types';
export type AppShellNavbarStylesNames = 'navbar';
export interface AppShellNavbarProps extends BoxProps, AppShellCompoundProps, StylesApiProps<AppShellNavbarFactory>, ElementProps<'div'> {
}
export type AppShellNavbarFactory = Factory<{
props: AppShellNavbarProps;
ref: HTMLElement;
stylesNames: AppShellNavbarStylesNames;
}>;
export declare const AppShellNavbar: import("../../..").MantineComponent<{
props: AppShellNavbarProps;
ref: HTMLElement;
stylesNames: AppShellNavbarStylesNames;
}>;

View File

@@ -0,0 +1,40 @@
import { BoxProps, CompoundStylesApiProps, PolymorphicFactory } from '../../../core';
export type AppShellSectionStylesNames = 'section';
export interface AppShellSectionProps extends BoxProps, CompoundStylesApiProps<AppShellSectionFactory> {
/** If set, the section expands to take all available space */
grow?: boolean;
}
export type AppShellSectionFactory = PolymorphicFactory<{
props: AppShellSectionProps;
defaultRef: HTMLDivElement;
defaultComponent: 'div';
stylesNames: AppShellSectionStylesNames;
compound: true;
}>;
export declare const AppShellSection: (<C = "div">(props: import("../../..").PolymorphicComponentProps<C, AppShellSectionProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(AppShellSectionProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof AppShellSectionProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (AppShellSectionProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../../..").ThemeExtend<{
props: AppShellSectionProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: AppShellSectionStylesNames;
compound: true;
}> & import("../../..").ComponentClasses<{
props: AppShellSectionProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: AppShellSectionStylesNames;
compound: true;
}> & import("../../..").PolymorphicComponentWithProps<{
props: AppShellSectionProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: AppShellSectionStylesNames;
compound: true;
}> & Record<string, never>;

View File

@@ -0,0 +1,15 @@
export { AppShell } from './AppShell';
export { AppShellAside } from './AppShellAside/AppShellAside';
export { AppShellFooter } from './AppShellFooter/AppShellFooter';
export { AppShellHeader } from './AppShellHeader/AppShellHeader';
export { AppShellNavbar } from './AppShellNavbar/AppShellNavbar';
export { AppShellSection } from './AppShellSection/AppShellSection';
export { AppShellMain } from './AppShellMain/AppShellMain';
export type { AppShellAsideConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellFooterConfiguration, AppShellResponsiveSize, AppShellCompoundProps, } from './AppShell.types';
export type { AppShellProps, AppShellCssVariables, AppShellFactory, AppShellStylesNames, } from './AppShell';
export type { AppShellAsideProps } from './AppShellAside/AppShellAside';
export type { AppShellFooterProps } from './AppShellFooter/AppShellFooter';
export type { AppShellHeaderProps } from './AppShellHeader/AppShellHeader';
export type { AppShellNavbarProps } from './AppShellNavbar/AppShellNavbar';
export type { AppShellSectionProps } from './AppShellSection/AppShellSection';
export type { AppShellMainProps } from './AppShellMain/AppShellMain';

View File

@@ -0,0 +1,6 @@
interface UseResizingInput {
transitionDuration: number | undefined;
disabled: boolean | undefined;
}
export declare function useResizing({ transitionDuration, disabled }: UseResizingInput): boolean;
export {};

View File

@@ -0,0 +1,21 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
export type AspectRatioStylesNames = 'root';
export type AspectRatioCssVariables = {
root: '--ar-ratio';
};
export interface AspectRatioProps extends BoxProps, StylesApiProps<AspectRatioFactory>, ElementProps<'div'> {
/** Aspect ratio, for example, `16 / 9`, `4 / 3`, `1920 / 1080` @default `1` */
ratio?: number;
}
export type AspectRatioFactory = Factory<{
props: AspectRatioProps;
ref: HTMLDivElement;
stylesNames: AspectRatioStylesNames;
vars: AspectRatioCssVariables;
}>;
export declare const AspectRatio: import("../..").MantineComponent<{
props: AspectRatioProps;
ref: HTMLDivElement;
stylesNames: AspectRatioStylesNames;
vars: AspectRatioCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { AspectRatio } from './AspectRatio';
export type { AspectRatioCssVariables, AspectRatioFactory, AspectRatioProps, AspectRatioStylesNames, } from './AspectRatio';

View File

@@ -0,0 +1,42 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
import { ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxStringData, ComboboxStringItem } from '../Combobox';
import { __BaseInputProps, __InputStylesNames, InputClearButtonProps, InputVariant } from '../Input';
import { ScrollAreaProps } from '../ScrollArea';
export type RenderAutocompleteOption = (input: ComboboxLikeRenderOptionInput<ComboboxStringItem>) => React.ReactNode;
export type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
export interface AutocompleteProps extends BoxProps, Omit<__BaseInputProps, 'pointer'>, Omit<ComboboxLikeProps, 'data'>, StylesApiProps<AutocompleteFactory>, ElementProps<'input', 'onChange' | 'size'> {
/** Data used to display options. Values must be unique. */
data?: ComboboxStringData;
/** Controlled component value */
value?: string;
/** Default value for uncontrolled component */
defaultValue?: string;
/** Called when value changes */
onChange?: (value: string) => void;
/** Function to render custom option content */
renderOption?: RenderAutocompleteOption;
/** Props passed to the underlying `ScrollArea` component in the dropdown */
scrollAreaProps?: ScrollAreaProps;
/** Called when the clear button is clicked */
onClear?: () => void;
/** Props passed to the clear button */
clearButtonProps?: InputClearButtonProps;
/** If set, the clear button is displayed when the component has a value @default `false` */
clearable?: boolean;
/** If set, the highlighted option is selected when the input loses focus @default `false` */
autoSelectOnBlur?: boolean;
/** If set, the dropdown opens when the input receives focus @default `true` */
openOnFocus?: boolean;
}
export type AutocompleteFactory = Factory<{
props: AutocompleteProps;
ref: HTMLInputElement;
stylesNames: AutocompleteStylesNames;
variant: InputVariant;
}>;
export declare const Autocomplete: import("../..").MantineComponent<{
props: AutocompleteProps;
ref: HTMLInputElement;
stylesNames: AutocompleteStylesNames;
variant: InputVariant;
}>;

View File

@@ -0,0 +1,2 @@
export { Autocomplete } from './Autocomplete';
export type { AutocompleteFactory, AutocompleteProps, AutocompleteStylesNames, RenderAutocompleteOption, } from './Autocomplete';

View File

@@ -0,0 +1,83 @@
import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
import { AvatarGroup } from './AvatarGroup/AvatarGroup';
export type AvatarStylesNames = 'root' | 'placeholder' | 'image';
export type AvatarVariant = 'filled' | 'light' | 'gradient' | 'outline' | 'transparent' | 'default' | 'white';
export type AvatarCssVariables = {
root: '--avatar-size' | '--avatar-radius' | '--avatar-bg' | '--avatar-color' | '--avatar-bd';
};
export interface AvatarProps extends BoxProps, StylesApiProps<AvatarFactory> {
/** Width and height of the avatar, numbers are converted to rem @default `'md'` */
size?: MantineSize | (string & {}) | number;
/** Key of `theme.radius` or any valid CSS value to set border-radius @default `'1000px'` */
radius?: MantineRadius;
/** Key of `theme.colors` or any valid CSS color @default `'gray'` */
color?: MantineColor | 'initials';
/** Gradient configuration for `variant="gradient"` @default `theme.defaultGradient` */
gradient?: MantineGradient;
/** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */
src?: string | null;
/** Image `alt` attribute, also used as `title` attribute for placeholder */
alt?: string;
/** Attributes passed down to `img` element */
imageProps?: React.ComponentPropsWithoutRef<'img'>;
/** Avatar placeholder, displayed when `src={null}` or when the image cannot be loaded */
children?: React.ReactNode;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
/** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
name?: string;
/** A list of colors that is used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark. */
allowedInitialsColors?: MantineColor[];
}
export type AvatarFactory = PolymorphicFactory<{
props: AvatarProps;
defaultRef: HTMLDivElement;
defaultComponent: 'div';
stylesNames: AvatarStylesNames;
vars: AvatarCssVariables;
variant: AvatarVariant;
staticComponents: {
Group: typeof AvatarGroup;
};
}>;
export declare const Avatar: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, AvatarProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(AvatarProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof AvatarProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (AvatarProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: AvatarProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: AvatarStylesNames;
vars: AvatarCssVariables;
variant: AvatarVariant;
staticComponents: {
Group: typeof AvatarGroup;
};
}> & import("../..").ComponentClasses<{
props: AvatarProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: AvatarStylesNames;
vars: AvatarCssVariables;
variant: AvatarVariant;
staticComponents: {
Group: typeof AvatarGroup;
};
}> & import("../..").PolymorphicComponentWithProps<{
props: AvatarProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: AvatarStylesNames;
vars: AvatarCssVariables;
variant: AvatarVariant;
staticComponents: {
Group: typeof AvatarGroup;
};
}> & {
Group: typeof AvatarGroup;
};

View File

@@ -0,0 +1,4 @@
export declare const AvatarGroupProvider: import("react").Provider<true | null>;
export declare function useAvatarGroupContext(): {
withinGroup: boolean;
};

View File

@@ -0,0 +1,21 @@
import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../../core';
export type AvatarGroupStylesNames = 'group';
export type AvatarGroupCssVariables = {
group: '--ag-spacing';
};
export interface AvatarGroupProps extends BoxProps, StylesApiProps<AvatarGroupFactory>, ElementProps<'div'> {
/** Negative space between Avatar components @default `'sm'` */
spacing?: MantineSpacing;
}
export type AvatarGroupFactory = Factory<{
props: AvatarGroupProps;
ref: HTMLDivElement;
stylesNames: AvatarGroupStylesNames;
vars: AvatarGroupCssVariables;
}>;
export declare const AvatarGroup: import("../../..").MantineComponent<{
props: AvatarGroupProps;
ref: HTMLDivElement;
stylesNames: AvatarGroupStylesNames;
vars: AvatarGroupCssVariables;
}>;

View File

@@ -0,0 +1 @@
export declare function AvatarPlaceholderIcon(props: React.ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

View File

@@ -0,0 +1,2 @@
import { MantineColor } from '../../../core';
export declare function getInitialsColor(name: string, colors?: MantineColor[]): import("../../..").DefaultMantineColor;

View File

@@ -0,0 +1 @@
export declare function getInitials(name: string, limit?: number): string;

View File

@@ -0,0 +1,4 @@
export { Avatar } from './Avatar';
export { AvatarGroup } from './AvatarGroup/AvatarGroup';
export type { AvatarCssVariables, AvatarFactory, AvatarProps, AvatarStylesNames, AvatarVariant, } from './Avatar';
export type { AvatarGroupCssVariables, AvatarGroupFactory, AvatarGroupProps, AvatarGroupStylesNames, } from './AvatarGroup/AvatarGroup';

View File

@@ -0,0 +1,45 @@
import { BoxProps, MantineRadius, PolymorphicFactory, StylesApiProps } from '../../core';
export type BackgroundImageStylesNames = 'root';
export type BackgroundImageCssVariables = {
root: '--bi-radius';
};
export interface BackgroundImageProps extends BoxProps, StylesApiProps<BackgroundImageFactory> {
/** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default `0` */
radius?: MantineRadius;
/** Image url */
src: string;
}
export type BackgroundImageFactory = PolymorphicFactory<{
props: BackgroundImageProps;
defaultRef: HTMLDivElement;
defaultComponent: 'div';
stylesNames: BackgroundImageStylesNames;
vars: BackgroundImageCssVariables;
}>;
export declare const BackgroundImage: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, BackgroundImageProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(BackgroundImageProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof BackgroundImageProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (BackgroundImageProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: BackgroundImageProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: BackgroundImageStylesNames;
vars: BackgroundImageCssVariables;
}> & import("../..").ComponentClasses<{
props: BackgroundImageProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: BackgroundImageStylesNames;
vars: BackgroundImageCssVariables;
}> & import("../..").PolymorphicComponentWithProps<{
props: BackgroundImageProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: BackgroundImageStylesNames;
vars: BackgroundImageCssVariables;
}> & Record<string, never>;

View File

@@ -0,0 +1,2 @@
export { BackgroundImage } from './BackgroundImage';
export type { BackgroundImageProps, BackgroundImageCssVariables, BackgroundImageFactory, BackgroundImageStylesNames, } from './BackgroundImage';

View File

@@ -0,0 +1,66 @@
import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
export type BadgeStylesNames = 'root' | 'section' | 'label';
export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'transparent' | 'white' | 'default' | 'gradient';
export type BadgeCssVariables = {
root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
};
export interface BadgeProps extends BoxProps, StylesApiProps<BadgeFactory> {
/** Controls `font-size`, `height` and horizontal `padding` @default `'md'` */
size?: MantineSize | (string & {});
/** If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed */
circle?: boolean;
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `'xl'` */
radius?: MantineRadius;
/** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor` */
color?: MantineColor;
/** Gradient configuration used when `variant=\"gradient\"` @default `theme.defaultGradient` */
gradient?: MantineGradient;
/** Content displayed on the left side of the badge label */
leftSection?: React.ReactNode;
/** Content displayed on the right side of the badge label */
rightSection?: React.ReactNode;
/** Determines whether Badge should take 100% of its parent width @default `false` */
fullWidth?: boolean;
/** Main badge content */
children?: React.ReactNode;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
}
export type BadgeFactory = PolymorphicFactory<{
props: BadgeProps;
defaultRef: HTMLDivElement;
defaultComponent: 'div';
stylesNames: BadgeStylesNames;
vars: BadgeCssVariables;
variant: BadgeVariant;
}>;
export declare const Badge: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, BadgeProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(BadgeProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof BadgeProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (BadgeProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: BadgeProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: BadgeStylesNames;
vars: BadgeCssVariables;
variant: BadgeVariant;
}> & import("../..").ComponentClasses<{
props: BadgeProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: BadgeStylesNames;
vars: BadgeCssVariables;
variant: BadgeVariant;
}> & import("../..").PolymorphicComponentWithProps<{
props: BadgeProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: BadgeStylesNames;
vars: BadgeCssVariables;
variant: BadgeVariant;
}> & Record<string, never>;

View File

@@ -0,0 +1,2 @@
export { Badge } from './Badge';
export type { BadgeCssVariables, BadgeFactory, BadgeProps, BadgeStylesNames, BadgeVariant, } from './Badge';

View File

@@ -0,0 +1,29 @@
import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
export type BlockquoteStylesNames = 'root' | 'icon' | 'cite';
export type BlockquoteCssVariables = {
root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';
};
export interface BlockquoteProps extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {
/** Blockquote icon, displayed at the top left side */
icon?: React.ReactNode;
/** Controls icon `width` and `height`, numbers are converted to rem @default `40` */
iconSize?: number | string;
/** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor` */
color?: MantineColor;
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Reference to a cited quote */
cite?: React.ReactNode;
}
export type BlockquoteFactory = Factory<{
props: BlockquoteProps;
ref: HTMLQuoteElement;
stylesNames: BlockquoteStylesNames;
vars: BlockquoteCssVariables;
}>;
export declare const Blockquote: import("../..").MantineComponent<{
props: BlockquoteProps;
ref: HTMLQuoteElement;
stylesNames: BlockquoteStylesNames;
vars: BlockquoteCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { Blockquote } from './Blockquote';
export type { BlockquoteCssVariables, BlockquoteFactory, BlockquoteProps, BlockquoteStylesNames, } from './Blockquote';

View File

@@ -0,0 +1,25 @@
import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
export type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';
export type BreadcrumbsCssVariables = {
root: '--bc-separator-margin';
};
export interface BreadcrumbsProps extends BoxProps, StylesApiProps<BreadcrumbsFactory>, ElementProps<'div'> {
/** Separator between children @default `'/'` */
separator?: React.ReactNode;
/** Controls spacing between separator and breadcrumb @default `'xs'` */
separatorMargin?: MantineSpacing;
/** React nodes that should be separated with `separator` */
children: React.ReactNode;
}
export type BreadcrumbsFactory = Factory<{
props: BreadcrumbsProps;
ref: HTMLDivElement;
stylesNames: BreadcrumbsStylesNames;
vars: BreadcrumbsCssVariables;
}>;
export declare const Breadcrumbs: import("../..").MantineComponent<{
props: BreadcrumbsProps;
ref: HTMLDivElement;
stylesNames: BreadcrumbsStylesNames;
vars: BreadcrumbsCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { Breadcrumbs } from './Breadcrumbs';
export type { BreadcrumbsCssVariables, BreadcrumbsFactory, BreadcrumbsProps, BreadcrumbsStylesNames, } from './Breadcrumbs';

View File

@@ -0,0 +1,31 @@
import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
export type BurgerStylesNames = 'root' | 'burger';
export type BurgerCssVariables = {
root: '--burger-color' | '--burger-size' | '--burger-line-size' | '--burger-transition-duration' | '--burger-transition-timing-function';
};
export interface BurgerProps extends BoxProps, StylesApiProps<BurgerFactory>, ElementProps<'button'> {
/** Controls burger `width` and `height`, numbers are converted to rem @default `'md'` */
size?: MantineSize | (string & {}) | number;
/** Controls height of lines, by default calculated based on `size` prop */
lineSize?: string | number;
/** Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light */
color?: MantineColor;
/** State of the burger, when `true` burger is transformed into X @default `false` */
opened?: boolean;
/** `transition-duration` property value in ms @default `300` */
transitionDuration?: number;
/** `transition-timing-function` property value @default `'ease'` */
transitionTimingFunction?: string;
}
export type BurgerFactory = Factory<{
props: BurgerProps;
ref: HTMLButtonElement;
stylesNames: BurgerStylesNames;
vars: BurgerCssVariables;
}>;
export declare const Burger: import("../..").MantineComponent<{
props: BurgerProps;
ref: HTMLButtonElement;
stylesNames: BurgerStylesNames;
vars: BurgerCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { Burger } from './Burger';
export type { BurgerCssVariables, BurgerFactory, BurgerProps, BurgerStylesNames } from './Burger';

View File

@@ -0,0 +1,95 @@
import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
import { LoaderProps } from '../Loader';
import { ButtonGroup } from './ButtonGroup/ButtonGroup';
import { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';
export type ButtonStylesNames = 'root' | 'inner' | 'loader' | 'section' | 'label';
export type ButtonVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient';
export type ButtonCssVariables = {
root: '--button-justify' | '--button-height' | '--button-padding-x' | '--button-fz' | '--button-radius' | '--button-bg' | '--button-hover' | '--button-hover-color' | '--button-color' | '--button-bd';
};
export interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {
'data-disabled'?: boolean;
/** Controls button `height`, `font-size` and horizontal `padding` @default `'sm'` */
size?: MantineSize | `compact-${MantineSize}` | (string & {});
/** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor` */
color?: MantineColor;
/** Sets `justify-content` of `inner` element, can be used to change distribution of sections and label @default `'center'` */
justify?: React.CSSProperties['justifyContent'];
/** Content displayed on the left side of the button label */
leftSection?: React.ReactNode;
/** Content displayed on the right side of the button label */
rightSection?: React.ReactNode;
/** If set, the button takes 100% width of its parent container @default `false` */
fullWidth?: boolean;
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Gradient configuration used when `variant="gradient"` @default `theme.defaultGradient` */
gradient?: MantineGradient;
/** Sets `disabled` attribute, applies disabled styles */
disabled?: boolean;
/** Button content */
children?: React.ReactNode;
/** If set, the `Loader` component is displayed over the button */
loading?: boolean;
/** Props added to the `Loader` component (only visible when `loading` prop is set) */
loaderProps?: LoaderProps;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
}
export type ButtonFactory = PolymorphicFactory<{
props: ButtonProps;
defaultRef: HTMLButtonElement;
defaultComponent: 'button';
stylesNames: ButtonStylesNames;
vars: ButtonCssVariables;
variant: ButtonVariant;
staticComponents: {
Group: typeof ButtonGroup;
GroupSection: typeof ButtonGroupSection;
};
}>;
export declare const Button: (<C = "button">(props: import("../..").PolymorphicComponentProps<C, ButtonProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ButtonProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof ButtonProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (ButtonProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: ButtonProps;
defaultRef: HTMLButtonElement;
defaultComponent: "button";
stylesNames: ButtonStylesNames;
vars: ButtonCssVariables;
variant: ButtonVariant;
staticComponents: {
Group: typeof ButtonGroup;
GroupSection: typeof ButtonGroupSection;
};
}> & import("../..").ComponentClasses<{
props: ButtonProps;
defaultRef: HTMLButtonElement;
defaultComponent: "button";
stylesNames: ButtonStylesNames;
vars: ButtonCssVariables;
variant: ButtonVariant;
staticComponents: {
Group: typeof ButtonGroup;
GroupSection: typeof ButtonGroupSection;
};
}> & import("../..").PolymorphicComponentWithProps<{
props: ButtonProps;
defaultRef: HTMLButtonElement;
defaultComponent: "button";
stylesNames: ButtonStylesNames;
vars: ButtonCssVariables;
variant: ButtonVariant;
staticComponents: {
Group: typeof ButtonGroup;
GroupSection: typeof ButtonGroupSection;
};
}> & {
Group: typeof ButtonGroup;
GroupSection: typeof ButtonGroupSection;
};

View File

@@ -0,0 +1,25 @@
import { BoxProps, Factory, StylesApiProps } from '../../../core';
export type ButtonGroupStylesNames = 'group';
export type ButtonGroupCssVariables = {
group: '--button-border-width';
};
export interface ButtonGroupProps extends BoxProps, StylesApiProps<ButtonGroupFactory> {
/** `Button` components */
children?: React.ReactNode;
/** Orientation of the group @default `horizontal` */
orientation?: 'horizontal' | 'vertical';
/** `border-width` of the child `Button` components. Numbers are converted to rem. @default `1` */
borderWidth?: number | string;
}
export type ButtonGroupFactory = Factory<{
props: ButtonGroupProps;
ref: HTMLDivElement;
stylesNames: ButtonGroupStylesNames;
vars: ButtonGroupCssVariables;
}>;
export declare const ButtonGroup: import("../../..").MantineComponent<{
props: ButtonGroupProps;
ref: HTMLDivElement;
stylesNames: ButtonGroupStylesNames;
vars: ButtonGroupCssVariables;
}>;

View File

@@ -0,0 +1,30 @@
import { BoxProps, ElementProps, Factory, MantineGradient, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
import type { ButtonVariant } from '../Button';
export type ButtonGroupSectionStylesNames = 'groupSection';
export type ButtonGroupSectionCssVariables = {
groupSection: '--section-radius' | '--section-bg' | '--section-color' | '--section-bd' | '--section-height' | '--section-padding-x' | '--section-fz';
};
export interface ButtonGroupSectionProps extends BoxProps, StylesApiProps<ButtonGroupSectionFactory>, ElementProps<'div'> {
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Gradient configuration used when `variant="gradient"` @default `theme.defaultGradient` */
gradient?: MantineGradient;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
/** Controls section `height`, `font-size` and horizontal `padding` @default `'sm'` */
size?: MantineSize | `compact-${MantineSize}` | (string & {});
}
export type ButtonGroupSectionFactory = Factory<{
props: ButtonGroupSectionProps;
ref: HTMLDivElement;
stylesNames: ButtonGroupSectionStylesNames;
vars: ButtonGroupSectionCssVariables;
variant: ButtonVariant;
}>;
export declare const ButtonGroupSection: import("../../..").MantineComponent<{
props: ButtonGroupSectionProps;
ref: HTMLDivElement;
stylesNames: ButtonGroupSectionStylesNames;
vars: ButtonGroupSectionCssVariables;
variant: ButtonVariant;
}>;

View File

@@ -0,0 +1,6 @@
export { Button } from './Button';
export { ButtonGroup } from './ButtonGroup/ButtonGroup';
export { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';
export type { ButtonProps, ButtonStylesNames, ButtonFactory, ButtonCssVariables, ButtonVariant, } from './Button';
export type { ButtonGroupProps, ButtonGroupCssVariables, ButtonGroupStylesNames, ButtonGroupFactory, } from './ButtonGroup/ButtonGroup';
export type { ButtonGroupSectionProps, ButtonGroupSectionCssVariables, ButtonGroupSectionStylesNames, ButtonGroupSectionFactory, } from './ButtonGroupSection/ButtonGroupSection';

View File

@@ -0,0 +1,10 @@
import { GetStylesApi } from '../../core';
import type { CardFactory } from './Card';
interface CardContextValue {
getStyles: GetStylesApi<CardFactory>;
}
export declare const CardProvider: ({ children, value }: {
value: CardContextValue;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useCardContext: () => CardContextValue;
export {};

View File

@@ -0,0 +1,66 @@
import { BoxProps, MantineRadius, MantineShadow, MantineSpacing, PolymorphicFactory, StylesApiProps } from '../../core';
import { CardSection } from './CardSection/CardSection';
export type CardStylesNames = 'root' | 'section';
export type CardCssVariables = {
root: '--card-padding';
};
export interface CardProps extends BoxProps, StylesApiProps<CardFactory> {
/** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */
shadow?: MantineShadow;
/** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Adds border to the card */
withBorder?: boolean;
/** Key of `theme.spacing` or any valid CSS value to set padding @default `'md'` */
padding?: MantineSpacing;
/** Card content */
children?: React.ReactNode;
}
export type CardFactory = PolymorphicFactory<{
props: CardProps;
defaultRef: HTMLDivElement;
defaultComponent: 'div';
stylesNames: CardStylesNames;
vars: CardCssVariables;
staticComponents: {
Section: typeof CardSection;
};
}>;
export declare const Card: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, CardProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(CardProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof CardProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (CardProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: CardProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CardStylesNames;
vars: CardCssVariables;
staticComponents: {
Section: typeof CardSection;
};
}> & import("../..").ComponentClasses<{
props: CardProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CardStylesNames;
vars: CardCssVariables;
staticComponents: {
Section: typeof CardSection;
};
}> & import("../..").PolymorphicComponentWithProps<{
props: CardProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CardStylesNames;
vars: CardCssVariables;
staticComponents: {
Section: typeof CardSection;
};
}> & {
Section: typeof CardSection;
};

View File

@@ -0,0 +1,42 @@
import { BoxProps, CompoundStylesApiProps, PolymorphicFactory } from '../../../core';
export type CardSectionStylesNames = 'section';
export interface CardSectionProps extends BoxProps, CompoundStylesApiProps<CardSectionFactory> {
/** Adds border to the root element */
withBorder?: boolean;
/** If set, the section inherits padding from the parent `Card` */
inheritPadding?: boolean;
}
export type CardSectionFactory = PolymorphicFactory<{
props: CardSectionProps;
defaultRef: HTMLDivElement;
defaultComponent: 'div';
stylesNames: CardSectionStylesNames;
compound: true;
}>;
export declare const CardSection: (<C = "div">(props: import("../../..").PolymorphicComponentProps<C, CardSectionProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(CardSectionProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof CardSectionProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (CardSectionProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../../..").ThemeExtend<{
props: CardSectionProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CardSectionStylesNames;
compound: true;
}> & import("../../..").ComponentClasses<{
props: CardSectionProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CardSectionStylesNames;
compound: true;
}> & import("../../..").PolymorphicComponentWithProps<{
props: CardSectionProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CardSectionStylesNames;
compound: true;
}> & Record<string, never>;

View File

@@ -0,0 +1,4 @@
export { Card } from './Card';
export { CardSection } from './CardSection/CardSection';
export type { CardCssVariables, CardFactory, CardProps, CardStylesNames } from './Card';
export type { CardSectionProps } from './CardSection/CardSection';

View File

@@ -0,0 +1,38 @@
import { BoxProps, PolymorphicFactory, StylesApiProps } from '../../core';
export type CenterStylesNames = 'root';
export interface CenterProps extends BoxProps, StylesApiProps<CenterFactory> {
/** Content to center */
children?: React.ReactNode;
/** If set, `inline-flex` is used instead of `flex` */
inline?: boolean;
}
export type CenterFactory = PolymorphicFactory<{
props: CenterProps;
defaultRef: HTMLDivElement;
defaultComponent: 'div';
stylesNames: CenterStylesNames;
}>;
export declare const Center: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, CenterProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(CenterProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof CenterProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (CenterProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: CenterProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CenterStylesNames;
}> & import("../..").ComponentClasses<{
props: CenterProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CenterStylesNames;
}> & import("../..").PolymorphicComponentWithProps<{
props: CenterProps;
defaultRef: HTMLDivElement;
defaultComponent: "div";
stylesNames: CenterStylesNames;
}> & Record<string, never>;

View File

@@ -0,0 +1,2 @@
export { Center } from './Center';
export type { CenterProps, CenterFactory, CenterStylesNames } from './Center';

View File

@@ -0,0 +1,8 @@
export interface CheckboxIconProps extends React.ComponentPropsWithoutRef<'svg'> {
indeterminate: boolean | undefined;
}
export interface CheckIconProps extends React.ComponentPropsWithoutRef<'svg'> {
size?: number | string;
}
export declare function CheckIcon({ size, style, ...others }: CheckIconProps): import("react/jsx-runtime").JSX.Element;
export declare function CheckboxIcon({ indeterminate, ...others }: CheckboxIconProps): import("react/jsx-runtime").JSX.Element;

View File

@@ -0,0 +1,67 @@
import { BoxProps, DataAttributes, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
import { InlineInputStylesNames } from '../../utils/InlineInput';
import { CheckboxCard } from './CheckboxCard/CheckboxCard';
import { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
import { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';
export type CheckboxVariant = 'filled' | 'outline';
export type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;
export type CheckboxCssVariables = {
root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
};
export interface CheckboxProps extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {
/** Unique input id */
id?: string;
/** `label` associated with the checkbox */
label?: React.ReactNode;
/** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default `theme.primaryColor` */
color?: MantineColor;
/** Controls size of the component @default `'sm'` */
size?: MantineSize | (string & {});
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Props passed down to the root element */
wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
/** Position of the label relative to the input @default `'right'` */
labelPosition?: 'left' | 'right';
/** Description displayed below the label */
description?: React.ReactNode;
/** Error message displayed below the label */
error?: React.ReactNode;
/** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */
indeterminate?: boolean;
/** Icon displayed when checkbox is in checked or indeterminate state */
icon?: React.FC<{
indeterminate: boolean | undefined;
className: string;
}>;
/** Root element ref */
rootRef?: React.ForwardedRef<HTMLDivElement>;
/** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */
iconColor?: MantineColor;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
}
export type CheckboxFactory = Factory<{
props: CheckboxProps;
ref: HTMLInputElement;
stylesNames: CheckboxStylesNames;
vars: CheckboxCssVariables;
variant: CheckboxVariant;
staticComponents: {
Group: typeof CheckboxGroup;
Indicator: typeof CheckboxIndicator;
Card: typeof CheckboxCard;
};
}>;
export declare const Checkbox: import("../..").MantineComponent<{
props: CheckboxProps;
ref: HTMLInputElement;
stylesNames: CheckboxStylesNames;
vars: CheckboxCssVariables;
variant: CheckboxVariant;
staticComponents: {
Group: typeof CheckboxGroup;
Indicator: typeof CheckboxIndicator;
Card: typeof CheckboxCard;
};
}>;

View File

@@ -0,0 +1,7 @@
export interface CheckboxCardContextValue {
checked: boolean;
}
export declare const CheckboxCardProvider: ({ children, value }: {
value: CheckboxCardContextValue;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useCheckboxCardContext: () => CheckboxCardContextValue | null;

View File

@@ -0,0 +1,31 @@
import { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from '../../../core';
export type CheckboxCardStylesNames = 'card';
export type CheckboxCardCssVariables = {
card: '--card-radius';
};
export interface CheckboxCardProps extends BoxProps, StylesApiProps<CheckboxCardFactory>, ElementProps<'button', 'onChange'> {
/** Controlled component value */
checked?: boolean;
/** Uncontrolled component default value */
defaultChecked?: boolean;
/** Called when value changes */
onChange?: (checked: boolean) => void;
/** Adds border to the root element */
withBorder?: boolean;
/** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Value of the checkbox, used with `Checkbox.Group` */
value?: string;
}
export type CheckboxCardFactory = Factory<{
props: CheckboxCardProps;
ref: HTMLButtonElement;
stylesNames: CheckboxCardStylesNames;
vars: CheckboxCardCssVariables;
}>;
export declare const CheckboxCard: import("../../..").MantineComponent<{
props: CheckboxCardProps;
ref: HTMLButtonElement;
stylesNames: CheckboxCardStylesNames;
vars: CheckboxCardCssVariables;
}>;

View File

@@ -0,0 +1,10 @@
import { MantineSize } from '../../core';
interface CheckboxGroupContextValue {
value: string[];
onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;
size: MantineSize | (string & {}) | undefined;
disabled?: boolean;
}
export declare const CheckboxGroupProvider: import("react").Provider<CheckboxGroupContextValue | null>;
export declare const useCheckboxGroupContext: () => CheckboxGroupContextValue | null;
export {};

View File

@@ -0,0 +1,31 @@
import { DataAttributes, Factory, MantineSize } from '../../../core';
import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
export type CheckboxGroupStylesNames = InputWrapperStylesNames;
export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'onChange'> {
/** `Checkbox` components and any other elements */
children: React.ReactNode;
/** Controlled component value */
value?: string[];
/** Default value for uncontrolled component */
defaultValue?: string[];
/** Called with an array of selected checkboxes values when value changes */
onChange?: (value: string[]) => void;
/** Props passed down to the root element (`Input.Wrapper` component) */
wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
/** Controls size of the `Input.Wrapper` @default `'sm'` */
size?: MantineSize | (string & {});
/** If set, value cannot be changed */
readOnly?: boolean;
/** Sets `disabled` attribute, prevents interactions */
disabled?: boolean;
}
export type CheckboxGroupFactory = Factory<{
props: CheckboxGroupProps;
ref: HTMLDivElement;
stylesNames: CheckboxGroupStylesNames;
}>;
export declare const CheckboxGroup: import("../../..").MantineComponent<{
props: CheckboxGroupProps;
ref: HTMLDivElement;
stylesNames: CheckboxGroupStylesNames;
}>;

View File

@@ -0,0 +1,43 @@
import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
export type CheckboxIndicatorStylesNames = 'indicator' | 'icon';
export type CheckboxIndicatorVariant = 'filled' | 'outline';
export type CheckboxIndicatorCssVariables = {
indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
};
export interface CheckboxIndicatorProps extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {
/** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default `theme.primaryColor` */
color?: MantineColor;
/** Controls size of the component @default `'sm'` */
size?: MantineSize | (string & {});
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */
iconColor?: MantineColor;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
/** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */
indeterminate?: boolean;
/** Icon displayed when checkbox is in checked or indeterminate state */
icon?: React.FC<{
indeterminate: boolean | undefined;
className: string;
}>;
/** Determines whether the component should have checked styles */
checked?: boolean;
/** Determines whether the component should have disabled styles */
disabled?: boolean;
}
export type CheckboxIndicatorFactory = Factory<{
props: CheckboxIndicatorProps;
ref: HTMLDivElement;
stylesNames: CheckboxIndicatorStylesNames;
vars: CheckboxIndicatorCssVariables;
variant: CheckboxIndicatorVariant;
}>;
export declare const CheckboxIndicator: import("../../..").MantineComponent<{
props: CheckboxIndicatorProps;
ref: HTMLDivElement;
stylesNames: CheckboxIndicatorStylesNames;
vars: CheckboxIndicatorCssVariables;
variant: CheckboxIndicatorVariant;
}>;

View File

@@ -0,0 +1,13 @@
export { Checkbox } from './Checkbox';
export { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
export { CheckIcon } from './CheckIcon';
export { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';
export { CheckboxCard } from './CheckboxCard/CheckboxCard';
export { useCheckboxCardContext } from './CheckboxCard/CheckboxCard.context';
export { useCheckboxGroupContext } from './CheckboxGroup.context';
export type { CheckboxIconProps, CheckIconProps } from './CheckIcon';
export type { CheckboxCardContextValue } from './CheckboxCard/CheckboxCard.context';
export type { CheckboxCssVariables, CheckboxFactory, CheckboxProps, CheckboxStylesNames, CheckboxVariant, } from './Checkbox';
export type { CheckboxGroupFactory, CheckboxGroupProps, CheckboxGroupStylesNames, } from './CheckboxGroup/CheckboxGroup';
export type { CheckboxIndicatorCssVariables, CheckboxIndicatorFactory, CheckboxIndicatorProps, CheckboxIndicatorStylesNames, CheckboxIndicatorVariant, } from './CheckboxIndicator/CheckboxIndicator';
export type { CheckboxCardCssVariables, CheckboxCardProps, CheckboxCardFactory, CheckboxCardStylesNames, } from './CheckboxCard/CheckboxCard';

View File

@@ -0,0 +1,55 @@
import { BoxProps, DataAttributes, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
import { ChipGroup } from './ChipGroup/ChipGroup';
export type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';
export type ChipVariant = 'outline' | 'filled' | 'light';
export type ChipCssVariables = {
root: '--chip-fz' | '--chip-size' | '--chip-icon-size' | '--chip-padding' | '--chip-checked-padding' | '--chip-radius' | '--chip-bg' | '--chip-hover' | '--chip-color' | '--chip-bd' | '--chip-spacing';
};
export interface ChipProps extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' | 'onChange'> {
/** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `'xl'` */
radius?: MantineRadius;
/** Controls various properties related to component size @default `'sm'` */
size?: MantineSize;
/** Chip input type @default `'checkbox'` */
type?: 'radio' | 'checkbox';
/** `label` element associated with the input */
children: React.ReactNode;
/** Checked state for controlled component */
checked?: boolean;
/** Default checked state for uncontrolled component */
defaultChecked?: boolean;
/** Calls when checked state changes */
onChange?: (checked: boolean) => void;
/** Controls components colors based on `variant` prop. Key of `theme.colors` or any valid CSS color. @default `theme.primaryColor` */
color?: MantineColor;
/** Unique input id */
id?: string;
/** Props passed down to the root element */
wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
/** Any element or component to replace default icon */
icon?: React.ReactNode;
/** Assigns ref of the root element */
rootRef?: React.ForwardedRef<HTMLDivElement>;
/** If set, adjusts text color based on background color for `filled` variant */
autoContrast?: boolean;
}
export type ChipFactory = Factory<{
props: ChipProps;
ref: HTMLInputElement;
stylesNames: ChipStylesNames;
vars: ChipCssVariables;
variant: ChipVariant;
staticComponents: {
Group: typeof ChipGroup;
};
}>;
export declare const Chip: import("../..").MantineComponent<{
props: ChipProps;
ref: HTMLInputElement;
stylesNames: ChipStylesNames;
vars: ChipCssVariables;
variant: ChipVariant;
staticComponents: {
Group: typeof ChipGroup;
};
}>;

View File

@@ -0,0 +1,10 @@
interface ChipGroupContextValue {
isChipSelected: (value: string) => boolean;
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
multiple: boolean | undefined;
}
export declare const ChipGroupProvider: ({ children, value }: {
value: ChipGroupContextValue;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useChipGroupContext: () => ChipGroupContextValue | null;
export {};

View File

@@ -0,0 +1,16 @@
export interface ChipGroupProps<T extends boolean = false> {
/** If set, multiple values can be selected */
multiple?: T;
/** Controlled component value */
value?: T extends true ? string[] : string | null;
/** Uncontrolled component initial value */
defaultValue?: T extends true ? string[] : string | null;
/** Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. */
onChange?: (value: T extends true ? string[] : string) => void;
/** `Chip` components and any other elements */
children?: React.ReactNode;
}
export declare function ChipGroup<T extends boolean>(props: ChipGroupProps<T>): import("react/jsx-runtime").JSX.Element;
export declare namespace ChipGroup {
var displayName: string;
}

View File

@@ -0,0 +1,4 @@
export { Chip } from './Chip';
export { ChipGroup } from './ChipGroup/ChipGroup';
export type { ChipCssVariables, ChipFactory, ChipProps, ChipStylesNames, ChipVariant, } from './Chip';
export type { ChipGroupProps } from './ChipGroup/ChipGroup';

View File

@@ -0,0 +1,62 @@
import { BoxProps, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
export type CloseButtonVariant = 'subtle' | 'transparent';
export type CloseButtonStylesNames = 'root';
export type CloseButtonCssVariables = {
root: '--cb-icon-size' | '--cb-size' | '--cb-radius';
};
export interface __CloseButtonProps {
'data-disabled'?: boolean;
/** Controls width and height of the button. Numbers are converted to rem. @default `'md'` */
size?: MantineSize | (string & {}) | number;
/** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default `theme.defaultRadius` */
radius?: MantineRadius;
/** Sets `disabled` attribute, assigns disabled styles */
disabled?: boolean;
/** `X` icon `width` and `height` @default `70%` */
iconSize?: number | string;
/** Content rendered inside the button. For example `VisuallyHidden` with label for screen readers. */
children?: React.ReactNode;
/** React node to replace the default close icon. If set, `iconSize` prop is ignored. */
icon?: React.ReactNode;
}
export interface CloseButtonProps extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {
__staticSelector?: string;
}
export type CloseButtonFactory = PolymorphicFactory<{
props: CloseButtonProps;
defaultComponent: 'button';
defaultRef: HTMLButtonElement;
stylesNames: CloseButtonStylesNames;
variant: CloseButtonVariant;
vars: CloseButtonCssVariables;
}>;
export declare const CloseButton: (<C = "button">(props: import("../..").PolymorphicComponentProps<C, CloseButtonProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(CloseButtonProps & {
component?: any;
} & Omit<Omit<any, "ref">, "component" | keyof CloseButtonProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (CloseButtonProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
props: CloseButtonProps;
defaultComponent: "button";
defaultRef: HTMLButtonElement;
stylesNames: CloseButtonStylesNames;
variant: CloseButtonVariant;
vars: CloseButtonCssVariables;
}> & import("../..").ComponentClasses<{
props: CloseButtonProps;
defaultComponent: "button";
defaultRef: HTMLButtonElement;
stylesNames: CloseButtonStylesNames;
variant: CloseButtonVariant;
vars: CloseButtonCssVariables;
}> & import("../..").PolymorphicComponentWithProps<{
props: CloseButtonProps;
defaultComponent: "button";
defaultRef: HTMLButtonElement;
stylesNames: CloseButtonStylesNames;
variant: CloseButtonVariant;
vars: CloseButtonCssVariables;
}> & Record<string, never>;

View File

@@ -0,0 +1,5 @@
export interface CloseIconProps extends React.ComponentPropsWithoutRef<'svg'> {
/** Icon width and height, `var(--icon-size)` by default */
size?: string;
}
export declare const CloseIcon: import("react").ForwardRefExoticComponent<CloseIconProps & import("react").RefAttributes<SVGSVGElement>>;

View File

@@ -0,0 +1,4 @@
export { CloseIcon } from './CloseIcon';
export { CloseButton } from './CloseButton';
export type { CloseButtonProps, CloseButtonStylesNames, CloseButtonFactory, CloseButtonVariant, CloseButtonCssVariables, __CloseButtonProps, } from './CloseButton';
export type { CloseIconProps } from './CloseIcon';

View File

@@ -0,0 +1,23 @@
import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
export type CodeStylesNames = 'root';
export type CodeCssVariables = {
root: '--code-bg';
};
export interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, ElementProps<'code'> {
/** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. */
color?: MantineColor;
/** If set, code is rendered in `pre` */
block?: boolean;
}
export type CodeFactory = Factory<{
props: CodeProps;
ref: HTMLElement;
stylesNames: CodeStylesNames;
vars: CodeCssVariables;
}>;
export declare const Code: import("../..").MantineComponent<{
props: CodeProps;
ref: HTMLElement;
stylesNames: CodeStylesNames;
vars: CodeCssVariables;
}>;

View File

@@ -0,0 +1,2 @@
export { Code } from './Code';
export type { CodeProps, CodeCssVariables, CodeFactory, CodeStylesNames } from './Code';

View File

@@ -0,0 +1,23 @@
import { BoxProps, Factory } from '../../core';
export interface CollapseProps extends BoxProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof BoxProps> {
/** Opened state */
in: boolean;
/** Called each time transition ends */
onTransitionEnd?: () => void;
/** Transition duration in ms @default `200` */
transitionDuration?: number;
/** Transition timing function @default `ease` */
transitionTimingFunction?: string;
/** Determines whether opacity should be animated @default `true` */
animateOpacity?: boolean;
/** Keep element in DOM when collapsed, useful for nested collapses */
keepMounted?: boolean;
}
export type CollapseFactory = Factory<{
props: CollapseProps;
ref: HTMLDivElement;
}>;
export declare const Collapse: import("../..").MantineComponent<{
props: CollapseProps;
ref: HTMLDivElement;
}>;

View File

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

View File

@@ -0,0 +1,23 @@
import React from 'react';
import { CSSProperties } from '../../core';
export declare function getElementHeight(el: React.RefObject<HTMLElement | null> | {
current?: {
scrollHeight: number;
};
}): number | "auto";
interface UseCollapse {
opened: boolean;
transitionDuration?: number;
transitionTimingFunction?: string;
onTransitionEnd?: () => void;
keepMounted?: boolean;
}
interface GetCollapseProps {
[key: string]: unknown;
style?: CSSProperties;
onTransitionEnd?: (e: TransitionEvent) => void;
refKey?: string;
ref?: React.ForwardedRef<HTMLDivElement>;
}
export declare function useCollapse({ transitionDuration, transitionTimingFunction, onTransitionEnd, opened, keepMounted, }: UseCollapse): (props: GetCollapseProps) => Record<string, any>;
export {};

View File

@@ -0,0 +1,42 @@
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
import { __ColorPickerProps, ColorPickerStylesNames } from '../ColorPicker';
import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
import { PopoverProps } from '../Popover';
export type ColorInputStylesNames = 'dropdown' | 'eyeDropperButton' | 'eyeDropperIcon' | 'colorPreview' | ColorPickerStylesNames | __InputStylesNames;
export type ColorInputCssVariables = {
eyeDropperIcon: '--ci-eye-dropper-icon-size';
eyeDropperButton: '--ci-button-size';
colorPreview: '--ci-preview-size';
};
export interface ColorInputProps extends BoxProps, __BaseInputProps, __ColorPickerProps, StylesApiProps<ColorInputFactory>, ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {
/** If input is not allowed, the user can only pick value with color picker and swatches */
disallowInput?: boolean;
/** If set, the input value resets to the last known valid value when the input loses focus @default `true` */
fixOnBlur?: boolean;
/** Props passed down to the `Popover` component */
popoverProps?: PopoverProps;
/** If set, the preview color swatch is displayed in the left section of the input @default `true` */
withPreview?: boolean;
/** If set, the eye dropper button is displayed in the right section @default `true` */
withEyeDropper?: boolean;
/** An icon to replace the default eye dropper icon */
eyeDropperIcon?: React.ReactNode;
/** If set, the dropdown is closed when one of the color swatches is clicked @default `false` */
closeOnColorSwatchClick?: boolean;
/** Props passed down to the eye dropper button */
eyeDropperButtonProps?: Record<string, any>;
}
export type ColorInputFactory = Factory<{
props: ColorInputProps;
ref: HTMLInputElement;
stylesNames: ColorInputStylesNames;
vars: ColorInputCssVariables;
variant: InputVariant;
}>;
export declare const ColorInput: import("../..").MantineComponent<{
props: ColorInputProps;
ref: HTMLInputElement;
stylesNames: ColorInputStylesNames;
vars: ColorInputCssVariables;
variant: InputVariant;
}>;

View File

@@ -0,0 +1 @@
export declare function EyeDropperIcon({ style, ...others }: React.ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

View File

@@ -0,0 +1,2 @@
export { ColorInput } from './ColorInput';
export type { ColorInputFactory, ColorInputProps, ColorInputStylesNames, ColorInputCssVariables, } from './ColorInput';

View File

@@ -0,0 +1,5 @@
import { ColorSliderProps } from '../ColorSlider/ColorSlider';
export interface AlphaSliderProps extends Omit<ColorSliderProps, 'maxValue' | 'overlays' | 'round'> {
color: string;
}
export declare const AlphaSlider: import("react").ForwardRefExoticComponent<AlphaSliderProps & import("react").RefAttributes<HTMLDivElement>>;

View File

@@ -0,0 +1,11 @@
import { GetStylesApi } from '../../core';
import type { ColorPickerFactory } from './ColorPicker';
interface ColorPickerContextValue {
getStyles: GetStylesApi<ColorPickerFactory>;
unstyled: boolean | undefined;
}
export declare const ColorPickerProvider: ({ children, value }: {
value: ColorPickerContextValue;
children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element, useColorPickerContext: () => ColorPickerContextValue | null;
export {};

View File

@@ -0,0 +1,53 @@
import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../core';
import { ColorFormat } from './ColorPicker.types';
export type ColorPickerStylesNames = 'wrapper' | 'preview' | 'body' | 'sliders' | 'slider' | 'sliderOverlay' | 'thumb' | 'saturation' | 'thumb' | 'saturationOverlay' | 'thumb' | 'swatches' | 'swatch';
export type ColorPickerCssVariables = {
wrapper: '--cp-preview-size' | '--cp-width' | '--cp-body-spacing' | '--cp-swatch-size' | '--cp-thumb-size' | '--cp-saturation-height';
};
export interface __ColorPickerProps {
/** Controlled component value */
value?: string;
/** Uncontrolled component default value */
defaultValue?: string;
/** Called when value changes */
onChange?: (value: string) => void;
/** Called when the user stops dragging one of the sliders or changes the value with keyboard */
onChangeEnd?: (value: string) => void;
/** Color format @default `'hex'` */
format?: ColorFormat;
/** Determines whether the color picker should be displayed @default `true` */
withPicker?: boolean;
/** A list of colors used to display swatches list below the color picker */
swatches?: string[];
/** Number of swatches per row @default `7` */
swatchesPerRow?: number;
/** Controls size of hue, alpha and saturation sliders @default `'md'` */
size?: MantineSize | (string & {});
}
export interface ColorPickerProps extends BoxProps, __ColorPickerProps, StylesApiProps<ColorPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
__staticSelector?: string;
/** If set, the component takes 100% width of its container @default `false` */
fullWidth?: boolean;
/** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default `true` */
focusable?: boolean;
/** Saturation slider `aria-label` */
saturationLabel?: string;
/** Hue slider `aria-label` */
hueLabel?: string;
/** Alpha slider `aria-label` */
alphaLabel?: string;
/** Called when one of the color swatches is clicked */
onColorSwatchClick?: (color: string) => void;
}
export type ColorPickerFactory = Factory<{
props: ColorPickerProps;
ref: HTMLDivElement;
stylesNames: ColorPickerStylesNames;
vars: ColorPickerCssVariables;
}>;
export declare const ColorPicker: import("../..").MantineComponent<{
props: ColorPickerProps;
ref: HTMLDivElement;
stylesNames: ColorPickerStylesNames;
vars: ColorPickerCssVariables;
}>;

Some files were not shown because too many files have changed in this diff Show More