reshaped 2.11.12 → 3.0.0

package/components/Toast/ToastRegion.js

@@ -1,64 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames } from "../../utilities/helpers.js";
-import { focusableSelector } from "../../utilities/a11y/focus.js";
-import ToastContainer from "./ToastContainer.js";
-import ToastContext from "./Toast.context.js";
-import s from "./Toast.module.css";
-const ToastRegion = (props) => {
-    const { position, nested } = props;
-    const { queues, options } = React.useContext(ToastContext);
-    const [inspecting, setInspecting] = React.useState(false);
-    const ignoreHoverRef = React.useRef(false);
-    const rootRef = React.useRef(null);
-    const queue = queues[position];
-    const { width, expanded } = (options === null || options === void 0 ? void 0 : options[position]) || {};
-    const regionClassNames = classNames(s.region, s[`region--position-${position}`], nested && s["region--nested"]);
-    const filteredLength = queue.filter((item) => item.status === "entered").length;
-    let hiddenCount = 0;
-    // If touch event was triggered – ignore hover events
-    const handleTouchStart = () => {
-        ignoreHoverRef.current = true;
-    };
-    const handleClick = (e) => {
-        let currentEl = e.target;
-        let isFocusable = false;
-        while (currentEl && currentEl !== rootRef.current && !isFocusable) {
-            isFocusable = currentEl.matches(focusableSelector);
-            currentEl = currentEl.parentElement;
-        }
-        // Change inspecting mode when clicking on static content
-        if (!isFocusable) {
-            setInspecting((prevInspecting) => !prevInspecting);
-        }
-        // Click is called last so we reset our hover events ignore
-        ignoreHoverRef.current = false;
-    };
-    const handleMouseEnter = () => {
-        if (ignoreHoverRef.current)
-            return;
-        setInspecting(true);
-    };
-    const handleMouseLeave = () => {
-        if (ignoreHoverRef.current)
-            return;
-        setInspecting(false);
-    };
-    React.useEffect(() => {
-        if (queue.length === 0)
-            setInspecting(false);
-    }, [queue.length]);
-    if (!queue.length)
-        return null;
-    return (
-    // We only use onClick for touch devices since touchend is not supported
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    _jsx("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width }, children: queue.map((data, index) => {
-            const visibleIndex = filteredLength - index + hiddenCount - 1;
-            if (data.status !== "entered")
-                hiddenCount += 1;
-            return (_jsx(ToastContainer, Object.assign({}, data, { index: visibleIndex, inspected: inspecting || !!expanded }), data.id));
-        }) }));
-};
-export default ToastRegion;

package/components/Tooltip/Tooltip.module.css

@@ -1 +0,0 @@
-.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);max-width:360px;padding:var(--rs-unit-x1) var(--rs-unit-x2)}

package/components/Tooltip/tests/Tooltip.stories.js

@@ -1,84 +0,0 @@
-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 { Example } from "../../../utilities/storybook/index.js";
-import Tooltip from "../index.js";
-import Button from "../../Button/index.js";
-import View from "../../View/index.js";
-import useResponsiveClientValue from "../../../hooks/useResponsiveClientValue.js";
-export default {
-    title: "Components/Tooltip",
-    component: Tooltip,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/tooltip",
-        },
-    },
-};
-const Demo = (props) => {
-    const { position } = props, rest = __rest(props, ["position"]);
-    return (<Tooltip text={position} position={position} {...rest}>
-			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
-		</Tooltip>);
-};
-const DemoResponsive = (props) => {
-    const { position } = props, rest = __rest(props, ["position"]);
-    const screenSize = useResponsiveClientValue({
-        s: "small",
-        m: "medium",
-    });
-    return (<Tooltip text={position} position={position} {...rest} active={screenSize === "small"}>
-			{(attributes) => <Button attributes={attributes}>Show tooltip</Button>}
-		</Tooltip>);
-};
-export const position = () => (<Example>
-		<Example.Item title="position: bottom-start">
-			<Demo position="bottom-start"/>
-		</Example.Item>
-		<Example.Item title="position: bottom">
-			<Demo position="bottom"/>
-		</Example.Item>
-		<Example.Item title="position: bottom-end">
-			<Demo position="bottom-end"/>
-		</Example.Item>
-		<Example.Item title="position: top-start">
-			<Demo position="top-start"/>
-		</Example.Item>
-		<Example.Item title="position: top">
-			<Demo position="top"/>
-		</Example.Item>
-		<Example.Item title="position: top-end">
-			<Demo position="top-end"/>
-		</Example.Item>
-
-		<Example.Item title="position: start">
-			<View align="end">
-				<Demo position="start"/>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="position: end">
-			<Demo position="end"/>
-		</Example.Item>
-	</Example>);
-export const controlled = () => (<Example>
-		<Example.Item title="active, controlled, position: bottom">
-			<Demo position="bottom"/>
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => (<Example>
-		<Example.Item title="without text">
-			<Tooltip>{() => <Button>Button</Button>}</Tooltip>
-		</Example.Item>
-		<Example.Item title="responsive visibility">
-			<DemoResponsive />
-		</Example.Item>
-	</Example>);

package/components/View/View.d.ts

@@ -1,6 +0,0 @@
-import type * as T from "./View.types";
-declare const View: {
-    <As extends keyof JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
-    Item: <As_1 extends keyof JSX.IntrinsicElements = "div">(props: T.ItemProps<As_1>) => import("react/jsx-runtime").JSX.Element;
-};
-export default View;

package/components/View/View.js

@@ -1,152 +0,0 @@
-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 { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
-import Divider from "../Divider/index.js";
-import Hidden from "../Hidden/index.js";
-import s from "./View.module.css";
-import getRadiusStyles from "../../styles/radius/index.js";
-import getBleedStyles from "../../styles/bleed/index.js";
-import getWidthStyles from "../../styles/width/index.js";
-import getHeightStyles from "../../styles/height/index.js";
-import getMaxWidthStyles from "../../styles/maxWidth/index.js";
-import getMaxHeightStyles from "../../styles/maxHeight/index.js";
-import getMinWidthStyles from "../../styles/minWidth/index.js";
-import getMinHeightStyles from "../../styles/minHeight/index.js";
-import getPositionStyles from "../../styles/position/index.js";
-import getInsetStyles from "../../styles/inset/index.js";
-import getAspectRatioStyles from "../../styles/aspectRatio/index.js";
-const ViewItem = (props) => {
-    const { columns, grow, gapBefore, as: TagName = "div", order, children, className, attributes, } = props;
-    const itemClassNames = classNames(s.item, className, gapBefore === "auto" && s["item--gap-auto"], gapBefore !== undefined && s["item--gap-before"], columns && s["item--columns"], ...responsiveClassNames(s, "item--grow", grow), ...responsiveClassNames(s, "item--columns", columns));
-    const itemVariables = Object.assign(Object.assign({}, responsiveVariables("--rs-view-item-order", order)), responsiveVariables("--rs-view-item-gap-before", gapBefore));
-    return (_jsx(TagName, Object.assign({}, attributes, { style: Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), itemVariables), className: itemClassNames, children: children })));
-};
-const View = (props) => {
-    const { 
-    /**
-     * Layout props
-     */
-    align, justify, wrap, gap, height, width, aspectRatio, maxHeight, maxWidth, minHeight, minWidth, padding, paddingInline, paddingBlock, paddingBottom, paddingEnd, paddingStart, paddingTop, bleed, 
-    /**
-     * Style props
-     * */
-    animated, backgroundColor, borderColor, borderRadius, shadow, textAlign, overflow, position = "relative", inset, insetTop, insetBottom, insetStart, insetEnd, zIndex, 
-    /**
-     * Item prop
-     */
-    grow, 
-    /**
-     * 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", children, divided, className, attributes, } = props;
-    let isFlex = !!align || !!justify || !!gap || !!props.direction;
-    const direction = props.direction || (isFlex ? "column" : undefined);
-    const radiusStyles = getRadiusStyles(borderRadius);
-    const bleedStyles = getBleedStyles(bleed);
-    const widthStyles = getWidthStyles(width);
-    const heightStyles = getHeightStyles(height);
-    const maxWidthStyles = getMaxWidthStyles(maxWidth);
-    const maxHeightStyles = getMaxHeightStyles(maxHeight);
-    const minWidthStyles = getMinWidthStyles(minWidth);
-    const minHeightStyles = getMinHeightStyles(minHeight);
-    const positionStyles = getPositionStyles(position);
-    const insetStyles = getInsetStyles(inset);
-    const insetTopStyles = getInsetStyles(insetTop, "top");
-    const insetBottomStyles = getInsetStyles(insetBottom, "bottom");
-    const insetStartStyles = getInsetStyles(insetStart, "start");
-    const insetEndStyles = getInsetStyles(insetEnd, "end");
-    const aspectRatioStyles = getAspectRatioStyles(aspectRatio);
-    let renderedItemIndex = 0;
-    // If wrap is not defined, it can be set based on item grow and split usage
-    let nowrap;
-    const renderDivider = ({ className, key }) => {
-        const dividerClassName = classNames(s.divider, className);
-        let isDividerVertical = false;
-        if (typeof direction === "string" && direction.startsWith("row")) {
-            isDividerVertical = true;
-        }
-        else if (direction) {
-            const viewports = Object.keys(direction);
-            isDividerVertical = viewports.reduce((acc, viewport) => {
-                const viewportDirection = direction[viewport];
-                if (!viewportDirection)
-                    return acc;
-                return Object.assign(Object.assign({}, acc), { [viewport]: viewportDirection.startsWith("row") });
-            }, {});
-        }
-        return (_jsx("div", { className: dividerClassName, children: _jsx(Divider, { vertical: isDividerVertical, blank: true }) }, `${key}-divider`));
-    };
-    const renderItem = ({ className, child, index }) => {
-        var _a, _b, _c;
-        const isItem = child.type === ViewItem;
-        const isView = child.type === View;
-        const key = child.key || index;
-        const dividerElement = !!index && divided && renderDivider({ className, key });
-        let itemElement;
-        if (isItem) {
-            itemElement = React.cloneElement(child, {
-                className: classNames(className, child.props.className),
-            });
-        }
-        else if (className || !React.isValidElement(child)) {
-            itemElement = (_jsx("div", { className: className, children: child }, key));
-        }
-        else {
-            itemElement = child;
-        }
-        // Passing grow here because it's responsive and nowrap should follow it
-        if (isItem && ((_a = child.props) === null || _a === void 0 ? void 0 : _a.grow))
-            nowrap = child.props.grow;
-        if (isItem && ((_b = child.props) === null || _b === void 0 ? void 0 : _b.gap) === "auto")
-            nowrap = true;
-        if ((isItem || isView) && ((_c = child.props) === null || _c === void 0 ? void 0 : _c.grow))
-            isFlex = true;
-        return [dividerElement, itemElement];
-    };
-    const formattedChildren = React.Children.map(children, (child, index) => {
-        if (!child)
-            return null;
-        // Ignore the indices of the items that rendered nothing
-        const renderedIndex = renderedItemIndex;
-        renderedItemIndex += 1;
-        if (child.type === Hidden && typeof child.props.children !== "function") {
-            const _a = child.props, { children: hiddenChild } = _a, hiddenProps = __rest(_a, ["children"]);
-            const key = child.key || index;
-            return (_createElement(Hidden, Object.assign({}, hiddenProps, { key: key }), (className) => renderItem({ className, child: hiddenChild, index: renderedIndex })));
-        }
-        if (child.type === React.Fragment && React.Children.count(child.props.children) > 1) {
-            return child.props.children.map((child) => {
-                if (!child)
-                    return null;
-                const index = renderedIndex;
-                renderedItemIndex += 1;
-                return renderItem({ child, index });
-            });
-        }
-        return renderItem({ child, index: renderedIndex });
-    });
-    // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
-    const rootClassNames = classNames(s.root, className, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, positionStyles === null || positionStyles === void 0 ? void 0 : positionStyles.classNames, bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.classNames, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, aspectRatioStyles === null || aspectRatioStyles === void 0 ? void 0 : aspectRatioStyles.classNames, maxWidthStyles === null || maxWidthStyles === void 0 ? void 0 : maxWidthStyles.classNames, maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.classNames, minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.classNames, minHeightStyles === null || minHeightStyles === void 0 ? void 0 : minHeightStyles.classNames, insetStyles === null || insetStyles === void 0 ? void 0 : insetStyles.classNames, insetTopStyles === null || insetTopStyles === void 0 ? void 0 : insetTopStyles.classNames, insetBottomStyles === null || insetBottomStyles === void 0 ? void 0 : insetBottomStyles.classNames, insetStartStyles === null || insetStartStyles === void 0 ? void 0 : insetStartStyles.classNames, insetEndStyles === null || insetEndStyles === void 0 ? void 0 : insetEndStyles.classNames, textAlign && s[`--align-text-${textAlign}`], backgroundColor && s[`--bg-${backgroundColor}`], borderColor && s[`--bd-${borderColor}`], borderColor && s["--bd"], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
-        s["--padding"], paddingBottom !== undefined && s["--padding-bottom"], paddingEnd !== undefined && s["--padding-end"], paddingStart !== undefined && s["--padding-start"], paddingTop !== undefined && s["--padding-top"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), ...responsiveClassNames(s, "--align", align), ...responsiveClassNames(s, "--justify", justify), 
-    // Wrap and nowrap are separate here because inverting any of them could result into a false value which will be ignored by classNames
-    ...responsiveClassNames(s, "--nowrap", nowrap || wrap === false), ...responsiveClassNames(s, "--wrap", wrap), 
-    // Item classnames
-    ...responsiveClassNames(s, "item--grow", grow));
-    const rootVariables = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), responsiveVariables("--rs-view-gap", gap)), responsiveVariables("--rs-view-p-vertical", paddingBlock || padding)), responsiveVariables("--rs-view-p-horizontal", paddingInline || padding)), responsiveVariables("--rs-view-p-bottom", paddingBottom)), responsiveVariables("--rs-view-p-top", paddingTop)), responsiveVariables("--rs-view-p-start", paddingStart)), responsiveVariables("--rs-view-p-end", paddingEnd)), bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.variables), widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables), aspectRatioStyles === null || aspectRatioStyles === void 0 ? void 0 : aspectRatioStyles.variables), maxWidthStyles === null || maxWidthStyles === void 0 ? void 0 : maxWidthStyles.variables), maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.variables), minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.variables), minHeightStyles === null || minHeightStyles === void 0 ? void 0 : minHeightStyles.variables), insetStyles === null || insetStyles === void 0 ? void 0 : insetStyles.variables), insetTopStyles === null || insetTopStyles === void 0 ? void 0 : insetTopStyles.variables), insetBottomStyles === null || insetBottomStyles === void 0 ? void 0 : insetBottomStyles.variables), insetStartStyles === null || insetStartStyles === void 0 ? void 0 : insetStartStyles.variables), insetEndStyles === null || insetEndStyles === void 0 ? void 0 : insetEndStyles.variables), (zIndex ? { "--rs-view-z": zIndex } : {}));
-    return (_jsx(TagName, Object.assign({}, attributes, { className: rootClassNames, style: rootVariables, children: formattedChildren })));
-};
-View.Item = ViewItem;
-export default View;

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

@@ -1,43 +0,0 @@
-import React from "react";
-import { ViewProps } from "./..";
-declare const _default: {
-    title: string;
-    component: {
-        <As extends keyof JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
-        Item: <As_1 extends keyof JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As_1>) => React.JSX.Element;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const padding: () => React.JSX.Element;
-export declare const direction: () => React.JSX.Element;
-export declare const gap: () => React.JSX.Element;
-export declare const divided: () => React.JSX.Element;
-export declare const bleed: () => React.JSX.Element;
-export declare const wrap: () => React.JSX.Element;
-export declare const align: () => React.JSX.Element;
-export declare const justify: () => React.JSX.Element;
-export declare const textAlign: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const ratio: () => React.JSX.Element;
-export declare const maxSize: () => React.JSX.Element;
-export declare const minSize: () => React.JSX.Element;
-export declare const background: () => React.JSX.Element;
-export declare const border: () => React.JSX.Element;
-export declare const radius: () => React.JSX.Element;
-export declare const shadow: () => React.JSX.Element;
-export declare const overflow: () => React.JSX.Element;
-export declare const position: () => React.JSX.Element;
-export declare const inset: () => React.JSX.Element;
-export declare const animated: () => React.JSX.Element;
-export declare const itemGapBefore: () => React.JSX.Element;
-export declare const itemGrow: () => React.JSX.Element;
-export declare const itemColumns: () => React.JSX.Element;
-export declare const itemOrder: () => React.JSX.Element;
-export declare const testHiddenItem: () => React.JSX.Element;
-export declare const testNestedGaps: () => React.JSX.Element;
-export declare const testComposition: () => React.JSX.Element;