@uniai-fe/uds-primitives 0.10.4 → 0.12.0

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

@@ -1,6 +1,6 @@
 import "../../styles/time.scss";
-import InputTimePicker from "./Picker";
+import InputTimeTemplate from "./Template";
 
 export const InputTime = {
-  Picker: InputTimePicker,
+  Template: InputTimeTemplate,
 };

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

@@ -1,420 +1,263 @@
 .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;
+  color: var(--input-time-text-color);
 
   &:where([data-width="auto"]) {
-    --input-time-width: auto;
-    --input-time-flex: 0 1 auto;
+    width: auto;
   }
 
   &:where([data-width="fill"]) {
-    --input-time-width: auto;
-    --input-time-flex: 1 1 0%;
+    flex: 1 1 0%;
+    width: auto;
+  }
+
+  &:where([data-width="full"]) {
+    width: 100%;
   }
 
-  &:where([data-width="full"]),
   &:where([data-block="true"]) {
-    --input-time-width: 100%;
-    --input-time-flex: 0 0 100%;
+    width: 100%;
   }
 
   &:where([data-width="fit"]) {
-    --input-time-width: fit-content;
-    --input-time-flex: 0 0 auto;
+    width: fit-content;
   }
+}
+
+.input-time-trigger-input {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: var(--input-time-height-medium);
+  padding: var(--input-time-padding-block) var(--input-time-padding-inline);
+  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);
+}
 
-  &:where([data-width="custom"]) {
-    --input-time-flex: 0 0 auto;
+.input-time-fields-group {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--input-time-field-gap);
+
+  > span {
+    color: var(--input-time-separator-color);
+    font-size: var(--input-time-font-size);
+    line-height: var(--input-time-line-height);
   }
+}
 
-  &:where([data-priority="table"]) {
-    display: block;
-    --input-time-width: 100%;
-    height: 100%;
+.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;
+  outline: none;
+  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;
+
+  &:first-child {
+    text-align: right;
+  }
+
+  &:last-of-type {
+    text-align: left;
+  }
+
+  &:not(:first-child):not(:last-of-type) {
+    width: var(--input-time-field-middle-width);
+    min-width: var(--input-time-field-middle-width);
+  }
+
+  &::placeholder {
+    color: var(--input-time-placeholder-color);
   }
 }
 
-.input-time-picker,
-.input-time-wrapper {
-  width: 100%;
+.input-time-period-field {
+  width: var(--input-time-period-field-width);
+  height: var(--input-time-field-height);
+  padding: 0;
+  border: 0;
+  outline: none;
+  appearance: none;
+  background-color: transparent;
+  color: var(--input-time-text-color);
+  font-size: var(--input-time-font-size);
+  text-align: center;
+}
+
+.input-time-icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 var(--input-time-icon-size);
+  width: var(--input-time-icon-size);
+  height: var(--input-time-icon-size);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--input-time-icon-color);
+  cursor: pointer;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }
 
-.input-time-wrapper {
-  position: relative;
+.input-time-stepper {
+  display: flex;
+  flex: 0 0 var(--input-time-stepper-width);
+  flex-direction: column;
+  align-self: stretch;
 }
 
-.input-time-input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--input-time-height-medium);
+.input-time-stepper-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 var(--input-time-stepper-button-height);
+  min-height: 0;
+  margin: 0;
+  padding: 0;
   border: var(--input-time-border-width) solid var(--input-time-border-color);
-  border-radius: var(--input-time-radius);
+  border-left: 0;
   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;
-}
+  cursor: pointer;
 
-.input-time:where([data-icon-position="left"]) {
-  .input-time-input {
-    padding-inline-start: var(--input-time-left-section-padding-offset);
+  &:first-child {
+    border-radius: 0 var(--input-time-stepper-radius) 0 0;
   }
 
-  &:where([data-has-clear="true"]) {
-    .input-time-input {
-      padding-inline-end: var(--input-time-right-section-padding-offset);
-    }
+  &:last-child {
+    border-top: 0;
+    border-radius: 0 0 var(--input-time-stepper-radius) 0;
   }
-}
 
-.input-time:where([data-icon-position="right"]) {
-  .input-time-input {
-    padding-inline-end: var(--input-time-right-section-padding-offset);
+  svg {
+    display: block;
+    width: var(--input-time-stepper-icon-size);
+    height: var(--input-time-stepper-icon-size);
   }
+}
 
-  &:where([data-clearable="true"]) {
-    .input-time-input {
-      padding-inline-end: var(
-        --input-time-right-section-padding-offset-with-clear
-      );
-    }
-  }
+.input-time:where([data-active-unit]) .input-time-trigger-input {
+  border-radius: var(--input-time-radius) 0 0 var(--input-time-radius);
 }
 
 .input-time:where([data-size="small"]) {
-  .input-time-input {
+  .input-time-trigger-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-field {
+    font-size: var(--input-time-text-small-size);
+    line-height: var(--input-time-text-small-line-height);
+    font-weight: var(--input-time-text-small-weight);
   }
 }
 
 .input-time:where([data-size="large"]) {
-  .input-time-input {
+  .input-time-trigger-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-field {
+    font-size: var(--input-time-text-large-size);
+    line-height: var(--input-time-text-large-line-height);
+    font-weight: var(--input-time-text-large-weight);
   }
 }
 
 .input-time:where([data-priority="secondary"]) {
-  .input-time-input {
-    border: none;
+  .input-time-trigger-input {
+    border: 0;
     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 {
+  .input-time-trigger-input {
     min-height: var(--input-time-tertiary-height);
     border-radius: var(--input-time-tertiary-radius);
   }
 }
 
 .input-time:where([data-priority="table"]) {
+  width: 100%;
   height: 100%;
 
-  .input-time-picker,
-  .input-time-wrapper,
-  .input-time-input {
-    height: 100%;
-  }
-
-  .input-time-input {
+  .input-time-trigger-input {
     min-height: var(--input-time-height-small);
+    height: 100%;
+    padding-inline: var(--input-time-table-padding-inline);
     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);
-  }
-
-  &:where([data-icon-position="left"]) {
-    .input-time-input {
-      padding-inline-start: var(--input-time-table-section-padding-offset);
-    }
-  }
-
-  &:where([data-icon-position="right"]) {
-    .input-time-input {
-      padding-inline-end: var(--input-time-right-section-padding-offset);
-    }
-  }
-
-  &:where([data-has-clear="true"]) {
-    .input-time-input {
-      padding-inline-end: var(--input-time-table-clear-padding-offset);
-    }
-  }
-
-  .input-time-fields-group {
-    --input-time-field-y-offset: 0px;
   }
 
   .input-time-field {
-    --input-time-field-width: var(--input-time-table-field-width);
-  }
-
-  .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);
+    font-size: var(--input-time-table-text-size);
+    line-height: var(--input-time-table-text-line-height);
+    font-weight: var(--input-time-table-text-weight);
   }
 }
 
 .input-time:where([data-state="success"]) {
-  .input-time-input {
+  .input-time-trigger-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 {
+  .input-time-trigger-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:where([data-readonly="true"]) {
-  .input-time-input {
+.input-time:where([data-state="disabled"]) {
+  .input-time-trigger-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:where([data-priority="secondary"][data-state="success"]),
-.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));
-
-  > 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;
-
-  &::placeholder {
-    color: var(--input-time-placeholder-color);
-  }
 
-  &:disabled {
+  .input-time-field {
     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);
-
-  &:where([data-position="left"]) {
-    left: 0;
-    width: var(--input-time-left-section-width);
-  }
-
-  &: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;
-
-  &:where([aria-disabled="true"]) {
+  .input-time-icon-button {
     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;
-  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;
-}
-
-.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 {
-  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);
-
-  &:where([data-active]) {
-    background-color: var(--input-time-option-active-surface-color);
-    color: var(--input-time-option-active-color);
-  }
-
-  &:hover:where(:not([data-active])) {
-    background-color: var(--input-time-option-hover-surface-color);
-    color: var(--input-time-option-hover-color);
+.input-time:where([data-readonly="true"]) {
+  .input-time-trigger-input {
+    border-color: var(--input-time-border-disabled-color);
+    background-color: var(--input-time-surface-disabled-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);
-}

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

@@ -122,8 +122,6 @@
 
   /* 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);
@@ -132,29 +130,19 @@
   --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-radius: var(--theme-radius-medium-3);
   --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-gap: 0;
+  --input-time-field-width: 2.7ch;
+  --input-time-field-middle-width: 2.2ch;
+  --input-time-period-field-width: 4.2ch;
   --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-stepper-width: 28px;
+  --input-time-stepper-button-height: 28px;
+  --input-time-stepper-radius: var(--theme-radius-medium-3);
+  --input-time-stepper-icon-size: 16px;
   --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);
@@ -194,30 +182,4 @@
   --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-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;
-  --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);
 }