@infonomic/uikit 5.26.0 → 5.28.0

package/dist/components/accordion/accordion.js

@@ -5,13 +5,13 @@ import { Accordion } from "radix-ui";
 import accordion_module from "./accordion.module.js";
 const Root = ({ children, className, ref, ...props })=>/*#__PURE__*/ jsx(Accordion.Root, {
         ref: ref,
-        className: className,
+        className: classnames('infonomic-accordion-root', className),
         ...props,
         children: children
     });
 const Item = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Item, {
-        className: className,
+        className: classnames('infonomic-accordion-item', className),
         ...props,
         ref: ref,
         children: children
@@ -19,7 +19,7 @@ const Item = function({ ref, children, className, ...props }) {
 };
 const Header = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Header, {
-        className: classnames(accordion_module.header, className),
+        className: classnames('infonomic-accordion-header', className),
         ...props,
         ref: ref,
         children: children
@@ -28,14 +28,14 @@ const Header = function({ ref, children, className, ...props }) {
 const Trigger = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Trigger, {
         ref: ref,
-        className: classnames(accordion_module.trigger, className),
+        className: classnames('infonomic-accordion-trigger', accordion_module.trigger, className),
         ...props,
         children: children
     });
 };
 const Content = function({ ref, children, className, ...props }) {
     return /*#__PURE__*/ jsx(Accordion.Content, {
-        className: classnames(accordion_module.content, className),
+        className: classnames('infonomic-accordion-content', accordion_module.content, className),
         ...props,
         ref: ref,
         children: children

package/dist/components/accordion/accordion.module.css

@@ -1,31 +1,37 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
-  .root {
+
+  .root,
+  :global(.infonomic-accordion-root) {
     border-radius: 6px;
     width: 300px;
     background-color: var(--canvas-25);
     box-shadow: var(--shadow-md);
   }
 
-  .item {
+  .item,
+  :global(.infonomic-accordion-item) {
     overflow: hidden;
     margin-top: 1px;
   }
 
-  .header {
+  .header,
+  :global(.infonomic-accordion-header) {
     margin: 0;
     display: flex;
   }
 
-  .trigger {
+  .trigger,
+  :global(.infonomic-accordion-trigger) {
     display: flex;
     cursor: pointer;
     align-items: center;
     width: 100%;
   }
 
-  .content {
+  .content,
+  :global(.infonomic-accordion-content) {
     overflow: hidden;
 
     &[data-state="open"] {

package/dist/components/accordion/accordion_module.css

@@ -1,39 +1,39 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme;
 
 @layer infonomic-components {
-  .root-YYzqsy {
+  :is(.root-YYzqsy, .infonomic-accordion-root) {
     background-color: var(--canvas-25);
     width: 300px;
     box-shadow: var(--shadow-md);
     border-radius: 6px;
   }
 
-  .item-iZzmBc {
+  :is(.item-iZzmBc, .infonomic-accordion-item) {
     margin-top: 1px;
     overflow: hidden;
   }
 
-  .header-MBm53y {
+  :is(.header-MBm53y, .infonomic-accordion-header) {
     margin: 0;
     display: flex;
   }
 
-  .trigger-CJlwli {
+  :is(.trigger-CJlwli, .infonomic-accordion-trigger) {
     cursor: pointer;
     align-items: center;
     width: 100%;
     display: flex;
   }
 
-  .content-KoW8ID {
+  :is(.content-KoW8ID, .infonomic-accordion-content) {
     overflow: hidden;
   }
 
-  .content-KoW8ID[data-state="open"] {
+  :is(.content-KoW8ID, .infonomic-accordion-content)[data-state="open"] {
     animation: .3s cubic-bezier(.87, 0, .13, 1) accordionSlideDown-gllXUs;
   }
 
-  .content-KoW8ID[data-state="closed"] {
+  :is(.content-KoW8ID, .infonomic-accordion-content)[data-state="closed"] {
     animation: .3s cubic-bezier(.87, 0, .13, 1) accordionSlideUp-mpDLB0;
   }
 

package/dist/components/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,KAAG,KAAK,CAAC,GAAG,CAAC,OASrE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,eAAO,MAAM,MAAM,GAAI,cAAc;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,KAAG,KAAK,CAAC,GAAG,CAAC,OASrE,CAAA"}

package/dist/components/avatar/avatar.js

@@ -1,21 +1,22 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
 import { Avatar } from "radix-ui";
 import avatar_module from "./avatar.module.js";
 const url = 'https://picsum.photos/150';
 const avatar_Avatar = ({ initials })=>/*#__PURE__*/ jsxs(Avatar.Root, {
-        className: avatar_module["avatar-root"],
+        className: classnames('infonomic-avatar-root', avatar_module["avatar-root"]),
         children: [
             /*#__PURE__*/ jsx(Avatar.Image, {
                 src: url,
                 alt: "Avatar",
-                className: avatar_module["avatar-image"]
+                className: classnames('infonomic-avatar-image', avatar_module["avatar-image"])
             }),
             /*#__PURE__*/ jsx(Avatar.Fallback, {
-                className: avatar_module["avatar-fallback"],
+                className: classnames('infonomic-avatar-fallback', avatar_module["avatar-fallback"]),
                 delayMs: 600,
                 children: /*#__PURE__*/ jsx("span", {
-                    className: avatar_module["avatar-text"],
+                    className: classnames('infonomic-avatar-text', avatar_module["avatar-text"]),
                     children: initials
                 })
             })

package/dist/components/avatar/avatar.module.css

@@ -1,13 +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 {
+
   /* relative inline-flex h-10 w-10 rounded-full */
-  .avatar-root {
+  .avatar-root,
+  :global(.infonomic-avatar-root) {
     position: relative;
     display: inline-flex;
     height: 100%;
@@ -15,7 +17,8 @@
     border-radius: 50%;
   }
 
-  .avatar-image {
+  .avatar-image,
+  :global(.infonomic-avatar-image) {
     height: 100%;
     width: 100%;
     border-radius: 50%;
@@ -23,7 +26,8 @@
   }
 
   /* flex h-full w-full items-center justify-center rounded-full bg-white dark:bg-gray-800 */
-  .avatar-fallback {
+  .avatar-fallback,
+  :global(.infonomic-avatar-fallback) {
     display: flex;
     height: 100%;
     width: 100%;
@@ -33,7 +37,8 @@
     background-color: var(--color-white);
   }
 
-  .avatar-text {
+  .avatar-text,
+  :global(.infonomic-avatar-text) {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
     text-transform: uppercase;
@@ -45,7 +50,8 @@
   * color scheme - either by header or cookie, and set
   * a root html class accordingly
   */
-  :global(.dark) {
+  :global(.dark),
+  :global([data-theme="dark"]) {
     .avatar-fallback {
       background-color: var(--gray-800);
     }
@@ -54,4 +60,4 @@
       color: var(--gray-400);
     }
   }
-}
+}

package/dist/components/avatar/avatar_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  .avatar-root-WYOuF_ {
+  :is(.avatar-root-WYOuF_, .infonomic-avatar-root) {
     border-radius: 50%;
     width: 100%;
     height: 100%;
@@ -9,14 +9,14 @@
     position: relative;
   }
 
-  .avatar-image-eGBbhF {
+  :is(.avatar-image-eGBbhF, .infonomic-avatar-image) {
     object-fit: cover;
     border-radius: 50%;
     width: 100%;
     height: 100%;
   }
 
-  .avatar-fallback-LnFLNm {
+  :is(.avatar-fallback-LnFLNm, .infonomic-avatar-fallback) {
     background-color: var(--color-white);
     border-radius: 50%;
     justify-content: center;
@@ -26,18 +26,18 @@
     display: flex;
   }
 
-  .avatar-text-Xf0G6q {
+  :is(.avatar-text-Xf0G6q, .infonomic-avatar-text) {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
     text-transform: uppercase;
     color: var(--gray-700);
   }
 
-  .dark .avatar-fallback-LnFLNm {
+  :is(.dark, [data-theme="dark"]) .avatar-fallback-LnFLNm {
     background-color: var(--gray-800);
   }
 
-  .dark .avatar-text-Xf0G6q {
+  :is(.dark, [data-theme="dark"]) .avatar-text-Xf0G6q {
     color: var(--gray-400);
   }
 }

package/dist/components/badge/badge.js

@@ -6,7 +6,7 @@ const Badge = ({ className, intent = 'primary', children, asChild, ref, ...rest
     const Comp = true === asChild ? Slot : 'div';
     return /*#__PURE__*/ jsx(Comp, {
         ref: ref,
-        className: classnames('badge', intent, badge_module.badge, badge_module[intent], className),
+        className: classnames('infonomic-badge', `infonomic-badge-${intent}`, badge_module.badge, badge_module[intent], className),
         ...rest,
         children: children
     });

package/dist/components/badge/badge.module.css

@@ -8,7 +8,7 @@ infonomic-components;
 @layer infonomic-components {
 
   .badge,
-  :global(.badge) {
+  :global(.infonomic-badge) {
     display: inline-block;
     padding: 0.25em 0.4em;
     font-size: var(--font-size-sm);
@@ -21,43 +21,43 @@ infonomic-components;
   }
 
   .primary,
-  :global(.badge-primary) {
+  :global(.infonomic-badge-primary) {
     color: var(--text-on-primary-strong);
     background-color: var(--fill-primary-strong);
   }
 
   .secondary,
-  :global(.badge-secondary) {
+  :global(.infonomic-badge-secondary) {
     color: var(--text-on-secondary-strong);
     background-color: var(--fill-secondary-strong);
   }
 
   .noeffect,
-  :global(.badge-noeffect) {
+  :global(.infonomic-badge-noeffect) {
     color: var(--text-on-noeffect-strong);
     background-color: var(--fill-noeffect-strong);
   }
 
   .success,
-  :global(.badge-success) {
+  :global(.infonomic-badge-success) {
     color: var(--text-on-success-strong);
     background-color: var(--fill-success-strong);
   }
 
   .info,
-  :global(.badge-info) {
+  :global(.infonomic-badge-info) {
     color: var(--text-on-info-strong);
     background-color: var(--fill-info-strong);
   }
 
   .warning,
-  :global(.badge-warning) {
+  :global(.infonomic-badge-warning) {
     color: var(--text-on-warning-strong);
     background-color: var(--fill-warning-strong);
   }
 
   .danger,
-  :global(.badge-danger) {
+  :global(.infonomic-badge-danger) {
     color: var(--text-on-danger-strong);
     background-color: var(--fill-danger-strong);
   }

package/dist/components/badge/badge_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-functional, infonomic-utilities, infonomic-theme, infonomic-typography;
 
 @layer infonomic-components {
-  :is(.badge-8xVidp, .badge) {
+  :is(.badge-8xVidp, .infonomic-badge) {
     font-size: var(--font-size-sm);
     text-align: center;
     white-space: nowrap;
@@ -13,37 +13,37 @@
     display: inline-block;
   }
 
-  :is(.primary-oZyR_M, .badge-primary) {
+  :is(.primary-oZyR_M, .infonomic-badge-primary) {
     color: var(--text-on-primary-strong);
     background-color: var(--fill-primary-strong);
   }
 
-  :is(.secondary-VsqJTm, .badge-secondary) {
+  :is(.secondary-VsqJTm, .infonomic-badge-secondary) {
     color: var(--text-on-secondary-strong);
     background-color: var(--fill-secondary-strong);
   }
 
-  :is(.noeffect-R8eJtO, .badge-noeffect) {
+  :is(.noeffect-R8eJtO, .infonomic-badge-noeffect) {
     color: var(--text-on-noeffect-strong);
     background-color: var(--fill-noeffect-strong);
   }
 
-  :is(.success-h2otET, .badge-success) {
+  :is(.success-h2otET, .infonomic-badge-success) {
     color: var(--text-on-success-strong);
     background-color: var(--fill-success-strong);
   }
 
-  :is(.info-OG3F3u, .badge-info) {
+  :is(.info-OG3F3u, .infonomic-badge-info) {
     color: var(--text-on-info-strong);
     background-color: var(--fill-info-strong);
   }
 
-  :is(.warning-zTXksZ, .badge-warning) {
+  :is(.warning-zTXksZ, .infonomic-badge-warning) {
     color: var(--text-on-warning-strong);
     background-color: var(--fill-warning-strong);
   }
 
-  :is(.danger-hKF7l_, .badge-danger) {
+  :is(.danger-hKF7l_, .infonomic-badge-danger) {
     color: var(--text-on-danger-strong);
     background-color: var(--fill-danger-strong);
   }

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

@@ -1,8 +1,9 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .button-group,
-  :global(.button-group) {
+  :global(.infonomic-button-group) {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -11,9 +12,10 @@
   }
 
   @media screen and (min-width: 40rem) {
+
     .button-group,
-    :global(.button-group) {
+    :global(.infonomic-button-group) {
       flex-direction: row;
     }
   }
-}
+}

package/dist/components/button/button-group_module.css

@@ -1,7 +1,7 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme;
 
 @layer infonomic-components {
-  :is(.button-group-uqvOi8, .button-group) {
+  :is(.button-group-uqvOi8, .infonomic-button-group) {
     place-items: center;
     gap: var(--gap-2);
     flex-direction: column;
@@ -9,7 +9,7 @@
   }
 
   @media screen and (min-width: 40rem) {
-    :is(.button-group-uqvOi8, .button-group) {
+    :is(.button-group-uqvOi8, .infonomic-button-group) {
       flex-direction: row;
     }
   }

package/dist/components/button/button.js

@@ -17,7 +17,7 @@ const Button = ({ variant = 'filled', size = 'md', type = 'button', intent = 'pr
     return /*#__PURE__*/ jsx(Comp, {
         ref: ref,
         type: type,
-        className: classnames('button', intent, variant, size, button_module.button, button_module[variant], button_module[size], button_module[intent], {
+        className: classnames('infonomic-button', `infonomic-button-${intent}`, `infonomic-button-${variant}`, `infonomic-button-${size}`, button_module.button, button_module[variant], button_module[size], button_module[intent], {
             [button_module.fullWidth]: true === fullWidth
         }, className),
         onMouseDown: onMouseDown,