@infonomic/uikit 5.44.0 → 6.0.0

package/dist/components/button/button_module.css

@@ -8,10 +8,10 @@
     white-space: nowrap;
     outline-offset: 2px;
     transition: background-color var(--transition-normal),
-      box-shadow var(--transition-normal);
+      outline-color var(--transition-normal);
     border-radius: var(--border-radius-sm);
     border: none;
-    outline: 2px solid #0000;
+    outline: 1px solid #0000;
     justify-content: center;
     align-items: center;
     font-weight: normal;
@@ -24,10 +24,7 @@
   }
 
   :is(.button-IjDhC0:focus, .button-IjDhC0:active, .infonomic-button:focus, .infonomic-button: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);
+    outline-color: var(--ring-color);
   }
 
   .button-IjDhC0.square-P_6yde {
@@ -142,8 +139,8 @@
   :is(.gradient-ySC3O3, .infonomic-button-gradient) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(45deg,
-      var(--button-variant-gradient-start),
-      var(--button-variant-gradient-end));
+        var(--button-variant-gradient-start),
+        var(--button-variant-gradient-end));
   }
 
   :is(.gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled], .infonomic-button-gradient:disabled, .infonomic-button-gradient[disabled]) {
@@ -155,8 +152,8 @@
   :is(.gradient-ySC3O3:hover, .infonomic-button-gradient:hover) {
     color: var(--button-variant-gradient-foreground);
     background: linear-gradient(45deg,
-      var(--button-variant-gradient-start),
-      var(--button-variant-gradient-end));
+        var(--button-variant-gradient-start),
+        var(--button-variant-gradient-end));
   }
 
   :is(.gradient-ySC3O3:focus, .gradient-ySC3O3:active, .infonomic-button-gradient:focus, .infonomic-button-gradient:active) {

package/dist/components/button/combo-button.d.ts

@@ -17,5 +17,5 @@ export type ComboButtonProps = ButtonProps & {
     buttonClassName?: string;
     triggerClassName?: string;
 };
-export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, disabled, buttonDisabled, optionsDisabled, children, align, dataSide, sideOffset, className, buttonClassName, triggerClassName, ...rest }: ComboButtonProps) => import("react").JSX.Element;
+export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, disabled, buttonDisabled, optionsDisabled, children, align, dataSide, sideOffset, className, buttonClassName, triggerClassName, intent, ...rest }: ComboButtonProps) => import("react").JSX.Element;
 //# sourceMappingURL=combo-button.d.ts.map

package/dist/components/button/combo-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,qLAezB,gBAAgB,gCAgDlB,CAAA"}
+{"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,6LAgBzB,gBAAgB,gCAuDlB,CAAA"}

package/dist/components/button/combo-button.js

@@ -4,12 +4,16 @@ import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
 import { Dropdown } from "../dropdown/dropdown.js";
 import { Button } from "./button.js";
 import combo_button_module from "./combo-button.module.js";
-const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false, buttonDisabled = false, optionsDisabled = false, children, align = 'end', dataSide = 'top', sideOffset = 5, className, buttonClassName, triggerClassName, ...rest })=>/*#__PURE__*/ jsxs("div", {
+const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false, buttonDisabled = false, optionsDisabled = false, children, align = 'end', dataSide = 'top', sideOffset = 5, className, buttonClassName, triggerClassName, intent = 'primary', ...rest })=>/*#__PURE__*/ jsxs("div", {
         className: classnames('combo-button-wrapper', combo_button_module["combo-button-wrapper"], className),
+        style: {
+            '--ring-color': `var(--ring-${intent})`
+        },
         children: [
             /*#__PURE__*/ jsx(Button, {
                 className: classnames('combo-button-button', combo_button_module["combo-button-button"], buttonClassName),
                 disabled: disabled || buttonDisabled,
+                intent: intent,
                 ...rest,
                 onClick: onButtonClick,
                 children: children
@@ -17,15 +21,15 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false,
             /*#__PURE__*/ jsxs(Dropdown.Root, {
                 children: [
                     /*#__PURE__*/ jsx(Dropdown.Trigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ jsx(Button, {
-                            className: classnames('combo-button-trigger', combo_button_module["combo-button-trigger"], triggerClassName),
+                        className: classnames('combo-button-trigger', combo_button_module["combo-button-trigger"], triggerClassName),
+                        render: /*#__PURE__*/ jsx(Button, {
                             disabled: disabled || optionsDisabled,
-                            ...rest,
-                            children: /*#__PURE__*/ jsx(ChevronDownIcon, {
-                                width: "16px",
-                                height: "16px"
-                            })
+                            intent: intent,
+                            ...rest
+                        }),
+                        children: /*#__PURE__*/ jsx(ChevronDownIcon, {
+                            width: "16px",
+                            height: "16px"
                         })
                     }),
                     options.length > 0 && /*#__PURE__*/ jsx(Dropdown.Portal, {

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

@@ -1,35 +1,45 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .combo-button-wrapper,
   :global(.infonomic-combo-button-wrapper) {
     display: flex;
     align-items: center;
     gap: 0.075rem;
+    border-radius: var(--border-radius-sm);
+    outline: 1px solid transparent;
+    outline-offset: 2px;
+    transition: outline-color var(--transition-normal);
+  }
+
+  .combo-button-wrapper:focus-within,
+  .combo-button-wrapper:has([data-popup-open]),
+  :global(.infonomic-combo-button-wrapper):focus-within,
+  :global(.infonomic-combo-button-wrapper):has([data-popup-open]) {
+    outline-color: var(--ring-color);
   }
 
   .combo-button-button,
   :global(.infonomic-combo-button-button) {
-    box-shadow: none;
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }
 
   .combo-button-button:focus,
   .combo-button-button:active {
-    box-shadow: none;
+    outline-color: transparent;
   }
 
   .combo-button-trigger,
   :global(.infonomic-combo-button-trigger) {
-    box-shadow: none;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
   .combo-button-trigger:focus,
   .combo-button-trigger:active {
-    box-shadow: none;
+    outline-color: transparent;
   }
 
   .combo-button-options,
@@ -38,6 +48,5 @@
   }
 
   .combo-button-options-item,
-  :global(.infonomic-combo-button-options-item) {
-  }
-}
+  :global(.infonomic-combo-button-options-item) {}
+}

package/dist/components/button/combo-button_module.css

@@ -2,29 +2,47 @@
 
 @layer infonomic-components {
   :is(.combo-button-wrapper-nRtH6j, .infonomic-combo-button-wrapper) {
+    border-radius: var(--border-radius-sm);
+    outline-offset: 2px;
+    transition: outline-color var(--transition-normal);
+    outline: 1px solid #0000;
     align-items: center;
     gap: .075rem;
     display: flex;
   }
 
+  .combo-button-wrapper-nRtH6j:focus-within {
+    outline-color: var(--ring-color);
+  }
+
+  .combo-button-wrapper-nRtH6j:has([data-popup-open]) {
+    outline-color: var(--ring-color);
+  }
+
+  .infonomic-combo-button-wrapper:focus-within {
+    outline-color: var(--ring-color);
+  }
+
+  .infonomic-combo-button-wrapper:has([data-popup-open]) {
+    outline-color: var(--ring-color);
+  }
+
   :is(.combo-button-button-Cb8qgF, .infonomic-combo-button-button) {
-    box-shadow: none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
   .combo-button-button-Cb8qgF:focus, .combo-button-button-Cb8qgF:active {
-    box-shadow: none;
+    outline-color: #0000;
   }
 
   :is(.combo-button-trigger-mVb2fy, .infonomic-combo-button-trigger) {
-    box-shadow: none;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
   .combo-button-trigger-mVb2fy:focus, .combo-button-trigger-mVb2fy:active {
-    box-shadow: none;
+    outline-color: #0000;
   }
 
   :is(.combo-button-options-T9vVC9, .infonomic-combo-button-options) {

package/dist/components/button/icon-button.d.ts

@@ -1,9 +1,8 @@
-import type React from 'react';
 import type { ButtonProps } from './button.js';
-type IconButtonProps<C extends React.ElementType = 'button'> = ButtonProps<C> & {
+type IconButtonProps = ButtonProps & {
     square?: boolean;
     round?: boolean;
 };
-export declare const IconButton: <C extends React.ElementType = "button">({ square, round, variant, size, intent, className, children, ...rest }: IconButtonProps<C>) => React.JSX.Element;
+export declare const IconButton: ({ square, round, variant, size, intent, className, children, ...rest }: IconButtonProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=icon-button.d.ts.map

package/dist/components/button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,wEAShE,eAAe,CAAC,CAAC,CAAC,sBAoBpB,CAAA"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,KAAK,eAAe,GAAG,WAAW,GAAG;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,wEASxB,eAAe,gCAoBjB,CAAA"}

package/dist/components/card/card.d.ts

@@ -1,20 +1,13 @@
 import type React from 'react';
-type AsDiv = {
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'div'>;
-interface AsSlot {
-    asChild?: true;
-}
-export type CardRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
-export type CardProps<C extends React.ElementType = 'div'> = {
+import { useRender } from '@base-ui/react/use-render';
+export type CardProps = useRender.ComponentProps<'div'> & {
     children: React.ReactNode;
     className?: string;
     hover?: boolean;
-    asChild?: boolean;
-    ref?: CardRefType<C>;
-} & (AsSlot | AsDiv);
+    ref?: React.Ref<HTMLDivElement>;
+};
 declare const Card: {
-    <C extends React.ElementType = "div">({ className, hover, children, asChild, ref, ...rest }: CardProps<C>): React.JSX.Element;
+    ({ className, hover, children, render, ref, ...rest }: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
     displayName: string;
     Header: {
         ({ className, ref, ...props }: OtherProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,KAAK,CAAA;CAChB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAEzC,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAE5F,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;CACrB,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;AAEpB,QAAA,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,iEAOtC,SAAS,CAAC,CAAC,CAAC;;;uCAkB+B,UAAU;;;;uCAUX,UAAU;;;;uCASJ,UAAU;;;;uCASd,UAAU;;;;uCASX,UAAU;;;CA7CvD,CAAA;AAID,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC;AAsDD,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAKrD,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC,CAAA;AAED,QAAA,MAAM,IAAI;2DAA0D,SAAS;;;uCAwB/B,UAAU;;;;uCAUX,UAAU;;;;uCASJ,UAAU;;;;uCASd,UAAU;;;;uCASX,UAAU;;;CA7CvD,CAAA;AAID,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC;AAsDD,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/card/card.js

@@ -1,17 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
+import { useRender } from "@base-ui/react/use-render";
 import classnames from "classnames";
 import card_module from "./card.module.js";
-const Card = ({ className, hover, children, asChild, ref, ...rest })=>{
-    const Comp = true === asChild ? Slot : 'div';
+const Card = ({ className, hover, children, render, ref, ...rest })=>{
     const hoverClasses = null != hover && true === hover ? card_module["card-hover"] : void 0;
-    const classes = classnames(card_module.card, hoverClasses, className);
-    return /*#__PURE__*/ jsx(Comp, {
-        ref: ref,
-        className: classnames('infonomic-card', classes),
-        ...rest,
-        children: children
+    const classes = classnames('infonomic-card', card_module.card, hoverClasses, className);
+    const element = useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: {
+            ...rest,
+            className: classes,
+            children
+        }
     });
+    return element;
 };
 Card.displayName = 'Card';
 const Header = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {

package/dist/components/chips/chip.d.ts

@@ -1,15 +1,9 @@
 import type React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { ChipIntent, ChipSize, ChipVariant } from './@types/chip.js';
-type AsButton = {
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'button'>;
-interface AsSlot {
-    asChild?: true;
-}
-export type ChipRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
 type ToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
 type RemoveEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
-export type ChipProps<C extends React.ElementType = 'button'> = {
+export type ChipProps = Omit<useRender.ComponentProps<'button'>, 'onToggle'> & {
     variant?: ChipVariant;
     intent?: ChipIntent;
     size?: ChipSize;
@@ -22,10 +16,10 @@ export type ChipProps<C extends React.ElementType = 'button'> = {
     onToggle?: (selected: boolean, event: ToggleEvent) => void;
     onRemove?: (event: RemoveEvent) => void;
     className?: string;
-    ref?: ChipRefType<C>;
-} & (AsButton | AsSlot) & Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>;
+    ref?: React.Ref<HTMLButtonElement>;
+} & Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>;
 export declare const Chip: {
-    <C extends React.ElementType = "button">({ variant, intent, size, selected, disabled, startIcon, endIcon, selectedIcon, removeLabel, onToggle, onRemove, className, children, asChild, ref, ...rest }: ChipProps<C>): React.JSX.Element;
+    ({ variant, intent, size, selected, disabled, startIcon, endIcon, selectedIcon, removeLabel, onToggle, onRemove, className, children, render, ref, ...rest }: ChipProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
     displayName: string;
 };
 export {};

package/dist/components/chips/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chips/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEzE,KAAK,QAAQ,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAA;AAE9E,UAAU,MAAM;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAE5F,KAAK,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;AACnF,KAAK,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;AAEnF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAC9D,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;CACrB,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC,GACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAErD,eAAO,MAAM,IAAI;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,2KAiB7C,SAAS,CAAC,CAAC,CAAC;;CAwId,CAAA"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chips/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAMrD,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEzE,KAAK,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;AACnF,KAAK,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;AAEnF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAEvD,eAAO,MAAM,IAAI;kKAiBd,SAAS;;CAkJX,CAAA"}

package/dist/components/chips/chip.js

@@ -1,13 +1,14 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import classnames from "classnames";
 import { CheckIcon } from "../../icons/check-icon.js";
 import { CloseIcon } from "../../icons/close-icon.js";
 import chip_module from "./chip.module.js";
-const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected = false, disabled = false, startIcon, endIcon, selectedIcon, removeLabel = 'Remove chip', onToggle, onRemove, className, children, asChild, ref, ...rest })=>{
+const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected = false, disabled = false, startIcon, endIcon, selectedIcon, removeLabel = 'Remove chip', onToggle, onRemove, className, children, render, ref, ...rest })=>{
     const { onClick, onKeyDown, role, tabIndex, ...restProps } = rest;
-    const Comp = true === asChild ? Slot : 'button';
+    const isCustomElement = null != render;
     const isSelectable = 'selectable' === variant || 'selectable-removable' === variant;
     const isRemovable = 'removable' === variant || 'selectable-removable' === variant;
     const isSelected = Boolean(selected);
@@ -18,7 +19,7 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
     };
     const handleKeyDown = (event)=>{
         if (disabled) return;
-        if (('Enter' === event.key || ' ' === event.key) && true === asChild) {
+        if (('Enter' === event.key || ' ' === event.key) && isCustomElement) {
             event.preventDefault();
             if (onClick) onClick(event);
             if (isSelectable && onToggle) onToggle(!isSelected, event);
@@ -57,38 +58,45 @@ const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected =
         })
     }) : endIcon;
     const appliedVariant = isSelected ? 'filled' : 'outlined';
-    return /*#__PURE__*/ jsxs(Comp, {
-        ref: ref,
-        type: true === asChild ? void 0 : 'button',
-        role: role ?? (true === asChild ? 'button' : void 0),
+    const defaultProps = {
+        type: isCustomElement ? void 0 : 'button',
+        role: role ?? (isCustomElement ? 'button' : void 0),
         tabIndex: disabled ? -1 : tabIndex ?? 0,
-        "aria-disabled": disabled || void 0,
-        "aria-pressed": isSelectable ? isSelected : void 0,
-        "aria-selected": isSelectable ? isSelected : void 0,
+        'aria-disabled': disabled || void 0,
+        'aria-pressed': isSelectable ? isSelected : void 0,
+        'aria-selected': isSelectable ? isSelected : void 0,
         className: classnames('infonomic-chip', `infonomic-chip-${variant}`, `infonomic-chip-${intent}`, `infonomic-chip-${size}`, {
             selected: isSelected,
             disabled,
             removable: isRemovable
         }, chip_module.chip, chip_module[appliedVariant], chip_module[intent], chip_module[size], className),
-        disabled: true === asChild ? void 0 : disabled,
+        disabled: isCustomElement ? void 0 : disabled,
         onClick: handleClick,
         onKeyDown: handleKeyDown,
-        ...restProps,
-        children: [
-            null != leadingIcon && /*#__PURE__*/ jsx("span", {
-                className: classnames('infonomic-chip-icon-wrapper', chip_module.iconWrapper),
-                children: leadingIcon
-            }),
-            /*#__PURE__*/ jsx("span", {
-                className: classnames('infonomic-chip-label', chip_module.label),
-                children: children
-            }),
-            null != trailingIcon && /*#__PURE__*/ jsx("span", {
-                className: classnames('infonomic-chip-icon-wrapper', chip_module.iconWrapper),
-                children: trailingIcon
-            })
-        ]
+        children: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                null != leadingIcon && /*#__PURE__*/ jsx("span", {
+                    className: classnames('infonomic-chip-icon-wrapper', chip_module.iconWrapper),
+                    children: leadingIcon
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: classnames('infonomic-chip-label', chip_module.label),
+                    children: children
+                }),
+                null != trailingIcon && /*#__PURE__*/ jsx("span", {
+                    className: classnames('infonomic-chip-icon-wrapper', chip_module.iconWrapper),
+                    children: trailingIcon
+                })
+            ]
+        })
+    };
+    const element = useRender({
+        defaultTagName: 'button',
+        render,
+        ref,
+        props: mergeProps(defaultProps, restProps)
     });
+    return element;
 };
 Chip.displayName = 'Chip';
 export { Chip };

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

@@ -1,11 +1,12 @@
 @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 {
+
   .chip,
   :global(.infonomic-chip) {
     --chip-font-size: 0.9rem;
@@ -15,7 +16,7 @@
     --chip-icon-size: 1rem;
     --chip-gap: var(--gap-1);
     appearance: none;
-    outline: 2px solid transparent;
+    outline: 1px solid transparent;
     outline-offset: 2px;
     display: inline-flex;
     align-items: center;
@@ -30,7 +31,7 @@
     font-size: var(--chip-font-size);
     transition:
       background-color var(--transition-normal),
-      box-shadow var(--transition-normal);
+      outline-color var(--transition-normal);
   }
 
   .chip:disabled,
@@ -44,10 +45,7 @@
   .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);
+    outline-color: var(--ring-color);
   }
 
   .label,
@@ -150,14 +148,10 @@
   .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,
-      oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
-    );
+    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,
+        oklch(from var(--chip-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
   /* -------------------------------------------------------- */
@@ -185,14 +179,10 @@
   .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,
-      oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
-    );
+    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,
+        oklch(from var(--chip-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
   /* -------------------------------------------------------- */
@@ -209,14 +199,10 @@
   .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,
-      oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
-    );
+    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,
+        oklch(from var(--chip-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
   }
 
   .outlined:hover,
@@ -445,4 +431,4 @@
     --chip-variant-outlined-foreground: var(--text-on-danger-outlined);
     --chip-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
   }
-}
+}

package/dist/components/chips/chip_module.css

@@ -20,8 +20,8 @@
     line-height: 1.1;
     font-size: var(--chip-font-size);
     transition: background-color var(--transition-normal),
-      box-shadow var(--transition-normal);
-    outline: 2px solid #0000;
+      outline-color var(--transition-normal);
+    outline: 1px solid #0000;
     text-decoration: none;
     display: inline-flex;
   }
@@ -31,10 +31,7 @@
   }
 
   :is(.chip-AhhT7N:focus, .chip-AhhT7N:active, .infonomic-chip:focus, .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);
+    outline-color: var(--ring-color);
   }
 
   :is(.label-gboVZj, .infonomic-chip-label) {