@trycompai/design-system 1.0.24 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/molecules/section.tsx +39 -9
  3. package/src/components/organisms/sheet.tsx +4 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trycompai/design-system",
3
- "version": "1.0.24",
3
+ "version": "1.0.26",
4
4
  "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/components/molecules/section.tsx CHANGED
@@ -10,20 +10,33 @@ interface SectionProps extends Omit<React.ComponentProps<'section'>, 'className'
10
10
  actions?: React.ReactNode;
11
11
  /** Gap between header and content. Default is "4" */
12
12
  gap?: '2' | '3' | '4' | '6' | '8';
13
+ /** Visual variant. "sheet" is optimized for use inside Sheet/Drawer */
14
+ variant?: 'default' | 'sheet';
13
15
  }
14
16
 
15
- function Section({ title, description, actions, gap = '4', children, ...props }: SectionProps) {
17
+ function Section({
18
+ title,
19
+ description,
20
+ actions,
21
+ gap,
22
+ variant = 'default',
23
+ children,
24
+ ...props
25
+ }: SectionProps) {
16
26
  const hasHeader = title || description || actions;
27
+ const resolvedGap = gap ?? (variant === 'sheet' ? '3' : '4');
28
+ const headingLevel = variant === 'sheet' ? '4' : '3';
29
+ const textSize = variant === 'sheet' ? 'xs' : 'sm';
17
30
 
18
31
  return (
19
- <section data-slot="section" className="w-full" {...props}>
20
- <Stack gap={gap}>
32
+ <section data-slot="section" data-variant={variant} className="w-full" {...props}>
33
+ <Stack gap={resolvedGap}>
21
34
  {hasHeader && (
22
35
  <div className="flex items-start justify-between gap-4">
23
36
  <Stack gap="1">
24
- {title && <Heading level="3">{title}</Heading>}
37
+ {title && <Heading level={headingLevel}>{title}</Heading>}
25
38
  {description && (
26
- <Text size="sm" variant="muted">
39
+ <Text size={textSize} variant="muted">
27
40
  {description}
28
41
  </Text>
29
42
  )}
@@ -43,12 +56,29 @@ function SectionHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'classNam
43
56
  );
44
57
  }
45
58
 
46
- function SectionTitle({ ...props }: Omit<React.ComponentProps<typeof Heading>, 'className'>) {
47
- return <Heading data-slot="section-title" level="3" {...props} />;
59
+ function SectionTitle({
60
+ size = 'default',
61
+ ...props
62
+ }: Omit<React.ComponentProps<typeof Heading>, 'className' | 'level'> & {
63
+ size?: 'default' | 'sm';
64
+ }) {
65
+ return <Heading data-slot="section-title" level={size === 'sm' ? '4' : '3'} {...props} />;
48
66
  }
49
67
 
50
- function SectionDescription({ ...props }: Omit<React.ComponentProps<typeof Text>, 'className'>) {
51
- return <Text data-slot="section-description" size="sm" variant="muted" {...props} />;
68
+ function SectionDescription({
69
+ size = 'default',
70
+ ...props
71
+ }: Omit<React.ComponentProps<typeof Text>, 'className' | 'size'> & {
72
+ size?: 'default' | 'sm';
73
+ }) {
74
+ return (
75
+ <Text
76
+ data-slot="section-description"
77
+ size={size === 'sm' ? 'xs' : 'sm'}
78
+ variant="muted"
79
+ {...props}
80
+ />
81
+ );
52
82
  }
53
83
 
54
84
  function SectionActions({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
package/src/components/organisms/sheet.tsx CHANGED
@@ -45,7 +45,7 @@ function SheetContent({
45
45
  <SheetPrimitive.Popup
46
46
  data-slot="sheet-content"
47
47
  data-side={side}
48
- className="bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 px-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out overflow-hidden data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm"
48
+ className="bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out overflow-hidden data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm"
49
49
  {...props}
50
50
  >
51
51
  {children}
@@ -65,18 +65,18 @@ function SheetContent({
65
65
  }
66
66
 
67
67
  function SheetHeader({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
68
- return <div data-slot="sheet-header" className="gap-0.5 pt-4 flex flex-col" {...props} />;
68
+ return <div data-slot="sheet-header" className="gap-0.5 px-4 pt-4 flex flex-col" {...props} />;
69
69
  }
70
70
 
71
71
  function SheetBody({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
72
- return <div data-slot="sheet-body" className="flex-1 min-h-0 overflow-y-auto px-1 -mx-1" {...props} />;
72
+ return <div data-slot="sheet-body" className="flex-1 min-h-0 overflow-y-auto px-4 py-4" {...props} />;
73
73
  }
74
74
 
75
75
  function SheetFooter({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
76
76
  return (
77
77
  <div
78
78
  data-slot="sheet-footer"
79
- className="gap-2 py-4 mt-auto flex flex-col border-t bg-background sticky bottom-0"
79
+ className="gap-2 px-4 py-4 mt-auto flex flex-col border-t bg-background sticky bottom-0"
80
80
  {...props}
81
81
  />
82
82
  );