@sia-ui/react-web 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @sia-ui/react-web
 
+## 0.4.0
+
+### Minor Changes
+
+- Améliore la navigation et les réglages responsives : le `Drawer` conserve ses
+  classes internes avec une `className` personnalisée, anime correctement ses
+  quatre positions et expose une fermeture explicite dans `AppShell`. Uniformise
+  les scrollbars globales, allège les sous-menus du `Sidebar`, renforce le
+  contraste du `ToggleGroup`, ajoute `SettingsIcon` et fournit `AppShellBrand`
+  ainsi qu'`AppShellRailItem` pour adapter automatiquement icônes et libellés au
+  rail réduit.
+
+## 0.3.2
+
+### Patch Changes
+
+- Ajoute l’identité visuelle officielle de SIA UI et améliore la documentation publique, les changelogs et les ressources de contribution.
+- Updated dependencies
+  - @sia-ui/headless@0.3.2
+  - @sia-ui/react@0.3.2
+  - @sia-ui/tokens@0.3.2
+  - @sia-ui/utils@0.3.2
+
 ## 0.3.1
 
 ### Patch Changes

package/README.md

@@ -1,3 +1,5 @@
+<p align="center"><img src="https://beatjo.github.io/sia-ui-site/brand/sia-ui-logo.png" alt="SIA UI" width="320"></p>
+
 # @sia-ui/react-web
 
 Les composants SIA UI pour le DOM.
@@ -67,6 +69,40 @@ Le contenu ci-dessous reprend intégralement `CHANGELOG.md` pour rester visible
 
 # @sia-ui/react-web
 
+## 0.4.0
+
+### Minor Changes
+
+- Améliore la navigation et les réglages responsives : le `Drawer` conserve ses
+  classes internes avec une `className` personnalisée, anime correctement ses
+  quatre positions et expose une fermeture explicite dans `AppShell`. Uniformise
+  les scrollbars globales, allège les sous-menus du `Sidebar`, renforce le
+  contraste du `ToggleGroup`, ajoute `SettingsIcon` et fournit `AppShellBrand`
+  ainsi qu'`AppShellRailItem` pour adapter automatiquement icônes et libellés au
+  rail réduit.
+
+## 0.3.2
+
+### Patch Changes
+
+- Ajoute l’identité visuelle officielle de SIA UI et améliore la documentation publique, les changelogs et les ressources de contribution.
+- Updated dependencies
+  - @sia-ui/headless@0.3.2
+  - @sia-ui/react@0.3.2
+  - @sia-ui/tokens@0.3.2
+  - @sia-ui/utils@0.3.2
+
+## 0.3.1
+
+### Patch Changes
+
+- Expose public contribution flow on npm
+- Updated dependencies
+  - @sia-ui/headless@0.3.1
+  - @sia-ui/react@0.3.1
+  - @sia-ui/tokens@0.3.1
+  - @sia-ui/utils@0.3.1
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -135,6 +135,12 @@ function InfoIcon(props) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11v5M12 7.5h.01" })
   ] });
 }
+function SettingsIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" })
+  ] });
+}
 function EyeIcon(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(IconBase, { ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12Z" }),
@@ -283,6 +289,7 @@ var Drawer = React.forwardRef(
     closeOnOutsideClick = true,
     closeOnEsc = true,
     children,
+    className,
     ...rest
   }, ref) => {
     const {
@@ -342,6 +349,7 @@ var Drawer = React.forwardRef(
       "div",
       {
         className: "sia-drawer-root",
+        "data-state": state,
         style: { zIndex: zIndexRef.current ?? void 0 },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-drawer-overlay" }),
@@ -356,7 +364,8 @@ var Drawer = React.forwardRef(
                 "sia-drawer",
                 `sia-drawer-${position}`,
                 `sia-drawer-${size}`,
-                state === "closing" && "is-closing"
+                state === "closing" && "is-closing",
+                className
               ),
               ...rest,
               children
@@ -390,7 +399,7 @@ function DrawerClose() {
       className: "sia-drawer-close",
       onClick: ctx.close,
       "aria-label": "Fermer",
-      children: "\u2715"
+      children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { "aria-hidden": "true" })
     }
   );
 }
@@ -623,7 +632,14 @@ function Ligne({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-sidebar__icon", "aria-hidden": "true", children: item.icon }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-sidebar__label", children: item.label }),
-    item.badge !== void 0 && !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-sidebar__badge", children: item.badge }),
+    item.badge !== void 0 && !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "sia-sidebar__badge",
+        "data-sia-badge": typeof item.badge === "string" || typeof item.badge === "number" ? String(item.badge) : void 0,
+        children: item.badge
+      }
+    ),
     porteUnePastille && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-sidebar__dot", "aria-hidden": "true" }),
     aDesEnfants && !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -785,7 +801,14 @@ function NoeudRail(props) {
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...panelProps, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sia-sidebar-flyout__title", children: [
             item.label,
-            item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-sidebar__badge", children: item.badge })
+            item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "sia-sidebar__badge",
+                "data-sia-badge": typeof item.badge === "string" || typeof item.badge === "number" ? String(item.badge) : void 0,
+                children: item.badge
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-sidebar-flyout__body", children: enfants.map((enfant) => /* @__PURE__ */ jsxRuntime.jsx(
             Noeud,
@@ -891,6 +914,50 @@ var BottomTabs = React.memo(function BottomTabs2({
     )
   ] });
 });
+function AppShellBrand({
+  icon,
+  name,
+  description,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("sia-shell-brand", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-shell-brand__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sia-shell-brand__copy", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-shell-brand__name", children: name }),
+      description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-shell-brand__description", children: description })
+    ] })
+  ] });
+}
+function AppShellRailItem({
+  as = "div",
+  icon,
+  label,
+  className,
+  href,
+  type = "button",
+  disabled,
+  ...props
+}) {
+  const Component = as;
+  const elementProps = {
+    ...props,
+    ...as === "a" && href ? { href } : {},
+    ...as === "button" ? { type, disabled } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      className: utils.cn("sia-shell-rail-item", className),
+      "aria-label": props["aria-label"] ?? (as !== "div" ? label : void 0),
+      ...elementProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-shell-rail-item__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sia-shell-rail-item__label", children: label })
+      ]
+    }
+  );
+}
 function AppShell({
   nav,
   children,
@@ -1033,10 +1100,19 @@ function AppShell({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("main", { className: utils.cn("sia-shell__content", `sia-shell__content--${contentWidth}`), children: [
-            page && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-shell__page", children: page }),
-            children
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "main",
+            {
+              className: utils.cn(
+                "sia-shell__content",
+                `sia-shell__content--${contentWidth}`
+              ),
+              children: [
+                page && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sia-shell__page", children: page }),
+                children
+              ]
+            }
+          ),
           footer && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "sia-shell__footer", children: footer })
         ] }),
         compact && montrerOnglets && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1049,7 +1125,7 @@ function AppShell({
             ...montrerTiroir ? { onMore: () => setTiroirOuvert(true) } : {}
           }
         ),
-        compact && montrerTiroir && /* @__PURE__ */ jsxRuntime.jsx(
+        compact && montrerTiroir && /* @__PURE__ */ jsxRuntime.jsxs(
           Drawer,
           {
             open: tiroirOuvert,
@@ -1057,7 +1133,13 @@ function AppShell({
             position: side,
             size: "sm",
             className: "sia-shell__drawer",
-            children: barre
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Drawer.Header, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Drawer.Title, { children: "Navigation" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Drawer.Close, {})
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Drawer.Body, { children: barre })
+            ]
           }
         )
       ]
@@ -7140,6 +7222,8 @@ exports.Alert = Alert;
 exports.AlertCircleIcon = AlertCircleIcon;
 exports.AmountDisplay = AmountDisplay;
 exports.AppShell = AppShell;
+exports.AppShellBrand = AppShellBrand;
+exports.AppShellRailItem = AppShellRailItem;
 exports.ArrowRightIcon = ArrowRightIcon;
 exports.AspectRatio = AspectRatio;
 exports.AsyncState = AsyncState;
@@ -7248,6 +7332,7 @@ exports.ScrollArea = ScrollArea;
 exports.SearchIcon = SearchIcon;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
+exports.SettingsIcon = SettingsIcon;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;

package/dist/index.css

@@ -136,6 +136,36 @@
   --sia-elevation-overlay: 0 10px 30px rgb(15 23 42 / 0.12), 0 2px 8px rgb(15 23 42 / 0.06);
   --sia-elevation-modal: 0 24px 60px rgb(15 23 42 / 0.22);
 }
+:root {
+  --sia-scrollbar-size:.625rem;
+  --sia-scrollbar-thumb:color-mix(in srgb,var(--sia-muted) 52%,transparent);
+  --sia-scrollbar-thumb-hover:color-mix(in srgb,var(--sia-muted) 76%,transparent);
+}
+:where(*) {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sia-scrollbar-thumb) transparent;
+}
+:where(*)::-webkit-scrollbar {
+  width: var(--sia-scrollbar-size);
+  height: var(--sia-scrollbar-size);
+}
+:where(*)::-webkit-scrollbar-track,
+:where(*)::-webkit-scrollbar-corner {
+  background: transparent;
+}
+:where(*)::-webkit-scrollbar-thumb {
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  border: 2px solid transparent;
+  border-radius: var(--sia-radius-full,9999px);
+  background: var(--sia-scrollbar-thumb);
+  background-clip: content-box;
+}
+:where(*)::-webkit-scrollbar-thumb:hover {
+  border: 2px solid transparent;
+  background: var(--sia-scrollbar-thumb-hover);
+  background-clip: content-box;
+}
 .sia-radius--default {
   border-radius: var(--sia-radius);
 }
@@ -1226,45 +1256,58 @@
 .sia-drawer-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  animation: fadeIn var(--sia-duration-base) var(--sia-easing-entrance);
+  z-index: 0;
+  background: rgb(2 6 23 / .52);
+  animation: sia-drawer-fade-in var(--sia-duration-base) var(--sia-easing-entrance) both;
+}
+.sia-drawer-root[data-state=closing] .sia-drawer-overlay {
+  animation: sia-drawer-fade-out var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 .sia-drawer {
   position: absolute;
-  background: var(--sia-color-white);
+  z-index: 1;
+  color: var(--sia-foreground, #0f172a);
+  background: var(--sia-background, #fff);
+  border: 1px solid var(--sia-border, #e2e8f0);
   display: flex;
   flex-direction: column;
-  width: var(--sia-drawer-width);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  width: min(var(--sia-drawer-width), calc(100vw - 2rem));
+  overflow: hidden;
+  isolation: isolate;
+  box-shadow: 0 20px 50px rgb(2 6 23 / .24);
   will-change: transform;
 }
 .sia-drawer-right {
   right: 0;
   top: 0;
   height: 100%;
-  animation: slideInRight var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-right var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 .sia-drawer-left {
   left: 0;
   top: 0;
   height: 100%;
-  animation: slideInLeft var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-left var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 .sia-drawer-top {
   top: 0;
   left: 0;
   right: 0;
-  height: auto;
+  width: 100%;
+  max-width: 100%;
+  max-height: min(80vh, 48rem);
   --sia-drawer-width: 100% !important;
-  animation: slideInTop var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-top var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 .sia-drawer-bottom {
   bottom: 0;
   left: 0;
   right: 0;
-  height: auto;
+  width: 100%;
+  max-width: 100%;
+  max-height: min(80vh, 48rem);
   --sia-drawer-width: 100% !important;
-  animation: slideInBottom var(--sia-duration-slow) var(--sia-easing-entrance);
+  animation: sia-drawer-in-bottom var(--sia-duration-slow) var(--sia-easing-entrance) both;
 }
 .sia-drawer-sm {
   --sia-drawer-width: 320px;
@@ -1281,13 +1324,14 @@
 .sia-drawer-header,
 .sia-drawer-footer {
   padding: 16px;
-  border-bottom: 1px solid var(--sia-color-border);
+  border-bottom: 1px solid var(--sia-border, #e2e8f0);
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .sia-drawer-footer {
-  border-top: 1px solid var(--sia-color-border);
+  border-top: 1px solid var(--sia-border, #e2e8f0);
+  border-bottom: 0;
   margin-top: auto;
 }
 .sia-drawer-body {
@@ -1295,29 +1339,62 @@
   overflow-y: auto;
 }
 .sia-drawer-title {
+  margin: 0;
   font-size: 1.1rem;
   font-weight: 600;
 }
 .sia-drawer-close {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
   margin-left: auto;
-  background: none;
-  border: none;
+  padding: 0;
+  color: var(--sia-muted, #64748b);
+  background: transparent;
+  border: 0;
+  border-radius: var(--sia-radius, .375rem);
   cursor: pointer;
-  font-size: 1.2rem;
+}
+.sia-drawer-close:hover {
+  color: var(--sia-foreground,#0f172a);
+  background: var(--sia-surface,#f8fafc);
+}
+.sia-drawer-close:focus-visible {
+  outline: 2px solid var(--sia-primary,#2563eb);
+  outline-offset: 2px;
+}
+.sia-drawer-close svg {
+  width: 1.125rem;
+  height: 1.125rem;
 }
 .sia-drawer-right.is-closing {
-  animation: slideOutRight var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-right var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 .sia-drawer-left.is-closing {
-  animation: slideOutLeft var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-left var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 .sia-drawer-top.is-closing {
-  animation: slideOutTop var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-top var(--sia-duration-base) var(--sia-easing-exit) both;
 }
 .sia-drawer-bottom.is-closing {
-  animation: slideOutBottom var(--sia-duration-base) var(--sia-easing-exit) forwards;
+  animation: sia-drawer-out-bottom var(--sia-duration-base) var(--sia-easing-exit) both;
+}
+@keyframes sia-drawer-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes sia-drawer-fade-out {
+  to {
+    opacity: 0;
+  }
 }
-@keyframes slideInRight {
+@keyframes sia-drawer-in-right {
   from {
     transform: translateX(100%);
   }
@@ -1325,7 +1402,7 @@
     transform: translateX(0);
   }
 }
-@keyframes slideInLeft {
+@keyframes sia-drawer-in-left {
   from {
     transform: translateX(-100%);
   }
@@ -1333,7 +1410,7 @@
     transform: translateX(0);
   }
 }
-@keyframes slideInTop {
+@keyframes sia-drawer-in-top {
   from {
     transform: translateY(-100%);
   }
@@ -1341,7 +1418,7 @@
     transform: translateY(0);
   }
 }
-@keyframes slideInBottom {
+@keyframes sia-drawer-in-bottom {
   from {
     transform: translateY(100%);
   }
@@ -1349,22 +1426,22 @@
     transform: translateY(0);
   }
 }
-@keyframes slideOutRight {
+@keyframes sia-drawer-out-right {
   to {
     transform: translateX(100%);
   }
 }
-@keyframes slideOutLeft {
+@keyframes sia-drawer-out-left {
   to {
     transform: translateX(-100%);
   }
 }
-@keyframes slideOutTop {
+@keyframes sia-drawer-out-top {
   to {
     transform: translateY(-100%);
   }
 }
-@keyframes slideOutBottom {
+@keyframes sia-drawer-out-bottom {
   to {
     transform: translateY(100%);
   }
@@ -1388,10 +1465,12 @@
 .sia-sidebar__body {
   flex: 1;
   min-height: 0;
+  padding-inline-end: .375rem;
   overflow-y: auto;
   display: grid;
   gap: .125rem;
   align-content: start;
+  scrollbar-gutter: stable;
 }
 .sia-sidebar__header,
 .sia-sidebar__footer {
@@ -1524,15 +1603,6 @@
 .sia-sidebar__sub {
   position: relative;
 }
-.sia-sidebar__sub::before {
-  content: "";
-  position: absolute;
-  top: .375rem;
-  bottom: .375rem;
-  left: 1.25rem;
-  width: 1px;
-  background: var(--sia-border);
-}
 .sia-sidebar--collapsed .sia-sidebar__item {
   justify-content: center;
   padding-inline: .5rem;
@@ -1599,9 +1669,6 @@
   display: grid;
   gap: .125rem;
 }
-.sia-sidebar-flyout .sia-sidebar__sub::before {
-  display: none;
-}
 .sia-sidebar-flyout .sia-sidebar__item--child {
   padding-left: calc(.625rem + var(--sia-sidebar-depth, 1) * .6rem);
 }
@@ -1698,6 +1765,95 @@
   background: transparent;
   padding: .5rem;
 }
+.sia-shell-brand,
+.sia-shell-rail-item {
+  display: flex;
+  align-items: center;
+  gap: .625rem;
+  min-width: 0;
+}
+.sia-shell-brand {
+  padding: .25rem;
+}
+.sia-shell-brand__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+}
+.sia-shell-brand__icon > img,
+.sia-shell-brand__icon > svg {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.sia-shell-brand__copy {
+  min-width: 0;
+}
+.sia-shell-brand__name,
+.sia-shell-brand__description {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sia-shell-brand__name {
+  font-weight: 700;
+}
+.sia-shell-brand__description {
+  margin-top: .1rem;
+  color: var(--sia-muted);
+  font-size: .72rem;
+}
+.sia-shell-rail-item {
+  width: 100%;
+  padding: .375rem;
+  border: 0;
+  border-radius: var(--sia-radius);
+  background: transparent;
+  color: var(--sia-muted);
+  font: inherit;
+  font-size: .75rem;
+  text-decoration: none;
+}
+.sia-shell-rail-item:is(button, a) {
+  cursor: pointer;
+}
+.sia-shell-rail-item:is(button, a):hover {
+  background: var(--sia-surface-raised, var(--sia-surface));
+  color: var(--sia-foreground);
+}
+.sia-shell-rail-item:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+.sia-shell-rail-item:is(button, a):focus-visible {
+  outline: 2px solid var(--sia-primary);
+  outline-offset: 2px;
+}
+.sia-shell-rail-item__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.sia-shell-rail-item__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-collapsed] .sia-shell-brand,
+[data-collapsed] .sia-shell-rail-item {
+  justify-content: center;
+  gap: 0;
+}
+[data-collapsed] .sia-shell-brand__copy,
+[data-collapsed] .sia-shell-rail-item__label {
+  display: none;
+}
 .sia-shell__main {
   display: flex;
   flex-direction: column;
@@ -1780,6 +1936,12 @@
 .sia-shell--with-tabs .sia-shell__main {
   padding-bottom: calc(var(--sia-shell-tabs) + env(safe-area-inset-bottom, 0px));
 }
+.sia-shell__drawer .sia-drawer-body {
+  flex: 1;
+  min-height: 0;
+  padding: .5rem;
+  overflow: hidden;
+}
 .sia-shell__drawer .sia-sidebar {
   height: 100%;
 }
@@ -6312,9 +6474,10 @@
   --sia-toggle-color: var(--sia-primary);
   display: inline-flex;
   padding: .2rem;
-  border: 1px solid var(--sia-border);
+  border: 1px solid color-mix(in srgb, var(--sia-muted) 28%, var(--sia-border));
   border-radius: calc(var(--sia-radius) + 2px);
-  background: var(--sia-surface);
+  background: color-mix(in srgb, var(--sia-muted) 12%, var(--sia-background));
+  box-shadow: inset 0 1px 2px rgb(15 23 42 / .05);
 }
 .sia-toggle-group__item {
   position: relative;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ReactElement, RefObject, ImgHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, Key, TextareaHTMLAttributes, ForwardRefExoticComponent, RefAttributes, SVGProps, CSSProperties, PropsWithChildren } from 'react';
+import { ReactNode, ReactElement, HTMLAttributes, RefObject, ImgHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, Key, TextareaHTMLAttributes, ForwardRefExoticComponent, RefAttributes, SVGProps, CSSProperties, PropsWithChildren } from 'react';
 import { ComponentTone, ComponentSize } from '@sia-ui/tokens';
 import * as _sia_ui_headless from '@sia-ui/headless';
 import { PermissionRule, Placement, SliderValue, FormAdapter, FormValidator, TableQueryStorage, TableQueryState, TableQuery, SessionStore, SessionState, ToastPlacement, ToastId, ToastOptions } from '@sia-ui/headless';
@@ -256,6 +256,34 @@ type AppShellCollapsible = "icon" | "offcanvas" | false;
  */
 type AppShellMobileNav = "drawer" | "tabs" | "both";
 type AppShellContentWidth = "wide" | "narrow" | "full";
+interface AppShellBrandProps extends HTMLAttributes<HTMLDivElement> {
+    /** Symbole conservé lorsque la navigation devient un rail. */
+    icon: ReactNode;
+    /** Nom du produit, masqué automatiquement dans le rail. */
+    name: ReactNode;
+    /** Ligne secondaire facultative, masquée avec le nom. */
+    description?: ReactNode;
+}
+/**
+ * Identité de produit adaptée au rail de l'`AppShell`.
+ *
+ * L'application fournit le symbole et le texte une seule fois. Le composant
+ * masque sa copie dès que son parent reçoit `data-collapsed`.
+ */
+declare function AppShellBrand({ icon, name, description, className, ...props }: AppShellBrandProps): react_jsx_runtime.JSX.Element;
+interface AppShellRailItemProps extends HTMLAttributes<HTMLElement> {
+    /** Élément rendu : contenu simple, action ou lien. */
+    as?: "div" | "button" | "a";
+    /** Symbole toujours visible dans le rail. */
+    icon: ReactNode;
+    /** Libellé masqué visuellement dans le rail et conservé comme nom accessible. */
+    label: string;
+    href?: string;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+}
+/** Contenu icône + libellé qui s'adapte automatiquement au rail. */
+declare function AppShellRailItem({ as, icon, label, className, href, type, disabled, ...props }: AppShellRailItemProps): react_jsx_runtime.JSX.Element;
 interface AppShellProps {
     nav: SidebarEntry[];
     children: ReactNode;
@@ -295,8 +323,8 @@ interface AppShellProps {
     /**
      * En tête de barre latérale : logo, nom du produit, sélecteur d'entité.
      *
-     * Reçoit `data-collapsed` en mode rail, comme `sidebarFooter` : sans quoi
-     * un nom de produit écrit en toutes lettres déborde des quatre rem du rail.
+     * `AppShellBrand` masque son texte automatiquement dans le rail. Un contenu
+     * entièrement personnalisé reçoit toujours `data-collapsed` sur son parent.
      */
     brand?: ReactNode;
     /**
@@ -304,8 +332,8 @@ interface AppShellProps {
      *
      * C'est la place de la déconnexion et des réglages du compte — ce qui sort
      * de l'application, par opposition à l'en-tête, réservé à ce qui agit sur
-     * l'écran courant. Reçoit `data-collapsed` en mode rail, de quoi masquer un
-     * libellé sans changer de composant.
+     * l'écran courant. `AppShellRailItem` masque son libellé automatiquement ;
+     * un contenu personnalisé peut encore lire `data-collapsed` sur son parent.
      */
     sidebarFooter?: ReactNode;
     /** La barre du haut : recherche, notifications, avatar de compte. */
@@ -2550,6 +2578,7 @@ declare function TrashIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function UploadIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function AlertCircleIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function InfoIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function SettingsIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function EyeIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function EyeOffIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 
@@ -3397,4 +3426,4 @@ interface YearPickerProps {
  */
 declare function YearPicker({ value, defaultValue, min, max, onValueChange, className }: YearPickerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KpiGrid, type KpiGridProps, Label, type LabelProps, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, AppShellBrand, type AppShellBrandProps, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, AppShellRailItem, type AppShellRailItemProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KpiGrid, type KpiGridProps, Label, type LabelProps, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, SettingsIcon, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ReactElement, RefObject, ImgHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, Key, TextareaHTMLAttributes, ForwardRefExoticComponent, RefAttributes, SVGProps, CSSProperties, PropsWithChildren } from 'react';
+import { ReactNode, ReactElement, HTMLAttributes, RefObject, ImgHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, Key, TextareaHTMLAttributes, ForwardRefExoticComponent, RefAttributes, SVGProps, CSSProperties, PropsWithChildren } from 'react';
 import { ComponentTone, ComponentSize } from '@sia-ui/tokens';
 import * as _sia_ui_headless from '@sia-ui/headless';
 import { PermissionRule, Placement, SliderValue, FormAdapter, FormValidator, TableQueryStorage, TableQueryState, TableQuery, SessionStore, SessionState, ToastPlacement, ToastId, ToastOptions } from '@sia-ui/headless';
@@ -256,6 +256,34 @@ type AppShellCollapsible = "icon" | "offcanvas" | false;
  */
 type AppShellMobileNav = "drawer" | "tabs" | "both";
 type AppShellContentWidth = "wide" | "narrow" | "full";
+interface AppShellBrandProps extends HTMLAttributes<HTMLDivElement> {
+    /** Symbole conservé lorsque la navigation devient un rail. */
+    icon: ReactNode;
+    /** Nom du produit, masqué automatiquement dans le rail. */
+    name: ReactNode;
+    /** Ligne secondaire facultative, masquée avec le nom. */
+    description?: ReactNode;
+}
+/**
+ * Identité de produit adaptée au rail de l'`AppShell`.
+ *
+ * L'application fournit le symbole et le texte une seule fois. Le composant
+ * masque sa copie dès que son parent reçoit `data-collapsed`.
+ */
+declare function AppShellBrand({ icon, name, description, className, ...props }: AppShellBrandProps): react_jsx_runtime.JSX.Element;
+interface AppShellRailItemProps extends HTMLAttributes<HTMLElement> {
+    /** Élément rendu : contenu simple, action ou lien. */
+    as?: "div" | "button" | "a";
+    /** Symbole toujours visible dans le rail. */
+    icon: ReactNode;
+    /** Libellé masqué visuellement dans le rail et conservé comme nom accessible. */
+    label: string;
+    href?: string;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+}
+/** Contenu icône + libellé qui s'adapte automatiquement au rail. */
+declare function AppShellRailItem({ as, icon, label, className, href, type, disabled, ...props }: AppShellRailItemProps): react_jsx_runtime.JSX.Element;
 interface AppShellProps {
     nav: SidebarEntry[];
     children: ReactNode;
@@ -295,8 +323,8 @@ interface AppShellProps {
     /**
      * En tête de barre latérale : logo, nom du produit, sélecteur d'entité.
      *
-     * Reçoit `data-collapsed` en mode rail, comme `sidebarFooter` : sans quoi
-     * un nom de produit écrit en toutes lettres déborde des quatre rem du rail.
+     * `AppShellBrand` masque son texte automatiquement dans le rail. Un contenu
+     * entièrement personnalisé reçoit toujours `data-collapsed` sur son parent.
      */
     brand?: ReactNode;
     /**
@@ -304,8 +332,8 @@ interface AppShellProps {
      *
      * C'est la place de la déconnexion et des réglages du compte — ce qui sort
      * de l'application, par opposition à l'en-tête, réservé à ce qui agit sur
-     * l'écran courant. Reçoit `data-collapsed` en mode rail, de quoi masquer un
-     * libellé sans changer de composant.
+     * l'écran courant. `AppShellRailItem` masque son libellé automatiquement ;
+     * un contenu personnalisé peut encore lire `data-collapsed` sur son parent.
      */
     sidebarFooter?: ReactNode;
     /** La barre du haut : recherche, notifications, avatar de compte. */
@@ -2550,6 +2578,7 @@ declare function TrashIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function UploadIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function AlertCircleIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function InfoIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function SettingsIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function EyeIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 declare function EyeOffIcon(props: IconProps): react_jsx_runtime.JSX.Element;
 
@@ -3397,4 +3426,4 @@ interface YearPickerProps {
  */
 declare function YearPicker({ value, defaultValue, min, max, onValueChange, className }: YearPickerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KpiGrid, type KpiGridProps, Label, type LabelProps, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, AlertCircleIcon, type AlertProps, AmountDisplay, type AmountDisplayProps, AppShell, AppShellBrand, type AppShellBrandProps, type AppShellCollapsible, type AppShellContentWidth, type AppShellMobileNav, type AppShellProps, AppShellRailItem, type AppShellRailItemProps, ArrowRightIcon, AspectRatio, type AspectRatioProps, AsyncState, type AsyncStateProps, type AuditEvent, AuditMeta, type AuditMetaProps, AuthLayout, type AuthLayoutProps, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, type AvatarTint, type AvatarVariant, Badge, type BadgeProps, BottomTabs, type BottomTabsProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarDay, type CalendarEvent, CalendarIcon, type CalendarMode, type CalendarProps, type CalendarRangeValue, Can, type CanProps, Card, CardBody, CardFooter, CardHeader, Chart, type ChartProps, type ChartSeries, CheckIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, type CollapseProps, ColorPicker, type ColorPickerProps, type ColumnCardRole, type CommandItem, CommandPalette, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, Container, ContextMenu, type ContextMenuProps, Countdown, type CountdownProps, type CrudActionOptions, type CrudCreateOptions, type CrudDialogOptions, type CrudDialogState, CrudDialogs, CrudPage, type CrudPageProps, CurrencyInput, type CurrencyInputProps, DEFAULT_COUNTRIES, DataTable, type DataTableColumn, type DataTableProps, type DataTableView, DatePicker, type DatePickerProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, DateTimePicker, type DateTimePickerProps, type DateTimeValue, type DescriptionItem, Descriptions, type DescriptionsProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, type DrawerComponent, DrawerFooter, DrawerHeader, type DrawerPosition, type DrawerProps, type DrawerRef, type DrawerSize, DrawerTitle, DropdownMenu, type DropdownMenuProps, DurationDisplay, type DurationDisplayProps, EmptyState, type EmptyStateProps, EntityMeta, type EntityMetaProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, EyeIcon, EyeOffIcon, Field, type FieldBindingLike, type FieldProps, type FieldStatus, type FieldType, type FieldValue, FileUpload, type FileUploadProps, FiltersBar, type FiltersBarProps, Form, type FormEntry, Field as FormField, type FormFieldConfig, type FormFieldGroup, type FieldProps as FormFieldProps, type FormProps, type FormShape, Heading, type HeadingProps, HoverCard, type HoverCardProps, type IDrawerProps, type ILabelProps, type ITooltipProps, type ITooltipVariant, IconButton, type IconButtonProps, ImageUpload, type ImageUploadProps, InfoIcon, InlineCode, Input, InputNumber, type InputNumberProps, type InputProps, JsonEditor, type JsonEditorProps, KpiGrid, type KpiGridProps, Label, type LabelProps, MarkdownEditor, type MarkdownEditorProps, type MenuEntry, type MenuItem, type MenuLabel, MenuList, type MenuListProps, type MenuSeparator, MiniCalendar, MinusIcon, Modal, type ModalProps, MonthPicker, type MonthPickerProps, MoreHorizontalIcon, MultiSelect, type MultiSelectProps, OtpInput, type OtpInputProps, Overlay, type OverlayPlacement, type OverlayProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PasswordStrength, PermissionGate, type PermissionGateProps, type PhoneCountry, PhoneInput, type PhoneInputProps, PlusIcon, Popover, type PopoverProps, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ReferenceOption, ReferenceSelect, type ReferenceSelectProps, RelativeTime, type RelativeTimeProps, RequireSession, type RequireSessionProps, ResizablePanel, type ResizablePanelProps, type ResourceDefinition, type ResourceField, RichTextEditor, type RichTextEditorProps, type RowAction, ScrollArea, type ScrollAreaProps, SearchIcon, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, SettingsIcon, Sidebar, type SidebarEntry, type SidebarItem, type SidebarProps, type SidebarRenderLink, type SidebarSection, type SidebarState, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderRangeValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, StarIcon, StatCard, type StatCardProps, Statistic, type StatisticProps, type StepItem, type StepStatus, Steps, type StepsProps, Switch, type SwitchProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TagsInput, type TagsInputProps, Text, type TextProps, Textarea, type TextareaProps, type TimeParts, TimePicker, type TimePickerProps, TimeRangePicker, type TimeRangePickerProps, type TimeRangeValue, Timeline, type TimelineItem, type TimelineProps, Timer, type TimerProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, Tour, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, TrashIcon, Tree, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, UnsavedChangesGuard, type UnsavedChangesGuardProps, UploadIcon, type UseDataTableQueryOptions, WeekPicker, type WeekPickerProps, XIcon, YearPicker, type YearPickerProps, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };

package/dist/index.js

@@ -115,6 +115,12 @@ function InfoIcon(props) {
     /* @__PURE__ */ jsx("path", { d: "M12 11v5M12 7.5h.01" })
   ] });
 }
+function SettingsIcon(props) {
+  return /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" })
+  ] });
+}
 function EyeIcon(props) {
   return /* @__PURE__ */ jsxs(IconBase, { ...props, children: [
     /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-6.5 10-6.5S22 12 22 12s-3.5 6.5-10 6.5S2 12 2 12Z" }),
@@ -263,6 +269,7 @@ var Drawer = forwardRef(
     closeOnOutsideClick = true,
     closeOnEsc = true,
     children,
+    className,
     ...rest
   }, ref) => {
     const {
@@ -322,6 +329,7 @@ var Drawer = forwardRef(
       "div",
       {
         className: "sia-drawer-root",
+        "data-state": state,
         style: { zIndex: zIndexRef.current ?? void 0 },
         children: [
           /* @__PURE__ */ jsx("div", { className: "sia-drawer-overlay" }),
@@ -336,7 +344,8 @@ var Drawer = forwardRef(
                 "sia-drawer",
                 `sia-drawer-${position}`,
                 `sia-drawer-${size}`,
-                state === "closing" && "is-closing"
+                state === "closing" && "is-closing",
+                className
               ),
               ...rest,
               children
@@ -370,7 +379,7 @@ function DrawerClose() {
       className: "sia-drawer-close",
       onClick: ctx.close,
       "aria-label": "Fermer",
-      children: "\u2715"
+      children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
     }
   );
 }
@@ -603,7 +612,14 @@ function Ligne({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     item.icon && /* @__PURE__ */ jsx("span", { className: "sia-sidebar__icon", "aria-hidden": "true", children: item.icon }),
     /* @__PURE__ */ jsx("span", { className: "sia-sidebar__label", children: item.label }),
-    item.badge !== void 0 && !collapsed && /* @__PURE__ */ jsx("span", { className: "sia-sidebar__badge", children: item.badge }),
+    item.badge !== void 0 && !collapsed && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "sia-sidebar__badge",
+        "data-sia-badge": typeof item.badge === "string" || typeof item.badge === "number" ? String(item.badge) : void 0,
+        children: item.badge
+      }
+    ),
     porteUnePastille && /* @__PURE__ */ jsx("span", { className: "sia-sidebar__dot", "aria-hidden": "true" }),
     aDesEnfants && !collapsed && /* @__PURE__ */ jsx(
       "span",
@@ -765,7 +781,14 @@ function NoeudRail(props) {
         children: /* @__PURE__ */ jsxs("div", { ...panelProps, children: [
           /* @__PURE__ */ jsxs("div", { className: "sia-sidebar-flyout__title", children: [
             item.label,
-            item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "sia-sidebar__badge", children: item.badge })
+            item.badge !== void 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "sia-sidebar__badge",
+                "data-sia-badge": typeof item.badge === "string" || typeof item.badge === "number" ? String(item.badge) : void 0,
+                children: item.badge
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: "sia-sidebar-flyout__body", children: enfants.map((enfant) => /* @__PURE__ */ jsx(
             Noeud,
@@ -871,6 +894,50 @@ var BottomTabs = memo(function BottomTabs2({
     )
   ] });
 });
+function AppShellBrand({
+  icon,
+  name,
+  description,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("sia-shell-brand", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "sia-shell-brand__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "sia-shell-brand__copy", children: [
+      /* @__PURE__ */ jsx("span", { className: "sia-shell-brand__name", children: name }),
+      description !== void 0 && /* @__PURE__ */ jsx("span", { className: "sia-shell-brand__description", children: description })
+    ] })
+  ] });
+}
+function AppShellRailItem({
+  as = "div",
+  icon,
+  label,
+  className,
+  href,
+  type = "button",
+  disabled,
+  ...props
+}) {
+  const Component = as;
+  const elementProps = {
+    ...props,
+    ...as === "a" && href ? { href } : {},
+    ...as === "button" ? { type, disabled } : {}
+  };
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      className: cn("sia-shell-rail-item", className),
+      "aria-label": props["aria-label"] ?? (as !== "div" ? label : void 0),
+      ...elementProps,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sia-shell-rail-item__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "sia-shell-rail-item__label", children: label })
+      ]
+    }
+  );
+}
 function AppShell({
   nav,
   children,
@@ -1013,10 +1080,19 @@ function AppShell({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("main", { className: cn("sia-shell__content", `sia-shell__content--${contentWidth}`), children: [
-            page && /* @__PURE__ */ jsx("div", { className: "sia-shell__page", children: page }),
-            children
-          ] }),
+          /* @__PURE__ */ jsxs(
+            "main",
+            {
+              className: cn(
+                "sia-shell__content",
+                `sia-shell__content--${contentWidth}`
+              ),
+              children: [
+                page && /* @__PURE__ */ jsx("div", { className: "sia-shell__page", children: page }),
+                children
+              ]
+            }
+          ),
           footer && /* @__PURE__ */ jsx("footer", { className: "sia-shell__footer", children: footer })
         ] }),
         compact && montrerOnglets && /* @__PURE__ */ jsx(
@@ -1029,7 +1105,7 @@ function AppShell({
             ...montrerTiroir ? { onMore: () => setTiroirOuvert(true) } : {}
           }
         ),
-        compact && montrerTiroir && /* @__PURE__ */ jsx(
+        compact && montrerTiroir && /* @__PURE__ */ jsxs(
           Drawer,
           {
             open: tiroirOuvert,
@@ -1037,7 +1113,13 @@ function AppShell({
             position: side,
             size: "sm",
             className: "sia-shell__drawer",
-            children: barre
+            children: [
+              /* @__PURE__ */ jsxs(Drawer.Header, { children: [
+                /* @__PURE__ */ jsx(Drawer.Title, { children: "Navigation" }),
+                /* @__PURE__ */ jsx(Drawer.Close, {})
+              ] }),
+              /* @__PURE__ */ jsx(Drawer.Body, { children: barre })
+            ]
           }
         )
       ]
@@ -7107,4 +7189,4 @@ function YearPicker({ value, defaultValue = (/* @__PURE__ */ new Date()).getFull
   return /* @__PURE__ */ jsx("select", { className: cn("sia-year-picker", className), value, defaultValue: value === void 0 ? defaultValue : void 0, onChange: (event) => onValueChange?.(Number(event.target.value)), children: years.map((year) => /* @__PURE__ */ jsx("option", { value: year, children: year }, year)) });
 }
 
-export { Accordion, Alert, AlertCircleIcon, AmountDisplay, AppShell, ArrowRightIcon, AspectRatio, AsyncState, AuditMeta, AuthLayout, Autocomplete, Avatar, AvatarGroup, Badge, BottomTabs, Breadcrumb, Button, Calendar, CalendarIcon, Can, Card, CardBody, CardFooter, CardHeader, Chart, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, ColorPicker, CommandPalette, ConfirmDialog, Container, ContextMenu, Countdown, CrudDialogs, CrudPage, CurrencyInput, DEFAULT_COUNTRIES, DataTable, DatePicker, DateRangeFilter, DateRangePicker, DateTimePicker, Descriptions, Divider, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DropdownMenu, DurationDisplay, EmptyState, EntityMeta, ErrorState, EventCalendar, EyeIcon, EyeOffIcon, Field, FileUpload, FiltersBar, Form, Field as FormField, Heading, HoverCard, IconButton, ImageUpload, InfoIcon, InlineCode, Input, InputNumber, JsonEditor, KpiGrid, Label, MarkdownEditor, MenuList, MiniCalendar, MinusIcon, Modal, MonthPicker, MoreHorizontalIcon, MultiSelect, OtpInput, Overlay, PageHeader, Pagination, PasswordInput, PermissionGate, PhoneInput, PlusIcon, Popover, Progress, QRCode, Radio, RadioButton, RadioGroup, Rating, ReferenceSelect, RelativeTime, RequireSession, ResizablePanel, RichTextEditor, ScrollArea, SearchIcon, SearchInput, Select, Sidebar, Skeleton, Slider, Sparkline, Spinner, Stack, StarIcon, StatCard, Statistic, Steps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, Text, Textarea, TimePicker, TimeRangePicker, Timeline, Timer, ToastProvider, Toaster, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TrashIcon, Tree, TreeSelect, UnsavedChangesGuard, UploadIcon, WeekPicker, XIcon, YearPicker, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };
+export { Accordion, Alert, AlertCircleIcon, AmountDisplay, AppShell, AppShellBrand, AppShellRailItem, ArrowRightIcon, AspectRatio, AsyncState, AuditMeta, AuthLayout, Autocomplete, Avatar, AvatarGroup, Badge, BottomTabs, Breadcrumb, Button, Calendar, CalendarIcon, Can, Card, CardBody, CardFooter, CardHeader, Chart, CheckIcon, Checkbox, CheckboxGroup, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, Collapse, ColorPicker, CommandPalette, ConfirmDialog, Container, ContextMenu, Countdown, CrudDialogs, CrudPage, CurrencyInput, DEFAULT_COUNTRIES, DataTable, DatePicker, DateRangeFilter, DateRangePicker, DateTimePicker, Descriptions, Divider, Drawer, DrawerBody, DrawerClose, DrawerFooter, DrawerHeader, DrawerTitle, DropdownMenu, DurationDisplay, EmptyState, EntityMeta, ErrorState, EventCalendar, EyeIcon, EyeOffIcon, Field, FileUpload, FiltersBar, Form, Field as FormField, Heading, HoverCard, IconButton, ImageUpload, InfoIcon, InlineCode, Input, InputNumber, JsonEditor, KpiGrid, Label, MarkdownEditor, MenuList, MiniCalendar, MinusIcon, Modal, MonthPicker, MoreHorizontalIcon, MultiSelect, OtpInput, Overlay, PageHeader, Pagination, PasswordInput, PermissionGate, PhoneInput, PlusIcon, Popover, Progress, QRCode, Radio, RadioButton, RadioGroup, Rating, ReferenceSelect, RelativeTime, RequireSession, ResizablePanel, RichTextEditor, ScrollArea, SearchIcon, SearchInput, Select, SettingsIcon, Sidebar, Skeleton, Slider, Sparkline, Spinner, Stack, StarIcon, StatCard, Statistic, Steps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, Text, Textarea, TimePicker, TimeRangePicker, Timeline, Timer, ToastProvider, Toaster, Toggle, ToggleGroup, Tooltip, Tour, Transfer, TrashIcon, Tree, TreeSelect, UnsavedChangesGuard, UploadIcon, WeekPicker, XIcon, YearPicker, confirmUnsavedNavigation, createUrlTableStorage, defineResource, formatDuration, formatTimeValue, initialsOf, parseTimeValue, resourceColumns, resourceDefaults, resourceDetailColumns, resourceFormFields, resourcePermissions, resourceRowKey, resourceSearchKeys, resourceValidator, tintForName, useDataTableQuery, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia-ui/react-web",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "DOM implementation of the SIA UI component contracts.",
   "keywords": [
     "sia-ui",
@@ -45,10 +45,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sia-ui/headless": "0.3.1",
-    "@sia-ui/react": "0.3.1",
-    "@sia-ui/tokens": "0.3.1",
-    "@sia-ui/utils": "0.3.1"
+    "@sia-ui/headless": "0.3.2",
+    "@sia-ui/tokens": "0.3.2",
+    "@sia-ui/utils": "0.3.2",
+    "@sia-ui/react": "0.3.2"
   },
   "peerDependencies": {
     "react": ">=18.2.0",
@@ -67,7 +67,7 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16",
-    "@sia-ui/api": "0.3.1"
+    "@sia-ui/api": "0.3.2"
   },
   "scripts": {
     "build": "node scripts/build-theme.mjs --check && tsup",