@idds/styles 1.0.26

package/src/components/theme-toggle.css

@@ -0,0 +1,259 @@
+/* =========================== */
+/* THEME TOGGLE STYLES          */
+/* =========================== */
+
+.ina-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ina-spacing-3);
+}
+
+/* Label */
+.ina-theme-toggle__label {
+  font-size: var(--ina-font-sm);
+  font-weight: var(--ina-font-medium);
+  color: var(--ina-text-secondary);
+  white-space: nowrap;
+}
+
+/* Main Toggle Button */
+.ina-theme-toggle__button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: var(--ina-radius-full);
+  padding: var(--ina-spacing-2);
+  transition: all var(--ina-transition-base);
+}
+
+.ina-theme-toggle__button:hover {
+  background-color: var(--ina-background-secondary);
+  transform: scale(1.05);
+}
+
+.ina-theme-toggle__button:active {
+  transform: scale(0.95);
+}
+
+.ina-theme-toggle__button:focus-visible {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+/* Icon Container */
+.ina-theme-toggle__icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ina-text-secondary);
+  transition: all var(--ina-transition-base);
+  z-index: 2;
+}
+
+/* Icon Colors for Light Mode */
+[data-theme='light'] .ina-theme-toggle__icon {
+  color: var(--ina-primary-600);
+}
+
+[data-theme='dark'] .ina-theme-toggle__icon {
+  color: var(--ina-primary-400);
+}
+
+/* Track */
+.ina-theme-toggle__track {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 24px;
+  height: 12px;
+  background-color: var(--ina-neutral-300);
+  border-radius: var(--ina-radius-full);
+  transition: all var(--ina-transition-base);
+  z-index: 1;
+}
+
+/* Track active state */
+[data-theme='dark'] .ina-theme-toggle__track {
+  background-color: var(--ina-primary-500);
+}
+
+/* Size variants */
+.ina-theme-toggle--size-sm {
+  gap: var(--ina-spacing-2);
+}
+
+.ina-theme-toggle--size-sm .ina-theme-toggle__label {
+  font-size: var(--ina-font-xs);
+}
+
+.ina-theme-toggle--size-sm .ina-theme-toggle__button {
+  padding: var(--ina-spacing-1);
+  min-width: 32px;
+  height: 32px;
+}
+
+.ina-theme-toggle--size-sm .ina-theme-toggle__track {
+  width: 20px;
+  height: 10px;
+}
+
+.ina-theme-toggle--size-md .ina-theme-toggle__button {
+  padding: var(--ina-spacing-2);
+  min-width: 40px;
+  height: 40px;
+}
+
+.ina-theme-toggle--size-md .ina-theme-toggle__track {
+  width: 24px;
+  height: 12px;
+}
+
+.ina-theme-toggle--size-lg {
+  gap: var(--ina-spacing-4);
+}
+
+.ina-theme-toggle--size-lg .ina-theme-toggle__label {
+  font-size: var(--ina-font-base);
+}
+
+.ina-theme-toggle--size-lg .ina-theme-toggle__button {
+  padding: var(--ina-spacing-3);
+  min-width: 48px;
+  height: 48px;
+}
+
+.ina-theme-toggle--size-lg .ina-theme-toggle__track {
+  width: 28px;
+  height: 14px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-theme-toggle__label {
+    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
+  }
+
+  .ina-theme-toggle--size-sm .ina-theme-toggle__label {
+    font-size: var(--ina-font-xs); /* Tetap xs */
+  }
+
+  .ina-theme-toggle--size-lg .ina-theme-toggle__label {
+    font-size: var(--ina-font-sm); /* Turun dari base ke sm */
+  }
+}
+
+/* Animation for icon rotation */
+.ina-theme-toggle__icon {
+  animation: none;
+}
+
+[data-theme='light'] .ina-theme-toggle__icon:last-child {
+  animation: rotate-in 0.3s ease-out;
+}
+
+[data-theme='dark'] .ina-theme-toggle__icon:first-child {
+  animation: rotate-out 0.3s ease-out;
+}
+
+/* Keyframes */
+@keyframes rotate-in {
+  from {
+    opacity: 0;
+    transform: rotate(-90deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes rotate-out {
+  from {
+    opacity: 0;
+    transform: rotate(90deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+/* Hover effects */
+.ina-theme-toggle__button:hover .ina-theme-toggle__icon {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='light'] .ina-theme-toggle__button:hover .ina-theme-toggle__icon {
+  color: var(--ina-primary-500);
+}
+
+[data-theme='dark'] .ina-theme-toggle__button:hover .ina-theme-toggle__icon {
+  color: var(--ina-primary-300);
+}
+
+/* Disabled state */
+.ina-theme-toggle--disabled .ina-theme-toggle__button {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ina-theme-toggle--disabled .ina-theme-toggle__button:hover {
+  background-color: transparent;
+  transform: none;
+}
+
+.ina-theme-toggle--disabled .ina-theme-toggle__icon {
+  color: var(--ina-content-tertiary);
+}
+
+/* Accessible focus ring */
+.ina-theme-toggle__button:focus-visible {
+  box-shadow: 0 0 0 2px var(--ina-background-primary),
+    0 0 0 4px var(--ina-primary-500);
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .ina-theme-toggle__button {
+    border: 2px solid var(--ina-stroke-primary);
+  }
+
+  .ina-theme-toggle__track {
+    border: 1px solid var(--ina-stroke-primary);
+  }
+
+  .ina-theme-toggle__button:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ina-theme-toggle__button,
+  .ina-theme-toggle__icon {
+    transition: none;
+  }
+
+  .ina-theme-toggle__icon {
+    animation: none;
+  }
+}
+
+/* Dark mode specific adjustments */
+[data-theme='dark'] .ina-theme-toggle {
+  /* Ensure proper contrast in dark mode */
+}
+
+[data-theme='dark'] .ina-theme-toggle__label {
+  color: var(--ina-text-secondary);
+}
+
+[data-theme='dark'] .ina-theme-toggle__button:hover {
+  background-color: var(--ina-background-secondary);
+}

package/src/components/time-picker.css

@@ -0,0 +1,436 @@
+/* =========================== */
+/* TIME PICKER STYLES          */
+/* =========================== */
+
+.ina-time-picker {
+  position: relative;
+  display: inline-block;
+  background-color: inherit;
+}
+
+/* Wrapper */
+.ina-time-picker__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--ina-background-primary);
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-radius-lg);
+  transition: all var(--ina-transition-base);
+}
+
+/* Size variants */
+.ina-time-picker--size-sm .ina-time-picker__wrapper {
+  /* Desktop >= 768px */
+  height: 40px;
+}
+
+.ina-time-picker--size-md .ina-time-picker__wrapper {
+  /* Desktop >= 768px */
+  height: 44px;
+}
+
+.ina-time-picker--size-lg .ina-time-picker__wrapper {
+  /* Desktop >= 768px */
+  height: 48px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 767px) {
+  .ina-time-picker--size-sm .ina-time-picker__wrapper {
+    height: 36px;
+  }
+
+  .ina-time-picker--size-md .ina-time-picker__wrapper {
+    height: 40px;
+  }
+
+  .ina-time-picker--size-lg .ina-time-picker__wrapper {
+    height: 44px;
+  }
+}
+
+@media (max-width: 639px) {
+  .ina-time-picker--size-sm .ina-time-picker__wrapper {
+    height: 32px;
+  }
+
+  .ina-time-picker--size-md .ina-time-picker__wrapper {
+    height: 36px;
+  }
+
+  .ina-time-picker--size-lg .ina-time-picker__wrapper {
+    height: 40px;
+  }
+}
+
+.ina-time-picker__wrapper:hover {
+  border-color: var(--ina-stroke-secondary);
+}
+
+.ina-time-picker--open .ina-time-picker__wrapper {
+  border-color: var(--ina-primary-500);
+  box-shadow: 0 0 0 2px var(--ina-primary-50);
+}
+
+/* Input */
+.ina-time-picker__input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: var(--ina-content-primary);
+  font-size: var(--ina-font-sm);
+  font-weight: var(--ina-font-normal);
+  line-height: var(--ina-line-height-sm);
+  transition: all var(--ina-transition-base);
+}
+
+.ina-time-picker__input::placeholder {
+  color: var(--ina-content-tertiary);
+}
+
+.ina-time-picker__input:focus {
+  outline: none;
+}
+
+/* Prefix and Suffix Icons */
+.ina-time-picker__prefix-icon,
+.ina-time-picker__suffix-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ina-text-secondary);
+  pointer-events: none;
+}
+
+.ina-time-picker__suffix-icon {
+  cursor: pointer;
+  pointer-events: all;
+}
+
+/* Clear Button */
+.ina-time-picker__clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background-color: var(--ina-background-secondary);
+  color: var(--ina-text-secondary);
+  cursor: pointer;
+  border-radius: var(--ina-radius-full);
+  font-size: 12px;
+  font-weight: var(--ina-font-medium);
+  transition: all var(--ina-transition-fast);
+}
+
+.ina-time-picker__clear-button:hover {
+  background-color: var(--ina-background-tertiary);
+  color: var(--ina-content-primary);
+}
+
+/* Size Variants */
+.ina-time-picker--size-sm .ina-time-picker__wrapper {
+  padding: var(--ina-spacing-1) var(--ina-spacing-2);
+  min-height: 32px;
+}
+
+.ina-time-picker--size-sm .ina-time-picker__input {
+  font-size: var(--ina-font-xs);
+  padding: 0 var(--ina-spacing-1);
+}
+
+.ina-time-picker--size-sm .ina-time-picker__prefix-icon,
+.ina-time-picker--size-sm .ina-time-picker__suffix-icon {
+  margin: 0 var(--ina-spacing-1);
+}
+
+.ina-time-picker--size-md .ina-time-picker__wrapper {
+  padding: var(--ina-spacing-2) var(--ina-spacing-3);
+  min-height: 40px;
+}
+
+.ina-time-picker--size-md .ina-time-picker__input {
+  font-size: var(--ina-font-sm);
+  padding: 0 var(--ina-spacing-1);
+}
+
+.ina-time-picker--size-md .ina-time-picker__prefix-icon,
+.ina-time-picker--size-md .ina-time-picker__suffix-icon {
+  margin: 0 var(--ina-spacing-1);
+}
+
+.ina-time-picker--size-lg .ina-time-picker__wrapper {
+  padding: var(--ina-spacing-3) var(--ina-spacing-4);
+  min-height: 48px;
+}
+
+.ina-time-picker--size-lg .ina-time-picker__input {
+  font-size: var(--ina-font-base);
+  padding: 0 var(--ina-spacing-2);
+}
+
+.ina-time-picker--size-lg .ina-time-picker__prefix-icon,
+.ina-time-picker--size-lg .ina-time-picker__suffix-icon {
+  margin: 0 var(--ina-spacing-2);
+}
+
+/* Status Variants */
+.ina-time-picker--status-error .ina-time-picker__wrapper {
+  border-color: var(--ina-error-500);
+}
+
+.ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
+  box-shadow: 0 0 0 2px var(--ina-error-50);
+}
+
+.ina-time-picker--status-warning .ina-time-picker__wrapper {
+  border-color: var(--ina-warning-500);
+}
+
+.ina-time-picker--status-warning.ina-time-picker--open
+  .ina-time-picker__wrapper {
+  box-shadow: 0 0 0 2px var(--ina-warning-50);
+}
+
+.ina-time-picker--status-success .ina-time-picker__wrapper {
+  border-color: var(--ina-success-500);
+}
+
+.ina-time-picker--status-success.ina-time-picker--open
+  .ina-time-picker__wrapper {
+  box-shadow: 0 0 0 2px var(--ina-success-50);
+}
+
+/* Disabled State */
+.ina-time-picker--disabled .ina-time-picker__wrapper {
+  background-color: var(--ina-background-secondary);
+  border-color: var(--ina-stroke-primary);
+  cursor: not-allowed;
+}
+
+.ina-time-picker--disabled .ina-time-picker__input {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ina-time-picker--disabled .ina-time-picker__suffix-icon {
+  cursor: not-allowed;
+}
+
+/* Panel */
+.ina-time-picker__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: var(--ina-background-primary);
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-radius-lg);
+  box-shadow: var(--ina-shadow-lg);
+  margin-top: var(--ina-spacing-2);
+  min-width: 200px;
+  overflow: hidden;
+  animation: time-picker-fade-in 0.15s ease-out;
+}
+
+@keyframes time-picker-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Panel Content */
+.ina-time-picker__content {
+  display: flex;
+  max-height: 200px;
+  overflow: hidden;
+}
+
+/* Columns */
+.ina-time-picker__column {
+  flex: 1;
+  border-right: 1px solid var(--ina-stroke-primary);
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.ina-time-picker__column::-webkit-scrollbar {
+  display: none;
+}
+
+.ina-time-picker__column:last-child {
+  border-right: none;
+}
+
+.ina-time-picker__column--hovered {
+  background-color: var(--ina-background-secondary);
+}
+
+/* Column Content */
+.ina-time-picker__column-content {
+  padding: var(--ina-spacing-2);
+}
+
+/* Options */
+.ina-time-picker__option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 32px;
+  padding: var(--ina-spacing-1) var(--ina-spacing-2);
+  color: var(--ina-text-secondary);
+  font-size: var(--ina-font-sm);
+  font-weight: var(--ina-font-medium);
+  cursor: pointer;
+  border-radius: var(--ina-radius-lg);
+  transition: all var(--ina-transition-fast);
+  user-select: none;
+}
+
+.ina-time-picker__option:hover {
+  background-color: var(--ina-background-tertiary);
+  color: var(--ina-content-primary);
+}
+
+.ina-time-picker__option--hovered {
+  background-color: var(--ina-background-tertiary);
+  color: var(--ina-content-primary);
+}
+
+.ina-time-picker__option--selected {
+  background-color: var(--ina-primary-500);
+  color: var(--ina-white);
+}
+
+.ina-time-picker__option--selected:hover {
+  background-color: var(--ina-primary-600);
+  color: var(--ina-white);
+}
+
+.ina-time-picker__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: var(--ina-content-tertiary);
+}
+
+.ina-time-picker__option--disabled:hover {
+  background-color: transparent;
+  color: var(--ina-content-tertiary);
+}
+
+/* Actions */
+.ina-time-picker__actions {
+  display: grid;
+  grid-template-columns: 1fr auto; /* keep confirm on the far right */
+  align-items: center;
+  gap: var(--ina-spacing-2);
+  padding: var(--ina-spacing-2) var(--ina-spacing-3);
+  border-top: 1px solid var(--ina-stroke-primary);
+  background-color: var(--ina-background-secondary);
+}
+
+/* When both buttons exist, place them in two columns */
+.ina-time-picker__action-button {
+  justify-self: start;
+}
+
+.ina-time-picker__confirm-button {
+  justify-self: end; /* always right aligned */
+}
+
+.ina-time-picker__action-button,
+.ina-time-picker__confirm-button {
+  padding: var(--ina-spacing-1) var(--ina-spacing-3);
+  border: none;
+  border-radius: var(--ina-radius-lg);
+  font-size: var(--ina-font-sm);
+  font-weight: var(--ina-font-medium);
+  cursor: pointer;
+  transition: all var(--ina-transition-fast);
+}
+
+.ina-time-picker__action-button {
+  background-color: transparent;
+  color: var(--ina-primary-600);
+}
+
+.ina-time-picker__action-button:hover {
+  background-color: var(--ina-primary-50);
+  color: var(--ina-primary-700);
+}
+
+.ina-time-picker__confirm-button {
+  background-color: var(--ina-primary-500);
+  color: var(--ina-white);
+}
+
+.ina-time-picker__confirm-button:hover {
+  background-color: var(--ina-primary-600);
+}
+/* Focus styles - Sesuai design Figma */
+.ina-time-picker__wrapper:focus-within {
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+  outline: none;
+  background-color: var(--ina-background-primary);
+}
+/* hover styles - Sesuai design Figma */
+.ina-time-picker__wrapper:hover {
+  background-color: var(--ina-neutral-50);
+}
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .ina-time-picker__wrapper {
+    border-width: 2px;
+  }
+
+  .ina-time-picker__panel {
+    border-width: 2px;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .ina-time-picker__wrapper,
+  .ina-time-picker__panel,
+  .ina-time-picker__option {
+    transition: none;
+  }
+
+  .ina-time-picker__panel {
+    animation: none;
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+  .ina-time-picker__panel {
+    /* Keep absolute positioning like SelectDropdown */
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: auto;
+    transform: none;
+    width: 90vw;
+    max-width: 320px;
+    margin-top: var(--ina-spacing-1);
+  }
+
+  .ina-time-picker__content {
+    max-height: 180px;
+  }
+
+  .ina-time-picker__option {
+    min-height: 40px;
+    font-size: var(--ina-font-base);
+  }
+}