@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/calendar.js

@@ -0,0 +1,257 @@
+"use client";
+// src/calendar.tsx
+import {
+  calendar as calendarPrimitive
+} from "@ui-sdk/core/calendar";
+import * as React from "react";
+import { CalendarContext, GridContext } from "./calendar-context.js";
+import {
+  renderElement,
+  slotIn,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createCalendarController } from "@ui-sdk/core/calendar";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function useCalendar(part) {
+  const context = React.useContext(CalendarContext);
+  if (!context) {
+    throw new Error(
+      `${part} must be used inside <Calendar> or <DatePickerContent>.`
+    );
+  }
+  return context;
+}
+function useGrid(part) {
+  const context = React.useContext(GridContext);
+  if (!context) {
+    throw new Error(`${part} must be used inside <CalendarGrid>.`);
+  }
+  return context;
+}
+function Calendar({
+  mode,
+  value,
+  defaultValue,
+  onValueChange,
+  month,
+  defaultMonth,
+  onMonthChange,
+  min,
+  max,
+  unavailable,
+  disabled,
+  readOnly,
+  deselectable,
+  onFocusedChange,
+  onAnchorChange,
+  months,
+  pageBy,
+  locale,
+  weekStartsOn,
+  weekdayFormat,
+  monthFormat,
+  fixedWeeks,
+  showOutsideDays,
+  today,
+  timeZone,
+  minDays,
+  maxDays,
+  allowUnavailable,
+  controller,
+  debug,
+  children,
+  ...props
+}) {
+  const calendar = usePrimitive(calendarPrimitive, {
+    mode,
+    value,
+    defaultValue,
+    onValueChange,
+    month,
+    defaultMonth,
+    onMonthChange,
+    min,
+    max,
+    unavailable,
+    disabled,
+    readOnly,
+    deselectable,
+    onFocusedChange,
+    onAnchorChange,
+    months,
+    pageBy,
+    locale,
+    weekStartsOn,
+    weekdayFormat,
+    monthFormat,
+    fixedWeeks,
+    showOutsideDays,
+    today,
+    timeZone,
+    minDays,
+    maxDays,
+    allowUnavailable,
+    controller,
+    debug
+  });
+  const content = children === void 0 ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(CalendarPrevious, {}),
+      /* @__PURE__ */ jsx(CalendarHeading, {}),
+      /* @__PURE__ */ jsx(CalendarNext, {})
+    ] }),
+    Array.from(
+      { length: Math.max(1, Math.floor(months ?? 1) || 1) },
+      (_, offset) => /* @__PURE__ */ jsx(CalendarGrid, { offset }, offset)
+    )
+  ] }) : children;
+  return (
+    // In a context of its own, since a Date Picker renders the same parts over its own primitive.
+    /* @__PURE__ */ jsx(CalendarContext.Provider, { value: calendar, children: usePart(calendar, "root", {}, { ...props, children: content }) })
+  );
+}
+function CalendarHeading({
+  children = label,
+  ...props
+}) {
+  return usePart(
+    useCalendar("CalendarHeading"),
+    "heading",
+    {},
+    { ...props, children },
+    "h2"
+  );
+}
+var label = (state) => state.label;
+function useSelect(name, part, { render, children = options, ...props }) {
+  const select = ({ value, ...attrs }, state) => renderElement("select", { ...attrs, defaultValue: value }, render, state);
+  return usePart(
+    useCalendar(part),
+    name,
+    {},
+    { ...props, children, render: select },
+    "select"
+  );
+}
+var options = (state) => state.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value));
+function CalendarMonthSelect(props) {
+  return useSelect("month-select", "CalendarMonthSelect", props);
+}
+function CalendarYearSelect(props) {
+  return useSelect("year-select", "CalendarYearSelect", props);
+}
+function useStep(name, part, { children, ...props }) {
+  const content = children ?? (name === "previous" ? "\u2039" : "\u203A");
+  return usePart(
+    useCalendar(part),
+    name,
+    {},
+    { ...props, children: content },
+    "button"
+  );
+}
+function CalendarPrevious(props) {
+  return useStep("previous", "CalendarPrevious", props);
+}
+function CalendarNext(props) {
+  return useStep("next", "CalendarNext", props);
+}
+function CalendarGrid({
+  offset = 0,
+  children = defaultGrid,
+  ...props
+}) {
+  const content = (state) => /* @__PURE__ */ jsx(GridScope, { offset, state, children: typeof children === "function" ? children(state) : children });
+  return usePart(
+    useCalendar("CalendarGrid"),
+    "grid",
+    { offset, id: String(offset) },
+    { ...props, children: content },
+    "table"
+  );
+}
+var defaultGrid = /* @__PURE__ */ jsxs(Fragment2, { children: [
+  /* @__PURE__ */ jsx(CalendarWeekdays, {}),
+  /* @__PURE__ */ jsx(CalendarWeeks, {})
+] });
+function GridScope({
+  offset,
+  state,
+  children
+}) {
+  const grid = React.useMemo(
+    () => ({ offset, state }),
+    [offset, state.month, state.weeks]
+  );
+  return /* @__PURE__ */ jsx(GridContext.Provider, { value: grid, children });
+}
+function CalendarWeekdays({
+  children,
+  ...props
+}) {
+  const calendar = useCalendar("CalendarWeekdays");
+  const { offset, state } = useGrid("CalendarWeekdays");
+  return /* @__PURE__ */ jsx("thead", { ...props, children: /* @__PURE__ */ jsx("tr", { ...slotIn(calendar, "weekdays", { id: String(offset) }), children: state.weekdays.map((weekday, index) => /* @__PURE__ */ jsx(React.Fragment, { children: children ? children(index) : /* @__PURE__ */ jsx(CalendarWeekday, { index }) }, weekday)) }) });
+}
+function CalendarWeekday({
+  index,
+  children = label,
+  ...props
+}) {
+  const { offset } = useGrid("CalendarWeekday");
+  const part = { index, id: `${offset}-${index}` };
+  return usePart(
+    useCalendar("CalendarWeekday"),
+    "weekday",
+    part,
+    { scope: "col", ...props, children },
+    "th"
+  );
+}
+function CalendarWeeks({
+  children,
+  ...props
+}) {
+  const calendar = useCalendar("CalendarWeeks");
+  const { offset, state } = useGrid("CalendarWeeks");
+  return /* @__PURE__ */ jsx("tbody", { ...props, children: state.weeks.map((week, index) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ...slotIn(calendar, "week", { id: `${offset}-${index}` }),
+      children: week.map(
+        (cell) => cell.hidden ? /* @__PURE__ */ jsx("td", {}, cell.date) : /* @__PURE__ */ jsx(React.Fragment, { children: children ? children(cell) : /* @__PURE__ */ jsx(CalendarDay, { value: cell.date }) }, cell.date)
+      )
+    },
+    week[0].date
+  )) });
+}
+function CalendarDay({
+  value,
+  children = label,
+  ...props
+}) {
+  const grid = React.useContext(GridContext);
+  const part = { value, offset: grid?.offset ?? 0 };
+  return usePart(
+    useCalendar("CalendarDay"),
+    "day",
+    part,
+    { ...props, children },
+    "td"
+  );
+}
+export {
+  Calendar,
+  CalendarDay,
+  CalendarGrid,
+  CalendarHeading,
+  CalendarMonthSelect,
+  CalendarNext,
+  CalendarPrevious,
+  CalendarWeekday,
+  CalendarWeekdays,
+  CalendarWeeks,
+  CalendarYearSelect,
+  createCalendarController
+};

package/dist/carousel.d.ts

@@ -0,0 +1,52 @@
+import { type CarouselControlProps, type CarouselIndicatorGroupState, type CarouselIndicatorProps, type CarouselIndicatorState, type CarouselOptions, type CarouselPlayToggleState, type CarouselState, type CarouselStepState } from "@ui-sdk/core/carousel";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * A region of slides that scroll a page at a time. Name it with `aria-label`.
+ * @stable
+ */
+declare function Carousel({ page, defaultPage, onPageChange, onPageChangeComplete, playing, defaultPlaying, onPlayingChange, interval, orientation, align, slidesPerPage, loop, skipSnaps, dragFree, drag, controller, debug, ...props }: CarouselOptions & PartProps<"div", CarouselState>): import("react").JSX.Element | null;
+/**
+ * The scrolling window onto the slides. Touch, wheels and keys scroll it natively.
+ * @stable
+ */
+declare const CarouselViewport: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/carousel").CarouselPrimitive, "viewport", "div">;
+/**
+ * The row, or column, of slides inside the viewport.
+ * @stable
+ */
+declare const CarouselContent: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/carousel").CarouselPrimitive, "content", "div">;
+/**
+ * One slide. It's labelled "1 of 5" unless it has an `aria-label`, and inert while out of view.
+ * @stable
+ */
+declare const CarouselItem: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/carousel").CarouselPrimitive, "item", "div">;
+type StepProps = Omit<PartProps<"button", CarouselStepState>, "value" | "defaultValue" | "onChange"> & CarouselControlProps;
+/**
+ * Goes to the previous page. `aria-disabled` on the first page without `loop`, where it stays focusable.
+ * @stable
+ */
+declare const CarouselPrevious: ({ controller, ...props }: StepProps) => import("react").JSX.Element;
+/**
+ * Goes to the next page. `aria-disabled` on the last page without `loop`, where it stays focusable.
+ * @stable
+ */
+declare const CarouselNext: ({ controller, ...props }: StepProps) => import("react").JSX.Element;
+/**
+ * The indicators, as a tablist with one tab stop. Its children can be a function of the state.
+ * @stable
+ */
+declare function CarouselIndicatorGroup({ controller, ...props }: PartProps<"div", CarouselIndicatorGroupState> & CarouselControlProps): import("react").JSX.Element;
+type IndicatorProps = Omit<PartProps<"button", CarouselIndicatorState>, "value" | "defaultValue" | "onChange"> & CarouselIndicatorProps;
+/**
+ * Shows a page and goes to it. Indicators past the page count hide themselves.
+ * @stable
+ */
+declare function CarouselIndicator(props: IndicatorProps): import("react").JSX.Element;
+/**
+ * Starts and stops rotation. Label it from `playing` in its state, as the carousel pattern asks.
+ * @stable
+ */
+declare function CarouselPlayToggle({ controller, ...props }: Omit<PartProps<"button", CarouselPlayToggleState>, "value" | "defaultValue" | "onChange"> & CarouselControlProps): import("react").JSX.Element;
+export { createCarouselController } from "@ui-sdk/core/carousel";
+export type { CarouselAlign, CarouselApi, CarouselContentState, CarouselControlProps, CarouselController, CarouselIndicatorGroupState, CarouselIndicatorProps, CarouselIndicatorState, CarouselItemState, CarouselNextState, CarouselOptions, CarouselOrientation, CarouselPageChangeReason, CarouselPageOptions, CarouselPlayToggleState, CarouselPlayingChangeReason, CarouselPlayingOptions, CarouselPreviousState, CarouselPrimitive, CarouselSlidesPerPage, CarouselState, CarouselStepState, CarouselViewportState, } from "@ui-sdk/core/carousel";
+export { Carousel, CarouselContent, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselNext, CarouselPlayToggle, CarouselPrevious, CarouselViewport, };

package/dist/carousel.js

@@ -0,0 +1,151 @@
+"use client";
+// src/carousel.tsx
+import {
+  carousel
+} from "@ui-sdk/core/carousel";
+import { useControllerEntry } from "./controller-target.js";
+import { Connected } from "./popup.js";
+import {
+  createParts,
+  renderElement,
+  useNearest,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createCarouselController } from "@ui-sdk/core/carousel";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(carousel, {
+  viewport: "div",
+  content: "div",
+  item: "div",
+  previous: "button",
+  next: "button",
+  "indicator-group": "div",
+  indicator: "button",
+  "play-toggle": "button"
+});
+function Carousel({
+  page,
+  defaultPage,
+  onPageChange,
+  onPageChangeComplete,
+  playing,
+  defaultPlaying,
+  onPlayingChange,
+  interval,
+  orientation,
+  align,
+  slidesPerPage,
+  loop,
+  skipSnaps,
+  dragFree,
+  drag,
+  controller,
+  debug,
+  ...props
+}) {
+  const handle = usePrimitive(carousel, {
+    page,
+    defaultPage,
+    onPageChange,
+    onPageChangeComplete,
+    playing,
+    defaultPlaying,
+    onPlayingChange,
+    interval,
+    orientation,
+    align,
+    slidesPerPage,
+    loop,
+    skipSnaps,
+    dragFree,
+    drag,
+    controller,
+    debug
+  });
+  useControllerEntry(controller, handle);
+  return usePart(handle, "root", {}, props);
+}
+var CarouselViewport = parts.Viewport;
+var CarouselContent = parts.Content;
+var CarouselItem = parts.Item;
+var unconnected = { disabled: true };
+function connectedStep(Step) {
+  return function CarouselStep({ controller, ...props }) {
+    const { render, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Connected,
+      {
+        primitive: carousel,
+        controller,
+        fallback: () => renderElement(
+          "button",
+          { type: "button", ...rest },
+          render,
+          unconnected
+        ),
+        children: /* @__PURE__ */ jsx(Step, { ...props })
+      }
+    );
+  };
+}
+var CarouselPrevious = connectedStep(parts.Previous);
+var CarouselNext = connectedStep(parts.Next);
+function CarouselIndicatorGroup({
+  controller,
+  ...props
+}) {
+  const { render, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: carousel,
+      controller,
+      fallback: () => renderElement("div", rest, render, { page: 1, pageCount: null }),
+      children: /* @__PURE__ */ jsx(parts.IndicatorGroup, { ...props })
+    }
+  );
+}
+function CarouselIndicator(props) {
+  if (!useNearest(carousel)) {
+    const { page, render, ...rest } = props;
+    return renderElement("button", { type: "button", ...rest }, render, {
+      page: page ?? 0,
+      selected: false
+    });
+  }
+  return /* @__PURE__ */ jsx(parts.Indicator, { ...props });
+}
+function CarouselPlayToggle({
+  controller,
+  ...props
+}) {
+  const { render, ...rest } = props;
+  const unconnectedState = { playing: false, paused: false };
+  return /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: carousel,
+      controller,
+      fallback: () => renderElement(
+        "button",
+        { type: "button", ...rest },
+        render,
+        unconnectedState
+      ),
+      children: /* @__PURE__ */ jsx(parts.PlayToggle, { ...props })
+    }
+  );
+}
+export {
+  Carousel,
+  CarouselContent,
+  CarouselIndicator,
+  CarouselIndicatorGroup,
+  CarouselItem,
+  CarouselNext,
+  CarouselPlayToggle,
+  CarouselPrevious,
+  CarouselViewport,
+  createCarouselController
+};

package/dist/checkbox.d.ts

@@ -0,0 +1,24 @@
+import { type CheckboxGroupOptions, type CheckboxGroupState, type CheckboxOptions, type CheckboxState } from "@ui-sdk/core/checkbox";
+import * as React from "react";
+import { type ButtonControlProps } from "./field-context.js";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * The control and the hidden native input that takes part in the form.
+ * @stable
+ */
+declare function Checkbox({ disabled, name, render, ...props }: Omit<CheckboxOptions, "group"> & ButtonControlProps<CheckboxState>): React.JSX.Element;
+/**
+ * The check inside the checkbox. Rendered while it's checked or indeterminate, or always with `keepMounted`.
+ * @stable
+ */
+declare const CheckboxIndicator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/checkbox").CheckboxPrimitive, "indicator", "span">;
+/**
+ * Checkboxes that share a name and a list of checked values. The group, not
+ * each checkbox, sits in a field.
+ * `T` is inferred from `value`, `defaultValue` or `onValueChange`.
+ * @stable
+ */
+declare function CheckboxGroup<T extends string = string>({ value, defaultValue, onValueChange, allValues, readOnly, disabled, required, name, form, controller, debug, render, ...props }: CheckboxGroupOptions<T> & Omit<PartProps<"div", CheckboxGroupState>, "defaultValue" | "onChange" | "onSelect">): React.JSX.Element;
+export { createCheckboxController, createCheckboxGroupController, } from "@ui-sdk/core/checkbox";
+export type { CheckboxApi, CheckboxChangeOptions, CheckboxCheckedChangeReason, CheckboxController, CheckboxGroupApi, CheckboxGroupChangeOptions, CheckboxGroupController, CheckboxGroupOptions, CheckboxGroupPrimitive, CheckboxGroupState, CheckboxGroupValueChangeReason, CheckboxIndicatorProps, CheckboxIndicatorState, CheckboxOptions, CheckboxPrimitive, CheckboxState, CheckedState, } from "@ui-sdk/core/checkbox";
+export { Checkbox, CheckboxGroup, CheckboxIndicator };

package/dist/checkbox.js

@@ -0,0 +1,98 @@
+"use client";
+// src/checkbox.tsx
+import {
+  checkbox,
+  checkboxGroup
+} from "@ui-sdk/core/checkbox";
+import * as React from "react";
+import {
+  controlRender,
+  useFieldControl
+} from "./field-context.js";
+import {
+  createParts,
+  reading,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import {
+  createCheckboxController,
+  createCheckboxGroupController
+} from "@ui-sdk/core/checkbox";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(checkbox, { root: "button", indicator: "span" });
+var CheckboxGroupContext = React.createContext(null);
+function CheckboxInput() {
+  return usePart(checkbox, "input", {}, {}, "input");
+}
+function GroupInput() {
+  return usePart(checkboxGroup, "group-input", {}, {}, "input");
+}
+function Checkbox({
+  disabled,
+  name,
+  render,
+  ...props
+}) {
+  const group = React.useContext(CheckboxGroupContext);
+  const field = useFieldControl();
+  const fieldControl = group ? null : field;
+  return /* @__PURE__ */ jsx(
+    parts.Root,
+    {
+      ...props,
+      disabled: disabled || fieldControl?.disabled,
+      name: name ?? fieldControl?.name,
+      group: group ? reading(group, () => group.api) : void 0,
+      render: controlRender(fieldControl, "button", render, /* @__PURE__ */ jsx(CheckboxInput, {}))
+    }
+  );
+}
+var CheckboxIndicator = parts.Indicator;
+function CheckboxGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  allValues,
+  readOnly,
+  disabled,
+  required,
+  name,
+  form,
+  controller,
+  debug,
+  render,
+  ...props
+}) {
+  const field = useFieldControl();
+  const group = usePrimitive(checkboxGroup, {
+    value,
+    defaultValue,
+    onValueChange,
+    allValues,
+    disabled: disabled || field?.disabled,
+    readOnly,
+    required,
+    name: name ?? field?.name,
+    form,
+    controller,
+    debug
+  });
+  return /* @__PURE__ */ jsx(CheckboxGroupContext, { value: group, children: usePart(
+    group,
+    "group",
+    {},
+    {
+      ...props,
+      render: controlRender(field, "div", render, /* @__PURE__ */ jsx(GroupInput, {}))
+    },
+    "div"
+  ) });
+}
+export {
+  Checkbox,
+  CheckboxGroup,
+  CheckboxIndicator,
+  createCheckboxController,
+  createCheckboxGroupController
+};

package/dist/children.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+declare function hasChild(children: React.ReactNode, type: React.ElementType): boolean;
+/**
+ * For a root that renders its own content part when the app places none:
+ * whether one is placed, and the value of the provider its children go in.
+ * Its own part goes in `<Placed value={null}>`, so it doesn't count. `wanted`
+ * is whether the root would render its own part now. Only then do placed
+ * parts register, so a root whose content is a direct child, or that has no
+ * items to show, renders once instead of again when its content mounts.
+ */
+declare function usePlacedContent(wanted: boolean): readonly [boolean, (() => () => void) | null];
+declare const Placed: React.Provider<(() => () => void) | null>;
+/** Called by a content part, so its root doesn't render one of its own as well. */
+declare function usePlaceContent(): void;
+/**
+ * Marks a part inside an item that isn't its label, like an icon, so
+ * `learnLabels` skips its text. A pure call, so a page that never renders the
+ * part still drops it, which a set of parts in the root couldn't do.
+ */
+declare function notLabel<Part extends object>(part: Part): Part;
+/**
+ * Tells a listbox the labels of its value from the items among `children`,
+ * so the server's markup and the render that hydrates it show the label, not
+ * the value, before the items mount. The listbox looks only on its first
+ * render. An item is any component element with a selected `value`, so a
+ * component of your own that takes the value and the label as props counts
+ * too: its `label`, or else its text, without hidden parts, parts of the
+ * types in `skip`, like its indicator, or parts marked with `notLabel`. Items a component renders from
+ * elsewhere, like its own list, aren't found.
+ */
+declare function learnLabels(internal: {
+    keyOf: (value: unknown) => string;
+    learnLabels: (find: (keys: ReadonlySet<string>) => {
+        value: unknown;
+        label: string;
+    }[]) => void;
+}, children: React.ReactNode, skip: ReadonlySet<unknown>): void;
+export { hasChild, learnLabels, notLabel, Placed, usePlaceContent, usePlacedContent, };

package/dist/children.js

@@ -0,0 +1,63 @@
+"use client";
+// src/children.ts
+import * as React from "react";
+function hasChild(children, type) {
+  for (const child of React.Children.toArray(children)) {
+    if (React.isValidElement(child) && (child.type === type || hasChild(child.props.children, type))) {
+      return true;
+    }
+  }
+  return false;
+}
+var PlacedContext = React.createContext(null);
+function usePlacedContent(wanted) {
+  const [count, setCount] = React.useState(0);
+  const register = React.useCallback(() => {
+    setCount((count2) => count2 + 1);
+    return () => setCount((count2) => count2 - 1);
+  }, []);
+  return [count > 0, wanted ? register : null];
+}
+var Placed = PlacedContext.Provider;
+function usePlaceContent() {
+  const register = React.useContext(PlacedContext);
+  React.useLayoutEffect(() => register?.(), [register]);
+}
+var notLabelKey = /* @__PURE__ */ Symbol.for("ui-sdk.not-label");
+function notLabel(part) {
+  ;
+  part[notLabelKey] = true;
+  return part;
+}
+function learnLabels(internal, children, skip) {
+  internal.learnLabels((keys) => {
+    const found = [];
+    const text = (node) => typeof node === "string" || typeof node === "number" ? String(node) : Array.isArray(node) ? node.map(text).join("") : React.isValidElement(node) && !skip.has(node.type) && !node.type[notLabelKey] && !node.props["aria-hidden"] ? text(node.props.children) : "";
+    const visit = (node) => {
+      if (Array.isArray(node)) {
+        return node.forEach(visit);
+      }
+      if (!React.isValidElement(node)) {
+        return;
+      }
+      const { value, label, children: children2 } = node.props;
+      if (value === void 0 || typeof node.type === "string" || !keys.has(internal.keyOf(value))) {
+        return visit(children2);
+      }
+      const shown = typeof label === "string" ? label : text(children2).replace(/\s+/g, " ").trim();
+      if (shown) {
+        found.push({ value, label: shown });
+      }
+    };
+    visit(children);
+    return found;
+  });
+}
+export {
+  Placed,
+  hasChild,
+  learnLabels,
+  notLabel,
+  usePlaceContent,
+  usePlacedContent
+};