import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Layout Components","description":"","frontmatter":{},"headers":[],"relativePath":"ui/layout.md","filePath":"ui/layout.md"}'),n={name:"ui/layout.md"};function l(h,s,p,d,o,k){return a(),t("div",null,[...s[0]||(s[0]=[e(`

Layout Components ​

Layout components for structuring your application with containers, sections, and collapsible panels.

Fieldset (_fieldset) ​

Groups related form fields with a legend.

javascript
_fieldset({ legend: 'Personal Information' }, [
  _input({ label: 'Full Name', $value: $name }),
  _input({ label: 'Email Address', type: 'email', $value: $email }),
  _select({ label: 'Role', options: [...], $value: $role })
])

Accordion (_accordion) ​

Collapsible content panels. Can be used as standalone or grouped.

Single Accordion ​

javascript
_accordion({ title: 'What is SigPro UI?' }, [
  $.html('p', {}, 'SigPro UI is a reactive component library...')
])

Grouped Accordions (Radio Behavior) ​

When multiple accordions share the same name, only one can be open at a time.

javascript
// Grouped accordions - only one open at a time
_accordion({ title: 'Getting Started', name: 'faq' }, content1)
_accordion({ title: 'Installation', name: 'faq' }, content2)
_accordion({ title: 'Customization', name: 'faq' }, content3)

Accordion with Open State ​

Control the initial open state with the open prop.

javascript
_accordion({ title: 'Open by Default', open: true }, [
  $.html('p', {}, 'This accordion starts open.')
])

Complete Layout Example ​

API Reference ​

_fieldset ​

PropTypeDescription
legendstringFieldset title/legend text
classstring | functionAdditional CSS classes

_accordion ​

PropTypeDescription
titlestringAccordion header text
namestringGroup name for radio behavior (optional)
openbooleanInitially open state (default: false)

Styling Tips ​

Custom Fieldset Styling ​

javascript
_fieldset({ 
  legend: 'Custom Styled',
  class: 'bg-primary/10 border-primary' 
}, [
  // content
])

Custom Accordion Styling ​

javascript
_accordion({ 
  title: 'Styled Accordion',
  class: 'bg-base-200' 
}, [
  // content
])

Nested Layouts ​

Layout components can be nested to create complex structures:

javascript
_fieldset({ legend: 'Main Section' }, [
  _accordion({ title: 'Subsection 1' }, [
    _input({ label: 'Field 1', $value: $field1 })
  ]),
  _accordion({ title: 'Subsection 2' }, [
    _input({ label: 'Field 2', $value: $field2 })
  ])
])
`,34)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};