@madecki/ui 1.5.0 → 2.1.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, HTMLInputTypeAttribute } from 'react';
+import { ReactNode, AriaRole, HTMLInputTypeAttribute } from 'react';
 
 type ColorVariants = "primary" | "success" | "warning" | "danger" | "info" | "white" | "gray" | "lightGray" | "darkGray" | "neutral" | "blue";
 type ThemeMode = "light" | "dark";
@@ -17,8 +17,11 @@ interface ButtonProps {
     disabled?: boolean;
     className?: string;
     type?: "button" | "submit" | "reset";
+    /** e.g. `radio` when used inside a `radiogroup` */
+    role?: AriaRole;
+    ariaChecked?: boolean | "mixed";
 }
-declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, role, ariaChecked, }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonTransparentProps {
     variant: Exclude<ColorVariants, "primary">;
@@ -40,13 +43,18 @@ interface GradientButtonProps {
 }
 declare const GradientButton: ({ children, onClick, size, disabled, className, type, }: GradientButtonProps) => react_jsx_runtime.JSX.Element;
 
+type LabelVisibility = "visible" | "sr-only";
+
 interface RadioButtonsProps {
-    items: Omit<ButtonProps, "size" | "onClick" | "isActive">[];
+    label: string;
+    /** Default `visible`. Use `sr-only` to hide the group label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
+    items: Omit<ButtonProps, "size" | "onClick" | "isActive" | "role" | "ariaChecked">[];
     onChange: (value: string) => void;
     size?: ButtonProps["size"];
     className?: string;
 }
-declare const RadioButtons: ({ items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
+declare const RadioButtons: ({ label, labelVisibility, items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
 
 interface TagProps {
     variant: ColorVariants;
@@ -70,6 +78,8 @@ interface InputProps {
     defaultValue?: string;
     placeholder?: string;
     label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
     variant?: "primary" | "secondary" | "tertiary";
     /** Any standard HTML `input` type (e.g. `date`, `time`, `email`). */
     type?: HTMLInputTypeAttribute;
@@ -85,7 +95,31 @@ interface InputProps {
     /** Sets `data-testid` on the native `<input>` for e2e (e.g. Playwright). */
     testId?: string;
 }
-declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
+
+interface TextareaProps {
+    name: string;
+    onChange?: (value: string) => void;
+    /** When set, the textarea is controlled; the parent must update this from `onChange`. */
+    value?: string;
+    /** Initial value when uncontrolled (`value` omitted). Does not update after mount if `defaultValue` prop changes. */
+    defaultValue?: string;
+    placeholder?: string;
+    label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
+    variant?: "primary" | "secondary" | "tertiary";
+    rows?: number;
+    maxLength?: number;
+    required?: boolean;
+    ariaLabel?: string;
+    spellCheck?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Sets `data-testid` on the native `<textarea>` for e2e (e.g. Playwright). */
+    testId?: string;
+}
+declare const Textarea: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, rows, maxLength, required, ariaLabel, spellCheck, disabled, className, testId, }: TextareaProps) => react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -94,6 +128,8 @@ type SelectOption = {
 type BaseSelectProps = {
     name: string;
     label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
     options: SelectOption[];
     placeholder?: string;
     variant?: "primary" | "secondary" | "tertiary";
@@ -143,6 +179,23 @@ interface SpinnerOverlayProps extends SpinnerProps {
 }
 declare const SpinnerOverlay: ({ isVisible, size, className, }: SpinnerOverlayProps) => react_jsx_runtime.JSX.Element | null;
 
+type ToastVariant = "danger" | "success" | "info";
+type ToastPlacement = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+interface ToastProps {
+    children: ReactNode;
+    variant?: ToastVariant;
+    placement?: ToastPlacement;
+    /**
+     * Time in milliseconds before the toast dismisses itself.
+     * Pass `0` to disable auto-close. Default: `5000`.
+     */
+    autoCloseMs?: number;
+    /** Called after the user closes the toast or auto-close fires. */
+    onClose?: () => void;
+    className?: string;
+}
+declare const Toast: ({ children, variant, placement, autoCloseMs, onClose, className, }: ToastProps) => react_jsx_runtime.JSX.Element | null;
+
 interface BlockQuoteProps {
     children: ReactNode;
     className?: string;
@@ -154,14 +207,31 @@ interface HrProps {
 }
 declare const Hr: ({ className }: HrProps) => react_jsx_runtime.JSX.Element;
 
+type ContentBoxVariant = "info" | "warning" | "success" | "danger";
+
 interface ContentBoxProps {
     children: ReactNode;
-    variant?: "info" | "warning" | "success" | "danger";
+    variant?: ContentBoxVariant;
     icon?: ReactNode;
     className?: string;
 }
 declare const ContentBox: ({ children, variant, icon, className, }: ContentBoxProps) => react_jsx_runtime.JSX.Element;
 
+interface DetailsPanelProps {
+    /** Label / title row for the native `<summary>` element. */
+    summary: ReactNode;
+    /** Shown when the panel is expanded (native `<details>` body). */
+    children: ReactNode;
+    variant?: ContentBoxVariant;
+    /** Optional icon before the summary text (ContentBox-style affordance, inline). */
+    icon?: ReactNode;
+    /** Initial open state; panel remains toggleable (state synced via `onToggle`). */
+    defaultOpen?: boolean;
+    className?: string;
+    id?: string;
+}
+declare const DetailsPanel: ({ summary, children, variant, icon, defaultOpen, className, id, }: DetailsPanelProps) => react_jsx_runtime.JSX.Element;
+
 interface ContainerProps {
     children: ReactNode;
     size?: "sm" | "md" | "lg" | "xl" | "full";
@@ -209,13 +279,14 @@ declare const Heading: ({ children, level, size, weight, color, className, }: He
 
 interface TextProps {
     children: ReactNode;
+    id?: string;
     size?: "xs" | "sm" | "md" | "lg";
     weight?: "normal" | "medium" | "semibold" | "bold";
     color?: "default" | "muted" | "primary" | "success" | "warning" | "danger";
     as?: "p" | "span" | "div" | "label";
     className?: string;
 }
-declare const Text: ({ children, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
+declare const Text: ({ children, id, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
 
 interface HeartProps {
     variant?: "outline" | "filled" | "gradient";
@@ -258,4 +329,4 @@ declare const TwitterIcon: ({ className, size, withWrapper, }: SocialIconProps)
 declare const LinkedInIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 declare const InstagramIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 
-export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
+export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, DetailsPanel, type DetailsPanelProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, Toast, type ToastPlacement, type ToastProps, type ToastVariant, TwitterIcon, Warning, type WarningProps };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, HTMLInputTypeAttribute } from 'react';
+import { ReactNode, AriaRole, HTMLInputTypeAttribute } from 'react';
 
 type ColorVariants = "primary" | "success" | "warning" | "danger" | "info" | "white" | "gray" | "lightGray" | "darkGray" | "neutral" | "blue";
 type ThemeMode = "light" | "dark";
@@ -17,8 +17,11 @@ interface ButtonProps {
     disabled?: boolean;
     className?: string;
     type?: "button" | "submit" | "reset";
+    /** e.g. `radio` when used inside a `radiogroup` */
+    role?: AriaRole;
+    ariaChecked?: boolean | "mixed";
 }
-declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, role, ariaChecked, }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonTransparentProps {
     variant: Exclude<ColorVariants, "primary">;
@@ -40,13 +43,18 @@ interface GradientButtonProps {
 }
 declare const GradientButton: ({ children, onClick, size, disabled, className, type, }: GradientButtonProps) => react_jsx_runtime.JSX.Element;
 
+type LabelVisibility = "visible" | "sr-only";
+
 interface RadioButtonsProps {
-    items: Omit<ButtonProps, "size" | "onClick" | "isActive">[];
+    label: string;
+    /** Default `visible`. Use `sr-only` to hide the group label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
+    items: Omit<ButtonProps, "size" | "onClick" | "isActive" | "role" | "ariaChecked">[];
     onChange: (value: string) => void;
     size?: ButtonProps["size"];
     className?: string;
 }
-declare const RadioButtons: ({ items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
+declare const RadioButtons: ({ label, labelVisibility, items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
 
 interface TagProps {
     variant: ColorVariants;
@@ -70,6 +78,8 @@ interface InputProps {
     defaultValue?: string;
     placeholder?: string;
     label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
     variant?: "primary" | "secondary" | "tertiary";
     /** Any standard HTML `input` type (e.g. `date`, `time`, `email`). */
     type?: HTMLInputTypeAttribute;
@@ -85,7 +95,31 @@ interface InputProps {
     /** Sets `data-testid` on the native `<input>` for e2e (e.g. Playwright). */
     testId?: string;
 }
-declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
+
+interface TextareaProps {
+    name: string;
+    onChange?: (value: string) => void;
+    /** When set, the textarea is controlled; the parent must update this from `onChange`. */
+    value?: string;
+    /** Initial value when uncontrolled (`value` omitted). Does not update after mount if `defaultValue` prop changes. */
+    defaultValue?: string;
+    placeholder?: string;
+    label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
+    variant?: "primary" | "secondary" | "tertiary";
+    rows?: number;
+    maxLength?: number;
+    required?: boolean;
+    ariaLabel?: string;
+    spellCheck?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Sets `data-testid` on the native `<textarea>` for e2e (e.g. Playwright). */
+    testId?: string;
+}
+declare const Textarea: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, rows, maxLength, required, ariaLabel, spellCheck, disabled, className, testId, }: TextareaProps) => react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -94,6 +128,8 @@ type SelectOption = {
 type BaseSelectProps = {
     name: string;
     label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
     options: SelectOption[];
     placeholder?: string;
     variant?: "primary" | "secondary" | "tertiary";
@@ -143,6 +179,23 @@ interface SpinnerOverlayProps extends SpinnerProps {
 }
 declare const SpinnerOverlay: ({ isVisible, size, className, }: SpinnerOverlayProps) => react_jsx_runtime.JSX.Element | null;
 
+type ToastVariant = "danger" | "success" | "info";
+type ToastPlacement = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+interface ToastProps {
+    children: ReactNode;
+    variant?: ToastVariant;
+    placement?: ToastPlacement;
+    /**
+     * Time in milliseconds before the toast dismisses itself.
+     * Pass `0` to disable auto-close. Default: `5000`.
+     */
+    autoCloseMs?: number;
+    /** Called after the user closes the toast or auto-close fires. */
+    onClose?: () => void;
+    className?: string;
+}
+declare const Toast: ({ children, variant, placement, autoCloseMs, onClose, className, }: ToastProps) => react_jsx_runtime.JSX.Element | null;
+
 interface BlockQuoteProps {
     children: ReactNode;
     className?: string;
@@ -154,14 +207,31 @@ interface HrProps {
 }
 declare const Hr: ({ className }: HrProps) => react_jsx_runtime.JSX.Element;
 
+type ContentBoxVariant = "info" | "warning" | "success" | "danger";
+
 interface ContentBoxProps {
     children: ReactNode;
-    variant?: "info" | "warning" | "success" | "danger";
+    variant?: ContentBoxVariant;
     icon?: ReactNode;
     className?: string;
 }
 declare const ContentBox: ({ children, variant, icon, className, }: ContentBoxProps) => react_jsx_runtime.JSX.Element;
 
+interface DetailsPanelProps {
+    /** Label / title row for the native `<summary>` element. */
+    summary: ReactNode;
+    /** Shown when the panel is expanded (native `<details>` body). */
+    children: ReactNode;
+    variant?: ContentBoxVariant;
+    /** Optional icon before the summary text (ContentBox-style affordance, inline). */
+    icon?: ReactNode;
+    /** Initial open state; panel remains toggleable (state synced via `onToggle`). */
+    defaultOpen?: boolean;
+    className?: string;
+    id?: string;
+}
+declare const DetailsPanel: ({ summary, children, variant, icon, defaultOpen, className, id, }: DetailsPanelProps) => react_jsx_runtime.JSX.Element;
+
 interface ContainerProps {
     children: ReactNode;
     size?: "sm" | "md" | "lg" | "xl" | "full";
@@ -209,13 +279,14 @@ declare const Heading: ({ children, level, size, weight, color, className, }: He
 
 interface TextProps {
     children: ReactNode;
+    id?: string;
     size?: "xs" | "sm" | "md" | "lg";
     weight?: "normal" | "medium" | "semibold" | "bold";
     color?: "default" | "muted" | "primary" | "success" | "warning" | "danger";
     as?: "p" | "span" | "div" | "label";
     className?: string;
 }
-declare const Text: ({ children, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
+declare const Text: ({ children, id, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
 
 interface HeartProps {
     variant?: "outline" | "filled" | "gradient";
@@ -258,4 +329,4 @@ declare const TwitterIcon: ({ className, size, withWrapper, }: SocialIconProps)
 declare const LinkedInIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 declare const InstagramIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 
-export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
+export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, DetailsPanel, type DetailsPanelProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, Toast, type ToastPlacement, type ToastProps, type ToastVariant, TwitterIcon, Warning, type WarningProps };