@idds/styles 1.0.26

package/src/components/spinner.css

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

@@ -0,0 +1,209 @@
+.ina-stepper {
+  display: flex;
+  width: 100%;
+  position: relative;
+}
+
+/* Horizontal Layout */
+.ina-stepper--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+/* Vertical Layout */
+.ina-stepper--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* 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;
+  }
+
+  .ina-stepper--horizontal-responsive .ina-stepper__item {
+    width: 100%;
+    margin-bottom: 1rem;
+    align-items: flex-start;
+  }
+
+  .ina-stepper--horizontal-responsive .ina-stepper__separator {
+    width: 2px;
+    height: 2rem;
+    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 */
+    margin-left: 11px;
+  }
+
+  .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 0.5rem;
+}
+
+.ina-stepper--vertical .ina-stepper__item {
+  flex-direction: row;
+  text-align: left;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  padding: 0;
+  width: 100%;
+}
+
+.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: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  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-secondary);
+  background-color: var(--ina-background-primary);
+}
+
+.ina-stepper--vertical .ina-stepper__icon-wrapper {
+  margin-right: 0.75rem;
+}
+
+.ina-stepper__step-number {
+  color: var(--ina-content-secondary);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.ina-stepper__check-icon {
+  color: var(--ina-background-primary);
+  stroke: var(--ina-background-primary);
+  width: 16px;
+  height: 16px;
+}
+
+/* Label */
+.ina-stepper__label {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--ina-content-secondary);
+  transition: color 0.2s ease;
+  white-space: nowrap;
+}
+
+.ina-stepper--vertical .ina-stepper__label {
+  margin-top: 0;
+  flex-grow: 1;
+}
+
+/* Content (for vertical stepper) */
+.ina-stepper__content {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--ina-content-primary);
+  text-align: left;
+  width: 100%;
+  padding-left: calc(24px + 0.75rem);
+}
+
+/* Separator */
+.ina-stepper__separator {
+  flex-grow: 1;
+  height: 2px;
+  background-color: var(--ina-stroke-primary);
+  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from top */
+  /* Separator height is 2px, so we need to position it so its center aligns with icon center */
+  /* Using align-self: center and margin-top to offset: 12px (icon center) - 1px (half separator) = 11px */
+  align-self: flex-start;
+  margin: 11px -0.5rem 0 -0.5rem;
+  position: relative;
+  z-index: 0;
+  transition: background-color 0.2s ease;
+}
+
+.ina-stepper--vertical .ina-stepper__separator {
+  width: 2px;
+  height: 2rem;
+  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 we need to position it so its center aligns with icon center */
+  /* margin-left: 12px (icon center) - 1px (half separator) = 11px */
+  margin-left: 11px;
+}
+
+/* States */
+.ina-stepper__item--completed .ina-stepper__icon-wrapper {
+  background-color: var(--ina-semantic-success);
+  border-color: var(--ina-semantic-success);
+  color: var(--ina-background-primary);
+}
+
+.ina-stepper__item--completed .ina-stepper__label {
+  color: var(--ina-content-primary);
+}
+
+.ina-stepper__item--active .ina-stepper__icon-wrapper {
+  border-color: var(--ina-semantic-info);
+  color: var(--ina-semantic-info);
+  background-color: var(--ina-background-primary);
+}
+
+.ina-stepper__item--active .ina-stepper__label {
+  color: var(--ina-content-primary);
+  font-weight: 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;
+}
+
+/* Completed separator - thick 2px stroke-primary */
+.ina-stepper__separator--completed {
+  background-color: var(--ina-stroke-primary);
+  height: 2px;
+}
+
+.ina-stepper--vertical .ina-stepper__separator--completed {
+  width: 2px;
+  height: 2rem;
+}