draft-components 1.0.0-beta.3.1 → 1.0.0-beta.5

package/{cjs → types}/components/select/select.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentPropsWithRef } from 'react';
+export type SelectSize = 'sm' | 'md' | 'lg';
 type SelectHTMLProps = ComponentPropsWithRef<'select'>;
 type SelectBaseProps = Omit<SelectHTMLProps, 'size' | 'multiple' | 'value' | 'defaultValue'> & {
     hasError?: boolean;
@@ -6,7 +7,6 @@ type SelectBaseProps = Omit<SelectHTMLProps, 'size' | 'multiple' | 'value' | 'de
     size?: SelectSize;
     htmlSize?: SelectHTMLProps['size'];
 };
-export type SelectSize = 'sm' | 'md' | 'lg';
 export type SelectProps = SelectBaseProps & ({
     multiple?: false;
     value?: string | number;

package/{esm → types}/components/toaster/toaster.d.ts

@@ -21,12 +21,16 @@ export type ToastParamsWithID = {
 export type ToastShowCallback = (toast: ToastParamsWithID) => void;
 export type ToastHideCallback = (id: ToastID) => void;
 export declare class Toaster {
-    #private;
+    protected _id: ToastID;
+    readonly timeoutMs: number;
+    readonly onShow?: ToastShowCallback;
+    readonly onHide?: ToastHideCallback;
     constructor(params?: {
         timeoutMs?: number;
         onShowToast?: ToastShowCallback;
         onHideToast?: ToastHideCallback;
     });
+    private _getNextId;
     showToast(toast: ToastParams, params?: {
         timeoutMs?: number;
     }): ToastID;

package/types/lib/helpers.d.ts

@@ -0,0 +1,4 @@
+type AnyFunction = (...args: any[]) => any;
+export declare function once<T extends AnyFunction>(fn: T): (...args: Parameters<T>) => ReturnType<T>;
+export declare function assertIfNullable<T>(value: T, message?: string): asserts value is NonNullable<T>;
+export {};

package/cjs/components/alert/alert.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_helpers_1 = require("../../lib/react-helpers");
-function Alert({ icon = null, heading = null, variant = 'default', appearance = 'default', className, children, ...props }) {
-    const shouldShowIcon = Boolean(icon);
-    const shouldRenderHeading = Boolean(heading);
-    return ((0, jsx_runtime_1.jsxs)("section", { ...props, className: (0, react_helpers_1.classNames)(className, {
-            'dc-alert': true,
-            'dc-alert_has_icon': shouldShowIcon,
-            [`dc-alert_variant_${variant}`]: variant,
-            [`dc-alert_appearance_${appearance}`]: appearance,
-        }), children: [shouldShowIcon && (0, jsx_runtime_1.jsx)("div", { className: "dc-alert__icon", children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "dc-alert__body", children: [shouldRenderHeading && (0, jsx_runtime_1.jsx)("h1", { className: "dc-alert__title", children: heading }), children] })] }));
-}
-exports.Alert = Alert;

package/cjs/components/alert/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./alert"), exports);

package/cjs/components/avatar/avatar.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_helpers_1 = require("../../lib/react-helpers");
-exports.Avatar = (0, react_1.forwardRef)(function Avatar({ isSquare = false, hasInnerShadow = false, size = 'md', fill = 'gray', src, alt, placeholder, className, ...props }, ref) {
-    let content;
-    if (!src && placeholder) {
-        content = ((0, jsx_runtime_1.jsx)("div", { className: "dc-avatar__placeholder", "aria-label": alt, children: placeholder }));
-    }
-    else {
-        const sizePx = avatarSizesPx[size];
-        content = ((0, jsx_runtime_1.jsx)("img", { className: "dc-avatar__image", src: src, alt: alt, width: sizePx, height: sizePx }));
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: (0, react_helpers_1.classNames)(className, 'dc-avatar', {
-            [`dc-avatar_size_${size}`]: size,
-            [`dc-avatar_fill_${fill}`]: fill,
-            'dc-avatar_square': isSquare,
-            'dc-avatar_has_inner-shadow': hasInnerShadow,
-        }), children: content }));
-});
-const avatarSizesPx = {
-    xs: 24,
-    sm: 32,
-    md: 40,
-    lg: 48,
-    xl: 56,
-};

package/cjs/components/avatar/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./avatar"), exports);

package/cjs/components/avatar-group/avatar-group.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_helpers_1 = require("../../lib/react-helpers");
-function AvatarGroup({ className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-avatar-group'), children: children }));
-}
-exports.AvatarGroup = AvatarGroup;

package/cjs/components/avatar-group/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./avatar-group"), exports);

package/cjs/components/badge/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./badge"), exports);

package/cjs/components/breadcrumbs/breadcrumbs-context.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BreadcrumbsContextProvider = exports.useBreadcrumbsContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const BreadcrumbsContext = (0, react_1.createContext)(null);
-function useBreadcrumbsContext() {
-    const context = (0, react_1.useContext)(BreadcrumbsContext);
-    if (!context) {
-        throw new Error('useBreadcrumbsContext must be used withing BreadcrumbsContextProvider');
-    }
-    return context;
-}
-exports.useBreadcrumbsContext = useBreadcrumbsContext;
-function BreadcrumbsContextProvider(props) {
-    return ((0, jsx_runtime_1.jsx)(BreadcrumbsContext.Provider, { value: { separator: props.separator }, children: props.children }));
-}
-exports.BreadcrumbsContextProvider = BreadcrumbsContextProvider;

package/cjs/components/breadcrumbs/breadcrumbs-item.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BreadcrumbsItem = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_helpers_1 = require("../../lib/react-helpers");
-const breadcrumbs_context_1 = require("./breadcrumbs-context");
-function BreadcrumbsItem({ className, icon, children, renderAs, ...props }) {
-    const { separator } = (0, breadcrumbs_context_1.useBreadcrumbsContext)();
-    className = (0, react_helpers_1.classNames)('dc-breadcrumbs-item__link', className);
-    children = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon != null && (0, jsx_runtime_1.jsx)("div", { className: "dc-breadcrumbs-item__icon", children: icon }), (0, jsx_runtime_1.jsx)("div", { className: "dc-breadcrumbs-item__text", children: children })] }));
-    let content;
-    if (typeof renderAs === 'function') {
-        content = renderAs({ className, children });
-    }
-    else {
-        content = (0, jsx_runtime_1.jsx)("a", { ...props, className: className, children: children });
-    }
-    return ((0, jsx_runtime_1.jsxs)("li", { className: "dc-breadcrumbs-item", children: [content, separator != null && ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, className: "dc-breadcrumbs-item__separator", children: separator }))] }));
-}
-exports.BreadcrumbsItem = BreadcrumbsItem;

package/cjs/components/breadcrumbs/breadcrumbs.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Breadcrumbs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_helpers_1 = require("../../lib/react-helpers");
-const breadcrumbs_context_1 = require("./breadcrumbs-context");
-const defaultSeparator = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 6 18", width: 6, height: 18, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: 1, children: (0, jsx_runtime_1.jsx)("line", { x1: 1, y1: 16, x2: 4, y2: 1 }) }));
-function Breadcrumbs({ separator = defaultSeparator, className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(breadcrumbs_context_1.BreadcrumbsContextProvider, { separator: separator, children: (0, jsx_runtime_1.jsx)("nav", { ...props, className: (0, react_helpers_1.classNames)('dc-breadcrumbs', className), children: (0, jsx_runtime_1.jsx)("ol", { className: "dc-breadcrumbs__items", children: children }) }) }));
-}
-exports.Breadcrumbs = Breadcrumbs;

package/cjs/components/breadcrumbs/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./breadcrumbs"), exports);
-__exportStar(require("./breadcrumbs-item"), exports);

package/cjs/components/button/button.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_helpers_1 = require("../../lib/react-helpers");
-const spinner_1 = require("../spinner");
-exports.Button = (0, react_1.forwardRef)(function Button({ isBlock = false, disabled = false, loading = false, type = 'button', size = 'sm', variant = 'filled', appearance = 'default', icon = null, caption = null, renderAs, className, children, ...props }, ref) {
-    const shouldRenderIcon = Boolean(icon);
-    const shouldRenderLabel = Boolean(children);
-    const shouldRenderCaption = Boolean(caption);
-    let leadingAddOn = null;
-    if (loading) {
-        leadingAddOn = ((0, jsx_runtime_1.jsx)("span", { "data-testid": "button-spinner", className: "dc-button__spinner", children: (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: "1.15em" }) }));
-    }
-    else if (shouldRenderIcon) {
-        leadingAddOn = ((0, jsx_runtime_1.jsx)("span", { "data-testid": "button-icon", className: "dc-button__icon", children: icon }));
-    }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leadingAddOn, shouldRenderLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "dc-button__body", children: [(0, jsx_runtime_1.jsx)("span", { className: "dc-button__label", children: children }), shouldRenderCaption && ((0, jsx_runtime_1.jsx)("small", { className: "dc-button__caption", children: caption }))] }))] }));
-    className = (0, react_helpers_1.classNames)(className, {
-        'dc-button': true,
-        'dc-button_block': isBlock,
-        'dc-button_loading': loading,
-        'dc-button_has_icon': shouldRenderIcon,
-        'dc-button_has_caption': shouldRenderCaption,
-        [`dc-button_${size}`]: size,
-        [`dc-button_appearance_${appearance}`]: appearance,
-        [`dc-button_variant_${variant}`]: variant,
-    });
-    if (typeof renderAs === 'function') {
-        return renderAs({
-            className,
-            children: content,
-        });
-    }
-    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: type, disabled: disabled || loading, className: className, ...props, children: content }));
-});

package/cjs/components/button/icon-button.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_helpers_1 = require("../../lib/react-helpers");
-const button_1 = require("./button");
-exports.IconButton = (0, react_1.forwardRef)(function IconButton({ className, ...props }, ref) {
-    return (0, jsx_runtime_1.jsx)(button_1.Button, { ref: ref, className: (0, react_helpers_1.classNames)('dc-button_icon-only', className), ...props });
-});

package/cjs/components/button/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./button"), exports);
-__exportStar(require("./icon-button"), exports);

package/cjs/components/button-group/button-group.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_helpers_1 = require("../../lib/react-helpers");
-function ButtonGroup({ className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, react_helpers_1.classNames)(className, 'dc-button-group'), children: children }));
-}
-exports.ButtonGroup = ButtonGroup;

package/cjs/components/button-group/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./button-group"), exports);