@idds/styles 1.0.26

package/src/components/tab-horizontal.css

@@ -0,0 +1,278 @@
+/* =========================== */
+/* HORIZONTAL TAB STYLES       */
+/* =========================== */
+
+.ina-tab-horizontal {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+}
+
+.ina-tab-horizontal--full-width {
+  width: 100%;
+}
+
+.ina-tab-horizontal__container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ina-tab-horizontal__container--full-width {
+  width: 100%;
+}
+
+/* Base Tab Styles */
+.ina-tab-horizontal__tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: all var(--ina-transition-base);
+  white-space: nowrap;
+  position: relative;
+  border-radius: 4px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  font-family: Inter, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: var(--ina-spacing-letter-normal, 0);
+}
+
+.ina-tab-horizontal__tab--full-width {
+  flex: 1 0 0;
+  min-width: 120px;
+}
+
+/* Size: Small */
+.ina-tab-horizontal__tab--size-sm {
+  font-size: 14px;
+  line-height: 20px;
+  height: 36px;
+}
+
+/* Size: Medium */
+.ina-tab-horizontal__tab--size-md {
+  font-size: 16px;
+  line-height: 20px;
+  height: 40px;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .ina-tab-horizontal__tab--size-sm {
+    font-size: 12px;
+    height: 32px;
+  }
+
+  .ina-tab-horizontal__tab--size-md {
+    font-size: 14px;
+    height: 36px;
+  }
+}
+
+/* Variant: Outline (Default) */
+.ina-tab-horizontal__tab--variant-outline {
+  color: var(--ina-content-secondary);
+  background: transparent;
+}
+
+.ina-tab-horizontal__tab--variant-outline:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+.ina-tab-horizontal__tab--variant-outline.ina-tab-horizontal__tab--selected {
+  color: var(--ina-content-primary);
+  font-weight: 600;
+  border-bottom: 2px solid var(--ina-content-primary);
+  border-radius: 0;
+}
+
+.ina-tab-horizontal--use-brand-color .ina-tab-horizontal__tab--variant-outline {
+  color: var(--ina-content-secondary);
+}
+
+.ina-tab-horizontal--use-brand-color
+  .ina-tab-horizontal__tab--variant-outline:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-primary-500);
+}
+
+.ina-tab-horizontal--use-brand-color
+  .ina-tab-horizontal__tab--variant-outline.ina-tab-horizontal__tab--selected {
+  color: var(--ina-primary-500);
+  border-bottom-color: var(--ina-primary-500);
+}
+
+/* Variant: Button Brand */
+.ina-tab-horizontal__tab--variant-button-brand {
+  color: var(--ina-content-secondary);
+  background: transparent;
+}
+
+.ina-tab-horizontal__tab--variant-button-brand:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+.ina-tab-horizontal__tab--variant-button-brand.ina-tab-horizontal__tab--selected {
+  background-color: var(--ina-primary-500);
+  color: var(--ina-white) !important;
+  font-weight: 600;
+}
+
+/* Variant: Button White */
+.ina-tab-horizontal--variant-button-white {
+  background-color: var(--ina-background-secondary);
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.ina-tab-horizontal--variant-button-white .ina-tab-horizontal__container {
+  gap: 0;
+}
+
+.ina-tab-horizontal__tab--variant-button-white {
+  color: var(--ina-content-secondary);
+  background: transparent;
+  border-radius: 4px;
+}
+
+.ina-tab-horizontal__tab--variant-button-white:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+.ina-tab-horizontal__tab--variant-button-white.ina-tab-horizontal__tab--selected {
+  background-color: var(--ina-background-primary);
+  color: var(--ina-content-primary);
+  font-weight: 600;
+  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
+    0 4px 6px -2px rgba(10, 13, 18, 0.03);
+}
+
+.ina-tab-horizontal--use-brand-color
+  .ina-tab-horizontal__tab--variant-button-white {
+  color: var(--ina-content-secondary);
+}
+
+.ina-tab-horizontal--use-brand-color
+  .ina-tab-horizontal__tab--variant-button-white:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-primary-500);
+}
+
+.ina-tab-horizontal--use-brand-color
+  .ina-tab-horizontal__tab--variant-button-white.ina-tab-horizontal__tab--selected {
+  color: var(--ina-primary-500);
+}
+
+/* Disabled State */
+.ina-tab-horizontal__tab--disabled {
+  color: var(--ina-content-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ina-tab-horizontal__tab--disabled:hover {
+  color: var(--ina-content-disabled);
+  background-color: transparent;
+}
+
+.ina-tab-horizontal--disabled .ina-tab-horizontal__tab {
+  color: var(--ina-content-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ina-tab-horizontal--disabled .ina-tab-horizontal__tab:hover {
+  color: var(--ina-content-disabled);
+  background-color: transparent;
+}
+
+/* Focus State */
+.ina-tab-horizontal__tab:focus {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+.ina-tab-horizontal__tab:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Dark Mode */
+[data-theme='dark'] .ina-tab-horizontal__tab--variant-outline {
+  color: var(--ina-content-secondary);
+}
+
+[data-theme='dark']
+  .ina-tab-horizontal__tab--variant-outline:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark']
+  .ina-tab-horizontal__tab--variant-button-brand:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+[data-theme='dark']
+  .ina-tab-horizontal__tab--variant-button-brand:hover:not(
+    .ina-tab-horizontal__tab--selected
+  ) {
+  color: var(--ina-content-primary);
+}
+.ina-tab-horizontal__tab--variant-button-brand:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+.ina-tab-horizontal__tab--variant-button-brand:hover:not(
+    .ina-tab-horizontal__tab--selected
+  ) {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark']
+  .ina-tab-horizontal__tab--variant-outline.ina-tab-horizontal__tab--selected {
+  color: var(--ina-content-primary);
+  border-bottom-color: var(--ina-content-primary);
+}
+
+[data-theme='dark'] .ina-tab-horizontal__tab--variant-button-brand {
+  color: var(--ina-content-secondary);
+}
+
+[data-theme='dark']
+  .ina-tab-horizontal__tab--variant-button-brand:hover:not(
+    .ina-tab-horizontal__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark']
+  .ina-tab-horizontal__tab--variant-button-brand.ina-tab-horizontal__tab--selected {
+  background-color: var(--ina-primary-500);
+  color: var(--ina-white) !important;
+}
+
+[data-theme='dark'] .ina-tab-horizontal--variant-button-white {
+  background-color: var(--ina-background-secondary);
+}
+
+[data-theme='dark']
+  .ina-tab-horizontal__tab--variant-button-white.ina-tab-horizontal__tab--selected {
+  background-color: var(--ina-background-primary);
+  color: var(--ina-content-primary);
+}

package/src/components/tab-vertical.css

@@ -0,0 +1,261 @@
+/* =========================== */
+/* VERTICAL TAB STYLES         */
+/* =========================== */
+
+.ina-tab-vertical {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+}
+
+.ina-tab-vertical__container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Base Tab Styles */
+.ina-tab-vertical__tab {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: all var(--ina-transition-base);
+  text-align: left;
+  position: relative;
+  border-radius: 4px;
+  width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  font-family: Inter, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: var(--ina-spacing-letter-normal, 0);
+}
+
+/* Size: Small */
+.ina-tab-vertical__tab--size-sm {
+  font-size: 14px;
+  line-height: 20px;
+  height: 36px;
+}
+
+/* Size: Medium */
+.ina-tab-vertical__tab--size-md {
+  font-size: 16px;
+  line-height: 20px;
+  height: 40px;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .ina-tab-vertical__tab--size-sm {
+    font-size: 12px;
+    height: 32px;
+  }
+
+  .ina-tab-vertical__tab--size-md {
+    font-size: 14px;
+    height: 36px;
+  }
+}
+
+/* Variant: Outline (Default) */
+.ina-tab-vertical__tab--variant-outline {
+  color: var(--ina-content-secondary);
+  background: transparent;
+}
+
+.ina-tab-vertical__tab--variant-outline:hover:not(
+    .ina-tab-vertical__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+.ina-tab-vertical__tab--variant-outline.ina-tab-vertical__tab--selected {
+  color: var(--ina-content-primary);
+  font-weight: 600;
+  border-left: 3px solid var(--ina-content-primary);
+  border-radius: 0;
+  padding-left: 13px; /* 16px - 3px border */
+}
+
+.ina-tab-vertical--use-brand-color .ina-tab-vertical__tab--variant-outline {
+  color: var(--ina-content-secondary);
+}
+
+.ina-tab-vertical--use-brand-color
+  .ina-tab-vertical__tab--variant-outline:hover:not(
+    .ina-tab-vertical__tab--disabled
+  ) {
+  color: var(--ina-primary-500);
+}
+
+.ina-tab-vertical--use-brand-color
+  .ina-tab-vertical__tab--variant-outline.ina-tab-vertical__tab--selected {
+  color: var(--ina-primary-500);
+  border-left-color: var(--ina-primary-500);
+}
+
+/* Variant: Button Brand */
+.ina-tab-vertical__tab--variant-button-brand {
+  color: var(--ina-content-secondary);
+  background: transparent;
+}
+
+.ina-tab-vertical__tab--variant-button-brand:hover:not(
+    .ina-tab-vertical__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+.ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
+  background-color: var(--ina-primary-500);
+  color: var(--ina-white) !important;
+  font-weight: 600;
+}
+
+/* Variant: Button White */
+.ina-tab-vertical--variant-button-white {
+  background-color: var(--ina-background-secondary);
+  border-radius: 4px;
+  padding: 4px;
+}
+
+.ina-tab-vertical--variant-button-white .ina-tab-vertical__container {
+  gap: 0;
+}
+
+.ina-tab-vertical__tab--variant-button-white {
+  color: var(--ina-content-secondary);
+  background: transparent;
+  border-radius: 4px;
+}
+
+.ina-tab-vertical__tab--variant-button-white:hover:not(
+    .ina-tab-vertical__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+.ina-tab-vertical__tab--variant-button-white.ina-tab-vertical__tab--selected {
+  background-color: var(--ina-background-primary);
+  color: var(--ina-content-primary);
+  font-weight: 600;
+  border-radius: 4px;
+  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
+    0 4px 6px -2px rgba(10, 13, 18, 0.03);
+}
+
+.ina-tab-vertical--use-brand-color
+  .ina-tab-vertical__tab--variant-button-white {
+  color: var(--ina-content-secondary);
+}
+
+.ina-tab-vertical--use-brand-color
+  .ina-tab-vertical__tab--variant-button-white:hover:not(
+    .ina-tab-vertical__tab--disabled
+  ) {
+  color: var(--ina-primary-500);
+}
+
+.ina-tab-vertical--use-brand-color
+  .ina-tab-vertical__tab--variant-button-white.ina-tab-vertical__tab--selected {
+  color: var(--ina-primary-500);
+}
+
+/* Disabled State */
+.ina-tab-vertical__tab--disabled {
+  color: var(--ina-content-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ina-tab-vertical__tab--disabled:hover {
+  color: var(--ina-content-disabled);
+  background-color: transparent;
+}
+
+.ina-tab-vertical--disabled .ina-tab-vertical__tab {
+  color: var(--ina-content-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ina-tab-vertical--disabled .ina-tab-vertical__tab:hover {
+  color: var(--ina-content-disabled);
+  background-color: transparent;
+}
+
+/* Focus State */
+.ina-tab-vertical__tab:focus {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+
+.ina-tab-vertical__tab:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Dark Mode */
+[data-theme='dark'] .ina-tab-vertical__tab--variant-outline {
+  color: var(--ina-content-secondary);
+}
+
+[data-theme='dark']
+  .ina-tab-vertical__tab--variant-outline:hover:not(
+    .ina-tab-vertical__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark']
+  .ina-tab-vertical__tab--variant-outline.ina-tab-vertical__tab--selected {
+  color: var(--ina-content-primary);
+  border-left-color: var(--ina-content-primary);
+}
+
+[data-theme='dark'] .ina-tab-vertical__tab--variant-button-brand {
+  color: var(--ina-content-secondary);
+}
+
+[data-theme='dark']
+  .ina-tab-vertical__tab--variant-button-brand:hover:not(
+    .ina-tab-vertical__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+[data-theme='dark']
+  .ina-tab-vertical__tab--variant-button-brand:hover:not(
+    .ina-tab-vertical__tab--selected
+  ) {
+  color: var(--ina-content-primary);
+}
+.ina-tab-vertical__tab--variant-button-brand:hover:not(
+    .ina-tab-vertical__tab--disabled
+  ) {
+  color: var(--ina-content-primary);
+}
+.ina-tab-vertical__tab--variant-button-brand:hover:not(
+    .ina-tab-vertical__tab--selected
+  ) {
+  color: var(--ina-content-primary);
+}
+
+[data-theme='dark']
+  .ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
+  background-color: var(--ina-primary-500);
+  color: var(--ina-white) !important;
+}
+
+[data-theme='dark'] .ina-tab-vertical--variant-button-white {
+  background-color: var(--ina-background-secondary);
+}
+
+[data-theme='dark']
+  .ina-tab-vertical__tab--variant-button-white.ina-tab-vertical__tab--selected {
+  background-color: var(--ina-background-primary);
+  color: var(--ina-content-primary);
+}

package/src/components/table-progress-bar.css

@@ -0,0 +1,48 @@
+/* TableProgressBar Component Styles */
+
+/* Base container */
+.ina-table-progress-bar {
+  width: 100%;
+}
+
+/* Animation states */
+@keyframes ina-progress-animate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.ina-table-progress-bar--animating {
+  animation: ina-progress-animate 0.2s ease-in-out;
+}
+
+/* Variant styles */
+.ina-table-progress-bar--variant-primary {
+  /* Inherits from ProgressBar component */
+}
+
+.ina-table-progress-bar--variant-secondary {
+  /* Inherits from ProgressBar component */
+}
+
+.ina-table-progress-bar--variant-success {
+  /* Inherits from ProgressBar component */
+}
+
+.ina-table-progress-bar--variant-warning {
+  /* Inherits from ProgressBar component */
+}
+
+.ina-table-progress-bar--variant-error {
+  /* Inherits from ProgressBar component */
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-table-progress-bar {
+    /* Mobile-specific adjustments */
+  }
+}