@uniai-fe/uds-primitives 0.6.15 → 0.7.0

package/dist/styles.css

@@ -521,6 +521,105 @@
   /* Status/affix colors */
   --input-status-error-color: var(--color-error);
   --input-status-success-color: var(--color-primary-default);
+  /* TimePicker tokens */
+  --input-time-width: 100%;
+  --input-time-flex: 0 1 auto;
+  --input-time-layout-gap: var(--input-layout-gap);
+  --input-time-height-small: var(--input-default-height-small);
+  --input-time-height-medium: var(--input-default-height-medium);
+  --input-time-height-large: var(--input-default-height-large);
+  --input-time-tertiary-height: var(--input-tertiary-height-base);
+  --input-time-padding-inline: var(--input-default-padding-inline);
+  --input-time-padding-block: var(--input-default-padding-block);
+  --input-time-secondary-padding-block: var(--input-secondary-padding-block);
+  --input-time-table-padding-inline: var(--spacing-padding-4);
+  --input-time-radius: var(--input-default-radius-base);
+  --input-time-tertiary-radius: var(--input-tertiary-radius-base);
+  --input-time-table-radius: var(--input-table-radius-base);
+  --input-time-field-gap: var(--spacing-gap-2);
+  --input-time-field-width: 2.4ch;
+  --input-time-period-field-width: 3.8ch;
+  --input-time-field-height: 100%;
+  --input-time-field-y-offset: 2px;
+  --input-time-section-gap: var(--spacing-gap-1);
+  --input-time-section-button-size: 28px;
+  --input-time-section-button-radius: var(--theme-radius-medium-1);
+  --input-time-left-section-width: 44px;
+  --input-time-section-width: 56px;
+  --input-time-section-width-with-clear: 92px;
+  --input-time-section-edge-gap: var(--input-time-padding-inline);
+  --input-time-left-section-padding-offset: 44px;
+  --input-time-right-section-padding-offset: 64px;
+  --input-time-right-section-padding-offset-with-clear: 100px;
+  --input-time-table-section-padding-offset: 48px;
+  --input-time-table-clear-padding-offset: 56px;
+  --input-time-table-field-width: 2.4ch;
+  --input-time-table-period-field-width: 3.8ch;
+  --input-time-icon-size: 24px;
+  --input-time-text-color: var(--input-text-color);
+  --input-time-text-disabled-color: var(--input-text-disabled-color);
+  --input-time-placeholder-color: var(--input-placeholder-color);
+  --input-time-separator-color: var(--color-label-alternative);
+  --input-time-icon-color: var(--color-label-alternative);
+  --input-time-icon-disabled-color: var(--color-label-disabled);
+  --input-time-font-size: var(--input-text-medium-size);
+  --input-time-line-height: var(--input-text-medium-line-height);
+  --input-time-font-weight: var(--input-text-medium-weight);
+  --input-time-letter-spacing: var(--input-text-medium-letter-spacing);
+  --input-time-text-small-size: var(--input-text-small-size);
+  --input-time-text-small-line-height: var(--input-text-small-line-height);
+  --input-time-text-small-weight: var(--input-text-small-weight);
+  --input-time-text-small-letter-spacing: var(
+  --input-text-small-letter-spacing
+  );
+  --input-time-text-large-size: var(--input-text-large-size);
+  --input-time-text-large-line-height: var(--input-text-large-line-height);
+  --input-time-text-large-weight: var(--input-text-large-weight);
+  --input-time-text-large-letter-spacing: var(
+  --input-text-large-letter-spacing
+  );
+  --input-time-table-text-size: var(--input-table-text-small-size);
+  --input-time-table-text-line-height: var(
+  --input-table-text-small-line-height
+  );
+  --input-time-table-text-weight: var(--input-table-text-small-weight);
+  --input-time-border-color: var(--input-border-color);
+  --input-time-border-width: var(--input-border-width-default);
+  --input-time-border-width-emphasis: var(--input-border-width-emphasis);
+  --input-time-border-active-color: var(--input-border-active-color);
+  --input-time-border-success-color: var(--input-border-success-color);
+  --input-time-border-error-color: var(--input-border-error-color);
+  --input-time-border-disabled-color: var(--input-border-disabled-color);
+  --input-time-table-border-color: var(--input-border-table-default-color);
+  --input-time-surface-color: var(--input-surface-color);
+  --input-time-secondary-surface-color: var(--input-secondary-surface-color);
+  --input-time-surface-disabled-color: var(--input-surface-disabled-color);
+  --input-time-table-surface-color: var(--input-table-surface-color);
+  --input-time-dropdown-padding: var(--spacing-padding-2);
+  --input-time-dropdown-radius: var(--theme-radius-large-1);
+  --input-time-dropdown-border-width: 1px;
+  --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-group-gap: var(--spacing-gap-3);
+  --input-time-option-gap: var(--spacing-gap-1);
+  --input-time-scrollarea-width: 64px;
+  --input-time-scrollarea-gutter: 8px;
+  --input-time-option-min-width: 56px;
+  --input-time-option-height: 32px;
+  --input-time-option-radius: var(--theme-radius-medium-1);
+  --input-time-option-color: var(--color-label-standard);
+  --input-time-option-hover-color: var(--color-label-strong);
+  --input-time-option-active-color: var(--color-common-100);
+  --input-time-option-hover-surface-color: var(--color-neutral-95);
+  --input-time-option-active-surface-color: var(--color-primary-default);
+  --input-time-option-font-size: var(--font-body-xsmall-size);
+  --input-time-option-line-height: var(--font-body-xsmall-line-height);
+  --input-time-option-font-weight: var(--font-body-xsmall-weight);
+  --input-time-presets-label-color: var(--color-label-alternative);
+  --input-time-presets-label-size: var(--font-label-small-size);
+  --input-time-presets-label-line-height: var(--font-label-small-line-height);
+  --input-time-presets-label-weight: var(--font-label-small-weight);
   --theme-navigation-height: 86px;
   --theme-navigation-padding-inline: 32px;
   --theme-navigation-padding-block-start: 8px;
@@ -3665,6 +3764,354 @@ figure.chip {
   --button-flex: 0 0 auto;
 }
 
+.input-time {
+  display: flex;
+  flex-direction: column;
+  gap: var(--input-time-layout-gap);
+  width: var(--input-time-width);
+  flex: var(--input-time-flex);
+  min-width: 0;
+}
+.input-time:where([data-width=auto]) {
+  --input-time-width: auto;
+  --input-time-flex: 0 1 auto;
+}
+.input-time:where([data-width=fill]) {
+  --input-time-width: auto;
+  --input-time-flex: 1 1 0%;
+}
+.input-time:where([data-width=full]), .input-time:where([data-block=true]) {
+  --input-time-width: 100%;
+  --input-time-flex: 0 0 100%;
+}
+.input-time:where([data-width=fit]) {
+  --input-time-width: fit-content;
+  --input-time-flex: 0 0 auto;
+}
+.input-time:where([data-width=custom]) {
+  --input-time-flex: 0 0 auto;
+}
+.input-time:where([data-priority=table]) {
+  display: block;
+  --input-time-width: 100%;
+  height: 100%;
+}
+
+.input-time-picker,
+.input-time-wrapper {
+  width: 100%;
+}
+
+.input-time-wrapper {
+  position: relative;
+}
+
+.input-time-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--input-time-height-medium);
+  border: var(--input-time-border-width) solid var(--input-time-border-color);
+  border-radius: var(--input-time-radius);
+  background-color: var(--input-time-surface-color);
+  color: var(--input-time-text-color);
+  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
+  box-shadow: none;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.input-time:where([data-icon-position=left]) .input-time-input {
+  padding-inline-start: var(--input-time-left-section-padding-offset);
+}
+.input-time:where([data-icon-position=left]):where([data-has-clear=true]) .input-time-input {
+  padding-inline-end: var(--input-time-right-section-padding-offset);
+}
+
+.input-time:where([data-icon-position=right]) .input-time-input {
+  padding-inline-end: var(--input-time-right-section-padding-offset);
+}
+.input-time:where([data-icon-position=right]):where([data-clearable=true]) .input-time-input {
+  padding-inline-end: var(--input-time-right-section-padding-offset-with-clear);
+}
+
+.input-time:where([data-size=small]) .input-time-input {
+  min-height: var(--input-time-height-small);
+  --input-time-font-size: var(--input-time-text-small-size);
+  --input-time-line-height: var(--input-time-text-small-line-height);
+  --input-time-font-weight: var(--input-time-text-small-weight);
+  --input-time-letter-spacing: var(--input-time-text-small-letter-spacing);
+}
+
+.input-time:where([data-size=large]) .input-time-input {
+  min-height: var(--input-time-height-large);
+  --input-time-font-size: var(--input-time-text-large-size);
+  --input-time-line-height: var(--input-time-text-large-line-height);
+  --input-time-font-weight: var(--input-time-text-large-weight);
+  --input-time-letter-spacing: var(--input-time-text-large-letter-spacing);
+}
+
+.input-time:where([data-priority=secondary]) .input-time-input {
+  border: none;
+  border-bottom: var(--input-time-border-width) solid var(--input-time-border-color);
+  border-radius: 0;
+  background-color: var(--input-time-secondary-surface-color);
+  padding-inline: 0;
+  padding-block: var(--input-time-secondary-padding-block);
+}
+
+.input-time:where([data-priority=tertiary]) .input-time-input {
+  min-height: var(--input-time-tertiary-height);
+  border-radius: var(--input-time-tertiary-radius);
+}
+
+.input-time:where([data-priority=table]) {
+  height: 100%;
+}
+.input-time:where([data-priority=table]) .input-time-picker,
+.input-time:where([data-priority=table]) .input-time-wrapper,
+.input-time:where([data-priority=table]) .input-time-input {
+  height: 100%;
+}
+.input-time:where([data-priority=table]) .input-time-input {
+  min-height: var(--input-time-height-small);
+  border-color: var(--input-time-table-border-color);
+  border-radius: var(--input-time-table-radius);
+  background-color: var(--input-time-table-surface-color);
+  padding-inline: var(--input-time-table-padding-inline);
+  --input-time-font-size: var(--input-time-table-text-size);
+  --input-time-line-height: var(--input-time-table-text-line-height);
+  --input-time-font-weight: var(--input-time-table-text-weight);
+}
+.input-time:where([data-priority=table]):where([data-icon-position=left]) .input-time-input {
+  padding-inline-start: var(--input-time-table-section-padding-offset);
+}
+.input-time:where([data-priority=table]):where([data-icon-position=right]) .input-time-input {
+  padding-inline-end: var(--input-time-right-section-padding-offset);
+}
+.input-time:where([data-priority=table]):where([data-has-clear=true]) .input-time-input {
+  padding-inline-end: var(--input-time-table-clear-padding-offset);
+}
+.input-time:where([data-priority=table]) .input-time-fields-group {
+  --input-time-field-y-offset: 0px;
+}
+.input-time:where([data-priority=table]) .input-time-field {
+  --input-time-field-width: var(--input-time-table-field-width);
+}
+.input-time:where([data-priority=table]) .input-time-field:where(select) {
+  --input-time-period-field-width: var(--input-time-table-period-field-width);
+}
+
+.input-time:where([data-state=active]) .input-time-input {
+  border-color: var(--input-time-border-active-color);
+  border-width: var(--input-time-border-width-emphasis);
+}
+
+.input-time:where([data-state=success]) .input-time-input {
+  border-color: var(--input-time-border-success-color);
+  border-width: var(--input-time-border-width-emphasis);
+}
+
+.input-time:where([data-state=error]) .input-time-input {
+  border-color: var(--input-time-border-error-color);
+  border-width: var(--input-time-border-width-emphasis);
+}
+
+.input-time:where([data-state=disabled]) .input-time-input,
+.input-time:where([data-readonly=true]) .input-time-input {
+  border-color: var(--input-time-border-disabled-color);
+  background-color: var(--input-time-surface-disabled-color);
+}
+
+.input-time:where([data-priority=secondary][data-state=active]) .input-time-input,
+.input-time:where([data-priority=secondary][data-state=success]) .input-time-input,
+.input-time:where([data-priority=secondary][data-state=error]) .input-time-input {
+  border-bottom-width: var(--input-time-border-width-emphasis);
+}
+
+.input-time-fields-root {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  color: var(--input-time-text-color);
+}
+
+.input-time-fields-group {
+  display: flex;
+  align-items: center;
+  gap: var(--input-time-field-gap);
+  height: 100%;
+  min-width: 0;
+  color: var(--input-time-text-color);
+  transform: translateY(var(--input-time-field-y-offset));
+}
+.input-time-fields-group > span {
+  color: var(--input-time-separator-color);
+  font-size: var(--input-time-font-size);
+  line-height: var(--input-time-line-height);
+}
+
+.input-time-field {
+  box-sizing: border-box;
+  width: var(--input-time-field-width);
+  min-width: var(--input-time-field-width);
+  height: var(--input-time-field-height);
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--input-time-text-color);
+  caret-color: var(--input-time-text-color);
+  font-size: var(--input-time-font-size);
+  line-height: var(--input-time-line-height);
+  font-weight: var(--input-time-font-weight);
+  letter-spacing: var(--input-time-letter-spacing);
+  text-align: center;
+  outline: none;
+  box-shadow: none;
+}
+.input-time-field::placeholder {
+  color: var(--input-time-placeholder-color);
+}
+.input-time-field:disabled {
+  color: var(--input-time-text-disabled-color);
+  cursor: default;
+}
+
+.input-time-field:where(select) {
+  width: var(--input-time-period-field-width);
+  min-width: var(--input-time-period-field-width);
+  appearance: none;
+  text-align-last: center;
+}
+
+.input-time-section {
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--input-time-section-width);
+}
+.input-time-section:where([data-position=left]) {
+  left: 0;
+  width: var(--input-time-left-section-width);
+}
+.input-time-section:where([data-position=right]) {
+  right: 0;
+  justify-content: flex-end;
+  padding-inline-end: var(--input-time-section-edge-gap);
+}
+
+.input-time:where([data-icon-position=right][data-clearable=true]) .input-time-section:where([data-position=right]) {
+  width: var(--input-time-section-width-with-clear);
+}
+
+.input-time-section-group {
+  display: flex;
+  align-items: center;
+  gap: var(--input-time-section-gap);
+}
+
+.input-time-section-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--input-time-section-button-size);
+  height: var(--input-time-section-button-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--input-time-section-button-radius);
+  background-color: transparent;
+  color: var(--input-time-icon-color);
+  cursor: pointer;
+}
+.input-time-section-button:where([aria-disabled=true]) {
+  color: var(--input-time-icon-disabled-color);
+  cursor: default;
+}
+
+.input-time-icon-graphic,
+.input-time-section-button svg {
+  display: flex;
+  width: var(--input-time-icon-size);
+  height: var(--input-time-icon-size);
+}
+
+.input-time-dropdown {
+  position: absolute;
+  z-index: 20;
+  box-sizing: border-box;
+  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);
+}
+
+.input-time-scrollarea {
+  position: relative;
+  min-width: var(--input-time-scrollarea-width);
+  overflow: hidden;
+}
+
+.input-time-scrollarea .mantine-ScrollArea-viewport {
+  box-sizing: border-box;
+  height: 100%;
+  padding-inline-end: var(--input-time-scrollarea-gutter);
+  scrollbar-gutter: stable;
+  overflow: auto;
+}
+
+.input-time-controls-list-group {
+  display: flex;
+  gap: var(--input-time-dropdown-group-gap);
+}
+
+.input-time-controls-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--input-time-option-gap);
+  width: var(--input-time-option-min-width);
+}
+
+.input-time-option,
+.input-time-preset-option {
+  width: var(--input-time-option-min-width);
+  min-width: var(--input-time-option-min-width);
+  height: var(--input-time-option-height);
+  border-radius: var(--input-time-option-radius);
+  color: var(--input-time-option-color);
+  font-size: var(--input-time-option-font-size);
+  line-height: var(--input-time-option-line-height);
+  font-weight: var(--input-time-option-font-weight);
+}
+.input-time-option:where([data-active]),
+.input-time-preset-option:where([data-active]) {
+  background-color: var(--input-time-option-active-surface-color);
+  color: var(--input-time-option-active-color);
+}
+.input-time-option:hover:where(:not([data-active])),
+.input-time-preset-option:hover:where(:not([data-active])) {
+  background-color: var(--input-time-option-hover-surface-color);
+  color: var(--input-time-option-hover-color);
+}
+
+.input-time-presets-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--input-time-option-gap);
+}
+
+.input-time-presets-group-label {
+  color: var(--input-time-presets-label-color);
+  font-size: var(--input-time-presets-label-size);
+  line-height: var(--input-time-presets-label-line-height);
+  font-weight: var(--input-time-presets-label-weight);
+}
+
 .input-address-container {
   width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.6.15",
+  "version": "0.7.0",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -86,7 +86,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.20",
+    "dayjs": "^1.11.21",
     "react-daum-postcode": "^4.0.0"
   },
   "devDependencies": {
@@ -95,7 +95,7 @@
     "@mantine/hooks": "^8.3.18",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.12.3",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
     "@uniai-fe/eslint-config": "workspace:*",
     "@uniai-fe/next-devkit": "workspace:*",
@@ -104,8 +104,8 @@
     "@uniai-fe/util-functions": "workspace:*",
     "eslint": "^9.39.2",
     "prettier": "^3.8.3",
-    "react-hook-form": "^7.76.0",
-    "sass": "^1.99.0",
+    "react-hook-form": "^7.77.0",
+    "sass": "^1.100.0",
     "typescript": "5.9.3"
   }
 }

package/src/components/input/img/clock.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.6"/>
+<path d="M12 7.5V12L15.25 14.25" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/input/index.scss

@@ -2,5 +2,6 @@
 @use "./styles/foundation.scss" as inputFoundation;
 @use "./styles/text.scss" as inputText;
 @use "./styles/date.scss" as inputDate;
+@use "./styles/time.scss" as inputTime;
 @use "./styles/address.scss" as inputAddress;
 @use "./styles/file.scss" as inputFile;

package/src/components/input/markup/index.tsx

@@ -1,6 +1,7 @@
 import { InputFoundation } from "./foundation";
 import { InputText } from "./text";
 import { InputDate } from "./date";
+import { InputTime } from "./time";
 import { InputAddress } from "./address";
 import { InputFile } from "./file";
 
@@ -8,6 +9,7 @@ export const Input = {
   ...InputFoundation,
   Text: InputText,
   Date: InputDate,
+  Time: InputTime,
   Address: InputAddress,
   File: InputFile,
 };