@idds/styles 1.2.11 → 1.2.13

package/src/components/toast.css

@@ -1,265 +0,0 @@
-/* Toast Component Styles */
-
-/* Base container */
-.ina-toast-container {
-  position: fixed;
-  z-index: 1000;
-  pointer-events: none;
-  display: flex;
-  gap: var(--ina-spacing-2);
-  padding: var(--ina-spacing-2);
-  max-width: 100vw;
-  box-sizing: border-box;
-}
-
-/* Position variants */
-.ina-toast-container--top-left {
-  top: var(--ina-spacing-4);
-  left: var(--ina-spacing-4);
-  align-items: flex-start;
-  flex-direction: column;
-}
-
-.ina-toast-container--top-right {
-  top: var(--ina-spacing-4);
-  right: var(--ina-spacing-4);
-  align-items: flex-end;
-  flex-direction: column;
-}
-
-.ina-toast-container--top-middle {
-  top: var(--ina-spacing-4);
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-  flex-direction: column;
-}
-
-.ina-toast-container--bottom-left {
-  bottom: var(--ina-spacing-4);
-  left: var(--ina-spacing-4);
-  align-items: flex-start;
-  flex-direction: column-reverse;
-}
-
-.ina-toast-container--bottom-right {
-  bottom: var(--ina-spacing-4);
-  right: var(--ina-spacing-4);
-  align-items: flex-end;
-  flex-direction: column-reverse;
-}
-
-.ina-toast-container--bottom-middle {
-  bottom: var(--ina-spacing-4);
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-  flex-direction: column-reverse;
-}
-
-.ina-toast-container--left-middle {
-  top: 50%;
-  left: var(--ina-spacing-4);
-  transform: translateY(-50%);
-  align-items: flex-start;
-  flex-direction: column;
-}
-
-.ina-toast-container--right-middle {
-  top: 50%;
-  right: var(--ina-spacing-4);
-  transform: translateY(-50%);
-  align-items: flex-end;
-  flex-direction: column;
-}
-
-/* Toast item wrapper */
-.ina-toast-item {
-  pointer-events: none;
-}
-
-/* Toast itself */
-.ina-toast {
-  pointer-events: auto;
-  border-radius: var(--ina-radius-lg);
-  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
-    0 4px 6px -2px rgba(10, 13, 18, 0.03);
-  padding: var(--ina-spacing-4);
-  display: flex;
-  align-items: center;
-  width: 100%;
-  min-width: 358px;
-  max-width: 100%;
-  transition: opacity 300ms ease-in-out;
-  background-color: var(--ina-background-primary);
-  border: 1px solid var(--ina-stroke-primary);
-  color: var(--ina-content-primary);
-  min-height: 40px;
-  font-weight: 500;
-}
-
-/* Toast content */
-.ina-toast__content {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0; /* Allow content to shrink below content size */
-}
-
-.ina-toast__icon {
-  margin-right: var(--ina-spacing-2);
-  margin-top: 0;
-  margin-bottom: 0;
-  color: var(--ina-white);
-}
-
-/* Toast text area */
-.ina-toast__text-area {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0; /* Allow text to shrink below content size */
-  overflow-wrap: break-word;
-  word-break: break-word;
-  margin: 0;
-  padding: 0;
-}
-
-.ina-toast__title {
-  font-size: var(--ina-font-xs);
-  font-weight: 500;
-  line-height: 1.4;
-  margin: 0;
-  padding: 0;
-}
-
-.ina-toast__description {
-  margin-top: var(--ina-spacing-1);
-  margin-bottom: 0;
-  padding: 0;
-  font-size: var(--ina-font-2xs);
-  line-height: 1.4;
-}
-
-/* Action area */
-.ina-toast__action-area {
-  margin-left: var(--ina-spacing-3);
-  flex-shrink: 0;
-}
-
-/* Close button */
-.ina-toast__close-button {
-  margin-left: var(--ina-spacing-2);
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: stroke-width var(--ina-transition-base);
-}
-
-.ina-toast__close-button:hover {
-  stroke-width: 3;
-}
-
-.ina-toast__close-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--ina-white);
-}
-
-/* Style variants */
-/* Note: Style variants are handled by state styles below */
-
-/* State styles - Solid (default style) */
-.ina-toast--state-default.ina-toast--style-solid {
-  background-color: var(--ina-content-primary) !important;
-  border: 1px solid var(--ina-content-primary) !important;
-  color: var(--ina-white) !important;
-}
-
-.ina-toast--state-destructive.ina-toast--style-solid {
-  background-color: var(--ina-negative-500) !important;
-  border: 1px solid var(--ina-negative-500) !important;
-  color: var(--ina-white) !important;
-}
-
-.ina-toast--state-positive.ina-toast--style-solid {
-  background-color: var(--ina-positive-700) !important;
-  border: 1px solid var(--ina-positive-700) !important;
-  color: var(--ina-white) !important;
-}
-
-/* State styles - Outline (default style) */
-.ina-toast--state-default.ina-toast--style-outline {
-  background-color: var(--ina-background-primary) !important;
-  border: 1px solid var(--ina-content-primary) !important;
-  color: var(--ina-content-primary) !important;
-}
-
-.ina-toast--state-destructive.ina-toast--style-outline {
-  background-color: var(--ina-negative-50) !important;
-  border: 1px solid var(--ina-negative-500) !important;
-  color: var(--ina-negative-500) !important;
-}
-
-.ina-toast--state-positive.ina-toast--style-outline {
-  background-color: var(--ina-positive-50) !important;
-  border: 1px solid var(--ina-positive-700) !important;
-  color: var(--ina-positive-700) !important;
-}
-
-/* Visibility states */
-.ina-toast--visible {
-  opacity: 1;
-}
-
-.ina-toast--hidden {
-  opacity: 0;
-}
-
-/* Responsive adjustments */
-/* Mobile (< 640px) */
-@media (max-width: 639px) {
-  .ina-toast {
-    /* Jika viewport < 358px, gunakan max-width dari viewport untuk mencegah overflow */
-    max-width: calc(100vw - var(--ina-spacing-8));
-    /* Min-width akan otomatis tidak berlaku jika max-width lebih kecil */
-    min-width: min(358px, calc(100vw - var(--ina-spacing-8)));
-    padding: var(--ina-spacing-3);
-    min-height: 40px;
-  }
-
-  .ina-toast__title {
-    font-size: var(--ina-font-xs);
-  }
-
-  .ina-toast__description {
-    font-size: var(--ina-font-2xs);
-  }
-}
-
-/* Small (>= 640px) */
-@media (min-width: 640px) {
-  .ina-toast {
-    min-height: 48px;
-  }
-
-  .ina-toast__title {
-    font-size: var(--ina-font-xs);
-  }
-}
-
-/* Large (>= 1024px) */
-@media (min-width: 1024px) {
-  .ina-toast {
-    min-height: 52px;
-  }
-
-  .ina-toast__title {
-    font-size: var(--ina-font-sm);
-  }
-}

package/src/components/toggle.css

@@ -1,195 +0,0 @@
-/* =========================== */
-/* TOGGLE SWITCH STYLES */
-/* =========================== */
-
-.ina-toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-}
-
-.ina-toggle--disabled {
-  cursor: not-allowed;
-}
-
-/* Hide the actual input */
-.ina-toggle__input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  border: none;
-  outline: none;
-}
-
-/* Track (the background oval) */
-.ina-toggle__track {
-  position: relative;
-  display: flex;
-  align-items: center;
-  background-color: var(--ina-background-secondary);
-  border-radius: 9999px;
-  transition: all var(--ina-transition-duration-200) ease-in-out;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-
-.ina-toggle__track--checked {
-  background-color: var(--ina-positive-500);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.ina-toggle__track--disabled {
-  background-color: var(--ina-background-tertiary);
-  cursor: not-allowed;
-}
-
-.ina-toggle__track--disabled.ina-toggle__track--checked {
-  background-color: var(--ina-background-tertiary);
-}
-
-/* Thumb (the sliding circle) */
-.ina-toggle__thumb {
-  position: absolute;
-  background-color: var(--ina-background-primary);
-  border-radius: 50%;
-  transition: all var(--ina-transition-duration-200) ease-in-out;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transform: translateX(0);
-  filter: drop-shadow(0 1px 2px rgba(10, 13, 18, 0.06))
-    drop-shadow(0 1px 3px rgba(10, 13, 18, 0.1));
-}
-
-.ina-toggle__thumb--checked {
-  transform: translateX(100%);
-}
-
-.ina-toggle__thumb--disabled {
-  background-color: var(--ina-background-secondary);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-/* Size variants */
-/* Small: 36px x 20px */
-.ina-toggle--size-sm .ina-toggle__track {
-  width: 36px;
-  height: 20px;
-}
-
-.ina-toggle--size-sm .ina-toggle__thumb {
-  width: 16px;
-  height: 16px;
-  top: 2px;
-  left: 2px;
-}
-
-.ina-toggle--size-sm .ina-toggle__thumb--checked {
-  transform: translateX(16px);
-}
-
-/* Medium: 44px x 24px */
-.ina-toggle--size-md .ina-toggle__track {
-  width: 44px;
-  height: 24px;
-}
-
-.ina-toggle--size-md .ina-toggle__thumb {
-  width: 20px;
-  height: 20px;
-  top: 2px;
-  left: 2px;
-}
-
-.ina-toggle--size-md .ina-toggle__thumb--checked {
-  transform: translateX(20px);
-}
-
-/* Hover states */
-.ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track {
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
-    0 0 4px 6px rgba(31, 31, 31, 0.04);
-}
-
-.ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__thumb {
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
-    0 0 4px 6px rgba(31, 31, 31, 0.04);
-}
-
-/* Focus states */
-.ina-toggle__input:focus + .ina-toggle__track {
-  outline: 2px solid var(--ina-positive-500);
-  outline-offset: 2px;
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
-    0 0 4px 6px rgba(31, 31, 31, 0.04);
-}
-
-.ina-toggle__input:focus:not(:focus-visible) + .ina-toggle__track {
-  outline: none;
-}
-
-/* Active states */
-.ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb {
-  transform: scale(0.95);
-}
-
-.ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb--checked {
-  transform: translateX(20px) scale(0.95);
-}
-
-.ina-toggle--size-sm:not(.ina-toggle--disabled):active
-  .ina-toggle__thumb--checked {
-  transform: translateX(16px) scale(0.95);
-}
-
-/* Dark mode */
-[data-theme='dark'] .ina-toggle__track {
-  background-color: var(--ina-stroke-secondary);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-[data-theme='dark'] .ina-toggle__track--checked {
-  background-color: var(--ina-positive-500);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-[data-theme='dark'] .ina-toggle__track--disabled {
-  background-color: var(--ina-background-tertiary);
-}
-
-[data-theme='dark'] .ina-toggle__track--disabled.ina-toggle__track--checked {
-  background-color: var(--ina-background-tertiary);
-}
-
-[data-theme='dark'] .ina-toggle__thumb {
-  background-color: var(--ina-background-primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-}
-
-[data-theme='dark'] .ina-toggle__thumb--disabled {
-  background-color: var(--ina-background-secondary);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-[data-theme='dark']
-  .ina-toggle:not(.ina-toggle--disabled):hover
-  .ina-toggle__thumb {
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
-    0 0 4px 6px rgba(31, 31, 31, 0.04);
-}
-
-[data-theme='dark'] .ina-toggle__input:focus + .ina-toggle__track {
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
-    0 0 4px 6px rgba(31, 31, 31, 0.04);
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-toggle__track,
-  .ina-toggle__thumb {
-    transition: none;
-  }
-}