reshaped 1.0.1 → 2.1.0

package/components/Modal/tests/Modal.stories.js

@@ -0,0 +1,145 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Modal from "../index.js";
+import View from "../../View/index.js";
+import Button from "../../Button/index.js";
+import Dismissible from "../../Dismissible/index.js";
+import DropdownMenu from "../../DropdownMenu/index.js";
+import Switch from "../../Switch/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+export default { title: "Components/Modal" };
+const Demo = (props) => {
+    const { active: activeProp, title, subtitle, children } = props, modalProps = __rest(props, ["active", "title", "subtitle", "children"]);
+    const { active, activate, deactivate } = useToggle(activeProp);
+    return (<>
+			<Button onClick={activate}>Open dialog</Button>
+			<Modal {...modalProps} active={active} onClose={deactivate}>
+				<View gap={3}>
+					{(title || subtitle) && (<Dismissible onClose={deactivate} closeAriaLabel="Close modal">
+							{title && <Modal.Title>{title}</Modal.Title>}
+							{subtitle && <Modal.Subtitle>{subtitle}</Modal.Subtitle>}
+						</Dismissible>)}
+					{children ||
+            "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."}
+				</View>
+			</Modal>
+		</>);
+};
+export const position = () => (<Example>
+		<Example.Item title="position: center">
+			<Demo position="center"/>
+		</Example.Item>
+		<Example.Item title="position: bottom">
+			<Demo position="bottom"/>
+		</Example.Item>
+		<Example.Item title="position: start">
+			<Demo position="start"/>
+		</Example.Item>
+		<Example.Item title="position: end">
+			<Demo position="end"/>
+		</Example.Item>
+		<Example.Item title={["responsive position", "[s] bottom", "[m] center", "[l] end"]}>
+			<Demo position={{ s: "bottom", m: "center", l: "end" }}/>
+		</Example.Item>
+	</Example>);
+export const size = () => {
+    return (<Example>
+			<Example.Item title="size: default">
+				<Demo />
+			</Example.Item>
+			<Example.Item title="size: 300px">
+				<Demo size="300px"/>
+			</Example.Item>
+			<Example.Item title={["size: 800px", "should have max width of 100% minus gaps on the sides"]}>
+				<Demo size="800px"/>
+			</Example.Item>
+			<Example.Item title={[
+            "responsive size, responsive position",
+            "[s] auto",
+            "[m+] 600px",
+            "bottom position changes height instead of width",
+        ]}>
+				<Demo position={{ s: "bottom", m: "center", l: "end" }} size={{ s: "auto", m: "600px" }}/>
+			</Example.Item>
+		</Example>);
+};
+export const padding = () => (<Example>
+		<Example.Item title="padding: 0">
+			<Demo padding={0}/>
+		</Example.Item>
+		<Example.Item title="padding: 6">
+			<Demo padding={6}/>
+		</Example.Item>
+		<Example.Item title={["responsive padding", "[s] 2", "[m+]: 6"]}>
+			<Demo padding={{ s: 2, m: 6 }}/>
+		</Example.Item>
+	</Example>);
+export const composition = () => (<Example>
+		<Example.Item title="title, subtitle, dismissible">
+			<Demo title="Modal title" subtitle="Modal subtitle"/>
+		</Example.Item>
+	</Example>);
+export const overlay = () => (<Example>
+		<Example.Item title="transparentOverlay, doesn't lock scroll">
+			<Demo transparentOverlay/>
+			<View height="1000px"/>
+		</Example.Item>
+	</Example>);
+export const edgeCases = () => {
+    const { active, activate, deactivate } = useToggle();
+    return (<Example>
+			<Example.Item title="trap focus works with custom children components">
+				<Demo title="Modal title">
+					<View gap={3} direction="row">
+						<Button onClick={() => { }}>Button</Button>
+						<Switch name="switch"/>
+					</View>
+				</Demo>
+			</Example.Item>
+			<Example.Item title={[
+            "trap focus works correctly when it was already trapped",
+            "focus return back to the dropdown trigger on modal close",
+            "closing dropdown inside the modal doesn't close the modal",
+        ]}>
+				<DropdownMenu>
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open menu</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item onClick={activate}>Open dialog</DropdownMenu.Item>
+						<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+				<Modal active={active} onClose={deactivate}>
+					<View gap={3}>
+						<DropdownMenu>
+							<DropdownMenu.Trigger>
+								{(attributes) => <Button attributes={attributes}>Open menu</Button>}
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+								<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu>
+						<Button onClick={deactivate}>Close</Button>
+					</View>
+				</Modal>
+			</Example.Item>
+
+			<Example.Item title="scroll locks on open">
+				<Demo />
+				<View height="1000px"/>
+			</Example.Item>
+		</Example>);
+};

package/components/Overlay/Overlay.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Overlay.types";
+declare const Overlay: (props: T.Props) => React.JSX.Element | null;
+export default Overlay;

package/components/Overlay/Overlay.js

@@ -0,0 +1,110 @@
+"use client";
+import React from "react";
+import { onNextFrame } from "../../utilities/animation.js";
+import { classNames } from "../../utilities/helpers.js";
+import { trapFocus } from "../../utilities/a11y.js";
+import useToggle from "../../hooks/useToggle.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useScrollLock from "../../hooks/useScrollLock.js";
+import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
+import Portal from "../_private/Portal/index.js";
+import s from "./Overlay.module.css";
+const Overlay = (props) => {
+    const { active, children, transparent, onClose, className, attributes } = props;
+    const [mounted, setMounted] = React.useState(false);
+    const contentRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const isMouseDownValidRef = React.useRef(false);
+    const releaseFocusRef = React.useRef(null);
+    const { lockScroll, unlockScroll } = useScrollLock();
+    const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
+    const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
+    const isDismissible = useIsDismissible(active, contentRef);
+    const rootClassNames = classNames(s.root, visible && s["--visible"], transparent && s["--transparent"], className);
+    const isInsideChild = (el) => {
+        if (!contentRef.current)
+            return;
+        const firstChild = contentRef.current.firstChild;
+        if (!firstChild)
+            return;
+        return firstChild.contains(el);
+    };
+    const trapFocusInside = () => {
+        if (!contentRef.current)
+            return;
+        releaseFocusRef.current = trapFocus(contentRef.current);
+    };
+    const cancelTrapFocus = () => {
+        if (!releaseFocusRef.current)
+            return;
+        releaseFocusRef.current();
+        releaseFocusRef.current = null;
+    };
+    const close = React.useCallback(() => {
+        if (!visible || !isDismissible())
+            return;
+        if (onClose)
+            onClose();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, isDismissible]);
+    const handleMouseDown = (event) => {
+        isMouseDownValidRef.current = !isInsideChild(event.target);
+    };
+    const handleMouseUp = (event) => {
+        const isMouseUpValid = !isInsideChild(event.target);
+        const shouldClose = isMouseDownValidRef.current && isMouseUpValid && !transparent;
+        if (!shouldClose)
+            return;
+        close();
+    };
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "opacity" || e.target !== e.currentTarget)
+            return;
+        if (visible)
+            return;
+        if (!transparent)
+            unlockScroll();
+        remove();
+    };
+    useHotkeys({ Escape: close }, [close]);
+    React.useEffect(() => {
+        if (active && !rendered)
+            render();
+        if (!active && rendered)
+            hide();
+    }, [active, render, hide, rendered]);
+    // Show overlay after it was rendered
+    React.useEffect(() => {
+        if (!rendered)
+            return;
+        if (!transparent)
+            lockScroll();
+        onNextFrame(() => show());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rendered, show, lockScroll, transparent]);
+    React.useEffect(() => {
+        if (!rendered)
+            return;
+        trapFocusInside();
+        return () => cancelTrapFocus();
+    }, [rendered]);
+    // Unlock scroll on unmount
+    React.useEffect(() => {
+        return () => {
+            if (!transparent)
+                unlockScroll();
+        };
+    }, [unlockScroll, transparent]);
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!rendered || !mounted)
+        return null;
+    return (React.createElement(Portal, { scopeRef: rootRef },
+        React.createElement("div", Object.assign({}, attributes, { ref: rootRef, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd }),
+            React.createElement("div", { className: s.wrapper },
+                React.createElement("div", { className: s.inner },
+                    React.createElement("div", { className: s.content, ref: contentRef }, typeof children === "function" ? children({ active: visible }) : children))))));
+};
+export default Overlay;

package/components/Overlay/Overlay.module.css

@@ -0,0 +1 @@
+.root{-webkit-overflow-scrolling:touch;color:var(--rs-color-white);opacity:0;overflow:auto;transition:opacity var(--rs-duration-medium) var(--rs-easing-standard);z-index:var(--rs-z-index-overlay)}.root,.root:after{inset:0;position:fixed}.root:after{background:var(--rs-color-black);content:"";opacity:.8}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;position:relative;text-align:initial;z-index:var(--rs-z-index-raised)}.root.--visible{opacity:1}.root.--transparent{color:inherit;pointer-events:none}.root.--transparent>:not(.wrapper){pointer-events:all}.root.--transparent:after{content:none}.root.--transparent .content{pointer-events:all}

package/components/Overlay/Overlay.types.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    transparent?: boolean;
+    children?: React.ReactNode | ((props: {
+        active: boolean;
+    }) => React.ReactNode);
+    active?: boolean;
+    onClose?: () => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};

package/components/Overlay/Overlay.types.js

@@ -0,0 +1 @@
+export {};

package/components/Overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Overlay";
+export type { Props as OverlayProps } from "./Overlay.types";

package/components/Overlay/index.js

@@ -0,0 +1 @@
+export { default } from "./Overlay.js";

package/components/Overlay/tests/Overlay.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;

package/components/Overlay/tests/Overlay.stories.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Overlay from "../index.js";
+import Button from "../../Button/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+export default { title: "Utilities/Overlay" };
+export const base = () => {
+    const baseToggle = useToggle(true);
+    const transparentToggle = useToggle(false);
+    return (<Example>
+			<Example.Item title="locks scroll">
+				<Button onClick={() => baseToggle.activate()}>Open overlay</Button>
+				<Overlay active={baseToggle.active} onClose={() => baseToggle.deactivate()}>
+					Overlay content
+				</Overlay>
+				<div style={{ height: 1000 }}/>
+			</Example.Item>
+
+			<Example.Item title="transparent, doesn't lock scroll">
+				<Button onClick={() => transparentToggle.activate()}>Open overlay</Button>
+				<Overlay active={transparentToggle.active} onClose={() => transparentToggle.deactivate()} transparent>
+					Overlay content
+				</Overlay>
+				<div style={{ height: 1000 }}/>
+			</Example.Item>
+		</Example>);
+};

package/components/Popover/Popover.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type * as T from "./Popover.types";
+declare const Popover: {
+    (props: T.Props): React.JSX.Element;
+    Trigger: (props: import("../_private/Flyout").FlyoutTriggerProps) => React.JSX.Element;
+    Content: (props: import("../_private/Flyout").FlyoutContentProps) => React.JSX.Element | null;
+};
+export default Popover;

package/components/Popover/Popover.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Flyout from "../_private/Flyout/index.js";
+import s from "./Popover.module.css";
+import getPaddingStyles from "../../styles/padding/index.js";
+const Popover = (props) => {
+    var _a;
+    const { id, forcePosition, onOpen, onClose, active, defaultActive, children, width, contentGap, variant = "elevated", triggerType = "click", position = "bottom", disableHideAnimation, instanceRef, } = props;
+    const padding = (_a = props.padding) !== null && _a !== void 0 ? _a : (variant === "headless" ? 0 : 4);
+    const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
+    const paddingStyles = getPaddingStyles(padding);
+    const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames);
+    return (
+    // @ts-ignore
+    React.createElement(Flyout, { id: id, instanceRef: instanceRef, position: position, forcePosition: forcePosition, onOpen: onOpen, onClose: onClose, trapFocusMode: trapFocusMode, triggerType: triggerType, active: active, defaultActive: defaultActive, width: width, disableHideAnimation: disableHideAnimation, contentGap: contentGap, contentClassName: contentClassName, contentAttributes: { style: Object.assign({}, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables) } }, children));
+};
+Popover.Trigger = Flyout.Trigger;
+Popover.Content = Flyout.Content;
+export default Popover;

package/components/Popover/Popover.module.css

@@ -0,0 +1 @@
+.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-unit-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px;overflow:hidden}.content.content--has-width{max-width:none;min-width:0}@media (max-width:659px){.content{max-width:none}}

package/components/Popover/Popover.types.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { FlyoutProps } from "../_private/Flyout";
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "instanceRef" | "triggerType" | "disableHideAnimation"> & {
+    children?: React.ReactNode;
+    padding?: number;
+    variant?: "elevated" | "headless";
+};

package/components/Popover/Popover.types.js

@@ -0,0 +1 @@
+export {};

package/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Popover";
+export type { Props as PopoverProps } from "./Popover.types";

package/components/Popover/index.js

@@ -0,0 +1 @@
+export { default } from "./Popover.js";

package/components/Popover/tests/Popover.stories.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const position: () => React.JSX.Element;
+export declare const width: () => React.JSX.Element;
+export declare const variant: () => React.JSX.Element;
+export declare const padding: () => React.JSX.Element;
+export declare const triggerType: () => React.JSX.Element;

package/components/Popover/tests/Popover.stories.js

@@ -0,0 +1,99 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import View from "../../View/index.js";
+import Popover from "../index.js";
+import Button from "../../Button/index.js";
+export default { title: "Components/Popover" };
+const Demo = (props) => {
+    const { position } = props, rest = __rest(props, ["position"]);
+    return (<Popover position={position} {...rest}>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>{position || "Open"}</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<View gap={2} align="start">
+					Popover content
+					<Button onClick={() => { }}>Button</Button>
+				</View>
+			</Popover.Content>
+		</Popover>);
+};
+export const position = () => (<Example>
+		<Example.Item title="position: bottom">
+			<View align="center" justify="center" gap={8} direction="row">
+				<Demo position="bottom-start"/>
+				<Demo position="bottom"/>
+				<Demo position="bottom-end"/>
+			</View>
+		</Example.Item>
+		<Example.Item title="position: top">
+			<View align="center" justify="center" gap={8} direction="row">
+				<Demo position="top-start"/>
+				<Demo position="top"/>
+				<Demo position="top-end"/>
+			</View>
+		</Example.Item>
+		<Example.Item title="position: start">
+			<View align="center" justify="center" gap={8} direction="row">
+				<Demo position="start-top"/>
+				<Demo position="start"/>
+				<Demo position="start-bottom"/>
+			</View>
+		</Example.Item>
+		<Example.Item title="position: end">
+			<View align="center" justify="center" gap={8} direction="row">
+				<Demo position="end-top"/>
+				<Demo position="end"/>
+				<Demo position="end-bottom"/>
+			</View>
+		</Example.Item>
+		<Example.Item title={["position: bottom", "changes to top-start because it doesn't fit"]}>
+			<View align="center">
+				<Demo position="bottom"/>
+			</View>
+		</Example.Item>
+	</Example>);
+export const width = () => (<Example>
+		<Example.Item title="width: 400">
+			<Demo width="400px"/>
+		</Example.Item>
+		<Example.Item title="width: 100%">
+			<Demo width="100%"/>
+		</Example.Item>
+	</Example>);
+export const variant = () => (<Example>
+		<Example.Item title="variant: headless">
+			<Popover variant="headless">
+				<Popover.Trigger>
+					{(attributes) => <Button attributes={attributes}>Open</Button>}
+				</Popover.Trigger>
+				<Popover.Content>
+					<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="neutral-faded"/>
+				</Popover.Content>
+			</Popover>
+		</Example.Item>
+	</Example>);
+export const padding = () => (<Example>
+		<Example.Item title="padding: 0">
+			<Demo padding={0}/>
+		</Example.Item>
+		<Example.Item title="padding: 6">
+			<Demo padding={6}/>
+		</Example.Item>
+	</Example>);
+export const triggerType = () => (<Example>
+		<Example.Item title="triggerType: hover">
+			<Demo triggerType="hover"/>
+		</Example.Item>
+	</Example>);

package/components/Progress/Progress.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Progress.types";
+declare const Progress: (props: T.Props) => React.JSX.Element;
+export default Progress;

package/components/Progress/Progress.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Progress.module.css";
+const Progress = (props) => {
+    const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, color && s[`--color-${color}`], size && s[`--size-${size}`], !!duration && s["--duration"]);
+    const total = max - min;
+    const normalizedValue = value - min;
+    const resolvedValue = Math.max(min, Math.min(max, normalizedValue));
+    const width = (resolvedValue / total) * 100;
+    const translate = `${width - 100}%`;
+    return (React.createElement("div", Object.assign({ role: "progressbar" }, attributes, { className: rootClassNames, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value }),
+        React.createElement("div", { className: s.value, style: {
+                "--rs-progress-value": translate,
+                "--rs-progress-duration": duration ? `${duration}ms` : undefined,
+            } })));
+};
+export default Progress;

package/components/Progress/Progress.module.css

@@ -0,0 +1 @@
+.root{align-items:flex-start;display:flex;overflow:hidden}.root,.value{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-unit-radius-small)}.value{height:100%;transform:translateX(var(--rs-progress-value));transition:transform var(--rs-easing-decelerate);transition-duration:var(--rs-progress-duration,var(--rs-duration-slow));width:100%}[dir=rtl] .value{transform:translateX(calc(var(--rs-progress-value) * -1))}.--duration .value{transition-timing-function:linear}.--size-small{height:var(--rs-unit-x1)}.--size-medium{height:var(--rs-unit-x2)}.--color-primary .value{background:var(--rs-color-background-primary)}.--color-critical .value{background:var(--rs-color-background-critical)}.--color-positive .value{background:var(--rs-color-background-positive)}.--color-white{background:rgba(var(--rs-color-rgb-white),32%)}.--color-white .value{background:var(--rs-color-white)}

package/components/Progress/Progress.types.d.ts

@@ -0,0 +1,11 @@
+import type * as G from "../../types/global";
+export type Props = {
+    value?: number;
+    max?: number;
+    min?: number;
+    size?: "small" | "medium";
+    color?: "primary" | "critical" | "positive" | "white";
+    duration?: number;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};

package/components/Progress/Progress.types.js

@@ -0,0 +1 @@
+export {};

package/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Progress";
+export type { Props as ProgressProps } from "./Progress.types";

package/components/Progress/index.js

@@ -0,0 +1 @@
+export { default } from "./Progress.js";

package/components/Progress/tests/Progress.stories.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const value: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;
+export declare const duration: () => React.JSX.Element;

package/components/Progress/tests/Progress.stories.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import View from "../../View/index.js";
+import Progress from "../index.js";
+import Button from "../../Button/index.js";
+export default { title: "Components/Progress" };
+export const value = () => (<Example>
+		<Example.Item title="value: 50">
+			<Progress value={50}/>
+		</Example.Item>
+		<Example.Item title="value: 20, min: 0, max: 40">
+			<Progress value={20} min={0} max={40}/>
+		</Example.Item>
+		<Example.Item title="value: 50, min: 0, max: 40">
+			<Progress value={50} min={0} max={40}/>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: small, value: 50">
+			<Progress value={50} size="small"/>
+		</Example.Item>
+		<Example.Item title="size: medium, value: 50">
+			<Progress value={50} size="medium"/>
+		</Example.Item>
+	</Example>);
+export const color = () => (<Example>
+		<Example.Item title="color: critical, value: 50">
+			<Progress value={50} color="critical"/>
+		</Example.Item>
+		<Example.Item title="color: positive, value: 50">
+			<Progress value={50} color="positive"/>
+		</Example.Item>
+		<Example.Item title="color: white, value: 50">
+			<View padding={4} backgroundColor="black" borderRadius="medium">
+				<Progress value={50} color="white"/>
+			</View>
+		</Example.Item>
+	</Example>);
+export const duration = () => {
+    const [active, setActive] = React.useState(false);
+    const handleChange = () => {
+        setActive((state) => !state);
+    };
+    return (<Example>
+			<Example.Item title="duration: 2000">
+				<View gap={3}>
+					<View.Item>
+						<Button onClick={handleChange}>Change</Button>
+					</View.Item>
+
+					<Progress value={active ? 100 : 0} duration={2000}/>
+				</View>
+			</Example.Item>
+		</Example>);
+};

package/components/Radio/Radio.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Radio.types";
+declare const Radio: (props: T.Props) => React.JSX.Element;
+export default Radio;