@veracity/vui 0.5.2 → 0.6.1

package/popover/popoverContent.js

@@ -34,15 +34,15 @@ var context_1 = require("./context");
 /** Displays provided content in an overlaying wrapper. */
 exports.PopoverContent = (0, core_1.vui)(function (props, ref) {
     var _a;
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
     var popoverProps = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {};
     var isLazy = popoverProps.isLazy, isOpen = popoverProps.isOpen, setPopper = popoverProps.setPopper;
-    var children = props.children, rest = __rest(props, ["children"]);
     var styles = (0, core_1.useStyleConfig)('Popover', __assign(__assign({}, popoverProps), props));
     var shouldRenderChildren = isLazy ? isOpen : true;
     return (
     // Wrapping div prevents an error thrown when conditionally unmounting this component
     react_1.default.createElement("div", null,
-        react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: "vui-popoverContent", overflowY: "auto", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
+        react_1.default.createElement(box_1.default, __assign({ bg: "white", borderRadius: "md", boxShadow: "2", className: (0, utils_1.cs)('vui-popoverContent', className), overflowY: "auto", ref: (0, utils_1.mergeRefs)(setPopper, ref) }, styles.content, rest), shouldRenderChildren ? children : null)));
 });
 exports.PopoverContent.displayName = 'PopoverContent';
 exports.default = exports.PopoverContent;

package/popover/popoverTrigger.js

@@ -37,17 +37,17 @@ var context_1 = require("./context");
  */
 exports.PopoverTrigger = (0, core_1.vui)(function (props, ref) {
     var _a;
+    // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
+    var As = props.as, className = props.className, onClickProp = props.onClick, rest = __rest(props, ["as", "className", "onClick"]);
     var _b = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}, setReference = _b.setReference, popoverProps = __rest(_b, ["setReference"]);
     var styles = (0, core_1.useStyleConfig)('Popover', __assign(__assign({}, popoverProps), props));
-    // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
-    var As = props.as, onClickProp = props.onClick, rest = __rest(props, ["as", "onClick"]);
     var Element = As || core_1.v.button;
     var onClick = function (e) {
         // Avoids triggering parent's onClick, like when inside a ListItem
         e.stopPropagation();
         onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
     };
-    return (react_1.default.createElement(Element, __assign({ className: "vui-popoverTrigger", onClick: onClick, ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest)));
+    return (react_1.default.createElement(Element, __assign({ className: (0, utils_1.cs)('vui-popoverTrigger', className), onClick: onClick, ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest)));
 });
 exports.PopoverTrigger.displayName = 'PopoverTrigger';
 exports.default = exports.PopoverTrigger;

package/radio/context.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { Dict } from '../utils';
-declare const RadioGroupProvider: import("react").Provider<Dict<any>>, useRadioGroup: () => Dict<any>;
-export { RadioGroupProvider, useRadioGroup };
+declare const RadioGroupProvider: import("react").Provider<Dict<any>>, useRadioGroupContext: () => Dict<any>;
+export { RadioGroupProvider, useRadioGroupContext };

package/radio/context.js

@@ -16,8 +16,8 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRadioGroup = exports.RadioGroupProvider = void 0;
+exports.useRadioGroupContext = exports.RadioGroupProvider = void 0;
 var utils_1 = require("../utils");
-var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), RadioGroupProvider = _a[0], useRadioGroup = _a[1];
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), RadioGroupProvider = _a[0], useRadioGroupContext = _a[1];
 exports.RadioGroupProvider = RadioGroupProvider;
-exports.useRadioGroup = useRadioGroup;
+exports.useRadioGroupContext = useRadioGroupContext;

package/radio/radio.js

@@ -85,7 +85,7 @@ exports.RadioBase = core_1.styled.labelBox(templateObject_3 || (templateObject_3
  */
 exports.Radio = (0, core_1.vui)(function (props, ref) {
     var _a, _b;
-    var _c = (_a = (0, context_1.useRadioGroup)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _c.defaultValue, groupIsChecked = _c.isChecked, groupOnChange = _c.onChange, groupValue = _c.value, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
+    var _c = (_a = (0, context_1.useRadioGroupContext)()) !== null && _a !== void 0 ? _a : {}, groupDefaultValue = _c.defaultValue, groupIsChecked = _c.isChecked, groupOnChange = _c.onChange, groupValue = _c.value, radioGroupProps = __rest(_c, ["defaultValue", "isChecked", "onChange", "value"]);
     var defaultIsChecked = groupIsChecked !== undefined ? groupIsChecked === props.value : undefined;
     var mergedProps = __assign(__assign({}, radioGroupProps), props);
     var _d = (0, core_1.omitThemingProps)(mergedProps), _e = _d.checked, checked = _e === void 0 ? groupValue !== undefined ? props.value === groupValue : undefined : _e, children = _d.children, className = _d.className, _f = _d.defaultChecked, defaultChecked = _f === void 0 ? groupDefaultValue !== undefined ? props.value === groupDefaultValue : undefined : _f, disabled = _d.disabled, _g = _d.icon, iconProp = _g === void 0 ? 'cuiRadioUnselected' : _g, _h = _d.iconChecked, iconChecked = _h === void 0 ? 'cuiRadioSelected' : _h, id = _d.id, inputProps = _d.inputProps, inputRef = _d.inputRef, label = _d.label, name = _d.name, onChange = _d.onChange, required = _d.required, value = _d.value, rest = __rest(_d, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "id", "inputProps", "inputRef", "label", "name", "onChange", "required", "value"]);

package/spinner/consts.d.ts

@@ -4,33 +4,21 @@ export declare const spinnerPositionMapping: {
         container: {
             flexDirection: string;
         };
-        circle: {
-            mb: number;
-        };
     };
     left: {
         container: {
             flexDirection: string;
         };
-        circle: {
-            ml: number;
-        };
     };
     right: {
         container: {
             flexDirection: string;
         };
-        circle: {
-            mr: number;
-        };
     };
     top: {
         container: {
             flexDirection: string;
         };
-        circle: {
-            mt: number;
-        };
     };
 };
 export declare const spinnerSpeedMapping: Dict<string>;

package/spinner/consts.js

@@ -3,20 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.spinnerSpeedMapping = exports.spinnerPositionMapping = void 0;
 exports.spinnerPositionMapping = {
     bottom: {
-        container: { flexDirection: 'column' },
-        circle: { mb: 1 }
+        container: { flexDirection: 'column' }
     },
     left: {
-        container: { flexDirection: 'row-reverse' },
-        circle: { ml: 1 }
+        container: { flexDirection: 'row-reverse' }
     },
     right: {
-        container: { flexDirection: 'row' },
-        circle: { mr: 1 }
+        container: { flexDirection: 'row' }
     },
     top: {
-        container: { flexDirection: 'column-reverse' },
-        circle: { mt: 1 }
+        container: { flexDirection: 'column-reverse' }
     }
 };
 exports.spinnerSpeedMapping = {

package/spinner/spinner.js

@@ -59,8 +59,8 @@ exports.Spinner = (0, core_1.vui)(function (props, ref) {
         h: isCustomSize ? size : undefined,
         w: isCustomSize ? size : undefined
     });
-    return (react_1.default.createElement(box_1.default, __assign({ center: true, className: (0, utils_1.cs)('vui-spinner', className), ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
-        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "vui-spin " + speed + " linear infinite", className: "vui-spinnerCircle" }, styles.circle, positionProps.circle, circleProps)),
+    return (react_1.default.createElement(box_1.default, __assign({ center: true, className: (0, utils_1.cs)('vui-spinner', className), gap: 1, ref: ref, transitionDuration: "fast" }, styles.container, positionProps.container, rest),
+        react_1.default.createElement(exports.SpinnerCircle, __assign({ animation: "vui-spin " + speed + " linear infinite", className: "vui-spinnerCircle" }, styles.circle, circleProps)),
         text && (react_1.default.createElement(t_1.default, __assign({ className: "vui-spinnerText" }, styles.text), text))));
 });
 exports.Spinner.displayName = 'Spinner';

package/switch/context.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SwitchContext } from './switch.types';
-declare const SwitchProvider: import("react").Provider<SwitchContext>, useSwitch: () => SwitchContext;
-export { SwitchProvider, useSwitch };
+declare const SwitchProvider: import("react").Provider<SwitchContext>, useSwitchContext: () => SwitchContext;
+export { SwitchProvider, useSwitchContext };

package/switch/context.js

@@ -16,8 +16,8 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSwitch = exports.SwitchProvider = void 0;
+exports.useSwitchContext = exports.SwitchProvider = void 0;
 var utils_1 = require("../utils");
-var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), SwitchProvider = _a[0], useSwitch = _a[1];
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), SwitchProvider = _a[0], useSwitchContext = _a[1];
 exports.SwitchProvider = SwitchProvider;
-exports.useSwitch = useSwitch;
+exports.useSwitchContext = useSwitchContext;

package/switch/switchButton.js

@@ -86,12 +86,12 @@ exports.SwitchButtonBase = core_1.styled.spanBox(templateObject_4 || (templateOb
  * Handles controlled and uncontrolled modes.
  */
 exports.SwitchButton = (0, core_1.vui)(function (props, ref) {
-    var mergedProps = __assign(__assign({}, (0, context_1.useSwitch)()), props);
+    var mergedProps = __assign(__assign({}, (0, context_1.useSwitchContext)()), props);
     var _a = (0, core_1.omitThemingProps)(mergedProps), checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, id = _a.id, innerLabelOff = _a.innerLabelOff, innerLabelOn = _a.innerLabelOn, inputProps = _a.inputProps, inputRef = _a.inputRef, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
     var isControlled = (0, react_1.useRef)(checked !== undefined).current;
     var _b = __read((0, react_1.useState)(checked !== null && checked !== void 0 ? checked : defaultChecked), 2), isChecked = _b[0], setIsChecked = _b[1];
     var _c = __read((0, react_1.useState)(false), 2), isFocused = _c[0], setIsFocused = _c[1];
-    var styles = (0, core_1.useStyleConfig)('Switch', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Switch', (0, context_1.useSwitchContext)());
     var _d = styles.button, thumbStyles = _d.thumb, trackStyles = _d.track, buttonStyles = __rest(_d, ["thumb", "track"]);
     (0, react_1.useEffect)(function () {
         isControlled && setIsChecked(checked);

package/switch/switchLabel.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -18,11 +29,13 @@ exports.SwitchLabel = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays label text within the Switch component. */
 exports.SwitchLabel = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Switch', __assign(__assign({}, (0, context_1.useSwitch)()), props));
-    return react_1.default.createElement(t_1.default, __assign({ className: "vui-switchLabel", display: "flex", ref: ref }, styles.label, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Switch', (0, context_1.useSwitchContext)());
+    return react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-switchLabel', className), display: "flex", ref: ref }, styles.label, rest));
 });
 exports.SwitchLabel.displayName = 'SwitchLabel';
 exports.default = exports.SwitchLabel;

package/tag/context.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { Dict } from '../utils';
-declare const TagProvider: import("react").Provider<Dict<any>>, useTag: () => Dict<any>;
-export { TagProvider, useTag };
+declare const TagProvider: import("react").Provider<Dict<any>>, useTagContext: () => Dict<any>;
+export { TagProvider, useTagContext };

package/tag/context.js

@@ -16,8 +16,8 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTag = exports.TagProvider = void 0;
+exports.useTagContext = exports.TagProvider = void 0;
 var utils_1 = require("../utils");
-var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), TagProvider = _a[0], useTag = _a[1];
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), TagProvider = _a[0], useTagContext = _a[1];
 exports.TagProvider = TagProvider;
-exports.useTag = useTag;
+exports.useTagContext = useTagContext;

package/tag/tagButton.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -18,12 +29,14 @@ exports.TagButton = void 0;
 var react_1 = __importDefault(require("react"));
 var button_1 = __importDefault(require("../button"));
 var core_1 = require("../core");
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays a button within the Tag. */
 exports.TagButton = (0, core_1.vui)(function (props, ref) {
-    var mergedProps = __assign(__assign({}, (0, context_1.useTag)()), props);
-    var styles = (0, core_1.useStyleConfig)('Tag', mergedProps);
-    return (react_1.default.createElement(button_1.default, __assign({ borderColor: "transparent", className: "vui-tagButton", colorScheme: mergedProps.colorScheme, disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, props)));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var mergedProps = __assign(__assign({}, (0, context_1.useTagContext)()), props);
+    var styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
+    return (react_1.default.createElement(button_1.default, __assign({ borderColor: "transparent", className: (0, utils_1.cs)('vui-tagButton', className), colorScheme: mergedProps.colorScheme, disabled: mergedProps.disabled, hoverBorderColor: "transparent", icon: "falTimes", mr: -0.5, ref: ref, variant: "text" }, styles.button, rest)));
 });
 exports.TagButton.displayName = 'TagButton';
 exports.default = exports.TagButton;

package/tag/tagIcon.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -18,11 +29,13 @@ exports.TagIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays an icon within the Tag. */
 exports.TagIcon = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Tag', __assign(__assign({}, (0, context_1.useTag)()), props));
-    return react_1.default.createElement(icon_1.default, __assign({ className: "vui-tagIcon", ref: ref }, styles.icon, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
+    return react_1.default.createElement(icon_1.default, __assign({ className: (0, utils_1.cs)('vui-tagIcon', className), ref: ref }, styles.icon, rest));
 });
 exports.TagIcon.displayName = 'TagIcon';
 exports.default = exports.TagIcon;

package/tag/tagText.js

@@ -10,6 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -18,11 +29,13 @@ exports.TagText = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
 var context_1 = require("./context");
 /** Displays text within the Tag. */
 exports.TagText = (0, core_1.vui)(function (props, ref) {
-    var styles = (0, core_1.useStyleConfig)('Tag', __assign(__assign({}, (0, context_1.useTag)()), props));
-    return react_1.default.createElement(t_1.default, __assign({ className: "vui-tagText", fontSize: "inherit", ref: ref }, styles.text, props));
+    var className = props.className, rest = __rest(props, ["className"]);
+    var styles = (0, core_1.useStyleConfig)('Tag', (0, context_1.useTagContext)());
+    return react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-tagText', className), fontSize: "inherit", ref: ref }, styles.text, rest));
 });
 exports.TagText.displayName = 'TagText';
 exports.default = exports.TagText;

package/textarea/textarea.js

@@ -120,7 +120,7 @@ exports.Textarea = (0, core_1.vui)(function (props, ref) {
             rows: rows,
             value: value
         }, styles.textarea, textareaAliasedProps, textareaProps)),
-        showCount && (react_1.default.createElement(t_1.default, { color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
             " / ",
             maxLength))));

package/theme/components.d.ts

@@ -679,6 +679,13 @@ declare const _default: {
         };
         variants: {};
     };
+    Pagination: {
+        baseStyle: {};
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {};
+    };
     Panel: {
         baseStyle: {};
         defaultProps: {

package/theme/components.js

@@ -23,15 +23,16 @@ var theme_17 = __importDefault(require("../menu/theme"));
 var theme_18 = __importDefault(require("../modal/theme"));
 var theme_19 = __importDefault(require("../notification/theme"));
 var theme_20 = __importDefault(require("../p/theme"));
-var theme_21 = __importDefault(require("../panel/theme"));
-var theme_22 = __importDefault(require("../popover/theme"));
-var theme_23 = __importDefault(require("../radio/theme"));
-var theme_24 = __importDefault(require("../skeleton/theme"));
-var theme_25 = __importDefault(require("../spinner/theme"));
-var theme_26 = __importDefault(require("../switch/theme"));
-var theme_27 = __importDefault(require("../t/theme"));
-var theme_28 = __importDefault(require("../tag/theme"));
-var theme_29 = __importDefault(require("../textarea/theme"));
+var theme_21 = __importDefault(require("../pagination/theme"));
+var theme_22 = __importDefault(require("../panel/theme"));
+var theme_23 = __importDefault(require("../popover/theme"));
+var theme_24 = __importDefault(require("../radio/theme"));
+var theme_25 = __importDefault(require("../skeleton/theme"));
+var theme_26 = __importDefault(require("../spinner/theme"));
+var theme_27 = __importDefault(require("../switch/theme"));
+var theme_28 = __importDefault(require("../t/theme"));
+var theme_29 = __importDefault(require("../tag/theme"));
+var theme_30 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
@@ -53,13 +54,14 @@ exports.default = {
     Modal: theme_18.default,
     Notification: theme_19.default,
     P: theme_20.default,
-    Panel: theme_21.default,
-    Popover: theme_22.default,
-    Radio: theme_23.default,
-    Skeleton: theme_24.default,
-    Spinner: theme_25.default,
-    Switch: theme_26.default,
-    T: theme_27.default,
-    Tag: theme_28.default,
-    Textarea: theme_29.default
+    Pagination: theme_21.default,
+    Panel: theme_22.default,
+    Popover: theme_23.default,
+    Radio: theme_24.default,
+    Skeleton: theme_25.default,
+    Spinner: theme_26.default,
+    Switch: theme_27.default,
+    T: theme_28.default,
+    Tag: theme_29.default,
+    Textarea: theme_30.default
 };

package/theme/defaultTheme.d.ts

@@ -875,6 +875,13 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        Pagination: {
+            baseStyle: {};
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {};
+        };
         Panel: {
             baseStyle: {};
             defaultProps: {

package/utils/react.d.ts

@@ -1,4 +1,4 @@
-import React, { RefObject } from 'react';
+import React, { DependencyList, RefObject } from 'react';
 import { AnyFunction, CreateContextOptions, CreateContextReturn } from './types';
 declare type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 /**
@@ -11,7 +11,7 @@ export declare function createContext<ContextType>(options?: CreateContextOption
 /** Assigns a node to all provided refs. */
 export declare function mergeRefs<T>(...refs: (ReactRef<T> | undefined)[]): (node: T | null) => void;
 /** Returns given callback with a stable reference, but keeps it updated internally. */
-export declare function useCallbackRef<T extends AnyFunction>(callback?: T): T;
+export declare function useCallbackRef<T extends AnyFunction>(callback?: T, deps?: DependencyList): T;
 /**
  * Triggers given callback when an event happens outside of a given element.
  * Event listeners are attached to the window object.
@@ -20,6 +20,20 @@ export declare function useCallbackRef<T extends AnyFunction>(callback?: T): T;
  * @param events - array of events listened for (default: ['mousedown', 'touchstart'])
  */
 export declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], callback?: (event: Event) => void, events?: string[]): void;
+export declare type UseControlledProps<T> = {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+};
+/** Supports state management in components that can be controlled or uncontrolled. */
+export declare function useControlled<T>(props: UseControlledProps<T>): [T, React.Dispatch<React.SetStateAction<T>>, {
+    isControlled: boolean;
+    reset: () => void;
+}];
 /** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
 export declare function useIds(id: string, prefixes: string[]): string[];
+/**
+ * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
+ */
+export declare function useIsMounted(): () => boolean;
 export {};

package/utils/react.js

@@ -45,9 +45,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIds = exports.useClickOutside = exports.useCallbackRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
+exports.useIsMounted = exports.useIds = exports.useControlled = exports.useClickOutside = exports.useCallbackRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
 var react_1 = __importStar(require("react"));
 var assertion_1 = require("./assertion");
+var function_1 = require("./function");
 /**
  * Assigns given value to the provided ref.
  * Supports ref as function (e.g. useState) and classic ref (e.g. useRef).
@@ -96,7 +97,8 @@ function mergeRefs() {
 exports.mergeRefs = mergeRefs;
 // TODO: Bring it from UI-Utils
 /** Returns given callback with a stable reference, but keeps it updated internally. */
-function useCallbackRef(callback) {
+function useCallbackRef(callback, deps) {
+    if (deps === void 0) { deps = []; }
     var ref = (0, react_1.useRef)(callback);
     ref.current = callback;
     return (0, react_1.useCallback)((function () {
@@ -106,7 +108,7 @@ function useCallbackRef(callback) {
             args[_i] = arguments[_i];
         }
         return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call.apply(_a, __spreadArray([ref], __read(args), false));
-    }), []);
+    }), deps);
 }
 exports.useCallbackRef = useCallbackRef;
 var defaultEvents = ['mousedown', 'touchstart'];
@@ -136,8 +138,44 @@ function useClickOutside(ref, callback, events) {
     }, [eventsString, ref]);
 }
 exports.useClickOutside = useClickOutside;
+// TODO: Move to ui-utils
+/** Supports state management in components that can be controlled or uncontrolled. */
+function useControlled(props) {
+    var defaultValue = props.defaultValue, onChangeProp = props.onChange, valueProp = props.value;
+    var _a = __read((0, react_1.useState)(defaultValue), 2), valueState = _a[0], setValue = _a[1];
+    var isControlled = valueProp !== undefined;
+    var value = isControlled ? valueProp : valueState;
+    /** Triggers the external callback with the new value. In uncontrolled mode, updates state. */
+    var onChange = useCallbackRef(function (next) {
+        var newValue = (0, function_1.runIfFn)(next);
+        if (!isControlled)
+            setValue(newValue);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+    });
+    /** In uncontrolled mode, sets the state to the default value. */
+    var reset = useCallbackRef(function () {
+        !isControlled && defaultValue && onChange(defaultValue);
+    });
+    return [value, onChange, { isControlled: isControlled, reset: reset }];
+}
+exports.useControlled = useControlled;
 /** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
 function useIds(id, prefixes) {
     return prefixes.map(function (prefix) { return prefix + "-" + id; });
 }
 exports.useIds = useIds;
+// TODO: Bring it from ui-utils
+/**
+ * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
+ */
+function useIsMounted() {
+    var isMounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return (0, react_1.useCallback)(function () { return isMounted.current; }, []);
+}
+exports.useIsMounted = useIsMounted;