Select

import { Select } from "@nexera-ui/react";
import { LuBuilding2 } from "react-icons/lu";

const sizes = ["sm", "md", "lg"] as const;

export function Sizes() {
  return (
    <div className="flex flex-col gap-6">
      {sizes.map((size) => (
        <Select
          placeholder="Select department"
          description="Used for approvals and reports."
          key={size}
          size={size}
          label={`Department (${size})`}
          leadingIcon={<LuBuilding2 />}
          {...(size === "sm" ? {} : { defaultValue: "eng" })}
        />
      ))}
    </div>
  );
}

import { Select } from "@nexera-ui/react";

export function States() {
  return (
    <div className="flex flex-col gap-6">
      <Select
        label="Department"
        placeholder="Select department"
        description="Used for approvals and reports."
        defaultValue="eng"
      />
      <Select
        label="Department"
        placeholder="Select department"
        description="Used for approvals and reports."
        isDisabled
        defaultValue="design"
      />
      <Select
        label="Department"
        placeholder="Select department"
        description="Used for approvals and reports."
        isInvalid
        errorMessage="Select a department to continue."
      />
    </div>
  );
}

import { Select, SelectGroupLabel, SelectOption, SelectSection } from "@nexera-ui/react";
import { LuBuilding2 } from "react-icons/lu";

export function OpenList() {
  return (
    <div className="min-h-96">
      <Select label="Office" defaultValue="lahore" defaultOpen leadingIcon={<LuBuilding2 />}>
        <SelectSection>
          <SelectGroupLabel label="Pakistan" />
          <SelectOption
            id="lahore"
            label="Lahore HQ"
            description="Gulberg III"
            leading={<LuBuilding2 />}
          />
          <SelectOption id="karachi" label="Karachi" leading={<LuBuilding2 />} />
        </SelectSection>
        <SelectSection>
          <SelectGroupLabel label="Gulf" />
          <SelectOption id="dubai" label="Dubai" leading={<LuBuilding2 />} />
          <SelectOption
            id="doha"
            label="Doha (opening 2027)"
            leading={<LuBuilding2 />}
            isDisabled
          />
        </SelectSection>
      </Select>
    </div>
  );
}

import { Select, SelectOption } from "@nexera-ui/react";

function Departments() {
  return (
    <>
      <SelectOption id="eng" label="Engineering" />
      <SelectOption id="design" label="Design" />
      <SelectOption id="finance" label="Finance" isDisabled />
      <SelectOption id="people" label="People Operations" />
      <SelectOption id="sales" label="Sales" />
    </>
  );
}

export function MultipleSelection() {
  return (
    <Select
      label="Teams"
      placeholder="Select teams"
      selectionMode="multiple"
      defaultValue={["eng", "design"]}
      description="Members of these teams get the announcement."
    >
      <Departments />
    </Select>
  );
}

import { useState } from "react";
import { type Key } from "react-aria-components";
import { Select, SelectOption } from "@nexera-ui/react";

function Departments() {
  return (
    <>
      <SelectOption id="eng" label="Engineering" />
      <SelectOption id="design" label="Design" />
      <SelectOption id="finance" label="Finance" isDisabled />
      <SelectOption id="people" label="People Operations" />
      <SelectOption id="sales" label="Sales" />
    </>
  );
}

export function Controlled() {
  function Example() {
    const [value, setValue] = useState<Key | null>("people");
    return (
      <div className="flex flex-col gap-3">
        <Select label="Department" value={value} onChange={setValue}>
          <Departments />
        </Select>
        <span className="text-body-small text-secondary">Value: {String(value)}</span>
      </div>
    );
  }
  return <Example />;
}

import { Select, SelectOption } from "@nexera-ui/react";
import { LuCalendarDays } from "react-icons/lu";

const platforms = ["web", "ios", "android"] as const;

function LeaveTypes() {
  return (
    <>
      <SelectOption id="annual" label="Annual leave" description="12 days available" />
      <SelectOption id="sick" label="Sick leave" />
      <SelectOption id="unpaid" label="Unpaid leave" />
    </>
  );
}

export function Platforms() {
  return (
    <div className="flex flex-wrap items-start gap-8">
      {platforms.map((platform) => (
        <div key={platform} className="w-80 max-w-full">
          <Select
            platform={platform}
            label={`Leave type (${platform})`}
            placeholder="Choose leave type"
            description="12 days available"
            {...(platform === "web" ? {} : { leadingIcon: <LuCalendarDays /> })}
          >
            <LeaveTypes />
          </Select>
        </div>
      ))}
    </div>
  );
}

import { Select, SelectOption } from "@nexera-ui/react";

export function LongLabel() {
  return (
    <div className="max-w-[14rem]">
      <Select
        label="Department responsible for approving travel and expense reports"
        description="The approver is notified by email and in the app within five minutes."
        defaultValue="rnd"
      >
        <SelectOption id="rnd" label="Research, development and quality assurance for mobile" />
        <SelectOption id="ops" label="Operations" />
      </Select>
    </div>
  );
}

import { Select, SelectOption } from "@nexera-ui/react";
import { LuBuilding2 } from "react-icons/lu";

export function RightToLeft() {
  return (
    <div className="flex flex-col gap-6">
      <Select
        label="القسم"
        placeholder="اختر القسم"
        description="يُستخدم للموافقات والتقارير."
        leadingIcon={<LuBuilding2 />}
      >
        <SelectOption id="eng" label="الهندسة" />
        <SelectOption id="design" label="التصميم" />
      </Select>
      <Select label="نوع الإجازة" platform="ios" isInvalid errorMessage="اختر نوع الإجازة.">
        <SelectOption id="annual" label="إجازة سنوية" />
      </Select>
    </div>
  );
}

import {
  FieldLabel,
  SelectOption,
  SelectPopover,
  SelectRoot,
  SelectTrigger,
} from "@nexera-ui/react";

export function Composition() {
  const people = [
    { id: "omar", name: "Omar Farooq" },
    { id: "sara", name: "Sara Khan" },
    { id: "ali", name: "Ali Raza" },
  ];
  return (
    <SelectRoot size="md" defaultValue="sara">
      <FieldLabel>Approver</FieldLabel>
      <SelectTrigger />
      <SelectPopover items={people} placement="top start">
        {(person) => <SelectOption id={person.id} label={person.name} />}
      </SelectPopover>
    </SelectRoot>
  );
}

import { useState } from "react";
import { Card, Select, SelectOption } from "@nexera-ui/react";

function DependentLocationsDemo() {
  const locations = {
    pakistan: ["Karachi", "Lahore", "Islamabad"],
    uae: ["Dubai", "Abu Dhabi", "Sharjah"],
    germany: ["Berlin", "Hamburg", "Munich"],
  };
  const [country, setCountry] = useState<keyof typeof locations>("pakistan");
  const [city, setCity] = useState("Karachi");
  return (
    <div className="w-[28rem] max-w-full">
      <Card title="Find your next workspace" body="Country and city selectors stay in sync.">
        <div className="mt-4 flex flex-col gap-4">
          <Select
            label="Country"
            value={country}
            onChange={(key) => {
              if (key === "pakistan" || key === "uae" || key === "germany") {
                setCountry(key);
                setCity(locations[key][0] ?? "");
              }
            }}
          >
            <SelectOption id="pakistan" label="Pakistan" />
            <SelectOption id="uae" label="United Arab Emirates" />
            <SelectOption id="germany" label="Germany" />
          </Select>
          <Select
            label="City"
            value={city}
            onChange={(key) => {
              if (key !== null) setCity(String(key));
            }}
          >
            {locations[country].map((name) => (
              <SelectOption key={name} id={name} label={name} />
            ))}
          </Select>
          <p
            role="status"
            className="m-0 rounded-lg bg-brand-subtle p-3 text-body-default text-primary"
          >
            Showing workspaces in {city}.
          </p>
        </div>
      </Card>
    </div>
  );
}

const DependentLocations = { render: () => <DependentLocationsDemo /> };