v3.0.0-alpha.34

1"use client";2// Adapted from HeroUI v3.2.6, Apache-2.0.3import { Description, Input, Label } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { useId } from "react";6import { demoStyles } from "../../demo.stylex";7
8export function Basic() {9  const id = useId();10  return (11    <div {...stylex.props(demoStyles.column)}>12      <Label htmlFor={id}>Email</Label>13      <Input14        aria-describedby={`${id}-description`}15        xstyle={demoStyles.field}16        id={id}17        placeholder="[email protected]"18        type="email"19      />20      <Description id={`${id}-description`}>21        We'll never share your email with anyone else.22      </Description>23    </div>24  );25}

1"use client";2// Adapted from HeroUI v3.2.6, Apache-2.0.3import { FieldError, Input, Label, TextField } from "@lenso/ui";4import { useState } from "react";5import { demoStyles } from "../../demo.stylex";6
7export function Basic() {8  const [value, setValue] = useState("jr");9  const invalid = value.length > 0 && value.length < 3;10  return (11    <TextField xstyle={demoStyles.field} invalid={invalid}>12      <Label>Username</Label>13      <Input placeholder="Enter username" value={value} onValueChange={setValue} />14      {invalid && <FieldError match>Username must be at least 3 characters</FieldError>}15    </TextField>16  );17}

1"use client";2// Adapted from HeroUI v3.2.6, Apache-2.0.3import { FloppyDisk } from "@gravity-ui/icons";4import {5  Button,6  Description,7  FieldError,8  FieldGroup,9  Fieldset,10  Form,11  Input,12  Label,13  TextArea,14  TextField,15} from "@lenso/ui";16import { useId, type FormEvent } from "react";17import { demoStyles } from "../../demo.stylex";18
19export function Basic() {20  const descriptionId = useId();21  function onSubmit(event: FormEvent<HTMLFormElement>) {22    event.preventDefault();23    alert("Form submitted successfully!");24  }25  return (26    <Form xstyle={demoStyles.wideColumn} onSubmit={onSubmit}>27      <Fieldset aria-describedby={descriptionId}>28        <Fieldset.Legend>Profile Settings</Fieldset.Legend>29        <Description id={descriptionId}>Update your profile information.</Description>30        <FieldGroup>31          <TextField32            name="name"33            validate={(value) =>34              String(value).length < 3 ? "Name must be at least 3 characters" : null35            }36          >37            <Label required>Name</Label>38            <Input required placeholder="John Doe" />39            <FieldError />40          </TextField>41          <TextField name="email">42            <Label required>Email</Label>43            <Input required type="email" placeholder="[email protected]" />44            <FieldError />45          </TextField>46          <TextField47            name="bio"48            validate={(value) =>49              String(value).length < 10 ? "Bio must be at least 10 characters" : null50            }51          >52            <Label required>Bio</Label>53            <TextArea required placeholder="Tell us about yourself..." />54            <Description>Minimum 10 characters</Description>55            <FieldError />56          </TextField>57        </FieldGroup>58        <Fieldset.Actions>59          <Button type="submit">60            <FloppyDisk aria-hidden="true" />61            Save changes62          </Button>63          <Button type="reset" variant="secondary">64            Cancel65          </Button>66        </Fieldset.Actions>67      </Fieldset>68    </Form>69  );70}

1"use client";2// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.3import { Check } from "@gravity-ui/icons";4import { Button, Description, FieldError, Form, Input, Label, TextField } from "@lenso/ui";5import type { FormEvent } from "react";6import * as stylex from "@stylexjs/stylex";7
8const styles = stylex.create({9  form: { display: "flex", flexDirection: "column", width: 384, maxWidth: "100%", gap: 16 },10  actions: { display: "flex", gap: 8 },11});12
13export function Basic() {14  function onSubmit(event: FormEvent<HTMLFormElement>) {15    event.preventDefault();16    const data = Object.fromEntries(new FormData(event.currentTarget).entries());17    alert(`Form submitted with: ${JSON.stringify(data, null, 2)}`);18  }19  return (20    <Form xstyle={styles.form} onSubmit={onSubmit}>21      <TextField22        name="email"23        validate={(value) =>24          /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(String(value))25            ? null26            : "Please enter a valid email address"27        }28      >29        <Label required>Email</Label>30        <Input required type="email" placeholder="[email protected]" />31        <FieldError />32      </TextField>33      <TextField34        name="password"35        validate={(value) => {36          if (String(value).length < 8) return "Password must be at least 8 characters";37          if (!/[A-Z]/.test(String(value)))38            return "Password must contain at least one uppercase letter";39          if (!/[0-9]/.test(String(value))) return "Password must contain at least one number";40          return null;41        }}42      >43        <Label required>Password</Label>44        <Input required minLength={8} type="password" placeholder="Enter your password" />45        <Description>Must be at least 8 characters with 1 uppercase and 1 number</Description>46        <FieldError />47      </TextField>48      <div {...stylex.props(styles.actions)}>49        <Button type="submit">50          <Check aria-hidden="true" />51          Submit52        </Button>53        <Button type="reset" variant="secondary">54          Reset55        </Button>56      </div>57    </Form>58  );59}

1"use client";2
3import { Input } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6// HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.7const styles = stylex.create({ field: { width: 256 } });8export function Basic() {9  return <Input aria-label="Name" xstyle={styles.field} placeholder="Enter your name" />;10}

1"use client";2// Adapted from HeroUI v3.2.6, Apache-2.0.3import { Input, Label } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { useId } from "react";6import { demoStyles } from "../../demo.stylex";7
8export function Basic() {9  const id = useId();10  return (11    <div {...stylex.props(demoStyles.column)}>12      <Label htmlFor={id}>Name</Label>13      <Input xstyle={demoStyles.field} id={id} placeholder="Enter your name" type="text" />14    </div>15  );16}

1export { Basic } from "./examples";

1"use client";2
3// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.4import { Input, Label, TextField } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6const styles = stylex.create({ field: { width: "100%", maxWidth: 256 } });7
8export function Basic() {9  return (10    <TextField name="email" xstyle={styles.field}>11      <Label>Email</Label>12      <Input type="email" placeholder="Enter your email" />13    </TextField>14  );15}

1"use client";2
3// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.4import { TextArea } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({ field: { width: 384, height: 128 } });8export function Basic() {9  return (10    <TextArea11      aria-label="Quick project update"12      xstyle={styles.field}13      placeholder="Share a quick project update..."14    />15  );16}