@dmsi/wedgekit-react 0.0.5 → 0.0.6

package/dist/index.css

@@ -50,6 +50,7 @@
     --color-action-300: var(--color-action-300-user-selected, #459ad4);
     --color-action-400: var(--color-action-400-user-selected, #0077c8);
     --color-action-500: var(--color-action-500-user-selected, #00365a);
+    --color-link-000: var( --color-link-000-user-selected, var(--color-action-000) );
     --color-link-100: var( --color-link-100-user-selected, var(--color-action-100) );
     --color-link-200: var( --color-link-200-user-selected, var(--color-action-200) );
     --color-link-300: var( --color-link-300-user-selected, var(--color-action-300) );
@@ -172,10 +173,14 @@
     --color-text-secondary-disabled: var(--color-neutral-300);
     --color-text-secondary-error: var(--color-critical-400);
     --color-text-success-normal: var(--color-success-500);
+    --color-text-success-disabled: var(--color-neutral-400);
+    --color-text-success-error: var(--color-critical-400);
     --color-text-warning-normal: var(--color-warning-500);
-    --color-text-link-normal: var(--color-action-400);
-    --color-text-link-hover: var(--color-action-500);
-    --color-text-link-active: var(--color-action-300);
+    --color-text-warning-disabled: var(--color-neutral-400);
+    --color-text-warning-error: var(--color-critical-400);
+    --color-text-link-normal: var(--color-link-400);
+    --color-text-link-hover: var(--color-link-500);
+    --color-text-link-active: var(--color-link-300);
     --color-text-link-disabled: var(--color-neutral-400);
     --color-border-primary-normal: var(--color-neutral-300);
     --color-border-primary-focus: var(--color-action-400);
@@ -240,6 +245,10 @@
     --color-icon-action-primary-hover: var(--color-action-500);
     --color-icon-action-primary-active: var(--color-action-300);
     --color-icon-action-primary-disabled: var(--color-neutral-300);
+    --color-icon-action-secondary-normal: var(--color-action-400);
+    --color-icon-action-secondary-hover: var(--color-action-500);
+    --color-icon-action-secondary-active: var(--color-action-300);
+    --color-icon-action-secondary-disabled: var(--color-neutral-400);
     --color-icon-on-action-primary-normal: var(--color-neutral-000);
     --color-icon-on-action-primary-hover: var(--color-neutral-000);
     --color-icon-on-action-primary-active: var(--color-neutral-000);
@@ -248,6 +257,10 @@
     --color-icon-on-action-secondary-hover: var(--color-action-500);
     --color-icon-on-action-secondary-active: var(--color-action-300);
     --color-icon-on-action-secondary-disabled: var(--color-neutral-400);
+    --color-icon-action-critical-normal: var(--color-critical-400);
+    --color-icon-action-critical-hover: var(--color-critical-500);
+    --color-icon-action-critical-active: var(--color-critical-300);
+    --color-icon-action-critical-disabled: var(--color-neutral-400);
     --color-icon-action-critical-secondary-normal: var(--color-critical-400);
     --color-icon-action-critical-secondary-hover: var(--color-critical-500);
     --color-icon-action-critical-secondary-active: var(--color-critical-300);
@@ -613,6 +626,9 @@
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
@@ -709,15 +725,18 @@
   .h-auto {
     height: auto;
   }
+  .h-fit {
+    height: fit-content;
+  }
   .h-full {
     height: 100%;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-10 {
     max-height: calc(var(--spacing) * 10);
   }
-  .max-h-\[calc\(100vh-32px\)\] {
-    max-height: calc(100vh - 32px);
-  }
   .max-h-full {
     max-height: 100%;
   }
@@ -733,6 +752,9 @@
   .min-h-\[34px\] {
     min-height: 34px;
   }
+  .min-h-mobile-container-padding {
+    min-height: var(--spacing-mobile-container-padding);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -787,24 +809,18 @@
   .w-px {
     width: 1px;
   }
+  .w-screen {
+    width: 100vw;
+  }
   .max-w-25 {
     max-width: calc(var(--spacing) * 25);
   }
   .max-w-38 {
     max-width: calc(var(--spacing) * 38);
   }
-  .max-w-120 {
-    max-width: calc(var(--spacing) * 120);
-  }
-  .max-w-180 {
-    max-width: calc(var(--spacing) * 180);
-  }
   .max-w-240 {
     max-width: calc(var(--spacing) * 240);
   }
-  .max-w-300 {
-    max-width: calc(var(--spacing) * 300);
-  }
   .max-w-\[400px\] {
     max-width: 400px;
   }
@@ -838,6 +854,9 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
@@ -1046,6 +1065,11 @@
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
+  .divide-border-primary-normal {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-border-primary-normal);
+    }
+  }
   .divide-neutral-200 {
     :where(& > :not(:last-child)) {
       border-color: var(--color-neutral-200);
@@ -1264,15 +1288,45 @@
   .bg-action-500 {
     background-color: var(--color-action-500);
   }
+  .bg-background-action-critical-primary-active {
+    background-color: var(--color-background-action-critical-primary-active);
+  }
+  .bg-background-action-critical-primary-disabled {
+    background-color: var(--color-background-action-critical-primary-disabled);
+  }
+  .bg-background-action-critical-primary-hover {
+    background-color: var(--color-background-action-critical-primary-hover);
+  }
   .bg-background-action-critical-primary-normal {
     background-color: var(--color-background-action-critical-primary-normal);
   }
+  .bg-background-action-critical-secondary-active {
+    background-color: var(--color-background-action-critical-secondary-active);
+  }
+  .bg-background-action-critical-secondary-disabled {
+    background-color: var(--color-background-action-critical-secondary-disabled);
+  }
+  .bg-background-action-critical-secondary-hover {
+    background-color: var(--color-background-action-critical-secondary-hover);
+  }
   .bg-background-action-critical-secondary-normal {
     background-color: var(--color-background-action-critical-secondary-normal);
   }
+  .bg-background-action-primary-active {
+    background-color: var(--color-background-action-primary-active);
+  }
+  .bg-background-action-primary-disabled {
+    background-color: var(--color-background-action-primary-disabled);
+  }
+  .bg-background-action-primary-hover {
+    background-color: var(--color-background-action-primary-hover);
+  }
   .bg-background-action-primary-normal {
     background-color: var(--color-background-action-primary-normal);
   }
+  .bg-background-action-secondary-active {
+    background-color: var(--color-background-action-secondary-active);
+  }
   .bg-background-action-secondary-disabled {
     background-color: var(--color-background-action-secondary-disabled);
   }
@@ -1300,12 +1354,45 @@
   .bg-background-primary-normal {
     background-color: var(--color-background-primary-normal);
   }
+  .bg-background-secondary-normal {
+    background-color: var(--color-background-secondary-normal);
+  }
   .bg-background-success-normal {
     background-color: var(--color-background-success-normal);
   }
   .bg-background-warning-normal {
     background-color: var(--color-background-warning-normal);
   }
+  .bg-border-action-active {
+    background-color: var(--color-border-action-active);
+  }
+  .bg-border-action-critical-active {
+    background-color: var(--color-border-action-critical-active);
+  }
+  .bg-border-action-critical-disabled {
+    background-color: var(--color-border-action-critical-disabled);
+  }
+  .bg-border-action-critical-hover {
+    background-color: var(--color-border-action-critical-hover);
+  }
+  .bg-border-action-critical-normal {
+    background-color: var(--color-border-action-critical-normal);
+  }
+  .bg-border-action-disabled {
+    background-color: var(--color-border-action-disabled);
+  }
+  .bg-border-action-hover {
+    background-color: var(--color-border-action-hover);
+  }
+  .bg-border-action-normal {
+    background-color: var(--color-border-action-normal);
+  }
+  .bg-border-primary-error {
+    background-color: var(--color-border-primary-error);
+  }
+  .bg-border-primary-focus {
+    background-color: var(--color-border-primary-focus);
+  }
   .bg-border-primary-normal {
     background-color: var(--color-border-primary-normal);
   }
@@ -1360,6 +1447,105 @@
   .bg-critical-500 {
     background-color: var(--color-critical-500);
   }
+  .bg-icon-action-critical-active {
+    background-color: var(--color-icon-action-critical-active);
+  }
+  .bg-icon-action-critical-disabled {
+    background-color: var(--color-icon-action-critical-disabled);
+  }
+  .bg-icon-action-critical-hover {
+    background-color: var(--color-icon-action-critical-hover);
+  }
+  .bg-icon-action-critical-normal {
+    background-color: var(--color-icon-action-critical-normal);
+  }
+  .bg-icon-action-primary-active {
+    background-color: var(--color-icon-action-primary-active);
+  }
+  .bg-icon-action-primary-disabled {
+    background-color: var(--color-icon-action-primary-disabled);
+  }
+  .bg-icon-action-primary-hover {
+    background-color: var(--color-icon-action-primary-hover);
+  }
+  .bg-icon-action-primary-normal {
+    background-color: var(--color-icon-action-primary-normal);
+  }
+  .bg-icon-action-secondary-active {
+    background-color: var(--color-icon-action-secondary-active);
+  }
+  .bg-icon-action-secondary-disabled {
+    background-color: var(--color-icon-action-secondary-disabled);
+  }
+  .bg-icon-action-secondary-hover {
+    background-color: var(--color-icon-action-secondary-hover);
+  }
+  .bg-icon-action-secondary-normal {
+    background-color: var(--color-icon-action-secondary-normal);
+  }
+  .bg-icon-brand-primary-active {
+    background-color: var(--color-icon-brand-primary-active);
+  }
+  .bg-icon-brand-primary-disabled {
+    background-color: var(--color-icon-brand-primary-disabled);
+  }
+  .bg-icon-brand-primary-hover {
+    background-color: var(--color-icon-brand-primary-hover);
+  }
+  .bg-icon-brand-primary-normal {
+    background-color: var(--color-icon-brand-primary-normal);
+  }
+  .bg-icon-critical-disabled {
+    background-color: var(--color-icon-critical-disabled);
+  }
+  .bg-icon-critical-normal {
+    background-color: var(--color-icon-critical-normal);
+  }
+  .bg-icon-on-action-primary-active {
+    background-color: var(--color-icon-on-action-primary-active);
+  }
+  .bg-icon-on-action-primary-disabled {
+    background-color: var(--color-icon-on-action-primary-disabled);
+  }
+  .bg-icon-on-action-primary-hover {
+    background-color: var(--color-icon-on-action-primary-hover);
+  }
+  .bg-icon-on-action-primary-normal {
+    background-color: var(--color-icon-on-action-primary-normal);
+  }
+  .bg-icon-primary-disabled {
+    background-color: var(--color-icon-primary-disabled);
+  }
+  .bg-icon-primary-normal {
+    background-color: var(--color-icon-primary-normal);
+  }
+  .bg-icon-success-disabled {
+    background-color: var(--color-icon-success-disabled);
+  }
+  .bg-icon-success-normal {
+    background-color: var(--color-icon-success-normal);
+  }
+  .bg-icon-warning-disabled {
+    background-color: var(--color-icon-warning-disabled);
+  }
+  .bg-icon-warning-normal {
+    background-color: var(--color-icon-warning-normal);
+  }
+  .bg-link-100 {
+    background-color: var(--color-link-100);
+  }
+  .bg-link-200 {
+    background-color: var(--color-link-200);
+  }
+  .bg-link-300 {
+    background-color: var(--color-link-300);
+  }
+  .bg-link-400 {
+    background-color: var(--color-link-400);
+  }
+  .bg-link-500 {
+    background-color: var(--color-link-500);
+  }
   .bg-neutral-000 {
     background-color: var(--color-neutral-000);
   }
@@ -1405,18 +1591,99 @@
   .bg-success-500 {
     background-color: var(--color-success-500);
   }
+  .bg-text-action-critical-active {
+    background-color: var(--color-text-action-critical-active);
+  }
+  .bg-text-action-critical-disabled {
+    background-color: var(--color-text-action-critical-disabled);
+  }
+  .bg-text-action-critical-hover {
+    background-color: var(--color-text-action-critical-hover);
+  }
+  .bg-text-action-critical-normal {
+    background-color: var(--color-text-action-critical-normal);
+  }
   .bg-text-action-primary-active {
     background-color: var(--color-text-action-primary-active);
   }
   .bg-text-action-primary-disabled {
     background-color: var(--color-text-action-primary-disabled);
   }
+  .bg-text-action-primary-hover {
+    background-color: var(--color-text-action-primary-hover);
+  }
   .bg-text-action-primary-normal {
     background-color: var(--color-text-action-primary-normal);
   }
+  .bg-text-critical-disabled {
+    background-color: var(--color-text-critical-disabled);
+  }
+  .bg-text-critical-error {
+    background-color: var(--color-text-critical-error);
+  }
+  .bg-text-critical-normal {
+    background-color: var(--color-text-critical-normal);
+  }
+  .bg-text-link-active {
+    background-color: var(--color-text-link-active);
+  }
+  .bg-text-link-disabled {
+    background-color: var(--color-text-link-disabled);
+  }
+  .bg-text-link-hover {
+    background-color: var(--color-text-link-hover);
+  }
+  .bg-text-link-normal {
+    background-color: var(--color-text-link-normal);
+  }
+  .bg-text-on-action-primary-active {
+    background-color: var(--color-text-on-action-primary-active);
+  }
+  .bg-text-on-action-primary-disabled {
+    background-color: var(--color-text-on-action-primary-disabled);
+  }
+  .bg-text-on-action-primary-hover {
+    background-color: var(--color-text-on-action-primary-hover);
+  }
+  .bg-text-on-action-primary-normal {
+    background-color: var(--color-text-on-action-primary-normal);
+  }
+  .bg-text-primary-disabled {
+    background-color: var(--color-text-primary-disabled);
+  }
+  .bg-text-primary-error {
+    background-color: var(--color-text-primary-error);
+  }
   .bg-text-primary-normal {
     background-color: var(--color-text-primary-normal);
   }
+  .bg-text-secondary-disabled {
+    background-color: var(--color-text-secondary-disabled);
+  }
+  .bg-text-secondary-error {
+    background-color: var(--color-text-secondary-error);
+  }
+  .bg-text-secondary-normal {
+    background-color: var(--color-text-secondary-normal);
+  }
+  .bg-text-success-disabled {
+    background-color: var(--color-text-success-disabled);
+  }
+  .bg-text-success-error {
+    background-color: var(--color-text-success-error);
+  }
+  .bg-text-success-normal {
+    background-color: var(--color-text-success-normal);
+  }
+  .bg-text-warning-disabled {
+    background-color: var(--color-text-warning-disabled);
+  }
+  .bg-text-warning-error {
+    background-color: var(--color-text-warning-error);
+  }
+  .bg-text-warning-normal {
+    background-color: var(--color-text-warning-normal);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1540,9 +1807,15 @@
   .px-mobile-component-gap {
     padding-inline: var(--spacing-mobile-component-gap);
   }
+  .px-mobile-component-padding {
+    padding-inline: var(--spacing-mobile-component-padding);
+  }
   .px-mobile-container-padding {
     padding-inline: var(--spacing-mobile-container-padding);
   }
+  .px-mobile-layout-padding {
+    padding-inline: var(--spacing-mobile-layout-padding);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1734,9 +2007,6 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
-  .break-all {
-    word-break: break-all;
-  }
   .text-ellipsis {
     text-overflow: ellipsis;
   }
@@ -3377,11 +3647,21 @@
       padding-inline: var(--spacing-desktop-compact-component-gap);
     }
   }
+  .compact\:px-desktop-compact-component-padding {
+    &:where([data-compact]) {
+      padding-inline: var(--spacing-desktop-compact-component-padding);
+    }
+  }
   .compact\:px-desktop-compact-container-padding {
     &:where([data-compact]) {
       padding-inline: var(--spacing-desktop-compact-container-padding);
     }
   }
+  .compact\:px-desktop-compact-layout-padding {
+    &:where([data-compact]) {
+      padding-inline: var(--spacing-desktop-compact-layout-padding);
+    }
+  }
   .compact\:py-desktop-compact-component-gap {
     &:where([data-compact]) {
       padding-block: var(--spacing-desktop-compact-component-gap);
@@ -3518,6 +3798,51 @@
       display: none;
     }
   }
+  .desktop\:h-auto {
+    @container root (width >= 48rem) {
+      height: auto;
+    }
+  }
+  .desktop\:h-fit {
+    @container root (width >= 48rem) {
+      height: fit-content;
+    }
+  }
+  .desktop\:max-h-\[calc\(100vh-32px\)\] {
+    @container root (width >= 48rem) {
+      max-height: calc(100vh - 32px);
+    }
+  }
+  .desktop\:w-full {
+    @container root (width >= 48rem) {
+      width: 100%;
+    }
+  }
+  .desktop\:max-w-120 {
+    @container root (width >= 48rem) {
+      max-width: calc(var(--spacing) * 120);
+    }
+  }
+  .desktop\:max-w-180 {
+    @container root (width >= 48rem) {
+      max-width: calc(var(--spacing) * 180);
+    }
+  }
+  .desktop\:max-w-240 {
+    @container root (width >= 48rem) {
+      max-width: calc(var(--spacing) * 240);
+    }
+  }
+  .desktop\:max-w-300 {
+    @container root (width >= 48rem) {
+      max-width: calc(var(--spacing) * 300);
+    }
+  }
+  .desktop\:flex-grow-0 {
+    @container root (width >= 48rem) {
+      flex-grow: 0;
+    }
+  }
   .desktop\:flex-col {
     @container root (width >= 48rem) {
       flex-direction: column;
@@ -3558,6 +3883,11 @@
       gap: var(--spacing-desktop-layout-group-gap);
     }
   }
+  .desktop\:p-4 {
+    @container root (width >= 48rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
   .desktop\:p-\[calc\(var\(--spacing-desktop-component-padding\)_\+_var\(--spacing-desktop-component-gap\)_-_1px\)\] {
     @container root (width >= 48rem) {
       padding: calc(var(--spacing-desktop-component-padding) + var(--spacing-desktop-component-gap) - 1px);
@@ -3598,11 +3928,21 @@
       padding-inline: var(--spacing-desktop-component-gap);
     }
   }
+  .desktop\:px-desktop-component-padding {
+    @container root (width >= 48rem) {
+      padding-inline: var(--spacing-desktop-component-padding);
+    }
+  }
   .desktop\:px-desktop-container-padding {
     @container root (width >= 48rem) {
       padding-inline: var(--spacing-desktop-container-padding);
     }
   }
+  .desktop\:px-desktop-layout-padding {
+    @container root (width >= 48rem) {
+      padding-inline: var(--spacing-desktop-layout-padding);
+    }
+  }
   .desktop\:py-desktop-component-gap {
     @container root (width >= 48rem) {
       padding-block: var(--spacing-desktop-component-gap);
@@ -3804,8 +4144,12 @@
   --color-text-secondary-disabled: var(--color-neutral-400);
   --color-text-secondary-error: var(--color-critical-200);
   --color-text-success-normal: var(--color-success-200);
+  --color-text-success-disabled: var(--color-neutral-300);
+  --color-text-success-error: var(--color-critical-200);
   --color-text-warning-normal: var(--color-warning-200);
-  --color-text-link-normal: var(--color-action-000);
+  --color-text-warning-disabled: var(--color-neutral-300);
+  --color-text-warning-error: var(--color-critical-200);
+  --color-text-link-normal: var(--color-link-000);
   --color-text-link-hover: var(--color-brand-200);
   --color-text-link-active: var(--color-brand-200);
   --color-text-link-disabled: var(--color-neutral-400);
@@ -3854,10 +4198,18 @@
   --color-icon-action-primary-hover: var(--color-brand-200);
   --color-icon-action-primary-active: var(--color-brand-100);
   --color-icon-action-primary-disabled: var(--color-neutral-300);
+  --color-icon-action-secondary-normal: var(--color-neutral-000);
+  --color-icon-action-secondary-hover: var(--color-brand-200);
+  --color-icon-action-secondary-active: var(--color-brand-200);
+  --color-icon-action-secondary-disabled: var(--color-neutral-400);
   --color-icon-on-action-primary-normal: var(--color-brand-400);
   --color-icon-on-action-primary-hover: var(--color-brand-500);
   --color-icon-on-action-primary-active: var(--color-brand-300);
   --color-icon-on-action-primary-disabled: var(--color-neutral-400);
+  --color-icon-action-critical-normal: var(--color-critical-200);
+  --color-icon-action-critical-hover: var(--color-critical-300);
+  --color-icon-action-critical-active: var(--color-critical-200);
+  --color-icon-action-critical-disabled: var(--color-neutral-400);
   --color-icon-brand-primary-normal: var(--color-neutral-000);
   --color-icon-brand-primary-hover: var(--color-brand-200);
   --color-icon-brand-primary-active: var(--color-neutral-000);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/brand.css

@@ -9,9 +9,14 @@
   --color-text-secondary-error: var(--color-critical-200);
 
   --color-text-success-normal: var(--color-success-200);
+  --color-text-success-disabled: var(--color-neutral-300);
+  --color-text-success-error: var(--color-critical-200);
+
   --color-text-warning-normal: var(--color-warning-200);
+  --color-text-warning-disabled: var(--color-neutral-300);
+  --color-text-warning-error: var(--color-critical-200);
 
-  --color-text-link-normal: var(--color-action-000);
+  --color-text-link-normal: var(--color-link-000);
   --color-text-link-hover: var(--color-brand-200);
   --color-text-link-active: var(--color-brand-200);
   --color-text-link-disabled: var(--color-neutral-400);
@@ -74,11 +79,21 @@
   --color-icon-action-primary-active: var(--color-brand-100);
   --color-icon-action-primary-disabled: var(--color-neutral-300);
 
+  --color-icon-action-secondary-normal: var(--color-neutral-000);
+  --color-icon-action-secondary-hover: var(--color-brand-200);
+  --color-icon-action-secondary-active: var(--color-brand-200);
+  --color-icon-action-secondary-disabled: var(--color-neutral-400);
+
   --color-icon-on-action-primary-normal: var(--color-brand-400);
   --color-icon-on-action-primary-hover: var(--color-brand-500);
   --color-icon-on-action-primary-active: var(--color-brand-300);
   --color-icon-on-action-primary-disabled: var(--color-neutral-400);
 
+  --color-icon-action-critical-normal: var(--color-critical-200);
+  --color-icon-action-critical-hover: var(--color-critical-300);
+  --color-icon-action-critical-active: var(--color-critical-200);
+  --color-icon-action-critical-disabled: var(--color-neutral-400);
+
   --color-icon-brand-primary-normal: var(--color-neutral-000);
   --color-icon-brand-primary-hover: var(--color-brand-200);
   --color-icon-brand-primary-active: var(--color-neutral-000);

package/src/components/Checkbox.tsx

@@ -169,6 +169,7 @@ export const Checkbox = ({
 
       {label && (
         <Paragraph
+          as="span"
           padded
           className={clsx(
             "text-nowrap",