@infonomic/uikit 5.27.0 → 5.29.0

package/src/components/chips/chip.module.css

@@ -8,7 +8,7 @@ infonomic-components;
 @layer infonomic-components {
 
   .chip,
-  :global(.chip) {
+  :global(.infonomic-chip) {
     --chip-font-size: 0.9rem;
     --chip-height: 34px;
     --chip-padding-y: 0.35rem;
@@ -36,47 +36,51 @@ infonomic-components;
 
   .chip:disabled,
   .chip[disabled],
-  :global(.chip):disabled,
-  :global(.chip)[disabled] {
+  :global(.infonomic-chip):disabled,
+  :global(.infonomic-chip)[disabled] {
     pointer-events: none;
   }
 
   .chip:focus,
   .chip:active,
-  :global(.chip):focus,
-  :global(.chip):active {
+  :global(.infonomic-chip):focus,
+  :global(.infonomic-chip):active {
     --ring-offset-color: var(--background);
     --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
     --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
     box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
   }
 
-  .label {
+  .label,
+  :global(.infonomic-chip-label) {
     display: inline-flex;
     align-items: center;
     white-space: nowrap;
   }
 
-  .icon {
+  .icon,
+  :global(.infonomic-chip-icon) {
     width: var(--chip-icon-size);
     height: var(--chip-icon-size);
   }
 
-  .iconWrapper {
+  .iconWrapper,
+  :global(.infonomic-chip-icon-wrapper) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 0;
   }
 
-  .close-icon {
+  .close-icon,
+  :global(.infonomic-chip-close-icon) {
     width: calc(var(--chip-icon-size) * 0.9);
     height: calc(var(--chip-icon-size) * 0.9);
   }
 
   /* Sizes ----------------------------------------------------------- */
   .xs,
-  :global(.chip-xs) {
+  :global(.infonomic-chip-xs) {
     --chip-height: 24px;
     --chip-padding-y: 0.15rem;
     --chip-padding-x: 0.3rem;
@@ -86,7 +90,7 @@ infonomic-components;
   }
 
   .sm,
-  :global(.chip-sm) {
+  :global(.infonomic-chip-sm) {
     --chip-height: 28px;
     --chip-padding-y: 0.2rem;
     --chip-padding-x: 0.3rem;
@@ -95,7 +99,7 @@ infonomic-components;
   }
 
   .md,
-  :global(.chip-md) {
+  :global(.infonomic-chip-md) {
     --chip-height: 32px;
     --chip-padding-y: 0.25rem;
     --chip-padding-x: 0.3rem;
@@ -104,7 +108,7 @@ infonomic-components;
   }
 
   .lg,
-  :global(.chip-lg) {
+  :global(.infonomic-chip-lg) {
     --chip-gap: var(--gap-2);
     --chip-height: 36px;
     --chip-padding-y: 0.3rem;
@@ -114,7 +118,7 @@ infonomic-components;
   }
 
   .xl,
-  :global(.chip-xl) {
+  :global(.infonomic-chip-xl) {
     --chip-gap: var(--gap-2);
     --chip-height: 40px;
     --chip-padding-y: 0.3rem;
@@ -126,27 +130,27 @@ infonomic-components;
   /* Variants -------------------------------------------------------- */
   /* Variants - Consuming Variables */
   .filled,
-  :global(.chip-filled) {
+  :global(.infonomic-chip-filled) {
     color: var(--chip-variant-filled-foreground);
     background-color: var(--chip-variant-filled);
   }
 
   .filled:hover,
-  :global(.chip-filled):hover {
+  :global(.infonomic-chip-filled):hover {
     background-color: var(--chip-variant-filled-hover);
   }
 
   .filled:focus,
   .filled:active,
-  :global(.chip-filled):focus,
-  :global(.chip-filled):active {
+  :global(.infonomic-chip-filled):focus,
+  :global(.infonomic-chip-filled):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .filled:disabled,
   .filled[disabled],
-  :global(.chip-filled):disabled,
-  :global(.chip-filled)[disabled] {
+  :global(.infonomic-chip-filled):disabled,
+  :global(.infonomic-chip-filled)[disabled] {
     background-color: var(--chip-variant-filled-disabled,
         oklch(from var(--chip-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
     color: var(--chip-variant-filled-foreground-disabled,
@@ -157,27 +161,27 @@ infonomic-components;
   /* Weak variant for close button on selected chip */
 
   .filled-weak,
-  :global(.chip-filled-weak) {
+  :global(.infonomic-chip-filled-weak) {
     color: var(--chip-variant-filled-weak-foreground);
     background-color: var(--chip-variant-filled-weak);
   }
 
   .filled-weak:hover,
-  :global(.chip-filled-weak):hover {
+  :global(.infonomic-chip-filled-weak):hover {
     background-color: var(--chip-variant-filled-weak-hover);
   }
 
   .filled-weak:focus,
   .filled-weak:active,
-  :global(.chip-filled-weak):focus,
-  :global(.chip-filled-weak):active {
+  :global(.infonomic-chip-filled-weak):focus,
+  :global(.infonomic-chip-filled-weak):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .filled-weak:disabled,
   .filled-weak[disabled],
-  :global(.chip-filled-weak):disabled,
-  :global(.chip-filled-weak)[disabled] {
+  :global(.infonomic-chip-filled-weak):disabled,
+  :global(.infonomic-chip-filled-weak)[disabled] {
     background-color: var(--chip-variant-filled-weak-disabled,
         oklch(from var(--chip-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
     color: var(--chip-variant-filled-weak-foreground-disabled,
@@ -188,7 +192,7 @@ infonomic-components;
   /* Outlined variant */
 
   .outlined,
-  :global(.chip-outlined) {
+  :global(.infonomic-chip-outlined) {
     border: 1px solid var(--chip-variant-outlined-border);
     color: var(--chip-variant-outlined-foreground);
     background-color: var(--chip-variant-outlined);
@@ -196,8 +200,8 @@ infonomic-components;
 
   .outlined:disabled,
   .outlined[disabled],
-  :global(.chip-outlined):disabled,
-  :global(.chip-outlined)[disabled] {
+  :global(.infonomic-chip-outlined):disabled,
+  :global(.infonomic-chip-outlined)[disabled] {
     border-color: var(--chip-variant-outlined-border-disabled,
         oklch(from var(--chip-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
     color: var(--chip-variant-outlined-foreground-disabled,
@@ -205,45 +209,45 @@ infonomic-components;
   }
 
   .outlined:hover,
-  :global(.chip-outlined):hover {
+  :global(.infonomic-chip-outlined):hover {
     background-color: var(--chip-variant-outlined-hover);
   }
 
   .outlined:focus,
   .outlined:active,
-  :global(.chip-outlined):focus,
-  :global(.chip-outlined):active {
+  :global(.infonomic-chip-outlined):focus,
+  :global(.infonomic-chip-outlined):active {
     --ring-color: var(--chip-ring-color);
   }
 
   .text,
-  :global(.chip-text) {
+  :global(.infonomic-chip-text) {
     background-color: var(--chip-variant-text);
     color: var(--chip-variant-text-foreground);
   }
 
   .text:disabled,
   .text[disabled],
-  :global(.chip-text):disabled,
-  :global(.chip-text)[disabled] {
+  :global(.infonomic-chip-text):disabled,
+  :global(.infonomic-chip-text)[disabled] {
     color: oklch(from var(--chip-variant-text-foreground) calc(l * 1.5) calc(c * 0.5) h);
   }
 
   .text:hover,
-  :global(.chip-text):hover {
+  :global(.infonomic-chip-text):hover {
     background-color: var(--chip-variant-text-hover);
   }
 
   .text:focus,
   .text:active,
-  :global(.chip-text):focus,
-  :global(.chip-text):active {
+  :global(.infonomic-chip-text):focus,
+  :global(.infonomic-chip-text):active {
     --ring-color: var(--chip-ring-color);
   }
 
   /* Intents - Defining Variables */
   .primary,
-  :global(.chip-primary) {
+  :global(.infonomic-chip-primary) {
     --chip-ring-color: var(--ring-primary);
 
     /* Filled */
@@ -270,7 +274,7 @@ infonomic-components;
   }
 
   .secondary,
-  :global(.chip-secondary) {
+  :global(.infonomic-chip-secondary) {
     --chip-ring-color: var(--ring-secondary);
 
     /* Filled */
@@ -297,7 +301,7 @@ infonomic-components;
   }
 
   .noeffect,
-  :global(.chip-noeffect) {
+  :global(.infonomic-chip-noeffect) {
     --chip-ring-color: var(--ring-noeffect);
 
     /* Filled */
@@ -324,7 +328,7 @@ infonomic-components;
   }
 
   .success,
-  :global(.chip-success) {
+  :global(.infonomic-chip-success) {
     --chip-ring-color: var(--ring-success);
 
     /* Filled */
@@ -351,7 +355,7 @@ infonomic-components;
   }
 
   .info,
-  :global(.chip-info) {
+  :global(.infonomic-chip-info) {
     --chip-ring-color: var(--ring-info);
 
     /* Filled */
@@ -378,7 +382,7 @@ infonomic-components;
   }
 
   .warning,
-  :global(.chip-warning) {
+  :global(.infonomic-chip-warning) {
     --chip-ring-color: var(--ring-warning);
 
     /* Filled */
@@ -405,7 +409,7 @@ infonomic-components;
   }
 
   .danger,
-  :global(.chip-danger) {
+  :global(.infonomic-chip-danger) {
     --chip-ring-color: var(--ring-danger);
 
     /* Filled */

package/src/components/chips/chip.tsx

@@ -70,7 +70,7 @@ export const Chip = <C extends React.ElementType = 'button'>({
     }
 
     if (onClick) {
-      ;(onClick as React.MouseEventHandler<HTMLElement>)(event)
+      ; (onClick as React.MouseEventHandler<HTMLElement>)(event)
     }
 
     if (isSelectable && onToggle) {
@@ -86,7 +86,7 @@ export const Chip = <C extends React.ElementType = 'button'>({
     if ((event.key === 'Enter' || event.key === ' ') && asChild === true) {
       event.preventDefault()
       if (onClick) {
-        ;(onClick as React.MouseEventHandler<HTMLElement>)(
+        ; (onClick as React.MouseEventHandler<HTMLElement>)(
           event as unknown as React.MouseEvent<HTMLElement>
         )
       }
@@ -147,7 +147,7 @@ export const Chip = <C extends React.ElementType = 'button'>({
       onClick={handleRemoveClick}
       onKeyDown={handleRemoveKeyDown}
     >
-      <CloseIcon className={cx(styles.icon, styles['close-icon'])} />
+      <CloseIcon className={cx('infonomic-chip-close-icon', styles.icon, styles['close-icon'])} />
     </button>
   ) : (
     endIcon
@@ -165,10 +165,10 @@ export const Chip = <C extends React.ElementType = 'button'>({
       aria-pressed={isSelectable ? isSelected : undefined}
       aria-selected={isSelectable ? isSelected : undefined}
       className={cx(
-        'chip',
-        variant,
-        intent,
-        size,
+        'infonomic-chip',
+        `infonomic-chip-${variant}`,
+        `infonomic-chip-${intent}`,
+        `infonomic-chip-${size}`,
         { selected: isSelected, disabled, removable: isRemovable },
         styles.chip,
         styles[appliedVariant],
@@ -181,9 +181,9 @@ export const Chip = <C extends React.ElementType = 'button'>({
       onKeyDown={handleKeyDown}
       {...restProps}
     >
-      {leadingIcon != null && <span className={cx(styles.iconWrapper)}>{leadingIcon}</span>}
-      <span className={styles.label}>{children}</span>
-      {trailingIcon != null && <span className={cx(styles.iconWrapper)}>{trailingIcon}</span>}
+      {leadingIcon != null && <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>{leadingIcon}</span>}
+      <span className={cx('infonomic-chip-label', styles.label)}>{children}</span>
+      {trailingIcon != null && <span className={cx('infonomic-chip-icon-wrapper', styles.iconWrapper)}>{trailingIcon}</span>}
     </Comp>
   )
 }

package/src/components/container/container.module.css

@@ -1,13 +1,14 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .container,
-  :global(.container) {
+  :global(.infonomic-container) {
     width: 100%;
     padding: 0 1rem;
     margin: 0 auto;
@@ -17,25 +18,28 @@
   /* Shy edges */
   /* Large */
   @media (min-width: 66rem) {
+
     .container,
-    :global(.container) {
+    :global(.infonomic-container) {
       max-width: 64rem;
     }
   }
 
   /* X-Large */
   @media (min-width: 77rem) {
+
     .container,
-    :global(.container) {
+    :global(.infonomic-container) {
       max-width: 74.375rem;
     }
   }
 
   /* 2X-Large */
   @media (min-width: 94rem) {
+
     .container,
-    :global(.container) {
+    :global(.infonomic-container) {
       max-width: 87.5rem;
     }
   }
-}
+}

package/src/components/container/container.tsx

@@ -5,7 +5,7 @@ import cx from 'classnames'
 import styles from './container.module.css'
 
 type ContainerIntrinsicProps = React.JSX.IntrinsicElements['div']
-export interface ContainerProps extends ContainerIntrinsicProps {}
+export interface ContainerProps extends ContainerIntrinsicProps { }
 
 export const Container = function Container({
   ref,
@@ -16,7 +16,7 @@ export const Container = function Container({
   ref?: React.RefObject<HTMLDivElement>
 }): React.JSX.Element {
   return (
-    <div ref={ref} {...rest} className={cx('container', styles.container, className)}>
+    <div ref={ref} {...rest} className={cx('infonomic-container', styles.container, className)}>
       {children}
     </div>
   )

package/src/components/dropdown/dropdown.module.css

@@ -1,13 +1,16 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .dropdown-content,
-  .dropdown-subcontent {
+  .dropdown-subcontent,
+  :global(.infonomic-dropdown-content),
+  :global(.infonomic-dropdown-subcontent) {
     z-index: 20;
     background-color: var(--surface-panel-elevated);
     padding: 4px;
@@ -37,7 +40,8 @@
     }
   }
 
-  .dropdown-item {
+  .dropdown-item,
+  :global(.infonomic-dropdown-item) {
     display: flex;
     align-items: center;
     gap: var(--gap-1);
@@ -55,13 +59,16 @@
   /* Updated to also cover data-highlighted presence */
   .dropdown-item:hover,
   .dropdown-item:focus,
-  .dropdown-item[data-highlighted] {
+  .dropdown-item[data-highlighted],
+  :global(.infonomic-dropdown-item):hover,
+  :global(.infonomic-dropdown-item):focus,
+  :global(.infonomic-dropdown-item)[data-highlighted] {
     background-color: var(--surface-item-hover);
     color: var(--surface-item-text-hover);
   }
 
-  .dropdown-separator {
-    margin: 0 auto;
+  .dropdown-separator,
+  :global(.infonomic-dropdown-separator) {
     width: 90%;
     background-color: var(--surface-panel-border);
     margin: var(--spacing-4) 0;
@@ -119,4 +126,4 @@
       transform: translateX(0);
     }
   }
-}
+}

package/src/components/dropdown/dropdown.tsx

@@ -21,7 +21,7 @@ const Trigger = ({
 }): React.JSX.Element => {
   return (
     <DropdownMenuPrimitive.Trigger
-      className={cx('dropdown-menu-trigger', className)}
+      className={cx('infonomic-dropdown-trigger', className)}
       ref={ref}
       {...rest}
     >
@@ -49,7 +49,7 @@ const Content = ({
   return (
     <DropdownMenuPrimitive.Content
       ref={ref}
-      className={cx('dropdown-menu-content', styles['dropdown-content'], className)}
+      className={cx('infonomic-dropdown-content', styles['dropdown-content'], className)}
       {...rest}
     >
       {children}
@@ -69,7 +69,7 @@ const Group = ({
   return (
     <DropdownMenuPrimitive.Group
       ref={ref}
-      className={cx('dropdown-menu-group', className)}
+      className={cx('infonomic-dropdown-group', className)}
       {...rest}
     >
       {children}
@@ -89,7 +89,7 @@ const Item = ({
   return (
     <DropdownMenuPrimitive.Item
       ref={ref}
-      className={cx('dropdown-menu-item', styles['dropdown-item'], className)}
+      className={cx('infonomic-dropdown-item', styles['dropdown-item'], className)}
       {...rest}
     >
       {children}
@@ -109,7 +109,7 @@ const Label = ({
   return (
     <DropdownMenuPrimitive.Label
       ref={ref}
-      className={cx('dropdown-menu-label', className)}
+      className={cx('infonomic-dropdown-label', className)}
       {...rest}
     >
       {children}
@@ -128,7 +128,7 @@ const Separator = ({
   return (
     <DropdownMenuPrimitive.Separator
       ref={ref}
-      className={cx('dropdown-menu-separator', styles['dropdown-separator'], className)}
+      className={cx('infonomic-dropdown-separator', styles['dropdown-separator'], className)}
       {...props}
     />
   )
@@ -150,7 +150,7 @@ const SubContent = ({
   return (
     <DropdownMenuPrimitive.SubContent
       ref={ref}
-      className={cx('dropdown-menu-subcontent', styles['dropdown-subcontent'], className)}
+      className={cx('infonomic-dropdown-subcontent', styles['dropdown-subcontent'], className)}
       {...rest}
     >
       {children}
@@ -170,7 +170,7 @@ const SubTrigger = ({
   return (
     <DropdownMenuPrimitive.SubTrigger
       ref={ref}
-      className={cx('dropdown-menu-trigger', className)}
+      className={cx('infonomic-dropdown-subtrigger', className)}
       {...rest}
     >
       {children}