reshaped 1.0.1 → 2.2.0

package/components/Card/tests/Card.stories.js

@@ -0,0 +1,83 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Card from "../index.js";
+import View from "../../View/index.js";
+export default { title: "Components/Card" };
+export const padding = () => (<Example>
+		<Example.Item title="padding: default">
+			<Card>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+
+		<Example.Item title="padding: 2">
+			<Card padding={2}>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+
+		<Example.Item title="padding: 0">
+			<Card padding={0}>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+
+		<Example.Item title={["responsive padding", "[s] 4", "[m+] 8"]}>
+			<Card padding={{ s: 4, m: 8 }}>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+	</Example>);
+export const actionable = () => (<Example>
+		<Example.Item title="button role">
+			<Card onClick={() => { }} attributes={{ "aria-label": "action" }}>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+		<Example.Item title="link role">
+			<Card href="#" attributes={{ "aria-label": "action" }}>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+	</Example>);
+export const selected = () => (<Example>
+		<Example.Item title="selected">
+			<Card selected>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+	</Example>);
+export const elevated = () => (<Example>
+		<Example.Item title="elevated">
+			<Card elevated>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+	</Example>);
+export const bleed = () => (<Example>
+		<Example.Item title="bleed: 4">
+			<Card bleed={4}>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+		<Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
+			<Card bleed={{ s: 4, m: 0 }}>
+				<Placeholder />
+			</Card>
+		</Example.Item>
+	</Example>);
+export const height = () => (<Example>
+		<Example.Item title="height: 200px">
+			<Card height="200px"/>
+		</Example.Item>
+	</Example>);
+export const testComposition = () => (<Example>
+		<Example.Item title="padding: 0, view with padding inside">
+			<Card padding={0}>
+				<Placeholder />
+				<View padding={4}>
+					<Placeholder />
+				</View>
+			</Card>
+		</Example.Item>
+	</Example>);

package/components/Carousel/Carousel.d.ts

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

package/components/Carousel/Carousel.js

@@ -0,0 +1,67 @@
+"use client";
+import React from "react";
+import { classNames, responsiveVariables, responsiveClassNames, debounceHandler, } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import useRTL from "../../hooks/useRTL.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import CarouselControl from "./CarouselControl.js";
+import * as T from "./Carousel.types.js";
+import s from "./Carousel.module.css";
+const Carousel = (props) => {
+    const { children, gap = 3, visibleItems, bleed, navigationDisplay, instanceRef, className, attributes, } = props;
+    const [mounted, setMounted] = React.useState(false);
+    const [scrollPosition, setScrollPosition] = React.useState(0);
+    const [isRTL] = useRTL();
+    const scrollElRef = React.useRef(null);
+    const bleedClassNames = {};
+    if (typeof bleed === "object") {
+        Object.entries(bleed).forEach(([key, value]) => {
+            bleedClassNames[key] = typeof value === "number" && value > 0;
+        });
+    }
+    const rootClassNames = classNames(s.root, className, ...responsiveClassNames(s, "--bleed", typeof bleed === "number" ? true : bleedClassNames));
+    const handleScroll = debounceHandler((event) => {
+        const el = event.target;
+        setScrollPosition(el.scrollLeft);
+    }, 16);
+    const getItemsGap = () => {
+        const style = getComputedStyle(scrollElRef.current);
+        // Safari returns Npx Npx as a value, we need only the first one
+        const xGap = style.gap.split(" ")[0];
+        return Number(xGap.replace("px", ""));
+    };
+    const navigateRight = () => {
+        const scrollEl = scrollElRef.current;
+        scrollEl.scrollBy({
+            left: scrollEl.clientWidth + getItemsGap(),
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    const navigateLeft = () => {
+        const scrollEl = scrollElRef.current;
+        scrollEl.scrollBy({
+            left: -scrollEl.clientWidth - getItemsGap(),
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    const navigateBack = isRTL ? navigateRight : navigateLeft;
+    const navigateForward = isRTL ? navigateLeft : navigateRight;
+    React.useImperativeHandle(instanceRef, () => ({
+        navigateBack,
+        navigateForward,
+    }));
+    /**
+     * Changing flag here since scroll ref changing won't rerender the controls and show them after SSR
+     */
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    return (React.createElement("section", Object.assign({}, attributes, { className: rootClassNames, style: Object.assign(Object.assign({}, responsiveVariables("--rs-carousel-items", visibleItems)), responsiveVariables("--rs-carousel-bleed", bleed)) }),
+        navigationDisplay !== "hidden" && (React.createElement(React.Fragment, null,
+            React.createElement(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }),
+            React.createElement(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted }))),
+        React.createElement(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll } }, React.Children.map(children, (child) => (React.createElement(View.Item, { className: s.item, as: "li" }, child))))));
+};
+export default Carousel;

package/components/Carousel/Carousel.module.css

@@ -0,0 +1 @@
+.root{position:relative}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-raised)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);overflow:auto;overflow:-moz-scrollbars-none;padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:inline;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (hover:hover),(min-width:900px){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (min-width:660px) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (min-width:900px) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (min-width:1280px) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (min-width:660px){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (min-width:900px){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (min-width:1280px){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import * as G from "../../types/global";
+export type InstanceRef = {
+    navigateBack: () => void;
+    navigateForward: () => void;
+} | undefined;
+export declare enum ControlType {
+    back = "back",
+    forward = "forward"
+}
+export type ControlProps = {
+    type: ControlType;
+    scrollElRef: React.RefObject<HTMLElement>;
+    scrollPosition: number;
+    onClick: () => void;
+    isRTL: boolean;
+    mounted: boolean;
+};
+export type Props = {
+    children?: React.ReactNode;
+    visibleItems?: G.Responsive<number>;
+    gap?: G.Responsive<number>;
+    bleed?: G.Responsive<number>;
+    navigationDisplay?: "hidden";
+    instanceRef?: React.Ref<InstanceRef>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+};

package/components/Carousel/Carousel.types.js

@@ -0,0 +1,5 @@
+export var ControlType;
+(function (ControlType) {
+    ControlType["back"] = "back";
+    ControlType["forward"] = "forward";
+})(ControlType || (ControlType = {}));

package/components/Carousel/CarouselControl.d.ts

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

package/components/Carousel/CarouselControl.js

@@ -0,0 +1,42 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Button from "../Button/index.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import * as T from "./Carousel.types.js";
+import s from "./Carousel.module.css";
+const CarouselControl = (props) => {
+    const { type, scrollElRef, scrollPosition, onClick, isRTL, mounted } = props;
+    const [visible, setVisible] = React.useState(false);
+    const [rendered, setRendered] = React.useState(false);
+    const isNext = type === T.ControlType.forward;
+    const isDisplayedAsNext = type === (isRTL ? T.ControlType.back : T.ControlType.forward);
+    const controlClassNames = classNames(s.control, isDisplayedAsNext ? s["--control-next"] : s["--control-prev"], visible && s["--control-visible"], rendered && s["--control-rendered"]);
+    useIsomorphicLayoutEffect(() => {
+        const scrollEl = scrollElRef.current;
+        if (!scrollEl || !mounted)
+            return;
+        let timer;
+        const normalizedScrollPosition = Math.abs(scrollPosition);
+        const isScrollAtStart = normalizedScrollPosition <= 0;
+        const isScrollAtEnd = normalizedScrollPosition + scrollEl.clientWidth >= scrollEl.scrollWidth - 1;
+        const hideControl = isNext ? isScrollAtEnd : isScrollAtStart;
+        if (hideControl) {
+            setVisible(false);
+            timer = setTimeout(() => setRendered(false), 1500);
+        }
+        else {
+            setRendered(true);
+            setVisible(true);
+        }
+        return () => {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [scrollPosition, scrollElRef.current, mounted]);
+    return (React.createElement("div", { className: controlClassNames, "aria-hidden": "true" },
+        React.createElement(Button, { onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "faded", elevated: true, attributes: { "aria-disabled": !visible } })));
+};
+export default CarouselControl;

package/components/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Carousel";
+export type { Props as CarouselProps, InstanceRef as CarouselInstanceRef } from "./Carousel.types";

package/components/Carousel/index.js

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

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

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

package/components/Carousel/tests/Carousel.stories.js

@@ -0,0 +1,119 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Carousel from "../index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+export default { title: "Components/Carousel" };
+export const visibleItems = () => (<Example>
+		<Example.Item title="visibleItems: 3">
+			<Carousel visibleItems={3}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title={["responsive visibleItems", "[s] 2", "[m+] 3"]}>
+			<Carousel visibleItems={{ s: 2, m: 3 }}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title="visibleItems: auto">
+			<Carousel>
+				<Placeholder h={100}/>
+				<Placeholder h={100} w={200}/>
+				<Placeholder h={100} w={300}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+	</Example>);
+export const gap = () => (<Example>
+		<Example.Item title="gap: 2, visibleItems 3">
+			<Carousel visibleItems={3} gap={2}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title={["responsive gap, visibleItems: 3", "[s] 2", "[l] 8"]}>
+			<Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+	</Example>);
+export const bleed = () => (<Example>
+		<Example.Item title="bleed: 4, visibleItems: 3">
+			<Carousel visibleItems={3} bleed={4}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title={["responsive bleed, visibleItems: 3", "[s] 4, [l+] 0"]}>
+			<Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+	</Example>);
+const RefDemo = () => {
+    const carouselRef = React.useRef();
+    return (<View gap={3}>
+			<View gap={3} direction="row">
+				<Button onClick={() => { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.navigateBack(); }}>Back</Button>
+				<Button onClick={() => { var _a; return (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.navigateForward(); }}>Forward</Button>
+			</View>
+			<Carousel visibleItems={2} instanceRef={carouselRef} navigationDisplay="hidden">
+				<Placeholder h={100}>Item 1</Placeholder>
+				<Placeholder h={100}>Item 2</Placeholder>
+				<Placeholder h={100}>Item 3</Placeholder>
+				<Placeholder h={100}>Item 4</Placeholder>
+				<Placeholder h={100}>Item 5</Placeholder>
+				<Placeholder h={100}>Item 6</Placeholder>
+			</Carousel>
+		</View>);
+};
+export const navigation = () => (<Example>
+		<Example.Item title="navigation: hidden">
+			<Carousel visibleItems={3} navigationDisplay="hidden">
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title="navigation: external">
+			<RefDemo />
+		</Example.Item>
+	</Example>);

package/components/Checkbox/Checkbox.d.ts

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

package/components/Checkbox/Checkbox.js

@@ -0,0 +1,44 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import HiddenInput from "../_private/HiddenInput/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import Icon from "../Icon/index.js";
+import IconCheckmark from "../../icons/Checkmark.js";
+import s from "./Checkbox.module.css";
+const Checkbox = (props) => {
+    var _a;
+    const { children, value, onChange, onFocus, onBlur, indeterminate, className, attributes, inputAttributes, } = props;
+    const checkboxGroup = useCheckboxGroup();
+    const formControl = useFormControl();
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.hasError);
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled);
+    const checked = checkboxGroup ? (_a = checkboxGroup.value) === null || _a === void 0 ? void 0 : _a.includes(value) : props.checked;
+    const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
+    const name = checkboxGroup ? checkboxGroup.name : props.name;
+    const inputRef = React.useRef(null);
+    const TagName = children ? "label" : "span";
+    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
+    const handleChange = (event) => {
+        if (!name)
+            return;
+        const { checked } = event.target;
+        const changeArgs = { name, value, checked, event };
+        if (onChange)
+            onChange(changeArgs);
+        if (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onChange)
+            checkboxGroup.onChange(changeArgs);
+    };
+    useIsomorphicLayoutEffect(() => {
+        inputRef.current.indeterminate = indeterminate || false;
+    }, [indeterminate]);
+    return (React.createElement(TagName, Object.assign({}, attributes, { className: rootClassName }),
+        React.createElement("span", { className: s.field },
+            React.createElement(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: Object.assign(Object.assign({}, inputAttributes), { ref: inputRef }) }),
+            React.createElement("div", { className: s.decorator },
+                React.createElement(Icon, { svg: IconCheckmark, className: s.icon }))),
+        children && React.createElement("span", { className: s.text }, children)));
+};
+export default Checkbox;

package/components/Checkbox/Checkbox.module.css

@@ -0,0 +1 @@
+.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import type * as G from "../../types/global";
+type BaseProps = {
+    children?: React.ReactNode;
+    name?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    value?: string;
+    indeterminate?: boolean;
+    onChange?: G.ChangeHandler<boolean>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"label", Props>;
+    inputAttributes?: G.Attributes<"input", Props>;
+};
+export type ControlledProps = BaseProps & {
+    checked: boolean;
+    defaultChecked?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    checked?: never;
+    defaultChecked?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/components/Checkbox/Checkbox.types.js

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

package/components/Checkbox/index.d.ts

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

package/components/Checkbox/index.js

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

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

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

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

@@ -0,0 +1,53 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Checkbox from "../index.js";
+export default { title: "Components/Checkbox" };
+export const selection = () => (<Example>
+		<Example.Item title="unselected">
+			<Checkbox name="animal" value="dog">
+				Checkbox
+			</Checkbox>
+		</Example.Item>
+
+		<Example.Item title="checked, uncontrolled">
+			<Checkbox name="animal" value="dog" defaultChecked>
+				Checkbox
+			</Checkbox>
+		</Example.Item>
+
+		<Example.Item title="checked, uncontrolled">
+			<Checkbox name="animal" value="dog" checked>
+				Checkbox
+			</Checkbox>
+		</Example.Item>
+
+		<Example.Item title="indeterminate">
+			<Checkbox name="animal" value="dog" indeterminate>
+				Checkbox
+			</Checkbox>
+		</Example.Item>
+	</Example>);
+export const error = () => (<Example>
+		<Example.Item title="error">
+			<Checkbox name="animal" value="dog" hasError>
+				Checkbox
+			</Checkbox>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled">
+			<Checkbox name="animal" value="dog" disabled>
+				Checkbox
+			</Checkbox>
+		</Example.Item>
+		<Example.Item title="disabled, checked">
+			<Checkbox name="animal" value="dog" disabled checked>
+				Checkbox
+			</Checkbox>
+		</Example.Item>
+		<Example.Item title="disabled, indeterminate">
+			<Checkbox name="animal" value="dog" disabled indeterminate>
+				Checkbox
+			</Checkbox>
+		</Example.Item>
+	</Example>);

package/components/CheckboxGroup/CheckboxGroup.context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type * as T from "./CheckboxGroup.types";
+declare const CheckboxContext: React.Context<T.Context | null>;
+export declare const useCheckboxGroup: () => T.Context | null;
+export default CheckboxContext;

package/components/CheckboxGroup/CheckboxGroup.context.js

@@ -0,0 +1,5 @@
+"use client";
+import React from "react";
+const CheckboxContext = React.createContext(null);
+export const useCheckboxGroup = () => React.useContext(CheckboxContext);
+export default CheckboxContext;

package/components/CheckboxGroup/CheckboxGroup.d.ts

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

package/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,10 @@
+import React from "react";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
+import CheckboxGroupUncontrolled from "./CheckboxGroupUncontrolled.js";
+const CheckboxGroup = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return React.createElement(CheckboxGroupControlled, Object.assign({}, props));
+    return React.createElement(CheckboxGroupUncontrolled, Object.assign({}, props));
+};
+export default CheckboxGroup;

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

@@ -0,0 +1,28 @@
+import React from "react";
+import type * as G from "../../types/global";
+import { CheckboxProps } from "../Checkbox";
+type BaseProps = {
+    id?: string;
+    children?: React.ReactNode;
+    hasError?: boolean;
+    disabled?: boolean;
+    name: string;
+    onChange?: G.ChangeHandler<string[]>;
+};
+export type ControlledProps = BaseProps & {
+    value: string[];
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string[];
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type Context = {
+    onChange: CheckboxProps["onChange"];
+    hasError?: boolean;
+    disabled?: boolean;
+    name: string;
+    value?: string[];
+};
+export {};

package/components/CheckboxGroup/CheckboxGroup.types.js

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

package/components/CheckboxGroup/CheckboxGroupControlled.d.ts

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

package/components/CheckboxGroup/CheckboxGroupControlled.js

@@ -0,0 +1,22 @@
+"use client";
+import React from "react";
+import Context from "./CheckboxGroup.context.js";
+const CheckboxGroupControlled = (props) => {
+    const { onChange, name, disabled, value, children, hasError } = props;
+    const handleChange = (args) => {
+        const { event, value: fieldValue, checked } = args;
+        if (!fieldValue)
+            return;
+        let nextValue = [...value];
+        if (checked) {
+            nextValue.push(fieldValue);
+        }
+        else {
+            nextValue = nextValue.filter((v) => v !== fieldValue);
+        }
+        if (onChange)
+            onChange({ name, value: nextValue, event });
+    };
+    return (React.createElement(Context.Provider, { value: { onChange: handleChange, disabled, value, name, hasError } }, children));
+};
+export default CheckboxGroupControlled;

package/components/CheckboxGroup/CheckboxGroupUncontrolled.d.ts

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