@olwiba/ui 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -63,8 +63,8 @@
   },
   "devDependencies": {
     "@content-collections/mdx": "^0.2.2",
-    "@olwiba/cn": "0.1.25",
-    "@olwiba/docs": "0.1.32",
+    "@olwiba/cn": "0.1.26",
+    "@olwiba/docs": "0.1.35",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/app/AppShell.tsx

@@ -127,7 +127,7 @@ function NavUser({ user }: { user: AppShellUser }) {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!min-w-8 group-data-[collapsible=icon]:!max-w-8 group-data-[collapsible=icon]:!p-0"
             >
               <Avatar mode={avatarMode} size="sm" className="grayscale">
                 {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
@@ -218,20 +218,27 @@ function ShellSidebar({
 
   return (
     <Sidebar side={side} collapsible={collapsible} sidebarPosition={sidebarPosition}>
-      <SidebarHeader>
+      <SidebarHeader className="py-3">
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton asChild tooltip={typeof brand.name === 'string' ? brand.name : undefined} className="data-[slot=sidebar-menu-button]:!p-1.5">
+            <SidebarMenuButton
+              asChild
+              size="lg"
+              tooltip={typeof brand.name === 'string' ? brand.name : undefined}
+              className="group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!min-w-8 group-data-[collapsible=icon]:!max-w-8 group-data-[collapsible=icon]:!p-0"
+            >
               {renderLink({
                 href: brand.href ?? '#',
                 children: (
                   <>
                     {brand.logo ? (
-                      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                      // Neutral slot: the consumer's logo owns its own chrome
+                      // (background, radius). Sized to fill the collapsed icon rail.
+                      <span className="flex size-8 shrink-0 items-center justify-center [&>svg]:size-5">
                         {brand.logo}
                       </span>
                     ) : (
-                      <span className="flex size-4 shrink-0 items-center justify-center text-sm font-semibold">
+                      <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-sm font-semibold text-primary-foreground">
                         {fallbackLogo}
                       </span>
                     )}

package/src/marketing/PricingSection.tsx

@@ -35,6 +35,10 @@ export interface PricingSectionProps {
   footnote?: string;
   mode?: 'subscription' | 'one-time';
   foundingDeadline?: string;
+  /** Symbol prepended to the computed price. Ignored by plans with `priceDisplay`. */
+  currency?: string;
+  /** Badge label for `highlighted` plans with no active `foundingDeadline` countdown. Pass '' to show no badge. */
+  highlightedBadgeLabel?: string;
   /** Rendered below each plan's CTA button (e.g. a "Get notified" link). */
   renderPlanFooter?: (plan: PricingPlan) => React.ReactNode;
 }
@@ -54,6 +58,8 @@ export function PricingSection({
   footnote,
   mode = 'subscription',
   foundingDeadline,
+  currency = '$',
+  highlightedBadgeLabel = 'Founding member',
   renderPlanFooter,
 }: PricingSectionProps) {
   const [annual, setAnnual] = React.useState(false);
@@ -122,7 +128,7 @@ export function PricingSection({
           <StaggerChildren className="mt-10 grid gap-4 lg:grid-cols-3">
             {plans.map((plan) => {
               const rawPrice = isOneTime ? plan.monthly : (annual ? plan.annual : plan.monthly);
-              const price = plan.priceDisplay ?? `$${rawPrice}`;
+              const price = plan.priceDisplay ?? `${currency}${rawPrice}`;
               const period = plan.periodDisplay ?? (isOneTime ? 'one-time' : (rawPrice > 0 ? '/mo' : ''));
               const badge = plan.highlighted && foundingDeadline
                 ? (
@@ -130,8 +136,8 @@ export function PricingSection({
                     <CountdownTimer deadline={foundingDeadline} compact />
                   </span>
                 )
-                : plan.highlighted
-                  ? 'Founding member'
+                : plan.highlighted && highlightedBadgeLabel
+                  ? highlightedBadgeLabel
                   : undefined;
               return (
                 <PricingCard