@infonomic/uikit 5.26.0 → 5.28.0

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}

package/src/components/forms/checkbox.module.css

@@ -1,17 +1,20 @@
 @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 {
+
+  .container,
+  :global(.infonomic-checkbox-container) {
     width: 100%;
     padding: 0;
   }
 
-  .component {
+  .component,
+  :global(.infonomic-checkbox-component) {
     display: flex;
     width: 100%;
     padding: 0;
@@ -19,11 +22,13 @@
     gap: var(--gap-2);
   }
 
-  .reverse {
+  .reverse,
+  :global(.infonomic-checkbox-reverse) {
     flex-direction: row-reverse;
   }
 
-  .checkbox {
+  .checkbox,
+  :global(.infonomic-checkbox) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -31,7 +36,8 @@
     transition: all var(--transition-normal);
   }
 
-  .checkbox[data-state="checked"] {
+  .checkbox[data-state="checked"],
+  :global(.infonomic-checkbox)[data-state="checked"] {
     --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);
@@ -39,88 +45,105 @@
   }
 
   .checkbox:disabled,
-  .checkbox[disabled] {
+  :global(.infonomic-checkbox):disabled,
+  .checkbox[disabled],
+  :global(.infonomic-checkbox)[disabled] {
     pointer-events: none;
   }
 
-  .indicator {
+  .indicator,
+  :global(.infonomic-checkbox-indicator) {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .icon {
+  .icon,
+  :global(.infonomic-checkbox-icon) {
     width: 20px;
     height: 20px;
     color: var(--checkbox-icon-color);
   }
 
   /* Style for the "checked" state */
-  .indicator[data-state="checked"] .icon {
+  .indicator[data-state="checked"] .icon,
+  :global(.infonomic-checkbox-indicator)[data-state="checked"] :global(.infonomic-checkbox-icon) {
     animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
     opacity: 1;
     transform: scale(1);
   }
 
   /* Style for the "unchecked" state */
-  .indicator[data-state="unchecked"] .icon {
+  .indicator[data-state="unchecked"] .icon,
+  :global(.infonomic-checkbox-indicator)[data-state="unchecked"] :global(.infonomic-checkbox-icon) {
     animation: checkBoxOut 0.2s ease-in;
     opacity: 0;
     transform: scale(0.8);
   }
 
-  .label {
+  .label,
+  :global(.infonomic-checkbox-label) {
     margin-left: 0.25rem;
     cursor: pointer;
     font-weight: 500;
     color: var(--label-color);
   }
 
-  .checkbox:disabled ~ .label,
-  .checkbox[disabled] ~ .label {
+  .checkbox:disabled~.label,
+  .checkbox[disabled]~.label,
+  :global(.infonomic-checkbox):disabled~:global(.infonomic-checkbox-label),
+  :global(.infonomic-checkbox)[disabled]~:global(.infonomic-checkbox-label) {
     pointer-events: none;
   }
 
-  .errorText {
+  .errorText,
+  :global(.infonomic-dropdown-error-text) {
     margin-top: 0.25rem;
     font-size: 0.875rem;
     color: red;
   }
 
   /* Sizes */
-  .sm {
+  .sm,
+  :global(.infonomic-checkbox-sm) {
     width: 18px;
     height: 18px;
   }
 
-  .md {
+  .md,
+  :global(.infonomic-checkbox-md) {
     width: 20px;
     height: 20px;
   }
 
-  .lg {
+  .lg,
+  :global(.infonomic-checkbox-lg) {
     width: 22px;
     height: 22px;
   }
 
   /* Variants */
-  .outlined {
+  .outlined,
+  :global(.infonomic-checkbox-outlined) {
     border: 2px solid var(--checkbox-variant-outlined-border);
     --checkbox-icon-color: white;
   }
 
-  .outlined[data-state="checked"] {
+  .outlined[data-state="checked"],
+  :global(.infonomic-checkbox-outlined)[data-state="checked"] {
     --ring-color: var(--checkbox-variant-outline-ring-color);
     background-color: var(--checkbox-variant-outlined);
   }
 
-  .filled {
+  .filled,
+  :global(.infonomic-checkbox-filled) {
     background-color: var(--checkbox-variant-filled);
     --checkbox-icon-color: white;
   }
 
   /* Intents */
-  .primary {
+  .primary,
+  :global(.infonomic-checkbox-primary) {
     --checkbox-variant-outlined-border: var(--fill-primary-strong);
     --checkbox-variant-outlined: var(--fill-primary-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-primary-strong-hover);
@@ -129,7 +152,8 @@
     --checkbox-icon-color: var(--text-on-primary);
   }
 
-  .secondary {
+  .secondary,
+  :global(.infonomic-checkbox-secondary) {
     --checkbox-variant-outlined-border: var(--fill-secondary-strong);
     --checkbox-variant-outlined: var(--fill-secondary-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-secondary-strong-hover);
@@ -138,7 +162,8 @@
     --checkbox-icon-color: var(--text-on-secondary);
   }
 
-  .noeffect {
+  .noeffect,
+  :global(.infonomic-checkbox-noeffect) {
     --checkbox-variant-outlined-border: var(--fill-noeffect-strong);
     --checkbox-variant-outlined: var(--fill-noeffect-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-noeffect-strong-hover);
@@ -147,7 +172,8 @@
     --checkbox-icon-color: var(--text-on-noeffect);
   }
 
-  .success {
+  .success,
+  :global(.infonomic-checkbox-success) {
     --checkbox-variant-outlined-border: var(--fill-success-strong);
     --checkbox-variant-outlined: var(--fill-success-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-success-strong-hover);
@@ -156,7 +182,8 @@
     --checkbox-icon-color: var(--text-on-success);
   }
 
-  .info {
+  .info,
+  :global(.infonomic-checkbox-info) {
     --checkbox-variant-outlined-border: var(--fill-info-strong);
     --checkbox-variant-outlined: var(--fill-info-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-info-strong-hover);
@@ -165,7 +192,8 @@
     --checkbox-icon-color: var(--text-on-info);
   }
 
-  .warning {
+  .warning,
+  :global(.infonomic-checkbox-warning) {
     --checkbox-variant-outlined-border: var(--fill-warning-strong);
     --checkbox-variant-outlined: var(--fill-warning-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-warning-strong-hover);
@@ -174,7 +202,8 @@
     --checkbox-icon-color: var(--text-on-warning);
   }
 
-  .danger {
+  .danger,
+  :global(.infonomic-checkbox-danger) {
     --checkbox-variant-outlined-border: var(--fill-danger-strong);
     --checkbox-variant-outlined: var(--fill-danger-strong);
     --checkbox-variant-outlined-hover-border: var(--fill-danger-strong-hover);
@@ -220,4 +249,4 @@
       transform: scale(0.8);
     }
   }
-}
+}

package/src/components/forms/checkbox.tsx

@@ -53,9 +53,9 @@ export const Checkbox = function Checkbox({
   ref?: React.RefObject<HTMLButtonElement>
 }): React.JSX.Element {
   return (
-    <div className={cx('checkbox-container', styles.container, containerClasses)}>
+    <div className={cx('infonomic-checkbox-container', styles.container, containerClasses)}>
       <div
-        className={cx('checkbox-component', styles.component, componentClasses, {
+        className={cx('infonomic-checkbox-component', styles.component, componentClasses, {
           [styles.reverse]: reverse,
         })}
       >
@@ -64,10 +64,10 @@ export const Checkbox = function Checkbox({
           id={id}
           name={name}
           className={cx(
-            'checkbox',
-            variant,
-            size,
-            intent,
+            'infonomic-checkbox',
+            `infonomic-checkbox-${variant}`,
+            `infonomic-checkbox-${size}`,
+            `infonomic-checkbox-${intent}`,
             styles.checkbox,
             styles[variant],
             styles[size],
@@ -79,14 +79,14 @@ export const Checkbox = function Checkbox({
         >
           <CheckboxPrimitive.Indicator
             forceMount
-            className={cx('checkbox-indicator', styles.indicator)}
+            className={cx('infonomic-checkbox-indicator', styles.indicator)}
           >
             <CheckIcon className={styles.icon} />
           </CheckboxPrimitive.Indicator>
         </CheckboxPrimitive.Root>
 
         {label != null && (
-          <LabelPrimitive.Label htmlFor={id} className={cx(styles.label, labelClasses)}>
+          <LabelPrimitive.Label htmlFor={id} className={cx('infonomic-checkbox-label', styles.label, labelClasses)}>
             {label}
           </LabelPrimitive.Label>
         )}

package/src/components/forms/error-text.module.css

@@ -1,14 +1,15 @@
 @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 {
+
   .text,
-  :global(.error-text) {
+  :global(.infonomic-error-text) {
     font-size: 0.875rem;
     color: var(--error);
   }
-}
+}

package/src/components/forms/help-text.module.css

@@ -1,14 +1,15 @@
 @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 {
+
   .text,
-  :global(.help-text) {
+  :global(.infonomic-help-text) {
     font-size: 0.875rem;
     color: var(--muted);
   }
-}
+}

package/src/components/forms/help-text.tsx

@@ -10,5 +10,5 @@ interface HelpTextProps {
 }
 
 export function HelpText({ className, text }: HelpTextProps): React.JSX.Element {
-  return <p className={cx('help-text', styles.text, className)}>{text}</p>
+  return <p className={cx('infonomic-help-text', styles.text, className)}>{text}</p>
 }

package/src/components/forms/input-adornment.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 {
+
   .adornment,
-  :global(.input-adornment) {
+  :global(.infonomic-input-adornment) {
     display: flex;
     align-items: center;
     line-height: 0;
@@ -15,12 +16,12 @@
   }
 
   .start,
-  :global(.input-adornment-start) {
+  :global(.infonomic-input-adornment-start) {
     justify-content: flex-start;
   }
 
   .end,
-  :global(.input-adornment-end) {
+  :global(.infonomic-input-adornment-end) {
     justify-content: flex-end;
   }
-}
+}

package/src/components/forms/input-adornment.tsx

@@ -22,8 +22,8 @@ export function InputAdornment({
   return (
     <div
       className={cx(
-        'input-adornment',
-        position,
+        'infonomic-input-adornment',
+        `infonomic-input-adornment-${position}`,
         styles.adornment,
         { [styles.start]: position === 'start' },
         { [styles.end]: position === 'end' },