@apliteni/apliteni-ui 0.63.0 → 0.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -69,6 +69,20 @@ for a small inline control: `<Button size="xs" variant="ghost" icon="copy" iconO
 Its glyph is 13px and its icon-only target is 24×24px; labelled xs buttons use
 `--text-xs`. The other sizes keep 16px glyphs.
 
+`Button href="/reports"` renders a native link and forwards an anchor ref. Without
+`href`, it remains a native button. `leading={<VendorMark />}` puts decorative
+caller artwork before the label and takes precedence over `icon`; artwork must
+contain no focusable elements. Use visible children or an explicit accessible name.
+Disabled links leave the tab order; busy links keep focus. Both remove their href
+and block activation until enabled. Anchor attributes such as `target`, `rel`,
+and `download` pass through. The kit does not supply vendor artwork.
+
+A `className` you pass is added to the kit's classes rather than swapped for them,
+and the component's own `aria-busy`, `aria-disabled` and `data-btn-*` attributes win
+over anything you spread in, so a busy control cannot be made to read as idle. An
+icon-only control with no children, no `icon` and no label ships nameless on purpose:
+the gap then shows up in an accessibility check instead of reading as satisfied.
+
 `CommandPalette` renders the kit's `commandPalette()` markup, class for class, and imports the
 kit's ranking rather than repeating it — so a palette a server rendered and the same palette
 after a keystroke put the same row first. Two differences from the vanilla one follow from

package/react/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, ButtonHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode, ButtonHTMLAttributes, RefAttributes, ReactElement, AnchorHTMLAttributes, HTMLAttributes, RefObject, MouseEvent, ElementType, ComponentPropsWithoutRef, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 
 declare function Icon({ name }: {
     name: string;
@@ -21,10 +21,12 @@ declare const Switch: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<H
     label: string;
 } & react.RefAttributes<HTMLInputElement>>;
 
-type ButtonProps = {
+type ButtonOptions = {
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     icon?: string;
+    /** Decorative caller artwork, before the label; takes precedence over icon. */
+    leading?: ReactNode;
     iconRight?: string;
     iconOnly?: boolean;
     block?: boolean;
@@ -33,20 +35,22 @@ type ButtonProps = {
     /** Message after busy ends; an empty string leaves outcome announcements to the caller. */
     completionMessage?: string;
     children?: ReactNode;
-} & ButtonHTMLAttributes<HTMLButtonElement>;
-declare const Button: react.ForwardRefExoticComponent<{
-    variant?: "primary" | "secondary" | "ghost" | "danger";
-    size?: "xs" | "sm" | "md" | "lg";
-    icon?: string;
-    iconRight?: string;
-    iconOnly?: boolean;
-    block?: boolean;
-    /** In flight: keeps focus, blocks activation, announces progress, and shows dots. */
-    busy?: boolean;
-    /** Message after busy ends; an empty string leaves outcome announcements to the caller. */
-    completionMessage?: string;
-    children?: ReactNode;
-} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+};
+type NativeButtonProps = ButtonOptions & ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+};
+type ButtonLinkProps = ButtonOptions & AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    disabled?: boolean;
+};
+type ButtonProps = NativeButtonProps | ButtonLinkProps;
+type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
+declare const Button: {
+    (props: NativeButtonProps & RefAttributes<HTMLButtonElement>): ReactElement;
+    (props: ButtonLinkProps & RefAttributes<HTMLAnchorElement>): ReactElement;
+    (props: ButtonProps & RefAttributes<ButtonElement>): ReactElement;
+    displayName?: string;
+};
 
 declare function Badge({ variant, children }: {
     variant?: string;
@@ -728,4 +732,4 @@ declare const SidebarNav: react.ForwardRefExoticComponent<Omit<Omit<react.Detail
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };
+export { AppShell, type AppShellProps, type AppShellSection, BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonLinkProps, type ButtonProps, Callout, type CalloutProps, type CalloutVariant, Card, Checkbox, type CheckboxProps, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, Confirm, type ConfirmProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, EmptyState, type EmptyStateProps, type EmptyStateVariant, Field, type FieldControlProps, type FieldProps, FileField, type FileFieldProps, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, type NativeButtonProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, Pill, type PillProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, SelectField, type SelectFieldProps, SidebarNav, type SidebarNavBadge, type SidebarNavItem, type SidebarNavLeaf, type SidebarNavProps, type SidebarNavSection, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, Snippet, type SnippetProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, StatusDot, type StatusDotProps, Switch, type SwitchProps, THEME_INIT_SCRIPT, type TabItem, type TableSort, Tabs, type TabsProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, ThemeToggle, type ThemeToggleProps, Timeline, type TimelineEvent, type TimelineEventKind, type TimelineProps, Toast, type ToastNotice, type ToastProps, Tooltip, type TooltipProps, sortTableRows, useToast };

package/react/dist/index.js

@@ -80,6 +80,7 @@ var Button = forwardRef3(function Button2({
   variant = "secondary",
   size = "md",
   icon: icon6,
+  leading,
   iconRight,
   iconOnly,
   block,
@@ -87,7 +88,12 @@ var Button = forwardRef3(function Button2({
   completionMessage,
   children,
   type = "button",
+  href,
   disabled,
+  className,
+  tabIndex,
+  onAuxClick,
+  onAuxClickCapture,
   onClick,
   onClickCapture,
   onKeyDown,
@@ -97,7 +103,7 @@ var Button = forwardRef3(function Button2({
   ...rest
 }, forwardedRef) {
   const buttonRef = useRef(null);
-  useImperativeHandle(forwardedRef, () => buttonRef.current, []);
+  useImperativeHandle(forwardedRef, () => buttonRef.current, [href !== void 0]);
   const labelRef = useRef(null);
   const announcer = useRef(null);
   const hasBeenBusy = useRef(false);
@@ -122,35 +128,47 @@ var Button = forwardRef3(function Button2({
     previous.current = null;
   }, []);
   const blockActivation = (event) => {
-    if (!busy) return false;
+    if (!busy && !disabled) return false;
     event.preventDefault();
     event.stopPropagation();
     return true;
   };
-  const blockKey = (event) => (event.key === "Enter" || event.key === " ") && blockActivation(event);
+  const blockKey = (event) => (event.key === "Enter" || event.key === " " && href === void 0) && blockActivation(event);
   const cls = cx(
     "ui-btn",
     variant && `ui-btn--${variant}`,
     size !== "md" && `ui-btn--${size}`,
     block && "ui-btn--block",
-    iconOnly && "ui-btn--icon"
+    iconOnly && "ui-btn--icon",
+    className
   );
   const labelled = rest["aria-label"] != null || rest["aria-labelledby"] != null;
   const fallback = typeof children === "string" && children.trim() ? children.trim() : icon6;
   const named = iconOnly && !labelled && fallback ? { "aria-label": fallback, title: rest.title ?? fallback } : {};
+  const Root = href === void 0 ? "button" : "a";
   return /* @__PURE__ */ jsxs3(
-    "button",
+    Root,
     {
+      ...rest,
       ref: buttonRef,
       "data-btn-wired": "",
       "data-btn-ready": !busy && hasBeenBusy.current ? "" : void 0,
-      type,
+      type: href === void 0 ? type : void 0,
+      href: disabled || busy ? void 0 : href,
+      role: href !== void 0 ? "link" : rest.role,
+      tabIndex: href !== void 0 && disabled ? -1 : href !== void 0 ? tabIndex ?? 0 : tabIndex,
+      "data-btn-disabled": disabled ? "" : void 0,
       className: cls,
-      disabled,
+      disabled: href === void 0 ? disabled : void 0,
       "aria-disabled": disabled || busy ? true : void 0,
       "aria-busy": busy ? true : void 0,
-      ...rest,
       ...named,
+      onAuxClickCapture: (event) => {
+        if (!blockActivation(event)) onAuxClickCapture?.(event);
+      },
+      onAuxClick: (event) => {
+        if (!blockActivation(event)) onAuxClick?.(event);
+      },
       onClickCapture: (event) => {
         if (!blockActivation(event)) onClickCapture?.(event);
       },
@@ -170,7 +188,7 @@ var Button = forwardRef3(function Button2({
         if (!blockKey(event)) onKeyUp?.(event);
       },
       children: [
-        icon6 && /* @__PURE__ */ jsx4(Icon, { name: icon6 }),
+        leading != null ? /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: leading }) : icon6 && /* @__PURE__ */ jsx4(Icon, { name: icon6 }),
         !iconOnly && renderedChildren != null && /* @__PURE__ */ jsx4("span", { className: "ui-btn__label-slot", children: /* @__PURE__ */ jsx4("span", { className: "ui-btn__label", ref: labelRef, children: renderedChildren }) }),
         iconRight && /* @__PURE__ */ jsx4(Icon, { name: iconRight }),
         busy && /* @__PURE__ */ jsxs3("span", { className: "ui-btn__dots", "aria-hidden": "true", children: [