@ncds/ui-admin 1.1.3 → 1.2.1

package/dist/types/src/components/input/InputBase.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import React from 'react';
 import { COLOR } from '../../../constant/color';
 import { Size } from '../../../constant/size';

package/dist/types/src/components/input/index.d.ts

@@ -1,4 +1,5 @@
 export * from './InputBase';
 export * from './PasswordInput';
 export * from './Textarea';
+export * from './FileInput';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { type IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ReactNode } from 'react';
 import { FeaturedIconColor, FeaturedIconTheme } from '../featured-icon';
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';

package/dist/types/src/components/notification/Notification.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import type { IconName } from '@ncds/ui-admin-icon/dynamic';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ColorTone } from '../../../constant/color';
 import { ButtonTheme } from '../button';

package/dist/types/src/components/select/Select.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from '@ncds/ui-admin-icon';
+import { IconName } from '@ncds/ui-admin-icon/dynamic';
 import { COLOR } from '@ncds/ui-admin/constant/color';
 import { Size } from '@ncds/ui/constant/size';
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';

package/dist/types/src/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useMediaQuery } from './useMediaQuery';
+export { useMergeRefs } from './useMergeRefs';
+export { useCallbackRef } from './useCallbackRef';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/useCallbackRef.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A callback ref hook that supports cleanup functions.
+ * This is useful when you need to perform setup/cleanup operations when the ref changes.
+ *
+ * @param callback - Function that receives the node and optionally returns a cleanup function
+ * @returns A callback ref
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   const ref = useCallbackRef<HTMLInputElement>((node) => {
+ *     if (node) {
+ *       const handleInput = () => console.log('input changed');
+ *       node.addEventListener('input', handleInput);
+ *
+ *       // Return cleanup function
+ *       return () => {
+ *         node.removeEventListener('input', handleInput);
+ *       };
+ *     }
+ *   });
+ *
+ *   return <input ref={ref} />;
+ * };
+ * ```
+ */
+export declare function useCallbackRef<T>(callback: (node: T | null) => (() => void) | void): React.RefCallback<T>;
+//# sourceMappingURL=useCallbackRef.d.ts.map

package/dist/types/src/hooks/useMergeRefs.d.ts

@@ -0,0 +1,21 @@
+type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T | null> | null | undefined;
+/**
+ * Merges multiple refs into a single callback ref.
+ * This is useful when you need to forward a ref while also keeping an internal ref.
+ *
+ * @param refs - Array of refs to merge
+ * @returns A callback ref that will update all provided refs
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = forwardRef<HTMLInputElement, Props>((props, ref) => {
+ *   const internalRef = useRef<HTMLInputElement>(null);
+ *   const mergedRef = useMergeRefs([ref, internalRef]);
+ *
+ *   return <input ref={mergedRef} />;
+ * });
+ * ```
+ */
+export declare function useMergeRefs<T>(refs: Array<Ref<T>>): React.RefCallback<T>;
+export {};
+//# sourceMappingURL=useMergeRefs.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -1188,6 +1188,60 @@ button {
   color: var(--primary-red-600);
 }
 
+.ncua-file-input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.ncua-file-input__input-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.ncua-file-input__label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ncua-file-input__file-tags {
+  display: flex;
+  padding: 12px 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  align-self: stretch;
+  background: var(--gray-50);
+}
+.ncua-file-input__hint-list {
+  margin: 0;
+  list-style: disc;
+  color: var(--gray-400);
+}
+.ncua-file-input--xs {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-file-input--sm {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-file-input--xs .ncua-file-input__input-container {
+  gap: 4px;
+}
+.ncua-file-input--sm .ncua-file-input__input-container {
+  gap: 6px;
+}
+.ncua-file-input--xs .ncua-file-input__hint-list {
+  font-size: var(--font-size-xxxs);
+  line-height: var(--line-heights-xxxs);
+}
+.ncua-file-input--md .ncua-file-input__hint-list {
+  font-size: inherit;
+  line-height: inherit;
+}
+
 .ncua-input {
   display: inline-flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.1.3",
+  "version": "1.2.1",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -63,7 +63,7 @@
   "dependencies": {
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",
-    "@ncds/ui-admin-icon": "0.0.16",
+    "@ncds/ui-admin-icon": "0.1.1",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",