@conscia-labs/design-system 0.2.0 → 0.3.0

package/README.md

@@ -270,6 +270,54 @@ export function ProductShell({
 }
 ```
 
+### Sidebar variants and semantic surfaces
+
+`AppSidebar` keeps the historical dark treatment by default. Consumers that
+want the sidebar to follow the application appearance can opt into the
+refreshed hierarchy with `variant="auto"`; `variant="light"` is available for
+an explicitly light sidebar.
+
+```tsx
+<AppShell>
+  <AppSidebar variant="auto">
+    <AppSidebarHeader>
+      <ProductIdentity label="Conscia" description="Administration" />
+    </AppSidebarHeader>
+    <AppSidebarContent>{navigation}</AppSidebarContent>
+    <AppSidebarFooter>{accountMenu}</AppSidebarFooter>
+  </AppSidebar>
+</AppShell>
+```
+
+The default is intentionally backwards compatible. The sidebar scope exposes
+reusable semantic aliases for its canvas, header, content, hover, active,
+search, footer, text, icon, group label, count, border, and focus-ring roles.
+Use the generated utilities such as `bg-sidebar-canvas`,
+`bg-sidebar-hover`, `text-sidebar-primary-text`, and
+`text-sidebar-metadata-text` in shared or application-owned compositions.
+Legacy aliases including `bg-sidebar`, `bg-sidebar-accent`, and
+`text-sidebar-foreground` remain supported.
+
+`SidebarSearch` owns only the trigger, expanded field, Escape handling, and
+focus handoff. Applications provide the query value and filtering behavior.
+`NavigationGroup` accepts an optional `count`; application-owned group labels
+can still be supplied as arbitrary React nodes. Routing, conversation rows,
+row actions, account menus, permissions, and appearance controls remain
+application-owned.
+
+For migration, replace a consuming application's light-only `--sidebar-*`
+root override with `variant="auto"` on its shared `AppSidebar`. Remove
+descendant opacity and background overrides as each shell adopts the semantic
+aliases. Keep product-specific selectors only where they encode behavior or
+content rather than shared sidebar presentation.
+
+The ownership boundary is:
+
+| Shared design system | Application-owned |
+| --- | --- |
+| Sidebar variant tokens, surface hierarchy, geometry, responsive drawer, focus states, active/hover/disabled styling, tooltips, and search affordance behavior | Routes, permissions, navigation data, query/filter state, conversation or inventory data, row actions, account/profile menus, sign-out, and product-specific persistence keys |
+| `NavigationGroup` keyboard expansion and `SidebarNavigation` collapsed flyouts | Group labels/content, link destinations, active-route calculation, and business-specific empty states |
+
 ## Choosing the right component
 
 ### Table or DataTable?

package/dist/{card-DqFHjLjm.d.ts → card-BFUHJgV-.d.ts}

@@ -11,6 +11,8 @@ declare function Button({ className, variant, size, asChild, type, ...props }: R
     asChild?: boolean;
 }): React.JSX.Element;
 
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+
 declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
 
 declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -19,4 +21,4 @@ declare function CardTitle({ className, ...props }: React.ComponentProps<"div">)
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 
-export { Button as B, Card as C, Separator as S, CardContent as a, CardDescription as b, CardHeader as c, CardTitle as d, buttonVariants as e };
+export { Button as B, Card as C, Input as I, Separator as S, CardContent as a, CardDescription as b, CardHeader as c, CardTitle as d, buttonVariants as e };

package/dist/{chunk-5MGPU2JE.js → chunk-6VZDLHRF.js}

@@ -25,6 +25,7 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuTrigger,
+  Input,
   Select,
   SelectContent,
   SelectItem,
@@ -51,7 +52,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
-} from "./chunk-YHPZ5CQU.js";
+} from "./chunk-HLND6FZS.js";
 import {
   cn
 } from "./chunk-JU5DQXFC.js";
@@ -366,7 +367,7 @@ function DetailBackLink({ label, className, ...props }) {
 // src/patterns/app-shell.tsx
 import * as React2 from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { PanelLeftIcon } from "lucide-react";
+import { PanelLeftIcon, Search, X } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "conscia_sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 30;
@@ -504,7 +505,7 @@ function AppShell({
       suppressHydrationWarning: true,
       className: cn(
         "group/shell min-h-svh bg-canvas text-foreground",
-        "[--ds-app-sidebar-width:16rem] [--ds-app-sidebar-width-mobile:18rem] data-[sidebar-state=collapsed]:[--ds-app-sidebar-width:3.5rem]",
+        "[--ds-app-sidebar-width:var(--ds-sidebar-width)] [--ds-app-sidebar-width-mobile:var(--ds-sidebar-width-mobile)] data-[sidebar-state=collapsed]:[--ds-app-sidebar-width:3.5rem]",
         className
       ),
       style,
@@ -515,6 +516,7 @@ function AppShell({
 }
 function AppSidebar({
   side = "left",
+  variant = "dark",
   className,
   children,
   title = "Application navigation",
@@ -530,7 +532,8 @@ function AppSidebar({
       SheetContent,
       {
         side,
-        className: "w-72 border-sidebar-border bg-sidebar p-0 text-sidebar-foreground [&>[data-slot=sheet-close]]:right-3 [&>[data-slot=sheet-close]]:top-3 [&>[data-slot=sheet-close]]:text-sidebar-foreground/64 [&>[data-slot=sheet-close]]:hover:text-sidebar-foreground",
+        "data-sidebar-variant": variant,
+        className: "w-[var(--ds-sidebar-width-mobile)] border-sidebar-border bg-sidebar-canvas p-0 text-sidebar-primary-text [&>[data-slot=sheet-close]]:right-3 [&>[data-slot=sheet-close]]:top-3 [&>[data-slot=sheet-close]]:text-sidebar-secondary-text [&>[data-slot=sheet-close]]:hover:text-sidebar-primary-text",
         children: [
           /* @__PURE__ */ jsxs4(SheetHeader, { className: "sr-only", children: [
             /* @__PURE__ */ jsx5(SheetTitle, { children: title }),
@@ -545,8 +548,9 @@ function AppSidebar({
       {
         "data-slot": "app-sidebar",
         "data-side": side,
+        "data-sidebar-variant": variant,
         className: cn(
-          "fixed inset-y-0 z-20 hidden w-[var(--ds-app-sidebar-width)] shrink-0 flex-col border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-linear lg:flex",
+          "fixed inset-y-0 z-20 hidden w-[var(--ds-app-sidebar-width)] shrink-0 flex-col border-sidebar-border bg-sidebar-canvas text-sidebar-primary-text transition-[width] duration-200 ease-linear lg:flex",
           side === "left" ? "left-0 border-r" : "right-0 border-l",
           "group-data-[sidebar-state=collapsed]/shell:w-[var(--ds-app-sidebar-width)]",
           className
@@ -566,7 +570,7 @@ function AppSidebarHeader({
     {
       "data-slot": "app-sidebar-header",
       className: cn(
-        "flex min-h-14 shrink-0 items-center border-b border-sidebar-border px-3",
+        "flex min-h-[var(--ds-sidebar-header-height)] min-w-0 shrink-0 items-center overflow-hidden border-b border-sidebar-border bg-sidebar-header px-3",
         className
       ),
       ...props
@@ -582,7 +586,7 @@ function AppSidebarContent({
     {
       "data-slot": "app-sidebar-content",
       className: cn(
-        "flex min-h-0 flex-1 flex-col gap-[var(--ds-space-control)] overflow-y-auto px-2.5 py-3",
+        "flex min-h-0 min-w-0 flex-1 flex-col gap-[var(--ds-sidebar-group-gap)] overflow-x-hidden overflow-y-auto bg-sidebar-content px-[var(--ds-sidebar-content-padding-x)] py-[var(--ds-sidebar-content-padding-y)]",
         className
       ),
       ...props
@@ -598,7 +602,7 @@ function AppSidebarFooter({
     {
       "data-slot": "app-sidebar-footer",
       className: cn(
-        "mt-auto flex shrink-0 flex-col gap-2 border-t border-sidebar-border p-2.5",
+        "mt-auto flex min-w-0 shrink-0 flex-col gap-2 overflow-hidden border-t border-sidebar-border bg-sidebar-footer p-[var(--ds-sidebar-footer-padding)]",
         className
       ),
       ...props
@@ -617,10 +621,10 @@ function ProductIdentity({
       "data-slot": "product-identity",
       className: cn("flex min-w-0 items-center gap-2", className),
       children: [
-        icon ? /* @__PURE__ */ jsx5("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-[var(--ds-radius-control)] bg-sidebar-accent text-sidebar-foreground", children: icon }) : null,
+        icon ? /* @__PURE__ */ jsx5("div", { className: "flex size-7 shrink-0 items-center justify-center rounded-[var(--ds-radius-control)] bg-sidebar-hover text-sidebar-icon", children: icon }) : null,
         /* @__PURE__ */ jsxs4("div", { className: "min-w-0 group-data-[sidebar-state=collapsed]/shell:hidden", children: [
-          /* @__PURE__ */ jsx5("div", { className: "truncate text-sm font-semibold leading-5 text-sidebar-foreground", children: label }),
-          description ? /* @__PURE__ */ jsx5("div", { className: "truncate text-[var(--ds-metadata)] leading-4 text-sidebar-foreground/62", children: description }) : null
+          /* @__PURE__ */ jsx5("div", { className: "truncate text-sm font-semibold leading-5 text-sidebar-primary-text", children: label }),
+          description ? /* @__PURE__ */ jsx5("div", { className: "truncate text-[var(--ds-metadata)] leading-4 text-sidebar-metadata-text", children: description }) : null
         ] })
       ]
     }
@@ -641,6 +645,7 @@ function SidebarSeparator({
 }
 function NavigationGroup({
   label,
+  count,
   children,
   className
 }) {
@@ -650,7 +655,17 @@ function NavigationGroup({
       "data-slot": "navigation-group",
       className: cn("flex min-w-0 flex-col gap-1", className),
       children: [
-        label ? /* @__PURE__ */ jsx5("div", { className: "px-2 pb-1 pt-2 text-[0.6875rem] font-medium uppercase tracking-normal text-sidebar-foreground/52 group-data-[sidebar-state=collapsed]/shell:hidden", children: label }) : null,
+        label ? /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            "data-slot": "navigation-group-label",
+            className: "flex min-h-6 items-center gap-2 px-2 pb-1 pt-2 text-[length:var(--ds-sidebar-group-label-size)] font-semibold uppercase leading-5 tracking-[0.08em] text-sidebar-group-label group-data-[sidebar-state=collapsed]/shell:hidden",
+            children: [
+              label,
+              count !== void 0 ? /* @__PURE__ */ jsx5("span", { className: "ml-auto shrink-0 text-[length:var(--ds-metadata)] font-medium normal-case tracking-normal text-sidebar-group-count", children: count }) : null
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ jsx5("div", { className: "flex min-w-0 flex-col gap-1", children })
       ]
     }
@@ -658,13 +673,13 @@ function NavigationGroup({
 }
 function navigationItemClasses(active) {
   return cn(
-    "flex h-11 min-w-0 items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sm font-medium text-sidebar-foreground/78 outline-none transition-colors duration-150 lg:h-[var(--ds-sidebar-item-height)]",
-    "hover:bg-sidebar-accent hover:text-sidebar-foreground",
-    "focus-visible:ring-[3px] focus-visible:ring-ring/35",
-    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "flex min-h-[var(--ds-sidebar-item-height-touch)] min-w-0 cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sm font-medium text-sidebar-secondary-text outline-none transition-colors duration-150 lg:h-[var(--ds-sidebar-item-height)] lg:min-h-0",
+    "hover:bg-sidebar-hover hover:text-sidebar-primary-text",
+    "focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
     "group-data-[sidebar-state=collapsed]/shell:justify-center group-data-[sidebar-state=collapsed]/shell:px-0",
-    "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75]",
-    active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_2px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground"
+    "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75] [&>svg]:text-sidebar-icon",
+    active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_3px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground"
   );
 }
 function NavigationItem({
@@ -718,10 +733,10 @@ function NavigationSubItem({
       "data-slot": "navigation-sub-item",
       "data-active": active ? "true" : void 0,
       className: cn(
-        "flex h-11 min-w-0 items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sm text-sidebar-foreground/72 outline-none transition-colors duration-150 lg:h-[calc(var(--ds-sidebar-item-height)-0.25rem)]",
-        "hover:bg-sidebar-accent hover:text-sidebar-foreground focus-visible:ring-[3px] focus-visible:ring-ring/35",
-        "group-data-[sidebar-state=collapsed]/shell:hidden [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75]",
-        active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_2px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground",
+        "flex min-h-[var(--ds-sidebar-item-height-touch)] min-w-0 cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-sm text-sidebar-secondary-text outline-none transition-colors duration-150 lg:h-[calc(var(--ds-sidebar-item-height)-0.25rem)] lg:min-h-0",
+        "hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring",
+        "group-data-[sidebar-state=collapsed]/shell:hidden [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.75] [&>svg]:text-sidebar-icon",
+        active && "bg-sidebar-active text-sidebar-active-foreground shadow-[inset_3px_0_0_var(--sidebar-active-indicator)] hover:bg-sidebar-active hover:text-sidebar-active-foreground [&>svg]:text-sidebar-active-foreground",
         className
       ),
       ...props
@@ -749,7 +764,7 @@ function SidebarTrigger({
   onClick,
   ...props
 }) {
-  const { toggleSidebar } = useAppShell();
+  const { isMobile, mobileOpen, sidebarOpen, toggleSidebar } = useAppShell();
   return /* @__PURE__ */ jsxs4(
     Button,
     {
@@ -757,7 +772,11 @@ function SidebarTrigger({
       type: "button",
       variant: "ghost",
       size: "icon",
-      className: cn("shrink-0", className),
+      className: cn(
+        "shrink-0 cursor-pointer text-sidebar-secondary-text hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-sidebar-focus-ring",
+        className
+      ),
+      "aria-expanded": isMobile ? mobileOpen : sidebarOpen,
       onClick: (event) => {
         onClick?.(event);
         toggleSidebar();
@@ -770,6 +789,104 @@ function SidebarTrigger({
     }
   );
 }
+function SidebarSearch({
+  expanded: expandedProp,
+  defaultExpanded = false,
+  onExpandedChange,
+  triggerLabel = "Search navigation",
+  shortcut,
+  className,
+  onKeyDown,
+  ...props
+}) {
+  const [expandedState, setExpandedState] = React2.useState(defaultExpanded);
+  const expanded = expandedProp ?? expandedState;
+  const inputRef = React2.useRef(null);
+  const triggerRef = React2.useRef(null);
+  const mountedRef = React2.useRef(false);
+  const setExpanded = React2.useCallback(
+    (nextExpanded) => {
+      if (expandedProp === void 0) {
+        setExpandedState(nextExpanded);
+      }
+      onExpandedChange?.(nextExpanded);
+    },
+    [expandedProp, onExpandedChange]
+  );
+  React2.useEffect(() => {
+    if (expanded) {
+      queueMicrotask(() => inputRef.current?.focus());
+    } else if (mountedRef.current) {
+      queueMicrotask(() => triggerRef.current?.focus());
+    }
+    mountedRef.current = true;
+  }, [expanded]);
+  if (!expanded) {
+    return /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "data-slot": "sidebar-search-trigger",
+        className: cn(
+          "flex min-h-[var(--ds-sidebar-item-height-touch)] w-full cursor-pointer items-center gap-2 rounded-[var(--ds-radius-control)] px-2 text-left text-sm font-medium text-sidebar-secondary-text outline-none transition-colors hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-[3px] focus-visible:ring-sidebar-focus-ring lg:min-h-[var(--ds-sidebar-item-height)]",
+          "group-data-[sidebar-state=collapsed]/shell:justify-center group-data-[sidebar-state=collapsed]/shell:px-0",
+          className
+        ),
+        onClick: () => setExpanded(true),
+        "aria-label": triggerLabel,
+        children: [
+          /* @__PURE__ */ jsx5(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
+          /* @__PURE__ */ jsx5("span", { className: "truncate group-data-[sidebar-state=collapsed]/shell:hidden", children: triggerLabel }),
+          shortcut ? /* @__PURE__ */ jsx5("kbd", { className: "ml-auto rounded border border-sidebar-border px-1.5 py-0.5 text-[length:var(--ds-metadata)] font-medium text-sidebar-metadata-text group-data-[sidebar-state=collapsed]/shell:hidden", children: shortcut }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      "data-slot": "sidebar-search",
+      "data-expanded": "true",
+      className: cn(
+        "flex min-h-[var(--ds-sidebar-item-height-touch)] items-center gap-2 rounded-[var(--ds-radius-control)] border border-sidebar-border bg-sidebar-search px-2 text-sidebar-primary-text shadow-[var(--ds-shadow-raised)] lg:min-h-[var(--ds-sidebar-item-height)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx5(Search, { className: "size-4 shrink-0 text-sidebar-icon" }),
+        /* @__PURE__ */ jsx5(
+          Input,
+          {
+            ref: inputRef,
+            type: "search",
+            className: "h-auto min-w-0 flex-1 border-0 bg-transparent px-0 py-1 text-sm shadow-none focus-visible:border-0 focus-visible:ring-0",
+            onKeyDown: (event) => {
+              if (event.key === "Escape") {
+                event.preventDefault();
+                setExpanded(false);
+              }
+              onKeyDown?.(event);
+            },
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            "data-slot": "sidebar-search-close",
+            className: "grid size-7 shrink-0 cursor-pointer place-items-center rounded-[var(--ds-radius-control)] text-sidebar-secondary-text outline-none transition-colors hover:bg-sidebar-hover hover:text-sidebar-primary-text focus-visible:ring-2 focus-visible:ring-sidebar-focus-ring",
+            onClick: () => {
+              setExpanded(false);
+            },
+            "aria-label": "Close search",
+            children: /* @__PURE__ */ jsx5(X, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
 function MainRegion({
   className,
   ...props
@@ -1727,6 +1844,7 @@ export {
   NavigationSubItem,
   NavigationSubList,
   SidebarTrigger,
+  SidebarSearch,
   MainRegion,
   TopBar,
   PageFrame,
@@ -1761,4 +1879,4 @@ export {
   ErrorState,
   ValueMeter
 };
-//# sourceMappingURL=chunk-5MGPU2JE.js.map
+//# sourceMappingURL=chunk-6VZDLHRF.js.map