@infonomic/uikit 5.27.0 → 5.29.0

package/src/components/notifications/toast.module.css

@@ -9,7 +9,8 @@ infonomic-components;
   /* Positions are relative to the toast viewport which is set 
    globally in components/toast.css  */
 
-  .root {
+  .root,
+  :global(.infonomic-toast-root) {
     position: absolute;
     display: flex;
     flex-direction: column;
@@ -26,39 +27,50 @@ infonomic-components;
 
   :global(.dark),
   :global([data-theme="dark"]) {
-    .root {
+
+    .root,
+    :global(.infonomic-toast-root) {
       background: var(--canvas-800);
     }
   }
 
-  .root[data-state="open"] {
+  .root[data-state="open"],
+  :global(.infonomic-toast-root[data-state="open"]) {
     animation: slideInFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
   }
 
-  .root[data-state="closed"] {
+  .root[data-state="closed"],
+  :global(.infonomic-toast-root[data-state="closed"]) {
     animation: hide 100ms ease-in;
   }
 
-  .root[data-swipe="move"] {
+  .root[data-swipe="move"],
+  :global(.infonomic-toast-root[data-swipe="move"]) {
     transform: translateX(var(--radix-toast-swipe-move-x));
   }
 
-  .root[data-swipe="cancel"] {
+  .root[data-swipe="cancel"],
+  :global(.infonomic-toast-root[data-swipe="cancel"]) {
     transform: translateX(0);
     transition: transform 200ms ease-out;
   }
 
   .root.top-right[data-swipe="end"],
-  .root.bottom-right[data-swipe="end"] {
+  .root.bottom-right[data-swipe="end"],
+  :global(.infonomic-toast-root.top-right[data-swipe="end"]),
+  :global(.infonomic-toast-root.bottom-right[data-swipe="end"]) {
     animation: swipeOutToRight 100ms ease-out;
   }
 
   .root.top-left[data-swipe="end"],
-  .root.bottom-left[data-swipe="end"] {
+  .root.bottom-left[data-swipe="end"],
+  :global(.infonomic-toast-root.top-left[data-swipe="end"]),
+  :global(.infonomic-toast-root.bottom-left[data-swipe="end"]) {
     animation: swipeOutToLeft 100ms ease-out;
   }
 
-  .header {
+  .header,
+  :global(.infonomic-toast-header) {
     display: flex;
     padding: 0 16px 0 12px;
     align-items: start;
@@ -66,7 +78,8 @@ infonomic-components;
     justify-content: space-between;
   }
 
-  .close {
+  .close,
+  :global(.infonomic-toast-close) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -80,11 +93,13 @@ infonomic-components;
     margin-top: -2px;
   }
 
-  .close svg {
+  .close svg,
+  :global(.infonomic-toast-close svg) {
     fill: white;
   }
 
-  .title {
+  .title,
+  :global(.infonomic-toast-title) {
     display: flex;
     padding: 0 12px 0 8px;
     align-items: start;
@@ -94,14 +109,16 @@ infonomic-components;
     font-size: 15px;
   }
 
-  .description {
+  .description,
+  :global(.infonomic-toast-description) {
     margin: 0;
     padding: 0 8px 0 12px;
     font-size: var(--font-size-sm);
     line-height: 1.3;
   }
 
-  .action {
+  .action,
+  :global(.infonomic-toast-action) {
     display: flex;
     justify-content: end;
     padding: 0 12px 0 12px;
@@ -110,25 +127,29 @@ infonomic-components;
   /* Positions are relative to the toast viewport which is set 
    globally in components/toast.css  */
 
-  .top-left {
+  .top-left,
+  :global(.infonomic-toast-top-left) {
     top: 88px;
     right: 16px;
     left: 16px;
   }
 
-  .top-right {
+  .top-right,
+  :global(.infonomic-toast-top-right) {
     top: 88px;
     right: 16px;
     left: 16px;
   }
 
-  .bottom-left {
+  .bottom-left,
+  :global(.infonomic-toast-bottom-left) {
     bottom: 16px;
     right: 16px;
     left: 16px;
   }
 
-  .bottom-right {
+  .bottom-right,
+  :global(.infonomic-toast-bottom-right) {
     bottom: 16px;
     right: 16px;
     left: 16px;
@@ -137,16 +158,21 @@ infonomic-components;
   @media (min-width: 48rem) {
 
     .root.top-right[data-state="open"],
-    .root.bottom-right[data-state="open"] {
+    .root.bottom-right[data-state="open"],
+    :global(.infonomic-toast-root.top-right[data-state="open"]),
+    :global(.infonomic-toast-root.bottom-right[data-state="open"]) {
       animation: slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     .root.top-left[data-state="open"],
-    .root.bottom-left[data-state="open"] {
+    .root.bottom-left[data-state="open"],
+    :global(.infonomic-toast-root.top-left[data-state="open"]),
+    :global(.infonomic-toast-root.bottom-left[data-state="open"]) {
       animation: slideInFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
     }
 
-    .bottom-right {
+    .bottom-right,
+    :global(.infonomic-toast-bottom-right) {
       bottom: 16px;
       right: 16px;
       left: auto;
@@ -154,7 +180,8 @@ infonomic-components;
       max-width: 390px;
     }
 
-    .bottom-left {
+    .bottom-left,
+    :global(.infonomic-toast-bottom-left) {
       bottom: 16px;
       left: 16px;
       right: auto;
@@ -162,7 +189,8 @@ infonomic-components;
       max-width: 390px;
     }
 
-    .top-left {
+    .top-left,
+    :global(.infonomic-toast-top-left) {
       top: 88px;
       left: 16px;
       right: auto;
@@ -171,7 +199,8 @@ infonomic-components;
       max-width: 390px;
     }
 
-    .top-right {
+    .top-right,
+    :global(.infonomic-toast-top-right) {
       top: 88px;
       right: 16px;
       bottom: auto;

package/src/components/notifications/toast.tsx

@@ -79,11 +79,11 @@ export const Toast = function Toast({
   return (
     <ToastPrimitive.Root
       ref={mergedRef}
-      className={cx('toast', styles.root, styles[position])}
+      className={cx('infonomic-toast', styles.root, styles[position])}
       open={open}
       onOpenChange={onOpenChange}
     >
-      <div className={cx('toast-header', styles.header)}>
+      <div className={cx('infonomic-toast-header', styles.header)}>
         <time dateTime={eventDateRef.current.toISOString()} className="text-sm">
           {new Intl.DateTimeFormat('default', {
             hour12: true,
@@ -98,7 +98,7 @@ export const Toast = function Toast({
               tabIndex={0}
               variant="filled"
               aria-label="Close"
-              className={styles.close}
+              className={cx('infonomic-toast-close', styles.close)}
               type="button"
               onClick={handleOnClose}
             >
@@ -107,11 +107,11 @@ export const Toast = function Toast({
           </ToastPrimitive.Close>
         )}
       </div>
-      <ToastPrimitive.Title className={cx('toast-title', styles.title)}>
+      <ToastPrimitive.Title className={cx('infonomic-toast-title', styles.title)}>
         {icon != null && <Icon />}
         {title}
       </ToastPrimitive.Title>
-      <ToastPrimitive.Description className={cx('toast-description', styles.description)}>
+      <ToastPrimitive.Description className={cx('infonomic-toast-description', styles.description)}>
         {message}
       </ToastPrimitive.Description>
       {/* <ToastPrimitive.Action className={styles.action} asChild altText="Goto schedule to undo">

package/src/components/overlay/overlay.module.css

@@ -1,7 +1,9 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
 
 @layer infonomic-components {
-  .overlay {
+
+  .overlay,
+  :global(.infonomic-overlay) {
     position: fixed;
     top: 0;
     left: 0;
@@ -11,16 +13,22 @@
     z-index: 20;
   }
 
-  :global(.dark) .overlay,
-  :global([data-theme="dark"]) .overlay {
-    background-color: rgba(0, 0, 0, 0.5);
+  :global(.dark),
+  :global([data-theme="dark"]) {
+
+    .overlay,
+    :global(.infonomic-overlay) {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
   }
 
-  .animate-fade-in {
+  .animate-fade-in,
+  :global(.infonomic-animate-fade-in) {
     animation: fade-in 0.3s ease-in-out;
   }
 
-  .animate-fade-out {
+  .animate-fade-out,
+  :global(.infonomic-animate-fade-out) {
     animation: fade-out 0.3s ease-in-out;
   }
 

package/src/components/pager/pagination.module.css

@@ -6,34 +6,35 @@ infonomic-typography,
 infonomic-components;
 
 @layer infonomic-components {
-  .pagination-root {
-    display: flex;
-    padding: 0;
-    align-items: center;
-  }
 
-  .pagination-items {
+  .pagination-root,
+  :global(.infonomic-pagination-root) {
     display: flex;
+    padding: 0;
     align-items: center;
-    list-style: none;
   }
 
-  .pagination-items {
+  .pagination-items,
+  :global(.infonomic-pagination-items) {
     display: flex;
     align-items: center;
     list-style: none;
   }
 
   .pagination-items.dashboard li,
-  .pagination-items.default li {
+  .pagination-items.default li,
+  :global(.infonomic-pagination-items.dashboard) li,
+  :global(.infonomic-pagination-items.default) li {
     margin-right: -1px;
   }
 
-  .pagination-items.classic li {
+  .pagination-items.classic li,
+  :global(.infonomic-pagination-items.classic) li {
     margin-right: 0;
   }
 
-  .pagination-items.classic {
+  .pagination-items.classic,
+  :global(.infonomic-pagination-items.classic) {
     gap: 6px;
   }
 

package/src/components/pager/pagination.tsx

@@ -237,13 +237,13 @@ const Root = ({
     <nav
       data-testid={dataTestId}
       ref={ref}
-      className={cx('pagination-root', styles['pagination-root'], 'pagination-root', className)}
+      className={cx('infonomic-pagination-root', styles['pagination-root'], 'pagination-root', className)}
       {...rest}
       aria-label={ariaLabel ?? 'Pager navigation'}
     >
       <ul
         className={cx(
-          'pagination-items',
+          'infonomic-pagination-items',
           styles['pagination-items'],
           styles[variant],
           itemsClassName

package/src/components/scroll-area/scroll-area.module.css

@@ -1,25 +1,29 @@
 @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 {
-  .root {
+
+  .root,
+  :global(.infonomic-scroll-area) {
     border-radius: 4px;
     overflow: hidden;
     background-color: inherit;
     --scrollbar-size: 10px;
   }
 
-  .viewport {
+  .viewport,
+  :global(.infonomic-scroll-area-viewport) {
     width: 100%;
     height: 100%;
     border-radius: inherit;
   }
 
-  .scrollbar {
+  .scrollbar,
+  :global(.infonomic-scroll-area-scrollbar) {
     display: flex;
     /* ensures no selection */
     user-select: none;
@@ -43,7 +47,8 @@
     }
   }
 
-  .thumb {
+  .thumb,
+  :global(.infonomic-scroll-area-thumb) {
     flex: 1;
     background: var(--surface-panel-scrollbar-thumb);
     border-radius: var(--border-radius-sm);
@@ -63,7 +68,8 @@
     }
   }
 
-  .corner {
+  .corner,
+  :global(.infonomic-scroll-area-corner) {
     background: var(--surface-panel-scrollbar);
   }
-}
+}

package/src/components/scroll-area/scroll-area.tsx

@@ -5,19 +5,19 @@ import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui'
 
 import styles from './scroll-area.module.css'
 
-interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {}
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> { }
 
 export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
-  <ScrollAreaPrimitive.Root style={style} className={cx('scroll-area', styles.root, className)}>
-    <ScrollAreaPrimitive.Viewport className={styles.viewport}>
+  <ScrollAreaPrimitive.Root style={style} className={cx('infonomic-scroll-area', styles.root, className)}>
+    <ScrollAreaPrimitive.Viewport className={cx('infonomic-scroll-area-viewport', styles.viewport)}>
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollAreaPrimitive.Scrollbar className={styles.scrollbar} orientation="vertical">
-      <ScrollAreaPrimitive.Thumb className={styles.thumb} />
+    <ScrollAreaPrimitive.Scrollbar className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)} orientation="vertical">
+      <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
     </ScrollAreaPrimitive.Scrollbar>
-    <ScrollAreaPrimitive.Scrollbar className={styles.scrollbar} orientation="horizontal">
-      <ScrollAreaPrimitive.Thumb className={styles.thumb} />
+    <ScrollAreaPrimitive.Scrollbar className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)} orientation="horizontal">
+      <ScrollAreaPrimitive.Thumb className={cx('infonomic-scroll-area-thumb', styles.thumb)} />
     </ScrollAreaPrimitive.Scrollbar>
-    <ScrollAreaPrimitive.Corner className={styles.corner} />
+    <ScrollAreaPrimitive.Corner className={cx('infonomic-scroll-area-corner', styles.corner)} />
   </ScrollAreaPrimitive.Root>
 )

package/src/components/scroll-to-top/scroll-to-top.module.css

@@ -1,12 +1,13 @@
 @layer infonomic-base,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
+
   .scroll-to-top,
-  :global(.scroll-to-top) {
+  :global(.infonomic-scroll-to-top) {
     display: flex;
     position: fixed;
     width: 0;
@@ -33,28 +34,28 @@
   }
 
   .scroll-to-top span,
-  :global(.scroll-to-top span) {
+  :global(.infonomic-scroll-to-top span) {
     width: 18px;
     padding-bottom: 3px;
   }
 
   .scroll-to-top span svg path,
-  :global(.scroll-to-top span svg path) {
+  :global(.infonomic-scroll-to-top span svg path) {
     stroke: none;
     fill: var(--text-on-primary);
   }
 
   .scroll-to-top:hover,
   .scroll-to-top:focus,
-  :global(.scroll-to-top:hover),
-  :global(.scroll-to-top:focus) {
+  :global(.infonomic-scroll-to-top:hover),
+  :global(.infonomic-scroll-to-top:focus) {
     color: var(--text-on-primary);
     background-color: var(--fill-primary-strong-hover);
     transform: translateY(-5px);
   }
 
   .scroll-to-top-shown,
-  :global(.scroll-to-top-shown) {
+  :global(.infonomic-scroll-to-top-shown) {
     min-width: 0;
     opacity: 1;
     visibility: visible;
@@ -67,19 +68,20 @@
   }
 
   @media screen and (min-width: 587px) {
+
     .scroll-to-top,
-    :global(.scroll-to-top) {
+    :global(.infonomic-scroll-to-top) {
       bottom: 45px;
       right: 45px;
     }
 
     .scroll-to-top span,
-    :global(.scroll-to-top span) {
+    :global(.infonomic-scroll-to-top span) {
       width: 18px;
     }
 
     .scroll-to-top-shown,
-    :global(.scroll-to-top-shown) {
+    :global(.infonomic-scroll-to-top-shown) {
       width: 42px;
       height: 42px;
       border-radius: 21px;
@@ -87,4 +89,4 @@
       right: 22px;
     }
   }
-}
+}

package/src/components/scroll-to-top/scroll-to-top.tsx

@@ -61,10 +61,10 @@ export function ScrollToTop({
       aria-label={ariaLabel}
       onClick={handleOnClick}
       className={cx(
-        'scroll-to-top',
+        'infonomic-scroll-to-top',
         styles['scroll-to-top'],
         {
-          'scroll-to-top-shown': show,
+          'infonomic-scroll-to-top-shown': show,
           [styles['scroll-to-top-shown']]: show,
         },
         className

package/src/components/section/section.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 {
+
   .section,
-  :global(.section) {
+  :global(.infonomic-section) {
     width: 100%;
     position: relative;
   }
-}
+}

package/src/components/section/section.tsx

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

package/src/components/shimmer/shimmer.module.css

@@ -7,7 +7,9 @@ infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {
-  .shimmer {
+
+  .shimmer,
+  :global(.infonomic-shimmer) {
     position: relative;
     overflow: hidden;
     background-color: #f0f0f0;
@@ -18,27 +20,33 @@ infonomic-components;
 
   :global(.dark),
   :global([data-theme="dark"]) {
-    .shimmer {
+
+    .shimmer,
+    :global(.infonomic-shimmer) {
       background-color: #141414;
       background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.01), transparent);
     }
   }
 
-  .shimmerContainer {
+  .shimmerContainer,
+  :global(.infonomic-shimmer-container) {
     display: flex;
     flex-direction: column;
   }
 
-  .rectangular {
+  .rectangular,
+  :global(.infonomic-shimmer-rectangular) {
     border-radius: 0.25rem;
   }
 
-  .text {
+  .text,
+  :global(.infonomic-shimmer-text) {
     border-radius: 0.125rem;
     height: 1rem;
   }
 
-  .circular {
+  .circular,
+  :global(.infonomic-shimmer-circular) {
     border-radius: 50%;
     aspect-ratio: 1;
   }