@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/data/kanban/Kanban.tsx"],
+  "sourcesContent": ["import {\n  children,\n  createEffect,\n  createMemo,\n  createSignal,\n  type JSX,\n  onCleanup,\n  onMount,\n  type ParentComponent,\n  Show,\n  splitProps,\n} from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { IconEye, IconEyeOff } from \"@tabler/icons-solidjs\";\nimport { Card } from \"../../display/Card\";\nimport { Checkbox } from \"../../form-control/checkbox/Checkbox\";\nimport { Icon } from \"../../display/Icon\";\nimport { LoadingContainer } from \"../../feedback/loading/LoadingContainer\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { splitSlots } from \"../../../helpers/splitSlots\";\nimport \"./Kanban.css\";\nimport {\n  KanbanContext,\n  KanbanLaneContext,\n  useKanbanContext,\n  useKanbanLaneContext,\n  type KanbanCardRef,\n  type KanbanContextValue,\n  type KanbanDropInfo,\n  type KanbanDropTarget,\n  type KanbanLaneContextValue,\n} from \"./KanbanContext\";\n\n// \u2500\u2500\u2500 KanbanLaneTitle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst KanbanLaneTitle: ParentComponent = (props) => <div data-kanban-lane-title>{props.children}</div>;\n\n// \u2500\u2500\u2500 KanbanLaneTools \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst KanbanLaneTools: ParentComponent = (props) => <div data-kanban-lane-tools>{props.children}</div>;\n\n// \u2500\u2500\u2500 KanbanCard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface KanbanCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"draggable\"> {\n  value?: unknown;\n  draggable?: boolean;\n  selectable?: boolean;\n  contentClass?: string;\n  children?: JSX.Element;\n}\n\nconst cardHostClass = clsx(\"relative block\", \"transition-opacity duration-200\");\n\nconst cardContentClass = clsx(\"select-none whitespace-normal\", \"animate-none\", \"transition-shadow duration-200\");\n\nconst cardSelectedClass = clsx(\"ring-2 ring-primary-500/50\", \"shadow-md dark:shadow-black/30\");\n\nconst LONG_PRESS_MS = 500;\n\nconst KanbanCard: ParentComponent<KanbanCardProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"value\", \"draggable\", \"selectable\", \"contentClass\"]);\n\n  const boardCtx = useKanbanContext();\n  const laneCtx = useKanbanLaneContext();\n\n  let hostRef!: HTMLDivElement;\n\n  const cardId = crypto.randomUUID();\n\n  createEffect(() => {\n    laneCtx.registerCard(cardId, {\n      value: local.value,\n      selectable: local.selectable ?? false,\n    });\n  });\n\n  onCleanup(() => {\n    laneCtx.unregisterCard(cardId);\n  });\n\n  const isDraggable = () => local.draggable !== false;\n\n  const isDragSource = () => {\n    const dc = boardCtx.dragCard();\n    return dc != null && dc.value != null && dc.value === local.value;\n  };\n\n  const handleDragStart = (e: DragEvent) => {\n    if (!isDraggable()) {\n      e.preventDefault();\n      return;\n    }\n    e.dataTransfer?.setData(\"text/plain\", \"\");\n    const heightOnDrag = hostRef.offsetHeight;\n    // \uBE0C\uB77C\uC6B0\uC800\uAC00 \uB4DC\uB798\uADF8 \uACE0\uC2A4\uD2B8 \uC774\uBBF8\uC9C0\uB97C \uCEA1\uCC98\uD55C \uB4A4 \uC228\uAE30\uAE30 \uC704\uD574 \uD55C \uD504\uB808\uC784 \uC9C0\uC5F0\n    requestAnimationFrame(() => {\n      boardCtx.setDragCard({\n        value: local.value,\n        laneValue: laneCtx.value(),\n        heightOnDrag,\n      });\n    });\n  };\n\n  const handleDragOver = (e: DragEvent) => {\n    if (!boardCtx.dragCard()) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    const rect = hostRef.getBoundingClientRect();\n    const midY = rect.top + rect.height / 2;\n    const position = e.clientY < midY ? \"before\" : \"after\";\n\n    const current = laneCtx.dropTarget();\n    if (current?.element === hostRef && current.position === position) {\n      return;\n    }\n\n    laneCtx.setDropTarget({ element: hostRef, value: local.value, position });\n  };\n\n  const handleDrop = (e: DragEvent) => {\n    if (!boardCtx.dragCard()) return;\n    e.preventDefault();\n    e.stopPropagation();\n\n    const current = laneCtx.dropTarget();\n    boardCtx.onDropTo(laneCtx.value(), local.value, current?.position ?? \"before\");\n  };\n\n  // Shift+Click \uB2E4\uC911 \uC120\uD0DD \uD1A0\uAE00\n  const handleClick = (e: MouseEvent) => {\n    if (longPressed) {\n      e.preventDefault();\n      e.stopPropagation();\n      longPressed = false;\n      return;\n    }\n    if (!e.shiftKey) return;\n    if (!local.selectable) return;\n    if (local.value == null) return;\n    e.preventDefault();\n    e.stopPropagation();\n    boardCtx.toggleSelection(local.value);\n  };\n\n  // Long press \u2192 \uD574\uB2F9 \uCE74\uB4DC\uB9CC \uB2E8\uB3C5 \uC120\uD0DD (\uB2E4\uB978 \uC120\uD0DD \uBAA8\uB450 \uD574\uC81C)\n  let longPressTimer: ReturnType<typeof setTimeout> | undefined;\n  let longPressed = false;\n\n  const handlePointerDown = () => {\n    if (!local.selectable) return;\n    if (local.value == null) return;\n\n    longPressed = false;\n    longPressTimer = setTimeout(() => {\n      longPressed = true;\n      boardCtx.setSelectedValues([local.value!]);\n    }, LONG_PRESS_MS);\n  };\n\n  const handlePointerUp = () => {\n    clearTimeout(longPressTimer);\n    longPressTimer = undefined;\n  };\n\n  const handlePointerCancel = () => {\n    clearTimeout(longPressTimer);\n    longPressTimer = undefined;\n  };\n\n  onCleanup(() => {\n    clearTimeout(longPressTimer);\n  });\n\n  const isSelected = () => local.value != null && boardCtx.selectedValues().includes(local.value);\n\n  return (\n    <div\n      {...rest}\n      ref={hostRef}\n      data-kanban-card\n      draggable={isDraggable()}\n      class={twMerge(cardHostClass, isDraggable() && \"cursor-grab\", isDragSource() && \"opacity-30\", local.class)}\n      onDragStart={handleDragStart}\n      onDragOver={handleDragOver}\n      onDrop={handleDrop}\n      onPointerDown={handlePointerDown}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerCancel}\n      onClick={handleClick}\n    >\n      <Card class={twMerge(cardContentClass, isSelected() && cardSelectedClass, local.contentClass)}>\n        {local.children}\n      </Card>\n    </div>\n  );\n};\n\n// \u2500\u2500\u2500 KanbanLane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface KanbanLaneProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  value?: unknown;\n  busy?: boolean;\n  collapsible?: boolean;\n  collapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  children?: JSX.Element;\n}\n\nconst laneBaseClass = clsx(\n  \"flex flex-col\",\n  \"w-72 min-w-72\",\n  \"bg-base-100 dark:bg-base-900\",\n  \"rounded-lg\",\n  \"overflow-hidden\",\n  \"transition-[background-color,box-shadow] duration-200\",\n);\n\nconst laneDragOverClass = clsx(\"bg-primary-50 dark:bg-primary-950\");\n\nconst laneHeaderBaseClass = clsx(\n  \"flex items-center gap-2\",\n  \"px-3 py-2\",\n  \"font-semibold\",\n  \"text-base-700 dark:text-base-200\",\n  \"select-none\",\n);\n\nconst collapseButtonClass = clsx(\n  \"flex items-center justify-center\",\n  \"size-6 rounded\",\n  \"text-base-500\",\n  \"hover:bg-base-200 hover:text-primary-500\",\n  \"dark:hover:bg-base-800\",\n  \"transition-colors duration-150\",\n  \"cursor-pointer\",\n);\n\nconst laneToolsClass = clsx(\"flex items-center\", \"gap-1\");\n\nconst laneBodyBaseClass = clsx(\"flex-1\", \"flex flex-col gap-2\", \"p-2\", \"overflow-y-auto\");\n\nconst placeholderBaseClass = clsx(\n  \"rounded-lg\",\n  \"bg-primary-100/60 dark:bg-primary-900/30\",\n  \"origin-top\",\n  \"animate-[kanban-ph-in_200ms_ease-out]\",\n);\n\nconst KanbanLane: ParentComponent<KanbanLaneProps> = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"value\",\n    \"busy\",\n    \"collapsible\",\n    \"collapsed\",\n    \"onCollapsedChange\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableSignal({\n    value: () => local.collapsed ?? false,\n    onChange: () => local.onCollapsedChange,\n  });\n\n  const boardCtx = useKanbanContext();\n\n  const [registeredCards, setRegisteredCards] = createSignal<Map<string, { value: unknown; selectable: boolean }>>(\n    new Map(),\n  );\n\n  const registerCard = (id: string, info: { value: unknown; selectable: boolean }) => {\n    setRegisteredCards((prev) => new Map(prev).set(id, info));\n  };\n\n  const unregisterCard = (id: string) => {\n    setRegisteredCards((prev) => {\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  };\n\n  const selectableCards = createMemo(() =>\n    [...registeredCards().values()].filter((c) => c.selectable && c.value != null),\n  );\n\n  const hasSelectableCards = () => selectableCards().length > 0;\n\n  const isAllSelected = () => {\n    const cards = selectableCards();\n    if (cards.length === 0) return false;\n    return cards.every((c) => boardCtx.selectedValues().includes(c.value));\n  };\n\n  const handleSelectAll = (checked: boolean) => {\n    const laneCardValues = selectableCards().map((c) => c.value!);\n    boardCtx.setSelectedValues((prev: unknown[]) => {\n      if (checked) {\n        const toAdd = laneCardValues.filter((v) => !prev.includes(v));\n        return toAdd.length > 0 ? [...prev, ...toAdd] : prev;\n      } else {\n        const toRemove = new Set<unknown>(laneCardValues);\n        const next = prev.filter((v: unknown) => !toRemove.has(v));\n        return next.length === prev.length ? prev : next;\n      }\n    });\n  };\n\n  const [dropTarget, setDropTarget] = createSignal<KanbanDropTarget>();\n  const [dragEnterCount, setDragEnterCount] = createSignal(0);\n\n  // \uB4DC\uB798\uADF8 \uC624\uBC84 \uC0C1\uD0DC: \uCE74\uC6B4\uD130 > 0 && \uB4DC\uB798\uADF8 \uC911\n  const isDragOverLane = () => dragEnterCount() > 0 && boardCtx.dragCard() != null;\n\n  // dragCard\uAC00 \uB9AC\uC14B\uB418\uBA74 dropTarget, \uCE74\uC6B4\uD130\uB3C4 \uCD08\uAE30\uD654\n  createEffect(() => {\n    if (!boardCtx.dragCard()) {\n      setDragEnterCount(0);\n      setDropTarget(undefined);\n    }\n  });\n\n  // Lane \uC774\uD0C8 \uAC10\uC9C0: dragenter/dragleave \uCE74\uC6B4\uD130\n  const handleLaneDragEnter = () => {\n    setDragEnterCount((c) => c + 1);\n  };\n\n  const handleLaneDragLeave = () => {\n    const next = dragEnterCount() - 1;\n    setDragEnterCount(next);\n    if (next === 0) {\n      setDropTarget(undefined);\n    }\n  };\n\n  // \uBE48 \uC601\uC5ED dragover (\uCE74\uB4DC\uAC00 \uC5C6\uAC70\uB098 \uCE74\uB4DC \uC544\uB798 \uC601\uC5ED)\n  const handleLaneDragOver = (e: DragEvent) => {\n    if (!boardCtx.dragCard()) return;\n    e.preventDefault();\n  };\n\n  // \uBE48 \uC601\uC5ED \uB610\uB294 placeholder drop\n  const handleLaneDrop = (e: DragEvent) => {\n    if (!boardCtx.dragCard()) return;\n    e.preventDefault();\n\n    const current = dropTarget();\n    if (current) {\n      // placeholder\uB098 \uCE74\uB4DC \uC0AC\uC774 gap\uC5D0 drop\uB41C \uACBD\uC6B0 \u2014 dropTarget \uC704\uCE58 \uC0AC\uC6A9\n      boardCtx.onDropTo(local.value, current.value, current.position);\n    } else {\n      // \uBE48 \uB808\uC778\uC5D0 drop\uB41C \uACBD\uC6B0 \u2014 \uB05D\uC5D0 \uCD94\uAC00\n      boardCtx.onDropTo(local.value, undefined, undefined);\n    }\n  };\n\n  const laneContextValue: KanbanLaneContextValue = {\n    value: () => local.value,\n    dropTarget,\n    setDropTarget,\n    registerCard,\n    unregisterCard,\n  };\n\n  // Provider \uC548\uC5D0\uC11C children\uC744 resolve\uD574\uC57C splitSlots\uAC00 \uC62C\uBC14\uB974\uAC8C \uB3D9\uC791\n  const LaneInner: ParentComponent = (innerProps) => {\n    const resolved = children(() => innerProps.children);\n    const [slots, content] = splitSlots(resolved, [\"kanbanLaneTitle\", \"kanbanLaneTools\"] as const);\n\n    const hasHeader = () =>\n      local.collapsible ||\n      hasSelectableCards() ||\n      slots().kanbanLaneTitle.length > 0 ||\n      slots().kanbanLaneTools.length > 0;\n\n    // placeholder div (Lane\uC774 \uC18C\uC720, DOM \uC9C1\uC811 \uC81C\uC5B4)\n    let bodyRef: HTMLDivElement | undefined;\n    const placeholderEl = document.createElement(\"div\");\n    placeholderEl.className = placeholderBaseClass;\n\n    createEffect(() => {\n      const target = dropTarget();\n      const dc = boardCtx.dragCard();\n\n      if (!target || !dc || !bodyRef) {\n        if (placeholderEl.parentNode) {\n          placeholderEl.remove();\n        }\n        return;\n      }\n\n      // placeholder \uB192\uC774 \uC124\uC815\n      placeholderEl.style.height = `${dc.heightOnDrag}px`;\n\n      // \uC0BD\uC785 \uC704\uCE58 \uACC4\uC0B0\n      const referenceNode = target.position === \"before\" ? target.element : target.element.nextElementSibling;\n\n      // \uC774\uBBF8 \uC62C\uBC14\uB978 \uC704\uCE58\uBA74 DOM \uC870\uC791 \uC0DD\uB7B5\n      if (placeholderEl.parentNode === bodyRef && placeholderEl.nextSibling === referenceNode) {\n        return;\n      }\n\n      bodyRef.insertBefore(placeholderEl, referenceNode);\n    });\n\n    // placeholder cleanup\n    onCleanup(() => {\n      if (placeholderEl.parentNode) {\n        placeholderEl.remove();\n      }\n    });\n\n    return (\n      <LoadingContainer busy={local.busy} variant=\"bar\">\n        <div\n          {...rest}\n          data-kanban-lane\n          class={twMerge(laneBaseClass, isDragOverLane() && laneDragOverClass, local.class)}\n          onDragEnter={handleLaneDragEnter}\n          onDragLeave={handleLaneDragLeave}\n          onDragOver={handleLaneDragOver}\n          onDrop={handleLaneDrop}\n        >\n          <Show when={hasHeader()}>\n            <div class={laneHeaderBaseClass}>\n              <Show when={local.collapsible}>\n                <button type=\"button\" class={collapseButtonClass} onClick={() => setCollapsed((prev) => !prev)}>\n                  <Icon icon={collapsed() ? IconEyeOff : IconEye} size=\"1em\" />\n                </button>\n              </Show>\n              <Show when={hasSelectableCards()}>\n                <Checkbox value={isAllSelected()} onValueChange={handleSelectAll} inline theme=\"primary\" />\n              </Show>\n              <div class=\"flex-1\">{slots().kanbanLaneTitle}</div>\n              <Show when={slots().kanbanLaneTools.length > 0}>\n                <div class={laneToolsClass}>{slots().kanbanLaneTools}</div>\n              </Show>\n            </div>\n          </Show>\n          <Show when={!collapsed()}>\n            <div ref={bodyRef} class={laneBodyBaseClass}>\n              {content()}\n            </div>\n          </Show>\n        </div>\n      </LoadingContainer>\n    );\n  };\n\n  return (\n    <KanbanLaneContext.Provider value={laneContextValue}>\n      <LaneInner>{local.children}</LaneInner>\n    </KanbanLaneContext.Provider>\n  );\n};\n\n// \u2500\u2500\u2500 Kanban (Board) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface KanbanProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"onDrop\"> {\n  onDrop?: (info: KanbanDropInfo) => void;\n  selectedValues?: unknown[];\n  onSelectedValuesChange?: (values: unknown[]) => void;\n  children?: JSX.Element;\n}\n\nconst boardBaseClass = clsx(\"inline-flex flex-nowrap\", \"h-full\", \"gap-4\");\n\ninterface KanbanComponent {\n  (props: KanbanProps): JSX.Element;\n  Lane: typeof KanbanLane;\n  Card: typeof KanbanCard;\n  LaneTitle: typeof KanbanLaneTitle;\n  LaneTools: typeof KanbanLaneTools;\n}\n\nconst KanbanBase = (props: KanbanProps) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"onDrop\", \"selectedValues\", \"onSelectedValuesChange\"]);\n\n  const [dragCard, setDragCard] = createSignal<KanbanCardRef>();\n\n  const [selectedValues, setSelectedValues] = createControllableSignal({\n    value: () => local.selectedValues ?? ([] as unknown[]),\n    onChange: () => local.onSelectedValuesChange,\n  });\n\n  const toggleSelection = (value: unknown) => {\n    setSelectedValues((prev) => {\n      const idx = prev.indexOf(value);\n      if (idx >= 0) {\n        return [...prev.slice(0, idx), ...prev.slice(idx + 1)];\n      }\n      return [...prev, value];\n    });\n  };\n\n  const onDropTo = (\n    targetLaneValue: unknown | undefined,\n    targetCardValue: unknown | undefined,\n    position: \"before\" | \"after\" | undefined,\n  ) => {\n    const source = dragCard();\n    if (!source) return;\n\n    local.onDrop?.({\n      sourceValue: source.value,\n      targetLaneValue,\n      targetCardValue,\n      position,\n    });\n\n    setDragCard(undefined);\n  };\n\n  onMount(() => {\n    const handleDragEnd = () => {\n      setDragCard(undefined);\n    };\n    document.addEventListener(\"dragend\", handleDragEnd);\n    onCleanup(() => document.removeEventListener(\"dragend\", handleDragEnd));\n  });\n\n  const contextValue: KanbanContextValue = {\n    dragCard,\n    setDragCard,\n    onDropTo,\n    selectedValues,\n    setSelectedValues,\n    toggleSelection,\n  };\n\n  return (\n    <KanbanContext.Provider value={contextValue}>\n      <div {...rest} data-kanban class={twMerge(boardBaseClass, local.class)}>\n        {local.children}\n      </div>\n    </KanbanContext.Provider>\n  );\n};\n\nexport const Kanban = KanbanBase as KanbanComponent;\nKanban.Lane = KanbanLane;\nKanban.Card = KanbanCard;\nKanban.LaneTitle = KanbanLaneTitle;\nKanban.LaneTools = KanbanLaneTools;\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,SAAS,kBAAkB;AACpC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,kBAAkB;AAC3B,OAAO;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AAIP,MAAM,kBAAmC,CAAC,UAAU,oCAAC,SAAI,0BAAsB,QAAE,MAAM,QAAS;AAIhG,MAAM,kBAAmC,CAAC,UAAU,oCAAC,SAAI,0BAAsB,QAAE,MAAM,QAAS;AAYhG,MAAM,gBAAgB,KAAK,kBAAkB,iCAAiC;AAE9E,MAAM,mBAAmB,KAAK,iCAAiC,gBAAgB,gCAAgC;AAE/G,MAAM,oBAAoB,KAAK,8BAA8B,gCAAgC;AAE7F,MAAM,gBAAgB;AAEtB,MAAM,aAA+C,CAAC,UAAU;AAC9D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,SAAS,aAAa,cAAc,cAAc,CAAC;AAEjH,QAAM,WAAW,iBAAiB;AAClC,QAAM,UAAU,qBAAqB;AAErC,MAAI;AAEJ,QAAM,SAAS,OAAO,WAAW;AAEjC,eAAa,MAAM;AACjB,YAAQ,aAAa,QAAQ;AAAA,MAC3B,OAAO,MAAM;AAAA,MACb,YAAY,MAAM,cAAc;AAAA,IAClC,CAAC;AAAA,EACH,CAAC;AAED,YAAU,MAAM;AACd,YAAQ,eAAe,MAAM;AAAA,EAC/B,CAAC;AAED,QAAM,cAAc,MAAM,MAAM,cAAc;AAE9C,QAAM,eAAe,MAAM;AACzB,UAAM,KAAK,SAAS,SAAS;AAC7B,WAAO,MAAM,QAAQ,GAAG,SAAS,QAAQ,GAAG,UAAU,MAAM;AAAA,EAC9D;AAEA,QAAM,kBAAkB,CAAC,MAAiB;AAxF5C;AAyFI,QAAI,CAAC,YAAY,GAAG;AAClB,QAAE,eAAe;AACjB;AAAA,IACF;AACA,YAAE,iBAAF,mBAAgB,QAAQ,cAAc;AACtC,UAAM,eAAe,QAAQ;AAE7B,0BAAsB,MAAM;AAC1B,eAAS,YAAY;AAAA,QACnB,OAAO,MAAM;AAAA,QACb,WAAW,QAAQ,MAAM;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,CAAC,MAAiB;AACvC,QAAI,CAAC,SAAS,SAAS,EAAG;AAC1B,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAElB,UAAM,OAAO,QAAQ,sBAAsB;AAC3C,UAAM,OAAO,KAAK,MAAM,KAAK,SAAS;AACtC,UAAM,WAAW,EAAE,UAAU,OAAO,WAAW;AAE/C,UAAM,UAAU,QAAQ,WAAW;AACnC,SAAI,mCAAS,aAAY,WAAW,QAAQ,aAAa,UAAU;AACjE;AAAA,IACF;AAEA,YAAQ,cAAc,EAAE,SAAS,SAAS,OAAO,MAAM,OAAO,SAAS,CAAC;AAAA,EAC1E;AAEA,QAAM,aAAa,CAAC,MAAiB;AACnC,QAAI,CAAC,SAAS,SAAS,EAAG;AAC1B,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAElB,UAAM,UAAU,QAAQ,WAAW;AACnC,aAAS,SAAS,QAAQ,MAAM,GAAG,MAAM,QAAO,mCAAS,aAAY,QAAQ;AAAA,EAC/E;AAGA,QAAM,cAAc,CAAC,MAAkB;AACrC,QAAI,aAAa;AACf,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,oBAAc;AACd;AAAA,IACF;AACA,QAAI,CAAC,EAAE,SAAU;AACjB,QAAI,CAAC,MAAM,WAAY;AACvB,QAAI,MAAM,SAAS,KAAM;AACzB,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,aAAS,gBAAgB,MAAM,KAAK;AAAA,EACtC;AAGA,MAAI;AACJ,MAAI,cAAc;AAElB,QAAM,oBAAoB,MAAM;AAC9B,QAAI,CAAC,MAAM,WAAY;AACvB,QAAI,MAAM,SAAS,KAAM;AAEzB,kBAAc;AACd,qBAAiB,WAAW,MAAM;AAChC,oBAAc;AACd,eAAS,kBAAkB,CAAC,MAAM,KAAM,CAAC;AAAA,IAC3C,GAAG,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,iBAAa,cAAc;AAC3B,qBAAiB;AAAA,EACnB;AAEA,QAAM,sBAAsB,MAAM;AAChC,iBAAa,cAAc;AAC3B,qBAAiB;AAAA,EACnB;AAEA,YAAU,MAAM;AACd,iBAAa,cAAc;AAAA,EAC7B,CAAC;AAED,QAAM,aAAa,MAAM,MAAM,SAAS,QAAQ,SAAS,eAAe,EAAE,SAAS,MAAM,KAAK;AAE9F,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,oBAAgB;AAAA,MAChB,WAAW,YAAY;AAAA,MACvB,OAAO,QAAQ,eAAe,YAAY,KAAK,eAAe,aAAa,KAAK,cAAc,MAAM,KAAK;AAAA,MACzG,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,SAAS;AAAA;AAAA,IAET,oCAAC,QAAK,OAAO,QAAQ,kBAAkB,WAAW,KAAK,mBAAmB,MAAM,YAAY,KACzF,MAAM,QACT;AAAA,EACF;AAEJ;AAaA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,oBAAoB,KAAK,mCAAmC;AAElE,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,iBAAiB,KAAK,qBAAqB,OAAO;AAExD,MAAM,oBAAoB,KAAK,UAAU,uBAAuB,OAAO,iBAAiB;AAExF,MAAM,uBAAuB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,aAA+C,CAAC,UAAU;AAC9D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,yBAAyB;AAAA,IACzD,OAAO,MAAM,MAAM,aAAa;AAAA,IAChC,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,WAAW,iBAAiB;AAElC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C,oBAAI,IAAI;AAAA,EACV;AAEA,QAAM,eAAe,CAAC,IAAY,SAAkD;AAClF,uBAAmB,CAAC,SAAS,IAAI,IAAI,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC;AAAA,EAC1D;AAEA,QAAM,iBAAiB,CAAC,OAAe;AACrC,uBAAmB,CAAC,SAAS;AAC3B,YAAM,OAAO,IAAI,IAAI,IAAI;AACzB,WAAK,OAAO,EAAE;AACd,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AAEA,QAAM,kBAAkB;AAAA,IAAW,MACjC,CAAC,GAAG,gBAAgB,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,IAAI;AAAA,EAC/E;AAEA,QAAM,qBAAqB,MAAM,gBAAgB,EAAE,SAAS;AAE5D,QAAM,gBAAgB,MAAM;AAC1B,UAAM,QAAQ,gBAAgB;AAC9B,QAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,WAAO,MAAM,MAAM,CAAC,MAAM,SAAS,eAAe,EAAE,SAAS,EAAE,KAAK,CAAC;AAAA,EACvE;AAEA,QAAM,kBAAkB,CAAC,YAAqB;AAC5C,UAAM,iBAAiB,gBAAgB,EAAE,IAAI,CAAC,MAAM,EAAE,KAAM;AAC5D,aAAS,kBAAkB,CAAC,SAAoB;AAC9C,UAAI,SAAS;AACX,cAAM,QAAQ,eAAe,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,CAAC;AAC5D,eAAO,MAAM,SAAS,IAAI,CAAC,GAAG,MAAM,GAAG,KAAK,IAAI;AAAA,MAClD,OAAO;AACL,cAAM,WAAW,IAAI,IAAa,cAAc;AAChD,cAAM,OAAO,KAAK,OAAO,CAAC,MAAe,CAAC,SAAS,IAAI,CAAC,CAAC;AACzD,eAAO,KAAK,WAAW,KAAK,SAAS,OAAO;AAAA,MAC9C;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,CAAC,YAAY,aAAa,IAAI,aAA+B;AACnE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAa,CAAC;AAG1D,QAAM,iBAAiB,MAAM,eAAe,IAAI,KAAK,SAAS,SAAS,KAAK;AAG5E,eAAa,MAAM;AACjB,QAAI,CAAC,SAAS,SAAS,GAAG;AACxB,wBAAkB,CAAC;AACnB,oBAAc,MAAS;AAAA,IACzB;AAAA,EACF,CAAC;AAGD,QAAM,sBAAsB,MAAM;AAChC,sBAAkB,CAAC,MAAM,IAAI,CAAC;AAAA,EAChC;AAEA,QAAM,sBAAsB,MAAM;AAChC,UAAM,OAAO,eAAe,IAAI;AAChC,sBAAkB,IAAI;AACtB,QAAI,SAAS,GAAG;AACd,oBAAc,MAAS;AAAA,IACzB;AAAA,EACF;AAGA,QAAM,qBAAqB,CAAC,MAAiB;AAC3C,QAAI,CAAC,SAAS,SAAS,EAAG;AAC1B,MAAE,eAAe;AAAA,EACnB;AAGA,QAAM,iBAAiB,CAAC,MAAiB;AACvC,QAAI,CAAC,SAAS,SAAS,EAAG;AAC1B,MAAE,eAAe;AAEjB,UAAM,UAAU,WAAW;AAC3B,QAAI,SAAS;AAEX,eAAS,SAAS,MAAM,OAAO,QAAQ,OAAO,QAAQ,QAAQ;AAAA,IAChE,OAAO;AAEL,eAAS,SAAS,MAAM,OAAO,QAAW,MAAS;AAAA,IACrD;AAAA,EACF;AAEA,QAAM,mBAA2C;AAAA,IAC/C,OAAO,MAAM,MAAM;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGA,QAAM,YAA6B,CAAC,eAAe;AACjD,UAAM,WAAW,SAAS,MAAM,WAAW,QAAQ;AACnD,UAAM,CAAC,OAAO,OAAO,IAAI,WAAW,UAAU,CAAC,mBAAmB,iBAAiB,CAAU;AAE7F,UAAM,YAAY,MAChB,MAAM,eACN,mBAAmB,KACnB,MAAM,EAAE,gBAAgB,SAAS,KACjC,MAAM,EAAE,gBAAgB,SAAS;AAGnC,QAAI;AACJ,UAAM,gBAAgB,SAAS,cAAc,KAAK;AAClD,kBAAc,YAAY;AAE1B,iBAAa,MAAM;AACjB,YAAM,SAAS,WAAW;AAC1B,YAAM,KAAK,SAAS,SAAS;AAE7B,UAAI,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS;AAC9B,YAAI,cAAc,YAAY;AAC5B,wBAAc,OAAO;AAAA,QACvB;AACA;AAAA,MACF;AAGA,oBAAc,MAAM,SAAS,GAAG,GAAG,YAAY;AAG/C,YAAM,gBAAgB,OAAO,aAAa,WAAW,OAAO,UAAU,OAAO,QAAQ;AAGrF,UAAI,cAAc,eAAe,WAAW,cAAc,gBAAgB,eAAe;AACvF;AAAA,MACF;AAEA,cAAQ,aAAa,eAAe,aAAa;AAAA,IACnD,CAAC;AAGD,cAAU,MAAM;AACd,UAAI,cAAc,YAAY;AAC5B,sBAAc,OAAO;AAAA,MACvB;AAAA,IACF,CAAC;AAED,WACE,oCAAC,oBAAiB,MAAM,MAAM,MAAM,SAAQ,SAC1C;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,oBAAgB;AAAA,QAChB,OAAO,QAAQ,eAAe,eAAe,KAAK,mBAAmB,MAAM,KAAK;AAAA,QAChF,aAAa;AAAA,QACb,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,QAAQ;AAAA;AAAA,MAER,oCAAC,QAAK,MAAM,UAAU,KACpB,oCAAC,SAAI,OAAO,uBACV,oCAAC,QAAK,MAAM,MAAM,eAChB,oCAAC,YAAO,MAAK,UAAS,OAAO,qBAAqB,SAAS,MAAM,aAAa,CAAC,SAAS,CAAC,IAAI,KAC3F,oCAAC,QAAK,MAAM,UAAU,IAAI,aAAa,SAAS,MAAK,OAAM,CAC7D,CACF,GACA,oCAAC,QAAK,MAAM,mBAAmB,KAC7B,oCAAC,YAAS,OAAO,cAAc,GAAG,eAAe,iBAAiB,QAAM,MAAC,OAAM,WAAU,CAC3F,GACA,oCAAC,SAAI,OAAM,YAAU,MAAM,EAAE,eAAgB,GAC7C,oCAAC,QAAK,MAAM,MAAM,EAAE,gBAAgB,SAAS,KAC3C,oCAAC,SAAI,OAAO,kBAAiB,MAAM,EAAE,eAAgB,CACvD,CACF,CACF;AAAA,MACA,oCAAC,QAAK,MAAM,CAAC,UAAU,KACrB,oCAAC,SAAI,KAAK,SAAS,OAAO,qBACvB,QAAQ,CACX,CACF;AAAA,IACF,CACF;AAAA,EAEJ;AAEA,SACE,oCAAC,kBAAkB,UAAlB,EAA2B,OAAO,oBACjC,oCAAC,iBAAW,MAAM,QAAS,CAC7B;AAEJ;AAWA,MAAM,iBAAiB,KAAK,2BAA2B,UAAU,OAAO;AAUxE,MAAM,aAAa,CAAC,UAAuB;AACzC,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO,CAAC,YAAY,SAAS,UAAU,kBAAkB,wBAAwB,CAAC;AAEnH,QAAM,CAAC,UAAU,WAAW,IAAI,aAA4B;AAE5D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,yBAAyB;AAAA,IACnE,OAAO,MAAM,MAAM,kBAAmB,CAAC;AAAA,IACvC,UAAU,MAAM,MAAM;AAAA,EACxB,CAAC;AAED,QAAM,kBAAkB,CAAC,UAAmB;AAC1C,sBAAkB,CAAC,SAAS;AAC1B,YAAM,MAAM,KAAK,QAAQ,KAAK;AAC9B,UAAI,OAAO,GAAG;AACZ,eAAO,CAAC,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,GAAG,KAAK,MAAM,MAAM,CAAC,CAAC;AAAA,MACvD;AACA,aAAO,CAAC,GAAG,MAAM,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAEA,QAAM,WAAW,CACf,iBACA,iBACA,aACG;AAtfP;AAufI,UAAM,SAAS,SAAS;AACxB,QAAI,CAAC,OAAQ;AAEb,gBAAM,WAAN,+BAAe;AAAA,MACb,aAAa,OAAO;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,gBAAY,MAAS;AAAA,EACvB;AAEA,UAAQ,MAAM;AACZ,UAAM,gBAAgB,MAAM;AAC1B,kBAAY,MAAS;AAAA,IACvB;AACA,aAAS,iBAAiB,WAAW,aAAa;AAClD,cAAU,MAAM,SAAS,oBAAoB,WAAW,aAAa,CAAC;AAAA,EACxE,CAAC;AAED,QAAM,eAAmC;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oCAAC,cAAc,UAAd,EAAuB,OAAO,gBAC7B,oCAAC,SAAK,GAAG,MAAM,eAAW,MAAC,OAAO,QAAQ,gBAAgB,MAAM,KAAK,KAClE,MAAM,QACT,CACF;AAEJ;AAEO,MAAM,SAAS;AACtB,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,YAAY;AACnB,OAAO,YAAY;",
+  "names": []
+}

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

@@ -0,0 +1,24 @@
+import { createContext, useContext } from "solid-js";
+const KanbanContext = createContext();
+function useKanbanContext() {
+  const context = useContext(KanbanContext);
+  if (!context) {
+    throw new Error("useKanbanContext\uB294 Kanban \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
+  }
+  return context;
+}
+const KanbanLaneContext = createContext();
+function useKanbanLaneContext() {
+  const context = useContext(KanbanLaneContext);
+  if (!context) {
+    throw new Error("useKanbanLaneContext\uB294 Kanban.Lane \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4");
+  }
+  return context;
+}
+export {
+  KanbanContext,
+  KanbanLaneContext,
+  useKanbanContext,
+  useKanbanLaneContext
+};
+//# sourceMappingURL=KanbanContext.js.map

package/dist/components/data/kanban/KanbanContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/data/kanban/KanbanContext.ts"],
+  "sourcesContent": ["import { createContext, useContext, type Accessor, type Setter } from \"solid-js\";\n\n// \u2500\u2500 \uD0C0\uC785 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface KanbanCardRef<L = unknown, T = unknown> {\n  value: T | undefined;\n  laneValue: L | undefined;\n  heightOnDrag: number;\n}\n\nexport interface KanbanDropInfo<L = unknown, T = unknown> {\n  sourceValue?: T;\n  targetLaneValue?: L;\n  targetCardValue?: T;\n  position?: \"before\" | \"after\";\n}\n\nexport interface KanbanDropTarget<T = unknown> {\n  element: HTMLElement;\n  value: T | undefined;\n  position: \"before\" | \"after\";\n}\n\n// \u2500\u2500 Board Context \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface KanbanContextValue<L = unknown, T = unknown> {\n  dragCard: Accessor<KanbanCardRef<L, T> | undefined>;\n  setDragCard: Setter<KanbanCardRef<L, T> | undefined>;\n  onDropTo: (\n    targetLaneValue: L | undefined,\n    targetCardValue: T | undefined,\n    position: \"before\" | \"after\" | undefined,\n  ) => void;\n\n  // Selection (Phase 4)\n  selectedValues: Accessor<T[]>;\n  setSelectedValues: (updater: T[] | ((prev: T[]) => T[])) => void;\n  toggleSelection: (value: T) => void;\n}\n\nexport const KanbanContext = createContext<KanbanContextValue>();\n\nexport function useKanbanContext(): KanbanContextValue {\n  const context = useContext(KanbanContext);\n  if (!context) {\n    throw new Error(\"useKanbanContext\uB294 Kanban \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context;\n}\n\n// \u2500\u2500 Lane Context \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport interface KanbanLaneContextValue<L = unknown, T = unknown> {\n  value: Accessor<L | undefined>;\n  dropTarget: Accessor<KanbanDropTarget<T> | undefined>;\n  setDropTarget: (target: KanbanDropTarget<T> | undefined) => void;\n\n  // Card registration (Phase 4)\n  registerCard: (id: string, info: { value: T | undefined; selectable: boolean }) => void;\n  unregisterCard: (id: string) => void;\n}\n\nexport const KanbanLaneContext = createContext<KanbanLaneContextValue>();\n\nexport function useKanbanLaneContext(): KanbanLaneContextValue {\n  const context = useContext(KanbanLaneContext);\n  if (!context) {\n    throw new Error(\"useKanbanLaneContext\uB294 Kanban.Lane \uB0B4\uBD80\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4\");\n  }\n  return context;\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAA8C;AAwC/D,MAAM,gBAAgB,cAAkC;AAExD,SAAS,mBAAuC;AACrD,QAAM,UAAU,WAAW,aAAa;AACxC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,iHAA2C;AAAA,EAC7D;AACA,SAAO;AACT;AAcO,MAAM,oBAAoB,cAAsC;AAEhE,SAAS,uBAA+C;AAC7D,QAAM,UAAU,WAAW,iBAAiB;AAC5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0HAAoD;AAAA,EACtE;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/components/data/list/List.js

@@ -0,0 +1,133 @@
+import { splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ListContext, useListContext } from "./ListContext";
+import { ListItem } from "./ListItem";
+const baseClass = clsx("inline-flex flex-col rounded-md");
+const rootClass = clsx("border border-base-300 bg-base-50 p-px dark:border-base-700 dark:bg-base-900");
+const nestedClass = clsx("rounded-none py-1");
+const insetClass = clsx("w-full border-transparent bg-transparent dark:border-transparent dark:bg-transparent");
+const ListBase = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "inset"]);
+  let listRef;
+  const parentContext = useListContext();
+  const currentLevel = parentContext.level + 1;
+  const isNested = currentLevel > 1;
+  const isVisible = (el) => {
+    let parent = el.parentElement;
+    while (parent && parent !== listRef) {
+      if (parent.hasAttribute("data-collapsed")) {
+        return false;
+      }
+      parent = parent.parentElement;
+    }
+    return true;
+  };
+  const handleArrowRight = (current) => {
+    const isOpen = current.getAttribute("aria-expanded") === "true";
+    const hasChildren = current.hasAttribute("aria-expanded");
+    if (!hasChildren) return;
+    if (!isOpen) {
+      current.click();
+    } else {
+      const collapse = current.nextElementSibling;
+      const nestedItem = collapse == null ? void 0 : collapse.querySelector("[data-list-item]");
+      nestedItem == null ? void 0 : nestedItem.focus();
+    }
+  };
+  const handleArrowLeft = (current) => {
+    var _a;
+    const isOpen = current.getAttribute("aria-expanded") === "true";
+    const hasChildren = current.hasAttribute("aria-expanded");
+    if (hasChildren && isOpen) {
+      current.click();
+    } else {
+      const parentItem = (_a = current.closest("[data-collapse]")) == null ? void 0 : _a.previousElementSibling;
+      if (parentItem == null ? void 0 : parentItem.hasAttribute("data-list-item")) {
+        parentItem.focus();
+      }
+    }
+  };
+  const handleKeyDown = (e) => {
+    var _a, _b, _c, _d;
+    const current = e.target;
+    if (!current.hasAttribute("data-list-item")) return;
+    const allItems = [...listRef.querySelectorAll('[data-list-item]:not([aria-disabled="true"])')];
+    const visibleItems = allItems.filter((el) => isVisible(el));
+    const idx = visibleItems.indexOf(current);
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        e.preventDefault();
+        e.stopPropagation();
+        current.click();
+        break;
+      case "ArrowDown":
+        if (idx + 1 < visibleItems.length) {
+          e.preventDefault();
+          e.stopPropagation();
+          (_a = visibleItems[idx + 1]) == null ? void 0 : _a.focus();
+        }
+        break;
+      case "ArrowUp":
+        if (idx - 1 >= 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          (_b = visibleItems[idx - 1]) == null ? void 0 : _b.focus();
+        }
+        break;
+      case "Home":
+        if (visibleItems.length > 0 && idx !== 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          (_c = visibleItems[0]) == null ? void 0 : _c.focus();
+        }
+        break;
+      case "End":
+        if (visibleItems.length > 0 && idx !== visibleItems.length - 1) {
+          e.preventDefault();
+          e.stopPropagation();
+          (_d = visibleItems[visibleItems.length - 1]) == null ? void 0 : _d.focus();
+        }
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        e.stopPropagation();
+        handleArrowRight(current);
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        e.stopPropagation();
+        handleArrowLeft(current);
+        break;
+    }
+  };
+  const getClassName = () => twMerge(
+    baseClass,
+    !isNested && rootClass,
+    (local.inset || isNested) && insetClass,
+    isNested && nestedClass,
+    local.class
+  );
+  return /* @__PURE__ */ React.createElement(ListContext.Provider, { value: { level: currentLevel } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: listRef,
+      role: isNested ? "group" : "tree",
+      "data-list": true,
+      ...rest,
+      onKeyDown: (e) => {
+        handleKeyDown(e);
+        if (typeof rest.onKeyDown === "function") rest.onKeyDown(e);
+      },
+      class: getClassName()
+    },
+    local.children
+  ));
+};
+const List = ListBase;
+List.Item = ListItem;
+export {
+  List
+};
+//# sourceMappingURL=List.js.map

package/dist/components/data/list/List.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/data/list/List.tsx"],
+  "sourcesContent": ["import { type JSX, type ParentComponent, splitProps } from \"solid-js\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { ListContext, useListContext } from \"./ListContext\";\nimport { ListItem } from \"./ListItem\";\n\nconst baseClass = clsx(\"inline-flex flex-col rounded-md\");\n\nconst rootClass = clsx(\"border border-base-300 bg-base-50 p-px dark:border-base-700 dark:bg-base-900\");\n\nconst nestedClass = clsx(\"rounded-none py-1\");\n\nconst insetClass = clsx(\"w-full border-transparent bg-transparent dark:border-transparent dark:bg-transparent\");\n\nexport interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * \uD22C\uBA85 \uBC30\uACBD \uC2A4\uD0C0\uC77C \uC801\uC6A9\n   */\n  inset?: boolean;\n}\n\n/**\n * ListItem\uB4E4\uC744 \uB2F4\uB294 \uCEE8\uD14C\uC774\uB108 \uCEF4\uD3EC\uB10C\uD2B8\n *\n * \uD2B8\uB9AC\uBDF0 \uC2A4\uD0C0\uC77C \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158 \uC9C0\uC6D0:\n * - `Space`/`Enter`: \uD604\uC7AC \uD56D\uBAA9 \uD1A0\uAE00\n * - `ArrowUp`/`ArrowDown`: \uC774\uC804/\uB2E4\uC74C \uD56D\uBAA9\uC73C\uB85C \uD3EC\uCEE4\uC2A4 \uC774\uB3D9\n * - `Home`/`End`: \uCCAB \uBC88\uC9F8/\uB9C8\uC9C0\uB9C9 \uD56D\uBAA9\uC73C\uB85C \uD3EC\uCEE4\uC2A4 \uC774\uB3D9\n * - `ArrowRight`: \uB2EB\uD600\uC788\uC73C\uBA74 \uC5F4\uAE30, \uC5F4\uB824\uC788\uC73C\uBA74 \uCCAB \uBC88\uC9F8 \uC790\uC2DD\uC73C\uB85C \uD3EC\uCEE4\uC2A4\n * - `ArrowLeft`: \uC5F4\uB824\uC788\uC73C\uBA74 \uB2EB\uAE30, \uB2EB\uD600\uC788\uC73C\uBA74 \uBD80\uBAA8\uB85C \uD3EC\uCEE4\uC2A4\n *\n * @example\n * ```tsx\n * <List>\n *   <List.Item>Item 1</List.Item>\n *   <List.Item>Item 2</List.Item>\n * </List>\n *\n * <List inset>\n *   <List.Item>Inset style item</List.Item>\n * </List>\n * ```\n */\ninterface ListComponent extends ParentComponent<ListProps> {\n  Item: typeof ListItem;\n}\n\nconst ListBase: ParentComponent<ListProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"inset\"]);\n\n  let listRef!: HTMLDivElement;\n\n  const parentContext = useListContext();\n  const currentLevel = parentContext.level + 1;\n  const isNested = currentLevel > 1;\n\n  const isVisible = (el: Element): boolean => {\n    let parent = el.parentElement;\n    while (parent && parent !== listRef) {\n      if (parent.hasAttribute(\"data-collapsed\")) {\n        return false;\n      }\n      parent = parent.parentElement;\n    }\n    return true;\n  };\n\n  const handleArrowRight = (current: HTMLElement) => {\n    const isOpen = current.getAttribute(\"aria-expanded\") === \"true\";\n    const hasChildren = current.hasAttribute(\"aria-expanded\");\n\n    if (!hasChildren) return;\n\n    if (!isOpen) {\n      current.click();\n    } else {\n      // button\uC758 \uB2E4\uC74C \uD615\uC81C \uC694\uC18C(Collapse) \uB0B4\uC5D0\uC11C \uCCAB \uBC88\uC9F8 \uC790\uC2DD \uD56D\uBAA9 \uCC3E\uAE30\n      const collapse = current.nextElementSibling;\n      const nestedItem = collapse?.querySelector<HTMLElement>(\"[data-list-item]\");\n      nestedItem?.focus();\n    }\n  };\n\n  const handleArrowLeft = (current: HTMLElement) => {\n    const isOpen = current.getAttribute(\"aria-expanded\") === \"true\";\n    const hasChildren = current.hasAttribute(\"aria-expanded\");\n\n    if (hasChildren && isOpen) {\n      current.click();\n    } else {\n      // Collapse\uC758 \uC774\uC804 \uD615\uC81C\uAC00 \uBD80\uBAA8 button\n      const parentItem = current.closest(\"[data-collapse]\")?.previousElementSibling as HTMLElement | null;\n      if (parentItem?.hasAttribute(\"data-list-item\")) {\n        parentItem.focus();\n      }\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    const current = e.target as HTMLElement;\n    if (!current.hasAttribute(\"data-list-item\")) return;\n\n    const allItems = [...listRef.querySelectorAll('[data-list-item]:not([aria-disabled=\"true\"])')] as HTMLElement[];\n    const visibleItems = allItems.filter((el) => isVisible(el));\n    const idx = visibleItems.indexOf(current);\n\n    switch (e.key) {\n      case \" \":\n      case \"Enter\":\n        e.preventDefault();\n        e.stopPropagation();\n        current.click();\n        break;\n      case \"ArrowDown\":\n        if (idx + 1 < visibleItems.length) {\n          e.preventDefault();\n          e.stopPropagation();\n          visibleItems[idx + 1]?.focus();\n        }\n        break;\n      case \"ArrowUp\":\n        if (idx - 1 >= 0) {\n          e.preventDefault();\n          e.stopPropagation();\n          visibleItems[idx - 1]?.focus();\n        }\n        break;\n      case \"Home\":\n        if (visibleItems.length > 0 && idx !== 0) {\n          e.preventDefault();\n          e.stopPropagation();\n          visibleItems[0]?.focus();\n        }\n        break;\n      case \"End\":\n        if (visibleItems.length > 0 && idx !== visibleItems.length - 1) {\n          e.preventDefault();\n          e.stopPropagation();\n          visibleItems[visibleItems.length - 1]?.focus();\n        }\n        break;\n      case \"ArrowRight\":\n        e.preventDefault();\n        e.stopPropagation();\n        handleArrowRight(current);\n        break;\n      case \"ArrowLeft\":\n        e.preventDefault();\n        e.stopPropagation();\n        handleArrowLeft(current);\n        break;\n    }\n  };\n\n  const getClassName = () =>\n    twMerge(\n      baseClass,\n      !isNested && rootClass,\n      (local.inset || isNested) && insetClass,\n      isNested && nestedClass,\n      local.class,\n    );\n\n  return (\n    <ListContext.Provider value={{ level: currentLevel }}>\n      <div\n        ref={listRef}\n        role={isNested ? \"group\" : \"tree\"}\n        data-list\n        {...rest}\n        onKeyDown={(e) => {\n          handleKeyDown(e);\n          if (typeof rest.onKeyDown === \"function\") rest.onKeyDown(e);\n        }}\n        class={getClassName()}\n      >\n        {local.children}\n      </div>\n    </ListContext.Provider>\n  );\n};\n\nexport const List = ListBase as ListComponent;\nList.Item = ListItem;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/data/list/ListContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "solid-js";
+const ListContext = createContext({ level: 0 });
+const useListContext = () => useContext(ListContext);
+export {
+  ListContext,
+  useListContext
+};
+//# sourceMappingURL=ListContext.js.map

package/dist/components/data/list/ListContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/data/list/ListContext.ts"],
+  "sourcesContent": ["import { createContext, useContext } from \"solid-js\";\n\n/**\n * List context - \uC911\uCCA9 level \uC804\uB2EC\uC6A9\n */\nexport interface ListContextValue {\n  level: number;\n}\n\nexport const ListContext = createContext<ListContextValue>({ level: 0 });\n\nexport const useListContext = () => useContext(ListContext);\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AASnC,MAAM,cAAc,cAAgC,EAAE,OAAO,EAAE,CAAC;AAEhE,MAAM,iBAAiB,MAAM,WAAW,WAAW;",
+  "names": []
+}

package/dist/components/data/list/ListItem.js

@@ -0,0 +1,101 @@
+import { children, Show, splitProps } from "solid-js";
+import { IconChevronDown } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ripple } from "../../../directives/ripple";
+import { Collapse } from "../../disclosure/Collapse";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { useListContext } from "./ListContext";
+import { List } from "./List";
+import { splitSlots } from "../../../helpers/splitSlots";
+import {
+  listItemBaseClass,
+  listItemSizeClasses,
+  listItemSelectedClass,
+  listItemDisabledClass,
+  listItemReadonlyClass,
+  listItemIndentGuideClass,
+  listItemContentClass,
+  getListItemSelectedIconClass
+} from "./ListItem.styles";
+void ripple;
+const chevronClass = clsx("transition-transform duration-200 motion-reduce:transition-none");
+const ListItemChildren = (props) => /* @__PURE__ */ React.createElement("div", { class: "flex", "data-list-item-children": true }, /* @__PURE__ */ React.createElement("div", { class: listItemIndentGuideClass }), /* @__PURE__ */ React.createElement(List, { inset: true, class: "flex-1" }, props.children));
+const ListItem = (props) => {
+  const [local, rest] = splitProps(props, [
+    "children",
+    "class",
+    "style",
+    "open",
+    "onOpenChange",
+    "selected",
+    "readonly",
+    "disabled",
+    "selectedIcon",
+    "size",
+    "onClick"
+  ]);
+  const listContext = useListContext();
+  const level = listContext.level;
+  const [openState, setOpenState] = createControllableSignal({
+    value: () => local.open ?? false,
+    onChange: () => local.onOpenChange
+  });
+  const resolved = children(() => local.children);
+  const [slots, content] = splitSlots(resolved, ["listItemChildren"]);
+  const hasChildren = () => slots().listItemChildren.length > 0;
+  const useRipple = () => !(local.readonly || local.disabled);
+  const onHeaderClick = (e) => {
+    var _a;
+    if (local.readonly || local.disabled) return;
+    if (hasChildren()) {
+      setOpenState((v) => !v);
+    } else {
+      (_a = local.onClick) == null ? void 0 : _a.call(local, e);
+    }
+  };
+  const getHeaderClassName = () => twMerge(
+    listItemBaseClass,
+    local.size && listItemSizeClasses[local.size],
+    local.selected && listItemSelectedClass,
+    local.readonly && listItemReadonlyClass,
+    local.disabled && listItemDisabledClass,
+    local.class
+  );
+  const getChevronClassName = () => twMerge(chevronClass, openState() ? "rotate-0" : "rotate-90");
+  const getSelectedIconClassName = () => getListItemSelectedIconClass(local.selected ?? false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...rest,
+      type: "button",
+      "use:ripple": useRipple(),
+      class: getHeaderClassName(),
+      style: local.style,
+      "data-list-item": true,
+      role: "treeitem",
+      "aria-expanded": hasChildren() ? openState() : void 0,
+      "aria-disabled": local.disabled || void 0,
+      "aria-selected": local.selected || void 0,
+      "aria-level": level,
+      tabIndex: local.disabled ? -1 : 0,
+      onClick: onHeaderClick,
+      onFocus: (e) => {
+        const treeRoot = e.currentTarget.closest("[data-list]");
+        treeRoot == null ? void 0 : treeRoot.querySelectorAll("[data-list-item]").forEach((el) => {
+          el.tabIndex = -1;
+        });
+        e.currentTarget.tabIndex = 0;
+      }
+    },
+    /* @__PURE__ */ React.createElement(Show, { when: local.selectedIcon && !hasChildren() }, /* @__PURE__ */ React.createElement(Icon, { icon: local.selectedIcon, class: getSelectedIconClassName() })),
+    /* @__PURE__ */ React.createElement("span", { class: listItemContentClass }, content()),
+    /* @__PURE__ */ React.createElement(Show, { when: hasChildren() }, /* @__PURE__ */ React.createElement(Icon, { icon: IconChevronDown, size: "1em", class: getChevronClassName() }))
+  ), /* @__PURE__ */ React.createElement(Show, { when: hasChildren() }, /* @__PURE__ */ React.createElement(Collapse, { open: openState(), "data-collapsed": !openState() || void 0 }, slots().listItemChildren.single())));
+};
+ListItem.Children = ListItemChildren;
+export {
+  ListItem
+};
+//# sourceMappingURL=ListItem.js.map

package/dist/components/data/list/ListItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/data/list/ListItem.tsx"],
+  "sourcesContent": ["import { children, type Component, type JSX, type ParentComponent, Show, splitProps } from \"solid-js\";\nimport { IconChevronDown, type IconProps } from \"@tabler/icons-solidjs\";\nimport { Icon } from \"../../display/Icon\";\nimport clsx from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\nimport { ripple } from \"../../../directives/ripple\";\nimport { Collapse } from \"../../disclosure/Collapse\";\nimport { createControllableSignal } from \"../../../hooks/createControllableSignal\";\nimport { useListContext } from \"./ListContext\";\nimport { List } from \"./List\";\nimport { splitSlots } from \"../../../helpers/splitSlots\";\nimport {\n  listItemBaseClass,\n  listItemSizeClasses,\n  listItemSelectedClass,\n  listItemDisabledClass,\n  listItemReadonlyClass,\n  listItemIndentGuideClass,\n  listItemContentClass,\n  getListItemSelectedIconClass,\n} from \"./ListItem.styles\";\nimport type { ComponentSize } from \"../../../styles/tokens.styles\";\n\nvoid ripple;\n\nconst chevronClass = clsx(\"transition-transform duration-200 motion-reduce:transition-none\");\n\n/**\n * \uC911\uCCA9 \uB9AC\uC2A4\uD2B8\uB97C \uB2F4\uB294 \uC11C\uBE0C \uCEF4\uD3EC\uB10C\uD2B8\n *\n * ListItem\uC758 \uD558\uC704 \uC544\uC774\uD15C\uC744 \uC815\uC758\uD560 \uB54C \uC0AC\uC6A9\uD55C\uB2E4.\n * \uB0B4\uBD80\uC801\uC73C\uB85C `<List inset>`\uC73C\uB85C \uAC10\uC2F8\uC11C Context\uC640 \uD0A4\uBCF4\uB4DC \uB124\uBE44\uAC8C\uC774\uC158\uC774 \uB3D9\uC791\uD55C\uB2E4.\n * \uC138\uB85C\uC120 \uAC00\uC774\uB4DC\uAC00 \uC790\uB3D9\uC73C\uB85C \uD45C\uC2DC\uB41C\uB2E4.\n *\n * @example\n * ```tsx\n * <List.Item>\n *   Folder\n *   <List.Item.Children>\n *     <List.Item>File 1</List.Item>\n *     <List.Item>File 2</List.Item>\n *   </List.Item.Children>\n * </List.Item>\n * ```\n */\nconst ListItemChildren: ParentComponent = (props) => (\n  <div class=\"flex\" data-list-item-children>\n    <div class={listItemIndentGuideClass} />\n    <List inset class=\"flex-1\">\n      {props.children}\n    </List>\n  </div>\n);\n\nexport interface ListItemProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n  /**\n   * \uC911\uCCA9 \uB9AC\uC2A4\uD2B8\uC758 \uC5F4\uB9BC \uC0C1\uD0DC (controlled \uBAA8\uB4DC)\n   */\n  open?: boolean;\n\n  /**\n   * \uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uCF5C\uBC31 (\uC788\uC73C\uBA74 controlled \uBAA8\uB4DC)\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * \uC120\uD0DD\uB41C \uC0C1\uD0DC\n   */\n  selected?: boolean;\n\n  /**\n   * \uC77D\uAE30 \uC804\uC6A9 (\uD074\uB9AD \uBE44\uD65C\uC131\uD654, \uC77C\uBC18 \uC0C9\uC0C1 \uC720\uC9C0)\n   */\n  readonly?: boolean;\n\n  /**\n   * \uBE44\uD65C\uC131\uD654 (\uD074\uB9AD \uBD88\uAC00, \uD750\uB824\uC9D0)\n   */\n  disabled?: boolean;\n\n  /**\n   * \uC120\uD0DD \uD45C\uC2DC \uC544\uC774\uCF58 \uCEF4\uD3EC\uB10C\uD2B8 (\uC911\uCCA9 List\uAC00 \uC5C6\uC744 \uB54C\uB9CC \uD45C\uC2DC)\n   */\n  selectedIcon?: Component<IconProps>;\n\n  /**\n   * \uC544\uC774\uD15C \uD06C\uAE30\n   */\n  size?: ComponentSize;\n\n  /**\n   * \uD074\uB9AD \uD578\uB4E4\uB7EC (\uC911\uCCA9 List\uAC00 \uC5C6\uC744 \uB54C \uD638\uCD9C)\n   */\n  onClick?: (e: MouseEvent) => void;\n}\n\n/**\n * \uB9AC\uC2A4\uD2B8 \uC544\uC774\uD15C \uCEF4\uD3EC\uB10C\uD2B8\n *\n * `ListItem.Children`\uC73C\uB85C \uC911\uCCA9 \uB9AC\uC2A4\uD2B8\uB97C \uD3EC\uD568\uD558\uBA74 \uC544\uCF54\uB514\uC5B8 \uB3D9\uC791\uC744 \uC9C0\uC6D0\uD55C\uB2E4.\n * controlled \uBAA8\uB4DC\uB85C \uC0AC\uC6A9\uD558\uB824\uBA74 open\uACFC onOpenChange\uB97C \uD568\uAED8 \uC81C\uACF5\uD55C\uB2E4.\n *\n * @example\n * ```tsx\n * // \uAE30\uBCF8 \uC0AC\uC6A9\n * <List.Item>Simple item</List.Item>\n *\n * // \uC120\uD0DD \uC0C1\uD0DC\n * <List.Item selected>Selected item</List.Item>\n *\n * // \uC120\uD0DD \uC544\uC774\uCF58\n * <List.Item selectedIcon={IconCheck} selected>Icon selection</List.Item>\n *\n * // \uC911\uCCA9 \uB9AC\uC2A4\uD2B8 (\uC544\uCF54\uB514\uC5B8)\n * <List.Item>\n *   Folder\n *   <List.Item.Children>\n *     <List.Item>File</List.Item>\n *   </List.Item.Children>\n * </List.Item>\n * ```\n */\ninterface ListItemComponent extends ParentComponent<ListItemProps> {\n  Children: typeof ListItemChildren;\n}\n\nexport const ListItem: ListItemComponent = (props) => {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"open\",\n    \"onOpenChange\",\n    \"selected\",\n    \"readonly\",\n    \"disabled\",\n    \"selectedIcon\",\n    \"size\",\n    \"onClick\",\n  ]);\n\n  const listContext = useListContext();\n  const level = listContext.level;\n\n  const [openState, setOpenState] = createControllableSignal({\n    value: () => local.open ?? false,\n    onChange: () => local.onOpenChange,\n  });\n\n  const resolved = children(() => local.children);\n  const [slots, content] = splitSlots(resolved, [\"listItemChildren\"] as const);\n\n  const hasChildren = () => slots().listItemChildren.length > 0;\n\n  const useRipple = () => !(local.readonly || local.disabled);\n\n  const onHeaderClick = (e: MouseEvent) => {\n    if (local.readonly || local.disabled) return;\n\n    if (hasChildren()) {\n      setOpenState((v: boolean) => !v);\n    } else {\n      local.onClick?.(e);\n    }\n  };\n\n  const getHeaderClassName = () =>\n    twMerge(\n      listItemBaseClass,\n      local.size && listItemSizeClasses[local.size],\n      local.selected && listItemSelectedClass,\n      local.readonly && listItemReadonlyClass,\n      local.disabled && listItemDisabledClass,\n      local.class,\n    );\n\n  const getChevronClassName = () => twMerge(chevronClass, openState() ? \"rotate-0\" : \"rotate-90\");\n\n  const getSelectedIconClassName = () => getListItemSelectedIconClass(local.selected ?? false);\n\n  return (\n    <>\n      <button\n        {...rest}\n        type=\"button\"\n        use:ripple={useRipple()}\n        class={getHeaderClassName()}\n        style={local.style}\n        data-list-item\n        role=\"treeitem\"\n        aria-expanded={hasChildren() ? openState() : undefined}\n        aria-disabled={local.disabled || undefined}\n        aria-selected={local.selected || undefined}\n        aria-level={level}\n        tabIndex={local.disabled ? -1 : 0}\n        onClick={onHeaderClick}\n        onFocus={(e) => {\n          const treeRoot = e.currentTarget.closest(\"[data-list]\");\n          treeRoot?.querySelectorAll(\"[data-list-item]\").forEach((el) => {\n            (el as HTMLElement).tabIndex = -1;\n          });\n          e.currentTarget.tabIndex = 0;\n        }}\n      >\n        <Show when={local.selectedIcon && !hasChildren()}>\n          <Icon icon={local.selectedIcon!} class={getSelectedIconClassName()} />\n        </Show>\n        <span class={listItemContentClass}>{content()}</span>\n        <Show when={hasChildren()}>\n          <Icon icon={IconChevronDown} size=\"1em\" class={getChevronClassName()} />\n        </Show>\n      </button>\n      <Show when={hasChildren()}>\n        <Collapse open={openState()} data-collapsed={!openState() || undefined}>\n          {slots().listItemChildren.single()}\n        </Collapse>\n      </Show>\n    </>\n  );\n};\n\nListItem.Children = ListItemChildren;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/data/list/ListItem.styles.js

@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import { borderDefault } from "../../../styles/tokens.styles";
+const listItemBaseClass = clsx(
+  "flex",
+  "items-center",
+  "gap-2",
+  "py-1",
+  "px-1.5",
+  "m-px",
+  "cursor-pointer",
+  "rounded-md",
+  "transition-colors",
+  "focus:outline-none",
+  "focus-visible:bg-base-200 dark:focus-visible:bg-base-700",
+  "hover:bg-base-500/10 dark:hover:bg-base-700"
+);
+const listItemSizeClasses = {
+  sm: clsx("py-0.5 px-1"),
+  lg: clsx("py-1.5 px-2")
+};
+const listItemSelectedClass = clsx(
+  "bg-primary-100",
+  "dark:bg-primary-800/50",
+  "font-bold",
+  "hover:bg-primary-200",
+  "dark:hover:bg-primary-700"
+);
+const listItemDisabledClass = clsx("pointer-events-none cursor-auto opacity-50");
+const listItemReadonlyClass = clsx("cursor-auto select-text hover:bg-transparent");
+const listItemIndentGuideClass = clsx("ml-4 w-2 border-l", borderDefault);
+const listItemContentClass = clsx("flex flex-1 flex-row", "items-center gap-1", "text-left");
+const getListItemSelectedIconClass = (selected) => clsx(selected ? "text-primary-600 dark:text-primary-400" : "text-black/30 dark:text-white/30");
+export {
+  getListItemSelectedIconClass,
+  listItemBaseClass,
+  listItemContentClass,
+  listItemDisabledClass,
+  listItemIndentGuideClass,
+  listItemReadonlyClass,
+  listItemSelectedClass,
+  listItemSizeClasses
+};
+//# sourceMappingURL=ListItem.styles.js.map

package/dist/components/data/list/ListItem.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/data/list/ListItem.styles.ts"],
+  "sourcesContent": ["import clsx from \"clsx\";\nimport { borderDefault, type ComponentSize } from \"../../../styles/tokens.styles\";\n\n// \uAE30\uBCF8 \uC544\uC774\uD15C \uC2A4\uD0C0\uC77C\nexport const listItemBaseClass = clsx(\n  \"flex\",\n  \"items-center\",\n  \"gap-2\",\n  \"py-1\",\n  \"px-1.5\",\n  \"m-px\",\n  \"cursor-pointer\",\n  \"rounded-md\",\n  \"transition-colors\",\n  \"focus:outline-none\",\n  \"focus-visible:bg-base-200 dark:focus-visible:bg-base-700\",\n  \"hover:bg-base-500/10 dark:hover:bg-base-700\",\n);\n\n// \uC0AC\uC774\uC988\uBCC4 \uC2A4\uD0C0\uC77C\nexport const listItemSizeClasses: Record<ComponentSize, string> = {\n  sm: clsx(\"py-0.5 px-1\"),\n  lg: clsx(\"py-1.5 px-2\"),\n};\n\n// \uC120\uD0DD\uB41C \uC0C1\uD0DC\nexport const listItemSelectedClass = clsx(\n  \"bg-primary-100\",\n  \"dark:bg-primary-800/50\",\n  \"font-bold\",\n  \"hover:bg-primary-200\",\n  \"dark:hover:bg-primary-700\",\n);\n\n// \uBE44\uD65C\uC131\uD654 \uC0C1\uD0DC\nexport const listItemDisabledClass = clsx(\"pointer-events-none cursor-auto opacity-50\");\n\n// \uC77D\uAE30 \uC804\uC6A9 \uC0C1\uD0DC\nexport const listItemReadonlyClass = clsx(\"cursor-auto select-text hover:bg-transparent\");\n\n// \uB4E4\uC5EC\uC4F0\uAE30 \uAC00\uC774\uB4DC (\uC911\uCCA9 \uC544\uC774\uD15C\uC6A9)\nexport const listItemIndentGuideClass = clsx(\"ml-4 w-2 border-l\", borderDefault);\n\n// \uC544\uC774\uD15C \uCF58\uD150\uCE20 \uC601\uC5ED\nexport const listItemContentClass = clsx(\"flex flex-1 flex-row\", \"items-center gap-1\", \"text-left\");\n\n// \uC120\uD0DD \uC544\uC774\uCF58 \uC0C9\uC0C1\nexport const getListItemSelectedIconClass = (selected: boolean) =>\n  clsx(selected ? \"text-primary-600 dark:text-primary-400\" : \"text-black/30 dark:text-white/30\");\n"],
+  "mappings": "AAAA,OAAO,UAAU;AACjB,SAAS,qBAAyC;AAG3C,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,sBAAqD;AAAA,EAChE,IAAI,KAAK,aAAa;AAAA,EACtB,IAAI,KAAK,aAAa;AACxB;AAGO,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,MAAM,wBAAwB,KAAK,4CAA4C;AAG/E,MAAM,wBAAwB,KAAK,8CAA8C;AAGjF,MAAM,2BAA2B,KAAK,qBAAqB,aAAa;AAGxE,MAAM,uBAAuB,KAAK,wBAAwB,sBAAsB,WAAW;AAG3F,MAAM,+BAA+B,CAAC,aAC3C,KAAK,WAAW,2CAA2C,kCAAkC;",
+  "names": []
+}