@idds/styles 1.0.26

package/src/components/checkbox.css

@@ -0,0 +1,211 @@
+/**
+ * Checkbox Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-" dan state modifiers
+ */
+
+.ina-checkbox {
+  /* Main container - label wrapper */
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ina-spacing-3);
+}
+
+.ina-checkbox__input {
+  /* Hidden native input */
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ina-checkbox__box {
+  /* Visual checkbox box */
+  flex-shrink: 0;
+  width: 1rem; /* w-4 */
+  height: 1rem; /* h-4 */
+  max-width: 1rem;
+  max-height: 1rem;
+  font-size: var(--ina-font-2xs);
+  border: 1px solid var(--ina-stroke-primary);
+  background-color: var(--ina-background-primary);
+  border-radius: var(--ina-radius-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+}
+
+@media (min-width: 768px) {
+  .ina-checkbox__box {
+    width: 1.25rem; /* md:w-5 */
+    height: 1.25rem; /* md:h-5 */
+  }
+}
+
+.ina-checkbox__content {
+  /* Container untuk label dan subtext */
+  display: flex;
+  flex-direction: column;
+}
+
+.ina-checkbox__label {
+  font-size: var(--ina-font-sm);
+  color: var(--ina-content-primary);
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .ina-checkbox__label {
+    font-size: var(--ina-font-base); /* md:text-base */
+  }
+}
+
+.ina-checkbox__subtext {
+  font-size: var(--ina-font-xs);
+  color: var(--ina-content-secondary);
+  margin-top: 0.125rem;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .ina-checkbox__subtext {
+    font-size: var(--ina-font-sm); /* md:text-sm */
+  }
+}
+
+/* Modifier for checked state */
+.ina-checkbox__box--checked {
+  background-color: var(--ina-content-primary);
+  border-color: var(--ina-content-primary);
+}
+
+/* Modifier for indeterminate state */
+.ina-checkbox__box--indeterminate {
+  background-color: var(--ina-content-primary);
+  border-color: var(--ina-content-primary);
+}
+
+/* Modifier for invalid state */
+.ina-checkbox__box--invalid {
+  border-color: var(
+    --ina-sentiment-negative-500,
+    var(--ina-error-500)
+  ) !important;
+}
+
+/* Modifier for disabled state */
+.ina-checkbox--disabled {
+  cursor: not-allowed;
+}
+
+.ina-checkbox--disabled .ina-checkbox__box--unchecked,
+.ina-checkbox--disabled .ina-checkbox__box--checked,
+.ina-checkbox--disabled .ina-checkbox__box--indeterminate {
+  background-color: var(--ina-background-tertiary);
+  border-color: var(--ina-stroke-secondary);
+}
+
+.ina-checkbox--disabled .ina-checkbox__box--unchecked {
+  background-color: var(--ina-background-tertiary);
+  border-color: var(--ina-stroke-secondary);
+}
+
+.ina-checkbox--disabled .ina-checkbox__label {
+  color: var(--ina-content-primary);
+}
+
+.ina-checkbox--disabled .ina-checkbox__icon {
+  color: var(--ina-stroke-secondary);
+}
+
+/* Default unchecked state hover effect */
+.ina-checkbox__box--unchecked:hover {
+  border-color: var(--ina-stroke-secondary);
+}
+
+/* Icon styling */
+.ina-checkbox__icon {
+  color: var(--ina-neutral-25); /* white */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Disabled icon color */
+.ina-checkbox--disabled .ina-checkbox__icon {
+  color: var(--ina-neutral-400);
+}
+
+/* Focus state menggunakan peer selector untuk accessibility */
+.ina-checkbox__input:focus + .ina-checkbox__box {
+  outline: 3px solid #f3f3f3;
+  outline-offset: -1px;
+}
+
+/* Focus state untuk indeterminate checkbox */
+.ina-checkbox__input:focus + .ina-checkbox__box--indeterminate {
+  outline: 3px solid #f3f3f3;
+}
+
+/* Focus state untuk checked checkbox */
+.ina-checkbox__input:focus + .ina-checkbox__box--checked {
+  outline: 3px solid #f3f3f3;
+}
+
+/* Invalid state yang tidak disabled */
+.ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
+  border-color: var(--ina-negative-600, var(--ina-error-600));
+}
+
+/* Interactive states */
+.ina-checkbox:not(.ina-checkbox--disabled) {
+  cursor: pointer;
+}
+
+.ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box {
+  cursor: pointer;
+}
+
+.ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__label {
+  cursor: pointer;
+}
+
+/* Animation untuk transisi state */
+.ina-checkbox__icon {
+  transition: color 150ms ease-in-out;
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+  .ina-checkbox__box,
+  .ina-checkbox__icon {
+    transition: none;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .ina-checkbox__box {
+    border-width: 2px;
+  }
+
+  .ina-checkbox__box--checked,
+  .ina-checkbox__box--indeterminate {
+    border-width: 2px;
+  }
+}
+
+/* Dark mode support */
+/* @media (prefers-color-scheme: dark) {
+  .ina-checkbox__box {
+    border-color: var(--ina-neutral-600);
+    background-color: var(--ina-neutral-900);
+  }
+
+  .ina-checkbox__box--unchecked:hover {
+    border-color: var(--ina-neutral-500);
+  }
+
+  .ina-checkbox__box--invalid {
+    border-color: var(--ina-error-400) !important;
+  }
+} */

package/src/components/chip.css

@@ -0,0 +1,228 @@
+/**
+ * Chip Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ * Sesuai dengan design system Figma
+ */
+
+.ina-chip {
+  /* Main container */
+  display: flex;
+  flex-direction: column;
+  gap: var(--ina-spacing-2);
+}
+
+.ina-chip__list {
+  /* Container untuk semua chips */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ina-spacing-2);
+}
+
+.ina-chip__item {
+  /* Base styles */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ina-radius-full);
+  font-weight: 500;
+  border: 1px solid;
+  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out,
+    color 150ms ease-in-out;
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+}
+
+/* Size: Small */
+.ina-chip__item--size-small {
+  height: 24px;
+  font-size: 12px;
+  padding: 0 10px;
+}
+
+/* Size: Medium */
+.ina-chip__item--size-medium {
+  height: 32px;
+  font-size: 14px;
+  padding: 0 12px;
+}
+
+/* ============================================
+   FILLED VARIANT
+   ============================================ */
+
+/* Filled - Default State */
+.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(.ina-chip__item--disabled) {
+  background-color: var(--ina-primary-25);
+  color: var(--ina-content-primary);
+  border-color: var(--ina-primary-25);
+}
+
+/* Filled - Hover State */
+.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(.ina-chip__item--disabled):hover {
+  background-color: var(--ina-primary-50);
+  color: var(--ina-content-primary);
+  border-color: var(--ina-primary-25);
+}
+
+/* Filled - Selected State */
+.ina-chip__item--variant-filled.ina-chip__item--selected {
+  background-color: var(--ina-primary-300);
+  color: var(--ina-neutral-25, #ffffff);
+  border-color: var(--ina-primary-300);
+}
+
+/* Filled - Disabled State */
+.ina-chip__item--variant-filled.ina-chip__item--disabled {
+  background-color: var(--ina-background-tertiary);
+  color: var(--ina-content-tertiary);
+  border-color: var(--ina-background-tertiary);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ============================================
+   OUTLINE VARIANT
+   ============================================ */
+
+/* Outline - Default State */
+.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(.ina-chip__item--disabled) {
+  background-color: var(--ina-neutral-25, #ffffff);
+  color: var(--ina-content-primary);
+  border-color: var(--ina-stroke-primary);
+}
+
+/* Outline - Hover State */
+.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(.ina-chip__item--disabled):hover {
+  background-color: var(--ina-primary-50);
+  color: var(--ina-content-primary);
+  border-color: var(--ina-stroke-primary);
+}
+
+/* Outline - Selected State */
+.ina-chip__item--variant-outline.ina-chip__item--selected {
+  background-color: var(--ina-primary-25);
+  color: var(--ina-primary-600);
+  border-color: var(--ina-primary-600);
+}
+
+/* Outline - Disabled State */
+.ina-chip__item--variant-outline.ina-chip__item--disabled {
+  background-color: var(--ina-background-tertiary);
+  color: var(--ina-content-tertiary);
+  border-color: var(--ina-stroke-primary);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Focus state */
+.ina-chip__item:focus-visible {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+/* Active/pressed state */
+.ina-chip__item:active:not(.ina-chip__item--disabled) {
+  transform: scale(0.98);
+}
+
+/* Custom field styling */
+.ina-chip__custom-field {
+  margin-top: var(--ina-spacing-2);
+}
+
+.ina-chip__custom-field .ina-text-field {
+  /* Targeting TextField component styling */
+  max-width: 50%; /* sm:max-w-1/2 */
+}
+
+@media (min-width: 768px) {
+  .ina-chip__custom-field .ina-text-field {
+    max-width: 25%; /* md:max-w-1/4 */
+  }
+}
+
+/* Loading state */
+.ina-chip__item--loading {
+  position: relative;
+  pointer-events: none;
+}
+
+.ina-chip__item--loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 1px solid transparent;
+  border-top: 1px solid currentColor;
+  border-radius: 50%;
+  animation: chip-spin 1s linear infinite;
+}
+
+@keyframes chip-spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-chip__list {
+    gap: var(--ina-spacing-1);
+  }
+
+  .ina-chip__custom-field .ina-text-field {
+    max-width: 100%; /* Full width on small screens */
+  }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+  .ina-chip__item,
+  .ina-chip__item:active {
+    transition: none;
+    transform: none;
+  }
+
+  .ina-chip__item--loading::after {
+    animation: none;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .ina-chip__item {
+    border-width: 2px;
+  }
+
+  .ina-chip__item:focus-visible {
+    outline-width: 3px;
+  }
+}
+
+/* Focus management */
+.ina-chip__item[tabindex='-1'] {
+  opacity: 0.6;
+}
+
+/* Animation untuk chip appearance */
+.ina-chip__item {
+  animation: chip-fade-in 150ms ease-out;
+}
+
+@keyframes chip-fade-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/components/collapse.css

@@ -0,0 +1,84 @@
+/**
+ * Collapse Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ */
+
+.ina-collapse {
+  /* Base collapse container */
+  overflow: hidden;
+  transition: max-height var(--ina-transition-base);
+}
+
+/* Animation states */
+.ina-collapse--entering {
+  max-height: 0;
+}
+
+.ina-collapse--entered {
+  max-height: 1000px; /* Adjust as needed, or use auto */
+}
+
+.ina-collapse--exiting {
+  max-height: 0;
+}
+
+/* Smooth height transitions */
+.ina-collapse--auto {
+  max-height: auto;
+}
+
+/* Customizable animation durations */
+.ina-collapse--slow {
+  transition-duration: 3000ms;
+}
+
+.ina-collapse--fast {
+  transition-duration: 150ms;
+}
+
+.ina-collapse--instant {
+  transition-duration: 0ms;
+}
+
+/* Height-based variants */
+.ina-collapse--small {
+  max-height: 200px;
+}
+
+.ina-collapse--medium {
+  max-height: 400px;
+}
+
+.ina-collapse--large {
+  max-height: 600px;
+}
+
+.ina-collapse--xl {
+  max-height: 800px;
+}
+
+/* Content wrapper */
+.ina-collapse__content {
+  /* Add any specific content styling here */
+}
+
+/* Animation easing variants */
+.ina-collapse--ease-in {
+  transition-timing-function: ease-in;
+}
+
+.ina-collapse--ease-out {
+  transition-timing-function: ease-out;
+}
+
+.ina-collapse--ease-in-out {
+  transition-timing-function: ease-in-out;
+}
+
+.ina-collapse--ease-linear {
+  transition-timing-function: linear;
+}
+
+.ina-collapse--ease-cubic {
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+}

package/src/components/confirmation.css

@@ -0,0 +1,131 @@
+/* Confirmation Component Styles */
+.ina-confirmation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ina-confirmation__backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.ina-confirmation__container {
+  position: relative;
+  z-index: 1001;
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.ina-confirmation__dialog {
+  background: var(--ina-color-background);
+  border-radius: var(--ina-border-radius-lg);
+  box-shadow: var(--ina-shadow-xl);
+  overflow: hidden;
+}
+
+.ina-confirmation__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ina-spacing-md);
+  padding: var(--ina-spacing-lg);
+}
+
+.ina-confirmation__icon {
+  flex-shrink: 0;
+  margin-top: var(--ina-spacing-xs);
+}
+
+.ina-confirmation__content {
+  flex: 1;
+}
+
+.ina-confirmation__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-xs);
+}
+
+.ina-confirmation__description {
+  font-size: var(--ina-font-size-sm);
+  color: var(--ina-color-text-secondary);
+  line-height: 1.5;
+}
+
+.ina-confirmation__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ina-spacing-sm);
+  padding: var(--ina-spacing-lg);
+  background: var(--ina-color-surface);
+  border-top: 1px solid var(--ina-color-border);
+}
+
+.ina-confirmation__button {
+  padding: var(--ina-spacing-sm) var(--ina-spacing-md);
+  border-radius: var(--ina-border-radius-md);
+  font-size: var(--ina-font-size-sm);
+  font-weight: var(--ina-font-weight-medium);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.ina-confirmation__button--cancel {
+  background: var(--ina-color-background);
+  color: var(--ina-color-text-primary);
+  border-color: var(--ina-color-border);
+}
+
+.ina-confirmation__button--cancel:hover {
+  background: var(--ina-color-surface);
+}
+
+.ina-confirmation__button--confirm {
+  background: var(--ina-color-primary);
+  color: var(--ina-color-white);
+}
+
+.ina-confirmation__button--confirm:hover {
+  background: var(--ina-color-primary-dark);
+}
+
+.ina-confirmation__button--variant-warning {
+  background: var(--ina-color-warning);
+  color: var(--ina-color-white);
+}
+
+.ina-confirmation__button--variant-warning:hover {
+  background: var(--ina-color-warning-dark);
+}
+
+.ina-confirmation__button--variant-error {
+  background: var(--ina-color-error);
+  color: var(--ina-color-white);
+}
+
+.ina-confirmation__button--variant-error:hover {
+  background: var(--ina-color-error-dark);
+}
+
+.ina-confirmation__button--variant-info {
+  background: var(--ina-color-info);
+  color: var(--ina-color-white);
+}
+
+.ina-confirmation__button--variant-info:hover {
+  background: var(--ina-color-info-dark);
+}