@kiefer-tek/sophea-design-system 0.15.6 → 0.15.7

package/dist/index.css

@@ -10904,6 +10904,34 @@ tbody tr:hover .sn-Table-module__td--jv9tA {
   transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
+/* SingleSidebar — full-height flush panel for the one-sidebar shell variant.
+   Width is set inline (collapsed/expanded px); a flex column so the consumer's
+   content fills and an `mt-auto` footer pins. The Root's overflow:hidden +
+   border-radius clip its outer corners; the right edge is square against Main
+   with a divider. */
+.sn-AppShell-module__singleSidebar--lYabJ {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+  border-inline-end: 1px solid var(--shell-divider);
+  /* Glass (default): frosted over the aurora — mirrors the rail glass. */
+  background: var(--shell-region-glass);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  transition: width 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Solid: opaque surface, no blur — a shade below the s2 widgets inside it so
+   they still read as elevated cards. */
+.sn-AppShell-module__singleSidebar--lYabJ[data-glass="false"] {
+  background: var(--shell-solid-sidebar, var(--surface-s1));
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
 @media (min-width: 768px) {
   .sn-AppShell-module__sidebar--9-Zb9 {
     width: var(--shell-sidebar-width, 15rem);

package/dist/index.js

@@ -8334,6 +8334,7 @@ const railItemIconOnly = "sn-AppShell-module__railItemIconOnly--SKMyQ";
 const railItemPill = "sn-AppShell-module__railItemPill--B67qF";
 const railItemIcon = "sn-AppShell-module__railItemIcon--pLfnP";
 const railItemLabel = "sn-AppShell-module__railItemLabel--1CFas";
+const singleSidebar = "sn-AppShell-module__singleSidebar--lYabJ";
 const sidebarInner = "sn-AppShell-module__sidebarInner--8gOCY";
 const sidebarToggle = "sn-AppShell-module__sidebarToggle--Pof9K";
 const resizeHandle = "sn-AppShell-module__resizeHandle--uB0bK";
@@ -8362,6 +8363,7 @@ const styles$h = {
   railItemPill,
   railItemIcon,
   railItemLabel,
+  singleSidebar,
   sidebarInner,
   sidebarToggle,
   resizeHandle,
@@ -8569,6 +8571,36 @@ const AppShellSidebar = forwardRef(function AppShellSidebar2({
   );
 });
 AppShellSidebar[ROLE] = "drawer";
+const AppShellSingleSidebar = forwardRef(
+  function AppShellSingleSidebar2({
+    glass = true,
+    collapsed,
+    expandedWidth = 232,
+    collapsedWidth = 64,
+    children,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) {
+    const ctx = useContext(AppShellContext);
+    const isCollapsed = collapsed ?? ctx?.sidebarFolded ?? false;
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        ref,
+        className: cx$1(styles$h.singleSidebar, className),
+        "data-glass": glass ? "true" : "false",
+        "data-collapsed": isCollapsed ? "true" : "false",
+        "aria-label": ariaLabel ?? "Sidebar",
+        style: { width: isCollapsed ? collapsedWidth : expandedWidth, ...style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+AppShellSingleSidebar[ROLE] = "drawer";
 const SidebarToggleIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", width: 16, height: 16, ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeWidth: 1.5, d: "M2.5 9h19M8 21.5V9" }),
   /* @__PURE__ */ jsx(
@@ -8643,6 +8675,7 @@ const AppShell = Object.assign(AppShellRoot, {
   Rail: AppShellRail,
   RailItem: AppShellRailItem,
   Sidebar: AppShellSidebar,
+  SingleSidebar: AppShellSingleSidebar,
   SidebarToggle: AppShellSidebarToggle,
   Main: AppShellMain,
   Header: AppShellHeader,
@@ -11614,6 +11647,7 @@ export {
   AppShellRoot,
   AppShellSidebar,
   AppShellSidebarToggle,
+  AppShellSingleSidebar,
   AspectRatio,
   Attachment,
   Avatar,