@aortl/admin-react 0.18.2 → 0.18.3

package/CHANGELOG.md

@@ -4,6 +4,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.18.3] - 2026-06-29
+
+### Added
+
+- `Tabs.Tab` `icon` prop (leading glyph via `renderIcon`); tab SVG icons are pinned to the label size (`.tabs .tab > svg`), so non-Tabler sets (e.g. Heroicons) render uniformly. (both)
+- `Tabs` `wrap` prop (`.tabs-wrap`) lets the list wrap onto new rows instead of overflowing, keeping each tab's label on one line. (both)
+
 ## [0.18.2] - 2026-06-29
 
 ### Added
@@ -91,12 +98,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - Make `primary` a high-contrast neutral and move blue to `info`. (both)
 - Use solid color fills for `Alert` and `Badge` status variants. (both)
 
-[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.2...HEAD
+[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.3...HEAD
 [0.16.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.16.0...v0.16.1
 [0.16.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.1...v0.16.0
 [0.15.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.0...v0.15.1
 [0.15.0]: https://github.com/Digital-Udvikling/admin-design-system/releases/tag/v0.15.0
 
+[0.18.3]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.2...v0.18.3
 [0.18.2]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.1...v0.18.2
 [0.18.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.0...v0.18.1
 [0.18.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.17.0...v0.18.0

package/dist/Tabs.d.ts

@@ -1,17 +1,23 @@
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { ComponentProps } from 'react';
+import { IconProp } from './icon';
 export type TabsVariant = "bordered" | "boxed";
 export type TabsSize = "sm" | "md" | "lg";
 export interface TabsProps extends ComponentProps<typeof BaseTabs.Root> {
     variant?: TabsVariant;
     size?: TabsSize;
     fullWidth?: boolean;
+    /** Let the list wrap to multiple rows instead of overflowing; each tab stays on one line. */
+    wrap?: boolean;
 }
-declare function TabsRoot({ variant, size, fullWidth, className, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsRoot({ variant, size, fullWidth, wrap, className, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
 export type TabsListProps = ComponentProps<typeof BaseTabs.List>;
 declare function TabsList({ className, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
-export type TabsTabProps = ComponentProps<typeof BaseTabs.Tab>;
-declare function TabsTab({ className, ...rest }: TabsTabProps): import("react/jsx-runtime").JSX.Element;
+export interface TabsTabProps extends ComponentProps<typeof BaseTabs.Tab> {
+    /** Leading icon. Pass a component (`icon={IconLock}`) or an element. */
+    icon?: IconProp;
+}
+declare function TabsTab({ icon, className, children, ...rest }: TabsTabProps): import("react/jsx-runtime").JSX.Element;
 export type TabsPanelProps = ComponentProps<typeof BaseTabs.Panel>;
 declare function TabsPanel({ className, ...rest }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare const Tabs: typeof TabsRoot & {

package/dist/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC/C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC;IACrE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAoB,EACpB,IAAW,EACX,SAAiB,EACjB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,2CAeX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AAEjE,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;AAE/D,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAEpD;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEnE,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAExD;AAED,eAAO,MAAM,IAAI;;;;CAIf,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAC/C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC;IACrE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAoB,EACpB,IAAW,EACX,SAAiB,EACjB,IAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,2CAgBX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AAEjE,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC;IACvE,wEAAwE;IACxE,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,2CAOpE;AAED,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEnE,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAExD;AAED,eAAO,MAAM,IAAI;;;;CAIf,CAAC"}

package/dist/admin.scoped.css

@@ -4751,6 +4751,10 @@
 :scope._ao-tabs ._ao-tab > :is(i, svg), :scope ._ao-tabs ._ao-tab > :is(i, svg) {
     flex-shrink: 0;
   }
+:scope._ao-tabs ._ao-tab > svg, :scope ._ao-tabs ._ao-tab > svg {
+    width: 1em;
+    height: 1em;
+  }
 :scope._ao-tabs ._ao-tab-input, :scope ._ao-tabs ._ao-tab-input {
     position: absolute;
     width: 1px;
@@ -4864,6 +4868,12 @@
     flex: 1;
     justify-content: center;
   }
+:scope._ao-tabs-wrap ._ao-tab-list, :scope ._ao-tabs-wrap ._ao-tab-list {
+    flex-wrap: wrap;
+  }
+:scope._ao-tabs-wrap ._ao-tab, :scope ._ao-tabs-wrap ._ao-tab {
+    white-space: nowrap;
+  }
 :scope._ao-tabs-sm ._ao-tab, :scope ._ao-tabs-sm ._ao-tab {
     height: calc(var(--spacing) * 7);
     padding-inline: calc(var(--spacing) * 2);

package/dist/index.cjs

@@ -2352,13 +2352,14 @@ var Navbar = Object.assign(NavbarRoot, {
 });
 //#endregion
 //#region src/Tabs.tsx
-function TabsRoot({ variant = "bordered", size = "md", fullWidth = false, className, ...rest }) {
+function TabsRoot({ variant = "bordered", size = "md", fullWidth = false, wrap = false, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
 		className: cn([
 			"tabs",
 			variant !== "bordered" && `tabs-${variant}`,
 			size !== "md" && `tabs-${size}`,
-			fullWidth && "tabs-full-width"
+			fullWidth && "tabs-full-width",
+			wrap && "tabs-wrap"
 		], className),
 		...rest
 	});
@@ -2369,10 +2370,11 @@ function TabsList({ className, ...rest }) {
 		...rest
 	});
 }
-function TabsTab({ className, ...rest }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
+function TabsTab({ icon, className, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_tabs.Tabs.Tab, {
 		className: cn("tab", className),
-		...rest
+		...rest,
+		children: [renderIcon(icon), children]
 	});
 }
 function TabsPanel({ className, ...rest }) {