@idds/styles 1.0.42 → 1.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/styles",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "description": "Shared CSS styles and colors for INA Digital Design System",
   "type": "module",
   "main": "./src/index.css",

package/src/components/drawer.css

@@ -260,7 +260,6 @@
   .ina-drawer--position-right .ina-drawer__panel {
     /* Default width for panels without specific width variant */
     min-width: 420px;
-    width: 420px;
     max-width: 520px;
     /* Full height for side panels */
     height: 100vh;
@@ -268,24 +267,21 @@
   }
 
   /* Width variants for desktop - Side panels (left/right) */
-  /* .ina-drawer--position-left .ina-drawer__panel--width-sm,
+  .ina-drawer--position-left .ina-drawer__panel--width-sm,
   .ina-drawer--position-right .ina-drawer__panel--width-sm {
-    min-width: 320px !important;
-    max-width: 400px !important;
+    width: 420px !important;
     height: 100vh !important;
     max-height: 100vh !important;
-  } */
+  }
 
-  /* .ina-drawer--position-left .ina-drawer__panel--width-md,
+  .ina-drawer--position-left .ina-drawer__panel--width-md,
   .ina-drawer--position-right .ina-drawer__panel--width-md {
-    width: 400px !important;
-    min-width: 400px !important;
-    max-width: 500px !important;
+    width: 520px !important;
     height: 100vh !important;
     max-height: 100vh !important;
   }
 
-  .ina-drawer--position-left .ina-drawer__panel--width-lg,
+  /* .ina-drawer--position-left .ina-drawer__panel--width-lg,
   .ina-drawer--position-right .ina-drawer__panel--width-lg {
     width: 500px !important;
     min-width: 500px !important;

package/src/components/radio-input.css

@@ -40,12 +40,6 @@
   background-color: var(--ina-neutral-50);
 }
 
-.ina-radio-input__option:focus-within {
-  background-color: var(--ina-neutral-100);
-  outline: 2px solid var(--ina-primary-500);
-  outline-offset: 2px;
-}
-
 .ina-radio-input__option--disabled {
   cursor: not-allowed;
   opacity: 0.6;
@@ -96,8 +90,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 8px;
-  height: 8px;
+  width: 11px;
+  height: 11px;
   border-radius: 50%;
   background-color: var(--ina-stroke-tertiary, #141414);
 }
@@ -111,7 +105,7 @@
 
 /* Disabled states */
 .ina-radio-input__field:disabled {
-  border-color: var(--ina-neutral-200, #E5E5E5);
+  border-color: var(--ina-neutral-200, #e5e5e5);
   background-color: var(--ina-background-secondary, var(--ina-neutral-50));
   cursor: not-allowed;
   opacity: 1;
@@ -120,8 +114,11 @@
 
 /* Disabled + Checked state - Higher specificity */
 .ina-radio-input__field:disabled:checked {
-  border-color: var(--ina-neutral-200, #E5E5E5) !important;
-  background-color: var(--ina-background-secondary, var(--ina-neutral-50)) !important;
+  border-color: var(--ina-neutral-200, #e5e5e5) !important;
+  background-color: var(
+    --ina-background-secondary,
+    var(--ina-neutral-50)
+  ) !important;
   filter: none;
 }
 
@@ -134,7 +131,7 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--ina-neutral-200, #E5E5E5);
+  background-color: var(--ina-neutral-200, #e5e5e5);
 }
 
 /* Radio option label */
@@ -153,7 +150,7 @@
 }
 
 /* Size variants */
-.ina-radio-input--size-sm .ina-radio-input__main-label {
+/* .ina-radio-input--size-sm .ina-radio-input__main-label {
   font-size: var(--ina-font-xs);
 }
 
@@ -164,9 +161,9 @@
 .ina-radio-input--size-sm .ina-radio-input__field {
   width: 16px;
   height: 16px;
-}
+} */
 
-.ina-radio-input--size-lg .ina-radio-input__main-label {
+/* .ina-radio-input--size-lg .ina-radio-input__main-label {
   font-size: var(--ina-font-base);
 }
 
@@ -177,7 +174,7 @@
 .ina-radio-input--size-lg .ina-radio-input__field {
   width: 24px;
   height: 24px;
-}
+} */
 
 /* Orientation variants */
 .ina-radio-input--orientation-horizontal .ina-radio-input__group {

package/src/components/single-file-upload.css

@@ -0,0 +1,184 @@
+/**
+ * Single File Upload Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-"
+ * Sesuai dengan design Figma
+ */
+
+.ina-single-file-upload {
+  width: 300px;
+  height: 72px;
+  position: relative;
+}
+
+.ina-single-file-upload__container {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-rounded-lg, 8px);
+  background: var(--ina-background-primary, #fff);
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.ina-single-file-upload__container:hover:not(.ina-single-file-upload__container--disabled) {
+  border-color: var(--ina-guide-500, #0968f6);
+}
+
+.ina-single-file-upload__container--active {
+  border: 1px solid var(--ina-guide-500, #0968f6);
+  box-shadow: 0 0 6px 0 rgba(9, 104, 246, 0.1),
+    0 0 4px 6px rgba(9, 104, 246, 0.04);
+}
+
+.ina-single-file-upload__container--disabled {
+  background: var(--ina-background-secondary);
+  border-color: var(--ina-stroke-primary);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ina-single-file-upload__input {
+  display: none;
+}
+
+/* Default State - Upload Icon */
+.ina-single-file-upload__icon-wrapper {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ina-single-file-upload__icon-wrapper--default {
+  color: var(--ina-content-primary);
+}
+
+.ina-single-file-upload__icon-wrapper--disabled {
+  color: var(--ina-content-tertiary);
+}
+
+/* Success State - File Icon */
+.ina-single-file-upload__icon-wrapper--file {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 8px;
+  background: var(--ina-background-secondary);
+  border-radius: var(--ina-rounded-lg, 8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ina-single-file-upload__file-icon {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Content Area */
+.ina-single-file-upload__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ina-single-file-upload__title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--ina-content-primary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ina-single-file-upload__description {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--ina-content-secondary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ina-single-file-upload__container--disabled .ina-single-file-upload__title,
+.ina-single-file-upload__container--disabled .ina-single-file-upload__description {
+  color: var(--ina-content-tertiary);
+}
+
+/* Progress State */
+.ina-single-file-upload__progress {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ina-single-file-upload__progress-bar {
+  width: 100%;
+  height: 4px;
+  background: var(--ina-background-secondary);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.ina-single-file-upload__progress-fill {
+  height: 100%;
+  background: var(--ina-guide-500, #0968f6);
+  transition: width 0.3s ease;
+}
+
+.ina-single-file-upload__progress-text {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: var(--ina-content-secondary);
+  margin: 0;
+}
+
+/* Delete Button */
+.ina-single-file-upload__delete-button {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ina-content-primary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.ina-single-file-upload__delete-button:hover {
+  color: var(--ina-content-negative, var(--ina-red-600));
+}
+
+.ina-single-file-upload__delete-button:focus-visible {
+  outline: 2px solid var(--ina-guide-500, #0968f6);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+

package/src/components/stepper.css

@@ -1,20 +1,21 @@
 .ina-stepper {
   display: flex;
-  width: 100%;
   position: relative;
 }
 
 /* Horizontal Layout */
 .ina-stepper--horizontal {
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
+  width: 100%;
 }
 
 /* Vertical Layout */
 .ina-stepper--vertical {
   flex-direction: column;
   align-items: flex-start;
+  height: 100%;
 }
 
 /* Responsive: Horizontal stepper becomes vertical on mobile */
@@ -26,6 +27,7 @@
   .ina-stepper--horizontal-responsive {
     flex-direction: column;
     align-items: flex-start;
+    height: 100%;
   }
 
   .ina-stepper--horizontal-responsive .ina-stepper__item {
@@ -59,7 +61,7 @@
   position: relative;
   z-index: 1;
   flex-shrink: 0;
-  padding: 0 0.5rem;
+  padding: 0;
 }
 
 .ina-stepper--vertical .ina-stepper__item {
@@ -81,17 +83,17 @@
   height: 24px;
   min-width: 24px;
   min-height: 24px;
-  border-radius: 4px;
+  border-radius: var(--ina-rounded-lg, 8px);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-size: 16px;
   font-weight: 500;
   transition: background-color 0.2s ease, border-color 0.2s ease,
     color 0.2s ease;
   border: 1px solid var(--ina-stroke-primary);
-  color: var(--ina-content-secondary);
-  background-color: var(--ina-background-primary);
+  color: var(--ina-content-tertiary);
+  background-color: var(--ina-background-secondary);
 }
 
 .ina-stepper--vertical .ina-stepper__icon-wrapper {
@@ -99,14 +101,14 @@
 }
 
 .ina-stepper__step-number {
-  color: var(--ina-content-secondary);
-  font-size: 0.75rem;
+  color: inherit;
+  font-size: 16px;
   font-weight: 500;
 }
 
 .ina-stepper__check-icon {
-  color: var(--ina-background-primary);
-  stroke: var(--ina-background-primary);
+  color: inherit;
+  stroke: currentColor;
   width: 16px;
   height: 16px;
 }
@@ -138,13 +140,12 @@
 /* Separator */
 .ina-stepper__separator {
   flex-grow: 1;
+  width: 2px;
   height: 2px;
   background-color: var(--ina-stroke-primary);
-  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from top */
-  /* Separator height is 2px, so we need to position it so its center aligns with icon center */
-  /* Using align-self: center and margin-top to offset: 12px (icon center) - 1px (half separator) = 11px */
-  align-self: flex-start;
-  margin: 11px -0.5rem 0 -0.5rem;
+  /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px */
+  /* Separator width/height is 2px, so we need to position it so its center aligns with icon center */
+  align-self: center;
   position: relative;
   z-index: 0;
   transition: background-color 0.2s ease;
@@ -153,7 +154,6 @@
 .ina-stepper--vertical .ina-stepper__separator {
   width: 2px;
   height: 2rem;
-  margin: 0;
   flex-grow: 0;
   align-self: flex-start;
   /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
@@ -163,25 +163,49 @@
 }
 
 /* States */
+/* Active State */
+.ina-stepper__item--active .ina-stepper__icon-wrapper {
+  border-color: var(--ina-guide-500);
+  color: var(--ina-guide-500);
+  background-color: var(--ina-guide-50);
+}
+
+.ina-stepper__item--active .ina-stepper__label {
+  color: var(--ina-guide-500);
+  font-weight: 500;
+}
+
+/* Done/Completed State */
 .ina-stepper__item--completed .ina-stepper__icon-wrapper {
-  background-color: var(--ina-semantic-success);
-  border-color: var(--ina-semantic-success);
-  color: var(--ina-background-primary);
+  border-color: var(--ina-positive-600);
+  color: var(--ina-positive-600);
+  background-color: var(--ina-positive-50);
 }
 
 .ina-stepper__item--completed .ina-stepper__label {
-  color: var(--ina-content-primary);
+  color: var(--ina-positive-600);
 }
 
-.ina-stepper__item--active .ina-stepper__icon-wrapper {
-  border-color: var(--ina-semantic-info);
-  color: var(--ina-semantic-info);
-  background-color: var(--ina-background-primary);
+/* Inactive State (default) */
+.ina-stepper__item:not(.ina-stepper__item--active):not(.ina-stepper__item--completed):not(.ina-stepper__item--error) .ina-stepper__icon-wrapper {
+  border-color: var(--ina-stroke-primary);
+  color: var(--ina-content-tertiary);
+  background-color: var(--ina-background-secondary);
 }
 
-.ina-stepper__item--active .ina-stepper__label {
-  color: var(--ina-content-primary);
-  font-weight: 500;
+.ina-stepper__item:not(.ina-stepper__item--active):not(.ina-stepper__item--completed):not(.ina-stepper__item--error) .ina-stepper__label {
+  color: var(--ina-content-tertiary);
+}
+
+/* Error State */
+.ina-stepper__item--error .ina-stepper__icon-wrapper {
+  border-color: var(--ina-negative-500);
+  color: var(--ina-negative-500);
+  background-color: var(--ina-negative-50);
+}
+
+.ina-stepper__item--error .ina-stepper__label {
+  color: var(--ina-negative-500);
 }
 
 .ina-stepper__item--clickable {
@@ -197,9 +221,11 @@
   cursor: not-allowed;
 }
 
-/* Completed separator - thick 2px stroke-primary */
+/* Separator States */
+/* Completed separator - positive-600 */
 .ina-stepper__separator--completed {
-  background-color: var(--ina-stroke-primary);
+  background-color: var(--ina-positive-600);
+  width: 2px;
   height: 2px;
 }
 
@@ -207,3 +233,8 @@
   width: 2px;
   height: 2rem;
 }
+
+/* Inactive separator - stroke-primary (default) */
+.ina-stepper__separator:not(.ina-stepper__separator--completed) {
+  background-color: var(--ina-stroke-primary);
+}