@uniai-fe/uds-primitives 0.12.2 → 0.12.4

package/dist/styles.css

@@ -931,12 +931,18 @@
   --table-td-text-size: 15px;
   --table-td-text-weight: var(--font-body-xsmall-weight);
   --table-td-text-line-height: var(--font-body-xsmall-line-height);
-  --time-picker-template-max-height: 800px;
+  --time-picker-template-max-height: 804px;
   --time-picker-template-viewport-gap: var(--spacing-gap-8);
-  --time-picker-template-padding: var(--spacing-padding-6);
-  --time-picker-template-gap: var(--spacing-gap-6);
+  --time-picker-template-padding: var(--spacing-padding-10)
+    var(--spacing-padding-6) var(--spacing-padding-6);
+  --time-picker-template-gap: var(--spacing-gap-7);
   --time-picker-template-section-gap: var(--spacing-gap-5);
-  --time-picker-template-text-color: var(--color-label-standard);
+  --time-picker-template-text-color: var(--color-cool-gray-20);
+  --time-picker-template-radius: var(--theme-radius-large-2);
+  --time-picker-template-surface-color: var(--color-common-100);
+  --time-picker-template-shadow:
+    0 4px 10px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.12);
+  --time-picker-template-heading-color: var(--color-cool-gray-30);
   --time-picker-template-heading-size: var(--font-heading-small-size);
   --time-picker-template-heading-line-height: var(
     --font-heading-small-line-height
@@ -946,8 +952,9 @@
   --time-picker-summary-padding-block: var(--spacing-padding-5);
   --time-picker-summary-gap: var(--spacing-gap-3);
   --time-picker-summary-radius: var(--theme-radius-large-2);
-  --time-picker-summary-surface-color: var(--color-surface-standard);
-  --time-picker-summary-border-color: var(--color-cool-gray-20);
+  --time-picker-summary-surface-color: #f1f1f4;
+  --time-picker-summary-border-color: var(--color-cool-gray-80);
+  --time-picker-summary-text-color: var(--color-cool-gray-20);
   --time-picker-summary-label-size: var(--font-body-xsmall-size);
   --time-picker-summary-label-line-height: var(--font-body-xsmall-line-height);
   --time-picker-summary-label-weight: var(--font-body-xsmall-weight);
@@ -958,24 +965,27 @@
   --time-picker-summary-value-line-height: var(--font-body-large-line-height);
   --time-picker-summary-value-weight: var(--font-heading-small-weight);
   --time-picker-summary-value-letter-spacing: 0.2px;
-  --time-picker-option-gap: var(--spacing-gap-5);
+  --time-picker-option-column-gap: var(--spacing-gap-4);
+  --time-picker-option-row-gap: var(--spacing-gap-5);
   --time-picker-option-height: var(--theme-size-medium-1);
   --time-picker-option-border-width: 1px;
-  --time-picker-option-border-color: var(--color-border-standard-cool-gray);
-  --time-picker-option-radius: var(--theme-radius-medium-3);
+  --time-picker-option-border-color: rgba(129, 133, 151, 0.28);
+  --time-picker-option-radius: var(--theme-radius-large-1);
   --time-picker-option-surface-color: var(--color-common-100);
-  --time-picker-option-color: var(--color-label-standard);
+  --time-picker-option-color: var(--color-cool-gray-20);
   --time-picker-option-selected-color: var(--color-primary-default);
   --time-picker-option-selected-surface-color: var(--color-neutral-99);
   --time-picker-option-font-size: var(--font-body-xsmall-size);
   --time-picker-option-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-option-letter-spacing: 0.2px;
   --time-picker-period-height: var(--theme-size-medium-1);
   --time-picker-period-padding: var(--spacing-padding-1);
   --time-picker-period-radius: var(--theme-radius-large-1);
-  --time-picker-period-item-radius: var(--theme-radius-medium-4);
-  --time-picker-period-surface-color: var(--color-cool-gray-85);
+  --time-picker-period-item-radius: var(--theme-radius-large-1);
+  --time-picker-period-surface-color: rgba(227, 228, 232, 0.52);
   --time-picker-period-item-surface-color: var(--color-common-100);
-  --time-picker-period-item-color: var(--color-label-standard);
+  --time-picker-period-item-color: var(--color-cool-gray-30);
+  --time-picker-period-item-active-color: var(--color-cool-gray-20);
   --time-picker-period-item-shadow:
     0 2px 8px rgba(0, 0, 0, 0.06), 0 0 4px rgba(0, 0, 0, 0.12);
   --time-picker-period-item-font-size: var(--font-body-xsmall-size);
@@ -984,15 +994,21 @@
   --time-picker-minute-stepper-height: var(--theme-size-medium-1);
   --time-picker-minute-stepper-gap: var(--spacing-gap-13);
   --time-picker-minute-stepper-radius: var(--theme-radius-large-1);
-  --time-picker-minute-stepper-surface-color: var(--color-cool-gray-85);
+  --time-picker-minute-stepper-surface-color: rgba(227, 228, 232, 0.52);
   --time-picker-minute-control-size: var(--theme-size-small-2);
   --time-picker-minute-value-size: var(--font-body-xsmall-size);
   --time-picker-minute-value-line-height: var(--font-body-xsmall-line-height);
   --time-picker-minute-value-weight: var(--font-body-medium-weight);
   --time-picker-template-footer-gap: var(--spacing-gap-6);
-  --time-picker-clear-color: var(--color-error);
-  --time-picker-clear-size: var(--font-body-xsmall-size);
-  --time-picker-clear-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-clear-color: var(--color-primary-default);
+  --time-picker-clear-size: 14px;
+  --time-picker-clear-line-height: 1.5;
+  --time-picker-clear-weight: var(--font-body-medium-weight);
+  --time-picker-apply-radius: 10px;
+  --time-picker-apply-size: var(--font-body-xsmall-size);
+  --time-picker-apply-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-apply-weight: var(--font-body-medium-weight);
+  --time-picker-apply-letter-spacing: 0.2px;
   --toast-stack-margin: var(--spacing-padding-7);
   --toast-stack-gap: var(--spacing-gap-3);
   --toast-stack-z-index: 10000;
@@ -5142,6 +5158,13 @@ figure.chip {
   width: fit-content;
 }
 
+.input-time-pop-over {
+  background-color: transparent;
+  border-radius: 0;
+  overflow: visible;
+  box-shadow: none;
+}
+
 .input-time-trigger-input {
   display: flex;
   align-items: center;
@@ -7492,7 +7515,11 @@ figure.chip {
   overflow-y: auto;
   gap: var(--time-picker-template-gap);
   padding: var(--time-picker-template-padding);
+  border-radius: var(--time-picker-template-radius);
+  background-color: var(--time-picker-template-surface-color);
   color: var(--time-picker-template-text-color);
+  box-shadow: var(--time-picker-template-shadow);
+  box-sizing: border-box;
 }
 
 .time-picker-summary {
@@ -7507,7 +7534,7 @@ figure.chip {
     var(--time-picker-summary-border-color);
   border-radius: var(--time-picker-summary-radius);
   background-color: var(--time-picker-summary-surface-color);
-  color: var(--time-picker-summary-border-color);
+  color: var(--time-picker-summary-text-color);
   text-align: center;
 }
 .time-picker-summary span {
@@ -7530,6 +7557,7 @@ figure.chip {
 }
 .time-picker-template-section h3 {
   margin: 0;
+  color: var(--time-picker-template-heading-color);
   font-size: var(--time-picker-template-heading-size);
   line-height: var(--time-picker-template-heading-line-height);
   font-weight: var(--time-picker-template-heading-weight);
@@ -7543,7 +7571,7 @@ figure.chip {
   --segmented-indicator-bg: var(--time-picker-period-item-surface-color);
   --segmented-indicator-shadow: var(--time-picker-period-item-shadow);
   --segmented-label-color: var(--time-picker-period-item-color);
-  --segmented-label-active-color: var(--time-picker-period-item-color);
+  --segmented-label-active-color: var(--time-picker-period-item-active-color);
   --segmented-gap: 0px;
   --segmented-item-font-size: var(--time-picker-period-item-font-size);
   --segmented-item-font-weight: var(--time-picker-period-item-font-weight);
@@ -7574,7 +7602,8 @@ figure.chip {
 .time-picker-option-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: var(--time-picker-option-gap);
+  column-gap: var(--time-picker-option-column-gap);
+  row-gap: var(--time-picker-option-row-gap);
 }
 
 .time-picker-option {
@@ -7588,6 +7617,7 @@ figure.chip {
   color: var(--time-picker-option-color);
   font-size: var(--time-picker-option-font-size);
   line-height: var(--time-picker-option-line-height);
+  letter-spacing: var(--time-picker-option-letter-spacing);
   cursor: pointer;
 }
 .time-picker-option:where([aria-pressed="true"]) {
@@ -7634,14 +7664,27 @@ figure.chip {
   gap: var(--time-picker-template-footer-gap);
 }
 
+.time-picker-apply-action {
+  min-height: var(--time-picker-minute-stepper-height);
+  padding-inline: var(--spacing-padding-6);
+  border-radius: var(--time-picker-apply-radius);
+  font-size: var(--time-picker-apply-size);
+  line-height: var(--time-picker-apply-line-height);
+  font-weight: var(--time-picker-apply-weight);
+  letter-spacing: var(--time-picker-apply-letter-spacing);
+}
+
 .time-picker-clear-action {
   margin: 0;
-  padding: 0;
+  height: var(--time-picker-minute-control-size);
+  padding: 0 var(--spacing-padding-3);
   border: 0;
+  border-radius: var(--theme-radius-medium-3);
   background-color: transparent;
   color: var(--time-picker-clear-color);
   font-size: var(--time-picker-clear-size);
   line-height: var(--time-picker-clear-line-height);
+  font-weight: var(--time-picker-clear-weight);
   cursor: pointer;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -88,9 +88,9 @@
     "sass": "^1.101.3",
     "typescript": "6.0.3",
     "@uniai-fe/eslint-config": "0.4.2",
+    "@uniai-fe/uds-foundation": "0.5.0",
     "@uniai-fe/next-devkit": "0.4.0",
     "@uniai-fe/tsconfig": "0.2.0",
-    "@uniai-fe/uds-foundation": "0.5.0",
     "@uniai-fe/util-functions": "0.4.3"
   },
   "scripts": {

package/src/components/input/img/stepper-chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4484 5.24542L8.00723 8.68658L4.56606 5.24542C4.25365 4.933 3.74693 4.933 3.43451 5.24542C3.12209 5.55784 3.12209 6.06456 3.43451 6.37698L7.44145 10.3839C7.75387 10.6963 8.26058 10.6963 8.573 10.3839L12.5799 6.37698C12.8924 6.06456 12.8924 5.55784 12.5799 5.24542C12.2675 4.933 11.7608 4.933 11.4484 5.24542Z" fill="#3A3C46"/>
+</svg>

package/src/components/input/img/stepper-chevron-up.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4484 10.2175L8.00723 6.77634L4.56606 10.2175C4.25365 10.5299 3.74693 10.5299 3.43451 10.2175C3.12209 9.90508 3.12209 9.39837 3.43451 9.08595L7.44145 5.07901C7.75387 4.76659 8.26058 4.76659 8.573 5.07901L12.5799 9.08595C12.8924 9.39837 12.8924 9.90508 12.5799 10.2175C12.2675 10.5299 11.7608 10.5299 11.4484 10.2175Z" fill="#3A3C46"/>
+</svg>

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

@@ -3,8 +3,9 @@
 import clsx from "clsx";
 import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from "react";
 import { forwardRef, useRef } from "react";
-import { Calendar } from "../../../calendar";
 import type { TimePickerUnit } from "../../../time-picker/types";
+import StepperChevronDownIcon from "../../img/stepper-chevron-down.svg";
+import StepperChevronUpIcon from "../../img/stepper-chevron-up.svg";
 import type { InputTimeTriggerProps } from "../../types";
 
 /**
@@ -217,7 +218,7 @@ const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
                 onStep(1);
               }}
             >
-              <Calendar.Icon.Chevron.up aria-hidden="true" />
+              <StepperChevronUpIcon aria-hidden="true" />
             </button>
             <button
               type="button"
@@ -230,7 +231,7 @@ const InputTimeTrigger = forwardRef<HTMLDivElement, InputTimeTriggerProps>(
                 onStep(-1);
               }}
             >
-              <Calendar.Icon.Chevron.down aria-hidden="true" />
+              <StepperChevronDownIcon aria-hidden="true" />
             </button>
           </div>
         ) : null}

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

@@ -26,6 +26,13 @@
   }
 }
 
+.input-time-pop-over {
+  background-color: transparent;
+  border-radius: 0;
+  overflow: visible;
+  box-shadow: none;
+}
+
 .input-time-trigger-input {
   display: flex;
   align-items: center;

package/src/components/time-picker/markup/Footer.tsx

@@ -39,10 +39,11 @@ export default function TimePickerFooter({
         <span />
       )}
       <Button.Default
+        className="time-picker-apply-action"
         type="button"
         priority="primary"
         fill="solid"
-        size="large"
+        size="medium"
         disabled={disabled}
         onClick={onApply}
       >

package/src/components/time-picker/markup/HourSection.tsx

@@ -1,7 +1,7 @@
 import { SegmentedControl } from "../../segmented-control";
 import type { TimePickerHourSectionProps } from "../types";
 
-const HOURS_12 = Array.from({ length: 12 }, (_, index) => index + 1);
+const HOURS_12 = [12, ...Array.from({ length: 11 }, (_, index) => index + 1)];
 const HOURS_24 = Array.from({ length: 24 }, (_, index) => index);
 const PERIOD_OPTIONS = [
   { value: "am", label: "오전" },

package/src/components/time-picker/styles/template.scss

@@ -8,7 +8,11 @@
   overflow-y: auto;
   gap: var(--time-picker-template-gap);
   padding: var(--time-picker-template-padding);
+  border-radius: var(--time-picker-template-radius);
+  background-color: var(--time-picker-template-surface-color);
   color: var(--time-picker-template-text-color);
+  box-shadow: var(--time-picker-template-shadow);
+  box-sizing: border-box;
 }
 
 .time-picker-summary {
@@ -23,7 +27,7 @@
     var(--time-picker-summary-border-color);
   border-radius: var(--time-picker-summary-radius);
   background-color: var(--time-picker-summary-surface-color);
-  color: var(--time-picker-summary-border-color);
+  color: var(--time-picker-summary-text-color);
   text-align: center;
 
   span {
@@ -48,6 +52,7 @@
 
   h3 {
     margin: 0;
+    color: var(--time-picker-template-heading-color);
     font-size: var(--time-picker-template-heading-size);
     line-height: var(--time-picker-template-heading-line-height);
     font-weight: var(--time-picker-template-heading-weight);
@@ -62,7 +67,7 @@
   --segmented-indicator-bg: var(--time-picker-period-item-surface-color);
   --segmented-indicator-shadow: var(--time-picker-period-item-shadow);
   --segmented-label-color: var(--time-picker-period-item-color);
-  --segmented-label-active-color: var(--time-picker-period-item-color);
+  --segmented-label-active-color: var(--time-picker-period-item-active-color);
   --segmented-gap: 0px;
   --segmented-item-font-size: var(--time-picker-period-item-font-size);
   --segmented-item-font-weight: var(--time-picker-period-item-font-weight);
@@ -98,7 +103,8 @@
 .time-picker-option-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: var(--time-picker-option-gap);
+  column-gap: var(--time-picker-option-column-gap);
+  row-gap: var(--time-picker-option-row-gap);
 }
 
 .time-picker-option {
@@ -112,6 +118,7 @@
   color: var(--time-picker-option-color);
   font-size: var(--time-picker-option-font-size);
   line-height: var(--time-picker-option-line-height);
+  letter-spacing: var(--time-picker-option-letter-spacing);
   cursor: pointer;
 
   &:where([aria-pressed="true"]) {
@@ -162,13 +169,26 @@
   gap: var(--time-picker-template-footer-gap);
 }
 
+.time-picker-apply-action {
+  min-height: var(--time-picker-minute-stepper-height);
+  padding-inline: var(--spacing-padding-6);
+  border-radius: var(--time-picker-apply-radius);
+  font-size: var(--time-picker-apply-size);
+  line-height: var(--time-picker-apply-line-height);
+  font-weight: var(--time-picker-apply-weight);
+  letter-spacing: var(--time-picker-apply-letter-spacing);
+}
+
 .time-picker-clear-action {
   margin: 0;
-  padding: 0;
+  height: var(--time-picker-minute-control-size);
+  padding: 0 var(--spacing-padding-3);
   border: 0;
+  border-radius: var(--theme-radius-medium-3);
   background-color: transparent;
   color: var(--time-picker-clear-color);
   font-size: var(--time-picker-clear-size);
   line-height: var(--time-picker-clear-line-height);
+  font-weight: var(--time-picker-clear-weight);
   cursor: pointer;
 }

package/src/components/time-picker/styles/variables.scss

@@ -1,10 +1,16 @@
 :root {
-  --time-picker-template-max-height: 800px;
+  --time-picker-template-max-height: 804px;
   --time-picker-template-viewport-gap: var(--spacing-gap-8);
-  --time-picker-template-padding: var(--spacing-padding-6);
-  --time-picker-template-gap: var(--spacing-gap-6);
+  --time-picker-template-padding: var(--spacing-padding-10)
+    var(--spacing-padding-6) var(--spacing-padding-6);
+  --time-picker-template-gap: var(--spacing-gap-7);
   --time-picker-template-section-gap: var(--spacing-gap-5);
-  --time-picker-template-text-color: var(--color-label-standard);
+  --time-picker-template-text-color: var(--color-cool-gray-20);
+  --time-picker-template-radius: var(--theme-radius-large-2);
+  --time-picker-template-surface-color: var(--color-common-100);
+  --time-picker-template-shadow:
+    0 4px 10px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.12);
+  --time-picker-template-heading-color: var(--color-cool-gray-30);
   --time-picker-template-heading-size: var(--font-heading-small-size);
   --time-picker-template-heading-line-height: var(
     --font-heading-small-line-height
@@ -14,8 +20,9 @@
   --time-picker-summary-padding-block: var(--spacing-padding-5);
   --time-picker-summary-gap: var(--spacing-gap-3);
   --time-picker-summary-radius: var(--theme-radius-large-2);
-  --time-picker-summary-surface-color: var(--color-surface-standard);
-  --time-picker-summary-border-color: var(--color-cool-gray-20);
+  --time-picker-summary-surface-color: #f1f1f4;
+  --time-picker-summary-border-color: var(--color-cool-gray-80);
+  --time-picker-summary-text-color: var(--color-cool-gray-20);
   --time-picker-summary-label-size: var(--font-body-xsmall-size);
   --time-picker-summary-label-line-height: var(--font-body-xsmall-line-height);
   --time-picker-summary-label-weight: var(--font-body-xsmall-weight);
@@ -26,24 +33,27 @@
   --time-picker-summary-value-line-height: var(--font-body-large-line-height);
   --time-picker-summary-value-weight: var(--font-heading-small-weight);
   --time-picker-summary-value-letter-spacing: 0.2px;
-  --time-picker-option-gap: var(--spacing-gap-5);
+  --time-picker-option-column-gap: var(--spacing-gap-4);
+  --time-picker-option-row-gap: var(--spacing-gap-5);
   --time-picker-option-height: var(--theme-size-medium-1);
   --time-picker-option-border-width: 1px;
-  --time-picker-option-border-color: var(--color-border-standard-cool-gray);
-  --time-picker-option-radius: var(--theme-radius-medium-3);
+  --time-picker-option-border-color: rgba(129, 133, 151, 0.28);
+  --time-picker-option-radius: var(--theme-radius-large-1);
   --time-picker-option-surface-color: var(--color-common-100);
-  --time-picker-option-color: var(--color-label-standard);
+  --time-picker-option-color: var(--color-cool-gray-20);
   --time-picker-option-selected-color: var(--color-primary-default);
   --time-picker-option-selected-surface-color: var(--color-neutral-99);
   --time-picker-option-font-size: var(--font-body-xsmall-size);
   --time-picker-option-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-option-letter-spacing: 0.2px;
   --time-picker-period-height: var(--theme-size-medium-1);
   --time-picker-period-padding: var(--spacing-padding-1);
   --time-picker-period-radius: var(--theme-radius-large-1);
-  --time-picker-period-item-radius: var(--theme-radius-medium-4);
-  --time-picker-period-surface-color: var(--color-cool-gray-85);
+  --time-picker-period-item-radius: var(--theme-radius-large-1);
+  --time-picker-period-surface-color: rgba(227, 228, 232, 0.52);
   --time-picker-period-item-surface-color: var(--color-common-100);
-  --time-picker-period-item-color: var(--color-label-standard);
+  --time-picker-period-item-color: var(--color-cool-gray-30);
+  --time-picker-period-item-active-color: var(--color-cool-gray-20);
   --time-picker-period-item-shadow:
     0 2px 8px rgba(0, 0, 0, 0.06), 0 0 4px rgba(0, 0, 0, 0.12);
   --time-picker-period-item-font-size: var(--font-body-xsmall-size);
@@ -52,13 +62,19 @@
   --time-picker-minute-stepper-height: var(--theme-size-medium-1);
   --time-picker-minute-stepper-gap: var(--spacing-gap-13);
   --time-picker-minute-stepper-radius: var(--theme-radius-large-1);
-  --time-picker-minute-stepper-surface-color: var(--color-cool-gray-85);
+  --time-picker-minute-stepper-surface-color: rgba(227, 228, 232, 0.52);
   --time-picker-minute-control-size: var(--theme-size-small-2);
   --time-picker-minute-value-size: var(--font-body-xsmall-size);
   --time-picker-minute-value-line-height: var(--font-body-xsmall-line-height);
   --time-picker-minute-value-weight: var(--font-body-medium-weight);
   --time-picker-template-footer-gap: var(--spacing-gap-6);
-  --time-picker-clear-color: var(--color-error);
-  --time-picker-clear-size: var(--font-body-xsmall-size);
-  --time-picker-clear-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-clear-color: var(--color-primary-default);
+  --time-picker-clear-size: 14px;
+  --time-picker-clear-line-height: 1.5;
+  --time-picker-clear-weight: var(--font-body-medium-weight);
+  --time-picker-apply-radius: 10px;
+  --time-picker-apply-size: var(--font-body-xsmall-size);
+  --time-picker-apply-line-height: var(--font-body-xsmall-line-height);
+  --time-picker-apply-weight: var(--font-body-medium-weight);
+  --time-picker-apply-letter-spacing: 0.2px;
 }