reshaped 3.7.3 → 3.8.0-canary.0

package/dist/cjs/themes/index.d.ts

@@ -19,4 +19,5 @@ export type { Name as ViewportTokenName } from "./_generator/tokens/viewport/vie
  */
 export { default as baseThemeDefinition } from "./_generator/definitions/reshaped";
 export { default as generateThemeColors } from "./_generator/tokens/color/utilities/generateColors";
+export { default as transform } from "./_generator/transform";
 export declare const getThemeCSS: (name: string, definition: PassedThemeDefinition, options?: T.PublicOptions["themeOptions"]) => string;

package/dist/cjs/themes/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getThemeCSS = exports.generateThemeColors = exports.baseThemeDefinition = void 0;
+exports.getThemeCSS = exports.transform = exports.generateThemeColors = exports.baseThemeDefinition = void 0;
 const transform_1 = __importDefault(require("./_generator/transform"));
 /**
  * Exported runtime code
@@ -12,6 +12,8 @@ var reshaped_1 = require("./_generator/definitions/reshaped");
 Object.defineProperty(exports, "baseThemeDefinition", { enumerable: true, get: function () { return __importDefault(reshaped_1).default; } });
 var generateColors_1 = require("./_generator/tokens/color/utilities/generateColors");
 Object.defineProperty(exports, "generateThemeColors", { enumerable: true, get: function () { return __importDefault(generateColors_1).default; } });
+var transform_2 = require("./_generator/transform");
+Object.defineProperty(exports, "transform", { enumerable: true, get: function () { return __importDefault(transform_2).default; } });
 const getThemeCSS = (name, definition, options) => {
     const code = (0, transform_1.default)(name, definition, { themeOptions: options, isFragment: true });
     return code.variables;

package/dist/components/Accordion/Accordion.types.d.ts

@@ -1,18 +1,24 @@
 import type React from "react";
 import type { IconProps } from "../Icon";
 import type * as G from "../../types/global";
-import type * as S from "../../styles/types";
 export type BaseProps = {
+    /** Expand / collapse icon size in units */
     iconSize?: IconProps["size"];
+    /** Position of the expand / collapse icon */
     iconPosition?: "start" | "end";
+    /** Gap between the trigger and the content */
     gap?: G.Responsive<number>;
+    /** Node for inserting the trigger and the content */
     children?: React.ReactNode;
+    /** Callback when the accordion is expanded or collapsed */
     onToggle?: (active: boolean) => void;
-    mixin?: Pick<S.Mixin, "margin">;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type TriggerProps = {
+    /** Node or render function for inserting the trigger */
     children?: ((attributes: {
         "aria-expanded": boolean;
         "aria-controls": string;
@@ -23,14 +29,19 @@ export type TriggerProps = {
     }) => React.ReactNode) | React.ReactNode;
 };
 export type ContentProps = {
+    /** Node for inserting the expandable content */
     children?: React.ReactNode;
 };
 export type ControlledProps = BaseProps & {
+    /** Control whether the accordion is expanded or collapsed, enables controlled mode */
     active: boolean;
+    /** Control whether the accordion is expanded or collapsed by default, enables uncontrolled mode */
     defaultActive?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Control whether the accordion is expanded or collapsed, enables controlled mode */
     active?: never;
+    /** Control whether the accordion is expanded or collapsed by default, enables uncontrolled mode */
     defaultActive?: boolean;
 };
 export type Props = ControlledProps | UncontrolledProps;

package/dist/components/ActionBar/ActionBar.types.d.ts

@@ -2,12 +2,22 @@ import type React from "react";
 import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "paddingBlock" | "paddingInline" | "padding"> & {
+    /** Show or hide the component */
     active?: boolean;
+    /** Offset from the container bounds */
     offset?: G.Responsive<number>;
+    /** Position based on the container bounds
+     * @default "bottom"
+     */
     position?: "top" | "top-end" | "top-start" | "bottom" | "bottom-start" | "bottom-end";
+    /** CSS position style */
     positionType?: G.Responsive<"relative" | "absolute" | "fixed">;
+    /** Display above the content with elevated shadow and background */
     elevated?: boolean;
+    /** Node for inserting the content */
     children?: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Actionable/Actionable.types.d.ts

@@ -1,19 +1,33 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Node for inserting the content */
     children?: React.ReactNode;
+    /** Callback when clicked, renders it as a button tag if href is not provided */
     onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    /** URL, renders it as an anchor tag */
     href?: string;
+    /** Type attribute, renders it as a button tag */
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    /** Disable from user interaction */
     disabled?: boolean;
+    /** Enable a minimum required touch hitbox */
     touchHitbox?: boolean;
+    /** Take up the full width of its parent */
     fullWidth?: boolean;
+    /** Enable a focus ring inside the element bounds */
     insetFocus?: boolean;
+    /** Don't show a focus ring on focus, can be used when it is within a container with a focus ring */
     disableFocusRing?: boolean;
+    /** Apply the focus ring to the child and rely on its border radius */
     borderRadius?: "inherit";
+    /** Prevent the event from bubbling up to the parent */
     stopPropagation?: boolean;
+    /** Render as a different element */
     as?: keyof React.JSX.IntrinsicElements;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
         ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     };

package/dist/components/Alert/Alert.types.d.ts

@@ -2,13 +2,24 @@ import type React from "react";
 import type { IconProps } from "../Icon";
 import type * as G from "../../types/global";
 export type Props = {
+    /** SVG component for the icon */
     icon?: IconProps["svg"];
+    /** Title slot */
     title?: React.ReactNode;
+    /** Slot for rendering the main content */
     children?: React.ReactNode;
+    /** Actions slot, usually used for Buttons and Links, automatically adds a gap between the actions */
     actionsSlot?: React.ReactNode;
+    /** Color scheme of the alert elements
+     * @default "neutral"
+     */
     color?: "neutral" | "critical" | "warning" | "positive" | "primary";
+    /** Display action to the right of the content */
     inline?: boolean;
+    /** Apply negative margin and remove side borders, base unit token number multiplier */
     bleed?: G.Responsive<number>;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Autocomplete/Autocomplete.js

@@ -85,6 +85,8 @@ const Autocomplete = (props) => {
         [keys.BACKSPACE]: () => {
             onBackspaceRef.current?.();
         },
+    }, [getOptionElements, onEnterRef, onBackspaceRef, highlightedId], { ref: inputRef });
+    useHotkeys({
         [keys.UP]: () => {
             const options = getOptionElements();
             if (options.length) {

package/dist/components/Autocomplete/Autocomplete.types.d.ts

@@ -2,14 +2,21 @@ import type { TextFieldProps } from "../TextField";
 import type { MenuItemProps } from "../MenuItem";
 import type { DropdownMenuProps, DropdownMenuInstance } from "../DropdownMenu";
 type SelectArgs = {
+    /** Value that will be passed to the input on selection */
     value: string;
+    /** Additional data that will be passed to the onItemSelect callback */
     data?: unknown;
 };
 export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose"> & {
+    /** Callback for when value changes from user input */
     onInput?: TextFieldProps["onChange"];
+    /** Callback for when an item is selected in the dropdown */
     onItemSelect?: (args: SelectArgs) => void;
+    /** Callback for when the backspace key is pressed while the input is focused */
     onBackspace?: () => void;
+    /** Callback for when the enter key is pressed while the input is focused */
     onEnter?: () => void;
+    /** Slot for rendering the Autocomplete.Item components */
     children: React.ReactNode;
 };
 export type ItemProps = MenuItemProps & SelectArgs;

package/dist/components/Autocomplete/tests/Autocomplete.stories.js

@@ -223,7 +223,11 @@ export const multiselect = {
 			</Badge>));
         return (<FormControl>
 				<FormControl.Label>Food</FormControl.Label>
-				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} multiline inputAttributes={{ ref: inputRef }} onChange={(args) => setQuery(args.value)} onItemSelect={(args) => {
+				<Autocomplete name="fruit" value={query} placeholder="Pick your food" startSlot={valuesNode} multiline inputAttributes={{ ref: inputRef }} onChange={(args) => setQuery(args.value)} onBackspace={() => {
+                if (query.length === 0) {
+                    setValues((prev) => prev.slice(0, -1));
+                }
+            }} onItemSelect={(args) => {
                 setQuery("");
                 setValues((prev) => [...prev, args.value]);
             }}>

package/dist/components/Avatar/Avatar.types.d.ts

@@ -1,19 +1,37 @@
 import type { IconProps } from "../Icon";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Image URL */
     src?: string;
+    /** Image alt text */
     alt?: string;
+    /** Additional attributes for the image element */
     imageAttributes?: G.Attributes<"img">;
+    /** Render prop for the image element, useful for integrating with the Image component from third party frameworks */
     renderImage?: (attributes: Omit<G.Attributes<"img">, "src" | "alt"> & {
         src: string;
         alt: string;
     }) => React.ReactNode;
+    /** Initials to display if no image is provided */
     initials?: string;
+    /** SVG component for the icon, used when no image is provided */
     icon?: IconProps["svg"];
+    /** Change the shape to rounded square */
     squared?: boolean;
+    /** Component render variant
+     * @default "solid"
+     */
     variant?: "solid" | "faded";
+    /** Component color scheme
+     * @default "neutral"
+     */
     color?: "neutral" | "critical" | "warning" | "positive" | "primary";
+    /** Size of the component, base unit token number multiplier
+     * @default 12
+     */
     size?: G.Responsive<number>;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Avatar/tests/Avatar.stories.js

@@ -17,7 +17,7 @@ export const src = {
     name: "src, alt",
     render: () => (<Example>
 			<Example.Item title="src, alt">
-				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal"/>
+				<Avatar src="https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80" alt="Amsterdam canal" size={12}/>
 			</Example.Item>
 
 			<Example.Item title="src">

package/dist/components/Badge/Badge.types.d.ts

@@ -3,17 +3,32 @@ import type { ActionableProps, ActionableRef } from "../Actionable";
 import type { IconProps } from "../Icon";
 import type * as G from "../../types/global";
 type BaseProps = {
+    /** Component color scheme
+     * @default "neutral"
+     */
     color?: "neutral" | "critical" | "warning" | "positive" | "primary";
+    /** Component size
+     * @default "medium"
+     */
     size?: "small" | "medium" | "large";
+    /** SVG component for the end position icon */
     endIcon?: IconProps["svg"];
+    /** Change border radius to fully rounded corners */
     rounded?: boolean;
+    /** Transition the component to hidden state */
     hidden?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
 } & Pick<ActionableProps, "href" | "onClick" | "attributes">;
 type WithChildren = BaseProps & {
+    /** Node for inserting text or other content */
     children?: React.ReactNode;
+    /** SVG component for the icon */
     icon?: IconProps["svg"];
-    variant?: "faded" | "outline";
+    /** Component render variant
+     * @default "solid"
+     */
+    variant?: "solid" | "faded" | "outline";
 };
 type WithEmpty = BaseProps & {
     children?: never;
@@ -21,7 +36,9 @@ type WithEmpty = BaseProps & {
     variant?: never;
 };
 type WithDismissible = {
+    /** Callback triggered when the dismiss button is pressed */
     onDismiss: () => void;
+    /** Aria label for the dismiss button */
     dismissAriaLabel: string;
 };
 type WithoutDismissible = {
@@ -30,10 +47,17 @@ type WithoutDismissible = {
 };
 export type Props = (WithChildren | WithEmpty) & (WithDismissible | WithoutDismissible);
 export type ContainerProps = {
+    /** Position of the container relative to the parent element
+     * @default "top-end"
+     */
     position?: "top-end" | "bottom-end";
+    /** Move the badge closer to center to overlap with the child component, could be used to overlap with rounded shapes */
     overlap?: boolean;
+    /** Node for inserting children to position the badge against */
     children: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type Export = React.ForwardRefExoticComponent<Props & {

package/dist/components/Badge/tests/Badge.test.stories.js

@@ -12,7 +12,9 @@ export default {
 };
 export const href = {
     name: "href",
-    render: () => <Badge href="https://reshaped.so">Badge</Badge>,
+    render: () => (<Badge href="https://reshaped.so" dismissAriaLabel="Dismiss">
+			Badge
+		</Badge>),
     play: async ({ canvas }) => {
         const link = canvas.getByRole("link");
         expect(link).toHaveAttribute("href", "https://reshaped.so");

package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -2,14 +2,25 @@ import type React from "react";
 import type { LinkProps } from "../Link";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Node for inserting children to position items */
     children: React.ReactElement | React.ReactElement[];
+    /** Node for defining custom separator between items */
     separator?: React.ReactNode;
+    /** Component color scheme
+     * @default "neutral"
+     */
     color?: "neutral" | "primary";
+    /** Number of items to show by default, others will be hidden and can be expanded */
     defaultVisibleItems?: number;
+    /** Aria label for the expand button */
     expandAriaLabel?: string;
+    /** Turn expand button into static text and disable the expand functionality */
     disableExpand?: boolean;
+    /** aria-label attribute for the component */
     ariaLabel?: string;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"nav">;
 };
 export type ItemProps = Pick<LinkProps, "icon" | "href" | "onClick" | "disabled" | "children">;

package/dist/components/Button/Button.types.d.ts

@@ -5,21 +5,41 @@ import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
 import type * as G from "../../types/global";
 export type Size = "xlarge" | "large" | "medium" | "small";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as" | "stopPropagation"> & {
+    /** Component color scheme
+     * @default "neutral"
+     */
     color?: "primary" | "critical" | "positive" | "neutral" | "media" | "inherit";
+    /** Component render variant
+     * @default "solid"
+     */
     variant?: "solid" | "outline" | "ghost" | "faded";
+    /** SVG component for the icon */
     icon?: IconProps["svg"];
+    /** SVG component for the end position icon */
     endIcon?: IconProps["svg"];
+    /** Component size
+     * @default "medium"
+     */
     size?: G.Responsive<Size>;
+    /** Change border radius to fully rounded corners */
     rounded?: boolean;
+    /** Show loading state */
     loading?: boolean;
+    /** aria-label attribute for the loading indicator */
     loadingAriaLabel?: string;
+    /** Apply elevated styles to the component */
     elevated?: boolean;
+    /** Make the component take the full width of the parent element */
     fullWidth?: G.Responsive<boolean>;
+    /** Highlight the component when component is used for an active state */
     highlighted?: boolean;
 };
 export type GroupProps = {
+    /** Node for inserting child Button components */
     children: React.ReactNode;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type AlignerProps = BaseAlignerProps & {

package/dist/components/Calendar/Calendar.types.d.ts

@@ -1,29 +1,47 @@
 export type SelectionMode = "date" | "month";
 export type BaseProps = {
+    /** Default month to display
+     * @default Date.now()
+     */
     defaultMonth?: Date;
+    /** Minimum date that can be selected */
     min?: Date;
+    /** Maximum date that can be selected */
     max?: Date;
+    /** First day of the week
+     * @default 1, Monday
+     */
     firstWeekDay?: number;
+    /** Dates that are selected */
     selectedDates?: Date[];
+    /** Render a custom weekday label, can be used for localization */
     renderWeekDay?: (args: {
         weekDay: number;
         date: Date;
     }) => string;
+    /** Render a custom month label, can be used for localization */
     renderSelectedMonthLabel?: (args: {
         date: Date;
     }) => string;
+    /** Render a custom month label, can be used for localization */
     renderMonthLabel?: (args: {
         month: number;
         date: Date;
     }) => string;
+    /** Aria label for the previous month button */
     previousMonthAriaLabel?: string;
     nextMonthAriaLabel?: string;
+    /** Aria label for the previous year button */
     previousYearAriaLabel?: string;
+    /** Aria label for the next year button */
     nextYearAriaLabel?: string;
+    /** Aria label for the month selection button */
     monthSelectionAriaLabel?: string;
+    /** Dynamic aria label applied to each date cell based on the arguments */
     renderDateAriaLabel?: (args: {
         date: Date;
     }) => string;
+    /** Dynamic aria label applied to each month element based on the arguments */
     renderMonthAriaLabel?: (args: {
         month: number;
     }) => string;
@@ -34,33 +52,46 @@ export type RangeValue = {
     end: Date | null;
 };
 export type ControlledSingleProps = {
+    /** Disable range selection */
     range?: false;
+    /** Current selected date value, enables controlled mode */
     value: SingleValue | null;
+    /** Default selected date value, enables uncontrolled mode */
     defaultValue?: never;
+    /** Callback when date selection changes */
     onChange?: (args: {
         value: SingleValue;
     }) => void;
 };
 export type UncontrolledSingleProps = {
+    /** Disable range selection */
     range?: false;
     value?: never;
+    /** Default selected date value, enables uncontrolled mode */
     defaultValue?: SingleValue;
+    /** Callback when date selection changes */
     onChange?: (args: {
         value: SingleValue;
     }) => void;
 };
 export type ControlledRangeProps = {
+    /** Enable range selection */
     range: true;
+    /** Current selected range value, enables controlled mode */
     value: RangeValue;
     defaultValue?: never;
+    /** Callback when range selection changes */
     onChange?: (args: {
         value: RangeValue;
     }) => void;
 };
 export type UncontrolledRangeProps = {
+    /** Enable range selection */
     range: true;
     value?: never;
+    /** Default selected range value, enables uncontrolled mode */
     defaultValue?: RangeValue;
+    /** Callback when range selection changes */
     onChange?: (args: {
         value: RangeValue;
     }) => void;

package/dist/components/Calendar/tests/Calendar.stories.js

@@ -14,7 +14,7 @@ export const defaultMonth = {
     name: "defaultMonth",
     render: () => (<Example>
 			<Example.Item title="defaultMonth: 2020 January">
-				<Calendar defaultMonth={new Date(2020, 0)}/>
+				<Calendar defaultMonth={new Date(2020, 0)} range/>
 			</Example.Item>
 		</Example>),
     play: ({ canvas }) => {

package/dist/components/Card/Card.types.d.ts

@@ -3,14 +3,26 @@ import type { ActionableProps } from "../Actionable";
 import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+    /** Component padding, base unit multiplier */
     padding?: G.Responsive<number>;
+    /** Remove side borders and apply negative margins, base unit multiplier */
     bleed?: G.Responsive<number>;
+    /** Highlight the component when component is used for an active state */
     selected?: boolean;
+    /** Apply elevated styles to the component */
     elevated?: boolean;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Callback when the component is clicked, turns component into a button */
     onClick?: ActionableProps["onClick"];
+    /** URL to navigate to when the component is clicked, turns component into a link */
     href?: string;
+    /** Custom component tag name
+     * @default "div"
+     */
     as?: TagName;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName> & ActionableProps["attributes"];
 } & Pick<ViewProps, "height">;

package/dist/components/Carousel/Carousel.types.d.ts

@@ -1,8 +1,11 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Instance = {
+    /** Scroll to the previous item */
     navigateBack: () => void;
+    /** Scroll to the next item */
     navigateForward: () => void;
+    /** Scroll to the item at the given index */
     navigateTo: (index: number) => void;
 } | undefined;
 export type ControlProps = {
@@ -15,16 +18,26 @@ export type ControlProps = {
     mounted: boolean;
 };
 export type Props = {
+    /** Node for inserting children, each child is rendered as a carousel item */
     children?: React.ReactNode;
+    /** Number of items visible at once in the container*/
     visibleItems?: G.Responsive<number>;
+    /** Gap between items in the container, base unit multiplier */
     gap?: G.Responsive<number>;
+    /** Apply negative margins, base unit multiplier, can be used to make sure the items don't get clipped when scrolling */
     bleed?: G.Responsive<number>;
+    /** Hide navigation controls */
     navigationDisplay?: "hidden";
+    /** Ref accessor for the carousel methods */
     instanceRef?: React.Ref<Instance>;
+    /** Callback when the first visible carousel index changes */
     onChange?: (args: {
         index: number;
     }) => void;
+    /** Callback when the carousel scrolls */
     onScroll?: (e: React.UIEvent<HTMLUListElement>) => void;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -1,26 +1,45 @@
 import type React from "react";
 import type * as G from "../../types/global";
 type BaseProps = {
+    /** Node for inserting the label */
     children?: React.ReactNode;
+    /** Component name attribute */
     name?: string;
+    /** Disable the component */
     disabled?: boolean;
+    /** Show an error state, automatically inherited when component is used inside FormControl */
     hasError?: boolean;
+    /** Component value used for form submission */
     value?: string;
+    /** Show a indeterminate state, used for "select all" checkboxes with some of the individual checkboxes selected */
     indeterminate?: boolean;
+    /** Component size
+     * @default "medium"
+     */
     size?: G.Responsive<"small" | "medium" | "large">;
+    /** Callback when the component selection changes */
     onChange?: G.ChangeHandler<boolean>;
+    /** Callback when the component is focused */
     onFocus?: (e: React.FocusEvent) => void;
+    /** Callback when the component is blurred */
     onBlur?: (e: React.FocusEvent) => void;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"label">;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"input">;
 };
 export type ControlledProps = BaseProps & {
+    /** Component checked state, enables controlled mode */
     checked: boolean;
+    /** Default checked state, enables uncontrolled mode */
     defaultChecked?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Component checked state, enables controlled mode */
     checked?: never;
+    /** Default checked state, enables uncontrolled mode */
     defaultChecked?: boolean;
 };
 export type Props = ControlledProps | UncontrolledProps;

package/dist/components/Checkbox/tests/Checkbox.stories.js

@@ -18,7 +18,7 @@ export const selection = () => (<Example>
 		</Example.Item>
 
 		<Example.Item title="checked, uncontrolled">
-			<Checkbox name="animal" value="dog" defaultChecked>
+			<Checkbox name="animal" value="dog">
 				Checkbox
 			</Checkbox>
 		</Example.Item>

package/dist/components/CheckboxGroup/CheckboxGroup.types.d.ts

@@ -2,19 +2,29 @@ import type React from "react";
 import type * as G from "../../types/global";
 import type { CheckboxProps } from "../Checkbox";
 type BaseProps = {
+    /** Component id attribute */
     id?: string;
+    /** Node for inserting checkboxes or custom layout components */
     children?: React.ReactNode;
+    /** Show an error state, automatically inherited when component is used inside FormControl */
     hasError?: boolean;
+    /** Disable the component from form submission */
     disabled?: boolean;
+    /** Component name attribute */
     name: string;
+    /** Callback when the component selection changes */
     onChange?: G.ChangeHandler<string[]>;
 };
 export type ControlledProps = BaseProps & {
+    /** Component value, enables controlled mode */
     value: string[];
+    /** Default value, enables uncontrolled mode */
     defaultValue?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Component value, enables uncontrolled mode */
     value?: never;
+    /** Default value, enables uncontrolled mode */
     defaultValue?: string[];
 };
 export type Props = ControlledProps | UncontrolledProps;