@idds/styles 1.2.11 → 1.2.13

package/src/components/spinner.css

@@ -1,450 +0,0 @@
-/**
- * Spinner Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- */
-
-.ina-spinner {
-  /* Base container styling */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: var(--ina-spacing-2);
-}
-
-/* Spinner element */
-.ina-spinner__element {
-  border-radius: var(--ina-radius-full);
-  animation: spinnerSpin 1s linear infinite;
-  border-style: solid;
-}
-
-/* Default sizes */
-.ina-spinner__element--size-xs {
-  width: 16px;
-  height: 16px;
-  border-width: 2px;
-}
-
-.ina-spinner__element--size-sm {
-  width: 24px;
-  height: 24px;
-  border-width: 2px;
-}
-
-.ina-spinner__element--size-md {
-  width: 32px;
-  height: 32px;
-  border-width: 4px;
-}
-
-.ina-spinner__element--size-lg {
-  width: 48px;
-  height: 48px;
-  border-width: 4px;
-}
-
-.ina-spinner__element--size-xl {
-  width: 64px;
-  height: 64px;
-  border-width: 6px;
-}
-
-@keyframes spinnerSpin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* Color variants */
-.ina-spinner__element--color-primary {
-  border-color: var(--ina-neutral-300) !important;
-  border-top-color: var(--ina-primary-500) !important;
-}
-
-.ina-spinner__element--color-secondary {
-  border-color: var(--ina-neutral-300);
-  border-top-color: var(--ina-neutral-500);
-}
-
-.ina-spinner__element--color-success {
-  border-color: var(--ina-neutral-300);
-  border-top-color: var(--ina-positive-500);
-}
-
-.ina-spinner__element--color-error {
-  border-color: var(--ina-neutral-300);
-  border-top-color: var(--ina-negative-500);
-}
-
-.ina-spinner__element--color-warning {
-  border-color: var(--ina-neutral-300);
-  border-top-color: var(--ina-warning-500);
-}
-
-.ina-spinner__element--color-info {
-  border-color: var(--ina-neutral-300);
-  border-top-color: var(--ina-info-500);
-}
-
-.ina-spinner__element--color-inherit {
-  border-color: currentColor;
-  border-top-color: transparent;
-}
-
-/* Custom track color */
-.ina-spinner__element--track-gray {
-  border-color: var(--ina-neutral-300);
-}
-
-.ina-spinner__element--track-light {
-  border-color: var(--ina-neutral-200);
-}
-
-.ina-spinner__element--track-dark {
-  border-color: var(--ina-neutral-500);
-}
-
-/* Border width variants */
-.ina-spinner__element--border-thin {
-  border-width: 2px;
-}
-
-.ina-spinner__element--border-medium {
-  border-width: 3px;
-}
-
-.ina-spinner__element--border-thick {
-  border-width: 4px;
-}
-
-.ina-spinner__element--border-heavy {
-  border-width: 6px;
-}
-
-/* Text content */
-.ina-spinner__title {
-  font-size: var(--ina-font-base);
-  font-weight: var(--ina-font-semibold);
-  color: var(--ina-content-primary);
-}
-
-.ina-spinner__subtitle {
-  font-size: var(--ina-font-sm);
-  color: var(--ina-content-secondary);
-}
-
-/* Spinner variants */
-.ina-spinner--variant-tail {
-  gap: var(--ina-spacing-1);
-}
-
-.ina-spinner--variant-tail .ina-spinner__element {
-  animation: spinnerTailSpin 0.8s ease-in-out infinite;
-}
-
-@keyframes spinnerTailSpin {
-  0%,
-  100% {
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  50% {
-    transform: rotate(180deg);
-    opacity: 0.7;
-  }
-}
-
-.ina-spinner--variant-dots {
-  flex-direction: row;
-  gap: var(--ina-spacing-1);
-}
-
-.ina-spinner--variant-dots .ina-spinner__element {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--ina-radius-full);
-  animation: spinnerDots 1.4s ease-in-out infinite both;
-  border: none;
-}
-
-.ina-spinner--variant-dots .ina-spinner__element:nth-child(1) {
-  animation-delay: -0.32s;
-}
-
-.ina-spinner--variant-dots .ina-spinner__element:nth-child(2) {
-  animation-delay: -0.16s;
-}
-
-.ina-spinner__element--dot-1 {
-  animation-delay: -0.32s;
-}
-
-.ina-spinner__element--dot-2 {
-  animation-delay: -0.16s;
-}
-
-.ina-spinner__element--dot-3 {
-  animation-delay: 0s;
-}
-
-@keyframes spinnerDots {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-
-.ina-spinner--variant-bars {
-  flex-direction: row;
-  gap: var(--ina-spacing-1);
-  align-items: center;
-}
-
-.ina-spinner--variant-bars .ina-spinner__element {
-  width: 4px;
-  height: 40px;
-  border: none;
-  background-color: currentColor;
-  animation: spinnerBars 1.2s ease-in-out infinite;
-}
-
-.ina-spinner--variant-bars .ina-spinner__element:nth-child(1) {
-  animation-delay: -1.1s;
-}
-
-.ina-spinner--variant-bars .ina-spinner__element:nth-child(2) {
-  animation-delay: -1s;
-}
-
-.ina-spinner--variant-bars .ina-spinner__element:nth-child(3) {
-  animation-delay: -0.9s;
-}
-
-.ina-spinner--variant-bars .ina-spinner__element:nth-child(4) {
-  animation-delay: -0.8s;
-}
-
-@keyframes spinnerBars {
-  0%,
-  40%,
-  100% {
-    transform: scaleY(0.4);
-  }
-  20% {
-    transform: scaleY(1);
-  }
-}
-
-/* Speed variants */
-.ina-spinner--speed-slow .ina-spinner__element {
-  animation-duration: 2s;
-}
-
-.ina-spinner--speed-normal .ina-spinner__element {
-  animation-duration: 1s;
-}
-
-.ina-spinner--speed-fast .ina-spinner__element {
-  animation-duration: 0.5s;
-}
-
-/* Size variants dengan responsive adjustments */
-.ina-spinner--size-responsive .ina-spinner__element {
-  width: 32px;
-  height: 32px;
-  border-width: 4px;
-}
-
-@media (max-width: 640px) {
-  .ina-spinner--size-responsive .ina-spinner__element {
-    width: 24px;
-    height: 24px;
-    border-width: 3px;
-  }
-
-  .ina-spinner__title {
-    font-size: var(--ina-font-sm); /* Turun dari base ke sm */
-  }
-
-  .ina-spinner__subtitle {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
-  }
-}
-
-/* Spinner-only mode (no text) */
-.ina-spinner--spinner-only {
-  gap: 0;
-}
-
-.ina-spinner--spinner-only .ina-spinner__title,
-.ina-spinner--spinner-only .ina-spinner__subtitle {
-  display: none;
-}
-
-/* Loading state */
-.ina-spinner--loading {
-  pointer-events: none;
-  user-select: none;
-}
-
-/* Background variants */
-.ina-spinner--bg-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(4px);
-  z-index: 1000;
-}
-
-.ina-spinner--bg-card {
-  background-color: var(--ina-background-primary);
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-lg);
-  padding: var(--ina-spacing-8);
-  box-shadow: var(--ina-shadow-md);
-}
-
-/* Custom positioning */
-.ina-spinner--position-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.ina-spinner--position-top {
-  position: absolute;
-  top: var(--ina-spacing-4);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.ina-spinner--position-bottom {
-  position: absolute;
-  bottom: var(--ina-spacing-4);
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-spinner__title {
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-spinner__subtitle {
-    color: var(--ina-content-dark-secondary);
-  }
-
-  .ina-spinner--bg-overlay {
-    background-color: rgba(0, 0, 0, 0.8);
-  }
-
-  .ina-spinner--bg-card {
-    background-color: var(--ina-background-dark-primary);
-    border-color: var(--ina-stroke-primary-dark);
-  }
-} */
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-spinner__element,
-  .ina-spinner--variant-tail .ina-spinner__element,
-  .ina-spinner--variant-dots .ina-spinner__element,
-  .ina-spinner--variant-bars .ina-spinner__element {
-    animation: none;
-  }
-
-  .ina-spinner__element {
-    /* Show static spinner */
-    opacity: 0.7;
-  }
-
-  .ina-spinner--variant-dots .ina-spinner__element {
-    /* Show static dots */
-    opacity: 0.5;
-  }
-}
-
-/* High contrast mode */
-@media (prefers-contrast: high) {
-  .ina-spinner__element {
-    border-width: 3px;
-  }
-
-  .ina-spinner__title {
-    font-weight: var(--ina-font-bold);
-  }
-}
-
-/* Accessibility improvements */
-.ina-spinner[aria-hidden='true'] {
-  visibility: hidden;
-}
-
-.ina-spinner__sr-text {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Print styles */
-@media print {
-  .ina-spinner {
-    display: none;
-  }
-}
-
-/* Pulse animation alternative */
-.ina-spinner__element--animation-pulse {
-  animation: spinnerPulse 2s ease-in-out infinite;
-}
-
-@keyframes spinnerPulse {
-  0%,
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.5;
-    transform: scale(0.95);
-  }
-}
-
-/* Wave animation */
-.ina-spinner__element--animation-wave {
-  animation: spinnerWave 2s ease-in-out infinite;
-}
-
-@keyframes spinnerWave {
-  0%,
-  100% {
-    transform: rotate(0deg);
-    opacity: 1;
-  }
-  25% {
-    transform: rotate(90deg);
-    opacity: 0.7;
-  }
-  50% {
-    transform: rotate(180deg);
-    opacity: 0.9;
-  }
-  75% {
-    transform: rotate(270deg);
-    opacity: 0.7;
-  }
-}

package/src/components/stepper.css

@@ -1,260 +0,0 @@
-.ina-stepper {
-  display: flex;
-  position: relative;
-}
-
-/* Horizontal Layout */
-.ina-stepper--horizontal {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-height: 54px;
-}
-.ina-stepper--vertical .ina-stepper__separator {
-  position: relative;
-  left: 12px;
-}
-
-/* Vertical Layout */
-.ina-stepper--vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  height: 100%;
-}
-
-/* Responsive: Horizontal stepper becomes vertical on mobile */
-.ina-stepper--horizontal-responsive {
-  flex-direction: row;
-}
-
-@media (max-width: 767px) {
-  .ina-stepper--horizontal-responsive {
-    flex-direction: column;
-    align-items: flex-start;
-    height: 100%;
-  }
-
-  .ina-stepper--horizontal-responsive .ina-stepper__item {
-    width: 100%;
-    align-items: flex-start;
-  }
-
-  .ina-stepper--horizontal-responsive .ina-stepper__separator {
-    width: 2px;
-    min-height: 72px;
-    margin: 0;
-    flex-grow: 0;
-    align-self: flex-start;
-    /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
-    /* Separator width is 2px, so margin-left: 12px - 1px = 11px */
-    position: relative;
-    left: 12px;
-    bottom: 0;
-  }
-  .ina-stepper--horizontal-responsive .ina-stepper__label {
-    position: absolute;
-    left: 2rem;
-    top: 0.125rem;
-  }
-
-  .ina-stepper--horizontal-responsive .ina-stepper__item:last-child {
-    margin-bottom: 0;
-  }
-}
-
-/* Step Item */
-.ina-stepper__item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-  flex-shrink: 0;
-  padding: 0;
-}
-
-.ina-stepper--vertical .ina-stepper__item {
-  flex-direction: row;
-  text-align: left;
-  align-items: flex-start;
-  padding: 0;
-  width: 100%;
-  height: 24px;
-  min-height: 24px;
-  max-height: 24px;
-  overflow: visible;
-}
-.ina-stepper--vertical .ina-stepper__separator {
-  min-height: 72px;
-}
-
-.ina-stepper--vertical .ina-stepper__item:last-child {
-  margin-bottom: 0;
-}
-
-/* Icon Wrapper */
-.ina-stepper__icon-wrapper {
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
-  border-radius: var(--ina-rounded-lg, 8px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 500;
-  transition: background-color 0.2s ease, border-color 0.2s ease,
-    color 0.2s ease;
-  border: 1px solid var(--ina-stroke-primary);
-  color: var(--ina-content-tertiary);
-  background-color: var(--ina-background-secondary);
-}
-
-.ina-stepper--vertical .ina-stepper__icon-wrapper {
-  margin-right: 0.75rem;
-}
-
-.ina-stepper__step-number {
-  color: inherit;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.ina-stepper__check-icon {
-  color: inherit;
-  stroke: currentColor;
-  width: 16px;
-  height: 16px;
-}
-
-/* Label */
-.ina-stepper__label {
-  font-size: var(--ina-font-xs);
-  color: var(--ina-content-primary);
-  transition: color 0.2s ease;
-  white-space: nowrap;
-  position: absolute;
-  top: 2rem;
-}
-.ina-stepper--vertical .ina-stepper__label {
-  position: absolute;
-  left: 2rem;
-  top: 0.25rem;
-}
-
-.ina-stepper--vertical .ina-stepper__label {
-  margin-top: 0;
-  flex-grow: 1;
-}
-
-/* Separator */
-.ina-stepper__separator {
-  flex-grow: 1;
-  width: 2px;
-  height: 2px;
-  background-color: var(--ina-stroke-primary);
-  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px */
-  /* Separator width/height is 2px, so we need to position it so its center aligns with icon center */
-  align-self: center;
-  position: relative;
-  z-index: 0;
-  transition: background-color 0.2s ease;
-}
-
-.ina-stepper--vertical .ina-stepper__separator {
-  width: 2px;
-  height: 2rem;
-  flex-grow: 0;
-  align-self: flex-start;
-  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
-  /* Separator width is 2px, so we need to position it so its center aligns with icon center */
-  /* margin-left: 12px (icon center) - 1px (half separator) = 11px */
-  position: relative;
-  left: 12px;
-}
-
-/* States */
-/* Active State */
-.ina-stepper__item--active .ina-stepper__icon-wrapper {
-  border-color: var(--ina-guide-500);
-  color: var(--ina-guide-500);
-  background-color: var(--ina-guide-50);
-}
-
-/* .ina-stepper__item--active .ina-stepper__label {
-  color: var(--ina-guide-500);
-  font-weight: 500;
-} */
-
-/* Done/Completed State */
-.ina-stepper__item--completed .ina-stepper__icon-wrapper {
-  border-color: var(--ina-positive-600);
-  color: var(--ina-positive-600);
-  background-color: var(--ina-positive-50);
-}
-
-/* .ina-stepper__item--completed .ina-stepper__label {
-  color: var(--ina-positive-600);
-} */
-
-/* Inactive State (default) */
-.ina-stepper__item:not(.ina-stepper__item--active):not(
-    .ina-stepper__item--completed
-  ):not(.ina-stepper__item--error)
-  .ina-stepper__icon-wrapper {
-  border-color: var(--ina-stroke-primary);
-  color: var(--ina-content-tertiary);
-  background-color: var(--ina-background-secondary);
-}
-
-.ina-stepper__item:not(.ina-stepper__item--active):not(
-    .ina-stepper__item--completed
-  ):not(.ina-stepper__item--error)
-  .ina-stepper__label {
-  color: var(--ina-content-tertiary);
-}
-
-/* Error State */
-.ina-stepper__item--error .ina-stepper__icon-wrapper {
-  border-color: var(--ina-negative-500);
-  color: var(--ina-negative-500);
-  background-color: var(--ina-negative-50);
-}
-
-/* .ina-stepper__item--error .ina-stepper__label {
-  color: var(--ina-negative-500);
-} */
-
-.ina-stepper__item--clickable {
-  cursor: pointer;
-}
-
-.ina-stepper__item--clickable:hover .ina-stepper__icon-wrapper {
-  border-color: var(--ina-semantic-info);
-}
-
-.ina-stepper__item--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Separator States */
-/* Completed separator - positive-600 */
-.ina-stepper__separator--completed {
-  background-color: var(--ina-positive-600);
-  width: 2px;
-  height: 2px;
-}
-
-.ina-stepper--vertical .ina-stepper__separator--completed {
-  width: 2px;
-  height: 2rem;
-}
-
-/* Inactive separator - stroke-primary (default) */
-.ina-stepper__separator:not(.ina-stepper__separator--completed) {
-  background-color: var(--ina-stroke-primary);
-}