@reacteditor/field-tailwind 0.0.1

package/dist/index.mjs

@@ -0,0 +1,542 @@
+// ../tsup-config/react-import.js
+import React from "react";
+
+// index.tsx
+import { FieldLabel } from "@reacteditor/core";
+
+// combobox.tsx
+import * as React2 from "react";
+import { useMemo, useRef, useState } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+import { Check, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "reacteditor-field-tailwind";
+var STYLES = `
+.rtw-chips:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
+.rtw-input:focus { outline: none; }
+.rtw-input::placeholder { color: #9ca3af; }
+.rtw-item[data-highlighted] { background: #eef2ff; }
+.rtw-item[data-selected] { font-weight: 500; }
+.rtw-chip-remove:hover { opacity: 1; }
+.rtw-list { scrollbar-width: thin; }
+`;
+var ensureStyles = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = STYLE_ID;
+  el.textContent = STYLES;
+  document.head.appendChild(el);
+};
+var s = {
+  chips: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 4,
+    minHeight: 34,
+    width: "100%",
+    padding: "4px 6px",
+    borderRadius: 6,
+    border: "1px solid #d1d5db",
+    background: "#fff",
+    boxSizing: "border-box",
+    transition: "border-color 120ms, box-shadow 120ms"
+  },
+  chip: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    height: 22,
+    padding: "0 4px 0 8px",
+    borderRadius: 4,
+    background: "#f1f5f9",
+    color: "#111827",
+    fontSize: 12,
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    whiteSpace: "nowrap"
+  },
+  chipRemove: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 16,
+    height: 16,
+    padding: 0,
+    border: "none",
+    background: "transparent",
+    color: "inherit",
+    cursor: "pointer",
+    opacity: 0.5,
+    transition: "opacity 120ms"
+  },
+  input: {
+    flex: 1,
+    minWidth: 80,
+    height: 22,
+    border: "none",
+    background: "transparent",
+    fontSize: 13,
+    color: "#111827",
+    padding: 0
+  },
+  popup: {
+    boxSizing: "border-box",
+    width: "var(--anchor-width)",
+    maxHeight: "min(280px, var(--available-height))",
+    overflowY: "auto",
+    background: "#fff",
+    border: "1px solid #e5e7eb",
+    borderRadius: 8,
+    boxShadow: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
+    padding: 4,
+    zIndex: 9999
+  },
+  list: { display: "flex", flexDirection: "column" },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    padding: "6px 8px",
+    borderRadius: 4,
+    fontSize: 13,
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    color: "#111827",
+    cursor: "default",
+    userSelect: "none"
+  },
+  indicator: {
+    display: "inline-flex",
+    alignItems: "center",
+    color: "#6366f1"
+  },
+  empty: {
+    padding: "8px",
+    fontSize: 13,
+    color: "#6b7280",
+    textAlign: "center"
+  },
+  create: { color: "#6366f1" }
+};
+function TailwindCombobox({
+  value,
+  onValueChange,
+  items,
+  placeholder = "Add classes\u2026",
+  disabled,
+  id
+}) {
+  ensureStyles();
+  const anchor = useRef(null);
+  const [query, setQuery] = useState("");
+  const filteredItems = useMemo(() => {
+    const q = query.trim();
+    const lower = q.toLowerCase();
+    const matches = items.filter((c) => c.toLowerCase().includes(lower));
+    const isKnown = items.includes(q) || value.includes(q);
+    return q && !isKnown ? [q, ...matches] : matches;
+  }, [query, items, value]);
+  const isCreate = (item) => !items.includes(item);
+  return /* @__PURE__ */ jsxs(
+    Combobox.Root,
+    {
+      multiple: true,
+      items,
+      value,
+      filteredItems,
+      onValueChange: (next) => onValueChange(next != null ? next : []),
+      onInputValueChange: (next) => setQuery(next),
+      children: [
+        /* @__PURE__ */ jsx(Combobox.Chips, { ref: anchor, className: "rtw-chips", style: s.chips, children: /* @__PURE__ */ jsx(Combobox.Value, { children: (values) => /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+          values.map((v) => /* @__PURE__ */ jsxs(Combobox.Chip, { style: s.chip, children: [
+            v,
+            /* @__PURE__ */ jsx(
+              Combobox.ChipRemove,
+              {
+                className: "rtw-chip-remove",
+                style: s.chipRemove,
+                "aria-label": `Remove ${v}`,
+                children: /* @__PURE__ */ jsx(X, { size: 12 })
+              }
+            )
+          ] }, v)),
+          /* @__PURE__ */ jsx(
+            Combobox.Input,
+            {
+              id,
+              disabled,
+              placeholder: values.length === 0 ? placeholder : "",
+              className: "rtw-input",
+              style: s.input
+            }
+          )
+        ] }) }) }),
+        /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { anchor, sideOffset: 4, style: { zIndex: 9999 }, children: /* @__PURE__ */ jsxs(Combobox.Popup, { style: s.popup, children: [
+          /* @__PURE__ */ jsx(Combobox.Empty, { style: s.empty, children: "No classes found." }),
+          /* @__PURE__ */ jsx(Combobox.List, { className: "rtw-list", style: s.list, children: (item) => /* @__PURE__ */ jsxs(
+            Combobox.Item,
+            {
+              value: item,
+              className: "rtw-item",
+              style: s.item,
+              children: [
+                /* @__PURE__ */ jsx("span", { style: isCreate(item) ? s.create : void 0, children: isCreate(item) ? `Add "${item}"` : item }),
+                /* @__PURE__ */ jsx(Combobox.ItemIndicator, { style: s.indicator, children: /* @__PURE__ */ jsx(Check, { size: 14 }) })
+              ]
+            },
+            item
+          ) })
+        ] }) }) })
+      ]
+    }
+  );
+}
+
+// tailwind-classes.ts
+var COLORS = [
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var COLOR_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+var SPACING = [
+  "0",
+  "0.5",
+  "1",
+  "1.5",
+  "2",
+  "2.5",
+  "3",
+  "4",
+  "5",
+  "6",
+  "8",
+  "10",
+  "12",
+  "16",
+  "20",
+  "24",
+  "px"
+];
+var expand = (prefixes, values) => prefixes.flatMap((prefix) => values.map((value) => `${prefix}-${value}`));
+var colorUtilities = (prefixes) => prefixes.flatMap((prefix) => [
+  `${prefix}-white`,
+  `${prefix}-black`,
+  `${prefix}-transparent`,
+  `${prefix}-current`,
+  ...COLORS.flatMap(
+    (color) => COLOR_STEPS.map((step) => `${prefix}-${color}-${step}`)
+  )
+]);
+var layout = [
+  "block",
+  "inline-block",
+  "inline",
+  "flex",
+  "inline-flex",
+  "grid",
+  "inline-grid",
+  "hidden",
+  "table",
+  "contents"
+];
+var flexbox = [
+  "flex-row",
+  "flex-row-reverse",
+  "flex-col",
+  "flex-col-reverse",
+  "flex-wrap",
+  "flex-nowrap",
+  "flex-1",
+  "flex-auto",
+  "flex-initial",
+  "flex-none",
+  "grow",
+  "grow-0",
+  "shrink",
+  "shrink-0",
+  "items-start",
+  "items-center",
+  "items-end",
+  "items-stretch",
+  "items-baseline",
+  "justify-start",
+  "justify-center",
+  "justify-end",
+  "justify-between",
+  "justify-around",
+  "justify-evenly",
+  "content-start",
+  "content-center",
+  "content-end",
+  "content-between",
+  "self-start",
+  "self-center",
+  "self-end",
+  "self-stretch"
+];
+var grid = [
+  "grid-cols-1",
+  "grid-cols-2",
+  "grid-cols-3",
+  "grid-cols-4",
+  "grid-cols-5",
+  "grid-cols-6",
+  "grid-cols-12",
+  "col-span-1",
+  "col-span-2",
+  "col-span-3",
+  "col-span-full",
+  "grid-rows-1",
+  "grid-rows-2",
+  "grid-rows-3",
+  "place-items-center",
+  "place-content-center"
+];
+var sizing = [
+  "w-full",
+  "w-auto",
+  "w-screen",
+  "w-fit",
+  "w-min",
+  "w-max",
+  "w-1/2",
+  "w-1/3",
+  "w-2/3",
+  "w-1/4",
+  "w-3/4",
+  "h-full",
+  "h-auto",
+  "h-screen",
+  "h-fit",
+  "min-h-screen",
+  "min-h-full",
+  "min-w-0",
+  "min-w-full",
+  "max-w-xs",
+  "max-w-sm",
+  "max-w-md",
+  "max-w-lg",
+  "max-w-xl",
+  "max-w-2xl",
+  "max-w-3xl",
+  "max-w-4xl",
+  "max-w-5xl",
+  "max-w-6xl",
+  "max-w-7xl",
+  "max-w-prose",
+  "max-w-full",
+  "max-w-none",
+  "size-full",
+  "size-4",
+  "size-6",
+  "size-8"
+];
+var typography = [
+  "text-xs",
+  "text-sm",
+  "text-base",
+  "text-lg",
+  "text-xl",
+  "text-2xl",
+  "text-3xl",
+  "text-4xl",
+  "text-5xl",
+  "text-6xl",
+  "font-thin",
+  "font-light",
+  "font-normal",
+  "font-medium",
+  "font-semibold",
+  "font-bold",
+  "font-extrabold",
+  "font-black",
+  "text-left",
+  "text-center",
+  "text-right",
+  "text-justify",
+  "leading-none",
+  "leading-tight",
+  "leading-snug",
+  "leading-normal",
+  "leading-relaxed",
+  "leading-loose",
+  "tracking-tighter",
+  "tracking-tight",
+  "tracking-normal",
+  "tracking-wide",
+  "tracking-wider",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "normal-case",
+  "italic",
+  "not-italic",
+  "underline",
+  "line-through",
+  "no-underline",
+  "truncate"
+];
+var borders = [
+  "border",
+  "border-0",
+  "border-2",
+  "border-4",
+  "border-8",
+  "border-t",
+  "border-r",
+  "border-b",
+  "border-l",
+  "border-solid",
+  "border-dashed",
+  "border-dotted",
+  "rounded-none",
+  "rounded-sm",
+  "rounded",
+  "rounded-md",
+  "rounded-lg",
+  "rounded-xl",
+  "rounded-2xl",
+  "rounded-3xl",
+  "rounded-full",
+  "divide-y",
+  "divide-x"
+];
+var effects = [
+  "shadow-none",
+  "shadow-sm",
+  "shadow",
+  "shadow-md",
+  "shadow-lg",
+  "shadow-xl",
+  "shadow-2xl",
+  "shadow-inner",
+  "opacity-0",
+  "opacity-25",
+  "opacity-50",
+  "opacity-75",
+  "opacity-100",
+  "ring",
+  "ring-0",
+  "ring-1",
+  "ring-2",
+  "ring-inset",
+  "blur",
+  "blur-sm",
+  "backdrop-blur"
+];
+var positioning = [
+  "static",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "inset-0",
+  "inset-x-0",
+  "inset-y-0",
+  "top-0",
+  "right-0",
+  "bottom-0",
+  "left-0",
+  "z-0",
+  "z-10",
+  "z-20",
+  "z-30",
+  "z-40",
+  "z-50",
+  "overflow-auto",
+  "overflow-hidden",
+  "overflow-scroll",
+  "overflow-x-auto",
+  "overflow-y-auto"
+];
+var misc = [
+  "object-contain",
+  "object-cover",
+  "object-fill",
+  "object-center",
+  "cursor-pointer",
+  "cursor-default",
+  "select-none",
+  "pointer-events-none",
+  "transition",
+  "transition-all",
+  "transition-colors",
+  "duration-150",
+  "duration-300",
+  "ease-in-out",
+  "antialiased",
+  "container",
+  "mx-auto",
+  "my-auto"
+];
+var TAILWIND_CLASSES = Array.from(
+  /* @__PURE__ */ new Set([
+    ...layout,
+    ...flexbox,
+    ...grid,
+    ...sizing,
+    ...typography,
+    ...borders,
+    ...effects,
+    ...positioning,
+    ...misc,
+    // spacing scales
+    ...expand(["p", "px", "py", "pt", "pr", "pb", "pl"], SPACING),
+    ...expand(["m", "mx", "my", "mt", "mr", "mb", "ml"], SPACING),
+    ...expand(["gap", "gap-x", "gap-y", "space-x", "space-y"], SPACING),
+    // colors
+    ...colorUtilities(["text", "bg", "border", "ring", "from", "to", "via"])
+  ])
+);
+
+// index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var splitClasses = (value) => (value != null ? value : "").split(/\s+/).filter(Boolean);
+function createFieldTailwind(options = {}) {
+  const { classes, extraClasses, placeholder, label } = options;
+  const items = classes ? classes : Array.from(/* @__PURE__ */ new Set([...TAILWIND_CLASSES, ...extraClasses != null ? extraClasses : []]));
+  return {
+    type: "custom",
+    label,
+    render: ({ value, onChange, readOnly, id }) => {
+      const combobox = /* @__PURE__ */ jsx2(
+        TailwindCombobox,
+        {
+          id,
+          items,
+          placeholder,
+          disabled: readOnly,
+          value: splitClasses(value),
+          onValueChange: (tags) => onChange(tags.join(" "))
+        }
+      );
+      return label ? /* @__PURE__ */ jsx2(FieldLabel, { label, readOnly, el: "div", children: combobox }) : combobox;
+    }
+  };
+}
+export {
+  TAILWIND_CLASSES,
+  TailwindCombobox,
+  createFieldTailwind
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@reacteditor/field-tailwind",
+  "version": "0.0.1",
+  "author": "Frontend AI, Inc.",
+  "repository": "reacteditor/editor",
+  "bugs": "https://github.com/reacteditor/editor/issues",
+  "homepage": "https://reacteditor.dev",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "import": "./dist/index.mjs",
+    "types": "./dist/index.d.ts"
+  },
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "build": "rm -rf dist && tsup index.tsx",
+    "prepare": "yarn build"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@base-ui/react": "^1.4.1",
+    "@reacteditor/core": "*",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
+    "lucide-react": "^0.468.0",
+    "tsconfig": "*",
+    "tsup-config": "*",
+    "typescript": "^5.5.4"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.4.1",
+    "@reacteditor/core": "*",
+    "lucide-react": ">=0.400.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  }
+}