@idds/styles 1.2.11 → 1.2.13

package/src/components/theme-toggle.css

@@ -1,259 +0,0 @@
-/* =========================== */
-/* 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

@@ -1,436 +0,0 @@
-/* =========================== */
-/* 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-primary);
-  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-primary);
-  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-primary);
-  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);
-  }
-}