v3.2.0

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX and native Base UI Select. */3import { Calendar } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { CalendarHeader, CalendarGrid, DurationSelect, layout } from "./demo-parts";7export function WeekView() {8  const [weeks, setWeeks] = useState(1);9  return (10    <div {...stylex.props(layout.controlsStack)}>11      <DurationSelect unit="weeks" value={weeks} onChange={setWeeks} />12      <Calendar aria-label="Week view" visibleDuration={{ weeks }}>13        <CalendarHeader />14        <CalendarGrid />15      </Calendar>16    </div>17  );18}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX and native Base UI Select. */3import { Calendar } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { CalendarHeader, CalendarGrid, DurationSelect, layout } from "./demo-parts";7export function DayView() {8  const [days, setDays] = useState(5);9  return (10    <div {...stylex.props(layout.controlsStack)}>11      <DurationSelect unit="days" value={days} onChange={setDays} />12      <Calendar aria-label="Day view" visibleDuration={{ days }}>13        <CalendarHeader />14        <CalendarGrid />15      </Calendar>16    </div>17  );18}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { Calendar } from "@lenso/ui";4import type { DateValue } from "@internationalized/date";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { CalendarNote } from "./demo-parts";8
9const styles = stylex.create({10  root: { display: "flex", flexDirection: "column", alignItems: "center", gap: 16 },11  description: { textAlign: "center" },12});13
14export function MultipleSelection() {15  const [value, setValue] = useState<readonly DateValue[]>([]);16  return (17    <div {...stylex.props(styles.root)}>18      <Calendar aria-label="Event dates" selectionMode="multiple" value={value} onChange={setValue}>19        <Calendar.Header>20          <Calendar.Heading />21          <Calendar.NavButton slot="previous" />22          <Calendar.NavButton slot="next" />23        </Calendar.Header>24        <Calendar.Grid>25          <Calendar.GridHeader>26            {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}27          </Calendar.GridHeader>28          <Calendar.GridBody>{(date) => <Calendar.Cell date={date} />}</Calendar.GridBody>29        </Calendar.Grid>30      </Calendar>31      <CalendarNote>32        {value.length ? `${value.length} date(s) selected` : "Select multiple dates"}33      </CalendarNote>34    </div>35  );36}

1"use client";2/** HeroUI v3.2.6 adaptation. SPDX-License-Identifier: Apache-2.0 */3import { Autocomplete } from "@lenso/ui";4import { useRef, useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { NativeAutocomplete, OptionContent, type Option } from "./_native";7
8const firstNames = [9  "Emma",10  "Liam",11  "Olivia",12  "Noah",13  "Ava",14  "James",15  "Sophia",16  "Oliver",17  "Isabella",18  "Lucas",19  "Mia",20  "Ethan",21  "Charlotte",22  "Mason",23  "Amelia",24  "Logan",25  "Harper",26  "Alexander",27  "Ella",28  "Benjamin",29];30const lastNames = [31  "Smith",32  "Johnson",33  "Williams",34  "Brown",35  "Jones",36  "Garcia",37  "Miller",38  "Davis",39  "Rodriguez",40  "Martinez",41  "Anderson",42  "Taylor",43  "Thomas",44  "Jackson",45  "White",46  "Harris",47  "Clark",48  "Lewis",49  "Robinson",50  "Walker",51];52const allUsers: Option[] = Array.from({ length: 1000 }, (_, index) => {53  const first = firstNames[index % firstNames.length] ?? "";54  const last = lastNames[Math.floor(index / firstNames.length) % lastNames.length] ?? "";55  return {56    id: String(index + 1),57    name: `${first} ${last}`,58    email: `${first.toLowerCase()}.${last.toLowerCase()}@acme.com`,59  };60});61const virtualStyles = stylex.create({62  field: { width: 300 },63  list: { height: 300, overflowY: "auto", position: "relative", padding: 0 },64  row: { height: 50, boxSizing: "border-box" },65  spacer: (height: number) => ({ height }),66});67export function Virtualization() {68  const { contains } = Autocomplete.useFilter({ sensitivity: "base" });69  const [query, setQuery] = useState("");70  const [scrollTop, setScrollTop] = useState(0);71  const listRef = useRef<HTMLDivElement>(null);72  const filtered = allUsers.filter(73    (user) => contains(user.name, query) || contains(user.email ?? "", query),74  );75  const start = Math.max(0, Math.floor(scrollTop / 50) - 3);76  const end = Math.min(filtered.length, start + 14);77  const onHighlight = (item: Option | undefined) => {78    const index = filtered.findIndex((user) => user.id === item?.id);79    const element = listRef.current;80    if (index < 0 || !element) return;81    const top = index * 50;82    if (top < element.scrollTop) element.scrollTop = top;83    else if (top + 50 > element.scrollTop + 300) element.scrollTop = top - 250;84    setScrollTop(element.scrollTop);85  };86  return (87    <NativeAutocomplete88      items={allUsers}89      xstyle={virtualStyles.field}90      filteredItems={filtered}91      virtualized92      onItemHighlighted={onHighlight}93      label="User"94      placeholder="Select a user"95      searchLabel="Search users"96      searchPlaceholder="Search users..."97      inputValue={query}98      onInputValueChange={(next) => {99        setQuery(next);100        setScrollTop(0);101        if (listRef.current) listRef.current.scrollTop = 0;102      }}103      list={104        <Autocomplete.List105          ref={listRef}106          xstyle={virtualStyles.list}107          onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}108        >109          <div aria-hidden="true" {...stylex.props(virtualStyles.spacer(start * 50))} />110          {filtered.slice(start, end).map((item, offset) => (111            <Autocomplete.Item112              key={item.id}113              value={item}114              index={start + offset}115              aria-setsize={filtered.length}116              aria-posinset={start + offset + 1}117              xstyle={virtualStyles.row}118            >119              <OptionContent item={item} />120              <Autocomplete.ItemIndicator />121            </Autocomplete.Item>122          ))}123          <div124            aria-hidden="true"125            {...stylex.props(virtualStyles.spacer((filtered.length - end) * 50))}126          />127        </Autocomplete.List>128      }129    />130  );131}

1"use client";2// HeroUI v3.2.6 sorting adaptation (Apache-2.0).3import { useState } from "react";4import { Table, type SortDescriptor } from "@lenso/ui";5import { Headers, Rows, styles, users, type User } from "./data";6export function Sorting() {7  const [sort, setSort] = useState<SortDescriptor>({ column: "name", direction: "ascending" });8  const sorted = users9    .slice(0, 5)10    .sort(11      (a, b) =>12        String(a[sort.column as keyof User]).localeCompare(String(b[sort.column as keyof User])) *13        (sort.direction === "ascending" ? 1 : -1),14    );15  return (16    <Table>17      <Table.ScrollContainer>18        <Table.Content19          aria-label="Sortable table"20          xstyle={styles.content}21          sortDescriptor={sort}22          onSortChange={setSort}23        >24          <Headers sorting />25          <Table.Body>26            <Rows items={sorted} />27          </Table.Body>28        </Table.Content>29      </Table.ScrollContainer>30    </Table>31  );32}