@ncds/ui-admin 1.6.4 → 1.7.0

package/dist/temp/src/components/date-picker/RangeDatePicker.js

@@ -0,0 +1,117 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from 'moment';
+import { forwardRef, useCallback, useEffect } from 'react';
+import { DatePicker } from './DatePicker';
+import { getDateFormat } from './utils';
+var RangeDatePicker = forwardRef(function (_a, ref) {
+    var startDateOptions = _a.startDateOptions, endDateOptions = _a.endDateOptions, validationOption = _a.validationOption, onDateValidation = _a.onDateValidation, _b = _a.size, size = _b === void 0 ? 'xs' : _b;
+    var getOverlapResult = useCallback(function (type) {
+        if (type === 'start' && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+            return { newDate: endDateOptions.currentDate, currentDate: startDateOptions.currentDate };
+        }
+        if (type === 'end' && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+            return { newDate: startDateOptions.currentDate, currentDate: endDateOptions.currentDate };
+        }
+        return null;
+    }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+    var getSettingNewDate = useCallback(function (type, isOverPeriod, unit, period) {
+        if (type === 'start') {
+            if (isOverPeriod) {
+                return getDateFormat(moment(endDateOptions.currentDate).subtract(period, unit).toDate());
+            }
+            if (moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+                return endDateOptions.currentDate;
+            }
+        }
+        else {
+            if (isOverPeriod) {
+                return getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
+            }
+            if (moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+                return startDateOptions.currentDate;
+            }
+        }
+        return '';
+    }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+    var changeSettingDateAndAlert = useCallback(function (type, isOverPeriod) {
+        if (isOverPeriod === void 0) { isOverPeriod = false; }
+        if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+            var result = getOverlapResult(type);
+            if (result) {
+                onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation(__assign({ type: type, errorType: 'overlap' }, result));
+            }
+            return;
+        }
+        var _a = validationOption.setting, unit = _a.unit, period = _a.period;
+        var newDate = getSettingNewDate(type, isOverPeriod, unit, period);
+        if (newDate) {
+            onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+                type: type,
+                errorType: isOverPeriod ? 'period' : 'overlap',
+                newDate: newDate,
+                currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate,
+            });
+        }
+    }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
+    useEffect(function () {
+        var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+        if (isOverDate) {
+            changeSettingDateAndAlert('start');
+            return;
+        }
+        if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+            return;
+        }
+        var _a = validationOption.setting, unit = _a.unit, period = _a.period;
+        var isValidPeriod = moment(startDateOptions.currentDate).isSameOrAfter(moment(endDateOptions.currentDate).subtract(period, unit));
+        if (isValidPeriod) {
+            onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+                type: 'start',
+                errorType: null,
+                newDate: startDateOptions.currentDate,
+                currentDate: startDateOptions.currentDate,
+            });
+        }
+        else {
+            changeSettingDateAndAlert('start', true);
+        }
+    }, [startDateOptions.currentDate]);
+    useEffect(function () {
+        var isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
+        if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting) || !isNotTodayEndDate) {
+            return;
+        }
+        var isOverDate = moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+        if (isOverDate) {
+            changeSettingDateAndAlert('end');
+            return;
+        }
+        var _a = validationOption.setting, unit = _a.unit, period = _a.period;
+        var isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
+        if (isValidPeriod) {
+            onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+                type: 'end',
+                errorType: null,
+                newDate: endDateOptions.currentDate,
+                currentDate: endDateOptions.currentDate,
+            });
+        }
+        else {
+            changeSettingDateAndAlert('end', true);
+        }
+    }, [endDateOptions.currentDate]);
+    return (_jsxs("div", __assign({ className: "ncua-range-date-picker", ref: ref || undefined }, { children: [_jsx(DatePicker, __assign({}, startDateOptions, { ref: undefined, size: size })), "~", _jsx(DatePicker, __assign({ isEndDate: true }, endDateOptions, { ref: undefined, size: size }))] })));
+});
+RangeDatePicker.displayName = 'RangeDatePicker';
+export { RangeDatePicker };

package/dist/temp/src/components/date-picker/RangeDatePickerWithButtons.d.ts

@@ -0,0 +1,71 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import { PERIOD_ITEM, type PeriodItemMap } from '../../constant/date-picker';
+import { type RangeDatePickerProps } from './RangeDatePicker';
+type PeriodKeyType = keyof typeof PERIOD_ITEM;
+type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITEM> = {
+    useYesterdayAsEndDate?: boolean;
+    currentButtonId: keyof T & string;
+    setCurrentButtonId: Dispatch<SetStateAction<keyof T & string>>;
+    periodKeys: (keyof T & string)[];
+    periodItems?: T;
+    size?: 'xs' | 'sm';
+} & RangeDatePickerProps;
+declare const RangeDatePickerWithButtons: <T extends PeriodItemMap = {
+    TODAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    YESTERDAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '7DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1WEEK': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '15DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1YEAR': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    ENTIRE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+    NONE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+}>({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }: RangeDatePickerWithButtonsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type { PeriodKeyType };
+export { RangeDatePickerWithButtons };

package/dist/temp/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -0,0 +1,55 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { PERIOD_ITEM } from '../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
+import { ButtonGroup } from '../button';
+import { RangeDatePicker } from './RangeDatePicker';
+var RangeDatePickerWithButtons = function (_a) {
+    var _b = _a.useYesterdayAsEndDate, useYesterdayAsEndDate = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'xs' : _c, currentButtonId = _a.currentButtonId, setCurrentButtonId = _a.setCurrentButtonId, startDateOptions = _a.startDateOptions, endDateOptions = _a.endDateOptions, validationOption = _a.validationOption, periodKeys = _a.periodKeys, periodItems = _a.periodItems, onDateValidation = _a.onDateValidation;
+    var items = (periodItems !== null && periodItems !== void 0 ? periodItems : PERIOD_ITEM);
+    var setCalculatedDate = function () {
+        var currentPeriodItem = items[currentButtonId];
+        if (!currentPeriodItem) {
+            return;
+        }
+        if (currentButtonId === 'ENTIRE') {
+            startDateOptions.onChangeDate('');
+            endDateOptions.onChangeDate('');
+            return;
+        }
+        var startDate = getDateFormat(getSubtractDate({
+            period: currentPeriodItem.period,
+            unit: currentPeriodItem.unit,
+        }));
+        startDateOptions.onChangeDate(startDate);
+        var endDate = useYesterdayAsEndDate
+            ? getDateFormat(getSubtractDate({
+                period: 1,
+                unit: 'days',
+            }))
+            : getDateFormat();
+        endDateOptions.onChangeDate(endDate);
+    };
+    var handleOnChangeDate = function (date, type) {
+        type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+        currentButtonId && setCurrentButtonId('NONE');
+    };
+    useEffect(function () {
+        if (currentButtonId !== 'NONE') {
+            setCalculatedDate();
+        }
+    }, [currentButtonId]);
+    return (_jsxs("div", __assign({ className: "ncua-range-date-picker-with-buttons" }, { children: [_jsx(ButtonGroup, __assign({ size: size }, { children: periodKeys.map(function (key) { return (_jsx(ButtonGroup.Item, { isCurrent: currentButtonId === key, label: items[key].text, onClick: function () { return setCurrentButtonId(key); } }, key)); }) })), _jsx(RangeDatePicker, { startDateOptions: __assign(__assign({}, startDateOptions), { onChangeDate: function (date) { return handleOnChangeDate(date, 'START'); } }), endDateOptions: __assign(__assign({}, endDateOptions), { onChangeDate: function (date) { return handleOnChangeDate(date, 'END'); } }), validationOption: validationOption, onDateValidation: onDateValidation, size: size })] })));
+};
+export { RangeDatePickerWithButtons };

package/dist/temp/src/components/date-picker/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DatePicker';
+export * from './RangeDatePicker';
+export * from './RangeDatePickerWithButtons';
+export * from './utils';

package/dist/temp/src/components/date-picker/index.js

@@ -0,0 +1,4 @@
+export * from './DatePicker';
+export * from './RangeDatePicker';
+export * from './RangeDatePickerWithButtons';
+export * from './utils';

package/dist/temp/src/components/date-picker/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getToday(): Date;
+export declare function getDateFormat(date?: Date | string): string;

package/dist/temp/src/components/date-picker/utils.js

@@ -0,0 +1,8 @@
+import moment from 'moment';
+export function getToday() {
+    return moment().toDate();
+}
+export function getDateFormat(date) {
+    if (date === void 0) { date = getToday(); }
+    return moment(date).format('YYYY-MM-DD');
+}

package/dist/temp/src/components/divider/Divider.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+export type DividerType = 'text' | 'heading' | 'button' | 'button-group' | 'button-icon' | 'button-group-icon';
+export type DividerStyle = 'single-line' | 'background-fill';
+export interface DividerProps {
+    className?: string;
+    type: DividerType;
+    style?: DividerStyle;
+    children: ReactNode;
+}
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/temp/src/components/divider/Divider.js

@@ -0,0 +1,23 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
+export var Divider = forwardRef(function (_a, ref) {
+    var className = _a.className, type = _a.type, _b = _a.style, style = _b === void 0 ? 'single-line' : _b, children = _a.children;
+    return (_jsxs("div", __assign({ className: classNames('ncua-divider', "ncua-divider--".concat(type), "ncua-divider--".concat(style), className), ref: ref }, { children: [style === 'single-line' && _jsx("div", { className: "ncua-divider__line" }), _jsx("div", __assign({ className: "ncua-divider__content" }, { children: children })), style === 'single-line' && _jsx("div", { className: "ncua-divider__line" })] })));
+});

package/dist/temp/src/components/divider/index.d.ts

@@ -0,0 +1 @@
+export * from './Divider';

package/dist/temp/src/components/divider/index.js

@@ -0,0 +1 @@
+export * from './Divider';

package/dist/temp/src/components/dot/Dot.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from 'react';
+import type { ColorTone } from '../../../constant/color';
+import type { Size } from '../../../constant/size';
+type DotColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
+type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /**
+     * The color of the dot
+     * @default 'success'
+     */
+    color?: DotColor;
+    /**
+     * The size of the dot
+     * @default 'md'
+     */
+    size?: DotSize;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+declare const Dot: import("react").ForwardRefExoticComponent<DotProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type { DotColor, DotSize, DotProps };
+export { Dot };

package/dist/temp/src/components/dot/Dot.js

@@ -0,0 +1,31 @@
+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 } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+var Dot = forwardRef(function (_a, ref) {
+    var _b = _a.color, color = _b === void 0 ? 'success' : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, className = _a.className, props = __rest(_a, ["color", "size", "className"]);
+    return (_jsx("span", __assign({ ref: ref, className: classNames('ncua-dot', "ncua-dot--".concat(color), "ncua-dot--".concat(size), className) }, props)));
+});
+Dot.displayName = 'Dot';
+export { Dot };

package/dist/temp/src/components/dot/index.d.ts

@@ -0,0 +1 @@
+export * from './Dot';

package/dist/temp/src/components/dot/index.js

@@ -0,0 +1 @@
+export * from './Dot';

package/dist/temp/src/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,52 @@
+import type { SlotIconComponent } from '../../types/side-slot';
+export type AvatarTrigger = {
+    type: 'avatar';
+    avatar: string;
+};
+export type ButtonTrigger = {
+    type: 'button';
+    text: string;
+};
+export type IconTrigger = {
+    type: 'icon';
+    icon?: SlotIconComponent;
+};
+export type CustomTrigger = {
+    type: 'custom';
+    children: React.ReactNode;
+};
+export type DropdownItemType = {
+    id: string;
+    text: string;
+    icon?: SlotIconComponent;
+    shortcut?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    type?: 'default' | 'danger';
+    className?: string;
+};
+export type DropdownGroup = {
+    items: DropdownItemType[];
+};
+export type AvatarHeader = {
+    type: 'avatar';
+    avatar: string;
+    title: string;
+    subtitle: string;
+};
+export type TextHeader = {
+    type: 'text';
+    title: string;
+};
+export type DropdownHeaderType = AvatarHeader | TextHeader;
+export type DropdownProps = {
+    trigger: AvatarTrigger | ButtonTrigger | IconTrigger | CustomTrigger;
+    opened?: boolean;
+    closeOnClickOutside?: boolean;
+    closeOnClickItem?: boolean;
+    align?: 'left' | 'right';
+    header?: DropdownHeaderType;
+    groups: DropdownGroup[];
+    className?: string;
+};
+export declare const Dropdown: ({ trigger, align, header, groups, className, opened, closeOnClickItem, closeOnClickOutside, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/temp/src/components/dropdown/Dropdown.js

@@ -0,0 +1,90 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { DotsVertical } from '@ncds/ui-admin-icon';
+import { useEffect, useRef, useState } from 'react';
+export var Dropdown = function (_a) {
+    var trigger = _a.trigger, _b = _a.align, align = _b === void 0 ? 'left' : _b, header = _a.header, groups = _a.groups, className = _a.className, _c = _a.opened, opened = _c === void 0 ? false : _c, _d = _a.closeOnClickItem, closeOnClickItem = _d === void 0 ? true : _d, _e = _a.closeOnClickOutside, closeOnClickOutside = _e === void 0 ? true : _e;
+    var _f = useState(opened), isOpen = _f[0], setIsOpen = _f[1];
+    var dropdownRef = useRef(null);
+    var toggleDropdown = function () {
+        setIsOpen(!isOpen);
+    };
+    var handleClickOutside = function (event) {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    var handleClickItem = function (item) {
+        if (!item.disabled && item.onClick) {
+            item.onClick();
+            if (closeOnClickItem) {
+                setIsOpen(false);
+            }
+        }
+    };
+    useEffect(function () {
+        if (closeOnClickOutside) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return function () {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }
+    }, [closeOnClickOutside]);
+    var renderTrigger = function () {
+        var _a;
+        switch (trigger.type) {
+            case 'custom':
+                return (_jsx("button", __assign({ className: "ncua-dropdown__trigger", onClick: toggleDropdown }, { children: trigger.children })));
+            case 'icon': {
+                var TriggerIcon = (_a = trigger.icon) !== null && _a !== void 0 ? _a : DotsVertical;
+                return (_jsx("button", __assign({ className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon", onClick: toggleDropdown }, { children: _jsx(TriggerIcon, {}) })));
+            }
+            case 'avatar':
+                return (_jsx("button", __assign({ className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar", onClick: toggleDropdown }, { children: _jsx("div", __assign({ className: "ncua-dropdown__avatar" }, { children: _jsx("img", { src: trigger.avatar, alt: "avatar" }) })) })));
+            case 'button':
+                return (_jsx("button", __assign({ className: "ncua-dropdown__trigger ncua-dropdown__trigger--button", onClick: toggleDropdown }, { children: trigger.text })));
+            default:
+                return null;
+        }
+    };
+    var renderHeader = function () {
+        if (!header)
+            return null;
+        if (header.type === 'avatar' && header.avatar) {
+            return (_jsx("div", __assign({ className: "ncua-dropdown__header" }, { children: _jsxs("div", __assign({ className: "ncua-dropdown__header-avatar-group" }, { children: [_jsx("div", __assign({ className: "ncua-dropdown__avatar" }, { children: _jsx("img", { src: header.avatar, alt: "avatar" }) })), _jsxs("div", __assign({ className: "ncua-dropdown__header-text" }, { children: [header.title && _jsx("div", __assign({ className: "ncua-dropdown__header-title" }, { children: header.title })), header.subtitle && _jsx("div", __assign({ className: "ncua-dropdown__header-subtitle" }, { children: header.subtitle }))] }))] })) })));
+        }
+        if (header.type === 'text' && header.title) {
+            return (_jsx("div", __assign({ className: "ncua-dropdown__header" }, { children: _jsx("div", __assign({ className: "ncua-dropdown__header-title" }, { children: header.title })) })));
+        }
+        return null;
+    };
+    var renderItem = function (item) {
+        var ItemIcon = item.icon;
+        var itemClasses = [
+            'ncua-dropdown__item',
+            item.disabled ? 'is-disabled' : '',
+            item.type === 'danger' ? 'is-danger' : '',
+            item.className,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (_jsxs("div", __assign({ className: itemClasses }, { children: [_jsx("button", { className: "ncua-dropdown__item-clickable-layer", onClick: function () { return handleClickItem(item); } }), _jsxs("div", __assign({ className: "ncua-dropdown__item-content" }, { children: [_jsxs("div", __assign({ className: "ncua-dropdown__item-text-group" }, { children: [ItemIcon && _jsx(ItemIcon, { className: "ncua-dropdown__item-icon" }), _jsx("span", __assign({ className: "ncua-dropdown__item-text" }, { children: item.text }))] })), item.shortcut && _jsx("span", __assign({ className: "ncua-dropdown__item-shortcut" }, { children: item.shortcut }))] }))] }), item.id));
+    };
+    var dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : '']
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", __assign({ className: dropdownClasses, ref: dropdownRef }, { children: [renderTrigger(), isOpen && (_jsxs("div", __assign({ className: "ncua-dropdown__menu" }, { children: [renderHeader(), _jsx("div", __assign({ className: "ncua-dropdown__menu-items" }, { children: groups.map(function (group) {
+                            var _a;
+                            return (_jsx("div", __assign({ className: "ncua-dropdown__group" }, { children: group.items.map(renderItem) }), (_a = group.items[0]) === null || _a === void 0 ? void 0 : _a.id));
+                        }) }))] })))] })));
+};

package/dist/temp/src/components/dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './Dropdown';

package/dist/temp/src/components/dropdown/index.js

@@ -0,0 +1 @@
+export * from './Dropdown';

package/dist/temp/src/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonProps } from '../button/Button';
+interface ButtonOptions extends Pick<ButtonProps, 'hierarchy' | 'size' | 'leadingIcon' | 'trailingIcon'> {
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+interface EmptyStateProps {
+    title: string;
+    description: string;
+    buttons?: ButtonOptions | ButtonOptions[];
+}
+declare const EmptyState: ({ title, description, buttons }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export type { ButtonOptions };
+export { EmptyState };

package/dist/temp/src/components/empty-state/EmptyState.js

@@ -0,0 +1,33 @@
+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 { Button } from '../button/Button';
+var EmptyState = function (_a) {
+    var title = _a.title, description = _a.description, buttons = _a.buttons;
+    var emptyStateButtons = buttons ? (Array.isArray(buttons) ? buttons : [buttons]) : [];
+    return (_jsxs("div", __assign({ className: "ncua-empty-state" }, { children: [_jsx("p", __assign({ className: "ncua-empty-state__title" }, { children: title })), _jsx("span", __assign({ className: "ncua-empty-state__description" }, { children: description })), emptyStateButtons.length > 0 && (_jsx("div", __assign({ className: "ncua-empty-state__button-group" }, { children: emptyStateButtons.map(function (_a) {
+                    var size = _a.size, label = _a.label, rest = __rest(_a, ["size", "label"]);
+                    return (_jsx(Button, __assign({ size: size !== null && size !== void 0 ? size : 'xs', label: label }, rest), label));
+                }) })))] })));
+};
+export { EmptyState };

package/dist/temp/src/components/empty-state/index.d.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

package/dist/temp/src/components/empty-state/index.js

@@ -0,0 +1 @@
+export * from './EmptyState';

package/dist/temp/src/components/featured-icon/FeaturedIcon.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import type { SlotIconComponent } from '../../types/side-slot';
+type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
+type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
+type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+interface FeaturedIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
+    icon: SlotIconComponent;
+    theme?: FeaturedIconTheme;
+    color?: FeaturedIconColor;
+    size?: FeaturedIconSize;
+    className?: string;
+}
+declare const FeaturedIcon: import("react").ForwardRefExoticComponent<FeaturedIconProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { FeaturedIconTheme, FeaturedIconColor, FeaturedIconSize, FeaturedIconProps };
+export { FeaturedIcon };

package/dist/temp/src/components/featured-icon/FeaturedIcon.js

@@ -0,0 +1,36 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+var iconSizeMap = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+};
+var FeaturedIcon = forwardRef(function (_a, ref) {
+    var Icon = _a.icon, _b = _a.theme, theme = _b === void 0 ? 'light-circle' : _b, _c = _a.color, color = _c === void 0 ? 'neutral' : _c, _d = _a.size, size = _d === void 0 ? 'sm' : _d, className = _a.className, rest = __rest(_a, ["icon", "theme", "color", "size", "className"]);
+    return (_jsxs("div", __assign({ ref: ref, className: classNames('ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size), className) }, rest, { children: [theme === 'outline-circle' && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ncua-featured-icon__outline ncua-featured-icon__outline--inner" }), _jsx("div", { className: "ncua-featured-icon__outline ncua-featured-icon__outline--outer" })] })), _jsx(Icon, { width: iconSizeMap[size], height: iconSizeMap[size] })] })));
+});
+export { FeaturedIcon };

package/dist/temp/src/components/featured-icon/index.d.ts

@@ -0,0 +1 @@
+export * from './FeaturedIcon';

package/dist/temp/src/components/featured-icon/index.js

@@ -0,0 +1 @@
+export * from './FeaturedIcon';