fix(structure): group components into groups inside the repo

ts_web/elements/00group-input/dees-input-fileupload/demo.ts

@@ -0,0 +1,159 @@
+import { css, cssManager, html } from '@design.estate/dees-element';
+import './component.js';
+import '../../dees-panel/dees-panel.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-shell {
+          display: flex;
+          flex-direction: column;
+          gap: 32px;
+          padding: 24px;
+          max-width: 1160px;
+          margin: 0 auto;
+        }
+
+        .demo-grid {
+          display: grid;
+          gap: 24px;
+        }
+
+        @media (min-width: 960px) {
+          .demo-grid--two {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
+
+        .demo-stack {
+          display: flex;
+          flex-direction: column;
+          gap: 18px;
+        }
+
+        .demo-note {
+          margin-top: 16px;
+          padding: 16px;
+          border-radius: 12px;
+          border: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(215 20% 26%)')};
+          background: ${cssManager.bdTheme('hsl(213 100% 97%)', 'hsl(215 20% 12%)')};
+          color: ${cssManager.bdTheme('hsl(215 25% 32%)', 'hsl(215 20% 82%)')};
+          font-size: 13px;
+          line-height: 1.55;
+        }
+
+        .demo-note strong {
+          color: ${cssManager.bdTheme('hsl(217 91% 45%)', 'hsl(213 93% 68%)')};
+          font-weight: 600;
+        }
+      `}
+    </style>
+
+    <div class="demo-shell">
+      <dees-panel
+        .title=${'Modern file uploader'}
+        .subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
+      >
+        <div class="demo-grid demo-grid--two">
+          <div class="demo-stack">
+            <dees-input-fileupload
+              .label=${'Attachments'}
+              .description=${'Upload supporting documents for your request'}
+              .accept=${'image/*,.pdf,.zip'}
+              .maxSize=${10 * 1024 * 1024}
+            ></dees-input-fileupload>
+
+            <dees-input-fileupload
+              .label=${'Brand assets'}
+              .description=${'Upload high-resolution imagery (JPG/PNG)'}
+              .accept=${'image/jpeg,image/png'}
+              .multiple=${false}
+              .maxSize=${5 * 1024 * 1024}
+              .buttonText=${'Select cover image'}
+            ></dees-input-fileupload>
+          </div>
+
+          <div class="demo-stack">
+            <dees-input-fileupload
+              .label=${'Audio uploads'}
+              .description=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
+              .accept=${'audio/*'}
+              .maxSize=${25 * 1024 * 1024}
+            ></dees-input-fileupload>
+
+            <dees-input-fileupload
+              .label=${'Disabled example'}
+              .description=${'Uploader is disabled while moderation is pending'}
+              .disabled=${true}
+            ></dees-input-fileupload>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel
+        .title=${'Form integration'}
+        .subtitle=${'Combine file uploads with the rest of the DEES form ecosystem'}
+      >
+        <div class="demo-grid">
+          <dees-form>
+            <div class="demo-stack">
+              <dees-input-text
+                .label=${'Project name'}
+                .description=${'How should we refer to this project internally?'}
+                .required=${true}
+                .key=${'projectName'}
+              ></dees-input-text>
+
+              <dees-input-text
+                .label=${'Contact email'}
+                .inputType=${'email'}
+                .required=${true}
+                .key=${'contactEmail'}
+              ></dees-input-text>
+
+              <dees-input-fileupload
+                .label=${'Statement of work'}
+                .description=${'Upload a signed statement of work (PDF, max 15MB)'}
+                .required=${true}
+                .accept=${'application/pdf'}
+                .maxSize=${15 * 1024 * 1024}
+                .multiple=${false}
+                .key=${'sow'}
+              ></dees-input-fileupload>
+
+              <dees-input-fileupload
+                .label=${'Creative references'}
+                .description=${'Optional. Upload up to five visual references'}
+                .accept=${'image/*'}
+                .maxFiles=${5}
+                .maxSize=${8 * 1024 * 1024}
+                .key=${'references'}
+              ></dees-input-fileupload>
+
+              <dees-input-text
+                .label=${'Notes'}
+                .description=${'Add optional context for reviewers'}
+                .inputType=${'textarea'}
+                .key=${'notes'}
+              ></dees-input-text>
+
+              <dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
+            </div>
+          </dees-form>
+
+          <div class="demo-note">
+            <strong>Good to know:</strong>
+            <ul>
+              <li>Drag & drop highlights the dropzone and supports keyboard activation.</li>
+              <li>Accepted file types are summarised automatically from the <code>accept</code> attribute.</li>
+              <li>Image uploads show live previews generated via <code>URL.createObjectURL</code>.</li>
+              <li>File size and file-count limits surface inline validation messages.</li>
+              <li>The component stays compatible with <code>dees-form</code> value accessors.</li>
+            </ul>
+          </div>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;