@infonomic/uikit 5.26.0 → 5.28.0

package/src/components/button/button.tsx

@@ -51,7 +51,7 @@ export const Button = <C extends React.ElementType = 'button'>({
     const rippleEffect = new Ripple()
     onMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
       if (rest.onMouseDown) {
-        ;(rest.onMouseDown as React.MouseEventHandler<HTMLButtonElement>)(e)
+        ; (rest.onMouseDown as React.MouseEventHandler<HTMLButtonElement>)(e)
       }
       rippleEffect.create(e, variant === 'filled' || variant === 'gradient' ? 'light' : 'dark')
     }
@@ -62,10 +62,10 @@ export const Button = <C extends React.ElementType = 'button'>({
       ref={ref}
       type={type}
       className={cx(
-        'button',
-        intent,
-        variant,
-        size,
+        'infonomic-button',
+        `infonomic-button-${intent}`,
+        `infonomic-button-${variant}`,
+        `infonomic-button-${size}`,
         styles.button,
         styles[variant],
         styles[size],

package/src/components/button/control-buttons.module.css

@@ -1,9 +1,13 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .stop-button,
   .play-button,
-  .directional-button {
+  .directional-button,
+  :global(.infonomic-stop-button),
+  :global(.infonomic-play-button),
+  :global(.infonomic-directional-button) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -128,4 +132,4 @@
   /* No dark theme overrides needed! 
    * Tokens automatically switch in .dark and respect .not-dark 
   */
-}
+}

package/src/components/button/control-buttons.tsx

@@ -42,7 +42,7 @@ export const DirectionalButton = ({
       type="button"
       aria-label={direction}
       className={cx(
-        'control-button',
+        'infonomic-control-button',
         direction,
         size,
         styles['directional-button'],

package/src/components/button/copy-button.module.css

@@ -1,18 +1,19 @@
 @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 {
+
   .copy-button-container,
-  :global(.copy-button-container) {
+  :global(.infonomic-copy-button-container) {
     display: inline-block;
   }
 
   .copy-button svg,
-  :global(.copy-button) svg {
+  :global(.infonomic-copy-button) svg {
     width: 90%;
     height: 90%;
     display: block;
@@ -20,7 +21,7 @@
 
   /* Sizes */
   .xs,
-  :global(.copy-button-xs) {
+  :global(.infonomic-copy-button-xs) {
     width: 26px;
     height: 26px;
     min-height: 26px;
@@ -28,7 +29,7 @@
   }
 
   .sm,
-  :global(.copy-button-sm) {
+  :global(.infonomic-copy-button-sm) {
     width: 32px;
     height: 32px;
     min-height: 32px;
@@ -36,7 +37,7 @@
   }
 
   .md,
-  :global(.copy-button-md) {
+  :global(.infonomic-copy-button-md) {
     width: 38px;
     height: 38px;
     min-height: 38px;
@@ -44,7 +45,7 @@
   }
 
   .lg,
-  :global(.copy-button-lg) {
+  :global(.infonomic-copy-button-lg) {
     width: 46px;
     height: 46px;
     min-height: 46px;
@@ -52,10 +53,10 @@
   }
 
   .xl,
-  :global(.copy-button-xl) {
+  :global(.infonomic-copy-button-xl) {
     width: 54px;
     height: 54px;
     min-height: 54px;
     padding: 0.65rem;
   }
-}
+}

package/src/components/button/copy-button.tsx

@@ -62,7 +62,7 @@ export function CopyButton({
   const tooltipText = copied != null && copied ? copiedText : hoverText
 
   return (
-    <div className={cx(styles['copy-button-container'], containerClassName)}>
+    <div className={cx('infonomic-copy-button-container', styles['copy-button-container'], containerClassName)}>
       <Tooltip side="top" sideOffset={2} text={tooltipText} open={copied}>
         <Button
           variant={variant}
@@ -70,7 +70,11 @@ export function CopyButton({
           intent={intent}
           fullWidth={fullWidth}
           ripple={ripple}
-          className={cx('copy-button', variant, size, intent, styles[size], className)}
+          className={cx('infonomic-copy-button',
+            `infonomic-copy-button-${variant}`,
+            `infonomic-copy-button-${size}`,
+            `infonomic-copy-button-${intent}`,
+            styles[size], className)}
           onClick={handleCopied}
           {...rest}
         >

package/src/components/card/card.module.css

@@ -8,7 +8,7 @@ infonomic-components;
 @layer infonomic-components {
 
   .card,
-  :global(.card) {
+  :global(.infonomic-card) {
     display: flex;
     flex-direction: column;
     text-decoration: none;
@@ -27,19 +27,19 @@ infonomic-components;
   :global([data-theme="dark"]) {
 
     .card,
-    :global(.card) {
+    :global(.infonomic-card) {
       background: var(--canvas-800);
     }
   }
 
 
   .card-hover,
-  :global(.card-hover) {
+  :global(.infonomic-card-hover) {
     transition: background 0.2s ease-in-out;
   }
 
   .card-hover:hover,
-  :global(.card-hover):hover {
+  :global(.infonomic-card-hover):hover {
     background: oklch(from var(--theme-50) 1 0.03 h);
   }
 
@@ -47,13 +47,13 @@ infonomic-components;
   :global([data-theme="dark"]) {
 
     .card-hover:hover,
-    :global(.card-hover):hover {
+    :global(.infonomic-card-hover):hover {
       background: oklch(from var(--canvas-800) 0.2 c h);
     }
   }
 
   .card-header,
-  :global(.card-header) {
+  :global(.infonomic-card-header) {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -61,7 +61,7 @@ infonomic-components;
   }
 
   .card-title,
-  :global(.card-title) {
+  :global(.infonomic-card-title) {
     color: var(--headings);
     font-size: 1.8rem;
     font-weight: bold;
@@ -70,20 +70,20 @@ infonomic-components;
   }
 
   .card-description,
-  :global(.card-description) {
+  :global(.infonomic-card-description) {
     font-size: 0.875rem;
     color: var(--muted);
   }
 
   .card-content,
-  :global(.card-content) {
+  :global(.infonomic-card-content) {
     flex: 1;
     padding: 1rem;
     padding-top: 0;
   }
 
   .card-footer,
-  :global(.card-footer) {
+  :global(.infonomic-card-footer) {
     display: flex;
     align-items: center;
     padding: 1rem;

package/src/components/card/card.tsx

@@ -36,7 +36,7 @@ const Card = <C extends React.ElementType = 'div'>({
   const classes = cx(styles.card, hoverClasses, className)
 
   return (
-    <Comp ref={ref} className={classes} {...rest}>
+    <Comp ref={ref} className={cx('infonomic-card', classes)} {...rest}>
       {children}
     </Comp>
   )
@@ -49,7 +49,7 @@ interface OtherProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Header = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx(styles['card-header'], className)} {...props} />
+  <div ref={ref} className={cx('infonomic-card-header', styles['card-header'], className)} {...props} />
 )
 
 Header.displayName = 'CardHeader'
@@ -57,24 +57,24 @@ Header.displayName = 'CardHeader'
 const Title = ({ className, ref, ...props }: OtherProps) => (
   <div
     ref={ref as React.Ref<HTMLDivElement>}
-    className={cx(styles['card-title'], className)}
+    className={cx('infonomic-card-title', styles['card-title'], className)}
     {...props}
   />
 )
 Title.displayName = 'CardTitle'
 
 const Description = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx(styles['card-description'], className)} {...props} />
+  <div ref={ref} className={cx('infonomic-card-description', styles['card-description'], className)} {...props} />
 )
 Description.displayName = 'CardDescription'
 
 const Content = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx(styles['card-content'], className)} {...props} />
+  <div ref={ref} className={cx('infonomic-card-content', styles['card-content'], className)} {...props} />
 )
 Content.displayName = 'CardContent'
 
 const Footer = ({ className, ref, ...props }: OtherProps) => (
-  <div ref={ref} className={cx(styles['card-footer'], className)} {...props} />
+  <div ref={ref} className={cx('infonomic-card-footer', styles['card-footer'], className)} {...props} />
 )
 Footer.displayName = 'CardFooter'
 

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;
     }
   }
-}
+}