@aortl/admin-react 0.18.2 → 0.18.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +17 -1
  2. package/dist/Tabs.d.ts +11 -3
  3. package/dist/Tabs.d.ts.map +1 -1
  4. package/dist/admin.scoped.css +50 -14
  5. package/dist/index.cjs +8 -5
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.mjs +8 -5
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -4,6 +4,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
4
4
 
5
5
  ## [Unreleased]
6
6
 
7
+ ## [0.18.4] - 2026-06-29
8
+
9
+ ### Added
10
+
11
+ - `Tabs` `primary` prop (`.tabs-primary`) fills the active segment of a boxed segmented control with the primary color. (both)
12
+ - `.btn-group` members can be wrapped in `.indicator` to float a badge or status dot at a button's corner; the seam, rounding, and full-width/vertical sizing logic now drills through the wrapper. (css)
13
+
14
+ ## [0.18.3] - 2026-06-29
15
+
16
+ ### Added
17
+
18
+ - `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)
19
+ - `Tabs` `wrap` prop (`.tabs-wrap`) lets the list wrap onto new rows instead of overflowing, keeping each tab's label on one line. (both)
20
+
7
21
  ## [0.18.2] - 2026-06-29
8
22
 
9
23
  ### Added
@@ -91,12 +105,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
91
105
  - Make `primary` a high-contrast neutral and move blue to `info`. (both)
92
106
  - Use solid color fills for `Alert` and `Badge` status variants. (both)
93
107
 
94
- [Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.2...HEAD
108
+ [Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.4...HEAD
95
109
  [0.16.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.16.0...v0.16.1
96
110
  [0.16.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.1...v0.16.0
97
111
  [0.15.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.0...v0.15.1
98
112
  [0.15.0]: https://github.com/Digital-Udvikling/admin-design-system/releases/tag/v0.15.0
99
113
 
114
+ [0.18.4]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.3...v0.18.4
115
+ [0.18.3]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.2...v0.18.3
100
116
  [0.18.2]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.1...v0.18.2
101
117
  [0.18.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.18.0...v0.18.1
102
118
  [0.18.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.17.0...v0.18.0
package/dist/Tabs.d.ts CHANGED
@@ -1,17 +1,25 @@
1
1
  import { Tabs as BaseTabs } from '@base-ui/react/tabs';
2
2
  import { ComponentProps } from 'react';
3
+ import { IconProp } from './icon';
3
4
  export type TabsVariant = "bordered" | "boxed";
4
5
  export type TabsSize = "sm" | "md" | "lg";
5
6
  export interface TabsProps extends ComponentProps<typeof BaseTabs.Root> {
6
7
  variant?: TabsVariant;
7
8
  size?: TabsSize;
8
9
  fullWidth?: boolean;
10
+ /** Let the list wrap to multiple rows instead of overflowing; each tab stays on one line. */
11
+ wrap?: boolean;
12
+ /** Fill the active segment with the primary color. Only affects `variant="boxed"`. */
13
+ primary?: boolean;
9
14
  }
10
- declare function TabsRoot({ variant, size, fullWidth, className, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
15
+ declare function TabsRoot({ variant, size, fullWidth, wrap, primary, className, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
11
16
  export type TabsListProps = ComponentProps<typeof BaseTabs.List>;
12
17
  declare function TabsList({ className, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
13
- export type TabsTabProps = ComponentProps<typeof BaseTabs.Tab>;
14
- declare function TabsTab({ className, ...rest }: TabsTabProps): import("react/jsx-runtime").JSX.Element;
18
+ export interface TabsTabProps extends ComponentProps<typeof BaseTabs.Tab> {
19
+ /** Leading icon. Pass a component (`icon={IconLock}`) or an element. */
20
+ icon?: IconProp;
21
+ }
22
+ declare function TabsTab({ icon, className, children, ...rest }: TabsTabProps): import("react/jsx-runtime").JSX.Element;
15
23
  export type TabsPanelProps = ComponentProps<typeof BaseTabs.Panel>;
16
24
  declare function TabsPanel({ className, ...rest }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
17
25
  export declare const Tabs: typeof TabsRoot & {
package/dist/Tabs.d.ts.map CHANGED
@@ -1 +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"}
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;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;IACf,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,QAAQ,CAAC,EAChB,OAAoB,EACpB,IAAW,EACX,SAAiB,EACjB,IAAY,EACZ,OAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,2CAiBX;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 CHANGED
@@ -1934,11 +1934,11 @@
1934
1934
  :scope._ao-btn-group, :scope ._ao-btn-group {
1935
1935
  display: inline-flex;
1936
1936
  }
1937
- :scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn {
1937
+ :scope._ao-btn-group > ._ao-btn, :scope ._ao-btn-group > ._ao-btn, :scope._ao-btn-group > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group > ._ao-indicator > ._ao-btn {
1938
1938
  position: relative;
1939
1939
  border-radius: 0;
1940
1940
  }
1941
- :scope:is(._ao-btn-group > ._ao-btn):focus-visible, :scope :is(._ao-btn-group > ._ao-btn):focus-visible {
1941
+ :scope:is(._ao-btn-group > ._ao-btn,._ao-btn-group > ._ao-indicator > ._ao-btn):focus-visible, :scope :is(._ao-btn-group > ._ao-btn,._ao-btn-group > ._ao-indicator > ._ao-btn):focus-visible {
1942
1942
  z-index: 10;
1943
1943
  }
1944
1944
  :scope._ao-btn-group > ._ao-menu, :scope ._ao-btn-group > ._ao-menu {
@@ -1953,22 +1953,22 @@
1953
1953
  :scope._ao-btn-group > ._ao-menu > ._ao-menu-trigger, :scope ._ao-btn-group > ._ao-menu > ._ao-menu-trigger {
1954
1954
  border-radius: 0;
1955
1955
  }
1956
- :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) {
1956
+ :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) {
1957
1957
  margin-left: -1px;
1958
1958
  }
1959
- :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger {
1959
+ :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:first-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:first-child > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:first-child > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:first-child > ._ao-btn {
1960
1960
  border-top-left-radius: var(--radius-lg);
1961
1961
  border-bottom-left-radius: var(--radius-lg);
1962
1962
  }
1963
- :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger {
1963
+ :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:last-child, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:last-child > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:last-child > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:last-child > ._ao-btn {
1964
1964
  border-top-right-radius: var(--radius-lg);
1965
1965
  border-bottom-right-radius: var(--radius-lg);
1966
1966
  }
1967
- :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1967
+ :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn {
1968
1968
  border-left-color: currentColor;
1969
1969
  }
1970
1970
  @supports (color: color-mix(in lab, red, red)) {
1971
- :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1971
+ :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-btn:not(:first-child), :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group:not(._ao-btn-group-vertical) > ._ao-indicator:not(:first-child) > ._ao-btn {
1972
1972
  border-left-color: color-mix(in oklab, currentColor 25%, transparent);
1973
1973
  }
1974
1974
  }
@@ -1976,25 +1976,31 @@
1976
1976
  display: inline-flex;
1977
1977
  flex-direction: column;
1978
1978
  }
1979
- :scope._ao-btn-group-vertical > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-btn {
1979
+ :scope._ao-btn-group-vertical > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-btn, :scope._ao-btn-group-vertical > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator > ._ao-btn {
1980
1980
  justify-content: flex-start;
1981
1981
  }
1982
- :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) {
1982
+ :scope._ao-btn-group-vertical > ._ao-indicator, :scope ._ao-btn-group-vertical > ._ao-indicator {
1983
+ width: auto;
1984
+ }
1985
+ :scope._ao-btn-group-vertical > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator > ._ao-btn {
1986
+ width: 100%;
1987
+ }
1988
+ :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child), :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) {
1983
1989
  margin-top: -1px;
1984
1990
  }
1985
- :scope._ao-btn-group-vertical > ._ao-btn:first-child, :scope ._ao-btn-group-vertical > ._ao-btn:first-child, :scope._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger {
1991
+ :scope._ao-btn-group-vertical > ._ao-btn:first-child, :scope ._ao-btn-group-vertical > ._ao-btn:first-child, :scope._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:first-child > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:first-child > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:first-child > ._ao-btn {
1986
1992
  border-top-left-radius: var(--radius-lg);
1987
1993
  border-top-right-radius: var(--radius-lg);
1988
1994
  }
1989
- :scope._ao-btn-group-vertical > ._ao-btn:last-child, :scope ._ao-btn-group-vertical > ._ao-btn:last-child, :scope._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger {
1995
+ :scope._ao-btn-group-vertical > ._ao-btn:last-child, :scope ._ao-btn-group-vertical > ._ao-btn:last-child, :scope._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:last-child > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:last-child > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:last-child > ._ao-btn {
1990
1996
  border-bottom-right-radius: var(--radius-lg);
1991
1997
  border-bottom-left-radius: var(--radius-lg);
1992
1998
  }
1993
- :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
1999
+ :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn {
1994
2000
  border-top-color: currentColor;
1995
2001
  }
1996
2002
  @supports (color: color-mix(in lab, red, red)) {
1997
- :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger {
2003
+ :scope._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope ._ao-btn-group-vertical > ._ao-btn:not(:first-child), :scope._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope ._ao-btn-group-vertical > ._ao-menu:not(:first-child) > ._ao-menu-trigger, :scope._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn, :scope ._ao-btn-group-vertical > ._ao-indicator:not(:first-child) > ._ao-btn {
1998
2004
  border-top-color: color-mix(in oklab, currentColor 25%, transparent);
1999
2005
  }
2000
2006
  }
@@ -2002,9 +2008,12 @@
2002
2008
  display: flex;
2003
2009
  width: 100%;
2004
2010
  }
2005
- :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu {
2011
+ :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-btn, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-menu, :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator {
2006
2012
  flex: 1;
2007
2013
  }
2014
+ :scope._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator > ._ao-btn, :scope ._ao-btn-group-full-width:not(._ao-btn-group-vertical) > ._ao-indicator > ._ao-btn {
2015
+ width: 100%;
2016
+ }
2008
2017
  :scope._ao-btn-group-full-width._ao-btn-group-vertical, :scope ._ao-btn-group-full-width._ao-btn-group-vertical {
2009
2018
  width: 100%;
2010
2019
  }
@@ -4751,6 +4760,10 @@
4751
4760
  :scope._ao-tabs ._ao-tab > :is(i, svg), :scope ._ao-tabs ._ao-tab > :is(i, svg) {
4752
4761
  flex-shrink: 0;
4753
4762
  }
4763
+ :scope._ao-tabs ._ao-tab > svg, :scope ._ao-tabs ._ao-tab > svg {
4764
+ width: 1em;
4765
+ height: 1em;
4766
+ }
4754
4767
  :scope._ao-tabs ._ao-tab-input, :scope ._ao-tabs ._ao-tab-input {
4755
4768
  position: absolute;
4756
4769
  width: 1px;
@@ -4806,6 +4819,12 @@
4806
4819
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4807
4820
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4808
4821
  }
4822
+ :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab {
4823
+ background-color: var(--color-primary);
4824
+ color: var(--color-primary-content);
4825
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4826
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4827
+ }
4809
4828
  @supports (anchor-scope: --x) {
4810
4829
  :scope._ao-tabs ._ao-tab-list, :scope ._ao-tabs ._ao-tab-list {
4811
4830
  anchor-scope: --tab-thumb;
@@ -4855,6 +4874,17 @@
4855
4874
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4856
4875
  transition: top 180ms ease, right 180ms ease, bottom 180ms ease, left 180ms ease;
4857
4876
  }
4877
+ :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[data-selected], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab[aria-selected="true"], :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-input:checked + ._ao-tab {
4878
+ background-color: transparent;
4879
+ color: var(--color-primary-content);
4880
+ --tw-shadow: 0 0 #0000;
4881
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4882
+ }
4883
+ :scope._ao-tabs-boxed._ao-tabs-primary ._ao-tab-list::before, :scope ._ao-tabs-boxed._ao-tabs-primary ._ao-tab-list::before {
4884
+ background-color: var(--color-primary);
4885
+ --tw-shadow: 0 0 #0000;
4886
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4887
+ }
4858
4888
  }
4859
4889
  :scope._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list, :scope ._ao-tabs-full-width:not([data-orientation="vertical"]) ._ao-tab-list {
4860
4890
  display: flex;
@@ -4864,6 +4894,12 @@
4864
4894
  flex: 1;
4865
4895
  justify-content: center;
4866
4896
  }
4897
+ :scope._ao-tabs-wrap ._ao-tab-list, :scope ._ao-tabs-wrap ._ao-tab-list {
4898
+ flex-wrap: wrap;
4899
+ }
4900
+ :scope._ao-tabs-wrap ._ao-tab, :scope ._ao-tabs-wrap ._ao-tab {
4901
+ white-space: nowrap;
4902
+ }
4867
4903
  :scope._ao-tabs-sm ._ao-tab, :scope ._ao-tabs-sm ._ao-tab {
4868
4904
  height: calc(var(--spacing) * 7);
4869
4905
  padding-inline: calc(var(--spacing) * 2);
package/dist/index.cjs CHANGED
@@ -2352,13 +2352,15 @@ var Navbar = Object.assign(NavbarRoot, {
2352
2352
  });
2353
2353
  //#endregion
2354
2354
  //#region src/Tabs.tsx
2355
- function TabsRoot({ variant = "bordered", size = "md", fullWidth = false, className, ...rest }) {
2355
+ function TabsRoot({ variant = "bordered", size = "md", fullWidth = false, wrap = false, primary = false, className, ...rest }) {
2356
2356
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
2357
2357
  className: cn([
2358
2358
  "tabs",
2359
2359
  variant !== "bordered" && `tabs-${variant}`,
2360
2360
  size !== "md" && `tabs-${size}`,
2361
- fullWidth && "tabs-full-width"
2361
+ fullWidth && "tabs-full-width",
2362
+ wrap && "tabs-wrap",
2363
+ primary && "tabs-primary"
2362
2364
  ], className),
2363
2365
  ...rest
2364
2366
  });
@@ -2369,10 +2371,11 @@ function TabsList({ className, ...rest }) {
2369
2371
  ...rest
2370
2372
  });
2371
2373
  }
2372
- function TabsTab({ className, ...rest }) {
2373
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
2374
+ function TabsTab({ icon, className, children, ...rest }) {
2375
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_tabs.Tabs.Tab, {
2374
2376
  className: cn("tab", className),
2375
- ...rest
2377
+ ...rest,
2378
+ children: [renderIcon(icon), children]
2376
2379
  });
2377
2380
  }
2378
2381
  function TabsPanel({ className, ...rest }) {