@ostack.tech/ui 0.6.5 → 0.8.0

package/dist/types/components/IconButton/IconButton.d.ts

@@ -1,8 +1,11 @@
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
-import { ButtonColor, ButtonSize, ButtonVariant } from '../Button';
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+import { ButtonAs, ButtonColor, ButtonSize, ButtonVariant } from '../Button';
 import { Icon, IconProp } from '../Icon';
 import { Spinner } from '../Spinner';
 import { Tooltip } from '../Tooltip';
+/** Elements an icon button can be rendered as. */
+export type IconButtonAs = ButtonAs;
 /** Icon button variants. */
 export type IconButtonVariant = ButtonVariant;
 /** Icon button colours. */
@@ -10,7 +13,9 @@ export type IconButtonColor = ButtonColor;
 /** Icon button sizes. */
 export type IconButtonSize = ButtonSize;
 /** Properties of the icon button component. */
-export interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+export type IconButtonProps<TAs extends IconButtonAs = "button"> = PolymorphicProps<IconButtonAs, TAs, "button", IconButtonOwnProps>;
+/** Own properties of the icon button component. */
+export interface IconButtonOwnProps {
     /**
      * Change the component to the HTML tag or custom component of the only child.
      * This will merge the original component props with the props of the supplied
@@ -61,23 +66,50 @@ export interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">
      */
     disabled?: boolean;
     /**
-     * Whether to display the button in "loading" state. This makes it so the icon
-     * button displays a spinner instead of its icon.
+     * Renders the icon button in a **loading** state.
      *
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Whether the icon button should be enabled when `loading` is `true`.
+     * When `true`, the button is “soft-disabled”: it looks disabled and ignores
+     * user interaction but remains focusable. By default, a spinner is shown as
+     * the button's icon (_i.e._, `showSpinner` is set to `true` unless
+     * overridden).
+     *
+     * The button's label while loading can be controlled via `loadingLabel`.
+     *
+     * To only show a spinner without “soft-disabling” the button, set
+     * `showSpinner` instead.
+     *
+     * @example
+     *
+     * ```tsx
+     * <IconButton
+     *   icon={faFloppyDisk}
+     *   label="Save"
+     *   loading={saving}
+     *   loadingLabel="Saving…"
+     * />;
+     * ```
      *
      * @default false
      */
-    enabledWhenLoading?: boolean;
+    loading?: boolean;
     /**
      * Label of the icon button when it is in "loading" state. If not provided,
      * the label will remain unchanged.
      */
     loadingLabel?: ReactNode;
+    /**
+     * Whether to show a spinner as the icon button's icon.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the button.
+     *
+     * Use `showSpinner` when you want a spinner **without** “soft-disabling” the
+     * button. To “soft-disable” **without** a spinner, set `loading` to `true`
+     * and `showSpinner` to `false`.
+     *
+     * @default loading
+     */
+    showSpinner?: boolean;
     /**
      * Whether to disable showing the icon button's label in a tooltip. Disabling
      * the tooltip does **not** affect the button's accessibility.
@@ -117,4 +149,4 @@ export interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">
  * }
  * ```
  */
-export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: PolymorphicComponent<IconButtonAs, "button", IconButtonOwnProps>;

package/dist/types/components/Input/Input.d.ts

@@ -27,12 +27,42 @@ export interface InputPropsBase {
     /** Input code. */
     code?: ReactNode;
     /**
-     * Adds a spinner to the input to indicate activity. Note that it doesn't
-     * automatically disable the input.
+     * Renders the input in a **loading** state.
+     *
+     * When `true`, the input is “soft-disabled”: it looks disabled and ignores
+     * user interaction but remains focusable. By default, a spinner is shown
+     * (_i.e._, `showSpinner` is set to `true` unless overridden).
+     *
+     * The input's accessible description while loading can be controlled via
+     * `loadingDescription`.
+     *
+     * To only show a spinner without “soft-disabling” the input, set
+     * `showSpinner` instead.
+     *
+     * @example
+     *
+     * ```tsx
+     * <Input loading={fetching} loadingDescription="Fetching…" />;
+     * ```
      *
      * @default false
      */
     loading?: boolean;
+    /** Accessible description of the input when it is in a “loading” state. */
+    loadingDescription?: ReactNode;
+    /**
+     * Whether to show a spinner in the input.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the input.
+     *
+     * Use `showSpinner` when you want a spinner **without** “soft-disabling” the
+     * input. To “soft-disable” **without** a spinner, set `loading` to `true` and
+     * `showSpinner` to `false`.
+     *
+     * @default loading
+     */
+    showSpinner?: boolean;
     /** Sets the input's text align. */
     align?: Responsive<CSSProperties["textAlign"]>;
     /** Input's start adornment. */

package/dist/types/components/Label/Label.d.ts

@@ -20,7 +20,7 @@ export interface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimiti
     /** Properties to pass to the required icon component. */
     requiredIconProps?: Omit<ComponentPropsWithRef<typeof Icon>, "icon">;
     /** Properties to pass to the helper button component. */
-    helperButtonProps?: Omit<ComponentPropsWithRef<typeof IconButton>, "icon">;
+    helperButtonProps?: Omit<ComponentPropsWithRef<typeof IconButton<"button">>, "icon">;
     /** Properties to pass to the helper popover component. */
     helperPopoverProps?: ComponentPropsWithRef<typeof Popover>;
     /** Properties to pass to the helper popover content component. */

package/dist/types/components/Link/Link.d.ts

@@ -1,12 +1,17 @@
-import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import { AccentColor } from '../../utils/accent.ts';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
 import { Icon, IconProp } from '../Icon';
+/** Elements a link can be rendered as. */
+export type LinkAs = "a" | "button";
 /** Link variants. */
 export type LinkVariant = "default" | "alert";
 /** Link colours. */
 export type LinkColor = AccentColor;
 /** Properties of the link component. */
-export interface LinkProps extends ComponentPropsWithoutRef<"a"> {
+export type LinkProps<TAs extends LinkAs = "a"> = PolymorphicProps<LinkAs, TAs, "a", LinkOwnProps>;
+/** Own properties of the link component. */
+export interface LinkOwnProps {
     /**
      * Change the component to the HTML tag or custom component of the only child.
      * This will merge the original component props with the props of the supplied
@@ -55,4 +60,4 @@ export interface LinkProps extends ComponentPropsWithoutRef<"a"> {
  * }
  * ```
  */
-export declare const Link: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export declare const Link: PolymorphicComponent<LinkAs, "a", LinkOwnProps>;

package/dist/types/components/MenuList/MenuListItem.d.ts

@@ -3,6 +3,8 @@ import { AccentColor } from '../../utils/accent.ts';
 import { Icon, IconProp } from '../Icon';
 import { Spinner } from '../Spinner';
 import { MenuListIconPlacement } from './MenuList.tsx';
+/** Elements a menu list item's action can be rendered as. */
+export type MenuListItemType = "button" | "link" | "text";
 /** Menu list item colours. */
 export type MenuListItemColor = AccentColor;
 /** Properties of the menu list item component. */
@@ -18,7 +20,7 @@ export interface MenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">,
      *
      * @default button
      */
-    type?: "button" | "link" | "text";
+    type?: MenuListItemType;
     /**
      * Marks the item as being selected.
      *
@@ -30,25 +32,48 @@ export interface MenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">,
     /** Accent colour of the menu list item. */
     color?: MenuListItemColor;
     /**
-     * Whether to display the item in "loading" state by presenting a spinner as
-     * icon. The position of the spinner may be controlled via `iconPlacement`.
-     *
-     * Setting this property will automatically disable the item.
+     * Whether the item should be disabled.
      *
      * @default false
      */
-    loading?: boolean;
+    disabled?: boolean;
     /**
-     * Whether the item should be enabled when `loading` is `true`.
+     * Renders the item in a **loading** state.
+     *
+     * When `true`, the item is “soft-disabled”: it looks disabled and ignores
+     * user interaction but remains focusable. By default, a spinner is shown as
+     * the item's icon (_i.e._, `showSpinner` is set to `true` unless
+     * overridden).
+     *
+     * The item's content while loading can be controlled via `loadingContent`.
+     * The position of the spinner may be controlled via `iconPlacement`.
+     *
+     * To only show a spinner without “soft-disabling” the item, set `showSpinner`
+     * instead.
      *
      * @default false
      */
-    enabledWhenLoading?: boolean;
+    loading?: boolean;
     /**
      * Content of the item when it is in "loading" state. If not provided, the
      * item content will remain unchanged.
      */
     loadingContent?: ReactNode;
+    /**
+     * Whether to show a spinner as the item's icon.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the item.
+     *
+     * Use `showSpinner` when you want a spinner **without** “soft-disabling” the
+     * item. To “soft-disable” **without** a spinner, set `loading` to `true` and
+     * `showSpinner` to `false`.
+     *
+     * The position of the spinner may be controlled via `iconPlacement`.
+     *
+     * @default loading
+     */
+    showSpinner?: boolean;
     /**
      * Optional item icon.
      *
@@ -61,17 +86,11 @@ export interface MenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">,
      * @default start
      */
     iconPlacement?: MenuListIconPlacement;
-    /**
-     * Whether the item should be disabled.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /** Href for the link, when `itemType` is set to `"link"`. */
+    /** Href for the link, when `type` is set to `"link"`. */
     href?: ComponentProps<"a">["href"];
-    /** Target of the link, when `itemType` is set to `"link"`. */
+    /** Target of the link, when `type` is set to `"link"`. */
     target?: ComponentProps<"a">["target"];
-    /** Rel of the link, when `itemType` is set to `"link"`. */
+    /** Rel of the link, when `type` is set to `"link"`. */
     rel?: ComponentProps<"a">["rel"];
     /** Properties to pass to the action element of the item. */
     actionProps?: Omit<ComponentPropsWithRef<"button" | "a" | "div">, "disabled" | "href" | "target" | "rel">;

package/dist/types/components/Output/Output.d.ts

@@ -1,7 +1,25 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { InputPropsBase } from '../Input';
 /** Properties of the output component. */
-export interface OutputProps extends Omit<InputPropsBase, "asChild" | "children" | "showClearButton" | "clearButtonLabel">, ComponentPropsWithoutRef<"output"> {
+export interface OutputProps extends Omit<InputPropsBase, "asChild" | "disabled" | "loading" | "loadingDescription" | "showClearButton" | "clearButtonLabel" | "onValueChange" | "onBlurToOutside" | "clearButtonProps" | "children">, ComponentPropsWithoutRef<"output"> {
+    /**
+     * Renders the output in a **pending** state.
+     *
+     * When `true`, the value should be treated as not final (for example, it is
+     * still being calculated or refreshed). While pending, the output is marked
+     * as busy for assistive technologies.
+     *
+     * The output's content while pending can be controlled via `pendingContent`.
+     *
+     * To show a spinner without marking the output as `pending`, set
+     * `showSpinner` instead.
+     */
+    pending?: boolean;
+    /**
+     * Content to show while the output is in a **pending** state. If not
+     * provided, the output content will remain unchanged.
+     */
+    pendingContent?: ReactNode;
 }
 /**
  * The output component is used to display the result of a calculation or user

package/dist/types/components/RadioGroup/Radio.d.ts

@@ -15,12 +15,36 @@ export interface RadioProps extends Omit<ComponentPropsWithoutRef<typeof RadioGr
     /** Sets the radio as read-only. */
     readOnly?: boolean;
     /**
-     * Adds a spinner to the checkbox to indicate activity. Note that it doesn't
-     * automatically disable the checkbox.
+     * Renders the radio in a **loading** state.
+     *
+     * When `true`, the radio is “soft-disabled”: it looks disabled and ignores
+     * user interaction but remains focusable. By default, a spinner is shown
+     * (_i.e._, `showSpinner` is set to `true` unless overridden).
+     *
+     * The radio's accessible description while loading can be controlled via
+     * `loadingDescription`.
+     *
+     * To only show a spinner without “soft-disabling” the radio, set
+     * `showSpinner` instead.
      *
      * @default false
      */
     loading?: boolean;
+    /** Accessible description of the radio when it is in a “loading” state. */
+    loadingDescription?: ReactNode;
+    /**
+     * Whether to show a spinner next to the radio.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the radio.
+     *
+     * Use `showSpinner` when you want a spinner **without** “soft-disabling” the
+     * radio. To “soft-disable” **without** a spinner, set `loading` to `true` and
+     * `showSpinner` to `false`.
+     *
+     * @default loading
+     */
+    showSpinner?: boolean;
     /** Properties to pass to the root component. */
     rootProps?: ComponentPropsWithRef<"div">;
     /** Properties to pass to the code component. */

package/dist/types/components/RadioGroup/RadioGroup.d.ts

@@ -19,12 +19,36 @@ export interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof Ra
     /** Sets the radio group as read-only. */
     readOnly?: boolean;
     /**
-     * Adds a spinner to the radio group to indicate activity. Note that it
-     * doesn't automatically disable the control.
+     * Renders the radio group in a **loading** state.
+     *
+     * When `true`, the radio group is “soft-disabled”: it looks disabled and
+     * ignores user interaction but remains focusable. By default, a spinner is
+     * shown (_i.e._, `showSpinner` is set to `true` unless overridden).
+     *
+     * The radio group's accessible description while loading can be controlled
+     * via `loadingDescription`.
+     *
+     * To only show a spinner without “soft-disabling” the radio group, set
+     * `showSpinner` instead.
      *
      * @default false
      */
     loading?: boolean;
+    /** Accessible description of the radio group when it is in a “loading” state. */
+    loadingDescription?: ReactNode;
+    /**
+     * Whether to show a spinner next to the radio group.
+     *
+     * Defaults to the value of the `loading` property. In most cases, prefer
+     * `loading`, which also “soft-disables” the radio group.
+     *
+     * Use `showSpinner` when you want a spinner **without** “soft-disabling” the
+     * radio group. To “soft-disable” **without** a spinner, set `loading` to
+     * `true` and `showSpinner` to `false`.
+     *
+     * @default loading
+     */
+    showSpinner?: boolean;
     /** Radio group code. */
     code?: ReactNode;
     /**

package/dist/types/components/Select/Select.d.ts

@@ -5,7 +5,7 @@ import { Input } from '../Input';
 import { PopoverContent, PopoverTrigger } from '../Popover';
 import { Tag } from '../Tag';
 /** Base properties of the select component. */
-export interface SelectPropsBase<T extends string | number | readonly string[] = string | number | readonly string[]> extends ComponentPropsWithoutRef<typeof PopoverTrigger>, Pick<ComponentPropsWithoutRef<typeof Input>, "name" | "required" | "variant" | "status" | "code" | "readOnly" | "loading" | "align" | "startAdornment" | "endAdornment" | "showClearButton" | "onBlurToOutside" | "rootProps" | "codeProps" | "containerProps" | "clearButtonProps" | "spinnerProps">, Pick<ComponentPropsWithoutRef<typeof CommandMenu>, "searchPlaceholder" | "searchValue" | "onSearchValueChange"> {
+export interface SelectPropsBase<T extends string | number | readonly string[] = string | number | readonly string[]> extends ComponentPropsWithoutRef<typeof PopoverTrigger>, Pick<ComponentPropsWithoutRef<typeof Input>, "name" | "required" | "variant" | "status" | "code" | "readOnly" | "loading" | "loadingDescription" | "showSpinner" | "align" | "startAdornment" | "endAdornment" | "showClearButton" | "onBlurToOutside" | "rootProps" | "codeProps" | "containerProps" | "clearButtonProps" | "spinnerProps">, Pick<ComponentPropsWithoutRef<typeof CommandMenu>, "searchPlaceholder" | "searchValue" | "onSearchValueChange"> {
     /**
      * Whether multiple options can be selected. If not set, at most one option
      * can be selected at a time.
@@ -63,7 +63,7 @@ export interface SelectPropsBase<T extends string | number | readonly string[] =
     /** Properties to pass to each `Tag` holding a value, when `multiple` is set. */
     valueTagProps?: Omit<ComponentPropsWithoutRef<typeof Tag>, "defaultOpen" | "open" | "onOpenChange" | "color" | "showCloseButton">;
     /** Properties to pass to the arrow `Icon` component. */
-    arrowProps?: Omit<ComponentPropsWithRef<typeof IconButton>, "icon" | "label">;
+    arrowProps?: Omit<ComponentPropsWithRef<typeof IconButton<"button">>, "icon" | "label">;
     /** Properties to pass to the `Popover` component. */
     popoverProps?: ComponentPropsWithRef<typeof PopoverContent>;
     /** Options to pass to the `CommandMenu` component. */

package/dist/types/components/Table/TableColumn.d.ts

@@ -59,7 +59,7 @@ export interface TableColumnProps extends Omit<ComponentPropsWithoutRef<typeof T
     /** Properties to pass to the label component. */
     labelProps?: ComponentPropsWithRef<"div">;
     /** Properties to pass to the sort button. */
-    sortButtonProps?: ComponentPropsWithRef<typeof Button>;
+    sortButtonProps?: ComponentPropsWithRef<typeof Button<"button">>;
     /** Properties to pass to the component containing the sort icons. */
     sortIconContainerProps?: ComponentPropsWithRef<"div">;
     /** Properties to pass to the sort ascending icon component. */
@@ -67,7 +67,7 @@ export interface TableColumnProps extends Omit<ComponentPropsWithoutRef<typeof T
     /** Properties to pass to the sort descending icon component. */
     sortDescIconProps?: ComponentPropsWithRef<typeof Icon>;
     /** Properties to pass to the helper button component. */
-    helperButtonProps?: Omit<ComponentPropsWithRef<typeof IconButton>, "icon">;
+    helperButtonProps?: Omit<ComponentPropsWithRef<typeof IconButton<"button">>, "icon">;
     /** Properties to pass to the helper popover component. */
     helperPopoverProps?: ComponentPropsWithRef<typeof Popover>;
     /** Properties to pass to the helper popover content component. */

package/dist/types/index.d.ts

@@ -67,16 +67,18 @@ export * from './providers/PrefixProvider';
 export * from './providers/ToastManagerProvider';
 export * from './utils/boolDataAttr.ts';
 export * from './utils/breakpoints.ts';
+export * from './utils/combineAriaIds.ts';
 export * from './utils/combineEventHandlers.ts';
 export * from './utils/control.ts';
 export * from './utils/cx.ts';
 export * from './utils/filtering.ts';
 export * from './utils/keyboardShortcut.ts';
-export * from './utils/mergeAriaIds.ts';
 export * from './utils/nativeControls.ts';
 export * from './utils/navigate.ts';
 export * from './utils/numericStringUtils.ts';
 export * from './utils/parseDateStrict.ts';
+export * from './utils/polymorphicTypes.ts';
+export * from './utils/setNativeProperty.ts';
 export * from './utils/sorting.ts';
 export * from './utils/stringHash.ts';
 export * from './utils/useCombinedRef.ts';

package/dist/types/providers/AlertDialogProvider/AlertDialogProviderContext.d.ts

@@ -49,14 +49,14 @@ export interface AlertDialogOptions {
     /** Properties to pass to the alert dialog's footer component. */
     footerProps?: ComponentPropsWithRef<typeof AlertDialogFooter>;
     /** Properties to pass to the alert dialog's OK button component. */
-    okButtonProps?: Omit<ComponentPropsWithRef<typeof Button>, "onClick">;
+    okButtonProps?: Omit<ComponentPropsWithRef<typeof Button<"button">>, "onClick">;
 }
 /** Options that can be provided to a `confirm` alert dialog. */
 export interface ConfirmDialogOptions extends AlertDialogOptions {
     /** Alert dialog's cancel text. */
     cancelText?: ReactNode;
     /** Properties to pass to the alert dialog's cancel button component. */
-    cancelButtonProps?: Omit<ComponentPropsWithRef<typeof Button>, "onClick">;
+    cancelButtonProps?: Omit<ComponentPropsWithRef<typeof Button<"button">>, "onClick">;
 }
 /** Value of the alert dialog context. */
 export interface AlertDialogProviderContextValue {

package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts

@@ -38,7 +38,7 @@ export interface LocalizationObject {
     Feedback: Pick<FeedbackProps, "visuallyHiddenPrefix">;
     FeedbackPopover: Pick<FeedbackPopoverProps, "label">;
     FieldGroupHeader: Pick<FieldGroupHeaderProps, "visuallyHiddenCodePrefix">;
-    Input: Pick<InputProps, "clearButtonLabel">;
+    Input: Pick<InputProps, "loadingDescription" | "clearButtonLabel">;
     Label: Pick<LabelProps, "requiredIconLabel" | "helperButtonLabel">;
     NumericInput: Pick<NumericInputProps, "decimalSeparator" | "groupingStyle" | "groupSeparator">;
     Select: Pick<SelectProps, "searchPlaceholder" | "emptyMessage" | "optionsLabel" | "loadingOptionsLabel">;

package/dist/types/utils/combineAriaIds.d.ts

@@ -0,0 +1,2 @@
+/** Combines `aria` identifiers for usage in, for example, `aria-describedby`. */
+export declare function combineAriaIds(...args: unknown[]): string | undefined;

package/dist/types/utils/control.d.ts

@@ -12,6 +12,7 @@ export interface ControlContextValue {
     variant?: ControlVariant;
     status?: ControlStatus;
     disabled?: boolean;
+    loading?: boolean;
     readOnly?: boolean;
 }
 /** Control context. */

package/dist/types/utils/polymorphicTypes.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, ReactElement } from 'react';
+/** Properties of a polymorphic component. */
+export type PolymorphicProps<TAsAllowed extends ElementType, TAs extends TAsAllowed, TAsDefault extends TAsAllowed, TOwnProps> = TOwnProps & AsProp<TAsAllowed, TAs, TAsDefault> & Omit<ComponentPropsWithoutRef<TAs>, keyof TOwnProps | "as">;
+/** Reference type for a polymorphic component. */
+export type PolymorphicRef<TAs extends ElementType> = ComponentPropsWithRef<TAs>["ref"];
+/** Polymorphic component type supporting an `as` property. */
+export interface PolymorphicComponent<TAsAllowed extends ElementType, TAsDefault extends TAsAllowed, TOwnProps> {
+    (props: PolymorphicProps<TAsAllowed, TAsDefault, TAsDefault, TOwnProps> & {
+        ref?: PolymorphicRef<TAsDefault>;
+    }): ReactElement | null;
+    <TAs extends TAsAllowed>(props: PolymorphicProps<TAsAllowed, TAs, TAsDefault, TOwnProps> & {
+        ref?: PolymorphicRef<TAs>;
+    }): ReactElement | null;
+}
+/** `as` property for polymorphic components. */
+type AsProp<TAsAllowed extends ElementType, TAs extends TAsAllowed, TAsDefault extends TAsAllowed> = TAsDefault extends TAs ? {
+    /** Element to render the component as. */
+    as?: TAs;
+} : {
+    /** Element to render the component as. */
+    as: TAs;
+};
+export {};

package/dist/types/utils/setNativeProperty.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sets the native property of an HTML element in a way that bypasses React’s
+ * value tracker interference, meaning that we can then dispatch an event that
+ * React will handle.
+ *
+ * See: https://github.com/facebook/react/issues/10135
+ */
+export declare function setNativeProperty(element: HTMLElement, prop: string, value: unknown): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.6.5",
+  "version": "0.8.0",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",

package/scss/components/Checkbox/_Checkbox.scss

@@ -87,7 +87,7 @@
       @extend %#{$prefix}checkable__label--checked;
     }
 
-    #{$checkbox}:disabled ~ &-container > & {
+    #{$checkbox}:is(:disabled, [data-loading]) ~ &-container > & {
       @extend %#{$prefix}checkable__label--disabled;
     }
   }

package/scss/components/ControlAddon/_ControlAddon.scss

@@ -121,9 +121,9 @@
   & > .#{$prefix}icon {
     font-size: $control-addon-icon-font-size;
     filter: if(
-      $control-addon-text-shadow != null,
-      drop-shadow($control-addon-text-shadow),
-      null
+      sass($control-addon-text-shadow != null): drop-shadow(
+          $control-addon-text-shadow
+        )
     );
   }
 

package/scss/components/DropdownMenu/_DropdownMenu.scss

@@ -21,7 +21,7 @@
   :is(&__item, &__checkbox-item, &__radio-item)
     #{$menu-list-item-action}:not(a):not(:disabled):not([data-disabled=""]):not(
       [data-disabled="true"]
-    ) {
+    ):not([data-loading]) {
     cursor: $menu-item-button-cursor;
   }
 

package/scss/components/FieldGroup/_FieldGroup-variables.scss

@@ -13,10 +13,10 @@ $field-group-code-width: $control-code-width !default;
 $field-group-code-padding-y: spacing(1) !default;
 $field-group-code-padding-x: spacing(0.5) !default;
 $field-group-code-margin-x: spacing(2) !default;
-$field-group-code-font-size: var(--#{$prefix}font-size-sm) !default;
-$field-group-code-line-height: var(--#{$prefix}line-height-sm) !default;
+$field-group-code-font-size: $control-code-font-size !default;
+$field-group-code-line-height: $control-code-line-height !default;
 $field-group-code-font-weight: $font-weight-semibold !default;
-$field-group-code-border-radius: var(--#{$prefix}border-radius-sm) !default;
+$field-group-code-border-radius: $control-code-border-radius !default;
 $field-group-code-border-color: var(--#{$prefix}primary-a5) !default;
 $field-group-code-background-color: var(--#{$prefix}background-color) !default;
 $field-group-code-color: var(--#{$prefix}primary-11) !default;

package/scss/components/RadioGroup/_Radio.scss

@@ -27,7 +27,7 @@
       @extend %#{$prefix}checkable__label--checked;
     }
 
-    #{$radio}:disabled ~ &-container > & {
+    #{$radio}:is(:disabled, [data-loading]) ~ &-container > & {
       @extend %#{$prefix}checkable__label--disabled;
     }
   }

package/scss/components/Select/_Select-variables.scss

@@ -70,7 +70,7 @@ $select-option-text-transform: null !default;
 $select-option-indicator-font-size: var(--#{$prefix}font-size-sm) !default;
 
 // Popover
-$select-popover-min-width: 142px !default;
+$select-popover-min-width: 150px !default;
 
 // Variants
 $select-variants: $control-variants !default;

package/scss/components/Select/_Select.scss

@@ -141,7 +141,7 @@
 
   // Popover
   &__popover {
-    width: min-content;
+    width: fit-content;
     min-width: max(
       $select-popover-min-width,
       calc(var(--radix-popover-trigger-width) - $control-border-width * 2)

package/scss/scss/placeholders/checkable/_checkable.scss

@@ -139,11 +139,11 @@
 
   @include accessible-transition();
 
-  &:not(:disabled, [data-readonly]) {
+  &:not(:disabled, [data-loading], [data-readonly]) {
     cursor: pointer;
   }
 
-  &:disabled {
+  &:is(:disabled, [data-loading]) {
     cursor: $checkable-disabled-cursor;
     opacity: $checkable-disabled-opacity;
   }
@@ -283,7 +283,7 @@
     }
   }
 
-  &:active:not(:disabled, [data-readonly]) {
+  &:active:not(:disabled, [data-loading], [data-readonly]) {
     background-color: var(--#{$prefix}checkable-active-background-color);
 
     &[data-status] {

package/scss/scss/placeholders/control/_control.scss

@@ -58,7 +58,7 @@
     outline: 0;
   }
 
-  &:disabled {
+  &:is(:disabled, [data-loading]) {
     opacity: $control-disabled-opacity;
     cursor: $control-disabled-cursor;
   }