@uniai-fe/uds-primitives 0.7.0 → 0.7.3

package/LICENSE

@@ -0,0 +1,27 @@
+MIT License
+
+Copyright (c) 2025 UNIAI
+
+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.
+
+---
+
+This project includes third-party software governed by additional licenses,
+including Apache License 2.0. Refer to `THIRD_PARTY_NOTICES.md` for the full
+text of those notices and any required attributions.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,25 @@
+# Third Party Notices
+
+Package: @uniai-fe/uds-primitives
+
+This package declares the following direct third-party dependencies or peer dependencies.
+Internal `@uniai-fe/*` packages are excluded from this notice file.
+
+| Package                         | Relationship               | Declared version   | Installed metadata version | License |
+| ------------------------------- | -------------------------- | ------------------ | -------------------------- | ------- |
+| @mantine/core                   | peerDependency             | ^8                 | 8.3.18                     | MIT     |
+| @mantine/dates                  | peerDependency             | ^8                 | 8.3.18                     | MIT     |
+| @mantine/hooks                  | peerDependency             | ^8                 | 8.3.18                     | MIT     |
+| @radix-ui/react-checkbox        | dependency, peerDependency | ^1.3.3             | 1.3.4                      | MIT     |
+| @radix-ui/react-dropdown-menu   | dependency, peerDependency | ^2.1.16            | 2.1.17                     | MIT     |
+| @radix-ui/react-popover         | dependency, peerDependency | ^1.1.15            | 1.1.16                     | MIT     |
+| @radix-ui/react-radio-group     | dependency, peerDependency | ^1.3.8             | 1.4.0                      | MIT     |
+| @radix-ui/react-tabs            | dependency, peerDependency | ^1.1.13            | 1.1.14                     | MIT     |
+| @radix-ui/react-tooltip         | dependency, peerDependency | ^1.2.8             | 1.2.9                      | MIT     |
+| @radix-ui/react-visually-hidden | dependency, peerDependency | ^1.2.4             | 1.2.5                      | MIT     |
+| clsx                            | dependency, peerDependency | ^2.1.1             | 2.1.1                      | MIT     |
+| dayjs                           | dependency, peerDependency | ^1.11.21, ^1.11.20 | 1.11.21                    | MIT     |
+| react                           | peerDependency             | ^19                | 19.2.7                     | MIT     |
+| react-daum-postcode             | dependency, peerDependency | ^4.0.0             | 4.0.0                      | MIT     |
+| react-dom                       | peerDependency             | ^19                | 19.2.7                     | MIT     |
+| react-hook-form                 | peerDependency             | ^7                 | 7.78.0                     | MIT     |

package/dist/styles.css

@@ -601,6 +601,7 @@
   --input-time-dropdown-border-color: var(--color-border-standard-cool-gray);
   --input-time-dropdown-surface-color: var(--color-common-100);
   --input-time-dropdown-shadow: 0px 4px 22px rgba(19, 22, 32, 0.12);
+  --input-time-dropdown-content-height: 200px;
   --input-time-dropdown-group-gap: var(--spacing-gap-3);
   --input-time-option-gap: var(--spacing-gap-1);
   --input-time-scrollarea-width: 64px;
@@ -4044,22 +4045,27 @@ figure.chip {
   position: absolute;
   z-index: 20;
   box-sizing: border-box;
+  max-height: calc(var(--input-time-dropdown-content-height) + var(--input-time-dropdown-padding) + var(--input-time-dropdown-padding));
   padding: var(--input-time-dropdown-padding);
   border: var(--input-time-dropdown-border-width) solid var(--input-time-dropdown-border-color);
   border-radius: var(--input-time-dropdown-radius);
   background-color: var(--input-time-dropdown-surface-color);
   box-shadow: var(--input-time-dropdown-shadow);
+  overflow: hidden;
 }
 
 .input-time-scrollarea {
   position: relative;
   min-width: var(--input-time-scrollarea-width);
+  height: var(--input-time-dropdown-content-height);
+  max-height: var(--input-time-dropdown-content-height);
   overflow: hidden;
 }
 
 .input-time-scrollarea .mantine-ScrollArea-viewport {
   box-sizing: border-box;
   height: 100%;
+  max-height: var(--input-time-dropdown-content-height);
   padding-inline-end: var(--input-time-scrollarea-gutter);
   scrollbar-gutter: stable;
   overflow: auto;
@@ -4068,6 +4074,8 @@ figure.chip {
 .input-time-controls-list-group {
   display: flex;
   gap: var(--input-time-dropdown-group-gap);
+  max-height: var(--input-time-dropdown-content-height);
+  overflow: hidden;
 }
 
 .input-time-controls-list {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.7.0",
+  "version": "0.7.3",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -29,7 +29,8 @@
   "files": [
     "src",
     "dist",
-    "styles.scss"
+    "styles.scss",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "main": "./src/index.tsx",
   "module": "./src/index.tsx",

package/src/components/input/markup/time/Picker.tsx

@@ -31,6 +31,8 @@ const INPUT_TIME_CLASS_NAMES = {
   scrollarea: "input-time-scrollarea",
 } satisfies Partial<Record<TimePickerStylesNames, string>>;
 
+const INPUT_TIME_DROPDOWN_CONTENT_HEIGHT = 200;
+
 /**
  * Input Time Picker; Mantine TimePicker 기반 UDS adapter.
  * `Input.Time.Picker` public namespace에서 사용하며 Calendar/date 하위에 속하지 않는다.
@@ -178,13 +180,21 @@ const InputTimePicker = forwardRef<HTMLDivElement, InputTimePickerProps>(
           : undefined;
     const widthValue =
       width !== undefined ? getFormFieldWidthValue(width) : undefined;
+    const dropdownContentHeight =
+      maxDropdownContentHeight ?? INPUT_TIME_DROPDOWN_CONTENT_HEIGHT;
     const containerStyle: CSSProperties | undefined =
-      widthValue !== undefined
-        ? ({ ["--input-time-width" as const]: widthValue } as CSSProperties)
+      widthValue !== undefined || maxDropdownContentHeight !== undefined
+        ? ({
+            "--input-time-width": widthValue,
+            "--input-time-dropdown-content-height":
+              maxDropdownContentHeight !== undefined
+                ? `${maxDropdownContentHeight}px`
+                : undefined,
+          } as CSSProperties)
         : undefined;
     const resolvedIcon = icon === undefined ? <ClockIcon /> : icon;
     const showClearButton = Boolean(
-      clearable && timeValue && !isDisabled && !readOnly,
+      clearable && timeValue && isFocused && !isDisabled && !readOnly,
     );
     const reserveClearSpace = Boolean(clearable && !isDisabled && !readOnly);
     const rightSectionWidth =
@@ -267,6 +277,11 @@ const InputTimePicker = forwardRef<HTMLDivElement, InputTimePickerProps>(
       ) : (
         clearButton
       );
+    const resolvedScrollAreaProps = {
+      h: "var(--input-time-dropdown-content-height)",
+      mah: "var(--input-time-dropdown-content-height)",
+      ...scrollAreaProps,
+    };
 
     return (
       <div
@@ -314,8 +329,8 @@ const InputTimePicker = forwardRef<HTMLDivElement, InputTimePickerProps>(
           secondsPlaceholder={secondsPlaceholder}
           pasteSplit={pasteSplit}
           presets={presets}
-          maxDropdownContentHeight={maxDropdownContentHeight}
-          scrollAreaProps={scrollAreaProps}
+          maxDropdownContentHeight={dropdownContentHeight}
+          scrollAreaProps={resolvedScrollAreaProps}
           reverseTimeControlsList={reverseTimeControlsList}
           popoverProps={{
             width: "target",

package/src/components/input/styles/time.scss

@@ -340,23 +340,31 @@
   position: absolute;
   z-index: 20;
   box-sizing: border-box;
+  max-height: calc(
+    var(--input-time-dropdown-content-height) +
+      var(--input-time-dropdown-padding) + var(--input-time-dropdown-padding)
+  );
   padding: var(--input-time-dropdown-padding);
   border: var(--input-time-dropdown-border-width) solid
     var(--input-time-dropdown-border-color);
   border-radius: var(--input-time-dropdown-radius);
   background-color: var(--input-time-dropdown-surface-color);
   box-shadow: var(--input-time-dropdown-shadow);
+  overflow: hidden;
 }
 
 .input-time-scrollarea {
   position: relative;
   min-width: var(--input-time-scrollarea-width);
+  height: var(--input-time-dropdown-content-height);
+  max-height: var(--input-time-dropdown-content-height);
   overflow: hidden;
 }
 
 .input-time-scrollarea .mantine-ScrollArea-viewport {
   box-sizing: border-box;
   height: 100%;
+  max-height: var(--input-time-dropdown-content-height);
   padding-inline-end: var(--input-time-scrollarea-gutter);
   scrollbar-gutter: stable;
   overflow: auto;
@@ -365,6 +373,8 @@
 .input-time-controls-list-group {
   display: flex;
   gap: var(--input-time-dropdown-group-gap);
+  max-height: var(--input-time-dropdown-content-height);
+  overflow: hidden;
 }
 
 .input-time-controls-list {

package/src/components/input/styles/variables.scss

@@ -200,6 +200,7 @@
   --input-time-dropdown-border-color: var(--color-border-standard-cool-gray);
   --input-time-dropdown-surface-color: var(--color-common-100);
   --input-time-dropdown-shadow: 0px 4px 22px rgba(19, 22, 32, 0.12);
+  --input-time-dropdown-content-height: 200px;
   --input-time-dropdown-group-gap: var(--spacing-gap-3);
   --input-time-option-gap: var(--spacing-gap-1);
   --input-time-scrollarea-width: 64px;