@infonomic/uikit 5.44.0 → 6.0.1

package/dist/components/forms/checkbox.module.css

@@ -32,22 +32,19 @@ infonomic-components;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    outline: 1px solid transparent;
+    outline-offset: 2px;
     border-radius: var(--border-radius-sm);
     transition: all var(--transition-normal);
   }
 
-  .checkbox[data-state="checked"],
-  :global(.infonomic-checkbox)[data-state="checked"] {
-    --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);
+  .checkbox[data-checked],
+  :global(.infonomic-checkbox)[data-checked] {
+    outline-color: var(--ring-color);
   }
 
-  .checkbox:disabled,
-  :global(.infonomic-checkbox):disabled,
-  .checkbox[disabled],
-  :global(.infonomic-checkbox)[disabled] {
+  .checkbox[data-disabled],
+  :global(.infonomic-checkbox)[data-disabled] {
     pointer-events: none;
   }
 
@@ -74,16 +71,16 @@ infonomic-components;
   }
 
   /* Style for the "checked" state — animation overrides the transition for bouncy entry */
-  .indicator[data-state="checked"] .icon,
-  :global(.infonomic-checkbox-indicator)[data-state="checked"] :global(.infonomic-checkbox-icon) {
+  .indicator[data-checked] .icon,
+  :global(.infonomic-checkbox-indicator)[data-checked] :global(.infonomic-checkbox-icon) {
     animation: checkBoxIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
     opacity: 1;
     transform: scale(1);
   }
 
   /* Style for the "unchecked" state — no animation, let the CSS transition handle the exit */
-  .indicator[data-state="unchecked"] .icon,
-  :global(.infonomic-checkbox-indicator)[data-state="unchecked"] :global(.infonomic-checkbox-icon) {
+  .indicator[data-unchecked] .icon,
+  :global(.infonomic-checkbox-indicator)[data-unchecked] :global(.infonomic-checkbox-icon) {
     opacity: 0;
     transform: scale(0.8);
   }
@@ -96,10 +93,8 @@ infonomic-components;
     color: var(--label-color);
   }
 
-  .checkbox:disabled~.label,
-  .checkbox[disabled]~.label,
-  :global(.infonomic-checkbox):disabled~ :global(.infonomic-checkbox-label),
-  :global(.infonomic-checkbox)[disabled]~ :global(.infonomic-checkbox-label) {
+  .checkbox[data-disabled]~.label,
+  :global(.infonomic-checkbox)[data-disabled]~ :global(.infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -169,8 +164,8 @@ infonomic-components;
     --checkbox-icon-color: white;
   }
 
-  .outlined[data-state="checked"],
-  :global(.infonomic-checkbox-outlined)[data-state="checked"] {
+  .outlined[data-checked],
+  :global(.infonomic-checkbox-outlined)[data-checked] {
     --ring-color: var(--checkbox-variant-outline-ring-color);
     background-color: var(--checkbox-variant-outlined);
   }
@@ -181,6 +176,11 @@ infonomic-components;
     --checkbox-icon-color: white;
   }
 
+  .filled[data-checked],
+  :global(.infonomic-checkbox-filled)[data-checked] {
+    --ring-color: var(--checkbox-variant-outline-ring-color);
+  }
+
   /* Intents */
   .primary,
   :global(.infonomic-checkbox-primary) {

package/dist/components/forms/checkbox_module.css

@@ -19,21 +19,20 @@
   }
 
   :is(.checkbox-FiKZnf, .infonomic-checkbox) {
+    outline-offset: 2px;
     border-radius: var(--border-radius-sm);
     transition: all var(--transition-normal);
+    outline: 1px solid #0000;
     justify-content: center;
     align-items: center;
     display: inline-flex;
   }
 
-  :is(.checkbox-FiKZnf[data-state="checked"], .infonomic-checkbox[data-state="checked"]) {
-    --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);
+  :is(.checkbox-FiKZnf[data-checked], .infonomic-checkbox[data-checked]) {
+    outline-color: var(--ring-color);
   }
 
-  :is(.checkbox-FiKZnf:disabled, .infonomic-checkbox:disabled, .checkbox-FiKZnf[disabled], .infonomic-checkbox[disabled]) {
+  :is(.checkbox-FiKZnf[data-disabled], .infonomic-checkbox[data-disabled]) {
     pointer-events: none;
   }
 
@@ -52,13 +51,13 @@
     transform: scale(.8);
   }
 
-  :is(.indicator-uDQYoF[data-state="checked"] .icon-gwRvT_, .infonomic-checkbox-indicator[data-state="checked"] .infonomic-checkbox-icon) {
+  :is(.indicator-uDQYoF[data-checked] .icon-gwRvT_, .infonomic-checkbox-indicator[data-checked] .infonomic-checkbox-icon) {
     opacity: 1;
     animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards checkBoxIn-DSnbUl;
     transform: scale(1);
   }
 
-  :is(.indicator-uDQYoF[data-state="unchecked"] .icon-gwRvT_, .infonomic-checkbox-indicator[data-state="unchecked"] .infonomic-checkbox-icon) {
+  :is(.indicator-uDQYoF[data-unchecked] .icon-gwRvT_, .infonomic-checkbox-indicator[data-unchecked] .infonomic-checkbox-icon) {
     opacity: 0;
     transform: scale(.8);
   }
@@ -70,7 +69,7 @@
     font-weight: 500;
   }
 
-  :is(.checkbox-FiKZnf:disabled ~ .label-rsCVhp, .checkbox-FiKZnf[disabled] ~ .label-rsCVhp, .infonomic-checkbox:disabled ~ .infonomic-checkbox-label, .infonomic-checkbox[disabled] ~ .infonomic-checkbox-label) {
+  :is(.checkbox-FiKZnf[data-disabled] ~ .label-rsCVhp, .infonomic-checkbox[data-disabled] ~ .infonomic-checkbox-label) {
     pointer-events: none;
   }
 
@@ -117,7 +116,7 @@
     --checkbox-icon-color: white;
   }
 
-  :is(.outlined-VB1vGz[data-state="checked"], .infonomic-checkbox-outlined[data-state="checked"]) {
+  :is(.outlined-VB1vGz[data-checked], .infonomic-checkbox-outlined[data-checked]) {
     --ring-color: var(--checkbox-variant-outline-ring-color);
     background-color: var(--checkbox-variant-outlined);
   }
@@ -127,6 +126,10 @@
     --checkbox-icon-color: white;
   }
 
+  :is(.filled-aCYMdF[data-checked], .infonomic-checkbox-filled[data-checked]) {
+    --ring-color: var(--checkbox-variant-outline-ring-color);
+  }
+
   :is(.primary-OnpxZl, .infonomic-checkbox-primary) {
     --checkbox-variant-outlined-border: var(--fill-primary-strong);
     --checkbox-variant-outlined: var(--fill-primary-strong);

package/dist/components/forms/input.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 {
+
   .input-wrapper,
   :global(.infonomic-input-wrapper) {
     display: flex;
@@ -26,7 +27,8 @@
   .input,
   :global(.infonomic-input) {
     border: none;
-    outline: none;
+    outline: 1px solid transparent;
+    outline-offset: 2px;
     font-weight: normal;
     display: inline-flex;
     gap: var(--gap-2);
@@ -40,10 +42,7 @@
   .input:active,
   :global(.infonomic-input):focus,
   :global(.infonomic-input):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);
   }
 
   .input:disabled,
@@ -281,4 +280,4 @@
   }
 
   /* Dark mode handled by semantic tokens in theme layer */
-}
+}

package/dist/components/forms/input_module.css

@@ -17,22 +17,20 @@
   }
 
   :is(.input-voSL1w, .infonomic-input) {
+    outline-offset: 2px;
     gap: var(--gap-2);
     width: 100%;
     transition: all var(--transition-normal);
     border-radius: var(--border-radius-sm);
     border: none;
-    outline: none;
+    outline: 1px solid #0000;
     align-items: center;
     font-weight: normal;
     display: inline-flex;
   }
 
   :is(.input-voSL1w:focus, .input-voSL1w:active, .infonomic-input:focus, .infonomic-input: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(.input-voSL1w:disabled, .input-voSL1w[disabled], .infonomic-input:disabled, .infonomic-input[disabled]) {

package/dist/components/forms/radio-group.d.ts

@@ -1,23 +1,24 @@
 import type React from 'react';
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import type { Intent } from '../@types/shared';
 export interface RadioGroupValue {
     id: string;
     value: string;
     label: string;
 }
-export declare const RadioGroupItem: ({ intent, className, id, value, label, ref: forwardedRef, ...props }: RadioGroupPrimitive.RadioGroupItemProps & {
+export declare const RadioGroupItem: ({ intent, className, id, value, label, ref: forwardedRef, ...props }: Omit<React.ComponentProps<typeof Radio.Root>, "value"> & {
     intent?: Intent;
     className?: string;
     id: string;
     value: string;
     label: string;
-    ref?: React.RefObject<React.ComponentRef<"div">>;
+    ref?: React.RefObject<HTMLDivElement>;
 }) => React.JSX.Element;
-export declare const RadioGroup: ({ ref: forwardedRef, className, direction, children, ...props }: RadioGroupPrimitive.RadioGroupProps & {
+export declare const RadioGroup: ({ ref: forwardedRef, className, direction, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive> & {
     direction?: "row" | "column";
     className?: string;
     children: React.ReactNode;
-    ref?: React.RefObject<React.ComponentRef<"div">>;
+    ref?: React.RefObject<HTMLDivElement>;
 }) => React.JSX.Element;
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/components/forms/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAG5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,cAAc,GAAI,sEAQ5B,mBAAmB,CAAC,mBAAmB,GAAG;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;CACjD,sBAgBA,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,iEAMxB,mBAAmB,CAAC,eAAe,GAAG;IACvC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;CACjD,sBASA,CAAA"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/forms/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC5C,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAI9E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAE9C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,cAAc,GAAI,sEAQ5B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAkBA,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,iEAMxB,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,GAAG;IACpD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CACtC,sBAQA,CAAA"}

package/dist/components/forms/radio-group.js

@@ -1,18 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
 import classnames from "classnames";
-import { RadioGroup } from "radix-ui";
 import radio_group_module from "./radio-group.module.js";
 const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref: forwardedRef, ...props })=>/*#__PURE__*/ jsxs("div", {
         ref: forwardedRef,
         className: radio_group_module["item-container"],
         children: [
-            /*#__PURE__*/ jsx(RadioGroup.Item, {
+            /*#__PURE__*/ jsx(Radio.Root, {
                 ...props,
                 className: classnames(radio_group_module.item, radio_group_module[intent]),
                 value: value,
                 id: id,
-                children: /*#__PURE__*/ jsx(RadioGroup.Indicator, {
+                nativeButton: true,
+                render: /*#__PURE__*/ jsx("button", {
+                    type: "button"
+                }),
+                children: /*#__PURE__*/ jsx(Radio.Indicator, {
                     className: radio_group_module.indicator
                 })
             }),
@@ -23,7 +28,7 @@ const RadioGroupItem = ({ intent = 'primary', className, id, value, label, ref:
             })
         ]
     });
-const radio_group_RadioGroup = ({ ref: forwardedRef, className, direction = 'column', children, ...props })=>/*#__PURE__*/ jsx(RadioGroup.Root, {
+const radio_group_RadioGroup = ({ ref: forwardedRef, className, direction = 'column', children, ...props })=>/*#__PURE__*/ jsx(RadioGroup, {
         ref: forwardedRef,
         className: classnames('infonomic-radio-group', radio_group_module[direction], className),
         ...props,

package/dist/components/forms/radio-group.module.css

@@ -1,12 +1,13 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 /* 'border-collapse w-full text-sm text-left text-gray-700 dark:text-gray-400 m-0', */
 @layer infonomic-components {
+
   .column,
   :global(.infonomic-radio-group-column) {
     display: flex;
@@ -38,32 +39,22 @@
     transition: all var(--transition-normal);
   }
 
-  .item[data-state="checked"],
-  :global(.infonomic-radio-group-item[data-state="checked"]) {
-    --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);
-  }
-
-  .item:disabled,
-  :global(.infonomic-radio-group-item:disabled),
-  .item[disabled],
-  :global(.infonomic-radio-group-item[disabled]) {
+  .item[data-disabled],
+  :global(.infonomic-radio-group-item[data-disabled]) {
     pointer-events: none;
   }
 
   /* Style for the "checked" state */
-  .indicator[data-state="checked"],
-  :global(.infonomic-radio-group-indicator[data-state="checked"]) {
+  .indicator[data-checked],
+  :global(.infonomic-radio-group-indicator[data-checked]) {
     animation: radioIn 0.3s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
     opacity: 1;
     transform: scale(1);
   }
 
   /* Style for the "unchecked" state */
-  .indicator[data-state="unchecked"],
-  :global(.infonomic-radio-group-indicator[data-state="unchecked"]) {
+  .indicator[data-unchecked],
+  :global(.infonomic-radio-group-indicator[data-unchecked]) {
     animation: radioOut 0.2s ease-in;
     opacity: 0;
     transform: scale(0.8);
@@ -182,4 +173,4 @@
       transform: scale(0.8);
     }
   }
-}
+}

package/dist/components/forms/radio-group_module.css

@@ -28,51 +28,33 @@
     transition: all var(--transition-normal);
   }
 
-  .item-InB91q[data-state="checked"] {
-    --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);
-  }
-
-  .infonomic-radio-group-item[data-state="checked"] {
-    --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);
-  }
-
-  .item-InB91q:disabled, .item-InB91q[disabled] {
-    pointer-events: none;
-  }
-
-  .infonomic-radio-group-item:disabled {
+  .item-InB91q[data-disabled] {
     pointer-events: none;
   }
 
-  .infonomic-radio-group-item[disabled] {
+  .infonomic-radio-group-item[data-disabled] {
     pointer-events: none;
   }
 
-  .indicator-PDcgDz[data-state="checked"] {
+  .indicator-PDcgDz[data-checked] {
     opacity: 1;
     animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards radioIn-lODICv;
     transform: scale(1);
   }
 
-  .infonomic-radio-group-indicator[data-state="checked"] {
+  .infonomic-radio-group-indicator[data-checked] {
     opacity: 1;
     animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards radioIn-lODICv;
     transform: scale(1);
   }
 
-  .indicator-PDcgDz[data-state="unchecked"] {
+  .indicator-PDcgDz[data-unchecked] {
     opacity: 0;
     animation: .2s ease-in radioOut-Z3CBtX;
     transform: scale(.8);
   }
 
-  .infonomic-radio-group-indicator[data-state="unchecked"] {
+  .infonomic-radio-group-indicator[data-unchecked] {
     opacity: 0;
     animation: .2s ease-in radioOut-Z3CBtX;
     transform: scale(.8);

package/dist/components/forms/select.d.ts

@@ -1,6 +1,5 @@
 import type React from 'react';
-import type { ComponentPropsWithoutRef } from 'react';
-import { Select as SelectPrimitive } from 'radix-ui';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
 import type { Intent } from '../@types/shared.js';
 import type { Size, Variant } from '../button/@types/button.js';
 export interface SelectValue {
@@ -9,7 +8,7 @@ export interface SelectValue {
     prefix?: string;
     suffix?: string;
 }
-type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
+type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
     id?: string;
     intent?: Intent;
     variant?: Variant;
@@ -24,8 +23,8 @@ type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root> & {
 };
 export declare function Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, ...rest }: SelectProps): React.JSX.Element;
 export declare const SelectItem: {
-    ({ ref: forwardedRef, children, className, ...props }: SelectPrimitive.SelectItemProps & {
-        ref?: React.RefObject<React.ComponentRef<"div">>;
+    ({ ref: forwardedRef, children, className, ...props }: React.ComponentProps<typeof SelectPrimitive.Item> & {
+        ref?: React.RefObject<HTMLDivElement>;
     }): React.JSX.Element;
     displayName: string;
 };

package/dist/components/forms/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/forms/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAIrD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAKpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,KAAK,WAAW,GAAG,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACzE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAA;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,aAAa,EACb,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyCjC;AAED,eAAO,MAAM,UAAU;2DAKpB,eAAe,CAAC,eAAe,GAAG;QACnC,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAA;KACjD;;CAeA,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/forms/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AASjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAA;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,aAAa,EACb,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2CjC;AAED,eAAO,MAAM,UAAU;2DAKpB,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;QACrD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;;CAeA,CAAA"}

package/dist/components/forms/select.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+import { Select } from "@base-ui/react/select";
 import classnames from "classnames";
-import { Select } from "radix-ui";
+import { CheckIcon } from "../../icons/check-icon.js";
+import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
+import { ChevronUpIcon } from "../../icons/chevron-up-icon.js";
 import { Button } from "../button/button.js";
 import { HelpText } from "./help-text.js";
 import select_module from "./select.module.js";
@@ -13,46 +15,42 @@ function select_Select({ id, children, placeholder, disabledValue, intent, varia
             /*#__PURE__*/ jsxs(Select.Root, {
                 ...rest,
                 children: [
-                    /*#__PURE__*/ jsx(Select.Trigger, {
-                        asChild: true,
+                    /*#__PURE__*/ jsxs(Select.Trigger, {
                         "aria-label": ariaLabel ?? 'Select',
-                        children: /*#__PURE__*/ jsxs(Button, {
+                        render: /*#__PURE__*/ jsx(Button, {
                             id: id,
                             intent: intent,
                             variant: variant,
                             size: size,
-                            className: classnames('whitespace-nowrap', className),
-                            children: [
-                                /*#__PURE__*/ jsx(Select.Value, {
-                                    placeholder: placeholder
-                                }),
-                                /*#__PURE__*/ jsx(Select.Icon, {
-                                    children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
-                                })
-                            ]
-                        })
+                            className: classnames('whitespace-nowrap', className)
+                        }),
+                        children: [
+                            /*#__PURE__*/ jsx(Select.Value, {
+                                placeholder: placeholder
+                            }),
+                            /*#__PURE__*/ jsx(Select.Icon, {
+                                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsx(Select.Portal, {
-                        children: /*#__PURE__*/ jsxs(Select.Content, {
-                            position: position,
-                            className: select_module.content,
-                            ref: (ref)=>{
-                                if (null == ref) return;
-                            },
+                        children: /*#__PURE__*/ jsxs(Select.Positioner, {
+                            className: select_module.positioner,
+                            alignItemWithTrigger: 'popper' !== position,
                             children: [
-                                /*#__PURE__*/ jsx(Select.ScrollUpButton, {
-                                    className: select_module["scroll-button"],
+                                /*#__PURE__*/ jsx(Select.ScrollUpArrow, {
+                                    className: select_module["scroll-arrow"],
                                     children: /*#__PURE__*/ jsx(ChevronUpIcon, {})
                                 }),
-                                /*#__PURE__*/ jsx(Select.Viewport, {
-                                    className: classnames(select_module.viewport, null != size && select_module[`viewport-${size}`]),
-                                    children: /*#__PURE__*/ jsx(Select.Group, {
-                                        className: select_module.group,
+                                /*#__PURE__*/ jsx(Select.Popup, {
+                                    className: classnames(select_module.popup, null != size && select_module[`popup-${size}`]),
+                                    children: /*#__PURE__*/ jsx(Select.List, {
+                                        className: select_module.list,
                                         children: children
                                     })
                                 }),
-                                /*#__PURE__*/ jsx(Select.ScrollDownButton, {
-                                    className: select_module["scroll-button"],
+                                /*#__PURE__*/ jsx(Select.ScrollDownArrow, {
+                                    className: select_module["scroll-arrow"],
                                     children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
                                 })
                             ]