Form

<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.
     Form is a COMPOSITE (antd, no framework-free element), so its HTML form is a
     CDN-React page — React + antd load from a CDN (esm.sh) and mount on open. It
     consumes the SAME shared `formTheme` the React/Vue wrappers use, so it renders
     the DS V3 look (32px controls, radius 8, #E3E3E3 border, brand primary submit).
     Matrix props: layout (vertical|horizontal|inline) · size (small|default|large) ·
     disabled · requiredMark · per-Item validation (error|warning|success) + help text.
     No JSX here (JSX needs a compiler) — we use React.createElement via the `h` alias. -->
<div id="root"></div>
<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { ConfigProvider, Form, Input, Button } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';
  import { formTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/form-theme.js';

  const h = React.createElement;
  const Item = Form.Item;

  createRoot(document.getElementById('root')).render(
    h(ConfigProvider, { theme: formTheme },
      h(Form, { layout: 'vertical', size: 'default', disabled: false, requiredMark: true,
                style: { maxWidth: 360 }, initialValues: { name: 'AhaSlides' }, onFinish: (v) => console.log(v) },
        h(Item, { label: 'Workspace name', name: 'name', rules: [{ required: true }] }, h(Input, { placeholder: 'AhaSlides' })),
        // Validation state — error | warning | success — colours the border + shows help text
        h(Item, { label: 'Contact email', name: 'email', rules: [{ type: 'email', required: true, message: 'Enter a valid email — e.g. you@company.com' }] }, h(Input, { placeholder: 'you@company.com' })),
        h(Item, null, h(Button, { type: 'primary', htmlType: 'submit' }, 'Save changes'))
      )
    )
  );
</script>

import { ConfigProvider, Form, Input, Button } from 'antd';   // antd v6
import { formTheme } from '@ahaslides-product/design/form-theme';

// layout: vertical | horizontal | inline · size: small | default | large · disabled toggles the whole form
<ConfigProvider theme={formTheme}>
  <Form layout="vertical" size="default" disabled={false} requiredMark
        initialValues={{ name: 'AhaSlides' }} onFinish={save}>
    <Form.Item label="Workspace name" name="name" rules={[{ required: true }]}>
      <Input placeholder="AhaSlides" />
    </Form.Item>
    {/* Validation state — error | warning | success — colours the border + shows help text */}
    <Form.Item label="Contact email" name="email"
               rules={[{ type: 'email', required: true, message: 'Enter a valid email — e.g. you@company.com' }]}>
      <Input placeholder="you@company.com" />
    </Form.Item>
    <Form.Item>
      <Button type="primary" htmlType="submit">Save changes</Button>
    </Form.Item>
  </Form>
</ConfigProvider>
// One shared formTheme → the DS V3 look; labels above the field, one primary submit.

<script setup>
import { reactive } from 'vue';
import { ConfigProvider, Form, FormItem, Input, Button } from 'ant-design-vue';   // ant-design-vue v4
import { formTheme } from '@ahaslides-product/design/form-theme';

const model = reactive({ name: 'AhaSlides', email: '' });
</script>

<!-- layout: vertical | horizontal | inline · size: small | default | large · disabled toggles the whole form -->
<template>
  <a-config-provider :theme="formTheme">
    <a-form layout="vertical" size="default" :disabled="false" required-mark :model="model" @finish="save">
      <a-form-item label="Workspace name" name="name" :rules="[{ required: true }]">
        <a-input v-model:value="model.name" placeholder="AhaSlides" />
      </a-form-item>
      <!-- Validation state — error | warning | success — colours the border + shows help text -->
      <a-form-item label="Contact email" name="email"
                   :rules="[{ type: 'email', required: true, message: 'Enter a valid email — e.g. you@company.com' }]">
        <a-input v-model:value="model.email" placeholder="you@company.com" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">Save changes</a-button>
      </a-form-item>
    </a-form>
  </a-config-provider>
</template>
<!-- The SAME formTheme as React → one DS V3 look across both vendor libraries. -->

// @ahaslides-product/design/form-theme — declared ONCE, consumed by both tiers.
import { formTheme } from '@ahaslides-product/design/form-theme';

export const formTheme = {
  token: {
    colorPrimary: '#6A1EBB',
    borderRadius: 8,
    controlHeight: 32,
    colorBorder: '#E3E3E3',
    colorTextPlaceholder: '#8A8A8A',
    colorError: '#F5222D',
    fontFamily: 'var(--aha-font-product, "Plus Jakarta Sans", sans-serif)',
  },
  components: {
    Form: { labelColor: '#4A4A4A', itemMarginBottom: 20, verticalLabelPadding: '0 0 4px' },
    Input: { borderRadius: 8, controlHeight: 32 },
    Button: { borderRadius: 8, controlHeight: 32 },
  },
};