@tiny-server/design 0.0.0-pre202605241751

package/src/components/section-card/SectionCard.tsx

@@ -0,0 +1,52 @@
+import {
+  Box,
+  factory,
+  Paper,
+  Text,
+  useProps,
+  type BoxProps,
+  type ElementProps,
+  type Factory,
+  type PaperBaseProps,
+  type StylesApiProps,
+} from '@mantine/core';
+import { SectionCardSection } from './Section';
+import { SectionCardHeader } from './Header';
+import classes from './SectionCard.module.css';
+
+export interface SectionCardProps
+  extends BoxProps, PaperBaseProps, StylesApiProps<SectionCardFactory>, ElementProps<'section'> {}
+
+export type SectionCardFactory = Factory<{
+  props: SectionCardProps;
+  ref: HTMLDivElement;
+  staticComponents: {
+    Header: typeof SectionCardHeader;
+    Section: typeof SectionCardSection;
+  };
+}>;
+
+const defaultSectionCardProps = {
+  radius: 'lg',
+  shadow: 'sm',
+  withBorder: false,
+} satisfies Partial<SectionCardProps>;
+
+export const SectionCard = factory<SectionCardFactory>((_props) => {
+  const { radius, shadow, withBorder, children, className, ...rest } = useProps(
+    'SectionCard',
+    defaultSectionCardProps,
+    _props,
+  );
+  return (
+    <Box component="section" className={`${classes['section-card']} ${className ?? ''}`} {...rest}>
+      <Paper radius={radius} shadow={shadow} withBorder={withBorder}>
+        <Text component="div">{children}</Text>
+      </Paper>
+    </Box>
+  );
+});
+
+SectionCard.displayName = 'SectionCard';
+SectionCard.Header = SectionCardHeader;
+SectionCard.Section = SectionCardSection;

package/src/components/section-card/index.ts

@@ -0,0 +1,4 @@
+export * from './SectionCard';
+
+export type { SectionCardHeaderProps } from './Header';
+export type { SectionCardSectionProps } from './Section';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';