@idds/styles 1.2.11 → 1.2.12

package/src/components/one-time-password.css

@@ -1,119 +0,0 @@
-/* OneTimePassword Component Styles */
-
-/* Base container */
-.ina-one-time-password {
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--ina-rounded-lg, 8px);
-  background-color: var(--ina-background-primary);
-  width: max-content;
-}
-
-/* Title */
-.ina-one-time-password__title {
-  font-size: 20px;
-  font-weight: 600; /* semibold */
-  color: var(--ina-content-primary);
-  margin-bottom: 16px;
-}
-
-/* Description */
-.ina-one-time-password__description {
-  font-size: 14px;
-  font-weight: 400; /* normal */
-  color: var(--ina-content-secondary);
-  margin-bottom: 16px;
-}
-
-/* Input container */
-.ina-one-time-password__container {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-/* Individual input field */
-.ina-one-time-password__input {
-  flex: 0 0 auto;
-  width: 44px; /* Auto width based on content */
-  height: 44px;
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-rounded-lg, 8px);
-  background-color: var(--ina-background-primary);
-  font-size: 24px;
-  font-weight: 500;
-  color: var(--ina-content-primary);
-  text-align: center;
-  outline: none;
-  transition: all var(--ina-transition-base);
-  font-family: inherit;
-}
-
-/* Hover state */
-.ina-one-time-password__input:hover:not(:disabled):not(:read-only) {
-  background-color: var(--ina-neutral-50);
-}
-
-/* Focus state */
-.ina-one-time-password__input:focus {
-  border-color: var(--ina-content-primary);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
-  background-color: var(--ina-background-primary);
-}
-
-/* Error/Invalid state */
-.ina-one-time-password__input--error {
-  border-color: var(--ina-negative-500);
-}
-
-.ina-one-time-password__input--error:focus {
-  border-color: var(--ina-negative-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-negative-50) !important;
-}
-
-/* Disabled state */
-.ina-one-time-password__input:disabled {
-  background-color: var(--ina-background-tertiary);
-  border-color: var(--ina-stroke-primary) !important;
-  cursor: not-allowed;
-  opacity: 0.6;
-  color: var(--ina-content-tertiary);
-}
-
-/* Readonly state */
-.ina-one-time-password__input[readonly] {
-  background-color: var(--ina-background-tertiary);
-  cursor: default;
-}
-
-/* Helper text */
-.ina-one-time-password__helper-text {
-  font-size: 14px;
-  font-weight: 400; /* normal */
-  color: var(--ina-content-primary);
-}
-
-/* Helper text error state */
-.ina-one-time-password__helper-text--error {
-  color: var(--ina-negative-500);
-}
-
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .ina-one-time-password {
-    padding: 24px 16px;
-  }
-
-  .ina-one-time-password__input {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
-    padding: 0 12px;
-  }
-
-  .ina-one-time-password__container {
-    gap: 12px;
-  }
-}

package/src/components/pagination.css

@@ -1,429 +0,0 @@
-/**
- * Pagination Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- */
-
-.ina-pagination {
-  /* Base container styling */
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-  gap: var(--ina-spacing-2);
-  font-size: var(--ina-font-xs);
-  font-weight: var(--ina-font-normal);
-}
-.ina-pagination__page-size-container {
-  display: none;
-}
-.ina-pagination__page-info {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .ina-pagination {
-    flex-direction: row-reverse;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 0;
-    font-size: var(--ina-font-sm);
-    font-weight: var(--ina-font-medium);
-  }
-  .ina-pagination__page-size-container {
-    display: flex;
-  }
-  .ina-pagination__page-info {
-    display: block;
-  }
-}
-
-/* Full width layout (untuk Table) */
-.ina-pagination--full-width {
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  gap: 12px; /* 12px gap antara nav container dan page size container */
-}
-
-@media (min-width: 768px) {
-  .ina-pagination--full-width {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0;
-  }
-}
-
-/* Navigation container */
-.ina-pagination__nav-container {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--ina-spacing-2);
-}
-
-@media (min-width: 768px) {
-  .ina-pagination__nav-container {
-    flex-direction: row;
-    align-items: center;
-    gap: var(--ina-spacing-4);
-  }
-}
-
-/* Page info text */
-.ina-pagination__page-info {
-  color: var(--ina-content-primary);
-  white-space: nowrap;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/* Navigation buttons container */
-.ina-pagination__nav-buttons {
-  display: flex;
-  align-items: center;
-  gap: var(--ina-spacing-1);
-}
-
-/* Individual navigation buttons */
-.ina-pagination__nav-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 0 var(--ina-spacing-0-5);
-  border-radius: var(--ina-radius-md);
-  cursor: pointer;
-  user-select: none;
-  background-color: var(--ina-background-primary);
-  transition: border-color var(--ina-transition-base),
-    background-color var(--ina-transition-base),
-    color var(--ina-transition-base);
-}
-
-@media (min-width: 768px) {
-  .ina-pagination__nav-button {
-    min-width: 32px;
-    min-height: 32px;
-    border-radius: var(--ina-radius-lg);
-  }
-}
-
-/* Navigation button states */
-.ina-pagination__nav-button--enabled {
-  color: var(--ina-content-primary);
-}
-
-.ina-pagination__nav-button--enabled:hover {
-  background-color: var(--ina-background-secondary);
-}
-
-.ina-pagination__nav-button--enabled:focus {
-  outline: 1px solid var(--ina-content-primary);
-  outline-offset: 2px;
-}
-
-.ina-pagination__nav-button--enabled:active {
-  background-color: var(--ina-neutral-50);
-}
-
-.ina-pagination__nav-button--disabled {
-  color: var(--ina-neutral-400);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.ina-pagination__nav-button--disabled:hover {
-  background-color: transparent;
-}
-
-/* Page number buttons */
-.ina-pagination__page-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 0 var(--ina-spacing-0-5);
-  border: 1px solid transparent;
-  border-radius: var(--ina-radius-md);
-  cursor: pointer;
-  user-select: none;
-  color: var(--ina-content-primary);
-  font-size: inherit;
-  font-weight: inherit;
-  background-color: var(--ina-background-primary);
-  transition: border-color var(--ina-transition-base),
-    background-color var(--ina-transition-base),
-    color var(--ina-transition-base);
-}
-
-@media (min-width: 768px) {
-  .ina-pagination__page-button {
-    min-width: 32px;
-    min-height: 32px;
-    border-radius: var(--ina-radius-lg);
-  }
-}
-
-/* Active page button */
-.ina-pagination__page-button--active {
-  border-color: var(--ina-stroke-tertiary);
-  background-color: var(--ina-background-primary);
-}
-
-/* Enabled page button */
-.ina-pagination__page-button--enabled {
-  border-color: transparent;
-}
-
-.ina-pagination__page-button--enabled:hover {
-  border-color: var(--ina-stroke-primary);
-  background-color: var(--ina-background-tertiary);
-}
-
-.ina-pagination__page-button--enabled:focus {
-  outline: 2px solid var(--ina-primary-500);
-  outline-offset: 2px;
-}
-
-.ina-pagination__page-button--enabled:active {
-  background-color: var(--ina-neutral-200);
-}
-
-/* Disabled page buttons */
-.ina-pagination__page-button--disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-.ina-pagination__nav-button.ina-pagination__nav-button--disabled {
-  border-color: transparent;
-}
-
-.ina-pagination__page-button--disabled:hover {
-  border-color: transparent;
-  background-color: transparent;
-}
-
-/* Page size controls */
-.ina-pagination__page-size-container {
-  display: flex;
-  align-items: center;
-  gap: var(--ina-spacing-4);
-  margin-top: var(--ina-spacing-2);
-}
-
-@media (min-width: 768px) {
-  .ina-pagination__page-size-container {
-    margin-top: 0;
-    margin-right: var(--ina-spacing-12);
-  }
-}
-
-/* Full width: page size di kiri, nav di kanan */
-.ina-pagination--full-width .ina-pagination__page-size-container {
-  margin-top: 0; /* Gap 12px sudah diatur di parent */
-  margin-right: 0;
-  order: 2; /* Di bawah nav container pada mobile */
-}
-
-@media (min-width: 768px) {
-  .ina-pagination--full-width .ina-pagination__page-size-container {
-    order: 1; /* Di kiri pada desktop */
-    margin-right: 0;
-  }
-}
-
-/* Full width: nav container di kanan */
-.ina-pagination--full-width .ina-pagination__nav-container {
-  order: 1; /* Di atas page size container pada mobile */
-}
-
-@media (min-width: 768px) {
-  .ina-pagination--full-width .ina-pagination__nav-container {
-    order: 2; /* Di kanan pada desktop */
-  }
-}
-
-/* Page size label */
-.ina-pagination__page-size-label {
-  color: var(--ina-content-primary);
-  white-space: nowrap;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/* Page size select */
-.ina-pagination__page-size-select {
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-md);
-  padding: var(--ina-spacing-1) var(--ina-spacing-3);
-  padding-left: var(--ina-spacing-2);
-  background-color: var(--ina-background-primary);
-  color: var(--ina-content-primary);
-  font-size: inherit;
-  font-weight: inherit;
-  cursor: pointer;
-  outline: none;
-  transition: border-color var(--ina-transition-base),
-    box-shadow var(--ina-transition-base), opacity var(--ina-transition-base);
-}
-
-.ina-pagination__page-size-select:hover {
-  border-color: var(--ina-primary-400);
-}
-
-.ina-pagination__page-size-select:focus {
-  border-color: var(--ina-primary-500);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-.ina-pagination__page-size-select--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ina-pagination__page-size-select--disabled:hover {
-  border-color: var(--ina-stroke-primary);
-  box-shadow: none;
-}
-
-/* Icon styling for navigation buttons */
-.ina-pagination__nav-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-/* Loading state */
-.ina-pagination--loading .ina-pagination__nav-button,
-.ina-pagination--loading .ina-pagination__page-button {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.ina-pagination--loading .ina-pagination__nav-button:hover,
-.ina-pagination--loading .ina-pagination__page-button:hover {
-  background-color: transparent;
-}
-
-/* Compact variant */
-.ina-pagination--compact .ina-pagination__nav-button,
-.ina-pagination--compact .ina-pagination__page-button {
-  min-width: 20px;
-  min-height: 20px;
-  padding: 0 var(--ina-spacing-1);
-}
-
-.ina-pagination--compact .ina-pagination__nav-icon {
-  width: 14px;
-  height: 14px;
-}
-
-/* Spacious variant */
-.ina-pagination--spacious .ina-pagination__nav-button,
-.ina-pagination--spacious .ina-pagination__page-button {
-  min-width: 40px;
-  min-height: 40px;
-  padding: 0 var(--ina-spacing-2);
-}
-
-.ina-pagination--spacious .ina-pagination__nav-icon {
-  width: 18px;
-  height: 18px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 480px) {
-  .ina-pagination__nav-button,
-  .ina-pagination__page-button {
-    min-width: 28px;
-    min-height: 28px;
-  }
-
-  .ina-pagination__nav-icon {
-    width: 14px;
-    height: 14px;
-  }
-}
-
-/* Accessibility improvements */
-.ina-pagination__nav-button:focus,
-.ina-pagination__page-button:focus,
-.ina-pagination__page-size-select:focus {
-  /* Enhanced focus state */
-}
-
-/* High contrast mode */
-@media (prefers-contrast: high) {
-  .ina-pagination__nav-button,
-  .ina-pagination__page-button {
-    border-width: 2px;
-  }
-
-  .ina-pagination__nav-button--disabled,
-  .ina-pagination__page-button--disabled {
-    opacity: 0.3;
-  }
-
-  .ina-pagination__page-button--active {
-    border-width: 2px;
-    font-weight: var(--ina-font-bold);
-  }
-}
-
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-pagination__page-info {
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-pagination__nav-button--enabled {
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-pagination__nav-button--disabled {
-    color: var(--ina-content-dark-disabled);
-  }
-
-  .ina-pagination__page-button {
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-pagination__page-button--active {
-    border-color: var(--ina-content-dark-primary);
-  }
-
-  .ina-pagination__page-size-label {
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-pagination__page-size-select {
-    background-color: var(--ina-background-dark-primary);
-    border-color: var(--ina-stroke-primary-dark);
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-pagination__nav-button--enabled:hover,
-  .ina-pagination__page-button--enabled:hover {
-    background-color: var(--ina-neutral-800);
-  }
-} */
-
-/* Print styles */
-@media print {
-  .ina-pagination {
-    display: none;
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-pagination__nav-button,
-  .ina-pagination__page-button,
-  .ina-pagination__page-size-select {
-    transition: none;
-  }
-}