@idds/styles 1.0.26

package/src/components/alert.css

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

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

@@ -0,0 +1,244 @@
+/**
+ * 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-2xs);
+  line-height: 14px;
+  padding: var(--ina-spacing-1) var(--ina-spacing-2);
+}
+
+.ina-badge--md {
+  font-size: var(--ina-font-xs);
+  line-height: var(--ina-line-height-xs);
+  padding: var(--ina-spacing-1) var(--ina-spacing-2);
+}
+
+.ina-badge--lg {
+  font-size: var(--ina-font-sm);
+  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);
+  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

@@ -0,0 +1,61 @@
+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;
+  }
+}