reshaped 2.9.4 → 2.10.0

package/cli/theming/index.js

@@ -18,8 +18,10 @@ const transformDefinition = (name, definition, options) => {
         : path_1.default.resolve(outputPath, name);
     const themePath = path_1.default.resolve(themeFolderPath, "theme.css");
     const themeMediaPath = path_1.default.resolve(themeFolderPath, "media.css");
+    const themeJsonPath = path_1.default.resolve(themeFolderPath, "theme.json");
     fs_1.default.mkdirSync(themeFolderPath, { recursive: true });
     fs_1.default.writeFileSync(themePath, code.variables);
+    fs_1.default.writeFileSync(themeJsonPath, JSON.stringify(definition));
     if (code.media)
         fs_1.default.writeFileSync(themeMediaPath, code.media);
     const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;

package/components/Accordion/AccordionContent.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import Expandable from "../_private/Expandable/index.js";

package/components/Button/Button.js

@@ -8,7 +8,7 @@ import ButtonGroup from "./ButtonGroup.js";
 import ButtonAligner from "./ButtonAligner.js";
 import s from "./Button.module.css";
 const Button = forwardRef((props, ref) => {
-    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, disabled, type, href, size = "medium", className, children, rounded, attributes, onClick, icon, endIcon, } = props;
+    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, as, className, attributes, } = props;
     const iconOnly = (icon || endIcon) && !children;
     const rootClassName = classNames(s.root, className, color && s[`--color-${color}`], variant && s[`--variant-${variant}`], responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--full-width", fullWidth), elevated && variant !== "ghost" && s["--elevated"], rounded && s["--rounded"], disabled && s["--disabled"], loading && s["--loading"], highlighted && s["--highlighted"], iconOnly && s["--icon-only"]);
     const renderIcon = (position) => {
@@ -27,7 +27,7 @@ const Button = forwardRef((props, ref) => {
         });
         return (_jsx(Icon, { className: iconClassName, svg: (position === "start" ? icon : endIcon), size: iconSize, autoWidth: true }));
     };
-    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), type: type, onClick: onClick, href: href, ref: ref, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { size: "small", color: "inherit" }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
+    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), type: type, onClick: onClick, href: href, ref: ref, as: as, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { size: "small", color: "inherit" }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
 });
 Button.Group = ButtonGroup;
 Button.Aligner = ButtonAligner;

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

@@ -4,7 +4,7 @@ import type { ActionableProps } from "../Actionable";
 import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
 import type * as G from "../../types/global";
 export type Size = "xlarge" | "large" | "medium" | "small";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as"> & {
     color?: "black" | "white" | "primary" | "critical" | "positive" | "neutral" | "inherit";
     variant?: "solid" | "outline" | "ghost" | "faded";
     icon?: IconProps["svg"];

package/components/FormControl/FormControl.client.d.ts

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

package/components/FormControl/FormControl.client.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import useElementId from "../../hooks/useElementId.js";
+import { Provider } from "./FormControl.context.js";
+import { getCaptionId } from "./FormControl.utilities.js";
+const FormControl = (props) => {
+    const { children, id: passedId, required, hasError, group, disabled, size } = props;
+    const id = useElementId(passedId);
+    const WrapperTagName = group ? "fieldset" : "div";
+    const [helperRendered, setHelperRendered] = React.useState(false);
+    const [errorRendered, setErrorRendered] = React.useState(false);
+    const describedby = [
+        helperRendered && getCaptionId(id),
+        errorRendered && getCaptionId(id, "error"),
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const attributes = { id, "aria-describedby": describedby };
+    const errorRef = () => {
+        setErrorRendered(true);
+    };
+    const helperRef = () => {
+        setHelperRendered(true);
+    };
+    return (_jsx(WrapperTagName, { children: _jsx(Provider, { value: { required, hasError, errorRef, helperRef, attributes, group, disabled, size }, children: children }) }));
+};
+export default FormControl;

package/components/FormControl/FormControl.d.ts

@@ -1,8 +1,11 @@
 import type * as T from "./FormControl.types";
-declare const FormControl: {
-    (props: T.Props): import("react/jsx-runtime").JSX.Element;
-    Label: (props: T.LabelProps) => import("react/jsx-runtime").JSX.Element;
-    Helper: (props: T.CaptionProps) => import("react/jsx-runtime").JSX.Element;
-    Error: (props: T.CaptionProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Keeping the compound component composition inside a server component to make sure
+ * frameworks like Next.js won't require use client to be added on the product side
+ */
+declare const FormControl: import("react").ComponentType<T.Props> & {
+    Label: React.ComponentType<T.LabelProps>;
+    Helper: React.ComponentType<T.CaptionProps>;
+    Error: React.ComponentType<T.CaptionProps>;
 };
 export default FormControl;

package/components/FormControl/FormControl.js

@@ -1,65 +1,12 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import useElementId from "../../hooks/useElementId.js";
-import Text from "../Text/index.js";
-import { Provider, useFormControlPrivate } from "./FormControl.context.js";
-import s from "./FormControl.module.css";
-const getCaptionId = (id, variant) => `${id}-${variant || "caption"}`;
-const FormControl = (props) => {
-    const { children, id: passedId, required, hasError, group, disabled, size } = props;
-    const id = useElementId(passedId);
-    const WrapperTagName = group ? "fieldset" : "div";
-    const [helperRendered, setHelperRendered] = React.useState(false);
-    const [errorRendered, setErrorRendered] = React.useState(false);
-    const describedby = [
-        helperRendered && getCaptionId(id),
-        errorRendered && getCaptionId(id, "error"),
-    ]
-        .filter(Boolean)
-        .join(" ");
-    const attributes = { id, "aria-describedby": describedby };
-    const errorRef = () => {
-        setErrorRendered(true);
-    };
-    const helperRef = () => {
-        setHelperRendered(true);
-    };
-    return (_jsx(WrapperTagName, { children: _jsx(Provider, { value: { required, hasError, errorRef, helperRef, attributes, group, disabled, size }, children: children }) }));
-};
-const FormControlLabel = (props) => {
-    const { children } = props;
-    const { attributes, required, group, disabled, size } = useFormControlPrivate();
-    const id = `${attributes.id}-label`;
-    const tagProps = group
-        ? { as: "legend", attributes: { id } }
-        : {
-            as: "label",
-            attributes: { id, htmlFor: attributes.id },
-        };
-    return (_jsxs(Text, Object.assign({}, tagProps, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, children: [children, required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] })));
-};
-/* Private component */
-const FormControlCaption = (props) => {
-    const { children, variant, disabled } = props;
-    const { attributes, size, helperRef, errorRef } = useFormControlPrivate();
-    const id = getCaptionId(attributes.id, variant);
-    const color = variant === "error" ? "critical" : "neutral-faded";
-    const ref = variant === "error" ? errorRef : helperRef;
-    return (_jsx(Text, { as: "span", variant: size === "large" ? "body-3" : "caption-1", color: disabled && !variant ? "disabled" : color, attributes: { id, role: color ? "alert" : undefined, ref }, className: s.caption, children: children }));
-};
-const FormControlHelper = (props) => {
-    const { children } = props;
-    const { disabled } = useFormControlPrivate();
-    return _jsx(FormControlCaption, { disabled: disabled, children: children });
-};
-const FormControlError = (props) => {
-    const { children } = props;
-    const { hasError } = useFormControlPrivate();
-    if (!hasError)
-        return null;
-    return _jsx(FormControlCaption, { variant: "error", children: children });
-};
+import FormControlClient from "./FormControl.client.js";
+import FormControlLabel from "./FormControlLabel.js";
+import FormControlError from "./FormControlError.js";
+import FormControlHelper from "./FormControlHelper.js";
+/**
+ * Keeping the compound component composition inside a server component to make sure
+ * frameworks like Next.js won't require use client to be added on the product side
+ */
+const FormControl = FormControlClient;
 FormControl.Label = FormControlLabel;
 FormControl.Helper = FormControlHelper;
 FormControl.Error = FormControlError;

package/components/FormControl/FormControl.utilities.d.ts

@@ -0,0 +1,2 @@
+import type * as T from "./FormControl.types";
+export declare const getCaptionId: (id: string, variant?: T.PrivateCaptionProps["variant"]) => string;

package/components/FormControl/FormControl.utilities.js

@@ -0,0 +1 @@
+export const getCaptionId = (id, variant) => `${id}-${variant || "caption"}`;

package/components/FormControl/FormControlCaption.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./FormControl.types";
+declare const FormControlCaption: (props: T.PrivateCaptionProps) => import("react/jsx-runtime").JSX.Element;
+export default FormControlCaption;

package/components/FormControl/FormControlCaption.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text from "../Text/index.js";
+import { useFormControlPrivate } from "./FormControl.context.js";
+import { getCaptionId } from "./FormControl.utilities.js";
+import s from "./FormControl.module.css";
+const FormControlCaption = (props) => {
+    const { children, variant, disabled } = props;
+    const { attributes, size, helperRef, errorRef } = useFormControlPrivate();
+    const id = getCaptionId(attributes.id, variant);
+    const color = variant === "error" ? "critical" : "neutral-faded";
+    const ref = variant === "error" ? errorRef : helperRef;
+    return (_jsx(Text, { as: "span", variant: size === "large" ? "body-3" : "caption-1", color: disabled && !variant ? "disabled" : color, attributes: { id, role: color ? "alert" : undefined, ref }, className: s.caption, children: children }));
+};
+export default FormControlCaption;

package/components/FormControl/FormControlError.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./FormControl.types";
+declare const FormControlError: (props: T.CaptionProps) => import("react/jsx-runtime").JSX.Element | null;
+export default FormControlError;

package/components/FormControl/FormControlError.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormControlPrivate } from "./FormControl.context.js";
+import FormControlCaption from "./FormControlCaption.js";
+const FormControlError = (props) => {
+    const { children } = props;
+    const { hasError } = useFormControlPrivate();
+    if (!hasError)
+        return null;
+    return _jsx(FormControlCaption, { variant: "error", children: children });
+};
+export default FormControlError;

package/components/FormControl/FormControlHelper.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./FormControl.types";
+declare const FormControlHelper: (props: T.CaptionProps) => import("react/jsx-runtime").JSX.Element;
+export default FormControlHelper;

package/components/FormControl/FormControlHelper.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormControlPrivate } from "./FormControl.context.js";
+import FormControlCaption from "./FormControlCaption.js";
+const FormControlHelper = (props) => {
+    const { children } = props;
+    const { disabled } = useFormControlPrivate();
+    return _jsx(FormControlCaption, { disabled: disabled, children: children });
+};
+export default FormControlHelper;

package/components/FormControl/FormControlLabel.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./FormControl.types";
+declare const FormControlLabel: (props: T.LabelProps) => import("react/jsx-runtime").JSX.Element;
+export default FormControlLabel;

package/components/FormControl/FormControlLabel.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormControlPrivate } from "./FormControl.context.js";
+import Text from "../Text/index.js";
+import s from "./FormControl.module.css";
+const FormControlLabel = (props) => {
+    const { children } = props;
+    const { attributes, required, group, disabled, size } = useFormControlPrivate();
+    const id = `${attributes.id}-label`;
+    const tagProps = group
+        ? { as: "legend", attributes: { id } }
+        : {
+            as: "label",
+            attributes: { id, htmlFor: attributes.id },
+        };
+    return (_jsxs(Text, Object.assign({}, tagProps, { variant: size === "large" ? "body-2" : "body-3", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, children: [children, required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] })));
+};
+export default FormControlLabel;

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

@@ -1,10 +1,9 @@
 declare const _default: {
     title: string;
-    component: {
-        (props: import("./..").FormControlProps): import("react").JSX.Element;
-        Label: (props: import("../FormControl.types").LabelProps) => import("react").JSX.Element;
-        Helper: (props: import("../FormControl.types").CaptionProps) => import("react").JSX.Element;
-        Error: (props: import("../FormControl.types").CaptionProps) => import("react").JSX.Element | null;
+    component: import("react").ComponentType<import("./..").FormControlProps> & {
+        Label: import("react").ComponentType<import("../FormControl.types").LabelProps>;
+        Helper: import("react").ComponentType<import("../FormControl.types").CaptionProps>;
+        Error: import("react").ComponentType<import("../FormControl.types").CaptionProps>;
     };
     parameters: {
         iframe: {

package/components/MenuItem/MenuItem.js

@@ -7,11 +7,11 @@ import View from "../View/index.js";
 import MenuItemAligner from "./MenuItemAligner.js";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
-    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, className, attributes, } = props;
+    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, as, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
     const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
     const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
-    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), onClick: onClick, href: href, ref: ref, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
+    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), onClick: onClick, href: href, ref: ref, as: as, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
 });
 MenuItem.Aligner = MenuItemAligner;
 export default MenuItem;

package/components/MenuItem/MenuItem.types.d.ts

@@ -3,7 +3,7 @@ import type { IconProps } from "../Icon";
 import type { ActionableProps } from "../Actionable";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as"> & {
     color?: "neutral" | "critical" | "primary";
     icon?: IconProps["svg"];
     startSlot?: React.ReactNode;

package/components/Pagination/Pagination.d.ts

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

package/components/Pagination/Pagination.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PaginationControlled from "./PaginationControlled.js";
+import PaginationUncontrolled from "./PaginationUncontrolled.js";
+const Pagination = (props) => {
+    const { page } = props;
+    if (page !== undefined)
+        return _jsx(PaginationControlled, Object.assign({}, props));
+    return _jsx(PaginationUncontrolled, Object.assign({}, props));
+};
+export default Pagination;

package/components/Pagination/Pagination.types.d.ts

@@ -0,0 +1,52 @@
+import type * as G from "../../types/global";
+export type BaseProps = {
+    /**
+     * Total number of pages available
+     */
+    total: number;
+    /**
+     * Event handler triggered when the current page changes
+     */
+    onChange?: (args: {
+        page: number;
+    }) => void;
+    /**
+     * Function to dynamically get an aria-label for each
+     */
+    pageAriaLabel?: (args: {
+        page: number;
+    }) => string;
+    /**
+     * aria-label for the previous page button
+     */
+    previousAriaLabel: string;
+    /**
+     * aria-label for the next page button
+     */
+    nextAriaLabel: string;
+    /**
+     * Custom root element className
+     */
+    className?: G.ClassName;
+    /**
+     * Custom root element attributes
+     */
+    attributes?: G.Attributes<"div", Props>;
+};
+export type ControlledProps = BaseProps & {
+    /**
+     * Currently selected page number, starts with 1.
+     * Enables controlled component behavior.
+     */
+    page: number;
+    defaultPage?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    page?: never;
+    /**
+     * Default selected page number, starts with 1.
+     * Enables uncontrolled component behavior.
+     */
+    defaultPage?: number;
+};
+export type Props = ControlledProps | UncontrolledProps;

package/components/Pagination/Pagination.types.js

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

package/components/Pagination/PaginationControlled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Pagination.types";
+declare const PaginationControlled: (props: T.ControlledProps) => import("react/jsx-runtime").JSX.Element;
+export default PaginationControlled;

package/components/Pagination/PaginationControlled.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "../Button/index.js";
+import View from "../View/index.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { range } from "../../utilities/helpers.js";
+const PaginationControlled = (props) => {
+    const { total, page: selectedPage = 1, onChange, pageAriaLabel, previousAriaLabel, nextAriaLabel, className, attributes, } = props;
+    const selectionRadius = 1;
+    const edgeRadius = 1;
+    const pages = [];
+    const hasHead = selectedPage - selectionRadius > edgeRadius + 2;
+    const hasTail = selectedPage + selectionRadius < total - edgeRadius;
+    /**
+     * Calculate the amount of rendered pages + dots
+     * Removing head or tail also removes their dots
+     */
+    let count = selectionRadius * 2 + 1;
+    if (!hasHead)
+        count += edgeRadius + 1;
+    if (!hasTail)
+        count += edgeRadius + 1;
+    const selectionStart = hasHead
+        ? Math.min(total - count + 1, Math.max(1, selectedPage - selectionRadius))
+        : 1;
+    const selectionEnd = hasTail ? Math.min(selectionStart + count - 1, total) : total;
+    if (hasHead)
+        pages.push(...range(1, edgeRadius), null);
+    pages.push(...range(selectionStart, selectionEnd));
+    if (hasTail)
+        pages.push(null, ...range(total - edgeRadius + 1, total));
+    const changePage = (page) => {
+        const resolvedValue = Math.min(total, Math.max(1, page));
+        onChange === null || onChange === void 0 ? void 0 : onChange({ page: resolvedValue });
+    };
+    return (_jsxs(View, { direction: "row", align: "center", gap: 1, className: className, attributes: attributes, children: [_jsx(Button, { variant: "ghost", size: "small", icon: IconChevronLeft, onClick: () => changePage(selectedPage - 1), disabled: selectedPage === 1, attributes: { "aria-label": previousAriaLabel } }), pages.map((page, index) => {
+                if (page === null) {
+                    return (_jsx(View, { width: 7, align: "center", children: "..." }, `dots-${index}`));
+                }
+                return (_jsx(Button, { size: "small", variant: page === selectedPage ? "solid" : "ghost", color: page === selectedPage ? "primary" : "neutral", onClick: () => changePage(page), attributes: {
+                        "aria-label": pageAriaLabel === null || pageAriaLabel === void 0 ? void 0 : pageAriaLabel({ page }),
+                        "aria-current": page === selectedPage,
+                    }, children: page }, index));
+            }), _jsx(Button, { variant: "ghost", size: "small", icon: IconChevronRight, onClick: () => changePage(selectedPage + 1), disabled: selectedPage === total, attributes: { "aria-label": nextAriaLabel } })] }));
+};
+export default PaginationControlled;

package/components/Pagination/PaginationUncontrolled.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Pagination.types";
+declare const PaginationUncontrolled: (props: T.UncontrolledProps) => import("react/jsx-runtime").JSX.Element;
+export default PaginationUncontrolled;

package/components/Pagination/PaginationUncontrolled.js

@@ -0,0 +1,25 @@
+"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 { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import PaginationControlled from "./PaginationControlled.js";
+const PaginationUncontrolled = (props) => {
+    const { defaultPage = 1, onChange } = props, controlledProps = __rest(props, ["defaultPage", "onChange"]);
+    const [page, setPage] = React.useState(defaultPage || 1);
+    const handleChange = (args) => {
+        setPage(args.page);
+        onChange === null || onChange === void 0 ? void 0 : onChange(args);
+    };
+    return _jsx(PaginationControlled, Object.assign({}, controlledProps, { onChange: handleChange, page: page }));
+};
+export default PaginationUncontrolled;

package/components/Pagination/index.d.ts

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

package/components/Pagination/index.js

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

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    title: string;
+    component: (props: import("./..").PaginationProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const truncate: () => import("react").JSX.Element;

package/components/Pagination/tests/Pagination.stories.js

@@ -0,0 +1,24 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Pagination from "../index.js";
+export default {
+    title: "Components/Pagination",
+    component: Pagination,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/pagination",
+        },
+    },
+};
+export const truncate = () => {
+    return (<Example>
+			<Example.Item title="start">
+				<Pagination total={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+			</Example.Item>
+			<Example.Item title="middle">
+				<Pagination total={10} defaultPage={5} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+			</Example.Item>
+			<Example.Item title="end">
+				<Pagination total={10} defaultPage={10} previousAriaLabel="Previous page" nextAriaLabel="Next page" pageAriaLabel={(args) => `Page ${args.page}`}/>
+			</Example.Item>
+		</Example>);
+};

package/components/Table/Table.js

@@ -5,11 +5,11 @@ import getWidthStyles from "../../styles/width/index.js";
 import getMinWidthStyles from "../../styles/minWidth/index.js";
 import s from "./Table.module.css";
 const TableCellPrivate = (props) => {
-    const { minWidth, rowSpan, colSpan, align, tagName: TagName, padding, paddingInline, paddingBlock, children, attributes, } = props;
+    const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, attributes, } = props;
     const width = props.width === "auto" ? "0px" : props.width;
     const widthStyles = getWidthStyles(width);
     const minWidthStyles = getMinWidthStyles(minWidth || width);
-    const headingClassNames = classNames(s.cell, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.classNames, align && s[`cell--align-${align}`]);
+    const headingClassNames = classNames(s.cell, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.classNames, align && s[`cell--align-${align}`], verticalAlign && s[`cell--valign-${verticalAlign}`]);
     const headingStyle = Object.assign(Object.assign(Object.assign(Object.assign({}, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.variables), minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.variables), responsiveVariables("--rs-table-p-vertical", paddingBlock !== null && paddingBlock !== void 0 ? paddingBlock : padding)), responsiveVariables("--rs-table-p-horizontal", paddingInline !== null && paddingInline !== void 0 ? paddingInline : padding));
     return (_jsx(TagName, Object.assign({}, attributes, { className: headingClassNames, rowSpan: rowSpan, colSpan: colSpan, style: headingStyle, children: children })));
 };

package/components/Table/Table.module.css

@@ -1 +1 @@
-.root{margin:0 calc(var(--rs-unit-x4) * -1);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);overflow:auto;padding:0 var(--rs-unit-x4)}.table{border-collapse:separate;border-radius:var(--rs-unit-radius-medium);min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:first-child{padding-inline-end:0}.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:first-child{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}
+.root{margin:0 calc(var(--rs-unit-x4) * -1);mask-image:linear-gradient(to right,transparent 0,#000 var(--rs-unit-x4),#000 calc(100% - var(--rs-unit-x4)),transparent 100%);overflow:auto;padding:0 var(--rs-unit-x4)}.table{border-collapse:separate;min-width:100%;overflow:hidden}.row{transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.cell{--rs-table-p-vertical-s:3;--rs-table-p-horizontal-s:4;padding:calc(var(--rs-unit-x1) * var(--rs-table-p-vertical-s)) calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s));text-align:start;vertical-align:top}.cell:not(:last-child){padding-inline-end:0}.row:not(:first-child) .cell{border-top:1px solid var(--rs-color-border-neutral-faded)}.cell--align-start{text-align:start}.cell--align-center{text-align:center}.cell--align-end{text-align:end}.cell--valign-start{vertical-align:top}.cell--valign-center{vertical-align:middle}.cell--valign-end{vertical-align:bottom}.--row-highlighted{background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.--border-outer .table{border:1px solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-unit-radius-medium)}.--border-column .cell:not(:first-child){border-inline-start:1px solid var(--rs-color-border-neutral-faded)}.--border-column .cell:not(:last-child){padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-table-p-horizontal-s))}

package/components/Table/Table.types.d.ts

@@ -14,6 +14,7 @@ export type RowProps = {
 };
 export type CellProps = {
     align?: "start" | "center" | "end";
+    verticalAlign?: "start" | "center" | "end";
     rowSpan?: number;
     colSpan?: number;
     padding?: number;

package/components/Table/tests/Table.stories.js

@@ -3,6 +3,7 @@ import { Example } from "../../../utilities/storybook/index.js";
 import Table from "../index.js";
 import Checkbox from "../../Checkbox/index.js";
 import Card from "../../Card/index.js";
+import View from "../../View/index.js";
 export default {
     title: "Components/Table",
     component: Table,
@@ -54,6 +55,22 @@ export const layout = () => (<Example>
 				</Table.Row>
 			</Table>
 		</Example.Item>
+		<Example.Item title="valign: center for cell 2, valign: end for cell 3">
+			<Table>
+				<Table.Row>
+					<Table.Heading>Column 1</Table.Heading>
+					<Table.Heading>Column 2</Table.Heading>
+					<Table.Heading>Column 2</Table.Heading>
+				</Table.Row>
+				<Table.Row>
+					<Table.Cell>
+						<View height={15} backgroundColor="neutral-faded"/>
+					</Table.Cell>
+					<Table.Cell verticalAlign="center">Cell 2</Table.Cell>
+					<Table.Cell verticalAlign="end">Cell 3</Table.Cell>
+				</Table.Row>
+			</Table>
+		</Example.Item>
 		<Example.Item title="width: 40%, minWidth: 200px for col 1">
 			<Table>
 				<Table.Row>

package/components/Text/Text.js

@@ -10,14 +10,14 @@ const tagMap = {
     "title-6": "h6",
 };
 const Text = (props) => {
-    const { variant, color, weight, align, decoration, maxLines, children, className, attributes } = props;
+    const { variant, color, weight, align, decoration, maxLines, wrap, children, className, attributes, } = props;
     const largestVariant = typeof variant === "string" ? variant : (variant === null || variant === void 0 ? void 0 : variant.xl) || (variant === null || variant === void 0 ? void 0 : variant.l) || (variant === null || variant === void 0 ? void 0 : variant.m) || (variant === null || variant === void 0 ? void 0 : variant.s);
     /**
      * 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
      */
     const TagName = props.as || (largestVariant && tagMap[largestVariant]) || "div";
-    const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--align", align), weight && s[`--weight-${weight}`], decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], className);
+    const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--align", align), weight && s[`--weight-${weight}`], decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], wrap && s[`--wrap-${wrap}`], className);
     const style = Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), { "--rs-text-lines": maxLines });
     return (_jsx(TagName, Object.assign({}, attributes, { className: rootClassName, style: style, children: children })));
 };