@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

package/dist/temp/constant/color.js

@@ -0,0 +1,34 @@
+export var COLOR = {
+    gray100: '#EAECF0',
+    gray200: '#D0D5DD',
+    gray300: '#98A2B3',
+    gray400: '#667085',
+    gray500: '#344054',
+    gray600: '#475467',
+    gray700: '#0C111D',
+    blue500: '#1570EF',
+    blue600: '#1849a9',
+    red500: '#ec1d31',
+    red600: '#dc0a2b',
+    orange500: '#e4501e',
+    orange600: '#b93815',
+    green500: '#099250',
+    green600: '#087443',
+    pink100: '#fce7f6',
+    pink600: '#c11574',
+    yellow600: '#c27004',
+    violet300: '#C3B5FD',
+    violet600: '#5720B7',
+    white: '#fff',
+    currentColor: 'currentColor',
+    black: '',
+    'secondary-gray-blue-50': '#f8f9fc',
+    'secondary-gray-blue-100': '#eaecf5',
+    'secondary-gray-blue-200': '#d5d9eb',
+    'secondary-gray-blue-300': '#b3b8db',
+    'secondary-gray-blue-400': '#717bbc',
+    'secondary-gray-blue-450': '#4e5ba6',
+    'secondary-gray-blue-500': '#3e4784',
+    'secondary-gray-blue-600': '#363f72',
+    'secondary-gray-blue-700': '#293056',
+};

package/dist/temp/constant/size.d.ts

@@ -0,0 +1 @@
+export type Size = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

package/dist/temp/constant/size.js

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

package/dist/temp/index.d.ts

@@ -0,0 +1,29 @@
+export * from './src/components/badge';
+export * from './src/components/breadcrumb';
+export * from './src/components/button';
+export * from './src/components/carousel';
+export * from './src/components/checkbox';
+export * from './src/components/date-picker';
+export * from './src/components/divider';
+export * from './src/components/dropdown';
+export * from './src/components/empty-state';
+export * from './src/components/featured-icon';
+export * from './src/components/input';
+export * from './src/components/modal';
+export * from './src/components/notification';
+export * from './src/components/pagination';
+export * from './src/components/progress-bar';
+export * from './src/components/progress-circle';
+export * from './src/components/radio';
+export * from './src/components/select';
+export * from './src/components/shared/hintText';
+export * from './src/components/shared/label';
+export * from './src/components/shared';
+export * from './src/components/slider';
+export * from './src/components/spinner';
+export * from './src/components/tab';
+export * from './src/components/tag';
+export * from './src/components/toggle';
+export * from './src/components/tooltip';
+export * from './src/components';
+export * from './src/hooks';

package/dist/temp/index.js

@@ -0,0 +1,29 @@
+export * from './src/components/badge';
+export * from './src/components/breadcrumb';
+export * from './src/components/button';
+export * from './src/components/carousel';
+export * from './src/components/checkbox';
+export * from './src/components/date-picker';
+export * from './src/components/divider';
+export * from './src/components/dropdown';
+export * from './src/components/empty-state';
+export * from './src/components/featured-icon';
+export * from './src/components/input';
+export * from './src/components/modal';
+export * from './src/components/notification';
+export * from './src/components/pagination';
+export * from './src/components/progress-bar';
+export * from './src/components/progress-circle';
+export * from './src/components/radio';
+export * from './src/components/select';
+export * from './src/components/shared/hintText';
+export * from './src/components/shared/label';
+export * from './src/components/shared';
+export * from './src/components/slider';
+export * from './src/components/spinner';
+export * from './src/components/tab';
+export * from './src/components/tag';
+export * from './src/components/toggle';
+export * from './src/components/tooltip';
+export * from './src/components';
+export * from './src/hooks';

package/dist/temp/src/components/badge/Badge.d.ts

@@ -0,0 +1,18 @@
+import type { ColorTone } from '../../../constant/color';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
+type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
+type BadgeProps = {
+    label: string;
+    type?: BadgeType;
+    color?: BadgeColor;
+    className?: string;
+    leadingIcon?: SideSlotType;
+    trailingIcon?: SideSlotType;
+    size?: BadgeSize;
+};
+declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { Badge };
+export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };

package/dist/temp/src/components/badge/Badge.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 { sideSlotRender } from './utils';
+/**
+ * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
+ */
+var BADGE_ICON_SIZE = 12;
+var Badge = function (_a) {
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? 'pill-outline' : _b, _c = _a.color, color = _c === void 0 ? 'neutral' : _c, className = _a.className, leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, _d = _a.size, size = _d === void 0 ? 'xs' : _d;
+    return (_jsxs("span", __assign({ className: classNames('ncua-badge', "ncua-badge--".concat(type), "ncua-badge--".concat(color), "ncua-badge--".concat(size), className) }, { children: [leadingIcon && sideSlotRender({ slot: leadingIcon, defaultIconSize: BADGE_ICON_SIZE }), _jsx("span", __assign({ className: "ncua-badge__label" }, { children: label })), trailingIcon && sideSlotRender({ slot: trailingIcon, defaultIconSize: BADGE_ICON_SIZE })] })));
+};
+export { Badge };

package/dist/temp/src/components/badge/BadgeGroup.d.ts

@@ -0,0 +1,18 @@
+import type { ColorTone } from '../../../constant/color';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+import { type BadgeProps } from '.';
+type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
+type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
+type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
+    groupLabel: string;
+    groupIcon?: SideSlotType;
+    groupClassName?: string;
+    size?: BadgeGroupSize;
+    color?: BadgeGroupColor;
+    href?: string;
+    target?: string;
+};
+declare const BadgeGroup: ({ groupLabel, groupIcon, groupClassName, color, size, href, target, ...props }: BadgeGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { BadgeGroup };
+export type { BadgeGroupSize, BadgeGroupColor, BadgeGroupProps };

package/dist/temp/src/components/badge/BadgeGroup.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, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Badge } from '.';
+import { sideSlotRender } from './utils';
+var DEFAULT_GROUP_ICON_SIZE = 14;
+var BadgeGroup = function (_a) {
+    var groupLabel = _a.groupLabel, groupIcon = _a.groupIcon, groupClassName = _a.groupClassName, _b = _a.color, color = _b === void 0 ? 'neutral' : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, href = _a.href, _d = _a.target, target = _d === void 0 ? '_blank' : _d, props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size", "href", "target"]);
+    return (_jsxs("a", __assign({ className: classNames('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName), href: href, target: target }, { children: [_jsx(Badge, __assign({ type: "pill-dark-color", color: color, size: size }, props)), _jsx("span", __assign({ className: "ncua-badge-group__label" }, { children: groupLabel })), groupIcon &&
+                sideSlotRender({
+                    slot: groupIcon,
+                    defaultIconSize: DEFAULT_GROUP_ICON_SIZE,
+                })] })));
+};
+export { BadgeGroup };

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

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './BadgeGroup';

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

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './BadgeGroup';

package/dist/temp/src/components/badge/utils.d.ts

@@ -0,0 +1,8 @@
+import type { SideSlotType } from '../../types/side-slot';
+type SideSlotRenderProps = {
+    slot: SideSlotType;
+    defaultIconSize: number;
+};
+declare const sideSlotRender: ({ slot, defaultIconSize }: SideSlotRenderProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export { sideSlotRender };
+export type { SideSlotRenderProps };

package/dist/temp/src/components/badge/utils.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot/Dot';
+var DEFAULT_DOT_COLOR = 'neutral';
+var sideSlotRender = function (_a) {
+    var _b, _c, _d, _e;
+    var slot = _a.slot, defaultIconSize = _a.defaultIconSize;
+    if (slot.type === 'icon') {
+        var Icon = slot.icon;
+        return (_jsx(Icon, { height: (_b = slot.size) !== null && _b !== void 0 ? _b : defaultIconSize, width: (_c = slot.size) !== null && _c !== void 0 ? _c : defaultIconSize, color: slot.color ? COLOR[slot.color] : undefined }));
+    }
+    if (slot.type === 'dot') {
+        return _jsx(Dot, { color: (_d = slot.color) !== null && _d !== void 0 ? _d : DEFAULT_DOT_COLOR, size: ((_e = slot.size) !== null && _e !== void 0 ? _e : 'sm') });
+    }
+    return slot.children;
+};
+export { sideSlotRender };

package/dist/temp/src/components/breadcrumb/BreadCrumb.d.ts

@@ -0,0 +1,11 @@
+interface BreadcrumbItemProps {
+    href?: string;
+    label: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItemProps[];
+    className?: string;
+}
+declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+export { BreadCrumb };
+export type { BreadcrumbItemProps, BreadcrumbProps };

package/dist/temp/src/components/breadcrumb/BreadCrumb.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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Home01 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+var BreadcrumbItem = function (_a) {
+    var href = _a.href, children = _a.children;
+    var ElementType = href ? 'a' : 'span';
+    return (_jsx(ElementType, __assign({ href: href, className: "ncua-breadcrumb__item" }, { children: children })));
+};
+var BreadCrumb = function (_a) {
+    var items = _a.items, className = _a.className;
+    if (!items || items.length === 0)
+        return null;
+    var renderItem = function (item, index) {
+        var isLast = index === items.length - 1;
+        var content = index === 0 ? _jsx(Home01, { width: 16, height: 16, color: "gray500" }) : item.label;
+        return (_jsx("li", __assign({ className: classNames('ncua-breadcrumb__list-item', {
+                'ncua-breadcrumb__list-item--active': isLast,
+            }) }, { children: _jsx(BreadcrumbItem, __assign({ href: isLast ? undefined : item.href }, { children: content })) }), index));
+    };
+    return (_jsx("nav", __assign({ "aria-label": "breadcrumb", className: classNames('ncua-breadcrumb', className) }, { children: _jsx("ol", __assign({ className: "ncua-breadcrumb__list" }, { children: items.map(renderItem) })) })));
+};
+export { BreadCrumb };

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

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

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

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

package/dist/temp/src/components/button/Button.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+import { type DotProps } from '../dot';
+export type ButtonProps = Omit<ComponentProps<'button'>, 'ref'> & {
+    label: ReactNode;
+    className?: string;
+    hierarchy?: ButtonTheme;
+    disabled?: boolean;
+    loading?: boolean;
+    leadingIcon?: SideSlotType;
+    trailingIcon?: SideSlotType;
+    onlyIcon?: boolean;
+    size?: ButtonSize;
+    children?: ReactNode;
+    underline?: boolean;
+};
+export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'text' | 'text-gray' | 'text-red' | 'destructive';
+export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
+export declare const svgSize: Record<ButtonSize, number>;
+export declare const iconOnlySvgSize: Record<ButtonSize, number>;
+export declare const dotSize: Record<ButtonSize, DotProps['size']>;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    label: ReactNode;
+    className?: string | undefined;
+    hierarchy?: ButtonTheme | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    leadingIcon?: SideSlotType | undefined;
+    trailingIcon?: SideSlotType | undefined;
+    onlyIcon?: boolean | undefined;
+    size?: ButtonSize | undefined;
+    children?: ReactNode;
+    underline?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/temp/src/components/button/Button.js

@@ -0,0 +1,69 @@
+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 { createElement, forwardRef } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
+export var svgSize = {
+    xxs: 12,
+    xs: 14,
+    sm: 16,
+    md: 20,
+};
+export var iconOnlySvgSize = {
+    xxs: 14,
+    xs: 16,
+    sm: 20,
+    md: 20,
+};
+export var dotSize = {
+    xxs: 'sm',
+    xs: 'sm',
+    sm: 'md',
+    md: 'md',
+};
+var loadableHierarchies = ['primary', 'secondary', 'secondary-gray', 'destructive'];
+export var Button = forwardRef(function (props, ref) {
+    var _a = props.size, size = _a === void 0 ? 'xs' : _a, children = props.children, onlyIcon = props.onlyIcon, disabled = props.disabled, loading = props.loading, className = props.className, _b = props.hierarchy, hierarchy = _b === void 0 ? 'secondary-gray' : _b, label = props.label, leadingIcon = props.leadingIcon, trailingIcon = props.trailingIcon, _c = props.underline, underline = _c === void 0 ? false : _c, restProps = __rest(props, ["size", "children", "onlyIcon", "disabled", "loading", "className", "hierarchy", "label", "leadingIcon", "trailingIcon", "underline"]);
+    var isLoading = loading && !onlyIcon && loadableHierarchies.includes(hierarchy);
+    var isDisabled = disabled || isLoading;
+    var sideSlotRender = function (slot) {
+        var _a, _b, _c;
+        var iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
+        if (slot.type === 'icon') {
+            var Icon = slot.icon;
+            return (_jsx(Icon, { height: (_a = slot.size) !== null && _a !== void 0 ? _a : iconSize, width: (_b = slot.size) !== null && _b !== void 0 ? _b : iconSize, color: slot.color ? COLOR[slot.color] : undefined }));
+        }
+        if (slot.type === 'dot') {
+            return _jsx(Dot, { color: slot.color, size: (_c = slot.size) !== null && _c !== void 0 ? _c : dotSize[size] });
+        }
+        return slot.children;
+    };
+    return createElement('button', __assign(__assign({ className: classnames('ncua-btn', "ncua-btn--".concat(size), {
+            'only-icon': onlyIcon,
+            'is-disable': isDisabled,
+            'is-loading': isLoading,
+            'has-underline': underline,
+        }, className, hierarchy && "ncua-btn--".concat(hierarchy)), disabled: isDisabled, 'aria-busy': isLoading || undefined }, restProps), { ref: ref }), _jsxs(_Fragment, { children: [isLoading ? _jsx("span", { className: "ncua-btn__spinner" }) : leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && _jsx("span", __assign({ className: "ncua-btn__label" }, { children: label })), children, trailingIcon && sideSlotRender(trailingIcon)] }));
+});

package/dist/temp/src/components/button/ButtonCloseX.d.ts

@@ -0,0 +1,10 @@
+import type { Size } from '../../../constant/size';
+type ButtonCloseXProps = {
+    size: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+    theme?: 'dark' | 'light';
+    onClick?: () => void;
+    className?: string;
+};
+declare const ButtonCloseX: ({ size, theme, className, onClick }: ButtonCloseXProps) => import("react/jsx-runtime").JSX.Element;
+export { ButtonCloseX };
+export type { ButtonCloseXProps };

package/dist/temp/src/components/button/ButtonCloseX.js

@@ -0,0 +1,25 @@
+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 { XClose } from '@ncds/ui-admin-icon';
+import classnames from 'classnames';
+var svgSize = {
+    xs: 16,
+    sm: 20,
+    md: 20,
+    lg: 24,
+};
+var ButtonCloseX = function (_a) {
+    var size = _a.size, _b = _a.theme, theme = _b === void 0 ? 'light' : _b, className = _a.className, onClick = _a.onClick;
+    return (_jsx("button", __assign({ type: "button", className: classnames('ncua-button-close-x', "ncua-button-close-x--".concat(size), "ncua-button-close-x--".concat(theme), className), onClick: onClick }, { children: _jsx(XClose, { width: svgSize[size], height: svgSize[size] }) })));
+};
+export { ButtonCloseX };