Select

export const AllStates: Story = {
  render: () => (
    <div className="flex max-w-sm flex-col gap-4">
      <div className="space-y-1.5">
        <Label htmlFor="select-normal">Normal</Label>
        <Select>
          <Select.Trigger id="select-normal">
            <Select.Value placeholder="Normal select" />
          </Select.Trigger>
          <Select.Content>
            <Select.Item value="1">Option 1</Select.Item>
            <Select.Item value="2">Option 2</Select.Item>
          </Select.Content>
        </Select>
      </div>

      <div className="space-y-1.5">
        <Label htmlFor="select-disabled">Disabled</Label>
        <Select disabled>
          <Select.Trigger id="select-disabled">
            <Select.Value placeholder="Disabled select" />
          </Select.Trigger>
          <Select.Content>
            <Select.Item value="1">Option 1</Select.Item>
          </Select.Content>
        </Select>
      </div>

      <div className="space-y-1.5">
        <Label htmlFor="select-invalid">Invalid</Label>
        <Select>
          <Select.Trigger id="select-invalid" aria-invalid={true}>
            <Select.Value placeholder="Invalid select" />
          </Select.Trigger>
          <Select.Content>
            <Select.Item value="1">Option 1</Select.Item>
          </Select.Content>
        </Select>
      </div>
    </div>
  ),
};

export const WithGroups: Story = {
  render: () => (
    <div className="max-w-sm space-y-1.5">
      <Label htmlFor="select-with-groups">Food category</Label>
      <Select>
        <Select.Trigger id="select-with-groups">
          <Select.Value placeholder="Select food" />
        </Select.Trigger>
        <Select.Content>
          <Select.Group>
            <Select.Label>Fruits</Select.Label>
            <Select.Item value="apple">Apple</Select.Item>
            <Select.Item value="banana">Banana</Select.Item>
          </Select.Group>
          <Select.Separator />
          <Select.Group>
            <Select.Label>Vegetables</Select.Label>
            <Select.Item value="carrot">Carrot</Select.Item>
            <Select.Item value="potato">Potato</Select.Item>
          </Select.Group>
        </Select.Content>
      </Select>
    </div>
  ),
};