@trycompai/design-system 1.0.25 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/molecules/section.tsx

@@ -10,20 +10,33 @@ interface SectionProps extends Omit<React.ComponentProps<'section'>, 'className'
   actions?: React.ReactNode;
   /** Gap between header and content. Default is "4" */
   gap?: '2' | '3' | '4' | '6' | '8';
+  /** Visual variant. "sheet" is optimized for use inside Sheet/Drawer */
+  variant?: 'default' | 'sheet';
 }
 
-function Section({ title, description, actions, gap = '4', children, ...props }: SectionProps) {
+function Section({
+  title,
+  description,
+  actions,
+  gap,
+  variant = 'default',
+  children,
+  ...props
+}: SectionProps) {
   const hasHeader = title || description || actions;
+  const resolvedGap = gap ?? (variant === 'sheet' ? '3' : '4');
+  const headingLevel = variant === 'sheet' ? '4' : '3';
+  const textSize = variant === 'sheet' ? 'xs' : 'sm';
 
   return (
-    <section data-slot="section" className="w-full" {...props}>
-      <Stack gap={gap}>
+    <section data-slot="section" data-variant={variant} className="w-full" {...props}>
+      <Stack gap={resolvedGap}>
         {hasHeader && (
           <div className="flex items-start justify-between gap-4">
             <Stack gap="1">
-              {title && <Heading level="3">{title}</Heading>}
+              {title && <Heading level={headingLevel}>{title}</Heading>}
               {description && (
-                <Text size="sm" variant="muted">
+                <Text size={textSize} variant="muted">
                   {description}
                 </Text>
               )}
@@ -43,12 +56,29 @@ function SectionHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'classNam
   );
 }
 
-function SectionTitle({ ...props }: Omit<React.ComponentProps<typeof Heading>, 'className'>) {
-  return <Heading data-slot="section-title" level="3" {...props} />;
+function SectionTitle({
+  size = 'default',
+  ...props
+}: Omit<React.ComponentProps<typeof Heading>, 'className' | 'level'> & {
+  size?: 'default' | 'sm';
+}) {
+  return <Heading data-slot="section-title" level={size === 'sm' ? '4' : '3'} {...props} />;
 }
 
-function SectionDescription({ ...props }: Omit<React.ComponentProps<typeof Text>, 'className'>) {
-  return <Text data-slot="section-description" size="sm" variant="muted" {...props} />;
+function SectionDescription({
+  size = 'default',
+  ...props
+}: Omit<React.ComponentProps<typeof Text>, 'className' | 'size'> & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <Text
+      data-slot="section-description"
+      size={size === 'sm' ? 'xs' : 'sm'}
+      variant="muted"
+      {...props}
+    />
+  );
 }
 
 function SectionActions({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {