@infonomic/uikit 5.8.0 → 5.10.0

package/dist/components/button/@types/button.d.ts

@@ -3,7 +3,7 @@ import type { Size as s } from '../../@types/shared.js';
 /**
  * This file contains the types and prop-types for Button and IconButton component.
  */
-export declare const variant: readonly ["filled", "outlined", "gradient", "text"];
+export declare const variant: readonly ["filled", "filled-weak", "outlined", "gradient", "text"];
 export type Variant = (typeof variant)[number];
 export type Size = 'md' | s;
 export type Intent = 'primary' | t;

package/dist/components/button/@types/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/@types/button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEvD;;GAEG;AAGH,eAAO,MAAM,OAAO,qDAAsD,CAAA;AAC1E,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,CAAA;AAC3B,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,OAAO,CAAA;AAC/B,MAAM,MAAM,YAAY,GAAG,OAAO,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/@types/button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD,OAAO,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEvD;;GAEG;AAGH,eAAO,MAAM,OAAO,oEAAqE,CAAA;AACzF,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,CAAA;AAC3B,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,OAAO,CAAA;AAC/B,MAAM,MAAM,YAAY,GAAG,OAAO,CAAA"}

package/dist/components/button/@types/button.js

@@ -1,5 +1,6 @@
 const variant = [
     'filled',
+    'filled-weak',
     'outlined',
     'gradient',
     'text'

package/dist/components/button/button.module.css

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
+
   .button,
   :global(.button) {
     border: none;
@@ -113,6 +114,35 @@
     color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
+  /* -------------------------------------------------------- */
+  /* Weak variant for close button on selected button */
+
+  .filled-weak,
+  :global(.button-filled) {
+    color: var(--button-variant-filled-weak-foreground);
+    background-color: var(--button-variant-filled-weak);
+  }
+
+  .filled-weak:hover,
+  :global(.button-filled):hover {
+    background-color: var(--button-variant-filled-weak-hover);
+  }
+
+  .filled-weak:focus,
+  .filled-weak:active,
+  :global(.button-filled):focus,
+  :global(.button-filled):active {
+    --ring-color: var(--button-ring-color);
+  }
+
+  .filled-weak:disabled,
+  .filled[disabled],
+  :global(.button-filled):disabled,
+  :global(.button-filled)[disabled] {
+    background-color: var(--button-variant-filled-weak-disabled, oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--button-variant-filled-weak-foreground-disabled, oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
+  }
+
   .outlined,
   :global(.button-outlined) {
     border: 1px solid var(--button-variant-outlined-border);
@@ -201,14 +231,21 @@
   .primary,
   :global(.button-primary) {
     --button-ring-color: var(--ring-primary);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-primary-strong);
     --button-variant-filled-foreground: var(--text-on-primary);
     --button-variant-filled-hover: var(--fill-primary-strong-hover);
     --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-primary-weak);
+    --button-variant-filled-weak-foreground: var(--text-primary-weak);
+    --button-variant-filled-weak-hover: var(--fill-primary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-primary-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-primary-strong);
@@ -216,12 +253,12 @@
     --button-variant-outlined-border: var(--stroke-primary);
     --button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-primary-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-primary-weak);
     --button-variant-text-hover: var(--fill-primary-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-primary-start);
     --button-variant-gradient-end: var(--gradient-primary-end);
@@ -233,14 +270,21 @@
   .secondary,
   :global(.button-secondary) {
     --button-ring-color: var(--ring-secondary);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-secondary-strong);
     --button-variant-filled-foreground: var(--text-on-secondary);
     --button-variant-filled-hover: var(--fill-secondary-strong-hover);
     --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-secondary-weak);
+    --button-variant-filled-weak-foreground: var(--text-secondary-weak);
+    --button-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-secondary-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-secondary-strong);
@@ -248,12 +292,12 @@
     --button-variant-outlined-border: var(--stroke-secondary);
     --button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-secondary-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-secondary-weak);
     --button-variant-text-hover: var(--fill-secondary-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-secondary-start);
     --button-variant-gradient-end: var(--gradient-secondary-end);
@@ -265,14 +309,21 @@
   .noeffect,
   :global(.button-noeffect) {
     --button-ring-color: var(--ring-noeffect);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-noeffect-strong);
     --button-variant-filled-foreground: var(--text-on-noeffect);
     --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
     --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-noeffect-weak);
+    --button-variant-filled-weak-foreground: var(--text-on-noeffect);
+    --button-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-noeffect-strong);
@@ -280,12 +331,12 @@
     --button-variant-outlined-border: var(--stroke-noeffect);
     --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-noeffect-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-noeffect-weak);
     --button-variant-text-hover: var(--fill-noeffect-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-noeffect-start);
     --button-variant-gradient-end: var(--gradient-noeffect-end);
@@ -297,14 +348,21 @@
   .success,
   :global(.button-success) {
     --button-ring-color: var(--ring-success);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-success-strong);
     --button-variant-filled-foreground: var(--text-on-success);
     --button-variant-filled-hover: var(--fill-success-strong-hover);
     --button-variant-filled-disabled: var(--fill-success-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-success-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-success-weak);
+    --button-variant-filled-weak-foreground: var(--text-success-weak);
+    --button-variant-filled-weak-hover: var(--fill-success-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-success-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-success-strong);
@@ -312,12 +370,12 @@
     --button-variant-outlined-border: var(--stroke-success);
     --button-variant-outlined-border-disabled: var(--stroke-success-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-success-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-success-weak);
     --button-variant-text-hover: var(--fill-success-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-success-start);
     --button-variant-gradient-end: var(--gradient-success-end);
@@ -329,14 +387,21 @@
   .info,
   :global(.button-info) {
     --button-ring-color: var(--ring-info);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-info-strong);
     --button-variant-filled-foreground: var(--text-on-info);
     --button-variant-filled-hover: var(--fill-info-strong-hover);
     --button-variant-filled-disabled: var(--fill-info-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-info-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-info-weak);
+    --button-variant-filled-weak-foreground: var(--text-info-weak);
+    --button-variant-filled-weak-hover: var(--fill-info-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-info-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-info-strong);
@@ -344,12 +409,12 @@
     --button-variant-outlined-border: var(--stroke-info);
     --button-variant-outlined-border-disabled: var(--stroke-info-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-info-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-info-weak);
     --button-variant-text-hover: var(--fill-info-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-info-start);
     --button-variant-gradient-end: var(--gradient-info-end);
@@ -361,14 +426,21 @@
   .warning,
   :global(.button-warning) {
     --button-ring-color: var(--ring-warning);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-warning-strong);
     --button-variant-filled-foreground: var(--text-on-warning);
     --button-variant-filled-hover: var(--fill-warning-strong-hover);
     --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-warning-weak);
+    --button-variant-filled-weak-foreground: var(--text-warning-weak);
+    --button-variant-filled-weak-hover: var(--fill-warning-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-warning-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-warning-strong);
@@ -376,12 +448,12 @@
     --button-variant-outlined-border: var(--stroke-warning);
     --button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-warning-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-warning-weak);
     --button-variant-text-hover: var(--fill-warning-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-warning-start);
     --button-variant-gradient-end: var(--gradient-warning-end);
@@ -393,14 +465,21 @@
   .danger,
   :global(.button-danger) {
     --button-ring-color: var(--ring-danger);
-    
+
     /* Filled */
     --button-variant-filled: var(--fill-danger-strong);
     --button-variant-filled-foreground: var(--text-on-danger);
     --button-variant-filled-hover: var(--fill-danger-strong-hover);
     --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
-    
+
+    /* Filled Weak */
+    --button-variant-filled-weak: var(--fill-danger-weak);
+    --button-variant-filled-weak-foreground: var(--text-danger-weak);
+    --button-variant-filled-weak-hover: var(--fill-danger-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-danger-weak-disabled);
+
     /* Outlined */
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-danger-strong);
@@ -408,12 +487,12 @@
     --button-variant-outlined-border: var(--stroke-danger);
     --button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
     --button-variant-outlined-foreground-disabled: var(--text-danger-disabled);
-    
+
     /* Text */
     --button-variant-text: transparent;
     --button-variant-text-foreground: var(--text-danger-weak);
     --button-variant-text-hover: var(--fill-danger-weak-hover);
-    
+
     /* Gradient */
     --button-variant-gradient-start: var(--gradient-danger-start);
     --button-variant-gradient-end: var(--gradient-danger-end);

package/dist/components/button/button.module.js

@@ -9,6 +9,8 @@ const button_module = {
     lg: "lg-FAYTen",
     xl: "xl-Gwvhl4",
     filled: "filled-CwGsrO",
+    "filled-weak": "filled-weak-QLU8bA",
+    filledWeak: "filled-weak-QLU8bA",
     outlined: "outlined-nZGbxu",
     gradient: "gradient-ySC3O3",
     text: "text-GaxlcE",

package/dist/components/button/button_module.css

@@ -101,6 +101,24 @@
     color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h));
   }
 
+  :is(.filled-weak-QLU8bA, .button-filled) {
+    color: var(--button-variant-filled-weak-foreground);
+    background-color: var(--button-variant-filled-weak);
+  }
+
+  :is(.filled-weak-QLU8bA:hover, .button-filled:hover) {
+    background-color: var(--button-variant-filled-weak-hover);
+  }
+
+  :is(.filled-weak-QLU8bA:focus, .filled-weak-QLU8bA:active, .button-filled:focus, .button-filled:active) {
+    --ring-color: var(--button-ring-color);
+  }
+
+  :is(.filled-weak-QLU8bA:disabled, .filled-CwGsrO[disabled], .button-filled:disabled, .button-filled[disabled]) {
+    background-color: var(--button-variant-filled-weak-disabled, oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * .85) h));
+    color: var(--button-variant-filled-weak-foreground-disabled, oklch(from var(--button-variant-filled-weak-foreground) calc(l * .9) calc(c * .85) h));
+  }
+
   :is(.outlined-nZGbxu, .button-outlined) {
     border: 1px solid var(--button-variant-outlined-border);
     color: var(--button-variant-outlined-foreground);
@@ -164,6 +182,11 @@
     --button-variant-filled-hover: var(--fill-primary-strong-hover);
     --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-primary-disabled);
+    --button-variant-filled-weak: var(--fill-primary-weak);
+    --button-variant-filled-weak-foreground: var(--text-primary-weak);
+    --button-variant-filled-weak-hover: var(--fill-primary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-primary-disabled);
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-primary-strong);
     --button-variant-outlined-hover: var(--fill-primary-weak);
@@ -187,6 +210,11 @@
     --button-variant-filled-hover: var(--fill-secondary-strong-hover);
     --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-secondary-disabled);
+    --button-variant-filled-weak: var(--fill-secondary-weak);
+    --button-variant-filled-weak-foreground: var(--text-secondary-weak);
+    --button-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-secondary-weak-disabled);
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-secondary-strong);
     --button-variant-outlined-hover: var(--fill-secondary-weak);
@@ -210,6 +238,11 @@
     --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
     --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-noeffect-disabled);
+    --button-variant-filled-weak: var(--fill-noeffect-weak);
+    --button-variant-filled-weak-foreground: var(--text-on-noeffect);
+    --button-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-disabled);
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-noeffect-strong);
     --button-variant-outlined-hover: var(--fill-noeffect-weak);
@@ -233,6 +266,11 @@
     --button-variant-filled-hover: var(--fill-success-strong-hover);
     --button-variant-filled-disabled: var(--fill-success-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-success-disabled);
+    --button-variant-filled-weak: var(--fill-success-weak);
+    --button-variant-filled-weak-foreground: var(--text-success-weak);
+    --button-variant-filled-weak-hover: var(--fill-success-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-success-weak-disabled);
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-success-strong);
     --button-variant-outlined-hover: var(--fill-success-weak);
@@ -256,6 +294,11 @@
     --button-variant-filled-hover: var(--fill-info-strong-hover);
     --button-variant-filled-disabled: var(--fill-info-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-info-disabled);
+    --button-variant-filled-weak: var(--fill-info-weak);
+    --button-variant-filled-weak-foreground: var(--text-info-weak);
+    --button-variant-filled-weak-hover: var(--fill-info-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-info-weak-disabled);
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-info-strong);
     --button-variant-outlined-hover: var(--fill-info-weak);
@@ -279,6 +322,11 @@
     --button-variant-filled-hover: var(--fill-warning-strong-hover);
     --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-warning-disabled);
+    --button-variant-filled-weak: var(--fill-warning-weak);
+    --button-variant-filled-weak-foreground: var(--text-warning-weak);
+    --button-variant-filled-weak-hover: var(--fill-warning-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-warning-weak-disabled);
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-warning-strong);
     --button-variant-outlined-hover: var(--fill-warning-weak);
@@ -302,6 +350,11 @@
     --button-variant-filled-hover: var(--fill-danger-strong-hover);
     --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
     --button-variant-filled-foreground-disabled: var(--text-on-danger-disabled);
+    --button-variant-filled-weak: var(--fill-danger-weak);
+    --button-variant-filled-weak-foreground: var(--text-danger-weak);
+    --button-variant-filled-weak-hover: var(--fill-danger-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
+    --button-variant-filled-weak-foreground-disabled: var(--text-danger-weak-disabled);
     --button-variant-outlined: transparent;
     --button-variant-outlined-foreground: var(--text-danger-strong);
     --button-variant-outlined-hover: var(--fill-danger-weak);

package/dist/components/chips/@types/chip.d.ts

@@ -0,0 +1,6 @@
+import type { Intent, Size } from '../../@types/shared.js';
+export declare const chipVariant: readonly ["assist", "selectable", "removable", "selectable-removable"];
+export type ChipVariant = (typeof chipVariant)[number];
+export type ChipIntent = Intent;
+export type ChipSize = Size;
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chips/@types/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../../src/components/chips/@types/chip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE1D,eAAO,MAAM,WAAW,wEAAyE,CAAA;AACjG,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAA;AAC/B,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAA"}

package/dist/components/chips/@types/chip.js

@@ -0,0 +1,7 @@
+const chipVariant = [
+    'assist',
+    'selectable',
+    'removable',
+    'selectable-removable'
+];
+export { chipVariant };

package/dist/components/chips/chip.d.ts

@@ -0,0 +1,32 @@
+import type React from 'react';
+import type { ChipIntent, ChipSize, ChipVariant } from './@types/chip.js';
+type AsButton = {
+    asChild?: false;
+} & React.ComponentPropsWithoutRef<'button'>;
+interface AsSlot {
+    asChild?: true;
+}
+export type ChipRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+type ToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+type RemoveEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+export type ChipProps<C extends React.ElementType = 'button'> = {
+    variant?: ChipVariant;
+    intent?: ChipIntent;
+    size?: ChipSize;
+    selected?: boolean;
+    disabled?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    selectedIcon?: React.ReactNode;
+    removeLabel?: string;
+    onToggle?: (selected: boolean, event: ToggleEvent) => void;
+    onRemove?: (event: RemoveEvent) => void;
+    className?: string;
+    ref?: ChipRefType<C>;
+} & (AsButton | AsSlot) & Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>;
+export declare const Chip: {
+    <C extends React.ElementType = "button">({ variant, intent, size, selected, disabled, startIcon, endIcon, selectedIcon, removeLabel, onToggle, onRemove, className, children, asChild, ref, ...rest }: ChipProps<C>): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chips/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chips/chip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAGzE,KAAK,QAAQ,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAE9E,UAAU,MAAM;IACf,OAAO,CAAC,EAAE,IAAI,CAAA;CACd;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAE5F,KAAK,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;AACnF,KAAK,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;AAEnF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAC/D,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;CACpB,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC,GACtB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAEpD,eAAO,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,2KAiB7C,SAAS,CAAC,CAAC,CAAC;;CA6Hd,CAAA"}

package/dist/components/chips/chip.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import classnames from "classnames";
+import { CheckIcon } from "../../icons/check-icon.js";
+import { IconButton } from "../button/icon-button.js";
+import { CloseIcon } from "../../icons/close-icon.js";
+import chip_module from "./chip.module.js";
+const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected = false, disabled = false, startIcon, endIcon, selectedIcon, removeLabel = 'Remove chip', onToggle, onRemove, className, children, asChild, ref, ...rest })=>{
+    const { onClick, onKeyDown, role, tabIndex, ...restProps } = rest;
+    const Comp = true === asChild ? Slot : 'button';
+    const isSelectable = 'selectable' === variant || 'selectable-removable' === variant;
+    const isRemovable = 'removable' === variant || 'selectable-removable' === variant;
+    const isSelected = Boolean(selected);
+    const handleClick = (event)=>{
+        if (disabled) return void event.preventDefault();
+        if (onClick) onClick(event);
+        if (isSelectable && onToggle) onToggle(!isSelected, event);
+    };
+    const handleKeyDown = (event)=>{
+        if (disabled) return;
+        if (('Enter' === event.key || ' ' === event.key) && true === asChild) {
+            event.preventDefault();
+            if (onClick) onClick(event);
+            if (isSelectable && onToggle) onToggle(!isSelected, event);
+        }
+        if (('Backspace' === event.key || 'Delete' === event.key) && isRemovable && onRemove) {
+            event.preventDefault();
+            onRemove(event);
+        }
+        if (onKeyDown) onKeyDown(event);
+    };
+    const handleRemoveClick = (event)=>{
+        if (disabled) return;
+        event.stopPropagation();
+        if (onRemove) onRemove(event);
+    };
+    const handleRemoveKeyDown = (event)=>{
+        if (disabled) return;
+        if ('Enter' === event.key || ' ' === event.key || 'Backspace' === event.key || 'Delete' === event.key) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (onRemove) onRemove(event);
+        }
+    };
+    const leadingIcon = startIcon ?? (isSelectable && isSelected ? selectedIcon ?? /*#__PURE__*/ jsx(CheckIcon, {
+        className: chip_module.icon
+    }) : null);
+    const trailingIcon = isRemovable ? /*#__PURE__*/ jsx(IconButton, {
+        role: "button",
+        variant: isSelected ? 'filled-weak' : 'outlined',
+        className: classnames('remove', chip_module.remove, chip_module["end-icon"]),
+        tabIndex: disabled ? -1 : 0,
+        disabled: disabled,
+        "aria-label": removeLabel,
+        onClick: handleRemoveClick,
+        onKeyDown: handleRemoveKeyDown,
+        children: /*#__PURE__*/ jsx(CloseIcon, {
+            className: chip_module.icon
+        })
+    }) : endIcon;
+    const appliedVariant = isSelected ? 'filled' : 'outlined';
+    return /*#__PURE__*/ jsxs(Comp, {
+        ref: ref,
+        type: true === asChild ? void 0 : 'button',
+        role: role ?? (true === asChild ? 'button' : void 0),
+        tabIndex: disabled ? -1 : tabIndex ?? 0,
+        "aria-disabled": disabled || void 0,
+        "aria-pressed": isSelectable ? isSelected : void 0,
+        "aria-selected": isSelectable ? isSelected : void 0,
+        className: classnames('chip', variant, intent, size, {
+            selected: isSelected,
+            disabled,
+            removable: isRemovable
+        }, chip_module.chip, chip_module[appliedVariant], chip_module[intent], chip_module[size], className),
+        disabled: true === asChild ? void 0 : disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ...restProps,
+        children: [
+            null != leadingIcon && /*#__PURE__*/ jsx("span", {
+                className: classnames(chip_module.iconWrapper),
+                children: leadingIcon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: chip_module.label,
+                children: children
+            }),
+            null != trailingIcon && /*#__PURE__*/ jsx("span", {
+                className: classnames(chip_module.iconWrapper),
+                children: trailingIcon
+            })
+        ]
+    });
+};
+Chip.displayName = 'Chip';
+export { Chip };