@bearmenu/ui 0.5.1 → 0.6.0

package/src/components/checkbox.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("renders an unchecked checkbox by default", () => {
+    render(<Checkbox aria-label="Accept" />);
+    const cb = screen.getByRole("checkbox", { name: /accept/i });
+    expect(cb).toHaveAttribute("data-state", "unchecked");
+  });
+
+  it("renders checked when `checked` is true", () => {
+    render(<Checkbox aria-label="Accept" checked onCheckedChange={() => {}} />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "checked");
+  });
+
+  it("renders indeterminate state", () => {
+    render(<Checkbox aria-label="x" checked="indeterminate" onCheckedChange={() => {}} />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("data-state", "indeterminate");
+  });
+
+  it("calls onCheckedChange when clicked", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Checkbox aria-label="x" onCheckedChange={onCheckedChange} />);
+    await user.click(screen.getByRole("checkbox"));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("calls onCheckedChange via Space key", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Checkbox aria-label="x" onCheckedChange={onCheckedChange} />);
+    const cb = screen.getByRole("checkbox");
+    cb.focus();
+    await user.keyboard(" ");
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it("does not fire when disabled", async () => {
+    const user = userEvent.setup();
+    const onCheckedChange = vi.fn();
+    render(<Checkbox aria-label="x" disabled onCheckedChange={onCheckedChange} />);
+    await user.click(screen.getByRole("checkbox"));
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it("forwards the aria-invalid attribute", () => {
+    render(<Checkbox aria-label="x" aria-invalid />);
+    expect(screen.getByRole("checkbox")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("merges className", () => {
+    render(<Checkbox aria-label="x" className="custom-class" />);
+    expect(screen.getByRole("checkbox").className).toContain("custom-class");
+  });
+});

package/src/components/checkbox.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { Check, Minus } from "lucide-react";
 import { cn } from "../lib/utils";
 
 const Checkbox = React.forwardRef<
@@ -11,14 +11,19 @@ const Checkbox = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
+    data-slot="checkbox"
     className={cn(
-      "peer h-5 w-5 shrink-0 rounded-md border border-border bg-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:shadow-lg data-[state=indeterminate]:shadow-primary/20 hover:border-primary/40 hover:shadow-md",
+      "peer size-5 shrink-0 rounded-md border border-border bg-background transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
       className
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check className="h-3.5 w-3.5 animate-in zoom-in-50 duration-200" />
+      {props.checked === "indeterminate" ? (
+        <Minus className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out" strokeWidth={3} />
+      ) : (
+        <Check className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out" strokeWidth={3} />
+      )}
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

package/src/components/circular-progress.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CircularProgress } from "./circular-progress";
+
+const meta = {
+  title: "Components/CircularProgress",
+  component: CircularProgress,
+  tags: ["autodocs"],
+} satisfies Meta<typeof CircularProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 60, showLabel: true } };
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <CircularProgress value={75} size={24} />
+      <CircularProgress value={75} size={40} />
+      <CircularProgress value={75} size={56} showLabel />
+      <CircularProgress value={75} size={80} showLabel strokeWidth={6} />
+    </div>
+  ),
+};
+
+export const Tones: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <CircularProgress value={60} tone="primary" showLabel />
+      <CircularProgress value={60} tone="success" showLabel />
+      <CircularProgress value={60} tone="warning" showLabel />
+      <CircularProgress value={60} tone="destructive" showLabel />
+    </div>
+  ),
+};
+
+export const Indeterminate: Story = {
+  args: { indeterminate: true, size: 40 },
+};

package/src/components/circular-progress.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+type CircularProgressProps = React.HTMLAttributes<HTMLDivElement> & {
+  value?: number;
+  max?: number;
+  size?: number;
+  strokeWidth?: number;
+  tone?: "primary" | "success" | "warning" | "destructive";
+  showLabel?: boolean;
+  /** Indeterminate spinner mode. */
+  indeterminate?: boolean;
+  /** Accessible label. Defaults to "Progress". */
+  label?: string;
+};
+
+const toneClasses = {
+  primary: "stroke-primary",
+  success: "stroke-success",
+  warning: "stroke-warning",
+  destructive: "stroke-destructive",
+};
+
+const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>(
+  (
+    {
+      className,
+      value = 0,
+      max = 100,
+      size = 40,
+      strokeWidth = 4,
+      tone = "primary",
+      showLabel = false,
+      indeterminate = false,
+      label = "Progress",
+      ...props
+    },
+    ref
+  ) => {
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    const percent = (clampedValue / max) * 100;
+    const dashOffset = circumference - (circumference * percent) / 100;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="circular-progress"
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={indeterminate ? undefined : clampedValue}
+        aria-label={label}
+        className={cn("relative inline-flex shrink-0 items-center justify-center", className)}
+        style={{ width: size, height: size }}
+        {...props}
+      >
+        <svg
+          width={size}
+          height={size}
+          viewBox={`0 0 ${size} ${size}`}
+          className={cn(indeterminate && "animate-spin")}
+        >
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+            className="stroke-muted"
+          />
+          <circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeLinecap="round"
+            className={cn("transition-[stroke-dashoffset] duration-300 ease-out", toneClasses[tone])}
+            style={{
+              strokeDasharray: circumference,
+              strokeDashoffset: indeterminate ? circumference * 0.75 : dashOffset,
+              transform: `rotate(-90deg)`,
+              transformOrigin: `${size / 2}px ${size / 2}px`,
+            }}
+          />
+        </svg>
+        {showLabel && !indeterminate && (
+          <span className="absolute text-xs font-medium tabular-nums text-foreground">
+            {Math.round(percent)}%
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+CircularProgress.displayName = "CircularProgress";
+
+export { CircularProgress };

package/src/components/collapsible.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
 import { Button } from "./button";
-import { ChevronsUpDown } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 
 const meta = {
   title: "Components/Collapsible",
@@ -18,8 +18,12 @@ export const Default: Story = {
       <div className="flex items-center justify-between space-x-4 px-4">
         <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
         <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm" className="w-9 p-0">
-            <ChevronsUpDown className="h-4 w-4" />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-9 p-0 [&[data-state=open]>svg]:rotate-180"
+          >
+            <ChevronDown className="h-4 w-4 transition-transform duration-200" />
             <span className="sr-only">Toggle</span>
           </Button>
         </CollapsibleTrigger>

package/src/components/combobox.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Combobox, type ComboboxOption } from "./combobox";
+
+const meta = {
+  title: "Components/Combobox",
+  component: Combobox,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const frameworks: ComboboxOption[] = [
+  { value: "next", label: "Next.js", description: "React framework" },
+  { value: "remix", label: "Remix", description: "Full-stack web framework" },
+  { value: "astro", label: "Astro", description: "Content-driven web framework" },
+  { value: "vite", label: "Vite", description: "Frontend tooling" },
+  { value: "nuxt", label: "Nuxt", description: "Vue framework" },
+];
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | undefined>("next");
+    return (
+      <div className="w-72">
+        <Combobox
+          options={frameworks}
+          value={value}
+          onValueChange={setValue}
+          placeholder="Pick a framework"
+        />
+      </div>
+    );
+  },
+};
+
+export const Empty: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | undefined>(undefined);
+    return (
+      <div className="w-72">
+        <Combobox
+          options={frameworks}
+          value={value}
+          onValueChange={setValue}
+          placeholder="No selection"
+        />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-72">
+      <Combobox
+        options={frameworks}
+        value="next"
+        onValueChange={() => {}}
+        disabled
+      />
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | undefined>(undefined);
+    return (
+      <div className="w-72">
+        <Combobox
+          options={[]}
+          value={value}
+          onValueChange={setValue}
+          loading
+          placeholder="Pick something…"
+        />
+      </div>
+    );
+  },
+};

package/src/components/combobox.test.tsx

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import { Combobox, type ComboboxOption } from "./combobox";
+
+const options: ComboboxOption[] = [
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "cherry", label: "Cherry", disabled: true },
+];
+
+function Wrap({
+  initial,
+  ...rest
+}: {
+  initial?: string;
+  clearable?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  onChange?: (v: string | undefined) => void;
+}) {
+  const [value, setValue] = React.useState<string | undefined>(initial);
+  return (
+    <Combobox
+      options={options}
+      value={value}
+      onValueChange={(v) => {
+        setValue(v);
+        rest.onChange?.(v);
+      }}
+      clearable={rest.clearable}
+      disabled={rest.disabled}
+      loading={rest.loading}
+    />
+  );
+}
+
+describe("Combobox", () => {
+  it("renders placeholder when nothing is selected", () => {
+    render(<Wrap />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Select...");
+  });
+
+  it("renders selected label when value provided", () => {
+    render(<Wrap initial="banana" />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Banana");
+  });
+
+  it("opens on trigger click and exposes aria-expanded=true", async () => {
+    const user = userEvent.setup();
+    render(<Wrap />);
+    const trigger = screen.getByRole("combobox");
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    await user.click(trigger);
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+  });
+
+  it("selects an option and closes the popover", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByText("Apple"));
+    expect(onChange).toHaveBeenCalledWith("apple");
+    expect(screen.getByRole("combobox")).toHaveTextContent("Apple");
+  });
+
+  it("clears selection when the same value is re-selected", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap initial="apple" onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: /apple/i }));
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it("disabled options cannot be selected via click", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap onChange={onChange} />);
+    await user.click(screen.getByRole("combobox"));
+    const cherry = screen.getByText("Cherry");
+    await user.click(cherry);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("shows clear button when value is set and clearable=true", async () => {
+    render(<Wrap initial="banana" />);
+    expect(screen.getByRole("button", { name: "Clear selection" })).toBeInTheDocument();
+  });
+
+  it("clear button resets the value", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Wrap initial="banana" onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: "Clear selection" }));
+    expect(onChange).toHaveBeenCalledWith(undefined);
+  });
+
+  it("hides clear button when clearable=false", () => {
+    render(<Wrap initial="banana" clearable={false} />);
+    expect(screen.queryByRole("button", { name: "Clear selection" })).toBeNull();
+  });
+
+  it("disables trigger when disabled=true", () => {
+    render(<Wrap initial="banana" disabled />);
+    expect((screen.getByRole("combobox") as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("shows loading state instead of empty message", async () => {
+    const user = userEvent.setup();
+    render(<Wrap loading />);
+    await user.click(screen.getByRole("combobox"));
+    expect(screen.getByText("Loading…")).toBeInTheDocument();
+  });
+});

package/src/components/combobox.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandLoading,
+} from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+interface ComboboxProps {
+  options: ComboboxOption[];
+  value: string | undefined;
+  onValueChange: (value: string | undefined) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  loadingText?: string;
+  className?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  /** Allow clearing the selection. Defaults to true. */
+  clearable?: boolean;
+  /** If set, external search drives the option list (controlled). */
+  onSearchChange?: (search: string) => void;
+}
+
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results.",
+  loadingText = "Loading…",
+  className,
+  disabled = false,
+  loading = false,
+  clearable = true,
+  onSearchChange,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const selected = options.find((o) => o.value === value);
+
+  return (
+    <div className={cn("relative", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            disabled={disabled}
+            className={cn("w-full justify-between font-normal", !selected && "text-muted-foreground", value && clearable && !disabled && "pr-16")}
+          >
+            <span className="truncate">{selected?.label || placeholder}</span>
+            <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="w-[var(--radix-popover-trigger-width)] p-0"
+        >
+          <Command shouldFilter={!onSearchChange}>
+            <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
+            <CommandList>
+              {loading ? (
+                <CommandLoading>{loadingText}</CommandLoading>
+              ) : (
+                <CommandEmpty>{emptyText}</CommandEmpty>
+              )}
+              <CommandGroup>
+                {options.map((option) => (
+                  <CommandItem
+                    key={option.value}
+                    value={option.value}
+                    disabled={option.disabled}
+                    onSelect={() => {
+                      onValueChange(option.value === value ? undefined : option.value);
+                      setOpen(false);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 size-4",
+                        value === option.value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <div className="flex min-w-0 flex-col">
+                      <span className="truncate">{option.label}</span>
+                      {option.description && (
+                        <span className="truncate text-xs text-muted-foreground">
+                          {option.description}
+                        </span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {value && clearable && !disabled && (
+        <button
+          type="button"
+          aria-label="Clear selection"
+          onClick={(e) => {
+            e.stopPropagation();
+            onValueChange(undefined);
+          }}
+          className="absolute right-9 top-1/2 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+        >
+          <X className="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export { Combobox };

package/src/components/command.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from "./command";
+
+function CommandSample({ onSelect }: { onSelect?: (v: string) => void }) {
+  return (
+    <Command>
+      <CommandInput placeholder="Search…" />
+      <CommandList>
+        <CommandEmpty>No results.</CommandEmpty>
+        <CommandGroup heading="Fruit">
+          <CommandItem value="apple" onSelect={() => onSelect?.("apple")}>
+            Apple
+          </CommandItem>
+          <CommandItem value="banana" onSelect={() => onSelect?.("banana")}>
+            Banana
+          </CommandItem>
+          <CommandItem value="cherry" onSelect={() => onSelect?.("cherry")}>
+            Cherry
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
+describe("Command", () => {
+  it("renders input with combobox role and options", () => {
+    render(<CommandSample />);
+    expect(screen.getByRole("combobox")).toBeInTheDocument();
+    expect(screen.getAllByRole("option")).toHaveLength(3);
+  });
+
+  it("filters items based on input typing", async () => {
+    const user = userEvent.setup();
+    render(<CommandSample />);
+    const input = screen.getByPlaceholderText("Search…");
+    await user.type(input, "ban");
+    const visible = screen
+      .getAllByRole("option")
+      .filter((el) => el.getAttribute("aria-disabled") !== "true" && el.getAttribute("data-hidden") !== "true");
+    expect(visible.map((el) => el.textContent)).toEqual(["Banana"]);
+  });
+
+  it("shows empty state when no items match", async () => {
+    const user = userEvent.setup();
+    render(<CommandSample />);
+    await user.type(screen.getByPlaceholderText("Search…"), "xyz");
+    expect(screen.getByText("No results.")).toBeInTheDocument();
+  });
+
+  it("supports ArrowDown / ArrowUp navigation via aria-selected", async () => {
+    const user = userEvent.setup();
+    render(<CommandSample />);
+    const input = screen.getByRole("combobox");
+    input.focus();
+    // First item is selected by default
+    const options = screen.getAllByRole("option");
+    expect(options[0].getAttribute("aria-selected")).toBe("true");
+    await user.keyboard("{ArrowDown}");
+    expect(screen.getAllByRole("option")[1].getAttribute("aria-selected")).toBe("true");
+    await user.keyboard("{ArrowUp}");
+    expect(screen.getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("calls onSelect when item is clicked", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<CommandSample onSelect={onSelect} />);
+    await user.click(screen.getByText("Banana"));
+    expect(onSelect).toHaveBeenCalledWith("banana");
+  });
+
+  it("calls onSelect when Enter is pressed on highlighted item", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<CommandSample onSelect={onSelect} />);
+    const input = screen.getByRole("combobox");
+    input.focus();
+    await user.keyboard("{ArrowDown}{Enter}");
+    expect(onSelect).toHaveBeenCalledWith("banana");
+  });
+});