@ostack.tech/ui 0.7.0 → 0.8.0

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

@@ -69,7 +69,7 @@ export interface AlertProps extends ComponentPropsWithoutRef<"div"> {
  * ```tsx
  * import { Alert, AlertTitle } from "@ostack.tech/ui";
  *
- * function TermAndConditionsNotice {
+ * function TermsAndConditionsNotice {
  *   return (
  *     <Alert>
  *       <AlertTitle>Notice</AlertTitle>

package/dist/types/components/Alert/AlertTitle.d.ts

@@ -1,6 +1,10 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Element an alert title can be rendered as. */
+export type AlertTitleAs = "div" | "span" | "h2" | "h3" | "h4" | "h5" | "h6";
 /** Properties of the alert title component. */
-export interface AlertTitleProps extends ComponentPropsWithoutRef<"div"> {
+export type AlertTitleProps<TAs extends AlertTitleAs = "div"> = PolymorphicProps<AlertTitleAs, TAs, "div", AlertTitleOwnProps>;
+/** Own properties of the alert title component. */
+export interface AlertTitleOwnProps {
     /**
      * 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
@@ -9,4 +13,4 @@ export interface AlertTitleProps extends ComponentPropsWithoutRef<"div"> {
     asChild?: boolean;
 }
 /** Title of the alert. */
-export declare const AlertTitle: import('react').ForwardRefExoticComponent<AlertTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AlertTitle: PolymorphicComponent<AlertTitleAs, "div", AlertTitleOwnProps>;

package/dist/types/components/AlertDialog/AlertDialogTitle.d.ts

@@ -1,7 +1,12 @@
 import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Element an alert dialog title can be rendered as. */
+export type AlertDialogTitleAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span";
 /** Properties of the alert dialog title component. */
-export interface AlertDialogTitleProps extends ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> {
+export type AlertDialogTitleProps<TAs extends AlertDialogTitleAs = "h2"> = PolymorphicProps<AlertDialogTitleAs, TAs, "h2", AlertDialogTitleOwnProps>;
+/** Own properties of the alert dialog title component. */
+export interface AlertDialogTitleOwnProps extends Pick<ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>, "asChild"> {
 }
 /** Accessible title to be announced when the alert dialog is opened. */
-export declare const AlertDialogTitle: import('react').ForwardRefExoticComponent<AlertDialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDialogTitle: PolymorphicComponent<AlertDialogTitleAs, "h2", AlertDialogTitleOwnProps>;

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

@@ -1,7 +1,10 @@
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { AccentColor } from '../../utils/accent.ts';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
 import { Icon, IconProp } from '../Icon';
 import { Spinner } from '../Spinner';
+/** Elements a button can be rendered as. */
+export type ButtonAs = "button" | "a";
 /** Button variants. */
 export type ButtonVariant = "solid" | "subtle" | "outlined" | "ghost";
 /** Button colours. */
@@ -11,7 +14,9 @@ export type ButtonSize = "sm" | "md" | "lg" | "xl";
 /** Button's icon placement. */
 export type ButtonIconPlacement = "start" | "end";
 /** Properties of the button component. */
-export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+export type ButtonProps<TAs extends ButtonAs = "button"> = PolymorphicProps<ButtonAs, TAs, "button", ButtonOwnProps>;
+/** Own properties of the button component. */
+export interface ButtonOwnProps {
     /**
      * 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
@@ -133,4 +138,4 @@ export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
  * }
  * ```
  */
-export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Button: PolymorphicComponent<ButtonAs, "button", ButtonOwnProps>;

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

@@ -26,9 +26,9 @@ export interface CalendarProps extends Omit<DayPickerProps, "mode" | "selected"
     /** Properties to pass to the caption element. */
     captionProps?: ComponentPropsWithRef<"div">;
     /** Properties to pass to the previous button component. */
-    previousButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    previousButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     /** Properties to pass to the next button component. */
-    nextButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    nextButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     /** Properties to pass to the month select component. */
     monthSelectProps?: Omit<ComponentPropsWithRef<typeof Select>, "multiple" | "defaultValue" | "value">;
     /** Properties to pass to the year select component. */

package/dist/types/components/Card/CardTitle.d.ts

@@ -1,19 +1,16 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { HeadingLevel } from '../Heading';
-/** Properties of the card title component. */
-export interface CardTitleProps extends ComponentPropsWithoutRef<"h2"> {
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Elements a card title can be rendered as. */
+export type CardTitleAs = "div" | "span" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** Properties of the button component. */
+export type CardTitleProps<TAs extends CardTitleAs = "div"> = PolymorphicProps<CardTitleAs, TAs, "div", CardTitleOwnProps>;
+/** Own properties of the card title component. */
+export interface CardTitleOwnProps {
     /**
      * 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
      * element/component and change the underlying DOM node.
      */
     asChild?: boolean;
-    /**
-     * Heading level.
-     *
-     * @default 2
-     */
-    level?: HeadingLevel;
 }
 /** Title of the `Card` component. */
-export declare const CardTitle: import('react').ForwardRefExoticComponent<CardTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const CardTitle: PolymorphicComponent<CardTitleAs, "div", CardTitleOwnProps>;

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { IconButton } from '../IconButton';
 /** Properties of the close button component. */
-export interface CloseButtonProps extends Partial<ComponentPropsWithoutRef<typeof IconButton>> {
+export interface CloseButtonProps extends Partial<ComponentPropsWithoutRef<typeof IconButton<"button">>> {
 }
 /** Component rendering a “close” button. */
 export declare const CloseButton: import('react').ForwardRefExoticComponent<CloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/DataTable/DataTablePagination.d.ts

@@ -25,9 +25,9 @@ export interface DataTablePaginationProps extends ComponentPropsWithoutRef<"div"
      * Properties to pass to the previous page button (only relevant in paged
      * mode).
      */
-    previousPageButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    previousPageButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     /** Properties to pass to the next page button (only relevant in paged mode). */
-    nextPageButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    nextPageButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
 }
 /** Component used to provide pagination to the data table. */
 export declare const DataTablePagination: import('react').ForwardRefExoticComponent<DataTablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/DataTable/DataTableSelectionTrigger.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, Key, MouseEvent, ReactNode } from 'react';
 import { Button } from '../Button';
 /** Properties of the data table selection trigger component. */
-export interface DataTableSelectionTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Button>, "onClick"> {
+export interface DataTableSelectionTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Button<"button">>, "onClick"> {
     /**
      * Whether the component should preferably be aligned to the right. This only
      * has an effect when the component is nested directly under the `DataTable`.

package/dist/types/components/Dialog/DialogTitle.d.ts

@@ -1,7 +1,12 @@
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Element a dialog title can be rendered as. */
+export type DialogTitleAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span";
 /** Properties of the dialog title component. */
-export interface DialogTitleProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+export type DialogTitleProps<TAs extends DialogTitleAs = "h2"> = PolymorphicProps<DialogTitleAs, TAs, "h2", DialogTitleOwnProps>;
+/** Own properties of the dialog title component. */
+export interface DialogTitleOwnProps extends Pick<ComponentPropsWithoutRef<typeof DialogPrimitive.Title>, "asChild"> {
 }
 /** Accessible title to be announced when the dialog is opened. */
-export declare const DialogTitle: import('react').ForwardRefExoticComponent<DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const DialogTitle: PolymorphicComponent<DialogTitleAs, "h2", DialogTitleOwnProps>;

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

@@ -68,7 +68,7 @@ export interface ErrorBoundaryProps extends Pick<ComponentPropsWithoutRef<typeof
      * Properties to pass to the `IconButton` component used to reset the error
      * boundary.
      */
-    resetButtonProps?: ComponentPropsWithRef<typeof IconButton>;
+    resetButtonProps?: ComponentPropsWithRef<typeof IconButton<"button">>;
     children?: ReactNode;
 }
 /**

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

@@ -25,7 +25,7 @@ export interface FeedbackPopoverProps extends ComponentPropsWithoutRef<typeof Po
     /** Properties to pass to the element containing the button. */
     buttonContainerProps?: ComponentPropsWithRef<"div">;
     /** Properties to pass to the `IconButton` component. */
-    iconButtonProps?: Omit<ComponentPropsWithRef<typeof IconButton>, "size" | "icon" | "label">;
+    iconButtonProps?: Omit<ComponentPropsWithRef<typeof IconButton<"button">>, "size" | "icon" | "label">;
 }
 /**
  * Component used to provide feedback to a form control, where the feedback is

package/dist/types/components/FieldGroup/FieldGroupTitle.d.ts

@@ -1,19 +1,16 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { HeadingLevel } from '../Heading';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Element a field group title can be rendered as. */
+export type FieldGroupTitleAs = "div" | "span" | "label" | "h2" | "h3" | "h4" | "h5" | "h6";
 /** Properties of the field group title component. */
-export interface FieldGroupTitleProps extends ComponentPropsWithoutRef<"h2"> {
+export type FieldGroupTitleProps<TAs extends FieldGroupTitleAs = "div"> = PolymorphicProps<FieldGroupTitleAs, TAs, "div", FieldGroupTitleOwnProps>;
+/** Own properties of the field group title component. */
+export interface FieldGroupTitleOwnProps {
     /**
      * 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
      * element/component and change the underlying DOM node.
      */
     asChild?: boolean;
-    /**
-     * Heading level.
-     *
-     * @default 2
-     */
-    level?: HeadingLevel;
 }
 /** Component used to display the caption of a field group. */
-export declare const FieldGroupTitle: import('react').ForwardRefExoticComponent<FieldGroupTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const FieldGroupTitle: PolymorphicComponent<FieldGroupTitleAs, "div", FieldGroupTitleOwnProps>;

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

@@ -1,8 +1,12 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { PolymorphicComponent, PolymorphicProps } from '../../utils/polymorphicTypes.ts';
+/** Elements a heading can be rendered as. */
+export type HeadingAs = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "label";
 /** Heading levels. */
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 /** Properties of the heading component. */
-export interface HeadingProps extends ComponentPropsWithoutRef<`h${HeadingLevel}`> {
+export type HeadingProps<TAs extends HeadingAs = "h2"> = PolymorphicProps<HeadingAs, TAs, "h2", HeadingOwnProps>;
+/** Own properties of the heading component. */
+export interface HeadingOwnProps {
     /**
      * 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
@@ -10,9 +14,12 @@ export interface HeadingProps extends ComponentPropsWithoutRef<`h${HeadingLevel}
      */
     asChild?: boolean;
     /**
-     * Heading level. By default, if `asChild` is not provided, the level is used
-     * to determine which HTML element to render, so a level of `2` causes an
-     * `<h2>` element to be rendered.
+     * Heading level, the larger the level, the smaller the font-size (level `1`
+     * is largest, `6` smallest).
+     *
+     * By default, if `as` and `asChild` are not provided, the level is used to
+     * determine which HTML element to render, so a level of `2` causes a `<h2>`
+     * element to be rendered.
      *
      * @default 2
      */
@@ -31,4 +38,4 @@ export interface HeadingProps extends ComponentPropsWithoutRef<`h${HeadingLevel}
  * }
  * ```
  */
-export declare const Heading: import('react').ForwardRefExoticComponent<HeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const Heading: PolymorphicComponent<HeadingAs, "h2", HeadingOwnProps>;

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
@@ -144,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/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.
      *
@@ -84,11 +86,11 @@ export interface MenuListItemProps extends Omit<ComponentPropsWithoutRef<"li">,
      * @default start
      */
     iconPlacement?: MenuListIconPlacement;
-    /** 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/Select/Select.d.ts

@@ -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

@@ -77,6 +77,7 @@ 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';

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/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/package.json

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

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/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/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/popover/_popover.scss

@@ -42,14 +42,14 @@
   &__arrow {
     fill: $popover-arrow-color;
     filter: if(
-      $popover-arrow-border-width > 0,
-      drop-shadow(0 $popover-arrow-border-width 0 $popover-arrow-border-color),
-      null
+      sass($popover-arrow-border-width > 0): drop-shadow(
+          0 $popover-arrow-border-width 0 $popover-arrow-border-color
+        )
     );
     margin-top: if(
-      $popover-arrow-border-width > 0,
-      calc($popover-arrow-border-width * -1),
-      null
+      sass($popover-arrow-border-width > 0): calc(
+          $popover-arrow-border-width * -1
+        )
     );
 
     // XXX: Firefox doesn't seem to properly rotate the shadow at 180º
@@ -57,12 +57,10 @@
     @-moz-document url-prefix() {
       #{$popover}[data-side="bottom"] & {
         filter: if(
-          $popover-arrow-border-width > 0,
-          drop-shadow(
-            0 calc($popover-arrow-border-width * -1) 0
-              $popover-arrow-border-color
-          ),
-          null
+          sass($popover-arrow-border-width > 0): drop-shadow(
+              0 calc($popover-arrow-border-width * -1) 0
+                $popover-arrow-border-color
+            )
         );
       }
     }

package/scss/scss/utils/_breakpoints.scss

@@ -8,23 +8,22 @@
 // Minimum breakpoint width.
 @function breakpoint-min($size, $breakpoint-by-size: $breakpoint-by-size) {
   $min: map.get($breakpoint-by-size, $size);
-  @return if($min != 0, $min, null);
+  @return if(sass($min != 0): $min);
 }
 
 // Maximum breakpoint width (-0.02 to work around limitations of `-min`/`-max`
 // prefixes and 0.02 instead of 0.01 to work around a Safari rounding bug).
 @function breakpoint-max($size, $breakpoint-by-size: $breakpoint-by-size) {
   $max: map.get($breakpoint-by-size, $size);
-  @return if($max and $max > 0, $max - 0.02, null);
+  @return if(sass($max and $max > 0): $max - 0.02);
 }
 
 // Returns a blank string if smallest breakpoint, otherwise returns the name
 // with a dash in front.
 @function breakpoint-infix($size, $breakpoint-by-size: $breakpoint-by-size) {
   @return if(
-    breakpoint-min($size, $breakpoint-by-size) == null,
-    "",
-    "-#{$size}"
+    sass(breakpoint-min($size, $breakpoint-by-size) == null): "" ;
+      else: "-#{$size}"
   );
 }
 

package/scss/scss/utils/_css-color-functions.scss

@@ -1,15 +1,19 @@
 @function css-transparentize($color, $opacity) {
   @return if(
-    $color == null or $opacity == null,
-    null,
-    color-mix(in srgb, $color calc($opacity * 100%), transparent)
+    sass($color != null and $opacity != null): color-mix(
+        in srgb,
+        $color calc($opacity * 100%),
+        transparent
+      )
   );
 }
 
 @function css-lighten($color, $percentage) {
   @return if(
-    $color == null or $percentage == null,
-    null,
-    color-mix(in srgb, $color calc(100% - $percentage), #fff)
+    sass($color != null and $percentage != null): color-mix(
+        in srgb,
+        $color calc(100% - $percentage),
+        #fff
+      )
   );
 }

package/scss/scss/utils/_declare-var.scss

@@ -3,6 +3,6 @@
 // Declares a CSS variable when the values isn't `null`.
 @mixin declare-var($var, $value: null) {
   @if ($value != null and $value != NULL) {
-    #{$var}: #{if($value == "", "", meta.inspect($value))};
+    #{$var}: #{if(sass($value == ""): "" ; else: meta.inspect($value))};
   }
 }

package/scss/scss/utils/_maybe-important.scss

@@ -1,5 +1,5 @@
 // Returns the value with `!important` appended if it isn't `null`, or `null`
 // otherwise
 @function maybe-important($v) {
-  @return if($v == null, null, #{$v} !important);
+  @return if(sass($v != null): #{$v} !important);
 }