@infonomic/uikit 5.44.0 → 6.0.1

package/src/components/forms/calendar.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 /**
- * @file Calendar component using react-day-picker and radix-ui
+ * @file Calendar component using react-day-picker and @base-ui/react
  * @see https://github.com/Maliksidk19/shadcn-datetime-picker/
  * Portions copyright (c) 2023 Maliksidk19 licensed under the MIT
  * license found in the LICENSE file in the root directory of this source tree.
@@ -10,8 +10,8 @@
 
 import * as React from 'react'
 
+import { Select as SelectPrimitive } from '@base-ui/react/select'
 import cx from 'classnames'
-import { Select as SelectPrimitive } from 'radix-ui'
 import {
   DayPicker,
   type DayPickerProps,
@@ -87,48 +87,58 @@ export function Calendar({
   const Dropdown = React.useCallback(
     ({ value, onChange, options }: React.ComponentProps<typeof DropDownDayPicker>) => {
       const selected = options?.find((option) => option.value === value)
-      const handleChange = (value: string) => {
+      const handleChange = (newValue: string) => {
         const changeEvent = {
-          target: { value },
+          target: { value: newValue },
         } as React.ChangeEvent<HTMLSelectElement>
         onChange?.(changeEvent)
       }
       return (
         <SelectPrimitive.Root
           value={value?.toString()}
-          onValueChange={(value) => {
-            handleChange(value)
+          onValueChange={(newValue) => {
+            handleChange(newValue as string)
           }}
         >
-          <SelectPrimitive.Trigger asChild>
-            <Button
-              variant="outlined"
-              size="sm"
-              className={cx(styles['select-trigger'], props.selectTriggerClassName)}
-            >
-              <SelectPrimitive.Value>{selected?.label}</SelectPrimitive.Value>
+          <SelectPrimitive.Trigger
+            render={
+              <Button
+                variant="outlined"
+                size="sm"
+                className={cx(styles['select-trigger'], props.selectTriggerClassName)}
+              />
+            }
+          >
+            <SelectPrimitive.Value>{() => selected?.label}</SelectPrimitive.Value>
+            <SelectPrimitive.Icon>
               <ChevronsUpDown height="18px" width="18px" svgClassName={styles['select-chevrons']} />
-            </Button>
+            </SelectPrimitive.Icon>
           </SelectPrimitive.Trigger>
-          <SelectPrimitive.Content
-            className={styles['select-content']}
-            position="popper"
-            sideOffset={4}
-            align="center"
-          >
-            <ScrollArea className={cx(styles['scroll-area'])}>
-              {options?.map(({ value, label, disabled }, id) => (
-                <SelectPrimitive.Item
-                  className={styles['select-item']}
-                  key={`${value}-${id}`}
-                  value={value?.toString()}
-                  disabled={disabled}
-                >
-                  {label}
-                </SelectPrimitive.Item>
-              ))}
-            </ScrollArea>
-          </SelectPrimitive.Content>
+          <SelectPrimitive.Portal>
+            <SelectPrimitive.Positioner
+              className={styles['select-content']}
+              sideOffset={4}
+              align="center"
+              alignItemWithTrigger={false}
+            >
+              <SelectPrimitive.Popup>
+                <ScrollArea className={cx(styles['scroll-area'])}>
+                  <SelectPrimitive.List>
+                    {options?.map(({ value, label, disabled }, id) => (
+                      <SelectPrimitive.Item
+                        className={styles['select-item']}
+                        key={`${value}-${id}`}
+                        value={value?.toString()}
+                        disabled={disabled}
+                      >
+                        <SelectPrimitive.ItemText>{label}</SelectPrimitive.ItemText>
+                      </SelectPrimitive.Item>
+                    ))}
+                  </SelectPrimitive.List>
+                </ScrollArea>
+              </SelectPrimitive.Popup>
+            </SelectPrimitive.Positioner>
+          </SelectPrimitive.Portal>
         </SelectPrimitive.Root>
       )
     },

package/src/components/forms/checkbox-group.tsx

@@ -50,7 +50,7 @@ export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
     }
   }, [controlledValue, defaultValues])
 
-  const handleCheckboxChange = (id: string, checked: boolean | 'indeterminate') => {
+  const handleCheckboxChange = (id: string, checked: boolean) => {
     const s = [...selected]
     if (checked === true) {
       if (s.includes(id) === false) {

package/src/components/forms/checkbox.astro

@@ -71,11 +71,13 @@ const {
         checkBoxClasses,
         className
       ]}
-      data-state={checked ? 'checked' : 'unchecked'}
+      data-checked={checked ? '' : undefined}
+      data-unchecked={!checked ? '' : undefined}
     >
       <span
         class:list={['checkbox-indicator', styles.indicator]}
-        data-state={checked ? 'checked' : 'unchecked'}
+        data-checked={checked ? '' : undefined}
+        data-unchecked={!checked ? '' : undefined}
       >
         <CheckIcon class={styles.icon} />
       </span>
@@ -110,17 +112,20 @@ const {
       const indicator = visualCheckbox?.querySelector('.checkbox-indicator')
 
       if (visualCheckbox && indicator) {
+        const updateState = (checked: boolean) => {
+          for (const el of [visualCheckbox, indicator]) {
+            el.toggleAttribute('data-checked', checked)
+            el.toggleAttribute('data-unchecked', !checked)
+          }
+        }
+
         // Update state on change
         checkboxInput.addEventListener('change', () => {
-          const state = checkboxInput.checked ? 'checked' : 'unchecked'
-          visualCheckbox.setAttribute('data-state', state)
-          indicator.setAttribute('data-state', state)
+          updateState(checkboxInput.checked)
         })
 
         // Ensure initial state is correct
-        const state = checkboxInput.checked ? 'checked' : 'unchecked'
-        visualCheckbox.setAttribute('data-state', state)
-        indicator.setAttribute('data-state', state)
+        updateState(checkboxInput.checked)
       }
     })
   }

package/src/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/src/components/forms/checkbox.tsx

@@ -2,8 +2,8 @@
 
 import type * as React from 'react'
 
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
 import cx from 'classnames'
-import { Checkbox as CheckboxPrimitive, Label as LabelPrimitive } from 'radix-ui'
 
 import { CheckIcon } from '../../icons/check-icon'
 import styles from './checkbox.module.css'
@@ -11,7 +11,7 @@ import { ErrorText } from './error-text.js'
 import { HelpText } from './help-text.js'
 import type { Intent, Size, Variant } from './@types/checkbox.js'
 
-export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface Props {
   id: string
   name: string
   label?: string
@@ -20,6 +20,7 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   intent?: Intent
   reverse?: boolean
   checked?: boolean
+  disabled?: boolean
   className?: string
   checkBoxClasses?: string
   containerClasses?: string
@@ -28,7 +29,9 @@ export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   error?: boolean
   helpText?: string
   errorText?: string
-  onCheckedChange?: (checked: boolean | 'indeterminate') => void
+  onCheckedChange?: React.ComponentProps<typeof CheckboxPrimitive.Root>['onCheckedChange']
+  onClick?: React.MouseEventHandler
+  'aria-label'?: string
 }
 
 export const Checkbox = function Checkbox({
@@ -63,6 +66,8 @@ export const Checkbox = function Checkbox({
           ref={ref}
           id={id}
           name={name}
+          nativeButton
+          render={<button type="button" />}
           className={cx(
             'infonomic-checkbox',
             `infonomic-checkbox-${variant}`,
@@ -78,7 +83,7 @@ export const Checkbox = function Checkbox({
           {...rest}
         >
           <CheckboxPrimitive.Indicator
-            forceMount
+            keepMounted
             className={cx('infonomic-checkbox-indicator', styles.indicator)}
           >
             <CheckIcon className={styles.icon} />
@@ -86,12 +91,12 @@ export const Checkbox = function Checkbox({
         </CheckboxPrimitive.Root>
 
         {label != null && (
-          <LabelPrimitive.Label
+          <label
             htmlFor={id}
             className={cx('infonomic-checkbox-label', styles.label, labelClasses)}
           >
             {label}
-          </LabelPrimitive.Label>
+          </label>
         )}
       </div>
       {error ? (

package/src/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/src/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/src/components/forms/radio-group.tsx

@@ -2,8 +2,9 @@
 
 import type React from 'react'
 
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
 import cx from 'classnames'
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
 
 import styles from './radio-group.module.css'
 import type { Intent } from '../@types/shared'
@@ -22,24 +23,26 @@ export const RadioGroupItem = ({
   label,
   ref: forwardedRef,
   ...props
-}: RadioGroupPrimitive.RadioGroupItemProps & {
+}: 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>
 }) => {
   return (
     <div ref={forwardedRef} className={styles['item-container']}>
-      <RadioGroupPrimitive.Item
+      <Radio.Root
         {...props}
         className={cx(styles.item, styles[intent])}
         value={value}
         id={id}
+        nativeButton
+        render={<button type="button" />}
       >
-        <RadioGroupPrimitive.Indicator className={styles.indicator} />
-      </RadioGroupPrimitive.Item>
+        <Radio.Indicator className={styles.indicator} />
+      </Radio.Root>
       <label className={styles.label} htmlFor={id}>
         {label}
       </label>
@@ -53,18 +56,17 @@ export const RadioGroup = ({
   direction = 'column',
   children,
   ...props
-}: RadioGroupPrimitive.RadioGroupProps & {
+}: React.ComponentProps<typeof RadioGroupPrimitive> & {
   direction?: 'row' | 'column'
   className?: string
   children: React.ReactNode
-  ref?: React.RefObject<React.ComponentRef<'div'>>
+  ref?: React.RefObject<HTMLDivElement>
 }) => (
-  <RadioGroupPrimitive.Root
+  <RadioGroupPrimitive
     ref={forwardedRef}
     className={cx('infonomic-radio-group', styles[direction], className)}
-    // aria-label="View density"
     {...props}
   >
     {children}
-  </RadioGroupPrimitive.Root>
+  </RadioGroupPrimitive>
 )

package/src/components/forms/select.module.css

@@ -7,13 +7,13 @@ infonomic-components;
 
 @layer infonomic-components {
 
-  .content,
-  :global(.infonomic-select-content) {
+  .positioner,
+  :global(.infonomic-select-positioner) {
     z-index: 50;
   }
 
-  .viewport,
-  :global(.infonomic-select-viewport) {
+  .popup,
+  :global(.infonomic-select-popup) {
     z-index: 50;
     margin-top: 2px;
     border: 1px solid var(--surface-panel-border);
@@ -23,33 +23,33 @@ infonomic-components;
     padding: 6px;
   }
 
-  .viewport-xs {
+  .popup-xs {
     padding: 4px;
   }
 
-  .viewport-sm {
+  .popup-sm {
     padding: 4px;
   }
 
-  .viewport-md {
+  .popup-md {
     padding: 6px;
   }
 
-  .viewport-lg {
+  .popup-lg {
     padding: 6px;
   }
 
-  .viewport-xl {
+  .popup-xl {
     padding: 8px;
   }
 
-  .group,
-  :global(.infonomic-select-group) {
+  .list,
+  :global(.infonomic-select-list) {
     z-index: 50;
   }
 
-  .scroll-button,
-  :global(.infonomic-select-scroll-button) {
+  .scroll-arrow,
+  :global(.infonomic-select-scroll-arrow) {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -101,7 +101,7 @@ infonomic-components;
   }
 
   /* size variants — treat current values as 'md' */
-  .viewport-xs .select-item {
+  .popup-xs .select-item {
     font-size: 0.75rem;
     height: 24px;
     padding-right: 28px;
@@ -109,11 +109,11 @@ infonomic-components;
     border-radius: 4px;
   }
 
-  .viewport-xs .select-item-indicator {
+  .popup-xs .select-item-indicator {
     width: 20px;
   }
 
-  .viewport-sm .select-item {
+  .popup-sm .select-item {
     font-size: 0.875rem;
     height: 28px;
     padding-right: 30px;
@@ -121,13 +121,13 @@ infonomic-components;
     border-radius: 5px;
   }
 
-  .viewport-sm .select-item-indicator {
+  .popup-sm .select-item-indicator {
     width: 22px;
   }
 
-  /* .viewport-md — inherits base .select-item values */
+  /* .popup-md — inherits base .select-item values */
 
-  .viewport-lg .select-item {
+  .popup-lg .select-item {
     font-size: 1.125rem;
     height: 34px;
     padding-right: 32px;
@@ -135,11 +135,11 @@ infonomic-components;
     border-radius: 6px;
   }
 
-  .viewport-lg .select-item-indicator {
+  .popup-lg .select-item-indicator {
     width: 24px;
   }
 
-  .viewport-xl .select-item {
+  .popup-xl .select-item {
     font-size: 1.25rem;
     height: 40px;
     padding-right: 36px;
@@ -147,7 +147,7 @@ infonomic-components;
     border-radius: 8px;
   }
 
-  .viewport-xl .select-item-indicator {
+  .popup-xl .select-item-indicator {
     width: 28px;
   }
 }