@idds/styles 1.2.11 → 1.2.13

package/src/components/card.css

@@ -1,576 +0,0 @@
-/**
- * Card Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- * Varian: Basic (Vertical), Horizontal, Overlay
- */
-
-/* =========================== */
-/* BASE CARD STYLES            */
-/* =========================== */
-
-.ina-card {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  background-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-radius: var(--ina-radius-lg, 8px);
-  border: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
-  box-sizing: border-box;
-  transition: all 0.2s ease;
-  overflow: hidden;
-  width: 100%;
-}
-
-/* =========================== */
-/* VARIANT: BASIC (VERTICAL)   */
-/* =========================== */
-
-.ina-card--variant-basic {
-  width: 300px;
-}
-
-/* Basic Card - Media Position: Bottom (default) */
-.ina-card--variant-basic.ina-card--media-bottom {
-  flex-direction: column;
-}
-
-/* Basic Card - Media Position: Top */
-.ina-card--variant-basic.ina-card--media-top {
-  flex-direction: column;
-}
-
-/* Ensure content order is correct for basic card */
-.ina-card--variant-basic.ina-card--media-bottom .ina-card__content {
-  order: 1;
-}
-
-.ina-card--variant-basic.ina-card--media-bottom .ina-card__media {
-  order: 2;
-}
-
-.ina-card--variant-basic.ina-card--media-top .ina-card__content {
-  order: 2;
-}
-
-.ina-card--variant-basic.ina-card--media-top .ina-card__media {
-  order: 1;
-}
-
-/* =========================== */
-/* VARIANT: HORIZONTAL         */
-/* =========================== */
-
-.ina-card--variant-horizontal {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  max-width: 720px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* Horizontal Card - Media Position: Right (default) */
-.ina-card--variant-horizontal.ina-card--media-right {
-  flex-direction: row;
-}
-
-/* Horizontal Card - Media Position: Left */
-.ina-card--variant-horizontal.ina-card--media-left {
-  flex-direction: row;
-}
-
-/* Ensure content and media order for horizontal card */
-.ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
-  order: 1 !important;
-  flex: 1;
-  min-width: 0;
-  width: auto;
-}
-
-.ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
-  order: 2 !important;
-  flex-shrink: 0;
-  flex-grow: 0;
-}
-
-.ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
-  order: 2 !important;
-  flex: 1;
-  min-width: 0;
-  width: auto;
-}
-
-.ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
-  order: 1 !important;
-  flex-shrink: 0;
-  flex-grow: 0;
-}
-
-/* =========================== */
-/* VARIANT: OVERLAY            */
-/* =========================== */
-
-.ina-card--variant-overlay {
-  position: relative;
-  width: 360px;
-  height: 362px;
-  padding: 0;
-  gap: 0;
-  overflow: hidden;
-}
-
-/* Overlay Card - Media Position: Top (default) */
-.ina-card--variant-overlay.ina-card--media-top {
-  flex-direction: column;
-}
-
-/* Overlay Card - Media Position: Bottom */
-.ina-card--variant-overlay.ina-card--media-bottom {
-  flex-direction: column;
-}
-
-/* =========================== */
-/* CARD ANATOMY ELEMENTS       */
-/* =========================== */
-
-/* Avatar */
-.ina-card__avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--ina-radius-full, 9999px);
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-/* Content Container */
-.ina-card__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ina-spacing-4, 16px);
-  flex: 1;
-  padding: var(--ina-spacing-6, 24px);
-}
-
-/* Content width untuk basic dan overlay card */
-.ina-card--variant-basic .ina-card__content,
-.ina-card--variant-overlay .ina-card__content {
-  width: 100%;
-}
-
-/* Content width untuk horizontal card - tidak 100% agar tidak overlap dengan media */
-.ina-card--variant-horizontal .ina-card__content {
-  width: auto;
-}
-
-/* Title */
-.ina-card__title {
-  font-size: var(--ina-font-xl, 20px);
-  font-weight: var(--ina-font-semibold, 600);
-  line-height: var(--ina-line-height-lg, 28px);
-  color: var(--ina-content-primary, var(--ina-neutral-800));
-  margin: 0;
-  margin-bottom: var(--ina-spacing-1, 4px);
-}
-
-/* Description */
-.ina-card__description {
-  font-size: var(--ina-font-base, 16px);
-  font-weight: var(--ina-font-normal, 400);
-  line-height: var(--ina-line-height-base, 24px);
-  color: var(--ina-content-secondary, var(--ina-neutral-600));
-  margin: 0;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  align-self: stretch;
-}
-
-/* Button Container */
-.ina-card__button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-/* Media Container */
-.ina-card__media {
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  flex-shrink: 0;
-  padding: 0;
-  margin: 0;
-}
-
-/* Media Image */
-.ina-card__media img,
-.ina-card__media video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  max-width: 100%;
-}
-
-/* Horizontal Card Media Image - ensure no overflow */
-.ina-card--variant-horizontal .ina-card__media img,
-.ina-card--variant-horizontal .ina-card__media video {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-/* Basic Card Media */
-.ina-card--variant-basic .ina-card__media {
-  aspect-ratio: 16 / 9;
-  max-height: 202px;
-}
-
-/* Horizontal Card Media */
-.ina-card--variant-horizontal .ina-card__media {
-  width: 264px;
-  min-width: 264px;
-  max-width: 264px;
-  height: 100%;
-  flex-shrink: 0;
-  flex-grow: 0;
-  aspect-ratio: 5 / 4;
-  overflow: hidden;
-  position: relative;
-  box-sizing: border-box;
-}
-
-/* Horizontal Card Content - sudah didefinisikan di atas, tidak perlu duplikasi */
-
-/* Overlay Card Media */
-.ina-card--variant-overlay .ina-card__media {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-}
-
-/* Overlay Card - Gradient overlay based on media position */
-.ina-card--variant-overlay.ina-card--media-top .ina-card__media::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 60%;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.7) 0%,
-    rgba(0, 0, 0, 0.9) 60%,
-    transparent 100%
-  );
-  pointer-events: none;
-}
-
-.ina-card--variant-overlay.ina-card--media-bottom .ina-card__media::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 60%;
-  background: linear-gradient(
-    to bottom,
-    rgba(0, 0, 0, 0.7) 0%,
-    rgba(0, 0, 0, 0.9) 60%,
-    transparent 100%
-  );
-  pointer-events: none;
-}
-
-/* Overlay Card Content */
-.ina-card--variant-overlay .ina-card__content {
-  position: relative;
-  z-index: 1;
-  padding: var(--ina-spacing-6, 24px);
-  height: 100%;
-  gap: var(--ina-spacing-4, 16px);
-}
-
-/* Overlay Card - Content position based on media position */
-.ina-card--variant-overlay.ina-card--media-top .ina-card__content {
-  justify-content: flex-end;
-}
-
-.ina-card--variant-overlay.ina-card--media-bottom .ina-card__content {
-  justify-content: flex-start;
-}
-
-.ina-card--variant-overlay .ina-card__avatar,
-.ina-card--variant-overlay .ina-card__title,
-.ina-card--variant-overlay .ina-card__description {
-  color: var(--ina-neutral-25, #ffffff);
-}
-
-/* =========================== */
-/* RESPONSIVE DESIGN           */
-/* =========================== */
-
-/* Tablet (max-width: 768px) */
-@media (max-width: 768px) {
-  /* Basic Card */
-  .ina-card--variant-basic {
-    width: 100%;
-    max-width: 400px;
-  }
-
-  .ina-card--variant-basic .ina-card__avatar {
-    width: 40px;
-    height: 40px;
-  }
-
-  .ina-card--variant-basic .ina-card__title {
-    font-size: var(--ina-font-lg, 18px);
-    line-height: var(--ina-line-height-base, 24px);
-  }
-
-  .ina-card--variant-basic .ina-card__description {
-    font-size: var(--ina-font-sm, 14px);
-    line-height: var(--ina-line-height-sm, 20px);
-  }
-
-  /* Horizontal Card */
-  .ina-card--variant-horizontal {
-    flex-direction: column !important;
-    max-width: 100%;
-  }
-
-  /* Override semua property desktop untuk horizontal card media di mobile */
-  .ina-card--variant-horizontal .ina-card__media {
-    width: 100% !important;
-    aspect-ratio: 16 / 9 !important;
-    min-width: 100% !important;
-    max-width: 100% !important;
-    max-height: 202px !important;
-    height: auto !important;
-    flex-shrink: 0 !important;
-    flex-grow: 0 !important;
-  }
-
-  /* Override content width untuk mobile */
-  .ina-card--variant-horizontal .ina-card__content {
-    width: 100% !important;
-    flex: 1 1 auto !important;
-    min-width: 0 !important;
-  }
-
-  /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
-  .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
-    order: 1 !important;
-    width: 100% !important;
-    min-width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
-    order: 2 !important;
-    width: 100% !important;
-    flex: 1 1 auto !important;
-    min-width: 0 !important;
-  }
-
-  /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
-  .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
-    order: 1 !important;
-    width: 100% !important;
-    flex: 1 1 auto !important;
-    min-width: 0 !important;
-  }
-
-  .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
-    order: 2 !important;
-    width: 100% !important;
-    min-width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .ina-card--variant-horizontal .ina-card__avatar {
-    width: 40px;
-    height: 40px;
-  }
-
-  .ina-card--variant-horizontal .ina-card__title {
-    font-size: var(--ina-font-lg, 18px);
-    line-height: var(--ina-line-height-base, 24px);
-  }
-
-  .ina-card--variant-horizontal .ina-card__description {
-    font-size: var(--ina-font-sm, 14px);
-    line-height: var(--ina-line-height-sm, 20px);
-  }
-
-  /* Overlay Card */
-  .ina-card--variant-overlay {
-    width: 100%;
-    max-width: 360px;
-    height: auto;
-    min-height: 362px;
-  }
-
-  .ina-card--variant-overlay .ina-card__content {
-    padding: var(--ina-spacing-16, 16px);
-    gap: var(--ina-spacing-3, 12px);
-  }
-
-  .ina-card--variant-overlay .ina-card__avatar {
-    width: 40px;
-    height: 40px;
-  }
-
-  .ina-card--variant-overlay .ina-card__title {
-    font-size: var(--ina-font-lg, 18px);
-    line-height: var(--ina-line-height-base, 24px);
-  }
-
-  .ina-card--variant-overlay .ina-card__description {
-    font-size: var(--ina-font-sm, 14px);
-    line-height: var(--ina-line-height-sm, 20px);
-  }
-}
-
-/* Mobile (max-width: 640px) */
-@media (max-width: 640px) {
-  /* Basic Card */
-  .ina-card--variant-basic {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .ina-card--variant-basic .ina-card__avatar {
-    width: 36px;
-    height: 36px;
-  }
-
-  .ina-card--variant-basic .ina-card__title {
-    font-size: var(--ina-font-base, 16px);
-    line-height: var(--ina-line-height-sm, 20px);
-  }
-
-  .ina-card--variant-basic .ina-card__description {
-    font-size: var(--ina-font-xs, 12px);
-    line-height: var(--ina-line-height-xs, 16px);
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-  }
-
-  /* Horizontal Card */
-  .ina-card--variant-horizontal {
-    flex-direction: column !important;
-    gap: var(--ina-spacing-4, 16px);
-  }
-
-  /* Override semua property desktop untuk horizontal card media di mobile */
-  .ina-card--variant-horizontal .ina-card__media {
-    width: 100% !important;
-    aspect-ratio: 16 / 9 !important;
-    min-width: 100% !important;
-    max-width: 100% !important;
-    max-height: 202px !important;
-    height: auto !important;
-    flex-shrink: 0 !important;
-    flex-grow: 0 !important;
-  }
-
-  /* Override content width untuk mobile */
-  .ina-card--variant-horizontal .ina-card__content {
-    width: 100% !important;
-    flex: 1 1 auto !important;
-    min-width: 0 !important;
-  }
-
-  /* Horizontal Card - Media Position: Left → menjadi Top di mobile */
-  .ina-card--variant-horizontal.ina-card--media-left .ina-card__media {
-    order: 1 !important;
-    width: 100% !important;
-    min-width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .ina-card--variant-horizontal.ina-card--media-left .ina-card__content {
-    order: 2 !important;
-    width: 100% !important;
-    flex: 1 1 auto !important;
-    min-width: 0 !important;
-  }
-
-  /* Horizontal Card - Media Position: Right → menjadi Bottom di mobile */
-  .ina-card--variant-horizontal.ina-card--media-right .ina-card__content {
-    order: 1 !important;
-    width: 100% !important;
-    flex: 1 1 auto !important;
-    min-width: 0 !important;
-  }
-
-  .ina-card--variant-horizontal.ina-card--media-right .ina-card__media {
-    order: 2 !important;
-    width: 100% !important;
-    min-width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .ina-card--variant-horizontal .ina-card__avatar {
-    width: 36px;
-    height: 36px;
-  }
-
-  .ina-card--variant-horizontal .ina-card__title {
-    font-size: var(--ina-font-base, 16px);
-    line-height: var(--ina-line-height-sm, 20px);
-  }
-
-  .ina-card--variant-horizontal .ina-card__description {
-    font-size: var(--ina-font-xs, 12px);
-    line-height: var(--ina-line-height-xs, 16px);
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-  }
-
-  /* Overlay Card */
-  .ina-card--variant-overlay {
-    width: 100%;
-    max-width: 100%;
-    height: auto;
-    min-height: 300px;
-  }
-
-  .ina-card--variant-overlay .ina-card__content {
-    padding: var(--ina-spacing-4, 16px);
-    gap: var(--ina-spacing-2, 8px);
-  }
-
-  .ina-card--variant-overlay .ina-card__avatar {
-    width: 36px;
-    height: 36px;
-  }
-
-  .ina-card--variant-overlay .ina-card__title {
-    font-size: var(--ina-font-base, 16px);
-    line-height: var(--ina-line-height-sm, 20px);
-  }
-
-  .ina-card--variant-overlay .ina-card__description {
-    font-size: var(--ina-font-xs, 12px);
-    line-height: var(--ina-line-height-xs, 16px);
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-  }
-  .ina-card__content {
-    padding: var(--ina-spacing-3, 12px);
-  }
-}

package/src/components/carousel.css

@@ -1,100 +0,0 @@
-/* Carousel Component Styles */
-.ina-carousel {
-  position: relative;
-  width: 100%;
-}
-
-.ina-carousel__title {
-  font-size: var(--ina-font-size-lg);
-  font-weight: var(--ina-font-weight-semibold);
-  color: var(--ina-color-text-primary);
-  margin-bottom: var(--ina-spacing-md);
-}
-
-.ina-carousel__container {
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--ina-border-radius-md);
-}
-
-.ina-carousel__wrapper {
-  display: flex;
-  transition: transform 0.3s ease;
-}
-
-.ina-carousel__item {
-  flex: 0 0 auto;
-  width: 100%;
-}
-
-.ina-carousel__item--active {
-  /* Active item styles */
-}
-
-.ina-carousel__item-content {
-  padding: var(--ina-spacing-lg);
-  text-align: center;
-  background: var(--ina-color-background);
-  border-radius: var(--ina-border-radius-md);
-  margin: var(--ina-spacing-xs);
-}
-
-.ina-carousel__nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: var(--ina-color-background);
-  border: 1px solid var(--ina-color-border);
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  z-index: 10;
-}
-
-.ina-carousel__nav:hover {
-  background: var(--ina-color-surface);
-  border-color: var(--ina-color-primary);
-}
-
-.ina-carousel__nav:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ina-carousel__nav--prev {
-  left: var(--ina-spacing-sm);
-}
-
-.ina-carousel__nav--next {
-  right: var(--ina-spacing-sm);
-}
-
-.ina-carousel__indicators {
-  display: flex;
-  justify-content: center;
-  gap: var(--ina-spacing-xs);
-  margin-top: var(--ina-spacing-md);
-}
-
-.ina-carousel__indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--ina-color-border);
-  border: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.ina-carousel__indicator--active {
-  background: var(--ina-color-primary);
-}
-
-.ina-carousel__indicator:hover {
-  background: var(--ina-color-primary-light);
-}