reshaped 2.8.0 → 2.8.1

package/components/Button/ButtonAligner.js

@@ -1,7 +0,0 @@
-import React from "react";
-import Aligner from "../_private/Aligner/index.js";
-import s from "./Button.module.css";
-const ButtonAligner = (props) => {
-    return (React.createElement(Aligner, Object.assign({}, props, { side: props.side || props.position, className: [s.aligner, props.className] })));
-};
-export default ButtonAligner;

package/components/Button/ButtonGroup.d.ts

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

package/components/Button/ButtonGroup.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import s from "./Button.module.css";
-const ButtonGroup = (props) => {
-    const { children, className, attributes } = props;
-    const groupClassNames = classNames(s.group, className);
-    return (React.createElement("div", Object.assign({}, attributes, { className: groupClassNames, role: "group" }), children));
-};
-export default ButtonGroup;

package/components/Calendar/Calendar.d.ts

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

package/components/Calendar/Calendar.js

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

package/components/Calendar/CalendarControlled.d.ts

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

package/components/Calendar/CalendarControlled.js

@@ -1,72 +0,0 @@
-"use client";
-import React from "react";
-import View from "../View/index.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import { setMonthToPrevious, setMonthToNext, setMonthTo, setYearToNext, setYearToPrevious, applyNavigationBounds, } from "./Calendar.utils.js";
-import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
-import CalendarMonth from "./CalendarMonth.js";
-import CalendarYear from "./CalendarYear.js";
-import CalendarControls from "./CalendarControls.js";
-const CalendarControlled = (props) => {
-    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, } = props;
-    const [selectionMode, setSelectionMode] = React.useState("date");
-    const [monthDate, setMonthDate] = React.useState(defaultMonth || new Date());
-    const [hoveredDate, setHoveredDate] = React.useState(null);
-    const monthTitleRef = React.useRef(null);
-    const prevSelectionModeRef = React.useRef(selectionMode);
-    const bounds = applyNavigationBounds({ date: monthDate, min, max });
-    const selectionRootRef = React.useRef(null);
-    const handlePreviousClick = () => {
-        if (selectionMode === "month") {
-            setMonthDate((prev) => setYearToPrevious(prev));
-            return;
-        }
-        setMonthDate((prev) => setMonthToPrevious(prev));
-    };
-    const handleNextClick = () => {
-        if (selectionMode === "month") {
-            setMonthDate((prev) => setYearToNext(prev));
-            return;
-        }
-        setMonthDate((prev) => setMonthToNext(prev));
-    };
-    const handleMonthTitleClick = () => {
-        setSelectionMode("month");
-    };
-    const handleMonthClick = (i) => {
-        setMonthDate((prev) => setMonthTo(prev, i));
-        setSelectionMode("date");
-    };
-    const handleDateHover = (date) => {
-        setHoveredDate(date);
-    };
-    const handleDateHoverEnd = (date) => {
-        if (hoveredDate && +hoveredDate === +date)
-            setHoveredDate(null);
-    };
-    React.useEffect(() => {
-        if (selectionMode === "date" && selectionMode !== prevSelectionModeRef.current) {
-            onNextFrame(() => {
-                var _a;
-                (_a = monthTitleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-        }
-        prevSelectionModeRef.current = selectionMode;
-    }, [selectionMode]);
-    useCalendarKeyboardNavigation({
-        monthDate,
-        rootRef: selectionRootRef,
-        changeToNextMonth: handleNextClick,
-        changeToPreviousMonth: handlePreviousClick,
-        // Each row has 7 days in date selection and 3 months in month
-        verticalDelta: selectionMode === "date" ? 7 : 3,
-        min,
-        max,
-    });
-    return (React.createElement(View, { gap: 2 },
-        React.createElement(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }),
-        React.createElement(View.Item, { attributes: { ref: selectionRootRef } },
-            selectionMode === "date" && (React.createElement(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel })),
-            selectionMode === "month" && (React.createElement(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max })))));
-};
-export default CalendarControlled;

package/components/Calendar/CalendarControls.d.ts

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

package/components/Calendar/CalendarControls.js

@@ -1,56 +0,0 @@
-import React from "react";
-import Button from "../Button/index.js";
-import View from "../View/index.js";
-import Hidden from "../Hidden/index.js";
-import Text from "../Text/index.js";
-import HiddenVisually from "../HiddenVisually/index.js";
-import IconChevronLeft from "../../icons/ChevronLeft.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import s from "./Calendar.module.css";
-const CalendarControls = (props) => {
-    const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, isFirstMonth, isLastMonth, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;
-    const prevRef = React.useRef(null);
-    const nextRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!isFirstMonth)
-            return;
-        if (document.activeElement !== prevRef.current)
-            return;
-        const targetEl = nextRef.current || monthTitleRef.current;
-        onNextFrame(() => {
-            targetEl === null || targetEl === void 0 ? void 0 : targetEl.focus();
-        });
-    }, [isFirstMonth, monthTitleRef]);
-    React.useEffect(() => {
-        if (!isLastMonth)
-            return;
-        if (document.activeElement !== nextRef.current)
-            return;
-        const targetEl = prevRef.current || monthTitleRef.current;
-        onNextFrame(() => {
-            targetEl === null || targetEl === void 0 ? void 0 : targetEl.focus();
-        });
-    }, [isLastMonth, monthTitleRef]);
-    return (React.createElement(View, { direction: "row", gap: 2, align: "center" },
-        React.createElement(Hidden, { visibility: true, hide: isFirstMonth },
-            React.createElement("div", { className: s.control },
-                React.createElement(Button, { variant: "ghost", icon: IconChevronLeft, onClick: onPreviousClick, attributes: {
-                        ref: prevRef,
-                        "aria-label": selectionMode === "date" ? previousMonthAriaLabel : previousYearAriaLabel,
-                    } }))),
-        React.createElement(View.Item, { grow: true },
-            selectionMode === "date" && (React.createElement(Button, { fullWidth: true, variant: "ghost", onClick: onMonthTitleClick, attributes: { ref: monthTitleRef } },
-                renderSelectedMonthLabel
-                    ? renderSelectedMonthLabel({ date: monthDate })
-                    : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }),
-                React.createElement(HiddenVisually, null, monthSelectionAriaLabel))),
-            selectionMode === "month" && (React.createElement(Text, { align: "center", weight: "medium" }, monthDate.toLocaleDateString("en-US", { year: "numeric" })))),
-        React.createElement(Hidden, { visibility: true, hide: isLastMonth },
-            React.createElement("div", { className: s.control },
-                React.createElement(Button, { variant: "ghost", icon: IconChevronRight, onClick: onNextClick, attributes: {
-                        ref: nextRef,
-                        "aria-label": selectionMode === "date" ? nextMonthAriaLabel : nextYearAriaLabel,
-                    } })))));
-};
-export default CalendarControls;

package/components/Calendar/CalendarDate.d.ts

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

package/components/Calendar/CalendarDate.js

@@ -1,58 +0,0 @@
-"use client";
-import React from "react";
-import Actionable from "../Actionable/index.js";
-import { classNames } from "../../utilities/helpers.js";
-import { getLocalISODate } from "./Calendar.utils.js";
-import s from "./Calendar.module.css";
-const CalendarDate = (props) => {
-    const { date, startValue, endValue, isActiveStart, isActiveEnd, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, renderAriaLabel, } = props;
-    if (!date)
-        return React.createElement("td", { className: s.cell, "aria-hidden": "true" });
-    const inRange = startValue &&
-        startValue < date &&
-        ((endValue && endValue > date) || (hoveredDate && !endValue && hoveredDate > date));
-    const dateClassNames = classNames([
-        s.cell,
-        !range && isActiveStart && s["cell--active-single"],
-        isActiveStart && s["cell--active-start"],
-        (isActiveEnd ||
-            (!endValue && isActiveStart && !(hoveredDate && startValue && hoveredDate > startValue))) &&
-            s["cell--active-end"],
-        inRange && s["cell--in-range"],
-    ]);
-    const handleClick = () => {
-        if (!range) {
-            onChange === null || onChange === void 0 ? void 0 : onChange({ value: date });
-            return;
-        }
-        const bothDatesSelected = startValue && endValue;
-        const noneDatesSelected = !startValue && !endValue;
-        const selectingBeforeStart = startValue && date < startValue;
-        const selectingStart = bothDatesSelected || noneDatesSelected || selectingBeforeStart;
-        const start = selectingStart ? date : startValue;
-        const end = !selectingStart ? date : null;
-        onChange === null || onChange === void 0 ? void 0 : onChange({ value: { start, end } });
-    };
-    const handleMouseEnter = () => {
-        onDateHover(date);
-    };
-    const handleMouseLeave = () => {
-        onDateHoverEnd(date);
-    };
-    return (React.createElement("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell" },
-        React.createElement(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
-                role: "checkbox",
-                tabIndex: focusable ? 0 : -1,
-                "aria-hidden": disabled,
-                "aria-label": renderAriaLabel
-                    ? renderAriaLabel({ date })
-                    : date.toLocaleDateString("en-us", { month: "long", day: "numeric", weekday: "long" }),
-                "aria-checked": isActiveStart || isActiveEnd,
-                "data-rs-date": getLocalISODate({ date }),
-                onMouseEnter: handleMouseEnter,
-                onMouseLeave: handleMouseLeave,
-                onFocus: handleMouseEnter,
-                onBlur: handleMouseLeave,
-            } }, date.getDate())));
-};
-export default CalendarDate;

package/components/Calendar/CalendarMonth.d.ts

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

package/components/Calendar/CalendarMonth.js

@@ -1,54 +0,0 @@
-"use client";
-import React from "react";
-import { getMonthWeeks, getWeekdayNames, getLocalISODate } from "./Calendar.utils.js";
-import CalendarDate from "./CalendarDate.js";
-import s from "./Calendar.module.css";
-const CalendarMonth = (props) => {
-    const { date, value, onChange, min, max, range, firstWeekDay, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
-    let foundFocusableDate = false;
-    const month = date.getMonth();
-    const weeks = getMonthWeeks({ date, firstWeekDay });
-    const weekdayNames = getWeekdayNames({ firstWeekDay, renderWeekDay });
-    return (React.createElement("table", { className: s.selection, role: "grid" },
-        React.createElement("thead", { "aria-hidden": "true" },
-            React.createElement("tr", null, weekdayNames.map((dayName) => (React.createElement("th", { className: s.weekday, key: dayName, scope: "col" }, dayName))))),
-        React.createElement("tbody", null, weeks.map((week) => {
-            var _a;
-            const key = [month, (_a = week[0]) === null || _a === void 0 ? void 0 : _a.getDate()].filter(Boolean).join("-");
-            return (React.createElement("tr", { key: key, className: s.row }, week.map((date, index) => {
-                const disabled = !!date && ((min && date < min) || (max && date > max));
-                const month = date === null || date === void 0 ? void 0 : date.getMonth();
-                const today = new Date();
-                const isoToday = getLocalISODate({ date: today });
-                const startValue = value && "start" in value ? value.start : value;
-                const endValue = value && "end" in value ? value.end : value;
-                const isoDate = date && getLocalISODate({ date });
-                const isoStartValue = startValue && getLocalISODate({ date: startValue });
-                const isoEndValue = endValue && getLocalISODate({ date: endValue });
-                const isActiveStart = !!isoDate && !!isoStartValue && isoDate === isoStartValue;
-                const isActiveEnd = !!isoDate && !!isoEndValue && isoDate === isoEndValue;
-                /**
-                 * Decide if date has to be focusable with Tab (only one date should be)
-                 * 1. If there is a selected value - it's focusable
-                 * 2. Otherwise, today's date is focusable
-                 * 3. Otherwise, first non-disabled date is focusable
-                 */
-                let focusable = false;
-                if (!foundFocusableDate && date) {
-                    if (!!startValue && startValue.getMonth() === (date === null || date === void 0 ? void 0 : date.getMonth())) {
-                        focusable = +startValue === +date;
-                    }
-                    else if (isoDate && month === today.getMonth()) {
-                        focusable = isoDate >= isoToday && !disabled;
-                    }
-                    else {
-                        focusable = !disabled;
-                    }
-                }
-                if (focusable)
-                    foundFocusableDate = true;
-                return (React.createElement(CalendarDate, { date: date, key: index, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, isActiveStart: isActiveStart, isActiveEnd: isActiveEnd, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, renderAriaLabel: renderDateAriaLabel }));
-            })));
-        }))));
-};
-export default CalendarMonth;

package/components/Calendar/CalendarUncontrolled.d.ts

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

package/components/Calendar/CalendarUncontrolled.js

@@ -1,29 +0,0 @@
-"use client";
-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 CalendarControlled from "./CalendarControlled.js";
-const CalendarUncontrolled = (props) => {
-    const { onChange, defaultValue, range } = props, controlledProps = __rest(props, ["onChange", "defaultValue", "range"]);
-    const [value, setValue] = React.useState(defaultValue || null);
-    if (range) {
-        return (React.createElement(CalendarControlled, Object.assign({ range: true }, controlledProps, { value: value, onChange: (args) => {
-                setValue(args.value);
-                onChange === null || onChange === void 0 ? void 0 : onChange(args);
-            } })));
-    }
-    return (React.createElement(CalendarControlled, Object.assign({}, controlledProps, { value: value, onChange: (args) => {
-            setValue(args.value);
-            onChange === null || onChange === void 0 ? void 0 : onChange(args);
-        } })));
-};
-export default CalendarUncontrolled;

package/components/Calendar/CalendarYear.d.ts

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

package/components/Calendar/CalendarYear.js

@@ -1,45 +0,0 @@
-import React from "react";
-import Actionable from "../Actionable/index.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import { getMonthNames } from "./Calendar.utils.js";
-import s from "./Calendar.module.css";
-const MONTHS_PER_ROW = 3;
-const CalendarYear = (props) => {
-    const { renderMonthLabel, renderMonthAriaLabel, monthDate, min, max, onMonthClick } = props;
-    const rootRef = React.useRef(null);
-    const monthNames = getMonthNames({ renderMonthLabel });
-    const rows = [];
-    for (let i = 0; i < monthNames.length; i += MONTHS_PER_ROW) {
-        const chunk = monthNames.slice(i, i + MONTHS_PER_ROW);
-        rows.push(chunk);
-    }
-    React.useEffect(() => {
-        var _a;
-        const focusableEl = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[tabIndex="0"]');
-        // Waitinf for key press events to finish before focusing the month
-        // To avoid it trigger the month click
-        onNextFrame(() => {
-            focusableEl === null || focusableEl === void 0 ? void 0 : focusableEl.focus();
-        });
-    }, []);
-    return (React.createElement("table", { ref: rootRef, role: "grid", className: s.selection },
-        React.createElement("tbody", null, rows.map((row, i) => (React.createElement("tr", { key: i, className: s.row }, row.map((name, j) => {
-            const monthIndex = i * MONTHS_PER_ROW + j;
-            const date = new Date(monthDate.getFullYear(), monthIndex);
-            const isOutsideMinBound = min && min.getFullYear() >= date.getFullYear() && min.getMonth() > date.getMonth();
-            const isOutsideMaxBound = max && max.getFullYear() <= date.getFullYear() && max.getMonth() < date.getMonth();
-            const disabled = isOutsideMaxBound || isOutsideMinBound;
-            return (React.createElement("td", { key: name, role: disabled ? "presentation" : "gridcell", className: s.cell },
-                React.createElement(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: () => onMonthClick(monthIndex), attributes: {
-                        tabIndex: monthIndex === monthDate.getMonth() ? 0 : -1,
-                        "aria-hidden": disabled,
-                        "aria-label": renderMonthAriaLabel
-                            ? renderMonthAriaLabel({ month: monthIndex })
-                            : name,
-                        "data-rs-date": `${monthDate.getFullYear()}-${(monthIndex + 1)
-                            .toString()
-                            .padStart(2, "0")}`,
-                    } }, name)));
-        })))))));
-};
-export default CalendarYear;

package/components/Card/Card.js

@@ -1,31 +0,0 @@
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import Actionable from "../Actionable/index.js";
-import s from "./Card.module.css";
-import getRadiusStyles from "../../styles/radius/index.js";
-import getBleedStyles from "../../styles/bleed/index.js";
-import getPaddingStyles from "../../styles/padding/index.js";
-import getHeightStyles from "../../styles/height/index.js";
-const Card = (props, ref) => {
-    const { padding = 4 } = props;
-    const { selected, elevated, bleed, height, onClick, href, children, className, attributes, 
-    /**
-     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-     * It still resolves the attributes correctly based on the tag
-     */
-    as: TagName = "div", } = props;
-    const isActionable = !!href || !!onClick;
-    const radiusStyles = getRadiusStyles("medium");
-    const bleedStyles = getBleedStyles(bleed);
-    const paddingStyles = getPaddingStyles(padding);
-    const heightStyles = getHeightStyles(height);
-    const rootClassNames = classNames(s.root, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.classNames, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, isActionable && s["--actionable"], elevated && s["--elevated"], selected && s["--selected"], className);
-    const style = Object.assign(Object.assign(Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.variables), paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
-    if (isActionable) {
-        return (React.createElement(Actionable, { className: rootClassNames, attributes: Object.assign(Object.assign({}, attributes), { style }), href: href, as: TagName, onClick: onClick, ref: ref },
-            React.createElement("span", { className: s.content }, children)));
-    }
-    return (React.createElement(TagName, Object.assign({}, attributes, { onClick: onClick, href: href, ref: ref, className: rootClassNames, style: style }),
-        React.createElement("span", { className: s.content }, children)));
-};
-export default React.forwardRef(Card);

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

@@ -1,16 +0,0 @@
-import React from "react";
-import type { ActionableProps } from "../Actionable";
-import type { ViewProps } from "../View";
-import type * as G from "../../types/global";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
-    padding?: G.Responsive<number>;
-    bleed?: G.Responsive<number>;
-    selected?: boolean;
-    elevated?: boolean;
-    children?: React.ReactNode;
-    onClick?: ActionableProps["onClick"];
-    href?: string;
-    as?: TagName;
-    className?: G.ClassName;
-    attributes?: G.Attributes<TagName, Props> & ActionableProps["attributes"];
-} & Pick<ViewProps, "height">;

package/components/Carousel/Carousel.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,67 +0,0 @@
-"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.types.d.ts

@@ -1,28 +0,0 @@
-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/CarouselControl.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,42 +0,0 @@
-"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/Checkbox/Checkbox.d.ts

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