@simplysm/solid 13.0.0-beta.6

package/dist/components/data/Pagination.js

@@ -0,0 +1,110 @@
+import { For, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from "@tabler/icons-solidjs";
+import { Button } from "../form-control/Button";
+import { Icon } from "../display/Icon";
+const baseClass = clsx("inline-flex items-center");
+const btnClass = clsx("border-none font-normal");
+const gapClasses = {
+  default: "gap-1",
+  sm: "gap-0.5",
+  lg: "gap-1.5"
+};
+const Pagination = (props) => {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "pageIndex",
+    "onPageIndexChange",
+    "totalPageCount",
+    "displayPageCount",
+    "size"
+  ]);
+  const visibleCount = () => local.displayPageCount ?? 10;
+  const pages = () => {
+    const from = Math.floor(local.pageIndex / visibleCount()) * visibleCount();
+    const to = Math.min(from + visibleCount(), local.totalPageCount);
+    const result = [];
+    for (let i = from; i < to; i++) {
+      result.push(i);
+    }
+    return result;
+  };
+  const hasPrev = () => (pages()[0] ?? 0) > 0;
+  const hasNext = () => (pages()[pages().length - 1] ?? 0) < local.totalPageCount - 1;
+  const getClassName = () => twMerge(baseClass, gapClasses[local.size ?? "default"], local.class);
+  return /* @__PURE__ */ React.createElement("nav", { ...rest, "data-pagination": true, class: getClassName() }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      class: btnClass,
+      theme: "base",
+      variant: "ghost",
+      size: local.size,
+      disabled: !hasPrev(),
+      onClick: () => {
+        var _a;
+        return (_a = local.onPageIndexChange) == null ? void 0 : _a.call(local, 0);
+      }
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronsLeft, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      class: btnClass,
+      theme: "base",
+      variant: "ghost",
+      size: local.size,
+      disabled: !hasPrev(),
+      onClick: () => {
+        var _a;
+        return (_a = local.onPageIndexChange) == null ? void 0 : _a.call(local, (pages()[0] ?? 1) - 1);
+      }
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronLeft, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(For, { each: pages() }, (p) => /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      class: btnClass,
+      theme: p === local.pageIndex ? "primary" : "base",
+      variant: p === local.pageIndex ? "solid" : "ghost",
+      size: local.size,
+      onClick: () => {
+        var _a;
+        return (_a = local.onPageIndexChange) == null ? void 0 : _a.call(local, p);
+      }
+    },
+    p + 1
+  )), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      class: btnClass,
+      theme: "base",
+      variant: "ghost",
+      size: local.size,
+      disabled: !hasNext(),
+      onClick: () => {
+        var _a;
+        return (_a = local.onPageIndexChange) == null ? void 0 : _a.call(local, (pages()[pages().length - 1] ?? 0) + 1);
+      }
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronRight, size: "1em" })
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      class: btnClass,
+      theme: "base",
+      variant: "ghost",
+      size: local.size,
+      disabled: !hasNext(),
+      onClick: () => {
+        var _a;
+        return (_a = local.onPageIndexChange) == null ? void 0 : _a.call(local, local.totalPageCount - 1);
+      }
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronsRight, size: "1em" })
+  ));
+};
+export {
+  Pagination
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/components/data/Pagination.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/data/Pagination.tsx"],
+  "sourcesContent": ["import { type Component, For, type JSX, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from \"@tabler/icons-solidjs\";\nimport { Button } from \"../form-control/Button\";\nimport { Icon } from \"../display/Icon\";\n\ntype PaginationSize = \"sm\" | \"lg\";\n\nexport interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {\n  pageIndex: number;\n  onPageIndexChange?: (pageIndex: number) => void;\n  totalPageCount: number;\n  displayPageCount?: number;\n  size?: PaginationSize;\n}\n\nconst baseClass = clsx(\"inline-flex items-center\");\n\nconst btnClass = clsx(\"border-none font-normal\");\n\nconst gapClasses: Record<PaginationSize | \"default\", string> = {\n  default: \"gap-1\",\n  sm: \"gap-0.5\",\n  lg: \"gap-1.5\",\n};\n\nexport const Pagination: Component<PaginationProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"pageIndex\",\n    \"onPageIndexChange\",\n    \"totalPageCount\",\n    \"displayPageCount\",\n    \"size\",\n  ]);\n\n  const visibleCount = () => local.displayPageCount ?? 10;\n\n  const pages = () => {\n    const from = Math.floor(local.pageIndex / visibleCount()) * visibleCount();\n    const to = Math.min(from + visibleCount(), local.totalPageCount);\n    const result: number[] = [];\n    for (let i = from; i < to; i++) {\n      result.push(i);\n    }\n    return result;\n  };\n\n  const hasPrev = () => (pages()[0] ?? 0) > 0;\n  const hasNext = () => (pages()[pages().length - 1] ?? 0) < local.totalPageCount - 1;\n\n  const getClassName = () => twMerge(baseClass, gapClasses[local.size ?? \"default\"], local.class);\n\n  return (\n    <nav {...rest} data-pagination class={getClassName()}>\n      <Button\n        class={btnClass}\n        theme=\"base\"\n        variant=\"ghost\"\n        size={local.size}\n        disabled={!hasPrev()}\n        onClick={() => local.onPageIndexChange?.(0)}\n      >\n        <Icon icon={IconChevronsLeft} size=\"1em\" />\n      </Button>\n      <Button\n        class={btnClass}\n        theme=\"base\"\n        variant=\"ghost\"\n        size={local.size}\n        disabled={!hasPrev()}\n        onClick={() => local.onPageIndexChange?.((pages()[0] ?? 1) - 1)}\n      >\n        <Icon icon={IconChevronLeft} size=\"1em\" />\n      </Button>\n      <For each={pages()}>\n        {(p) => (\n          <Button\n            class={btnClass}\n            theme={p === local.pageIndex ? \"primary\" : \"base\"}\n            variant={p === local.pageIndex ? \"solid\" : \"ghost\"}\n            size={local.size}\n            onClick={() => local.onPageIndexChange?.(p)}\n          >\n            {p + 1}\n          </Button>\n        )}\n      </For>\n      <Button\n        class={btnClass}\n        theme=\"base\"\n        variant=\"ghost\"\n        size={local.size}\n        disabled={!hasNext()}\n        onClick={() => local.onPageIndexChange?.((pages()[pages().length - 1] ?? 0) + 1)}\n      >\n        <Icon icon={IconChevronRight} size=\"1em\" />\n      </Button>\n      <Button\n        class={btnClass}\n        theme=\"base\"\n        variant=\"ghost\"\n        size={local.size}\n        disabled={!hasNext()}\n        onClick={() => local.onPageIndexChange?.(local.totalPageCount - 1)}\n      >\n        <Icon icon={IconChevronsRight} size=\"1em\" />\n      </Button>\n    </nav>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/data/Table.js

@@ -0,0 +1,34 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+const baseClass = clsx(
+  "w-auto",
+  "border-separate border-spacing-0",
+  "border-b border-r border-base-300 dark:border-base-600",
+  "rounded",
+  "overflow-hidden",
+  // th
+  "[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600",
+  "[&_th]:px-2 [&_th]:py-1",
+  "[&_th]:bg-base-100 [&_th]:text-left [&_th]:font-semibold",
+  "[&_th]:dark:bg-base-800",
+  // td
+  "[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600",
+  "[&_td]:px-2 [&_td]:py-1"
+);
+const insetClass = clsx(
+  "border-b-0 border-r-0",
+  "[&>*>tr>*:first-child]:border-l-0",
+  "[&>*:first-child>tr:first-child>*]:border-t-0",
+  "rounded-none",
+  "overflow-auto"
+);
+const Table = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "inset"]);
+  const getClassName = () => twMerge(baseClass, local.inset && insetClass, local.class);
+  return /* @__PURE__ */ React.createElement("table", { "data-table": true, class: getClassName(), ...rest }, local.children);
+};
+export {
+  Table
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/data/Table.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/data/Table.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {\n  inset?: boolean;\n}\n\nconst baseClass = clsx(\n  \"w-auto\",\n  \"border-separate border-spacing-0\",\n  \"border-b border-r border-base-300 dark:border-base-600\",\n  \"rounded\",\n  \"overflow-hidden\",\n  // th\n  \"[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600\",\n  \"[&_th]:px-2 [&_th]:py-1\",\n  \"[&_th]:bg-base-100 [&_th]:text-left [&_th]:font-semibold\",\n  \"[&_th]:dark:bg-base-800\",\n  // td\n  \"[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600\",\n  \"[&_td]:px-2 [&_td]:py-1\",\n);\n\nconst insetClass = clsx(\n  \"border-b-0 border-r-0\",\n  \"[&>*>tr>*:first-child]:border-l-0\",\n  \"[&>*:first-child>tr:first-child>*]:border-t-0\",\n  \"rounded-none\",\n  \"overflow-auto\",\n);\n\nexport const Table: ParentComponent<TableProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"inset\"]);\n\n  const getClassName = () => twMerge(baseClass, local.inset && insetClass, local.class);\n\n  return (\n    <table data-table class={getClassName()} {...rest}>\n      {local.children}\n    </table>\n  );\n};\n"],
+  "mappings": "AAAA,SAAyC,kBAAkB;AAC3D,OAAO,UAAU;AACjB,SAAS,eAAe;AAMxB,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF;AAEA,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,QAAqC,CAAC,UAAU;AAC3D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,OAAO,CAAC;AAEtE,QAAM,eAAe,MAAM,QAAQ,WAAW,MAAM,SAAS,YAAY,MAAM,KAAK;AAEpF,SACE,oCAAC,WAAM,cAAU,MAAC,OAAO,aAAa,GAAI,GAAG,QAC1C,MAAM,QACT;AAEJ;",
+  "names": []
+}

package/dist/components/data/calendar/Calendar.js

@@ -0,0 +1,90 @@
+import { createMemo, For, splitProps } from "solid-js";
+import { DateOnly } from "@simplysm/core-common";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+const WEEKS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+const baseClass = clsx(
+  "w-full",
+  "border-separate border-spacing-0",
+  "border-b border-r border-base-300",
+  "dark:border-base-600",
+  "overflow-hidden rounded",
+  // th
+  "[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600",
+  "[&_th]:px-2 [&_th]:py-1",
+  "[&_th]:bg-base-100 [&_th]:text-center [&_th]:text-sm [&_th]:font-semibold",
+  "[&_th]:dark:bg-base-800",
+  // td
+  "[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600",
+  "[&_td]:p-1 [&_td]:align-top"
+);
+const notCurrentClass = clsx("[&.not-current]:bg-base-50", "[&.not-current]:dark:bg-base-900");
+const dayClass = clsx("mb-1 text-sm text-base-500", "dark:text-base-400");
+const notCurrentDayClass = clsx("text-base-300", "dark:text-base-600");
+const contentClass = clsx("flex flex-col gap-1");
+function CalendarBase(props) {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "items",
+    "getItemDate",
+    "renderItem",
+    "yearMonth",
+    "onYearMonthChange",
+    "weekStartDay",
+    "minDaysInFirstWeek"
+  ]);
+  const weekStartDay = () => local.weekStartDay ?? 0;
+  const minDaysInFirstWeek = () => local.minDaysInFirstWeek ?? 1;
+  const [yearMonth] = createControllableSignal({
+    value: () => local.yearMonth ?? new DateOnly().setDay(1),
+    onChange: () => local.onYearMonthChange
+  });
+  const weekHeaders = createMemo(() => {
+    const start = weekStartDay();
+    return Array.from({ length: 7 }, (_, i) => WEEKS[(start + i) % 7]);
+  });
+  const dataTable = createMemo(() => {
+    const ym = yearMonth();
+    const items = local.items;
+    const getDate = local.getItemDate;
+    const itemMap = /* @__PURE__ */ new Map();
+    for (let i = 0; i < items.length; i++) {
+      const date = getDate(items[i], i);
+      const key = date.tick;
+      const arr = itemMap.get(key);
+      if (arr) {
+        arr.push({ item: items[i], index: i });
+      } else {
+        itemMap.set(key, [{ item: items[i], index: i }]);
+      }
+    }
+    const firstDate = ym.getWeekSeqStartDate(weekStartDay(), minDaysInFirstWeek());
+    const result = [];
+    for (let r = 0; r < 6; r++) {
+      const row = [];
+      for (let c = 0; c < 7; c++) {
+        const date = firstDate.addDays(r * 7 + c);
+        row.push({
+          date,
+          items: itemMap.get(date.tick) ?? []
+        });
+      }
+      result.push(row);
+    }
+    return result;
+  });
+  const getClassName = () => twMerge(baseClass, local.class);
+  return /* @__PURE__ */ React.createElement("table", { "data-calendar": true, class: getClassName(), ...rest }, /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(For, { each: weekHeaders() }, (header) => /* @__PURE__ */ React.createElement("th", null, header)))), /* @__PURE__ */ React.createElement("tbody", null, /* @__PURE__ */ React.createElement(For, { each: dataTable() }, (row) => /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement(For, { each: row }, (cell) => /* @__PURE__ */ React.createElement("td", { class: twMerge(notCurrentClass, cell.date.month !== yearMonth().month && "not-current") }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      class: cell.date.month !== yearMonth().month ? twMerge(dayClass, notCurrentDayClass) : dayClass
+    },
+    cell.date.day
+  ), /* @__PURE__ */ React.createElement("div", { class: contentClass }, /* @__PURE__ */ React.createElement(For, { each: cell.items }, (entry) => local.renderItem(entry.item, entry.index)))))))));
+}
+const Calendar = CalendarBase;
+export {
+  Calendar
+};
+//# sourceMappingURL=Calendar.js.map

package/dist/components/data/calendar/Calendar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/data/calendar/Calendar.tsx"],
+  "sourcesContent": ["import { createMemo, For, type JSX, splitProps } from \"solid-js\";\nimport { DateOnly } from \"@simplysm/core-common\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\n\nexport interface CalendarProps<T> extends Omit<JSX.HTMLAttributes<HTMLTableElement>, \"children\"> {\n  items: T[];\n  getItemDate: (item: T, index: number) => DateOnly;\n  renderItem: (item: T, index: number) => JSX.Element;\n  yearMonth?: DateOnly;\n  onYearMonthChange?: (value: DateOnly) => void;\n  weekStartDay?: number;\n  minDaysInFirstWeek?: number;\n}\n\nconst WEEKS = [\"\uC77C\", \"\uC6D4\", \"\uD654\", \"\uC218\", \"\uBAA9\", \"\uAE08\", \"\uD1A0\"];\n\nconst baseClass = clsx(\n  \"w-full\",\n  \"border-separate border-spacing-0\",\n  \"border-b border-r border-base-300\",\n  \"dark:border-base-600\",\n  \"overflow-hidden rounded\",\n  // th\n  \"[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600\",\n  \"[&_th]:px-2 [&_th]:py-1\",\n  \"[&_th]:bg-base-100 [&_th]:text-center [&_th]:text-sm [&_th]:font-semibold\",\n  \"[&_th]:dark:bg-base-800\",\n  // td\n  \"[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600\",\n  \"[&_td]:p-1 [&_td]:align-top\",\n);\n\nconst notCurrentClass = clsx(\"[&.not-current]:bg-base-50\", \"[&.not-current]:dark:bg-base-900\");\n\nconst dayClass = clsx(\"mb-1 text-sm text-base-500\", \"dark:text-base-400\");\n\nconst notCurrentDayClass = clsx(\"text-base-300\", \"dark:text-base-600\");\n\nconst contentClass = clsx(\"flex flex-col gap-1\");\n\nfunction CalendarBase<T>(props: CalendarProps<T>) {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"items\",\n    \"getItemDate\",\n    \"renderItem\",\n    \"yearMonth\",\n    \"onYearMonthChange\",\n    \"weekStartDay\",\n    \"minDaysInFirstWeek\",\n  ]);\n\n  const weekStartDay = () => local.weekStartDay ?? 0;\n  const minDaysInFirstWeek = () => local.minDaysInFirstWeek ?? 1;\n\n  const [yearMonth] = createControllableSignal({\n    value: () => local.yearMonth ?? new DateOnly().setDay(1),\n    onChange: () => local.onYearMonthChange,\n  });\n\n  const weekHeaders = createMemo(() => {\n    const start = weekStartDay();\n    return Array.from({ length: 7 }, (_, i) => WEEKS[(start + i) % 7]);\n  });\n\n  const dataTable = createMemo(() => {\n    const ym = yearMonth();\n    const items = local.items;\n    const getDate = local.getItemDate;\n\n    // \uC544\uC774\uD15C\uC744 \uB0A0\uC9DC\uBCC4\uB85C \uADF8\uB8F9\uD551 (O(N))\n    const itemMap = new Map<number, { item: T; index: number }[]>();\n    for (let i = 0; i < items.length; i++) {\n      const date = getDate(items[i], i);\n      const key = date.tick;\n      const arr = itemMap.get(key);\n      if (arr) {\n        arr.push({ item: items[i], index: i });\n      } else {\n        itemMap.set(key, [{ item: items[i], index: i }]);\n      }\n    }\n\n    const firstDate = ym.getWeekSeqStartDate(weekStartDay(), minDaysInFirstWeek());\n    const result: { date: DateOnly; items: { item: T; index: number }[] }[][] = [];\n\n    for (let r = 0; r < 6; r++) {\n      const row: { date: DateOnly; items: { item: T; index: number }[] }[] = [];\n      for (let c = 0; c < 7; c++) {\n        const date = firstDate.addDays(r * 7 + c);\n        row.push({\n          date,\n          items: itemMap.get(date.tick) ?? [],\n        });\n      }\n      result.push(row);\n    }\n\n    return result;\n  });\n\n  const getClassName = () => twMerge(baseClass, local.class);\n\n  return (\n    <table data-calendar class={getClassName()} {...rest}>\n      <thead>\n        <tr>\n          <For each={weekHeaders()}>{(header) => <th>{header}</th>}</For>\n        </tr>\n      </thead>\n      <tbody>\n        <For each={dataTable()}>\n          {(row) => (\n            <tr>\n              <For each={row}>\n                {(cell) => (\n                  <td class={twMerge(notCurrentClass, cell.date.month !== yearMonth().month && \"not-current\")}>\n                    <div\n                      class={cell.date.month !== yearMonth().month ? twMerge(dayClass, notCurrentDayClass) : dayClass}\n                    >\n                      {cell.date.day}\n                    </div>\n                    <div class={contentClass}>\n                      <For each={cell.items}>{(entry) => local.renderItem(entry.item, entry.index)}</For>\n                    </div>\n                  </td>\n                )}\n              </For>\n            </tr>\n          )}\n        </For>\n      </tbody>\n    </table>\n  );\n}\n\nexport const Calendar = CalendarBase;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/data/kanban/Kanban.js

@@ -0,0 +1,367 @@
+import {
+  children,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps
+} from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconEye, IconEyeOff } from "@tabler/icons-solidjs";
+import { Card } from "../../display/Card";
+import { Checkbox } from "../../form-control/checkbox/Checkbox";
+import { Icon } from "../../display/Icon";
+import { LoadingContainer } from "../../feedback/loading/LoadingContainer";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { splitSlots } from "../../../helpers/splitSlots";
+import "./Kanban.css";
+import {
+  KanbanContext,
+  KanbanLaneContext,
+  useKanbanContext,
+  useKanbanLaneContext
+} from "./KanbanContext";
+const KanbanLaneTitle = (props) => /* @__PURE__ */ React.createElement("div", { "data-kanban-lane-title": true }, props.children);
+const KanbanLaneTools = (props) => /* @__PURE__ */ React.createElement("div", { "data-kanban-lane-tools": true }, props.children);
+const cardHostClass = clsx("relative block", "transition-opacity duration-200");
+const cardContentClass = clsx("select-none whitespace-normal", "animate-none", "transition-shadow duration-200");
+const cardSelectedClass = clsx("ring-2 ring-primary-500/50", "shadow-md dark:shadow-black/30");
+const LONG_PRESS_MS = 500;
+const KanbanCard = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "value", "draggable", "selectable", "contentClass"]);
+  const boardCtx = useKanbanContext();
+  const laneCtx = useKanbanLaneContext();
+  let hostRef;
+  const cardId = crypto.randomUUID();
+  createEffect(() => {
+    laneCtx.registerCard(cardId, {
+      value: local.value,
+      selectable: local.selectable ?? false
+    });
+  });
+  onCleanup(() => {
+    laneCtx.unregisterCard(cardId);
+  });
+  const isDraggable = () => local.draggable !== false;
+  const isDragSource = () => {
+    const dc = boardCtx.dragCard();
+    return dc != null && dc.value != null && dc.value === local.value;
+  };
+  const handleDragStart = (e) => {
+    var _a;
+    if (!isDraggable()) {
+      e.preventDefault();
+      return;
+    }
+    (_a = e.dataTransfer) == null ? void 0 : _a.setData("text/plain", "");
+    const heightOnDrag = hostRef.offsetHeight;
+    requestAnimationFrame(() => {
+      boardCtx.setDragCard({
+        value: local.value,
+        laneValue: laneCtx.value(),
+        heightOnDrag
+      });
+    });
+  };
+  const handleDragOver = (e) => {
+    if (!boardCtx.dragCard()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = hostRef.getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    const position = e.clientY < midY ? "before" : "after";
+    const current = laneCtx.dropTarget();
+    if ((current == null ? void 0 : current.element) === hostRef && current.position === position) {
+      return;
+    }
+    laneCtx.setDropTarget({ element: hostRef, value: local.value, position });
+  };
+  const handleDrop = (e) => {
+    if (!boardCtx.dragCard()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const current = laneCtx.dropTarget();
+    boardCtx.onDropTo(laneCtx.value(), local.value, (current == null ? void 0 : current.position) ?? "before");
+  };
+  const handleClick = (e) => {
+    if (longPressed) {
+      e.preventDefault();
+      e.stopPropagation();
+      longPressed = false;
+      return;
+    }
+    if (!e.shiftKey) return;
+    if (!local.selectable) return;
+    if (local.value == null) return;
+    e.preventDefault();
+    e.stopPropagation();
+    boardCtx.toggleSelection(local.value);
+  };
+  let longPressTimer;
+  let longPressed = false;
+  const handlePointerDown = () => {
+    if (!local.selectable) return;
+    if (local.value == null) return;
+    longPressed = false;
+    longPressTimer = setTimeout(() => {
+      longPressed = true;
+      boardCtx.setSelectedValues([local.value]);
+    }, LONG_PRESS_MS);
+  };
+  const handlePointerUp = () => {
+    clearTimeout(longPressTimer);
+    longPressTimer = void 0;
+  };
+  const handlePointerCancel = () => {
+    clearTimeout(longPressTimer);
+    longPressTimer = void 0;
+  };
+  onCleanup(() => {
+    clearTimeout(longPressTimer);
+  });
+  const isSelected = () => local.value != null && boardCtx.selectedValues().includes(local.value);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      ref: hostRef,
+      "data-kanban-card": true,
+      draggable: isDraggable(),
+      class: twMerge(cardHostClass, isDraggable() && "cursor-grab", isDragSource() && "opacity-30", local.class),
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onPointerDown: handlePointerDown,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerCancel,
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React.createElement(Card, { class: twMerge(cardContentClass, isSelected() && cardSelectedClass, local.contentClass) }, local.children)
+  );
+};
+const laneBaseClass = clsx(
+  "flex flex-col",
+  "w-72 min-w-72",
+  "bg-base-100 dark:bg-base-900",
+  "rounded-lg",
+  "overflow-hidden",
+  "transition-[background-color,box-shadow] duration-200"
+);
+const laneDragOverClass = clsx("bg-primary-50 dark:bg-primary-950");
+const laneHeaderBaseClass = clsx(
+  "flex items-center gap-2",
+  "px-3 py-2",
+  "font-semibold",
+  "text-base-700 dark:text-base-200",
+  "select-none"
+);
+const collapseButtonClass = clsx(
+  "flex items-center justify-center",
+  "size-6 rounded",
+  "text-base-500",
+  "hover:bg-base-200 hover:text-primary-500",
+  "dark:hover:bg-base-800",
+  "transition-colors duration-150",
+  "cursor-pointer"
+);
+const laneToolsClass = clsx("flex items-center", "gap-1");
+const laneBodyBaseClass = clsx("flex-1", "flex flex-col gap-2", "p-2", "overflow-y-auto");
+const placeholderBaseClass = clsx(
+  "rounded-lg",
+  "bg-primary-100/60 dark:bg-primary-900/30",
+  "origin-top",
+  "animate-[kanban-ph-in_200ms_ease-out]"
+);
+const KanbanLane = (props) => {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "value",
+    "busy",
+    "collapsible",
+    "collapsed",
+    "onCollapsedChange"
+  ]);
+  const [collapsed, setCollapsed] = createControllableSignal({
+    value: () => local.collapsed ?? false,
+    onChange: () => local.onCollapsedChange
+  });
+  const boardCtx = useKanbanContext();
+  const [registeredCards, setRegisteredCards] = createSignal(
+    /* @__PURE__ */ new Map()
+  );
+  const registerCard = (id, info) => {
+    setRegisteredCards((prev) => new Map(prev).set(id, info));
+  };
+  const unregisterCard = (id) => {
+    setRegisteredCards((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  };
+  const selectableCards = createMemo(
+    () => [...registeredCards().values()].filter((c) => c.selectable && c.value != null)
+  );
+  const hasSelectableCards = () => selectableCards().length > 0;
+  const isAllSelected = () => {
+    const cards = selectableCards();
+    if (cards.length === 0) return false;
+    return cards.every((c) => boardCtx.selectedValues().includes(c.value));
+  };
+  const handleSelectAll = (checked) => {
+    const laneCardValues = selectableCards().map((c) => c.value);
+    boardCtx.setSelectedValues((prev) => {
+      if (checked) {
+        const toAdd = laneCardValues.filter((v) => !prev.includes(v));
+        return toAdd.length > 0 ? [...prev, ...toAdd] : prev;
+      } else {
+        const toRemove = new Set(laneCardValues);
+        const next = prev.filter((v) => !toRemove.has(v));
+        return next.length === prev.length ? prev : next;
+      }
+    });
+  };
+  const [dropTarget, setDropTarget] = createSignal();
+  const [dragEnterCount, setDragEnterCount] = createSignal(0);
+  const isDragOverLane = () => dragEnterCount() > 0 && boardCtx.dragCard() != null;
+  createEffect(() => {
+    if (!boardCtx.dragCard()) {
+      setDragEnterCount(0);
+      setDropTarget(void 0);
+    }
+  });
+  const handleLaneDragEnter = () => {
+    setDragEnterCount((c) => c + 1);
+  };
+  const handleLaneDragLeave = () => {
+    const next = dragEnterCount() - 1;
+    setDragEnterCount(next);
+    if (next === 0) {
+      setDropTarget(void 0);
+    }
+  };
+  const handleLaneDragOver = (e) => {
+    if (!boardCtx.dragCard()) return;
+    e.preventDefault();
+  };
+  const handleLaneDrop = (e) => {
+    if (!boardCtx.dragCard()) return;
+    e.preventDefault();
+    const current = dropTarget();
+    if (current) {
+      boardCtx.onDropTo(local.value, current.value, current.position);
+    } else {
+      boardCtx.onDropTo(local.value, void 0, void 0);
+    }
+  };
+  const laneContextValue = {
+    value: () => local.value,
+    dropTarget,
+    setDropTarget,
+    registerCard,
+    unregisterCard
+  };
+  const LaneInner = (innerProps) => {
+    const resolved = children(() => innerProps.children);
+    const [slots, content] = splitSlots(resolved, ["kanbanLaneTitle", "kanbanLaneTools"]);
+    const hasHeader = () => local.collapsible || hasSelectableCards() || slots().kanbanLaneTitle.length > 0 || slots().kanbanLaneTools.length > 0;
+    let bodyRef;
+    const placeholderEl = document.createElement("div");
+    placeholderEl.className = placeholderBaseClass;
+    createEffect(() => {
+      const target = dropTarget();
+      const dc = boardCtx.dragCard();
+      if (!target || !dc || !bodyRef) {
+        if (placeholderEl.parentNode) {
+          placeholderEl.remove();
+        }
+        return;
+      }
+      placeholderEl.style.height = `${dc.heightOnDrag}px`;
+      const referenceNode = target.position === "before" ? target.element : target.element.nextElementSibling;
+      if (placeholderEl.parentNode === bodyRef && placeholderEl.nextSibling === referenceNode) {
+        return;
+      }
+      bodyRef.insertBefore(placeholderEl, referenceNode);
+    });
+    onCleanup(() => {
+      if (placeholderEl.parentNode) {
+        placeholderEl.remove();
+      }
+    });
+    return /* @__PURE__ */ React.createElement(LoadingContainer, { busy: local.busy, variant: "bar" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...rest,
+        "data-kanban-lane": true,
+        class: twMerge(laneBaseClass, isDragOverLane() && laneDragOverClass, local.class),
+        onDragEnter: handleLaneDragEnter,
+        onDragLeave: handleLaneDragLeave,
+        onDragOver: handleLaneDragOver,
+        onDrop: handleLaneDrop
+      },
+      /* @__PURE__ */ React.createElement(Show, { when: hasHeader() }, /* @__PURE__ */ React.createElement("div", { class: laneHeaderBaseClass }, /* @__PURE__ */ React.createElement(Show, { when: local.collapsible }, /* @__PURE__ */ React.createElement("button", { type: "button", class: collapseButtonClass, onClick: () => setCollapsed((prev) => !prev) }, /* @__PURE__ */ React.createElement(Icon, { icon: collapsed() ? IconEyeOff : IconEye, size: "1em" }))), /* @__PURE__ */ React.createElement(Show, { when: hasSelectableCards() }, /* @__PURE__ */ React.createElement(Checkbox, { value: isAllSelected(), onValueChange: handleSelectAll, inline: true, theme: "primary" })), /* @__PURE__ */ React.createElement("div", { class: "flex-1" }, slots().kanbanLaneTitle), /* @__PURE__ */ React.createElement(Show, { when: slots().kanbanLaneTools.length > 0 }, /* @__PURE__ */ React.createElement("div", { class: laneToolsClass }, slots().kanbanLaneTools)))),
+      /* @__PURE__ */ React.createElement(Show, { when: !collapsed() }, /* @__PURE__ */ React.createElement("div", { ref: bodyRef, class: laneBodyBaseClass }, content()))
+    ));
+  };
+  return /* @__PURE__ */ React.createElement(KanbanLaneContext.Provider, { value: laneContextValue }, /* @__PURE__ */ React.createElement(LaneInner, null, local.children));
+};
+const boardBaseClass = clsx("inline-flex flex-nowrap", "h-full", "gap-4");
+const KanbanBase = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "onDrop", "selectedValues", "onSelectedValuesChange"]);
+  const [dragCard, setDragCard] = createSignal();
+  const [selectedValues, setSelectedValues] = createControllableSignal({
+    value: () => local.selectedValues ?? [],
+    onChange: () => local.onSelectedValuesChange
+  });
+  const toggleSelection = (value) => {
+    setSelectedValues((prev) => {
+      const idx = prev.indexOf(value);
+      if (idx >= 0) {
+        return [...prev.slice(0, idx), ...prev.slice(idx + 1)];
+      }
+      return [...prev, value];
+    });
+  };
+  const onDropTo = (targetLaneValue, targetCardValue, position) => {
+    var _a;
+    const source = dragCard();
+    if (!source) return;
+    (_a = local.onDrop) == null ? void 0 : _a.call(local, {
+      sourceValue: source.value,
+      targetLaneValue,
+      targetCardValue,
+      position
+    });
+    setDragCard(void 0);
+  };
+  onMount(() => {
+    const handleDragEnd = () => {
+      setDragCard(void 0);
+    };
+    document.addEventListener("dragend", handleDragEnd);
+    onCleanup(() => document.removeEventListener("dragend", handleDragEnd));
+  });
+  const contextValue = {
+    dragCard,
+    setDragCard,
+    onDropTo,
+    selectedValues,
+    setSelectedValues,
+    toggleSelection
+  };
+  return /* @__PURE__ */ React.createElement(KanbanContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", { ...rest, "data-kanban": true, class: twMerge(boardBaseClass, local.class) }, local.children));
+};
+const Kanban = KanbanBase;
+Kanban.Lane = KanbanLane;
+Kanban.Card = KanbanCard;
+Kanban.LaneTitle = KanbanLaneTitle;
+Kanban.LaneTools = KanbanLaneTools;
+export {
+  Kanban
+};
+//# sourceMappingURL=Kanban.js.map