@infonomic/uikit 5.44.0 → 6.0.1

package/README.md

@@ -10,11 +10,11 @@ It just doesn't belong in UI kits and libraries.
 
 ## Rationale
 
-In addition to our thoughts above, this kit is built around the philosophy of adopting or 'folding in' best-in-class components, like the ones in well-known 'à la carte' headless component libraries such as [Base UI](https://base-ui.com/), [Radix UI](https://www.radix-ui.com/), and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html) as well as individually well-known components such as [React Day Picker](https://github.com/gpbl/react-day-picker) and more. 
+In addition to our thoughts above, this kit is built around the philosophy of adopting or 'folding in' best-in-class components, like the ones in well-known 'à la carte' headless component libraries such as [Base UI](https://base-ui.com/), and [React Aria](https://react-spectrum.adobe.com/react-aria/index.html) as well as individually well-known components such as [React Day Picker](https://github.com/gpbl/react-day-picker) and more. 
 
 Having lived through a full generation of 'all-in-one' and difficult to override themed UI kits like Bootstrap and Material UI, the trend towards composable headless (unstyled) component libraries is a welcome one - and one that forms the basis of this kit. 
 
-Many of the current components are built on Radix UI. The great thing about wrapping these components in a client-consumable interface and library, is that in theory at least, the consumer of our kit's components won't have to worry about implementation details, or migration from Radix UI to Base UI or other. The 'contract' and core styling semantics will never change.
+Many of the current components are built on Base UI. The great thing about wrapping these components in a client-consumable interface and library, is that in theory at least, the consumer of our kit's components won't have to worry about implementation details, or migration from Base UI to another underlying component library. The 'contract' and core styling semantics will never change.
 
 ## Design Goals
 
@@ -36,7 +36,7 @@ For components - this means ensuring that the layer specificity order appears at
 
 The use of CSS modules will also allow us to support exporting individual components separately (we export a single bundle for import at the moment) helping to reduce the import and bundle size of the consuming client. Once we've enabled single component exports, a client will then be able to import the main style.css file followed by an individual component. We'll be revisiting this soon.
 
-Lastly - we highly value the option to 'tell' components to ignore or override a top-level theme decision of light or dark. There is an intentionally duplicated `.not-dark` class selector in our tokens.css file. Since we're using shadows to create ring offsets (which we desire for focus, active modes etc.) and since CSS shadows need a background color - being able to use `.not-dark`  means that we can override components that need to be in 'dark mode' on an otherwise 'light theme', or that need to be in .not-dark mode, on an otherwise 'dark theme'. This allows us to use the correct ring, background and component colors for components that might be placed on fixed dark or light background panels or sections - irrespective of the currently selected theme
+Lastly - we highly value the option to 'tell' components to ignore or override a top-level theme decision of light or dark. There is an intentionally duplicated `.not-dark` class selector in our functional tokens file. Being able to use `.not-dark` means that we can override components that need to be in 'dark mode' on an otherwise 'light theme', or that need to be in .not-dark mode, on an otherwise 'dark theme'.
 
 ## Getting Started
 
@@ -119,6 +119,15 @@ Here's an example Tailwind CSS integration. Note that we have our own reset, and
     'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
 
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+  --color-noeffect: var(--noeffect);
+  --color-success: var(--success);
+  --color-info: var(--info);
+  --color-warning: var(--warning);
+  --color-danger: var(--danger);
+
   --color-theme-25: var(--theme-25);
   --color-theme-50: var(--theme-50);
   --color-theme-100: var(--theme-100);

package/dist/components/accordion/accordion.d.ts

@@ -4,29 +4,29 @@
  * style the accordion here in order to provide a base for customization.
  */
 import type React from 'react';
-import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 export type AccordionRootElement = React.ComponentRef<'div'>;
 export type AccordionItemElement = React.ComponentRef<'div'>;
-export type AccordionHeaderElement = React.ComponentRef<'h2'>;
+export type AccordionHeaderElement = React.ComponentRef<'h3'>;
 export type AccordionTriggerElement = React.ComponentRef<'button'>;
-export type AccordionContentElement = React.ComponentRef<'div'>;
+export type AccordionPanelElement = React.ComponentRef<'div'>;
 export declare const Accordion: {
     Root: ({ children, className, ref, ...props }: {
         children: React.ReactNode;
         className?: string;
         ref?: React.RefObject<AccordionRootElement>;
-    } & (AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps)) => React.JSX.Element;
-    Item: ({ ref, children, className, ...props }: AccordionPrimitive.AccordionItemProps & {
+    } & React.ComponentProps<typeof AccordionPrimitive.Root>) => React.JSX.Element;
+    Item: ({ ref, children, className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item> & {
         ref?: React.RefObject<AccordionItemElement>;
     }) => React.JSX.Element;
-    Header: ({ ref, children, className, ...props }: AccordionPrimitive.AccordionHeaderProps & {
+    Header: ({ ref, children, className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Header> & {
         ref?: React.RefObject<AccordionHeaderElement>;
     }) => React.JSX.Element;
-    Trigger: ({ ref, children, className, ...props }: AccordionPrimitive.AccordionTriggerProps & {
+    Trigger: ({ ref, children, className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
         ref?: React.RefObject<AccordionTriggerElement>;
     }) => React.JSX.Element;
-    Content: ({ ref, children, className, ...props }: AccordionPrimitive.AccordionContentProps & {
-        ref?: React.RefObject<AccordionContentElement>;
+    Panel: ({ ref, children, className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Panel> & {
+        ref?: React.RefObject<AccordionPanelElement>;
     }) => React.JSX.Element;
 };
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAI1D,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAuB5D,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAoB5D,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAoB7D,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAA;AAoBlE,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAoB/D,eAAO,MAAM,SAAS;mDAhGnB;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;KAC5C,GAAG,CAAC,kBAAkB,CAAC,oBAAoB,GAAG,kBAAkB,CAAC,sBAAsB,CAAC;mDAkBtF,kBAAkB,CAAC,kBAAkB,GAAG;QACzC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;KAC5C;qDAkBE,kBAAkB,CAAC,oBAAoB,GAAG;QAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAA;KAC9C;sDAkBE,kBAAkB,CAAC,qBAAqB,GAAG;QAC5C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;KAC/C;sDAkBE,kBAAkB,CAAC,qBAAqB,GAAG;QAC5C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;KAC/C;CAkBA,CAAA"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAK1E,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAuB5D,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAoB5D,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAoB7D,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAA;AAoBlE,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AAoB7D,eAAO,MAAM,SAAS;mDAhGnB;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;KAC5C,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;mDAkBrD,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;QACxD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAA;KAC5C;qDAkBE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,MAAM,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAA;KAC9C;sDAkBE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,GAAG;QAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC,CAAA;KAC/C;oDAkBE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,GAAG;QACzD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAA;KAC7C;CAkBA,CAAA"}

package/dist/components/accordion/accordion.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
 import classnames from "classnames";
-import { Accordion } from "radix-ui";
 import accordion_module from "./accordion.module.js";
 const Root = ({ children, className, ref, ...props })=>/*#__PURE__*/ jsx(Accordion.Root, {
         ref: ref,
@@ -33,8 +33,8 @@ const Trigger = function({ ref, children, className, ...props }) {
         children: children
     });
 };
-const Content = function({ ref, children, className, ...props }) {
-    return /*#__PURE__*/ jsx(Accordion.Content, {
+const Panel = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx(Accordion.Panel, {
         className: classnames('infonomic-accordion-content', accordion_module.content, className),
         ...props,
         ref: ref,
@@ -46,6 +46,6 @@ const accordion_Accordion = {
     Item: Item,
     Header: Header,
     Trigger: Trigger,
-    Content: Content
+    Panel: Panel
 };
 export { accordion_Accordion as Accordion };

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

@@ -1,6 +1,7 @@
 @layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
 
 @layer infonomic-components {
+
   .item,
   :global(.infonomic-accordion-item) {
     overflow: hidden;
@@ -25,11 +26,11 @@
   :global(.infonomic-accordion-content) {
     overflow: hidden;
 
-    &[data-state="open"] {
+    &[data-open] {
       animation: accordionSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
     }
 
-    &[data-state="closed"] {
+    &[data-ending-style] {
       animation: accordionSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
     }
   }
@@ -40,17 +41,17 @@
     }
 
     to {
-      height: var(--radix-accordion-content-height);
+      height: var(--accordion-panel-height);
     }
   }
 
   @keyframes accordionSlideUp {
     from {
-      height: var(--radix-accordion-content-height);
+      height: var(--accordion-panel-height);
     }
 
     to {
       height: 0;
     }
   }
-}
+}

package/dist/components/accordion/accordion_module.css

@@ -22,11 +22,11 @@
     overflow: hidden;
   }
 
-  :is(.content-KoW8ID, .infonomic-accordion-content)[data-state="open"] {
+  :is(.content-KoW8ID, .infonomic-accordion-content)[data-open] {
     animation: .3s cubic-bezier(.87, 0, .13, 1) accordionSlideDown-gllXUs;
   }
 
-  :is(.content-KoW8ID, .infonomic-accordion-content)[data-state="closed"] {
+  :is(.content-KoW8ID, .infonomic-accordion-content)[data-ending-style] {
     animation: .3s cubic-bezier(.87, 0, .13, 1) accordionSlideUp-mpDLB0;
   }
 
@@ -36,13 +36,13 @@
     }
 
     to {
-      height: var(--radix-accordion-content-height);
+      height: var(--accordion-panel-height);
     }
   }
 
   @keyframes accordionSlideUp-mpDLB0 {
     from {
-      height: var(--radix-accordion-content-height);
+      height: var(--accordion-panel-height);
     }
 
     to {

package/dist/components/avatar/avatar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
 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, {
@@ -14,7 +14,7 @@ const avatar_Avatar = ({ initials })=>/*#__PURE__*/ jsxs(Avatar.Root, {
             }),
             /*#__PURE__*/ jsx(Avatar.Fallback, {
                 className: classnames('infonomic-avatar-fallback', avatar_module["avatar-fallback"]),
-                delayMs: 600,
+                delay: 600,
                 children: /*#__PURE__*/ jsx("span", {
                     className: classnames('infonomic-avatar-text', avatar_module["avatar-text"]),
                     children: initials

package/dist/components/badge/badge.d.ts

@@ -1,21 +1,13 @@
+import { useRender } from '@base-ui/react/use-render';
 import type { Intent } from '../@types/shared';
-type AsDiv = {
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'div'>;
-interface AsSlot {
-    asChild?: true;
-}
-export type BadgeRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
-export type BadgeProps<C extends React.ElementType = 'div'> = {
+export type BadgeProps = useRender.ComponentProps<'div'> & {
     children: React.ReactNode;
     intent?: Intent;
     className?: string;
-    asChild?: boolean;
-    ref?: BadgeRefType<C>;
-} & (AsSlot | AsDiv);
+    ref?: React.Ref<HTMLDivElement>;
+};
 export declare const Badge: {
-    <C extends React.ElementType = "div">({ className, intent, children, asChild, ref, ...rest }: BadgeProps<C>): React.JSX.Element;
+    ({ className, intent, children, render, ref, ...rest }: BadgeProps): React.JSX.Element;
     displayName: string;
 };
-export {};
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAE9C,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,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAE7F,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI;IAC5D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,GAAG,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;CACtB,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;AAEpB,eAAO,MAAM,KAAK;KAAI,CAAC,SAAS,KAAK,CAAC,WAAW,kEAO9C,UAAU,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAiBnC,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAIrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,KAAK;4DAOf,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAmBhC,CAAA"}

package/dist/components/badge/badge.js

@@ -1,15 +1,18 @@
-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 badge_module from "./badge.module.js";
-const Badge = ({ className, intent = 'primary', children, asChild, ref, ...rest })=>{
-    const Comp = true === asChild ? Slot : 'div';
-    return /*#__PURE__*/ jsx(Comp, {
-        ref: ref,
-        className: classnames('infonomic-badge', `infonomic-badge-${intent}`, badge_module.badge, badge_module[intent], className),
-        ...rest,
-        children: children
+const Badge = ({ className, intent = 'primary', children, render, ref, ...rest })=>{
+    const element = useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: {
+            ...rest,
+            className: classnames('infonomic-badge', `infonomic-badge-${intent}`, badge_module.badge, badge_module[intent], className),
+            children
+        }
     });
+    return element;
 };
 Badge.displayName = 'Badge';
 export { Badge };

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

@@ -1,5 +1,6 @@
-import React, { type ComponentPropsWithoutRef, type Ref } from 'react';
-import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
+import React, { type Ref } from 'react';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
 import type { EnableRipple, Intent, Size, Variant } from './@types/button';
 interface ButtonGroupContextType {
     variant?: Variant;
@@ -10,13 +11,13 @@ interface ButtonGroupContextType {
     inactive?: Intent;
     value?: string | string[];
 }
-type ToggleGroupRootProps = ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>;
-type SingleToggleGroupProps = Omit<ToggleGroupRootProps, 'type' | 'value' | 'onValueChange'> & {
+type ToggleGroupProps = React.ComponentProps<typeof ToggleGroup>;
+type SingleToggleGroupProps = Omit<ToggleGroupProps, 'multiple' | 'value' | 'onValueChange'> & {
     type: 'single';
     value?: string;
     onValueChange?: (value: string) => void;
 };
-type MultipleToggleGroupProps = Omit<ToggleGroupRootProps, 'type' | 'value' | 'onValueChange'> & {
+type MultipleToggleGroupProps = Omit<ToggleGroupProps, 'multiple' | 'value' | 'onValueChange'> & {
     type: 'multiple';
     value?: string[];
     onValueChange?: (value: string[]) => void;
@@ -26,12 +27,13 @@ export type ButtonGroupProps = (SingleToggleGroupProps | MultipleToggleGroupProp
     ref?: Ref<HTMLDivElement>;
 } & ButtonGroupContextType;
 declare const ButtonGroup: ({ className, variant, size, ripple, expandToFit, active, inactive, type, onValueChange, value, defaultValue, children, ref, ...props }: ButtonGroupProps) => React.JSX.Element;
-type ButtonGroupItemProps = ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & {
+type ButtonGroupItemProps = Omit<React.ComponentProps<typeof Toggle>, 'className'> & {
+    className?: string;
     ref?: Ref<HTMLButtonElement>;
 } & ButtonGroupContextType;
 declare const ButtonGroupItem: {
     ({ className, children, value, ref, ...props }: ButtonGroupItemProps): React.JSX.Element;
-    displayName: string | undefined;
+    displayName: string;
 };
 export { ButtonGroup, ButtonGroupItem };
 //# sourceMappingURL=button-group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAGtE,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAE1E,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAWD,KAAK,oBAAoB,GAAG,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAGtF,KAAK,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IAC7F,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,KAAK,wBAAwB,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IAC/F,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,GAAG,sBAAsB,CAAA;AAG1B,QAAA,MAAM,WAAW,GAAI,wIAelB,gBAAgB,sBAiClB,CAAA;AAID,KAAK,oBAAoB,GAAG,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG;IACvF,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,GAAG,sBAAsB,CAAA;AAE1B,QAAA,MAAM,eAAe;oDAAmD,oBAAoB;;CAoB3F,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAKzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAE1E,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAWD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAGhE,KAAK,sBAAsB,GAAG,IAAI,CAChC,gBAAgB,EAChB,UAAU,GAAG,OAAO,GAAG,eAAe,CACvC,GAAG;IACF,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,KAAK,wBAAwB,GAAG,IAAI,CAClC,gBAAgB,EAChB,UAAU,GAAG,OAAO,GAAG,eAAe,CACvC,GAAG;IACF,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,GAAG,sBAAsB,CAAA;AAG1B,QAAA,MAAM,WAAW,GAAI,wIAelB,gBAAgB,sBAoClB,CAAA;AAID,KAAK,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,GAAG;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,GAAG,sBAAsB,CAAA;AAE1B,QAAA,MAAM,eAAe;oDAAmD,oBAAoB;;CAyB3F,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import react from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
 import classnames from "classnames";
-import { ToggleGroup } from "radix-ui";
 import { Button } from "./button.js";
 import button_group_module from "./button-group.module.js";
 const ButtonGroupContext = /*#__PURE__*/ react.createContext({
@@ -14,33 +15,23 @@ const ButtonGroupContext = /*#__PURE__*/ react.createContext({
     inactive: 'noeffect'
 });
 const ButtonGroup = ({ className, variant = 'filled', size = 'md', ripple = true, expandToFit = false, active = 'primary', inactive = 'noeffect', type, onValueChange, value, defaultValue, children, ref, ...props })=>{
-    if ('multiple' === type) return /*#__PURE__*/ jsx(ToggleGroup.Root, {
-        type: "multiple",
-        defaultValue: defaultValue,
-        value: value,
-        ref: ref,
-        onValueChange: onValueChange,
-        className: classnames(button_group_module["button-group"], className),
-        ...props,
-        children: /*#__PURE__*/ jsx(ButtonGroupContext, {
-            value: {
-                variant,
-                size,
-                ripple,
-                expandToFit,
-                active,
-                inactive,
-                value
-            },
-            children: children
-        })
-    });
-    return /*#__PURE__*/ jsx(ToggleGroup.Root, {
-        type: "single",
-        value: value,
-        defaultValue: defaultValue,
+    const isMultiple = 'multiple' === type;
+    const handleValueChange = (newValue, event)=>{
+        if (!onValueChange) return;
+        isMultiple ? onValueChange(newValue) : onValueChange(newValue[0] ?? '');
+    };
+    const normalizedValue = null == value ? void 0 : Array.isArray(value) ? value : [
+        value
+    ];
+    const normalizedDefault = null == defaultValue ? void 0 : Array.isArray(defaultValue) ? defaultValue : [
+        defaultValue
+    ];
+    return /*#__PURE__*/ jsx(ToggleGroup, {
+        multiple: isMultiple,
+        defaultValue: normalizedDefault,
+        value: normalizedValue,
         ref: ref,
-        onValueChange: onValueChange,
+        onValueChange: handleValueChange,
         className: classnames(button_group_module["button-group"], className),
         ...props,
         children: /*#__PURE__*/ jsx(ButtonGroupContext, {
@@ -57,25 +48,24 @@ const ButtonGroup = ({ className, variant = 'filled', size = 'md', ripple = true
         })
     });
 };
-ButtonGroupContext.displayName = ToggleGroup.Root.displayName;
+ButtonGroupContext.displayName = 'ButtonGroup';
 const ButtonGroupItem = ({ className, children, value, ref, ...props })=>{
     const context = react.useContext(ButtonGroupContext);
     const active = Array.isArray(context.value) ? context.value.includes(value) : context.value === value;
-    return /*#__PURE__*/ jsx(ToggleGroup.Item, {
-        asChild: true,
+    return /*#__PURE__*/ jsx(Toggle, {
         value: value,
         ref: ref,
-        ...props,
-        children: /*#__PURE__*/ jsx(Button, {
+        render: /*#__PURE__*/ jsx(Button, {
             className: className,
             fullWidth: context.expandToFit,
             variant: context.variant,
             intent: active ? context.active : context.inactive,
             size: context.size,
-            ripple: context.ripple,
-            children: children
-        })
+            ripple: context.ripple
+        }),
+        ...props,
+        children: children
     });
 };
-ButtonGroupItem.displayName = ToggleGroup.Item.displayName;
+ButtonGroupItem.displayName = 'ButtonGroupItem';
 export { ButtonGroup, ButtonGroupItem };

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

@@ -1,13 +1,7 @@
 import type React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { Intent, Size, Variant } from './@types/button.js';
-export type ButtonRefType<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
-type AsButton = {
-    asChild?: false;
-} & React.ComponentPropsWithoutRef<'button'>;
-interface AsSlot {
-    asChild?: true;
-}
-export type ButtonProps<C extends React.ElementType = 'button'> = {
+export type ButtonProps = useRender.ComponentProps<'button'> & {
     variant?: Variant;
     size?: Size;
     type?: 'submit' | 'reset' | 'button';
@@ -15,9 +9,8 @@ export type ButtonProps<C extends React.ElementType = 'button'> = {
     fullWidth?: boolean;
     ripple?: boolean;
     className?: string;
-    children: React.ReactNode;
-    ref?: React.RefObject<ButtonRefType<C>>;
-} & (AsButton | AsSlot) & React.HTMLAttributes<HTMLElement>;
-export declare const Button: <C extends React.ElementType = "button">({ variant, size, type, intent, fullWidth, ripple, className, children, asChild, ref, ...rest }: ButtonProps<C>) => React.JSX.Element;
-export {};
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+} & React.HTMLAttributes<HTMLElement>;
+export declare const Button: ({ variant, size, type, intent, fullWidth, ripple, className, children, render, ref, ...rest }: ButtonProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAE9F,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,GAAG,QAAQ,IAAI;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAA;CACxC,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC,GACrB,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEnC,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,gGAY5D,WAAW,CAAC,CAAC,CAAC,sBAoChB,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAKrD,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAErC,eAAO,MAAM,MAAM,GAAI,+FAYpB,WAAW,2EAiCb,CAAA"}

package/dist/components/button/button.js

@@ -1,28 +1,29 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import classnames from "classnames";
-import material_ripple_effects from "material-ripple-effects";
+import { Ripple } from "../../lib/ripple.js";
 import button_module from "./button.module.js";
-const Button = ({ variant = 'filled', size = 'md', type = 'button', intent = 'primary', fullWidth = false, ripple = true, className, children, asChild, ref, ...rest })=>{
-    const Comp = null != asChild && true === asChild ? Slot : 'button';
-    let onMouseDown;
+const Button = ({ variant = 'filled', size = 'md', type = 'button', intent = 'primary', fullWidth = false, ripple = true, className, children, render, ref, ...rest })=>{
+    const defaultProps = {
+        type,
+        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),
+        children
+    };
     if (true === ripple) {
-        const rippleEffect = new material_ripple_effects();
-        onMouseDown = (e)=>{
-            if (rest.onMouseDown) rest.onMouseDown(e);
+        const rippleEffect = new Ripple();
+        defaultProps.onMouseDown = (e)=>{
             rippleEffect.create(e, 'filled' === variant || 'gradient' === variant ? 'light' : 'dark');
         };
     }
-    return /*#__PURE__*/ jsx(Comp, {
-        ref: ref,
-        type: type,
-        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,
-        ...rest,
-        children: children
+    const element = useRender({
+        defaultTagName: 'button',
+        render,
+        ref,
+        props: mergeProps(defaultProps, rest)
     });
+    return element;
 };
 export { Button };