@kushagradhawan/kookie-ui 0.1.120 → 0.1.122

package/src/components/toolbar.tsx

@@ -6,7 +6,7 @@ import { Flex } from './flex.js';
 import { Heading } from './heading.js';
 
 import type { CardProps } from './card.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { FlexProps } from './flex.js';
 
 // ============================================================================
 // Toolbar Root
@@ -115,15 +115,9 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
         style={computedStyle}
         {...restProps}
       >
-        <Flex
-          align="center"
-          justify="between"
-          direction={isHorizontal ? 'row' : 'column'}
-          gap="2"
-          className="rt-ToolbarInner"
-        >
+        <div className="rt-ToolbarInner">
           {children}
-        </Flex>
+        </div>
       </Card>
     );
   },
@@ -135,15 +129,14 @@ ToolbarRoot.displayName = 'Toolbar.Root';
 // ============================================================================
 
 type ToolbarSectionElement = React.ElementRef<'div'>;
-interface ToolbarSectionProps extends ComponentPropsWithout<'div', RemovedProps> {}
+type ToolbarSectionProps = FlexProps;
 
 const ToolbarLeft = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
-  ({ className, children, ...props }, forwardedRef) => (
+  ({ gap = '2', align = 'center', className, children, ...props }, forwardedRef) => (
     <Flex
       ref={forwardedRef}
-      align="center"
-      gap="2"
-      flexShrink="0"
+      align={align}
+      gap={gap}
       className={classNames('rt-ToolbarSection', 'rt-ToolbarLeft', className)}
       {...props}
     >
@@ -158,13 +151,12 @@ ToolbarLeft.displayName = 'Toolbar.Left';
 // ============================================================================
 
 const ToolbarCenter = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
-  ({ className, children, ...props }, forwardedRef) => (
+  ({ gap = '2', align = 'center', justify = 'center', className, children, ...props }, forwardedRef) => (
     <Flex
       ref={forwardedRef}
-      align="center"
-      justify="center"
-      flexGrow="1"
-      minWidth="0"
+      align={align}
+      justify={justify}
+      gap={gap}
       className={classNames('rt-ToolbarSection', 'rt-ToolbarCenter', className)}
       {...props}
     >
@@ -179,12 +171,12 @@ ToolbarCenter.displayName = 'Toolbar.Center';
 // ============================================================================
 
 const ToolbarRight = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
-  ({ className, children, ...props }, forwardedRef) => (
+  ({ gap = '2', align = 'center', justify = 'end', className, children, ...props }, forwardedRef) => (
     <Flex
       ref={forwardedRef}
-      align="center"
-      gap="2"
-      flexShrink="0"
+      align={align}
+      justify={justify}
+      gap={gap}
       className={classNames('rt-ToolbarSection', 'rt-ToolbarRight', className)}
       {...props}
     >
@@ -202,7 +194,7 @@ type ToolbarTitleElement = React.ElementRef<typeof Heading>;
 interface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {}
 
 const ToolbarTitle = React.forwardRef<ToolbarTitleElement, ToolbarTitleProps>(
-  ({ className, size = '3', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (
+  ({ className, size = '2', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (
     <Heading
       ref={forwardedRef}
       size={size}

package/styles.css

@@ -10233,6 +10233,12 @@
     --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
   }
 }
+.rt-BaseCard:where([data-inset='true']){
+  --base-card-padding-top: 0px;
+  --base-card-padding-right: 0px;
+  --base-card-padding-bottom: 0px;
+  --base-card-padding-left: 0px;
+}
 .rt-BaseCard:where(.rt-variant-outline){
   --card-border-width: 1px;
   --card-background-color: transparent;
@@ -25026,8 +25032,34 @@
   z-index: 1;
 }
 .rt-ToolbarInner{
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
   width: 100%;
   height: 100%;
+  gap: var(--space-2);
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarInner{
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto 1fr;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft{
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  justify-self: center;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter{
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  justify-self: center;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight{
+  grid-column: 1;
+  grid-row: 3;
+  align-self: end;
+  justify-self: center;
 }
 .rt-Toolbar:where([data-anchor='top']){
   top: 0;
@@ -25087,14 +25119,20 @@
   min-width: 0;
   flex-shrink: 1;
 }
+.rt-ToolbarSection{
+  min-width: 0;
+}
 .rt-ToolbarLeft{
-  justify-content: flex-start;
+  grid-column: 1;
+  justify-self: start;
 }
 .rt-ToolbarCenter{
-  justify-content: center;
+  grid-column: 2;
+  justify-self: center;
 }
 .rt-ToolbarRight{
-  justify-content: flex-end;
+  grid-column: 3;
+  justify-self: end;
 }
 .rt-TooltipContent{
   box-sizing: border-box;