@1771technologies/lytenyte-pro 1.0.20 → 2.0.0-dev.1

package/dist/components/pill-manager/icons.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Icon(props) {
+    return (_jsx("div", { ...props, style: {
+            height: 20,
+            width: 20,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            ...props.style,
+        } }));
+}
+export const DragDots = (props) => {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentcolor", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("circle", { cx: "7.75", cy: "5.5", r: "1.25" }), _jsx("circle", { cx: "7.75", cy: "10", r: "1.25" }), _jsx("circle", { cx: "7.75", cy: "14.5", r: "1.25" }), _jsx("circle", { cx: "12.25", cy: "5.5", r: "1.25" }), _jsx("circle", { cx: "12.25", cy: "10", r: "1.25" }), _jsx("circle", { cx: "12.25", cy: "14.5", r: "1.25" })] }));
+};
+export const Measure = (props) => {
+    return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M15 6.25V4H5L10.7143 10L5 16H15V13.75", stroke: "currentcolor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+export const RowGroups = (props) => {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", stroke: "currentcolor", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M12 9.8252L14.8284 9.8252L14.8284 6.99677", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14.8286 12.6543L14.8286 9.82587L17.657 9.82587", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "2", y: "2", width: "8", height: "16", rx: "2", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2 6H10", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2 10H10", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2 14H10", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+};
+export const Columns = (props) => {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", stroke: "currentcolor", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("rect", { x: "2.5", y: "2.5", width: "15", height: "15", rx: "3", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M7 2.5V17.5", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("path", { d: "M2.5 7L17.5 7", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+};
+export const RowPivots = (props) => {
+    return (_jsxs("svg", { width: "16", height: "16", stroke: "currentcolor", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M2.5 3.75H17.203", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.5 9.56055H9.07178", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.5 15.4688H9", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12 12.8281L14.8284 12.8281L14.8284 9.9997", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14.8286 15.6572L14.8286 12.8288L17.657 12.8288", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+};
+export const ColumnPivots = (props) => {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", stroke: "currentcolor", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M4.125 17.2822L4.125 2.57926", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M9.93604 17.2822L9.93603 10.7104", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M15.8438 17.2822L15.8437 10.7822", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13.2036 7.78223L13.2036 4.9538L10.3752 4.9538", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M16.0317 4.95312L13.2033 4.95313L13.2033 2.1247", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+};
+export const ExpandIcon = (props) => {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", stroke: "currentcolor", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M6.84325 17.0415L2.9488 17.038L2.94531 13.1436", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M8.02344 11.9639L2.94924 17.0381", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13.1577 2.93409L17.0522 2.93758L17.0557 6.83203", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17.0518 2.93555L11.9776 8.00974", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+};
+export const CollapseIcon = (props) => {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", stroke: "currentcolor", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M15.8198 8.07763L11.9254 8.07414L11.9219 4.17969", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17 3L11.9258 8.0742", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4.51124 11.5786L8.40569 11.5821L8.40918 15.4766", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M8.40527 11.5801L3.33107 16.6543", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+};

package/dist/components/pill-manager/index.d.ts

@@ -0,0 +1,33 @@
+import type { PillContainer } from "./container.js";
+import type { PillRowExpander } from "./expander.js";
+import type { PillItem } from "./item.js";
+import type { PillLabel } from "./label.js";
+import type { PillRow } from "./pill-row.js";
+import { PillManager as Root } from "./root.js";
+import type { PillItemSpec, PillRowSpec } from "./types.js";
+export declare const PillManager: {
+    (props: Root.Props): import("react/jsx-runtime").JSX.Element;
+    Container: import("react").NamedExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Expander: import("react").NamedExoticComponent<Omit<PillRowExpander.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Pill: import("react").NamedExoticComponent<Omit<PillItem.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").NamedExoticComponent<Omit<PillLabel.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Row: import("react").ForwardRefExoticComponent<{
+        readonly row: PillRowSpec;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare namespace PillManager {
+    type Props = Root.Props;
+    namespace Component {
+        type Container = PillContainer.Props;
+        type Expanded = PillRowExpander.Props;
+        type Pill = PillItem.Props;
+        type Label = PillLabel.Props;
+        type Row = PillRow.Props;
+    }
+    namespace T {
+        type PillItem = PillItemSpec;
+        type PillRow = PillRowSpec;
+    }
+}

package/dist/components/pill-manager/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PillContainer as Container } from "./container.js";
+import { PillRowExpander as Expander } from "./expander.js";
+import { PillItem as Pill } from "./item.js";
+import { PillLabel as Label } from "./label.js";
+import { PillRow as Row } from "./pill-row.js";
+import { PillManager as Root } from "./root.js";
+export const PillManager = (props) => _jsx(Root, { ...props });
+PillManager.Container = Container;
+PillManager.Expander = Expander;
+PillManager.Pill = Pill;
+PillManager.Label = Label;
+PillManager.Row = Row;

package/dist/components/pill-manager/item.d.ts

@@ -0,0 +1,10 @@
+import { type JSX, type ReactNode } from "react";
+import type { PillItemSpec } from "./types.js";
+export declare const PillItem: import("react").NamedExoticComponent<Omit<PillItem.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace PillItem {
+    type Props = JSX.IntrinsicElements["div"] & {
+        item: PillItemSpec;
+    } & {
+        elementEnd?: ReactNode;
+    };
+}

package/dist/components/pill-manager/item.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useRef, useState } from "react";
+import { useSlot } from "../../hooks/use-slot/index.js";
+import { usePillRow } from "./pill-row.context.js";
+import { getDragData, getDragDirection, useDraggable, useEvent, } from "@1771technologies/lytenyte-core/internal";
+import { DragDots } from "./icons.js";
+import { usePillRoot } from "./root.context.js";
+import { equal, moveRelative } from "@1771technologies/lytenyte-shared";
+function PillItemBase({ item, elementEnd, ...props }, ref) {
+    const { expandToggle, expanded, row } = usePillRow();
+    const { prevRowId, prevSwapId, movedRef, setDragState, setCloned, cloned, rows, orientation, onPillItemThrown, onPillItemActiveChange, onPillRowChange, } = usePillRoot();
+    const clonedRef = useRef(cloned);
+    clonedRef.current = cloned;
+    const { isDragActive, placeholder, props: dragProps, } = useDraggable({
+        data: { pill: { data: { item, id: row.id }, kind: "site" } },
+        onUnhandledDrop: () => {
+            onPillItemThrown?.({
+                index: rows.findIndex((x) => x.id === row.id),
+                item,
+                row: rows.find((x) => x.id === row.id),
+            });
+        },
+        onDragStart: () => {
+            setDragState({ activeId: item.id, activeRow: row.id, activeType: row.type ?? "" });
+            setCloned(structuredClone(rows));
+        },
+        onDragEnd: () => {
+            prevRowId.current = null;
+            prevSwapId.current = null;
+            const full = clonedRef.current;
+            if (movedRef.current) {
+                const move = movedRef.current;
+                const movedPill = full
+                    .find((x) => x.id === move.id)
+                    ?.pills.find((x) => x.id === move.pillId);
+                if (movedPill)
+                    movedPill.active = false;
+            }
+            const changed = clonedRef.current.filter((x, i) => {
+                return !equal(x, rows[i]);
+            });
+            if (changed.length) {
+                onPillRowChange({ changed, full: clonedRef.current });
+            }
+            setDragState(null);
+            setCloned(null);
+        },
+    });
+    const [_, force] = useState({});
+    const handleDragEnter = useEvent((ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const ds = getDragData();
+        if (!ds?.pill?.data)
+            return;
+        const { item: dragged, id: dragRowId } = ds.pill.data;
+        const accepts = new Set([...(row.accepts ?? []), row.id]);
+        if (!accepts.has(dragRowId) && !item.tags?.some((x) => accepts.has(x)))
+            return;
+        const hasPill = row.pills.find((x) => x.id === dragged.id);
+        if (dragged.id === item.id) {
+            if (dragRowId !== row.id)
+                hasPill.active = dragged.active;
+            force({});
+            return;
+        }
+        if (hasPill) {
+            const draggedIndex = row.pills.findIndex((x) => x.id === dragged.id);
+            const overIndex = row.pills.findIndex((x) => x.id === item.id);
+            const newPills = moveRelative(row.pills, draggedIndex, overIndex);
+            if (dragRowId !== row.id)
+                hasPill.active = dragged.active;
+            const [horizontal, vertical] = getDragDirection();
+            const currentSwapId = row.pills[overIndex].id;
+            const currentRowId = row.id;
+            if (orientation === "horizontal") {
+                if (currentSwapId === prevSwapId.current && currentRowId === prevRowId.current) {
+                    if (horizontal === "end" && draggedIndex >= overIndex)
+                        return;
+                    if (horizontal === "start" && draggedIndex <= overIndex)
+                        return;
+                }
+            }
+            else {
+                if (currentSwapId === prevSwapId.current && currentRowId === prevRowId.current) {
+                    if (vertical === "bottom" && draggedIndex >= overIndex)
+                        return;
+                    if (vertical === "top" && draggedIndex <= overIndex)
+                        return;
+                }
+            }
+            // We are gonna swap these two
+            prevSwapId.current = currentSwapId;
+            prevRowId.current = currentRowId;
+            setCloned((prev) => {
+                if (!prev)
+                    throw new Error("Can't call drag function without cloning nodes.");
+                const thisRow = prev.findIndex((x) => x.id === row.id);
+                const newPill = { ...prev[thisRow] };
+                newPill.pills = newPills;
+                const newDef = [...prev];
+                newDef[thisRow] = newPill;
+                return newDef;
+            });
+            return;
+        }
+        // If here we need to check if this row accepts items the dragged.
+        if (!row.accepts || !dragged.tags || dragged.tags.every((x) => !row.accepts?.includes(x)))
+            return null;
+        const thisRow = rows.findIndex((x) => x.id === row.id);
+        const originalRow = rows[thisRow];
+        // The original row has this id so we can't dragged a new item to it.
+        if (originalRow.pills.find((x) => x.id === dragged.id))
+            return;
+        const overIndex = row.pills.findIndex((x) => x.id === item.id);
+        const draggedIndex = row.pills.findIndex((x) => x.id === dragged.id);
+        let newPills;
+        if (draggedIndex !== -1) {
+            const [horizontal] = getDragDirection();
+            if (horizontal === "end" && draggedIndex >= overIndex)
+                return;
+            if (horizontal === "start" && draggedIndex <= overIndex)
+                return;
+            newPills = moveRelative(row.pills, draggedIndex, overIndex);
+        }
+        else {
+            newPills = [...originalRow.pills];
+            newPills.splice(overIndex, 0, dragged);
+        }
+        setCloned((prev) => {
+            if (!prev)
+                throw new Error("Can't call drag function without cloning nodes.");
+            const newPill = { ...prev[thisRow] };
+            newPill.pills = newPills;
+            const newDef = [...prev];
+            newDef[thisRow] = newPill;
+            return newDef;
+        });
+    });
+    const onItemClick = () => {
+        const next = !item.active;
+        const nextPill = { ...item, active: next };
+        const nextPills = [...row.pills];
+        nextPills.splice(nextPills.indexOf(item), 1, nextPill);
+        const nextRow = { ...row, pills: nextPills };
+        const index = rows.indexOf(row);
+        onPillItemActiveChange({ index, item: nextPill, row: nextRow });
+    };
+    const s = (_jsxs("div", { tabIndex: -1, onClick: onItemClick, onKeyDown: (ev) => {
+            if (ev.key === " " && document.activeElement === ev.currentTarget) {
+                onItemClick?.();
+                ev.preventDefault();
+            }
+        }, children: [item.movable && (_jsx("div", { style: {
+                    width: 20,
+                    height: 20,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    cursor: "grab",
+                }, children: _jsx(DragDots, {}) })), _jsx("div", { children: item.name ?? item.id }), elementEnd] }));
+    const slot = useSlot({
+        props: [item.movable ? dragProps : {}, props, { "data-ln-pill-item": true }],
+        ref,
+        slot: s,
+        state: {
+            item,
+            expanded,
+            expandToggle,
+            row,
+        },
+    });
+    return (_jsxs("div", { "data-ln-pill-type": row.type, "data-ln-pill-item-container": true, "data-ln-pill-active": item.active, "data-ln-draggable": item.movable, "data-ln-drag-active": isDragActive, onDragLeave: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+        }, onDragEnter: handleDragEnter, children: [slot, placeholder] }));
+}
+export const PillItem = memo(forwardRef(PillItemBase));

package/dist/components/pill-manager/label.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from "react";
+import { type SlotComponent } from "../../hooks/use-slot/index.js";
+import type { PillRowSpec, PillState } from "./types.js";
+export declare const PillLabel: import("react").NamedExoticComponent<Omit<PillLabel.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace PillLabel {
+    type Props = Omit<JSX.IntrinsicElements["div"], "children"> & {
+        row: PillRowSpec;
+        render?: SlotComponent<PillState>;
+    };
+}

package/dist/components/pill-manager/label.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { useSlot } from "../../hooks/use-slot/index.js";
+import { usePillRow } from "./pill-row.context.js";
+import { ColumnPivots, Columns, Icon, Measure, RowGroups, RowPivots } from "./icons.js";
+const typeToIcon = {
+    columns: Columns,
+    "row-groups": RowGroups,
+    "row-pivots": RowPivots,
+    "column-pivots": ColumnPivots,
+    measures: Measure,
+};
+function PillBase({ render, ...props }, forwarded) {
+    const { expandToggle, expanded, row } = usePillRow();
+    const I = row.type ? typeToIcon[row.type] : null;
+    const s = render ?? (_jsxs("div", { "data-ln-pill-label": true, children: [I && (_jsx(Icon, { children: _jsx(I, {}) })), _jsx("div", { "data-ln-pill-label-text": true, children: row.label })] }));
+    const slot = useSlot({
+        props: [props],
+        ref: forwarded,
+        slot: s,
+        state: {
+            expanded,
+            expandToggle,
+            row,
+        },
+    });
+    if (row.label == null)
+        return null;
+    return slot;
+}
+export const PillLabel = memo(forwardRef(PillBase));

package/dist/components/pill-manager/pill-manager.play.d.ts

@@ -0,0 +1,3 @@
+import "@1771technologies/lytenyte-design/light-dark.css";
+import "../../../css/pill-manager.css";
+export default function Demo(): import("react/jsx-runtime").JSX.Element;

package/dist/components/pill-manager/pill-manager.play.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@1771technologies/lytenyte-design/light-dark.css";
+import "../../../css/pill-manager.css";
+import { PillManager } from "./root.js";
+import { useState } from "react";
+const columns = [
+    { id: "age", name: "bob", groupPath: ["Alpha", "Beta"], type: "number" },
+    { id: "marital", groupPath: ["Alpha"] },
+    { id: "default", groupPath: ["Top Dog"] },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact", groupPath: ["Alpha", "Beta", "Carlson"], grouped: true },
+    { id: "day", groupPath: ["Alpha", "Beta"] },
+    { id: "month", groupPath: ["Alpha"], grouped: true },
+    { id: "duration", grouped: true },
+    { id: "campaign", grouped: true },
+    { id: "pdays", groupPath: ["Carlson"] },
+    { id: "previous", groupPath: ["Carlson", "Delta"] },
+    { id: "poutcome" },
+    { id: "y" },
+];
+export default function Demo() {
+    const [state, setState] = useState([
+        {
+            id: "columns",
+            type: "columns",
+            label: "Columns",
+            pills: columns.map((x) => ({ ...x, active: !x.hide, movable: true, tags: ["groupable"] })),
+        },
+        {
+            id: "group",
+            type: "row-pivots",
+            label: "Row Groups",
+            accepts: ["groupable"],
+            pills: columns.filter((x) => x.grouped).map((x) => ({ ...x, active: true, movable: true })),
+        },
+    ]);
+    return (_jsxs("div", { style: { display: "flex", gap: 8, flexDirection: "column" }, children: [_jsx("div", { style: { height: "200px" }, children: _jsx(PillManager, { rows: state, onPillRowChange: (p) => {
+                        setState(p.full);
+                    }, onPillItemThrown: (x) => {
+                        setState((prev) => {
+                            const next = [...prev];
+                            next[x.index] = {
+                                ...next[x.index],
+                                pills: next[x.index].pills.filter((item) => item.id !== x.item.id),
+                            };
+                            return next;
+                        });
+                    }, onPillItemActiveChange: (p) => {
+                        setState((prev) => {
+                            const next = [...prev];
+                            next.splice(p.index, 1, p.row);
+                            return next;
+                        });
+                    } }) }), _jsx("div", { style: { height: "200px", display: "flex", flexDirection: "column", alignItems: "center" }, children: _jsx("div", { style: { width: 400 }, children: _jsx(PillManager, { orientation: "vertical", rows: state, onPillRowChange: (p) => {
+                            setState(p.full);
+                        }, onPillItemThrown: (x) => {
+                            setState((prev) => {
+                                const next = [...prev];
+                                next[x.index] = {
+                                    ...next[x.index],
+                                    pills: next[x.index].pills.filter((item) => item.id !== x.item.id),
+                                };
+                                return next;
+                            });
+                        }, onPillItemActiveChange: (p) => {
+                            setState((prev) => {
+                                const next = [...prev];
+                                next.splice(p.index, 1, p.row);
+                                return next;
+                            });
+                        } }) }) })] }));
+}

package/dist/components/pill-manager/pill-row.context.d.ts

@@ -0,0 +1,8 @@
+import type { PillRowSpec } from "./types";
+export interface PillRowContext {
+    readonly expanded: boolean;
+    readonly expandToggle: (s?: boolean) => void;
+    readonly row: PillRowSpec;
+}
+export declare const PillRowProvider: import("react").Provider<PillRowContext>;
+export declare const usePillRow: () => PillRowContext;

package/dist/components/pill-manager/pill-row.context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const context = createContext({});
+export const PillRowProvider = context.Provider;
+export const usePillRow = () => useContext(context);

package/dist/components/pill-manager/pill-row.d.ts

@@ -0,0 +1,12 @@
+import { type JSX } from "react";
+import type { PillRowSpec } from "./types.js";
+export declare const PillRow: import("react").ForwardRefExoticComponent<{
+    readonly row: PillRowSpec;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace PillRow {
+    type Props = {
+        readonly row: PillRowSpec;
+    } & Omit<JSX.IntrinsicElements["div"], "ref">;
+}

package/dist/components/pill-manager/pill-row.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { PillRowProvider } from "./pill-row.context.js";
+import { usePillRoot } from "./root.context.js";
+function PillRowBase({ row, children, ...props }, forwarded) {
+    const [expanded, setExpanded] = useState(false);
+    const { orientation } = usePillRoot();
+    const value = useMemo(() => {
+        return {
+            expanded,
+            expandToggle: (s) => {
+                if (s != null)
+                    setExpanded(s);
+                else
+                    setExpanded((prev) => !prev);
+            },
+            row,
+        };
+    }, [expanded, row]);
+    return (_jsx(PillRowProvider, { value: value, children: _jsx("div", { ...props, ref: forwarded, "data-ln-pill-row": true, "data-ln-expanded": expanded, "data-ln-orientation": orientation, children: children }) }));
+}
+export const PillRow = forwardRef(PillRowBase);

package/dist/components/pill-manager/root.context.d.ts

@@ -0,0 +1,40 @@
+import { type Dispatch, type RefObject, type SetStateAction } from "react";
+import type { PillItemSpec, PillRowSpec } from "./types";
+export type PillRootContext = {
+    readonly rows: PillRowSpec[];
+    readonly orientation: "horizontal" | "vertical";
+    readonly onPillRowChange: (params: {
+        readonly changed: PillRowSpec[];
+        readonly full: PillRowSpec[];
+    }) => void;
+    readonly onPillItemActiveChange: (params: {
+        readonly index: number;
+        readonly item: PillItemSpec;
+        readonly row: PillRowSpec;
+    }) => void;
+    readonly onPillItemThrown?: (params: {
+        readonly index: number;
+        readonly item: PillItemSpec;
+        readonly row: PillRowSpec;
+    }) => void;
+    readonly cloned: null | PillRowSpec[];
+    readonly setCloned: Dispatch<SetStateAction<null | PillRowSpec[]>>;
+    readonly setDragState: Dispatch<SetStateAction<{
+        readonly activeId: string;
+        readonly activeRow: string;
+        readonly activeType: string;
+    } | null>>;
+    readonly dragState: null | {
+        readonly activeId: string;
+        readonly activeRow: string;
+        readonly activeType: string;
+    };
+    movedRef: RefObject<{
+        pillId: string;
+        id: string;
+    } | null>;
+    prevSwapId: RefObject<string | null>;
+    prevRowId: RefObject<string | null>;
+};
+export declare const PillRootProvider: import("react").Provider<PillRootContext>;
+export declare const usePillRoot: () => PillRootContext;

package/dist/components/pill-manager/root.context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const context = createContext({});
+export const PillRootProvider = context.Provider;
+export const usePillRoot = () => useContext(context);

package/dist/components/pill-manager/root.d.ts

@@ -0,0 +1,25 @@
+import { type JSX, type ReactNode } from "react";
+import { type PillRootContext } from "./root.context.js";
+import type { PillItemSpec, PillRowSpec } from "./types.js";
+export declare const PillManager: import("react").NamedExoticComponent<Omit<PillManager.Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace PillManager {
+    type Props = Omit<JSX.IntrinsicElements["div"], "children"> & {
+        readonly rows: PillRowSpec[];
+        readonly orientation?: "horizontal" | "vertical";
+        readonly children?: (row: PillRowSpec, ctx: PillRootContext) => ReactNode;
+        readonly onPillRowChange?: (params: {
+            readonly changed: PillRowSpec[];
+            readonly full: PillRowSpec[];
+        }) => void;
+        readonly onPillItemActiveChange?: (params: {
+            readonly index: number;
+            readonly item: PillItemSpec;
+            readonly row: PillRowSpec;
+        }) => void;
+        readonly onPillItemThrown?: (params: {
+            readonly index: number;
+            readonly item: PillItemSpec;
+            readonly row: PillRowSpec;
+        }) => void;
+    };
+}

package/dist/components/pill-manager/root.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, Fragment, memo, useMemo, useRef, useState } from "react";
+import { PillRootProvider } from "./root.context.js";
+import { PillRowDefault } from "./row-default.js";
+function PillRootImpl({ children = PillRowDefault, rows, orientation, onPillRowChange, onPillItemActiveChange, onPillItemThrown, ...p }, ref) {
+    const [cloned, setCloned] = useState(null);
+    const [dragState, setDragState] = useState(null);
+    const prevSwapId = useRef(null);
+    const prevRowId = useRef(null);
+    const movedRef = useRef(null);
+    const value = useMemo(() => {
+        return {
+            orientation: orientation ?? "horizontal",
+            cloned,
+            setCloned,
+            rows: rows,
+            dragState,
+            setDragState,
+            movedRef,
+            prevSwapId,
+            prevRowId,
+            onPillItemActiveChange: onPillItemActiveChange ?? (() => { }),
+            onPillRowChange: onPillRowChange ?? (() => { }),
+            onPillItemThrown: onPillItemThrown ?? (() => { }),
+        };
+    }, [cloned, dragState, onPillItemActiveChange, onPillItemThrown, onPillRowChange, orientation, rows]);
+    const rendered = useMemo(() => {
+        const r = cloned ?? rows;
+        return r.map((x, i) => _jsx(Fragment, { children: children(x, value) }, i));
+    }, [children, cloned, rows, value]);
+    return (_jsx(PillRootProvider, { value: value, children: _jsx("div", { ...p, ref: ref, "data-ln-pill-root": true, "data-ln-orientation": orientation ?? "horizontal", children: rendered }) }));
+}
+export const PillManager = memo(forwardRef(PillRootImpl));

package/dist/components/pill-manager/row-default.d.ts

@@ -0,0 +1,3 @@
+import type { PillRootContext } from "./root.context.js";
+import type { PillRowSpec } from "./types.js";
+export declare function PillRowDefault(row: PillRowSpec, ctx: PillRootContext): import("react/jsx-runtime").JSX.Element;

package/dist/components/pill-manager/row-default.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PillContainer } from "./container.js";
+import { PillRowExpander } from "./expander.js";
+import { PillItem } from "./item.js";
+import { PillLabel } from "./label.js";
+import { PillRow } from "./pill-row.js";
+export function PillRowDefault(row, ctx) {
+    const orientation = ctx.orientation;
+    return (
+    // Label
+    _jsxs(PillRow, { row: row, children: [_jsx(PillLabel, { row: row }), _jsx(PillContainer, { children: row.pills.map((x) => {
+                    return _jsx(PillItem, { item: x }, x.id);
+                }) }), orientation === "horizontal" && _jsx(PillRowExpander, {})] }));
+}

package/dist/components/pill-manager/types.d.ts

@@ -0,0 +1,21 @@
+export interface PillItemSpec {
+    readonly id: string;
+    readonly active: boolean;
+    readonly name?: string;
+    readonly movable?: boolean;
+    readonly tags?: string[];
+    readonly data?: unknown;
+    readonly removable?: boolean;
+}
+export interface PillState {
+    readonly expanded: boolean;
+    readonly expandToggle: (s?: boolean) => void;
+    readonly row: PillRowSpec;
+}
+export interface PillRowSpec {
+    readonly id: string;
+    readonly pills: PillItemSpec[];
+    readonly accepts?: string[];
+    readonly label?: string;
+    readonly type?: "columns" | "row-groups" | "row-pivots" | "column-pivots" | "measures" | ({} & string);
+}

package/dist/components/row-group-cell.d.ts

@@ -0,0 +1,13 @@
+import type { RowAggregated, RowGroup, RowLeaf } from "@1771technologies/lytenyte-shared";
+import type { API, CellParamsWithIndex, GridSpec } from "../types";
+import type { ReactNode } from "react";
+import { type SlotComponent } from "../hooks/use-slot/index.js";
+export declare const RowGroupCell: <Spec extends GridSpec = GridSpec>({ api, row, leafLabel, groupLabel, aggLabel, expansionSlot, }: CellParamsWithIndex<Spec> & {
+    leafLabel?: (row: RowLeaf<Spec["data"]>, api: API<Spec>) => ReactNode;
+    groupLabel?: (row: RowGroup, api: API<Spec>) => ReactNode;
+    aggLabel?: (row: RowAggregated, api: API<Spec>) => ReactNode;
+    expansionSlot?: SlotComponent<{
+        readonly row: RowGroup;
+        readonly api: API<Spec>;
+    }>;
+}) => import("react/jsx-runtime").JSX.Element;