@dazl/component-gallery 1.0.1 → 2.0.0

package/README.md

@@ -65,13 +65,15 @@ import { Button } from './button';
 export default function ButtonExample() {
   return (
     <>
-      <Section title="Sizes" layout="row">
+      <Section layout="row">
+        <Section.Title>Sizes</Section.Title>
         <Button size="sm">Small</Button>
         <Button size="md">Medium</Button>
         <Button size="lg">Large</Button>
       </Section>
 
-      <Section title="States" layout="column">
+      <Section layout="column">
+        <Section.Title>States</Section.Title>
         <Button disabled>Disabled</Button>
         <Button loading>Loading</Button>
       </Section>

package/dist/example/example.d.ts

@@ -1,7 +1,11 @@
 export interface SectionProps {
-    title?: string;
     layout?: 'row' | 'column';
     children: React.ReactNode;
 }
-export declare const Section: ({ title, layout, children }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Section: {
+    ({ layout, children }: SectionProps): import("react/jsx-runtime").JSX.Element;
+    Title: import("react").FC<{
+        children: React.ReactNode;
+    }>;
+};
 //# sourceMappingURL=example.d.ts.map

package/dist/example/example.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"example.d.ts","sourceRoot":"","sources":["../../src/example/example.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,GAAI,6BAAwC,YAAY,4CAS3E,CAAC"}
+{"version":3,"file":"example.d.ts","sourceRoot":"","sources":["../../src/example/example.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,YAAY;IACzB,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO;2BAAqC,YAAY;;kBAa5B,KAAK,CAAC,SAAS;;CAFvD,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
 const section = "section";
 const sectionTitle = "sectionTitle";
 const sectionContentColumn = "sectionContentColumn";
@@ -9,12 +10,19 @@ const styles = {
   sectionContentColumn,
   sectionContentRow
 };
-const Section = ({ title, layout = "column", children }) => {
+const Section = ({ layout = "column", children }) => {
+  const { title, content } = extractTitle(children);
   return /* @__PURE__ */ jsxs("section", { className: styles.section, children: [
-    title ? /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: title }) : null,
-    /* @__PURE__ */ jsx("div", { className: layout === "column" ? styles.sectionContentColumn : styles.sectionContentRow, children })
+    title,
+    /* @__PURE__ */ jsx("div", { className: layout === "column" ? styles.sectionContentColumn : styles.sectionContentRow, children: content })
   ] });
 };
+const SectionTitle = ({ children }) => /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children });
+Section.Title = SectionTitle;
+const extractTitle = (children) => {
+  const [title, ...content] = Children.toArray(children);
+  return isValidElement(title) && title.type === SectionTitle ? { title, content } : { title: null, content: children };
+};
 export {
   Section
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dazl/component-gallery",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "View your components in a gallery inside Dazl",
   "author": "Dazl",
   "license": "MIT",

package/src/example/example.tsx

@@ -1,18 +1,34 @@
+import { Children, isValidElement, type ReactNode } from 'react';
+
 import styles from './example.module.css';
 
 export interface SectionProps {
-    title?: string;
     layout?: 'row' | 'column';
     children: React.ReactNode;
 }
 
-export const Section = ({ title, layout = 'column', children }: SectionProps) => {
+export const Section = ({ layout = 'column', children }: SectionProps) => {
+    const { title, content } = extractTitle(children);
+
     return (
         <section className={styles.section}>
-            {title ? <div className={styles.sectionTitle}>{title}</div> : null}
+            {title}
             <div className={layout === 'column' ? styles.sectionContentColumn : styles.sectionContentRow}>
-                {children}
+                {content}
             </div>
         </section>
     );
 };
+
+const SectionTitle: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <div className={styles.sectionTitle}>{children}</div>
+);
+
+Section.Title = SectionTitle;
+
+const extractTitle = (children: ReactNode): { title: ReactNode; content: ReactNode } => {
+    const [title, ...content] = Children.toArray(children);
+    return isValidElement(title) && title.type === SectionTitle
+        ? { title, content }
+        : { title: null, content: children };
+};