@idds/styles 1.0.26

package/src/components/select-option.css

@@ -0,0 +1,217 @@
+/* =========================== */
+/* 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/skeleton.css

@@ -0,0 +1,488 @@
+/**
+ * Skeleton Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ */
+
+.ina-skeleton {
+  /* Base skeleton styling */
+  position: relative;
+  overflow: hidden;
+  background-color: var(--ina-neutral-200);
+  animation: skeletonPulse 2s ease-in-out infinite;
+}
+
+@keyframes skeletonPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Width variants */
+.ina-skeleton--width-xs {
+  width: 32px;
+}
+
+.ina-skeleton--width-sm {
+  width: 64px;
+}
+
+.ina-skeleton--width-md {
+  width: 128px;
+}
+
+.ina-skeleton--width-lg {
+  width: 256px;
+}
+
+.ina-skeleton--width-xl {
+  width: 512px;
+}
+
+.ina-skeleton--width-full {
+  width: 100%;
+}
+
+/* Height variants */
+.ina-skeleton--height-xs {
+  height: 8px;
+}
+
+.ina-skeleton--height-sm {
+  height: 16px;
+}
+
+.ina-skeleton--height-md {
+  height: 32px;
+}
+
+.ina-skeleton--height-lg {
+  height: 64px;
+}
+
+.ina-skeleton--height-xl {
+  height: 128px;
+}
+
+.ina-skeleton--height-full {
+  height: 100%;
+}
+
+/* Border radius variants */
+.ina-skeleton--rounded-none {
+  border-radius: 0;
+}
+
+.ina-skeleton--rounded-xs {
+  border-radius: var(--ina-radius-xs);
+}
+
+.ina-skeleton--rounded-sm {
+  border-radius: var(--ina-radius-sm);
+}
+
+.ina-skeleton--rounded-md {
+  border-radius: var(--ina-radius-md);
+}
+
+.ina-skeleton--rounded-lg {
+  border-radius: var(--ina-radius-lg);
+}
+
+.ina-skeleton--rounded-full {
+  border-radius: var(--ina-radius-full);
+}
+
+/* Color variants */
+.ina-skeleton--color-gray {
+  background-color: var(--ina-neutral-200);
+}
+
+.ina-skeleton--color-blue {
+  background-color: var(--ina-primary-100);
+}
+
+.ina-skeleton--color-green {
+  background-color: var(--ina-positive-100);
+}
+
+.ina-skeleton--color-red {
+  background-color: var(--ina-negative-100);
+}
+
+.ina-skeleton--color-yellow {
+  background-color: var(--ina-warning-100);
+}
+
+/* Animation styles */
+.ina-skeleton--animation-pulse {
+  animation: skeletonPulse 2s ease-in-out infinite;
+}
+
+.ina-skeleton--animation-wave {
+  animation: skeletonWave 1.5s ease-in-out infinite;
+}
+
+@keyframes skeletonWave {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.ina-skeleton--animation-fade {
+  animation: skeletonFade 1.8s ease-in-out infinite;
+}
+
+@keyframes skeletonFade {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Wave effect overlay */
+.ina-skeleton__wave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.6) 50%,
+    transparent 100%
+  );
+  animation: skeletonWave 1.5s ease-in-out infinite;
+}
+
+.ina-skeleton--animation-wave .ina-skeleton__wave {
+  display: block;
+}
+
+/* Glow effect */
+.ina-skeleton--effect-glow {
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+}
+
+/* Gradient variants */
+.ina-skeleton--gradient-linear {
+  background: linear-gradient(
+    90deg,
+    var(--ina-neutral-200) 25%,
+    var(--ina-neutral-300) 50%,
+    var(--ina-neutral-200) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeletonGradient 1.5s infinite ease-out;
+}
+
+@keyframes skeletonGradient {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.ina-skeleton--gradient-radial {
+  background: radial-gradient(
+    circle at center,
+    var(--ina-neutral-200) 40%,
+    var(--ina-neutral-300) 100%
+  );
+}
+
+/* Shape variants */
+.ina-skeleton--shape-circle {
+  border-radius: var(--ina-radius-full);
+}
+
+.ina-skeleton--shape-rectangle {
+  border-radius: var(--ina-radius-md);
+}
+
+.ina-skeleton--shape-square {
+  border-radius: var(--ina-radius-base);
+}
+
+/* Text skeleton specific styling */
+.ina-skeleton--text {
+  border-radius: var(--ina-radius-base);
+  height: 1em;
+  width: 100%;
+}
+
+.ina-skeleton--text--sm {
+  height: 0.875em;
+}
+
+.ina-skeleton--text--base {
+  height: 1em;
+}
+
+.ina-skeleton--text--lg {
+  height: 1.125em;
+}
+
+/* Block skeleton for rectangular shapes */
+.ina-skeleton--block {
+  border-radius: var(--ina-radius-md);
+}
+
+/* Avatar skeleton */
+.ina-skeleton--avatar {
+  border-radius: var(--ina-radius-full);
+  aspect-ratio: 1;
+}
+
+.ina-skeleton--avatar--sm {
+  width: 32px;
+  height: 32px;
+}
+
+.ina-skeleton--avatar--md {
+  width: 48px;
+  height: 48px;
+}
+
+.ina-skeleton--avatar--lg {
+  width: 64px;
+  height: 64px;
+}
+
+/* Button skeleton */
+.ina-skeleton--button {
+  border-radius: var(--ina-radius-md);
+  height: 40px;
+  width: 120px;
+}
+
+.ina-skeleton--button--sm {
+  height: 32px;
+  width: 100px;
+}
+
+.ina-skeleton--button--lg {
+  height: 48px;
+  width: 140px;
+}
+
+/* Card skeleton */
+.ina-skeleton--card {
+  border-radius: var(--ina-radius-lg);
+  width: 300px;
+  height: 200px;
+}
+
+/* Loading state */
+.ina-skeleton--loading {
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Skeleton group/spinner */
+.ina-skeleton__group {
+  display: flex;
+  gap: var(--ina-spacing-3);
+  align-items: center;
+}
+
+.ina-skeleton__spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--ina-neutral-300);
+  border-top-color: var(--ina-primary-500);
+  border-radius: var(--ina-radius-full);
+  animation: skeletonSpin 1s linear infinite;
+}
+
+@keyframes skeletonSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Compound skeletons */
+.ina-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ina-spacing-3);
+}
+
+.ina-skeleton-group--horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+
+.ina-skeleton-group__item {
+  flex-shrink: 0;
+}
+
+.ina-skeleton-group__item--flex {
+  flex: 1;
+}
+
+/* Custom sizes with CSS variables */
+.ina-skeleton--custom-size {
+  width: var(--skeleton-width, 100%);
+  height: var(--skeleton-height, auto);
+}
+
+/* Responsive behavior */
+@media (max-width: 640px) {
+  .ina-skeleton--responsive-full {
+    width: 100%;
+  }
+
+  .ina-skeleton-group--horizontal {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ina-skeleton--avatar--lg {
+    width: 48px;
+    height: 48px;
+  }
+
+  .ina-skeleton--card {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+
+/* Dark mode support */
+/* @media (prefers-color-scheme: dark) {
+  .ina-skeleton {
+    background-color: var(--ina-neutral-700);
+  }
+
+  .ina-skeleton--color-gray {
+    background-color: var(--ina-neutral-700);
+  }
+
+  .ina-skeleton--color-blue {
+    background-color: var(--ina-primary-900);
+  }
+
+  .ina-skeleton--color-green {
+    background-color: var(--ina-positive-900);
+  }
+
+  .ina-skeleton--color-red {
+    background-color: var(--ina-negative-900);
+  }
+
+  .ina-skeleton--color-yellow {
+    background-color: var(--ina-warning-900);
+  }
+
+  .ina-skeleton--gradient-linear {
+    background: linear-gradient(
+      90deg,
+      var(--ina-neutral-700) 25%,
+      var(--ina-neutral-600),
+      var(--ina-neutral-700) 75%
+    );
+    background-size: 200% 100%;
+  }
+
+  .ina-skeleton--gradient-radial {
+    background: radial-gradient(
+      circle at center,
+      var(--ina-neutral-700) 40%,
+      var(--ina-neutral-600) 100%
+    );
+  }
+
+  .ina-skeleton__wave {
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.1) 50%,
+      transparent 100%
+    );
+  }
+
+  .ina-skeleton__spinner {
+    border-color: var(--ina-neutral-600);
+    border-top-color: var(--ina-primary-400);
+  }
+} */
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .ina-skeleton {
+    border: 1px solid var(--ina-content-primary);
+  }
+
+  .ina-skeleton--animation-pulse,
+  .ina-skeleton--animation-wave,
+  .ina-skeleton--animation-fade {
+    animation-duration: 0.1s;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ina-skeleton,
+  .ina-skeleton--animation-pulse,
+  .ina-skeleton--animation-wave,
+  .ina-skeleton--animation-fade,
+  .ina-skeleton__wave,
+  .ina-skeleton__spinner,
+  .ina-skeleton--gradient-linear {
+    animation: none;
+  }
+
+  .ina-skeleton {
+    opacity: 0.7;
+  }
+
+  .ina-skeleton__wave {
+    display: none;
+  }
+}
+
+/* Accessibility improvements */
+.ina-skeleton[aria-hidden='true'] {
+  visibility: hidden;
+}
+
+/* Print styles */
+@media print {
+  .ina-skeleton {
+    display: none;
+  }
+}
+
+/* Custom shimmer implementation */
+.ina-skeleton--shimmer {
+  background: linear-gradient(
+    270deg,
+    var(--ina-neutral-100) 0%,
+    var(--ina-neutral-300) 50%,
+    var(--ina-neutral-100) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeletonShimmer 1.8s ease-in-out infinite;
+}
+
+@keyframes skeletonShimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}