@rockshin/tao-ui 0.0.1

package/dist/components/form-section/form-section.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import '../form-field/form.css';
+export type FormSectionSemanticPart = 'root' | 'header' | 'title' | 'description' | 'body';
+export interface FormSectionProps {
+    title?: string;
+    description?: string;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<FormSectionSemanticPart>;
+    styles?: SemanticStyles<FormSectionSemanticPart>;
+}
+export declare function FormSection({ title, description, children, className, style, classNames, styles, }: FormSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form-section/form-section.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cx } from "../../utils/semantic.js";
+import "../form-field/form.css";
+function FormSection(t0) {
+    const $ = c(24);
+    const { title, description, children, className, style, classNames, styles } = t0;
+    const t1 = classNames?.root;
+    let t2;
+    if ($[0] !== className || $[1] !== t1) {
+        t2 = cx(t1, className);
+        $[0] = className;
+        $[1] = t1;
+        $[2] = t2;
+    } else t2 = $[2];
+    const t3 = styles?.root;
+    let t4;
+    if ($[3] !== style || $[4] !== t3) {
+        t4 = {
+            ...t3,
+            ...style
+        };
+        $[3] = style;
+        $[4] = t3;
+        $[5] = t4;
+    } else t4 = $[5];
+    let t5;
+    if ($[6] !== classNames?.description || $[7] !== classNames?.header || $[8] !== classNames?.title || $[9] !== description || $[10] !== styles?.description || $[11] !== styles?.header || $[12] !== styles?.title || $[13] !== title) {
+        t5 = (title || description) && /*#__PURE__*/ jsxs("div", {
+            className: classNames?.header,
+            style: styles?.header,
+            "data-tao-form-section-header": "",
+            children: [
+                title && /*#__PURE__*/ jsx("legend", {
+                    className: classNames?.title,
+                    style: styles?.title,
+                    "data-tao-form-section-title": "",
+                    children: title
+                }),
+                description && /*#__PURE__*/ jsx("p", {
+                    className: classNames?.description,
+                    style: styles?.description,
+                    "data-tao-form-section-description": "",
+                    children: description
+                })
+            ]
+        });
+        $[6] = classNames?.description;
+        $[7] = classNames?.header;
+        $[8] = classNames?.title;
+        $[9] = description;
+        $[10] = styles?.description;
+        $[11] = styles?.header;
+        $[12] = styles?.title;
+        $[13] = title;
+        $[14] = t5;
+    } else t5 = $[14];
+    const t6 = classNames?.body;
+    const t7 = styles?.body;
+    let t8;
+    if ($[15] !== children || $[16] !== t6 || $[17] !== t7) {
+        t8 = /*#__PURE__*/ jsx("div", {
+            className: t6,
+            style: t7,
+            "data-tao-form-section-body": "",
+            children: children
+        });
+        $[15] = children;
+        $[16] = t6;
+        $[17] = t7;
+        $[18] = t8;
+    } else t8 = $[18];
+    let t9;
+    if ($[19] !== t2 || $[20] !== t4 || $[21] !== t5 || $[22] !== t8) {
+        t9 = /*#__PURE__*/ jsxs("fieldset", {
+            className: t2,
+            style: t4,
+            "data-tao-form-section": "",
+            children: [
+                t5,
+                t8
+            ]
+        });
+        $[19] = t2;
+        $[20] = t4;
+        $[21] = t5;
+        $[22] = t8;
+        $[23] = t9;
+    } else t9 = $[23];
+    return t9;
+}
+export { FormSection };