@loword/loword-design-system 0.0.13 → 0.0.14

package/dist/index.css

@@ -27,6 +27,7 @@
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
     --font-weight-normal: 400;
+    --radius-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
@@ -68,6 +69,7 @@
     --color-red500: #ff4747;
     --color-orange400: #ff7a33;
     --color-orange500: #ff6a00;
+    --color-yellow600: #ffcc24;
     --color-yellow700: #f0ac00;
     --color-green700: #00cc41;
     --color-danger50: #fef7f7;
@@ -80,7 +82,9 @@
     --color-accept50: #f0f6ff;
     --color-accept600: #5388ef;
     --color-success600: #2ed573;
+    --color-success800: #158a47;
     --color-warning600: #ffbe21;
+    --color-warning800: #b38000;
     --color-lb50: #e0e9ff;
     --color-lb100: #c3d4ff;
     --color-lb500: #6891f8;
@@ -517,6 +521,9 @@
   .z-50 {
     z-index: 50;
   }
+  .order-last {
+    order: 9999;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -1173,9 +1180,15 @@
   .mt-xs {
     margin-top: var(--spacing_8);
   }
+  .-mr-px {
+    margin-right: -1px;
+  }
   .mr-0\.75 {
     margin-right: calc(var(--spacing) * 0.75);
   }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1191,6 +1204,9 @@
   .mb-sm {
     margin-bottom: var(--spacing_12);
   }
+  .-ml-px {
+    margin-left: -1px;
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -1300,6 +1316,10 @@
     width: calc(var(--spacing) * 40);
     height: calc(var(--spacing) * 40);
   }
+  .size-\[1em\] {
+    width: 1em;
+    height: 1em;
+  }
   .size-\[30px\] {
     width: 30px;
     height: 30px;
@@ -1369,6 +1389,9 @@
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
+  .h-60 {
+    height: calc(var(--spacing) * 60);
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -1462,6 +1485,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .min-h-2 {
+    min-height: calc(var(--spacing) * 2);
+  }
   .min-h-4 {
     min-height: calc(var(--spacing) * 4);
   }
@@ -1526,6 +1552,9 @@
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
+  .w-1\/2 {
+    width: calc(1 / 2 * 100%);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
@@ -1556,6 +1585,9 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-44 {
     width: calc(var(--spacing) * 44);
   }
@@ -1619,6 +1651,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-2 {
+    min-width: calc(var(--spacing) * 2);
+  }
   .min-w-6 {
     min-width: calc(var(--spacing) * 6);
   }
@@ -1711,6 +1746,12 @@
     --tw-scale-z: 100%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
+  .scale-110 {
+    --tw-scale-x: 110%;
+    --tw-scale-y: 110%;
+    --tw-scale-z: 110%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .rotate-0 {
     rotate: 0deg;
   }
@@ -1846,6 +1887,9 @@
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
+  .gap-3\.5 {
+    gap: calc(var(--spacing) * 3.5);
+  }
   .gap-3xs {
     gap: var(--spacing_2);
   }
@@ -1971,10 +2015,17 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .rounded-t-2xl {
     border-top-left-radius: var(--radius-2xl);
     border-top-right-radius: var(--radius-2xl);
   }
+  .rounded-t-lg {
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+  }
   .rounded-t-md {
     border-top-left-radius: var(--radius-md);
     border-top-right-radius: var(--radius-md);
@@ -1995,6 +2046,9 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .rounded-tl-lg {
+    border-top-left-radius: var(--radius-lg);
+  }
   .rounded-r-2xl {
     border-top-right-radius: var(--radius-2xl);
     border-bottom-right-radius: var(--radius-2xl);
@@ -2011,10 +2065,17 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+  .rounded-tr-lg {
+    border-top-right-radius: var(--radius-lg);
+  }
   .rounded-b-2xl {
     border-bottom-right-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
   }
+  .rounded-b-lg {
+    border-bottom-right-radius: var(--radius-lg);
+    border-bottom-left-radius: var(--radius-lg);
+  }
   .rounded-br-md {
     border-bottom-right-radius: var(--radius-md);
   }
@@ -2041,14 +2102,38 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
   }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
+  .border-r-2 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 2px;
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-0 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0px;
+  }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
@@ -2212,6 +2297,9 @@
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
+  .fill-current {
+    fill: currentcolor;
+  }
   .fill-mono50 {
     fill: var(--color-mono50);
   }
@@ -2371,6 +2459,9 @@
   .pt-2\.5 {
     padding-top: calc(var(--spacing) * 2.5);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -2667,6 +2758,9 @@
   .text-neutral-500 {
     color: var(--color-neutral-500);
   }
+  .text-neutral100 {
+    color: var(--color-neutral100);
+  }
   .text-neutral200 {
     color: var(--color-neutral200);
   }
@@ -2679,6 +2773,9 @@
   .text-neutral500 {
     color: var(--color-neutral500);
   }
+  .text-neutral600 {
+    color: var(--color-neutral600);
+  }
   .text-neutral700 {
     color: var(--color-neutral700);
   }
@@ -2700,6 +2797,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .text-yellow600 {
+    color: var(--color-yellow600);
+  }
   .text-yellow700 {
     color: var(--color-yellow700);
   }
@@ -3031,6 +3131,66 @@
       color: var(--color-mono400);
     }
   }
+  .after\:absolute {
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .after\:inset-x-0 {
+    &::after {
+      content: var(--tw-content);
+      inset-inline: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:inset-y-0 {
+    &::after {
+      content: var(--tw-content);
+      inset-block: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:top-full {
+    &::after {
+      content: var(--tw-content);
+      top: 100%;
+    }
+  }
+  .after\:right-full {
+    &::after {
+      content: var(--tw-content);
+      right: 100%;
+    }
+  }
+  .after\:left-full {
+    &::after {
+      content: var(--tw-content);
+      left: 100%;
+    }
+  }
+  .after\:h-0\.5 {
+    &::after {
+      content: var(--tw-content);
+      height: calc(var(--spacing) * 0.5);
+    }
+  }
+  .after\:w-0\.5 {
+    &::after {
+      content: var(--tw-content);
+      width: calc(var(--spacing) * 0.5);
+    }
+  }
+  .after\:bg-transparent {
+    &::after {
+      content: var(--tw-content);
+      background-color: transparent;
+    }
+  }
+  .after\:content-\[\'\'\] {
+    &::after {
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
   .first\:rounded-t-lg {
     &:first-child {
       border-top-left-radius: var(--radius-lg);
@@ -3494,6 +3654,11 @@
       color: var(--color-neutral-500);
     }
   }
+  .data-disabled\:cursor-not-allowed {
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+  }
   .data-outside\:\*\:text-mono400 {
     &[data-outside] {
       :is(& > *) {
@@ -3541,6 +3706,11 @@
       outline-width: 3px;
     }
   }
+  .data-\[disabled\]\:opacity-40 {
+    &[data-disabled] {
+      opacity: 40%;
+    }
+  }
   .data-\[open\=false\]\:opacity-0 {
     &[data-open="false"] {
       opacity: 0%;
@@ -3661,6 +3831,243 @@
       }
     }
   }
+  .data-\[state\=active\]\:z-10 {
+    &[data-state="active"] {
+      z-index: 10;
+    }
+  }
+  .data-\[state\=active\]\:border-danger600 {
+    &[data-state="active"] {
+      border-color: var(--color-danger600);
+    }
+  }
+  .data-\[state\=active\]\:border-lb500 {
+    &[data-state="active"] {
+      border-color: var(--color-lb500);
+    }
+  }
+  .data-\[state\=active\]\:border-success800 {
+    &[data-state="active"] {
+      border-color: var(--color-success800);
+    }
+  }
+  .data-\[state\=active\]\:border-warning800 {
+    &[data-state="active"] {
+      border-color: var(--color-warning800);
+    }
+  }
+  .data-\[state\=active\]\:border-r-danger600 {
+    &[data-state="active"] {
+      border-right-color: var(--color-danger600);
+    }
+  }
+  .data-\[state\=active\]\:border-r-lb500 {
+    &[data-state="active"] {
+      border-right-color: var(--color-lb500);
+    }
+  }
+  .data-\[state\=active\]\:border-r-success800 {
+    &[data-state="active"] {
+      border-right-color: var(--color-success800);
+    }
+  }
+  .data-\[state\=active\]\:border-r-warning800 {
+    &[data-state="active"] {
+      border-right-color: var(--color-warning800);
+    }
+  }
+  .data-\[state\=active\]\:border-l-danger600 {
+    &[data-state="active"] {
+      border-left-color: var(--color-danger600);
+    }
+  }
+  .data-\[state\=active\]\:border-l-lb500 {
+    &[data-state="active"] {
+      border-left-color: var(--color-lb500);
+    }
+  }
+  .data-\[state\=active\]\:border-l-success800 {
+    &[data-state="active"] {
+      border-left-color: var(--color-success800);
+    }
+  }
+  .data-\[state\=active\]\:border-l-warning800 {
+    &[data-state="active"] {
+      border-left-color: var(--color-warning800);
+    }
+  }
+  .data-\[state\=active\]\:bg-tintBlue {
+    &[data-state="active"] {
+      background-color: var(--color-tintBlue);
+    }
+  }
+  .data-\[state\=active\]\:bg-tintGreen {
+    &[data-state="active"] {
+      background-color: var(--color-tintGreen);
+    }
+  }
+  .data-\[state\=active\]\:bg-tintRed {
+    &[data-state="active"] {
+      background-color: var(--color-tintRed);
+    }
+  }
+  .data-\[state\=active\]\:bg-tintYellow {
+    &[data-state="active"] {
+      background-color: var(--color-tintYellow);
+    }
+  }
+  .data-\[state\=active\]\:bg-white {
+    &[data-state="active"] {
+      background-color: var(--color-white);
+    }
+  }
+  .data-\[state\=active\]\:text-danger600 {
+    &[data-state="active"] {
+      color: var(--color-danger600);
+    }
+  }
+  .data-\[state\=active\]\:text-lb500 {
+    &[data-state="active"] {
+      color: var(--color-lb500);
+    }
+  }
+  .data-\[state\=active\]\:text-success800 {
+    &[data-state="active"] {
+      color: var(--color-success800);
+    }
+  }
+  .data-\[state\=active\]\:text-warning800 {
+    &[data-state="active"] {
+      color: var(--color-warning800);
+    }
+  }
+  .data-\[state\=active\]\:after\:bg-white {
+    &[data-state="active"] {
+      &::after {
+        content: var(--tw-content);
+        background-color: var(--color-white);
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:bg-tintBlue {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-tintBlue);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:bg-tintGreen {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-tintGreen);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:bg-tintRed {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-tintRed);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:bg-tintYellow {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-tintYellow);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:bg-white {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-white);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:text-danger600 {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-danger600);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:text-lb500 {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-lb500);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:text-success800 {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-success800);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:not-data-\[disabled\]\:hover\:text-warning800 {
+    &[data-state="active"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-warning800);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:data-\[disabled\]\:bg-mono50\/40 {
+    &[data-state="active"] {
+      &[data-disabled] {
+        background-color: color-mix(in srgb, #f6f7f9 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-mono50) 40%, transparent);
+        }
+      }
+    }
+  }
+  .data-\[state\=active\]\:data-\[disabled\]\:text-neutral600\/40 {
+    &[data-state="active"] {
+      &[data-disabled] {
+        color: color-mix(in srgb, #6a7079 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-neutral600) 40%, transparent);
+        }
+      }
+    }
+  }
   .data-\[state\=closed\]\:accordion-up {
     &[data-state="closed"] {
       animation: accordion-up 300ms ease-in-out;
@@ -3671,6 +4078,69 @@
       animation: fade-out 300ms ease-out forwards;
     }
   }
+  .data-\[state\=inactive\]\:bg-mono50 {
+    &[data-state="inactive"] {
+      background-color: var(--color-mono50);
+    }
+  }
+  .data-\[state\=inactive\]\:text-neutral600 {
+    &[data-state="inactive"] {
+      color: var(--color-neutral600);
+    }
+  }
+  .data-\[state\=inactive\]\:not-data-\[disabled\]\:hover\:bg-mono100 {
+    &[data-state="inactive"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            background-color: var(--color-mono100);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=inactive\]\:not-data-\[disabled\]\:hover\:text-neutral700 {
+    &[data-state="inactive"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-neutral700);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=inactive\]\:not-data-\[disabled\]\:hover\:text-neutral900 {
+    &[data-state="inactive"] {
+      &:not(*[data-disabled]) {
+        &:hover {
+          @media (hover: hover) {
+            color: var(--color-neutral900);
+          }
+        }
+      }
+    }
+  }
+  .data-\[state\=inactive\]\:data-\[disabled\]\:bg-mono50\/40 {
+    &[data-state="inactive"] {
+      &[data-disabled] {
+        background-color: color-mix(in srgb, #f6f7f9 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-mono50) 40%, transparent);
+        }
+      }
+    }
+  }
+  .data-\[state\=inactive\]\:data-\[disabled\]\:text-neutral600\/40 {
+    &[data-state="inactive"] {
+      &[data-disabled] {
+        color: color-mix(in srgb, #6a7079 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-neutral600) 40%, transparent);
+        }
+      }
+    }
+  }
   .data-\[state\=open\]\:accordion-down {
     &[data-state="open"] {
       animation: accordion-down 300ms ease-in-out;
@@ -5174,6 +5644,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -5241,6 +5716,7 @@
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-content: "";
     }
   }
 }

package/dist/index.d.ts

@@ -41,14 +41,16 @@ export { default as LDModalView } from './components/LDModal/LDModalView.js';
 export { default as openModal } from './components/LDModal/LDModal.js';
 export { default as LDNotification, type LDNotificationProps, type NotificationSize, } from './components/LDNotification/LDNotification.js';
 export { type NotificationType } from './components/LDNotification/NotificationBase.js';
-export { default as LDOTPInput } from './components/LDOTPInput/LDOTPInput.js';
 export { default as LDFormOTPInput } from './components/LDOTPInput/LDFormOTPInput.js';
+export { default as LDOTPInput } from './components/LDOTPInput/LDOTPInput.js';
 export { default as LDPagination } from './components/LDPagination/LDPagination.js';
 export { default as LDPopover } from './components/LDPopover/LDPopover.js';
 export { default as LDProgressBar, type LDProgressBarProps, } from './components/LDProgressBar/LDProgressBar.js';
 export { default as LDFormRadioGroup } from './components/LDRadio/LDFormRadioGroup.js';
 export { default as LDRadio } from './components/LDRadio/LDRadio.js';
 export { default as LDRadioGroup } from './components/LDRadio/LDRadioGroup.js';
+export { default as LDFormRate } from './components/LDRate/LDFormRate.js';
+export { default as LDRate, type LDRateProps, } from './components/LDRate/LDRate.js';
 export { default as LDScrollArea } from './components/LDScrollArea/LDScrollArea.js';
 export { default as LDSectionNav, type LDSectionNavProps, } from './components/LDSectionNav/LDSectionNav.js';
 export { default as LDFormMultiSelect } from './components/LDSelect/LDFormMultiSelect.js';
@@ -62,6 +64,7 @@ export { default as LDCollapsibleTanstackTable } from './components/LDTable/LDCo
 export { default as LDTable } from './components/LDTable/LDTable.js';
 export { default as LDTanstackTable } from './components/LDTable/LDTanstackTable.js';
 export { default as TableField } from './components/LDTable/TableField.js';
+export { default as LDTabs, type LDTabsPlacement, type LDTabsVariant, type LDTabsSize, type LDTabsColor, type LDTabsRootProps, type LDTabsListProps, type LDTabsTriggerProps, type LDTabsContentProps, } from './components/LDTabs/LDTabs.js';
 export { default as LDTeamHistory, type LDTeamHistoryProps, } from './components/LDTeamHistory/LDTeamHistory.js';
 export { default as LDFormTextarea } from './components/LDTextarea/LDFormTextarea.js';
 export { default as LDTextarea, TextareaContent, type LDTextareaProps, type TextareaContentProps, type TextareaSize, } from './components/LDTextarea/LDTextarea.js';