@infonomic/uikit 5.43.1 → 6.0.0

package/README.md

@@ -14,7 +14,7 @@ In addition to our thoughts above, this kit is built around the philosophy of ad
 
 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 now 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 or other another library. The 'contract' and core styling semantics will never change.
 
 ## Design Goals
 

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 };

package/dist/components/button/button.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 {
+
   .button,
   :global(.infonomic-button) {
     border: none;
@@ -18,11 +19,11 @@
     align-items: center;
     white-space: nowrap;
     justify-content: center;
-    outline: 2px solid transparent;
+    outline: 1px solid transparent;
     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);
   }
 
@@ -37,10 +38,7 @@
   .button:active,
   :global(.infonomic-button):focus,
   :global(.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.square,
@@ -116,14 +114,10 @@
   .filled[disabled],
   :global(.infonomic-button-filled):disabled,
   :global(.infonomic-button-filled)[disabled] {
-    background-color: var(
-      --button-variant-filled-disabled,
-      oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h)
-    );
-    color: var(
-      --button-variant-filled-foreground-disabled,
-      oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h)
-    );
+    background-color: var(--button-variant-filled-disabled,
+        oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--button-variant-filled-foreground-disabled,
+        oklch(from var(--button-variant-filled-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
   /* -------------------------------------------------------- */
@@ -151,14 +145,10 @@
   .filled-weak[disabled],
   :global(.infonomic-button-filled-weak):disabled,
   :global(.infonomic-button-filled-weak)[disabled] {
-    background-color: var(
-      --button-variant-filled-weak-disabled,
-      oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h)
-    );
-    color: var(
-      --button-variant-filled-weak-foreground-disabled,
-      oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h)
-    );
+    background-color: var(--button-variant-filled-weak-disabled,
+        oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * 0.85) h));
+    color: var(--button-variant-filled-weak-foreground-disabled,
+        oklch(from var(--button-variant-filled-weak-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
   .outlined,
@@ -172,14 +162,10 @@
   .outlined[disabled],
   :global(.infonomic-button-outlined):disabled,
   :global(.infonomic-button-outlined)[disabled] {
-    border-color: var(
-      --button-variant-outlined-border-disabled,
-      oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h)
-    );
-    color: var(
-      --button-variant-outlined-foreground-disabled,
-      oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h)
-    );
+    border-color: var(--button-variant-outlined-border-disabled,
+        oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * 0.8) h));
+    color: var(--button-variant-outlined-foreground-disabled,
+        oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * 0.7) h));
   }
 
   .outlined:hover,
@@ -197,11 +183,9 @@
   .gradient,
   :global(.infonomic-button-gradient) {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(
-      45deg,
-      var(--button-variant-gradient-start),
-      var(--button-variant-gradient-end)
-    );
+    background: linear-gradient(45deg,
+        var(--button-variant-gradient-start),
+        var(--button-variant-gradient-end));
   }
 
   .gradient:disabled,
@@ -209,24 +193,18 @@
   :global(.infonomic-button-gradient):disabled,
   :global(.infonomic-button-gradient)[disabled] {
     background: unset;
-    background-color: var(
-      --button-variant-gradient-disabled,
-      oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h)
-    );
-    color: var(
-      --button-variant-gradient-foreground-disabled,
-      oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h)
-    );
+    background-color: var(--button-variant-gradient-disabled,
+        oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * 0.85) h));
+    color: var(--button-variant-gradient-foreground-disabled,
+        oklch(from var(--button-variant-gradient-foreground) calc(l * 0.9) calc(c * 0.85) h));
   }
 
   .gradient:hover,
   :global(.infonomic-button-gradient):hover {
     color: var(--button-variant-gradient-foreground);
-    background: linear-gradient(
-      45deg,
-      var(--button-variant-gradient-start),
-      var(--button-variant-gradient-end)
-    );
+    background: linear-gradient(45deg,
+        var(--button-variant-gradient-start),
+        var(--button-variant-gradient-end));
   }
 
   .gradient:focus,
@@ -542,4 +520,4 @@
     width: 100%;
     display: flex;
   }
-}
+}