@adamjanicki/ui-extended 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Adam Janicki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# @adamjanicki/ui-extended
+
+**Warning: use at own risk, these are mainly for personal use across my other sites, so while I strive to write good code, there may be bugs!**
+
+## Installation
+
+```bash
+npm install @adamjanicki/ui-extended
+```
+
+## Usage
+
+```ts
+// Add here
+```
+
+## Importing CSS
+
+Unfortunately, there was no great way to handle CSS. I often hate how large libraries make it extremely difficult to override CSS without using `!important`, or using inline styles. So, I've decided to just import the CSS directly into your project. Here's an example of how to do it:
+
+```ts
+import React from "react";
+import ReactDOM from "react-dom/client";
+// Make sure to import this first so your styles take priority!
+import "@adamjanicki/ui-extended/style.css";
+// All your other global styles can go here!
+import "src/css/style.css";
+import App from "src/App";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```

package/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,89 @@
+import React from "react";
+import Popover from "../Popover/Popover";
+import { IconInput } from "@adamjanicki/ui";
+interface Props<T> {
+    /**
+     * The value of the input field
+     */
+    value: string;
+    /**
+     * Callback for when the input field changes
+     * @param event standard React ChangeEvent
+     */
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Callback for when an option is selected
+     * @param value selected value
+     */
+    onSelect: (value: T) => void;
+    /**
+     * The list of available options
+     */
+    options: T[] | readonly T[];
+    /**
+     * Predicate to filter options
+     * @param option current option
+     * @returns true if the option should be displayed
+     */
+    filterOption?: (option: T) => boolean;
+    /**
+     * Render function for the option
+     * @param option current option
+     * @returns node to render for the option
+     */
+    renderOption?: (option: T) => React.ReactNode;
+    /**
+     * Node to render when no options are available
+     */
+    noOptionsNode?: React.ReactNode;
+    /**
+     * Classname to apply to the root element
+     */
+    className?: string;
+    /**
+     * Style to apply to the root element
+     */
+    style?: React.CSSProperties;
+    /**
+     * Group options by a string
+     * @param option current option
+     * @returns String to group by
+     */
+    groupBy?: (option: T) => string;
+    /**
+     * Render function for the group
+     * @param group name
+     * @returns node to render for the group
+     */
+    renderGroup?: (group: string) => React.ReactNode;
+    /**
+     * Allow free text input
+     */
+    freeSolo?: boolean;
+    /**
+     * Focus on the input field after selecting an option
+     */
+    focusOnSelect?: boolean;
+    /**
+     * Props for the input field
+     */
+    InputProps?: React.ComponentProps<typeof IconInput>;
+    /**
+     * Props for the popover
+     */
+    popoverProps?: Partial<React.ComponentProps<typeof Popover>>;
+    /**
+     * Props for the list element
+     */
+    listProps?: React.ComponentProps<"ul">;
+    /**
+     * Props for the list item elements
+     */
+    listItemProps?: React.ComponentProps<"li">;
+    /**
+     * Footer node to render at the bottom of the popover
+     */
+    footer?: React.ReactNode;
+}
+declare const Autocomplete: <T>(props: Props<T>) => JSX.Element;
+export default Autocomplete;

package/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,133 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Popover from "../Popover/Popover";
+import ClickOutside from "@adamjanicki/ui/components/ClickOutside";
+import { IconInput } from "@adamjanicki/ui";
+import { classNames } from "@adamjanicki/ui/utils/util";
+var defaultRenderOption = function (option) { return (_jsx("div", { className: "ajui-autocomplete-default-rendering", children: "".concat(option) })); };
+var Autocomplete = function (props) {
+    var _a, _b;
+    var options = props.options, _c = props.renderOption, renderOption = _c === void 0 ? defaultRenderOption : _c, _d = props.filterOption, filterOption = _d === void 0 ? function () { return true; } : _d, groupBy = props.groupBy, renderGroup = props.renderGroup, noOptionsNode = props.noOptionsNode, _e = props.InputProps, InputProps = _e === void 0 ? {} : _e, _f = props.freeSolo, freeSolo = _f === void 0 ? false : _f, _g = props.focusOnSelect, focusOnSelect = _g === void 0 ? true : _g, value = props.value, onInputChange = props.onInputChange, onSelect = props.onSelect, popoverProps = props.popoverProps, footer = props.footer, _h = props.listItemProps, listItemProps = _h === void 0 ? {} : _h, _j = props.listProps, listProps = _j === void 0 ? {} : _j, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "focusOnSelect", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps"]);
+    var onRef = React.useRef(null);
+    var nextRef = React.useRef(null);
+    var prevRef = React.useRef(null);
+    var _k = React.useState(), on = _k[0], setOn = _k[1];
+    var filteredOptions = options.filter(filterOption);
+    var groupMap = new Map();
+    if (groupBy) {
+        var uniqueGroups_1 = [];
+        filteredOptions.forEach(function (option) {
+            var group = groupBy(option);
+            if (!uniqueGroups_1.includes(group)) {
+                uniqueGroups_1.push(group);
+            }
+        });
+        var offset_1 = 0;
+        filteredOptions = uniqueGroups_1
+            .map(function (group) {
+            var filtered = filteredOptions.filter(function (option) { return groupBy(option) === group; });
+            groupMap.set(offset_1, group);
+            offset_1 += filtered.length;
+            return filtered;
+        })
+            .flat();
+    }
+    if (freeSolo && value.length > 0 && filteredOptions.length === 0) {
+        filteredOptions.push(value);
+    }
+    var handleChange = function (v) {
+        onSelect(v);
+        var current = inputRef.current;
+        closeMenu();
+        if (focusOnSelect)
+            return current === null || current === void 0 ? void 0 : current.focus();
+    };
+    var closeMenu = function () {
+        setOn(undefined);
+        setOpen(false);
+    };
+    var openMenu = function () {
+        setOpen(true);
+    };
+    var handleKeys = function (_a) {
+        var code = _a.code;
+        if (code === "Escape") {
+            closeMenu();
+        }
+        var modulo = filteredOptions.length;
+        if (code === "Enter") {
+            var current = onRef.current;
+            if (modulo > 0 && current) {
+                return current.click();
+            }
+        }
+        if (modulo > 0 && code === "ArrowDown") {
+            var newOn = ((on !== undefined ? on : -1) + 1) % modulo;
+            setOn(newOn);
+            if (nextRef.current) {
+                nextRef.current.scrollIntoView({
+                    block: "nearest",
+                    behavior: "smooth",
+                });
+            }
+        }
+        else if (modulo > 0 && code === "ArrowUp") {
+            var newOn = ((on !== undefined ? on : 0) - 1 + modulo) % modulo;
+            setOn(newOn);
+            if (prevRef.current) {
+                prevRef.current.scrollIntoView({
+                    block: "nearest",
+                    behavior: "smooth",
+                });
+            }
+        }
+    };
+    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
+    var inputContainerRef = React.useRef(null);
+    var inputRef = React.useRef(null);
+    var popoverOpen = open && (filteredOptions.length > 0 || value.length > 0);
+    return (_jsx(ClickOutside, { onClickOutside: closeMenu, children: _jsxs("div", __assign({}, rest, { onKeyUp: function (e) { return handleKeys(e); }, children: [_jsx(IconInput, __assign({}, InputProps, { ref: inputContainerRef, inputProps: __assign(__assign({}, (InputProps.inputProps || {})), { value: value, onChange: function (e) {
+                            setOn(undefined);
+                            onInputChange(e);
+                            if (e.target.value) {
+                                !open && openMenu();
+                            }
+                            else {
+                                var current = inputRef.current;
+                                current && current.focus();
+                            }
+                        }, onClick: function () {
+                            !open && openMenu();
+                        }, ref: inputRef, autoComplete: "off" }) })), _jsxs(Popover, __assign({}, popoverProps, { open: popoverOpen, triggerRef: inputContainerRef, style: __assign(__assign({ zIndex: 100 }, ((popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.style) || {})), { padding: 0, margin: 0, width: (_b = (_a = inputContainerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0 }), className: "ajui-autocomplete-popover", children: [_jsx("ul", __assign({}, listProps, { className: classNames("ajui-autocomplete-ul", listProps.className), children: filteredOptions.length
+                                ? filteredOptions.map(function (option, index) {
+                                    var group = groupMap.get(index);
+                                    return (_jsxs(React.Fragment, { children: [group && ((renderGroup === null || renderGroup === void 0 ? void 0 : renderGroup(group)) || group), _jsx("li", __assign({}, listItemProps, { ref: on === index ? onRef : null, onMouseEnter: function () { return setOn(index); }, className: classNames("ajui-autocomplete-li", on === index
+                                                    ? "ajui-autocomplete-on-option"
+                                                    : undefined, listItemProps.className), onClick: function () { return handleChange(option); }, children: renderOption(option) }))] }, index));
+                                })
+                                : !freeSolo &&
+                                    (noOptionsNode || defaultRenderOption("No results found")) })), footer] }))] })) }));
+};
+export default Autocomplete;

package/components/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+import Autocomplete from "./Autocomplete";
+export default Autocomplete;

package/components/Autocomplete/index.js

@@ -0,0 +1,2 @@
+import Autocomplete from "./Autocomplete";
+export default Autocomplete;

package/components/Popover/Popover.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { type Placement } from "@floating-ui/react";
+type Props = {
+    /**
+     * Children to render inside the popover.
+     */
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The trigger ref for the element to position the popover over.
+     */
+    triggerRef: React.RefObject<HTMLElement>;
+    /**
+     * Whether the popover is open.
+     */
+    open: boolean;
+    /**
+     * The placement of the popover relative to the trigger element.
+     * @default "bottom"
+     */
+    placement?: Placement;
+    /**
+     * Additional styles to apply to the popover container.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Additional classes to apply to the popover container.
+     */
+    className?: string;
+    /**
+     * The offset of the popover relative to the trigger element.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Callback function to execute when the popover is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Whether to return focus to the trigger element when the popover is closed
+     * by pressing the escape key.
+     */
+    returnFocusOnEscape?: boolean;
+};
+declare const Popover: (props: Props) => JSX.Element | null;
+export default Popover;

package/components/Popover/Popover.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFloating, autoUpdate, offset, useDismiss, } from "@floating-ui/react";
+var Popover = function (props) {
+    var triggerRef = props.triggerRef, open = props.open, _a = props.placement, placement = _a === void 0 ? "bottom" : _a, style = props.style, _b = props.offset, placementOffset = _b === void 0 ? 0 : _b, className = props.className, children = props.children, onClose = props.onClose, _c = props.returnFocusOnEscape, returnFocusOnEscape = _c === void 0 ? true : _c;
+    var handleOnClose = function () {
+        var _a, _b;
+        if (!returnFocusOnEscape)
+            (_b = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    var middleware = [offset(placementOffset)];
+    var _d = useFloating({
+        elements: { reference: triggerRef.current },
+        open: open,
+        onOpenChange: function (open) {
+            if (!open)
+                handleOnClose();
+        },
+        placement: placement,
+        whileElementsMounted: autoUpdate,
+        middleware: middleware,
+    }), floatingStyles = _d.floatingStyles, context = _d.context, refs = _d.refs;
+    useDismiss(context);
+    if (!open)
+        return null;
+    return (_jsx("div", { ref: refs.setFloating, style: __assign(__assign(__assign({}, (style || {})), floatingStyles), { outline: "none" }), className: className, children: children }));
+};
+export default Popover;

package/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+import Popover from "./Popover";
+export default Popover;

package/components/Popover/index.js

@@ -0,0 +1,2 @@
+import Popover from "./Popover";
+export default Popover;

package/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,36 @@
+import { type Placement } from "@floating-ui/react";
+type Props = {
+    /**
+     * Children to render inside the tooltip container.
+     */
+    tooltipContent: React.ReactNode | React.ReactNode[];
+    /**
+     * The element to attach the tooltip to.
+     * **IMPORTANT**: This must be able to hold a ref.
+     */
+    children: React.ReactElement;
+    /**
+     * The placement of the popover relative to the trigger element.
+     * @default "bottom"
+     */
+    placement?: Placement;
+    /**
+     * Additional styles to apply to the tooltip container.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Additional classes to apply to the tooltip container.
+     */
+    className?: string;
+    /**
+     * The offset of the popover relative to the trigger element.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * Whether to disable the flip behavior of the tooltip.
+     */
+    disableFlip?: boolean;
+};
+declare const Tooltip: (props: Props) => JSX.Element;
+export default Tooltip;

package/components/Tooltip/Tooltip.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState } from "react";
+import { useFloating, useHover, useInteractions, flip, safePolygon, autoUpdate, offset, } from "@floating-ui/react";
+var Tooltip = function (props) {
+    var children = props.children, content = props.tooltipContent, _a = props.placement, placement = _a === void 0 ? "bottom" : _a, style = props.style, _b = props.offset, placementOffset = _b === void 0 ? 0 : _b, className = props.className, _c = props.disableFlip, disableFlip = _c === void 0 ? false : _c;
+    var _d = useState(false), open = _d[0], setOpen = _d[1];
+    var middleware = [offset(placementOffset)];
+    if (!disableFlip) {
+        middleware.push(flip());
+    }
+    var _e = useFloating({
+        open: open,
+        onOpenChange: setOpen,
+        middleware: middleware,
+        whileElementsMounted: autoUpdate,
+        placement: placement,
+    }), refs = _e.refs, floatingStyles = _e.floatingStyles, context = _e.context;
+    var hover = useHover(context, {
+        delay: { open: 200, close: 100 },
+        handleClose: safePolygon(),
+        mouseOnly: true,
+    });
+    var _f = useInteractions([hover]), getReferenceProps = _f.getReferenceProps, getFloatingProps = _f.getFloatingProps;
+    return (_jsxs(_Fragment, { children: [cloneElement(children, __assign({ ref: refs.setReference }, getReferenceProps())), open && (_jsx("div", __assign({ ref: refs.setFloating, style: __assign(__assign({}, (style || {})), floatingStyles) }, getFloatingProps(), { className: className, children: content })))] }));
+};
+export default Tooltip;

package/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import Tooltip from "./Tooltip";
+export default Tooltip;

package/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+import Tooltip from "./Tooltip";
+export default Tooltip;

package/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from "./useTheme";

package/hooks/index.js

@@ -0,0 +1 @@
+export * from "./useTheme";

package/hooks/useTheme.d.ts

@@ -0,0 +1,24 @@
+export type Theme = "light" | "dark";
+export type ThemePreference = Theme | "system";
+export type ThemePreferenceStore = {
+    /**
+     * The current theme preference.
+     */
+    preference: ThemePreference;
+    /**
+     * Set the theme preference.
+     *
+     * @param preference the new theme preference
+     */
+    setPreference: (preference: ThemePreference) => void;
+};
+/**
+ * A hook for getting and setting the current theme preference.
+ */
+export declare const useThemePreference: any;
+/**
+ * A hook for getting the current theme
+ *
+ * @returns The current theme, either "light" or "dark"
+ */
+export declare const useTheme: () => Theme;

package/hooks/useTheme.js

@@ -0,0 +1,27 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { useMediaQuery } from "@adamjanicki/ui";
+/**
+ * A hook for getting and setting the current theme preference.
+ */
+export var useThemePreference = create(persist(function (set) { return ({
+    preference: "system",
+    setPreference: function (preference) { return set({ preference: preference }); },
+}); }, {
+    name: "theme-preference-store",
+    storage: createJSONStorage(function () { return localStorage; }),
+}));
+/**
+ * A hook for getting the current theme
+ *
+ * @returns The current theme, either "light" or "dark"
+ */
+export var useTheme = function () {
+    var prefersDark = useMediaQuery({ query: "(prefers-color-scheme: dark)" });
+    var preference = useThemePreference().preference;
+    return preference === "system"
+        ? prefersDark
+            ? "dark"
+            : "light"
+        : preference;
+};

package/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Popover } from "./components/Popover";
+export { default as Tooltip } from "./components/Tooltip";
+export { default as Autocomplete } from "./components/Autocomplete";

package/index.js

@@ -0,0 +1,4 @@
+// Components
+export { default as Popover } from "./components/Popover";
+export { default as Tooltip } from "./components/Tooltip";
+export { default as Autocomplete } from "./components/Autocomplete";

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@adamjanicki/ui-extended",
+  "version": "1.0.0",
+  "description": "More advanced UI components and hooks for React in TypeScript",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "author": "Adam Janicki",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/adamjanicki2/ui-extended.git"
+  },
+  "scripts": {
+    "build": "tsc; cp src/style.css ./style.css",
+    "clean": "./clean.sh",
+    "dev": "nodemon --watch src --ext ts,tsx,css --exec \"npm run build\"",
+    "lint": "eslint --ext .ts,.tsx src",
+    "prepare": "npm run lint; npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@adamjanicki/ui": ">=1.0.3",
+    "@floating-ui/react": ">=0.26.17"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "nodemon": "^3.1.4",
+    "typescript": "^5.2.2"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  }
+}

package/style.css

@@ -0,0 +1,42 @@
+@media (hover: hover) {
+  .ajui-autocomplete-on-option,
+  .ajui-autocomplete-option:hover {
+    background-color: var(--ajui-light-gray);
+  }
+  [data-theme="dark"] .ajui-autocomplete-on-option,
+  [data-theme="dark"] .ajui-autocomplete-option:hover {
+    background-color: var(--ajui-darkest-gray);
+  }
+}
+
+.ajui-autocomplete-popover {
+  background-color: var(--ajui-default-background);
+  font-size: 1rem;
+  font-weight: 400;
+  border: 1px solid var(--ajui-default-border);
+  overflow: hidden;
+  border-radius: var(--ajui-rounded-radius);
+}
+
+.ajui-autocomplete-ul {
+  overflow: scroll;
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem;
+  margin: 0;
+}
+
+.ajui-autocomplete-default-rendering {
+  padding: 0.5rem 1rem;
+}
+
+.ajui-autocomplete-li {
+  display: flex;
+  cursor: pointer;
+  border-radius: var(--ajui-rounded-radius);
+}
+
+.ajui-autocomplete-li > :first-child {
+  border-radius: var(--ajui-rounded-radius);
+}

package/utils/types.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The type of corner to display, controlling the border radius property.
+ */
+export type CornerType = "pill" | "rounded" | "sharp";
+/**
+ * The type of message associated with a piece of content.
+ */
+export type ContentType = "success" | "warning" | "error" | "info" | "static";

package/utils/types.js

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