@campxdev/react-blueprint 3.0.0-alpha.6 → 3.0.0-alpha.7

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -91,11 +91,22 @@ export const Breadcrumbs = ({
       return breadcrumbItems.map((item, index) => (
         <BreadcrumbItem key={index}>
           {item.isLast ? (
-            <BreadcrumbPage>{item.label}</BreadcrumbPage>
+            <BreadcrumbPage>
+              <Typography variant={'small'} className="text-semibold">
+                {item.label}
+              </Typography>
+            </BreadcrumbPage>
           ) : (
             <>
               <BreadcrumbLink asChild>
-                <Link to={item.path}>{item.label}</Link>
+                <Link to={item.path}>
+                  <Typography
+                    variant={'small'}
+                    className="text-semibold text-muted-foreground"
+                  >
+                    {item.label}
+                  </Typography>
+                </Link>
               </BreadcrumbLink>
               <BreadcrumbSeparator />
             </>
@@ -113,7 +124,10 @@ export const Breadcrumbs = ({
           <BreadcrumbItem>
             <BreadcrumbLink asChild>
               <Link to={firstItem.path}>
-                <Typography variant={'small'} className="text-muted-foreground">
+                <Typography
+                  variant={'small'}
+                  className="text-semibold text-muted-foreground"
+                >
                   {firstItem.label}
                 </Typography>
               </Link>
@@ -137,7 +151,9 @@ export const Breadcrumbs = ({
           </BreadcrumbItem>
           <BreadcrumbItem>
             <BreadcrumbPage>
-              <Typography variant={'small'}>{lastItem.label}</Typography>
+              <Typography variant={'small'} className="text-semibold">
+                {lastItem.label}
+              </Typography>
             </BreadcrumbPage>
           </BreadcrumbItem>
         </>

package/src/components/Navigation/Dialog/Dialog.tsx

@@ -1,4 +1,9 @@
-import { DialogHeader, Dialog as ShadcnDialog, DialogContent as ShadcnDialogContent, DialogTitle as ShadcnDialogTitle } from '@/shadcn-components/DataDisplay/Dialog/Dialog';
+import {
+  DialogHeader,
+  Dialog as ShadcnDialog,
+  DialogContent as ShadcnDialogContent,
+  DialogTitle as ShadcnDialogTitle,
+} from '@/shadcn-components/DataDisplay/Dialog/Dialog';
 import { ReactNode } from 'react';
 
 /**
@@ -100,7 +105,7 @@ const Dialog = ({
         showCloseButton={showCloseButton}
       >
         {title && (
-          <DialogHeader className="pl-4 pt-4">
+          <DialogHeader className="pl-4 py-4 border-b">
             <ShadcnDialogTitle>{title}</ShadcnDialogTitle>
           </DialogHeader>
         )}

package/src/components/Navigation/TabsContainer/TabsContainer.tsx

@@ -6,7 +6,7 @@ import {
   TabsList,
   TabsTrigger,
 } from '@/shadcn-components/Navigation/Tabs/Tabs';
-import { useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 
 /**
  * Configuration for an individual tab in TabsContainer
@@ -42,6 +42,8 @@ export interface TabsContainerProps {
   tabsListClassName?: string;
   /** Optional CSS class names for each TabsTrigger element */
   tabsTriggerClassName?: string;
+  /** Optional inline styles for the TabsContent container */
+  tabsContainerStyles?: CSSProperties;
   /** Layout variant - 'fixed' uses viewport height, 'dynamic' uses content height. Defaults to 'fixed' */
   variant?: 'fixed' | 'dynamic';
 }
@@ -61,6 +63,7 @@ export interface TabsContainerProps {
  * @param {string} [props.className] - CSS classes for the Tabs root
  * @param {string} [props.tabsListClassName] - CSS classes for the TabsList
  * @param {string} [props.tabsTriggerClassName] - CSS classes for TabsTrigger elements
+ * @param {CSSProperties} [props.tabsContainerStyles] - Inline styles for TabsContent
  * @param {'fixed' | 'dynamic'} [props.variant='fixed'] - Layout mode for tab content
  *
  * @returns {React.ReactElement} A Tabs component with tab list and content area
@@ -114,6 +117,7 @@ export const TabsContainer = ({
   className,
   tabsListClassName,
   tabsTriggerClassName,
+  tabsContainerStyles,
   variant = 'fixed',
 }: TabsContainerProps) => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
@@ -168,6 +172,7 @@ export const TabsContainer = ({
                   ? `calc(100vh - 98px)`
                   : `calc(100vh - 80px)`
                 : 'max-content',
+            ...tabsContainerStyles,
           }}
         >
           {component}