@worknice/whiteboard 0.0.2 → 0.0.3

package/dist/controls/LinkCard_module.css

@@ -0,0 +1,22 @@
+.container-aEJeqL {
+  background-color: var(--color-white);
+  border-radius: var(--size-n2);
+  border: solid var(--size-n5) var(--color-grey-t09);
+  box-shadow: var(--shadow-default);
+  padding: var(--size-p1);
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  display: grid;
+}
+
+@media (hover: hover) {
+  .container-aEJeqL:hover {
+    background-color: var(--color-grey-t10);
+  }
+}
+
+.content-Ge4Pjk {
+  place-items: center start;
+  display: grid;
+}
+

package/dist/controls/Link_module.css

@@ -0,0 +1,19 @@
+.link-TV3N2L {
+  border-radius: var(--size-n3);
+  cursor: pointer;
+  gap: var(--size-n2);
+  grid-auto-flow: column;
+  align-items: center;
+  text-decoration: underline;
+  display: inline-grid;
+}
+
+.link-TV3N2L:hover {
+  text-decoration: none;
+}
+
+.link-TV3N2L:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  text-decoration: none;
+}
+

package/dist/controls/MenuButton.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+type Option = {
+    id: string;
+    label: string;
+} & ({
+    onClick: (event: React.MouseEvent | React.KeyboardEvent) => void | Promise<void>;
+    type: "onClick";
+} | {
+    render: (onClose: () => void) => ReactNode;
+    type: "render";
+} | {
+    href: string;
+    type: "link";
+});
+type Props = {
+    autoFocus?: boolean;
+    disabled?: boolean;
+    id?: string;
+    options: Array<Option | null>;
+    searchPlaceholder?: string;
+    displaySearch?: boolean;
+    iconRight?: ReactNode;
+} & ({
+    children: ReactNode;
+    icon?: ReactNode;
+} | {
+    children?: ReactNode;
+    icon: ReactNode;
+});
+declare const MenuButton: ({ autoFocus, disabled, id, options, searchPlaceholder, children, icon, iconRight, displaySearch, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MenuButton;

package/dist/controls/MenuButton.js

@@ -0,0 +1,216 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__ from "@floating-ui/react";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_uuid__ from "uuid";
+import * as __WEBPACK_EXTERNAL_MODULE__forms_FormError_js_7d98929f__ from "../forms/FormError.js";
+import * as __WEBPACK_EXTERNAL_MODULE__forms_FormErrorList_js_bc080ab1__ from "../forms/FormErrorList.js";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Modal_js_31b952b2__ from "../presentation/Modal.js";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__ from "../presentation/PlainText.js";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Sheet_js_32f2a47c__ from "../presentation/Sheet.js";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_SheetContent_js_16745ffb__ from "../presentation/SheetContent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_SheetHeader_js_ec2f0194__ from "../presentation/SheetHeader.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__ from "../utils/search.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__ from "./Button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__ from "./MenuButton.module.js";
+const MenuButton = ({ autoFocus = false, disabled = false, id, options, searchPlaceholder, children, icon, iconRight, displaySearch = false })=>{
+    const { Link: NextLink } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
+    const optionsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)([]);
+    const searchRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const listBoxRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [optionToRender, setOptionToRender] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    const [activeIndex, setActiveIndex] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    const [loading, setLoading] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [errors, setErrors] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
+    const nonNullOptions = options.filter((option)=>null !== option);
+    const filteredOptions = "" !== searchTerm.trim() ? (0, __WEBPACK_EXTERNAL_MODULE__utils_search_js_89d5ae26__["default"])(nonNullOptions.map((option)=>({
+            ...option,
+            id: option.id
+        })), [
+        "label"
+    ], searchTerm) : nonNullOptions;
+    const { refs: floatingUiRefs, floatingStyles, context } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
+        open: isOpen,
+        onOpenChange: (open)=>{
+            setIsOpen(open);
+            if (open) {
+                setActiveIndex(null);
+                setSearchTerm("");
+            }
+        },
+        whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoUpdate,
+        placement: "bottom-start",
+        middleware: [
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.flip)(),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.offset)(4),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.size)({
+                apply ({ rects, elements }) {
+                    Object.assign(elements.floating.style, {
+                        minWidth: `${rects.reference.width}px`,
+                        maxWidth: rects.reference.width > 200 ? `${rects.reference.width}px` : "200px"
+                    });
+                }
+            })
+        ]
+    });
+    const click = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useClick)(context);
+    const dismiss = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useDismiss)(context);
+    const listNav = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useListNavigation)(context, {
+        listRef: optionsRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        virtual: true
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useInteractions)([
+        click,
+        dismiss,
+        listNav
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
+                autoFocus: autoFocus,
+                disabled: disabled,
+                className: __WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].button,
+                tabIndex: 0,
+                type: "button",
+                ref: floatingUiRefs.setReference,
+                ...getReferenceProps({
+                    id: id
+                }),
+                children: [
+                    loading ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                        animate: true,
+                        symbol: "Loading"
+                    }) : icon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        children: icon
+                    }) : null,
+                    children ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        children: children
+                    }) : null,
+                    iconRight ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        children: iconRight
+                    }) : null
+                ]
+            }),
+            !disabled && isOpen ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingPortal, {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingFocusManager, {
+                        context: context,
+                        initialFocus: searchRef,
+                        modal: false,
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            ref: floatingUiRefs.setFloating,
+                            style: floatingStyles,
+                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].menu),
+                            ...getFloatingProps(),
+                            children: [
+                                displaySearch ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("input", {
+                                    type: "text",
+                                    className: __WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].searchInput,
+                                    placeholder: searchPlaceholder ?? "Search for an option",
+                                    "aria-autocomplete": "list",
+                                    onChange: (e)=>{
+                                        setSearchTerm(e.target.value);
+                                        setActiveIndex(0);
+                                    },
+                                    value: searchTerm,
+                                    ref: searchRef,
+                                    onKeyDown: (event)=>{
+                                        if ("Enter" === event.key && null != activeIndex) setIsOpen(false);
+                                    }
+                                }) : null,
+                                0 !== filteredOptions.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("ul", {
+                                    className: __WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].listBox,
+                                    ref: listBoxRef,
+                                    children: filteredOptions.map((option, index)=>{
+                                        if ("link" === option.type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
+                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].listItem, {
+                                                [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].activeListItem]: activeIndex === index
+                                            }),
+                                            ...getItemProps({
+                                                ref: (node)=>{
+                                                    optionsRef.current[index] = node;
+                                                }
+                                            }),
+                                            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(NextLink, {
+                                                href: option.href,
+                                                children: option.label
+                                            })
+                                        }, option.id);
+                                        return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
+                                            className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].listItem, {
+                                                [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].activeListItem]: activeIndex === index
+                                            }),
+                                            ...getItemProps({
+                                                onClick: "onClick" === option.type ? async (event)=>{
+                                                    setIsOpen(false);
+                                                    try {
+                                                        setLoading(true);
+                                                        await option.onClick(event);
+                                                    } catch (error) {
+                                                        if (error instanceof __WEBPACK_EXTERNAL_MODULE__forms_FormError_js_7d98929f__["default"]) setErrors(error.validationErrors);
+                                                        else error instanceof Error ? setErrors([
+                                                            {
+                                                                id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
+                                                                message: error.message
+                                                            }
+                                                        ]) : setErrors([
+                                                            {
+                                                                id: (0, __WEBPACK_EXTERNAL_MODULE_uuid__.v4)(),
+                                                                message: "Unknown error."
+                                                            }
+                                                        ]);
+                                                    }
+                                                    setLoading(false);
+                                                } : ()=>{
+                                                    setIsOpen(false);
+                                                    setOptionToRender(option);
+                                                },
+                                                ref: (node)=>{
+                                                    optionsRef.current[index] = node;
+                                                }
+                                            }),
+                                            children: option.label
+                                        }, option.id);
+                                    })
+                                }) : null
+                            ]
+                        })
+                    })
+                })
+            }) : null,
+            errors.length > 0 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Modal_js_31b952b2__["default"], {
+                onClose: ()=>{
+                    setErrors([]);
+                },
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Sheet_js_32f2a47c__["default"], {
+                    header: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_SheetHeader_js_ec2f0194__["default"], {
+                        actions: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Button_js_17bdd71d__["default"], {
+                            onClick: ()=>{
+                                setErrors([]);
+                            },
+                            children: "Close"
+                        }),
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_PlainText_js_e98763ad__["default"], {
+                            font: "h6",
+                            children: "Error"
+                        })
+                    }),
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_SheetContent_js_16745ffb__["default"], {
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__forms_FormErrorList_js_bc080ab1__["default"], {
+                            errors: errors
+                        })
+                    })
+                })
+            }) : null,
+            null !== optionToRender && "render" === optionToRender.type ? optionToRender.render(()=>setOptionToRender(null)) : null
+        ]
+    });
+};
+const MenuButton_rslib_entry_ = MenuButton;
+export { MenuButton_rslib_entry_ as default };

package/dist/controls/MenuButton.module.js

@@ -0,0 +1,10 @@
+import "./MenuButton_module.css";
+const MenuButton_module_rslib_entry_ = {
+    button: "button-HIHLjl",
+    searchInput: "searchInput-bGdium",
+    menu: "menu-jQY3kP",
+    listBox: "listBox-IanUVy",
+    listItem: "listItem-PEQEDL",
+    activeListItem: "activeListItem-iAlKFS"
+};
+export { MenuButton_module_rslib_entry_ as default };

package/dist/controls/MenuButton_module.css

@@ -0,0 +1,78 @@
+.button-HIHLjl {
+  border-radius: var(--size-n3);
+  border: var(--size-n5) solid var(--color-grey-t08);
+  color: var(--color-grey-s01);
+  font: var(--font-regular);
+  align-items: center;
+  gap: var(--size-n2);
+  padding: var(--size-n2) var(--size-00);
+  text-align: center;
+  background: var(--color-white);
+  grid-auto-flow: column;
+  justify-content: center;
+  display: inline-grid;
+}
+
+@media (hover: hover) {
+  .button-HIHLjl:hover {
+    background-color: var(--color-grey-t09);
+  }
+}
+
+.button-HIHLjl:active {
+  background-color: var(--color-grey-t08);
+}
+
+.button-HIHLjl:disabled {
+  background: var(--color-grey-t09);
+  border-color: var(--color-grey-t09);
+  color: var(--color-grey-t03);
+  cursor: not-allowed;
+}
+
+.button-HIHLjl:focus-visible {
+  box-shadow: 0px 0px 0px 2px var(--color-white), 0px 0px 0px 4px var(--color-purple-000);
+}
+
+.searchInput-bGdium {
+  padding: var(--size-00);
+  border-bottom: 1px solid var(--color-grey-t08);
+  width: 100%;
+}
+
+.searchInput-bGdium::placeholder {
+  color: var(--color-grey-t07);
+  font: var(--font-regular-italic);
+}
+
+.menu-jQY3kP {
+  background: var(--color-white);
+  border: 1px solid var(--color-grey-t08);
+  border-radius: var(--size-n3);
+  box-shadow: var(--shadow-heavy);
+  z-index: 1;
+}
+
+.listBox-IanUVy {
+  max-height: 320px;
+  padding: var(--size-n2);
+  overflow-y: auto;
+}
+
+.listItem-PEQEDL {
+  padding: var(--size-n2);
+  border-radius: var(--size-n3);
+  align-items: center;
+  gap: var(--size-n2);
+  grid-template-columns: 1fr max-content;
+  display: grid;
+}
+
+.listItem-PEQEDL:hover {
+  cursor: pointer;
+}
+
+.activeListItem-iAlKFS {
+  background: var(--color-grey-t09);
+}
+

package/dist/controls/PageTabSet.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+type Props = {
+    id?: string;
+    pages: Array<{
+        path: string;
+        label: ReactNode;
+        key: string;
+    }>;
+};
+declare const PageTabSet: ({ id, pages }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PageTabSet;

package/dist/controls/PageTabSet.js

@@ -0,0 +1,26 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__ from "../utils/TrackingContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__ from "./PageTabSet.module.js";
+const PageTabSet = ({ id, pages })=>{
+    const { Link, pathname } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
+    const trackingContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__["default"]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("nav", {
+        className: __WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].container,
+        children: pages.map(({ path, label, key })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].button, {
+                    [__WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].active]: pathname === path
+                }),
+                href: path,
+                id: id,
+                onClick: ()=>{
+                    if (trackingContext && id) trackingContext.trackClick(id);
+                },
+                children: label
+            }, key))
+    });
+};
+const PageTabSet_rslib_entry_ = PageTabSet;
+export { PageTabSet_rslib_entry_ as default };

package/dist/controls/PageTabSet.module.js

@@ -0,0 +1,7 @@
+import "./PageTabSet_module.css";
+const PageTabSet_module_rslib_entry_ = {
+    container: "container-DaRbhF",
+    button: "button-dxmonM",
+    active: "active-SAbteC"
+};
+export { PageTabSet_module_rslib_entry_ as default };

package/dist/controls/PageTabSet_module.css

@@ -0,0 +1,32 @@
+.container-DaRbhF {
+  font: var(--font-regular-bold);
+  gap: var(--size-p2);
+  border-bottom: var(--size-n5) var(--color-grey-t08) solid;
+  display: flex;
+}
+
+.button-dxmonM {
+  border-bottom: var(--size-n4) solid transparent;
+  color: var(--color-grey-t03);
+  cursor: pointer;
+  margin-bottom: calc(var(--size-n5) * -1);
+  padding: var(--size-n1) 0;
+  grid-auto-flow: column;
+  display: grid;
+}
+
+.button-dxmonM:focus {
+  outline: var(--size-n4) solid var(--color-purple-000);
+  border-radius: var(--size-n3);
+  border-color: #0000;
+}
+
+.button-dxmonM:not(.active-SAbteC):hover {
+  border-bottom-color: var(--color-grey-t07);
+}
+
+.active-SAbteC {
+  border-bottom-color: var(--color-purple-000);
+  color: var(--color-purple-000);
+}
+

package/dist/controls/Sortable.d.ts

@@ -0,0 +1,11 @@
+import { type DragEndEvent } from "@dnd-kit/core";
+import { type ReactNode } from "react";
+type Props = {
+    items: Array<{
+        id: string;
+        value: ReactNode;
+    } | null>;
+    onDragEnd: (e: DragEndEvent) => void;
+};
+declare const Sortable: ({ items, onDragEnd }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Sortable;

package/dist/controls/Sortable.js

@@ -0,0 +1,27 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__ from "@dnd-kit/core";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__ from "@dnd-kit/sortable";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_VStack_js_fd392b79__ from "../presentation/VStack.js";
+const Sortable = ({ items, onDragEnd })=>{
+    const sensors = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensors)((0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensor)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.PointerSensor), (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.useSensor)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.KeyboardSensor, {
+        coordinateGetter: __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.sortableKeyboardCoordinates
+    }));
+    const nonNullItems = items.filter((item)=>null !== item && void 0 !== item.value && null !== item.value);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.DndContext, {
+        sensors: sensors,
+        collisionDetection: __WEBPACK_EXTERNAL_MODULE__dnd_kit_core_a545325d__.closestCenter,
+        onDragEnd: onDragEnd,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.SortableContext, {
+            items: nonNullItems,
+            strategy: __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.verticalListSortingStrategy,
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_VStack_js_fd392b79__["default"], {
+                spacing: "n2",
+                children: nonNullItems.map(({ id, value })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        children: value
+                    }, id))
+            })
+        })
+    });
+};
+const Sortable_rslib_entry_ = Sortable;
+export { Sortable_rslib_entry_ as default };

package/dist/controls/SortableItem.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+type Props = {
+    id: string;
+    children: ReactNode;
+    actions?: ReactNode;
+};
+declare const SortableItem: ({ id, children, actions }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SortableItem;

package/dist/controls/SortableItem.js

@@ -0,0 +1,42 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__ from "@dnd-kit/sortable";
+import * as __WEBPACK_EXTERNAL_MODULE__dnd_kit_utilities_3c8eb4c2__ from "@dnd-kit/utilities";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
+import * as __WEBPACK_EXTERNAL_MODULE__SortableItem_module_js_feb4ff98__ from "./SortableItem.module.js";
+const SortableItem = ({ id, children, actions })=>{
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, __WEBPACK_EXTERNAL_MODULE__dnd_kit_sortable_a8361dd8__.useSortable)({
+        id
+    });
+    const style = {
+        transform: __WEBPACK_EXTERNAL_MODULE__dnd_kit_utilities_3c8eb4c2__.CSS.Transform.toString(transform),
+        transition
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__SortableItem_module_js_feb4ff98__["default"].item, {
+            [__WEBPACK_EXTERNAL_MODULE__SortableItem_module_js_feb4ff98__["default"].itemIsDragging]: isDragging
+        }),
+        ref: setNodeRef,
+        style: style,
+        ...attributes,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                ...listeners,
+                className: __WEBPACK_EXTERNAL_MODULE__SortableItem_module_js_feb4ff98__["default"].handle,
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
+                    symbol: "GripLines"
+                })
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__SortableItem_module_js_feb4ff98__["default"].content,
+                children: children
+            }),
+            actions ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: __WEBPACK_EXTERNAL_MODULE__SortableItem_module_js_feb4ff98__["default"].actions,
+                children: actions
+            }) : null
+        ]
+    });
+};
+const SortableItem_rslib_entry_ = SortableItem;
+export { SortableItem_rslib_entry_ as default };

package/dist/controls/SortableItem.module.js

@@ -0,0 +1,9 @@
+import "./SortableItem_module.css";
+const SortableItem_module_rslib_entry_ = {
+    item: "item-etSFkh",
+    itemIsDragging: "itemIsDragging-ladTmF",
+    handle: "handle-T9JhWY",
+    content: "content-D3XA39",
+    actions: "actions-Ock7Jn"
+};
+export { SortableItem_module_rslib_entry_ as default };

package/dist/controls/SortableItem_module.css

@@ -0,0 +1,46 @@
+.item-etSFkh {
+  border: solid 1px var(--color-grey-t08);
+  border-radius: var(--size-n3);
+  touch-action: none;
+  background: #fff;
+  grid-template-columns: max-content 1fr;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  align-items: stretch;
+  display: grid;
+}
+
+.itemIsDragging-ladTmF {
+  z-index: 1;
+  box-shadow: var(--shadow-heavy);
+}
+
+.handle-T9JhWY {
+  padding: var(--size-n2);
+  border-right: solid 1px var(--color-grey-t08);
+  align-items: center;
+  display: flex;
+}
+
+.handle-T9JhWY:hover {
+  cursor: grab;
+  background-color: var(--color-grey-t09);
+}
+
+.handle-T9JhWY:active {
+  cursor: grabbing;
+}
+
+.content-D3XA39 {
+  padding: var(--size-00);
+  align-items: center;
+  display: flex;
+}
+
+.actions-Ock7Jn {
+  padding: var(--size-00);
+  align-items: center;
+  padding-left: 0;
+  display: flex;
+}
+

package/dist/controls/TabSet.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+type Props<T extends string> = {
+    active: T;
+    id?: string;
+    items: Array<{
+        content: ReactNode;
+        key: T;
+    } | null>;
+    onChange: (key: T) => void;
+};
+declare const TabSet: <T extends string>({ active, id, items, onChange }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export default TabSet;

package/dist/controls/TabSet.js

@@ -0,0 +1,26 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__ from "../utils/TrackingContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__TabSet_module_js_5b5722e6__ from "./TabSet.module.js";
+const TabSet = ({ active, id, items, onChange })=>{
+    const trackingContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__["default"]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: __WEBPACK_EXTERNAL_MODULE__TabSet_module_js_5b5722e6__["default"].container,
+        id: id,
+        children: items.filter((x)=>null !== x).map(({ content, key })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
+                className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__TabSet_module_js_5b5722e6__["default"].button, {
+                    [__WEBPACK_EXTERNAL_MODULE__TabSet_module_js_5b5722e6__["default"].active]: active === key
+                }),
+                id: `${id}-${key}`,
+                onClick: ()=>{
+                    onChange(key);
+                    if (trackingContext && id) trackingContext.trackClick(`${id}-${key}`);
+                },
+                type: "button",
+                children: content
+            }, key))
+    });
+};
+const TabSet_rslib_entry_ = TabSet;
+export { TabSet_rslib_entry_ as default };