@idds/styles 1.2.11 → 1.2.13

package/src/components/alert.css

@@ -1,180 +0,0 @@
-/**
- * Alert Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-" dan variant modifiers
- */
-
-.ina-alert {
-  /* Base alert styling */
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--ina-spacing-2);
-  border-radius: var(--ina-radius-lg);
-  padding: var(--ina-spacing-4);
-  border: 1px solid;
-  box-sizing: border-box;
-}
-
-.ina-alert__icon {
-  /* Container untuk icon/variant */
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ina-alert__content {
-  /* Main content area */
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  gap: 0;
-}
-
-.ina-alert__text-section {
-  /* Container untuk title dan description */
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.ina-alert__title {
-  /* Alert title */
-  font-weight: var(--ina-font-semibold);
-  font-size: var(--ina-font-sm);
-  line-height: var(--ina-line-height-sm);
-  margin: 0;
-}
-
-.ina-alert__description {
-  /* Alert description/subtitle */
-  font-size: var(--ina-font-xs);
-  line-height: var(--ina-line-height-xs);
-  margin: 0;
-  margin-top: var(--ina-spacing-1);
-  color: var(--ina-content-primary, var(--ina-neutral-800));
-}
-
-.ina-alert__action {
-  /* Optional action node area */
-  margin-left: var(--ina-spacing-4);
-  flex-shrink: 0;
-}
-
-.ina-alert__close-button {
-  /* Close button */
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ina-content-primary, var(--ina-neutral-800));
-
-  /* Focus styles */
-  outline: none;
-}
-
-.ina-alert__close-button:focus {
-  outline: 2px solid var(--ina-guide-500);
-  outline-offset: 2px;
-  border-radius: var(--ina-radius-sm);
-}
-
-.ina-alert__close-icon {
-  /* Icon di dalam close button */
-  transition: stroke-width 150ms ease;
-}
-
-.ina-alert__close-button:hover .ina-alert__close-icon {
-  stroke-width: 2;
-}
-
-/* Variant modifiers */
-.ina-alert--neutral {
-  background-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-color: var(--ina-stroke-tertiary);
-}
-
-.ina-alert--neutral .ina-alert__icon,
-.ina-alert--neutral .ina-alert__title {
-  color: var(--ina-content-primary, var(--ina-neutral-800));
-}
-
-.ina-alert--info {
-  background-color: var(--ina-guide-100, var(--ina-blue-100));
-  border-color: var(--ina-guide-500, var(--ina-blue-500));
-}
-
-.ina-alert--info .ina-alert__icon,
-.ina-alert--info .ina-alert__title {
-  color: var(--ina-guide-500, var(--ina-blue-500));
-}
-
-.ina-alert--success {
-  background-color: var(--ina-positive-50);
-  border-color: var(--ina-positive-600);
-}
-
-.ina-alert--success .ina-alert__icon,
-.ina-alert--success .ina-alert__title {
-  color: var(--ina-positive-600);
-}
-
-.ina-alert--caution {
-  background-color: var(--ina-warning-100);
-  border-color: var(--ina-warning-500);
-}
-
-.ina-alert--caution .ina-alert__icon,
-.ina-alert--caution .ina-alert__title {
-  color: var(--ina-warning-500);
-}
-
-.ina-alert--critical {
-  background-color: var(--ina-negative-100);
-  border-color: var(--ina-negative-500);
-}
-
-.ina-alert--critical .ina-alert__icon,
-.ina-alert--critical .ina-alert__title {
-  color: var(--ina-negative-500);
-}
-
-/* Animation states */
-.ina-alert--entering {
-  opacity: 0;
-}
-
-.ina-alert--entered {
-  opacity: 1;
-}
-
-.ina-alert--exiting {
-  opacity: 0;
-}
-
-/* Responsive adjustments */
-@media (max-width: 639px) {
-  .ina-alert {
-    padding: var(--ina-spacing-2) var(--ina-spacing-3);
-  }
-
-  .ina-alert__title {
-    font-size: var(--ina-font-xs); /* Turun dari base ke sm */
-  }
-
-  .ina-alert__description {
-    font-size: var(--ina-font-2xs); /* Turun dari sm ke xs */
-  }
-
-  .ina-alert__icon {
-    margin-right: var(--ina-spacing-2);
-  }
-
-  .ina-alert__action {
-    margin-left: var(--ina-spacing-2);
-  }
-}

package/src/components/avatar.css

@@ -1,182 +0,0 @@
-/**
- * Avatar Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-" dan size modifiers
- */
-
-.ina-avatar {
-  /* Base avatar styling */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  background-color: var(--ina-background-secondary, var(--ina-white));
-  color: var(--ina-content-primary, var(--ina-neutral-800));
-  border: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
-  box-sizing: border-box;
-}
-
-.ina-avatar--image {
-  /* Image avatar styling */
-  object-fit: cover;
-}
-
-/* Shape modifiers */
-.ina-avatar--circle {
-  border-radius: 50%;
-}
-
-.ina-avatar--square {
-  border-radius: 8px;
-}
-
-/* Size modifiers */
-.ina-avatar--16 {
-  width: 16px;
-  height: 16px;
-  font-size: 6px;
-}
-
-.ina-avatar--16:not(.ina-avatar--image) {
-  padding: 4.167px;
-}
-
-.ina-avatar--24 {
-  width: 24px;
-  height: 24px;
-  font-size: 10px;
-}
-
-.ina-avatar--24:not(.ina-avatar--image) {
-  padding: 6.25px;
-}
-
-.ina-avatar--32 {
-  width: 32px;
-  height: 32px;
-  font-size: 14px;
-}
-
-.ina-avatar--32:not(.ina-avatar--image) {
-  padding: 8px;
-}
-
-.ina-avatar--40 {
-  width: 40px;
-  height: 40px;
-  font-size: 16px;
-}
-
-.ina-avatar--40:not(.ina-avatar--image) {
-  padding: 10px;
-}
-
-.ina-avatar--48 {
-  width: 48px;
-  height: 48px;
-  font-size: 24px;
-}
-
-.ina-avatar--48:not(.ina-avatar--image) {
-  padding: 12.5px;
-}
-
-/* Responsive adjustments untuk mobile */
-@media (max-width: 640px) {
-  .ina-avatar--24,
-  .ina-avatar--32 {
-    font-size: 10px;
-  }
-
-  .ina-avatar--40,
-  .ina-avatar--48 {
-    font-size: 12px;
-  }
-}
-
-/* Hover effects untuk interactive avatars */
-.ina-avatar--interactive {
-  transition: var(--ina-transition-fast);
-  cursor: pointer;
-}
-
-.ina-avatar--interactive:hover {
-  box-shadow: var(--ina-shadow-sm);
-  transform: scale(1.05);
-}
-
-/* Focus styles untuk accessibility */
-.ina-avatar--interactive:focus {
-  outline: 2px solid var(--ina-guide-500);
-  outline-offset: 2px;
-}
-
-/* Badge/Presence indicator */
-.ina-avatar__badge {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: var(--ina-radius-full);
-  border: 2px solid var(--ina-neutral-25);
-}
-
-.ina-avatar__badge--online {
-  background-color: var(--ina-success-500);
-}
-
-.ina-avatar__badge--away {
-  background-color: var(--ina-warning-500);
-}
-
-.ina-avatar__badge--offline {
-  background-color: var(--ina-neutral-400);
-}
-
-.ina-avatar__badge--busy {
-  background-color: var(--ina-error-500);
-}
-
-/* Loading state */
-.ina-avatar--loading {
-  background: linear-gradient(
-    90deg,
-    var(--ina-neutral-200) 25%,
-    var(--ina-neutral-100) 50%,
-    var(--ina-neutral-200) 75%
-  );
-  background-size: 200% 100%;
-  animation: avatar-loading 1.5s infinite;
-}
-
-@keyframes avatar-loading {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-/* Error state */
-.ina-avatar--error {
-  background-color: var(--ina-neutral-200);
-  color: var(--ina-neutral-500);
-}
-
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-avatar {
-    background-color: var(--ina-neutral-800);
-    color: var(--ina-neutral-300);
-  }
-
-  .ina-avatar__badge {
-    border-color: var(--ina-neutral-900);
-  }
-
-  .ina-avatar--error {
-    background-color: var(--ina-neutral-800);
-    color: var(--ina-neutral-600);
-  }
-} */

package/src/components/badge.css

@@ -1,247 +0,0 @@
-/**
- * Badge Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-" dan multiple modifiers
- * Mengakomodir kombinasi type, variant, size, dan rounded
- */
-
-.ina-badge {
-  /* Base badge styling */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 48px;
-  gap: 4px;
-  font-weight: 500;
-  box-sizing: border-box;
-}
-
-.ina-badge__prefix-icon,
-.ina-badge__suffix-icon {
-  /* Icon containers */
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Type modifiers - Soft */
-.ina-badge--soft {
-  /* Soft badges: background level 100, text level 500 */
-  border: none;
-}
-
-/* Type modifiers - Fill */
-.ina-badge--fill {
-  /* Fill badges: background level 500, text level 100 */
-  border: none;
-}
-
-/* Variant modifiers - Brand (Primary) */
-.ina-badge--soft.ina-badge--brand {
-  background-color: var(--ina-primary-25, var(--ina-neutral-25));
-  color: var(--ina-primary-500, var(--ina-blue-500));
-}
-
-.ina-badge--fill.ina-badge--brand {
-  background-color: var(--ina-primary-500, var(--ina-blue-500));
-  color: var(--ina-primary-25, var(--ina-neutral-25));
-}
-
-/* Variant modifiers - Info */
-.ina-badge--soft.ina-badge--info {
-  background-color: var(--ina-guide-50, var(--ina-blue-50));
-  color: var(--ina-guide-500, var(--ina-blue-500));
-}
-
-.ina-badge--fill.ina-badge--info {
-  background-color: var(--ina-guide-500, var(--ina-blue-500));
-  color: var(--ina-guide-50, var(--ina-blue-50));
-}
-
-/* Variant modifiers - Warning */
-.ina-badge--soft.ina-badge--warning {
-  background-color: var(--ina-warning-50, var(--ina-orange-50));
-  color: var(--ina-warning-500, var(--ina-orange-500));
-}
-
-.ina-badge--fill.ina-badge--warning {
-  background-color: var(--ina-warning-500, var(--ina-orange-500));
-  color: var(--ina-warning-50, var(--ina-orange-50));
-}
-
-/* Variant modifiers - Success */
-.ina-badge--soft.ina-badge--success {
-  background-color: var(--ina-positive-50, var(--ina-green-50));
-  color: var(--ina-positive-600, var(--ina-green-600));
-}
-
-.ina-badge--fill.ina-badge--success {
-  background-color: var(--ina-positive-600, var(--ina-green-600));
-  color: var(--ina-positive-50, var(--ina-green-50));
-}
-
-/* Variant modifiers - Error */
-.ina-badge--soft.ina-badge--error {
-  background-color: var(--ina-negative-50, var(--ina-red-50));
-  color: var(--ina-negative-500, var(--ina-red-500));
-}
-
-.ina-badge--fill.ina-badge--error {
-  background-color: var(--ina-negative-500, var(--ina-red-500));
-  color: var(--ina-negative-50, var(--ina-red-50));
-}
-
-/* Variant modifiers - Neutral */
-.ina-badge--soft.ina-badge--neutral {
-  background-color: var(--ina-neutral-50, var(--ina-neutral-50));
-  color: var(--ina-neutral-500, var(--ina-neutral-500));
-}
-
-.ina-badge--fill.ina-badge--neutral {
-  background-color: var(--ina-neutral-500, var(--ina-neutral-500));
-  color: var(--ina-neutral-50, var(--ina-neutral-50));
-}
-
-/* Size modifiers */
-.ina-badge--sm {
-  font-size: var(--ina-font-xs);
-  line-height: 14px;
-  padding: var(--ina-spacing-1) var(--ina-spacing-2);
-}
-
-.ina-badge--md {
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  line-height: var(--ina-line-height-sm);
-  padding: var(--ina-spacing-1) var(--ina-spacing-3);
-}
-
-.ina-badge--lg {
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  line-height: var(--ina-line-height-sm);
-  padding: var(--ina-spacing-1) var(--ina-spacing-3);
-}
-
-.ina-badge--xl {
-  font-size: var(--ina-font-base);
-  font-weight: var(--ina-font-medium);
-  line-height: var(--ina-line-height-base);
-  padding: var(--ina-spacing-1) var(--ina-spacing-3-5);
-}
-
-/* Rounded modifiers */
-.ina-badge--rounded-sm {
-  border-radius: var(--ina-radius-sm);
-}
-
-.ina-badge--rounded-md {
-  border-radius: var(--ina-radius-base);
-}
-
-.ina-badge--rounded-lg {
-  border-radius: var(--ina-radius-lg);
-}
-
-.ina-badge--rounded-full {
-  border-radius: var(--ina-radius-full); /* Pill shape */
-}
-
-/* Hover effects */
-.ina-badge--interactive {
-  cursor: pointer;
-  transition: var(--ina-transition-fast);
-}
-
-.ina-badge--interactive:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--ina-shadow-sm);
-}
-
-/* Focus styles untuk accessibility */
-.ina-badge--interactive:focus {
-  outline: 2px solid var(--ina-guide-500);
-  outline-offset: 2px;
-}
-
-/* Loading state */
-.ina-badge--loading {
-  position: relative;
-  overflow: hidden;
-}
-
-.ina-badge--loading::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.4),
-    transparent
-  );
-  animation: badge-shimmer 1.5s infinite;
-}
-
-@keyframes badge-shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-
-/* Disabled state */
-.ina-badge--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ina-badge--disabled:hover {
-  transform: none;
-  box-shadow: none;
-}
-
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  /* .ina-badge--lg {
-    font-size: var(--ina-font-sm);
-    padding: var(--ina-spacing-1) var(--ina-spacing-3);
-  }
-
-  .ina-badge--xl {
-    font-size: var(--ina-font-base);
-    padding: 0.375rem var(--ina-spacing-4);
-  } */
-}
-
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-badge--outline.ina-badge--positive {
-    background-color: rgba(18, 183, 106, 0.1);
-    border-color: var(--ina-success-400);
-    color: var(--ina-success-400);
-  }
-
-  .ina-badge--outline.ina-badge--warning {
-    background-color: rgba(247, 144, 9, 0.1);
-    border-color: var(--ina-warning-400);
-    color: var(--ina-warning-400);
-  }
-
-  .ina-badge--outline.ina-badge--info {
-    background-color: rgba(40, 113, 255, 0.1);
-    border-color: var(--ina-guide-400);
-    color: var(--ina-guide-400);
-  }
-
-  .ina-badge--outline.ina-badge--negative {
-    background-color: rgba(240, 68, 56, 0.1);
-    border-color: var(--ina-error-400);
-    color: var(--ina-error-400);
-  }
-} */

package/src/components/bottom-sheet.css

@@ -1,61 +0,0 @@
-dialog.bottom-sheet-dropdown {
-  position: fixed;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-  background-color: white;
-  border-width: 0;
-  min-height: 50vh;
-  max-height: 80vh;
-  max-width: 100vw;
-  padding: 0;
-  border: 0;
-  margin: auto 0 0 0 !important;
-  width: 100vw;
-  bottom: -100%; /* start below the screen */
-  z-index: 1000;
-  transition: bottom 0.3s ease-in-out; /* smooth animation */
-}
-
-.bottom-sheet-dropdown[open] {
-  animation: slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.bottom-sheet-dropdown[open].bottom-sheet-dropdown--closing {
-  animation: slide-down 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.bottom-sheet-dropdown::backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  animation: fade-in 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-@keyframes slide-down {
-  from {
-    bottom: 0;
-  }
-  to {
-    bottom: -100%;
-  }
-}
-
-@keyframes slide-up {
-  from {
-    bottom: -100%;
-  }
-  to {
-    bottom: 0;
-  }
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}