@lynx-example/lynx-ui-form 0.0.1 → 0.0.3

package/Basic/data.ts

@@ -0,0 +1,35 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+export interface FormPageProps {
+  title: string
+  subtitle: string
+  workspaceTypeOptions: RadioOption[]
+  initialFormData: FormData
+}
+
+export interface RadioOption {
+  label: string
+  value: string
+}
+
+export interface FormData {
+  workspaceType: string
+  workspaceName: string
+  description: string
+}
+
+export const formPageData: FormPageProps = {
+  title: 'Create a workspace',
+  subtitle: 'Set up your workspace to get started.',
+  workspaceTypeOptions: [
+    { label: 'Personal', value: 'personal' },
+    { label: 'Team', value: 'team' },
+  ],
+  initialFormData: {
+    workspaceType: '',
+    workspaceName: '',
+    description: '',
+  },
+}

package/Basic/index.css

@@ -0,0 +1,241 @@
+@import "@lynx-js/luna-styles/index.css";
+
+/* =========================
+ * Container
+ * ========================= */
+
+.demo-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 96px;
+  padding-bottom: 48px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.demo-canvas {
+  height: 100%;
+  width: 100%;
+  padding: 64px;
+  padding-left: 40px;
+  padding-right: 40px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  color: var(--content);
+  background-color: var(--canvas);
+}
+
+.luna-gradient-berry {
+  background: linear-gradient(
+    0deg,
+    var(--gradient-b),
+    var(--gradient-c)
+  );
+}
+
+/* =========================
+ * Form & Typography
+ * ========================= */
+
+.form-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--content);
+  margin-bottom: 6px;
+}
+
+.form-subtitle {
+  font-size: 14px;
+  color: var(--content-muted);
+}
+
+.form-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--line);
+  margin: 16px 0;
+}
+
+.form-section-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--content-2);
+  margin-bottom: 8px;
+}
+
+.form-field-description {
+  font-size: 14px;
+  color: var(--content-muted);
+  margin-bottom: 8px;
+}
+
+.form-label {
+  font-size: 14px;
+  color: var(--content);
+}
+
+/* =========================
+ * Radio group
+ * ========================= */
+
+.radio-group-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.radio-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 12px;
+  padding: 10px;
+  border-radius: 12px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--line);
+}
+
+/* Indicator */
+.radio-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--line);
+}
+
+.radio-indicator.ui-checked {
+  border-color: var(--primary);
+}
+
+.radio-indicator-checked-item {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background-color: var(--primary);
+}
+
+/* =========================
+ * Inputs
+ * ========================= */
+
+.input-container {
+  width: 100%;
+  border-radius: 12px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--line);
+  margin-bottom: 16px;
+}
+
+.form-input {
+  font-size: 14px;
+  padding: 12px;
+  color: var(--content);
+  caret-color: var(--primary);
+}
+
+.form-input::placeholder {
+  color: var(--content-faint);
+}
+
+/* =========================
+ * Checkbox
+ * ========================= */
+
+.checkbox-item {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  padding: 4px 0;
+}
+
+.checkbox-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--line);
+}
+
+.checkbox-indicator.ui-checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+}
+
+.checkbox-indicator-checked-item {
+  width: 11px;
+  height: 6px;
+  border-left: 2px solid var(--primary-content);
+  border-bottom: 2px solid var(--primary-content);
+  transform: rotate(-45deg) translate(1px, -0.5px);
+}
+
+/* =========================
+ * Submit
+ * ========================= */
+
+.submit-button {
+  width: 100%;
+  height: 48px;
+  border-radius: 9999px;
+  background-color: var(--primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 12px 0;
+}
+
+.submit-button.ui-active {
+  background-color: var(--primary-2);
+}
+
+.submit-button-text {
+  font-size: 14px;
+  color: var(--primary-content);
+}
+
+/* =========================
+ * Values display
+ * ========================= */
+
+.form-values-display {
+  margin-top: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: var(--line);
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--content-subtle);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.form-submitted-hint {
+  font-size: 14px;
+  color: var(--content);
+}

package/Basic/index.tsx

@@ -0,0 +1,113 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root, useState } from '@lynx-js/react'
+
+import {
+  CheckboxIndicator,
+  FormField,
+  FormRoot,
+  FormSubmitButton,
+  Radio,
+  RadioIndicator,
+  ScrollView,
+} from '@lynx-js/lynx-ui'
+
+import { formPageData } from './data'
+
+import './index.css'
+
+function App() {
+  const [formValues, setFormValues] = useState<Record<string, unknown>>({})
+  const [submitted, setSubmitted] = useState(false)
+
+  return (
+    <view className='demo-container lunaris-dark luna-gradient-berry'>
+      <ScrollView scrollOrientation='vertical' className='demo-canvas'>
+        <FormRoot
+          onChanged={(values: Record<string, unknown>) => {
+            setFormValues(values)
+            setSubmitted(false)
+          }}
+          initialValues={{
+            workspaceType: formPageData.workspaceTypeOptions[0]?.value ?? '',
+            workspaceName: 'My Workspace',
+            description: 'A place for collaboration',
+          }}
+        >
+          <view className='form-container'>
+            <text className='form-title'>{formPageData.title}</text>
+            <text className='form-subtitle'>{formPageData.subtitle}</text>
+
+            <view className='form-divider' />
+
+            <text className='form-section-title'>Workspace type</text>
+            <FormField as='RadioGroupRoot' name='workspaceType'>
+              <view className='radio-group-container'>
+                {formPageData.workspaceTypeOptions.map(({ label, value }) => (
+                  <Radio className='radio-item' key={value} value={value}>
+                    <RadioIndicator className='radio-indicator'>
+                      <view className='radio-indicator-checked-item' />
+                    </RadioIndicator>
+                    <text className='form-label'>{label}</text>
+                  </Radio>
+                ))}
+              </view>
+            </FormField>
+
+            <view className='form-divider' />
+
+            <text className='form-section-title'>Workspace name</text>
+            <view className='input-container'>
+              <FormField
+                as='Input'
+                name='workspaceName'
+                className='form-input'
+              />
+            </view>
+
+            <text className='form-section-title'>Description</text>
+            <view className='input-container'>
+              <FormField as='Input' name='description' className='form-input' />
+            </view>
+
+            <view className='form-divider' />
+
+            <FormField as='Checkbox' name='agreement' className='checkbox-item'>
+              <CheckboxIndicator className='checkbox-indicator'>
+                <view className='checkbox-indicator-checked-item' />
+              </CheckboxIndicator>
+              <text className='form-label'>
+                I agree to the terms and conditions
+              </text>
+            </FormField>
+
+            <FormSubmitButton
+              onSubmit={(e) => {
+                console.info(e)
+                setSubmitted(true)
+              }}
+              className='submit-button'
+            >
+              <text className='submit-button-text'>Submit</text>
+            </FormSubmitButton>
+
+            <view className='form-divider' />
+
+            {submitted && (
+              <text className='form-submitted-hint'>Submitted ✓</text>
+            )}
+            <text className='form-values-display'>
+              {JSON.stringify(formValues, null, 2)}
+            </text>
+          </view>
+        </FormRoot>
+      </ScrollView>
+    </view>
+  )
+}
+
+root.render(<App />)
+
+export default App

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @lynx-example/lynx-ui-form
 
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/lynx-ui@3.130.1
+
+## 0.0.2
+
+### Patch Changes
+
+- Include variant source files and shared directories in published packages ([#101](https://github.com/lynx-family/lynx-ui/pull/101))
+
+- Adjust example styles to improve clarity in screen recordings. ([#102](https://github.com/lynx-family/lynx-ui/pull/102))
+
 ## 0.0.1
 
 ### Patch Changes

package/KeyboardAware/data.ts

@@ -0,0 +1,103 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+export type DemoItemType = 'block' | 'input' | 'textarea'
+
+interface DemoItemBase {
+  key: string
+  type: DemoItemType
+}
+
+export interface BlockItem extends DemoItemBase {
+  type: 'block'
+}
+
+export interface InputItem extends DemoItemBase {
+  type: 'input'
+  name: string
+  label: string
+  placeholder: string
+}
+
+export interface TextAreaItem extends DemoItemBase {
+  type: 'textarea'
+  name: string
+  label: string
+  placeholder: string
+}
+
+export type DemoItem = BlockItem | InputItem | TextAreaItem
+
+export const demoItems = [
+  { type: 'block', key: 'spacer-intro' },
+  {
+    type: 'input',
+    key: 'field-title',
+    name: 'title',
+    label: 'Title',
+    placeholder: 'Type here',
+  },
+
+  { type: 'block', key: 'spacer-1' },
+
+  {
+    type: 'input',
+    key: 'field-subtitle',
+    name: 'subtitle',
+    label: 'Subtitle',
+    placeholder: 'Type here',
+  },
+
+  { type: 'block', key: 'spacer-2' },
+
+  {
+    type: 'input',
+    key: 'field-email',
+    name: 'email',
+    label: 'Email',
+    placeholder: 'name@example.com',
+  },
+
+  { type: 'block', key: 'spacer-3' },
+
+  {
+    type: 'input',
+    key: 'field-phone',
+    name: 'phone',
+    label: 'Phone',
+    placeholder: '+1 234 567 890',
+  },
+
+  { type: 'block', key: 'spacer-4' },
+
+  {
+    type: 'input',
+    key: 'field-website',
+    name: 'website',
+    label: 'Website',
+    placeholder: 'https://',
+  },
+
+  { type: 'block', key: 'spacer-5' },
+
+  {
+    type: 'textarea',
+    key: 'field-description',
+    name: 'description',
+    label: 'Description(TextArea)',
+    placeholder: 'Write something...',
+  },
+
+  { type: 'block', key: 'spacer-outro' },
+
+  {
+    type: 'input',
+    key: 'field-tag',
+    name: 'tag',
+    label: 'Tag',
+    placeholder: 'e.g. demo',
+  },
+
+  { type: 'block', key: 'spacer-tail' },
+] as const satisfies readonly DemoItem[]

package/KeyboardAware/index.css

@@ -0,0 +1,205 @@
+@import "@lynx-js/luna-styles/index.css";
+
+/* =========================
+ * Container
+ * ========================= */
+
+.demo-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.demo-canvas {
+  width: 100%;
+  height: 100%;
+  padding: 64px;
+  padding-left: 40px;
+  padding-right: 40px;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  color: var(--content);
+  background-color: var(--canvas);
+  gap: 16px;
+}
+
+.luna-gradient-berry {
+  background: linear-gradient(
+    0deg,
+    var(--gradient-b),
+    var(--gradient-c)
+  );
+}
+
+/* =========================
+ * Form & Typography
+ * ========================= */
+
+.form-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--content);
+  margin-bottom: 6px;
+}
+
+.form-subtitle {
+  font-size: 14px;
+  color: var(--content-muted);
+}
+
+.form-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--line);
+  margin: 16px 0;
+}
+
+/* =========================
+ * Solid blocks
+ * ========================= */
+
+.block {
+  width: 100%;
+  height: 84px;
+  border-radius: 14px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  background: linear-gradient(
+    150deg,
+    var(--primary) 8.42%,
+    var(--primary-2) 81.71%
+  );
+}
+
+/* =========================
+ * Card
+ * ========================= */
+
+.form-card {
+  width: 100%;
+  padding: 14px;
+  border-radius: 12px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--line);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--content-2);
+}
+
+/* =========================
+ * Inputs (match Form/Basic)
+ * ========================= */
+
+.input-container {
+  width: 100%;
+  border-radius: 12px;
+  background-color: var(--canvas);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--line);
+}
+
+.form-input {
+  width: 100%;
+  font-size: 14px;
+  padding: 12px;
+  color: var(--content);
+  caret-color: var(--primary);
+}
+
+.form-input::placeholder {
+  color: var(--content-faint);
+}
+
+/* =========================
+ * TextArea
+ * ========================= */
+
+.form-textarea-wrap {
+  width: 100%;
+  padding: 12px;
+  border-radius: 12px;
+  background-color: var(--canvas);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--line);
+}
+
+.form-textarea {
+  height: 160px;
+  width: 100%;
+  color: var(--content);
+  caret-color: var(--primary);
+}
+
+.form-textarea::placeholder {
+  color: var(--content-faint);
+}
+
+/* =========================
+ * Submit + Values
+ * ========================= */
+
+.submit-button {
+  width: 100%;
+  height: 48px;
+  border-radius: 9999px;
+  background-color: var(--primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 12px 0;
+}
+
+.submit-button.ui-active {
+  background-color: var(--primary-2);
+}
+
+.submit-button-text {
+  font-size: 14px;
+  color: var(--primary-content);
+}
+
+.form-values-display {
+  margin-top: 8px;
+  padding: 12px;
+  border-radius: 12px;
+  background-color: var(--canvas);
+  border-width: 1px;
+  border-style: dashed;
+  border-color: var(--line);
+
+  opacity: 0.9;
+}
+
+.form-values-text {
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--content);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.bottom-spacer {
+  height: 24px;
+}