@drawnagency/primitives 0.1.0 → 0.2.0

package/dist/components/primitives/LinkPopover.js

@@ -1,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Button } from "../shared/Button";
-export function LinkPopover({ editor, onClose }) {
-    const existingAttrs = editor.getAttributes("link");
-    const [url, setUrl] = useState(existingAttrs.href ?? "");
-    const [openInNewTab, setOpenInNewTab] = useState(existingAttrs.target === "_blank");
-    const inputRef = useRef(null);
-    const hasLink = Boolean(existingAttrs.href);
-    useEffect(() => {
-        inputRef.current?.focus();
-    }, []);
-    const handleApply = () => {
-        if (url.trim()) {
-            editor
-                .chain()
-                .focus()
-                .extendMarkRange("link")
-                .setLink({ href: url.trim(), target: openInNewTab ? "_blank" : null })
-                .run();
-        }
-        onClose();
-    };
-    const handleRemove = () => {
-        editor.chain().focus().extendMarkRange("link").unsetLink().run();
-        onClose();
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === "Enter") {
-            e.preventDefault();
-            handleApply();
-        }
-        else if (e.key === "Escape") {
-            e.preventDefault();
-            onClose();
-        }
-    };
-    return (_jsxs("div", { className: "flex flex-col gap-2 rounded bg-base-accent p-3 shadow-lg", onMouseDown: (e) => e.stopPropagation(), children: [_jsx("input", { ref: inputRef, type: "url", value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: handleKeyDown, placeholder: "https://example.com", className: "rounded border border-base-contrast/20 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast/40 focus:outline-none focus:ring-1 focus:ring-primary" }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm text-base-contrast", children: [_jsx("input", { type: "checkbox", checked: openInNewTab, onChange: (e) => setOpenInNewTab(e.target.checked), className: "accent-primary" }), "Open in new tab"] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "brand", size: "sm", onMouseDown: (e) => {
-                            e.preventDefault();
-                            handleApply();
-                        }, children: "Apply" }), hasLink && (_jsx(Button, { variant: "secondary", size: "sm", onMouseDown: (e) => {
-                            e.preventDefault();
-                            handleRemove();
-                        }, children: "Remove" })), _jsx(Button, { variant: "secondary", size: "sm", onMouseDown: (e) => {
-                            e.preventDefault();
-                            onClose();
-                        }, children: "Cancel" })] })] }));
-}

package/dist/components/primitives/MediaSettingsForms.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef } from "react";
-import { cn } from "../../lib/cn";
-import { Check, X } from "lucide-react";
-import { Checkbox } from "../shared/Checkbox";
-import { Select } from "../shared/Select";
-export function ImageSettingsForm({ border, objectFit, onChange, }) {
-    const [itemBorder, setItemBorder] = useState(border);
-    const [fit, setFit] = useState(objectFit);
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(Select, { label: "Object fit", value: fit ?? "", onChange: (v) => {
-                    const val = (v || undefined);
-                    setFit(val);
-                    onChange({ border: itemBorder, objectFit: val });
-                }, options: [
-                    { value: "", label: "Default (inherit from grid)" },
-                    { value: "contain", label: "Contain" },
-                    { value: "cover", label: "Crop to fill" },
-                ] }), _jsx(Checkbox, { checked: itemBorder ?? false, onChange: (v) => {
-                    const val = v || undefined;
-                    setItemBorder(val);
-                    onChange({ border: val, objectFit: fit });
-                }, label: "Override border settings" })] }));
-}
-export function DoDontImageSettingsForm({ border, objectFit, doDont: initialDoDont, onChange, }) {
-    const [doDont, setDoDont] = useState(initialDoDont);
-    const latestRef = useRef({ border, objectFit });
-    const handleBaseChange = (updated) => {
-        latestRef.current = updated;
-        onChange({ ...updated, doDont });
-    };
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(ImageSettingsForm, { border: border, objectFit: objectFit, onChange: handleBaseChange }), _jsx("hr", { className: "border-base-200" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("button", { className: cn("cursor-pointer flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm transition-colors", doDont === "do"
-                            ? "border-green-600 bg-base-accent text-base-contrast"
-                            : "border-base-200 text-base-contrast-light hover:bg-base-accent"), onClick: () => {
-                            setDoDont("do");
-                            onChange({ ...latestRef.current, doDont: "do" });
-                        }, children: [_jsx(Check, { size: 16, className: "text-green-600" }), "Do"] }), _jsxs("button", { className: cn("cursor-pointer flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-sm transition-colors", doDont === "dont"
-                            ? "border-red-600 bg-base-accent text-base-contrast"
-                            : "border-base-200 text-base-contrast-light hover:bg-base-accent"), onClick: () => {
-                            setDoDont("dont");
-                            onChange({ ...latestRef.current, doDont: "dont" });
-                        }, children: [_jsx(X, { size: 16, className: "text-red-600" }), "Don't"] })] })] }));
-}

package/dist/components/primitives/ResolvedMedia.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../lib/cn";
-import { ImageIcon } from "lucide-react";
-import { useResolvedMedia } from "../../hooks/useResolvedMedia";
-export function ResolvedMedia({ imageId, className, imgClassName, }) {
-    const { src, srcset, poster, alt, kind } = useResolvedMedia(imageId);
-    const mediaClass = cn("h-full w-full", imgClassName);
-    return (_jsx("div", { className: className, children: src ? (kind === "video" ? (_jsx("video", { src: src, poster: poster, muted: true, playsInline: true, loop: true, autoPlay: true, className: mediaClass })) : (_jsx("img", { src: src, srcSet: srcset, alt: alt, className: mediaClass }))) : (_jsxs("div", { className: "flex aspect-video h-full w-full flex-col items-center justify-center gap-1 rounded bg-base-accent text-base-contrast-light/50", children: [_jsx(ImageIcon, { size: 24 }), _jsx("span", { className: "text-sm", children: "No Image" })] })) }));
-}

package/dist/components/primitives/RichTextToolbar.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { cn } from "../../lib/cn";
-import { LinkPopover } from "./LinkPopover";
-function ToolbarButton({ isActive, onClick, title, children }) {
-    return (_jsx("button", { type: "button", title: title, "aria-label": title, "aria-pressed": isActive, onMouseDown: (e) => {
-            e.preventDefault();
-            onClick();
-        }, className: cn("cursor-pointer rounded px-2 py-1 text-sm font-medium transition-colors", isActive
-            ? "bg-primary text-primary-contrast"
-            : "bg-base-accent text-base-contrast hover:opacity-80"), children: children }));
-}
-function Separator() {
-    return _jsx("div", { className: "mx-1 h-5 w-px bg-base-contrast/20" });
-}
-export function RichTextToolbar({ editor, preset }) {
-    const [showLinkPopover, setShowLinkPopover] = useState(false);
-    const paragraphClass = editor.getAttributes("paragraph").class;
-    const isLargeActive = paragraphClass === "large";
-    const isLeadInActive = paragraphClass === "lead-in";
-    const toggleParagraphClass = (cls) => {
-        const next = paragraphClass === cls ? null : cls;
-        editor.chain().focus().updateAttributes("paragraph", { class: next }).run();
-    };
-    return (_jsxs("div", { "data-testid": "rich-text-toolbar", className: "flex items-center gap-1 rounded border border-base-contrast/10 bg-base-accent p-1 shadow-md", children: [_jsx(ToolbarButton, { isActive: editor.isActive("bold"), onClick: () => editor.chain().focus().toggleBold().run(), title: "Bold", children: _jsx("strong", { children: "B" }) }), _jsx(ToolbarButton, { isActive: editor.isActive("italic"), onClick: () => editor.chain().focus().toggleItalic().run(), title: "Italic", children: _jsx("em", { children: "I" }) }), _jsx(ToolbarButton, { isActive: editor.isActive("underline"), onClick: () => editor.chain().focus().toggleUnderline().run(), title: "Underline", children: _jsx("span", { className: "underline", children: "U" }) }), preset === "rich" && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("div", { className: "relative", children: [_jsx(ToolbarButton, { isActive: editor.isActive("link") || showLinkPopover, onClick: () => setShowLinkPopover((prev) => !prev), title: "Link", children: "\uD83D\uDD17" }), showLinkPopover && (_jsx("div", { className: "absolute left-0 top-full z-50 mt-1", children: _jsx(LinkPopover, { editor: editor, onClose: () => setShowLinkPopover(false) }) }))] }), _jsx(Separator, {}), _jsx(ToolbarButton, { isActive: editor.isActive("bulletList"), onClick: () => editor.chain().focus().toggleBulletList().run(), title: "Bullet List", children: "\u2022\u2261" }), _jsx(ToolbarButton, { isActive: editor.isActive("orderedList"), onClick: () => editor.chain().focus().toggleOrderedList().run(), title: "Ordered List", children: "1\u2261" }), _jsx(Separator, {}), _jsx(ToolbarButton, { isActive: isLargeActive, onClick: () => toggleParagraphClass("large"), title: "Large Paragraph", children: "Lg" }), _jsx(ToolbarButton, { isActive: isLeadInActive, onClick: () => toggleParagraphClass("lead-in"), title: "Lead-In", children: "Li" })] }))] }));
-}

package/dist/components/primitives/tiptap-presets.js

@@ -1,44 +0,0 @@
-import StarterKit from "@tiptap/starter-kit";
-import Underline from "@tiptap/extension-underline";
-import Link from "@tiptap/extension-link";
-import { CustomParagraph } from "./CustomParagraph";
-/**
- * Basic preset: inline formatting only.
- * Bold, italic, underline. No lists, links, or structural elements.
- */
-const basic = [
-    StarterKit.configure({
-        paragraph: false,
-        heading: false,
-        blockquote: false,
-        bulletList: false,
-        orderedList: false,
-        listItem: false,
-        codeBlock: false,
-        horizontalRule: false,
-        code: false,
-        strike: false,
-    }),
-    CustomParagraph,
-    Underline,
-];
-/**
- * Rich preset: full prose editing.
- * Everything in basic + links, bullet lists, ordered lists,
- * large paragraph and lead-in variants (via CustomParagraph).
- */
-const rich = [
-    StarterKit.configure({
-        paragraph: false,
-        heading: false,
-        blockquote: false,
-        codeBlock: false,
-        horizontalRule: false,
-        code: false,
-        strike: false,
-    }),
-    CustomParagraph,
-    Underline,
-    Link.configure({ openOnClick: false }),
-];
-export const presets = { basic, rich };

package/dist/components/primitives/useEditableCollection.js

@@ -1,61 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from "react";
-let nextId = 0;
-function uid() {
-    return typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
-        ? crypto.randomUUID()
-        : `_id_${nextId++}_${Date.now()}`;
-}
-function wrapItems(items) {
-    return items.map((data) => ({ id: uid(), data }));
-}
-export function useEditableCollection({ items, onChange, createItem, }) {
-    const [wrappedItems, setWrappedItems] = useState(() => wrapItems(items));
-    const prevItemsRef = useRef(items);
-    useEffect(() => {
-        if (items === prevItemsRef.current)
-            return;
-        prevItemsRef.current = items;
-        setWrappedItems((prev) => {
-            return items.map((data, i) => {
-                if (i < prev.length) {
-                    return { id: prev[i].id, data };
-                }
-                return { id: uid(), data };
-            });
-        });
-    }, [items]);
-    const onReorder = useCallback((fromIndex, toIndex) => {
-        setWrappedItems((prev) => {
-            const next = [...prev];
-            const [moved] = next.splice(fromIndex, 1);
-            next.splice(toIndex, 0, moved);
-            onChange(next.map((w) => w.data));
-            return next;
-        });
-    }, [onChange]);
-    const onAdd = useCallback(() => {
-        const newItem = createItem();
-        setWrappedItems((prev) => {
-            const next = [...prev, { id: uid(), data: newItem }];
-            onChange(next.map((w) => w.data));
-            return next;
-        });
-    }, [createItem, onChange]);
-    const onInsert = useCallback((index) => {
-        const newItem = createItem();
-        setWrappedItems((prev) => {
-            const next = [...prev];
-            next.splice(index, 0, { id: uid(), data: newItem });
-            onChange(next.map((w) => w.data));
-            return next;
-        });
-    }, [createItem, onChange]);
-    const onRemove = useCallback((id) => {
-        setWrappedItems((prev) => {
-            const next = prev.filter((w) => w.id !== id);
-            onChange(next.map((w) => w.data));
-            return next;
-        });
-    }, [onChange]);
-    return { wrappedItems, onReorder, onAdd, onInsert, onRemove };
-}

package/dist/components/primitives/useEditablePlainText.js

@@ -1,27 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from "react";
-export function useEditablePlainText({ value: propValue, onChange, multiline = false, }) {
-    const [value, setValue] = useState(propValue);
-    const lastPropValue = useRef(propValue);
-    // Sync with external prop changes
-    useEffect(() => {
-        if (propValue !== lastPropValue.current) {
-            setValue(propValue);
-            lastPropValue.current = propValue;
-        }
-    }, [propValue]);
-    const handleInput = useCallback((text) => {
-        setValue(text);
-    }, []);
-    const handleBlur = useCallback(() => {
-        if (value !== propValue) {
-            onChange(value);
-            lastPropValue.current = value;
-        }
-    }, [value, propValue, onChange]);
-    return {
-        value,
-        handleInput,
-        handleBlur,
-        shouldPreventEnter: !multiline,
-    };
-}

package/dist/components/primitives/useEditableRichText.js

@@ -1,52 +0,0 @@
-import { useState, useRef, useCallback, useEffect } from "react";
-import { Editor } from "@tiptap/core";
-import { presets } from "./tiptap-presets";
-export function useEditableRichText({ value, onChange, preset, }) {
-    // Dual ref+state: ref for stable callback access, state for re-renders
-    const editorRef = useRef(null);
-    const [editor, setEditor] = useState(null);
-    // Refs for latest prop values (avoids stale closures in callbacks)
-    const valueRef = useRef(value);
-    const onChangeRef = useRef(onChange);
-    useEffect(() => {
-        valueRef.current = value;
-    }, [value]);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    const activate = useCallback(() => {
-        if (editorRef.current)
-            return;
-        const ed = new Editor({
-            extensions: presets[preset],
-            content: valueRef.current,
-        });
-        editorRef.current = ed;
-        setEditor(ed);
-    }, [preset]);
-    const deactivate = useCallback(() => {
-        const ed = editorRef.current;
-        if (!ed)
-            return;
-        const html = ed.getHTML();
-        ed.destroy();
-        editorRef.current = null;
-        setEditor(null);
-        if (html !== valueRef.current) {
-            onChangeRef.current(html);
-        }
-    }, []);
-    // Cleanup on unmount
-    useEffect(() => {
-        return () => {
-            editorRef.current?.destroy();
-            editorRef.current = null;
-        };
-    }, []);
-    return {
-        isEditorActive: editor !== null,
-        editor,
-        activate,
-        deactivate,
-    };
-}

package/dist/components/sections/Button/CTAButton.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../lib/cn";
-import { Download } from "lucide-react";
-import { EditablePlainText } from "../../primitives/EditablePlainText";
-export default function Button({ text, href, target, download, onChange }) {
-    const base = "inline-block rounded-md px-6 py-3 font-bold transition-colors";
-    const variant = "border-2 border-primary text-primary hover:bg-primary hover:text-primary-contrast";
-    if (onChange) {
-        return (_jsxs("span", { className: cn(base, variant, "inline-flex items-center gap-2"), children: [download && _jsx(Download, { size: 16, className: "shrink-0" }), _jsx(EditablePlainText, { tag: "span", value: text, onChange: (newText) => onChange({
-                        type: "button",
-                        content: { text: newText, href, target, download },
-                    }), isEditMode: true, placeholder: "Button text" })] }));
-    }
-    if (href) {
-        return (_jsxs("a", { href: href, target: target, download: download ? "" : undefined, className: cn(base, variant, download && "inline-flex items-center gap-2"), children: [download && _jsx(Download, { size: 16, className: "shrink-0" }), text] }));
-    }
-    return (_jsx("button", { className: cn("cursor-pointer", base, variant), children: text }));
-}

package/dist/components/sections/Button/index.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import CTAButton from "./CTAButton";
-const schema = z.object({
-    type: z.literal("button"),
-    content: z.object({
-        text: z.string(),
-        href: z.string().optional(),
-        target: z.string().optional(),
-        download: z.boolean().optional(),
-    }),
-});
-export default defineSection({
-    type: "button",
-    label: "Button",
-    schema,
-    component: ({ content, onChange }) => (_jsx(CTAButton, { text: content.content.text, href: content.content.href, target: content.content.target, download: content.content.download, onChange: onChange ? (c) => onChange(c) : undefined })),
-    defaults: () => ({ type: "button", content: { text: "Button" } }),
-    settings: {
-        href: { type: "text", label: "URL", default: "", target: "content", placeholder: "https://..." },
-        target: {
-            type: "select", label: "Target", default: "_self", target: "content",
-            options: [{ label: "Same tab (_self)", value: "_self" }, { label: "New tab (_blank)", value: "_blank" }],
-        },
-        download: { type: "checkbox", label: "Download link", default: false, target: "content" },
-    },
-});

package/dist/components/sections/Colors/index.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { ColorItemSchema } from "../../../schemas/shared";
-import Colors from "../../brandguide/Colors";
-const schema = z.object({
-    type: z.literal("colors"),
-    content: z.object({ colors: z.array(ColorItemSchema) }),
-    options: z.object({
-        label: z.string().optional(),
-        columns: z.number().int().min(2).max(4).optional(),
-        collapsing: z.boolean().optional(),
-        showLabel: z.boolean().optional(),
-    }).optional(),
-});
-export default defineSection({
-    type: "colors",
-    label: "Colors",
-    schema,
-    component: ({ content, options, onChange, openModal }) => (_jsx(Colors, { colors: content.content.colors, columns: options?.columns, label: options?.label, collapsing: options?.collapsing, showLabel: options?.showLabel, onChange: onChange ? (c) => onChange(c) : undefined, openModal: openModal })),
-    defaults: () => ({
-        type: "colors",
-        content: { colors: [{ spaces: [{ hex: "#000000" }] }] },
-    }),
-    settings: {
-        columns: {
-            type: "select", label: "Columns", default: "3", coerce: "number",
-            options: [{ label: "2", value: "2" }, { label: "3", value: "3" }, { label: "4", value: "4" }],
-        },
-        label: { type: "text", label: "Label", default: "", placeholder: "Color Section Label" },
-        showLabel: { type: "checkbox", label: "Show label", default: true },
-        collapsing: { type: "checkbox", label: "Collapsing layout", default: false },
-    },
-});

package/dist/components/sections/DoDontList/index.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import DoDontList from "../../brandguide/DoDontList";
-const DoDontItemSchema = z.object({ label: z.string(), text: z.string(), icon: z.string().optional() });
-const schema = z.object({
-    type: z.literal("do_dont"),
-    content: z.object({
-        doItems: z.array(DoDontItemSchema),
-        dontItems: z.array(DoDontItemSchema),
-    }),
-    options: z.object({
-        showLabel: z.boolean().optional(),
-        stackText: z.boolean().optional(),
-    }).optional(),
-});
-export default defineSection({
-    type: "do_dont",
-    label: "Do / Don't",
-    schema,
-    component: ({ content, options, onChange }) => (_jsx(DoDontList, { doItems: content.content.doItems, dontItems: content.content.dontItems, showLabel: options?.showLabel, stackText: options?.stackText, onChange: onChange ? (c) => onChange(c) : undefined })),
-    defaults: () => ({
-        type: "do_dont",
-        content: {
-            doItems: [{ label: "Do", text: "" }],
-            dontItems: [{ label: "Don't", text: "" }],
-        },
-    }),
-    settings: {
-        showLabel: { type: "checkbox", label: "Show labels", default: true },
-        stackText: { type: "checkbox", label: "Stack label above text", default: false },
-    },
-});

package/dist/components/sections/DoDontMediaGrid/index.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { defineSection } from "../../../lib/registry";
-import { z } from "zod";
-import { MediaReferenceSchema } from "../../../schemas/shared";
-import { MediaGridOptionsSchema } from "../../../schemas/media-grid-options";
-import DoDontMediaGrid from "../../brandguide/DoDontMediaGrid";
-const schema = z.object({
-    type: z.literal("do_dont_grid"),
-    content: z.object({
-        columns: z.number().int().min(1).max(5),
-        media: z.array(MediaReferenceSchema),
-    }),
-    options: MediaGridOptionsSchema,
-});
-export default defineSection({
-    type: "do_dont_grid",
-    label: "Do / Don't Grid",
-    schema,
-    component: ({ content, options, onChange, openModal }) => (_jsx(DoDontMediaGrid, { media: content.content.media, columns: content.content.columns, square: options?.square, border: options?.border, crop: options?.crop, showCaptions: options?.showCaptions, onChange: onChange ? (c) => onChange(c) : undefined, openModal: openModal })),
-    defaults: () => ({
-        type: "do_dont_grid",
-        options: {},
-        content: {
-            columns: 2,
-            media: [
-                { type: "doDontImage", imageId: "", doDont: "do" },
-                { type: "doDontImage", imageId: "", doDont: "dont" },
-            ],
-        },
-    }),
-    settings: {
-        columns: {
-            type: "select", label: "Columns", default: "2", target: "content", coerce: "number",
-            options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }, { label: "4", value: "4" }],
-        },
-        border: { type: "checkbox", label: "Show border", default: false },
-        square: { type: "checkbox", label: "Square aspect ratio", default: false },
-        crop: { type: "checkbox", label: "Crop to fill", default: false },
-        showCaptions: { type: "checkbox", label: "Show captions", default: false },
-    },
-});

package/dist/components/sections/IconList/IconList.js

@@ -1,131 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect, useState, useCallback } from "react";
-import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { cn } from "../../../lib/cn";
-import { getIcon } from "../../../lib/icons";
-import { useEditableCollection } from "../../primitives/useEditableCollection";
-import { EditablePlainText } from "../../primitives/EditablePlainText";
-import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
-import { IconButton } from "../../shared/IconButton";
-import { IconPicker } from "../../primitives/IconPicker";
-export default function IconList({ items, icon = null, showLabel = true, stackText = false, labelClassName = "font-bold text-base-contrast", textClassName = "text-base-contrast-light", iconClassName = "text-primary", onChange, onItemsChange, }) {
-    const isEditMode = !!onChange || !!onItemsChange;
-    const emitItems = useCallback((newItems) => {
-        onChange?.({
-            type: "icon_list",
-            content: { items: newItems },
-            options: { icon, showLabel, stackText },
-        });
-        onItemsChange?.(newItems);
-    }, [onChange, onItemsChange, icon, showLabel, stackText]);
-    if (!isEditMode) {
-        return (_jsx(ViewIconList, { items: items, defaultIcon: icon, showLabel: showLabel, stackText: stackText, labelClassName: labelClassName, textClassName: textClassName, iconClassName: iconClassName }));
-    }
-    return (_jsx(EditIconList, { items: items, defaultIcon: icon, showLabel: showLabel, stackText: stackText, labelClassName: labelClassName, textClassName: textClassName, iconClassName: iconClassName, onItemsChange: emitItems }));
-}
-// ---------------------------------------------------------------------------
-// Resolve the effective icon for an item: per-item override > section default
-// ---------------------------------------------------------------------------
-function resolveIcon(item, defaultIcon) {
-    const id = item.icon ?? defaultIcon;
-    return id ? getIcon(id) : null;
-}
-// ---------------------------------------------------------------------------
-// View mode
-// ---------------------------------------------------------------------------
-function ViewIconList({ items, defaultIcon, showLabel, stackText, labelClassName, textClassName, iconClassName, }) {
-    const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
-    return (_jsx("div", { className: "grid gap-4 pb-4", children: items.map((item, i) => {
-            const iconEntry = resolveIcon(item, defaultIcon);
-            return (_jsxs("div", { className: cn("grid gap-x-3", hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1"), children: [hasAnyIcon && (_jsx("div", { "data-testid": "icon-list-icon", className: cn("flex items-start pt-0.5", iconClassName), children: iconEntry && _jsx(iconEntry.icon, { size: 18 }) })), _jsxs("div", { "data-testid": "icon-list-content", className: stackText ? "flex flex-col" : undefined, children: [showLabel && (_jsxs("span", { className: labelClassName, children: [item.label, !stackText && " "] })), _jsx("span", { className: textClassName, children: item.text })] })] }, i));
-        }) }));
-}
-// ---------------------------------------------------------------------------
-// Edit mode
-// ---------------------------------------------------------------------------
-function EditIconList({ items, defaultIcon, showLabel, stackText, labelClassName, textClassName, iconClassName, onItemsChange, }) {
-    const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
-        items,
-        onChange: onItemsChange,
-        createItem: () => ({ label: "", text: "" }),
-    });
-    const [dragState, setDragState] = useState({ sourceId: null, targetId: null });
-    const updateItem = useCallback((index, patch) => {
-        const updated = wrappedItems.map((w, i) => i === index ? { ...w.data, ...patch } : w.data);
-        onItemsChange(updated);
-    }, [wrappedItems, onItemsChange]);
-    const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
-    return (_jsxs("div", { className: "group/list relative grid gap-4 pb-4", children: [wrappedItems.map((wrapped, index) => (_jsx(EditableRow, { id: wrapped.id, index: index, item: wrapped.data, defaultIcon: defaultIcon, hasAnyIcon: hasAnyIcon, showLabel: showLabel, stackText: stackText, labelClassName: labelClassName, textClassName: textClassName, iconClassName: iconClassName, dragState: dragState, setDragState: setDragState, onReorder: onReorder, onRemove: onRemove, onUpdateItem: (patch) => updateItem(index, patch) }, wrapped.id))), _jsx(TrailingDropZone, { index: wrappedItems.length, dragState: dragState, setDragState: setDragState, onReorder: onReorder }), _jsx(IconButton, { icon: _jsx(AddIcon, { size: 16 }), label: "Add item", size: "lg", intent: "primary", onClick: onAdd, className: "absolute -bottom-6 left-1/2 z-20 -translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 transition-opacity group-hover/list:opacity-100" })] }));
-}
-function EditableRow({ id, index, item, defaultIcon, hasAnyIcon, showLabel, stackText, labelClassName, textClassName, iconClassName, dragState, setDragState, onReorder, onRemove, onUpdateItem, }) {
-    const rowRef = useRef(null);
-    const handleRef = useRef(null);
-    const [iconHover, setIconHover] = useState(false);
-    const [pickerOpen, setPickerOpen] = useState(false);
-    const iconEntry = resolveIcon(item, defaultIcon);
-    const effectiveIconId = item.icon ?? defaultIcon ?? null;
-    useEffect(() => {
-        const row = rowRef.current;
-        const handle = handleRef.current;
-        if (!row || !handle)
-            return;
-        const cleanupDraggable = draggable({
-            element: handle,
-            getInitialData: () => ({ dragType: "icon-list-row", id, index }),
-            onDragStart: () => setDragState({ sourceId: id, targetId: null }),
-            onDrop: () => setDragState({ sourceId: null, targetId: null }),
-        });
-        const cleanupDropTarget = dropTargetForElements({
-            element: row,
-            canDrop: ({ source }) => source.data.dragType === "icon-list-row",
-            getData: () => ({ id, index }),
-            onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
-            onDragLeave: () => setDragState((prev) => prev.targetId === id ? { ...prev, targetId: null } : prev),
-            onDrop: ({ source }) => {
-                const fromIndex = source.data.index;
-                if (fromIndex !== index)
-                    onReorder(fromIndex, index);
-            },
-        });
-        return () => {
-            cleanupDraggable();
-            cleanupDropTarget();
-        };
-    }, [id, index, onReorder, setDragState]);
-    const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
-    return (_jsxs("div", { ref: rowRef, className: cn("group/row relative grid gap-x-3", hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1", isDropTarget && "border-t-2 border-primary"), children: [_jsx(IconButton, { ref: handleRef, icon: _jsx(DragHandle, { size: 16 }), label: "Drag to reorder", size: "sm", className: cn("absolute -left-7 top-0 shrink-0 cursor-grab rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast active:cursor-grabbing", iconHover
-                    ? "opacity-0 pointer-events-none"
-                    : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"), tabIndex: -1 }), hasAnyIcon && (_jsxs("div", { className: cn("relative flex items-start pt-0.5", iconClassName), onMouseEnter: () => setIconHover(true), onMouseLeave: () => setIconHover(false), children: [iconEntry ? (_jsx("button", { className: "cursor-pointer transition-opacity hover:opacity-70", "aria-label": "Change icon", onClick: () => setPickerOpen((prev) => !prev), children: _jsx(iconEntry.icon, { size: 18 }) })) : null, iconHover && !pickerOpen && iconEntry && (_jsx("span", { className: "pointer-events-none absolute right-full mr-3 top-0.5 whitespace-nowrap text-xs text-base-contrast-light/80", children: "Edit" })), pickerOpen && (_jsx("div", { className: "absolute top-full left-0 z-50 mt-1", children: _jsx(IconPicker, { selected: effectiveIconId, showRemove: false, onSelect: (newIcon) => {
-                                if (newIcon !== null)
-                                    onUpdateItem({ icon: newIcon });
-                                setPickerOpen(false);
-                                setIconHover(false);
-                            }, onClose: () => {
-                                setPickerOpen(false);
-                                setIconHover(false);
-                            } }) }))] })), _jsxs("div", { className: stackText ? "flex flex-col" : undefined, children: [showLabel && (_jsx(EditablePlainText, { tag: "span", value: item.label, onChange: (label) => onUpdateItem({ label }), isEditMode: true, placeholder: "Label", className: cn(labelClassName, !stackText && "mr-1") })), _jsx(EditablePlainText, { tag: "span", value: item.text, onChange: (text) => onUpdateItem({ text }), isEditMode: true, placeholder: "Text", className: textClassName })] }), _jsx(IconButton, { icon: _jsx(DeleteIcon, { size: 14 }), label: "Delete item", size: "sm", intent: "destructive", onClick: () => onRemove(id), className: "absolute -right-7 top-0 opacity-0 group-hover/row:opacity-100 no-hover:opacity-100" })] }));
-}
-function TrailingDropZone({ index, dragState, setDragState, onReorder, }) {
-    const ref = useRef(null);
-    const trailingId = "__trailing__";
-    useEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        const cleanup = dropTargetForElements({
-            element: el,
-            canDrop: ({ source }) => source.data.dragType === "icon-list-row",
-            getData: () => ({ id: trailingId, index }),
-            onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: trailingId })),
-            onDragLeave: () => setDragState((prev) => prev.targetId === trailingId ? { ...prev, targetId: null } : prev),
-            onDrop: ({ source }) => {
-                const fromIndex = source.data.index;
-                if (fromIndex !== index - 1)
-                    onReorder(fromIndex, index - 1);
-            },
-        });
-        return cleanup;
-    }, [index, onReorder, setDragState]);
-    const isDropTarget = dragState.targetId === trailingId && dragState.sourceId !== null;
-    return (_jsx("div", { ref: ref, className: cn("absolute bottom-0 left-0 right-0 h-4", isDropTarget && "border-t-2 border-primary") }));
-}

package/dist/components/sections/IconList/IconListSettings.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Checkbox } from "../../shared/Checkbox";
-import { FormLabel } from "../../shared/FormLabel";
-import { IconPicker } from "../../primitives/IconPicker";
-import { getIcon } from "../../../lib/icons";
-export function IconListSettings({ icon: initialIcon, showLabel: initialShowLabel, stackText: initialStackText, onChange, }) {
-    const [icon, setIcon] = useState(initialIcon);
-    const [showLabel, setShowLabel] = useState(initialShowLabel);
-    const [stackText, setStackText] = useState(initialStackText);
-    const [pickerOpen, setPickerOpen] = useState(false);
-    const emit = (overrides) => onChange({ icon, showLabel, stackText, ...overrides });
-    const showIcons = icon !== null;
-    const iconEntry = icon ? getIcon(icon) : null;
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx(FormLabel, { htmlFor: "icon-picker-btn", children: "Default Icon" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { id: "icon-picker-btn", className: "cursor-pointer flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light hover:border-primary hover:text-primary", onClick: () => setPickerOpen((prev) => !prev), children: [iconEntry && _jsx(iconEntry.icon, { size: 16 }), _jsx("span", { children: iconEntry?.label ?? "None" })] }), icon && (_jsx("button", { className: "cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast", onClick: () => { setIcon(null); emit({ icon: null }); }, children: "Clear" }))] }), pickerOpen && (_jsx("div", { className: "absolute top-full left-0 z-50 mt-1", children: _jsx(IconPicker, { selected: icon, onSelect: (newIcon) => {
-                                if (newIcon !== null) {
-                                    setIcon(newIcon);
-                                    emit({ icon: newIcon });
-                                }
-                                setPickerOpen(false);
-                            }, onClose: () => setPickerOpen(false) }) }))] }), _jsx(Checkbox, { checked: showLabel, onChange: (v) => { setShowLabel(v); emit({ showLabel: v }); }, label: "Show labels" }), showLabel && (_jsx(Checkbox, { checked: stackText, onChange: (v) => { setStackText(v); emit({ stackText: v }); }, label: "Stack label above text" }))] }));
-}