@astryxdesign/core 0.4.5 → 0.4.6-canary.cea9ecd

package/src/PowerSearch/PowerSearch.tsx

@@ -50,12 +50,17 @@ import {mergeRefs} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInternalConfig} from './useInternalConfig';
 import {usePowerSearchSource} from './usePowerSearchSource';
-import {formatFilterValue} from './formatFilterValue';
+import {
+  formatFilterValue,
+  formatDateAbsoluteCompact,
+} from './formatFilterValue';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
 import {truncateCharacters} from '../utils/characters';
 import {useTranslator} from '../i18n';
+import {useLocale} from '../i18n/useLocale';
+import type {Locale} from '../i18n/types';
 import type {
   PowerSearchConfig,
   PowerSearchFilter,
@@ -131,10 +136,12 @@ function PowerSearchTokenValue({
   operatorValue,
   filterValue,
   maxLength,
+  locale,
 }: {
   operatorValue: OperatorValue;
   filterValue: FilterValue;
   maxLength: number;
+  locale: Locale;
 }) {
   switch (filterValue.type) {
     case 'empty':
@@ -276,12 +283,10 @@ function PowerSearchTokenValue({
       );
 
     case 'date_absolute': {
-      const date = new Date(filterValue.unixSeconds * 1000);
-      const formatted = new Intl.DateTimeFormat(undefined, {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      }).format(date);
+      const formatted = formatDateAbsoluteCompact(
+        filterValue.unixSeconds,
+        locale,
+      );
       return (
         <span {...stylex.props(tokenValueStyles.value)}>
           {truncateString(formatted, maxLength)}
@@ -556,6 +561,7 @@ export function PowerSearch({
   const config = useInternalConfig(configProp);
   const searchSource = usePowerSearchSource(config);
   const t = useTranslator();
+  const locale = useLocale();
   const label = labelFromProps ?? t('@astryx.powersearch.label');
   const placeholder =
     placeholderFromProps ?? t('@astryx.powersearch.placeholder');
@@ -625,6 +631,7 @@ export function PowerSearch({
             filter.value,
             maxTokenLength,
             t,
+            locale,
             timezoneID,
           )
         : '';
@@ -644,7 +651,7 @@ export function PowerSearch({
         },
       };
     });
-  }, [filters, config, maxTokenLength, timezoneID, t]);
+  }, [filters, config, maxTokenLength, timezoneID, t, locale]);
 
   // Handle tokenizer onChange (field selected from typeahead)
   const handleTokenizerChange = useCallback(
@@ -820,6 +827,7 @@ export function PowerSearch({
             operatorValue={operator.value}
             filterValue={filter.value}
             maxLength={adjustedMaxLength}
+            locale={locale}
           />
         ) : undefined;
 
@@ -858,6 +866,7 @@ export function PowerSearch({
       config,
       configProp,
       maxTokenLength,
+      locale,
       size,
       isReadOnly,
       isDisabled,

package/src/PowerSearch/PowerSearchToken.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Token} from '../Token';
 import {useTranslator} from '../i18n';
+import {useLocale} from '../i18n/useLocale';
 import {fontWeightVars} from '../theme/tokens.stylex';
 import {formatFilterValue} from './formatFilterValue';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
@@ -44,6 +45,7 @@ export function PowerSearchToken({
 }: PowerSearchTokenProps) {
   const config = useInternalConfig(configProp);
   const t = useTranslator();
+  const locale = useLocale();
 
   const fieldLabel = field.label;
   const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
@@ -63,6 +65,7 @@ export function PowerSearchToken({
     filter.value,
     adjustedMaxLength,
     t,
+    locale,
   );
 
   const valueContent = valueStr ? (

package/src/PowerSearch/formatFilterValue.test.ts

@@ -31,7 +31,15 @@ const fmt = (
   maxLength = 20,
   timezoneID?: string,
 ): string =>
-  formatFilterValue({} as never, operator, value, maxLength, t, timezoneID);
+  formatFilterValue(
+    {} as never,
+    operator,
+    value,
+    maxLength,
+    t,
+    'en-US',
+    timezoneID,
+  );
 
 const ELLIPSIS = '…';
 
@@ -87,8 +95,20 @@ describe('formatFilterValue', () => {
   });
 
   describe('integer / float', () => {
+    it('formats the same number differently when the locale changes', () => {
+      const args = [
+        {} as never,
+        {type: 'float'} as OperatorValue,
+        {type: 'float', value: 1234.5} as FilterValue,
+        40,
+        t,
+      ] as const;
+      expect(formatFilterValue(...args, 'en-US')).toBe('1,234.5');
+      expect(formatFilterValue(...args, 'de-DE')).toBe('1.234,5');
+    });
+
     it('formats an integer with locale grouping', () => {
-      const expected = new Intl.NumberFormat().format(1234567);
+      const expected = new Intl.NumberFormat('en-US').format(1234567);
       expect(
         fmt({type: 'integer'}, {type: 'integer', value: 1234567}, 40),
       ).toBe(expected);

package/src/PowerSearch/formatFilterValue.ts

@@ -12,7 +12,7 @@
 
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
-import type {TranslatorFn} from '../i18n';
+import type {Locale, TranslatorFn} from '../i18n';
 import {truncateCharacters} from '../utils/characters';
 
 function truncate(str: string, maxLength: number): string {
@@ -27,12 +27,16 @@ function formatEnumLabel(
   return item?.label ?? value;
 }
 
-function formatNumber(value: number, units?: string): string {
-  const formatted = new Intl.NumberFormat().format(value);
+function formatNumber(value: number, locale: Locale, units?: string): string {
+  const formatted = new Intl.NumberFormat(locale).format(value);
   return units ? `${formatted} ${units}` : formatted;
 }
 
-function formatDateAbsolute(unixSeconds: number, timezoneID?: string): string {
+export function formatDateAbsolute(
+  unixSeconds: number,
+  locale: Locale,
+  timezoneID?: string,
+): string {
   const options: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'short',
@@ -41,7 +45,25 @@ function formatDateAbsolute(unixSeconds: number, timezoneID?: string): string {
     minute: '2-digit',
     ...(timezoneID ? {timeZone: timezoneID} : {}),
   };
-  return new Intl.DateTimeFormat(undefined, options).format(unixSeconds * 1000);
+  return new Intl.DateTimeFormat(locale, options).format(unixSeconds * 1000);
+}
+
+/**
+ * Compact date-only rendering (no time-of-day) for the token pill's inline
+ * value display, which has less room than the editor's full summary. Kept
+ * separate from {@link formatDateAbsolute} rather than reusing it with
+ * different options threaded through a param, since the two callers want
+ * genuinely different shapes, not a parameterization of the same one.
+ */
+export function formatDateAbsoluteCompact(
+  unixSeconds: number,
+  locale: Locale,
+): string {
+  return new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(unixSeconds * 1000);
 }
 
 function formatRelativeDate(value: string): string {
@@ -62,6 +84,7 @@ export function formatFilterValue(
   filterValue: FilterValue,
   maxLength: number,
   t: TranslatorFn,
+  locale: Locale,
   timezoneID?: string,
 ): string {
   switch (filterValue.type) {
@@ -74,12 +97,14 @@ export function formatFilterValue(
     case 'integer':
       return formatNumber(
         filterValue.value,
+        locale,
         operatorValue.type === 'integer' ? operatorValue.units : undefined,
       );
 
     case 'float':
       return formatNumber(
         filterValue.value,
+        locale,
         operatorValue.type === 'float' ? operatorValue.units : undefined,
       );
 
@@ -157,7 +182,7 @@ export function formatFilterValue(
 
     case 'date_absolute':
       return truncate(
-        formatDateAbsolute(filterValue.unixSeconds, timezoneID),
+        formatDateAbsolute(filterValue.unixSeconds, locale, timezoneID),
         maxLength,
       );
 

package/src/RadioList/RadioList.doc.mjs

@@ -11,7 +11,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-radio-list', visualProps: ['orientation', 'size']},
-      {className: 'astryx-radio-list-item'},
+      {className: 'astryx-radio-list-item', visualProps: ['size'], states: ['selected', 'disabled']},
       {className: 'astryx-radio-indicator', visualProps: ['size'], states: ['checked', 'disabled']},
       {className: 'astryx-radio-indicator-dot', visualProps: ['size']},
       {className: 'astryx-radio', visualProps: ['size'], states: ['checked', 'disabled'], deprecatedFor: 'radio-indicator'},

package/src/RadioList/RadioList.test.tsx

@@ -116,6 +116,22 @@ describe('RadioList', () => {
     expect(handleChange).toHaveBeenCalledWith('b');
   });
 
+  it('calls onChange when clicking the description', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+    render(
+      <RadioList label="Preference" value="a" onChange={handleChange}>
+        <RadioListItem label="Option A" value="a" description="First option" />
+        <RadioListItem label="Option B" value="b" description="Second option" />
+      </RadioList>,
+    );
+
+    // The whole row delegates surface clicks to the radio, so the description
+    // is a live target — not dead space as it was before.
+    await user.click(screen.getByText('Second option'));
+    expect(handleChange).toHaveBeenCalledWith('b');
+  });
+
   it('disables all radios when group isDisabled is true', () => {
     render(
       <RadioList label="Preference" value="" onChange={() => {}} isDisabled>
@@ -137,7 +153,13 @@ describe('RadioList', () => {
       </RadioList>,
     );
 
-    await user.click(screen.getByLabelText('Option A'));
+    // userEvent honors `pointer-events: none`, so clicking the disabled row's
+    // delegate surface is genuinely blocked (it refuses and throws) rather than
+    // merely ignored by the handler — the guarantee this PR's delegation relies
+    // on.
+    await expect(user.click(screen.getByLabelText('Option A'))).rejects.toThrow(
+      /pointer-events/i,
+    );
     expect(handleChange).not.toHaveBeenCalled();
   });
 
@@ -162,7 +184,13 @@ describe('RadioList', () => {
       </RadioList>,
     );
 
-    await user.click(screen.getByLabelText('Option A'));
+    // userEvent honors `pointer-events: none`, so clicking the disabled row's
+    // delegate surface is genuinely blocked (it refuses and throws) rather than
+    // merely ignored by the handler — the guarantee this PR's delegation relies
+    // on.
+    await expect(user.click(screen.getByLabelText('Option A'))).rejects.toThrow(
+      /pointer-events/i,
+    );
     expect(handleChange).not.toHaveBeenCalled();
   });
 
@@ -647,6 +675,146 @@ describe('RadioList', () => {
       expect(item).toHaveAttribute('aria-label', 'First option');
     });
   });
+
+  describe('radio-list-item theme target', () => {
+    it('renders astryx-radio-list-item, with its size, on every row', () => {
+      render(
+        <RadioList label="Preference" value="" onChange={() => {}} size="sm">
+          <RadioListItem label="Option A" value="a" data-testid="row-a" />
+          <RadioListItem label="Option B" value="b" data-testid="row-b" />
+        </RadioList>,
+      );
+      for (const testid of ['row-a', 'row-b']) {
+        const row = screen.getByTestId(testid);
+        expect(row).toHaveClass('astryx-radio-list-item');
+        expect(row).toHaveClass('sm');
+        expect(row).toHaveAttribute('data-size', 'sm');
+      }
+    });
+
+    it('carries the selected and disabled states a theme keys on', () => {
+      render(
+        <RadioList label="Preference" value="a" onChange={() => {}}>
+          <RadioListItem label="Option A" value="a" data-testid="selected" />
+          <RadioListItem label="Option B" value="b" data-testid="plain" />
+          <RadioListItem
+            label="Option C"
+            value="c"
+            isDisabled
+            data-testid="disabled"
+          />
+        </RadioList>,
+      );
+      const selected = screen.getByTestId('selected');
+      const plain = screen.getByTestId('plain');
+      const disabled = screen.getByTestId('disabled');
+
+      expect(selected).toHaveClass('selected');
+      expect(selected).toHaveAttribute('data-selected', 'selected');
+      expect(plain).not.toHaveClass('selected');
+      expect(plain).not.toHaveAttribute('data-selected');
+
+      expect(disabled).toHaveClass('disabled');
+      expect(disabled).toHaveAttribute('data-disabled', 'disabled');
+      expect(plain).not.toHaveAttribute('data-disabled');
+    });
+
+    it('rides the painting row element (astryx-item), not a bare layout wrapper', () => {
+      // The row target must sit on the element Item paints — the surface that
+      // renders hover, density padding, and radius — so a theme styling
+      // `radio-list-item`'s background/padding/borderRadius (and its `:hover`)
+      // actually takes effect. Converges with how ListItem lands `list-item`
+      // on the same element as `astryx-item`. The same element also carries
+      // the reflected `data-size`, proving the variant surface moved with it.
+      const {container} = render(
+        <RadioList label="Preference" value="" onChange={() => {}}>
+          <RadioListItem label="Option A" value="a" data-testid="row" />
+        </RadioList>,
+      );
+      const row = screen.getByTestId('row');
+      // A single element carries both the paint class and the theme target.
+      expect(row).toHaveClass('astryx-item');
+      expect(row).toHaveClass('astryx-radio-list-item');
+      expect(row).toHaveAttribute('data-size');
+      // No separate layout wrapper survives outside the painting row: the
+      // target-bearing element is the same one Item renders.
+      expect(
+        container.querySelectorAll('.astryx-radio-list-item'),
+      ).toHaveLength(1);
+    });
+
+    it('keeps the bare default row appearance: zeroed padding/radius, no default background', () => {
+      // The architectural win — the target rides the painting Item — must not
+      // change the DEFAULT look. The painting row zeroes Item's density
+      // padding, its radius, and its interactive hover/press background, so an
+      // unthemed RadioList renders as a flat surface (only the indicator tints
+      // on hover via `indicatorScope`). This matches the appearance before the
+      // target moved onto Item; a theme's `radio-list-item` overrides still win
+      // from the higher `astryx-theme` layer.
+      render(
+        <RadioList label="Preference" value="a" onChange={() => {}}>
+          <RadioListItem label="Selected" value="a" data-testid="selected" />
+          <RadioListItem label="Plain" value="b" data-testid="plain" />
+        </RadioList>,
+      );
+      const cssFor = (className: string): string => {
+        const rules: string[] = [];
+        const walk = (list: CSSRuleList) => {
+          for (const rule of Array.from(list)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const anyRule = rule as any;
+            if (anyRule.cssRules) {
+              walk(anyRule.cssRules);
+            }
+            if (
+              typeof anyRule.cssText === 'string' &&
+              anyRule.cssText.includes(`.${className}`)
+            ) {
+              rules.push(anyRule.cssText);
+            }
+          }
+        };
+        for (const sheet of Array.from(document.styleSheets)) {
+          try {
+            walk(sheet.cssRules);
+          } catch {
+            // cross-origin/inaccessible sheet — skip
+          }
+        }
+        return rules.join('\n');
+      };
+
+      const plain = screen.getByTestId('plain');
+      const atoms = plain.className
+        .split(/\s+/)
+        .filter(c => /^x[a-z0-9]+$/i.test(c));
+      const declarations = atoms.map(cssFor).join('\n');
+
+      // The bare-look declarations land on the painting row.
+      expect(declarations).toMatch(/padding-block:\s*0/);
+      expect(declarations).toMatch(/padding-inline:\s*0/);
+      expect(declarations).toMatch(/border-radius:\s*0/);
+      expect(declarations).toMatch(/background-color:\s*transparent/);
+
+      // No default full-row hover highlight: the flat transparent background
+      // replaces Item's interactive `:hover` overlay, so no hover rule paints
+      // the row's own background. (The indicator still tints via its scope.)
+      expect(declarations).not.toMatch(
+        /:hover[^{]*\{[^}]*background-color:\s*var\(--color-overlay-hover\)/,
+      );
+
+      // No default selected-row background: the selected row differs from the
+      // plain row only by state markers, not by a painted background class.
+      const selected = screen.getByTestId('selected');
+      const selectedAtoms = selected.className
+        .split(/\s+/)
+        .filter(c => /^x[a-z0-9]+$/i.test(c));
+      const selectedDecls = selectedAtoms.map(cssFor).join('\n');
+      expect(selectedDecls).not.toMatch(
+        /background-color:\s*var\(--color-accent-muted\)/,
+      );
+    });
+  });
 });
 
 // jsdom cannot emulate forced-colors rendering, so this asserts that the

package/src/RadioList/RadioListItem.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file RadioListItem.tsx
- * @input Uses React use, useId, RadioListContext
+ * @input Uses React use, useId, useRef, RadioListContext, Item
  * @output Exports RadioListItem component, RadioListItemProps
  * @position Core implementation; consumed by index.ts, tested by RadioList.test.tsx
  *
@@ -20,10 +20,10 @@
 
 import React, {use, useId, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
+import type {StyleXStyles} from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
-import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {RadioListContext} from './RadioList';
-import {mergeProps} from '../utils';
+import {mergeProps, isRenderable} from '../utils';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {useIndicator} from '../Indicator';
@@ -31,11 +31,6 @@ import {Item} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: spacingVars['--spacing-2'],
-  },
   radioWrapper: {
     position: 'relative',
     display: 'flex',
@@ -49,7 +44,10 @@ const styles = stylex.create({
     margin: 0,
     padding: 0,
     opacity: 0,
-    cursor: 'pointer',
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
     zIndex: 1,
     minInlineSize: {
       default: null,
@@ -73,16 +71,12 @@ const styles = stylex.create({
     },
   },
   inputDisabled: {
-    cursor: 'not-allowed',
+    cursor: 'default',
   },
   // Holds only the indicator, so the focus ring has one unambiguous target.
   indicatorSlot: {
     display: 'contents',
   },
-  labelDisabled: {
-    color: colorVars['--color-text-disabled'],
-    cursor: 'not-allowed',
-  },
 });
 
 const wrapperSizeStyles = stylex.create({
@@ -96,13 +90,23 @@ const wrapperSizeStyles = stylex.create({
   },
 });
 
-const embeddedStyles = stylex.create({
+const rowStyles = stylex.create({
+  // The row's default appearance is a bare surface: no density padding, no
+  // radius, and no full-row background — only the indicator tints on hover
+  // (via `indicatorScope`). Item paints padding/radius/hover as an interactive
+  // row, so this neutralizes them at the component level. A theme's
+  // `radio-list-item` overrides still win: they land in `@layer astryx-theme`,
+  // above the component's base StyleX layer, so themes opt back into row
+  // padding/radius/hover/selected styling. `minWidth: 0` preserves label
+  // truncation now that the Item is the row's flex child.
   root: {
     paddingBlock: 0,
     paddingInline: 0,
     borderRadius: 0,
-    flex: 1,
     minWidth: 0,
+    // Suppress Item's interactive hover/press background so the resting and
+    // hovered row look identical by default (a theme can restyle either).
+    backgroundColor: 'transparent',
   },
 });
 
@@ -159,6 +163,7 @@ export function RadioListItem({
   xstyle,
   className,
   style,
+  onClick,
   ...rest
 }: RadioListItemProps) {
   const context = use(RadioListContext);
@@ -185,16 +190,28 @@ export function RadioListItem({
   const indicatorRef = useRef<HTMLSpanElement>(null);
   const {focusProps} = useIndicatorFocusRing(indicatorRef, isDisabled);
 
+  // The radio is the row's single keyboard control and action. The row is an
+  // enlarged click/tap target that delegates surface clicks — the description
+  // and the empty hover area, not just the control and its label — to the
+  // input via Item's `interactiveRef` (useClickableContainer). This matches
+  // CheckboxListItem so the whole row is clickable, and keeps one tab stop per
+  // option (WCAG 4.1.2). The radio carries its accessible name via `aria-label`
+  // since the visible label is now a plain (non-`<label>`) text node — a real
+  // `<label htmlFor>` would double-fire under delegation.
+  const radioRef = useRef<HTMLInputElement>(null);
+
   const radioCircle = (
     <div
       {...stylex.props(styles.radioWrapper, wrapperSizeStyles[size])}
       {...focusProps}>
       <input
+        ref={radioRef}
         id={id}
         type="radio"
         name={context.name}
         value={value}
         checked={isChecked}
+        aria-label={label}
         disabled={isDisabled && !keepsFocusableForMessage}
         aria-disabled={keepsFocusableForMessage ? 'true' : undefined}
         // A focusable-disabled radio is not natively disabled, so detach it
@@ -208,6 +225,10 @@ export function RadioListItem({
           }
           context.onChange(value);
         }}
+        // A consumer onClick rides on the radio input itself, so it fires for
+        // both direct control clicks and row-surface clicks the row delegates
+        // to the input — the same routing CheckboxListItem uses.
+        onClick={onClick}
         aria-describedby={description ? descriptionID : undefined}
         {...stylex.props(
           styles.input,
@@ -225,50 +246,64 @@ export function RadioListItem({
     </div>
   );
 
-  const mediaContent =
-    startContent != null ? (
-      <>
-        {radioCircle}
-        {startContent}
-      </>
-    ) : (
-      radioCircle
-    );
+  const mediaContent = isRenderable(startContent) ? (
+    <>
+      {radioCircle}
+      {startContent}
+    </>
+  ) : (
+    radioCircle
+  );
 
   return (
-    <div
+    <Item
       ref={ref}
-      {...mergeProps(
-        themeProps('radio-list-item'),
-        stylex.props(
-          styles.container,
+      startContent={mediaContent}
+      // Delegate row-surface clicks (label text, description, and the empty
+      // hover area) to the radio input. The input stays the option's sole
+      // focusable control, so the row adds no second tab stop.
+      interactiveRef={radioRef}
+      isDisabled={isDisabled}
+      label={<span>{label}</span>}
+      description={
+        isRenderable(description) ? (
+          <span id={descriptionID}>{description}</span>
+        ) : undefined
+      }
+      endContent={endContent}
+      xstyle={
+        [
           // Hover reaches the radio visual through this ancestor marker rather
-          // than props, so hovering the row tints the control.
+          // than props, so hovering the row tints the control. The marker rides
+          // the painting row element (Item), the same element that carries the
+          // theme target, so a theme's hover styling stays in step with the tint.
           !isDisabled && indicatorScope,
+          // Restore the bare default look: zero Item's padding/radius and its
+          // interactive hover/press background. Applied after Item's own base
+          // styles so it wins within the base layer; a `radio-list-item` theme
+          // still overrides it from the higher `astryx-theme` layer.
+          rowStyles.root,
           xstyle,
-        ),
-        className,
-        style,
+        ] as StyleXStyles
+      }
+      {...mergeProps(
+        // One target for every row, carrying its size and runtime state so a
+        // theme can express "selected option at large" or restyle disabled
+        // rows without reaching for structural selectors. It lands on the
+        // element Item paints — the row surface — so a theme styling
+        // `radio-list-item`'s background/padding/borderRadius (and its
+        // `:hover`) actually takes effect from the `astryx-theme` layer, even
+        // though the component zeroes those by default. Converges with how
+        // ListItem lands `list-item` on the same element as `astryx-item`.
+        themeProps('radio-list-item', {
+          size,
+          selected: isChecked ? 'selected' : null,
+          disabled: isDisabled ? 'disabled' : null,
+        }),
+        {className, style},
       )}
-      {...rest}>
-      <Item
-        startContent={mediaContent}
-        label={
-          <label
-            htmlFor={id}
-            {...stylex.props(isDisabled && styles.labelDisabled)}>
-            {label}
-          </label>
-        }
-        description={
-          description != null ? (
-            <span id={descriptionID}>{description}</span>
-          ) : undefined
-        }
-        endContent={endContent}
-        xstyle={embeddedStyles.root}
-      />
-    </div>
+      {...rest}
+    />
   );
 }