@idds/styles 1.0.26

package/src/components/year-picker.css

@@ -0,0 +1,423 @@
+/* =========================== */
+/* YEAR PICKER STYLES          */
+/* =========================== */
+
+.ina-year-picker {
+  position: relative;
+  display: inline-block;
+}
+
+/* Trigger Button */
+.ina-year-picker__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ina-spacing-1) var(--ina-spacing-4);
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-radius-lg);
+  background-color: var(--ina-background-primary);
+  color: var(--ina-content-primary);
+  font-size: var(--ina-font-xs);
+  font-weight: var(--ina-font-medium);
+  cursor: pointer;
+  transition: all var(--ina-transition-fast);
+  min-width: 80px;
+  gap: var(--ina-spacing-2);
+}
+.ina-year-picker__trigger--size-sm {
+  height: 32px;
+}
+.ina-year-picker__trigger--size-md {
+  height: 36px;
+}
+/* Desktop >= 768px */
+@media (min-width: 768px) {
+  .ina-year-picker__trigger-md {
+    height: 44px;
+  }
+}
+
+.ina-year-picker__trigger:hover {
+  background-color: var(--ina-neutral-50);
+}
+
+.ina-year-picker__trigger:focus {
+  outline: none;
+  background-color: var(--ina-background-primary);
+  border-color: var(--ina-content-primary);
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+}
+
+.ina-year-picker__trigger--disabled {
+  background-color: var(--ina-background-secondary);
+  color: var(--ina-content-tertiary);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ina-year-picker__trigger--disabled:hover {
+  background-color: var(--ina-background-secondary);
+  border-color: var(--ina-stroke-primary);
+}
+
+.ina-year-picker__trigger--readonly {
+  background-color: var(--ina-background-secondary);
+  cursor: default;
+}
+
+.ina-year-picker__trigger--readonly:hover {
+  background-color: var(--ina-background-secondary);
+  border-color: var(--ina-stroke-primary);
+}
+
+/* Trigger Text */
+.ina-year-picker__trigger-text {
+  flex: 1;
+  text-align: left;
+  font-size: var(--ina-font-xs);
+  font-weight: var(--ina-font-medium);
+  color: inherit;
+}
+
+/* Icon */
+.ina-year-picker__icon {
+  flex-shrink: 0;
+  color: var(--ina-content-dark-secondary);
+}
+
+/* Clear Button */
+.ina-year-picker__clear-button {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ina-content-dark-secondary);
+  transition: color var(--ina-transition-base);
+}
+
+.ina-year-picker__clear-button:hover:not(:disabled) {
+  color: var(--ina-content-secondary);
+}
+
+.ina-year-picker__clear-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ina-year-picker__clear-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Panel */
+.ina-year-picker__panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: var(--ina-spacing-1);
+  background-color: var(
+    --ina-background-primary
+  ) !important; /* Ensure solid background */
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-radius-xl);
+  box-shadow: var(--ina-shadow-lg);
+  z-index: 10006; /* Higher than MonthPicker panel (10005) and DatePicker panel (10004) */
+  width: 320px;
+  max-width: calc(
+    100vw - 16px
+  ); /* Ensure panel doesn't exceed viewport width */
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all var(--ina-transition-fast);
+  /* Ensure panel is not clipped by parent containers */
+  max-height: 400px;
+  overflow-y: auto;
+  /* Ensure panel content is solid */
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.ina-year-picker__panel--open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* Right-aligned panel positioning */
+.ina-year-picker__panel--right-aligned {
+  left: auto !important;
+  right: 0 !important;
+}
+
+/* Header */
+.ina-year-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ina-spacing-4);
+  border-bottom: 1px solid var(--ina-stroke-primary);
+}
+
+/* Navigation Buttons */
+.ina-year-picker__nav-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: var(--ina-spacing-2);
+  background-color: transparent;
+  color: var(--ina-content-primary);
+  border: none;
+  border-radius: var(--ina-radius-base);
+  cursor: pointer;
+  transition: all var(--ina-transition-fast);
+  font-size: var(--ina-font-xs);
+}
+
+@media (min-width: 768px) {
+  .ina-year-picker__nav-button {
+    font-size: var(--ina-font-base);
+  }
+}
+
+.ina-year-picker__nav-button:hover:not(:disabled) {
+  background-color: var(--ina-neutral-50);
+}
+
+.ina-year-picker__nav-button:disabled {
+  color: var(--ina-content-tertiary);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.ina-year-picker__nav-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Decade Range */
+.ina-year-picker__decade-range {
+  font-size: var(--ina-font-xs);
+  font-weight: var(--ina-font-medium);
+  color: var(--ina-content-primary);
+  text-align: center;
+  flex: 1;
+}
+
+/* Year Grid */
+.ina-year-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--ina-spacing-1);
+  background-color: var(--ina-background-primary);
+  padding: var(--ina-spacing-4);
+  border-radius: var(--ina-radius-base);
+}
+
+/* Year Options */
+.ina-year-picker__year-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ina-spacing-2) var(--ina-spacing-3);
+  font-size: var(--ina-font-xs);
+  font-weight: var(--ina-font-medium);
+  color: var(--ina-content-primary);
+  background-color: var(--ina-white);
+  border: 1px solid var(--ina-border-light);
+  border-radius: var(--ina-radius-lg);
+  cursor: pointer;
+  transition: all var(--ina-transition-fast);
+  min-height: 40px;
+  max-width: 50px;
+}
+
+.ina-year-picker__year-option:hover:not(:disabled) {
+  background-color: var(--ina-background-secondary);
+}
+
+.ina-year-picker__year-option--selected {
+  background-color: var(--ina-content-primary);
+  color: var(--ina-white);
+  font-weight: var(--ina-font-medium);
+}
+
+.ina-year-picker__year-option.ina-year-picker__year-option--selected:hover {
+  font-weight: var(--ina-font-semibold);
+  background-color: var(--ina-content-primary);
+}
+
+.ina-year-picker__year-option--hovered:not(
+    .ina-year-picker__year-option--selected
+  ) {
+  background-color: var(--ina-background-tertiary);
+}
+.ina-year-picker__year-option:disabled {
+  color: var(--ina-content-tertiary);
+  cursor: not-allowed;
+  opacity: 0.8;
+}
+
+.ina-year-picker__year-option--disabled {
+  color: var(--ina-content-tertiary);
+  cursor: not-allowed;
+  opacity: 0.4;
+  background-color: var(--ina-background-secondary);
+}
+
+.ina-year-picker__year-option--disabled:hover {
+  background-color: var(--ina-background-secondary);
+  opacity: 0.4;
+}
+
+/* =========================== */
+/* DARK MODE SUPPORT           */
+/* =========================== */
+
+[data-theme='dark'] .ina-year-picker__trigger {
+  background-color: var(--ina-background-primary);
+  border-color: var(--ina-stroke-primary);
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark'] .ina-year-picker__trigger:hover {
+  background-color: var(--ina-background-tertiary);
+  border-color: var(--ina-stroke-secondary);
+}
+
+[data-theme='dark'] .ina-year-picker__trigger:focus {
+  border-color: var(--ina-content-primary);
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+}
+
+[data-theme='dark'] .ina-year-picker__panel {
+  background-color: var(--ina-background-primary);
+  border-color: var(--ina-stroke-primary);
+  box-shadow: var(--ina-shadow-lg);
+}
+
+[data-theme='dark'] .ina-year-picker__header {
+  border-bottom-color: var(--ina-stroke-primary);
+}
+
+[data-theme='dark'] .ina-year-picker__nav-button {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark'] .ina-year-picker__nav-button:hover:not(:disabled) {
+  background-color: var(--ina-background-tertiary);
+}
+
+[data-theme='dark'] .ina-year-picker__decade-range {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark'] .ina-year-picker__year-option {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark'] .ina-year-picker__year-option:hover:not(:disabled) {
+  background-color: var(--ina-background-tertiary);
+}
+
+[data-theme='dark'] .ina-year-picker__year-option--selected {
+  background-color: var(--ina-content-primary);
+  color: var(--ina-white);
+}
+
+[data-theme='dark'] .ina-year-picker__year-option--selected:hover {
+  font-weight: var(--ina-font-semibold);
+}
+
+[data-theme='dark']
+  .ina-year-picker__year-option--hovered:not(
+    .ina-year-picker__year-option--selected
+  ) {
+  background-color: var(--ina-primary-100);
+  color: var(--ina-primary-800);
+}
+
+[data-theme='dark'] .ina-year-picker__year-option--disabled {
+  color: var(--ina-content-tertiary);
+  opacity: 0.4;
+  background-color: var(--ina-background-secondary);
+}
+
+[data-theme='dark'] .ina-year-picker__year-option--disabled:hover {
+  background-color: var(--ina-background-secondary);
+  opacity: 0.4;
+}
+
+/* =========================== */
+/* RESPONSIVE DESIGN           */
+/* =========================== */
+
+@media (max-width: 640px) {
+  .ina-year-picker__panel {
+    width: calc(100vw - 2rem);
+    max-width: 320px;
+  }
+
+  .ina-year-picker__grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--ina-spacing-1);
+    padding: 0.375rem; /* 6px */
+  }
+
+  .ina-year-picker__year-option {
+    min-height: 36px;
+    font-size: 10px;
+    padding: 4px 8px;
+  }
+
+  .ina-year-picker__header {
+    margin-bottom: var(--ina-spacing-3);
+    padding-bottom: 0.375rem; /* 6px */
+    padding: var(--ina-spacing-3);
+  }
+
+  .ina-year-picker__nav-button {
+    width: 28px;
+    height: 28px;
+    padding: var(--ina-spacing-1);
+  }
+}
+
+@media (max-width: 480px) {
+  .ina-year-picker__panel {
+    width: calc(100vw - 1.5rem);
+    max-width: 280px;
+  }
+
+  .ina-year-picker__grid {
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.25rem;
+    padding: var(--ina-spacing-1);
+  }
+
+  .ina-year-picker__year-option {
+    min-height: 32px;
+    font-size: 10px;
+    padding: 4px 8px;
+  }
+
+  .ina-year-picker__header {
+    margin-bottom: var(--ina-spacing-2);
+  }
+
+  .ina-year-picker__nav-button {
+    width: 24px;
+    height: 24px;
+    padding: 0.25rem;
+  }
+
+  .ina-year-picker__decade-range {
+    font-size: var(--ina-font-xs);
+  }
+}

package/src/index.css

@@ -0,0 +1,3 @@
+/* Main entry point for @idds/styles */
+@import './colors/index.css';
+@import './components/reset.css';

package/src/tailwind/css/bgn.css

@@ -0,0 +1,43 @@
+/**
+ * BGN Color Tokens for Tailwind CSS v4
+ * Banking & Financial Services Theme
+ */
+
+@theme {
+  /* Primary shades */
+  --color-primary-50: var(--ina-primary-50);
+  --color-primary-100: var(--ina-primary-100);
+  --color-primary-200: var(--ina-primary-200);
+  --color-primary-300: var(--ina-primary-300);
+  --color-primary-400: var(--ina-primary-400);
+  --color-primary-500: var(--ina-primary-500);
+  --color-primary-600: var(--ina-primary-600);
+  --color-primary-700: var(--ina-primary-700);
+  --color-primary-800: var(--ina-primary-800);
+  --color-primary-900: var(--ina-primary-900);
+
+  /* Brand-specific colors */
+  --color-bgn-brand-primary: var(--ina-bgn-brand-primary);
+  --color-bgn-stroke-primary: var(--ina-bgn-stroke-primary);
+  --color-background-tertiary: var(--ina-background-tertiary);
+
+  /* Content colors */
+  --color-content-light-primary: var(--ina-content-primary);
+  --color-content-light-secondary: var(--ina-content-secondary);
+  --color-content-dark-disabled: var(--ina-content-tertiary);
+
+  /* Neutral colors */
+  --color-neutral-500: var(--ina-neutral-500);
+  --color-neutral-700: var(--ina-neutral-700);
+  --color-neutral-900: var(--ina-neutral-900);
+
+  /* Sentiment colors */
+  --color-sentiment-info-400: var(--ina-info-400);
+  --color-sentiment-info-500: var(--ina-info-500);
+  --color-sentiment-positive-500: var(--ina-positive-500);
+  --color-sentiment-warning-500: var(--ina-warning-500);
+
+  /* Accent colors */
+  --color-accent-coral-orange: var(--ina-accent-coral-orange);
+  --color-accent-yellow: var(--ina-accent-yellow);
+}

package/src/tailwind/css/bkn.css

@@ -0,0 +1,37 @@
+/**
+ * BKN Color Tokens for Tailwind CSS v4
+ * Badan Kepegawaian Negara Theme
+ */
+
+@theme {
+  /* Primary shades */
+  --color-primary-25: var(--ina-primary-25);
+  --color-primary-50: var(--ina-primary-50);
+  --color-primary-100: var(--ina-primary-100);
+  --color-primary-200: var(--ina-primary-200);
+  --color-primary-300: var(--ina-primary-300);
+  --color-primary-400: var(--ina-primary-400);
+  --color-primary-500: var(--ina-primary-500);
+  --color-primary-600: var(--ina-primary-600);
+  --color-primary-700: var(--ina-primary-700);
+  --color-primary-800: var(--ina-primary-800);
+  --color-primary-900: var(--ina-primary-900);
+
+  /* Secondary shades */
+  --color-secondary-25: var(--ina-secondary-25);
+  --color-secondary-50: var(--ina-secondary-50);
+  --color-secondary-100: var(--ina-secondary-100);
+  --color-secondary-200: var(--ina-secondary-200);
+  --color-secondary-300: var(--ina-secondary-300);
+  --color-secondary-400: var(--ina-secondary-400);
+  --color-secondary-500: var(--ina-secondary-500);
+  --color-secondary-600: var(--ina-secondary-600);
+  --color-secondary-700: var(--ina-secondary-700);
+  --color-secondary-800: var(--ina-secondary-800);
+  --color-secondary-900: var(--ina-secondary-900);
+
+  /* Interactive hover */
+  --color-bkn-brand-hover: var(--ina-bkn-brand-hover);
+  --color-bkn-neutral-hover: var(--ina-bkn-neutral-hover);
+}
+