@idds/styles 1.0.26

package/src/components/progress-bar.css

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

@@ -0,0 +1,263 @@
+/**
+ * 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:focus-within {
+  background-color: var(--ina-neutral-100);
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+.ina-radio-input__option--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.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-content-light-secondary) !important;
+  border-radius: 50%;
+  background-color: transparent;
+  cursor: pointer;
+  position: relative;
+  transition: all var(--ina-transition-base);
+  flex-shrink: 0;
+}
+
+/* Hover state */
+.ina-radio-input__field:hover:not(:disabled) {
+  border-color: #666666;
+}
+
+/* Selected state */
+.ina-radio-input__field:checked {
+  border-color: #000000;
+  background-color: #000000;
+}
+
+.ina-radio-input__field:checked::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ffffff;
+}
+
+/* Disabled states */
+.ina-radio-input__field:disabled {
+  border-color: #e0e0e0;
+  background-color: transparent;
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* Disabled + Checked state - Higher specificity */
+.ina-radio-input__field:disabled:checked {
+  border-color: #e0e0e0 !important;
+  background-color: transparent !important;
+}
+
+.ina-radio-input__field:disabled:checked::after {
+  content: '' !important;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+}
+
+/* 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;
+  color: #e0e0e0;
+}
+
+/* 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);
+}
+
+/* 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 #000000;
+  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 {
+  opacity: 0.6;
+  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;
+  }
+}