@paolojulian.dev/design-system 4.2.2 → 4.4.0

package/dist/index.d.ts

@@ -1,5 +1,8 @@
+import { AnchorHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import { ClassProp } from 'class-variance-authority/types';
 import { CSSProperties } from 'react';
+import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
@@ -7,19 +10,441 @@ import { InputHTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
 
+export declare const PBadge: ForwardRefExoticComponent<    {
+as?: ElementType;
+variant?: PBadgeVariant;
+size?: PBadgeSize;
+appearance?: PBadgeAppearance;
+leftIcon?: ReactNode;
+rightIcon?: ReactNode;
+children: ReactNode;
+className?: string;
+} & Omit<HTMLAttributes<HTMLElement>, "children" | "className" | "color"> & RefAttributes<HTMLElement>>;
+
+export declare type PBadgeAppearance = 'subtle' | 'solid' | 'outline';
+
+export declare type PBadgeProps = {
+    as?: ElementType;
+    variant?: PBadgeVariant;
+    size?: PBadgeSize;
+    appearance?: PBadgeAppearance;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    children: ReactNode;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'color'>;
+
+export declare type PBadgeRef = HTMLElement;
+
+export declare type PBadgeSize = 'sm' | 'md';
+
+export declare type PBadgeVariant = 'primary' | 'danger' | 'warning' | 'success' | 'info' | 'neutral';
+
+export declare const PButton: ForwardRefExoticComponent<PButtonProps & RefAttributes<PButtonRef>>;
+
+declare type PButtonAsAnchorProps = PButtonBaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
+    href: string;
+    disabled?: boolean;
+    type?: never;
+};
+
+declare type PButtonAsButtonProps = PButtonBaseProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & {
+    href?: undefined;
+};
+
+declare type PButtonBaseProps = {
+    variant?: PButtonVariant;
+    size?: PButtonSize;
+    fullWidth?: boolean;
+    isActive?: boolean;
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+
+export declare type PButtonProps = PButtonAsButtonProps | PButtonAsAnchorProps;
+
+export declare type PButtonRef = HTMLButtonElement | HTMLAnchorElement;
+
+declare type PButtonSize = 'sm' | 'md' | 'lg';
+
+declare type PButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost';
+
+export declare const PCard: ForwardRefExoticComponent<PCardProps & RefAttributes<HTMLElement>>;
+
+declare type PCardAnchorProps = PCardBaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children' | 'style' | 'title'> & {
+    href: string;
+};
+
+declare type PCardArticleProps = PCardBaseProps & Omit<HTMLAttributes<HTMLElement>, 'className' | 'children' | 'style' | 'title'> & {
+    href?: undefined;
+};
+
+declare type PCardBaseProps = {
+    prefix?: ReactNode;
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    media?: ReactNode;
+    actions?: ReactNode;
+    density?: PCardDensity;
+    fullWidth?: boolean;
+    width?: CSSProperties['width'];
+    minWidth?: CSSProperties['minWidth'];
+    height?: CSSProperties['height'];
+    minHeight?: CSSProperties['minHeight'];
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+
+declare type PCardDensity = 'compact' | 'default' | 'spacious';
+
+export declare type PCardProps = PCardArticleProps | PCardAnchorProps;
+
+export declare type PCardRef = HTMLElement;
+
+export declare const PDatePicker: ForwardRefExoticComponent<    {
+label: string;
+value?: string;
+defaultValue?: string;
+onValueChange?: (value: string, details: {
+date: Date | null;
+source: PDatePickerChangeSource;
+}) => void;
+presets?: PDatePickerPreset[];
+customLabel?: string;
+showCustom?: boolean;
+presetColumns?: PDatePickerPresetColumns;
+placeholder?: string;
+helperText?: string;
+isError?: boolean;
+errorMessage?: string;
+min?: string;
+max?: string;
+name?: string;
+disabled?: boolean;
+readOnly?: boolean;
+required?: boolean;
+locale?: string;
+weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "defaultValue" | "onChange"> & RefAttributes<HTMLDivElement>>;
+
+export declare type PDatePickerChangeSource = 'preset' | 'calendar';
+
+export declare type PDatePickerPreset = {
+    label: string;
+    value: string | Date | (() => string | Date);
+};
+
+export declare type PDatePickerPresetColumns = 2 | 3 | 4 | 'auto';
+
+export declare const PDatePickerPresets: {
+    today: {
+        label: string;
+        value: () => Date;
+    };
+    yesterday: {
+        label: string;
+        value: () => Date;
+    };
+    tomorrow: {
+        label: string;
+        value: () => Date;
+    };
+    startOfMonth: {
+        label: string;
+        value: () => Date;
+    };
+    endOfMonth: {
+        label: string;
+        value: () => Date;
+    };
+};
+
+export declare type PDatePickerProps = {
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, details: {
+        date: Date | null;
+        source: PDatePickerChangeSource;
+    }) => void;
+    presets?: PDatePickerPreset[];
+    customLabel?: string;
+    showCustom?: boolean;
+    presetColumns?: PDatePickerPresetColumns;
+    placeholder?: string;
+    helperText?: string;
+    isError?: boolean;
+    errorMessage?: string;
+    min?: string;
+    max?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'defaultValue' | 'onChange'>;
+
+export declare type PDatePickerRef = HTMLDivElement;
+
+export declare const PDateRangePicker: ForwardRefExoticComponent<    {
+label: string;
+value?: PDateRangeValue;
+defaultValue?: PDateRangeValue;
+onValueChange?: (value: PDateRangeValue, details: {
+startDate: Date | null;
+endDate: Date | null;
+source: PDateRangePickerChangeSource;
+}) => void;
+presets?: PDateRangePickerPreset[];
+customLabel?: string;
+showCustom?: boolean;
+presetColumns?: PDateRangePickerPresetColumns;
+placeholder?: string;
+helperText?: string;
+isError?: boolean;
+errorMessage?: string;
+min?: string;
+max?: string;
+nameStart?: string;
+nameEnd?: string;
+disabled?: boolean;
+readOnly?: boolean;
+required?: boolean;
+locale?: string;
+weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "className" | "defaultValue" | "onChange"> & RefAttributes<HTMLDivElement>>;
+
+export declare type PDateRangePickerChangeSource = 'preset' | 'calendar';
+
+export declare type PDateRangePickerPreset = {
+    label: string;
+    value: PDateRangeValue | (() => PDateRangeValue);
+};
+
+export declare type PDateRangePickerPresetColumns = 2 | 3 | 4 | 'auto';
+
+export declare const PDateRangePickerPresets: {
+    thisWeek: {
+        label: string;
+        value: () => {
+            start: string;
+            end: string;
+        };
+    };
+    last7Days: {
+        label: string;
+        value: () => {
+            start: string;
+            end: string;
+        };
+    };
+    last14Days: {
+        label: string;
+        value: () => {
+            start: string;
+            end: string;
+        };
+    };
+    last30Days: {
+        label: string;
+        value: () => {
+            start: string;
+            end: string;
+        };
+    };
+    thisMonth: {
+        label: string;
+        value: () => {
+            start: string;
+            end: string;
+        };
+    };
+    lastMonth: {
+        label: string;
+        value: () => {
+            start: string;
+            end: string;
+        };
+    };
+    monthToDate: {
+        label: string;
+        value: () => {
+            start: string;
+            end: string;
+        };
+    };
+    yearToDate: {
+        label: string;
+        value: () => {
+            start: string;
+            end: string;
+        };
+    };
+};
+
+export declare type PDateRangePickerProps = {
+    label: string;
+    value?: PDateRangeValue;
+    defaultValue?: PDateRangeValue;
+    onValueChange?: (value: PDateRangeValue, details: {
+        startDate: Date | null;
+        endDate: Date | null;
+        source: PDateRangePickerChangeSource;
+    }) => void;
+    presets?: PDateRangePickerPreset[];
+    customLabel?: string;
+    showCustom?: boolean;
+    presetColumns?: PDateRangePickerPresetColumns;
+    placeholder?: string;
+    helperText?: string;
+    isError?: boolean;
+    errorMessage?: string;
+    min?: string;
+    max?: string;
+    nameStart?: string;
+    nameEnd?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'defaultValue' | 'onChange'>;
+
+export declare type PDateRangePickerRef = HTMLDivElement;
+
+export declare type PDateRangeValue = {
+    start?: string;
+    end?: string;
+};
+
+export declare const PHighlight: ForwardRefExoticComponent<    {
+as?: ElementType;
+variant?: PHighlightVariant;
+/** Controls whether the highlight is text-only or a filled background. */
+appearance?: PHighlightAppearance;
+/** Custom highlight color. Text color by default, background color for `appearance="background"`. */
+color?: CSSProperties["color"];
+/** Custom foreground color for `appearance="background"`. */
+textColor?: CSSProperties["color"];
+children: ReactNode;
+className?: string;
+style?: CSSProperties;
+} & Omit<HTMLAttributes<HTMLElement>, "children" | "className" | "style" | "color"> & RefAttributes<HTMLElement>>;
+
+export declare type PHighlightAppearance = 'text' | 'background';
+
+export declare type PHighlightProps = {
+    as?: ElementType;
+    variant?: PHighlightVariant;
+    /** Controls whether the highlight is text-only or a filled background. */
+    appearance?: PHighlightAppearance;
+    /** Custom highlight color. Text color by default, background color for `appearance="background"`. */
+    color?: CSSProperties['color'];
+    /** Custom foreground color for `appearance="background"`. */
+    textColor?: CSSProperties['color'];
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'color' | 'style'>;
+
+export declare type PHighlightRef = HTMLElement;
+
+export declare type PHighlightVariant = 'primary' | 'danger' | 'warning' | 'success' | 'info' | 'neutral';
+
+export declare const PHorizontalSlider: ForwardRefExoticComponent<    {
+children: ReactNode;
+/** Accessible label for the keyboard-focusable scroll region. */
+ariaLabel?: string;
+/** Gap between slider items. Accepts any CSS gap value. */
+gap?: CSSProperties["gap"];
+/** Disables horizontal snap alignment when free scrolling is preferred. */
+snap?: boolean;
+scrollerClassName?: string;
+listClassName?: string;
+itemClassName?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children" | "className"> & {
+className?: string;
+} & RefAttributes<HTMLDivElement>>;
+
+export declare type PHorizontalSliderProps = {
+    children: ReactNode;
+    /** Accessible label for the keyboard-focusable scroll region. */
+    ariaLabel?: string;
+    /** Gap between slider items. Accepts any CSS gap value. */
+    gap?: CSSProperties['gap'];
+    /** Disables horizontal snap alignment when free scrolling is preferred. */
+    snap?: boolean;
+    scrollerClassName?: string;
+    listClassName?: string;
+    itemClassName?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> & {
+    className?: string;
+};
+
+export declare type PHorizontalSliderRef = HTMLDivElement;
+
 declare interface Props {
     title: string;
 }
 
 export declare function PSectionHeader({ title }: Props): JSX.Element;
 
+export declare const PTextArea: ForwardRefExoticComponent<    {
+/**
+* Applied to the root wrapper element.
+* Override design tokens via CSS custom properties, e.g.:
+*   `[--p-textarea-ring:var(--p-color-info)] [--p-textarea-bg:var(--p-color-info-surface)]`
+*/
+className?: string;
+/** Applied to the inner `<textarea>` element for layout / spacing overrides. */
+textareaClassName?: string;
+/** Visible label — doubles as the floating label and the placeholder. */
+label: string;
+/** Shown below the field when there is no error. */
+helperText?: string;
+isError?: boolean;
+/** Shown below the field when `isError` is true. Announced immediately via `role="alert"`. */
+errorMessage?: string;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "aria-describedby" | "aria-label" | "placeholder"> & RefAttributes<HTMLTextAreaElement>>;
+
+export declare type PTextAreaProps = {
+    /**
+     * Applied to the root wrapper element.
+     * Override design tokens via CSS custom properties, e.g.:
+     *   `[--p-textarea-ring:var(--p-color-info)] [--p-textarea-bg:var(--p-color-info-surface)]`
+     */
+    className?: string;
+    /** Applied to the inner `<textarea>` element for layout / spacing overrides. */
+    textareaClassName?: string;
+    /** Visible label — doubles as the floating label and the placeholder. */
+    label: string;
+    /** Shown below the field when there is no error. */
+    helperText?: string;
+    isError?: boolean;
+    /** Shown below the field when `isError` is true. Announced immediately via `role="alert"`. */
+    errorMessage?: string;
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'placeholder' | 'aria-label' | 'aria-describedby'>;
+
+export declare type PTextAreaRef = HTMLTextAreaElement;
+
 export declare const PTextInput: ForwardRefExoticComponent<    {
 /**
 * Applied to the root wrapper element.
 * Override design tokens via CSS custom properties, e.g.:
-*   `[--p-input-ring:blue] [--p-input-bg:#f5f5f5]`
+*   `[--p-input-ring:var(--p-color-info)] [--p-input-bg:var(--p-color-info-surface)]`
 */
 className?: string;
 /** Applied to the inner `<input>` element for layout / spacing overrides. */
@@ -39,7 +464,7 @@ export declare type PTextInputProps = {
     /**
      * Applied to the root wrapper element.
      * Override design tokens via CSS custom properties, e.g.:
-     *   `[--p-input-ring:blue] [--p-input-bg:#f5f5f5]`
+     *   `[--p-input-ring:var(--p-color-info)] [--p-input-bg:var(--p-color-info-surface)]`
      */
     className?: string;
     /** Applied to the inner `<input>` element for layout / spacing overrides. */
@@ -63,7 +488,7 @@ export declare interface PTypographyProps extends VariantProps<typeof PTypograph
 }
 
 declare const PTypographyVariants: (props?: ({
-    variant?: "serif" | "body" | "body-wide" | "heading" | "heading-lg" | "heading-xl" | null | undefined;
+    variant?: "body" | "heading" | "serif" | "body-wide" | "heading-lg" | "heading-xl" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Row: FC<RowProps>;