@idds/styles 1.2.10 → 1.2.12

package/src/components/progress-bar.css

@@ -1,447 +0,0 @@
-/**
- * ProgressBar Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- */
-
-.ina-progress-bar {
-  /* Base container styling */
-  position: relative;
-  width: 100%;
-  background-color: var(--ina-neutral-200);
-  border-radius: var(--ina-radius-full);
-  overflow: hidden;
-  transition: opacity var(--ina-transition-base);
-}
-
-.ina-progress-bar--hidden {
-  opacity: 0;
-  visibility: hidden;
-}
-
-/* Height variants */
-.ina-progress-bar--height-sm {
-  height: 2px;
-}
-
-.ina-progress-bar--height-md {
-  height: 4px;
-}
-
-.ina-progress-bar--height-lg {
-  height: 6px;
-}
-
-/* Progress fill */
-.ina-progress-bar__fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 0%;
-  border-radius: inherit;
-  transition: width var(--ina-transition-duration-1000) ease-out;
-  background-color: var(--ina-primary-500);
-}
-
-/* Variant colors */
-.ina-progress-bar__fill--primary {
-  background-color: var(--ina-primary-500);
-}
-
-.ina-progress-bar__fill--secondary {
-  background-color: var(--ina-neutral-500);
-}
-
-.ina-progress-bar__fill--success {
-  background-color: var(--ina-positive-500);
-}
-
-.ina-progress-bar__fill--warning {
-  background-color: var(--ina-warning-500);
-}
-
-.ina-progress-bar__fill--error {
-  background-color: var(--ina-negative-500);
-}
-
-/* Shimmer effect */
-.ina-progress-bar__shimmer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.3),
-    transparent
-  );
-  animation: shimmer 2s infinite linear;
-  opacity: 0;
-  transition: opacity var(--ina-transition-base);
-}
-
-.ina-progress-bar--shimmer .ina-progress-bar__shimmer {
-  opacity: 1;
-}
-
-@keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-/* Animated indicator */
-.ina-progress-bar__indicator {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 32px;
-  border-radius: inherit;
-  opacity: 0.8;
-  transform: translateX(-100%);
-  transition: left var(--ina-transition-duration-1000) ease-out;
-  animation: pulse 1.5s infinite;
-}
-
-.ina-progress-bar__indicator--primary {
-  background-color: var(--ina-primary-500);
-}
-
-.ina-progress-bar__indicator--secondary {
-  background-color: var(--ina-neutral-500);
-}
-
-.ina-progress-bar__indicator--success {
-  background-color: var(--ina-positive-500);
-}
-
-.ina-progress-bar__indicator--warning {
-  background-color: var(--ina-warning-500);
-}
-
-.ina-progress-bar__indicator--error {
-  background-color: var(--ina-negative-500);
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 0.6;
-  }
-}
-
-/* Striped variant */
-.ina-progress-bar__fill--striped {
-  background-image: linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.15) 25%,
-    transparent 25%,
-    transparent 50%,
-    rgba(255, 255, 255, 0.15) 50%,
-    rgba(255, 255, 255, 0.15) 75%,
-    transparent 75%,
-    transparent
-  );
-  background-size: 20px 20px;
-  animation: moveStripes 1s linear infinite;
-}
-
-@keyframes moveStripes {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 20px 0;
-  }
-}
-
-/* Size variants with more height options */
-.ina-progress-bar--height-xs {
-  height: 1px;
-}
-
-.ina-progress-bar--height-xl {
-  height: 8px;
-}
-
-.ina-progress-bar--height-2xl {
-  height: 12px;
-}
-
-/* Custom duration variants */
-.ina-progress-bar--duration-fast .ina-progress-bar__fill {
-  transition-duration: var(--ina-transition-duration-200);
-}
-
-.ina-progress-bar--duration-medium .ina-progress-bar__fill {
-  transition-duration: var(--ina-transition-duration-500);
-}
-
-.ina-progress-bar--duration-slow .ina-progress-bar__fill {
-  transition-duration: var(--ina-transition-duration-2000);
-}
-
-/* Loading state animation */
-.ina-progress-bar--loading {
-  animation: indeterminate 2s infinite linear;
-}
-
-.ina-progress-bar--loading .ina-progress-bar__fill {
-  position: relative;
-  width: 30%;
-  background: linear-gradient(
-    90deg,
-    var(--ina-primary-500) 0%,
-    var(--ina-primary-400) 50%,
-    var(--ina-primary-500) 100%
-  );
-  background-size: 200% 100%;
-  animation: loading-shift 1s infinite linear;
-}
-
-@keyframes indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(400%);
-  }
-}
-
-@keyframes loading-shift {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* Gradient variants */
-.ina-progress-bar__fill--gradient-primary {
-  background: linear-gradient(
-    90deg,
-    var(--ina-primary-400),
-    var(--ina-primary-500),
-    var(--ina-primary-600)
-  );
-}
-
-.ina-progress-bar__fill--gradient-success {
-  background: linear-gradient(
-    90deg,
-    var(--ina-positive-400),
-    var(--ina-positive-500),
-    var(--ina-positive-600)
-  );
-}
-
-.ina-progress-bar__fill--gradient-warning {
-  background: linear-gradient(
-    90deg,
-    var(--ina-warning-400),
-    var(--ina-warning-500),
-    var(--ina-warning-600)
-  );
-}
-
-.ina-progress-bar__fill--gradient-error {
-  background: linear-gradient(
-    90deg,
-    var(--ina-negative-400),
-    var(--ina-negative-500),
-    var(--ina-negative-600)
-  );
-}
-
-/* Status-based styling */
-.ina-progress-bar__fill--complete {
-  background-color: var(--ina-positive-500);
-}
-
-.ina-progress-bar__fill--in-progress {
-  animation: breathing 2s infinite ease-in-out;
-}
-
-@keyframes breathing {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
-
-/* Circular variant */
-.ina-progress-bar--circular {
-  width: 120px;
-  height: 120px;
-  border-radius: 50%;
-  background: conic-gradient(
-    var(--ina-primary-500) 0deg,
-    var(--ina-neutral-200) 0deg
-  );
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.ina-progress-bar--circular .ina-progress-bar__fill {
-  display: none;
-}
-
-.ina-progress-bar__circular-content {
-  position: absolute;
-  inset: 20%;
-  background-color: var(--ina-background-primary);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--ina-font-xs);
-  font-weight: var(--ina-font-medium);
-  color: var(--ina-content-primary);
-}
-
-/* Progress label */
-.ina-progress-bar__label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: var(--ina-font-xs);
-  font-weight: var(--ina-font-medium);
-  color: var(--ina-content-primary);
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-/* Skeleton variant */
-.ina-progress-bar--skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--ina-neutral-200) 25%,
-    var(--ina-neutral-300) 50%,
-    var(--ina-neutral-200) 75%
-  );
-  background-size: 200% 100%;
-  animation: skeleton 1.5s infinite ease-out;
-}
-
-.ina-progress-bar--skeleton .ina-progress-bar__fill {
-  display: none;
-}
-
-@keyframes skeleton {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-progress-bar {
-    background-color: var(--ina-neutral-700);
-  }
-
-  .ina-progress-bar__fill--primary {
-    background-color: var(--ina-primary-400);
-  }
-
-  .ina-progress-bar__fill--secondary {
-    background-color: var(--ina-neutral-400);
-  }
-
-  .ina-progress-bar__fill--success {
-    background-color: var(--ina-positive-400);
-  }
-
-  .ina-progress-bar__fill--warning {
-    background-color: var(--ina-warning-400);
-  }
-
-  .ina-progress-bar__fill--error {
-    background-color: var(--ina-negative-400);
-  }
-
-  .ina-progress-bar__shimmer {
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.1),
-      transparent
-    );
-  }
-
-  .ina-progress-bar__circular-content {
-    background-color: var(--ina-background-dark-primary);
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-progress-bar__label {
-    color: var(--ina-content-dark-primary);
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
-  }
-
-  .ina-progress-bar--skeleton {
-    background: linear-gradient(
-      90deg,
-      var(--ina-neutral-700) 25%,
-      var(--ina-neutral-600) 50%,
-      var(--ina-neutral-700) 75%
-    );
-  }
-} */
-
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .ina-progress-bar--circular {
-    width: 80px;
-    height: 80px;
-  }
-
-  .ina-progress-bar__circular-content {
-    font-size: var(--ina-font-xs);
-  }
-}
-
-/* Accessibility improvements */
-.ina-progress-bar[aria-hidden='true'] {
-  visibility: hidden;
-}
-
-/* High contrast mode */
-@media (prefers-contrast: high) {
-  .ina-progress-bar {
-    border: 1px solid var(--ina-content-primary);
-  }
-
-  .ina-progress-bar__fill {
-    border: 1px solid var(--ina-background-primary);
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-progress-bar__fill,
-  .ina-progress-bar__indicator,
-  .ina-progress-bar__shimmer,
-  .ina-progress-bar--skeleton,
-  .ina-progress-bar--loading,
-  .ina-progress-bar--loading .ina-progress-bar__fill {
-    animation: none;
-    transition: none;
-  }
-}

package/src/components/radio-input.css

@@ -1,277 +0,0 @@
-/**
- * RadioInput Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- */
-
-.ina-radio-input {
-  /* Base container styling */
-  display: flex;
-  flex-direction: column;
-  gap: var(--ina-spacing-2);
-}
-
-/* Label styling */
-.ina-radio-input__main-label {
-  display: block;
-  font-size: var(--ina-font-sm);
-  color: var(--ina-content-color-181717);
-  font-weight: var(--ina-font-medium);
-}
-
-/* Radio group container */
-.ina-radio-input__group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ina-spacing-2);
-}
-
-/* Individual radio option */
-.ina-radio-input__option {
-  display: flex;
-  align-items: center;
-  gap: var(--ina-spacing-2);
-  cursor: pointer;
-  transition: background-color var(--ina-transition-base);
-  padding: var(--ina-spacing-2);
-  border-radius: var(--ina-radius-md);
-}
-
-.ina-radio-input__option:hover {
-  background-color: var(--ina-neutral-50);
-}
-
-.ina-radio-input__option--disabled {
-  cursor: not-allowed;
-}
-
-.ina-radio-input__option--disabled:hover {
-  background-color: transparent;
-}
-
-/* Radio input field - Default styling */
-.ina-radio-input__field {
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border: 1px solid var(--ina-stroke-tertiary, #141414);
-  border-radius: 50%;
-  background-color: var(--ina-background-primary, var(--ina-neutral-25));
-  cursor: pointer;
-  position: relative;
-  transition: all var(--ina-transition-base);
-  flex-shrink: 0;
-}
-
-/* Hover state - Add drop shadow */
-.ina-radio-input__field:hover:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
-}
-
-/* Focus state - Add drop shadow */
-.ina-radio-input__field:focus-visible:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
-}
-
-/* Active state - Add drop shadow */
-.ina-radio-input__field:active:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
-}
-
-/* Selected state */
-.ina-radio-input__field:checked {
-  border-color: var(--ina-stroke-tertiary, #141414);
-  background-color: var(--ina-background-primary, var(--ina-neutral-25));
-}
-
-.ina-radio-input__field:checked::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  background-color: var(--ina-stroke-tertiary, #141414);
-}
-
-/* Checked + Hover/Focus/Active - Keep drop shadow */
-.ina-radio-input__field:checked:hover:not(:disabled),
-.ina-radio-input__field:checked:focus-visible:not(:disabled),
-.ina-radio-input__field:checked:active:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
-}
-
-/* Disabled states */
-.ina-radio-input__field:disabled {
-  border-color: var(--ina-neutral-200, #e5e5e5);
-  background-color: var(--ina-background-secondary, var(--ina-neutral-50));
-  cursor: not-allowed;
-  opacity: 1;
-  filter: none;
-}
-
-/* Disabled + Checked state - Higher specificity */
-.ina-radio-input__field:disabled:checked {
-  border-color: var(--ina-neutral-200, #e5e5e5) !important;
-  background-color: var(
-    --ina-background-secondary,
-    var(--ina-neutral-50)
-  ) !important;
-  filter: none;
-}
-
-.ina-radio-input__field:disabled:checked::after {
-  content: '' !important;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 11px;
-  height: 11px;
-  border-radius: 50%;
-  background-color: var(--ina-neutral-200, #e5e5e5);
-}
-
-/* Radio option label */
-.ina-radio-input__option-label {
-  font-size: var(--ina-font-sm);
-  color: #000000;
-  cursor: pointer;
-  user-select: none;
-  flex: 1;
-  line-height: 1.5;
-}
-
-.ina-radio-input__option-label--disabled {
-  cursor: not-allowed;
-}
-
-/* Size variants */
-/* .ina-radio-input--size-sm .ina-radio-input__main-label {
-  font-size: var(--ina-font-xs);
-}
-
-.ina-radio-input--size-sm .ina-radio-input__option-label {
-  font-size: var(--ina-font-xs);
-}
-
-.ina-radio-input--size-sm .ina-radio-input__field {
-  width: 16px;
-  height: 16px;
-} */
-
-/* .ina-radio-input--size-lg .ina-radio-input__main-label {
-  font-size: var(--ina-font-base);
-}
-
-.ina-radio-input--size-lg .ina-radio-input__option-label {
-  font-size: var(--ina-font-base);
-}
-
-.ina-radio-input--size-lg .ina-radio-input__field {
-  width: 24px;
-  height: 24px;
-} */
-
-/* Orientation variants */
-.ina-radio-input--orientation-horizontal .ina-radio-input__group {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--ina-spacing-4);
-  align-items: center;
-}
-
-/* Status variants */
-.ina-radio-input__main-label--required::after {
-  content: '*';
-  color: var(--ina-danger-5);
-  margin-left: var(--ina-spacing-1);
-}
-
-/* Focus indicators */
-.ina-radio-input__field:focus-visible {
-  outline: 2px solid var(--ina-stroke-tertiary, #141414);
-  outline-offset: 2px;
-}
-
-/* Error state */
-.ina-radio-input--error .ina-radio-input__main-label {
-  color: #dc2626;
-}
-
-.ina-radio-input--error .ina-radio-input__field {
-  border-color: #dc2626;
-}
-
-.ina-radio-input--error .ina-radio-input__field:focus-visible {
-  outline-color: #dc2626;
-}
-
-/* Loading state */
-.ina-radio-input--loading .ina-radio-input__option {
-  cursor: not-allowed;
-}
-
-.ina-radio-input--loading .ina-radio-input__field {
-  cursor: not-allowed;
-}
-
-/* Help text */
-.ina-radio-input__help-text {
-  font-size: var(--ina-font-xs);
-  color: #666666;
-  margin-top: var(--ina-spacing-1);
-}
-
-.ina-radio-input__help-text--error {
-  color: #dc2626;
-}
-
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .ina-radio-input__main-label {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
-  }
-
-  .ina-radio-input__option-label {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
-  }
-
-  .ina-radio-input__help-text {
-    font-size: var(--ina-font-xs); /* Tetap xs */
-  }
-
-  .ina-radio-input--orientation-horizontal .ina-radio-input__group {
-    flex-direction: column;
-    gap: var(--ina-spacing-2);
-  }
-}
-
-/* Dark mode support - handled by CSS variables in css-variables.css */
-
-/* Accessibility improvements */
-.ina-radio-input__field + .ina-radio-input__option-label {
-  /* Improve tap target size for touch devices */
-  padding: var(--ina-spacing-1) var(--ina-spacing-2);
-  margin: calc(var(--ina-spacing-1) * -1) calc(var(--ina-spacing-2) * -1);
-}
-
-/* High contrast mode */
-@media (prefers-contrast: high) {
-  .ina-radio-input__field {
-    border-width: 3px;
-  }
-
-  .ina-radio-input__field:checked {
-    border-width: 3px;
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-radio-input__option,
-  .ina-radio-input__field {
-    transition: none;
-  }
-}