@idds/styles 1.2.11 → 1.2.13

package/src/components/select-option.css

@@ -1,217 +0,0 @@
-/* =========================== */
-/* SELECT OPTION COMPONENT     */
-/* =========================== */
-
-.ina-select-option {
-  /* Base container styling */
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--ina-spacing-2);
-}
-
-/* Label styling */
-.ina-select-option__label {
-  display: flex;
-  align-items: center;
-  font-size: var(--ina-font-sm);
-  color: var(--ina-primary-600);
-  font-weight: var(--ina-font-medium);
-}
-
-.ina-select-option__label-required {
-  margin-left: var(--ina-spacing-1);
-  color: var(--ina-error-500);
-  font-weight: var(--ina-font-bold);
-}
-
-/* Value display */
-.ina-select-option__value {
-  flex: 1;
-  font-size: var(--ina-font-sm);
-  color: var(--ina-primary-600);
-  font-weight: var(--ina-font-medium);
-}
-
-.ina-select-option__value--placeholder {
-  color: var(--ina-content-tertiary);
-}
-
-/* Bottom sheet container */
-.ina-select-option__bottom-sheet {
-  position: relative;
-  margin-bottom: var(--ina-spacing-8);
-}
-
-/* Header section */
-.ina-select-option__header {
-  position: sticky;
-  top: 0;
-  background-color: var(--ina-background-primary);
-  padding: var(--ina-spacing-4) var(--ina-spacing-4) var(--ina-spacing-3)
-    var(--ina-spacing-4);
-  border-bottom: 1px solid var(--ina-stroke-primary);
-}
-
-.ina-select-option__header-title {
-  display: flex;
-  align-items: center;
-  font-size: var(--ina-font-base);
-  font-weight: var(--ina-font-semibold);
-  color: var(--ina-primary-600);
-}
-
-.ina-select-option__header-back {
-  margin-right: var(--ina-spacing-2);
-  cursor: pointer;
-  color: var(--ina-primary-600);
-}
-
-.ina-select-option__header-back:hover {
-  color: var(--ina-primary-700);
-}
-
-/* Search section */
-.ina-select-option__search {
-  padding: var(--ina-spacing-4);
-}
-
-/* Options grid */
-.ina-select-option__options {
-  display: grid;
-  padding: var(--ina-spacing-4);
-  gap: var(--ina-spacing-2);
-}
-
-/* Option item */
-.ina-select-option__option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--ina-spacing-3);
-  border-radius: var(--ina-radius-md);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  border: 1px solid transparent;
-}
-
-.ina-select-option__option:hover {
-  background-color: var(--ina-background-secondary);
-}
-
-.ina-select-option__option--selected {
-  background-color: var(--ina-primary-50);
-  border-color: var(--ina-primary-200);
-}
-
-.ina-select-option__option-label {
-  font-size: var(--ina-font-sm);
-  color: var(--ina-content-primary);
-  font-weight: var(--ina-font-medium);
-}
-
-.ina-select-option__option-check {
-  color: var(--ina-primary-600);
-  font-size: var(--ina-font-lg);
-}
-
-/* Empty state */
-.ina-select-option__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ina-spacing-4);
-  padding: var(--ina-spacing-8);
-  text-align: center;
-}
-
-.ina-select-option__empty-title {
-  font-size: var(--ina-font-lg);
-  font-weight: var(--ina-font-bold);
-  color: var(--ina-content-secondary);
-}
-
-.ina-select-option__empty-description {
-  font-size: var(--ina-font-sm);
-  color: var(--ina-content-secondary);
-  line-height: 1.5;
-}
-
-/* Responsive design */
-@media (max-width: 640px) {
-  .ina-select-option__label {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
-  }
-
-  .ina-select-option__value {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
-  }
-
-  .ina-select-option__header-title {
-    font-size: var(--ina-font-sm); /* Turun dari base ke sm */
-  }
-
-  .ina-select-option__option-label {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
-  }
-
-  .ina-select-option__empty-title {
-    font-size: var(--ina-font-base); /* Turun dari lg ke base */
-  }
-
-  .ina-select-option__empty-description {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
-  }
-}
-
-@media (min-width: 640px) {
-  .ina-select-option__options {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 768px) {
-  .ina-select-option__options {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .ina-select-option__options {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-select-option__header {
-    background-color: var(--ina-background-primary);
-    border-bottom-color: var(--ina-stroke-primary);
-  }
-
-  .ina-select-option__option:hover {
-    background-color: var(--ina-background-secondary);
-  }
-
-  .ina-select-option__option--selected {
-    background-color: var(--ina-primary-50);
-    border-color: var(--ina-primary-200);
-  }
-} */
-
-[data-theme='dark'] {
-  .ina-select-option__header {
-    background-color: var(--ina-background-primary);
-    border-bottom-color: var(--ina-stroke-primary);
-  }
-
-  .ina-select-option__option:hover {
-    background-color: var(--ina-background-secondary);
-  }
-
-  .ina-select-option__option--selected {
-    background-color: var(--ina-primary-50);
-    border-color: var(--ina-primary-200);
-  }
-}

package/src/components/single-file-upload.css

@@ -1,186 +0,0 @@
-/**
- * Single File Upload Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- * Sesuai dengan design Figma
- */
-
-.ina-single-file-upload {
-  width: 300px;
-  height: 72px;
-  position: relative;
-}
-
-.ina-single-file-upload__container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-rounded-lg, 8px);
-  background: var(--ina-background-primary, #fff);
-  padding: 12px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-}
-
-.ina-single-file-upload__container:hover:not(
-    .ina-single-file-upload__container--disabled
-  ) {
-  border-color: var(--ina-guide-500, #0968f6);
-}
-
-.ina-single-file-upload__container--active {
-  border: 1px solid var(--ina-guide-500, #0968f6);
-  box-shadow: 0 0 6px 0 rgba(9, 104, 246, 0.1),
-    0 0 4px 6px rgba(9, 104, 246, 0.04);
-}
-
-.ina-single-file-upload__container--disabled {
-  background: var(--ina-background-secondary);
-  border-color: var(--ina-stroke-primary);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.ina-single-file-upload__input {
-  display: none;
-}
-
-/* Default State - Upload Icon */
-.ina-single-file-upload__icon-wrapper {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.ina-single-file-upload__icon-wrapper--default {
-  color: var(--ina-content-primary);
-}
-
-.ina-single-file-upload__icon-wrapper--disabled {
-  color: var(--ina-content-tertiary);
-}
-
-/* Success State - File Icon */
-.ina-single-file-upload__icon-wrapper--file {
-  width: 32px;
-  height: 32px;
-  min-width: 32px;
-  min-height: 32px;
-  padding: 8px;
-  background: var(--ina-background-secondary);
-  border-radius: var(--ina-rounded-lg, 8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.ina-single-file-upload__file-icon {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-/* Content Area */
-.ina-single-file-upload__content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.ina-single-file-upload__title {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  color: var(--ina-content-primary);
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ina-single-file-upload__description {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  color: var(--ina-content-secondary);
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ina-single-file-upload__container--disabled .ina-single-file-upload__title,
-.ina-single-file-upload__container--disabled
-  .ina-single-file-upload__description {
-  color: var(--ina-content-tertiary);
-}
-
-/* Progress State */
-.ina-single-file-upload__progress {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.ina-single-file-upload__progress-bar {
-  width: 100%;
-  height: 4px;
-  background: var(--ina-background-secondary);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.ina-single-file-upload__progress-fill {
-  height: 100%;
-  background: var(--ina-guide-500, #0968f6);
-  transition: width 0.3s ease;
-}
-
-.ina-single-file-upload__progress-text {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  color: var(--ina-content-secondary);
-  margin: 0;
-}
-
-/* Delete Button */
-.ina-single-file-upload__delete-button {
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
-  min-height: 20px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--ina-negative-500);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: color 0.2s ease;
-}
-
-.ina-single-file-upload__delete-button:hover {
-  color: var(--ina-negative-600, var(--ina-red-600));
-}
-
-.ina-single-file-upload__delete-button:focus-visible {
-  outline: 2px solid var(--ina-guide-500, #0968f6);
-  outline-offset: 2px;
-  border-radius: 2px;
-}