@idds/styles 1.2.11 → 1.2.13

package/src/components/chart.css

@@ -1,81 +0,0 @@
-/* Chart Component Styles */
-.ina-chart {
-  background: var(--ina-color-background);
-  border-radius: var(--ina-border-radius-md);
-  padding: var(--ina-spacing-md);
-}
-
-.ina-chart__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-chart__subtitle {
-  font-size: var(--ina-font-size-sm);
-  color: var(--ina-color-text-secondary);
-  margin-bottom: var(--ina-spacing-md);
-}
-
-.ina-chart__container {
-  position: relative;
-  width: 100%;
-  height: 300px;
-}
-
-.ina-chart__canvas {
-  width: 100%;
-  height: 100%;
-}
-
-.ina-chart__legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ina-spacing-md);
-  margin-top: var(--ina-spacing-md);
-  padding-top: var(--ina-spacing-md);
-  border-top: 1px solid var(--ina-color-border);
-}
-
-.ina-chart__legend-item {
-  display: flex;
-  align-items: center;
-  gap: var(--ina-spacing-xs);
-  cursor: pointer;
-  padding: var(--ina-spacing-xs);
-  border-radius: var(--ina-border-radius-sm);
-  transition: background-color 0.2s ease;
-}
-
-.ina-chart__legend-item:hover {
-  background: var(--ina-color-surface);
-}
-
-.ina-chart__legend-color {
-  width: 12px;
-  height: 12px;
-  border-radius: 2px;
-}
-
-.ina-chart__legend-label {
-  font-size: var(--ina-font-size-sm);
-  color: var(--ina-color-text-primary);
-}
-
-.ina-chart__status {
-  margin-top: var(--ina-spacing-sm);
-  font-size: var(--ina-font-size-sm);
-}
-
-.ina-chart__status--success {
-  color: var(--ina-color-success);
-}
-
-.ina-chart__status--error {
-  color: var(--ina-color-error);
-}
-
-.ina-chart__status--warning {
-  color: var(--ina-color-warning);
-}

package/src/components/checkbox.css

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

@@ -1,245 +0,0 @@
-/**
- * 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);
-  }
-}
-.ina-chip__input {
-  min-width: 100%;
-  max-width: 100%;
-}
-@media (max-width: 640px) {
-  .ina-chip__input {
-    min-width: 500px;
-  }
-}

package/src/components/collapse.css

@@ -1,84 +0,0 @@
-/**
- * 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);
-}